diff options
Diffstat (limited to 'app/assets/stylesheets/framework/contextual_sidebar_refactoring')
3 files changed, 907 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss new file mode 100644 index 00000000000..905ac260203 --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss @@ -0,0 +1,7 @@ +body:not(.sidebar-refactoring) { + @import 'contextual_sidebar_base'; +} + +body.sidebar-refactoring { + @import 'contextual_sidebar_variant'; +} diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss new file mode 100644 index 00000000000..306a9b74ebd --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss @@ -0,0 +1,386 @@ +@mixin collapse-contextual-sidebar-content { + + @include context-header-collapsed; + + .sidebar-top-level-items > li { + .sidebar-sub-level-items { + &:not(.flyout-list) { + display: none; + } + } + } + + .nav-icon-container { + margin-right: 0; + } + + .toggle-sidebar-button { + padding: 16px; + width: $contextual-sidebar-collapsed-width - 1px; + + .collapse-text, + .icon-chevron-double-lg-left { + display: none; + } + + .icon-chevron-double-lg-right { + display: block; + margin: 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 { + @include gl-sr-only; + } + + .sidebar-top-level-items > li > a { + min-height: 45px; + } + + .fly-out-top-item { + display: block; + } + + .avatar-container { + margin: 0 auto; + } +} + +@at-root { + .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; + } + } + + .settings-avatar { + background-color: $white; + + svg { + fill: $gl-text-color-secondary; + margin: auto; + } + } + + .nav-sidebar { + transition: width $sidebar-transition-duration, left $sidebar-transition-duration; + position: fixed; + z-index: 600; + width: $contextual-sidebar-width; + top: $header-height; + bottom: 0; + left: 0; + background-color: $gray-light; + box-shadow: inset -1px 0 0 $border-color; + transform: translate3d(0, 0, 0); + + &:not(.sidebar-collapsed-desktop) { + @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { + box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color; + } + } + + &.sidebar-collapsed-desktop { + @include collapse-contextual-sidebar; + } + + &.sidebar-expanded-mobile { + left: 0; + } + + a { + text-decoration: none; + } + + ul { + padding-left: 0; + list-style: none; + } + + li { + white-space: nowrap; + + a { + transition: padding $sidebar-transition-duration; + display: flex; + align-items: center; + padding: 12px $gl-padding; + color: $gl-text-color-secondary; + } + + .nav-item-name { + flex: 1; + } + + &.active { + > a { + font-weight: $gl-font-weight-bold; + } + } + } + + @include media-breakpoint-down(sm) { + left: (-$contextual-sidebar-width); + } + + .nav-icon-container { + display: flex; + margin-right: 8px; + } + + .fly-out-top-item { + display: none; + } + + svg { + height: 16px; + width: 16px; + } + + @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 { + height: 100%; + width: 100%; + overflow: auto; + } + + .sidebar-sub-level-items { + display: none; + padding-bottom: 8px; + + > li { + a { + padding: 8px 16px 8px 40px; + + &:hover, + &:focus { + background: $link-active-background; + color: $gl-text-color; + } + } + + &.active { + a { + &, + &:hover, + &:focus { + background: $link-active-background; + } + } + } + } + } + + .sidebar-top-level-items { + margin-bottom: 60px; + + > li { + > a { + @include media-breakpoint-up(sm) { + margin-right: 1px; + } + + &:hover { + color: $gl-text-color; + } + } + + &.is-showing-fly-out { + > a { + margin-right: 1px; + } + + .sidebar-sub-level-items { + @include media-breakpoint-up(sm) { + position: fixed; + top: 0; + left: 0; + min-width: 150px; + margin-top: -1px; + padding: 4px 1px; + background-color: $white; + box-shadow: 2px 1px 3px $dropdown-shadow-color; + border: 1px solid $gray-darker; + border-left: 0; + border-radius: 0 3px 3px 0; + + &::before { + content: ''; + position: absolute; + top: -30px; + bottom: -30px; + left: -10px; + right: -30px; + z-index: -1; + } + + &.is-above { + margin-top: 1px; + } + + .divider { + height: 1px; + margin: 4px -1px; + padding: 0; + background-color: $dropdown-divider-bg; + } + + > .active { + box-shadow: none; + + > a { + background-color: transparent; + } + } + + a { + padding: 8px 16px; + color: $gl-text-color; + + &:hover, + &:focus { + background-color: $gray-darker; + } + } + } + } + } + + .badge.badge-pill { + background-color: $inactive-badge-background; + color: $gl-text-color-secondary; + } + + &.active { + background: $link-active-background; + + > a { + margin-left: 4px; + // Subtract width of left border on active element + padding-left: $gl-padding-12; + } + + .badge.badge-pill { + font-weight: $gl-font-weight-bold; + } + + .sidebar-sub-level-items:not(.is-fly-out-only) { + display: block; + } + } + + &.active > a:hover, + &.is-over > a { + background-color: $link-hover-background; + } + } + } + + // Collapsed nav + + .toggle-sidebar-button, + .close-nav-button { + @include side-panel-toggle; + } + + .toggle-sidebar-button, + .close-nav-button { + position: fixed; + bottom: 0; + width: $contextual-sidebar-width - 1px; + border-top: 1px solid $border-color; + + svg { + margin-right: 8px; + } + + .icon-chevron-double-lg-right { + display: none; + } + } + + .collapse-text { + white-space: nowrap; + overflow: hidden; + } + + .sidebar-collapsed-desktop { + @include collapse-contextual-sidebar-content; + } + + .fly-out-top-item { + > a { + display: flex; + } + + .fly-out-badge { + margin-left: 8px; + } + } + + .fly-out-top-item-name { + flex: 1; + } + + // Mobile nav + + .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; + } + } + } +} + 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 new file mode 100644 index 00000000000..154b8c31e8b --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss @@ -0,0 +1,514 @@ +// +// 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 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 { + color: $gray-darkest; +} + +&.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-n2; + 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-3/-2; + margin-top: -$gl-spacing-scale-3; + 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; + } + } + } +} + +// +// 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 { + .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; + } +} + |