summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r--app/assets/stylesheets/_page_specific_files.scss1
-rw-r--r--app/assets/stylesheets/components/whats_new.scss6
-rw-r--r--app/assets/stylesheets/framework/contextual_sidebar.scss8
-rw-r--r--app/assets/stylesheets/framework/diffs.scss28
-rw-r--r--app/assets/stylesheets/framework/emojis.scss4
-rw-r--r--app/assets/stylesheets/framework/flash.scss4
-rw-r--r--app/assets/stylesheets/framework/header.scss4
-rw-r--r--app/assets/stylesheets/framework/layout.scss8
-rw-r--r--app/assets/stylesheets/framework/mixins.scss26
-rw-r--r--app/assets/stylesheets/framework/secondary_navigation_elements.scss10
-rw-r--r--app/assets/stylesheets/framework/sidebar.scss2
-rw-r--r--app/assets/stylesheets/framework/system_messages.scss10
-rw-r--r--app/assets/stylesheets/framework/typography.scss15
-rw-r--r--app/assets/stylesheets/framework/variables.scss31
-rw-r--r--app/assets/stylesheets/framework/variables_overrides.scss2
-rw-r--r--app/assets/stylesheets/framework/wells.scss27
-rw-r--r--app/assets/stylesheets/highlight/white_base.scss49
-rw-r--r--app/assets/stylesheets/notify.scss12
-rw-r--r--app/assets/stylesheets/page_bundles/boards.scss4
-rw-r--r--app/assets/stylesheets/page_bundles/build.scss6
-rw-r--r--app/assets/stylesheets/page_bundles/cycle_analytics.scss6
-rw-r--r--app/assets/stylesheets/page_bundles/import.scss2
-rw-r--r--app/assets/stylesheets/page_bundles/issues_list.scss4
-rw-r--r--app/assets/stylesheets/page_bundles/members.scss4
-rw-r--r--app/assets/stylesheets/page_bundles/merge_requests.scss2
-rw-r--r--app/assets/stylesheets/pages/issuable.scss2
-rw-r--r--app/assets/stylesheets/pages/issues.scss2
-rw-r--r--app/assets/stylesheets/pages/labels.scss12
-rw-r--r--app/assets/stylesheets/pages/login.scss4
-rw-r--r--app/assets/stylesheets/pages/merge_requests.scss18
-rw-r--r--app/assets/stylesheets/pages/notes.scss2
-rw-r--r--app/assets/stylesheets/pages/profile.scss25
-rw-r--r--app/assets/stylesheets/pages/settings.scss12
-rw-r--r--app/assets/stylesheets/pages/sherlock.scss31
-rw-r--r--app/assets/stylesheets/pages/users.scss4
-rw-r--r--app/assets/stylesheets/performance_bar.scss2
-rw-r--r--app/assets/stylesheets/startup/startup-dark.scss64
-rw-r--r--app/assets/stylesheets/startup/startup-general.scss59
-rw-r--r--app/assets/stylesheets/startup/startup-signin.scss11
-rw-r--r--app/assets/stylesheets/themes/theme_helper.scss24
-rw-r--r--app/assets/stylesheets/utilities.scss22
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;
+}