diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-17 13:07:47 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-06-17 13:07:47 +0300 |
commit | d670c3006e6e44901bce0d53cc4768d1d80ffa92 (patch) | |
tree | 8f65743c232e5b76850c4cc264ba15e1185815ff /app/assets/stylesheets | |
parent | a5f4bba440d7f9ea47046a0a561d49adf0a1e6d4 (diff) |
Add latest changes from gitlab-org/gitlab@14-0-stable-ee
Diffstat (limited to 'app/assets/stylesheets')
3 files changed, 163 insertions, 23 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); } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index c6f0b3a2ba7..00a6ee579d8 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -1240,6 +1240,18 @@ input { body.sidebar-refactoring.gl-dark .nav-sidebar li.active { box-shadow: none; } +body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items { + box-shadow: none; + border: 1px solid #404040; +} +body.sidebar-refactoring.gl-dark + .sidebar-top-level-items + .context-header + a + .avatar-container.rect-avatar + .avatar.s32 { + color: #333; +} body.sidebar-refactoring.gl-dark .nav-sidebar li a, body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text, body.sidebar-refactoring.gl-dark @@ -1257,9 +1269,91 @@ body.sidebar-refactoring.gl-dark .nav-sidebar-inner-scroll > div.context-header a - .sidebar-context-title { + .sidebar-context-title, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + color: #c4c4c4; +} +body.sidebar-refactoring.gl-dark + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + margin-top: 0; +} +body.sidebar-refactoring.gl-dark + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container { + background: #333; color: #c4c4c4; } +body.sidebar-refactoring.gl-dark + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + a::before, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item.active + a::before, +body.sidebar-refactoring.gl-dark + .nav-sidebar + a:not(.has-sub-items) + + .sidebar-sub-level-items + .fly-out-top-item + .fly-out-top-item-container::before { + border-right-color: #333; +} +body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items { + background-color: #333; +} body.sidebar-refactoring.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) @@ -1482,12 +1576,18 @@ body.sidebar-refactoring display: block; top: 50%; left: -0.25rem; - margin-top: -0.5rem; + margin-top: -0.25rem; width: 0; height: 0; - border-top: 0.5rem solid transparent; - border-bottom: 0.5rem solid transparent; - border-right: 0.5rem solid #fff; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid transparent; + border-right: 0.25rem solid #fff; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items { + margin-top: -0.25rem; } body.sidebar-refactoring .nav-sidebar @@ -1523,7 +1623,7 @@ body.sidebar-refactoring font-size: 0.75rem; background-color: #2f2a6b; color: #333; - margin-top: -0.25rem; + margin-top: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -1691,7 +1791,6 @@ body.sidebar-refactoring a .avatar-container.rect-avatar .avatar.s32 { - color: #fafafa; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } body.sidebar-refactoring @@ -1732,7 +1831,6 @@ body.sidebar-refactoring a .avatar-container.rect-avatar .avatar.s32 { - color: #fafafa; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } body.sidebar-refactoring diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index a05e27b6af0..4605b6de563 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -1444,12 +1444,18 @@ body.sidebar-refactoring display: block; top: 50%; left: -0.25rem; - margin-top: -0.5rem; + margin-top: -0.25rem; width: 0; height: 0; - border-top: 0.5rem solid transparent; - border-bottom: 0.5rem solid transparent; - border-right: 0.5rem solid #000; + border-top: 0.25rem solid transparent; + border-bottom: 0.25rem solid transparent; + border-right: 0.25rem solid #000; +} +body.sidebar-refactoring + .nav-sidebar + a.has-sub-items + + .sidebar-sub-level-items { + margin-top: -0.25rem; } body.sidebar-refactoring .nav-sidebar @@ -1485,7 +1491,7 @@ body.sidebar-refactoring font-size: 0.75rem; background-color: #2f2a6b; color: #fff; - margin-top: -0.25rem; + margin-top: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @@ -1653,7 +1659,6 @@ body.sidebar-refactoring a .avatar-container.rect-avatar .avatar.s32 { - color: #303030; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } body.sidebar-refactoring @@ -1694,7 +1699,6 @@ body.sidebar-refactoring a .avatar-container.rect-avatar .avatar.s32 { - color: #303030; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } body.sidebar-refactoring |