Files
gitlabhq/app/assets/stylesheets/framework/gitlab-theme.scss
T
Jacob SchatzandRobert Speicher 8ff33eb976 Merge branch 'pinned-sidebar' into 'master'
Pinned sidebar navigation option

## What does this MR do?

Gives the ability to pin the sidebar navigation. Pinning is only possible on screens with above `lg` which is `1200px` if not it reverts to being hidden by default.

## What are the relevant issue numbers?

Closes #18542 

## Screenshots (if relevant)

### Un-pinned

![Screen_Shot_2016-06-15_at_17.29.08](/uploads/82b7495df6ea46a2334a7c25d03b019b/Screen_Shot_2016-06-15_at_17.29.08.png)

### Pinned

![Screen_Shot_2016-06-15_at_17.29.41](/uploads/3eb381be807985d0a9583f000cb802f9/Screen_Shot_2016-06-15_at_17.29.41.png)

See merge request !4683
2016-06-15 20:59:51 -04:00

124 lines
2.2 KiB
SCSS

/**
* Styles the GitLab application with a specific color theme
*
* $color-light -
* $color -
* $color-darker -
* $color-dark -
*/
@mixin gitlab-theme($color-light, $color, $color-darker, $color-dark) {
.page-with-sidebar {
.toggle-nav-collapse,
.pin-nav-btn {
color: $color-light;
background: $color;
&:hover {
color: $white-light;
}
}
.sidebar-wrapper {
background: $color-darker;
.sidebar-user {
background: $color-darker;
color: $color-light;
&:hover {
background-color: $color-dark;
color: $white-light;
text-decoration: none;
}
}
}
.nav-sidebar li {
a {
color: $color-light;
&:hover, &:focus, &:active {
background: $color-dark;
}
i {
color: $color-light;
}
path,
polygon {
fill: $color-light;
}
.count {
color: $color-light;
background: $color-dark;
}
svg {
position: relative;
top: 3px;
}
}
&.separate-item {
border-top: 1px solid $color;
}
&.active a {
color: $white-light;
background: $color-dark;
&.no-highlight {
border: none;
}
i {
color: $white-light
}
path,
polygon {
fill: $white-light;
}
}
}
}
}
$theme-charcoal: #3d454d;
$theme-charcoal-dark: #383f45;
$theme-charcoal-text: #b9bbbe;
$theme-blue: #2980b9;
$theme-graphite: #666;
$theme-gray: #373737;
$theme-green: #019875;
$theme-violet: #548;
body {
&.ui_blue {
@include gitlab-theme(#becde9, $theme-blue, #1970a9, #096099);
}
&.ui_charcoal {
@include gitlab-theme($theme-charcoal-text, #485157, $theme-charcoal, $theme-charcoal-dark);
}
&.ui_graphite {
@include gitlab-theme(#ccc, #777, $theme-graphite, #555);
}
&.ui_gray {
@include gitlab-theme(#979797, $theme-gray, #272727, #222);
}
&.ui_green {
@include gitlab-theme(#adc, $theme-green, #018865, #017855);
}
&.ui_violet {
@include gitlab-theme(#98c, $theme-violet, #436, #325);
}
}