diff options
Diffstat (limited to 'app/assets/stylesheets')
71 files changed, 1742 insertions, 1066 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index a31cb0b0485..52bc19fddd9 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,8 +1,5 @@ @import './pages/admin'; -@import './pages/alert_management/details'; -@import './pages/alert_management/severity-icons'; @import './pages/branches'; -@import './pages/builds'; @import './pages/ci_projects'; @import './pages/clusters'; @import './pages/commits'; @@ -27,7 +24,6 @@ @import './pages/notes'; @import './pages/notifications'; @import './pages/pages'; -@import './pages/pipeline_schedules'; @import './pages/pipelines'; @import './pages/profile'; @import './pages/profiles/preferences'; @@ -39,7 +35,6 @@ @import './pages/settings'; @import './pages/settings_ci_cd'; @import './pages/sherlock'; -@import './pages/status'; @import './pages/storage_quota'; @import './pages/tree'; @import './pages/trials'; diff --git a/app/assets/stylesheets/behaviors.scss b/app/assets/stylesheets/behaviors.scss index 120a139ff3d..bcfa5bac5d5 100644 --- a/app/assets/stylesheets/behaviors.scss +++ b/app/assets/stylesheets/behaviors.scss @@ -1,28 +1,3 @@ -// Details -//-------- -.js-details-container { - .content { - display: none; - &.hide { display: block; } - } - - &.open .content { - display: block; - &.hide { display: none; } - } -} - -// Toggle between two states. -.js-toggler-container { - .turn-on { display: block; } - .turn-off { display: none; } - - &.on { - .turn-on { display: none; } - .turn-off { display: block; } - } -} - // Hide element if Vue is still working on rendering it fully. [v-cloak='true'] { display: none !important; diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index aac32e7fb2d..3d5076f485c 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -115,14 +115,10 @@ code { background-color: $gray-50; border-radius: $border-radius-default; - .code > & { - background-color: inherit; - padding: unset; - } - + .code > &, .build-trace & { background-color: inherit; - padding: inherit; + padding: unset; } } @@ -131,12 +127,6 @@ table { border-spacing: 0; } -.tooltip, -.no-pointer-events { - // Fix bootstrap4 bug whereby tooltips flicker when they are hovered over their borders - pointer-events: none; -} - @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { $infix: breakpoint-infix($breakpoint, $grid-breakpoints); diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 81f2091e915..579a86a94a4 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -75,10 +75,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); left: 0; } -.design-scaler { - z-index: 1; -} - .design-scaler-wrapper { bottom: 0; left: 50%; @@ -185,41 +181,3 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); .design-card-header { background: transparent; } - -.design-dropzone-border { - border: 2px dashed $gray-100; -} - -.design-dropzone-card { - transition: border $gl-transition-duration-medium $general-hover-transition-curve; - color: $gl-text-color; - - &:focus, - &:active { - outline: none; - border: 2px dashed $purple; - color: $gl-text-color; - } - - &:hover { - border-color: $gray-300; - } -} - -.design-dropzone-overlay { - border: 2px dashed $purple; - top: 0; - left: 0; - pointer-events: none; - opacity: 1; -} - -.design-dropzone-fade-enter-active, -.design-dropzone-fade-leave-active { - transition: opacity $general-hover-transition-duration $general-hover-transition-curve; -} - -.design-dropzone-fade-enter, -.design-dropzone-fade-leave-to { - opacity: 0; -} diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/components/severity/icons.scss index f58ad87a673..8ddf873196a 100644 --- a/app/assets/stylesheets/pages/alert_management/severity-icons.scss +++ b/app/assets/stylesheets/components/severity/icons.scss @@ -2,26 +2,26 @@ .incident-management-list, .alert-management-details { .icon-critical { - color: $red-800; + @include gl-text-red-800; } .icon-high { - color: $red-600; + @include gl-text-red-600; } .icon-medium { - color: $orange-400; + @include gl-text-orange-400; } .icon-low { - color: $orange-300; + @include gl-text-orange-300; } .icon-info { - color: $blue-400; + @include gl-text-blue-400; } .icon-unknown { - color: $gray-200; + @include gl-text-gray-200; } } diff --git a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss new file mode 100644 index 00000000000..2bc6eba3342 --- /dev/null +++ b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss @@ -0,0 +1,37 @@ +.upload-dropzone-border { + border: 2px dashed $gray-100; +} + +.upload-dropzone-card { + transition: border $gl-transition-duration-medium $general-hover-transition-curve; + color: $gl-text-color; + + &:focus, + &:active { + outline: none; + border: 2px dashed $purple; + color: $gl-text-color; + } + + &:hover { + border-color: $gray-300; + } +} + +.upload-dropzone-overlay { + border: 2px dashed $purple; + top: 0; + left: 0; + pointer-events: none; + opacity: 1; +} + +.upload-dropzone-fade-enter-active, +.upload-dropzone-fade-leave-active { + transition: opacity $general-hover-transition-duration $general-hover-transition-curve; +} + +.upload-dropzone-fade-enter, +.upload-dropzone-fade-leave-to { + opacity: 0; +} diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 6c58346b750..64e82531c30 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -1,6 +1,11 @@ .whats-new-drawer { margin-top: $header-height; @include gl-shadow-none; + overflow-y: hidden; + + .gl-infinite-scroll-legend { + @include gl-display-none; + } } .with-performance-bar .whats-new-drawer { @@ -13,6 +18,14 @@ @include gl-font-weight-bold; } +.whats-new-item-title-link { + &:hover, + &:focus, + &:active { + @include gl-text-gray-900; + } +} + .whats-new-item-image { border-color: $gray-50; } diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss index a3338ff13b5..8a955cffc49 100644 --- a/app/assets/stylesheets/fontawesome_custom.scss +++ b/app/assets/stylesheets/fontawesome_custom.scss @@ -92,55 +92,23 @@ content: '\f0d7'; } -.fa-check::before { - content: '\f00c'; -} - .fa-warning::before, .fa-exclamation-triangle::before { content: '\f071'; } -.fa-external-link::before { - content: '\f08e'; -} - .fa-spinner::before { content: '\f110'; } -.fa-trash-o::before { - content: '\f014'; -} - .fa-caret-right::before { content: '\f0da'; } -.fa-refresh::before { - content: '\f021'; -} - -.fa-chevron-up::before { - content: '\f077'; -} - -.fa-paperclip::before { - content: '\f0c6'; -} - -.fa-bug::before { - content: '\f188'; -} - .fa-exclamation-circle::before { content: '\f06a'; } -.fa-bell::before { - content: '\f0f3'; -} - .fa-file-o::before { content: '\f016'; } @@ -153,10 +121,6 @@ content: '\f111'; } -.fa-git::before { - content: '\f1d3'; -} - .fa-thumb-tack::before { content: '\f08d'; } @@ -165,38 +129,6 @@ content: '\f06d'; } -.fa-pause::before { - content: '\f04c'; -} - -.fa-play::before { - content: '\f04b'; -} - -.fa-share::before { - content: '\f064'; -} - -.fa-book::before { - content: '\f02d'; -} - -.fa-times-circle::before { - content: '\f057'; -} - -.fa-skype::before { - content: '\f17e'; -} - -.fa-linkedin-square::before { - content: '\f08c'; -} - -.fa-twitter-square::before { - content: '\f081'; -} - .fa-file-pdf-o::before { content: '\f1c1'; } @@ -229,6 +161,14 @@ content: '\f1c8'; } +.fa-square-o::before { + content: '\f096'; +} + +.fa-check-square-o::before { + content: '\f046'; +} + .sr-only { position: absolute; width: 1px; diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index c1647c16c77..b8934d2797a 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -15,10 +15,6 @@ .broadcast-banner-message { text-align: center; - - .broadcast-message-dismiss { - color: inherit; - } } .broadcast-notification-message { @@ -36,10 +32,6 @@ &.preview { position: static; } - - .broadcast-message-dismiss { - color: $gray-700; - } } .toggle-colors { diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index de767ac3fe0..5b7f1a3f38b 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -14,14 +14,11 @@ .str-truncated { max-width: 70%; } - - .user-calendar-activities-loading { - font-size: 24px; - } } .user-calendar { text-align: center; + min-height: 172px; .calendar { display: inline-block; @@ -42,12 +39,9 @@ .calendar-hint { font-size: 12px; - - &.bottom-right { - direction: ltr; - margin-top: -23px; - float: right; - } + direction: ltr; + margin-top: -23px; + float: right; } .pika-single.gitlab-theme { diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 8dbed9c03f2..deb2d6c4641 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -424,7 +424,6 @@ img.emoji { .w-15p { width: 15%; } .w-30p { width: 30%; } .w-60p { width: 60%; } -.w-70p { width: 70%; } .h-12em { height: 12em; } .h-32-px { height: 32px;} diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index c0a2350d080..e16ab5ee72f 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -6,11 +6,18 @@ border-top: 1px solid $border-color; } + &.has-body { + .file-title { + box-shadow: 0 -2px 0 0 var(--white); + } + } + + table.code tr:last-of-type td:last-of-type { + @include gl-rounded-bottom-right-base(); + } + .file-title, .file-title-flex-parent { - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; - box-shadow: 0 -2px 0 0 var(--white); cursor: pointer; .dropdown-menu { @@ -113,7 +120,6 @@ .diff-content { background: $white; color: $gl-text-color; - border-radius: 0 0 3px 3px; .unfold { cursor: pointer; @@ -443,6 +449,7 @@ } } +.diff-table.code, table.code { width: 100%; font-family: $monospace-font; @@ -453,14 +460,20 @@ table.code { table-layout: fixed; border-radius: 0 0 $border-radius-default $border-radius-default; + .diff-tr:first-of-type.line_expansion > .diff-td, tr:first-of-type.line_expansion > td { border-top: 0; } - tr:nth-last-of-type(2).line_expansion > td { - border-bottom: 0; + .diff-tr:nth-last-of-type(2).line_expansion > .diff-td, + tr:nth-last-of-type(2).line_expansion, + tr:last-of-type.line_expansion { + > td { + border-bottom: 0; + } } + .diff-tr.line_holder .diff-td, tr.line_holder td { line-height: $code-line-height; font-size: $code-font-size; @@ -556,24 +569,95 @@ table.code { } .line_holder:last-of-type { + .diff-td:first-child, td:first-child { border-bottom-left-radius: $border-radius-default; } } &.left-side-selected { + .diff-td.line_content.parallel.right-side, td.line_content.parallel.right-side { user-select: none; } } &.right-side-selected { + .diff-td.line_content.parallel.left-side, td.line_content.parallel.left-side { user-select: none; } } } +// Merge request diff grid layout +.diff-grid { + .diff-grid-row { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .diff-grid-left, + .diff-grid-right { + display: grid; + grid-template-columns: 50px 8px 1fr; + + .diff-td:nth-child(2) { + display: none; + } + } + + .diff-grid-comments { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .diff-grid-drafts { + display: grid; + grid-template-columns: 1fr 1fr; + } + + &.inline { + .diff-grid-comments { + display: grid; + grid-template-columns: 1fr; + } + + .diff-grid-drafts { + display: grid; + grid-template-columns: 1fr; + } + + .diff-grid-row { + grid-template-columns: 1fr; + } + + .diff-grid-left, + .diff-grid-right { + grid-template-columns: 50px 50px 8px 1fr; + + .diff-td:nth-child(2) { + display: block; + } + } + + .diff-grid-left .old:nth-child(1) [data-linenumber], + .diff-grid-right .new:nth-child(2) [data-linenumber] { + display: inline; + } + + .diff-grid-left .old:nth-child(2) [data-linenumber], + .diff-grid-right .new:nth-child(1) [data-linenumber] { + display: none; + } + } +} + +// Merge request diff grid layout overrides +.diff-table.code .diff-tr.line_holder .diff-td.line_content.parallel { + width: unset; +} + .diff-stats { align-items: center; padding: 0 1rem; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ca20b18f851..2094c824286 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -407,7 +407,8 @@ } } - &.droplab-item-selected i { + &.droplab-item-selected i, + &.droplab-item-selected svg { visibility: visible; } diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss index 20fea7a82ca..c3b287a6c3d 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -1,3 +1,21 @@ +[data-editor-loading] { + @include gl-relative; + @include gl-display-flex; + @include gl-justify-content-center; + @include gl-align-items-center; + + &::before { + content: ''; + @include spinner(32px, 3px); + @include gl-absolute; + @include gl-z-index-1; + } + + pre { + opacity: 0; + } +} + [id^='editor-lite-'] { height: 500px; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index f8710cc1346..fe8c27ae9b6 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -45,11 +45,6 @@ } .file-actions { - position: absolute; - top: 5px; - right: 15px; - margin-left: auto; - .btn:not(.btn-icon) { padding: 0 10px; font-size: 13px; @@ -342,30 +337,14 @@ span.idiff { padding: $gl-padding-8 $gl-padding; margin: 0; border-radius: $border-radius-default $border-radius-default 0 0; - } - - .file-header-content { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 30px; - position: relative; - width: auto; - - @media (max-width: map-get($grid-breakpoints, sm)-1) { - width: 100%; - } - } - .file-holder & { - .file-actions { - position: static; + @include media-breakpoint-up(md) { + flex-wrap: nowrap; } } - .btn-clipboard { - position: absolute; - right: 0; + .file-header-content { + padding-right: 30px; } a { @@ -384,15 +363,11 @@ span.idiff { z-index: 2; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { display: block; .file-actions { - white-space: normal; - - .btn-group { - padding-top: 5px; - } + margin-top: 5px; } } } diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 0fb91db0afb..d5f7ec68454 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -9,9 +9,15 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); &.sticky { position: sticky; - position: -webkit-sticky; top: $flash-container-top; z-index: 251; + + .flash-alert, + .flash-notice, + .flash-success, + .flash-warning { + @include gl-mb-4; + } } &.flash-container-page { diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 63be2bdef8e..20d44b71bf6 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -3,6 +3,38 @@ * Mixins with fixed values */ +@keyframes blinking-dot { + 0% { + opacity: 1; + } + + 25% { + opacity: 0.4; + } + + 75% { + opacity: 0.4; + } + + 100% { + opacity: 1; + } +} + +@keyframes blinking-scroll-button { + 0% { + opacity: 0.2; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0.2; + } +} + @mixin str-truncated($max-width: 82%) { display: inline-block; overflow: hidden; diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index f8c46a4495e..372e3bed6e0 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -117,12 +117,6 @@ body.modal-open { border-bottom-right-radius: $modal-border-radius; } } - - @include media-breakpoint-up(sm) { - .modal-dialog { - margin: 64px auto; - } - } } .recaptcha-modal .recaptcha-form { @@ -134,7 +128,7 @@ body.modal-open { } .issues-import-modal, -.issues-export-modal { +.issuable-export-modal { .modal-header { justify-content: flex-start; @@ -166,8 +160,4 @@ body.modal-open { min-height: $modal-body-height; } } - - .checkmark { - color: $green-400; - } } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 7ebc972ac37..3e218de6af9 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -69,7 +69,7 @@ line-height: 28px; white-space: normal; - /* Small devices (phones, tablets, 768px and lower) */ + /* Small devices (phones, 768px and lower) */ @include media-breakpoint-down(xs) { width: 100%; } @@ -92,7 +92,7 @@ padding: 16px 15px 11px; } - /* Small devices (phones, tablets, 768px and lower) */ + /* Small devices (phones, 768px and lower) */ @include media-breakpoint-down(sm) { width: 100%; } @@ -102,15 +102,6 @@ display: inline-block; text-align: right; - @include media-breakpoint-down(sm) { - margin-top: $gl-padding-8; - } - - @include media-breakpoint-up(md) { - display: flex; - align-items: center; - } - > .btn, > .btn-group, > .btn-container, @@ -146,6 +137,35 @@ } } + @include media-breakpoint-up(md) { + display: flex; + align-items: center; + } + + @include media-breakpoint-down(md) { + $controls-margin: $btn-margin-5 - 2px; + flex: 0 0 100%; + margin-top: $gl-padding-8; + + .controls-item, + .controls-item-full, + .controls-item:last-child { + flex: 1 1 35%; + display: block; + width: 100%; + margin: $controls-margin; + + .btn, + .dropdown { + margin: 0; + } + } + + .controls-item-full { + flex: 1 1 100%; + } + } + @include media-breakpoint-down(sm) { padding-bottom: 0; width: 100%; @@ -239,32 +259,6 @@ pre { width: 100%; } - - @include media-breakpoint-down(md) { - .nav-controls { - $controls-margin: $btn-margin-5 - 2px; - flex: 0 0 100%; - margin-top: $gl-padding-8; - - .controls-item, - .controls-item-full, - .controls-item:last-child { - flex: 1 1 35%; - display: block; - width: 100%; - margin: $controls-margin; - - .btn, - .dropdown { - margin: 0; - } - } - - .controls-item-full { - flex: 1 1 100%; - } - } - } } .scrolling-tabs-container { diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss index a74aeb9f220..2aa0ab6c1eb 100644 --- a/app/assets/stylesheets/framework/spinner.scss +++ b/app/assets/stylesheets/framework/spinner.scss @@ -20,7 +20,7 @@ } } -.spinner { +@mixin spinner($size: 16px, $border-width: 2px, $color: $orange-400) { border-radius: 50%; position: relative; margin: 0 auto; @@ -30,8 +30,12 @@ animation-iteration-count: infinite; border-style: solid; display: inline-flex; - @include spinner-size(16px, 2px); - @include spinner-color($orange-400); + @include spinner-size($size, $border-width); + @include spinner-color($color); +} + +.spinner { + @include spinner; &.spinner-md { @include spinner-size(32px, 3px); @@ -56,3 +60,7 @@ vertical-align: text-bottom; } } + +.spin { + animation: spinner-rotate 2s infinite linear; +} diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index c15d46d43b2..3d09edfe181 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -453,11 +453,9 @@ h4, h5, h6 { - position: relative; - a.anchor { - left: -16px; - position: absolute; + float: left; + margin-left: -16px; text-decoration: none; outline: none; diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 31075b09b83..d9b9f3694c1 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -20,6 +20,7 @@ @mixin diff-expansion($background, $border, $link) { background-color: $background; + .diff-td, td { border-top: 1px solid $border; border-bottom: 1px solid $border; @@ -41,3 +42,12 @@ border-left: 3px solid $no-coverage; } } + +@mixin line-number-hover($color) { + background-color: $color; + border-color: darken($color, 5%); + + a { + color: darken($color, 15%); + } +} diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 8d965ea4309..d51d5b7137d 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -125,6 +125,9 @@ $dark-il: #de935f; @include dark-diff-match-line; } + .diff-td.diff-line-num.hll:not(.empty-cell), + .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { @@ -158,15 +161,17 @@ $dark-il: #de935f; } } + .diff-grid-left:hover, + .diff-grid-right:hover { + .diff-line-num:not(.empty-cell) { + @include line-number-hover($dark-over-bg); + } + } + .diff-line-num { &.is-over, &.hll:not(.empty-cell).is-over { - background-color: $dark-over-bg; - border-color: darken($dark-over-bg, 5%); - - a { - color: darken($dark-over-bg, 15%); - } + @include line-number-hover($dark-over-bg); } } diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 5ef2b9dcc36..e690f9c7c74 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -125,6 +125,9 @@ $monokai-gi: #a6e22e; @include dark-diff-match-line; } + .diff-td.diff-line-num.hll:not(.empty-cell), + .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { @@ -158,15 +161,17 @@ $monokai-gi: #a6e22e; } } + .diff-grid-left:hover, + .diff-grid-right:hover { + .diff-line-num:not(.empty-cell) { + @include line-number-hover($monokai-over-bg); + } + } + .diff-line-num { &.is-over, &.hll:not(.empty-cell).is-over { - background-color: $monokai-over-bg; - border-color: darken($monokai-over-bg, 5%); - - a { - color: darken($monokai-over-bg, 15%); - } + @include line-number-hover($monokai-over-bg); } } diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index fb548a00526..4fc6e5dba39 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -59,6 +59,13 @@ } } + .diff-grid-left:hover, + .diff-grid-right:hover { + .diff-line-num:not(.empty-cell) { + @include line-number-hover($none-over-bg); + } + } + .diff-line-num { &.old { a { @@ -74,12 +81,7 @@ &.is-over, &.hll:not(.empty-cell).is-over { - background-color: $none-over-bg; - border-color: darken($none-over-bg, 5%); - - a { - color: darken($none-over-bg, 15%); - } + @include line-number-hover($none-over-bg); } &.hll:not(.empty-cell) { diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index 190a6e6156a..8c532f53182 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -129,6 +129,9 @@ $solarized-dark-il: #2aa198; @include dark-diff-match-line; } + .diff-td.diff-line-num.hll:not(.empty-cell), + .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { @@ -140,6 +143,13 @@ $solarized-dark-il: #2aa198; @include line-coverage-border-color($solarized-dark-coverage, $solarized-dark-no-coverage); } + .diff-grid-left:hover, + .diff-grid-right:hover { + .diff-line-num:not(.empty-cell) { + @include line-number-hover($solarized-dark-over-bg); + } + } + .diff-line-num.new, .line-coverage.new, .line_content.new { @@ -165,12 +175,7 @@ $solarized-dark-il: #2aa198; .diff-line-num { &.is-over, &.hll:not(.empty-cell).is-over { - background-color: $solarized-dark-over-bg; - border-color: darken($solarized-dark-over-bg, 5%); - - a { - color: darken($solarized-dark-over-bg, 15%); - } + @include line-number-hover($solarized-dark-over-bg); } } diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 71d8dd06834..1f9042a9534 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -136,6 +136,9 @@ $solarized-light-il: #2aa198; @include match-line; } + .diff-td.diff-line-num.hll:not(.empty-cell), + .diff-td.line-coverage.hll:not(.empty-cell), + .diff-td.line_content.hll:not(.empty-cell), td.diff-line-num.hll:not(.empty-cell), td.line-coverage.hll:not(.empty-cell), td.line_content.hll:not(.empty-cell) { @@ -159,6 +162,13 @@ $solarized-light-il: #2aa198; } } + .diff-grid-left:hover, + .diff-grid-right:hover { + .diff-line-num:not(.empty-cell) { + @include line-number-hover($solarized-light-over-bg); + } + } + .diff-line-num.old, .line-coverage.old, .line_content.old { @@ -173,12 +183,7 @@ $solarized-light-il: #2aa198; .diff-line-num { &.is-over, &.hll:not(.empty-cell).is-over { - background-color: $solarized-light-over-bg; - border-color: darken($solarized-light-over-bg, 5%); - - a { - color: darken($solarized-light-over-bg, 15%); - } + @include line-number-hover($solarized-light-over-bg); } } diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 3e126a52c4b..bb5ca94af33 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -113,6 +113,13 @@ pre.code, @include match-line; } + .diff-grid-left:hover, + .diff-grid-right:hover { + .diff-line-num:not(.empty-cell) { + @include line-number-hover($white-over-bg); + } + } + .diff-line-num { &.old { background-color: $line-number-old; @@ -134,12 +141,7 @@ pre.code, &.is-over, &.hll:not(.empty-cell).is-over { - background-color: $white-over-bg; - border-color: darken($white-over-bg, 5%); - - a { - color: darken($white-over-bg, 15%); - } + @include line-number-hover($white-over-bg); } &.hll:not(.empty-cell) { diff --git a/app/assets/stylesheets/lazy_bundles/select2.scss b/app/assets/stylesheets/lazy_bundles/select2.scss new file mode 100644 index 00000000000..f2c372020ef --- /dev/null +++ b/app/assets/stylesheets/lazy_bundles/select2.scss @@ -0,0 +1,654 @@ +/* +Version: 3.5.2 Timestamp: Sat Nov 1 14:43:36 EDT 2014 +Updated 2020-10-05 by TimZ +*/ +.select2-container { + margin: 0; + position: relative; + display: inline-block; +} + +.select2-container, +.select2-drop, +.select2-search, +.select2-search input { + box-sizing: border-box; +} + +.select2-container .select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid #aaa; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + + border-radius: 4px; + + background-clip: padding-box; + + user-select: none; + + background-color: #fff; + background-image: linear-gradient(to top, #eee 0%, #fff 50%); +} + +html[dir='rtl'] .select2-container .select2-choice { + padding: 0 8px 0 0; +} + +.select2-container.select2-drop-above .select2-choice { + border-bottom-color: #aaa; + + border-radius: 0 0 4px 4px; + + background-image: linear-gradient(to bottom, #eee 0%, #fff 90%); +} + +.select2-container.select2-allowclear .select2-choice .select2-chosen { + margin-right: 42px; +} + +.select2-container .select2-choice > .select2-chosen { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + text-overflow: ellipsis; + float: none; + width: auto; +} + +html[dir='rtl'] .select2-container .select2-choice > .select2-chosen { + margin-left: 26px; + margin-right: 0; +} + +.select2-container .select2-choice abbr { + display: none; + width: 12px; + height: 12px; + position: absolute; + right: 24px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) right top no-repeat; + cursor: pointer; + outline: 0; +} + +.select2-container.select2-allowclear .select2-choice abbr { + display: inline-block; +} + +.select2-container .select2-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.select2-drop-mask { + border: 0; + margin: 0; + padding: 0; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 9998; + /* styles required for IE to work */ + background-color: #fff; + filter: alpha(opacity=0); +} + +.select2-drop { + width: 100%; + margin-top: -1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: #fff; + color: #000; + border: 1px solid #aaa; + border-top: 0; + + border-radius: 0 0 4px 4px; + + box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); +} + +.select2-drop.select2-drop-above { + margin-top: 1px; + border-top: 1px solid #aaa; + border-bottom: 0; + + border-radius: 4px 4px 0 0; + + box-shadow: 0 -4px 5px rgba(0, 0, 0, 0.15); +} + +.select2-drop-active { + border: 1px solid #5897fb; + border-top: 0; +} + +.select2-drop.select2-drop-above.select2-drop-active { + border-top: 1px solid #5897fb; +} + +.select2-drop-auto-width { + border-top: 1px solid #aaa; + width: auto; +} + +.select2-drop-auto-width .select2-search { + padding-top: 4px; +} + +.select2-container .select2-choice .select2-arrow { + display: inline-block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid #aaa; + border-radius: 0 4px 4px 0; + + background-clip: padding-box; + + background: #ccc; + background-image: linear-gradient(to top, #ccc 0%, #eee 60%); +} + +html[dir='rtl'] .select2-container .select2-choice .select2-arrow { + left: 0; + right: auto; + + border-left: 0; + border-right: 1px solid #aaa; + border-radius: 4px 0 0 4px; +} + +.select2-container .select2-choice .select2-arrow b { + display: block; + width: 100%; + height: 100%; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path("select2.png")) no-repeat 0 1px; +} + +html[dir='rtl'] .select2-container .select2-choice .select2-arrow b { + background-position: 2px 1px; +} + +.select2-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.select2-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid #aaa; + border-radius: 0; + + box-shadow: none; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +html[dir='rtl'] .select2-search input { + padding: 4px 5px 4px 20px; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +.select2-drop.select2-drop-above .select2-search input { + margin-top: 4px; +} + +.select2-search input.select2-active { + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2-spinner.gif')) no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0; +} + +.select2-container-active .select2-choice, +.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); +} + +.select2-dropdown-open .select2-choice { + border-bottom-color: transparent; + box-shadow: 0 1px 0 #fff inset; + + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + background-color: #eee; + background-image: linear-gradient(to top, #fff 0%, #eee 50%); +} + +.select2-dropdown-open.select2-drop-above .select2-choice, +.select2-dropdown-open.select2-drop-above .select2-choices { + border: 1px solid #5897fb; + border-top-color: transparent; + + background-image: linear-gradient(to bottom, #fff 0%, #eee 50%); +} + +.select2-dropdown-open .select2-choice .select2-arrow { + background: transparent; + border-left: 0; + filter: none; +} + +html[dir='rtl'] .select2-dropdown-open .select2-choice .select2-arrow { + border-right: 0; +} + +.select2-dropdown-open .select2-choice .select2-arrow b { + background-position: -18px 1px; +} + +html[dir='rtl'] .select2-dropdown-open .select2-choice .select2-arrow b { + background-position: -16px 1px; +} + +.select2-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* results */ +.select2-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; +} + +html[dir='rtl'] .select2-results { + padding: 0 4px 0 0; + margin: 4px 0 4px 4px; +} + +.select2-results ul.select2-result-sub { + margin: 0; + padding-left: 0; +} + +.select2-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: bold; +} + +.select2-results .select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + user-select: none; +} + +.select2-results-dept-1 .select2-result-label { padding-left: 20px; } +.select2-results-dept-2 .select2-result-label { padding-left: 40px; } +.select2-results-dept-3 .select2-result-label { padding-left: 60px; } +.select2-results-dept-4 .select2-result-label { padding-left: 80px; } +.select2-results-dept-5 .select2-result-label { padding-left: 100px; } +.select2-results-dept-6 .select2-result-label { padding-left: 110px; } +.select2-results-dept-7 .select2-result-label { padding-left: 120px; } + +.select2-results .select2-highlighted { + background: #3875d7; + color: #fff; +} + +.select2-results li em { + background: #feffde; + font-style: normal; +} + +.select2-results .select2-highlighted em { + background: transparent; +} + +.select2-results .select2-highlighted ul { + background: #fff; + color: #000; +} + +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-ajax-error, +.select2-results .select2-selection-limit { + background: #f4f4f4; + display: list-item; + padding-left: 5px; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.select2-results .select2-disabled.select2-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-selected { + display: none; +} + +.select2-more-results.select2-active { + /* stylelint-disable-next-line function-url-quotes */ + background: #f4f4f4 url(image-path('select2-spinner.gif')) no-repeat 100%; +} + +.select2-results .select2-ajax-error { + background: rgba(255, 50, 50, 0.2); +} + +.select2-more-results { + background: #f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.select2-container.select2-container-disabled .select2-choice { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container.select2-container-disabled .select2-choice .select2-arrow { + background-color: #f4f4f4; + background-image: none; + border-left: 0; +} + +.select2-container.select2-container-disabled .select2-choice abbr { + display: none; +} + + +/* multiselect */ + +.select2-container-multi .select2-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0 5px 0 0; + position: relative; + + border: 1px solid #aaa; + cursor: text; + overflow: hidden; + + background-color: #fff; + background-image: linear-gradient(to bottom, #eee 1%, #fff 15%); +} + +html[dir='rtl'] .select2-container-multi .select2-choices { + padding: 0 0 0 5px; +} + +.select2-locked { + padding: 3px 5px !important; +} + +.select2-container-multi .select2-choices { + min-height: 26px; +} + +.select2-container-multi.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); +} + +.select2-container-multi .select2-choices li { + float: left; + list-style: none; +} + +html[dir='rtl'] .select2-container-multi .select2-choices li { + float: right; +} + +.select2-container-multi .select2-choices .select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: #666; + outline: 0; + border: 0; + + box-shadow: none; + background: transparent !important; +} + +.select2-container-multi .select2-choices .select2-search-field input.select2-active { + /* stylelint-disable-next-line function-url-quotes */ + background: #fff url(image-path('select2-spinner.gif')) no-repeat 100% !important; +} + +.select2-default { + color: #999 !important; +} + +.select2-container-multi .select2-choices .select2-search-choice { + padding: 3px 5px 3px 18px; + margin: 3px 0 3px 5px; + position: relative; + + line-height: 13px; + color: #333; + cursor: default; + border: 1px solid #aaa; + + border-radius: 3px; + + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05); + + background-clip: padding-box; + + user-select: none; + + background-color: #e4e4e4; + background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%); +} + +html[dir='rtl'] .select2-container-multi .select2-choices .select2-search-choice { + margin: 3px 5px 3px 0; + padding: 3px 18px 3px 5px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-chosen { + cursor: default; +} + +.select2-container-multi .select2-choices .select2-search-choice-focus { + background: #d4d4d4; +} + +.select2-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + + font-size: 1px; + outline: none; + /* stylelint-disable-next-line function-url-quotes */ + background: url(image-path('select2.png')) right top no-repeat; +} + +html[dir='rtl'] .select2-search-choice-close { + right: auto; + left: 3px; +} + +.select2-container-multi .select2-search-choice-close { + left: 3px; +} + +html[dir='rtl'] .select2-container-multi .select2-search-choice-close { + left: auto; + right: 2px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { + background-position: right -11px; +} + +.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.select2-container-multi.select2-container-disabled .select2-choices { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { + padding: 3px 5px; + border: 1px solid #ddd; + background-image: none; + background-color: #f4f4f4; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { + display: none; + background: none; +} +/* end multiselect */ + + +.select2-result-selectable .select2-match, +.select2-result-unselectable .select2-match { + text-decoration: underline; +} + +.select2-offscreen, +.select2-offscreen:focus { + clip: rect(0 0 0 0) !important; + width: 1px !important; + height: 1px !important; + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + overflow: hidden !important; + position: absolute !important; + outline: 0 !important; + left: 0 !important; + top: 0 !important; +} + +.select2-display-none { + display: none; +} + +.select2-measure-scrollbar { + position: absolute; + top: -10000px; + left: -10000px; + width: 100px; + height: 100px; + overflow: scroll; +} + +@media only screen and (min-resolution: 120dpi) { + .select2-search input, + .select2-search-choice-close, + .select2-container .select2-choice abbr, + .select2-container .select2-choice .select2-arrow b { + /* stylelint-disable-next-line function-url-quotes */ + background-image: url(image-path("select2x2.png")) !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + + .select2-search input { + background-position: 100% -21px !important; + } +} + +/* End of select2.css */ + +@import './select2_overrides'; diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss new file mode 100644 index 00000000000..6c51c4b0ec3 --- /dev/null +++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss @@ -0,0 +1,359 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; +/** Select2 selectbox style override **/ +.select2-container { + width: 100% !important; + + &.input-md, + &.input-lg { + display: block; + } +} + +.select2-container, +.select2-container.select2-drop-above { + .select2-choice { + background: $white; + color: $gl-text-color; + border-color: $border-color; + height: 34px; + padding: $gl-vert-padding $gl-input-padding; + font-size: $gl-font-size; + line-height: 1.42857143; + border-radius: $gl-border-radius-base; + + .select2-arrow { + background-image: none; + background-color: transparent; + border: 0; + padding-top: 12px; + padding-right: 20px; + font-size: 10px; + + b { + display: none; + } + + &::after { + content: '\f078'; + position: absolute; + z-index: 1; + text-align: center; + pointer-events: none; + box-sizing: border-box; + color: $gray-darkest; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + + .select2-chosen { + margin-right: 15px; + } + + &:hover { + border-color: $gray-darkest; + color: $gl-text-color; + } + } + + // Essentially we’re doing @include form-control-focus here (from + // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a + // `&:focus` selector and we’re never actually focusing the .select2-choice + // link nor the .select2-container, the Select2 library focuses an off-screen + // .select2-focusser element instead. + &.select2-container-active:not(.select2-dropdown-open) { + .select2-choice { + color: $input-focus-color; + background-color: $input-focus-bg; + border-color: $input-focus-border-color; + outline: 0; + } + + // Reusable focus “glow” box-shadow + @mixin form-control-focus-glow { + @if $enable-shadows { + box-shadow: $input-box-shadow, $input-focus-box-shadow; + } @else { + box-shadow: $input-focus-box-shadow; + } + } + + // Apply the focus “glow” shadow to the .select2-container if it also has + // the .block-truncated class as that applies an overflow: hidden, thereby + // hiding the glow of the nested .select2-choice element. + &.block-truncated { + @include form-control-focus-glow; + } + + // Apply the glow directly to the .select2-choice link if we’re not + // block-truncating the container. + &:not(.block-truncated) .select2-choice { + @include form-control-focus-glow; + } + } + + &.is-invalid { + ~ .invalid-feedback { + display: block; + } + + .select2-choices, + .select2-choice { + border-color: $red-500; + } + } +} + +.select2-drop, +.select2-drop.select2-drop-above { + background: $white; + box-shadow: 0 2px 4px $dropdown-shadow-color; + border-radius: $gl-border-radius-base; + border: 1px solid $border-color; + min-width: 175px; + color: $gl-text-color; + z-index: 999; + + .modal-open & { + z-index: $zindex-modal + 200; + } +} + +.select2-drop-mask { + z-index: 998; + + .modal-open & { + z-index: $zindex-modal + 100; + } +} + +.select2-drop.select2-drop-above.select2-drop-active { + border-top: 1px solid $border-color; + margin-top: -6px; +} + +.select2-container-active { + .select2-choice, + .select2-choices { + box-shadow: none; + } +} + +.select2-dropdown-open, +.select2-dropdown-open.select2-drop-above { + .select2-choice { + border-color: $gray-darkest; + outline: 0; + } +} + +.select2-container-multi { + .select2-choices { + border-radius: $border-radius-default; + border-color: $border-color; + background: none; + + .select2-search-field input { + padding: 5px $gl-input-padding; + height: auto; + font-family: inherit; + font-size: inherit; + } + + .select2-search-choice { + margin: 5px 0 0 8px; + box-shadow: none; + border-color: $border-color; + color: $gl-text-color; + line-height: 15px; + background-color: $gray-light; + background-image: none; + padding: 3px 18px 3px 5px; + + .select2-search-choice-close { + top: 5px; + left: initial; + right: 3px; + } + + &.select2-search-choice-focus { + border-color: $gl-text-color; + } + } + } +} + +.select2-drop-active { + margin-top: $dropdown-vertical-offset; + font-size: 14px; + + .select2-results { + max-height: 350px; + } +} + +.select2-search { + padding: $grid-size; + + .select2-drop-auto-width & { + padding: $grid-size; + } + + input { + padding: $grid-size; + background: transparent image-url('select2.png'); + 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-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; + } + + &.select2-active { + background-color: $white; + background-image: image-url('select2-spinner.gif') !important; + background-origin: content-box; + background-repeat: no-repeat; + background-position: right 6px center !important; + background-size: 16px 16px !important; + } + } + + + .select2-results { + padding-top: 0; + } +} + +.select2-results { + margin: 0; + padding: #{$gl-padding / 2} 0; + + .select2-no-results, + .select2-searching, + .select2-ajax-error, + .select2-selection-limit { + background: transparent; + padding: #{$gl-padding / 2} $gl-padding; + } + + .select2-result-label, + .select2-more-results { + padding: #{$gl-padding / 2} $gl-padding; + } + + .select2-highlighted { + background: transparent; + color: $gl-text-color; + + .select2-result-label { + background: $gray-darker; + } + } + + .select2-result { + padding: 0 1px; + } + + li.select2-result-with-children > .select2-result-label { + font-weight: $gl-font-weight-bold; + color: $gl-text-color; + } +} + +.select2-highlighted { + .group-result { + .group-path { + color: $gray-700; + } + } +} + +.select2-result-selectable, +.select2-result-unselectable { + .select2-match { + font-weight: $gl-font-weight-bold; + text-decoration: none; + } +} + +.input-group { + .select2-container { + display: table-cell; + max-width: 180px; + } +} + +.file-editor { + .select2 { + float: right; + } +} + +.import-namespace-select { + > .select2-choice { + border-radius: $border-radius-default 0 0 $border-radius-default; + position: relative; + left: 1px; + } +} + +.issue-form { + .select2-container { + width: 250px !important; + } +} + +.new_project, +.edit-project, +.import-project { + .input-group { + .select2-container { + display: unset; + max-width: unset; + flex-grow: 1; + } + } + + .input-group-prepend, + .input-group-append { + + .select2 a { + border-radius: 0 $gl-border-radius-base $gl-border-radius-base 0; + } + } +} + +.project-path { + .select2-choice { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +.transfer-project .select2-container { + min-width: 200px; +} + +.right-sidebar { + .block { + .select2-container span { + margin-top: 0; + } + } +} + +.block-truncated { + > div:not(.block):not(.select2-display-none) { + display: inline; + } +} diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index b2050c0e73f..27c6ef20269 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -143,4 +143,21 @@ tr.footer td { color: $mailer-link-color; text-decoration: none; } + + .gitlab-info { + padding: $gl-padding-24 0; + } + + .gitlab-info-text { + max-width: 640px; + margin: 0 auto; + text-align: center; + color: $gray-400; + font-size: $gl-font-size-small; + } + + .footer-logo { + width: 90px; + height: 33px; + } } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index d1f7c2e9865..52cc7d3449e 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), + a:not(.btn):not(.gl-tab-nav-item), .gl-button.btn-link, .gl-button.btn-link:hover, .gl-button.btn-link:focus, @@ -151,7 +151,7 @@ border-color: var(--ide-border-color-alt, $gray-100); code { - background-color: var(--ide-border-color, inherit); + background-color: var(--ide-empty-state-background, inherit); } } @@ -427,7 +427,7 @@ } .md table:not(.code) tbody { - background-color: var(--ide-border-color, $white); + background-color: var(--ide-empty-state-background, $white); } .animation-container { diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss index 514f228e223..beb80a14c5a 100644 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss @@ -1,24 +1,26 @@ +@import 'mixins_and_variables_and_functions'; + .alert-management-details { @include media-breakpoint-down(xs) { .alert-details-incident-button { - width: 100%; + @include gl-w-full; } } .toggle-sidebar-mobile-button { - right: 0; + @include gl-right-0; } .dropdown-menu-toggle { &:hover { - background-color: $white; + @include gl-bg-white; } } .assignee-dropdown-item { .dropdown-item { - display: flex; - align-items: center; + @include gl-display-flex; + @include gl-align-items-center; &::before { top: 50% !important; @@ -26,7 +28,9 @@ &.is-active { &:last-child { - border-bottom: 1px solid $gray-100; + @include gl-border-b-gray-100; + @include gl-border-b-1; + @include gl-border-b-solid; } } } diff --git a/app/assets/stylesheets/page_bundles/alert_management_settings.scss b/app/assets/stylesheets/page_bundles/alert_management_settings.scss new file mode 100644 index 00000000000..fb7c1602cba --- /dev/null +++ b/app/assets/stylesheets/page_bundles/alert_management_settings.scss @@ -0,0 +1,24 @@ +@import 'mixins_and_variables_and_functions'; + +$stroke-size: 1px; + +.right-arrow { + @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; + + &-head { + @include gl-absolute; + top: -$gl-spacing-scale-2; + left: calc(100% - #{$gl-spacing-scale-3} - #{2 * $stroke-size}); + border-color: var(--gray-400, $gray-400); + @include gl-border-solid; + border-width: 0 $stroke-size $stroke-size 0; + @include gl-display-inline-block; + @include gl-p-2; + transform: rotate(-45deg); + } +} diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index e908e3622ed..ffc15af6329 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -83,9 +83,6 @@ } .board { - // the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS - // see https://gitlab.com/gitlab-org/gitlab-foss/issues/64828 - display: inline-block; width: calc(85vw - 15px); @include media-breakpoint-up(sm) { @@ -116,39 +113,10 @@ &.is-collapsed { width: 50px; - .board-title { - flex-direction: column; - } - .board-title-caret { margin-top: 1px; } - .user-avatar-link, - .milestone-icon { - margin-top: $gl-padding-8; - transform: rotate(90deg); - } - - .board-title-text { - flex-grow: 0; - margin: $gl-padding-8 0; - - .board-title-main-text { - display: block; - } - - .board-title-sub-text { - display: none; - } - } - - .issue-count-badge { - border: 0; - white-space: nowrap; - padding: 0; - } - .board-title-text > span, .issue-count-badge > span { height: 16px; @@ -197,10 +165,7 @@ } .board-title { - align-items: center; - font-size: 1em; border-bottom: 1px solid var(--gray-100, $gray-100); - padding: 0 $gl-spacing-scale-3; height: 3rem; .js-max-issue-size::before { @@ -208,21 +173,6 @@ } } -.board-title-text { - flex-grow: 1; -} - -.board-delete.gl-button { - background-color: transparent; - outline: 0; - - &:hover { - color: var(--blue-600, $blue-600); - box-shadow: none; - } -} - -.board-blank-state, .board-promotion-state { background-color: var(--white, $white); flex: 1; @@ -230,19 +180,6 @@ overflow-x: hidden; } -.board-blank-state-list { - > li:not(:last-child) { - margin-bottom: 8px; - } - - .label-color { - top: 2px; - width: 16px; - height: 16px; - margin-right: 3px; - } -} - .board-list-component { min-height: 0; // firefox fix } @@ -311,10 +248,6 @@ } } -.board-card-header { - text-align: initial; -} - .board-card-assignee { margin-top: -$gl-padding-4; margin-bottom: -$gl-padding-4; @@ -586,28 +519,6 @@ } } -.board-swimlanes { - overflow-x: auto; -} - .board-header-collapsed-info-icon:hover { color: var(--gray-900, $gray-900); } - -$epic-icons-spacing: 40px; - -.board-epic-lane { - max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing}); - - .page-with-icon-sidebar & { - max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing}); - } - - .page-with-icon-sidebar .is-compact & { - max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing}); - } - - .is-compact & { - max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing}); - } -} diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/page_bundles/build.scss index d7b4db3840e..2f0f4a46658 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -1,45 +1,4 @@ -@keyframes fade-out-status { - 0%, - 50% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@keyframes blinking-dot { - 0% { - opacity: 1; - } - - 25% { - opacity: 0.4; - } - - 75% { - opacity: 0.4; - } - - 100% { - opacity: 1; - } -} - -@keyframes blinking-scroll-button { - 0% { - opacity: 0.2; - } - - 50% { - opacity: 1; - } - - 100% { - opacity: 0.2; - } -} +@import 'mixins_and_variables_and_functions'; .build-page { .build-trace { @@ -325,25 +284,11 @@ } } -.build-light-text { - color: $gl-text-color-secondary; - word-wrap: break-word; -} - -.build-gutter-toggle { - position: absolute; - top: 50%; - right: 0; - margin-top: -17px; -} - -@include media-breakpoint-down(sm) { - .top-bar { - .truncated-info { - white-space: nowrap; - overflow: hidden; - max-width: 220px; - text-overflow: ellipsis; +@include media-breakpoint-down(md) { + .content-list { + &.builds-content-list { + width: 100%; + overflow: auto; } } } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss index b37c5172ad2..8522a0a8fe4 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/page_bundles/ci_status.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .ci-status { padding: 2px 7px 4px; border: 1px solid $gray-darker; diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 71e74297ee8..15cc10d1532 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -5,7 +5,9 @@ @import './ide_theme_overrides'; @import './ide_themes/dark'; +@import './ide_themes/solarized-light'; @import './ide_themes/solarized-dark'; +@import './ide_themes/monokai'; $search-list-icon-width: 18px; $ide-activity-bar-width: 60px; @@ -176,11 +178,11 @@ $ide-commit-header-height: 48px; height: 100%; overflow: auto; padding: $gl-padding; - background-color: var(--ide-border-color, transparent); + background-color: var(--ide-empty-state-background, transparent); } .file-container { - background-color: var(--ide-border-color, $gray-darker); + background-color: var(--ide-empty-state-background, $gray-darker); display: flex; height: 100%; align-items: center; @@ -491,7 +493,7 @@ $ide-commit-header-height: 48px; height: 100vh; align-items: center; justify-content: center; - background-color: var(--ide-border-color, transparent); + background-color: var(--ide-empty-state-background, transparent); } .ide { @@ -915,12 +917,6 @@ $ide-commit-header-height: 48px; } } -.ide-pipeline-list { - flex: 1; - overflow: auto; - padding: 0 $gl-padding; -} - .ide-pipeline-header { min-height: 55px; padding-left: $gl-padding; diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss index 41f9a8e6db7..c7aae77c412 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss @@ -12,6 +12,7 @@ --ide-highlight-background: #252526; --ide-link-color: #428fdc; --ide-footer-background: #060606; + --ide-empty-state-background: var(--ide-border-color); --ide-input-border: #868686; --ide-input-background: transparent; @@ -35,6 +36,13 @@ --ide-btn-success-hover-border-width: 2px; --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160; + // Danger styles should be the same as default styles in dark theme + --ide-btn-danger-secondary-background: var(--ide-btn-default-background); + --ide-btn-danger-secondary-border: var(--ide-btn-default-border); + --ide-btn-danger-secondary-hover-border: var(--ide-btn-default-hover-border); + --ide-btn-danger-secondary-hover-border-width: var(--ide-btn-default-hover-border-width); + --ide-btn-danger-secondary-focus-box-shadow: var(--ide-btn-default-focus-box-shadow); + --ide-btn-disabled-background: transparent; --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24); diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_monokai.scss b/app/assets/stylesheets/page_bundles/ide_themes/_monokai.scss new file mode 100644 index 00000000000..f53ace0b6c2 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/_monokai.scss @@ -0,0 +1,66 @@ +// ------- +// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes +// ------- +.ide.theme-monokai { + --ide-border-color: #1a1a18; + --ide-border-color-alt: #3f4237; + --ide-highlight-accent: #fff; + --ide-text-color: #ccc; + --ide-text-color-secondary: #b7b7b7; + --ide-background: #282822; + --ide-background-hover: #2d2d2d; + --ide-highlight-background: #1f1f1d; + --ide-link-color: #428fdc; + --ide-footer-background: #404338; + --ide-empty-state-background: #1a1a18; + + --ide-input-border: #7d8175; + --ide-input-background: transparent; + --ide-input-color: #fff; + + --ide-btn-default-background: transparent; + --ide-btn-default-border: #7d8175; + --ide-btn-default-hover-border: #b5bda5; + --ide-btn-default-hover-border-width: 2px; + --ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf; + + --ide-btn-primary-background: #1068bf; + --ide-btn-primary-border: #428fdc; + --ide-btn-primary-hover-border: #63a6e9; + --ide-btn-primary-hover-border-width: 2px; + --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9; + + --ide-btn-success-background: #217645; + --ide-btn-success-border: #108548; + --ide-btn-success-hover-border: #2da160; + --ide-btn-success-hover-border-width: 2px; + --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160; + + // Danger styles should be the same as default styles in dark theme + --ide-btn-danger-secondary-background: var(--ide-btn-default-background); + --ide-btn-danger-secondary-border: var(--ide-btn-default-border); + --ide-btn-danger-secondary-hover-border: var(--ide-btn-default-hover-border); + --ide-btn-danger-secondary-hover-border-width: var(--ide-btn-default-hover-border-width); + --ide-btn-danger-secondary-focus-box-shadow: var(--ide-btn-default-focus-box-shadow); + + --ide-btn-disabled-background: transparent; + --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border-width: 1px; + --ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent; + --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); + + --ide-dropdown-background: #36382f; + --ide-dropdown-hover-background: #404338; + + --ide-dropdown-btn-hover-border: #b5bda5; + --ide-dropdown-btn-hover-background: #3f4237; + + --ide-file-row-btn-hover-background: #404338; + + --ide-diff-insert: rgba(155, 185, 85, 0.2); + --ide-diff-remove: rgba(255, 0, 0, 0.2); + + --ide-animation-gradient-1: #404338; + --ide-animation-gradient-2: #36382f; +} diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss index ccb6f7a333b..1906b3ca938 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss @@ -12,6 +12,7 @@ --ide-highlight-background: #003240; --ide-link-color: #73b9ff; --ide-footer-background: var(--ide-highlight-background); + --ide-empty-state-background: var(--ide-border-color); --ide-input-border: #d8d8d8; --ide-input-background: transparent; @@ -35,6 +36,13 @@ --ide-btn-success-hover-border-width: 2px; --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160; + // Danger styles should be the same as default styles in dark theme + --ide-btn-danger-secondary-background: var(--ide-btn-default-background); + --ide-btn-danger-secondary-border: var(--ide-btn-default-border); + --ide-btn-danger-secondary-hover-border: var(--ide-btn-default-hover-border); + --ide-btn-danger-secondary-hover-border-width: var(--ide-btn-default-hover-border-width); + --ide-btn-danger-secondary-focus-box-shadow: var(--ide-btn-default-focus-box-shadow); + --ide-btn-disabled-background: transparent; --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24); diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss new file mode 100644 index 00000000000..315a0ae6202 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss @@ -0,0 +1,57 @@ +// ------- +// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes +// ------- +.ide.theme-solarized-light { + --ide-border-color: #dfd7bf; + --ide-border-color-alt: #dfd7bf; + --ide-highlight-accent: #5c4e21; + --ide-text-color: #616161; + --ide-text-color-secondary: #526f76; + --ide-background: #efe8d3; + --ide-background-hover: #ded6be; + --ide-highlight-background: #fef6e1; + --ide-link-color: #955800; + --ide-footer-background: #efe8d3; + --ide-empty-state-background: #fef6e1; + + --ide-input-border: #c0b9a4; + --ide-input-background: transparent; + + --ide-btn-default-background: transparent; + --ide-btn-default-border: #c0b9a4; + --ide-btn-default-hover-border: #c0b9a4; + + --ide-btn-primary-background: #b16802; + --ide-btn-primary-border: #a35f00; + --ide-btn-primary-hover-border: #955800; + --ide-btn-primary-hover-border-width: 2px; + --ide-btn-primary-focus-box-shadow: 0 0 0 1px #dd8101; + + --ide-btn-danger-secondary-background: transparent; + + --ide-btn-disabled-background: transparent; + --ide-btn-disabled-border: rgba(192, 185, 64, 0.48); + --ide-btn-disabled-hover-border: rgba(192, 185, 64, 0.48); + --ide-btn-disabled-hover-border-width: 1px; + --ide-btn-disabled-focus-box-shadow: transparent; + --ide-btn-disabled-color: rgba(82, 82, 82, 0.48); + + --ide-dropdown-background: #fef6e1; + --ide-dropdown-hover-background: #efe8d3; + + --ide-dropdown-btn-hover-border: #dfd7bf; + --ide-dropdown-btn-hover-background: #efe8d3; + + --ide-file-row-btn-hover-background: #ded6be; + + --ide-animation-gradient-1: #d3cbb3; + --ide-animation-gradient-2: #efe8d3; + + .ide-empty-state, + .ide-sidebar, + .ide-commit-empty-state { + img { + filter: sepia(1) brightness(0.7); + } + } +} diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index b8cdd120e04..c3e49da92a6 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -1,4 +1,6 @@ -@import 'framework/variables'; +@import 'mixins_and_variables_and_functions'; +// We should only import styles that we actually use. +// @import '@gitlab/ui/src/scss/gitlab_ui'; $atlaskit-border-color: #dfe1e6; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 5553dffac05..be74503c21f 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -11,9 +11,19 @@ } .diff-tree-list { + // This 11px value should match the additional value found in + // /assets/stylesheets/framework/diffs.scss + // for the $mr-file-header-top SCSS variable within the + // .file-title, + // .file-title-flex-parent { + // rule. + // If they don't match, the file tree and the diff files stick + // to the top at different heights, which is a bad-looking defect + $diff-file-header-top: 11px; + $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + $diff-file-header-top; + position: -webkit-sticky; position: sticky; - $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px; top: $top-pos; max-height: calc(100vh - #{$top-pos}); z-index: 202; diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index 8e7be629481..1de66aa73da 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -482,3 +482,7 @@ @include build-trace(); } } + +.progress-bar.bg-primary { + background-color: $blue-500 !important; +} diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss index 81716991a36..412971253ca 100644 --- a/app/assets/stylesheets/pages/pipeline_schedules.scss +++ b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .pipeline-schedule-form { .gl-field-error { margin: 10px 0 0; @@ -32,11 +34,11 @@ } .next-run-cell { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); } a { - color: $text-color; + color: var(--gl-text-color, $gl-text-color); } svg { @@ -46,13 +48,9 @@ .pipeline-schedules-user-callout { .bordered-box.content-block { - border: 1px solid $border-color; + border: 1px solid var(--border-color, $border-color); background-color: transparent; - padding: 16px; - } - - #dismiss-callout-btn { - color: $gl-text-color; + padding: $gl-spacing-scale-5; } } diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index 6ff07017d2e..e0e56893afc 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -5,6 +5,10 @@ * Pipelines Bundle: Pipeline lists and Mini Pipelines */ +.pipelines-container .top-area .nav-controls > .btn:last-child { + float: none; +} + // Pipelines list // Should affect pipelines table components rendered by: // - app/assets/javascripts/commit/pipelines/pipelines_bundle.js diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss index 5a9dd454970..18ca5f9a3a9 100644 --- a/app/assets/stylesheets/page_bundles/reports.scss +++ b/app/assets/stylesheets/page_bundles/reports.scss @@ -8,14 +8,14 @@ .report-block-list-issue-parent { padding: $gl-padding-top $gl-padding; - border-top: 1px solid $border-color; + border-top: 1px solid var(--border-color, $border-color); } } .report-block-container { - border-top: 1px solid $border-color; + border-top: 1px solid var(--border-color, $border-color); padding: $gl-padding - 2; - background-color: $gray-light; + background-color: var(--gray-50, $gray-10); // Clean MR widget CSS line-height: 20px; diff --git a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss b/app/assets/stylesheets/page_bundles/signup.scss index 337b5b001fe..9ed48b693b9 100644 --- a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss +++ b/app/assets/stylesheets/page_bundles/signup.scss @@ -1,27 +1,6 @@ @import 'mixins_and_variables_and_functions'; .signup-page { - .page-wrap { - background-color: var(--gray-10, $gray-10); - } - - .signup-box-container { - max-width: 960px; - } - - .signup-box { - background-color: var(--white, $white); - box-shadow: 0 0 0 1px var(--border-color, $border-color); - border-radius: $border-radius; - } - - .form-control { - &:active, - &:focus { - background-color: var(--white, $white); - } - } - .devise-errors { h2 { font-size: $gl-font-size; diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss index 3eec5b53a30..3e20ca9c62f 100644 --- a/app/assets/stylesheets/page_bundles/todos.scss +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -219,7 +219,6 @@ .todos-empty-content { align-self: center; max-width: 480px; - margin-right: 20px; } .todos-empty-hero { diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss index f0acb78f731..af1eefd7587 100644 --- a/app/assets/stylesheets/pages/admin.scss +++ b/app/assets/stylesheets/pages/admin.scss @@ -8,3 +8,11 @@ .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 c55bfeb7b15..17474b95e50 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -14,12 +14,6 @@ @extend %commit-description-base; } -.js-details-expand { - &:hover { - text-decoration: none; - } -} - .commit-box { border-top: 1px solid $border-color; padding: $gl-padding 0; @@ -30,17 +24,6 @@ } } -.commit-hash-full { - @include media-breakpoint-down(sm) { - width: 80px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - } -} - .pipeline-info { .status-icon-container { display: inline-block; @@ -225,9 +208,9 @@ display: inline-flex; .label, - .btn { + .btn:not(.gl-button) { padding: $gl-vert-padding $gl-btn-padding; - border: 1px $border-color solid; + border: 1px $gray-200 solid; font-size: $gl-font-size; line-height: $line-height-base; border-radius: 0; diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 9f9964ac447..5c845c37e90 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -8,18 +8,18 @@ background: $gray-normal; } - #editor { - border: 0; - border-radius: 0; + #editor, + .editor { + @include gl-border-0; + @include gl-m-0; + @include gl-p-0; + @include gl-relative; + @include gl-w-full; height: 500px; - margin: 0; - padding: 0; - position: relative; - width: 100%; .editor-loading-content { - height: 100%; - border: 0; + @include gl-h-full; + @include gl-border-0; } } diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index ee4f74882a1..e73b6b18afd 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -43,12 +43,6 @@ } } -.ldap-group-links { - .form-actions { - margin-bottom: $gl-padding; - } -} - .save-group-loader { margin-top: $gl-padding-50; margin-bottom: $gl-padding-50; @@ -343,11 +337,11 @@ table.pipeline-project-metrics tr td { } .user-access-role { + @include gl-px-3; display: inline-block; color: $gl-text-color-secondary; font-size: 12px; line-height: 20px; - padding: 0 $label-padding; border: 1px solid $border-color; border-radius: $label-border-radius; font-weight: $gl-font-weight-normal; diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss index c0a1fa72b1f..ba363e2d119 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/pages/incident_management_list.scss @@ -8,13 +8,12 @@ @include gl-text-gray-500; tbody { - tr:not(.b-table-busy-slot) { - // TODO replace with gitlab/ui utilities: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1791 + tr:not(.b-table-busy-slot):not(.b-table-empty-row) { &:hover { - border-top-style: double; + @include gl-border-t-double; td { - border-bottom-style: initial; + @include gl-border-b-initial; } } } @@ -22,7 +21,7 @@ tr { &:focus { - outline: none; + @include gl-outline-none; } td, @@ -118,26 +117,34 @@ } .gl-tabs-nav { - border-bottom-width: 0; + @include gl-border-b-0; .gl-tab-nav-item { - color: $gray-500; + @include gl-text-gray-500; > .gl-tab-counter-badge { - color: inherit; + @include gl-reset-color; @include gl-font-sm; - background-color: $gray-50; + @include gl-bg-gray-50; } } } @include media-breakpoint-down(xs) { .list-header { - flex-direction: column-reverse; + @include gl-flex-direction-column-reverse; } .create-incident-button { @include gl-w-full; } } + + .integration-list { + .b-table-empty-row { + td { + @include gl-px-0; + } + } + } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 7097c2b10c4..cc4827f75d4 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,16 +1,12 @@ .issuable-warning-icon { background-color: $orange-50; border-radius: $border-radius-default; + color: $orange-600; width: $issuable-warning-size; height: $issuable-warning-size; text-align: center; margin-right: $issuable-warning-icon-margin; line-height: $gl-line-height-24; - - .icon { - fill: $orange-600; - vertical-align: text-bottom; - } } .limit-container-width { @@ -77,14 +73,6 @@ } } -.issuable-filter-count { - span { - display: block; - margin-bottom: -16px; - padding: 13px 0; - } -} - .issuable-show-labels { .gl-label { margin-bottom: 5px; @@ -662,12 +650,6 @@ } } -.issuable-form-padding-top { - @include media-breakpoint-up(sm) { - padding-top: 7px; - } -} - .issuable-status-box { align-self: stretch; display: flex; @@ -822,11 +804,7 @@ } } -.time_tracker { - padding-bottom: 0; - border-bottom: 0; - - +.time-tracker { .sidebar-collapsed-icon { > .stopwatch-svg { display: inline-block; @@ -939,6 +917,25 @@ } } +/* + * Following overrides are done to prevent + * legacy dropdown styles from influencing + * GitLab UI components used within GlDropdown + */ +.issuable-move-dropdown { + .b-dropdown-form { + @include gl-p-0; + } + + .gl-search-box-by-type button.gl-clear-icon-button:hover { + @include gl-bg-transparent; + } + + .issuable-move-button:not(.disabled):hover { + @include gl-text-white; + } +} + .right-sidebar-collapsed { .sidebar-grouped-item { .sidebar-collapsed-icon { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index d2eb00c4a4d..08faebc8ec0 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -67,7 +67,6 @@ ul.related-merge-requests > li { } } -.merge-request-ci-status, .related-merge-requests { .ci-status-link { display: block; @@ -93,11 +92,6 @@ ul.related-merge-requests > li { } } -.issues-footer { - padding-top: $gl-padding; - padding-bottom: 37px; -} - .issues-nav-controls, .new-branch-col { font-size: 0; @@ -194,6 +188,12 @@ ul.related-merge-requests > li { border-width: 1px; line-height: $line-height-base; width: auto; + + &.disabled { + background-color: $gray-light; + border-color: $gray-100; + color: $gl-text-color-disabled; + } } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 31606cb3ba5..4d93702f1c2 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -92,13 +92,8 @@ margin-bottom: 0; } - &.sortable-ghost { - opacity: 0.3; - } - .prioritized-labels:not(.is-not-draggable) & { box-shadow: 0 1px 2px $issue-boards-card-shadow; - cursor: move; cursor: grab; border: 0; @@ -108,126 +103,20 @@ } } - .btn-action { - .fa { - font-size: 18px; - vertical-align: middle; - pointer-events: none; - } - - &:hover { - color: $blue-600; - - &.remove-row { - color: $red-500; - } - } - } - - .color-label { - padding: $gl-padding-4 $grid-size; - } - .prepend-description-left { vertical-align: top; line-height: 24px; } } -.prioritized-labels { - margin-bottom: 30px; - - .add-priority { - display: none; - color: $gray-light; - } - - li:hover { - .draggable-handler { - display: inline-block; - opacity: 1; - } - } -} - -.other-labels { - .remove-priority { - display: none; - } -} - -.filtered-labels { - font-size: 0; - padding: 12px 16px; - - .label-row { - margin-top: 4px; - margin-bottom: 4px; - - &:not(:last-child) { - margin-right: 8px; - } - } - - .label-remove { - border-left: 1px solid $label-remove-border; - z-index: 3; - border-radius: $label-border-radius; - padding: 6px 10px 6px 9px; - - &:hover { - box-shadow: inset 0 0 0 80px $label-remove-border; - } - } - - .btn { - color: inherit; - } - - a.btn { - padding: 0; - - .has-tooltip { - top: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - line-height: 1.1; - } - } -} - -.label-subscription { - vertical-align: middle; - - .dropdown-group-label a { - cursor: pointer; - } +.prioritized-labels .add-priority, +.other-labels .remove-priority { + display: none; } .label-subscribe-button { width: 105px; font-weight: 200; - - .label-subscribe-button-icon { - &[disabled] { - opacity: 0.5; - pointer-events: none; - } - } - - .label-subscribe-button-loading { - display: none; - } - - &.disabled { - .label-subscribe-button-icon { - display: none; - } - - .label-subscribe-button-loading { - display: block; - } - } } .labels-container { @@ -255,11 +144,6 @@ } .label-list-item { - .content-list &::before, - .content-list &::after { - content: none; - } - .label-name { width: 200px; @@ -268,37 +152,16 @@ } } - .label { - padding: 4px $grid-size; - font-size: $label-font-size; - position: relative; - top: $gl-padding-4; - } - .label-action { color: $gray-700; cursor: pointer; - svg { - fill: $gray-700; - } - &:hover { color: $blue-600; - - svg { - fill: $blue-600; - } } - &.remove-row { - &:hover { - color: $red-500; - - svg { - fill: $red-500; - } - } + &.remove-row:hover { + color: $red-500; } } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 922f95ff5df..a8b489f1273 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -225,9 +225,14 @@ } .col-actions { - width: px-to-rem(50px); + width: px-to-rem(65px); } } + + .gl-datepicker-input { + width: px-to-rem(165px); + max-width: 100%; + } } .card-mobile { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 6f71177e870..a0ac55e4c6c 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -463,8 +463,7 @@ $mr-widget-min-height: 69px; .mr-list { .merge-request { - padding: 10px 0 10px 15px; - position: relative; + padding: 10px $gl-padding; display: flex; .issuable-info-container { @@ -737,14 +736,6 @@ $mr-widget-min-height: 69px; border-bottom: 0; } - .comments-disabled-notif { - line-height: 28px; - - .btn { - margin-left: 5px; - } - } - .mr-version-dropdown, .mr-version-compare-dropdown { margin: 0 7px; @@ -1048,9 +1039,3 @@ $mr-widget-min-height: 69px; .diff-file-row.is-active { background-color: $gray-50; } - -.merge-request-container { - .flash-container { - @include gl-mb-4; - } -} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 8b3d3268a8c..0c24ea9ccc6 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -2,6 +2,7 @@ * Note Form */ .diff-file .diff-content { + .diff-tr.line_holder:hover > .diff-td .line_note_link, tr.line_holder:hover > td .line_note_link { opacity: 1; filter: alpha(opacity = 100); @@ -226,10 +227,6 @@ table { display: none; } -.parallel-comment { - padding: 6px; -} - .error-alert > .alert { margin-top: 5px; margin-bottom: 5px; @@ -311,31 +308,12 @@ table { } } -.discussion-notes-count { - font-size: 16px; -} - -.edit_note { - .markdown-area { - min-height: 140px; - max-height: 500px; - } - - .note-form-actions { - background: transparent; - } -} - .comment-toolbar { padding-top: $gl-padding-top; color: $gl-text-color-secondary; border-top: 1px solid $border-color; } -.md-helper { - padding-top: 10px; -} - .toolbar-button { padding: 0; background: none; @@ -473,31 +451,6 @@ table { margin-right: 5px; } -.attach-new-file, -.button-attach-file, -.retry-uploading-link { - color: $blue-600; - padding: 0; - background: none; - border: 0; - font-size: 14px; - line-height: 16px; - vertical-align: initial; - - &:hover, - &:focus { - text-decoration: none; - - .text-attach-file { - text-decoration: underline; - } - } - - .gl-icon:not(:last-child) { - margin-right: 0; - } -} - .markdown-selector { color: $blue-600; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index b510822a20a..e23ec25a2f3 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -453,6 +453,8 @@ $note-form-margin-left: 72px; } .diff-file { + .diff-grid-left:hover, + .diff-grid-right:hover, .is-over { .add-diff-note { display: inline-flex; @@ -490,6 +492,7 @@ $note-form-margin-left: 72px; .notes_holder { font-family: $regular-font; + .diff-td, td { border: 1px solid $border-color; border-left: 0; @@ -798,21 +801,15 @@ $note-form-margin-left: 72px; } .note-role { - margin: 0 3px; -} - -.note-role-special { - position: relative; - display: inline-block; - color: $gl-text-color-secondary; - font-size: 12px; - text-shadow: 0 0 15px $gl-text-color-inverted; + margin: 0 8px; } /** * Line note button on the side of diffs */ +.diff-grid-left:hover, +.diff-grid-right:hover, .line_holder .is-over:not(.no-comment-btn) { .add-diff-note { opacity: 1; @@ -895,6 +892,15 @@ $note-form-margin-left: 72px; outline: 0; transition: color $general-hover-transition-duration $general-hover-transition-curve; + &[disabled] { + padding: 0 8px !important; + box-shadow: none !important; + + .gl-button-loading-indicator { + margin-right: 0 !important; + } + } + &.is-disabled { cursor: default; } @@ -902,16 +908,22 @@ $note-form-margin-left: 72px; &:not(.is-disabled) { &:hover, &:focus { - color: $green-600; + svg { + color: $green-600; + } } } &.is-active { - color: $green-600; + svg { + @include gl-text-green-500; + } &:hover, &:focus { - color: $green-700; + svg { + color: $green-700; + } } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 2df43b861b2..b37aa6cd285 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,11 +1,17 @@ -@include media-breakpoint-down(md) { - .content-list { - &.builds-content-list { - width: 100%; - overflow: auto; - } - } -} +/** + * !! NOTE: Do not add more code in this file: + * + * https://gitlab.com/gitlab-org/gitlab/-/issues/267602 + * + * For new pipeline CSS please consider: + * + * For pipelines tables and lists: + * - `app/assets/stylesheets/page_bundles/pipelines.scss` + * + * For individual pipelines and mini-pipelines: + * - `app/assets/stylesheets/page_bundles/pipeline.scss` + * +**/ .ci-table { .avatar { @@ -81,38 +87,13 @@ } } -[data-page='admin:jobs:index'] { - .admin-builds-table { - td:last-child { - min-width: 120px; +@include media-breakpoint-down(sm) { + .top-bar { + .truncated-info { + white-space: nowrap; + overflow: hidden; + max-width: 220px; + text-overflow: ellipsis; } } } - -.pipelines-container .top-area .nav-controls > .btn:last-child { - float: none; -} - -.progress-bar.bg-primary { - background-color: $blue-500 !important; -} - -.pipeline-stage-pill { - width: 10rem; -} - -.pipeline-job-pill { - width: 8rem; -} - -.stage-rounded { - border-radius: 2rem; -} - -.stage-left-rounded { - border-radius: 2rem 0 0 2rem; -} - -.stage-right-rounded { - border-radius: 0 2rem 2rem 0; -} diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 938d8d34717..09501d3713d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -252,15 +252,6 @@ } } -.split-one { - display: inline-table; - margin-right: 12px; - - > a { - margin: -1px; - } -} - .save-project-loader { margin-top: 50px; margin-bottom: 50px; @@ -505,92 +496,6 @@ } } -.create-project-options { - display: flex; - - @include media-breakpoint-down(xs) { - display: block; - } - - .first-column { - @include media-breakpoint-up(xs) { - max-width: 50%; - padding-right: 30px; - } - - @include media-breakpoint-down(xs) { - max-width: 100%; - width: 100%; - } - } - - .second-column { - @include media-breakpoint-up(xs) { - width: 50%; - flex: 1; - padding-left: 30px; - position: relative; - } - - @include media-breakpoint-down(xs) { - max-width: 100%; - width: 100%; - padding-left: 0; - position: relative; - } - - // Mobile - @include media-breakpoint-down(xs) { - padding-top: 30px; - } - - &::before { - content: 'OR'; - position: absolute; - left: -10px; - top: 50%; - z-index: 10; - padding: $gl-padding-8 0; - text-align: center; - background-color: $white; - color: $gl-text-color-tertiary; - transform: translateY(-50%); - font-size: 12px; - font-weight: $gl-font-weight-bold; - line-height: 20px; - - // Mobile - @include media-breakpoint-down(xs) { - left: 50%; - top: 0; - transform: translateX(-50%); - padding: 0 $gl-padding-8; - } - } - - &::after { - content: ''; - position: absolute; - background-color: $border-color; - bottom: 0; - left: 0; - right: auto; - height: 100%; - width: 1px; - top: 0; - - // Mobile - @include media-breakpoint-down(xs) { - top: 10px; - left: 10px; - right: 10px; - height: 1px; - width: auto; - } - } - } -} - .project-stats, .project-buttons { .scrolling-tabs-container { @@ -754,17 +659,6 @@ pre.light-well { } } -.project-footer { - margin-top: 20px; - - .btn-remove { - @include btn-middle; - @include btn-red; - - float: left !important; - } -} - /* * Projects list rendered on dashboard and user page */ @@ -1059,24 +953,6 @@ pre.light-well { } } -.cannot-be-merged, -.cannot-be-merged:hover { - color: $red-500; - margin-top: 2px; - position: relative; - z-index: 2; -} - -.private-forks-notice .private-fork-icon { - i:nth-child(1) { - color: $green-600; - } - - i:nth-child(2) { - color: $white; - } -} - .new-protected-branch, .new-protected-tag { label { @@ -1117,23 +993,6 @@ pre.light-well { } } -.custom-notifications-form { - .is-loading { - .custom-notification-event-loading { - display: inline-block; - } - } -} - -.custom-notification-event-loading { - display: none; - margin-left: 5px; - - &.is-done { - color: $green-600; - } -} - .project-refs-form .dropdown-menu, .dropdown-menu-projects { width: 300px; @@ -1233,34 +1092,6 @@ pre.light-well { } } -.variables-table { - table-layout: fixed; - - &.table-responsive { - border: 0; - } - - .variable-key { - max-width: 120px; - overflow: hidden; - word-wrap: break-word; - white-space: nowrap; - text-overflow: ellipsis; - } - - .variable-value { - max-width: 150px; - overflow: hidden; - word-wrap: break-word; - white-space: nowrap; - text-overflow: ellipsis; - } - - .variable-menu { - text-align: right; - } -} - .services-installation-info .row { margin-bottom: 10px; } @@ -1286,18 +1117,6 @@ pre.light-well { padding-bottom: 37px; } -.project-ci-body { - .incorrect-syntax { - font-size: 18px; - color: $red-500; - } - - .correct-syntax { - font-size: 18px; - color: $green-500; - } -} - .project-ci-linter { .ci-editor { height: 400px; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index a62e28a9b8a..502a1881fd2 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -270,7 +270,8 @@ input[type='checkbox']:hover { width: 100%; } - .dropdown-menu-toggle { + .dropdown-menu-toggle, + .gl-new-dropdown { @include media-breakpoint-up(lg) { width: 240px; } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 73fe76f139f..429181c2ad4 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -62,7 +62,7 @@ .tree-controls { margin-bottom: 10px; - .btn, + .btn:not(.dropdown-toggle-split), .dropdown, .btn-group { width: 100%; diff --git a/app/assets/stylesheets/pages/users.scss b/app/assets/stylesheets/pages/users.scss index 0863b573f75..917d16a9c53 100644 --- a/app/assets/stylesheets/pages/users.scss +++ b/app/assets/stylesheets/pages/users.scss @@ -51,43 +51,6 @@ outline: 0; } -.flex-users-panel { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - @include media-breakpoint-down(sm) { - display: block; - - .flex-project-title { - vertical-align: top; - display: inline-block; - max-width: 90%; - } - } - - .flex-project-title { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .badge.badge-pill { - height: 17px; - line-height: 16px; - margin-right: 5px; - padding-top: 1px; - padding-bottom: 1px; - } - - .flex-users-form { - flex-wrap: nowrap; - white-space: nowrap; - margin-left: auto; - } -} - .content-list.members-list li { display: flex; justify-content: space-between; diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index dc127cd2554..c6c9f3b7365 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -6,7 +6,7 @@ left: 0; top: 0; width: 100%; - z-index: #{$zindex-modal-backdrop + 1}; + z-index: #{$zindex-modal-backdrop - 1}; height: $performance-bar-height; background: $black; diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index 9ed1600419d..7b66b61ff36 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -31,7 +31,7 @@ nav.navbar-collapse.collapse, .nav, .btn, ul.notes-form, -.merge-request-ci-status .ci-status-link::after, +.ci-status-link::after, .issuable-gutter-toggle, .gutter-toggle, .issuable-details .content-block-small, diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 66cc4452858..6ab02bd5e27 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -201,6 +201,15 @@ $line-removed-dark: $red-200; // Misc component overrides that should live elsewhere .gl-label { filter: brightness(0.9) contrast(1.1); + + // This applies to the gl-label markups + // rendered and cached in the backend (labels_helper.rb) + &.gl-label-scoped { + .gl-label-text-scoped, + .gl-label-close { + color: $gray-900; + } + } } // white-ish text for light labels @@ -210,6 +219,15 @@ $line-removed-dark: $red-200; color: $gray-900; } +// This applies to "gl-labels" from "gitlab-ui" +.gl-label.gl-label-scoped.gl-label-text-dark, +.gl-label.gl-label-scoped.gl-label-text-light { + .gl-label-text-scoped, + .gl-label-close { + color: $gray-900; + } +} + // duplicated class as the original .atwho-view style is added later .atwho-view.atwho-view { background-color: $white; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index e236c264f5c..a3bb7c868df 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -122,3 +122,10 @@ margin-left: $gl-spacing-scale-3; } } + +// This is used to help prevent issues with margin collapsing. +// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing. +.gl-force-block-formatting-context::after { + content: ''; + display: flex; +} |