diff options
Diffstat (limited to 'app/assets/stylesheets/framework/contextual_sidebar.scss')
| -rw-r--r-- | app/assets/stylesheets/framework/contextual_sidebar.scss | 471 |
1 files changed, 471 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss new file mode 100644 index 00000000000..1acde98c3ae --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -0,0 +1,471 @@ +.page-with-contextual-sidebar { + transition: padding-left $sidebar-transition-duration; + + @media (min-width: $screen-md-min) { + padding-left: $contextual-sidebar-collapsed-width; + } + + @media (min-width: $screen-lg-min) { + padding-left: $contextual-sidebar-width; + } + + .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { + padding: 10px 0 15px; + } +} + +.page-with-icon-sidebar { + @media (min-width: $screen-sm-min) { + padding-left: $contextual-sidebar-collapsed-width; + } +} + +.context-header { + position: relative; + margin-right: 2px; + width: $contextual-sidebar-width; + + a { + transition: padding $sidebar-transition-duration; + font-weight: $gl-font-weight-bold; + display: flex; + align-items: center; + padding: 10px 16px 10px 10px; + color: $gl-text-color; + } + + &:hover, + a:hover { + background-color: $link-hover-background; + color: $gl-text-color; + } + + .avatar-container { + flex: 0 0 40px; + background-color: $white-light; + } + + .sidebar-context-title { + overflow: hidden; + text-overflow: ellipsis; + } +} + +.settings-avatar { + background-color: $white-light; + + svg { + fill: $gl-text-color-secondary; + margin: auto; + } +} + +.nav-sidebar { + transition: width $sidebar-transition-duration, left $sidebar-transition-duration; + position: fixed; + z-index: 400; + width: $contextual-sidebar-width; + top: $header-height; + bottom: 0; + left: 0; + background-color: $gray-light; + box-shadow: inset -2px 0 0 $border-color; + transform: translate3d(0, 0, 0); + + &:not(.sidebar-collapsed-desktop) { + @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { + box-shadow: inset -2px 0 0 $border-color, + 2px 1px 3px $dropdown-shadow-color; + } + } + + &.sidebar-collapsed-desktop { + width: $contextual-sidebar-collapsed-width; + + .nav-sidebar-inner-scroll { + overflow-x: hidden; + } + + .badge:not(.fly-out-badge), + .sidebar-context-title, + .nav-item-name { + display: none; + } + + .sidebar-top-level-items > li > a { + min-height: 44px; + } + + .fly-out-top-item { + display: block; + } + + .avatar-container { + margin-right: 0; + } + } + + &.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 15px; + color: $gl-text-color-secondary; + } + + .nav-item-name { + flex: 1; + } + + &.active { + > a { + font-weight: $gl-font-weight-bold; + } + } + } + + @media (max-width: $screen-xs-max) { + left: (-$contextual-sidebar-width); + } + + .nav-icon-container { + display: flex; + margin-right: 8px; + } + + .fly-out-top-item { + display: none; + } + + svg { + height: 16px; + width: 16px; + } +} + +.nav-sidebar-inner-scroll { + height: 100%; + width: 100%; + overflow: auto; + + @media (min-width: $screen-sm-min) { + overflow: hidden; + } +} + +.with-performance-bar .nav-sidebar { + top: $header-height + $performance-bar-height; +} + +.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 { + @media (min-width: $screen-sm-min) { + margin-right: 2px; + } + + &:hover { + color: $gl-text-color; + } + } + + &.is-showing-fly-out { + > a { + margin-right: 2px; + } + + .sidebar-sub-level-items { + @media (min-width: $screen-sm-min) { + position: fixed; + top: 0; + left: 0; + min-width: 150px; + margin-top: -1px; + padding: 4px 1px; + background-color: $white-light; + 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-color; + } + + > .active { + box-shadow: none; + + > a { + background-color: transparent; + } + } + + a { + padding: 8px 16px; + color: $gl-text-color; + + &:hover, + &:focus { + background-color: $gray-darker; + } + } + } + } + } + + .badge { + 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: 11px; + } + + .badge { + 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 { + width: $contextual-sidebar-width - 2px; + transition: width $sidebar-transition-duration; + position: fixed; + bottom: 0; + padding: $gl-padding; + background-color: $gray-light; + border: 0; + border-top: 2px solid $border-color; + color: $gl-text-color-secondary; + display: flex; + align-items: center; + line-height: 1; + + svg { + margin-right: 8px; + } + + .icon-angle-double-right { + display: none; + } + + &:hover { + background-color: $border-color; + color: $gl-text-color; + } +} + +.toggle-sidebar-button { + @media (max-width: $screen-xs-max) { + display: none; + } +} + +.collapse-text { + white-space: nowrap; + overflow: hidden; +} + +.sidebar-collapsed-desktop { + .context-header { + height: 60px; + width: $contextual-sidebar-collapsed-width; + + a { + padding: 10px 4px; + } + } + + .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 - 2px; + + .collapse-text, + .icon-angle-double-left { + display: none; + } + + .icon-angle-double-right { + display: block; + margin: 0; + } + } +} + +.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; +} + +.toggle-mobile-nav { + display: none; + background-color: transparent; + border: 0; + padding: 6px 16px; + margin: 0 0 0 -15px; + height: 46px; + + i { + font-size: 20px; + color: $gl-text-color-secondary; + } + + @media (max-width: $screen-xs-max) { + display: flex; + align-items: center; + + i { + font-size: 18px; + } + } + + @media (max-width: $screen-xs-max) { + + .breadcrumbs-links { + padding-left: $gl-padding; + border-left: 1px solid $gl-text-color-quaternary; + } + } +} + +@media (max-width: $screen-xs-max) { + .close-nav-button { + display: flex; + } +} + +.mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: fixed; + background-color: $black-transparent; + height: 100%; + width: 100%; + z-index: 300; + } +} + + +// Make issue boards full-height now that sub-nav is gone + +.boards-list { + height: calc(100vh - #{$header-height}); + + @media (min-width: $screen-sm-min) { + height: calc(100vh - 180px); + } +} + +.with-performance-bar .boards-list { + height: calc(100vh - #{$header-height} - #{$performance-bar-height}); +} |