diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 12:26:25 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-20 12:26:25 +0000 |
commit | a09983ae35713f5a2bbb100981116d31ce99826e (patch) | |
tree | 2ee2af7bd104d57086db360a7e6d8c9d5d43667a /app/assets/stylesheets/framework | |
parent | 18c5ab32b738c0b6ecb4d0df3994000482f34bd8 (diff) | |
download | gitlab-ce-a09983ae35713f5a2bbb100981116d31ce99826e.tar.gz |
Add latest changes from gitlab-org/gitlab@13-2-stable-ee
Diffstat (limited to 'app/assets/stylesheets/framework')
24 files changed, 128 insertions, 144 deletions
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 0eab86ff7ea..86e701604b5 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -179,7 +179,7 @@ &.user-authored { cursor: default; background-color: $gray-light; - border-color: $gray-200; + border-color: $gray-100; color: $gl-text-color-disabled; gl-emoji { diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index 534ada08b85..f7836213e5c 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -28,7 +28,7 @@ max-width: 300px; width: auto; background: $white; - border: 1px solid $gray-200; + border: 1px solid $gray-100; box-shadow: 0 1px 2px 0 rgba($black, 0.1); border-radius: $border-radius-default; z-index: 999; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index f47d0cab31f..fd5b3f74c4a 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -171,7 +171,7 @@ @include btn-green; } - &.btn-inverted { + &.btn-inverted:not(.disabled):not(:disabled) { &.btn-success { @include btn-outline($white, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800); } @@ -501,18 +501,19 @@ // All disabled buttons, regardless of color, type, etc %disabled { - background-color: $gray-light !important; - border-color: $gray-200 !important; - color: $gl-text-color-disabled !important; - opacity: 1 !important; - cursor: default !important; + background-color: $gray-light; + border-color: $gray-100; + color: $gl-text-color-disabled; + opacity: 1; + text-decoration: none; + cursor: default; &.cursor-not-allowed { - cursor: not-allowed !important; + cursor: not-allowed; } i { - color: $gl-text-color-disabled !important; + color: $gl-text-color-disabled; } } @@ -526,6 +527,10 @@ fieldset[disabled] .btn, &:hover { @extend %disabled; } + + &.btn-link { + background-color: transparent; + } } [readonly] { diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 849ca4a79f8..1abb7a9c06f 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -396,35 +396,16 @@ img.emoji { 🚨 Do not use these classes — they are deprecated and being removed. 🚨 See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details. **/ -.prepend-top-5 { margin-top: 5px; } .prepend-top-10 { margin-top: 10px; } .prepend-top-15 { margin-top: 15px; } -.prepend-top-default { margin-top: $gl-padding !important; } -.prepend-top-16 { margin-top: 16px; } .prepend-top-20 { margin-top: 20px; } -.prepend-left-5 { margin-left: 5px; } -.prepend-left-10 { margin-left: 10px; } .prepend-left-15 { margin-left: 15px; } -.prepend-left-default { margin-left: $gl-padding; } .prepend-left-20 { margin-left: 20px; } -.prepend-left-32 { margin-left: 32px; } .prepend-left-64 { margin-left: 64px; } -.append-right-2 { margin-right: 2px; } -.append-right-4 { margin-right: 4px; } -.append-right-5 { margin-right: 5px; } -.append-right-10 { margin-right: 10px; } .append-right-15 { margin-right: 15px; } -.append-right-default { margin-right: $gl-padding; } .append-right-20 { margin-right: 20px; } -.append-right-32 { margin-right: 32px; } -.append-right-48 { margin-right: 48px; } -.prepend-right-32 { margin-right: 32px; } -.append-bottom-5 { margin-bottom: 5px; } .append-bottom-10 { margin-bottom: 10px; } -.append-bottom-15 { margin-bottom: 15px; } .append-bottom-20 { margin-bottom: 20px; } -.append-bottom-default { margin-bottom: $gl-padding; } -.prepend-bottom-32 { margin-bottom: 32px; } .ml-10 { margin-left: 4.5rem; } .inline { display: inline-block; } .center { text-align: center; } @@ -560,41 +541,6 @@ img.emoji { } } -.onboarding-helper-container { - bottom: 40px; - right: 40px; - font-size: $gl-font-size-small; - background: $gray-50; - width: 200px; - border-radius: 24px; - box-shadow: 0 2px 4px $issue-boards-card-shadow; - z-index: 10000; - - .collapsible { - max-height: 0; - transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); - } - - &.expanded { - border-bottom-right-radius: $border-radius-default; - border-bottom-left-radius: $border-radius-default; - - .collapsible { - max-height: 1000px; - transition: max-height 1s ease-in-out; - } - } - - .avatar { - border-color: darken($gray-normal, 10%); - - img { - width: 32px; - height: 32px; - } - } -} - .gl-font-sm { font-size: $gl-font-size-small; } .gl-font-lg { font-size: $gl-font-size-large; } .gl-font-base { font-size: $gl-font-size-14; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index e4bee01f61f..7004bcc121d 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -98,11 +98,11 @@ width: $contextual-sidebar-collapsed-width - 1px; .collapse-text, - .icon-angle-double-left { + .icon-chevron-double-lg-left { display: none; } - .icon-angle-double-right { + .icon-chevron-double-lg-right { display: block; margin: 0; } @@ -381,7 +381,7 @@ margin-right: 8px; } - .icon-angle-double-right { + .icon-chevron-double-lg-right { display: none; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 485a4879c43..32c276ea6d2 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -639,9 +639,12 @@ display: none; cursor: pointer; pointer-events: all; - right: 22px; - top: 9px; + top: $gl-padding-8; font-size: 14px; + + &:not(.gl-icon) { + right: 22px; + } } &.has-value { @@ -1084,8 +1087,20 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { .color-input-container { .dropdown-label-color-preview { - border: 1px solid $gray-200; + border: 1px solid $gray-100; border-right: 0; + + &[style] { + border-color: transparent; + } + } + } +} + +.bulk-update { + .dropdown-toggle-text { + &.is-default { + color: $gl-text-color; } } } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index eef6d9031f8..8fd507a45bb 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -500,16 +500,27 @@ span.idiff { border: transparent; } -.code-navigation { - border-bottom: 1px $gray-darkest dashed; +.code-navigation-line:hover { + .code-navigation { + border-bottom: 1px $gray-darkest dashed; - &:hover { - border-bottom-color: $almost-black; + &:hover { + border-bottom-color: $almost-black; + } } } -.code-navigation-popover { - max-width: 450px; +.code-navigation-popover.popover { + max-width: calc(min(#{px-to-rem(560px)}, calc(100vw - #{$gl-padding-32}))); +} + +.code-navigation-popover-container { + max-height: px-to-rem(320px); +} + +.code-navigation-popover .code { + padding-left: $grid-size * 3; + text-indent: -$grid-size * 2; } .tree-item-link { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 9bba5c0614a..8f209d2d99a 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -26,6 +26,12 @@ margin-right: 6px; } + .bulk-update { + .filter-item { + margin-right: 0; + } + } + .sort-filter { display: inline-block; float: right; @@ -152,7 +158,7 @@ .filtered-search-token .selected, .filtered-search-term .selected { .name { - background-color: $gray-200; + background-color: $gray-100; } .operator { diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 44c8ace9040..ec8d5806345 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -4,6 +4,8 @@ textarea { input { border-radius: $border-radius-base; + color: $gl-text-color; + background-color: $input-bg; } input[type='text'].danger { @@ -126,10 +128,6 @@ label { display: inline; } -.wiki-content { - margin-top: 35px; -} - .form-control::placeholder { color: $gl-text-color-tertiary; } diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss index 8d5afe1d312..288849ba438 100644 --- a/app/assets/stylesheets/framework/gitlab_theme.scss +++ b/app/assets/stylesheets/framework/gitlab_theme.scss @@ -74,19 +74,6 @@ } } - &:focus:hover, - &:focus { - &.header-user-dropdown-toggle .header-user-notification-dot { - border-color: $white; - } - } - - &:hover { - &.header-user-dropdown-toggle .header-user-notification-dot { - border-color: $nav-svg-color + 33; - } - } - &:hover, &:focus { @include media-breakpoint-up(sm) { @@ -96,6 +83,10 @@ svg { fill: currentColor; } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $nav-svg-color + 33; + } } } @@ -109,6 +100,10 @@ fill: $nav-svg-color; } } + + &.header-user-dropdown-toggle .header-user-notification-dot { + border-color: $white; + } } .impersonated-user, @@ -171,7 +166,7 @@ color: $sidebar-text; } - svg { + .nav-icon-container svg { fill: $sidebar-text; } } @@ -347,7 +342,7 @@ body { .navbar-toggler, .navbar-toggler:hover { color: $gray-700; - border-left: 1px solid $gray-200; + border-left: 1px solid $gray-100; } } } @@ -365,7 +360,7 @@ body { .search-input-wrap { .search-icon { - fill: $gray-200; + fill: $gray-100; } .search-input { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 2c7e9428ef1..50628c7de82 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -570,9 +570,9 @@ } .header-user-notification-dot { - background-color: $orange-500; - height: 10px; - width: 10px; + background-color: $orange-300; + height: 12px; + width: 12px; right: 8px; top: -8px; } diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index 2c9397d363c..0fae1c7d235 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -20,7 +20,7 @@ width: 100%; } - $image-widths: 80 130 150 250 306 394 430; + $image-widths: 80 130 150 225 250 306 394 430; @each $width in $image-widths { &.svg-#{$width} { img, diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 385b29f8bbe..4d5032ac674 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -30,6 +30,7 @@ } &.status-box-issue-closed, + &.status-box-alert-resolved, &.status-box-mr-merged { background-color: $blue-500; } diff --git a/app/assets/stylesheets/framework/job_log.scss b/app/assets/stylesheets/framework/job_log.scss index 1a26c0283e5..2448be1bca3 100644 --- a/app/assets/stylesheets/framework/job_log.scss +++ b/app/assets/stylesheets/framework/job_log.scss @@ -5,7 +5,7 @@ font-size: 13px; word-break: break-all; word-wrap: break-word; - color: $gl-text-color-inverted; + color: color-yiq($builds-trace-bg); border-radius: $border-radius-small; min-height: 42px; background-color: $builds-trace-bg; diff --git a/app/assets/stylesheets/framework/memory_graph.scss b/app/assets/stylesheets/framework/memory_graph.scss index b0bfc4f47ff..510969e149a 100644 --- a/app/assets/stylesheets/framework/memory_graph.scss +++ b/app/assets/stylesheets/framework/memory_graph.scss @@ -1,4 +1,4 @@ .memory-graph-container { background: $white; - border: 1px solid $gray-200; + border: 1px solid $gray-100; } diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 52da1b9abfc..918ca448c21 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -137,7 +137,8 @@ transition-duration: 0.3s; } - .fa { + .fa, + svg { position: relative; top: 5px; font-size: 18px; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index bd262b65dc3..f85efc63645 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -313,7 +313,7 @@ right: 0; text-align: right; - .fa { + svg { right: 5px; } } @@ -323,7 +323,7 @@ left: 0; text-align: left; - .fa { + svg { left: 5px; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 1131248dd3f..9b33ed1b630 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -214,7 +214,7 @@ .health-status { .dropdown-body { .health-divider { - border-top-color: $gray-200; + border-top-color: $gray-100; } .dropdown-item:not(.health-dropdown-item) { diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss index 0a57a74eafc..2d16fdf4ee7 100644 --- a/app/assets/stylesheets/framework/stacked_progress_bar.scss +++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss @@ -36,7 +36,7 @@ } .status-neutral { - background-color: $gray-200; + background-color: $gray-100; color: $gl-gray-dark; &:hover { diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 4f66d6bf354..10796f319bf 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -94,7 +94,8 @@ margin-bottom: 16px; } - .boards-list { + .boards-list, + .board-swimlanes { height: calc(100vh - #{$header-height + $breadcrumb-min-height + $performance-bar-height + $system-footer-height + $gl-padding-32}); } } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index ff6ac87db76..1504f3ee50f 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -27,7 +27,13 @@ .timeline-entry { color: $gl-text-color; - background-color: $white; + + // [dark-theme]: only give background color to actual notes + // in the timeline, the note form textarea has a background + // of it's own + &:not(.note-form) { + background-color: $white; + } .timeline-entry-inner { position: relative; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 6e07a2b5de1..b5b86b807a6 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -89,7 +89,7 @@ background-color: $gray-10; border-width: 1px; border-style: solid; - border-color: $gray-200 $gray-200 $gray-400; + border-color: $gray-100 $gray-100 $gray-400; border-image: none; border-radius: 3px; box-shadow: 0 -1px 0 $gray-400 inset; @@ -181,7 +181,7 @@ background-color: $white; td { - border-color: $gray-200; + border-color: $gray-100; } } @@ -611,7 +611,7 @@ pre { word-wrap: break-word; color: $gl-text-color; background-color: $gray-light; - border: 1px solid $gray-200; + border: 1px solid $gray-100; border-radius: $border-radius-small; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 1536c5c3022..265dceb3c61 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -113,29 +113,29 @@ $gl-gray-600: #666 !default; $gl-gray-700: #555 !default; $gl-gray-800: #333 !default; -$green-50: #f1fdf6 !default; -$green-100: #dcf5e7 !default; -$green-200: #263a2e !default; -$green-300: #75d09b !default; -$green-400: #37b96d !default; -$green-500: #1aaa55 !default; -$green-600: #168f48 !default; -$green-700: #12753a !default; -$green-800: #0e5a2d !default; +$green-50: #ecf4ee !default; +$green-100: #c3e6cd !default; +$green-200: #91d4a8 !default; +$green-300: #52b87a !default; +$green-400: #2da160 !default; +$green-500: #108548 !default; +$green-600: #217645 !default; +$green-700: #24663b !default; +$green-800: #0d532a !default; $green-900: #0a4020 !default; $green-950: #072b15 !default; -$blue-50: #f6fafe !default; -$blue-100: #e4f0fb !default; -$blue-200: #b8d6f4 !default; -$blue-300: #73afea !default; -$blue-400: #418cd8 !default; -$blue-500: #1f78d1 !default; -$blue-600: #1b69b6 !default; -$blue-700: #17599c !default; -$blue-800: #134a81 !default; -$blue-900: #0f3b66 !default; -$blue-950: #0a2744 !default; +$blue-50: #e9f3fc !default; +$blue-100: #cbe2f9 !default; +$blue-200: #9dc7f1 !default; +$blue-300: #63a6e9 !default; +$blue-400: #428fdc !default; +$blue-500: #1f75cb !default; +$blue-600: #1068bf !default; +$blue-700: #0b5cad !default; +$blue-800: #064787 !default; +$blue-900: #033464 !default; +$blue-950: #002850 !default; $orange-50: #fffaf4 !default; $orange-100: #fff1de !default; @@ -164,14 +164,14 @@ $red-950: #4d0a00 !default; $gray-10: #fafafa !default; $gray-50: #f0f0f0 !default; $gray-100: #dbdbdb !default; -$gray-200: #dfdfdf !default; +$gray-200: #bfbfbf !default; $gray-300: #ccc !default; $gray-400: #bababa !default; $gray-500: #a7a7a7 !default; $gray-600: #919191 !default; $gray-700: #707070 !default; $gray-800: #4f4f4f !default; -$gray-900: #2e2e2e !default; +$gray-900: #303030 !default; $gray-950: #1f1f1f !default; $greens: ( @@ -333,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); /* * UI elements */ -$border-color: $gray-200; +$border-color: $gray-100; $shadow-color: $t-gray-a-08; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; @@ -479,9 +479,9 @@ $gl-btn-active-gradient: inset 0 2px 3px $gl-btn-active-background; $added: #63c363; $deleted: #f77; $line-added: #ecfdf0; -$line-added-dark: #c7f0d2; +$line-added-dark: #c7f0d2 !default; $line-removed: #fbe9eb; -$line-removed-dark: #fac5cd; +$line-removed-dark: #fac5cd !default; $line-number-old: #f9d7dc; $line-number-new: #ddfbe6; $line-number-select: #fbf2da; @@ -711,7 +711,6 @@ $input-lg-width: 320px; */ $document-index-color: #888; $help-shortcut-header-color: #333; -$accepting-mr-label-color: #69d100; /* * Issues @@ -868,7 +867,7 @@ $priority-label-empty-state-width: 114px; Popovers */ $popover-max-width: 384px; -$popover-box-shadow: 0 2px 3px 1px $gray-200; +$popover-box-shadow: 0 2px 3px 1px $gray-100; /* Issues Analytics diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index c7a50bdb5a3..acfda718e77 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -5,23 +5,23 @@ $secondary: $gray-light; $input-disabled-bg: $gray-light; -$input-border-color: $gray-200; +$input-border-color: $gray-100; $input-color: $gl-text-color; $input-font-size: $gl-font-size; $font-family-sans-serif: $regular-font; $font-family-monospace: $monospace-font; $btn-line-height: 20px; $table-accent-bg: $gray-light; -$table-border-color: $gray-200; +$table-border-color: $gray-100; $card-border-color: $border-color; -$card-cap-bg: $gray-light; +$card-cap-bg: $gray-light !default; $success: $green-500; $info: $blue-500; $warning: $orange-500; $danger: $red-500; $zindex-modal-backdrop: 1040; $nav-divider-margin-y: ($grid-size / 2); -$dropdown-divider-bg: $gray-200; +$dropdown-divider-bg: $gray-100; $dropdown-item-padding-y: 8px; $dropdown-item-padding-x: 12px; $popover-max-width: 300px; |