diff options
Diffstat (limited to 'app/assets/stylesheets')
53 files changed, 313 insertions, 640 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 42d15635566..20ff78d32d3 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,4 +1,3 @@ -@import './pages/admin'; @import './pages/branches'; @import './pages/ci_projects'; @import './pages/clusters'; diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss index 76bf7ac81e8..d769ea73101 100644 --- a/app/assets/stylesheets/components/batch_comments/review_bar.scss +++ b/app/assets/stylesheets/components/batch_comments/review_bar.scss @@ -4,7 +4,7 @@ left: 0; width: 100%; background: $white; - z-index: 300; + z-index: $zindex-dropdown-menu; padding: 7px 0 6px; // to keep aligned with "collapse sidebar" button on the left sidebar border-top: 1px solid $border-color; padding-left: $contextual-sidebar-width; diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss index b7f6b2026fe..09af4da37e9 100644 --- a/app/assets/stylesheets/components/design_management/design_list_item.scss +++ b/app/assets/stylesheets/components/design_management/design_list_item.scss @@ -8,11 +8,6 @@ top: 10px; } - .design-event { - top: $gl-padding; - right: $gl-padding; - } - .card-body { height: 230px; } diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index e40b95cdce6..7931f4deea0 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -15,7 +15,6 @@ @import 'framework/badges'; @import 'framework/calendar'; @import 'framework/callout'; -@import 'framework/carousel'; @import 'framework/common'; @import 'framework/dropdowns'; @import 'framework/files'; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index d9ad4992458..a7623b65539 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -14,7 +14,7 @@ top: 0; margin-top: 3px; padding: $gl-padding; - z-index: 300; + z-index: $zindex-dropdown-menu; width: $award-emoji-width; font-size: 14px; background-color: $white; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 182c58c3931..b51fec925cb 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -95,8 +95,6 @@ &:active, &.active { - box-shadow: $gl-btn-active-background; - background-color: $dark; border-color: $border-dark; color: $color; @@ -348,14 +346,6 @@ } } -.btn-build { - margin-left: 10px; - - svg { - fill: $gl-text-color-secondary; - } -} - .clone-dropdown-btn a { color: $gray-700; @@ -437,19 +427,6 @@ } } -.btn-missing { - color: $gl-text-color-secondary; - border: 1px dashed $border-gray-normal-dashed; - border-radius: $border-radius-default; - - &:hover, - &:active, - &:focus { - color: $gl-text-color-secondary; - background-color: $white-normal; - } -} - // The .btn-svg class is available for legacy icon buttons to // preserve a 34px height and have 16x16 icons at the same time. // Once a button is migrated (to the current 32px height) diff --git a/app/assets/stylesheets/framework/carousel.scss b/app/assets/stylesheets/framework/carousel.scss deleted file mode 100644 index d51a9f9c173..00000000000 --- a/app/assets/stylesheets/framework/carousel.scss +++ /dev/null @@ -1,202 +0,0 @@ -// Notes on the classes: -// -// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) -// even when their scroll action started on a carousel, but for compatibility (with Firefox) -// we're preventing all actions instead -// 2. The .carousel-item-left and .carousel-item-right is used to indicate where -// the active slide is heading. -// 3. .active.carousel-item is the current slide. -// 4. .active.carousel-item-left and .active.carousel-item-right is the current -// slide in its in-transition state. Only one of these occurs at a time. -// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right -// is the upcoming slide in transition. - -.carousel { - position: relative; - - &.pointer-event { - touch-action: pan-y; - } -} - - -.carousel-inner { - position: relative; - width: 100%; - overflow: hidden; - @include clearfix(); -} - -.carousel-item { - position: relative; - display: none; - float: left; - width: 100%; - margin-right: -100%; - backface-visibility: hidden; - @include transition($carousel-transition); -} - -.carousel-item.active, -.carousel-item-next, -.carousel-item-prev { - display: block; -} - -.carousel-item-next:not(.carousel-item-left), -.active.carousel-item-right { - transform: translateX(100%); -} - -.carousel-item-prev:not(.carousel-item-right), -.active.carousel-item-left { - transform: translateX(-100%); -} - - -// -// Alternate transitions -// - -.carousel-fade { - .carousel-item { - opacity: 0; - transition-property: opacity; - transform: none; - } - - .carousel-item.active, - .carousel-item-next.carousel-item-left, - .carousel-item-prev.carousel-item-right { - z-index: 1; - opacity: 1; - } - - .active.carousel-item-left, - .active.carousel-item-right { - z-index: 0; - opacity: 0; - @include transition(0s $carousel-transition-duration opacity); - } -} - - -// -// Left/right controls for nav -// - -.carousel-control-prev, -.carousel-control-next { - position: absolute; - top: 0; - bottom: 0; - z-index: 1; - // Use flex for alignment (1-3) - display: flex; // 1. allow flex styles - align-items: center; // 2. vertically center contents - justify-content: center; // 3. horizontally center contents - width: $carousel-control-width; - color: $carousel-control-color; - text-align: center; - opacity: $carousel-control-opacity; - @include transition($carousel-control-transition); - - // Hover/focus state - @include hover-focus { - color: $carousel-control-color; - text-decoration: none; - outline: 0; - opacity: $carousel-control-hover-opacity; - } -} - -.carousel-control-prev { - left: 0; - @if $enable-gradients { - background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); - } -} - -.carousel-control-next { - right: 0; - @if $enable-gradients { - background: linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); - } -} - -// Icons for within -.carousel-control-prev-icon, -.carousel-control-next-icon { - display: inline-block; - width: $carousel-control-icon-width; - height: $carousel-control-icon-width; - background: no-repeat 50% / 100% 100%; -} - -.carousel-control-prev-icon { - background-image: $carousel-control-prev-icon-bg; -} - -.carousel-control-next-icon { - background-image: $carousel-control-next-icon-bg; -} - - -// Optional indicator pips -// -// Add an ordered list with the following class and add a list item for each -// slide your carousel holds. - -.carousel-indicators { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 15; - display: flex; - justify-content: center; - padding-left: 0; // override <ol> default - // Use the .carousel-control's width as margin so we don't overlay those - margin-right: $carousel-control-width; - margin-left: $carousel-control-width; - list-style: none; - - li { - box-sizing: content-box; - flex: 0 1 auto; - width: $carousel-indicator-width; - height: $carousel-indicator-height; - margin-right: $carousel-indicator-spacer; - margin-left: $carousel-indicator-spacer; - text-indent: -999px; - cursor: pointer; - background-color: $carousel-indicator-active-bg; - background-clip: padding-box; - // Use transparent borders to increase the hit area by 10px on top and bottom. - border-top: $carousel-indicator-hit-area-height solid transparent; - border-bottom: $carousel-indicator-hit-area-height solid transparent; - opacity: 0.5; - @include transition($carousel-indicator-transition); - } - - .active { - opacity: 1; - } -} - - -// Optional captions -// -// - -.carousel-caption { - position: absolute; - right: (100% - $carousel-caption-width) / 2; - bottom: 20px; - left: (100% - $carousel-caption-width) / 2; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: $carousel-caption-color; - text-align: center; -} diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss index 2204b037f69..95025459cc9 100644 --- a/app/assets/stylesheets/framework/ci_variable_list.scss +++ b/app/assets/stylesheets/framework/ci_variable_list.scss @@ -98,13 +98,3 @@ color: $gl-text-color-disabled; } } - -.group-variable-list { - color: $gray-500; - - .table-section:not(:first-child) { - @include media-breakpoint-down(sm) { - border-top: hidden; - } - } -} diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 3b59c028437..5d182373fb1 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -110,7 +110,7 @@ pre { } hr { - margin: 24px 0; + margin: 1.5rem 0; border-top: 1px solid $gray-darker; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 745d469e3e8..c5467c304ec 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -471,7 +471,7 @@ background-color: $black-transparent; height: 100%; width: 100%; - z-index: 300; + z-index: $zindex-dropdown-menu; } } } diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 499b9c00116..e30caeb1dfb 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -1136,10 +1136,6 @@ table.code { display: block; } } - - .note-edit-form { - margin-left: $note-icon-gutter-width; - } } .discussion-body .image .frame { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 41fc4d3dd4e..f56d8f2c2a9 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -216,7 +216,7 @@ position: absolute; width: auto; top: 100%; - z-index: 300; + z-index: $zindex-dropdown-menu; min-width: 240px; max-width: 500px; margin-top: $dropdown-vertical-offset; @@ -326,7 +326,7 @@ color: $gl-text-color-secondary; } - .badge.badge-pill + span:not(.badge.badge-pill) { + .badge.badge-pill + span:not(.badge):not(.badge-pill) { // Expects up to 3 digits on the badge margin-right: 40px; } @@ -497,7 +497,7 @@ li { a, button, - .dropdown-item { + .dropdown-item:not(.open-with-link) { padding: 8px 40px; position: relative; @@ -525,7 +525,7 @@ &.is-active { /* stylelint-disable-next-line function-url-quotes */ - background: url(asset_path('checkmark.png')) no-repeat 14px 8px; + background: url(asset_path('checkmark.png')) no-repeat 14px center; } } } @@ -896,7 +896,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { position: absolute; top: 13px; right: 25px; - color: $gray-50; + color: $gray-300; } } @@ -1093,17 +1093,3 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { width: $gl-dropdown-width-wide; } } - -.gl-dropdown-item-deprecated-adapter { - .dropdown-item { - align-items: flex-start; - - .gl-new-dropdown-item-text-primary { - @include gl-font-weight-bold; - } - - .gl-new-dropdown-item-text-secondary { - color: inherit; - } - } -} diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss index 8d411747b28..36f1b1f2903 100644 --- a/app/assets/stylesheets/framework/feature_highlight.scss +++ b/app/assets/stylesheets/framework/feature_highlight.scss @@ -1,14 +1,7 @@ .feature-highlight { - position: relative; - margin-left: $gl-padding; - width: 20px; - height: 20px; - cursor: pointer; - &::before { content: ''; display: block; - position: absolute; top: 6px; left: 6px; width: 8px; @@ -29,56 +22,22 @@ } } -.feature-highlight-popover-content { - display: none; - - hr { - margin: $gl-padding 0; - } - - .btn-link { - svg { - @include btn-svg; - - path { - fill: currentColor; - } - } - } - - .feature-highlight-illustration { - width: 100%; - height: 100px; - padding-top: 12px; - padding-bottom: 12px; - background-color: $indigo-50; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - border-bottom: 1px solid darken($gray-normal, 8%); - } -} - -.popover .feature-highlight-popover-content { - display: block; +.feature-highlight-illustration { + background-color: $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; - &.right > .arrow { - border-right-color: $border-color; - } - .popover-body { padding: 0; } } -.feature-highlight-popover-sub-content { - padding: $gl-padding $gl-padding-12; -} - @include keyframes(pulse-highlight) { 0% { box-shadow: 0 0 0 0 rgba($blue-200, 0.4); diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index fe8c27ae9b6..bda123fa7ea 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -2,6 +2,14 @@ * File content holder * */ +.container-fluid.container-limited.limit-container-width { + .file-holder.readme-holder.limited-width-container .file-content { + max-width: $limited-layout-width; + margin-left: auto; + margin-right: auto; + } +} + .file-holder { border: 1px solid $border-color; border-top: 0; @@ -17,12 +25,6 @@ &.readme-holder { margin: $gl-padding 0; - - &.limited-width-container .file-content { - max-width: $limited-layout-width; - margin-left: auto; - margin-right: auto; - } } .file-title { @@ -351,23 +353,17 @@ span.idiff { color: $gl-text-color; } - .file-actions .btn:not(.btn-icon) { - padding: 0 10px; - font-size: 13px; - line-height: 28px; - display: inline-block; - float: none; - } - .file-actions .ide-edit-button { z-index: 2; } - @include media-breakpoint-down(sm) { - display: block; - + @include media-breakpoint-down(md) { .file-actions { - margin-top: 5px; + margin-top: $gl-padding-8; + + .btn { + margin-bottom: $gl-padding-8; + } } } } @@ -442,12 +438,6 @@ span.idiff { .user-avatar-link.new-comment { position: absolute; margin: 40px $gl-padding 0 116px; - - ~ .note-edit-form form.edit-note { - @include media-breakpoint-up(sm) { - margin-left: $note-icon-gutter-width; - } - } } } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 5f56fa3be86..07d59847829 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -475,6 +475,15 @@ } } + .sort-dropdown-container { + // This property is set to have borders + // around sort dropdown match with filter + // input field. + .gl-button { + box-shadow: inset 0 0 0 1px $gray-400; + } + } + @include media-breakpoint-up(md) { .sort-dropdown-container { margin-left: 10px; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 730e10114c3..ffcc20b624b 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -516,28 +516,8 @@ left: auto; max-height: $dropdown-max-height-lg; - li.current-user { - padding: $dropdown-item-padding-y $dropdown-item-padding-x; - - .user-name { - display: block; - } - - .user-status { - margin-right: 0; - max-width: 240px; - font-size: $gl-font-size-small; - - gl-emoji { - font-size: $gl-font-size-small; - } - - .user-status-emoji { - gl-emoji { - font-size: $gl-font-size; - } - } - } + .user-status { + max-width: 240px; } svg { diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 5623d38d66e..222e10f51ad 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -3,10 +3,6 @@ svg { fill: $green-500; } - - &.add-border { - @include borderless-status-icon($green-500); - } } .ci-status-icon-error, @@ -14,10 +10,6 @@ svg { fill: $red-500; } - - &.add-border { - @include borderless-status-icon($red-500); - } } .ci-status-icon-pending, @@ -27,59 +19,29 @@ svg { fill: $orange-500; } - - &.add-border { - @include borderless-status-icon($orange-500); - } -} - -.ci-status-icon-preparing { - svg { - fill: $gray-300; - } - - &.add-border { - @include borderless-status-icon($gray-300); - } } .ci-status-icon-running { svg { fill: $blue-400; } - - &.add-border { - @include borderless-status-icon($blue-400); - } } .ci-status-icon-canceled, -.ci-status-icon-disabled { +.ci-status-icon-disabled, +.ci-status-icon-scheduled, +.ci-status-icon-manual { svg { fill: $gl-text-color; } - - &.add-border { - @include borderless-status-icon($gl-text-color); - } } +.ci-status-icon-preparing, .ci-status-icon-created, .ci-status-icon-skipped, .ci-status-icon-notfound { svg { - fill: $gray-darkest; - } - - &.add-border { - @include borderless-status-icon($gray-darkest); - } -} - -.ci-status-icon-scheduled, -.ci-status-icon-manual { - svg { - fill: $gl-text-color; + fill: var(--gray-400, $gray-400); } } diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index e3d02d01496..e29e204b14f 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -354,13 +354,6 @@ } } -@mixin borderless-status-icon($color) { - svg { - border: 1px solid $color; - border-radius: 50%; - } -} - @mixin emoji-menu-toggle-button { line-height: 1; padding: 0; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index bef33bd2ef0..241aaad015e 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -75,7 +75,7 @@ .right-sidebar-expanded { padding-right: 0; - z-index: 300; + z-index: $zindex-dropdown-menu; @include media-breakpoint-only(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 89713fdbbea..92405c00c5e 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -69,9 +69,6 @@ table { } } - td { - border-color: $white-normal; - } } .thead-white { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 1a568bb41a5..496e2aba421 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -458,7 +458,7 @@ h6 { a.anchor { float: left; - margin-left: -16px; + margin-left: -20px; text-decoration: none; outline: none; @@ -471,6 +471,11 @@ &:hover > a.anchor::after { visibility: visible; } + + > a.anchor:focus::after { + visibility: visible; + outline: auto; + } } .big { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 674ba1a307b..4bf9236407f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -433,6 +433,7 @@ $browser-scrollbar-size: 10px; */ $header-height: 40px; $header-zindex: 1000; +$zindex-dropdown-menu: 300; $suggestion-header-height: 46px; $ide-statusbar-height: 25px; $fixed-layout-width: 1280px; @@ -626,7 +627,6 @@ $search-input-xl-width: 320px; $note-disabled-comment-color: #b2b2b2; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; -$note-icon-gutter-width: 55px; /* * Identicon @@ -871,6 +871,27 @@ $add-to-slack-well-max-width: 750px; $add-to-slack-logo-size: 100px; /* +Security & Compliance Carousel +*/ +$security-and-compliance-carousel-image-carousel-width: 1000px; +$security-and-compliance-carousel-image-discover-button-width: 45%; +$security-and-compliance-carousel-image-discover-buttons-max-width: 280px; +$security-and-compliance-carousel-image-discover-footer-max-width: 500px; +$security-and-compliance-carousel-image-discover-feedback-width: 30%; +$security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px; +$security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%; +$security-and-compliance-carousel-image-discover-text-carousel-caption-max-width: 500px; +$security-and-compliance-carousel-control-icon-width: 10px; +$security-and-compliance-carousel-control-position: -5%; +$security-and-compliance-carousel-inner-width: 90%; +$security-and-compliance-carousel-indicators-bottom: -20px; +$security-and-compliance-carousel-indicators-bottom-lg: -15px; +$security-and-compliance-carousel-indicators-dimension: 6px; +$security-and-compliance-carousel-indicators-border-radius: 100%; +$security-and-compliance-carousel-prev-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); +$security-and-compliance-carousel-next-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); + +/* Popup */ $popup-triangle-size: 15px; diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index 27c6ef20269..4f76deeb991 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -14,13 +14,15 @@ $mailer-line-cell-bg-color: #6b4fbb; $mailer-wrapper-cell-bg-color: #fff; $mailer-wrapper-cell-border-color: #ededed; $mailer-header-footer-text-color: #5c5c5c; +$full-width: 640px; +$half-width: 320px; body { margin: 0 !important; background-color: $mailer-bg-color; padding: 0; text-align: center; - min-width: 640px; + min-width: $full-width; width: 100%; height: 100%; font-family: $mailer-font; @@ -31,7 +33,7 @@ table#body { margin: 0; padding: 0; text-align: center; - min-width: 640px; + min-width: $full-width; width: 100%; } @@ -44,6 +46,11 @@ a { } } +.mail-avatar { + border-radius: 50%; + display: block; +} + .highlight { font-weight: 500; } @@ -77,10 +84,18 @@ a { margin-left: 4px; } +.half-width { + min-width: $half-width; +} + tr td { font-family: $mailer-font; } +tr.border-top td { + border-top: 2px solid $gray-100; +} + tr.line td { font-family: $mailer-font; background-color: $mailer-line-cell-bg-color; @@ -100,7 +115,7 @@ td.footer-message { } table.wrapper { - width: 640px; + width: $full-width; margin: 0 auto; border-collapse: separate; border-spacing: 0; @@ -149,7 +164,7 @@ tr.footer td { } .gitlab-info-text { - max-width: 640px; + max-width: $full-width; margin: 0 auto; text-align: center; color: $gray-400; diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 093cba3560f..7336d555f79 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -5,7 +5,7 @@ $bs-input-focus-border: #80bdff; $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25); - a:not(.btn):not(.gl-tab-nav-item), + a:not(.btn), .gl-button.btn-link, .gl-button.btn-link:hover, .gl-button.btn-link:focus, @@ -34,6 +34,7 @@ .ide-pipeline .top-bar .controllers .controllers-buttons, .controllers-buttons svg, .nav-links li a.active, + .gl-tabs-nav li a.gl-tab-nav-item-active, .md-area.is-focused { color: var(--ide-text-color, $gl-text-color); } @@ -44,13 +45,15 @@ } .nav-links:not(.quick-links) li:not(.md-header-toolbar) a, + .gl-tabs-nav li a, .dropdown-menu-inner-content, .file-row .file-row-icon svg, .file-row:hover .file-row-icon svg { color: var(--ide-text-color-secondary, $gl-text-color-secondary); } - .nav-links:not(.quick-links) li:not(.md-header-toolbar) { + .nav-links:not(.quick-links) li:not(.md-header-toolbar), + .gl-tabs-nav li { &:hover a, &.active a, a:hover, @@ -61,6 +64,10 @@ border-color: var(--ide-input-border, $gray-darkest); } } + + a.gl-tab-nav-item-active { + box-shadow: inset 0 -2px 0 0 var(--ide-input-border, $gray-darkest); + } } .drag-handle:hover { @@ -142,6 +149,7 @@ .md table:not(.code) tbody td, .md table:not(.code) tr th, .nav-links:not(.quick-links), + .gl-tabs-nav, .common-note-form .md-area.is-focused .nav-links { border-color: var(--ide-border-color-alt, $white-dark); } @@ -175,6 +183,10 @@ border-color: var(--ide-highlight-accent, $gl-text-color); } + .gl-tabs-nav li a.gl-tab-nav-item-active { + box-shadow: inset 0 -2px 0 0 var(--ide-highlight-accent, $gl-text-color); + } + // for other themes, suppress different avatar default colors for simplicity .avatar-container { &, @@ -241,7 +253,6 @@ .btn-default:not(.gl-button), .dropdown, .dropdown-menu-toggle { - background-color: var(--ide-input-background, $white) !important; color: var(--ide-input-color, $gl-text-color) !important; border-color: var(--ide-btn-default-border, $border-color); } @@ -304,6 +315,11 @@ border-color: var(--ide-dropdown-hover-background, $border-color); } + .gl-tabs-nav { + background-color: var(--ide-dropdown-hover-background, $white); + box-shadow: inset 0 -2px 0 0 var(--ide-dropdown-hover-background, $border-color); + } + .divider { background-color: var(--ide-dropdown-hover-background, $gray-100); border-color: var(--ide-dropdown-hover-background, $gray-100); diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index 72e2a45565e..0d6f360112b 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -98,7 +98,6 @@ @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); } - &.ci-status-icon-preparing, &.ci-status-icon-running { @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); } @@ -106,14 +105,15 @@ &.ci-status-icon-canceled, &.ci-status-icon-scheduled, &.ci-status-icon-disabled, - &.ci-status-icon-not-found, &.ci-status-icon-manual { @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black); } + &.ci-status-icon-preparing, &.ci-status-icon-created, + &.ci-status-icon-not-found, &.ci-status-icon-skipped { - @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); + @include mini-pipeline-graph-color(var(--white, $white), var(--gray-100, $gray-100), var(--gray-200, $gray-200), var(--gray-400, $gray-400), var(--gray-500, $gray-500), var(--gray-600, $gray-600)); } } diff --git a/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss new file mode 100644 index 00000000000..41bb6d107f1 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/admin/application_settings_metrics_and_profiling.scss @@ -0,0 +1,3 @@ +.usage-data { + max-height: 400px; +} diff --git a/app/assets/stylesheets/page_bundles/admin/jobs_index.scss b/app/assets/stylesheets/page_bundles/admin/jobs_index.scss new file mode 100644 index 00000000000..7844cae5f87 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/admin/jobs_index.scss @@ -0,0 +1,5 @@ +.admin-builds-table { + td:last-child { + min-width: 120px; + } +} diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 3d1ae3519a9..620b37914d8 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -138,6 +138,47 @@ border: 1px solid var(--gray-100, $gray-100); } +// to highlight columns we have animated pulse of box-shadow +// we don't want to actually animate the box-shadow property +// because that causes costly repaints. Instead we can add a +// pseudo-element that is the same size as our element, then +// animate opacity/transform to give a soothing single pulse +.board-column-highlighted::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + pointer-events: none; + opacity: 0; + z-index: -1; + box-shadow: 0 0 6px 3px $blue-200; + animation-name: board-column-flash-border; + animation-duration: 1.2s; + animation-fill-mode: forwards; + animation-timing-function: ease-in-out; +} + +@keyframes board-column-flash-border { + 0%, + 100% { + opacity: 0; + transform: scale(0.98); + } + + 25%, + 75% { + opacity: 1; + transform: scale(0.99); + } + + 50% { + opacity: 1; + transform: scale(1); + } +} + .board-header { &.has-border::before { border-top: 3px solid; diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index f6b9473d235..7c4d51ab677 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -97,7 +97,8 @@ $ide-commit-header-height: 48px; border-right: 1px solid var(--ide-border-color, $white-dark); border-bottom: 1px solid var(--ide-border-color, $white-dark); - &.active { + &.active, + .gl-tab-nav-item-active { background-color: var(--ide-highlight-background, $white); border-bottom-color: transparent; } @@ -114,6 +115,42 @@ $ide-commit-header-height: 48px; } } } + + .gl-tab-content { + padding: 0; + } + + .gl-tabs-nav { + border-width: 0; + + li { + padding: 0 !important; + background: transparent !important; + border: 0 !important; + + a { + display: flex; + align-items: center; + padding: $grid-size $gl-padding !important; + box-shadow: none !important; + 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); + + &.gl-tab-nav-item-active { + background-color: var(--ide-highlight-background, $white); + border-color: var(--ide-border-color, $white-dark); + border-bottom-color: transparent; + } + + .multi-file-tab-close svg { + top: 0; + } + } + } + } } .multi-file-tab { @@ -605,6 +642,17 @@ $ide-commit-header-height: 48px; left: -1px; } } + + .ide-commit-badge { + background-color: var(--ide-highlight-accent, $almost-black) !important; + color: var(--ide-highlight-background, $white) !important; + position: absolute; + left: 38px; + top: $gl-padding-8; + font-size: $gl-font-size-12; + padding: 2px $gl-padding-4; + font-weight: $gl-font-weight-bold !important; + } } .ide-activity-bar { @@ -623,7 +671,8 @@ $ide-commit-header-height: 48px; height: 100%; } - .nav-links { + .nav-links, + .gl-tabs-nav { height: 30px; } @@ -965,17 +1014,25 @@ $ide-commit-header-height: 48px; } .ide-nav-form { - .nav-links li { + .nav-links li, + .gl-tabs-nav li { width: 50%; padding-left: 0; padding-right: 0; a { text-align: center; + font-size: 14px; + line-height: 30px; - &:not(.active) { + &:not(.active), + &:not(.gl-tab-nav-item-active) { background-color: var(--ide-dropdown-background, $gray-light); } + + &.gl-tab-nav-item-active { + font-weight: bold; + } } } diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss index 5f43d5df7e3..453b810196b 100644 --- a/app/assets/stylesheets/page_bundles/import.scss +++ b/app/assets/stylesheets/page_bundles/import.scss @@ -12,35 +12,6 @@ width: 1%; } -.import-project-name-input { - border-radius: 0 $border-radius-default $border-radius-default 0; - position: relative; - left: -1px; - max-width: 300px; -} - -.import-slash-divider { - background-color: $gray-lightest; - border: 1px solid $border-color; -} - -.import-row { - height: 55px; -} - -.import-table { - .import-jobs-from-col, - .import-jobs-to-col, - .import-jobs-status-col, - .import-jobs-cta-col { - border-bottom-width: 1px; - padding-left: $gl-padding; - } -} - -.import-projects-loading-icon { - margin-top: $gl-padding-32; -} .import-entities-target-select { &.disabled { diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 231723ca4e3..25401a161da 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -79,12 +79,6 @@ $header-height: 40px; margin-top: 16px; } -.heading-with-border { - border-bottom: 1px solid $gray-100; - display: inline-block; - padding-bottom: 16px; -} - svg { fill: currentColor; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index be74503c21f..3263a5067ea 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -7,7 +7,6 @@ .diff-files-holder { flex: 1; min-width: 0; - z-index: 201; } .diff-tree-list { diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index 1b190024457..a6668f00147 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -37,12 +37,6 @@ &.gl-modal .modal-md { max-width: 640px; } - - // TODO: move to gitlab/ui utilities - // https://gitlab.com/gitlab-org/gitlab/-/issues/297502 - .gl-w-fit-content { - width: fit-content; - } } //// Copied from roadmaps.scss - adapted for on-call schedules @@ -91,9 +85,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi } .timeline-header-item { - // container size minus left panel width divided by 2 week timeframes - width: calc((100% - #{$details-cell-width}) / 2); - &:last-of-type .item-label { @include gl-border-r-0; } @@ -174,9 +165,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi .timeline-cell { @include gl-relative; - // width: $timeline-cell-width; - // container size minus left panel width divided by 2 week timeframes - width: calc((100% - #{$details-cell-width}) / 2); @include gl-bg-transparent; border-right: $border-style; diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index dbde7933a8b..ae36f7e3ac1 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -67,7 +67,8 @@ // Mini Pipelines .stage-cell { - .mini-pipeline-graph-dropdown-toggle { + .mini-pipeline-graph-dropdown-toggle, + .mini-pipeline-graph-gl-dropdown-toggle { svg { height: $ci-action-icon-size; width: $ci-action-icon-size; @@ -138,7 +139,13 @@ } // Dropdown button in mini pipeline graph -button.mini-pipeline-graph-dropdown-toggle { +button.mini-pipeline-graph-dropdown-toggle, +// As the `mini-pipeline-item` mixin specificity is lower +// than the toggle of dropdown with 'variant="link"' we add +// classes ".gl-button.btn-link" to make it more specific. +// Once FF ci_mini_pipeline_gl_dropdown is removed, the `mini-pipeline-item` +// itself could increase its specificity to simplify this selector +button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle { @include mini-pipeline-item(); } diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss index 9ed48b693b9..a207c10b04f 100644 --- a/app/assets/stylesheets/page_bundles/signup.scss +++ b/app/assets/stylesheets/page_bundles/signup.scss @@ -73,3 +73,7 @@ text-decoration: none; } } + +.edit-profile { + max-width: 460px; +} diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss deleted file mode 100644 index af1eefd7587..00000000000 --- a/app/assets/stylesheets/pages/admin.scss +++ /dev/null @@ -1,18 +0,0 @@ -.info-well { - .admin-well-statistics, - .admin-well-features { - padding-bottom: 46px; - } -} - -.usage-data { - max-height: 400px; -} - -[data-page='admin:jobs:index'] { - .admin-builds-table { - td:last-child { - min-width: 120px; - } - } -} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 9b17da80023..7111d3d4107 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -240,11 +240,6 @@ .commit, .generic-commit-status { - a, - button { - vertical-align: baseline; - } - a { color: $gl-text-color; diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 52bd16d1a79..ef737e11799 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -74,14 +74,10 @@ justify-content: flex-end; } - .encoding-selector, .soft-wrap-toggle { display: inline-block; vertical-align: top; font-family: $regular-font; - } - - .soft-wrap-toggle { margin: 0 $btn-side-margin; .soft-wrap { @@ -128,15 +124,6 @@ margin: 3px 0; } - .encoding-selector { - display: block; - margin: 3px 0; - - button { - width: 100%; - } - } - @media(max-width: map-get($grid-breakpoints, md)-1) { clear: both; } diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index aeda91c1714..87307fd682e 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -260,7 +260,6 @@ } .pipeline-quota { - border-top: 1px solid $table-border-color; border-bottom: 1px solid $table-border-color; margin: 0 0 $gl-padding; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index e5528c25e82..a6ab5459a84 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -117,6 +117,11 @@ } } +.reviewer .merge-icon { + bottom: -3px; + right: -3px; +} + .right-sidebar { position: fixed; top: $header-height; @@ -156,14 +161,6 @@ color: inherit; } - // TODO remove this class once we can generate a correct hover utility from `gitlab/ui`, - // see here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39286#note_396767000 - .btn-link-hover:hover { - * { - @include gl-text-blue-800; - } - } - .issuable-header-text { margin-top: 7px; } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 1caf62067a6..2a8a86615f6 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -108,18 +108,6 @@ ul.related-merge-requests > li { } } -.issuable-email-modal-btn { - padding: 0; - color: $blue-600; - background-color: transparent; - border: 0; - outline: 0; - - &:hover { - text-decoration: underline; - } -} - .email-modal-input-group { margin-bottom: 10px; @@ -203,15 +191,9 @@ ul.related-merge-requests > li { } } -.discussion-reply-holder { - .avatar-note-form-holder .note-edit-form { - display: block; - margin-left: $note-icon-gutter-width; - - @include media-breakpoint-down(xs) { - margin-left: 0; - } - } +.discussion-reply-holder, +.note-edit-form { + display: block; } .issue-sort-dropdown { @@ -221,6 +203,10 @@ ul.related-merge-requests > li { .reverse-sort-btn { color: $gl-text-color-secondary; + + &.disabled { + color: $gl-text-color-disabled; + } } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 4d93702f1c2..b7d05fc411a 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -120,7 +120,7 @@ } .labels-container { - background-color: $gray-light; + background-color: $gray-100; border-radius: $border-radius-default; padding: $gl-padding $gl-padding-8; } diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 81a70470c65..019d827798c 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -42,8 +42,7 @@ .login-box, .omniauth-container { box-shadow: 0 0 0 1px $border-color; - border-bottom-right-radius: $border-radius; - border-bottom-left-radius: $border-radius; + border-radius: $border-radius; padding: 15px; .login-heading h3 { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index b99e619cc98..a62df1258af 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -221,7 +221,7 @@ $mr-widget-min-height: 69px; .mr-widget-pipeline-graph { .dropdown-menu { - z-index: 300; + z-index: $zindex-dropdown-menu; } } @@ -375,13 +375,14 @@ $mr-widget-min-height: 69px; } .text { - span { - font-weight: $gl-font-weight-bold; - } - p { margin-top: $gl-padding; } + + .highlight { + margin: 0 0 $gl-padding; + font-weight: $gl-font-weight-bold; + } } } @@ -981,7 +982,14 @@ $mr-widget-min-height: 69px; } .mini-pipeline-graph-dropdown-toggle, - .stage-cell .mini-pipeline-graph-dropdown-toggle svg { + .stage-cell .mini-pipeline-graph-dropdown-toggle svg, + // As the `mini-pipeline-item` mixin specificity is lower + // than the toggle of dropdown with 'variant="link"' we add + // classes ".gl-button.btn-link" to make it more specific. + // Once FF ci_mini_pipeline_gl_dropdown is removed, the `mini-pipeline-item` + // itself could increase its specificity to simplify this selector + button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle, + .stage-cell button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle svg { height: $ci-action-icon-size-lg; width: $ci-action-icon-size-lg; } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 254ad96bb57..ffbfa47f9bd 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -212,8 +212,12 @@ table { } } -.note-edit-form { +// Snippets are the only non-vue form left +.snippets.note-edit-form { display: none; +} + +.note-edit-form { font-size: 14px; .md-area { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 4216091e8a9..190bdcb1efd 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -1,6 +1,5 @@ $system-note-icon-size: 32px; $system-note-svg-size: 16px; -$note-form-margin-left: 72px; @mixin vertical-line($left) { &::before { @@ -54,16 +53,6 @@ $note-form-margin-left: 72px; &.note-form { margin-left: 0; - @include notes-media('min', map-get($grid-breakpoints, md)) { - margin-left: $note-form-margin-left; - } - - .timeline-icon { - @include notes-media('min', map-get($grid-breakpoints, sm)) { - margin-left: -$note-icon-gutter-width; - } - } - .timeline-content { margin-left: 0; } @@ -84,36 +73,17 @@ $note-form-margin-left: 72px; .replies-toggle { background-color: $gray-light; padding: $gl-padding-8 $gl-padding; - border-top: 1px solid $gray-50; - border-bottom: 1px solid $gray-50; + border-top: 1px solid $gray-100; + border-bottom: 1px solid $gray-100; .collapse-replies-btn:hover { color: $blue-600; } - &.expanded { - span { - cursor: pointer; - } - - svg { - position: relative; - top: 3px; - } - } - &.collapsed { color: $gl-text-color-secondary; border-radius: 0 0 $border-radius-default $border-radius-default; - svg { - float: left; - position: relative; - top: $gl-padding-4; - margin-right: $gl-padding-8; - cursor: pointer; - } - img { margin: -2px 4px 0 0; } @@ -178,7 +148,6 @@ $note-form-margin-left: 72px; > li { display: block; position: relative; - border-bottom: 0; &.being-posted { pointer-events: none; @@ -549,21 +518,6 @@ $note-form-margin-left: 72px; .code-commit .notes-content, .diff-viewer > .image ~ .note-container { background-color: $white; - - .avatar-note-form-holder { - .user-avatar-link img { - margin: 13px $gl-padding $gl-padding; - } - - form, - ~ .discussion-form-container { - padding: $gl-padding; - - @include media-breakpoint-up(sm) { - margin-left: $note-icon-gutter-width; - } - } - } } .diff-viewer > .image ~ .note-container form.new-note { @@ -953,14 +907,6 @@ $note-form-margin-left: 72px; .discussion-filter-container { .dropdown-menu { margin-bottom: $gl-padding-4; - - @include media-breakpoint-down(md) { - margin-left: $btn-side-margin + $contextual-sidebar-collapsed-width; - } - - @include media-breakpoint-down(xs) { - margin-left: $btn-side-margin; - } } } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 3605283245f..6a2fa2ee7a1 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -138,6 +138,13 @@ } } +.social-provider-btn-image { + > img { + width: 16px; + vertical-align: inherit; + } +} + .provider-btn-image { display: inline-block; padding: 5px 10px; @@ -378,19 +385,6 @@ table.u2f-registrations, display: inline; margin-right: $gl-padding / 4; } - - .badge-verification-status { - border-width: 1px; - border-style: solid; - - &.verified { - @include green-status-color; - } - - &.unverified { - @include status-color($gray-dark, color('gray'), $common-gray-dark); - } - } } .edit-user { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 7fafd28be56..8251cdb9bbb 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -571,10 +571,6 @@ top: 0; } } - - .btn-missing { - @extend .btn-missing; - } } } @@ -996,6 +992,20 @@ pre.light-well { width: auto; } } + + // Remove once gitlab/ui solution is implemented: + // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1157 + // https://gitlab.com/gitlab-org/gitlab/-/issues/300405 + .gl-search-box-by-type-input { + width: 100%; + } + + // Remove once gitlab/ui solution is implemented + // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1158 + // https://gitlab.com/gitlab-org/gitlab/-/issues/300405 + .gl-new-dropdown-button-text { + @include str-truncated; + } } .clearable-input { diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 352050f7b01..fa008a05e11 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -49,8 +49,6 @@ position: relative; .dropdown-menu { - min-width: 100%; - width: 100%; left: inherit; right: 0; } @@ -114,7 +112,7 @@ } th { - border-top-color: $gray-light; + border: 0; } td { diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 31a501f3a36..849749ee7c7 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -903,7 +903,7 @@ table a code { padding: 0; background-color: #4f4f4f; } -.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) { +.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; } .dropdown-select { diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 7f6e537af8f..44da509481d 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -736,7 +736,6 @@ body { white-space: nowrap; } .btn:active, .btn.active { - box-shadow: rgba(0, 0, 0, 0.16); background-color: #eaeaea; border-color: #e3e3e3; color: #303030; @@ -903,7 +902,7 @@ table a code { padding: 0; background-color: #dbdbdb; } -.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) { +.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; } .dropdown-select { diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index af43c532b7c..4b88b94f3a6 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -1174,7 +1174,7 @@ table a code { padding: 0; background-color: #dbdbdb; } -.dropdown-menu .badge.badge-pill + span:not(.badge.badge-pill) { +.dropdown-menu .badge.badge-pill + span:not(.badge):not(.badge-pill) { margin-right: 40px; } .dropdown-select { @@ -2093,8 +2093,7 @@ table.code { .login-page .login-box, .login-page .omniauth-container { box-shadow: 0 0 0 1px #dbdbdb; - border-bottom-right-radius: 0.25rem; - border-bottom-left-radius: 0.25rem; + border-radius: 0.25rem; padding: 15px; } .login-page .login-box .nav .active a, diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index ab330ed69c6..d424dcbf8f2 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -110,7 +110,7 @@ // This utility is used to force the z-index to match that of dropdown menu's .gl-z-dropdown-menu\! { - z-index: 300 !important; + z-index: $zindex-dropdown-menu !important; } .gl-flex-basis-quarter { @@ -143,3 +143,17 @@ flex-direction: column !important; } } + +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1165 +.gl-xs-mb-4 { + @media (max-width: $breakpoint-sm) { + margin-bottom: $gl-spacing-scale-4; + } +} + +// Same as above +.gl-xs-mb-4\! { + @media (max-width: $breakpoint-sm) { + margin-bottom: $gl-spacing-scale-4 !important; + } +} |