diff options
Diffstat (limited to 'app/assets/stylesheets')
29 files changed, 241 insertions, 384 deletions
diff --git a/app/assets/stylesheets/disable_animations.scss b/app/assets/stylesheets/disable_animations.scss index 1e63cdcfa39..7472340896f 100644 --- a/app/assets/stylesheets/disable_animations.scss +++ b/app/assets/stylesheets/disable_animations.scss @@ -1,4 +1,7 @@ -* { +*:not( + /* Keep transition enabled where it would otherwise break specs */ + .always-animate +) { /* stylelint-disable property-no-vendor-prefix */ -o-transition: none !important; -moz-transition: none !important; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 7b8d9281148..514247d2913 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -2,6 +2,7 @@ :root { --performance-bar-height: 0px; --system-header-height: 0px; + --header-height: 0px; --top-bar-height: 0px; --system-footer-height: 0px; --mr-review-bar-height: 0px; @@ -22,6 +23,10 @@ --system-header-height: #{$system-header-height}; } +.with-header { + --header-height: #{$header-height}; +} + .with-top-bar { --top-bar-height: #{$top-bar-height}; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 884cb70cb9f..a467d9e8c8a 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -287,6 +287,23 @@ } } + .non-blocking-loader & { + &.is-loading{ + .dropdown-content { + display: block; + height: 2rem; + + ul{ + display: none; + } + } + } + + .dropdown-loading{ + position: relative; + } + } + ul { margin: 0; padding: 0; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index b78b07f953b..67e96f08cb0 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -369,22 +369,6 @@ .board-labels-toggle-wrapper { margin-bottom: $gl-input-padding; } - - .board-swimlanes-toggle-wrapper { - @include gl-h-auto; - margin-bottom: $gl-input-padding; - - > span, - > .dropdown, - .gl-dropdown-toggle { - @include gl-w-full; - @include gl-m-0; - } - - > .dropdown { - @include gl-mt-2; - } - } } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index b9fbcfb642c..32735679ded 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -5,7 +5,7 @@ $search-input-field-x-min-width: 200px; padding: 0 16px; z-index: $header-zindex; margin-bottom: 0; - min-height: $header-height; + min-height: var(--header-height); border: 0; position: fixed; top: $calc-system-headers-height; @@ -22,7 +22,7 @@ $search-input-field-x-min-width: 200px; display: flex; justify-content: space-between; position: relative; - min-height: $header-height; + min-height: var(--header-height); padding-left: 0; .title { @@ -505,7 +505,7 @@ $search-input-field-x-min-width: 200px; .navbar-empty { justify-content: center; - height: $header-height; + height: var(--header-height); background: $white; border-bottom: 1px solid $gray-100; @@ -642,7 +642,7 @@ header.navbar-gitlab.super-sidebar-logged-out { &:focus, &:active { - box-shadow: inset 0 0 0 $gl-border-size-1 $white; + @include gl-focus; } &:active { diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss index f77f64f1d76..e409facd081 100644 --- a/app/assets/stylesheets/framework/job_log.scss +++ b/app/assets/stylesheets/framework/job_log.scss @@ -6,7 +6,7 @@ word-break: break-all; word-wrap: break-word; color: color-yiq($builds-log-bg); - border-radius: $border-radius-small; + border-radius: 0 0 $border-radius-default $border-radius-default; min-height: 42px; background-color: $builds-log-bg; } diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 086a16edda2..171f070d776 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -4,6 +4,12 @@ html { &.touch .tooltip { display: none !important; } + + @include media-breakpoint-up(sm) { + &.logged-out-marketing-header { + --header-height: 72px; + } + } } body { @@ -197,9 +203,3 @@ body { padding-right: 0; } } - -@include media-breakpoint-up(sm) { - .logged-out-marketing-header { - --header-height: 72px; - } -} diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index b953ff3024b..b87fd3e67d4 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -76,7 +76,7 @@ .referenced-users { color: $gl-text-color; - padding-top: 10px; + padding: 0 $gl-padding $gl-padding-8; } .referenced-commands { diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index edebe9c95ad..a32663b17d3 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -263,7 +263,7 @@ @mixin build-log-top-bar($height) { @include build-log-bar($height); position: sticky; - top: $calc-application-header-height; + top: calc(#{$calc-application-header-height} - 1px); } /* diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 5f90dd62426..f2afa94e000 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -231,18 +231,6 @@ } } -.health-status { - .dropdown-body { - .health-divider { - border-top-color: $gray-100; - } - - .dropdown-item:not(.health-dropdown-item) { - padding: 0; - } - } -} - .toggle-right-sidebar-button { @include side-panel-toggle; border-bottom: 1px solid $border-color; @@ -799,29 +787,6 @@ } } -.participants-more, -.user-list-more { - margin-left: 5px; - - a, - .btn-link { - color: $gl-text-color-secondary; - } - - .btn-link { - padding: 0; - } - - .btn-link:hover { - color: $blue-800; - text-decoration: none; - } - - .btn-link:focus { - text-decoration: none; - } -} - .sidebar-help-wrap { .sidebar-help-state { margin: 16px -20px -20px; diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 8610c41b43f..fbf9d8c8ca6 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -104,27 +104,6 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; box-shadow: none; } - .context-switcher .gl-new-dropdown-custom-toggle { - width: 100%; - } - - .context-switcher .gl-new-dropdown-panel { - overflow-y: auto; - } - - .context-switcher-search-box input { - @include gl-font-sm; - } - - .gl-new-dropdown-custom-toggle .context-switcher-toggle { - &[aria-expanded='true'] { - background-color: $t-gray-a-08; - } - - &:focus { - @include gl-focus($inset: true); } - } - .btn-with-notification { position: relative; @@ -158,15 +137,6 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } - .nav-item-link { - &:hover, - &:focus-within { - .nav-item-badge { - opacity: 0; - } - } - } - #trial-status-sidebar-widget:hover { text-decoration: none; @include gl-text-contrast-light; @@ -177,6 +147,15 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; display: none; } +.super-sidebar-has-peeked { + margin-top: calc(#{$header-height} - #{$gl-spacing-scale-2}); + margin-bottom: #{$gl-spacing-scale-2}; +} + +.super-sidebar-peek { + margin-left: #{$gl-spacing-scale-2}; +} + .super-sidebar-peek, .super-sidebar-peek-hint { @include gl-shadow; @@ -189,6 +168,14 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } +.super-sidebar-peek { + border-radius: $border-radius-default; + + .user-bar { + border-radius: $border-radius-default $border-radius-default 0 0; + } +} + .page-with-super-sidebar { padding-left: 0; @@ -295,19 +282,71 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } +.transition-opacity-on-hover--context { + .transition-opacity-on-hover--target { + transition: opacity $gl-transition-duration-fast linear; + + &:hover { + transition-delay: $gl-transition-duration-slow; + } + } + + &:hover { + .transition-opacity-on-hover--target { + transition-delay: $gl-transition-duration-slow; + } + } +} + .show-on-focus-or-hover--context { .show-on-focus-or-hover--target { opacity: 0; + + &:hover, + &:focus { + opacity: 1; + } } &:hover, - &:focus { + &:focus-within { + .show-on-focus-or-hover--control { + @include gl-bg-t-gray-a-08; + } + .show-on-focus-or-hover--target { opacity: 1; } } - .show-on-focus-or-hover--target:focus { + .show-on-focus-or-hover--control { + &:hover, + &:focus { + + .show-on-focus-or-hover--target { + opacity: 1; + } + } + } +} + +.hide-on-focus-or-hover--context { + .hide-on-focus-or-hover--target { opacity: 1; } + + &:hover, + &:focus-within { + .hide-on-focus-or-hover--target { + opacity: 0; + } + } + + .hide-on-focus-or-hover--control { + &:hover, + &:focus { + .hide-on-focus-or-hover--target { + opacity: 0; + } + } + } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index d632689a4f6..e83f6af603a 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -283,75 +283,79 @@ $color-ranges: ( // GitLab themes -$indigo-50: #f7f7ff; -$indigo-100: #ebebfa; -$indigo-200: #d1d1f0; -$indigo-300: #a6a6de; -$indigo-400: #7c7ccc; +$indigo-50: #f1f1ff; +$indigo-100: #dbdbf8; +$indigo-200: #c7c7f2; +$indigo-300: #a2a2e6; +$indigo-400: #8181d7; $indigo-500: #6666c4; -$indigo-600: #5b5bbd; -$indigo-700: #4b4ba3; -$indigo-800: #393982; -$indigo-900: #292961; -$indigo-950: #1a1a40; +$indigo-600: #5252b5; +$indigo-700: #41419f; +$indigo-800: #303083; +$indigo-900: #222261; +$indigo-950: #14143d; // To do this variant right for darkmode, we need to create a variable for it. $indigo-900-alpha-008: rgba($indigo-900, 0.08); -$theme-blue-50: #f4f8fc; -$theme-blue-100: #e6edf5; -$theme-blue-200: #c8d7e6; -$theme-blue-300: #97b3cf; -$theme-blue-400: #648cb4; -$theme-blue-500: #4a79a8; -$theme-blue-600: #3e6fa0; -$theme-blue-700: #305c88; -$theme-blue-800: #25496e; -$theme-blue-900: #1a3652; -$theme-blue-950: #0f2235; - -$theme-light-blue-50: #f2f7fc; -$theme-light-blue-100: #ebf1f7; -$theme-light-blue-200: #c9dcf2; -$theme-light-blue-300: #83abd4; -$theme-light-blue-400: #4d86bf; -$theme-light-blue-500: #367cc2; -$theme-light-blue-600: #3771ab; -$theme-light-blue-700: #2261a1; - -$theme-green-50: #f2faf6; -$theme-green-100: #e4f3ea; -$theme-green-200: #c0dfcd; -$theme-green-300: #8ac2a1; -$theme-green-400: #52a274; -$theme-green-500: #35935c; -$theme-green-600: #288a50; -$theme-green-700: #1c7441; -$theme-green-800: #145d33; -$theme-green-900: #0d4524; -$theme-green-950: #072d16; - -$theme-light-green-700: #156b39; - -$theme-red-50: #fcf4f2; -$theme-red-100: #fae9e6; -$theme-red-200: #ebcac5; -$theme-red-300: #d99b91; -$theme-red-400: #b0655a; +$theme-blue-50: #cdd8e3; +$theme-blue-100: #b9cadc; +$theme-blue-200: #a6bdd5; +$theme-blue-300: #81a5c9; +$theme-blue-400: #628eb9; +$theme-blue-500: #4977a5; +$theme-blue-600: #346596; +$theme-blue-700: #235180; +$theme-blue-800: #153c63; +$theme-blue-900: #0b2640; +$theme-blue-950: #04101c; + +$theme-light-blue-50: #dde6ee; +$theme-light-blue-100: #c1d4e6; +$theme-light-blue-200: #a0bedc; +$theme-light-blue-300: #74a3d3; +$theme-light-blue-400: #4f8bc7; +$theme-light-blue-500: #3476b9; +$theme-light-blue-600: #2268ae; +$theme-light-blue-700: #145aa1; +$theme-light-blue-800: #0e4d8d; +$theme-light-blue-900: #0c4277; +$theme-light-blue-950: #0a3764; + +$theme-green-50: #dde9de; +$theme-green-100: #b1d6b5; +$theme-green-200: #8cc497; +$theme-green-300: #69af7d; +$theme-green-400: #499767; +$theme-green-500: #308258; +$theme-green-600: #25744c; +$theme-green-700: #1b653f; +$theme-green-800: #155635; +$theme-green-900: #0e4328; +$theme-green-950: #052e19; + +$theme-red-50: #f4e9e7; +$theme-red-100: #ecd3d0; +$theme-red-200: #e3bab5; +$theme-red-300: #d59086; +$theme-red-400: #c66e60; $theme-red-500: #ad4a3b; -$theme-red-600: #9e4133; -$theme-red-700: #912f20; -$theme-red-800: #78291d; -$theme-red-900: #691a16; -$theme-red-950: #36140f; - -$theme-light-red-50: #fff6f5; -$theme-light-red-100: #fae2de; -$theme-light-red-200: #f7d5d0; -$theme-light-red-300: #d9796a; -$theme-light-red-400: #cf604e; +$theme-red-600: #a13322; +$theme-red-700: #8f2110; +$theme-red-800: #761405; +$theme-red-900: #580d02; +$theme-red-950: #380700; + +$theme-light-red-50: #faf2f1; +$theme-light-red-100: #f6d9d5; +$theme-light-red-200: #ebada2; +$theme-light-red-300: #e07f6f; +$theme-light-red-400: #d36250; $theme-light-red-500: #c24b38; -$theme-light-red-600: #b03927; -$theme-light-red-700: #a62e21; +$theme-light-red-600: #b53a26; +$theme-light-red-700: #a02e1c; +$theme-light-red-800: #8b2212; +$theme-light-red-900: #751709; +$theme-light-red-950: #5c1105; // Data visualization color palette @@ -459,7 +463,7 @@ $browser-scrollbar-size: 10px; /* * Misc */ -$header-height: var(--header-height, 48px); +$header-height: 48px; $content-wrapper-padding: 100px; $header-zindex: 1000; $zindex-dropdown-menu: 300; @@ -501,7 +505,7 @@ $pages-group-name-color: #4c4e54; * Calculated heights */ $calc-system-headers-height: calc(var(--system-header-height) + var(--performance-bar-height)); -$calc-application-bars-height: calc(#{$header-height} + #{$calc-system-headers-height}); +$calc-application-bars-height: calc(var(--header-height) + #{$calc-system-headers-height}); $calc-application-header-height: calc(#{$calc-application-bars-height} + var(--top-bar-height)); $calc-application-footer-height: var(--system-footer-height); $calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height}); @@ -692,14 +696,6 @@ $ci-skipped-color: #888; */ $issue-boards-font-size: 14px; $issue-boards-card-shadow: rgba(0, 0, 0, 0.1); -/* - The following heights are used in environment_logs.scss and are used for calculation of the log viewer height. -*/ -$environment-logs-breadcrumbs-height: 63px; -$environment-logs-breadcrumbs-height-md: $top-bar-height; - -$environment-logs-difference-xs-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height}); -$environment-logs-difference-md-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height-md}); /* * Avatar @@ -845,12 +841,6 @@ $perf-bar-bucket-box-shadow-to: rgba($black, 0.25); $perf-bar-canary-text: $orange-400; /* -Issuable warning -*/ -$issuable-warning-size: 24px; -$issuable-warning-icon-margin: 4px; - -/* Image Commenting cursor */ $image-comment-cursor-left-offset: 12; diff --git a/app/assets/stylesheets/page_bundles/admin/jobs_index.scss b/app/assets/stylesheets/page_bundles/admin/jobs_index.scss deleted file mode 100644 index 7844cae5f87..00000000000 --- a/app/assets/stylesheets/page_bundles/admin/jobs_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -.admin-builds-table { - td:last-child { - min-width: 120px; - } -} diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index 5114f484e53..09c4d184f3f 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -15,6 +15,9 @@ .top-bar { @include build-log-top-bar(50px); + z-index: 2; + border-radius: $border-radius-default $border-radius-default 0 0; + box-shadow: 0 -2px 0 0 var(--white); &.has-archived-block { top: calc(#{$calc-application-header-height} + 28px); @@ -86,8 +89,6 @@ } .right-sidebar.build-sidebar { - padding: 0; - &.right-sidebar-collapsed { display: none; } @@ -100,29 +101,6 @@ -webkit-overflow-scrolling: touch; } - .blocks-container { - padding: 0 $gl-padding; - width: 289px; - } - - .trigger-variables-btn-container { - justify-content: space-between; - align-items: center; - - .trigger-variables-btn { - margin-top: -5px; - margin-bottom: -5px; - } - } - - .trigger-build-variables { - margin: 0; - overflow-x: auto; - width: 100%; - -ms-overflow-style: scrollbar; - -webkit-overflow-scrolling: touch; - } - .trigger-build-variable { font-weight: $gl-font-weight-normal; color: var(--gray-950, $gray-950); @@ -142,38 +120,20 @@ vertical-align: top; } - .badge.badge-pill { - margin-left: 2px; + .blocks-container { + width: 289px; } - .stage-item { - cursor: pointer; - - &:hover { - color: var(--gl-text-color, $gl-text-color); - } + .block { + width: 262px; } .builds-container { - background-color: var(--white, $white); - border-top: 1px solid var(--border-color, $border-color); - border-bottom: 1px solid var(--border-color, $border-color); - max-height: 300px; - width: 289px; overflow: auto; - a { - padding: $gl-padding 10px $gl-padding 40px; - width: 270px; - - &:hover { - color: var(--gl-text-color, $gl-text-color); - } - } - .icon-arrow-right { - left: 15px; - top: 20px; + left: 8px; + top: 12px; } .build-job { @@ -192,9 +152,15 @@ .container-fluid.container-limited { max-width: 100%; } +} - .content-wrapper { - padding-bottom: 6px; +.build-sidebar-item { + display: grid; + grid-template-columns: 1fr 2fr; + grid-gap: $gl-padding-8; + + &:last-of-type { + @include gl-mb-0; } } @@ -205,12 +171,3 @@ margin-bottom: 0; } } - -@include media-breakpoint-down(md) { - .content-list { - &.builds-content-list { - width: 100%; - overflow: auto; - } - } -} diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss index fde35ab3d39..c7873473b86 100644 --- a/app/assets/stylesheets/page_bundles/incidents.scss +++ b/app/assets/stylesheets/page_bundles/incidents.scss @@ -43,8 +43,7 @@ } } - &:last-child, - &.create-timeline-event { + &:last-child { &::before { top: - #{$gl-spacing-scale-5} !important; // Override default positioning @include gl-h-8; diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss index 1b5da0368c6..5397f3d8895 100644 --- a/app/assets/stylesheets/page_bundles/issuable.scss +++ b/app/assets/stylesheets/page_bundles/issuable.scss @@ -1,15 +1,6 @@ @import 'mixins_and_variables_and_functions'; -.status-box { - padding: 0 $gl-btn-padding; - border-radius: $border-radius-default; - display: block; - float: left; - margin-right: $gl-padding-8; - color: var(--white, $white); - font-size: $gl-font-size; - line-height: $gl-line-height-24; -} +$issuable-warning-size: 24px; .issuable-warning-icon { background-color: var(--orange-50, $orange-50); @@ -18,7 +9,6 @@ width: $issuable-warning-size; height: $issuable-warning-size; text-align: center; - margin-right: $issuable-warning-icon-margin; line-height: $gl-line-height-24; flex: 0 0 auto; } diff --git a/app/assets/stylesheets/page_bundles/merge_request.scss b/app/assets/stylesheets/page_bundles/merge_request.scss index 113a50c4efa..f03efb82860 100644 --- a/app/assets/stylesheets/page_bundles/merge_request.scss +++ b/app/assets/stylesheets/page_bundles/merge_request.scss @@ -3,6 +3,12 @@ $tabs-holder-z-index: 250; $comparison-empty-state-height: 62px; +.apply-suggestions-input-min-width { + @include media-breakpoint-up(lg) { + width: $gl-dropdown-width-wide; + } +} + .space-children { @include clearfix; @@ -199,6 +205,7 @@ $comparison-empty-state-height: 62px; top: $calc-application-header-height; z-index: $tabs-holder-z-index; border-bottom: 1px solid var(--border-color, $border-color); + background-color: var(--gray-10, $white); @include media-breakpoint-up(md) { position: sticky; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index f39247f06c2..b00e1813696 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -372,7 +372,6 @@ $tabs-holder-z-index: 250; white-space: nowrap; } - /* stylelint-disable scss/at-rule-no-unknown */ @container mr-widget-extension (max-width: 600px) { flex-direction: column; align-items: flex-start; @@ -417,7 +416,7 @@ $tabs-holder-z-index: 250; .media-body { min-width: 0; - font-size: 12px; + font-size: $gl-font-size-sm; margin-left: 32px; } @@ -548,6 +547,7 @@ $tabs-holder-z-index: 250; } .mr-widget-section:not(:first-child) > div, + .mr-widget-section:not(:first-child) > section, .mr-widget-section .mr-widget-section > div { border-top: solid 1px var(--border-color, $border-color); } @@ -649,7 +649,6 @@ $tabs-holder-z-index: 250; .label-branch { @include gl-font-monospace; - font-size: 95%; overflow: hidden; word-break: break-all; } @@ -663,7 +662,7 @@ $tabs-holder-z-index: 250; > span { display: inline-block; max-width: 12.5em; - margin-bottom: -5px; + margin-bottom: px-to-rem(-5px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -987,6 +986,14 @@ $tabs-holder-z-index: 250; } } +.container-fluid.diffs-container-limited { + .flash-container { + @include gl-mx-auto; + @include gl-max-w-container-xl; + @include gl-px-5; + } +} + .submit-review-dropdown { &.show .dropdown-menu { width: calc(100vw - 20px); diff --git a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss deleted file mode 100644 index af2dac7739e..00000000000 --- a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss +++ /dev/null @@ -1,82 +0,0 @@ -@import 'mixins_and_variables_and_functions'; - -.ci-variable-list { - margin-left: 0; - margin-bottom: 0; - padding-left: 0; - list-style: none; - clear: both; -} - -.ci-variable-row { - display: flex; - align-items: flex-start; - - @include media-breakpoint-down(xs) { - align-items: flex-end; - } - - &:not(:last-child) { - margin-bottom: $gl-btn-padding; - - @include media-breakpoint-down(xs) { - margin-bottom: 3 * $gl-btn-padding; - } - } - - &:last-child { - .ci-variable-body-item:last-child { - margin-right: $ci-variable-remove-button-width; - - @include media-breakpoint-down(xs) { - margin-right: 0; - } - } - - .ci-variable-row-remove-button { - display: none; - } - - @include media-breakpoint-down(xs) { - .ci-variable-row-body { - margin-right: $ci-variable-remove-button-width; - } - } - } -} - -.ci-variable-row-body { - display: flex; - align-items: flex-start; - width: 100%; - padding-bottom: $gl-padding; - - @include media-breakpoint-down(xs) { - display: block; - } -} - -.ci-variable-body-item { - flex: 1; - - &:not(:last-child) { - margin-right: $gl-btn-padding; - - @include media-breakpoint-down(xs) { - margin-right: 0; - margin-bottom: $gl-btn-padding; - } - } -} - -.pipeline-schedule-form { - .gl-field-error { - margin: 10px 0 0; - } -} - -.pipeline-schedule-table-row { - a { - color: var(--gl-text-color, $gl-text-color); - } -} diff --git a/app/assets/stylesheets/page_bundles/profiles/preferences.scss b/app/assets/stylesheets/page_bundles/profiles/preferences.scss index 1a59f96c6ee..d09ad42a722 100644 --- a/app/assets/stylesheets/page_bundles/profiles/preferences.scss +++ b/app/assets/stylesheets/page_bundles/profiles/preferences.scss @@ -1,9 +1,9 @@ @import 'page_bundles/mixins_and_variables_and_functions'; .application-theme { - $ui-gray-bg: #303030; - $ui-light-gray-bg: #f0f0f0; - $ui-dark-mode-bg: #1f1f1f; + $ui-gray-bg: $gray-900; + $ui-light-gray-bg: $gray-50; + $ui-dark-mode-bg: $gray-950; .preview { font-size: 0; @@ -33,7 +33,7 @@ } &.ui-light-green { - background-color: $theme-light-green-700; + background-color: $theme-green-700; } &.ui-red { diff --git a/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss b/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss deleted file mode 100644 index 8f2cbc402c9..00000000000 --- a/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import 'mixins_and_variables_and_functions'; - -.storage-type-usage { - &:first-child { - @include gl-rounded-top-left-base; - @include gl-rounded-bottom-left-base; - } - - &:last-child { - @include gl-rounded-top-right-base; - @include gl-rounded-bottom-right-base; - } - - &:not(:last-child) { - @include gl-border-r-2; - @include gl-border-r-solid; - border-right-color: var(--white, $white); - } -} diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index e8fa93e1504..f36cbc129a7 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -173,3 +173,13 @@ $work-item-sticky-header-height: 52px; min-width: 100%; } } + +.work-item-notification-toggle { + .gl-toggle { + margin-left: auto; + } + + .gl-toggle-label { + font-weight: normal; + } +} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 0c9d151e3cd..38686d5e713 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -136,7 +136,7 @@ } .icon { - margin-right: $issuable-warning-icon-margin; + margin-right: $gl-padding-4; vertical-align: text-bottom; fill: $orange-600; } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index b9cae28537d..9ce470dbcf2 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -306,8 +306,6 @@ } .project-details { - max-width: 625px; - p, .commit-row-message { @include gl-mb-0; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 030e41046d3..7616f573412 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -235,7 +235,7 @@ body.gl-dark { } - .navbar-gitlab { + .navbar.navbar-gitlab { background-color: var(--gray-50); box-shadow: 0 1px 0 0 var(--gray-100); diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 8f0e0781918..db20034419a 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -20,7 +20,7 @@ // Header - .navbar-gitlab { + .navbar-gitlab:not(.super-sidebar-logged-out) { background-color: $navbar-theme-color; .navbar-collapse { @@ -283,11 +283,12 @@ $theme-color, $theme-color-darkest, ) { + --sidebar-background: #{mix(white, $theme-color-lightest, 50%)}; --transparent-white-16: rgba(255, 255, 255, 0.16); --transparent-white-24: rgba(255, 255, 255, 0.24); .super-sidebar { - background-color: $theme-color-lightest; + background-color: var(--sidebar-background); } .super-sidebar .user-bar { @@ -335,4 +336,8 @@ .active-indicator { background-color: $theme-color; } + + .super-sidebar-context-header { + color: $theme-color; + } } diff --git a/app/assets/stylesheets/themes/theme_light_gray.scss b/app/assets/stylesheets/themes/theme_light_gray.scss index 9b7fc10e769..e8357647f48 100644 --- a/app/assets/stylesheets/themes/theme_light_gray.scss +++ b/app/assets/stylesheets/themes/theme_light_gray.scss @@ -10,7 +10,7 @@ body { $gray-500 ); - .navbar-gitlab { + .navbar-gitlab:not(.super-sidebar-logged-out) { background-color: $gray-50; box-shadow: 0 1px 0 0 $border-color; diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss index 720a0ec58b8..6b058b2dd7b 100644 --- a/app/assets/stylesheets/themes/theme_light_green.scss +++ b/app/assets/stylesheets/themes/theme_light_green.scss @@ -6,7 +6,7 @@ body { $theme-green-200, $theme-green-500, $theme-green-500, - $theme-light-green-700, + $theme-green-700, $white ); diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index d5e9d35983a..b756e0ed704 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -132,19 +132,6 @@ fill: $red-500; } -// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3569 -.gl-mb-n5 { - margin-bottom: -$gl-spacing-scale-5; -} - -.gl-mb-n7 { - margin-bottom: -$gl-spacing-scale-7; -} - -.gl-mb-n8 { - margin-bottom: -$gl-spacing-scale-8; -} - .gl-hover-border-gray-100:hover { border-color: $gray-100; } |