diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
20 files changed, 1187 insertions, 515 deletions
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 412a1e8d6c9..2c72c4b0f65 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -255,27 +255,9 @@ // This forces the height and width of the inner content to match // other gl-buttons despite all child elements being set to // `position:absolute` - &::after { - content: '\a0'; - display: block !important; - width: 1em; - color: transparent; - } - - .reaction-control-icon { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - - // center the icon vertically and horizontally within the button - display: flex; - align-items: center; - justify-content: center; - @include transition(opacity, transform); + .reaction-control-icon { .gl-icon { height: $default-icon-size; width: $default-icon-size; @@ -283,32 +265,26 @@ } .reaction-control-icon-neutral { - opacity: 1; + display: flex; } .reaction-control-icon-positive, .reaction-control-icon-super-positive { - opacity: 0; + display: none; } &:hover, &.active, &:active, &.is-active { - // extra specificty added to override another selector - .reaction-control-icon .gl-icon { - color: $blue-500; - transform: scale(1.15); - } - .reaction-control-icon-neutral { - opacity: 0; + display: none; } } &:hover { .reaction-control-icon-positive { - opacity: 1; + display: flex; } } @@ -316,11 +292,11 @@ &:active, &.is-active { .reaction-control-icon-positive { - opacity: 0; + display: none; } .reaction-control-icon-super-positive { - opacity: 1; + display: flex; } } @@ -336,17 +312,13 @@ } .reaction-control-icon-neutral { - opacity: 1; + display: flex; } .reaction-control-icon-positive, .reaction-control-icon-super-positive { - opacity: 0; + display: none; } } } } - -.awards .is-active { - box-shadow: inset 0 0 0 1px $blue-200; -} diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss new file mode 100644 index 00000000000..7dd7ab339dd --- /dev/null +++ b/app/assets/stylesheets/framework/blank.scss @@ -0,0 +1,118 @@ +.blank-state-parent-container { + .section-container { + padding: 10px; + } + + .section-body { + width: 100%; + height: 100%; + padding-bottom: 25px; + border-radius: $border-radius-default; + } +} + +.blank-state-row { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.blank-state-welcome { + text-align: center; + padding: $gl-padding 0 ($gl-padding * 2); + + .blank-state-welcome-title { + font-size: 24px; + } + + .blank-state-text { + margin-bottom: 0; + } +} + +.blank-state-link { + color: $gl-text-color; + margin-bottom: 15px; + + &:hover { + background-color: $gray-light; + text-decoration: none; + color: $gl-text-color; + } +} + +.blank-state-center { + padding-top: 20px; + padding-bottom: 20px; + text-align: center; +} + +.blank-state { + display: flex; + align-items: center; + padding: 20px 50px; + border: 1px solid $border-color; + border-radius: $border-radius-default; + min-height: 240px; + margin-bottom: $gl-padding; + width: calc(50% - #{$gl-padding-8}); + + @include media-breakpoint-down(sm) { + width: 100%; + flex-direction: column; + justify-content: center; + padding: 50px 20px; + + .column-small & { + width: 100%; + } + + } +} + +.blank-state, +.blank-state-center { + .blank-state-icon { + svg { + display: block; + margin: auto; + } + } + + .blank-state-title { + margin-top: 0; + font-size: 18px; + } + + .blank-state-body { + @include media-breakpoint-down(sm) { + text-align: center; + margin-top: 20px; + } + + @include media-breakpoint-up(sm) { + padding-left: 20px; + } + } +} + +@include media-breakpoint-up(lg) { + .column-large { + flex: 2; + } + + .column-small { + flex: 1; + margin-bottom: 15px; + + .blank-state { + max-width: 400px; + flex-wrap: wrap; + margin-left: 15px; + } + + .blank-state-icon { + margin-bottom: 30px; + } + } +} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index bfa4a640fe2..10481294df5 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -72,7 +72,7 @@ } &.content-component-block { - padding: 11px 0; + padding: 8px 0; background-color: $body-bg; } @@ -253,7 +253,7 @@ } .content-block-small { - padding: 10px 0; + padding: 4px 0; } .landing { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 603d28a8395..ceccec8c5cb 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -200,10 +200,6 @@ @include btn-red; } - &.btn-cancel { - float: right; - } - &.btn-grouped { @include btn-with-margin; } diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 5b7f1a3f38b..1fa03d66f32 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -30,6 +30,16 @@ cursor: pointer; stroke: $black; } + + // `app/assets/javascripts/pages/users/activity_calendar.js` sets this attribute + @for $i from 1 through length($calendar-activity-colors) { + $color: nth($calendar-activity-colors, $i); + $level: $i - 1; + + &[data-level='#{$level}'] { + fill: $color; + } + } } .user-contrib-text { diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss deleted file mode 100644 index 14d1a0663d0..00000000000 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ /dev/null @@ -1,453 +0,0 @@ -.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; - } -} - -.context-header { - position: relative; - margin-right: 2px; - width: $contextual-sidebar-width; - - > a, - > button { - transition: padding $sidebar-transition-duration; - font-weight: $gl-font-weight-bold; - display: flex; - width: 100%; - align-items: center; - padding: 10px 16px 10px 10px; - color: $gl-text-color; - background-color: transparent; - border: 0; - text-align: left; - - &:hover, - &:focus { - background-color: $link-hover-background; - color: $gl-text-color; - outline: 0; - } - } - - .avatar-container { - flex: 0 0 40px; - background-color: $white; - } - - .sidebar-context-title { - overflow: hidden; - text-overflow: ellipsis; - - &.text-secondary { - font-weight: normal; - font-size: 0.8em; - } - } -} - -.settings-avatar { - background-color: $white; - - svg { - fill: $gl-text-color-secondary; - margin: auto; - } -} - -@mixin collapse-contextual-sidebar-content { - .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 - 1px; - - .collapse-text, - .icon-chevron-double-lg-left { - display: none; - } - - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } - } -} - -.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; - } - } - - @mixin collapse-contextual-sidebar { - width: $contextual-sidebar-collapsed-width; - - .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - - .badge.badge-pill:not(.fly-out-badge), - .sidebar-context-title, - .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; - } - } - - &.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; -} - -.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 { - @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, -.toggle-right-sidebar-button { - transition: width $sidebar-transition-duration; - height: $toggle-sidebar-height; - padding: 0 $gl-padding; - background-color: $gray-light; - border: 0; - color: $gl-text-color-secondary; - display: flex; - align-items: center; - - &:hover { - background-color: $border-color; - color: $gl-text-color; - } -} - -.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; - } -} - -.toggle-right-sidebar-button { - border-bottom: 1px solid $border-color; -} - -.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_header.scss b/app/assets/stylesheets/framework/contextual_sidebar_header.scss new file mode 100644 index 00000000000..fdd03f4cdc8 --- /dev/null +++ b/app/assets/stylesheets/framework/contextual_sidebar_header.scss @@ -0,0 +1,57 @@ +.context-header { + position: relative; + margin-right: 2px; + width: $contextual-sidebar-width; + + > a, + > button { + transition: padding $sidebar-transition-duration; + font-weight: $gl-font-weight-bold; + display: flex; + width: 100%; + align-items: center; + padding: 10px 16px 10px 10px; + color: $gl-text-color; + background-color: transparent; + border: 0; + text-align: left; + + &:hover, + &:focus { + background-color: $link-hover-background; + color: $gl-text-color; + outline: 0; + } + } + + .avatar-container { + flex: 0 0 40px; + background-color: $white; + } + + .sidebar-context-title { + overflow: hidden; + text-overflow: ellipsis; + + &.text-secondary { + font-weight: normal; + font-size: 0.8em; + } + } +} + +@mixin context-header-collapsed { + .context-header { + height: 60px; + width: $contextual-sidebar-collapsed-width; + + a { + padding: 10px 4px; + } + } + + .sidebar-context-title { + @include gl-sr-only; + } +} + 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; + } +} + diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index a07e0b48cff..c0e9289309a 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -598,7 +598,9 @@ table.code { .diff-grid-left, .diff-grid-right { display: grid; - grid-template-columns: 50px 8px 1fr; + // Zero width column is a placeholder for the EE inline code quality diff + // see ee/.../diffs.scss for more details + grid-template-columns: 50px 8px 0 1fr; } .diff-grid-comments { @@ -628,7 +630,9 @@ table.code { .diff-grid-left, .diff-grid-right { - grid-template-columns: 50px 50px 8px 1fr; + // Zero width column is a placeholder for the EE inline code quality diff + // see ee/../diffs.scss for more details + grid-template-columns: 50px 50px 8px 0 1fr; } } } @@ -642,6 +646,10 @@ table.code { align-items: center; padding: 0 1rem; + .diff-stats-contents { + display: contents; + } + .diff-stats-group { padding: 0 0.25rem; } diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index 579a68ac8e4..40e11b50eba 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -4,7 +4,8 @@ .gfm-commit, .gfm-commit_range { - @extend .commit-sha; + @include gl-font-monospace; + font-size: 95%; } .gfm-project_member { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 7566a533911..8639b9a7f84 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -106,7 +106,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important &.menu-expanded { @include media-breakpoint-down(xs) { - .title-container { + .hide-when-menu-expanded { display: none; } @@ -665,3 +665,26 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important color: inherit !important; } } + +.top-nav-responsive { + @include gl-display-none; + color: var(--indigo-900, $theme-indigo-900); +} + +.top-nav-responsive-open { + .hide-when-top-nav-responsive-open { + @include media-breakpoint-down(xs) { + display: none !important; + } + } + + .top-nav-responsive { + @include media-breakpoint-down(xs) { + @include gl-display-block; + } + } + + .navbar-gitlab .header-content .title-container { + flex: 0; + } +} diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 73a2170fc68..b4a1d9f9977 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -33,6 +33,10 @@ padding-left: 10px; padding-right: 10px; white-space: pre; + + &:empty::before { + content: '\200b'; + } } } } @@ -46,7 +50,6 @@ a { font-family: $monospace-font; display: block; - font-size: $code-font-size !important; white-space: nowrap; i, diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 4f9896dd58a..e00bb83362a 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -38,8 +38,11 @@ body { } } -.content-wrapper { +.content-wrapper-margin { margin-top: $header-height; +} + +.content-wrapper { padding-bottom: 100px; } @@ -166,15 +169,8 @@ body { } .content-wrapper { - margin-top: 0; padding-bottom: 0; flex: 1; min-height: 0; } - - &.flash-shown { - .content-wrapper { - margin-top: 0; - } - } } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index a3e8b2c245c..9fe9f9a845c 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -135,7 +135,7 @@ ul.content-list { float: right; > .control-text { - margin-right: $gl-padding-top; + margin-right: $grid-size; line-height: $list-text-height; &:last-child { @@ -148,8 +148,6 @@ ul.content-list { > .dropdown.inline { margin-right: $grid-size; display: inline-block; - margin-top: 3px; - margin-bottom: 4px; &.btn-ldap-override { @include media-breakpoint-up(sm) { diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 1e2fc1445e8..fcf86680bb3 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -446,3 +446,19 @@ } } } + +@mixin side-panel-toggle { + transition: width $sidebar-transition-duration; + height: $toggle-sidebar-height; + padding: 0 $gl-padding; + background-color: $gray-light; + border: 0; + color: $gl-text-color-secondary; + display: flex; + align-items: center; + + &:hover { + background-color: $border-color; + color: $gl-text-color; + } +} diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index cb8a0c40f7f..e35feb8c62d 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -232,3 +232,8 @@ } } } + +.toggle-right-sidebar-button { + @include side-panel-toggle; + border-bottom: 1px solid $border-color; +} diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 10796f319bf..437915d5034 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -52,7 +52,7 @@ top: $system-header-height + $header-height; } - .content-wrapper { + .content-wrapper-margin { margin-top: $system-header-height + $header-height; } @@ -90,7 +90,7 @@ bottom: $system-footer-height; } - .content-wrapper { + .content-wrapper-margin { margin-bottom: 16px; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index bfb21d7112b..d3976cfa8c7 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -9,7 +9,7 @@ $sidebar-transition-duration: 0.3s; $sidebar-breakpoint: 1024px; $default-transition-duration: 0.15s; $contextual-sidebar-width: 220px; -$contextual-sidebar-collapsed-width: 50px; +$contextual-sidebar-collapsed-width: 48px; $toggle-sidebar-height: 48px; /** @@ -573,6 +573,9 @@ $inactive-badge-background: rgba($black, 0.08); $sidebar-toggle-height: 60px; $sidebar-toggle-width: 40px; $sidebar-milestone-toggle-bottom-margin: 10px; +$sidebar-avatar-size: 32px; +$sidebar-top-item-lr-margin: 4px; +$sidebar-top-item-tb-margin: 1px; /* * Buttons @@ -714,6 +717,18 @@ $job-line-number-margin: 43px; $job-arrow-margin: 55px; /* + * Calendar + */ +// See https://gitlab.com/gitlab-org/gitlab/-/issues/332150 to align with Pajamas Design System +$calendar-activity-colors: ( + #ededed, + #acd5f2, + #7fa8c9, + #527ba0, + #254e77, +); + +/* * Commit Page */ $commit-max-width-marker-color: rgba(0, 0, 0, 0); |