diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
17 files changed, 163 insertions, 178 deletions
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 |