diff options
Diffstat (limited to 'app/assets/stylesheets')
58 files changed, 468 insertions, 647 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 4a15e0eb458..fa5ab590232 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -26,7 +26,6 @@ @import './pages/projects'; @import './pages/prometheus'; @import './pages/registry'; -@import './pages/runners'; @import './pages/search'; @import './pages/service_desk'; @import './pages/settings'; diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss index e55141e15df..90aab7ce342 100644 --- a/app/assets/stylesheets/application_dark.scss +++ b/app/assets/stylesheets/application_dark.scss @@ -1,3 +1,60 @@ @import './themes/dark'; @import './application'; + +@import './themes/theme_helper'; + +body.gl-dark { + @include gitlab-theme( + $gray-900, + $gray-400, + $gray-500, + $gray-800, + $gray-900, + $white + ); + + .logo-text svg { + fill: var(--gl-text-color); + } + + .navbar-gitlab { + background-color: var(--gray-50); + box-shadow: 0 1px 0 0 var(--gray-100); + + .navbar-sub-nav, + .navbar-nav { + li { + > a:hover, + > a:focus, + > button:hover, + > button:focus { + color: var(--gl-text-color); + background-color: var(--gray-200); + } + } + + li.active, + li.dropdown.show { + > a, + > button { + color: var(--gl-text-color); + background-color: var(--gray-200); + } + } + } + + .search { + form { + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--border-color); + + &:active, + &:hover { + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--blue-200); + } + } + } + } +} diff --git a/app/assets/stylesheets/components/feature_highlight.scss b/app/assets/stylesheets/components/feature_highlight.scss new file mode 100644 index 00000000000..08706951967 --- /dev/null +++ b/app/assets/stylesheets/components/feature_highlight.scss @@ -0,0 +1,9 @@ +.gl-badge.feature-highlight-badge { + background-color: $purple-light; + color: $purple; + + &, + &.sm { + padding: 0.25rem; + } +} diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss deleted file mode 100644 index b9bb3edaaab..00000000000 --- a/app/assets/stylesheets/fontawesome_custom.scss +++ /dev/null @@ -1,43 +0,0 @@ -// Custom Font Awesome styles that render emojis in asciidoc -.md { - .fa { - display: inline-block; - font-style: normal; - font-size: 14px; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - } - - .fa-2x { - font-size: 2em; - } - - .fa-exclamation-triangle::before { - content: '⚠'; - } - - .fa-exclamation-circle::before { - content: '❗'; - } - - .fa-lightbulb-o::before { - content: '💡'; - } - - .fa-thumb-tack::before { - content: '📌'; - } - - .fa-fire::before { - content: '🔥'; - } - - .fa-square-o::before { - content: '\2610'; - } - - .fa-check-square-o::before { - content: '\2611'; - } -} diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 662f7f52d61..412a1e8d6c9 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -122,12 +122,8 @@ } } -.award-control { +.gl-button.btn.award-control { margin: 4px 8px 4px 0; - outline: 0; - position: relative; - display: block; - float: left; &.disabled { cursor: default; @@ -145,15 +141,6 @@ &:hover, &:active, &.is-active { - background-color: $blue-50; - border-color: $blue-200; - box-shadow: none; - outline: 0; - - .award-control-icon svg { - fill: $blue-500; - } - .award-control-icon-neutral { opacity: 0; } @@ -164,6 +151,14 @@ } } + &.active, + &.is-active, + &:active { + background-color: $blue-50; + border-color: $blue-200; + box-shadow: inset 0 0 2px $blue-200; + } + &.is-active { .award-control-icon-positive { opacity: 0; @@ -192,10 +187,6 @@ &:focus { outline: 0; } - - .award-control-icon { - margin: 0; - } } &.is-loading { @@ -213,9 +204,7 @@ gl-emoji, .award-control-icon { vertical-align: middle; - margin-right: 0.15em; - font-size: 1.5em; - line-height: 1; + line-height: 0.5em; } .award-control-icon-loading { @@ -224,11 +213,8 @@ .award-control-icon { color: $border-gray-normal; - margin-top: 1px; - padding: 0 2px; svg { - margin-bottom: 1px; height: $default-icon-size; width: $default-icon-size; border-radius: 50%; @@ -239,10 +225,8 @@ .award-control-icon-positive, .award-control-icon-super-positive { @include transition(opacity, transform); - position: absolute; - left: 10px; - bottom: 6px; opacity: 0; + position: absolute; path { fill: $award-emoji-positive-add-lines; @@ -261,7 +245,6 @@ // migrated to Vue. .gl-button .award-emoji-block gl-emoji { - top: -1px; margin-top: -1px; margin-bottom: -1px; } @@ -363,3 +346,7 @@ } } } + +.awards .is-active { + box-shadow: inset 0 0 0 1px $blue-200; +} diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss index 95025459cc9..ef4355ad157 100644 --- a/app/assets/stylesheets/framework/ci_variable_list.scss +++ b/app/assets/stylesheets/framework/ci_variable_list.scss @@ -75,26 +75,3 @@ padding-top: 5px; padding-bottom: 5px; } - -.ci-variable-row-remove-button { - @include transition(color); - flex-shrink: 0; - display: flex; - justify-content: center; - align-items: center; - width: $ci-variable-remove-button-width; - height: $input-height; - padding: 0; - background: transparent; - color: $gl-text-color-secondary; - - &:hover, - &:focus { - outline: none; - color: $gl-text-color; - } - - &[disabled] { - color: $gl-text-color-disabled; - } -} diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 5d182373fb1..652ffd79ab3 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -121,10 +121,6 @@ hr { @include str-truncated(30%); } - &-60 { - @include str-truncated(60%); - } - &-100 { @include str-truncated(100%); } @@ -292,11 +288,6 @@ img.emoji { } } -.search_box { - @extend .card.card-body; - text-align: center; -} - .dropzone .dz-preview .dz-progress { border-color: $border-color !important; @@ -426,7 +417,6 @@ img.emoji { .mw-460 { max-width: 460px; } .mw-6em { max-width: 6em; } .mw-70p { max-width: 70%; } -.mw-90p { max-width: 90%; } // By default flex items don't shrink below their minimum content size. // To change this, these clases set a min-width or min-height diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index bd15022eadf..bc7a31c112f 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -532,10 +532,6 @@ table.code { &.parallel { display: table-cell; width: 46%; - - span { - word-break: break-all; - } } &.old { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index bdde6c7b313..ff42cd836da 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -133,13 +133,15 @@ } } -.dropdown-menu-toggle { +// This is double classed to solve a specificity issue with the gitlab ui buttons +.dropdown-menu-toggle.dropdown-menu-toggle { @extend .dropdown-toggle; + justify-content: flex-start; + overflow: hidden; padding-right: 25px; position: relative; - width: 160px; text-overflow: ellipsis; - overflow: hidden; + width: 160px; .fa { position: absolute; @@ -376,11 +378,13 @@ } > a, - > button { + > button, + > .gl-button { display: flex; + justify-content: flex-start; margin: 0; - text-overflow: inherit; text-align: left; + text-overflow: inherit; &.btn .fa:not(:last-child) { margin-left: 5px; diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss index eda3e33a6aa..78995c6e4f5 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -24,3 +24,53 @@ [id^='editor-lite-'] { height: 500px; } + +.monaco-editor.gl-editor-lite { + .margin-view-overlays { + .line-numbers { + @include gl-display-flex; + @include gl-justify-content-end; + @include gl-relative; + + &::before { + @include gl-visibility-hidden; + @include gl-align-self-center; + @include gl-bg-gray-400; + @include gl-mr-2; + @include gl-w-4; + @include gl-h-4; + mask-image: asset_url('icons-stacked.svg#link'); + mask-repeat: no-repeat; + mask-size: cover; + mask-position: center; + content: ''; + } + + &:hover { + @include gl-text-decoration-underline; + cursor: pointer !important; + } + + &:hover::before { + @include gl-visibility-visible; + } + + &:focus::before { + @include gl-visibility-visible; + outline: auto; + } + + .link-anchor { + @include gl-display-block; + @include gl-absolute; + @include gl-w-full; + @include gl-h-full; + } + } + } +} + +.active-line-text { + @include gl-bg-orange-600; + @include gl-opacity-3; +} diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index c5c660c1014..1ddde3d2ed6 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -1,10 +1,10 @@ gl-emoji { font-style: normal; display: inline-flex; - vertical-align: middle; + vertical-align: baseline; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - font-size: 1.4em; - line-height: 1em; + font-size: 1.2em; + line-height: 1; } .user-status-emoji { @@ -26,6 +26,13 @@ gl-emoji { height: 30px; // Create a width that fits 9 emojis per row width: 100 / 9 * 1%; + transition: transform 0.15s cubic-bezier(0.3, 0, 0.2, 2) !important; + will-change: transform; + + &:hover, + &:focus { + transform: scale(1.3); + } } .emoji-picker .gl-new-dropdown .dropdown-menu { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index a4af45a467c..f76101d92b1 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -204,10 +204,6 @@ margin-bottom: 10px; } - &:hover { - @extend .form-control:hover; - } - &.focus, &.focus:hover { border-color: $blue-300; @@ -294,14 +290,14 @@ flex-direction: column; } -.filtered-search-history-dropdown-toggle-button { - flex: 1; - width: auto; +.filtered-search-history-dropdown-toggle-button.gl-button { border-radius: $border-radius-default 0 0 $border-radius-default; - border: 0; border-right: 1px solid $border-color; + box-shadow: none; color: $gl-text-color-secondary; + flex: 1; transition: color 0.1s linear; + width: auto; &:hover, &:focus { @@ -342,12 +338,6 @@ } } -.filter-dropdown-container { - .dropdown-toggle { - line-height: 22px; - } -} - @include media-breakpoint-down(sm) { .issues-details-filters, .epics-details-filters { @@ -402,7 +392,6 @@ > svg { position: absolute; - top: 11px; right: 6px; } } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index fdb56a128c7..432be7d0b3f 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -442,22 +442,22 @@ font-weight: $gl-font-weight-normal; margin-left: -6px; font-size: 11px; - color: $white; + color: var(--gray-950, $white); padding: 0 5px; line-height: 12px; border-radius: 7px; box-shadow: 0 1px 0 rgba($gl-header-color, 0.2); &.green-badge { - background-color: $green-400; + background-color: var(--green-400, $green-400); } &.merge-requests-count { - background-color: $orange-400; + background-color: var(--orange-400, $orange-400); } &.todos-count { - background-color: $blue-400; + background-color: var(--blue-400, $blue-400); } } @@ -511,7 +511,7 @@ .header-user { &.show .dropdown-menu { margin-top: 4px; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); left: auto; max-height: $dropdown-max-height-lg; @@ -580,7 +580,7 @@ .no-emoji-placeholder, .clear-user-status { svg { - fill: $gl-text-color-secondary; + fill: var(--gray-500, $gray-500); } } diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index ec433434573..48a18e0d145 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -94,14 +94,6 @@ body.modal-open { padding-right: 0 !important; } -.modal-no-backdrop { - @extend .modal-dialog; - - .modal-content { - box-shadow: none; - } -} - .modal { background-color: $black-transparent; diff --git a/app/assets/stylesheets/framework/page_header.scss b/app/assets/stylesheets/framework/page_header.scss index 660e3dcac8d..c8b4e306a2e 100644 --- a/app/assets/stylesheets/framework/page_header.scss +++ b/app/assets/stylesheets/framework/page_header.scss @@ -12,28 +12,11 @@ } } - .header-action-buttons { - i { - color: $gl-text-color-secondary; - font-size: 13px; - margin-right: 3px; - } - - @include media-breakpoint-down(xs) { - .btn { - width: 100%; - margin-top: 10px; - } - - .dropdown { - width: 100%; - } - } - } - .avatar { - @extend .avatar-inline; - margin-left: 0; + float: none; + display: inline-block; + margin-left: 2px; + flex-shrink: 0; @include media-breakpoint-up(sm) { margin-left: 4px; diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss index 07c3eb19fd4..f57d906e73c 100644 --- a/app/assets/stylesheets/framework/responsive_tables.scss +++ b/app/assets/stylesheets/framework/responsive_tables.scss @@ -3,6 +3,7 @@ max-width: #{$max + '%'}; } +.gl-responsive-table-row, .gl-responsive-table-row-layout { width: 100%; @@ -17,7 +18,6 @@ } .gl-responsive-table-row { - @extend .gl-responsive-table-row-layout; margin-top: 10px; border: 1px solid $border-color; color: $gray-500; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 2ad9a9d2dff..27b7cac2df5 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -108,7 +108,7 @@ > .dropdown, > input, > form { - margin-right: $gl-padding-top; + margin-right: $gl-padding-8; &:last-child { margin-right: 0; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 241aaad015e..cb8a0c40f7f 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -58,19 +58,6 @@ height: $gl-padding; } } - - .copy-email-button { // TODO: replace with utility - @include gl-w-full; - @include gl-h-full; - } - - .copy-email-address { - height: 60px; - - &:hover { - background: $gray-100; - } - } } .right-sidebar-expanded { diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss index 2aa0ab6c1eb..c8eadce5c51 100644 --- a/app/assets/stylesheets/framework/spinner.scss +++ b/app/assets/stylesheets/framework/spinner.scss @@ -20,7 +20,7 @@ } } -@mixin spinner($size: 16px, $border-width: 2px, $color: $orange-400) { +@mixin spinner($size: 16px, $border-width: 2px, $color: $gray-700) { border-radius: 50%; position: relative; margin: 0 auto; @@ -46,7 +46,7 @@ } &.spinner-dark { - @include spinner-color($gray-500); + @include spinner-color($gray-700); } &.spinner-light { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 5624a6ea8a3..648ae29e212 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -1,6 +1,3 @@ -// Custom Fontawesome icons -@import 'fontawesome_custom'; - /** * Apply Markup (Markdown/AsciiDoc) typography * @@ -435,7 +432,9 @@ } } - a.with-attachment-icon { + a.with-attachment-icon, + a[href*='/uploads/'], + a[href*='storage.googleapis.com/google-code-attachments/'] { &::before { margin-right: 4px; @@ -449,8 +448,6 @@ a[href*='/uploads/'], a[href*='storage.googleapis.com/google-code-attachments/'] { - @extend .with-attachment-icon; - &.no-attachment-icon { &::before { display: none; @@ -507,32 +504,56 @@ text-decoration: line-through; } - .admonitionblock td.icon { - width: 1%; + // Custom Font Awesome styles that render emojis in asciidoc + .fa { + display: inline-block; + font-style: normal; + font-size: 14px; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } - [class^='fa icon-'] { - @extend .fa-2x; - } + .fa-2x, + .admonitionblock td.icon [class^='fa icon-'] { + font-size: 2em; + } - .icon-note { - @extend .fa-thumb-tack; - } + .fa-exclamation-triangle::before, + .admonitionblock td.icon .icon-warning::before { + content: '⚠'; + } - .icon-tip { - @extend .fa-lightbulb-o; - } + .fa-exclamation-circle::before, + .admonitionblock td.icon .icon-important::before { + content: '❗'; + } - .icon-warning { - @extend .fa-exclamation-triangle; - } + .fa-lightbulb-o::before, + .admonitionblock td.icon .icon-tip::before { + content: '💡'; + } - .icon-caution { - @extend .fa-fire; - } + .fa-thumb-tack::before, + .admonitionblock td.icon .icon-note::before { + content: '📌'; + } - .icon-important { - @extend .fa-exclamation-circle; - } + .fa-fire::before, + .admonitionblock td.icon .icon-caution::before { + content: '🔥'; + } + + .fa-square-o::before { + content: '\2610'; + } + + .fa-check-square-o::before { + content: '\2611'; + } + + .admonitionblock td.icon { + width: 1%; } .metrics-embed { @@ -640,12 +661,13 @@ code { .commit-sha, .ref-name, .pipeline-number { - @extend .monospace; + font-family: $monospace-font; font-size: 95%; } -.git-revision-dropdown .dropdown-content ul li a { - @extend .ref-name; +.git-revision-dropdown .dropdown-content li:not(.dropdown-menu-empty-item) a { + font-family: $monospace-font; + font-size: 95%; word-break: break-all; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 1aa4177c902..18aa0d3013d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -82,7 +82,7 @@ $darken-border-dashed-factor: 25% !default; $white: #fff !default; $white-normal: #f0f0f0 !default; $white-dark: #eaeaea !default; -$white-transparent: rgba(255, 255, 255, 0.8) !default; +$white-transparent: rgba($white, 0.8) !default; $gray-lightest: #fdfdfd !default; $gray-light: #fafafa !default; @@ -352,8 +352,8 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor); */ $border-color: $gray-100; $shadow-color: $t-gray-a-08; -$well-expand-item: #e8f2f7; -$well-inner-border: #eef0f2; +$well-expand-item: #e8f2f7 !default; +$well-inner-border: #eef0f2 !default; $well-light-border: #f1f1f1; $well-light-text-color: #5b6169; @@ -590,7 +590,7 @@ $gl-btn-xs-line-height: 13px; /* * Badges */ -$badge-bg: rgba(0, 0, 0, 0.07); +$badge-bg: rgba($black, 0.07); /* * Pagination @@ -842,10 +842,10 @@ $linked-project-column-margin: 60px; /* Performance Bar */ -$perf-bar-production: #222; -$perf-bar-staging: #291430; -$perf-bar-development: #4c1210; -$perf-bar-bucket-bg: #111; +$perf-bar-production: $gray-950; +$perf-bar-staging: $indigo-950; +$perf-bar-development: $red-950; +$perf-bar-bucket-bg: $black; $perf-bar-bucket-box-shadow-from: rgba($white, 0.2); $perf-bar-bucket-box-shadow-to: rgba($black, 0.25); $perf-bar-canary-text: $orange-400; @@ -924,11 +924,12 @@ Issue Analytics $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15); /* -Merge Requests +Merge requests */ $mr-tabs-height: 48px; $mr-version-controls-height: 56px; $mr-widget-margin-left: 40px; +$mr-review-bar-height: calc(2rem + 13px); /* Compare Branches diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 6c050f33b07..8270db9966e 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -1,5 +1,6 @@ @import '../framework/variables'; @import './conflict_colors'; +@import 'page_bundles/mixins_and_variables_and_functions'; @mixin diff-background($background, $idiff, $border) { background: $background; @@ -93,3 +94,30 @@ } } } + +@mixin line-number-link($color) { + &::before { + @include gl-visibility-hidden; + @include gl-display-inline-block; + @include gl-align-self-center; + @include gl-mt-2; + @include gl-mr-2; + @include gl-w-4; + @include gl-h-4; + @include gl-float-left; + background-color: $color; + mask-image: asset_url('icons-stacked.svg#link'); + mask-repeat: no-repeat; + mask-size: cover; + mask-position: center; + content: ''; + } + + &:hover::before { + @include gl-visibility-visible; + } + + &:focus::before { + @include gl-visibility-visible; + } +} diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 0dc01213606..d6523265a43 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -90,6 +90,10 @@ $dark-il: #de935f; .code.dark { // Line numbers + .file-line-num { + @include line-number-link($dark-line-num-color); + } + .line-numbers, .diff-line-num { background-color: $dark-main-bg; diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 95c3e8e9103..027f2fa63d3 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -91,6 +91,10 @@ $monokai-gh: #75715e; .code.monokai { // Line numbers + .file-line-num { + @include line-number-link($monokai-line-num-color); + } + .line-numbers, .diff-line-num { background-color: $monokai-bg; diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 4fc6e5dba39..5002726bbc5 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -11,6 +11,10 @@ .code.none { // Line numbers + .file-line-num { + @include line-number-link($black-transparent); + } + .line-numbers, .diff-line-num { background-color: $gray-light; diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index f95f5393323..cd0cb65e4e2 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -94,6 +94,10 @@ $solarized-dark-il: #2aa198; .code.solarized-dark { // Line numbers + .file-line-num { + @include line-number-link($solarized-dark-line-color); + } + .line-numbers, .diff-line-num { background-color: $solarized-dark-line-bg; diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index dc4bc2f32c2..77e88053424 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -101,6 +101,10 @@ $solarized-light-il: #2aa198; .code.solarized-light { // Line numbers + .file-line-num { + @include line-number-link($solarized-light-line-color); + } + .line-numbers, .diff-line-num { background-color: $solarized-light-line-bg; diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 128fe0cc046..18b2f0a5d58 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -78,6 +78,10 @@ $white-gc-bg: #eaf2f5; } // Line numbers +.file-line-num { + @include line-number-link($black-transparent); +} + .line-numbers, .diff-line-num { background-color: $gray-light; diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss index 0d40159f6de..272f94176d0 100644 --- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss +++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss @@ -12,9 +12,9 @@ .select2-container, .select2-container.select2-drop-above { .select2-choice { - background: $white; - color: $gl-text-color; - border-color: $border-color; + background: var(--white, $white); + color: var(--gl-text-color, $gl-text-color); + border-color: var(--border-color, $border-color); height: 34px; padding: $gl-vert-padding $gl-input-padding; font-size: $gl-font-size; @@ -27,6 +27,10 @@ /* stylelint-disable-next-line function-url-quotes */ background: url(asset_path('chevron-down.png')) no-repeat 2px 8px; + .gl-dark & { + filter: invert(0.9); + } + b { display: none; } @@ -37,8 +41,8 @@ } &:hover { - border-color: $gray-darkest; - color: $gl-text-color; + border-color: var(--gray-200, $gray-200); + color: var(--gl-text-color, $gl-text-color); } } @@ -49,8 +53,8 @@ // .select2-focusser element instead. &.select2-container-active:not(.select2-dropdown-open) { .select2-choice { - color: $input-focus-color; - background-color: $input-focus-bg; + color: var(--gray-700, $gray-700); + background-color: var(--white, $white); border-color: $input-focus-border-color; outline: 0; } @@ -85,19 +89,19 @@ .select2-choices, .select2-choice { - border-color: $red-500; + border-color: var(--red-500, $red-500); } } } .select2-drop, .select2-drop.select2-drop-above { - background: $white; + background: var(--white, $white); box-shadow: 0 2px 4px $dropdown-shadow-color; border-radius: $gl-border-radius-base; - border: 1px solid $border-color; + border: 1px solid var(--border-color, $border-color); min-width: 175px; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); z-index: 999; .modal-open & { @@ -114,7 +118,7 @@ } .select2-drop.select2-drop-above.select2-drop-active { - border-top: 1px solid $border-color; + border-top: 1px solid var(--border-color, $border-color); margin-top: -6px; } @@ -128,7 +132,7 @@ .select2-dropdown-open, .select2-dropdown-open.select2-drop-above { .select2-choice { - border-color: $gray-darkest; + border-color: var(--border-color, $border-color); outline: 0; } } @@ -136,7 +140,7 @@ .select2-container-multi { .select2-choices { border-radius: $border-radius-default; - border-color: $border-color; + border-color: var(--border-color, $border-color); background: none; .select2-search-field input { @@ -149,10 +153,10 @@ .select2-search-choice { margin: 5px 0 0 8px; box-shadow: none; - border-color: $border-color; - color: $gl-text-color; + border-color: var(--border-color, $border-color); + color: var(--gl-text-color, $gl-text-color); line-height: 15px; - background-color: $gray-light; + background-color: var(--gray-50, $gray-50); background-image: none; padding: 3px 18px 3px 5px; @@ -163,7 +167,7 @@ } &.select2-search-choice-focus { - border-color: $gl-text-color; + border-color: var(--gl-text-color, $gl-text-color); } } } @@ -188,22 +192,22 @@ input { padding: $grid-size; background: transparent image-url('select2.png'); - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); background-clip: content-box; background-origin: content-box; background-repeat: no-repeat; background-position: right 0 bottom 0 !important; - border: 1px solid $border-color; + border: 1px solid var(--border-color, $border-color); border-radius: $border-radius-default; line-height: 16px; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; &:focus { - border-color: $blue-300; + border-color: var(--blue-300, $blue-300); } &.select2-active { - background-color: $white; + background-color: var(--white, $white); background-image: image-url('select2-spinner.gif') !important; background-origin: content-box; background-repeat: no-repeat; @@ -236,10 +240,10 @@ .select2-highlighted { background: transparent; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); .select2-result-label { - background: $gray-darker; + background: var(--gray-50, $gray-50); } } @@ -249,14 +253,14 @@ li.select2-result-with-children > .select2-result-label { font-weight: $gl-font-weight-bold; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } } .select2-highlighted { .group-result { .group-path { - color: $gray-700; + color: var(--gray-700, $gray-700); } } } diff --git a/app/assets/stylesheets/page_bundles/alert_management_settings.scss b/app/assets/stylesheets/page_bundles/alert_management_settings.scss index fb7c1602cba..ed2707ffbcd 100644 --- a/app/assets/stylesheets/page_bundles/alert_management_settings.scss +++ b/app/assets/stylesheets/page_bundles/alert_management_settings.scss @@ -6,7 +6,6 @@ $stroke-size: 1px; @include gl-relative; @include gl-w-full; height: $stroke-size; - @include gl-display-inline-block; background-color: var(--gray-400, $gray-400); min-width: $gl-spacing-scale-5; diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index fdf9e157e1e..a00a71b07e7 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -40,8 +40,8 @@ [data-page$='epic_boards:index'], [data-page$='epic_boards:show'] { - .filter-form { - display: none; + .filtered-search-wrapper { + display: none !important; } } @@ -365,7 +365,7 @@ margin: 5px; } -.right-sidebar.issue-boards-sidebar { +.right-sidebar.boards-sidebar { .gutter-toggle { bottom: 15px; width: 22px; @@ -401,99 +401,6 @@ } } -.add-issues-modal { - background-color: rgba($black, 0.3); - z-index: 9999; -} - -.add-issues-container { - width: 90vw; - height: 85vh; - max-width: 1100px; - min-height: 500px; - padding: 25px 15px 0; - background-color: var(--white, $white); - box-shadow: 0 2px 12px rgba(var(--black, $black), 0.5); - - .empty-state { - &.add-issues-empty-state-filter { - flex-direction: column; - justify-content: center; - } - - .svg-content { - margin-top: -40px; - } - } -} - -.add-issues-header { - margin: -25px -15px -5px; - border-bottom: 1px solid $border-color; - border-top-right-radius: $border-radius-default; - border-top-left-radius: $border-radius-default; - - > h2 { - font-size: 18px; - } -} - -.add-issues-list-column { - width: 100%; - - @include media-breakpoint-up(sm) { - width: 50%; - } - - @include media-breakpoint-up(md) { - width: (100% / 3); - } -} - -.add-issues-list { - padding-top: 3px; - margin-left: -$gl-vert-padding; - margin-right: -$gl-vert-padding; - overflow-y: scroll; - - .board-card-parent { - padding: 0 5px 5px; - } - - .board-card { - border: 1px solid var(--gray-900, $gray-900); - box-shadow: 0 1px 2px rgba(var(--black, $black), 0.4); - cursor: pointer; - } -} - -.add-issues-footer { - margin: auto -15px 0; - padding-left: 15px; - padding-right: 15px; - border-bottom-right-radius: $border-radius-default; - border-bottom-left-radius: $border-radius-default; -} - -.add-issues-footer-to-list { - padding-left: $gl-vert-padding; - padding-right: $gl-vert-padding; - line-height: $input-height; -} - -.issue-card-selected { - position: absolute; - right: -3px; - top: -3px; - width: 17px; - background-color: var(--blue-500, $blue-500); - color: $white; - border: 1px solid var(--blue-600, $blue-600); - font-size: 9px; - line-height: 15px; - border-radius: 50%; -} - .board-card-info { color: var(--gray-500, $gray-500); white-space: nowrap; @@ -555,12 +462,28 @@ overflow-x: scroll; } - .issue-boards-sidebar { + .boards-sidebar { height: 100%; top: 0; } } +.boards-sidebar { + .sidebar-collapsed-icon { + display: none; + } +} + .board-header-collapsed-info-icon:hover { color: var(--gray-900, $gray-900); } + +.board-card-skeleton { + height: 110px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + + .board-card-skeleton-inner { + width: 340px; + height: 100px; + } +} diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index 34f88f9405a..b91850f1775 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -8,9 +8,9 @@ .archived-job { top: $header-height; border-radius: 2px 2px 0 0; - color: $orange-600; - background-color: $orange-50; - border: 1px solid $border-gray-normal; + color: var(--orange-600, $orange-600); + background-color: var(--orange-50, $orange-50); + border: 1px solid var(--border-color, $border-color); padding: 3px 12px; margin: auto; align-items: center; @@ -86,33 +86,17 @@ padding: 10px 0 9px; } - .header-action-buttons { - display: flex; - - @include media-breakpoint-down(xs) { - .sidebar-toggle-btn { - margin-top: 0; - margin-left: 10px; - max-height: 34px; - } - } - } - .header-content { a { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); &:hover { - color: $blue-600; + color: var(--blue-600, $blue-600); text-decoration: none; } } } - code { - color: $code-color; - } - .avatar { float: none; margin-right: 2px; @@ -160,12 +144,12 @@ .trigger-build-variable { font-weight: $gl-font-weight-normal; - color: $code-color; + color: var(--gray-950, $gray-950); } .trigger-build-value { padding: 2px 4px; - color: $black; + color: var(--black, $black); } .trigger-variables-table-cell { @@ -185,7 +169,7 @@ cursor: pointer; &:hover { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } } @@ -223,7 +207,7 @@ } &.retried { - background-color: $gray-lightest; + background-color: var(--gray-10, $gray-10); } &:hover { @@ -231,10 +215,6 @@ } } } - - .link-commit { - color: var(--blue-600, $blue-600); - } } .build-sidebar { diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss index 232d363b7f1..6b976106cc9 100644 --- a/app/assets/stylesheets/page_bundles/ci_status.scss +++ b/app/assets/stylesheets/page_bundles/ci_status.scss @@ -80,17 +80,3 @@ } } } - -.d-block.d-sm-none-inline { - .ci-status-link { - position: relative; - top: 2px; - left: 5px; - } -} - -.ci-status-link { - svg { - overflow: visible; - } -} diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index eb2dd6e578e..db4be3f18e8 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -4,37 +4,22 @@ @import 'bootstrap-vue/src/index'; @import '@gitlab/ui/src/scss/utilities'; -@import '@gitlab/ui/src/components/base/alert/alert'; // We should only import styles that we actually use. @import '@gitlab/ui/src/components/base/alert/alert'; @import '@gitlab/ui/src/components/base/avatar/avatar'; -@import '@gitlab/ui/src/components/base/badge/badge'; @import '@gitlab/ui/src/components/base/button/button'; @import '@gitlab/ui/src/components/base/icon/icon'; @import '@gitlab/ui/src/components/base/link/link'; @import '@gitlab/ui/src/components/base/loading_icon/loading_icon'; @import '@gitlab/ui/src/components/base/modal/modal'; @import '@gitlab/ui/src/components/base/pagination/pagination'; -@import '@gitlab/ui/src/components/base/tabs/tabs/tabs'; +@import '@gitlab/ui/src/components/base/table/table'; @import '@gitlab/ui/src/components/base/tooltip/tooltip'; +@import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type'; -$atlaskit-border-color: #dfe1e6; $header-height: 40px; -.subscription-form { - .field-group-input { - display: flex; - padding-top: $gl-padding-4; - - .ak-button { - align-items: center; - height: auto; - margin-left: $btn-margin-5; - } - } -} - .jira-connect-header { min-height: $header-height; position: fixed; @@ -56,45 +41,7 @@ $header-height: 40px; } .jira-connect-app-body { - max-width: 600px; + max-width: 768px; margin-left: auto; margin-right: auto; } - -// for external_link buttons -svg { - fill: currentColor; - - &.s16 { - height: 16px; - width: 16px; - } -} - -.ak-field-group label { - text-align: left; -} - -.ak-button__appearance-primary { - &:hover { - color: $white; - text-decoration: none; - } - - svg { - align-self: center; - margin-left: 4px; - } -} - -.subscriptions { - tbody { - tr { - border-bottom: 1px solid $atlaskit-border-color; - } - - td { - padding: $gl-padding-8; - } - } -} diff --git a/app/assets/stylesheets/page_bundles/learn_gitlab.scss b/app/assets/stylesheets/page_bundles/learn_gitlab.scss index 189aefb330b..10a4a210d41 100644 --- a/app/assets/stylesheets/page_bundles/learn_gitlab.scss +++ b/app/assets/stylesheets/page_bundles/learn_gitlab.scss @@ -1,3 +1,11 @@ .learn-gitlab-info-card-content { height: 200px; } + +.learn-gitlab-section-card { + height: 400px; +} + +.learn-gitlab-section-card-header { + height: 165px; +} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 3263a5067ea..9fdc30359f8 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -9,6 +9,18 @@ min-width: 0; } +.with-system-header { + --system-header-height: #{$system-header-height}; +} + +.with-performance-bar { + --performance-bar-height: #{$performance-bar-height}; +} + +.review-bar-visible { + --review-bar-height: #{$mr-review-bar-height}; +} + .diff-tree-list { // This 11px value should match the additional value found in // /assets/stylesheets/framework/diffs.scss @@ -23,24 +35,13 @@ position: -webkit-sticky; position: sticky; - top: $top-pos; - max-height: calc(100vh - #{$top-pos}); + // Unitless zero values are not allowed in calculations https://stackoverflow.com/a/55391061 + // stylelint-disable-next-line length-zero-no-unit + top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); + // stylelint-disable-next-line length-zero-no-unit + max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); z-index: 202; - .with-system-header & { - top: $top-pos + $system-header-height; - } - - .with-system-header.with-performance-bar & { - top: $top-pos + $system-header-height + $performance-bar-height; - } - - .with-performance-bar & { - $performance-bar-top-pos: $performance-bar-height + $top-pos; - top: $performance-bar-top-pos; - max-height: calc(100vh - #{$performance-bar-top-pos}); - } - .drag-handle { bottom: 16px; transform: translateX(10px); diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index d9ab52774bd..2f3cf889549 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -139,12 +139,28 @@ width: 186px; } +.gl-pipeline-job-width\! { + width: 186px !important; +} + .gl-linked-pipeline-padding { padding-right: 120px; } .gl-build-content { - @include build-content(); + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid var(--border-color, $border-color); + border-radius: 30px; + background-color: var(--white, $white); + + &:hover, + &:focus { + background-color: var(--gray-50, $gray-50); + border: 1px solid $dropdown-toggle-active-border-color; + color: var(--gl-text-color, $gl-text-color); + } } .gl-ci-action-icon-container { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 7111d3d4107..a114a1dc82d 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,4 +1,5 @@ -%commit-description-base { +.commit-description, +.commit-row-description { padding: $gl-padding-8 0 $gl-padding-8 $gl-padding-8; margin-top: $gl-padding-8; border: 0; @@ -10,10 +11,6 @@ color: $gl-text-color-secondary; } -.commit-description { - @extend %commit-description-base; -} - .commit-box { border-top: 1px solid $border-color; padding: $gl-padding 0; @@ -249,7 +246,6 @@ } .commit-row-description { - @extend %commit-description-base; display: none; flex: 1; } diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index ef737e11799..14cff5b038a 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -36,7 +36,7 @@ } .file-title { - @extend .monospace; + @include gl-font-monospace; line-height: 35px; padding-top: 7px; padding-bottom: 7px; diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index 5738cbb4b31..c8da025131d 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -50,7 +50,7 @@ .event-user-info { margin-bottom: $gl-padding-4; - .author_name { + .author-name { a { color: $gl-text-color; font-weight: $gl-font-weight-bold; @@ -118,26 +118,11 @@ } } - .event_icon { - position: relative; - float: right; - border: 1px solid $gray-darker; - padding: 5px; - border-radius: 5px; - background: $gray-light; - margin-left: 10px; - top: -6px; - - img { - width: 20px; - } - } - &:last-child { border: 0; } - .event_commits { + .event-commits { li { &.commit { background: transparent; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index ee1385d36df..2ec2da9241b 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -160,17 +160,6 @@ vertical-align: top; } - - .notification-dropdown { - .dropdown-menu { - @extend .dropdown-menu-right; - } - - .icon { - fill: $gl-text-color-secondary; - } - } - .new-project-subgroup { .dropdown-primary { min-width: 115px; @@ -378,10 +367,6 @@ table.pipeline-project-metrics tr td { .folder-caret { width: $gl-font-size-large; - - svg { - margin-bottom: 2px; - } } .item-type-icon { diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index 540060d60de..c05216ac6e6 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -26,13 +26,6 @@ text-align: right; white-space: nowrap; } - - .key { - @extend .badge.badge-pill; - background-color: $label-inverse-bg; - font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace; - padding: 3px 5px; - } } .documentation { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index a6ab5459a84..b9f5a427a24 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -225,8 +225,7 @@ } } - .cross-project-reference, - .sidebar-mr-source-branch { + .cross-project-reference { color: inherit; span { @@ -238,10 +237,6 @@ text-overflow: ellipsis; } - cite { - font-style: normal; - } - button { float: right; padding: 1px 5px; @@ -292,7 +287,7 @@ padding-top: 10px; } - &:not(.issue-boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) { + &:not(.boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) { .issuable-sidebar-header { display: none; } @@ -638,7 +633,7 @@ } .btn-link:hover { - @extend a:hover; + color: $blue-800; text-decoration: none; } @@ -797,6 +792,40 @@ } } +.add-issuable-form-input-token-list { + display: flex; + flex-wrap: wrap; + align-items: baseline; + list-style: none; + margin-bottom: 0; + padding-left: 0; +} + +.add-issuable-form-token-list-item { + max-width: 100%; + margin-bottom: $gl-vert-padding; + margin-right: 5px; +} + +.add-issuable-form-input-list-item { + flex: 1; + min-width: 200px; + margin-bottom: $gl-vert-padding; +} + +.add-issuable-form-input { + width: 100%; + border: 0; + + &:focus { + outline: none; + } +} + +.add-issuable-form-actions { + margin-top: $gl-padding; +} + .time-tracker { .sidebar-collapsed-icon { > .stopwatch-svg { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 2a8a86615f6..97c8182bab8 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -173,11 +173,10 @@ ul.related-merge-requests > li { margin-top: 4px; // override dropdown item styles - .btn.btn-success { + .btn.btn-confirm { @include btn-default; - @include btn-green; + @include btn-blue; - border-style: solid; border-width: 1px; line-height: $line-height-base; width: auto; diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index b7d05fc411a..c7b4dd660d0 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -120,7 +120,6 @@ } .labels-container { - background-color: $gray-100; border-radius: $border-radius-default; padding: $gl-padding $gl-padding-8; } @@ -160,7 +159,7 @@ color: $blue-600; } - &.remove-row:hover { + &.hover-red:hover { color: $red-500; } } diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 2d04354a99d..9d437531e6d 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -179,8 +179,9 @@ } input[type='submit'] { - @extend .btn-block; margin-bottom: 0; + display: block; + width: 100%; } .devise-errors { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 23e368a2e73..36d39c1a613 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -236,8 +236,8 @@ $tabs-holder-z-index: 250; } .label-branch { - @extend .ref-name; - + @include gl-font-monospace; + font-size: 95%; color: $gl-text-color; font-weight: normal; overflow: hidden; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index cb5050fc578..59768f4cda8 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -48,7 +48,6 @@ } .note-image-attach { - @extend .col-lg-4; margin-left: 45px; float: none; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 190bdcb1efd..801dd44be8e 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -771,6 +771,26 @@ $system-note-svg-size: 16px; } } +.unified-diff-components-diff-note-button { + &::before { + background-color: $blue-500; + mask-image: asset_url('icons-stacked.svg#comment'); + mask-repeat: no-repeat; + mask-size: cover; + mask-position: center; + content: ''; + width: 12px; + height: 12px; + } + + &:hover, + &.inverted { + &::before { + background-color: $white; + } + } +} + .disabled-comment { background-color: $gray-light; border-radius: $border-radius-base; diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss index 33ab42b5511..298de33888d 100644 --- a/app/assets/stylesheets/pages/notifications.scss +++ b/app/assets/stylesheets/pages/notifications.scss @@ -1,8 +1,4 @@ .notification-list-item { - .dropdown-menu { - @extend .dropdown-menu-right; - } - @include media-breakpoint-down(sm) { .notification-dropdown { width: 100%; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index e51cc0b4479..16f96ebadc9 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -115,11 +115,6 @@ font-size: $gl-font-size; line-height: $gl-font-size-large; } - - .home-panel-topic-list, - .home-panel-metadata { - font-size: $gl-font-size-small; - } } } @@ -141,10 +136,6 @@ } } - .notification-dropdown .dropdown-menu { - @extend .dropdown-menu-right; - } - .download-button { @include media-breakpoint-down(md) { margin-left: 0; @@ -843,7 +834,7 @@ pre.light-well { } .form-control { - @extend .monospace; + @include gl-font-monospace; background-color: $white; border-color: $border-color; font-size: 14px; diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss deleted file mode 100644 index 856e49bd144..00000000000 --- a/app/assets/stylesheets/pages/runners.scss +++ /dev/null @@ -1,56 +0,0 @@ -.runner-state { - padding: 6px 12px; - margin-right: 10px; - color: $white; - - &.runner-state-shared { - background: $green-400; - } - - &.runner-state-specific { - background: $blue-400; - } -} - -.runner-status { - &.runner-status-online { - background-color: $green-600; - } - - &.runner-status-offline { - background-color: $gray-darkest; - } - - &.runner-status-paused { - background-color: $red-500; - } -} - -.runner { - .btn { - padding: 1px 6px; - } - - h4 { - font-weight: $gl-font-weight-normal; - } -} - -.admin-runner-btn-group-cell { - min-width: 150px; - - .btn-sm { - padding: 4px 9px; - } - - .btn-default { - color: $gl-text-color-secondary; - } -} - -@include media-breakpoint-down(md) { - .runners-content { - width: 100%; - overflow: auto; - } -} diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index f31b6d96f03..aa9ebfe2968 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -278,10 +278,6 @@ .card-header { display: flex; align-items: center; - - > .btn-success { - margin-left: auto; - } } .custom-metric { diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index fa008a05e11..a371aa37e07 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -22,7 +22,7 @@ .control { float: left; - margin-left: 10px; + margin-left: 8px; } } diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index c6c9f3b7365..bcc3c35e00e 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -14,7 +14,7 @@ color: $gray-300; select { - color: $gray-300; + color: $white; width: 200px; } diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index 7b66b61ff36..1d0333d1e2f 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -60,3 +60,11 @@ pre { a[href]::after { content: none !important; } + +.with-performance-bar .layout-page { + margin-top: 0; +} + +.content-wrapper { + margin-top: 0; +} diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index d8f74a2913e..11b4bde74a6 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -214,6 +214,9 @@ $yiq-text-light: $gray-950; $line-added-dark: $green-200; $line-removed-dark: $red-200; +$well-expand-item: $gray-200; +$well-inner-border: $gray-200; + // Misc component overrides that should live elsewhere .gl-label { filter: brightness(0.9) contrast(1.1); diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss index 228bff94f5d..b41377475c5 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -81,50 +81,4 @@ body { color: $gray-900; } } - - &.gl-dark { - .logo-text svg { - fill: var(--gl-text-color); - } - - .navbar-gitlab { - background-color: var(--gray-50); - box-shadow: 0 1px 0 0 var(--gray-100); - - .navbar-sub-nav, - .navbar-nav { - li { - > a:hover, - > a:focus, - > button:hover, - > button:focus { - color: var(--gl-text-color); - background-color: var(--gray-200); - } - } - - li.active, - li.dropdown.show { - > a, - > button { - color: var(--gl-text-color); - background-color: var(--gray-200); - } - } - } - - .search { - form { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--border-color); - - &:active, - &:hover { - background-color: var(--gray-100); - box-shadow: inset 0 0 0 1px var(--blue-200); - } - } - } - } - } } |