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 | 552 |
1 files changed, 0 insertions, 552 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 deleted file mode 100644 index 1ea50281204..00000000000 --- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss +++ /dev/null @@ -1,552 +0,0 @@ -// -// VARIABLES -// - -$top-level-item-color: $purple-900; - -// -// TEMPORARY OVERRIDES -// Needed while we serve both *_base and *_variant stylesheets -// TODO: These have to be removed during the ':sidebar_refactor' flag rollout -// -&.gl-dark .nav-sidebar li.active { - 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 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 { - color: $top-level-item-color; -} - -&.ui-indigo .nav-sidebar li.active .nav-icon-container svg { - fill: $top-level-item-color; -} - -.nav-sidebar { - box-shadow: none; - - li.active { - background-color: transparent; - box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout - } -} - -// -// MIXINS -// - -@mixin collapse-contextual-sidebar-content { - - @include context-header-collapsed; - - .context-header { - @include gl-h-auto; - - a { - @include gl-p-2; - } - } - - .sidebar-top-level-items > li { - .sidebar-sub-level-items { - &:not(.flyout-list) { - display: none; - } - } - } - - .nav-icon-container { - margin-right: 0; - } - - .toggle-sidebar-button { - width: $contextual-sidebar-collapsed-width; - - .collapse-text { - display: none; - } - - .icon-chevron-double-lg-left { - @include gl-rotate-180; - @include gl-display-block; // TODO: shouldn't be needed after the flag roll out - @include gl-m-0; - } - } -} - -@mixin collapse-contextual-sidebar { - width: $contextual-sidebar-collapsed-width; - - .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - - .badge.badge-pill:not(.fly-out-badge), - .nav-item-name, - .collapse-text { - @include gl-sr-only; - } - - .sidebar-top-level-items > li > a { - min-height: unset; - } - - .fly-out-top-item:not(.divider) { - display: block !important; - } - - .avatar-container { - margin: 0 auto; - } - - li.active:not(.fly-out-top-item) > a { - background-color: $indigo-900-alpha-008; - } -} - -@mixin sub-level-items-flyout { - .sidebar-sub-level-items { - @include media-breakpoint-up(sm) { - @include gl-fixed; - @include gl-top-0; - @include gl-left-0; - @include gl-ml-3; - @include gl-mt-0; - @include gl-px-0; - @include gl-pb-2; - @include gl-pt-0; - min-width: 150px; - background-color: $gray-10; - box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24; - border-style: none; - border-radius: $border-radius-default; - - .divider { - @include gl-display-none; - } - - .divider + li > a { - @include gl-mt-2; - } - - li:last-of-type a { - @include gl-mb-0; - } - - &.is-above { - @include gl-mt-0; - } - } - - a { - @include gl-px-4; - } - - .fly-out-top-item { - > a { - display: flex; - } - - .fly-out-badge { - margin-left: 8px; - } - } - - .fly-out-top-item-name { - flex: 1; - } - } -} - -@mixin context-header { - $avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08; - - @include gl-p-2; - @include gl-mb-2; - @include gl-mt-0; - - .avatar-container { - @include gl-font-weight-normal; - flex: none; - box-shadow: $avatar-box-shadow; - - &.rect-avatar { - @include gl-border-none; - - .avatar.s32 { - @extend .rect-avatar.s32; - //color: $gray-900; - box-shadow: $avatar-box-shadow; - } - } - } - - .sidebar-context-title { - color: $top-level-item-color; - } -} - -@mixin top-level-item { - @include gl-px-4; - @include gl-py-3; - @include gl-display-flex; - @include gl-align-items-center; - @include gl-rounded-base; - @include gl-w-auto; - @include gl-line-height-normal; - transition: none; - margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin; - - &:hover { - background-color: $indigo-900-alpha-008; - } -} - -@mixin fly-out-top-item($has-sub-items: false) { - @include gl-display-none; - - a, - a:hover, - &.active a, - .fly-out-top-item-container { - @include gl-mx-0; - @include gl-px-5; - @include gl-cursor-default; - @include gl-pointer-events-none; - @include gl-font-sm; - background-color: $purple-900; - color: $white; - - @if $has-sub-items { - @include gl-mt-0; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } @else { - @include gl-my-n2; - @include gl-mt-0; - @include gl-relative; - background-color: $black; - - strong { - @include gl-font-weight-normal; - } - - &::before { - @include gl-absolute; - content: ''; - display: block; - top: 50%; - left: -$gl-spacing-scale-2; - margin-top: -$gl-spacing-scale-2; - width: 0; - height: 0; - border-top: $gl-spacing-scale-2 solid transparent; - border-bottom: $gl-spacing-scale-2 solid transparent; - border-right: $gl-spacing-scale-2 solid $black; - } - } - } -} - -// -// PAGE-LAYOUT -// - -.page-with-contextual-sidebar { - transition: padding-left $sidebar-transition-duration; - - @include media-breakpoint-up(md) { - padding-left: $contextual-sidebar-collapsed-width; - } - - @include media-breakpoint-up(xl) { - padding-left: $contextual-sidebar-width; - } - - .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { - padding: 10px 0 15px; - } -} - -.page-with-icon-sidebar { - @include media-breakpoint-up(md) { - padding-left: $contextual-sidebar-collapsed-width; - } -} - -// -// THE PANEL -// - -.nav-sidebar { - @include gl-fixed; - @include gl-bottom-0; - @include gl-left-0; - transition: width $sidebar-transition-duration, left $sidebar-transition-duration; - z-index: 600; - width: $contextual-sidebar-width; - top: $header-height; - background-color: $gray-50; - transform: translate3d(0, 0, 0); - - &.sidebar-collapsed-desktop { - @include collapse-contextual-sidebar; - } - - &.sidebar-expanded-mobile { - left: 0; - } - - a { - @include gl-text-decoration-none; - color: $top-level-item-color; - } - - li { - white-space: nowrap; - - .nav-item-name { - flex: 1; - } - - > a, - > .fly-out-top-item-container { - @include top-level-item; - } - - &.active { - > a { - font-weight: $gl-font-weight-bold; - } - - &:not(.fly-out-top-item) { - > a:not(.has-sub-items) { - background-color: $indigo-900-alpha-008; - } - } - } - } - - ul { - padding-left: 0; - list-style: none; - } - - @include media-breakpoint-down(sm) { - left: (-$contextual-sidebar-width); - } - - .nav-icon-container { - display: flex; - margin-right: 8px; - } - - a:not(.has-sub-items) + .sidebar-sub-level-items { - .fly-out-top-item { - @include fly-out-top-item($has-sub-items: false); - } - } - - 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); - } - } - - @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { - &:not(.sidebar-expanded-mobile) { - @include collapse-contextual-sidebar; - @include collapse-contextual-sidebar-content; - } - } -} - -.nav-sidebar-inner-scroll { - @include gl-h-full; - @include gl-w-full; - @include gl-overflow-auto; - - > div.context-header { - @include gl-mt-2; - - a { - @include top-level-item; - @include context-header; - } - } -} - -.sidebar-top-level-items { - @include gl-mt-2; - margin-bottom: 60px; - - .context-header a { - @include context-header; - } - - > li { - .badge.badge-pill { - @include gl-rounded-lg; - @include gl-py-1; - @include gl-px-3; - background-color: $blue-100; - color: $blue-700; - } - - &.active { - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; - } - - .badge.badge-pill { - @include gl-font-weight-normal; // TODO: update in `theme_helper.scss` - color: $blue-700; // TODO: update in `theme_helper.scss` - } - } - } -} - -.sidebar-sub-level-items { - @include gl-py-0; - @include gl-display-none; - - &:not(.fly-out-list) { - li > a { - // The calculation formula: - // 12px: normal padding on the menu anchors - // + - // 16px: the width of the SVG icon in the top-level links - // + - // 8px: margin-right on the SVG icon in the top-level links - // = - // 36px (4.5 times the $grid-size) - padding-left: $grid-size * 4.5; - } - } -} - -.is-showing-fly-out { - @include sub-level-items-flyout; -} - -// -// COLLAPSED STATE -// - -.toggle-sidebar-button, -.close-nav-button { - @include side-panel-toggle; - background-color: $gray-50; - border-top: 1px solid $border-color; - color: $top-level-item-color; - position: fixed; - bottom: 0; - width: $contextual-sidebar-width; - - .collapse-text, - .icon-chevron-double-lg-left, - .icon-chevron-double-lg-right { - color: inherit; - } -} - -.collapse-text { - white-space: nowrap; - overflow: hidden; -} - -.sidebar-collapsed-desktop { - @include collapse-contextual-sidebar-content; -} - -// -// MOBILE PANEL -// - -.close-nav-button { - display: none; -} - -@include media-breakpoint-down(sm) { - .close-nav-button { - display: flex; - } - - .toggle-sidebar-button { - display: none; - } - - .mobile-overlay { - display: none; - - &.mobile-nav-open { - display: block; - position: fixed; - background-color: $black-transparent; - height: 100%; - width: 100%; - z-index: $zindex-dropdown-menu; - } - } -} - -// -// PANELS-SPECIFIC -// TODO: Check whether we can remove these in favor of the utility-classes -// - -.settings-avatar { - background-color: $white; - - svg { - fill: $gl-text-color-secondary; - margin: auto; - } -} - |