diff options
Diffstat (limited to 'app/assets/stylesheets')
41 files changed, 305 insertions, 264 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 8f3b5b3b7cc..ff2b82d1806 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -28,7 +28,6 @@ @import './pages/service_desk'; @import './pages/settings'; @import './pages/settings_ci_cd'; -@import './pages/sherlock'; @import './pages/storage_quota'; @import './pages/tree'; @import './pages/users'; diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 4437b5b673d..98a7ea5792b 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -36,15 +36,15 @@ } .with-performance-bar .whats-new-drawer { - margin-top: $performance-bar-height + $header-height; + margin-top: calc(#{$performance-bar-height} + #{$header-height}); } .with-system-header .whats-new-drawer { - margin-top: $system-header-height + $header-height; + margin-top: calc(#{$system-header-height} + #{$header-height}); } .with-performance-bar.with-system-header .whats-new-drawer { - margin-top: $performance-bar-height + $system-header-height + $header-height; + margin-top: calc(#{$performance-bar-height} + #{$system-header-height} + #{$header-height}); } .gl-badge.whats-new-item-badge { diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 345c180d164..2a3ed29258a 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -357,7 +357,9 @@ } > li { - .badge.badge-pill { + // TODO: Remove this block once all sidebar badges use gl_badge_tag + // https://gitlab.com/gitlab-org/gitlab/-/issues/350061 + .badge.badge-pill:not(.gl-badge) { @include gl-rounded-lg; @include gl-py-1; @include gl-px-3; @@ -370,7 +372,9 @@ display: block; } - .badge.badge-pill { + // TODO: Remove this block once all sidebar badges use gl_badge_tag + // https://gitlab.com/gitlab-org/gitlab/-/issues/350061 + .badge.badge-pill:not(.gl-badge) { @include gl-font-weight-normal; color: $blue-700; } diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 23dc16b7e7f..ffacac07517 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: $mr-version-controls-height + $header-height + $mr-tabs-height + 11; + $mr-file-header-top: calc(#{$mr-version-controls-height} + #{$header-height} + #{$mr-tabs-height} + 11px); position: -webkit-sticky; position: sticky; @@ -42,11 +42,11 @@ z-index: 120; .with-system-header & { - top: $mr-file-header-top + $system-header-height; + top: calc(#{$mr-file-header-top} + #{$system-header-height}); } .with-system-header.with-performance-bar & { - top: $mr-file-header-top + $system-header-height + $performance-bar-height; + top: calc(#{$mr-file-header-top} + #{$system-header-height} + #{$performance-bar-height}); } &::before { @@ -61,22 +61,22 @@ } .with-performance-bar & { - top: $mr-file-header-top + $performance-bar-height; + top: calc(#{$mr-file-header-top} + #{$performance-bar-height}); } &.is-commit { - top: $header-height + $commit-stat-summary-height; + top: calc(#{$header-height} + #{$commit-stat-summary-height}); .with-performance-bar & { - top: $header-height + $commit-stat-summary-height + $performance-bar-height; + top: calc(#{$header-height} + #{$commit-stat-summary-height} + #{$performance-bar-height}); } } &.is-compare { - top: $header-height + $compare-branches-sticky-header-height; + top: calc(#{$header-height} + #{$compare-branches-sticky-header-height}); .with-performance-bar & { - top: $performance-bar-height + $header-height + $compare-branches-sticky-header-height; + top: calc(#{$performance-bar-height} + #{$header-height} + #{$compare-branches-sticky-header-height}); } } } @@ -99,17 +99,17 @@ .with-performance-bar &.conflict .file-title, .with-performance-bar &.conflict .file-title-flex-parent { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } .with-system-header &.conflict .file-title, .with-system-header &.conflict .file-title-flex-parent { - top: $header-height + $system-header-height; + top: calc(#{$header-height} + #{$system-header-height}); } .with-system-header.with-performance-bar &.conflict .file-title, .with-system-header.with-performance-bar &.conflict .file-title-flex-parent { - top: $header-height + $performance-bar-height + $system-header-height; + top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height}); } } @@ -825,7 +825,7 @@ table.code { top: $header-height; .with-performance-bar & { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } } } @@ -839,12 +839,12 @@ table.code { @include media-breakpoint-up(sm) { @include gl-sticky; - top: $header-height + $mr-tabs-height; + top: calc(#{$header-height} + #{$mr-tabs-height}); @include gl-bg-white; z-index: 200; .with-performance-bar & { - top: $header-height + $mr-tabs-height + $performance-bar-height; + top: calc(#{$header-height} + #{$mr-tabs-height} + #{$performance-bar-height}); } &.is-stuck { diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index 1ddde3d2ed6..a31910e3090 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -43,6 +43,10 @@ gl-emoji { border-bottom-color: transparent; } +.emoji-picker-category-active { + border-bottom-color: var(--gl-theme-accent, $theme-indigo-500); +} + .emoji-picker .gl-new-dropdown-inner > :last-child { padding-bottom: 0; } diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 30a1c8af414..b51daf0e4dc 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -75,6 +75,10 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); .flash-action { display: inline-block; } + + .gl-alert { + @include gl-my-4; + } } @include media-breakpoint-down(sm) { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 44b099fc873..68535badd78 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -150,7 +150,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important } li { - .badge.badge-pill:not(.merge-request-badge) { + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { box-shadow: none; font-weight: $gl-font-weight-bold; } @@ -417,7 +417,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important .title-container, .navbar-nav { - .badge.badge-pill:not(.merge-request-badge) { + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { position: inherit; font-weight: $gl-font-weight-normal; margin-left: -6px; diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index f79dc38f2f7..fb05f8575ef 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -140,7 +140,7 @@ body { } .with-performance-bar .layout-page { - margin-top: $header-height + $performance-bar-height; + margin-top: calc(#{$header-height} + #{$performance-bar-height}); } .fullscreen-layout { @@ -201,3 +201,9 @@ body { padding-right: 0; } } + +@include media-breakpoint-up(sm) { + .logged-out-marketing-header-candidate { + --header-height: 72px; + } +} diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 33f7aa4dba1..1e51bf3d974 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -276,7 +276,7 @@ top: $header-height; .with-performance-bar & { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } } @@ -419,6 +419,30 @@ height: $gl-font-size * $code-line-height * 0.9; } +@mixin email-code-block { + .code.language-email { + font-family: inherit; + font-size: inherit; + + code { + white-space: pre-wrap; + font-family: inherit; + + // Rouge `Name.Tag` and `Operator` token (email header key + ':') + .nt, + .o { + color: inherit; + font-weight: bold; + } + + // Rouge `Name.Attribute` token (email header value) + .na { + color: inherit; + } + } + } +} + @mixin avatar-counter($border-radius: 1em) { background-color: $gray-darkest; color: $white; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 685f1f413e6..563075b911c 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -40,9 +40,11 @@ a.active { color: $black; font-weight: $gl-font-weight-bold; + border-bottom: 2px solid var(--gl-theme-accent, $theme-indigo-500); .badge.badge-pill { color: $black; + font-weight: $gl-font-weight-bold; } } @@ -126,14 +128,6 @@ input { display: inline-block; position: relative; - - &:not[type='checkbox'] { - /* Medium devices (desktops, 992px and up) */ - @include media-breakpoint-up(md) { width: 200px; } - - /* Large devices (large desktops, 1200px and up) */ - @include media-breakpoint-up(lg) { width: 250px; } - } } @include media-breakpoint-up(md) { diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 6c7fc25f2d9..e77971d5280 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -81,7 +81,7 @@ } .with-performance-bar .right-sidebar.affix { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } @mixin maintain-sidebar-dimensions { diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 1cb34bea069..89585fd96ae 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -49,11 +49,11 @@ // right sidebar eg: MR page .nav-sidebar, .right-sidebar { - top: $system-header-height + $header-height; + top: calc(#{$system-header-height} + #{$header-height}); } .content-wrapper-margin { - margin-top: $system-header-height + $header-height; + margin-top: calc(#{$system-header-height} + #{$header-height}); } // Performance Bar @@ -66,14 +66,14 @@ } .layout-page { - margin-top: $header-height + $performance-bar-height + $system-header-height; + margin-top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height}); } // left sidebar eg: project page // right sidebar eg: MR page .nav-sidebar, .right-sidebar { - top: $header-height + $performance-bar-height + $system-header-height; + top: calc(#{$header-height} + #{$performance-bar-height} + #{$system-header-height}); } } } @@ -97,7 +97,7 @@ .boards-list, .board-swimlanes { - height: calc(100vh - #{$header-height + $breadcrumb-min-height + $performance-bar-height + $system-footer-height + $gl-padding-32}); + height: calc(100vh - (#{$header-height} + #{$breadcrumb-min-height} + #{$performance-bar-height} + #{$system-footer-height} + #{$gl-padding-32})); } } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 16ff4b81f95..51c41c46f61 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -365,10 +365,17 @@ padding: 0; margin: 0 0 16px; + // Lists embedded in other lists can be "loose" or "tight" + // Remove bottom margin for all lists (default for tight lists) ul, ol { margin-bottom: 0; } + + // Loose lists need bottom margin added back + p ~ ol, + p ~ ul { + margin-bottom: 16px;
} } ul:dir(rtl), @@ -420,12 +427,12 @@ list-style-type: none; position: relative; min-height: 22px; - padding-left: 28px; - margin-left: 0 !important; + padding-inline-start: 28px; + margin-inline-start: 0 !important; > input.task-list-item-checkbox { position: absolute; - left: 8px; + inset-inline-start: 8px; top: 5px; } } @@ -590,6 +597,8 @@ .text-justify { text-align: justify !important; } + + @include email-code-block; } /** diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 026aeeb1e8e..21add43ad3f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -433,7 +433,7 @@ $browser-scrollbar-size: 10px; /* * Misc */ -$header-height: 40px; +$header-height: var(--header-height, 40px); $header-zindex: 1000; $zindex-dropdown-menu: 300; $suggestion-header-height: 46px; @@ -610,6 +610,14 @@ $pagination-disabled-color: #cdcdcd; */ $status-icon-size: 22px; + +/* +* Social Icons +*/ +$twitter: #1d9bf0; +$skype: #0078d7; +$linkedin: #2867b2; + /* * Award emoji */ @@ -667,18 +675,18 @@ $issue-boards-filter-height: 68px; $issue-boards-filter-height-md: 110px; $issue-boards-filter-height-sm: 299px; $issue-boards-breadcrumbs-height-xs: 63px; -$issue-board-list-difference-xs: $header-height + $issue-boards-breadcrumbs-height-xs; -$issue-board-list-difference-sm: $header-height + $breadcrumb-min-height; -$issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards-filter-height-md; -$issue-board-list-difference-lg: $issue-board-list-difference-sm + $issue-boards-filter-height; +$issue-board-list-difference-xs: calc(#{$header-height} + #{$issue-boards-breadcrumbs-height-xs}); +$issue-board-list-difference-sm: calc(#{$header-height} + #{$breadcrumb-min-height}); +$issue-board-list-difference-md: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height-md}); +$issue-board-list-difference-lg: calc(#{$issue-board-list-difference-sm} + #{$issue-boards-filter-height}); /* The following heights are used in environment_logs.scss and are used for calculation of the log viewer height. */ $environment-logs-breadcrumbs-height: 63px; $environment-logs-breadcrumbs-height-md: $breadcrumb-min-height; -$environment-logs-difference-xs-up: $header-height + $environment-logs-breadcrumbs-height; -$environment-logs-difference-md-up: $header-height + $environment-logs-breadcrumbs-height-md; +$environment-logs-difference-xs-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height}); +$environment-logs-difference-md-up: calc(#{$header-height} + #{$environment-logs-breadcrumbs-height-md}); /* * Avatar @@ -867,21 +875,12 @@ $image-comment-cursor-left-offset: 12; $image-comment-cursor-top-offset: 12; /* -Add GitLab Slack Application -*/ -$add-to-slack-popup-max-width: 400px; -$add-to-slack-gif-max-width: 850px; -$add-to-slack-well-max-width: 750px; -$add-to-slack-logo-size: 100px; - -/* Security & Compliance Carousel */ $security-and-compliance-carousel-image-carousel-width: 1000px; $security-and-compliance-carousel-image-discover-button-width: 45%; $security-and-compliance-carousel-image-discover-buttons-max-width: 280px; $security-and-compliance-carousel-image-discover-footer-max-width: 500px; -$security-and-compliance-carousel-image-discover-feedback-width: 30%; $security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px; $security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%; $security-and-compliance-carousel-image-discover-text-carousel-caption-max-width: 500px; diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index acfda718e77..ea81863e094 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -5,7 +5,7 @@ $secondary: $gray-light; $input-disabled-bg: $gray-light; -$input-border-color: $gray-100; +$input-border-color: $gray-400; $input-color: $gl-text-color; $input-font-size: $gl-font-size; $font-family-sans-serif: $regular-font; diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index d550a1faa18..b796f04750b 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -65,33 +65,6 @@ display: inline; } - .branch-link { - margin-bottom: 2px; - } - - .limit-box { - cursor: pointer; - display: inline-flex; - align-items: center; - background-color: $red-100; - border-radius: $border-radius-default; - text-align: center; - - &:hover { - background-color: $red-200; - } - - .limit-icon { - margin: 0 4px; - } - - .limit-message { - line-height: 16px; - margin-right: 8px; - font-size: 12px; - } - } - svg { vertical-align: text-top; } diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index c0f8475323a..80052f4a4d5 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -255,18 +255,23 @@ span.highlight_word { .hll { background-color: $white-hll-bg; } -.c { color: $white-c; +.c, +.hljs-comment { color: $white-c; font-style: italic; } .err { color: $white-err; background-color: $white-err-bg; } -.k { font-weight: $gl-font-weight-bold; } + +.k, +.hljs-variable.language_, +.hljs-built_in { font-weight: $gl-font-weight-bold; } .o { font-weight: $gl-font-weight-bold; } .cm { color: $white-cm; font-style: italic; } -.cp { color: $white-cp; +.cp, +.hljs-meta { color: $white-cp; font-weight: $gl-font-weight-bold; } .c1 { color: $white-c1; @@ -310,20 +315,34 @@ span.highlight_word { font-weight: $gl-font-weight-bold; } .gt { color: $white-gt; } .kc { font-weight: $gl-font-weight-bold; } -.kd { font-weight: $gl-font-weight-bold; } + +.kd, +.hljs-keyword { font-weight: $gl-font-weight-bold; } .kn { font-weight: $gl-font-weight-bold; } .kp { font-weight: $gl-font-weight-bold; } .kr { font-weight: $gl-font-weight-bold; } -.kt { color: $white-kt; +.kt, +.hljs-type { color: $white-kt; font-weight: $gl-font-weight-bold; } .m { color: $white-m; } .s { color: $white-s; } -.n { color: $white-n; } -.na { color: $white-na; } -.nb { color: $white-nb; } -.nc { color: $white-nc; +.n, +.hljs-built_in { color: $white-n; } + +.na, +.hljs-attr, +.hljs-property, +.hljs-title.function_ { color: $white-na; } + +.nb, +.hljs-title.class_, +.hljs-literal { color: $white-nb; } + +.nc, +.hljs-title.class_, +.hljs-built_in { color: $white-nc; font-weight: $gl-font-weight-bold; } .no { color: $white-no; } .ni { color: $white-ni; } @@ -331,7 +350,9 @@ span.highlight_word { .ne { color: $white-ne; font-weight: $gl-font-weight-bold; } -.nf { color: $white-nf; +.nf, +.hljs-title, +.hljs-title.function_ { color: $white-nf; font-weight: $gl-font-weight-bold; } .nn { color: $white-nn; } .nt { color: $white-nt; } @@ -340,7 +361,9 @@ span.highlight_word { .w { color: $white-w; } .mf { color: $white-mf; } .mh { color: $white-mh; } -.mi { color: $white-mi; } + +.mi, +.hljs-number { color: $white-mi; } .mo { color: $white-mo; } .sb { color: $white-sb; } .sc { color: $white-sc; } @@ -351,7 +374,9 @@ span.highlight_word { .si { color: $white-si; } .sx { color: $white-sx; } .sr { color: $white-sr; } -.s1 { color: $white-s1; } + +.s1, +.hljs-string { color: $white-s1; } .ss { color: $white-ss; } .bp { color: $white-bp; } .vc { color: $white-vc; } diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss index d281f62c370..feb4ea77e58 100644 --- a/app/assets/stylesheets/notify.scss +++ b/app/assets/stylesheets/notify.scss @@ -1,3 +1,4 @@ +@import 'framework/mixins'; @import 'framework/variables'; img { @@ -38,3 +39,14 @@ pre.commit-message { .gl-label-text-dark { color: $gl-text-color; } + +.content { + .markdown-code-block pre.code { + padding: $gl-padding-8 $input-horizontal-padding; + margin: 0 0 $gl-padding-8; + border: 1px solid $gray-100; + border-radius: $border-radius-small; + } + + @include email-code-block; +} diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index d4c59a6ab0c..f91ca489bdf 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -1,9 +1,5 @@ @import 'mixins_and_variables_and_functions'; -.user-can-drag { - cursor: grab; -} - .is-ghost { opacity: 0.3; pointer-events: none; diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index ed62e055427..d55d6b27576 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -13,7 +13,7 @@ border: 1px solid var(--border-color, $border-color); .with-performance-bar & { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } } @@ -21,10 +21,10 @@ @include build-log-top-bar(50px); &.has-archived-block { - top: $header-height + 28px; + top: calc(#{$header-height} + 28px); .with-performance-bar & { - top: $header-height + $performance-bar-height + 28px; + top: calc(#{$header-height} + #{$performance-bar-height} + 28px); } } diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss deleted file mode 100644 index 5d42ece32c9..00000000000 --- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'mixins_and_variables_and_functions'; - -.cycle-analytics { - margin: 24px auto 0; - position: relative; -} diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss index 79468ce62ce..b7a4d9564fe 100644 --- a/app/assets/stylesheets/page_bundles/import.scss +++ b/app/assets/stylesheets/page_bundles/import.scss @@ -41,7 +41,7 @@ $import-bar-height: $gl-spacing-scale-11; z-index: 3; html.with-performance-bar & { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } } diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss index 8a958bdf0c5..41515a98e0a 100644 --- a/app/assets/stylesheets/page_bundles/issues_list.scss +++ b/app/assets/stylesheets/page_bundles/issues_list.scss @@ -35,10 +35,6 @@ } } -.user-can-drag { - cursor: grab; -} - .is-ghost { opacity: 0.3; pointer-events: none; diff --git a/app/assets/stylesheets/page_bundles/members.scss b/app/assets/stylesheets/page_bundles/members.scss index 62dd3dcb9c0..8d2c0a8ca22 100644 --- a/app/assets/stylesheets/page_bundles/members.scss +++ b/app/assets/stylesheets/page_bundles/members.scss @@ -22,10 +22,6 @@ } } -.members-ldap { - align-self: center; -} - .card { .card-header { .badge.badge-pill { diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 02113fe8b58..37ab2e2be2b 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -36,7 +36,7 @@ // 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; + $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$mr-version-controls-height} + #{$diff-file-header-top}); position: -webkit-sticky; position: sticky; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 8600a4059d8..cdef843c9b4 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -514,7 +514,7 @@ } .with-performance-bar .right-sidebar { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } .sidebar-move-issue-confirmation-button { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 880231f5644..d77c8a40a79 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -256,7 +256,7 @@ ul.related-merge-requests > li gl-emoji { } .with-performance-bar .issue-sticky-header { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } @include media-breakpoint-up(md) { diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index c7b4dd660d0..82216b8d5c5 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -68,13 +68,6 @@ color: $white; } -.dropdown-labels-error { - padding: 5px 10px; - margin-bottom: 10px; - background-color: $red-500; - color: $white; -} - .manage-labels-list { padding: 0; margin-bottom: 0; @@ -114,9 +107,8 @@ display: none; } -.label-subscribe-button { - width: 105px; - font-weight: 200; +.label-subscription { + width: 109px; } .labels-container { diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 71ddbf175e9..fffea301a4f 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -10,6 +10,8 @@ .flash-container { margin-bottom: $gl-padding; + position: relative; + top: 8px; } .brand-holder { @@ -203,7 +205,7 @@ &.with-system-header { .login-page-broadcast { - margin-top: $system-header-height + $header-height; + margin-top: calc(#{$system-header-height} + #{$header-height}); } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index a4b8e912614..10026e290e8 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -689,14 +689,14 @@ $tabs-holder-z-index: 250; @include media-breakpoint-up(md) { position: -webkit-sticky; position: sticky; - top: $header-height + $mr-tabs-height; + top: calc(#{$header-height} + #{$mr-tabs-height}); .with-system-header & { - top: $header-height + $mr-tabs-height + $system-header-height; + top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height}); } .with-system-header.with-performance-bar & { - top: $header-height + $mr-tabs-height + $system-header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height}); } .mr-version-menus-container { @@ -704,7 +704,7 @@ $tabs-holder-z-index: 250; } .with-performance-bar & { - top: $header-height + $performance-bar-height + $mr-tabs-height; + top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height}); } } } @@ -717,11 +717,11 @@ $tabs-holder-z-index: 250; border-bottom: 1px solid $border-color; .with-system-header & { - top: $header-height + $system-header-height; + top: calc(#{$header-height} + #{$system-header-height}); } .with-system-header.with-performance-bar & { - top: $header-height + $system-header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$system-header-height} + #{$performance-bar-height}); } @include media-breakpoint-up(sm) { @@ -752,7 +752,7 @@ $tabs-holder-z-index: 250; .with-performance-bar { .merge-request-tabs-holder, .epic-tabs-holder { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } } @@ -957,10 +957,10 @@ $tabs-holder-z-index: 250; .mr-compare { .diff-file .file-title-flex-parent { - top: $header-height + $mr-tabs-height + 36px; + top: calc(#{$header-height} + #{$mr-tabs-height} + 36px); .with-performance-bar & { - top: $performance-bar-height + $header-height + $mr-tabs-height + 36px; + top: calc(#{$performance-bar-height} + #{$header-height} + #{$mr-tabs-height} + 36px); } } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 04da75b586f..d8c3851748d 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -368,7 +368,7 @@ $system-note-svg-size: 16px; border-radius: 0; @media (min-width: map-get($grid-breakpoints, md)) { - top: $mr-tabs-height + $header-height; + top: calc(#{$mr-tabs-height} + #{$header-height}); .with-performance-bar & { top: 123px; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index a7ed7172f5f..f76a8030e5b 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -363,23 +363,22 @@ table.u2f-registrations { color: $gl-text-color-secondary; } -.gitlab-slack-gif { - width: 100%; - max-width: $add-to-slack-gif-max-width; +.gitlab-slack-body { + max-width: 420px; } -.gitlab-slack-well { - background-color: $white; - box-shadow: none; - max-width: $add-to-slack-well-max-width; +.gitlab-slack-slack-logo { + transform: scale(200%); // Slack logo SVG is scaled down 50% and has empty space around it } -.gitlab-slack-logo { - width: $add-to-slack-logo-size; - height: $add-to-slack-logo-size; +.skype-icon { + color: $skype; } -.gitlab-slack-popup { - width: 100%; - max-width: $add-to-slack-popup-max-width; +.linkedin-icon { + color: $linkedin; +} + +.twitter-icon { + color: $twitter; } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 37e272cfff7..633051918a4 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -293,10 +293,8 @@ } } -.modal-doorkeepr-auth { - .modal-body { - padding: $gl-padding; - } +.doorkeeper-authorize { + max-width: px-to-rem(500px); } .created-deploy-token-container { @@ -316,12 +314,6 @@ } } -.mirror-error-badge { - background-color: $red-400; - border-radius: $border-radius-default; - color: $white; -} - .push-pull-table { margin-top: 1em; } diff --git a/app/assets/stylesheets/pages/sherlock.scss b/app/assets/stylesheets/pages/sherlock.scss deleted file mode 100644 index 55b0b5295af..00000000000 --- a/app/assets/stylesheets/pages/sherlock.scss +++ /dev/null @@ -1,31 +0,0 @@ -table .sherlock-code { - max-width: 700px; -} - -.sherlock-code { - pre { - word-wrap: normal; - - code { - white-space: pre; - } - } -} - -.sherlock-line-samples-table { - thead th, - tbody td { - font-size: 13px !important; - text-align: right; - padding: 0 10px !important; - } - - .slow { - color: $red-500; - font-weight: $gl-font-weight-bold; - } -} - -.sherlock-file-sample pre { - padding-top: 28px !important; -} diff --git a/app/assets/stylesheets/pages/users.scss b/app/assets/stylesheets/pages/users.scss index 917d16a9c53..3dcc17df61a 100644 --- a/app/assets/stylesheets/pages/users.scss +++ b/app/assets/stylesheets/pages/users.scss @@ -1,7 +1,3 @@ -.user-sort-dropdown { - margin-left: $gl-padding-8; -} - .user-search-form { position: relative; diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index f2874e67796..5024b082b99 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -129,5 +129,5 @@ } html.with-performance-bar .nav-sidebar { - top: $header-height + $performance-bar-height; + top: calc(#{$header-height} + #{$performance-bar-height}); } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index c9ff8205142..c72de0e6f29 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -140,7 +140,7 @@ h1 { color: #fafafa; background-color: #333; background-clip: padding-box; - border: 1px solid #404040; + border: 1px solid #868686; border-radius: 0.25rem; } @media (prefers-reduced-motion: reduce) { @@ -314,6 +314,10 @@ h1 { padding-left: 0.6em; border-radius: 10rem; } +.badge-info { + color: #fff; + background-color: #428fdc; +} .bg-transparent { background-color: transparent !important; } @@ -372,6 +376,24 @@ h1 { padding-left: 0.5rem; padding-right: 0.5rem; } +.gl-badge.sm { + padding-top: 0; + padding-bottom: 0; +} +.gl-badge.badge-info { + background-color: #064787; + color: #9dc7f1; +} +a.gl-badge.badge-info.active, +a.gl-badge.badge-info:active { + color: #e9f3fc; + 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); + outline: none; +} .gl-button .gl-badge { top: 0; } @@ -704,7 +726,7 @@ input { padding: 0 16px; z-index: 1000; margin-bottom: 0; - min-height: 40px; + min-height: var(--header-height, 40px); border: 0; position: fixed; top: 0; @@ -729,7 +751,7 @@ input { display: flex; justify-content: space-between; position: relative; - min-height: 40px; + min-height: var(--header-height, 40px); padding-left: 0; } .navbar-gitlab .header-content .title-container { @@ -815,7 +837,7 @@ input { .container-fluid .navbar-nav li - .badge.badge-pill:not(.merge-request-badge) { + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { box-shadow: none; font-weight: 600; } @@ -898,8 +920,10 @@ input { line-height: 18px; margin: 4px 0 4px 2px; } -.title-container .badge.badge-pill:not(.merge-request-badge), -.navbar-nav .badge.badge-pill:not(.merge-request-badge) { +.title-container + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge), +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { position: inherit; font-weight: 400; margin-left: -6px; @@ -910,17 +934,22 @@ input { border-radius: 7px; box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); } -.title-container .badge.badge-pill:not(.merge-request-badge).green-badge, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { +.title-container + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge, +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge { background-color: var(--green-400, #108548); } .title-container - .badge.badge-pill:not(.merge-request-badge).merge-requests-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count, +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count { background-color: var(--orange-400, #ab6100); } -.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { +.title-container + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count, +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count { background-color: var(--blue-400, #1f75cb); } .title-container .canary-badge .badge, @@ -1030,7 +1059,7 @@ input { left: 0; z-index: 600; width: 220px; - top: 40px; + top: var(--header-height, 40px); background-color: #303030; transform: translate3d(0, 0, 0); } @@ -1367,7 +1396,7 @@ input { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } -.sidebar-top-level-items > li .badge.badge-pill { +.sidebar-top-level-items > li .badge.badge-pill:not(.gl-badge) { border-radius: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; @@ -1381,7 +1410,7 @@ input { .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } -.sidebar-top-level-items > li.active .badge.badge-pill { +.sidebar-top-level-items > li.active .badge.badge-pill:not(.gl-badge) { font-weight: 400; color: #9dc7f1; } @@ -1766,6 +1795,9 @@ body.gl-dark { .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { background-color: var(--indigo-900-alpha-008); } +body.gl-dark { + --gl-theme-accent: #868686; +} body.gl-dark .navbar-gitlab { background-color: #fafafa; } @@ -1838,7 +1870,7 @@ body.gl-dark .header-search input::placeholder { color: rgba(250, 250, 250, 0.8); } body.gl-dark .header-search input:active::placeholder { - color: #fafafa; + color: #868686; } body.gl-dark .search form { background-color: rgba(250, 250, 250, 0.2); diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index a57202515ad..2f79c86cdc6 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -121,7 +121,7 @@ h1 { color: #303030; background-color: #fff; background-clip: padding-box; - border: 1px solid #dbdbdb; + border: 1px solid #868686; border-radius: 0.25rem; } @media (prefers-reduced-motion: reduce) { @@ -295,6 +295,10 @@ h1 { padding-left: 0.6em; border-radius: 10rem; } +.badge-info { + color: #fff; + background-color: #1f75cb; +} .bg-transparent { background-color: transparent !important; } @@ -353,6 +357,24 @@ h1 { padding-left: 0.5rem; padding-right: 0.5rem; } +.gl-badge.sm { + padding-top: 0; + padding-bottom: 0; +} +.gl-badge.badge-info { + background-color: #cbe2f9; + color: #0b5cad; +} +a.gl-badge.badge-info.active, +a.gl-badge.badge-info:active { + color: #033464; + 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); + outline: none; +} .gl-button .gl-badge { top: 0; } @@ -685,7 +707,7 @@ input { padding: 0 16px; z-index: 1000; margin-bottom: 0; - min-height: 40px; + min-height: var(--header-height, 40px); border: 0; position: fixed; top: 0; @@ -710,7 +732,7 @@ input { display: flex; justify-content: space-between; position: relative; - min-height: 40px; + min-height: var(--header-height, 40px); padding-left: 0; } .navbar-gitlab .header-content .title-container { @@ -796,7 +818,7 @@ input { .container-fluid .navbar-nav li - .badge.badge-pill:not(.merge-request-badge) { + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { box-shadow: none; font-weight: 600; } @@ -879,8 +901,10 @@ input { line-height: 18px; margin: 4px 0 4px 2px; } -.title-container .badge.badge-pill:not(.merge-request-badge), -.navbar-nav .badge.badge-pill:not(.merge-request-badge) { +.title-container + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge), +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { position: inherit; font-weight: 400; margin-left: -6px; @@ -891,17 +915,22 @@ input { border-radius: 7px; box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); } -.title-container .badge.badge-pill:not(.merge-request-badge).green-badge, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).green-badge { +.title-container + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge, +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge { background-color: var(--green-400, #2da160); } .title-container - .badge.badge-pill:not(.merge-request-badge).merge-requests-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).merge-requests-count { + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count, +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count { background-color: var(--orange-400, #c17d10); } -.title-container .badge.badge-pill:not(.merge-request-badge).todos-count, -.navbar-nav .badge.badge-pill:not(.merge-request-badge).todos-count { +.title-container + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count, +.navbar-nav + .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count { background-color: var(--blue-400, #428fdc); } .title-container .canary-badge .badge, @@ -1011,7 +1040,7 @@ input { left: 0; z-index: 600; width: 220px; - top: 40px; + top: var(--header-height, 40px); background-color: #f0f0f0; transform: translate3d(0, 0, 0); } @@ -1348,7 +1377,7 @@ input { border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } -.sidebar-top-level-items > li .badge.badge-pill { +.sidebar-top-level-items > li .badge.badge-pill:not(.gl-badge) { border-radius: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; @@ -1362,7 +1391,7 @@ input { .sidebar-sub-level-items:not(.is-fly-out-only) { display: block; } -.sidebar-top-level-items > li.active .badge.badge-pill { +.sidebar-top-level-items > li.active .badge.badge-pill:not(.gl-badge) { font-weight: 400; color: #0b5cad; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 3daeeb30082..3ed257caf60 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -189,7 +189,7 @@ hr { color: #303030; background-color: #fff; background-clip: padding-box; - border: 1px solid #dbdbdb; + border: 1px solid #868686; border-radius: 0.25rem; } @media (prefers-reduced-motion: reduce) { @@ -419,7 +419,7 @@ body.navless { } } .navless-container { - margin-top: 40px; + margin-top: var(--header-height, 40px); padding-top: 32px; } .btn { @@ -506,7 +506,7 @@ label.label-bold { } .navbar-empty { justify-content: center; - height: 40px; + height: var(--header-height, 40px); background: #fff; border-bottom: 1px solid #dbdbdb; } @@ -548,6 +548,8 @@ svg { } .login-page .flash-container { margin-bottom: 16px; + position: relative; + top: 8px; } .login-page .brand-holder { font-size: 18px; @@ -770,6 +772,9 @@ svg { .gl-mt-2 { margin-top: 0.25rem; } +.gl-mt-5 { + margin-top: 1rem; +} .gl-mb-3 { margin-bottom: 0.5rem; } diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index e119af716a6..ec0928fc3d4 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -4,12 +4,16 @@ */ @mixin gitlab-theme( $search-and-nav-links, - $active-tab-border, + $accent, $border-and-box-shadow, $sidebar-text, $nav-svg-color, $color-alternate ) { + // Set custom properties + + --gl-theme-accent: #{$accent}; + // Header .navbar-gitlab { @@ -163,7 +167,7 @@ &:focus, &:active { &::placeholder { - color: $search-and-nav-links; + color: $gray-400; } } } @@ -219,22 +223,6 @@ } } - .nav-links li { - &.active a, - &.md-header-tab.active button, - a.active { - border-bottom: 2px solid $active-tab-border; - - .badge.badge-pill { - font-weight: $gl-font-weight-bold; - } - } - } - - .emoji-picker-category-active { - border-bottom-color: $active-tab-border; - } - .branch-header-title { color: $border-and-box-shadow; } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 2623de80fe9..0e7e52129b4 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -58,6 +58,13 @@ } } +.gl-first-child-ml-sm-0 > a:first-child, +.gl-first-child-ml-sm-0 > button:first-child { + @include media-breakpoint-up(sm) { + @include gl-ml-0; + } +} + .mh-50vh { max-height: 50vh; } .min-width-0 { @@ -240,16 +247,6 @@ $gl-line-height-42: px-to-rem(42px); max-width: 50%; } -// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1465 -.gl-popover { - .popover-header { - .gl-button.close { - margin-top: -$gl-spacing-scale-3; - margin-right: -$gl-spacing-scale-4; - } - } -} - // Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1490 .gl-w-grid-size-28 { width: $grid-size * 28; @@ -307,3 +304,8 @@ $gl-line-height-42: px-to-rem(42px); width: 25%; } } + +// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2600 +.gl-pr-10 { + padding-right: $gl-spacing-scale-10; +} |