diff options
Diffstat (limited to 'app/assets/stylesheets')
23 files changed, 55 insertions, 124 deletions
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 9118c2a3a50..6f4f7a29334 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -57,7 +57,6 @@ @import 'framework/responsive_tables'; @import 'framework/stacked_progress_bar'; @import 'framework/sortable'; -@import 'framework/feature_highlight'; @import 'framework/read_more'; @import 'framework/system_messages'; @import 'framework/spinner'; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 28c0c071dc0..fc694e0d37f 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -24,7 +24,7 @@ width: $award-emoji-width; font-size: 14px; background-color: $white; - border: 1px solid $border-white-light; + border: 1px solid $border-color; border-radius: $border-radius-base; box-shadow: 0 6px 12px $award-emoji-menu-shadow; pointer-events: none; @@ -218,7 +218,7 @@ } .award-control-icon { - color: $border-gray-normal; + color: $gray-100; svg { height: $default-icon-size; diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index cae2ea1716c..4249bb372dc 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -25,8 +25,8 @@ background-color: $gray-light; padding: $gl-padding; margin-bottom: 0; - border-top: 1px solid $white-dark; - border-bottom: 1px solid $white-dark; + border-top: 1px solid $border-color; + border-bottom: 1px solid $border-color; color: $gl-text-color; &.white { @@ -76,14 +76,14 @@ .sub-header-block { background-color: $white; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid $border-color; padding: 11px 0; margin-bottom: 11px; } .content-block { padding: $gl-padding 0; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid $border-color; > .controls { float: right; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 07539b59574..709c33a2ad8 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -118,7 +118,7 @@ } @mixin btn-white { - @include btn-color($white, $border-color, $gray-50, $border-white-normal, $white-dark, $border-white-normal, $gl-text-color); + @include btn-color($white, $gray-200, $gray-50, $gray-200, $gray-100, $gray-300, $gl-text-color); } @mixin btn-purple { @@ -276,7 +276,7 @@ .active { box-shadow: $gl-btn-active-background; - border: 1px solid $border-white-normal !important; + border: 1px solid $gray-100 !important; background-color: $btn-active-gray-light !important; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 343e1ebc97d..874cfa2fe53 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -319,7 +319,7 @@ li.note { .progress { margin-top: 4px; box-shadow: none; - background-color: $border-gray-light; + background-color: $gray-100; } } diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss deleted file mode 100644 index 0e76d651b70..00000000000 --- a/app/assets/stylesheets/framework/feature_highlight.scss +++ /dev/null @@ -1,53 +0,0 @@ -.feature-highlight { - &::before { - content: ''; - display: block; - top: 6px; - left: 6px; - width: 8px; - height: 8px; - background-color: $blue-500; - border-radius: 50%; - box-shadow: 0 0 0 rgba($blue-500, 0.4); - animation: pulse-highlight 2s infinite; - } - - &:hover::before, - &.disable-animation::before { - animation: none; - } - - &[disabled]::before { - display: none; - } -} - - -.feature-highlight-illustration { - background-color: $theme-indigo-50; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - border-bottom: 1px solid darken($gray-normal, 8%); -} - -.feature-highlight-popover { - width: 240px; - - .popover-body { - padding: 0; - } -} - -@include keyframes(pulse-highlight) { - 0% { - box-shadow: 0 0 0 0 rgba($blue-200, 0.4); - } - - 70% { - box-shadow: 0 0 0 10px transparent; - } - - 100% { - box-shadow: 0 0 0 0 transparent; - } -} diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 30f6d39f70b..9e453249a79 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -108,7 +108,7 @@ } .right-sidebar { - border-left: 1px solid $gray-50; + border-left: 1px solid $border-color; &.right-sidebar-merge-requests { @include media-breakpoint-up(lg) { @@ -411,7 +411,7 @@ .issuable-sidebar-header { @include clearfix; padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5; - border-bottom: 1px solid $border-gray-normal; + border-bottom: 1px solid $border-color; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. width: $right-sidebar-inner-width; @@ -587,7 +587,7 @@ } .participants { - border-bottom: 1px solid $border-gray-normal; + border-bottom: 1px solid $border-color; } .hide-collapsed { @@ -598,7 +598,7 @@ width: 100%; height: $sidebar-toggle-height; margin-left: 0; - border-bottom: 1px solid $border-white-normal; + border-bottom: 1px solid $border-color; border-radius: 0; } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 25542a86e8c..eefdbda8f4f 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -89,7 +89,7 @@ font-weight: $gl-font-weight-bold; margin: 24px 0 16px; padding-bottom: 0.3em; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid $gray-200; color: $gl-text-color; &:first-child { @@ -102,7 +102,7 @@ font-weight: $gl-font-weight-bold; margin: 24px 0 16px; padding-bottom: 0.3em; - border-bottom: 1px solid $white-dark; + border-bottom: 1px solid $gray-200; color: $gl-text-color; } @@ -138,7 +138,7 @@ &:dir(rtl) { border-left: 0; - border-right: 3px solid $white-dark; + border-right: 3px solid $gray-100; } p { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 0df00532fe9..31948762972 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -87,8 +87,6 @@ $size-scale: ( // Color schema $darken-normal-factor: 7% !default; $darken-dark-factor: 10% !default; -$darken-border-factor: 5% !default; -$darken-border-dashed-factor: 25% !default; $purple: #6d49cb !default; $purple-light: #ede8fb !default; @@ -116,15 +114,6 @@ $t-gray-a-08: rgba(31, 30, 36, 0.08) !default; $t-gray-a-16: rgba(31, 30, 36, 0.16) !default; $t-gray-a-24: rgba(31, 30, 36, 0.24) !default; -$white-dark: darken($gray-50, 2) !default; - -$border-white-light: darken($white, $darken-border-factor) !default; -$border-white-normal: darken($gray-50, $darken-border-factor) !default; - -$border-gray-light: darken($gray-light, $darken-border-factor); -$border-gray-normal: darken($gray-normal, $darken-border-factor); -$border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); - /* * UI elements */ diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss index db8c3d163c0..c42b7baec39 100644 --- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss +++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss @@ -144,7 +144,7 @@ blockquote, color: $gl-grayish-blue; padding: 0 0 0 15px; margin: 0; - border-left: 3px solid $white-dark; + border-left: 3px solid $gray-100; } span.highlight_word { diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss index 0fb1b3c9c92..013e9e020fc 100644 --- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss @@ -75,7 +75,7 @@ .diffOverview { background-color: $white; - border-left: 1px solid $white-dark; + border-left: 1px solid $border-color; cursor: ns-resize; } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index b6caa845cfa..5c8e9bce0e7 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -147,7 +147,7 @@ .nav-links, .gl-tabs-nav, .common-note-form .md-area.is-focused .nav-links { - border-color: var(--ide-border-color-alt, $white-dark); + border-color: var(--ide-border-color-alt, $border-color); } pre { @@ -291,14 +291,14 @@ &:hover, &:focus { - border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; + border-color: var(--ide-btn-default-hover-border, $border-color) !important; background-color: var(--ide-btn-default-background, $gray-50) !important; } &:active, .active { - border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; - background-color: var(--ide-btn-default-background, $white-dark) !important; + border-color: var(--ide-btn-default-hover-border, $border-color) !important; + background-color: var(--ide-btn-default-background, $border-color) !important; } } diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index f7b979c2dac..7e2bf4a03a3 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -74,15 +74,15 @@ $ide-commit-header-height: 48px; display: flex; flex-direction: column; flex: 1; - border-left: 1px solid var(--ide-border-color, $white-dark); - border-right: 1px solid var(--ide-border-color, $white-dark); + border-left: 1px solid var(--ide-border-color, $border-color); + border-right: 1px solid var(--ide-border-color, $border-color); overflow: hidden; } .multi-file-tabs { display: flex; background-color: var(--ide-background, $gray-light); - box-shadow: inset 0 -1px var(--ide-border-color, $white-dark); + box-shadow: inset 0 -1px var(--ide-border-color, $border-color); > ul { display: flex; @@ -94,8 +94,8 @@ $ide-commit-header-height: 48px; align-items: center; padding: $grid-size $gl-padding; background-color: var(--ide-background-hover, $gray-normal); - border-right: 1px solid var(--ide-border-color, $white-dark); - border-bottom: 1px solid var(--ide-border-color, $white-dark); + border-right: 1px solid var(--ide-border-color, $border-color); + border-bottom: 1px solid var(--ide-border-color, $border-color); &.active, .gl-tab-nav-item-active { @@ -136,12 +136,12 @@ $ide-commit-header-height: 48px; font-weight: normal !important; background-color: var(--ide-background-hover, $gray-normal); - border-right: 1px solid var(--ide-border-color, $white-dark); - border-bottom: 1px solid var(--ide-border-color, $white-dark); + border-right: 1px solid var(--ide-border-color, $border-color); + border-bottom: 1px solid var(--ide-border-color, $border-color); &.gl-tab-nav-item-active { background-color: var(--ide-highlight-background, $white); - border-color: var(--ide-border-color, $white-dark); + border-color: var(--ide-border-color, $border-color); border-bottom-color: transparent; } @@ -245,7 +245,7 @@ $ide-commit-header-height: 48px; } .ide-mode-tabs { - border-bottom: 1px solid var(--ide-border-color, $white-dark); + border-bottom: 1px solid var(--ide-border-color, $border-color); li a { padding: $gl-padding-8 $gl-padding; @@ -260,7 +260,7 @@ $ide-commit-header-height: 48px; .ide-status-bar { color: var(--ide-text-color, $gl-text-color); - border-top: 1px solid var(--ide-border-color, $white-dark); + border-top: 1px solid var(--ide-border-color, $border-color); padding: 2px $gl-padding-8 0; background-color: var(--ide-footer-background, $white); display: flex; @@ -358,8 +358,8 @@ $ide-commit-header-height: 48px; flex: 1; flex-direction: column; background-color: var(--ide-highlight-background, $white); - border-left: 1px solid var(--ide-border-color, $white-dark); - border-top: 1px solid var(--ide-border-color, $white-dark); + border-left: 1px solid var(--ide-border-color, $border-color); + border-top: 1px solid var(--ide-border-color, $border-color); border-top-left-radius: $border-radius-small; min-height: 0; // firefox fix } @@ -384,7 +384,7 @@ $ide-commit-header-height: 48px; .multi-file-commit-panel-header { height: $ide-commit-header-height; - border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); + border-bottom: 1px solid var(--ide-border-color-alt, $border-color); padding: 12px 0; } @@ -465,7 +465,7 @@ $ide-commit-header-height: 48px; .multi-file-commit-form { position: relative; background-color: var(--ide-highlight-background, $white); - border-left: 1px solid var(--ide-border-color, $white-dark); + border-left: 1px solid var(--ide-border-color, $border-color); transition: all 0.3s ease; > form, @@ -473,7 +473,7 @@ $ide-commit-header-height: 48px; padding: $gl-padding 0; margin-left: $gl-padding; margin-right: $gl-padding; - border-top: 1px solid var(--ide-border-color-alt, $white-dark); + border-top: 1px solid var(--ide-border-color-alt, $border-color); } .btn { @@ -544,7 +544,7 @@ $ide-commit-header-height: 48px; margin-right: $gl-padding; &.is-first { - border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); + border-bottom: 1px solid var(--ide-border-color-alt, $border-color); } } @@ -603,8 +603,8 @@ $ide-commit-header-height: 48px; width: calc(100% + 1px); padding-right: $gl-padding + 1px; background-color: var(--ide-highlight-background, $white); - border-top-color: var(--ide-border-color, $white-dark); - border-bottom-color: var(--ide-border-color, $white-dark); + border-top-color: var(--ide-border-color, $border-color); + border-bottom-color: var(--ide-border-color, $border-color); &::after { content: ''; @@ -714,7 +714,7 @@ $ide-commit-header-height: 48px; padding: 12px 0; margin-left: $ide-tree-padding; margin-right: $ide-tree-padding; - border-bottom: 1px solid var(--ide-border-color-alt, $white-dark); + border-bottom: 1px solid var(--ide-border-color-alt, $border-color); svg { color: var(--ide-text-color-secondary, $gray-500); @@ -906,7 +906,7 @@ $ide-commit-header-height: 48px; .multi-file-commit-panel-inner { padding: $grid-size 0; background-color: var(--ide-highlight-background, $white); - border-right: 1px solid var(--ide-border-color, $white-dark); + border-right: 1px solid var(--ide-border-color, $border-color); } .ide-right-sidebar-jobs-detail { @@ -1092,7 +1092,7 @@ $ide-commit-header-height: 48px; .ide-file-templates { padding: $grid-size $gl-padding; background-color: var(--ide-background, $gray-light); - border-bottom: 1px solid var(--ide-border-color, $white-dark); + border-bottom: 1px solid var(--ide-border-color, $border-color); .dropdown { min-width: 180px; @@ -1107,7 +1107,7 @@ $ide-commit-header-height: 48px; height: 65px; padding: 8px 16px; background-color: var(--ide-background, $gray-10); - box-shadow: inset 0 -1px var(--ide-border-color, $white-dark); + box-shadow: inset 0 -1px var(--ide-border-color, $border-color); } .ide-commit-list-changed-icon { diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 8dc07715989..7a9c7487a7e 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -90,7 +90,7 @@ } .reference { - border-top: 1px solid $border-gray-normal; + border-top: 1px solid $border-color; } } } diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index 2bd8984c2ea..d61e3f85995 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -43,7 +43,7 @@ .btn-group.open .btn-default { background-color: $gray-50; - border-color: $border-white-normal; + border-color: $gray-100; } .btn .text-center { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 8511bc22725..f1055590539 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -7,7 +7,7 @@ background: none; word-break: normal; overflow-x: auto; - border-left: 3px solid $white-dark; + border-left: 3px solid $gray-100; color: $gl-text-color-secondary; } @@ -93,7 +93,7 @@ color: $gl-text-color-secondary; padding: 1px $gl-padding-4; cursor: pointer; - border: 1px solid $border-white-normal; + border: 1px solid $gray-100; border-radius: $border-radius-default; margin-left: 5px; font-size: 12px; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index a8f557270ba..d01286bd209 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -141,7 +141,7 @@ table.pipeline-project-metrics tr td { top: 5px; bottom: 0; left: -16px; - border-left: 2px solid $border-white-normal; + border-left: 2px solid $border-color; } .group-row { @@ -152,7 +152,7 @@ table.pipeline-project-metrics tr td { display: block; width: 10px; height: 0; - border-top: 2px solid $border-white-normal; + border-top: 2px solid $border-color; position: absolute; top: 30px; left: -16px; diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 052e3326318..9748983d1ae 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -29,7 +29,7 @@ .issue-token:hover &, .issue-token-link:focus > & { - background-color: $border-gray-normal; + background-color: $gray-100; } } @@ -41,7 +41,7 @@ &:focus, .issue-token:hover &, .issue-token-link:focus + & { - background-color: $border-gray-normal; + background-color: $gray-100; outline: none; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index eb2061081ae..8792c7f9a72 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -986,7 +986,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .disabled-comment { background-color: $gray-light; border-radius: $border-radius-base; - border: 1px solid $border-gray-normal; + border: 1px solid $border-color; color: $note-disabled-comment-color; padding: $gl-padding-8 0; diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index 3015cfec34f..7464946cfc8 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -39,7 +39,7 @@ content: ' '; height: 100%; width: 4px; - background-color: $white-dark; + background-color: $gray-100; } position: relative; diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index f5787799fce..91b381462be 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -159,7 +159,7 @@ &:hover { background-color: $gray-50; - border-color: $border-white-normal; + border-color: $gray-100; text-decoration: none; } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 5a9f3dd096e..cb0da7e782d 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -13,12 +13,9 @@ $gray-darkest: $gray-700; $t-gray-a-08: rgba($gray-950, 0.08); $black-normal: $gray-900; -$white-dark: $gray-100; $border-color: #4f4f4f; -$border-white-normal: $border-color; - $gl-text-color-secondary: $gray-700; $body-bg: $gray-10; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 708d173ed3e..3ab3e195b06 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -137,7 +137,6 @@ aside.right-sidebar:not(.right-sidebar-merge-requests) { background-color: $gray-10; - border-left-color: $gray-50; } :root.gl-dark { |