diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
| -rw-r--r-- | app/assets/stylesheets/framework/contextual-sidebar.scss (renamed from app/assets/stylesheets/framework/new-sidebar.scss) | 54 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 3 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 13 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/gitlab-theme.scss | 7 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 6 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 10 |
6 files changed, 37 insertions, 56 deletions
diff --git a/app/assets/stylesheets/framework/new-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss index 7a309f2c8a1..fa5d3833f3e 100644 --- a/app/assets/stylesheets/framework/new-sidebar.scss +++ b/app/assets/stylesheets/framework/contextual-sidebar.scss @@ -1,24 +1,10 @@ -@import "framework/variables"; -@import 'framework/tw_bootstrap_variables'; -@import "bootstrap/variables"; - -$active-background: rgba(0, 0, 0, .04); -$active-hover-background: $active-background; -$active-hover-color: $gl-text-color; -$inactive-badge-background: rgba(0, 0, 0, .08); -$hover-background: rgba(0, 0, 0, .06); -$hover-color: $gl-text-color; -$inactive-color: $gl-text-color-secondary; -$new-sidebar-width: 220px; -$new-sidebar-collapsed-width: 50px; - -.page-with-new-sidebar { +.page-with-contextual-sidebar { @media (min-width: $screen-md-min) { - padding-left: $new-sidebar-collapsed-width; + padding-left: $contextual-sidebar-collapsed-width; } @media (min-width: $screen-lg-min) { - padding-left: $new-sidebar-width; + padding-left: $contextual-sidebar-width; } // Override position: absolute @@ -34,7 +20,7 @@ $new-sidebar-collapsed-width: 50px; .page-with-icon-sidebar { @media (min-width: $screen-sm-min) { - padding-left: $new-sidebar-collapsed-width; + padding-left: $contextual-sidebar-collapsed-width; } } @@ -52,12 +38,12 @@ $new-sidebar-collapsed-width: 50px; &:hover, a:hover { - background-color: $hover-background; - color: $hover-color; + background-color: $link-hover-background; + color: $gl-text-color; .settings-avatar { svg { - fill: $hover-color; + fill: $gl-text-color; } } } @@ -85,7 +71,7 @@ $new-sidebar-collapsed-width: 50px; .nav-sidebar { position: fixed; z-index: 400; - width: $new-sidebar-width; + width: $contextual-sidebar-width; transition: left $sidebar-transition-duration; top: $header-height; bottom: 0; @@ -103,7 +89,7 @@ $new-sidebar-collapsed-width: 50px; &.sidebar-icons-only { width: auto; - min-width: $new-sidebar-collapsed-width; + min-width: $contextual-sidebar-collapsed-width; .nav-sidebar-inner-scroll { overflow-x: hidden; @@ -149,11 +135,11 @@ $new-sidebar-collapsed-width: 50px; display: flex; align-items: center; padding: 12px 16px; - color: $inactive-color; + color: $gl-text-color-secondary; } svg { - fill: $inactive-color; + fill: $gl-text-color-secondary; } } @@ -168,7 +154,7 @@ $new-sidebar-collapsed-width: 50px; } @media (max-width: $screen-xs-max) { - left: (-$new-sidebar-width); + left: (-$contextual-sidebar-width); } .nav-icon-container { @@ -210,8 +196,8 @@ $new-sidebar-collapsed-width: 50px; &:hover, &:focus { - background: $active-hover-background; - color: $active-hover-color; + background: $link-active-background; + color: $gl-text-color; } } @@ -220,7 +206,7 @@ $new-sidebar-collapsed-width: 50px; &, &:hover, &:focus { - background: $active-background; + background: $link-active-background; } } } @@ -308,11 +294,11 @@ $new-sidebar-collapsed-width: 50px; .badge { background-color: $inactive-badge-background; - color: $inactive-color; + color: $gl-text-color-secondary; } &.active { - background: $active-background; + background: $link-active-background; > a { margin-left: 4px; @@ -330,7 +316,7 @@ $new-sidebar-collapsed-width: 50px; &.active > a:hover, &.is-over > a { - background-color: $hover-background; + background-color: $link-hover-background; } } } @@ -340,7 +326,7 @@ $new-sidebar-collapsed-width: 50px; .toggle-sidebar-button, .close-nav-button { - width: $new-sidebar-width - 2px; + width: $contextual-sidebar-width - 2px; position: fixed; bottom: 0; padding: 16px; @@ -407,7 +393,7 @@ $new-sidebar-collapsed-width: 50px; } .toggle-sidebar-button { - width: $new-sidebar-collapsed-width - 2px; + width: $contextual-sidebar-collapsed-width - 2px; padding: 16px; .collapse-text, diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index a9d804e735d..1aa53b8f8cf 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -776,12 +776,15 @@ a, button, .menu-item { + margin-bottom: 0; border-radius: 0; box-shadow: none; padding: 8px 16px; text-align: left; white-space: normal; width: 100%; + font-weight: $gl-font-weight-normal; + line-height: normal; &.dropdown-menu-user-link { white-space: nowrap; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index b2847c348eb..0d80a85d521 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -65,7 +65,7 @@ display: flex; flex: 1; -webkit-flex: 1; - padding-left: 30px; + padding-left: 12px; position: relative; margin-bottom: 0; } @@ -221,10 +221,6 @@ box-shadow: 0 0 4px $search-input-focus-shadow-color; } - &.focus .fa-filter { - color: $common-gray-dark; - } - gl-emoji { display: inline-block; font-family: inherit; @@ -251,13 +247,6 @@ } } - .fa-filter { - position: absolute; - top: 10px; - left: 10px; - color: $gray-darkest; - } - .fa-times { right: 10px; color: $gray-darkest; diff --git a/app/assets/stylesheets/framework/gitlab-theme.scss b/app/assets/stylesheets/framework/gitlab-theme.scss index 52b87de7a3d..dc591c06c88 100644 --- a/app/assets/stylesheets/framework/gitlab-theme.scss +++ b/app/assets/stylesheets/framework/gitlab-theme.scss @@ -216,12 +216,9 @@ body { color: $theme-gray-900; } - &.active > a { + &.active > a, + &.active > a:hover { color: $white-light; - - &:hover { - color: $white-light; - } } } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index d79444fad79..62ba74ff582 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -239,10 +239,8 @@ fill: currentColor; } - &.header-user-dropdown-toggle { - .header-user-avatar { - border-color: $white-light; - } + &.header-user-dropdown-toggle .header-user-avatar { + border-color: $white-light; } } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index d5ca23ff870..8ab48e4844f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -9,6 +9,8 @@ $sidebar-transition-duration: .15s; $sidebar-breakpoint: 1024px; $default-transition-duration: .15s; $right-sidebar-transition-duration: .3s; +$contextual-sidebar-width: 220px; +$contextual-sidebar-collapsed-width: 50px; /* * Color schema @@ -359,6 +361,13 @@ $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09); $dropdown-hover-color: $blue-400; /* +* Contextual Sidebar +*/ +$link-active-background: rgba(0, 0, 0, .04); +$link-hover-background: rgba(0, 0, 0, .06); +$inactive-badge-background: rgba(0, 0, 0, .08); + +/* * Buttons */ $btn-active-gray: #ececec; @@ -404,7 +413,6 @@ $note-targe3-inside: #ffffd3; $note-line2-border: #ddd; $note-icon-gutter-width: 55px; - /* * Zen */ |