diff options
Diffstat (limited to 'app/assets/stylesheets')
38 files changed, 466 insertions, 2080 deletions
diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss index 90aab7ce342..30db4e2296d 100644 --- a/app/assets/stylesheets/application_dark.scss +++ b/app/assets/stylesheets/application_dark.scss @@ -57,4 +57,8 @@ body.gl-dark { } } } + + .md code { + background-color: $gray-200; + } } diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index c8f69bfdbaf..3885134e276 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -67,15 +67,12 @@ $avatar-sizes: ( ) ); -$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal, - $identicon-orange, $identicon-gray; - .avatar, .avatar-container { float: left; margin-right: $gl-padding; border-radius: $avatar-radius; - border: 1px solid $gray-normal; + border: 1px solid $t-gray-a-08; @each $size, $size-config in $avatar-sizes { &.s#{$size} { @@ -125,8 +122,8 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i .identicon { text-align: center; vertical-align: top; - color: $identicon-text-color; - background-color: $identicon-gray; + color: $gray-900; + background-color: $gray-50; // Sizes @each $size, $size-config in $avatar-sizes { @@ -143,9 +140,9 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i } // Background colors - @for $i from 1 through length($identicon-backgrounds) { + @for $i from 1 through length($gl-avatar-identicon-bgs) { &.bg#{$i} { - background-color: nth($identicon-backgrounds, $i); + background-color: nth($gl-avatar-identicon-bgs, $i); } } } diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss index d769ea73101..bcd06974813 100644 --- a/app/assets/stylesheets/components/batch_comments/review_bar.scss +++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss @@ -2,13 +2,15 @@ position: fixed; bottom: 0; left: 0; - width: 100%; - background: $white; z-index: $zindex-dropdown-menu; - padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar - border-top: 1px solid $border-color; + display: flex; + align-items: center; + width: 100%; + height: $toggle-sidebar-height; padding-left: $contextual-sidebar-width; padding-right: $gutter_collapsed_width; + background: $white; + border-top: 1px solid $border-color; transition: padding $sidebar-transition-duration; .page-with-icon-sidebar & { diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 2fbdaaaf467..804cc205279 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -39,7 +39,7 @@ @import 'framework/selects'; @import 'framework/sidebar'; @import 'framework/contextual_sidebar_header'; -@import 'framework/contextual_sidebar_refactoring/contextual_sidebar'; +@import 'framework/contextual_sidebar'; @import 'framework/tables'; @import 'framework/notes'; @import 'framework/tabs'; @@ -69,5 +69,5 @@ @import 'framework/system_messages'; @import 'framework/spinner'; @import 'framework/card'; -@import 'framework/editor-lite'; +@import 'framework/source_editor'; @import 'framework/diffs'; diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 1ea50281204..f5002a342b6 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -1,81 +1,4 @@ // -// 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 // @@ -112,7 +35,6 @@ $top-level-item-color: $purple-900; .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; } } @@ -219,15 +141,10 @@ $top-level-item-color: $purple-900; .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 { @@ -258,8 +175,6 @@ $top-level-item-color: $purple-900; @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; @@ -269,7 +184,8 @@ $top-level-item-color: $purple-900; @include gl-my-n2; @include gl-mt-0; @include gl-relative; - background-color: $black; + @include gl-text-white; + background: var(--black, $black); strong { @include gl-font-weight-normal; @@ -287,6 +203,7 @@ $top-level-item-color: $purple-900; border-top: $gl-spacing-scale-2 solid transparent; border-bottom: $gl-spacing-scale-2 solid transparent; border-right: $gl-spacing-scale-2 solid $black; + border-right-color: var(--black, $black); } } } @@ -343,7 +260,7 @@ $top-level-item-color: $purple-900; a { @include gl-text-decoration-none; - color: $top-level-item-color; + color: $gray-900; } li { @@ -392,13 +309,19 @@ $top-level-item-color: $purple-900; } 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); } } + a.has-sub-items + .sidebar-sub-level-items.fly-out-list { + @include gl-mt-n2; + + &.is-above { + @include gl-mt-2; + } + } + @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; @@ -445,8 +368,8 @@ $top-level-item-color: $purple-900; } .badge.badge-pill { - @include gl-font-weight-normal; // TODO: update in `theme_helper.scss` - color: $blue-700; // TODO: update in `theme_helper.scss` + @include gl-font-weight-normal; + color: $blue-700; } } } @@ -484,7 +407,6 @@ $top-level-item-color: $purple-900; @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; @@ -538,14 +460,10 @@ $top-level-item-color: $purple-900; // // 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/contextual_sidebar_header.scss b/app/assets/stylesheets/framework/contextual_sidebar_header.scss index fdd03f4cdc8..7159dadf7cc 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar_header.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar_header.scss @@ -32,6 +32,7 @@ .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; + color: $gray-900; &.text-secondary { font-weight: normal; diff --git a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss deleted file mode 100644 index 905ac260203..00000000000 --- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar.scss +++ /dev/null @@ -1,7 +0,0 @@ -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 deleted file mode 100644 index 306a9b74ebd..00000000000 --- a/app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_base.scss +++ /dev/null @@ -1,386 +0,0 @@ -@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/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index c0e9289309a..f8b1735207c 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -847,8 +847,6 @@ table.code { .commit-stat-summary { @include media-breakpoint-up(sm) { - margin-left: -$gl-padding; - padding-left: $gl-padding; background-color: $white; } } @@ -1190,3 +1188,9 @@ table.code { margin-top: 0; } } + +// Note: Prevents tall files from appearing above sticky tabs +.diffs .vue-recycle-scroller__item-view > div:not(.active) { + position: absolute; + bottom: 100vh; +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 894eddbe1a7..144a396ea65 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -30,7 +30,9 @@ .dropdown-menu { @include set-visible; min-height: $dropdown-min-height; - max-height: $dropdown-max-height; + // Prevents double scrollbar on dropdowns that also + // have max-height set on an inner scrollable element + max-height: $dropdown-max-height-lg; overflow-y: auto; &.dropdown-extended-height { @@ -239,7 +241,7 @@ max-width: 500px; margin-top: $dropdown-vertical-offset; margin-bottom: 24px; - font-size: 14px; + font-size: 0.875rem; font-weight: $gl-font-weight-normal; padding: 8px 0; background-color: $white; @@ -931,13 +933,9 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { } .frequent-items-list-item-container { - .frequent-items-item-avatar-container, - .frequent-items-item-metadata-container { - flex-shrink: 0; - } - .frequent-items-item-metadata-container { display: flex; + flex-shrink: 0; flex-direction: column; justify-content: center; } @@ -949,12 +947,6 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { white-space: nowrap; } - &:hover { - .frequent-items-item-avatar-container .avatar { - border-color: $gray-50; - } - } - .frequent-items-item-title { font-size: $gl-font-size; font-weight: 400; diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index bda123fa7ea..5ad7ceecb2b 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -508,3 +508,25 @@ span.idiff { } } } + +// +// IMPORTANT PERFORMANCE OPTIMIZATION BELOW +// +// * :nth-of-type(1n+70) - makes sure we do not render lines 71+ right +// away. Even though the HTML is injected in the DOM, as long as we do +// not render those lines, the browser doesn't need to spend resources +// calculating and repainting what's hidden. +// +// * :not(:last-of-type) makes sure that we output the last line of the +// blob's snippet. This is important because the column with the line +// numbers has auto width and is expanding based on the content in it. +// This leads to unnecessary layout shift when the last lines of the +// snippet are longer than two (2) digits. +// EXAMPLE: Let's say, we have a blob with 100 lines. If we output 70 +// lines, and then, the remaining 30 (incl the line 100), it will lead +// to the layout reflow and styles recalculation when we output line +// 100 (because the width of '100' is always bigger than '70'). By +// outputting the last line right away, we prevent that as the column +// will always be expanded to the maximum needed width. +.blob-viewer[data-loading] .file-content.code .line:nth-of-type(1n+70):not(:last-of-type), +.blob-viewer[data-loading] .file-content.code .file-line-num:nth-of-type(1n+70):not(:last-of-type) {display: none !important;} diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index d5f7ec68454..30a1c8af414 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -56,24 +56,19 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); } .flash-alert { - background-color: $red-100; - color: $red-700; + background-color: $red-50; } .flash-notice { - background-color: $blue-100; - color: $blue-700; + background-color: $blue-50; } .flash-success { - background-color: $theme-green-100; - color: $green-700; + background-color: $green-50; } .flash-warning { background-color: $orange-50; - color: $gray-900; - cursor: default; } .flash-text, diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 8639b9a7f84..65d914e47cf 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -555,7 +555,8 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important visibility: visible; } -.with-performance-bar .navbar-gitlab { +.with-performance-bar .navbar-gitlab, +.with-performance-bar .fixed-top { top: $performance-bar-height; } @@ -563,7 +564,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important justify-content: center; height: $header-height; background: $white; - border-bottom: 1px solid $white-normal; + border-bottom: 1px solid $gray-100; .tanuki-logo, .brand-header-logo { diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index 9fe9f9a845c..d2bb1e3d555 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -149,12 +149,6 @@ ul.content-list { margin-right: $grid-size; display: inline-block; - &.btn-ldap-override { - @include media-breakpoint-up(sm) { - margin-bottom: 0; - } - } - &.has-tooltip, &:last-child { margin-right: 0; diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/source_editor.scss index 05b53e0c3d8..a967d9a71f1 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/source_editor.scss @@ -21,11 +21,11 @@ } } -[id^='editor-lite-'] { +[id^='source-editor-'] { height: 500px; } -.monaco-editor.gl-editor-lite { +.monaco-editor.gl-source-editor { .margin-view-overlays { .line-numbers { @include gl-display-flex; diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 437915d5034..1cb34bea069 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -60,7 +60,8 @@ // System Header &.with-performance-bar { // main navigation - header.navbar-gitlab { + header.navbar-gitlab, + .fixed-top { top: $performance-bar-height + $system-header-height; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index d3976cfa8c7..726f8e28efe 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -634,18 +634,6 @@ $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; /* -* Identicon -*/ -$identicon-text-color: #525252 !default; -$identicon-red: #ffebee !default; -$identicon-purple: #f3e5f5 !default; -$identicon-indigo: #e8eaf6 !default; -$identicon-blue: #e3f2fd !default; -$identicon-teal: #e0f2f1 !default; -$identicon-orange: #fbe9e7 !default; -$identicon-gray: #eee !default; - -/* * Calendar */ $calendar-hover-bg: #ecf3fe; diff --git a/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss index 41bb6d107f1..db81cc7fdd4 100644 --- a/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss +++ b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss @@ -1,3 +1,3 @@ -.usage-data { +.service-data-payload-container { max-height: 400px; } diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index a00a71b07e7..428bd90ddd7 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -472,6 +472,10 @@ .sidebar-collapsed-icon { display: none; } + + .gl-drawer-header { + align-items: flex-start; + } } .board-header-collapsed-info-icon:hover { diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 009019a45d9..47580e37eca 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -771,6 +771,12 @@ $ide-commit-header-height: 48px; } .dropdown-menu-toggle { + background-color: var(--ide-input-background, transparent); + + &:hover { + background-color: var(--ide-dropdown-btn-hover-background, $white-normal); + } + svg { vertical-align: middle; @@ -779,16 +785,6 @@ $ide-commit-header-height: 48px; color: var(--ide-text-color-secondary, $gray-500); } } - - &:hover { - background-color: var(--ide-dropdown-btn-hover-background, $white-normal); - } - } - - &.show { - .dropdown-menu-toggle { - background-color: var(--ide-input-background, $white-dark); - } } } diff --git a/app/assets/stylesheets/page_bundles/members.scss b/app/assets/stylesheets/page_bundles/members.scss index 7b4c74b8253..62dd3dcb9c0 100644 --- a/app/assets/stylesheets/page_bundles/members.scss +++ b/app/assets/stylesheets/page_bundles/members.scss @@ -1,10 +1,5 @@ @import 'mixins_and_variables_and_functions'; -.project-members-title { - padding-bottom: 10px; - border-bottom: 1px solid $border-color; -} - .invite-users-form { .btn-success { margin-right: 10px; @@ -12,12 +7,6 @@ } .member { - &.is-overridden { - .btn-ldap-override { - display: none !important; - } - } - .controls { @include media-breakpoint-up(sm) { display: flex; @@ -31,111 +20,12 @@ .form-group { margin-bottom: 0; } - - &.existing-title { - @include media-breakpoint-up(sm) { - float: left; - } - } -} - -.member-form-control { - @include media-breakpoint-down(xs) { - margin-right: 0; - width: auto; - } -} - -.member-search-btn { - position: absolute; - right: 4px; - top: 0; - height: $input-height; - padding-left: 10px; - padding-right: 10px; - color: $gray-darkest; - background: transparent; - border: 0; - outline: 0; } .members-ldap { align-self: center; } -.alert-member-ldap { - background-color: $orange-50; - - @include media-breakpoint-up(sm) { - line-height: 40px; - } - - > p { - float: left; - margin-bottom: 10px; - color: $orange-600; - - @include media-breakpoint-up(sm) { - padding-left: 55px; - margin-bottom: 0; - } - } - - .controls { - width: 100%; - - @include media-breakpoint-up(sm) { - width: auto; - } - } -} - -.btn-ldap-override { - width: 100%; - - @include media-breakpoint-up(sm) { - margin-left: 10px; - width: auto; - } -} - -.flex-project-members-panel { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - @include media-breakpoint-down(sm) { - display: block; - - .flex-project-title { - vertical-align: top; - display: inline-block; - max-width: 90%; - } - } - - .flex-project-title { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .badge.badge-pill { - height: 17px; - line-height: 16px; - margin-right: 5px; - padding-top: 1px; - padding-bottom: 1px; - } - - .flex-users-form { - flex-wrap: nowrap; - white-space: nowrap; - margin-left: auto; - } -} - .card { .card-header { .badge.badge-pill { @@ -168,33 +58,11 @@ word-break: break-all; } - .form-control { - width: inherit; - } - - .btn { - align-self: flex-start; - } - @include media-breakpoint-down(sm) { .member-access-text { margin: 0 0 $gl-padding-4 ($grid-size * 6); } } - - @include media-breakpoint-down(xs) { - display: block; - - .controls > .btn, - .controls .member-form-control { - margin: 0 0 $gl-padding-8; - display: block; - } - - .form-control { - width: 100%; - } - } } @@ -231,25 +99,5 @@ float: none; display: block; } - - .dropdown-menu-toggle, - .dropdown-menu, - .form-control, - .list-item-name { - width: 100%; - } - - .dropdown-menu { - margin-top: 0; - } - - .member-form-control { - margin: 5px 0; - } - - .btn { - width: 100%; - margin-left: 0; - } } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 5e9dd883635..6a20ff3b3fa 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -7,6 +7,7 @@ .diff-files-holder { flex: 1; min-width: 0; + z-index: 203; .vue-recycle-scroller__item-wrapper { overflow: visible; diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 03dd12ec230..08d9d24d246 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -65,15 +65,32 @@ $status-box-line-height: 26px; line-height: $line-height-base; padding: 14px 16px; display: flex; + justify-content: space-between; .title { flex: 1; flex-grow: 2; } - .counter { - flex: 0; - padding-left: 16px; + .issuable-count-weight { + white-space: nowrap; + + .counter, + .weight { + color: var(--gray-500, $gray-500); + font-weight: $gl-font-weight-bold; + } + } + + &.text-white { + .issuable-count-weight svg { + fill: $white; + } + + .issuable-count-weight .counter, + .weight { + color: var(--white, $white); + } } } } diff --git a/app/assets/stylesheets/page_bundles/new_namespace.scss b/app/assets/stylesheets/page_bundles/new_namespace.scss index 60aa3c8f29f..189f010bdb2 100644 --- a/app/assets/stylesheets/page_bundles/new_namespace.scss +++ b/app/assets/stylesheets/page_bundles/new_namespace.scss @@ -8,10 +8,11 @@ $new-namespace-panel-height: 240px; } .new-namespace-panel-wrapper { - @include media-breakpoint-down(md) { + width: 50%; + + @include media-breakpoint-down(lg) { width: 100%; } - width: 50%; } .new-namespace-panel { diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index 1081dd8f6d8..7b54be5c91f 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -62,6 +62,12 @@ .pipeline-tags .label-container { white-space: normal; } + + .dark-mode-override { + .gl-dark & { + background-color: $white; + } + } } // Mini Pipelines diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 98074f8af29..d233adbf3d2 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -87,6 +87,20 @@ width: 145px; } + .empty-state--agent { + .text-content { + @include gl-max-w-full; + @include media-breakpoint-up(lg) { + max-width: 70%; + } + } + + .gl-alert-actions { + @include gl-mt-0; + @include gl-flex-wrap; + } + } + .top-area .nav-controls > .btn.btn-add-cluster { margin-right: 0; } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index a114a1dc82d..5173aeb824e 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -183,6 +183,8 @@ } .commit-nav-buttons { + margin: 0 0.5rem; + a.btn, button { // See: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/730 diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 1bc6dfbd84a..ee97e8af296 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -175,7 +175,8 @@ } } - .block { + .block, + .issuable-sidebar-header { @include clearfix; padding: $gl-padding 0; border-bottom: 1px solid $border-gray-normal; @@ -184,11 +185,6 @@ width: $gutter-inner-width; // -- - &.issuable-sidebar-header { - padding-top: 0; - padding-bottom: 10px; - } - &:last-child { border: 0; } @@ -273,10 +269,6 @@ padding: 0 20px; } - .issuable-sidebar-header { - padding-top: 10px; - } - &:not(.boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) { .issuable-sidebar-header { display: none; @@ -302,7 +294,6 @@ } .gutter-toggle { - margin-top: 7px; border-left: 1px solid $border-gray-normal; text-align: center; } @@ -331,20 +322,21 @@ width: $gutter-collapsed-width; padding: 0; - .block { + .block, + .issuable-sidebar-header { width: $gutter-collapsed-width - 2px; padding: 0; border-bottom: 0; overflow: hidden; + } + .block, + .gutter-toggle, + .sidebar-collapsed-container { &.with-sub-blocks .sub-block:hover, &:not(.with-sub-blocks):hover { background-color: $gray-100; } - - &.issuable-sidebar-header { - padding-top: 0; - } } .participants { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 1abaff40bc9..8807ab5e597 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -87,6 +87,10 @@ $tabs-holder-z-index: 250; border: 1px solid $border-color; border-radius: $border-radius-default; background: var(--white, $white); + + > .mr-widget-border-top:first-of-type { + border-top: 0; + } } .mr-widget-body, @@ -702,7 +706,7 @@ $tabs-holder-z-index: 250; .mr-version-dropdown, .mr-version-compare-dropdown { - margin: 0 7px; + margin: 0 0.5rem; } .dropdown-title { @@ -711,7 +715,7 @@ $tabs-holder-z-index: 250; // Shortening button height by 1px to make compare-versions // header 56px and fit into our 8px design grid - button { + .btn { height: 34px; } @@ -885,7 +889,7 @@ $tabs-holder-z-index: 250; .media-body { min-width: 0; font-size: 12px; - margin-left: 40px; + margin-left: 32px; } &:not(:last-child) { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 01739c7eb3e..4a866489806 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -763,6 +763,7 @@ $system-note-svg-size: 16px; .note-button.add-diff-note { @include btn-comment-icon; opacity: 0; + will-change: opacity; &[disabled] { background: $white; diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index ad040f65f3c..d38c1818f53 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -54,6 +54,8 @@ white-space: pre; word-wrap: normal; border-left: $border-style; + text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; /* stylelint-disable-line property-no-vendor-prefix */ } code { @@ -65,7 +67,7 @@ } .line-numbers { - padding: 10px; + padding: 10px 10px 10px 0; text-align: right; float: left; @@ -86,18 +88,24 @@ } } + .file-actions { + flex-shrink: 0; + } + .file-title-flex-parent { display: flex; - align-items: center; + align-items: flex-start; justify-content: space-between; background-color: $gray-light; border: $border-style; border-bottom: 0; - padding: $gl-padding-top $gl-padding; + padding: $gl-padding; margin: 0; border-radius: $border-radius-default $border-radius-default 0 0; .file-header-content { + max-width: 75%; + .file-title-name { font-weight: $gl-font-weight-bold; } @@ -105,6 +113,7 @@ .gitlab-embedded-snippets-title { text-decoration: none; color: $gl-text-color; + word-break: break-word; &:hover { text-decoration: underline; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 00a6ee579d8..a497f56f3b8 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -13,6 +13,10 @@ body.gl-dark { --orange-400: #ab6100; --gl-text-color: #fafafa; --border-color: #4f4f4f; + --black: #fff; +} +.nav-sidebar li.active { + box-shadow: none; } :root { --white: #333; @@ -145,10 +149,6 @@ h1 { color: transparent; text-shadow: 0 0 0 #fafafa; } -.form-control::-ms-input-placeholder { - color: #bfbfbf; - opacity: 1; -} .form-control::placeholder { color: #bfbfbf; opacity: 1; @@ -175,7 +175,6 @@ h1 { color: #fafafa; text-align: center; vertical-align: middle; - -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -459,8 +458,7 @@ a { border-top: 1px solid #404040; } .toggle-sidebar-button .collapse-text, -.toggle-sidebar-button .icon-chevron-double-lg-left, -.toggle-sidebar-button .icon-chevron-double-lg-right { +.toggle-sidebar-button .icon-chevron-double-lg-left { color: #999; } svg { @@ -546,7 +544,7 @@ body { max-width: 500px; margin-top: 4px; margin-bottom: 24px; - font-size: 14px; + font-size: 0.875rem; font-weight: 400; padding: 8px 0; background-color: #333; @@ -626,9 +624,6 @@ input { border-radius: 4px; padding: 6px 10px; } -.form-control::-ms-input-placeholder { - color: #868686; -} .form-control::placeholder { color: #868686; } @@ -933,6 +928,7 @@ input { .context-header .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; + color: #fafafa; } @media (min-width: 768px) { .page-with-contextual-sidebar { @@ -951,20 +947,14 @@ input { } .nav-sidebar { position: fixed; + bottom: 0; + left: 0; z-index: 600; width: 220px; top: 40px; - bottom: 0; - left: 0; background-color: #303030; - box-shadow: inset -1px 0 0 #404040; transform: translate3d(0, 0, 0); } -@media (min-width: 576px) and (max-width: 576px) { - .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #404040, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} .nav-sidebar.sidebar-collapsed-desktop { width: 48px; } @@ -972,7 +962,8 @@ input { overflow-x: hidden; } .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), -.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { +.nav-sidebar.sidebar-collapsed-desktop .nav-item-name, +.nav-sidebar.sidebar-collapsed-desktop .collapse-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -984,479 +975,29 @@ input { width: 1px; } .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { - min-height: 45px; -} -.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { - display: block; -} -.nav-sidebar.sidebar-collapsed-desktop .avatar-container { - margin: 0 auto; -} -.nav-sidebar a { - text-decoration: none; -} -.nav-sidebar ul { - padding-left: 0; - list-style: none; -} -.nav-sidebar li { - white-space: nowrap; -} -.nav-sidebar li a { - display: flex; - align-items: center; - padding: 12px 16px; - color: #999; -} -.nav-sidebar li .nav-item-name { - flex: 1; -} -.nav-sidebar li.active > a { - font-weight: 600; -} -@media (max-width: 767.98px) { - .nav-sidebar { - left: -220px; - } -} -.nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -.nav-sidebar .fly-out-top-item { - display: none; -} -.nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 48px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { - min-height: 45px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { - display: block; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { - margin: 0 auto; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { - height: 60px; - width: 48px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { - padding: 10px 4px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { - margin-right: 0; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - padding: 16px; - width: 47px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } -} -.nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -.sidebar-sub-level-items { - display: none; - padding-bottom: 8px; -} -.sidebar-sub-level-items > li a { - padding: 8px 16px 8px 40px; -} -.sidebar-sub-level-items > li.active a { - background: rgba(255, 255, 255, 0.04); -} -.sidebar-top-level-items { - margin-bottom: 60px; -} -@media (min-width: 576px) { - .sidebar-top-level-items > li > a { - margin-right: 1px; - } -} -.sidebar-top-level-items > li .badge.badge-pill { - background-color: rgba(255, 255, 255, 0.08); - color: #999; -} -.sidebar-top-level-items > li.active { - background: rgba(255, 255, 255, 0.04); -} -.sidebar-top-level-items > li.active > a { - margin-left: 4px; - padding-left: 12px; -} -.sidebar-top-level-items > li.active .badge.badge-pill { - font-weight: 600; -} -.sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; -} -.toggle-sidebar-button, -.close-nav-button { - height: 48px; - padding: 0 16px; - background-color: #303030; - border: 0; - color: #999; - display: flex; - align-items: center; -} -.toggle-sidebar-button, -.close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #404040; -} -.toggle-sidebar-button svg, -.close-nav-button svg { - margin-right: 8px; -} -.toggle-sidebar-button .icon-chevron-double-lg-right, -.close-nav-button .icon-chevron-double-lg-right { - display: none; -} -.collapse-text { - white-space: nowrap; - overflow: hidden; -} -.sidebar-collapsed-desktop .context-header { - height: 60px; - width: 48px; -} -.sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -.sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -.sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -.sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 47px; -} -.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, -.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { - display: none; -} -.sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; -} -.fly-out-top-item > a { - display: flex; -} -.fly-out-top-item .fly-out-badge { - margin-left: 8px; -} -.fly-out-top-item-name { - flex: 1; -} -.close-nav-button { - display: none; -} -@media (max-width: 767.98px) { - .close-nav-button { - display: flex; - } - .toggle-sidebar-button { - display: none; - } -} -body.sidebar-refactoring.gl-dark .nav-sidebar li.active { - box-shadow: none; -} -body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items { - box-shadow: none; - border: 1px solid #404040; -} -body.sidebar-refactoring.gl-dark - .sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar - .avatar.s32 { - color: #333; -} -body.sidebar-refactoring.gl-dark .nav-sidebar li a, -body.sidebar-refactoring.gl-dark .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring.gl-dark - .toggle-sidebar-button - .icon-chevron-double-lg-left, -body.sidebar-refactoring.gl-dark - .toggle-sidebar-button - .icon-chevron-double-lg-right, -body.sidebar-refactoring.gl-dark - .sidebar-top-level-items - .context-header - a - .sidebar-context-title, -body.sidebar-refactoring.gl-dark - .nav-sidebar-inner-scroll - > div.context-header - a - .sidebar-context-title, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item.active - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container { - color: #c4c4c4; -} -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item.active - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container { - margin-top: 0; -} -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item.active - a, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container { - background: #333; - color: #c4c4c4; -} -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - a::before, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item.active - a::before, -body.sidebar-refactoring.gl-dark - .nav-sidebar - a:not(.has-sub-items) - + .sidebar-sub-level-items - .fly-out-top-item - .fly-out-top-item-container::before { - border-right-color: #333; -} -body.sidebar-refactoring.gl-dark .nav-sidebar .sidebar-sub-level-items { - background-color: #333; -} -body.sidebar-refactoring.ui-indigo - .nav-sidebar - li.active:not(.fly-out-top-item) - > a { - color: #2f2a6b; -} -body.sidebar-refactoring.ui-indigo - .nav-sidebar - li.active - .nav-icon-container - svg { - fill: #2f2a6b; -} -body.sidebar-refactoring .nav-sidebar { - box-shadow: none; -} -body.sidebar-refactoring .nav-sidebar li.active { - background-color: transparent; - box-shadow: none !important; -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 48px; - } -} -@media (min-width: 1200px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-icon-sidebar { - padding-left: 48px; - } -} -body.sidebar-refactoring .nav-sidebar { - position: fixed; - bottom: 0; - left: 0; - z-index: 600; - width: 220px; - top: 40px; - background-color: #303030; - transform: translate3d(0, 0, 0); -} -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { - width: 48px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .badge.badge-pill:not(.fly-out-badge), -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name, -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - > a { min-height: unset; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .fly-out-top-item:not(.divider) { +.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) { display: block !important; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .avatar-container { +.nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - li.active:not(.fly-out-top-item) - > a { +.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a { background-color: rgba(41, 41, 97, 0.08); } -body.sidebar-refactoring .nav-sidebar a { +.nav-sidebar a { text-decoration: none; - color: #2f2a6b; + color: #fafafa; } -body.sidebar-refactoring .nav-sidebar li { +.nav-sidebar li { white-space: nowrap; } -body.sidebar-refactoring .nav-sidebar li .nav-item-name { +.nav-sidebar li .nav-item-name { flex: 1; } -body.sidebar-refactoring .nav-sidebar li > a, -body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { +.nav-sidebar li > a, +.nav-sidebar li > .fly-out-top-item-container { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -1468,49 +1009,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { line-height: 1rem; margin: 1px 4px; } -body.sidebar-refactoring .nav-sidebar li.active > a { +.nav-sidebar li.active > a { font-weight: 600; } -body.sidebar-refactoring - .nav-sidebar - li.active:not(.fly-out-top-item) - > a:not(.has-sub-items) { +.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { background-color: rgba(41, 41, 97, 0.08); } -body.sidebar-refactoring .nav-sidebar ul { +.nav-sidebar ul { padding-left: 0; list-style: none; } @media (max-width: 767.98px) { - body.sidebar-refactoring .nav-sidebar { + .nav-sidebar { left: -220px; } } -body.sidebar-refactoring .nav-sidebar .nav-icon-container { +.nav-sidebar .nav-icon-container { display: flex; margin-right: 8px; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item { display: none; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1522,30 +1056,26 @@ body.sidebar-refactoring cursor: default; pointer-events: none; font-size: 0.75rem; - background-color: #2f2a6b; - color: #333; margin-top: -0.25rem; margin-bottom: -0.25rem; margin-top: 0; position: relative; - background-color: #fff; + color: #333; + background: var(--black, #fff); } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a strong, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a strong, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1553,20 +1083,17 @@ body.sidebar-refactoring strong { font-weight: 400; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a::before, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a::before, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1582,34 +1109,18 @@ body.sidebar-refactoring border-top: 0.25rem solid transparent; border-bottom: 0.25rem solid transparent; border-right: 0.25rem solid #fff; + border-right-color: var(--black, #fff); } -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items { - margin-top: -0.25rem; -} -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item { +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item { display: none; } -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a, +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item @@ -1621,30 +1132,21 @@ body.sidebar-refactoring cursor: default; pointer-events: none; font-size: 0.75rem; - background-color: #2f2a6b; - color: #333; margin-top: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 768px) and (max-width: 1199px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { + .nav-sidebar:not(.sidebar-expanded-mobile) { width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-sidebar-inner-scroll { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-item-name, - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .collapse-text { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name, + .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1655,44 +1157,28 @@ body.sidebar-refactoring white-space: nowrap; width: 1px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - > a { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { min-height: unset; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .fly-out-top-item:not(.divider) { + .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) { display: block !important; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .avatar-container { + .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { margin: 0 auto; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) li.active:not(.fly-out-top-item) > a { background-color: rgba(41, 41, 97, 0.08); } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-context-title { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1703,58 +1189,45 @@ body.sidebar-refactoring white-space: nowrap; width: 1px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: auto; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 0.25rem; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-icon-container { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { margin-right: 0; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button { + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text { display: none; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { transform: rotate(180deg); - display: block; margin: 0; } } -body.sidebar-refactoring .nav-sidebar-inner-scroll { +.nav-sidebar-inner-scroll { height: 100%; width: 100%; overflow: auto; } -body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header { +.nav-sidebar-inner-scroll > div.context-header { margin-top: 0.25rem; } -body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { +.nav-sidebar-inner-scroll > div.context-header a { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -1769,78 +1242,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { margin-bottom: 0.25rem; margin-top: 0; } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container { +.nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container.rect-avatar { +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar { border-style: none; } -body.sidebar-refactoring - .nav-sidebar-inner-scroll +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .sidebar-context-title { - color: #2f2a6b; -} -body.sidebar-refactoring .sidebar-top-level-items { +.sidebar-top-level-items { margin-top: 0.25rem; margin-bottom: 60px; } -body.sidebar-refactoring .sidebar-top-level-items .context-header a { +.sidebar-top-level-items .context-header a { padding: 0.25rem; margin-bottom: 0.25rem; margin-top: 0; } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .avatar-container { +.sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; flex: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar { +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar { border-style: none; } -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .sidebar-context-title { - color: #2f2a6b; -} -body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { +.sidebar-top-level-items > li .badge.badge-pill { border-radius: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; @@ -1849,29 +1290,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { background-color: #064787; color: #9dc7f1; } -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .badge.badge-pill { +.sidebar-top-level-items > li.active .badge.badge-pill { font-weight: 400; color: #9dc7f1; } -body.sidebar-refactoring .sidebar-sub-level-items { +.sidebar-sub-level-items { padding-top: 0; padding-bottom: 0; display: none; } -body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { +.sidebar-sub-level-items:not(.fly-out-list) li > a { padding-left: 2.25rem; } -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { +.toggle-sidebar-button, +.close-nav-button { height: 48px; padding: 0 16px; background-color: #303030; @@ -1881,31 +1318,28 @@ body.sidebar-refactoring .close-nav-button { align-items: center; background-color: #303030; border-top: 1px solid #404040; - color: #2f2a6b; position: fixed; bottom: 0; width: 220px; } -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .collapse-text, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { +.toggle-sidebar-button .collapse-text, +.toggle-sidebar-button .icon-chevron-double-lg-left, +.close-nav-button .collapse-text, +.close-nav-button .icon-chevron-double-lg-left { color: inherit; } -body.sidebar-refactoring .collapse-text { +.collapse-text { white-space: nowrap; overflow: hidden; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { +.sidebar-collapsed-desktop .context-header { height: 60px; width: 48px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { +.sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { +.sidebar-collapsed-desktop .sidebar-context-title { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1916,47 +1350,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { white-space: nowrap; width: 1px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { +.sidebar-collapsed-desktop .context-header { height: auto; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { +.sidebar-collapsed-desktop .context-header a { padding: 0.25rem; } -body.sidebar-refactoring - .sidebar-collapsed-desktop +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } -body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { +.sidebar-collapsed-desktop .nav-icon-container { margin-right: 0; } -body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { +.sidebar-collapsed-desktop .toggle-sidebar-button { width: 48px; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .collapse-text { +.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text { display: none; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-left { +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { transform: rotate(180deg); - display: block; margin: 0; } -body.sidebar-refactoring .close-nav-button { +.close-nav-button { display: none; } @media (max-width: 767.98px) { - body.sidebar-refactoring .close-nav-button { + .close-nav-button { display: flex; } - body.sidebar-refactoring .toggle-sidebar-button { + .toggle-sidebar-button { display: none; } } @@ -2037,7 +1463,6 @@ svg.s16 { top: 4px; } .search .search-input-wrap .search-icon { - -moz-user-select: none; user-select: none; } .search .search-input-wrap .clear-icon { @@ -2066,7 +1491,7 @@ svg.s16 { float: left; margin-right: 16px; border-radius: 50%; - border: 1px solid #333; + border: 1px solid rgba(255, 255, 255, 0.08); } .avatar.s16, .avatar-container.s16 { @@ -2086,12 +1511,6 @@ svg.s16 { height: 32px; margin-right: 8px; } -.avatar.s40, -.avatar-container.s40 { - width: 40px; - height: 40px; - margin-right: 8px; -} .avatar { transition-property: none; width: 40px; @@ -2108,8 +1527,8 @@ svg.s16 { .identicon { text-align: center; vertical-align: top; - color: #525252; - background-color: #eee; + color: #fafafa; + background-color: #303030; } .identicon.s16 { font-size: 10px; @@ -2119,30 +1538,26 @@ svg.s16 { font-size: 14px; line-height: 32px; } -.identicon.s40 { - font-size: 16px; - line-height: 38px; -} .identicon.bg1 { - background-color: #ffebee; + background-color: #660e00; } .identicon.bg2 { - background-color: #f3e5f5; + background-color: #f4f0ff; } .identicon.bg3 { - background-color: #e8eaf6; + background-color: #f1f1ff; } .identicon.bg4 { - background-color: #e3f2fd; + background-color: #033464; } .identicon.bg5 { - background-color: #e0f2f1; + background-color: #0a4020; } .identicon.bg6 { - background-color: #fbe9e7; + background-color: #5c2900; } .identicon.bg7 { - background-color: #eee; + background-color: #303030; } .avatar-container { overflow: hidden; @@ -2162,10 +1577,6 @@ svg.s16 { margin: 0; align-self: center; } -.avatar-container.s40 { - min-width: 40px; - min-height: 40px; -} .rect-avatar { border-radius: 2px; } @@ -2176,23 +1587,18 @@ svg.s16 { border-radius: 2px; } .rect-avatar.s32, -body.sidebar-refactoring - .nav-sidebar-inner-scroll +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32, -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 { border-radius: 4px; } -.rect-avatar.s40 { - border-radius: 4px; -} body.gl-dark .navbar-gitlab { background-color: #fafafa; } @@ -2253,9 +1659,6 @@ body.gl-dark body.gl-dark .search form { background-color: rgba(250, 250, 250, 0.2); } -body.gl-dark .search .search-input::-ms-input-placeholder { - color: rgba(250, 250, 250, 0.8); -} body.gl-dark .search .search-input::placeholder { color: rgba(250, 250, 250, 0.8); } @@ -2263,17 +1666,14 @@ body.gl-dark .search .search-input-wrap .search-icon, body.gl-dark .search .search-input-wrap .clear-icon { fill: rgba(250, 250, 250, 0.8); } -body.gl-dark .nav-sidebar li.active { - box-shadow: inset 4px 0 0 #999; -} body.gl-dark .nav-sidebar li.active > a { color: #f0f0f0; } -body.gl-dark .nav-sidebar li.active .nav-icon-container svg { - fill: #f0f0f0; -} -body.gl-dark .sidebar-top-level-items > li.active .badge.badge-pill { - color: #f0f0f0; +body.gl-dark .nav-sidebar .fly-out-top-item a, +body.gl-dark .nav-sidebar .fly-out-top-item.active a, +body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container { + background-color: #2f2a6b; + color: var(--black, #333); } body.gl-dark .logo-text svg { fill: var(--gl-text-color); @@ -2373,6 +1773,9 @@ body.gl-dark { --black: #fff; --svg-status-bg: #333; } +.nav-sidebar li.active { + box-shadow: none; +} .tab-width-8 { -moz-tab-size: 8; tab-size: 8; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 4605b6de563..76d10300307 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -130,10 +130,6 @@ h1 { color: transparent; text-shadow: 0 0 0 #303030; } -.form-control::-ms-input-placeholder { - color: #5e5e5e; - opacity: 1; -} .form-control::placeholder { color: #5e5e5e; opacity: 1; @@ -160,7 +156,6 @@ h1 { color: #303030; text-align: center; vertical-align: middle; - -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -444,8 +439,7 @@ a { border-top: 1px solid #dbdbdb; } .toggle-sidebar-button .collapse-text, -.toggle-sidebar-button .icon-chevron-double-lg-left, -.toggle-sidebar-button .icon-chevron-double-lg-right { +.toggle-sidebar-button .icon-chevron-double-lg-left { color: #666; } svg { @@ -531,7 +525,7 @@ body { max-width: 500px; margin-top: 4px; margin-bottom: 24px; - font-size: 14px; + font-size: 0.875rem; font-weight: 400; padding: 8px 0; background-color: #fff; @@ -611,9 +605,6 @@ input { border-radius: 4px; padding: 6px 10px; } -.form-control::-ms-input-placeholder { - color: #868686; -} .form-control::placeholder { color: #868686; } @@ -918,6 +909,7 @@ input { .context-header .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; + color: #303030; } @media (min-width: 768px) { .page-with-contextual-sidebar { @@ -936,20 +928,14 @@ input { } .nav-sidebar { position: fixed; + bottom: 0; + left: 0; z-index: 600; width: 220px; top: 40px; - bottom: 0; - left: 0; - background-color: #fafafa; - box-shadow: inset -1px 0 0 #dbdbdb; + background-color: #f0f0f0; transform: translate3d(0, 0, 0); } -@media (min-width: 576px) and (max-width: 576px) { - .nav-sidebar:not(.sidebar-collapsed-desktop) { - box-shadow: inset -1px 0 0 #dbdbdb, 2px 1px 3px rgba(0, 0, 0, 0.1); - } -} .nav-sidebar.sidebar-collapsed-desktop { width: 48px; } @@ -957,7 +943,8 @@ input { overflow-x: hidden; } .nav-sidebar.sidebar-collapsed-desktop .badge.badge-pill:not(.fly-out-badge), -.nav-sidebar.sidebar-collapsed-desktop .nav-item-name { +.nav-sidebar.sidebar-collapsed-desktop .nav-item-name, +.nav-sidebar.sidebar-collapsed-desktop .collapse-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -969,362 +956,29 @@ input { width: 1px; } .nav-sidebar.sidebar-collapsed-desktop .sidebar-top-level-items > li > a { - min-height: 45px; -} -.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item { - display: block; -} -.nav-sidebar.sidebar-collapsed-desktop .avatar-container { - margin: 0 auto; -} -.nav-sidebar a { - text-decoration: none; -} -.nav-sidebar ul { - padding-left: 0; - list-style: none; -} -.nav-sidebar li { - white-space: nowrap; -} -.nav-sidebar li a { - display: flex; - align-items: center; - padding: 12px 16px; - color: #666; -} -.nav-sidebar li .nav-item-name { - flex: 1; -} -.nav-sidebar li.active > a { - font-weight: 600; -} -@media (max-width: 767.98px) { - .nav-sidebar { - left: -220px; - } -} -.nav-sidebar .nav-icon-container { - display: flex; - margin-right: 8px; -} -.nav-sidebar .fly-out-top-item { - display: none; -} -.nav-sidebar svg { - height: 16px; - width: 16px; -} -@media (min-width: 768px) and (max-width: 1199px) { - .nav-sidebar:not(.sidebar-expanded-mobile) { - width: 48px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { - overflow-x: hidden; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .badge.badge-pill:not(.fly-out-badge), - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { - min-height: 45px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item { - display: block; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { - margin: 0 auto; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { - height: 60px; - width: 48px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { - padding: 10px 4px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { - margin-right: 0; - } - .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { - padding: 16px; - width: 47px; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .collapse-text, - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-left { - display: none; - } - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; - } -} -.nav-sidebar-inner-scroll { - height: 100%; - width: 100%; - overflow: auto; -} -.sidebar-sub-level-items { - display: none; - padding-bottom: 8px; -} -.sidebar-sub-level-items > li a { - padding: 8px 16px 8px 40px; -} -.sidebar-sub-level-items > li.active a { - background: rgba(0, 0, 0, 0.04); -} -.sidebar-top-level-items { - margin-bottom: 60px; -} -@media (min-width: 576px) { - .sidebar-top-level-items > li > a { - margin-right: 1px; - } -} -.sidebar-top-level-items > li .badge.badge-pill { - background-color: rgba(0, 0, 0, 0.08); - color: #666; -} -.sidebar-top-level-items > li.active { - background: rgba(0, 0, 0, 0.04); -} -.sidebar-top-level-items > li.active > a { - margin-left: 4px; - padding-left: 12px; -} -.sidebar-top-level-items > li.active .badge.badge-pill { - font-weight: 600; -} -.sidebar-top-level-items - > li.active - .sidebar-sub-level-items:not(.is-fly-out-only) { - display: block; -} -.toggle-sidebar-button, -.close-nav-button { - height: 48px; - padding: 0 16px; - background-color: #fafafa; - border: 0; - color: #666; - display: flex; - align-items: center; -} -.toggle-sidebar-button, -.close-nav-button { - position: fixed; - bottom: 0; - width: 219px; - border-top: 1px solid #dbdbdb; -} -.toggle-sidebar-button svg, -.close-nav-button svg { - margin-right: 8px; -} -.toggle-sidebar-button .icon-chevron-double-lg-right, -.close-nav-button .icon-chevron-double-lg-right { - display: none; -} -.collapse-text { - white-space: nowrap; - overflow: hidden; -} -.sidebar-collapsed-desktop .context-header { - height: 60px; - width: 48px; -} -.sidebar-collapsed-desktop .context-header a { - padding: 10px 4px; -} -.sidebar-collapsed-desktop .sidebar-context-title { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - .sidebar-sub-level-items:not(.flyout-list) { - display: none; -} -.sidebar-collapsed-desktop .nav-icon-container { - margin-right: 0; -} -.sidebar-collapsed-desktop .toggle-sidebar-button { - padding: 16px; - width: 47px; -} -.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text, -.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { - display: none; -} -.sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-right { - display: block; - margin: 0; -} -.fly-out-top-item > a { - display: flex; -} -.fly-out-top-item .fly-out-badge { - margin-left: 8px; -} -.fly-out-top-item-name { - flex: 1; -} -.close-nav-button { - display: none; -} -@media (max-width: 767.98px) { - .close-nav-button { - display: flex; - } - .toggle-sidebar-button { - display: none; - } -} -body.sidebar-refactoring.ui-indigo - .nav-sidebar - li.active:not(.fly-out-top-item) - > a { - color: #2f2a6b; -} -body.sidebar-refactoring.ui-indigo - .nav-sidebar - li.active - .nav-icon-container - svg { - fill: #2f2a6b; -} -body.sidebar-refactoring .nav-sidebar { - box-shadow: none; -} -body.sidebar-refactoring .nav-sidebar li.active { - background-color: transparent; - box-shadow: none !important; -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 48px; - } -} -@media (min-width: 1200px) { - body.sidebar-refactoring .page-with-contextual-sidebar { - padding-left: 220px; - } -} -@media (min-width: 768px) { - body.sidebar-refactoring .page-with-icon-sidebar { - padding-left: 48px; - } -} -body.sidebar-refactoring .nav-sidebar { - position: fixed; - bottom: 0; - left: 0; - z-index: 600; - width: 220px; - top: 40px; - background-color: #f0f0f0; - transform: translate3d(0, 0, 0); -} -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop { - width: 48px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .nav-sidebar-inner-scroll { - overflow-x: hidden; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .badge.badge-pill:not(.fly-out-badge), -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .nav-item-name, -body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop .collapse-text { - border: 0; - clip: rect(0, 0, 0, 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .sidebar-top-level-items - > li - > a { min-height: unset; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .fly-out-top-item:not(.divider) { +.nav-sidebar.sidebar-collapsed-desktop .fly-out-top-item:not(.divider) { display: block !important; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - .avatar-container { +.nav-sidebar.sidebar-collapsed-desktop .avatar-container { margin: 0 auto; } -body.sidebar-refactoring - .nav-sidebar.sidebar-collapsed-desktop - li.active:not(.fly-out-top-item) - > a { +.nav-sidebar.sidebar-collapsed-desktop li.active:not(.fly-out-top-item) > a { background-color: rgba(41, 41, 97, 0.08); } -body.sidebar-refactoring .nav-sidebar a { +.nav-sidebar a { text-decoration: none; - color: #2f2a6b; + color: #303030; } -body.sidebar-refactoring .nav-sidebar li { +.nav-sidebar li { white-space: nowrap; } -body.sidebar-refactoring .nav-sidebar li .nav-item-name { +.nav-sidebar li .nav-item-name { flex: 1; } -body.sidebar-refactoring .nav-sidebar li > a, -body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { +.nav-sidebar li > a, +.nav-sidebar li > .fly-out-top-item-container { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -1336,49 +990,42 @@ body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container { line-height: 1rem; margin: 1px 4px; } -body.sidebar-refactoring .nav-sidebar li.active > a { +.nav-sidebar li.active > a { font-weight: 600; } -body.sidebar-refactoring - .nav-sidebar - li.active:not(.fly-out-top-item) - > a:not(.has-sub-items) { +.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { background-color: rgba(41, 41, 97, 0.08); } -body.sidebar-refactoring .nav-sidebar ul { +.nav-sidebar ul { padding-left: 0; list-style: none; } @media (max-width: 767.98px) { - body.sidebar-refactoring .nav-sidebar { + .nav-sidebar { left: -220px; } } -body.sidebar-refactoring .nav-sidebar .nav-icon-container { +.nav-sidebar .nav-icon-container { display: flex; margin-right: 8px; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item { display: none; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1390,30 +1037,26 @@ body.sidebar-refactoring cursor: default; pointer-events: none; font-size: 0.75rem; - background-color: #2f2a6b; - color: #fff; margin-top: -0.25rem; margin-bottom: -0.25rem; margin-top: 0; position: relative; - background-color: #000; + color: #fff; + background: var(--black, #000); } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a strong, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a strong, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1421,20 +1064,17 @@ body.sidebar-refactoring strong { font-weight: 400; } -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item a::before, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item.active a::before, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a:not(.has-sub-items) + .sidebar-sub-level-items .fly-out-top-item @@ -1450,34 +1090,18 @@ body.sidebar-refactoring border-top: 0.25rem solid transparent; border-bottom: 0.25rem solid transparent; border-right: 0.25rem solid #000; + border-right-color: var(--black, #000); } -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items { - margin-top: -0.25rem; -} -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item { +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item { display: none; } -body.sidebar-refactoring - .nav-sidebar - a.has-sub-items - + .sidebar-sub-level-items - .fly-out-top-item - a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item a, +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item.active a, -body.sidebar-refactoring - .nav-sidebar +.nav-sidebar a.has-sub-items + .sidebar-sub-level-items .fly-out-top-item @@ -1489,30 +1113,21 @@ body.sidebar-refactoring cursor: default; pointer-events: none; font-size: 0.75rem; - background-color: #2f2a6b; - color: #fff; margin-top: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } @media (min-width: 768px) and (max-width: 1199px) { - body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { + .nav-sidebar:not(.sidebar-expanded-mobile) { width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-sidebar-inner-scroll { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll { overflow-x: hidden; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge), - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-item-name, - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .collapse-text { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name, + .nav-sidebar:not(.sidebar-expanded-mobile) .collapse-text { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1523,44 +1138,28 @@ body.sidebar-refactoring white-space: nowrap; width: 1px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-top-level-items - > li - > a { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li > a { min-height: unset; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .fly-out-top-item:not(.divider) { + .nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item:not(.divider) { display: block !important; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .avatar-container { + .nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container { margin: 0 auto; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) li.active:not(.fly-out-top-item) > a { background-color: rgba(41, 41, 97, 0.08); } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: 60px; width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 10px 4px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .sidebar-context-title { + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1571,58 +1170,45 @@ body.sidebar-refactoring white-space: nowrap; width: 1px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header { height: auto; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .context-header - a { + .nav-sidebar:not(.sidebar-expanded-mobile) .context-header a { padding: 0.25rem; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .nav-icon-container { + .nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container { margin-right: 0; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) - .toggle-sidebar-button { + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button { width: 48px; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text { display: none; } - body.sidebar-refactoring - .nav-sidebar:not(.sidebar-expanded-mobile) + .nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left { transform: rotate(180deg); - display: block; margin: 0; } } -body.sidebar-refactoring .nav-sidebar-inner-scroll { +.nav-sidebar-inner-scroll { height: 100%; width: 100%; overflow: auto; } -body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header { +.nav-sidebar-inner-scroll > div.context-header { margin-top: 0.25rem; } -body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { +.nav-sidebar-inner-scroll > div.context-header a { padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; @@ -1637,78 +1223,46 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { margin-bottom: 0.25rem; margin-top: 0; } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container { +.nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .avatar-container.rect-avatar { +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar { border-style: none; } -body.sidebar-refactoring - .nav-sidebar-inner-scroll +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32 { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } -body.sidebar-refactoring - .nav-sidebar-inner-scroll - > div.context-header - a - .sidebar-context-title { - color: #2f2a6b; -} -body.sidebar-refactoring .sidebar-top-level-items { +.sidebar-top-level-items { margin-top: 0.25rem; margin-bottom: 60px; } -body.sidebar-refactoring .sidebar-top-level-items .context-header a { +.sidebar-top-level-items .context-header a { padding: 0.25rem; margin-bottom: 0.25rem; margin-top: 0; } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .avatar-container { +.sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .avatar-container.rect-avatar { +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar { border-style: none; } -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } -body.sidebar-refactoring - .sidebar-top-level-items - .context-header - a - .sidebar-context-title { - color: #2f2a6b; -} -body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { +.sidebar-top-level-items > li .badge.badge-pill { border-radius: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; @@ -1717,29 +1271,25 @@ body.sidebar-refactoring .sidebar-top-level-items > li .badge.badge-pill { background-color: #cbe2f9; color: #0b5cad; } -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items > li.active .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } -body.sidebar-refactoring - .sidebar-top-level-items - > li.active - .badge.badge-pill { +.sidebar-top-level-items > li.active .badge.badge-pill { font-weight: 400; color: #0b5cad; } -body.sidebar-refactoring .sidebar-sub-level-items { +.sidebar-sub-level-items { padding-top: 0; padding-bottom: 0; display: none; } -body.sidebar-refactoring .sidebar-sub-level-items:not(.fly-out-list) li > a { +.sidebar-sub-level-items:not(.fly-out-list) li > a { padding-left: 2.25rem; } -body.sidebar-refactoring .toggle-sidebar-button, -body.sidebar-refactoring .close-nav-button { +.toggle-sidebar-button, +.close-nav-button { height: 48px; padding: 0 16px; background-color: #fafafa; @@ -1749,31 +1299,28 @@ body.sidebar-refactoring .close-nav-button { align-items: center; background-color: #f0f0f0; border-top: 1px solid #dbdbdb; - color: #2f2a6b; position: fixed; bottom: 0; width: 220px; } -body.sidebar-refactoring .toggle-sidebar-button .collapse-text, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .toggle-sidebar-button .icon-chevron-double-lg-right, -body.sidebar-refactoring .close-nav-button .collapse-text, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-left, -body.sidebar-refactoring .close-nav-button .icon-chevron-double-lg-right { +.toggle-sidebar-button .collapse-text, +.toggle-sidebar-button .icon-chevron-double-lg-left, +.close-nav-button .collapse-text, +.close-nav-button .icon-chevron-double-lg-left { color: inherit; } -body.sidebar-refactoring .collapse-text { +.collapse-text { white-space: nowrap; overflow: hidden; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { +.sidebar-collapsed-desktop .context-header { height: 60px; width: 48px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { +.sidebar-collapsed-desktop .context-header a { padding: 10px 4px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { +.sidebar-collapsed-desktop .sidebar-context-title { border: 0; clip: rect(0, 0, 0, 0); height: 1px; @@ -1784,47 +1331,39 @@ body.sidebar-refactoring .sidebar-collapsed-desktop .sidebar-context-title { white-space: nowrap; width: 1px; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header { +.sidebar-collapsed-desktop .context-header { height: auto; } -body.sidebar-refactoring .sidebar-collapsed-desktop .context-header a { +.sidebar-collapsed-desktop .context-header a { padding: 0.25rem; } -body.sidebar-refactoring - .sidebar-collapsed-desktop +.sidebar-collapsed-desktop .sidebar-top-level-items > li .sidebar-sub-level-items:not(.flyout-list) { display: none; } -body.sidebar-refactoring .sidebar-collapsed-desktop .nav-icon-container { +.sidebar-collapsed-desktop .nav-icon-container { margin-right: 0; } -body.sidebar-refactoring .sidebar-collapsed-desktop .toggle-sidebar-button { +.sidebar-collapsed-desktop .toggle-sidebar-button { width: 48px; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .collapse-text { +.sidebar-collapsed-desktop .toggle-sidebar-button .collapse-text { display: none; } -body.sidebar-refactoring - .sidebar-collapsed-desktop - .toggle-sidebar-button - .icon-chevron-double-lg-left { +.sidebar-collapsed-desktop .toggle-sidebar-button .icon-chevron-double-lg-left { transform: rotate(180deg); - display: block; margin: 0; } -body.sidebar-refactoring .close-nav-button { +.close-nav-button { display: none; } @media (max-width: 767.98px) { - body.sidebar-refactoring .close-nav-button { + .close-nav-button { display: flex; } - body.sidebar-refactoring .toggle-sidebar-button { + .toggle-sidebar-button { display: none; } } @@ -1905,7 +1444,6 @@ svg.s16 { top: 4px; } .search .search-input-wrap .search-icon { - -moz-user-select: none; user-select: none; } .search .search-input-wrap .clear-icon { @@ -1934,7 +1472,7 @@ svg.s16 { float: left; margin-right: 16px; border-radius: 50%; - border: 1px solid #f5f5f5; + border: 1px solid rgba(0, 0, 0, 0.08); } .avatar.s16, .avatar-container.s16 { @@ -1954,12 +1492,6 @@ svg.s16 { height: 32px; margin-right: 8px; } -.avatar.s40, -.avatar-container.s40 { - width: 40px; - height: 40px; - margin-right: 8px; -} .avatar { transition-property: none; width: 40px; @@ -1976,8 +1508,8 @@ svg.s16 { .identicon { text-align: center; vertical-align: top; - color: #525252; - background-color: #eee; + color: #303030; + background-color: #f0f0f0; } .identicon.s16 { font-size: 10px; @@ -1987,30 +1519,26 @@ svg.s16 { font-size: 14px; line-height: 32px; } -.identicon.s40 { - font-size: 16px; - line-height: 38px; -} .identicon.bg1 { - background-color: #ffebee; + background-color: #fcf1ef; } .identicon.bg2 { - background-color: #f3e5f5; + background-color: #f4f0ff; } .identicon.bg3 { - background-color: #e8eaf6; + background-color: #f1f1ff; } .identicon.bg4 { - background-color: #e3f2fd; + background-color: #e9f3fc; } .identicon.bg5 { - background-color: #e0f2f1; + background-color: #ecf4ee; } .identicon.bg6 { - background-color: #fbe9e7; + background-color: #fdf1dd; } .identicon.bg7 { - background-color: #eee; + background-color: #f0f0f0; } .avatar-container { overflow: hidden; @@ -2030,10 +1558,6 @@ svg.s16 { margin: 0; align-self: center; } -.avatar-container.s40 { - min-width: 40px; - min-height: 40px; -} .rect-avatar { border-radius: 2px; } @@ -2044,23 +1568,18 @@ svg.s16 { border-radius: 2px; } .rect-avatar.s32, -body.sidebar-refactoring - .nav-sidebar-inner-scroll +.nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar .avatar.s32, -body.sidebar-refactoring - .sidebar-top-level-items +.sidebar-top-level-items .context-header a .avatar-container.rect-avatar .avatar.s32 { border-radius: 4px; } -.rect-avatar.s40 { - border-radius: 4px; -} .tab-width-8 { -moz-tab-size: 8; diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 81a87742850..070ab36e0b3 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -198,10 +198,6 @@ hr { color: transparent; text-shadow: 0 0 0 #303030; } -.form-control::-ms-input-placeholder { - color: #5e5e5e; - opacity: 1; -} .form-control::placeholder { color: #5e5e5e; opacity: 1; @@ -229,7 +225,6 @@ hr { color: #303030; text-align: center; vertical-align: middle; - -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; @@ -294,11 +289,6 @@ fieldset:disabled a.btn { .mb-3 { margin-bottom: 1rem !important; } -@media (min-width: 576px) { - .mt-sm-0 { - margin-top: 0 !important; - } -} .text-center { text-align: center !important; } @@ -324,13 +314,6 @@ fieldset:disabled a.btn { appearance: none; -moz-appearance: none; } -.gl-form-input:not(.form-control-plaintext):-moz-read-only, -.gl-form-input.form-control:not(.form-control-plaintext):-moz-read-only { - background-color: #fafafa; - color: #868686; - box-shadow: inset 0 0 0 1px #dbdbdb; - cursor: not-allowed; -} .gl-form-input:disabled, .gl-form-input:not(.form-control-plaintext):read-only, .gl-form-input.form-control:disabled, @@ -340,10 +323,6 @@ fieldset:disabled a.btn { box-shadow: inset 0 0 0 1px #dbdbdb; cursor: not-allowed; } -.gl-form-input::-ms-input-placeholder, -.gl-form-input.form-control::-ms-input-placeholder { - color: #868686; -} .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { color: #868686; @@ -500,7 +479,6 @@ hr { z-index: 1; } .flash-container.sticky { - position: -webkit-sticky; position: sticky; top: 48px; z-index: 251; @@ -526,9 +504,6 @@ label.label-bold { border-radius: 4px; padding: 6px 10px; } -.form-control::-ms-input-placeholder { - color: #868686; -} .form-control::placeholder { color: #868686; } @@ -542,7 +517,7 @@ label.label-bold { justify-content: center; height: 40px; background: #fff; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid #dbdbdb; } .navbar-empty .tanuki-logo, .navbar-empty .brand-header-logo { @@ -796,9 +771,15 @@ svg { .gl-display-flex { display: flex; } +.gl-display-block { + display: block; +} .gl-align-items-center { align-items: center; } +.gl-w-full { + width: 100%; +} .gl-p-2 { padding: 0.25rem; } @@ -817,6 +798,11 @@ svg { .gl-mb-5 { margin-bottom: 1rem; } +@media (min-width: 36rem) { + .gl-sm-mt-0 { + margin-top: 0; + } +} .gl-text-left { text-align: left; } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 9d98fe5c739..ea7aaaa8ec8 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -253,3 +253,14 @@ $well-inner-border: $gray-200; color: $gray-900; border-color: $gray-800; } + +.nav-sidebar { + li.active { + box-shadow: none; + } + + .sidebar-sub-level-items.fly-out-list { + box-shadow: none; + border: 1px solid $border-color; + } +} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 6a60978b954..a94169ab494 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -174,20 +174,20 @@ } // Sidebar - .nav-sidebar li.active { - box-shadow: inset 4px 0 0 $border-and-box-shadow; - - > a { - color: $sidebar-text; - } - - .nav-icon-container svg { - fill: $sidebar-text; - } + .nav-sidebar li.active > a { + color: $sidebar-text; } - .sidebar-top-level-items > li.active .badge.badge-pill { - color: $sidebar-text; + .nav-sidebar { + .fly-out-top-item { + a, + a:hover, + &.active a, + .fly-out-top-item-container { + background-color: $purple-900; + color: var(--black, $white); + } + } } .nav-links li { @@ -213,7 +213,6 @@ .ide-sidebar-link { &.active { color: $border-and-box-shadow; - box-shadow: inset 3px 0 $border-and-box-shadow; &.is-right { box-shadow: inset -3px 0 $border-and-box-shadow; diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss index bbf14afcca2..9566c9c6004 100644 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -6,7 +6,7 @@ body { $indigo-200, $indigo-500, $indigo-700, - $indigo-800, + $purple-900, $indigo-900, $white ); diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index cabbe5834cb..10334d771b8 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -65,6 +65,8 @@ min-width: 0; } +// .gl-font-size-inherit will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1466 +.gl-font-size-inherit, .font-size-inherit { font-size: inherit; } .gl-w-8 { width: px-to-rem($grid-size); } .gl-w-16 { width: px-to-rem($grid-size * 2); } @@ -85,6 +87,12 @@ padding-bottom: $gl-spacing-scale-8; } +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1495 +.gl-py-13 { + padding-top: $gl-spacing-scale-13; + padding-bottom: $gl-spacing-scale-13; +} + .gl-transition-property-stroke-opacity { transition-property: stroke-opacity; } @@ -117,6 +125,25 @@ } } +// Will be moved to @gitlab/ui (without the !important) in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1462 +// We only need the bang (!) version until the non-bang version is added to +// @gitlab/ui utitlities.scss. Once there, it will get loaded in the correct +// order to properly override `.gl-mt-6` which is used for narrower screen +// widths (currently that style gets added to the application.css stylesheet +// after this one, so it takes precedence). +.gl-md-mt-11\! { + @media (min-width: $breakpoint-md) { + margin-top: $gl-spacing-scale-11 !important; + } +} + +// Same as above (also without the !important) but for overriding `.gl-pt-6` +.gl-md-pt-11\! { + @media (min-width: $breakpoint-md) { + padding-top: $gl-spacing-scale-11 !important; + } +} + // This is used to help prevent issues with margin collapsing. // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing. .gl-force-block-formatting-context::after { @@ -200,3 +227,23 @@ $gl-line-height-42: px-to-rem(42px); .gl-max-h-none\! { max-height: none !important; } + +// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465 +.gl-popover { + .popover-header { + .gl-button.close { + margin-top: -$gl-spacing-scale-3; + margin-right: -$gl-spacing-scale-4; + } + } +} + +// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1490 +.gl-w-grid-size-28 { + width: $grid-size * 28; +} + +// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1491 +.gl-min-w-8 { + min-width: $gl-spacing-scale-8; +} |