diff options
Diffstat (limited to 'app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss')
-rw-r--r-- | app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss | 54 |
1 files changed, 46 insertions, 8 deletions
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss index 154b8c31e8b..1ea50281204 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss @@ -13,13 +13,49 @@ $top-level-item-color: $purple-900; box-shadow: none; } +&.gl-dark .nav-sidebar .sidebar-sub-level-items { + box-shadow: none; + border: 1px solid $border-color; +} + +&.gl-dark .sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 { + color: $white; +} + &.gl-dark .nav-sidebar li a, &.gl-dark .toggle-sidebar-button .collapse-text, &.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left, &.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right, &.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title, -&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title { +&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title, +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a, +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover, +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a, +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container { + color: $gray-darkest; +} + +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a, +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a:hover, +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a, +&.gl-dark .nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container { + @include gl-mt-0; +} + +&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a, +&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a:hover, +&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a, +&.gl-dark .nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item .fly-out-top-item-container { + background: $white; color: $gray-darkest; + + &::before { + border-right-color: $white; + } +} + +&.gl-dark .nav-sidebar .sidebar-sub-level-items { + background-color: $white; } &.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a { @@ -183,7 +219,7 @@ $top-level-item-color: $purple-900; .avatar.s32 { @extend .rect-avatar.s32; - color: $gray-900; + //color: $gray-900; box-shadow: $avatar-box-shadow; } } @@ -226,7 +262,7 @@ $top-level-item-color: $purple-900; color: $white; @if $has-sub-items { - @include gl-mt-n2; + @include gl-mt-0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @else { @@ -244,13 +280,13 @@ $top-level-item-color: $purple-900; content: ''; display: block; top: 50%; - left: $gl-spacing-scale-3/-2; - margin-top: -$gl-spacing-scale-3; + left: -$gl-spacing-scale-2; + margin-top: -$gl-spacing-scale-2; width: 0; height: 0; - border-top: $gl-spacing-scale-3 solid transparent; - border-bottom: $gl-spacing-scale-3 solid transparent; - border-right: $gl-spacing-scale-3 solid $black; + border-top: $gl-spacing-scale-2 solid transparent; + border-bottom: $gl-spacing-scale-2 solid transparent; + border-right: $gl-spacing-scale-2 solid $black; } } } @@ -356,6 +392,8 @@ $top-level-item-color: $purple-900; } a.has-sub-items + .sidebar-sub-level-items { + @include gl-mt-n2; + .fly-out-top-item { @include fly-out-top-item($has-sub-items: true); } |