diff options
Diffstat (limited to 'app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss')
| -rw-r--r-- | app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss | 386 |
1 files changed, 386 insertions, 0 deletions
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; + } + } + } +} + |