diff options
Diffstat (limited to 'app/assets/stylesheets')
57 files changed, 811 insertions, 669 deletions
diff --git a/app/assets/stylesheets/bootstrap_migration_components.scss b/app/assets/stylesheets/bootstrap_migration_components.scss index b6cecbe5806..676e69707c7 100644 --- a/app/assets/stylesheets/bootstrap_migration_components.scss +++ b/app/assets/stylesheets/bootstrap_migration_components.scss @@ -26,7 +26,7 @@ input[type='file'] { line-height: 1; } -.form-group.row .col-form-label { +.form-group.row > .col-form-label { // Bootstrap 4 aligns labels to the left // for horizontal forms @include media-breakpoint-up(md) { @@ -118,7 +118,14 @@ input[type='file'] { margin-bottom: 16px; .well-segment { - padding: 16px; + padding: 1rem; + + &.pipeline-info { + align-items: center; + display: flex; + flex-wrap: wrap; + gap: 0.25rem; + } &:not(:last-of-type) { border-bottom: 1px solid $well-inner-border; diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index 7f498b79d33..870ed50c6eb 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -13,6 +13,11 @@ } } + img.ProseMirror-selectednode { + outline: 3px solid rgba($blue-400, 0.48); + outline-offset: -3px; + } + ul[data-type='taskList'] { list-style: none; padding: 0; @@ -121,3 +126,7 @@ border: 1px solid $black-transparent; background-color: var(--gl-color-chip-color); } + +.bubble-menu-form { + width: 320px; +} diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss index 09ba89c0782..1dcaa47470b 100644 --- a/app/assets/stylesheets/components/dashboard_skeleton.scss +++ b/app/assets/stylesheets/components/dashboard_skeleton.scss @@ -48,8 +48,7 @@ } } - &-header, - &-footer { + &-header { &-failed { background-color: $red-100; } diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index a9be1d89495..b8bd1000bfd 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -7,7 +7,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); } .design-detail { - background-color: rgba($black, 0.9); + background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity); .with-performance-bar & { top: 35px; diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 98a7ea5792b..c1c68f64d86 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -47,12 +47,6 @@ margin-top: calc(#{$performance-bar-height} + #{$system-header-height} + #{$header-height}); } -.gl-badge.whats-new-item-badge { - background-color: $purple-light; - color: $purple; - @include gl-font-weight-bold; -} - .whats-new-item-title-link { &:hover, &:focus, diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss index dc08c816d7d..00cc3409fa7 100644 --- a/app/assets/stylesheets/errors.scss +++ b/app/assets/stylesheets/errors.scss @@ -118,3 +118,11 @@ a { } } } + +.tanuki-logo { + width: 210px; + height: 210px; + max-width: 40vw; + display: block; + margin: map-get($spacing-scale, 4) auto; +} diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index 58f986ec0ae..a0bfca79dc3 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -14,11 +14,14 @@ } .broadcast-banner-message { - text-align: center; - p { margin-bottom: 0; } + + a { + color: inherit; + text-decoration: underline; + } } .broadcast-notification-message { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 9cebd4f49a4..33522c66024 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -121,6 +121,10 @@ @include btn-color($white, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-normal, $gl-text-color); } +@mixin btn-purple { + @include btn-color($purple-700, $purple-800, $purple-800, $purple-900, $purple-900, $purple-950, $white); +} + @mixin btn-with-margin { margin-left: $btn-side-margin; float: left; @@ -194,6 +198,10 @@ @include btn-red; } + &.btn-purple { + @include btn-purple; + } + &.btn-grouped { @include btn-with-margin; } @@ -261,7 +269,7 @@ .btn-block { width: 100%; margin: 0; - margin-bottom: 15px; + @include gl-mb-5; &.btn { padding: 6px 0; diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index f0495fdc94e..7a77256398e 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -34,7 +34,7 @@ @media (min-width: map-get($grid-breakpoints, md)) { // The `+11` is to ensure the file header border shows when scrolled - // the bottom of the compare-versions header and the top of the file header - $mr-file-header-top: calc(#{$mr-version-controls-height} + #{$header-height} + #{$mr-tabs-height} + 11px); + $mr-file-header-top: calc(#{$header-height} + #{$mr-tabs-height}); position: -webkit-sticky; position: sticky; @@ -582,25 +582,6 @@ table.code { } } -.diff-expansion-cell { - flex: 1 1; - min-width: max-content; -} - -.diff-expansion-cell-middle { - flex: 0 1 max-content; -} - -@media only screen and (min-width: $breakpoint-xl) { - .diff-expansion-cell-start { - text-align: right; - } - - .diff-expansion-cell-end { - text-align: left; - } -} - // Merge request diff grid layout .diff-grid { .diff-td { @@ -612,6 +593,10 @@ table.code { .diff-grid-row { display: grid; grid-template-columns: 1fr 1fr; + + &.diff-grid-row-full { + grid-template-columns: 1fr; + } } .diff-grid-left, @@ -626,6 +611,14 @@ table.code { grid-template-columns: 50px 1fr !important; } + .diff-grid-2-col { + grid-template-columns: 100px 1fr !important; + + &.parallel { + grid-template-columns: 50px 1fr !important; + } + } + &.inline-diff-view .diff-grid-3-col { grid-template-columns: 50px 50px 1fr !important; } @@ -1209,3 +1202,10 @@ table.code { position: absolute; bottom: 100vh; } + +.diff-line-expand-button { + &:hover, + &:focus { + @include gl-bg-gray-200; + } +} diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index e378fcb6129..f322c6c8929 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -376,14 +376,12 @@ span.idiff { a { color: $gl-text-color; } +} - @include media-breakpoint-down(md) { - .file-actions { - margin-top: $gl-padding-8; - - .btn { - margin-bottom: $gl-padding-8; - } +.blob-content-holder .file-actions { + @include media-breakpoint-down(sm) { + .btn { + margin-bottom: $gl-padding-8; } } } @@ -452,7 +450,6 @@ span.idiff { .note-container { .user-avatar-link.new-comment { position: absolute; - margin: 40px $gl-padding 0 116px; } } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 5dd71cec8d1..37b61d36911 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -49,7 +49,7 @@ margin: 0 0 10px; } - .dropdown-menu-toggle, + .dropdown-menu-toggle.dropdown-menu-toggle, .update-issues-btn .btn { width: 100%; } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 4d0d64ae723..50783433c3d 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -83,7 +83,6 @@ label { margin-right: 0; .form-control { - height: 29px; background: $white; font-family: $monospace-font; } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index f44123fc2ed..f76a0cbbae8 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -10,17 +10,6 @@ right: 0; border-radius: 0; - .logo-text { - line-height: initial; - - svg { - width: 55px; - height: 14px; - margin: 0; - fill: $white; - } - } - .close-icon { display: none; } @@ -33,14 +22,6 @@ min-height: $header-height; padding-left: 0; - .title-container { - display: flex; - align-items: stretch; - flex: 1 1 auto; - padding-top: 0; - overflow: visible; - } - .title { padding-right: 0; color: currentColor; @@ -71,10 +52,14 @@ display: flex; align-items: center; padding: 2px 8px; - margin: 5px 2px 5px -8px; + margin: 4px 2px 4px -12px; border-radius: $border-radius-default; } + .canary-badge { + margin-left: -8px; + } + .project-item-select { right: auto; left: 0; @@ -127,7 +112,7 @@ border-radius: 0; min-width: 45px; padding: 0; - margin: $gl-padding-8 -7px $gl-padding-8 0; + margin: $gl-padding-8 $gl-padding-8 $gl-padding-8 0; font-size: 14px; text-align: center; color: currentColor; @@ -353,6 +338,14 @@ } } + &:last-child { + > a { + font-weight: 600; + line-height: 16px; + color: $gl-text-color; + } + } + > a { font-size: 12px; color: currentColor; @@ -390,17 +383,6 @@ margin-left: auto; } -.breadcrumbs-sub-title { - margin: 0; - font-size: 12px; - font-weight: 600; - line-height: 16px; - - a { - color: $gl-text-color; - } -} - .btn-sign-in { background-color: $indigo-100; color: $indigo-900; diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 0aeb7208c59..ca0240b6a65 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -3,6 +3,17 @@ svg { fill: $green-500; } + + &.interactive { + &:hover { + background: $green-500; + + svg { + --svg-status-bg: #{$green-100}; + box-shadow: 0 0 0 1px $green-500; + } + } + } } .ci-status-icon-error, @@ -10,6 +21,17 @@ svg { fill: $red-500; } + + &.interactive { + &:hover { + background: $red-500; + + svg { + --svg-status-bg: #{$red-100}; + box-shadow: 0 0 0 1px $red-500; + } + } + } } .ci-status-icon-pending, @@ -19,11 +41,33 @@ svg { fill: $orange-500; } + + &.interactive { + &:hover { + background: $orange-500; + + svg { + --svg-status-bg: #{$orange-100}; + box-shadow: 0 0 0 1px $orange-500; + } + } + } } .ci-status-icon-running { svg { - fill: $blue-400; + fill: $blue-500; + } + + &.interactive { + &:hover { + background: $blue-500; + + svg { + --svg-status-bg: #{$blue-100}; + box-shadow: 0 0 0 1px $blue-500; + } + } } } @@ -32,7 +76,18 @@ .ci-status-icon-scheduled, .ci-status-icon-manual { svg { - fill: $gl-text-color; + fill: $gray-900; + } + + &.interactive { + &:hover { + background: $gray-900; + + svg { + --svg-status-bg: #{$gray-100}; + box-shadow: 0 0 0 1px $gray-900; + } + } } } @@ -42,7 +97,18 @@ .ci-status-icon-skipped, .ci-status-icon-notfound { svg { - fill: var(--gray-400, $gray-400); + fill: $gray-500; + } + + &.interactive { + &:hover { + background: $gray-500; + + svg { + --svg-status-bg: #{$gray-100}; + box-shadow: 0 0 0 1px $gray-500; + } + } } } diff --git a/app/assets/stylesheets/framework/logo.scss b/app/assets/stylesheets/framework/logo.scss index c5feefb8c54..1845438eedb 100644 --- a/app/assets/stylesheets/framework/logo.scss +++ b/app/assets/stylesheets/framework/logo.scss @@ -9,19 +9,16 @@ } .tanuki-logo { - .tanuki-left-ear, - .tanuki-right-ear, - .tanuki-nose { + .tanuki { @include tanuki-logo-colors($tanuki-red); } - .tanuki-left-eye, - .tanuki-right-eye { + .left-cheek, + .right-cheek { @include tanuki-logo-colors($tanuki-orange); } - .tanuki-left-cheek, - .tanuki-right-cheek { + .chin { @include tanuki-logo-colors($tanuki-yellow); } @@ -31,98 +28,54 @@ @include webkit-prefix(animation-iteration-count, infinite); } - .tanuki-left-cheek { - @include include-keyframes(animate-tanuki-left-cheek) { + .tanuki { + @include include-keyframes(animate-tanuki-base) { 0%, - 10%, - 100% { - fill: lighten($tanuki-yellow, 25%); - } - - 90% { - fill: $tanuki-yellow; - } - } - } - - .tanuki-left-eye { - @include include-keyframes(animate-tanuki-left-eye) { - 10%, - 80% { - fill: $tanuki-orange; - } - - 20%, - 90% { - fill: lighten($tanuki-orange, 25%); - } - } - } - - .tanuki-left-ear { - @include include-keyframes(animate-tanuki-left-ear) { - 10%, - 80% { + 50% { fill: $tanuki-red; } - 20%, - 90% { + 25% { fill: lighten($tanuki-red, 25%); } } } - .tanuki-nose { - @include include-keyframes(animate-tanuki-nose) { - 20%, - 70% { - fill: $tanuki-red; - } - - 30%, - 80% { - fill: lighten($tanuki-red, 25%); - } - } - } - - .tanuki-right-eye { - @include include-keyframes(animate-tanuki-right-eye) { - 30%, - 60% { + .right-cheek { + @include include-keyframes(animate-tanuki-right-cheek) { + 25%, + 75% { fill: $tanuki-orange; } - 40%, - 70% { + 50% { fill: lighten($tanuki-orange, 25%); } } } - .tanuki-right-ear { - @include include-keyframes(animate-tanuki-right-ear) { - 30%, - 60% { - fill: $tanuki-red; + .chin { + @include include-keyframes(animate-tanuki-chin) { + 50%, + 100% { + fill: $tanuki-yellow; } - 40%, - 70% { - fill: lighten($tanuki-red, 25%); + 75% { + fill: lighten($tanuki-yellow, 25%); } } } - .tanuki-right-cheek { - @include include-keyframes(animate-tanuki-right-cheek) { - 40% { - fill: $tanuki-yellow; + .left-cheek { + @include include-keyframes(animate-tanuki-left-cheek) { + 25%, + 75% { + fill: $tanuki-orange; } - 60% { - fill: lighten($tanuki-yellow, 25%); + 100% { + fill: lighten($tanuki-orange, 25%); } } } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 8cad55f414a..549b61aedae 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -174,6 +174,10 @@ width: 100%; } + .btn.dropdown-toggle-split { + margin-left: 1px; + } + /* This resets the width of the control so that the search button doesn't wrap */ .gl-search-box-by-click .form-control { width: 1%; @@ -368,7 +372,7 @@ .project-item-select-holder.btn-group { .new-project-item-select-button { - max-width: 44px; + max-width: 32px; } } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index d270f802c56..dd9581c4692 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -19,13 +19,23 @@ .right-sidebar-collapsed { padding-right: 0; - @include media-breakpoint-up(sm) { - &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { - padding-right: $gutter-collapsed-width; + &:not(.is-merge-request) { + @include media-breakpoint-up(sm) { + &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { + padding-right: $gutter-collapsed-width; + } + + .merge-request-tabs-holder.affix { + right: $gutter-collapsed-width; + } } + } - .merge-request-tabs-holder.affix { - right: $gutter-collapsed-width; + &.is-merge-request { + @include media-breakpoint-up(md) { + .content-wrapper { + padding-right: $gutter-collapsed-width; + } } } @@ -49,6 +59,18 @@ padding-right: 0; z-index: $zindex-dropdown-menu; + &.right-sidebar-merge-requests { + width: 270px; + + @include media-breakpoint-up(md) { + z-index: auto; + } + + .shortcut-sidebar-dropdown-toggle { + margin-right: 0 !important; + } + } + @include media-breakpoint-only(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { padding-right: $gutter-collapsed-width; @@ -71,12 +93,20 @@ } .right-sidebar { - border-left: 1px solid $border-color; + border-left: 1px solid $gray-100; - .sidebar-container, - .issuable-sidebar { - // Add 100px so that potentially visible vertical scroll bar is hidden - width: calc(100% + 100px); + &.right-sidebar-merge-requests { + @include media-breakpoint-up(md) { + border-left: 0; + } + } + + &:not(.right-sidebar-merge-requests) { + .sidebar-container, + .issuable-sidebar { + // Add 100px so that potentially visible vertical scroll bar is hidden + width: calc(100% + 100px); + } } } @@ -135,7 +165,11 @@ // rest of the sidebar, and could be removed once the sidebar has been fully converted to use // gitlab-ui components. .title .gl-button { - color: $gl-text-color; + font-weight: $gl-font-weight-bold; + + .gl-button { + color: $gl-text-color; + } } } @@ -227,6 +261,10 @@ margin-right: -$gl-spacing-scale-2; } +.issuable-sidebar.is-merge-request .edit-link { + margin-right: 0; +} + .assignee-grid { grid-template-areas: ' attention user'; grid-template-columns: min-content 1fr; diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 6348703e9e1..f39d53c5b1c 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -10,9 +10,6 @@ table { * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570 * * The overwrites here affected the following areas: - * - The security dashboard tables. When removing - * this code, table-th-transparent and original-text-color classes should - * be removed there. * - The subscription seats table. When removing this code, the .seats-table * <th> and margin overrides should be removed there. * @@ -23,8 +20,16 @@ table { @include gl-text-gray-500; } - .md &:not(.code), &.table { + .thead-white { + th { + background-color: $white; + } + } + } + + .md &:not(.code), + &.table:not(.gl-table) { margin-bottom: $gl-padding; .dropdown-menu a { @@ -58,23 +63,12 @@ table { &.wide { width: 55%; } - - &.table-th-transparent { - background: none; - color: $gl-text-color-secondary; - } - - &.original-gl-th { - @include gl-text-gray-500; - border-bottom: 1px solid $cycle-analytics-light-gray; - } } } .thead-white { th { - background-color: $white; color: $gl-text-color-secondary; border-top: 0; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 8e3b34e4eaf..bc649b6407d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -453,7 +453,7 @@ $border-radius-small: 2px; $border-radius-large: 8px; $default-icon-size: 16px; $layout-link-gray: #7e7c7c; -$btn-side-margin: 10px; +$btn-side-margin: $grid-size; $btn-sm-side-margin: 7px; $btn-margin-5: 5px; $count-arrow-border: #dce0e5; @@ -658,7 +658,6 @@ $calendar-user-contrib-text: #959494; $cycle-analytics-box-padding: 30px; $cycle-analytics-box-text-color: #8c8c8c; $cycle-analytics-big-font: 19px; -$cycle-analytics-light-gray: #bfbfbf; $cycle-analytics-dismiss-icon-color: #b2b2b2; /* @@ -934,7 +933,6 @@ $issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15); Merge requests */ $mr-tabs-height: 48px; -$mr-version-controls-height: 56px; /* Compare Branches diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index b796f04750b..cfd215b81b8 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -39,7 +39,7 @@ .icon-container { display: inline-block; - margin-right: 8px; + margin: 0 0.5rem 0 0.25rem; svg { position: relative; diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index bd327082e20..433141ae690 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -19,7 +19,17 @@ background: $dark-diff-match-color; } -@mixin diff-expansion($background, $border, $link) { +@mixin diff-expansion($background, $color, $hover-background, $hover-color) { + background-color: $background; + color: $color; + + &:hover { + background-color: $hover-background; + color: $hover-color; + } +} + +@mixin old-diff-expansion($background, $border, $link) { background-color: $background; .diff-td, @@ -49,6 +59,13 @@ } } + +@mixin dark-diff-expansion-line { + &.expansion .diff-td { + background-color: $dark-diff-match-color; + } +} + @mixin line-coverage-border-color($coverage, $no-coverage) { transition: border-left 0.1s ease-out; @@ -121,7 +138,8 @@ @include gl-mr-2; @include gl-w-4; @include gl-h-4; - @include gl-float-left; + @include gl-absolute; + @include gl-left-3; background-color: $color; mask-image: asset_url('icons-stacked.svg#link'); mask-repeat: no-repeat; diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index c51b1f04757..0eeebdb2e7a 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -154,8 +154,12 @@ $dark-il: #de935f; color: $dark-line-color; } - .line_expansion { - @include diff-expansion($dark-main-bg, $dark-border, $dark-na); + .old-line_expansion { + @include old-diff-expansion($dark-main-bg, $dark-border, $dark-na); + } + + .diff-line-expand-button { + @include diff-expansion($gray-600, $gray-200, $gray-300, $white); } // Diff line @@ -166,6 +170,10 @@ $dark-il: #de935f; @include dark-diff-match-line; } + &.diff-grid-row { + @include dark-diff-expansion-line; + } + .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), .diff-td.line-codequality.hll:not(.empty-cell), diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 226bb44f0e7..b8cd97d6504 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -1,6 +1,7 @@ /* https://github.com/richleland/pygments-css/blob/master/monokai.css */ @import '../common'; +@import 'highlight.js/styles/base16/monokai.css'; /* * Monokai Colors @@ -124,8 +125,12 @@ $monokai-gh: #75715e; color: $monokai-text-color; } - .line_expansion { - @include diff-expansion($monokai-bg, $monokai-border, $monokai-k); + .old-line_expansion { + @include old-diff-expansion($monokai-bg, $monokai-border, $monokai-k); + } + + .diff-line-expand-button { + @include diff-expansion($gray-600, $gray-200, $gray-300, $white); } // Diff line @@ -136,6 +141,10 @@ $monokai-gh: #75715e; @include dark-diff-match-line; } + &.diff-grid-row { + @include dark-diff-expansion-line; + } + .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), .diff-td.line-codequality.hll:not(.empty-cell), diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 7a36aba8be7..99a3de23c26 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -44,10 +44,15 @@ color: $gl-text-color; } - .line_expansion { - @include diff-expansion($gray-light, $white-normal, $gl-text-color); + .old-line_expansion { + @include old-diff-expansion($gray-light, $white-normal, $gl-text-color); } + .diff-line-expand-button { + @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); + } + + // Diff line $none-expanded-border: #e0e0e0; $none-expanded-bg: #e0e0e0; diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index acd401e1694..55d17b8f1d2 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -1,6 +1,7 @@ /* https://gist.github.com/qguv/7936275 */ @import '../common'; +@import 'highlight.js/styles/base16/solarized-dark.css'; /* * Solarized dark colors @@ -127,8 +128,12 @@ $solarized-dark-il: #2aa198; color: $solarized-dark-pre-color; } - .line_expansion { - @include diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd); + .old-line_expansion { + @include old-diff-expansion($solarized-dark-line-bg, $solarized-dark-border, $solarized-dark-kd); + } + + .diff-line-expand-button { + @include diff-expansion(lighten($solarized-dark-pre-bg, 10%), $gray-200, lighten($solarized-dark-pre-bg, 20%), $white); } // Diff line @@ -139,6 +144,10 @@ $solarized-dark-il: #2aa198; @include dark-diff-match-line; } + &.diff-grid-row { + @include dark-diff-expansion-line; + } + .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), .diff-td.line-codequality.hll:not(.empty-cell), diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index ddcecc4cbcf..72b961097e4 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -1,6 +1,7 @@ /* https://gist.github.com/qguv/7936275 */ @import '../common'; +@import 'highlight.js/styles/base16/solarized-light.css'; /* * Solarized light syntax colors @@ -133,9 +134,13 @@ $solarized-light-il: #2aa198; background-color: $solarized-light-pre-bg; color: $solarized-light-pre-color; } + + .old-line_expansion { + @include old-diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd); + } - .line_expansion { - @include diff-expansion($solarized-light-line-bg, $solarized-light-border, $solarized-light-kd); + .diff-line-expand-button { + @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); } // Diff line @@ -146,6 +151,10 @@ $solarized-light-il: #2aa198; @include match-line; } + &.diff-grid-row.expansion .diff-td { + background-color: $solarized-light-matchline-bg; + } + .diff-td.diff-line-num.hll:not(.empty-cell), .diff-td.line-coverage.hll:not(.empty-cell), .diff-td.line-codequality.hll:not(.empty-cell), diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 20a36d2e8b1..b984c194033 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -77,6 +77,22 @@ $white-gc-bg: #eaf2f5; background-color: $gray-light; } +@mixin diff-match-line { + &.expansion { + &.match .diff-td { + color: $gray-400; + } + + .diff-td { + background-color: $gray-50; + + &:first-child { + border-color: $gray-100; + } + } + } +} + // Line numbers .file-line-num { @include line-number-link($black-transparent); @@ -117,8 +133,8 @@ pre.code, color: $white-code-color; } -.line_expansion { - @include diff-expansion($gray-light, $border-color, $blue-600); +.old-line_expansion { + @include old-diff-expansion($gray-light, $border-color, $blue-600); &.diff-tr:last-child { border-bottom-right-radius: 4px; @@ -130,6 +146,10 @@ pre.code, } } +.diff-line-expand-button { + @include diff-expansion($gray-100, $gray-700, $gray-200, $gray-800); +} + // Diff line .line_holder { &.match .line_content, @@ -138,6 +158,10 @@ pre.code, @include match-line; } + &.diff-grid-row { + @include diff-match-line; + } + &:not(.match) .diff-grid-left:hover, &:not(.match) .diff-grid-right:hover, &.code-search-line:hover { diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index 5f50489555b..b8cbe64df38 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -197,6 +197,5 @@ tr.footer td { .footer-logo { width: 90px; - height: 33px; } } diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index ee777820b81..3327f8da632 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -13,98 +13,6 @@ } } -@mixin mini-pipeline-graph-color( - $color-background-default, - $color-background-hover-focus, - $color-background-active, - $color-foreground-default, - $color-foreground-hover-focus, - $color-foreground-active -) { - background-color: $color-background-default; - border-color: $color-foreground-default; - - svg { - fill: $color-foreground-default; - } - - &:hover, - &:focus { - background-color: $color-background-hover-focus; - border-color: $color-foreground-hover-focus; - - svg { - fill: $color-foreground-hover-focus; - } - } - - &:active { - background-color: $color-background-active; - border-color: $color-foreground-active; - - svg { - fill: $color-foreground-active; - } - } - - &:focus { - box-shadow: 0 0 4px 1px $blue-300; - } -} - -@mixin mini-pipeline-item() { - border-radius: 100px; - background-color: var(--white, $white); - border-width: 1px; - border-style: solid; - width: $ci-action-icon-size; - height: $ci-action-icon-size; - margin: 0; - padding: 0; - position: relative; - vertical-align: middle; - - &:hover, - &:active, - &:focus { - outline: none; - border-width: 2px; - } - - // Dropdown button animation in mini pipeline graph - &.ci-status-icon-success { - @include mini-pipeline-graph-color(var(--white, $white), $green-100, $green-200, $green-500, $green-600, $green-700); - } - - &.ci-status-icon-failed { - @include mini-pipeline-graph-color(var(--white, $white), $red-100, $red-200, $red-500, $red-600, $red-700); - } - - &.ci-status-icon-pending, - &.ci-status-icon-waiting-for-resource, - &.ci-status-icon-success-with-warnings { - @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); - } - - &.ci-status-icon-running { - @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); - } - - &.ci-status-icon-canceled, - &.ci-status-icon-scheduled, - &.ci-status-icon-disabled, - &.ci-status-icon-manual { - @include mini-pipeline-graph-color(var(--white, $white), $gray-500, $gray-700, $gray-900, $gray-950, $black); - } - - &.ci-status-icon-preparing, - &.ci-status-icon-created, - &.ci-status-icon-not-found, - &.ci-status-icon-skipped { - @include mini-pipeline-graph-color(var(--white, $white), var(--gray-100, $gray-100), var(--gray-200, $gray-200), var(--gray-400, $gray-400), var(--gray-500, $gray-500), var(--gray-600, $gray-600)); - } -} - /** Action icons inside dropdowns: - mini graph in pipelines table diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index eecd4954e39..81d35b8bc7b 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -49,6 +49,7 @@ height: calc(100vh - #{$issue-board-list-difference-xs}); overflow-x: scroll; min-height: 200px; + border-left: 8px solid var(--gray-10, $white); @include media-breakpoint-only(sm) { height: calc(100vh - #{$issue-board-list-difference-sm}); @@ -131,8 +132,7 @@ .board-inner { font-size: $issue-boards-font-size; - background: var(--gray-10, $gray-10); - border: 1px solid var(--gray-100, $gray-100); + background: var(--gray-50, $gray-50); } // to highlight columns we have animated pulse of box-shadow @@ -169,33 +169,7 @@ } } -.board-header { - &.has-border::before { - border-top: 3px solid; - border-color: inherit; - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; - content: ''; - position: absolute; - width: calc(100% + 2px); - top: 0; - left: 0; - margin-top: -1px; - margin-right: -1px; - margin-left: -1px; - padding-top: 1px; - padding-right: 1px; - padding-left: 1px; - - .board-title { - padding-top: ($gl-padding - 3px); - padding-bottom: $gl-padding; - } - } -} - .board-title { - border-bottom: 1px solid var(--gray-100, $gray-100); height: 3rem; .max-issue-size::before { @@ -218,8 +192,7 @@ } .board-card { - background: var(--white, $white); - border: 1px solid var(--gray-100, $gray-100); + background: var(--gray-10, $white); box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1); line-height: $gl-padding; list-style: none; @@ -239,6 +212,10 @@ background-color: var(--blue-50, $blue-50); } + &.sortable-chosen { + box-shadow: 0 2px 4px 0 rgba($black, 0.16); + } + .gl-label { margin-top: 4px; margin-right: 4px; diff --git a/app/assets/stylesheets/page_bundles/dashboard_projects.scss b/app/assets/stylesheets/page_bundles/dashboard_projects.scss index eb0e1701b7f..5eced37bed3 100644 --- a/app/assets/stylesheets/page_bundles/dashboard_projects.scss +++ b/app/assets/stylesheets/page_bundles/dashboard_projects.scss @@ -15,9 +15,9 @@ .blank-state-link { &:hover { - background-color: $gray-light; + background-color: var(--gray-50, $gray-10); + color: var(--gl-text-color, $gl-text-color); text-decoration: none; - color: $gl-text-color; } } diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss new file mode 100644 index 00000000000..9873a0121c0 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -0,0 +1,67 @@ +@import 'mixins_and_variables_and_functions'; + +.description { + ul, + ol { + /* We're changing list-style-position to inside because the default of outside + * doesn't move the negative margin to the left of the bullet. */ + list-style-position: inside; + } + + li { + position: relative; + /* In the browser, the li element comes after (to the right of) the bullet point, so hovering + * over the left of the bullet point doesn't trigger a row hover. To trigger hovering on the + * left, we're applying negative margin here to shift the li element left. */ + margin-inline-start: -1rem; + padding-inline-start: 2.5rem; + + .drag-icon { + position: absolute; + inset-block-start: 0.3rem; + inset-inline-start: 1rem; + } + } + + ul.task-list { + > li.task-list-item { + /* We're using !important to override the same selector in typography.scss */ + margin-inline-start: -1rem !important; + padding-inline-start: 2.5rem; + + > input.task-list-item-checkbox { + position: static; + vertical-align: middle; + margin-block-start: -2px; + } + } + } +} + +.description.work-items-enabled { + ul.task-list { + > li.task-list-item { + .js-add-task { + svg { + visibility: hidden; + } + + &:focus svg { + visibility: visible; + } + } + + &:hover, + &:focus-within { + .js-add-task svg { + visibility: visible; + } + } + } + } +} + +.is-ghost { + opacity: 0.3; + pointer-events: none; +} diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 1c8fd7e2590..f153569f99b 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -17,6 +17,11 @@ @import '@gitlab/ui/src/components/base/table/table'; @import '@gitlab/ui/src/components/base/tooltip/tooltip'; @import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type'; +@import '@gitlab/ui/src/components/base/form/form_input/form_input'; +@import '@gitlab/ui/src/components/base/form/form_radio/form_radio'; +@import '@gitlab/ui/src/components/base/form/form_radio_group/form_radio_group'; +@import '@gitlab/ui/src/components/base/form/form_checkbox/form_checkbox'; +@import '@gitlab/ui/src/components/base/form/form_group/form_group'; $header-height: 40px; @@ -39,9 +44,3 @@ $header-height: 40px; height: calc(100% - #{$header-height}); max-width: 1000px; } - -// needed for external_link -svg.s16 { - width: 16px; - height: 16px; -} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 34a3d936a67..f04cdfba0e4 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -41,7 +41,7 @@ $tabs-holder-z-index: 250; // 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: calc(#{$header-height} + #{$mr-tabs-height} + #{$mr-version-controls-height} + #{$diff-file-header-top}); + $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); position: -webkit-sticky; position: sticky; @@ -121,10 +121,6 @@ $tabs-holder-z-index: 250; @include media-breakpoint-down(sm) { flex-direction: column; - .stage-cell .stage-container { - margin-top: 16px; - } - .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu { transform: initial; } @@ -666,22 +662,19 @@ $tabs-holder-z-index: 250; margin-top: $gl-padding; position: relative; - &::before { + &:not(:last-child)::before { content: ''; border-left: 1px solid var(--gray-100, $gray-100); position: absolute; left: 28px; - top: -17px; + bottom: -17px; height: 16px; } } .mr-version-controls { - position: relative; - z-index: $tabs-holder-z-index + 10; background: var(--white, $white); color: var(--gl-text-color, $gl-text-color); - margin-top: -1px; .mr-version-menus-container { display: flex; @@ -703,45 +696,26 @@ $tabs-holder-z-index: 250; } .content-block { - padding: $gl-padding; + padding: $gl-padding-8 $gl-padding; border-bottom: 0; } .mr-version-dropdown, .mr-version-compare-dropdown { - margin: 0 0.5rem; - } - - .dropdown-title { - color: var(--gl-text-color, $gl-text-color); - } - - // Shortening button height by 1px to make compare-versions - // header 56px and fit into our 8px design grid - .btn { - height: 34px; - } - - @include media-breakpoint-up(md) { - position: -webkit-sticky; - position: sticky; - top: calc(#{$header-height} + #{$mr-tabs-height}); + margin: 0 $gl-spacing-scale-1; - .with-system-header & { - top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height}); - } - - .with-system-header.with-performance-bar & { - top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height}); - } + .dropdown-toggle.gl-button { + padding: $gl-spacing-scale-2 2px $gl-spacing-scale-2 $gl-spacing-scale-2; + font-weight: $gl-font-weight-bold; - .mr-version-menus-container { - flex-wrap: nowrap; + .gl-button-icon { + margin-left: $gl-spacing-scale-1; + } } + } - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height}); - } + .dropdown-title { + color: var(--gl-text-color, $gl-text-color); } } @@ -761,3 +735,11 @@ $tabs-holder-z-index: 250; .attention-request-sidebar-popover { z-index: 999; } + +.merge-request-overview { + @include media-breakpoint-up(md) { + display: grid; + grid-template-columns: 1fr 270px; + grid-gap: 5%; + } +} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index aa582db10d2..c401f1a4902 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -167,7 +167,7 @@ $status-box-line-height: 26px; border-bottom: 1px solid var(--border-color, $border-color); } -@include media-breakpoint-down(xs) { +@include media-breakpoint-down(md) { .milestone-actions { @include clearfix(); padding-top: $gl-vert-padding; diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index cbb6d68bf35..e6afc70acbb 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -139,7 +139,7 @@ } .gl-downstream-pipeline-job-width { - width: 170px; + width: 8rem; } .gl-linked-pipeline-padding { diff --git a/app/assets/stylesheets/page_bundles/pipeline_editor.scss b/app/assets/stylesheets/page_bundles/pipeline_editor.scss new file mode 100644 index 00000000000..e167052a3e1 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/pipeline_editor.scss @@ -0,0 +1,22 @@ +@import 'mixins_and_variables_and_functions'; + +.file-tree-container { + @include gl-w-full; + + @media (min-width: $breakpoint-md) { + width: 300px; + } +} + +.file-tree-container > div.gl-overflow-y-auto { + max-height: 220px; + + @media (min-width: $breakpoint-md) { + max-height: 700px; + } +} + +.file-tree-includes-link:hover > svg { + @include gl-display-block; + top: 2px; +} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index 7b54be5c91f..a225a0f0061 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -73,36 +73,12 @@ // Mini Pipelines .stage-cell { - .mini-pipeline-graph-dropdown-toggle { - svg { - height: $ci-action-icon-size; - width: $ci-action-icon-size; - position: absolute; - top: -1px; - left: -1px; - z-index: 2; - overflow: visible; - } - - &:hover, - &:active, - &:focus { - svg { - top: -2px; - left: -2px; - } - } - } - .stage-container { - display: inline-block; - position: relative; - vertical-align: middle; - height: $ci-action-icon-size; - margin: 3px 0; + align-items: center; + display: inline-flex; + .stage-container { - margin-left: 6px; + margin-left: 4px; } // Hack to show a button tooltip inline @@ -118,44 +94,15 @@ &:not(:last-child) { &::after { content: ''; - width: 7px; + width: 4px; position: absolute; - right: -7px; - top: 11px; - border-bottom: 2px solid var(--border-color, $border-color); - } - } - - //delete when all pipelines are updated to new size - &.mr-widget-pipeline-stages { - + .stage-container { - margin-left: 4px; - } - - &:not(:last-child) { - &::after { - width: 4px; - right: -4px; - top: 11px; - } + right: -4px; + border-bottom: 2px solid $gray-200; } } } } -// Commit mini pipeline (HAML) -button.mini-pipeline-graph-dropdown-toggle, -// GlDropdown mini pipeline (Vue) -// As the `mini-pipeline-item` mixin specificity is lower -// than the toggle of dropdown with 'variant="link"' we add -// classes ".gl-button.btn-link" to make it more specific -// and avoid having the size overriden -// -// See https://gitlab.com/gitlab-org/gitlab/-/issues/320737 -button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle { - @include mini-pipeline-item(); -} - // Action icons inside dropdowns: // mini graph in pipelines table // mini graph in MR widget pipeline diff --git a/app/assets/stylesheets/page_bundles/terms.scss b/app/assets/stylesheets/page_bundles/terms.scss index 8eb66e58aed..9dff3e9c99c 100644 --- a/app/assets/stylesheets/page_bundles/terms.scss +++ b/app/assets/stylesheets/page_bundles/terms.scss @@ -22,14 +22,6 @@ justify-content: space-between; line-height: $line-height-base; - .logo-text { - width: 55px; - height: 24px; - display: flex; - flex-direction: column; - justify-content: center; - } - .navbar-collapse { padding-right: 0; flex-grow: 0; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index cc8ea1493fc..afe57bb26e6 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -35,9 +35,6 @@ } .mr-widget-pipeline-graph { - display: inline-block; - vertical-align: middle; - .dropdown-menu { margin-top: 11px; } @@ -45,8 +42,6 @@ } .branch-info .commit-icon { - margin-right: 8px; - svg { top: 3px; } diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss index f237d57aa88..e0319952adb 100644 --- a/app/assets/stylesheets/pages/detail_page.scss +++ b/app/assets/stylesheets/pages/detail_page.scss @@ -8,7 +8,8 @@ a { color: $gl-text-color; - &.link { + &.link, + &.gl-link { color: $blue-600; } } @@ -25,6 +26,7 @@ .detail-page-header-body { position: relative; display: flex; + align-items: center; flex: 1 1; min-width: 0; @@ -38,9 +40,18 @@ align-self: center; flex: 0 0 auto; - @include media-breakpoint-down(xs) { - width: 100%; - margin-top: 10px; + &:not(.is-merge-request) { + @include media-breakpoint-down(xs) { + width: 100%; + margin-top: 10px; + } + } + + &.is-merge-request { + @include media-breakpoint-down(sm) { + width: 100%; + margin-top: 10px; + } } } @@ -56,4 +67,8 @@ .description { margin-top: 6px; } + + .author-link { + color: $gl-text-color; + } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index c00af802c06..4093ef087dc 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -108,21 +108,13 @@ .merge-icon { color: $orange-400; position: absolute; + bottom: -3px; + right: -3px; filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white); } } -.assignee .merge-icon { - top: calc(50% + 0.25rem); - left: 1.275rem; -} - -.reviewer .merge-icon { - bottom: -3px; - right: -3px; -} - -.right-sidebar { +@mixin right-sidebar { position: fixed; top: $header-height; // Default value for CSS var must contain a unit @@ -130,10 +122,23 @@ bottom: var(--review-bar-height, 0px); right: 0; transition: width $sidebar-transition-duration; - background: $gray-light; + background-color: $white; z-index: 200; overflow: hidden; +} + +.right-sidebar { + &:not(.right-sidebar-merge-requests) { + @include right-sidebar; + } + + &.right-sidebar-merge-requests { + @include media-breakpoint-down(sm) { + @include right-sidebar; + } + } + @include media-breakpoint-down(sm) { z-index: 251; } @@ -143,10 +148,6 @@ &:hover { color: $blue-800; - - .avatar { - border-color: rgba($gray-normal, 0.2); - } } } @@ -176,12 +177,26 @@ } } + &.right-sidebar-merge-requests { + .block, + .sidebar-contained-width, + .issuable-sidebar-header { + width: 100%; + border-bottom: 0; + } + + .block { + @include media-breakpoint-up(md) { + padding: $gl-spacing-scale-5 0; + } + } + } + .block, .sidebar-contained-width, .issuable-sidebar-header { @include clearfix; padding: $gl-padding 0; - border-bottom: 1px solid $border-gray-normal; // This prevents the mess when resizing the sidebar // of elements repositioning themselves.. width: $gutter-inner-width; @@ -218,16 +233,6 @@ } } - .cross-project-reference { - span { - width: 85%; - } - - button { - padding: 1px 5px; - } - } - .selectbox { display: none; @@ -242,9 +247,20 @@ .issuable-sidebar { height: 100%; - overflow-y: scroll; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; + + &:not(.is-merge-request) { + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + &.is-merge-request { + @include media-breakpoint-down(sm) { + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + } } &.affix-top .issuable-sidebar { @@ -252,7 +268,9 @@ } &.right-sidebar-expanded { - width: $gutter-width; + &:not(.right-sidebar-merge-requests) { + width: $gutter-width; + } .value { line-height: 1; @@ -260,6 +278,12 @@ .issuable-sidebar { padding: 0 20px; + + &.is-merge-request { + @include media-breakpoint-up(md) { + padding: 0; + } + } } &:not(.boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) { @@ -302,8 +326,17 @@ /* Extra small devices (phones, less than 768px) */ display: none; /* Small devices (tablets, 768px and up) */ - @include media-breakpoint-up(sm) { - display: block; + + &:not(.right-sidebar-merge-requests) { + @include media-breakpoint-up(sm) { + display: block; + } + } + + &.right-sidebar-merge-requests { + @include media-breakpoint-up(md) { + display: block; + } } width: $gutter-collapsed-width; @@ -380,10 +413,6 @@ } } - .sidebar-avatar-counter { - padding-top: 2px; - } - .todo-undone { color: $blue-600; fill: $blue-600; @@ -428,6 +457,10 @@ width: 24px; height: 24px; border-radius: 12px; + + ~.merge-icon { + bottom: 0; + } } .sidebar-collapsed-user { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index f127b0dc66c..04e0ef6631e 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -307,32 +307,3 @@ ul.related-merge-requests > li gl-emoji { .issuable-header-slide-leave-to { transform: translateY(-100%); } - -.description.work-items-enabled { - ul.task-list { - > li.task-list-item { - padding-inline-start: 2.5rem; - - .js-add-task { - svg { - visibility: hidden; - } - - &:focus svg { - visibility: visible; - } - } - - > input.task-list-item-checkbox { - left: 1.25rem; - } - - &:hover, - &:focus-within { - .js-add-task svg { - visibility: visible; - } - } - } - } -} diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 4a3ec5992a5..7f0bdadd2bc 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -45,7 +45,6 @@ .omniauth-container { box-shadow: 0 0 0 1px $border-color; border-radius: $border-radius; - padding: 15px; .login-heading h3 { font-weight: $gl-font-weight-normal; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index f95cff012d0..0d3ed0e7c71 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -233,8 +233,7 @@ $tabs-holder-z-index: 250; top: calc(#{$header-height} + #{$system-header-height} + #{$performance-bar-height}); } - @include media-breakpoint-up(sm) { - position: -webkit-sticky; + @include media-breakpoint-up(md) { position: sticky; } @@ -294,8 +293,7 @@ $tabs-holder-z-index: 250; justify-content: space-between; @include media-breakpoint-down(xs) { - .discussion-filter-container, - .line-resolve-all-container { + .discussion-filter-container { margin-bottom: $gl-padding-4; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index d8c3851748d..1949603b416 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -840,35 +840,6 @@ $system-note-svg-size: 16px; } } -.line-resolve-all-container { - > div { - white-space: nowrap; - } - - .btn-group .btn:first-child { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } -} - -.line-resolve-all { - vertical-align: middle; - display: inline-block; - padding: $gl-padding-8 $gl-padding-12; - background-color: $gray-light; - border: 1px solid $border-color; - border-right: 0; - border-radius: $border-radius-default; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - font-size: $gl-font-size; - line-height: 1rem; - - @include media-breakpoint-down(xs) { - flex: 1; - } -} - .line-resolve-btn { position: relative; top: 0; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 8034389adc8..3b76130dd1a 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -548,15 +548,6 @@ pre.light-well { } } -.git-clone-holder, -.mobile-git-clone { - .btn { - .icon { - fill: $white; - } - } -} - .new-protected-branch, .new-protected-tag { label { @@ -713,22 +704,6 @@ pre.light-well { margin-bottom: 10px; } -.service-installation { - padding: 32px; - margin: 32px; - border-radius: 3px; - background-color: $white; - - h3 { - margin-top: 0; - } - - hr { - margin: 32px 0; - border-color: $border-color; - } -} - .project-badge { opacity: 0.9; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 18a0f119edf..8755db83d35 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -2,6 +2,11 @@ $search-dropdown-max-height: 400px; $search-avatar-size: 16px; $search-sidebar-min-width: 240px; $search-sidebar-max-width: 300px; +$search-input-field-x-min-width: 200px; +$search-input-field-min-width: 320px; +$search-input-field-max-width: 600px; + +$border-radius-medium: 3px; .search-results { .search-result-row { @@ -37,8 +42,44 @@ input[type='checkbox']:hover { 0 0 0 1px lighten($dropdown-input-focus-shadow, 20%); } +.header-content { + .header-search-new { + max-width: $search-input-field-max-width; + } + + &.header-search-is-active { + .navbar-collapse { + flex-grow: 1; + } + + @include media-breakpoint-down(lg) { + .title-container { + flex: 0; + overflow: hidden; + } + } + + @include media-breakpoint-up(xl) { + .navbar-nav { + padding-left: 1rem; + } + } + } +} + +// This is a temporary workaround! +// the button in GitLab UI Search components need to be updated to not be the small size +// see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540 +.header-search .gl-search-box-by-type-clear.btn-sm { + padding: 0.5rem !important; +} + .header-search { - width: 320px; + min-width: $search-input-field-min-width; + + @include media-breakpoint-between(md, lg) { + min-width: $search-input-field-x-min-width; + } input, svg { @@ -66,9 +107,10 @@ input[type='checkbox']:hover { border-width: 0; border-style: solid; border-image: none; - border-radius: 3px; + border-radius: $border-radius-medium; box-shadow: none; white-space: pre-wrap; + box-sizing: border-box; // Safari word-wrap: break-word; overflow-wrap: break-word; diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 33c66648718..a9fbff8958d 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -6,10 +6,6 @@ .nav-block { margin: 16px 0; - .btn svg { - color: $gl-text-color-secondary; - } - .tree-ref-holder { margin-right: 15px; } @@ -100,7 +96,7 @@ } } - .tree-table { + table.tree-table { margin-bottom: 0; tr { diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 62d45332204..001431e517b 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -12,6 +12,7 @@ body.gl-dark { --gl-text-color: #fafafa; --border-color: #4f4f4f; --black: #fff; + --nav-active-bg: rgba(255, 255, 255, 0.08); } :root { --white: #333; @@ -350,9 +351,6 @@ h1 { .d-lg-none { display: none !important; } - .d-lg-block { - display: block !important; - } } .sr-only { position: absolute; @@ -393,8 +391,7 @@ a.gl-badge.badge-info:active { background-color: #0b5cad; } a.gl-badge.badge-info:active { - box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8), - 0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48); + box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb; outline: none; } .gl-badge.badge-success { @@ -407,8 +404,7 @@ a.gl-badge.badge-success:active { background-color: #24663b; } a.gl-badge.badge-success:active { - box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8), - 0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48); + box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb; outline: none; } .gl-badge.badge-warning { @@ -421,8 +417,7 @@ a.gl-badge.badge-warning:active { background-color: #8f4700; } a.gl-badge.badge-warning:active { - box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8), - 0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48); + box-shadow: 0 0 0 1px #333, 0 0 0 3px #1f75cb; outline: none; } .gl-button .gl-badge { @@ -487,9 +482,8 @@ a.gl-badge.badge-warning:active { } .gl-link:active { text-decoration: underline; - box-shadow: 0 0 0 1px rgba(51, 51, 51, 0.4), - 0 0 0 4px rgba(66, 143, 220, 0.48); - outline: none; + outline: 2px solid #1f75cb; + outline-offset: 2px; } .gl-button { display: inline-flex; @@ -518,8 +512,7 @@ a.gl-badge.badge-warning:active { } .gl-button.gl-button.btn-default:active, .gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 2px #bfbfbf, 0 0 0 1px rgba(51, 51, 51, 0.4), - 0 0 0 4px rgba(66, 143, 220, 0.48); + box-shadow: inset 0 0 0 1px #bfbfbf, 0 0 0 1px #333, 0 0 0 3px #1f75cb; outline: none; background-color: #404040; } @@ -742,7 +735,7 @@ body { } } @media (max-width: 767.98px) { - .dropdown-menu-toggle { + .dropdown-menu-toggle.dropdown-menu-toggle { width: 100%; } } @@ -770,15 +763,6 @@ input { right: 0; border-radius: 0; } -.navbar-gitlab .logo-text { - line-height: initial; -} -.navbar-gitlab .logo-text svg { - width: 55px; - height: 14px; - margin: 0; - fill: #333; -} .navbar-gitlab .close-icon { display: none; } @@ -790,13 +774,6 @@ input { min-height: var(--header-height, 40px); padding-left: 0; } -.navbar-gitlab .header-content .title-container { - display: flex; - align-items: stretch; - flex: 1 1 auto; - padding-top: 0; - overflow: visible; -} .navbar-gitlab .header-content .title { padding-right: 0; color: currentColor; @@ -817,9 +794,12 @@ input { display: flex; align-items: center; padding: 2px 8px; - margin: 5px 2px 5px -8px; + margin: 4px 2px 4px -12px; border-radius: 4px; } +.navbar-gitlab .header-content .title .canary-badge { + margin-left: -8px; +} .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } @@ -853,7 +833,7 @@ input { border-radius: 0; min-width: 45px; padding: 0; - margin: 8px -7px 8px 0; + margin: 8px 8px 8px 0; font-size: 14px; text-align: center; color: currentColor; @@ -997,6 +977,16 @@ input { .top-nav-toggle .dropdown-icon { margin-right: 0.5rem; } +.tanuki-logo .tanuki { + fill: #e24329; +} +.tanuki-logo .left-cheek, +.tanuki-logo .right-cheek { + fill: #fc6d26; +} +.tanuki-logo .chin { + fill: #fca326; +} .context-header { position: relative; margin-right: 2px; @@ -1513,8 +1503,16 @@ svg.s12 { svg.s16 { vertical-align: -3px; } +.header-content .header-search-new { + max-width: 600px; +} .header-search { - width: 320px; + min-width: 320px; +} +@media (min-width: 768px) and (max-width: 1199.98px) { + .header-search { + min-width: 200px; + } } .header-search.is-not-active::after { content: "/"; @@ -1535,6 +1533,7 @@ svg.s16 { border-radius: 3px; box-shadow: none; white-space: pre-wrap; + box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; word-break: keep-all; @@ -1787,6 +1786,7 @@ body.gl-dark { --white: #333; --black: #fff; --svg-status-bg: #333; + --nav-active-bg: rgba(255, 255, 255, 0.08); } .nav-sidebar li a { color: var(--gray-600); @@ -1862,6 +1862,7 @@ body.gl-dark } body.gl-dark .header-search { background-color: rgba(250, 250, 250, 0.2) !important; + border-radius: 4px; } body.gl-dark .header-search svg.gl-search-box-by-type-search-icon { color: rgba(250, 250, 250, 0.8); @@ -1900,9 +1901,6 @@ body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container { background-color: var(--gray-100, #303030); color: var(--gray-900, #fafafa); } -body.gl-dark .logo-text svg { - fill: var(--gl-text-color); -} body.gl-dark .navbar-gitlab { background-color: var(--gray-50); box-shadow: 0 1px 0 0 var(--gray-100); @@ -2023,6 +2021,7 @@ body.gl-dark { --white: #333; --black: #fff; --svg-status-bg: #333; + --nav-active-bg: rgba(255, 255, 255, 0.08); } .tab-width-8 { -moz-tab-size: 8; @@ -2045,17 +2044,47 @@ body.gl-dark { .gl-display-none { display: none; } +@media (min-width: 992px) { + .gl-lg-display-none\! { + display: none !important; + } +} +.gl-display-flex { + display: flex; +} +@media (min-width: 992px) { + .gl-lg-display-flex { + display: flex; + } +} @media (min-width: 576px) { .gl-sm-display-block { display: block; } } +@media (min-width: 992px) { + .gl-lg-display-block { + display: block; + } +} +.gl-display-inline-block\! { + display: inline-block !important; +} +.gl-align-items-stretch { + align-items: stretch; +} +.gl-flex-grow-1 { + flex-grow: 1; +} .gl-relative { position: relative; } .gl-absolute { position: absolute; } +.gl-w-full { + width: 100%; +} .gl-px-3 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -2063,6 +2092,9 @@ body.gl-dark { .gl-pr-2 { padding-right: 0.25rem; } +.gl-pt-0 { + padding-top: 0; +} .gl-ml-n2 { margin-left: -0.25rem; } @@ -2073,6 +2105,12 @@ body.gl-dark { margin-left: 0 !important; margin-right: 0 !important; } +.gl-text-right { + text-align: right; +} +.gl-white-space-nowrap { + white-space: nowrap; +} .gl-font-sm { font-size: 0.75rem; } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index a8b7299b935..c42b5554d8d 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -336,9 +336,6 @@ h1 { .d-lg-none { display: none !important; } - .d-lg-block { - display: block !important; - } } .sr-only { position: absolute; @@ -379,8 +376,7 @@ a.gl-badge.badge-info:active { background-color: #9dc7f1; } a.gl-badge.badge-info:active { - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), - 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; } .gl-badge.badge-success { @@ -393,8 +389,7 @@ a.gl-badge.badge-success:active { background-color: #91d4a8; } a.gl-badge.badge-success:active { - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), - 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; } .gl-badge.badge-warning { @@ -407,8 +402,7 @@ a.gl-badge.badge-warning:active { background-color: #e9be74; } a.gl-badge.badge-warning:active { - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), - 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48); + box-shadow: 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; } .gl-button .gl-badge { @@ -473,9 +467,8 @@ a.gl-badge.badge-warning:active { } .gl-link:active { text-decoration: underline; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); - outline: none; + outline: 2px solid #428fdc; + outline-offset: 2px; } .gl-button { display: inline-flex; @@ -504,8 +497,7 @@ a.gl-badge.badge-warning:active { } .gl-button.gl-button.btn-default:active, .gl-button.gl-button.btn-default.active { - box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); + box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #dbdbdb; } @@ -728,7 +720,7 @@ body { } } @media (max-width: 767.98px) { - .dropdown-menu-toggle { + .dropdown-menu-toggle.dropdown-menu-toggle { width: 100%; } } @@ -756,15 +748,6 @@ input { right: 0; border-radius: 0; } -.navbar-gitlab .logo-text { - line-height: initial; -} -.navbar-gitlab .logo-text svg { - width: 55px; - height: 14px; - margin: 0; - fill: #fff; -} .navbar-gitlab .close-icon { display: none; } @@ -776,13 +759,6 @@ input { min-height: var(--header-height, 40px); padding-left: 0; } -.navbar-gitlab .header-content .title-container { - display: flex; - align-items: stretch; - flex: 1 1 auto; - padding-top: 0; - overflow: visible; -} .navbar-gitlab .header-content .title { padding-right: 0; color: currentColor; @@ -803,9 +779,12 @@ input { display: flex; align-items: center; padding: 2px 8px; - margin: 5px 2px 5px -8px; + margin: 4px 2px 4px -12px; border-radius: 4px; } +.navbar-gitlab .header-content .title .canary-badge { + margin-left: -8px; +} .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } @@ -839,7 +818,7 @@ input { border-radius: 0; min-width: 45px; padding: 0; - margin: 8px -7px 8px 0; + margin: 8px 8px 8px 0; font-size: 14px; text-align: center; color: currentColor; @@ -983,6 +962,16 @@ input { .top-nav-toggle .dropdown-icon { margin-right: 0.5rem; } +.tanuki-logo .tanuki { + fill: #e24329; +} +.tanuki-logo .left-cheek, +.tanuki-logo .right-cheek { + fill: #fc6d26; +} +.tanuki-logo .chin { + fill: #fca326; +} .context-header { position: relative; margin-right: 2px; @@ -1499,8 +1488,16 @@ svg.s12 { svg.s16 { vertical-align: -3px; } +.header-content .header-search-new { + max-width: 600px; +} .header-search { - width: 320px; + min-width: 320px; +} +@media (min-width: 768px) and (max-width: 1199.98px) { + .header-search { + min-width: 200px; + } } .header-search.is-not-active::after { content: "/"; @@ -1521,6 +1518,7 @@ svg.s16 { border-radius: 3px; box-shadow: none; white-space: pre-wrap; + box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word; word-break: keep-all; @@ -1706,17 +1704,47 @@ svg.s16 { .gl-display-none { display: none; } +@media (min-width: 992px) { + .gl-lg-display-none\! { + display: none !important; + } +} +.gl-display-flex { + display: flex; +} +@media (min-width: 992px) { + .gl-lg-display-flex { + display: flex; + } +} @media (min-width: 576px) { .gl-sm-display-block { display: block; } } +@media (min-width: 992px) { + .gl-lg-display-block { + display: block; + } +} +.gl-display-inline-block\! { + display: inline-block !important; +} +.gl-align-items-stretch { + align-items: stretch; +} +.gl-flex-grow-1 { + flex-grow: 1; +} .gl-relative { position: relative; } .gl-absolute { position: absolute; } +.gl-w-full { + width: 100%; +} .gl-px-3 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1724,6 +1752,9 @@ svg.s16 { .gl-pr-2 { padding-right: 0.25rem; } +.gl-pt-0 { + padding-top: 0; +} .gl-ml-n2 { margin-left: -0.25rem; } @@ -1734,6 +1765,12 @@ svg.s16 { margin-left: 0 !important; margin-right: 0 !important; } +.gl-text-right { + text-align: right; +} +.gl-white-space-nowrap { + white-space: nowrap; +} .gl-font-sm { font-size: 0.75rem; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 751ad26ca21..020ed9c040b 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -138,9 +138,8 @@ hr { margin-right: -15px; margin-left: -15px; } +.col-md-6, .col-sm-12, -.col-sm-7, -.col-sm-5, .col { position: relative; width: 100%; @@ -159,14 +158,6 @@ hr { order: 12; } @media (min-width: 576px) { - .col-sm-5 { - flex: 0 0 41.6666666667%; - max-width: 41.6666666667%; - } - .col-sm-7 { - flex: 0 0 58.3333333333%; - max-width: 58.3333333333%; - } .col-sm-12 { flex: 0 0 100%; max-width: 100%; @@ -178,6 +169,12 @@ hr { order: 12; } } +@media (min-width: 768px) { + .col-md-6 { + flex: 0 0 50%; + max-width: 50%; + } +} .form-control { display: block; width: 100%; @@ -354,8 +351,7 @@ fieldset:disabled a.btn { background-color: #fff; } .gl-button.gl-button.btn-default:active { - box-shadow: inset 0 0 0 2px #5e5e5e, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); + box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #dbdbdb; } @@ -367,8 +363,7 @@ fieldset:disabled a.btn { box-shadow: inset 0 0 0 1px #1068bf; } .gl-button.gl-button.btn-confirm:active { - box-shadow: inset 0 0 0 2px #033464, 0 0 0 1px rgba(255, 255, 255, 0.4), - 0 0 0 4px rgba(31, 117, 203, 0.48); + box-shadow: inset 0 0 0 1px #033464, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #0b5cad; } @@ -519,6 +514,16 @@ label.label-bold { .navbar-empty .brand-header-logo { max-height: 100%; } +.tanuki-logo .tanuki { + fill: #e24329; +} +.tanuki-logo .left-cheek, +.tanuki-logo .right-cheek { + fill: #fc6d26; +} +.tanuki-logo .chin { + fill: #fca326; +} input::-moz-placeholder { color: #868686; opacity: 1; @@ -568,7 +573,6 @@ svg { .login-page .omniauth-container { box-shadow: 0 0 0 1px #dbdbdb; border-radius: 0.25rem; - padding: 15px; } .login-page .login-box .login-heading h3, .login-page .omniauth-container .login-heading h3 { diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 550e3981401..6a9e96c3ac5 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -99,6 +99,7 @@ $white-normal: #333; $white-dark: #444; $border-color: #4f4f4f; +$nav-active-bg: rgba(255, 255, 255, 0.08); body.gl-dark { --gray-10: #{$gray-10}; @@ -199,6 +200,7 @@ body.gl-dark { --black: #{$black}; --svg-status-bg: #{$white}; + --nav-active-bg: #{$nav-active-bg}; .gl-button.gl-button, .gl-button.gl-button.btn-block { diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 83254fe1a52..dbb961fe71f 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -71,10 +71,13 @@ body.gl-dark { @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white); - .logo-text svg { - fill: var(--gl-text-color); + .terms { + .logo-text { + fill: var(--black); + } } + .navbar-gitlab { background-color: var(--gray-50); box-shadow: 0 1px 0 0 var(--gray-100); diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 07194e2b532..234010074aa 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -150,6 +150,7 @@ .header-search { background-color: rgba($search-and-nav-links, 0.2) !important; + border-radius: $border-radius-default; &:hover { background-color: rgba($search-and-nav-links, 0.3) !important; diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss index f2fdd499781..66b2b3c3437 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -15,8 +15,8 @@ body { background-color: $gray-50; box-shadow: 0 1px 0 0 $border-color; - .logo-text svg { - fill: $gray-900; + .logo-text { + fill: #171321; } .navbar-sub-nav, @@ -48,6 +48,7 @@ body { .header-search { background-color: $white !important; box-shadow: inset 0 0 0 1px $border-color !important; + border-radius: $border-radius-default; &:hover { background-color: $white !important; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index d7a5e21e303..fd85ff894a7 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -366,3 +366,30 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 /* stylelint-disable property-no-vendor-prefix */ -webkit-backdrop-filter: blur(2px); // still required by Safari } + +/* + * The below style will be moved to @gitlab/ui by + * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1792 + */ +.gl-text-purple-800 { + color: $purple-800; +} + +.gl-bg-theme-indigo-800 { + background-color: $theme-indigo-800; +} + +.gl-border-indigo-700 { + border-color: $theme-indigo-700; +} + +.gl-border-gray-75 { + border-color: $gl-text-color-quaternary; +} + +.gl-min-h-8 { + min-height: $gl-spacing-scale-8; +} + +/* End gitlab-ui#1751 */ + |