Welcome to mirror list, hosted at ThFree Co, Russian Federation.

gitlab.com/gitlab-org/gitlab-foss.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-08-20 21:42:06 +0300
committerGitLab Bot <gitlab-bot@gitlab.com>2020-08-20 21:42:06 +0300
commit6e4e1050d9dba2b7b2523fdd1768823ab85feef4 (patch)
tree78be5963ec075d80116a932011d695dd33910b4e /app/assets/stylesheets
parent1ce776de4ae122aba3f349c02c17cebeaa8ecf07 (diff)
Add latest changes from gitlab-org/gitlab@13-3-stable-ee
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r--app/assets/stylesheets/application.scss8
-rw-r--r--app/assets/stylesheets/components/avatar.scss2
-rw-r--r--app/assets/stylesheets/components/dashboard_skeleton.scss6
-rw-r--r--app/assets/stylesheets/components/design_management/design.scss4
-rw-r--r--app/assets/stylesheets/components/design_management/design_list_item.scss9
-rw-r--r--app/assets/stylesheets/components/related_items_list.scss24
-rw-r--r--app/assets/stylesheets/components/rich_content_editor.scss6
-rw-r--r--app/assets/stylesheets/fontawesome_custom.scss332
-rw-r--r--app/assets/stylesheets/framework/awards.scss2
-rw-r--r--app/assets/stylesheets/framework/badges.scss2
-rw-r--r--app/assets/stylesheets/framework/broadcast_messages.scss2
-rw-r--r--app/assets/stylesheets/framework/buttons.scss6
-rw-r--r--app/assets/stylesheets/framework/ci_variable_list.scss3
-rw-r--r--app/assets/stylesheets/framework/common.scss12
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss1
-rw-r--r--app/assets/stylesheets/framework/feature_highlight.scss6
-rw-r--r--app/assets/stylesheets/framework/files.scss2
-rw-r--r--app/assets/stylesheets/framework/filters.scss42
-rw-r--r--app/assets/stylesheets/framework/forms.scss2
-rw-r--r--app/assets/stylesheets/framework/gitlab_theme.scss12
-rw-r--r--app/assets/stylesheets/framework/icons.scss6
-rw-r--r--app/assets/stylesheets/framework/images.scss8
-rw-r--r--app/assets/stylesheets/framework/lists.scss6
-rw-r--r--app/assets/stylesheets/framework/mixins.scss4
-rw-r--r--app/assets/stylesheets/framework/responsive_tables.scss2
-rw-r--r--app/assets/stylesheets/framework/secondary_navigation_elements.scss4
-rw-r--r--app/assets/stylesheets/framework/selects.scss2
-rw-r--r--app/assets/stylesheets/framework/sidebar.scss7
-rw-r--r--app/assets/stylesheets/framework/snippets.scss4
-rw-r--r--app/assets/stylesheets/framework/spinner.scss2
-rw-r--r--app/assets/stylesheets/framework/stacked_progress_bar.scss4
-rw-r--r--app/assets/stylesheets/framework/tables.scss4
-rw-r--r--app/assets/stylesheets/framework/toggle.scss51
-rw-r--r--app/assets/stylesheets/framework/typography.scss6
-rw-r--r--app/assets/stylesheets/framework/variables.scss31
-rw-r--r--app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss2
-rw-r--r--app/assets/stylesheets/page_bundles/ide.scss11
-rw-r--r--app/assets/stylesheets/pages/alert_management/details.scss6
-rw-r--r--app/assets/stylesheets/pages/alert_management/severity-icons.scss4
-rw-r--r--app/assets/stylesheets/pages/boards.scss34
-rw-r--r--app/assets/stylesheets/pages/builds.scss4
-rw-r--r--app/assets/stylesheets/pages/clusters.scss2
-rw-r--r--app/assets/stylesheets/pages/commits.scss6
-rw-r--r--app/assets/stylesheets/pages/diff.scss3
-rw-r--r--app/assets/stylesheets/pages/editor.scss11
-rw-r--r--app/assets/stylesheets/pages/environments.scss9
-rw-r--r--app/assets/stylesheets/pages/graph.scss4
-rw-r--r--app/assets/stylesheets/pages/incident_management_list.scss (renamed from app/assets/stylesheets/pages/alert_management/list.scss)88
-rw-r--r--app/assets/stylesheets/pages/issuable.scss20
-rw-r--r--app/assets/stylesheets/pages/labels.scss4
-rw-r--r--app/assets/stylesheets/pages/members.scss4
-rw-r--r--app/assets/stylesheets/pages/merge_requests.scss7
-rw-r--r--app/assets/stylesheets/pages/note_form.scss4
-rw-r--r--app/assets/stylesheets/pages/notes.scss29
-rw-r--r--app/assets/stylesheets/pages/packages.scss11
-rw-r--r--app/assets/stylesheets/pages/pipelines.scss39
-rw-r--r--app/assets/stylesheets/pages/projects.scss35
-rw-r--r--app/assets/stylesheets/pages/prometheus.scss21
-rw-r--r--app/assets/stylesheets/pages/reports.scss2
-rw-r--r--app/assets/stylesheets/pages/runners.scss4
-rw-r--r--app/assets/stylesheets/pages/search.scss2
-rw-r--r--app/assets/stylesheets/pages/settings.scss5
-rw-r--r--app/assets/stylesheets/pages/status.scss4
-rw-r--r--app/assets/stylesheets/pages/todos.scss4
-rw-r--r--app/assets/stylesheets/pages/tree.scss6
-rw-r--r--app/assets/stylesheets/pages/users.scss6
-rw-r--r--app/assets/stylesheets/startup/_cloaking.scss13
-rw-r--r--app/assets/stylesheets/startup/startup-general.scss5
-rw-r--r--app/assets/stylesheets/utilities.scss10
69 files changed, 709 insertions, 334 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 41fb62c28e6..f5393ef47d6 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -18,8 +18,8 @@
// GitLab UI framework
@import 'framework';
-// Font icons
-@import 'font-awesome';
+// Custom Fontawesome icons
+@import 'fontawesome_custom';
// Page specific styles (issues, projects etc):
@import 'pages/**/*';
@@ -51,3 +51,7 @@
@media print {
@import 'print';
}
+
+/* Rules for overriding cloaking in startup-general.scss */
+@import 'startup/cloaking';
+@include cloak-startup-scss(block);
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 6bb7e9d215e..67213eedca8 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -125,7 +125,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
.identicon {
text-align: center;
vertical-align: top;
- color: $gray-800;
+ color: $gray-700;
background-color: $gray-darker;
// Sizes
diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss
index 64091201221..09ba89c0782 100644
--- a/app/assets/stylesheets/components/dashboard_skeleton.scss
+++ b/app/assets/stylesheets/components/dashboard_skeleton.scss
@@ -25,7 +25,7 @@
}
&-icon {
- color: $gray-500;
+ color: $gray-300;
}
&-footer {
@@ -33,7 +33,7 @@
height: $gl-padding-32;
&-arrow {
- color: $gray-300;
+ color: $gray-200;
}
&-downstream {
@@ -41,7 +41,7 @@
}
&-extra {
- background-color: $gray-400;
+ background-color: $gray-200;
font-size: 10px;
line-height: $gl-line-height;
width: $gl-padding;
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index 33f03fb5949..80421598966 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -31,7 +31,7 @@
border-radius: 50%;
&.resolved {
- background-color: $gray-700;
+ background-color: $gray-500;
}
}
}
@@ -164,7 +164,7 @@
}
&:hover {
- border-color: $gray-500;
+ border-color: $gray-300;
}
}
diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss
index 3a6781b666e..b7f6b2026fe 100644
--- a/app/assets/stylesheets/components/design_management/design_list_item.scss
+++ b/app/assets/stylesheets/components/design_management/design_list_item.scss
@@ -1,12 +1,3 @@
-.designs-root {
- border: 2px dashed transparent;
- transition: border $gl-transition-duration-medium $general-hover-transition-curve;
-
- &:hover {
- border-color: $gray-100;
- }
-}
-
.design-list-item {
height: 280px;
text-decoration: none;
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index dd749b4df1a..c0699844387 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -81,30 +81,9 @@ $item-remove-button-space: 42px;
max-width: 0;
}
- .status {
- &-at-risk {
- color: $red-500;
- background-color: $red-100;
- }
-
- &-needs-attention {
- color: $orange-700;
- background-color: $orange-100;
- }
-
- &-on-track {
- color: $green-600;
- background-color: $green-100;
- }
- }
-
- .gl-label-text {
- font-weight: $gl-font-weight-bold;
- }
-
.bullet-separator {
font-size: 9px;
- color: $gray-400;
+ color: $gray-200;
}
}
@@ -213,6 +192,7 @@ $item-remove-button-space: 42px;
margin-right: $gl-padding-4 / 2;
line-height: 0;
border-color: transparent;
+ background-color: transparent;
color: $gl-text-color-secondary;
.related-items-tree & {
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
index 8d31b386d9e..ade1bb2099d 100644
--- a/app/assets/stylesheets/components/rich_content_editor.scss
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -20,15 +20,15 @@
.tui-popup-wrapper {
@include gl-overflow-hidden;
@include gl-rounded-base;
- @include gl-border-gray-400;
+ @include gl-border-gray-200;
hr {
@include gl-m-0;
- @include gl-bg-gray-400;
+ @include gl-bg-gray-200;
}
button {
- @include gl-text-gray-800;
+ @include gl-text-gray-700;
}
}
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
new file mode 100644
index 00000000000..a2117e9c012
--- /dev/null
+++ b/app/assets/stylesheets/fontawesome_custom.scss
@@ -0,0 +1,332 @@
+/*!
+ * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
+ * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+
+// stylelint-disable property-no-vendor-prefix
+// stylelint-disable at-rule-no-vendor-prefix
+// stylelint-disable stylelint-gitlab/duplicate-selectors
+// scss-lint:disable MergeableSelector
+@font-face {
+ font-family: 'FontAwesome';
+ src: asset-url('fontawesome-webfont.woff2?v=4.7.0') format('woff2'), asset-url('fontawesome-webfont.woff?v=4.7.0') format('woff');
+ font-weight: normal;
+ font-style: normal;
+}
+
+.fa {
+ display: inline-block;
+ font: normal normal normal 14px/1 FontAwesome;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+ font-size: 1.33333333em;
+ line-height: 0.75em;
+ vertical-align: -15%;
+}
+
+.fa-2x {
+ font-size: 2em;
+}
+
+.fa-3x {
+ font-size: 3em;
+}
+
+.fa-4x {
+ font-size: 4em;
+}
+
+.fa-5x {
+ font-size: 5em;
+}
+
+.fa-fw {
+ width: 1.28571429em;
+ text-align: center;
+}
+
+.fa-spin {
+ -webkit-animation: fa-spin 2s infinite linear;
+ animation: fa-spin 2s infinite linear;
+}
+
+@-webkit-keyframes fa-spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
+
+@keyframes fa-spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
+
+.fa-inverse {
+ color: $white;
+}
+
+.fa-question-circle::before {
+ content: '\f059';
+}
+
+.fa-chevron-down::before {
+ content: '\f078';
+}
+
+.fa-remove::before,
+.fa-times::before {
+ content: '\f00d';
+}
+
+.fa-caret-down::before {
+ content: '\f0d7';
+}
+
+.fa-check::before {
+ content: '\f00c';
+}
+
+.fa-search::before {
+ content: '\f002';
+}
+
+.fa-warning::before,
+.fa-exclamation-triangle::before {
+ content: '\f071';
+}
+
+.fa-external-link::before {
+ content: '\f08e';
+}
+
+.fa-spinner::before {
+ content: '\f110';
+}
+
+.fa-calendar::before {
+ content: '\f073';
+}
+
+.fa-angle-double-right::before {
+ content: '\f101';
+}
+
+.fa-trash::before {
+ content: '\f1f8';
+}
+
+.fa-angle-double-left::before {
+ content: '\f100';
+}
+
+.fa-arrow-left::before {
+ content: '\f060';
+}
+
+.fa-trash-o::before {
+ content: '\f014';
+}
+
+.fa-caret-right::before {
+ content: '\f0da';
+}
+
+.fa-refresh::before {
+ content: '\f021';
+}
+
+.fa-chevron-up::before {
+ content: '\f077';
+}
+
+.fa-file-text-o::before {
+ content: '\f0f6';
+}
+
+.fa-github::before {
+ content: '\f09b';
+}
+
+.fa-paperclip::before {
+ content: '\f0c6';
+}
+
+.fa-tag::before {
+ content: '\f02b';
+}
+
+.fa-arrow-up::before {
+ content: '\f062';
+}
+
+.fa-bug::before {
+ content: '\f188';
+}
+
+.fa-google::before {
+ content: '\f1a0';
+}
+
+.fa-user::before {
+ content: '\f007';
+}
+
+.fa-exclamation-circle::before {
+ content: '\f06a';
+}
+
+.fa-bell::before {
+ content: '\f0f3';
+}
+
+.fa-arrow-down::before {
+ content: '\f063';
+}
+
+.fa-bitbucket-square::before {
+ content: '\f172';
+}
+
+.fa-file-o::before {
+ content: '\f016';
+}
+
+.fa-users::before {
+ content: '\f0c0';
+}
+
+.fa-tags::before {
+ content: '\f02c';
+}
+
+.fa-lightbulb-o::before {
+ content: '\f0eb';
+}
+
+.fa-circle::before {
+ content: '\f111';
+}
+
+.fa-bitbucket::before {
+ content: '\f171';
+}
+
+.fa-git::before {
+ content: '\f1d3';
+}
+
+.fa-folder::before {
+ content: '\f07b';
+}
+
+.fa-archive::before {
+ content: '\f187';
+}
+
+.fa-thumb-tack::before {
+ content: '\f08d';
+}
+
+.fa-fire::before {
+ content: '\f06d';
+}
+
+.fa-download::before {
+ content: '\f019';
+}
+
+.fa-globe::before {
+ content: '\f0ac';
+}
+
+.fa-pause::before {
+ content: '\f04c';
+}
+
+.fa-play::before {
+ content: '\f04b';
+}
+
+.fa-arrow-right::before {
+ content: '\f061';
+}
+
+.fa-user-secret::before {
+ content: '\f21b';
+}
+
+.fa-search-plus::before {
+ content: '\f00e';
+}
+
+.fa-search-minus::before {
+ content: '\f010';
+}
+
+.fa-share::before {
+ content: '\f064';
+}
+
+.fa-book::before {
+ content: '\f02d';
+}
+
+.fa-times-circle::before {
+ content: '\f057';
+}
+
+.fa-skype::before {
+ content: '\f17e';
+}
+
+.fa-linkedin-square::before {
+ content: '\f08c';
+}
+
+.fa-twitter-square::before {
+ content: '\f081';
+}
+
+.fa-unlink::before {
+ content: '\f127';
+}
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ clip: auto;
+}
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 86e701604b5..4f09f1a394b 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -232,7 +232,7 @@
height: $default-icon-size;
width: $default-icon-size;
border-radius: 50%;
- fill: $gray-700;
+ fill: $gray-500;
}
}
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index 5b8a4bf964e..3f1d742ca14 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -1,7 +1,7 @@
.badge.badge-pill:not(.gl-badge) {
font-weight: $gl-font-weight-normal;
background-color: $badge-bg;
- color: $gray-800;
+ color: $gray-700;
vertical-align: baseline;
// Do not use this!
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index f7836213e5c..c1647c16c77 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -38,7 +38,7 @@
}
.broadcast-message-dismiss {
- color: $gray-800;
+ color: $gray-700;
}
}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index fd5b3f74c4a..893a494d240 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -274,8 +274,6 @@
svg {
height: 15px;
width: 15px;
- position: relative;
- top: 2px;
}
svg,
@@ -495,6 +493,10 @@
}
}
+// The .btn-svg class is available for legacy icon buttons to
+// preserve a 34px height and have 16x16 icons at the same time.
+// Once a button is migrated (to the current 32px height)
+// please remove this class from the new button.
.btn-svg svg {
@include btn-svg;
}
diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss
index cae7b9b5e46..2204b037f69 100644
--- a/app/assets/stylesheets/framework/ci_variable_list.scss
+++ b/app/assets/stylesheets/framework/ci_variable_list.scss
@@ -86,7 +86,6 @@
height: $input-height;
padding: 0;
background: transparent;
- border: 0;
color: $gl-text-color-secondary;
&:hover,
@@ -101,7 +100,7 @@
}
.group-variable-list {
- color: $gray-700;
+ color: $gray-500;
.table-section:not(:first-child) {
@include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 1abb7a9c06f..00679cf20fa 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -6,7 +6,7 @@
.cdark { color: $common-gray-dark; }
.fwhite { fill: $white; }
-.fgray { fill: $gray-700; }
+.fgray { fill: $gray-500; }
.text-plain,
.text-plain:hover {
@@ -74,7 +74,7 @@
.hint {
font-style: italic;
- color: $gl-gray-400;
+ color: $gl-gray-200;
}
.light { color: $gl-text-color; }
@@ -168,7 +168,7 @@ table {
}
p.time {
- color: $gl-gray-400;
+ color: $gl-gray-200;
font-size: 90%;
margin: 30px 3px 3px 2px;
}
@@ -396,15 +396,11 @@ img.emoji {
🚨 Do not use these classes — they are deprecated and being removed. 🚨
See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
**/
-.prepend-top-10 { margin-top: 10px; }
.prepend-top-15 { margin-top: 15px; }
.prepend-top-20 { margin-top: 20px; }
.prepend-left-15 { margin-left: 15px; }
.prepend-left-20 { margin-left: 20px; }
-.prepend-left-64 { margin-left: 64px; }
-.append-right-15 { margin-right: 15px; }
.append-right-20 { margin-right: 20px; }
-.append-bottom-10 { margin-bottom: 10px; }
.append-bottom-20 { margin-bottom: 20px; }
.ml-10 { margin-left: 4.5rem; }
.inline { display: inline-block; }
@@ -513,7 +509,7 @@ img.emoji {
}
&.is-dragging {
- background-color: $gray-600;
+ background-color: $gray-400;
}
}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 32c276ea6d2..6b742853f8f 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -312,6 +312,7 @@
> a,
button,
+ .gl-button.btn-link,
.menu-item {
@include dropdown-link;
}
diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss
index f9b167669a6..8d411747b28 100644
--- a/app/assets/stylesheets/framework/feature_highlight.scss
+++ b/app/assets/stylesheets/framework/feature_highlight.scss
@@ -29,12 +29,6 @@
}
}
-.is-showing-fly-out {
- .feature-highlight {
- display: none;
- }
-}
-
.feature-highlight-popover-content {
display: none;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 8fd507a45bb..ef7d39a5e7e 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -209,7 +209,7 @@
}
.doc-versions {
- color: $gray-600;
+ color: $gray-400;
&:hover {
color: $gray-900;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 8f209d2d99a..ed4281123cd 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -134,20 +134,20 @@
padding-left: 8px;
padding-right: 0;
- .fa-close {
+ .close-icon {
color: $gl-text-color-secondary;
}
- &:hover .fa-close {
+ &:hover .close-icon {
color: $gl-text-color;
}
&.inverted {
- .fa-close {
+ .close-icon {
color: $gl-text-color-secondary-inverted;
}
- &:hover .fa-close {
+ &:hover .close-icon {
color: $gl-text-color-inverted;
}
}
@@ -307,23 +307,6 @@
color: $gl-text-color;
border-color: $border-color;
}
-
- svg {
- height: 14px;
- width: 14px;
- vertical-align: middle;
- margin-bottom: 4px;
- }
-
- .dropdown-toggle-text {
- display: inline-block;
- color: inherit;
-
- .fa {
- vertical-align: middle;
- color: inherit;
- }
- }
}
.filtered-search-history-dropdown {
@@ -458,6 +441,23 @@
}
.vue-filtered-search-bar-container {
+ .gl-search-box-by-click {
+ // Absolute width is needed to prevent flex to grow
+ // beyond the available width.
+ .gl-filtered-search-scrollable {
+ width: 1px;
+ }
+
+ // There are several styling issues happening while using
+ // `GlFilteredSearch` in roadmap due to some of our global
+ // styles which we need to override until those are fixed
+ // at framework level.
+ // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/908
+ .input-group-prepend + .gl-filtered-search-scrollable {
+ border-radius: 0;
+ }
+ }
+
@include media-breakpoint-up(md) {
.sort-dropdown-container {
margin-left: 10px;
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index ec8d5806345..7be676ed83c 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -227,7 +227,7 @@ label {
right: 0.8em;
top: 50%;
transform: translateY(-50%);
- color: $gray-600;
+ color: $gray-400;
}
.input-md {
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 288849ba438..97bd6ca6fe2 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -295,9 +295,9 @@ body {
&.ui-dark {
@include gitlab-theme(
$gray-200,
+ $gray-300,
$gray-500,
$gray-700,
- $gray-800,
$gray-900,
$white
);
@@ -305,12 +305,12 @@ body {
&.ui-light {
@include gitlab-theme(
+ $gray-500,
$gray-700,
- $gray-800,
- $gray-700,
- $gray-700,
+ $gray-500,
+ $gray-500,
$gray-50,
- $gray-700
+ $gray-500
);
.navbar-gitlab {
@@ -341,7 +341,7 @@ body {
.container-fluid {
.navbar-toggler,
.navbar-toggler:hover {
- color: $gray-700;
+ color: $gray-500;
border-left: 1px solid $gray-100;
}
}
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 9ae313db4c1..ec0755b1614 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -34,11 +34,11 @@
.ci-status-icon-preparing {
svg {
- fill: $gray-500;
+ fill: $gray-300;
}
&.add-border {
- @include borderless-status-icon($gray-500);
+ @include borderless-status-icon($gray-300);
}
}
@@ -98,5 +98,5 @@
display: flex;
align-items: center;
justify-content: center;
- color: $gray-700;
+ color: $gray-500;
}
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 0fae1c7d235..195a66bf9e5 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -48,4 +48,12 @@ svg {
@include svg-size(#{$svg-size}px);
}
}
+
+ &.s12 {
+ vertical-align: -1px;
+ }
+
+ &.s16 {
+ vertical-align: -3px;
+ }
}
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 738150dbd2e..9d67b175294 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -132,10 +132,10 @@ ul.content-list {
a {
color: $gl-text-color;
- }
- .member-group-link {
- color: $blue-600;
+ &.inline-link {
+ color: $blue-600;
+ }
}
.description {
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 918ca448c21..61e8c0d4718 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -326,8 +326,8 @@
line-height: 1;
padding: 0;
min-width: 16px;
- color: $gray-600;
- fill: $gray-600;
+ color: $gray-400;
+ fill: $gray-400;
.fa {
position: relative;
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 1878fac1c60..07c3eb19fd4 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -20,7 +20,7 @@
@extend .gl-responsive-table-row-layout;
margin-top: 10px;
border: 1px solid $border-color;
- color: $gray-700;
+ color: $gray-500;
&.gl-responsive-table-row-clickable {
&:hover {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index f85efc63645..1352fa13e1a 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -415,7 +415,3 @@
}
}
}
-
-.new-project-item-select-button .fa-caret-down {
- margin-left: 2px;
-}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index c2ab6f5b8c5..e81ecfb43d5 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -285,7 +285,7 @@
.select2-highlighted {
.group-result {
.group-path {
- color: $gray-800;
+ color: $gray-700;
}
}
}
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 9b33ed1b630..4ba9db811b7 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -1,6 +1,5 @@
.content-wrapper {
width: 100%;
- transition: padding $sidebar-transition-duration;
.container-fluid {
padding: 0 $gl-padding;
@@ -13,6 +12,10 @@
}
}
+.page-initialised .content-wrapper {
+ transition: padding $sidebar-transition-duration;
+}
+
.nav-header-btn {
padding: 10px $gl-sidebar-padding;
color: inherit;
@@ -168,7 +171,7 @@
&::before {
content: '';
- border-left: 1px solid $gray-500;
+ border-left: 1px solid $gray-300;
position: absolute;
top: $gl-padding;
bottom: $gl-padding;
diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss
index dbcb5086d70..4c1c9d15121 100644
--- a/app/assets/stylesheets/framework/snippets.scss
+++ b/app/assets/stylesheets/framework/snippets.scss
@@ -32,6 +32,10 @@
.snippet-file-content {
border-radius: 3px;
+
+ + .snippet-file-content {
+ @include gl-mt-5;
+ }
}
.snippet-header {
diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss
index b7a99d421c9..d734895c7dc 100644
--- a/app/assets/stylesheets/framework/spinner.scss
+++ b/app/assets/stylesheets/framework/spinner.scss
@@ -42,7 +42,7 @@
}
&.spinner-dark {
- @include spinner-color($gray-700);
+ @include spinner-color($gray-500);
}
&.spinner-light {
diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss
index 2d16fdf4ee7..a3037549881 100644
--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -24,7 +24,7 @@
.status-unavailable {
padding: 0 10px;
- color: $gray-700;
+ color: $gray-500;
}
.status-green {
@@ -40,7 +40,7 @@
color: $gl-gray-dark;
&:hover {
- background-color: $gray-300;
+ background-color: $gray-200;
}
}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 5bc2874ea05..1f60485aa36 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -16,7 +16,7 @@ table {
* Remove this code as soon as this happens
*/
&.gl-table {
- @include gl-text-gray-700;
+ @include gl-text-gray-500;
}
&.table {
@@ -60,7 +60,7 @@ table {
}
&.original-gl-th {
- @include gl-text-gray-700;
+ @include gl-text-gray-500;
border-bottom: 1px solid $cycle-analytics-light-gray;
}
}
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 8b131f59cfc..054280f3321 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -31,7 +31,7 @@
height: 24px;
cursor: pointer;
user-select: none;
- background: $gl-gray-400;
+ background: $gray-400;
border-radius: 12px;
padding: 3px;
transition: all 0.4s ease;
@@ -51,26 +51,10 @@
display: block;
left: 0;
border-radius: 9px;
- background: $feature-toggle-color;
+ background: $white;
transition: all 0.2s ease;
-
- &,
- .toggle-icon-svg {
- width: $default-icon-size;
- height: $default-icon-size;
- }
-
- .toggle-icon-svg {
- fill: $gl-gray-400;
- }
-
- .toggle-status-checked {
- display: none;
- }
-
- .toggle-status-unchecked {
- display: inline;
- }
+ width: $default-icon-size;
+ height: $default-icon-size;
}
.loading-icon {
@@ -84,10 +68,6 @@
}
&.is-loading {
- .toggle-icon {
- display: none;
- }
-
.loading-icon {
display: block;
@@ -101,23 +81,22 @@
}
&.is-checked {
- background: $feature-toggle-color-enabled;
+ background: $blue-400;
.toggle-icon {
left: calc(100% - 18px);
+ }
+ }
- .toggle-icon-svg {
- fill: $feature-toggle-color-enabled;
- }
-
- .toggle-status-checked {
- display: inline;
- }
+ &.is-checked .toggle-icon .toggle-status-checked,
+ .toggle-icon .toggle-status-unchecked {
+ display: inline;
+ }
- .toggle-status-unchecked {
- display: none;
- }
- }
+ &.is-checked .toggle-icon .toggle-status-unchecked,
+ &.is-loading .toggle-icon,
+ .toggle-icon .toggle-status-checked {
+ display: none;
}
&.is-disabled {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index b5b86b807a6..8758fe15870 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -89,10 +89,10 @@
background-color: $gray-10;
border-width: 1px;
border-style: solid;
- border-color: $gray-100 $gray-100 $gray-400;
+ border-color: $gray-100 $gray-100 $gray-200;
border-image: none;
border-radius: 3px;
- box-shadow: 0 -1px 0 $gray-400 inset;
+ box-shadow: 0 -1px 0 $gray-200 inset;
}
h1 {
@@ -187,7 +187,7 @@
tr {
th {
- border-bottom: solid 2px $gray-300;
+ border-bottom: solid 2px $gray-200;
}
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 265dceb3c61..69e00f9b2c4 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -165,12 +165,12 @@ $gray-10: #fafafa !default;
$gray-50: #f0f0f0 !default;
$gray-100: #dbdbdb !default;
$gray-200: #bfbfbf !default;
-$gray-300: #ccc !default;
-$gray-400: #bababa !default;
-$gray-500: #a7a7a7 !default;
-$gray-600: #919191 !default;
-$gray-700: #707070 !default;
-$gray-800: #4f4f4f !default;
+$gray-300: #999 !default;
+$gray-400: #868686 !default;
+$gray-500: #666 !default;
+$gray-600: #5e5e5e !default;
+$gray-700: #525252 !default;
+$gray-800: #404040 !default;
$gray-900: #303030 !default;
$gray-950: #1f1f1f !default;
@@ -350,12 +350,12 @@ $gl-font-size-large: 16px;
$gl-font-weight-normal: 400;
$gl-font-weight-bold: 600;
$gl-text-color: $gray-900;
-$gl-text-color-secondary: $gray-700;
-$gl-text-color-tertiary: $gray-600;
+$gl-text-color-secondary: $gray-500;
+$gl-text-color-tertiary: $gray-400;
$gl-text-color-quaternary: #d6d6d6;
$gl-text-color-inverted: $white;
$gl-text-color-secondary-inverted: rgba($white, 0.85);
-$gl-text-color-disabled: $gray-600;
+$gl-text-color-disabled: $gray-400;
$gl-grayish-blue: #7f8fa4;
$gl-gray-dark: #313236;
$gl-gray-light: #5c5c5c;
@@ -446,6 +446,8 @@ $context-header-height: 60px;
$breadcrumb-min-height: 48px;
$home-panel-title-row-height: 64px;
$home-panel-avatar-mobile-size: 24px;
+$issuable-title-max-width: 350px;
+$milestone-title-max-width: 75px;
$gl-line-height: 16px;
$gl-line-height-18: 18px;
$gl-line-height-20: 20px;
@@ -637,10 +639,13 @@ $issue-boards-card-shadow: rgba(0, 0, 0, 0.1);
They probably should be derived in a smarter way.
*/
$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;
+$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;
/*
The following heights are used in environment_logs.scss and are used for calculation of the log viewer height.
*/
@@ -748,10 +753,6 @@ $login-brand-holder-color: #888;
$project-option-descr-color: #54565b;
$project-network-controls-color: #888;
-$feature-toggle-color: #fff;
-$feature-toggle-text-color: #fff;
-$feature-toggle-color-enabled: #4a8bee;
-
/*
* Monitor Charts
*/
@@ -870,7 +871,7 @@ $popover-max-width: 384px;
$popover-box-shadow: 0 2px 3px 1px $gray-100;
/*
-Issues Analytics
+Issue Analytics
*/
$issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index a8d10ea1a29..dfd7fd355a4 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -38,7 +38,7 @@
}
.badge.badge-pill {
- color: var(--ide-text-color, $gray-800);
+ color: var(--ide-text-color, $gray-700);
background-color: var(--ide-background, $badge-bg);
}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index a07755724dd..36587ecde3d 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -366,7 +366,7 @@ $ide-commit-header-height: 48px;
display: block;
margin-left: auto;
margin-right: auto;
- color: var(--ide-text-color-secondary, $gray-700);
+ color: var(--ide-text-color-secondary, $gray-500);
}
.file-status-icon {
@@ -689,7 +689,7 @@ $ide-commit-header-height: 48px;
border-bottom: 1px solid var(--ide-border-color-alt, $white-dark);
svg {
- color: var(--ide-text-color-secondary, $gray-700);
+ color: var(--ide-text-color-secondary, $gray-500);
&:focus,
&:hover {
@@ -721,7 +721,7 @@ $ide-commit-header-height: 48px;
&,
&:hover {
- color: var(--ide-text-color-secondary, $gray-700);
+ color: var(--ide-text-color-secondary, $gray-500);
}
}
@@ -863,9 +863,6 @@ $ide-commit-header-height: 48px;
.ide-external-link {
svg {
display: none;
- position: absolute;
- top: 2px;
- right: -$gl-padding;
}
&:hover,
@@ -1136,7 +1133,7 @@ $ide-commit-header-height: 48px;
.ide-file-icon-holder {
display: flex;
align-items: center;
- color: var(--ide-text-color-secondary, $gray-700);
+ color: var(--ide-text-color-secondary, $gray-500);
}
.file-row:active {
diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss
index 73a4af00c5a..0f889935583 100644
--- a/app/assets/stylesheets/pages/alert_management/details.scss
+++ b/app/assets/stylesheets/pages/alert_management/details.scss
@@ -16,12 +16,12 @@
&:not(:first-child) {
&::before {
- color: $gray-700;
+ color: $gray-500;
font-weight: normal !important;
}
div {
- color: $gray-700;
+ color: $gray-500;
}
}
@@ -35,7 +35,7 @@
}
@include media-breakpoint-down(xs) {
- .alert-details-issue-button {
+ .alert-details-incident-button {
width: 100%;
}
}
diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
index b400e80d5c5..6004697b3e1 100644
--- a/app/assets/stylesheets/pages/alert_management/severity-icons.scss
+++ b/app/assets/stylesheets/pages/alert_management/severity-icons.scss
@@ -1,4 +1,4 @@
-.alert-management-list,
+.incident-management-list,
.alert-management-details {
.icon-critical {
color: $red-800;
@@ -21,6 +21,6 @@
}
.icon-unknown {
- color: $gray-400;
+ color: $gray-200;
}
}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 049660220df..51a65b88cd0 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -59,6 +59,10 @@
height: calc(100vh - #{$issue-board-list-difference-md});
}
+ @include media-breakpoint-up(lg) {
+ height: calc(100vh - #{$issue-board-list-difference-lg});
+ }
+
.with-performance-bar & {
height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height});
@@ -69,6 +73,10 @@
@include media-breakpoint-up(md) {
height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height});
}
+
+ @include media-breakpoint-up(lg) {
+ height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height});
+ }
}
}
@@ -191,7 +199,8 @@
align-items: center;
font-size: 1em;
border-bottom: 1px solid $gray-100;
- padding: $gl-padding-8;
+ padding: 0 $gl-spacing-scale-3;
+ height: 3rem;
.js-max-issue-size::before {
content: '/';
@@ -521,7 +530,7 @@
}
&.board-card-weight {
- color: $gl-text-color;
+ color: $gl-text-color-secondary;
cursor: pointer;
&:hover {
@@ -531,8 +540,9 @@
}
.board-card-info-icon {
- color: $gray-600;
+ color: $gray-500;
margin-right: $gl-padding-4;
+ vertical-align: text-top;
}
@include media-breakpoint-down(md) {
@@ -584,3 +594,21 @@
.board-header-collapsed-info-icon:hover {
color: $gray-900;
}
+
+$epic-icons-spacing: 40px;
+
+.board-epic-lane {
+ max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing});
+
+ .page-with-icon-sidebar & {
+ max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing});
+ }
+
+ .page-with-icon-sidebar .is-compact & {
+ max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing});
+ }
+
+ .is-compact & {
+ max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing});
+ }
+}
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index 02c42d5b779..f367d9ea4d8 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -108,7 +108,7 @@
svg {
position: relative;
- top: 5px;
+ top: 3px;
margin-right: 5px;
width: 22px;
height: 22px;
@@ -275,8 +275,6 @@
overflow: auto;
svg {
- position: relative;
- top: 3px;
margin-right: 3px;
height: 14px;
width: 14px;
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 5a69aa15303..29422c1f7fa 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -166,6 +166,6 @@
.cluster-status-indicator {
&.disabled {
- background-color: $gray-600;
+ background-color: $gray-400;
}
}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 9a69afc6044..e6378fd9168 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -388,3 +388,9 @@
display: block;
color: $link-color;
}
+
+.add-review-item {
+ .gl-tab-nav-item {
+ height: 100%;
+ }
+}
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index fd5b3ff1dd8..a7b93c9eab7 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -992,7 +992,8 @@ table.code {
}
.frame .badge.badge-pill,
-.frame .image-comment-badge {
+.frame .image-comment-badge,
+.frame .comment-indicator {
// Center align badges on the frame
transform: translate(-50%, -50%);
}
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index fd11d0e3a69..9f9964ac447 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -16,6 +16,11 @@
padding: 0;
position: relative;
width: 100%;
+
+ .editor-loading-content {
+ height: 100%;
+ border: 0;
+ }
}
.ace_gutter-cell {
@@ -160,9 +165,8 @@
vertical-align: top;
@media(max-width: map-get($grid-breakpoints, lg)-1) {
- display: block;
+ display: inline-block;
width: 100%;
- margin: 5px 0;
padding: 0;
border-left: 0;
}
@@ -182,7 +186,8 @@
.gitignore-selector,
.gitlab-ci-yml-selector,
.dockerfile-selector,
- .template-type-selector {
+ .template-type-selector,
+ .metrics-dashboard-selector {
display: inline-block;
vertical-align: top;
font-family: $regular_font;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index ab6716903c7..ef7b56ac210 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -98,19 +98,10 @@
}
}
-.refresh-dashboard-button {
- margin-top: 22px;
-
- @media(max-width: map-get($grid-breakpoints, sm)) {
- margin-top: 0;
- }
-}
-
.metric-area {
opacity: 0.25;
}
-
.rect-text-metric {
fill: $white;
stroke-width: 1;
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index f9beb6fe037..c4b6cdd703d 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -49,7 +49,7 @@
text {
font-weight: bold;
font-size: 12px;
- fill: $gray-800;
+ fill: $gray-700;
}
}
}
@@ -70,5 +70,5 @@
.animate-flicker {
animation: flickerAnimation 1.5s infinite;
- fill: $gray-500;
+ fill: $gray-300;
}
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/incident_management_list.scss
index e420209b1fc..00ca3cc73e0 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/incident_management_list.scss
@@ -1,11 +1,11 @@
-.alert-management-list {
+.incident-management-list {
.new-alert {
background-color: $issues-today-bg;
}
// these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
table {
- color: $gray-700;
+ @include gl-text-gray-500;
tr {
&:focus {
@@ -14,16 +14,15 @@
td,
th {
- @include gl-pl-9;
@include gl-py-5;
@include gl-outline-none;
@include gl-relative;
}
th {
- background-color: transparent;
- font-weight: $gl-font-weight-bold;
- color: $gl-gray-600;
+ @include gl-bg-transparent;
+ @include gl-font-weight-bold;
+ @include gl-text-gray-400;
&[aria-sort='none']:hover {
background-image: url('data:image/svg+xml, %3csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"%3e %3cpath style="fill: %23BABABA;" fill-rule="evenodd" d="M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 C3.902375,11.3166 3.902375, 10.6834 4.292875,10.2929 C4.683375,9.90237 5.316575,9.90237 5.707075,10.2929 L6.999975, 11.5858 L6.999975,2 C6.999975,1.44771 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 C10.683395 ,9.90237 11.316555,9.90237 11.707085,10.2929 C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 Z"/%3e %3c/svg%3e');
@@ -39,19 +38,37 @@
}
}
}
+
+ .sortable-cell {
+ padding-left: calc(0.75rem + 0.65em);
+ }
}
}
@include media-breakpoint-down(sm) {
- .alert-management-table {
+ table {
tr {
- border-top: 0;
+ @include gl-border-t-0;
.table-col {
min-height: 68px;
+ }
+
+ &:hover {
+ @include gl-bg-white;
+ @include gl-border-none;
+ }
+
+ th,
+ td {
+ @include gl-pt-6;
+ }
+ }
+ &.alert-management-table {
+ .table-col {
&:last-child {
- background-color: $gray-10;
+ @include gl-bg-gray-10;
&::before {
content: none !important;
@@ -63,23 +80,56 @@
}
}
}
+ }
- &:hover {
- background-color: $white;
- border-color: $white;
- border-bottom-style: none;
+ .b-table-empty-row {
+ td {
+ @include gl-border-b-0;
+
+ div {
+ text-align: unset !important;
+ }
}
}
+
+ .b-table-busy-slot {
+ td {
+ @include gl-border-b-0;
+
+ div {
+ text-align: center !important;
+ }
+ }
+ }
+ }
+ }
+
+ .gl-tabs-nav {
+ border-bottom-width: 0;
+
+ .gl-tab-nav-item {
+ color: $gl-gray-600;
+
+ > .gl-tab-counter-badge {
+ color: inherit;
+ @include gl-font-sm;
+ background-color: $gray-50;
+ }
}
}
- .gl-tab-nav-item {
- color: $gl-gray-600;
+ @include media-breakpoint-down(xs) {
+ .incident-management-list-header {
+ flex-direction: column-reverse;
+ }
- > .gl-tab-counter-badge {
- color: inherit;
- @include gl-font-sm;
- background-color: $white-normal;
+ .create-incident-button {
+ @include gl-w-full;
}
}
+
+ // TODO: Abstract to `@gitlab/ui` utility set: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/921
+ .gl-fill-green-500 {
+ fill: $green-500;
+ }
}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index a7d0d4259ea..2f28361f62c 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -166,6 +166,14 @@
color: inherit;
}
+ // TODO remove this class once we can generate a correct hover utility from `gitlab/ui`,
+ // see here: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/39286#note_396767000
+ .btn-link-hover:hover {
+ * {
+ @include gl-text-blue-800;
+ }
+ }
+
.issuable-header-text {
margin-top: 7px;
}
@@ -598,18 +606,18 @@
padding: 16px 0;
small {
- color: $gray-700;
+ color: $gray-500;
}
}
.edited-text {
- color: $gray-700;
+ color: $gray-500;
display: block;
margin: 16px 0 0;
font-size: 85%;
.author-link {
- color: $gray-700;
+ color: $gray-500;
}
}
@@ -804,6 +812,10 @@
}
}
}
+
+ .milestone {
+ color: $gray-700;
+ }
}
@media(max-width: map-get($grid-breakpoints, lg)-1) {
@@ -956,7 +968,7 @@
.sidebar-collapsed-divider {
line-height: 5px;
font-size: 12px;
- color: $gray-700;
+ color: $gray-500;
+ .sidebar-collapsed-icon {
padding-top: 0;
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 73d2c3ca2f8..e37b26187e7 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -336,11 +336,11 @@
}
.label-action {
- color: $gray-800;
+ color: $gray-700;
cursor: pointer;
svg {
- fill: $gray-800;
+ fill: $gray-700;
}
&:hover {
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 54bca80194f..2d9a9f3029f 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -180,10 +180,6 @@
word-break: break-all;
}
- .member-group-link {
- display: inline-block;
- }
-
.form-control {
width: inherit;
}
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 5cf2d847405..a6d1fc11c3f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -760,11 +760,6 @@ $mr-widget-min-height: 69px;
color: $gl-text-color;
}
- .fa-info-circle {
- color: $orange-500;
- padding-right: 5px;
- }
-
// Shortening button height by 1px to make compare-versions
// header 56px and fit into our 8px design grid
button {
@@ -1010,7 +1005,7 @@ $mr-widget-min-height: 69px;
.coverage {
font-size: 12px;
- color: $gray-700;
+ color: $gray-500;
line-height: initial;
}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 3a210d66420..35a15214f68 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -152,7 +152,7 @@
}
.sidebar-item-value & {
- fill: $gray-700;
+ fill: $gray-500;
}
}
@@ -282,7 +282,7 @@ table {
display: table;
svg {
- fill: $gray-700;
+ fill: $gray-500;
}
.btn-group {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 40f0104a2bf..e4e54501627 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -674,7 +674,7 @@ $note-form-margin-left: 72px;
.note-headline-meta {
.system-note-separator {
- color: $gray-700;
+ color: $gray-500;
}
.note-timestamp {
@@ -727,7 +727,7 @@ $note-form-margin-left: 72px;
display: inline-flex;
align-items: center;
margin-left: 10px;
- color: $gray-600;
+ color: $gray-400;
@include notes-media('max', map-get($grid-breakpoints, sm) - 1) {
float: none;
@@ -820,9 +820,7 @@ $note-form-margin-left: 72px;
}
}
-.add-diff-note {
- @include btn-comment-icon;
- opacity: 0;
+.tooltip-wrapper.add-diff-note {
margin-left: -52px;
position: absolute;
top: 50%;
@@ -830,6 +828,18 @@ $note-form-margin-left: 72px;
z-index: 10;
}
+.note-button.add-diff-note {
+ @include btn-comment-icon;
+ opacity: 0;
+
+ &[disabled] {
+ background: $white;
+ border-color: $gray-200;
+ color: $gl-gray-400;
+ cursor: not-allowed;
+ }
+}
+
.disabled-comment {
background-color: $gray-light;
border-radius: $border-radius-base;
@@ -867,7 +877,7 @@ $note-form-margin-left: 72px;
line-height: $gl-line-height;
svg {
- fill: $gray-700;
+ fill: $gray-500;
}
&.discussion-create-issue-btn {
@@ -904,7 +914,7 @@ $note-form-margin-left: 72px;
border-right: 0;
.line-resolve-btn {
- color: $gray-700;
+ color: $gray-500;
svg {
vertical-align: text-top;
@@ -989,11 +999,6 @@ $note-form-margin-left: 72px;
}
.discussion-filter-container {
- .btn > svg {
- width: $gl-col-padding;
- height: $gl-col-padding;
- }
-
.dropdown-menu {
margin-bottom: $gl-padding-4;
diff --git a/app/assets/stylesheets/pages/packages.scss b/app/assets/stylesheets/pages/packages.scss
new file mode 100644
index 00000000000..8f6eee524e5
--- /dev/null
+++ b/app/assets/stylesheets/pages/packages.scss
@@ -0,0 +1,11 @@
+.commit-row-description {
+ border: 0;
+ border-left: 3px solid $white-dark;
+}
+
+.package-list-table[aria-busy='true'] {
+ td {
+ padding-bottom: 0;
+ padding-top: 0;
+ }
+}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 57ad9abef4b..fc3b786b365 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -445,6 +445,7 @@
.pipeline-tab-content {
display: flex;
width: 100%;
+ min-height: $dropdown-max-height-lg;
background-color: $gray-light;
padding: $gl-padding 0;
overflow: auto;
@@ -669,24 +670,13 @@
&.ci-action-icon-wrapper {
height: 30px;
width: 30px;
- background: $white;
- border: 1px solid $border-color;
border-radius: 100%;
display: block;
-
- &:hover {
- background-color: $gray-darker;
- border: 1px solid $dropdown-toggle-active-border-color;
-
- svg {
- fill: $gl-text-color;
- }
- }
+ padding: 0;
+ line-height: 0;
svg {
fill: $gl-text-color-secondary;
- position: relative;
- top: -1px;
}
.spinner {
@@ -695,7 +685,8 @@
&.play {
svg {
- left: 2px;
+ left: 1px;
+ top: 1px;
}
}
}
@@ -804,12 +795,12 @@
&.ci-status-icon-disabled,
&.ci-status-icon-not-found,
&.ci-status-icon-manual {
- @include mini-pipeline-graph-color($white, $gray-700, $gray-800, $gray-900, $gray-950, $black);
+ @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
}
&.ci-status-icon-created,
&.ci-status-icon-skipped {
- @include mini-pipeline-graph-color($white, $gray-100, $gray-300, $gray-500, $gray-600, $gray-700);
+ @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
}
}
@@ -845,15 +836,12 @@ button.mini-pipeline-graph-dropdown-toggle {
&.ci-action-icon-wrapper {
height: $ci-action-dropdown-button-size;
width: $ci-action-dropdown-button-size;
-
- background: $white;
- border: 1px solid $border-color;
border-radius: 50%;
display: block;
&:hover {
+ box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color;
background-color: $gray-darker;
- border: 1px solid $dropdown-toggle-active-border-color;
svg {
fill: $gl-text-color;
@@ -866,7 +854,7 @@ button.mini-pipeline-graph-dropdown-toggle {
height: $ci-action-dropdown-svg-size;
fill: $gl-text-color-secondary;
position: relative;
- top: auto;
+ top: 1px;
vertical-align: initial;
}
}
@@ -874,7 +862,7 @@ button.mini-pipeline-graph-dropdown-toggle {
// SVGs in the commit widget and mr widget
a.ci-action-icon-container.ci-action-icon-wrapper svg {
- top: 4px;
+ top: 5px;
}
.scrollable-menu {
@@ -1052,13 +1040,6 @@ button.mini-pipeline-graph-dropdown-toggle {
.text-center {
padding-top: 12px;
}
-
- .header-action-buttons {
- .btn,
- a {
- margin-left: 10px;
- }
- }
}
.pipelines-container .top-area .nav-controls > .btn:last-child {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 438f6c2546e..d4d6583312c 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -143,8 +143,8 @@
.group-home-panel,
.project-home-panel {
- padding-top: $gl-padding;
- padding-bottom: $gl-padding;
+ margin-top: $gl-padding;
+ margin-bottom: $gl-padding;
.home-panel-avatar {
width: $home-panel-title-row-height;
@@ -159,7 +159,7 @@
font-weight: bold;
.icon {
- font-size: $gl-font-size-large;
+ vertical-align: -1px;
}
.home-panel-topic-list {
@@ -224,12 +224,6 @@
font-size: $gl-font-size-large;
}
}
-
- .notifications-btn {
- .fa-bell {
- margin-right: 0;
- }
- }
}
.nav > .project-buttons {
@@ -472,17 +466,9 @@
margin-right: auto;
}
- a {
- display: block;
- width: 100%;
- height: 100%;
- padding-top: $gl-padding;
- text-decoration: none;
-
- &.disabled {
- opacity: 0.3;
- cursor: not-allowed;
- }
+ a.disabled {
+ opacity: 0.3;
+ cursor: not-allowed;
}
}
@@ -839,7 +825,7 @@
}
.repository-language-bar-tooltip-share {
- color: $gray-400;
+ color: $gray-200;
}
pre.light-well {
@@ -1538,3 +1524,10 @@ pre.light-well {
}
}
}
+
+@include media-breakpoint-down(xs) {
+ .fork-filtered-search {
+ width: 100%;
+ margin: $gl-spacing-scale-2 0;
+ }
+}
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index 6461d09bb47..a3b6cbdff25 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -48,7 +48,7 @@
&.sortable-chosen .draggable-panel {
background: $white;
- box-shadow: 0 0 4px $gray-500;
+ box-shadow: 0 0 4px $gray-300;
}
.draggable-remove {
@@ -56,18 +56,13 @@
.draggable-remove-link {
cursor: pointer;
- color: $gray-600;
+ color: $gray-400;
background-color: $white;
}
}
}
.prometheus-graphs-header {
- .monitor-environment-dropdown-header header,
- .monitor-dashboard-dropdown-header header {
- font-size: $gl-font-size;
- }
-
.monitor-environment-dropdown-menu,
.monitor-dashboard-dropdown-menu {
&.show {
@@ -117,7 +112,7 @@
.prometheus-graph-cursor {
position: absolute;
- background: $gray-600;
+ background: $gray-400;
width: 1px;
}
@@ -290,7 +285,7 @@
}
> text {
- fill: $gray-600;
+ fill: $gray-400;
font-size: 10px;
}
}
@@ -341,3 +336,11 @@
opacity: 0;
pointer-events: all;
}
+
+.prometheus-panel-builder {
+ .preview-date-time-picker {
+ // same as in .dropdown-menu-toggle
+ // see app/assets/stylesheets/framework/dropdowns.scss
+ width: 160px;
+ }
+}
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss
index 56194f0af67..0c0605b0b3d 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/pages/reports.scss
@@ -77,7 +77,7 @@
}
&.neutral svg {
- color: $gray-700;
+ color: $gray-500;
}
.ci-status-icon {
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 66d2f76c558..8ed6936475b 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -44,10 +44,6 @@
.btn-default {
color: $gl-text-color-secondary;
}
-
- .fa-pause {
- font-size: 11px;
- }
}
@include media-breakpoint-down(md) {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index d8084a20af9..1fc6ad62237 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -249,7 +249,7 @@ input[type='checkbox']:hover {
.search-clear {
position: absolute;
right: 10px;
- top: 10px;
+ top: 9px;
padding: 0;
color: $gray-darkest;
line-height: 0;
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index f1df9099d82..b82c638a5b7 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -183,7 +183,7 @@
.option-description,
.option-disabled-reason {
- margin-left: 30px;
+ margin-left: 20px;
color: $project-option-descr-color;
margin-top: -5px;
}
@@ -366,7 +366,8 @@
margin-top: 1em;
}
-.ci-variable-table {
+.ci-variable-table,
+.deploy-freeze-table {
table {
thead {
border-bottom: 1px solid $white-normal;
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 4f3d6fb0d44..4ad2dcbe92f 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -12,8 +12,6 @@
svg {
height: 13px;
width: 13px;
- position: relative;
- top: 2px;
overflow: visible;
}
@@ -38,7 +36,7 @@
}
&.ci-preparing {
- @include status-color($gray-100, $gray-500, $gray-600);
+ @include status-color($gray-100, $gray-300, $gray-400);
}
&.ci-pending,
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index bbb37479fb0..c6f104a024b 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -143,6 +143,10 @@
margin-bottom: 0;
}
}
+
+ .gl-label-scoped {
+ --label-inset-border: inset 0 0 0 1px currentColor;
+ }
}
@include media-breakpoint-down(sm) {
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 22b5859e297..b6af395a802 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -138,12 +138,6 @@
}
.tree-item {
- .file-icon,
- .folder-icon {
- position: relative;
- top: 2px;
- }
-
.link-container {
padding: 0;
diff --git a/app/assets/stylesheets/pages/users.scss b/app/assets/stylesheets/pages/users.scss
index 3b018c1e087..0863b573f75 100644
--- a/app/assets/stylesheets/pages/users.scss
+++ b/app/assets/stylesheets/pages/users.scss
@@ -25,8 +25,12 @@
}
.form-control {
- width: 100%;
padding-right: 35px;
+ }
+
+ .search-control-wrap,
+ .form-control {
+ width: 100%;
@include media-breakpoint-up(sm) {
width: 250px;
diff --git a/app/assets/stylesheets/startup/_cloaking.scss b/app/assets/stylesheets/startup/_cloaking.scss
new file mode 100644
index 00000000000..3c25feb0c5c
--- /dev/null
+++ b/app/assets/stylesheets/startup/_cloaking.scss
@@ -0,0 +1,13 @@
+/**
+ Prevent flashing of content when using startup.css
+ */
+@mixin cloak-startup-scss($display) {
+ // Breadcrumbs and alerts on the top of the page
+ .content-wrapper > .alert-wrapper,
+ // Content on pages
+ #content-body,
+ // Prevent flashing of haml generated modal contents
+ .modal-dialog {
+ display: $display;
+ }
+}
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
new file mode 100644
index 00000000000..2a7a9255ded
--- /dev/null
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -0,0 +1,5 @@
+@charset "UTF-8";*,::after,::before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;overflow-y:scroll}header,nav{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,Cantarell,"Helvetica Neue",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight:400;line-height:1.5;color:#303030;text-align:left;background-color:#fff}hr{box-sizing:content-box;height:0;margin-top:.5rem;margin-bottom:.5rem;border:0;border-top:1px solid rgba(0,0,0,.1);overflow:hidden;margin:24px 0;border-top:1px solid #eee}p,ul{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}strong{font-weight:700}a{text-decoration:none;background-color:transparent;color:#1068bf}a:not([href]){color:inherit;text-decoration:none}code{font-family:"Menlo","DejaVu Sans Mono","Liberation Mono","Consolas","Ubuntu Mono","Courier New","andale mono","lucida console",monospace;font-size:90%;word-wrap:break-word;padding:2px 4px;color:#1f1f1f;background-color:#f0f0f0;border-radius:4px}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:baseline;fill:currentColor}button{border-radius:0;text-transform:none}button,input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit;overflow:visible}[type=button]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}[type=search]{outline-offset:-2px}summary{display:list-item;cursor:pointer}[hidden]{display:none!important}.h1,h1{margin-bottom:.25rem;font-weight:600;line-height:1.2;color:#303030;font-size:2.1875rem}.list-unstyled{padding-left:0;list-style:none}a>code{color:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}.search form{display:block;padding:.375rem .75rem;font-weight:400;color:#303030;background-color:#fff;background-clip:padding-box;border-radius:.25rem}.search form::-ms-expand{background-color:transparent;border:0}.search form:-moz-focusring{color:transparent;text-shadow:0 0 0 #303030}.search form::placeholder{opacity:1;color:#919191}.search form:disabled{background-color:#fafafa;opacity:1}.form-inline{display:flex;flex-flow:row wrap;align-items:center}@media (min-width:576px){.form-inline .search form,.search .form-inline form{display:inline-block;width:auto;vertical-align:middle}}.btn{display:inline-block;text-align:center;vertical-align:middle;cursor:pointer;user-select:none;border:1px solid transparent;padding:.375rem .75rem;line-height:20px;border-radius:.25rem}.btn:disabled{opacity:.65}.btn-success{color:#fff;background-color:#108548;border-color:#108548}.btn-success:disabled{color:#fff;background-color:#108548;border-color:#108548}.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-menu-toggle{color:#fff;background-color:#0b572f;border-color:#094c29}.btn-sm{padding:.25rem .5rem;font-size:.875rem;line-height:1.5;border-radius:.2rem}.collapse:not(.show){display:none}.dropdown-menu-toggle::after{margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-menu-toggle:empty::after{margin-left:0}.dropdown-menu{left:0;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#303030;text-align:left;list-style:none;background-clip:padding-box;border:1px solid rgba(0,0,0,.15)}.dropdown-menu-right{right:0;left:auto}.divider{height:0;margin:4px 0;overflow:hidden;border-top:1px solid #dbdbdb}.dropdown-menu.show{display:block}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.navbar{position:relative;padding:.25rem .5rem}.navbar,.navbar .container,.navbar .container-fluid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .dropdown-menu{float:none}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.25rem;line-height:1;background-color:transparent;border:1px solid transparent;border-radius:.25rem}@media (max-width:575.98px){.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{padding-right:0;padding-left:0}}@media (min-width:576px){.navbar-expand-sm{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-sm .navbar-nav{flex-direction:row}.navbar-expand-sm .navbar-nav .dropdown-menu{position:absolute}.navbar-expand-sm>.container,.navbar-expand-sm>.container-fluid{flex-wrap:nowrap}.navbar-expand-sm .navbar-collapse{display:flex!important;flex-basis:auto}.navbar-expand-sm .navbar-toggler{display:none}}.badge,.card{border-radius:.25rem}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid #dbdbdb}.card>hr{margin-right:0;margin-left:0}.badge{display:inline-block;padding:.25em .4em;font-size:75%;font-weight:600;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline}.badge:empty{display:none}.btn .badge{position:relative;top:-1px}.badge-pill{padding-right:.6em;padding-left:.6em;border-radius:10rem}.close{float:right;font-size:1.5rem;font-weight:600;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5}button.close{padding:0;background-color:transparent;border:0;appearance:none}.bg-transparent{background-color:transparent!important}.border{border:1px solid #dbdbdb!important}.rounded{border-radius:.25rem!important}.d-none{display:none!important}.d-inline-block{display:inline-block!important}.d-block{display:block!important}@media (min-width:576px){.d-sm-none{display:none!important}}@media (min-width:768px){.d-md-block{display:block!important}}@media (min-width:992px){.d-lg-none{display:none!important}.d-lg-block{display:block!important}}@media (min-width:1200px){.d-xl-block{display:block!important}}.float-right{float:right!important}.sr-only{white-space:nowrap}.m-auto{margin:auto!important}.text-nowrap{white-space:nowrap!important}.search form,body{font-size:.875rem}[role=button],button,html [type=button]{cursor:pointer}.h1,h1{margin-top:20px;margin-bottom:10px}input[type=file]{line-height:1}.code>code{background-color:inherit;padding:unset}.hidden{display:none!important;visibility:hidden!important}.dropdown-menu-toggle::after,.hide{display:none}.badge:not(.gl-badge){padding:4px 5px;font-size:12px;font-style:normal;font-weight:400;display:inline-block}.toggle-sidebar-button .collapse-text,.toggle-sidebar-button .icon-chevron-double-lg-left,.toggle-sidebar-button .icon-chevron-double-lg-right{color:#707070}body{text-decoration-skip:ink}.container{padding-top:0;z-index:5}.container .content{margin:0}@media (max-width:575.98px){.container .content{margin-top:20px}.container .container .title{padding-left:15px!important}}.btn{border-radius:4px;font-size:.875rem;font-weight:400;padding:6px 10px;background-color:#fff;border-color:#dbdbdb;color:#303030;white-space:nowrap}.btn:active{box-shadow:none}.btn.active,.btn:active{box-shadow:rgba(0,0,0,.16);background-color:#eaeaea;border-color:#e3e3e3;color:#303030}.btn.btn-sm{padding:4px 10px;font-size:13px;line-height:18px}.btn.btn-success{background-color:#108548;border-color:#217645;color:#fff}.btn.btn-success.active,.btn.btn-success:active{box-shadow:rgba(0,0,0,.16);background-color:#24663b;border-color:#0d532a;color:#fff}.btn svg{height:15px;width:15px;position:relative;top:2px}.btn .fa:not(:last-child),.btn svg:not(:last-child){margin-right:5px}.badge.badge-pill:not(.gl-badge){font-weight:400;background-color:rgba(0,0,0,.07);color:#4f4f4f;vertical-align:baseline}.loading{margin:20px auto;height:40px;color:#555;font-size:32px;text-align:center}.chart{overflow:hidden;height:220px}.center{text-align:center}.flex{display:flex}.dropdown{position:relative}.show.dropdown .dropdown-menu{transform:translateY(0);display:block;min-height:40px;max-height:312px;overflow-y:auto}@media (max-width:575.98px){.show.dropdown .dropdown-menu{width:100%}}.show.dropdown .dropdown-menu-toggle{border-color:#c4c4c4}.search-input-container .dropdown-menu{margin-top:11px}.dropdown-menu,.dropdown-menu-toggle{font-size:14px;background-color:#fff;border:1px solid #dbdbdb;border-radius:.25rem}.dropdown-menu-toggle{color:#303030;text-align:left;white-space:nowrap;padding:6px 25px 6px 10px;position:relative;width:160px;text-overflow:ellipsis;overflow:hidden}.no-outline.dropdown-menu-toggle,.show.dropdown [data-toggle=dropdown]{outline:0}.dropdown-menu-toggle .fa{color:#c4c4c4;position:absolute}.dropdown-menu{display:none;position:absolute;width:auto;top:100%;z-index:300;min-width:240px;max-width:500px;margin-top:4px;margin-bottom:24px;font-weight:400;padding:8px 0;box-shadow:0 2px 4px rgba(0,0,0,.1)}.dropdown-menu ul{margin:0;padding:0}.dropdown-menu li{display:block;text-align:left;list-style:none;padding:0 1px}.dropdown-menu li button,.dropdown-menu li>a{background:0 0;border:0;border-radius:0;box-shadow:none;display:block;font-weight:400;position:relative;padding:8px 12px;color:#303030;line-height:16px;white-space:normal;overflow:hidden;text-align:left;width:100%}.dropdown-menu li button:active,.dropdown-menu li>a:active{background-color:#eee;color:#303030;outline:0;text-decoration:none}.dropdown-menu li button:active .avatar,.dropdown-menu li>a:active .avatar{border-color:#fff}.dropdown-menu li button:active .badge.badge-pill,.dropdown-menu li>a:active .badge.badge-pill{background-color:#d3e7f9}.dropdown-menu .divider{height:1px;margin:.25rem 0;padding:0;background-color:#dbdbdb}.dropdown-menu .badge.badge-pill+span:not(.badge.badge-pill){margin-right:40px}.dropdown-select{width:300px}@media (max-width:767.98px){.dropdown-select{width:100%}}.dropdown-content{max-height:252px;overflow-y:auto}.dropdown-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:none;z-index:9;background-color:rgba(255,255,255,.6);font-size:28px}.dropdown-loading .fa{position:absolute;top:50%;left:50%;margin-top:-14px;margin-left:-14px}@media (max-width:575.98px){.navbar-gitlab li.dropdown{position:static}header.navbar-gitlab .dropdown .dropdown-menu{width:100%;min-width:100%}}@media (max-width:767.98px){.dropdown-menu-toggle{width:100%}}input{border-radius:.25rem;color:#303030;background-color:#fff}.search form{margin:0;padding:4px;width:200px;line-height:24px;height:32px;border:0;border-radius:4px}body.ui-indigo .navbar-gitlab{background-color:#292961}body.ui-indigo .navbar-gitlab .nav>li,body.ui-indigo .navbar-gitlab .navbar-collapse,body.ui-indigo .navbar-gitlab .navbar-sub-nav{color:#d1d1f0}body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler{border-left:1px solid #6868b9}body.ui-indigo .navbar-gitlab .container-fluid .navbar-toggler svg{fill:#d1d1f0}body.ui-indigo .navbar-gitlab .nav>li.active>a,body.ui-indigo .navbar-gitlab .nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.active>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.active>button,body.ui-indigo .navbar-gitlab .navbar-nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-nav>li.dropdown.show>button,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.active>a,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.active>button,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.dropdown.show>a,body.ui-indigo .navbar-gitlab .navbar-sub-nav>li.dropdown.show>button{color:#292961;background-color:#fff}body.ui-indigo .navbar-gitlab .nav>li>a.header-user-dropdown-toggle .header-user-avatar{border-color:#d1d1f0}body.ui-indigo .search form{background-color:rgba(209,209,240,.2)}body.ui-indigo .search .search-input::placeholder{color:rgba(209,209,240,.8)}body.ui-indigo .search .search-input-wrap .clear-icon,body.ui-indigo .search .search-input-wrap .search-icon{fill:rgba(209,209,240,.8)}body.ui-indigo .nav-sidebar li.active{box-shadow:inset 4px 0 0 #4b4ba3}body.ui-indigo .nav-sidebar li.active>a,body.ui-indigo .sidebar-top-level-items>li.active .badge.badge-pill{color:#393982}body.ui-indigo .nav-sidebar li.active .nav-icon-container svg{fill:#393982}.navbar-gitlab{padding:0 16px;z-index:1000;margin-bottom:0;min-height:40px;border:0;border-bottom:1px solid #dbdbdb;position:fixed;top:0;left:0;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}.navbar-gitlab .header-content{width:100%;display:flex;justify-content:space-between;position:relative;min-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;display:flex;position:relative;margin:0;font-size:18px;vertical-align:top;white-space:nowrap}.navbar-gitlab .header-content .title img{height:28px}.navbar-gitlab .header-content .title img+.logo-text{margin-left:8px}.navbar-gitlab .header-content .title a{display:flex;align-items:center;padding:2px 8px;margin:5px 2px 5px -8px;border-radius:4px}.navbar-gitlab .header-content .dropdown.open>a{border-bottom-color:#fff}.navbar-gitlab .header-content .navbar-collapse>ul.nav>li:not(.d-none){margin:0 2px}.navbar-gitlab .navbar-collapse{flex:0 0 auto;border-top:0;padding:0}@media (max-width:575.98px){.navbar-gitlab .navbar-collapse{flex:1 1 auto}}.navbar-gitlab .navbar-collapse .nav{flex-wrap:nowrap}@media (max-width:575.98px){.navbar-gitlab .navbar-collapse .nav>li:not(.d-none) a{margin-left:0}}.navbar-gitlab .container-fluid{padding:0}.navbar-gitlab .container-fluid .user-counter svg{margin-right:3px}.navbar-gitlab .container-fluid .navbar-toggler{position:relative;right:-10px;border-radius:0;min-width:45px;padding:0;margin:8px -7px 8px 0;font-size:14px;text-align:center;color:currentColor}.navbar-gitlab .container-fluid .navbar-toggler.active{color:currentColor;background-color:transparent}@media (max-width:575.98px){.navbar-gitlab .container-fluid .navbar-nav{display:flex;padding-right:10px;flex-direction:row}}.navbar-gitlab .container-fluid .navbar-nav li .badge.badge-pill{box-shadow:none;font-weight:600}@media (max-width:575.98px){.navbar-gitlab .container-fluid .nav>li.header-user{padding-left:10px}}.navbar-gitlab .container-fluid .nav>li>a{will-change:color;margin:4px 0;padding:6px 8px;height:32px}@media (max-width:575.98px){.navbar-gitlab .container-fluid .nav>li>a{padding:0}}.navbar-gitlab .container-fluid .nav>li>a.header-user-dropdown-toggle{margin-left:2px}.navbar-gitlab .container-fluid .nav>li .header-new-dropdown-toggle,.navbar-gitlab .container-fluid .nav>li>a.header-user-dropdown-toggle .header-user-avatar{margin-right:0}.navbar-nav>li>a,.navbar-nav>li>button,.navbar-sub-nav>li>a,.navbar-sub-nav>li>button{display:flex;align-items:center;justify-content:center;padding:6px 8px;margin:4px 2px;font-size:12px;color:currentColor;border-radius:4px;height:32px;font-weight:600}.navbar-nav>li>button,.navbar-sub-nav>li>button{background:0 0;border:0}.navbar-nav .dropdown-menu,.navbar-sub-nav .dropdown-menu{position:absolute}.navbar-sub-nav{display:flex;margin:0 0 0 6px}.btn .caret-down,.caret-down{top:0;height:11px;width:11px;margin-left:4px;fill:currentColor}.header-new .dropdown-menu,.header-user .dropdown-menu{margin-top:4px}.btn-sign-in{background-color:#ebebfa;color:#292961;font-weight:600;line-height:18px;margin:4px 0 4px 2px}.navbar-nav .badge.badge-pill,.title-container .badge.badge-pill{position:inherit;font-weight:400;margin-left:-6px;font-size:11px;color:#fff;padding:0 5px;line-height:12px;border-radius:7px;box-shadow:0 1px 0 rgba(76,78,84,.2)}.navbar-nav .badge.badge-pill.green-badge,.title-container .badge.badge-pill.green-badge{background-color:#108548}.navbar-nav .badge.badge-pill.merge-requests-count,.title-container .badge.badge-pill.merge-requests-count{background-color:#de7e00}.navbar-nav .badge.badge-pill.todos-count,.title-container .badge.badge-pill.todos-count{background-color:#1f75cb}.navbar-nav .canary-badge .badge,.title-container .canary-badge .badge{font-size:12px;line-height:16px;padding:0 .5rem}@media (max-width:575.98px){.navbar-gitlab .container-fluid{font-size:18px}.navbar-gitlab .container-fluid .navbar-nav{table-layout:fixed;width:100%;margin:0;text-align:right}.navbar-gitlab .container-fluid .navbar-collapse{margin-left:-8px;margin-right:-10px}.navbar-gitlab .container-fluid .navbar-collapse .nav>li:not(.d-none){flex:1}.header-user-dropdown-toggle{text-align:center}.header-user-avatar{float:none}}.header-user.show .dropdown-menu{margin-top:4px;color:#303030;left:auto;max-height:445px}.header-user.show .dropdown-menu svg{vertical-align:text-top}.header-user-avatar{float:left;margin-right:5px;border-radius:50%;border:1px solid #f5f5f5}.media{display:flex;align-items:flex-start}.card{margin-bottom:16px}@media (min-width:768px){.page-with-contextual-sidebar{padding-left:50px}}@media (min-width:1200px){.page-with-contextual-sidebar{padding-left:220px}}.context-header{position:relative;margin-right:2px;width:220px}.context-header>a,.context-header>button{font-weight:600;display:flex;width:100%;align-items:center;padding:10px 16px 10px 10px;color:#303030;background-color:transparent;border:0;text-align:left}.context-header .avatar-container{flex:0 0 40px;background-color:#fff}.context-header .sidebar-context-title{overflow:hidden;text-overflow:ellipsis}.context-header .sidebar-context-title.text-secondary{font-weight:400;font-size:.8em}.nav-sidebar{position:fixed;z-index:600;width:220px;top:40px;bottom:0;left:0;background-color:#fafafa;box-shadow:inset -1px 0 0 #dbdbdb;transform:translate3d(0,0,0)}@media (min-width:576px) and (max-width:576px){.nav-sidebar:not(.sidebar-collapsed-desktop){box-shadow:inset -1px 0 0 #dbdbdb,2px 1px 3px rgba(0,0,0,.1)}}.nav-sidebar a{text-decoration:none}.nav-sidebar ul{padding-left:0;list-style:none}.nav-sidebar li{white-space:nowrap}.nav-sidebar li a{display:flex;align-items:center;padding:12px 16px;color:#707070}.nav-sidebar li .nav-item-name{flex:1}.nav-sidebar li.active>a,.sidebar-top-level-items>li.active .badge.badge-pill{font-weight:600}@media (max-width:767.98px){.nav-sidebar{left:-220px}}.nav-sidebar .nav-icon-container{display:flex;margin-right:8px}.nav-sidebar .fly-out-top-item{display:none}.nav-sidebar svg{height:16px;width:16px}@media (min-width:768px) and (max-width:1199px){.nav-sidebar:not(.sidebar-expanded-mobile){width:50px}.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar-inner-scroll{overflow-x:hidden}.nav-sidebar:not(.sidebar-expanded-mobile) .badge.badge-pill:not(.fly-out-badge),.nav-sidebar:not(.sidebar-expanded-mobile) .nav-item-name,.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-context-title{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items>li>a{min-height:45px}.nav-sidebar:not(.sidebar-expanded-mobile) .fly-out-top-item{display:block}.nav-sidebar:not(.sidebar-expanded-mobile) .avatar-container{margin:0 auto}.nav-sidebar:not(.sidebar-expanded-mobile) .context-header{height:60px;width:50px}.nav-sidebar:not(.sidebar-expanded-mobile) .context-header a{padding:10px 4px}.nav-sidebar:not(.sidebar-expanded-mobile) .sidebar-top-level-items>li .sidebar-sub-level-items:not(.flyout-list),.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .collapse-text,.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-left{display:none}.nav-sidebar:not(.sidebar-expanded-mobile) .nav-icon-container{margin-right:0}.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button{padding:16px;width:49px}.nav-sidebar:not(.sidebar-expanded-mobile) .toggle-sidebar-button .icon-chevron-double-lg-right{display:block;margin:0}}.nav-sidebar-inner-scroll{height:100%;width:100%;overflow:auto}.sidebar-sub-level-items{display:none;padding-bottom:8px}.sidebar-sub-level-items>li a{padding:8px 16px 8px 40px}.sidebar-sub-level-items>li.active a,.sidebar-top-level-items>li.active{background:rgba(0,0,0,.04)}.sidebar-top-level-items{margin-bottom:60px}@media (min-width:576px){.sidebar-top-level-items>li>a{margin-right:1px}}.sidebar-top-level-items>li .badge.badge-pill{background-color:rgba(0,0,0,.08);color:#707070}.sidebar-top-level-items>li.active>a{margin-left:4px;padding-left:12px}.sidebar-top-level-items>li.active .sidebar-sub-level-items:not(.is-fly-out-only){display:block}.close-nav-button,.toggle-sidebar-button{width:219px;position:fixed;height:48px;bottom:0;padding:0 16px;background-color:#fafafa;border:0;border-top:1px solid #dbdbdb;color:#707070;display:flex;align-items:center}.close-nav-button svg,.toggle-sidebar-button svg{margin-right:8px}.close-nav-button .icon-chevron-double-lg-right,.toggle-sidebar-button .icon-chevron-double-lg-right{display:none}.collapse-text{white-space:nowrap;overflow:hidden}.fly-out-top-item>a{display:flex}.fly-out-top-item .fly-out-badge{margin-left:8px}.fly-out-top-item-name{flex:1}.close-nav-button{display:none}@media (max-width:767.98px){.close-nav-button{display:flex}.toggle-sidebar-button{display:none}}input::-moz-placeholder{color:#919191;opacity:1}input:-ms-input-placeholder,input::-ms-input-placeholder{color:#919191}svg.s12{width:12px;height:12px}svg.s16{width:16px;height:16px}svg.s18{width:18px;height:18px}.feature-highlight-popover-sub-content{padding:16px 12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.color-label{padding:0 .5rem;line-height:16px;border-radius:100px;color:#fff}.label-link{display:inline-flex;vertical-align:text-bottom}.milestones{padding:8px;margin-top:8px;border-radius:4px;background-color:#dbdbdb}.search{margin:0 8px}@media (min-width:1200px){.search form{width:320px}}.search .search-input{border:0;font-size:14px;padding:0 20px 0 0;margin-left:5px;line-height:25px;width:98%;color:#fff;background:0 0}.search .search-input-container{display:flex;position:relative}.search .search-input-wrap{width:100%}.search .search-input-wrap .clear-icon,.search .search-input-wrap .search-icon{position:absolute;right:5px;top:4px}.search .search-input-wrap .search-icon{-moz-user-select:none;user-select:none}.search .search-input-wrap .clear-icon{display:none}.search .search-input-wrap .dropdown{position:static}.search .search-input-wrap .dropdown-menu{left:-5px;max-height:400px;overflow:auto}@media (min-width:1200px){.search .search-input-wrap .dropdown-menu{width:320px}}.search .search-input-wrap .dropdown-content{max-height:382px}.search .identicon{flex-basis:16px;flex-shrink:0;margin-right:4px}.settings{border-top:1px solid #dbdbdb}.settings:first-of-type{margin-top:10px;border:0}.settings+div .settings:first-of-type{margin-top:0;border-top:1px solid #dbdbdb}.avatar,.avatar-container{float:left;margin-right:16px;border-radius:50%;border:1px solid #f5f5f5}.s16.avatar,.s16.avatar-container{width:16px;height:16px;margin-right:8px}.s18.avatar,.s18.avatar-container{width:18px;height:18px;margin-right:8px}.s40.avatar,.s40.avatar-container{width:40px;height:40px;margin-right:8px}.avatar{transition-property:none;width:40px;height:40px;padding:0;background:#fdfdfd;overflow:hidden;border-color:rgba(0,0,0,.1)}.avatar.center{font-size:14px;line-height:1.8em;text-align:center}.avatar.avatar-tile{border-radius:0;border:0}.identicon{text-align:center;vertical-align:top;color:#4f4f4f;background-color:#eee}.identicon.s16{font-size:10px;line-height:16px}.identicon.s40{font-size:16px;line-height:38px}.avatar-container{overflow:hidden;display:flex}.avatar-container a{width:100%;height:100%;display:flex;text-decoration:none}.avatar-container .avatar{border-radius:0;border:0;height:auto;width:100%;margin:0;align-self:center}.avatar-container.s40{min-width:40px;min-height:40px}.rect-avatar,.rect-avatar.s16,.rect-avatar.s18{border-radius:2px}.rect-avatar.s40{border-radius:4px}.tab-width-8{-moz-tab-size:8;tab-size:8}.gl-sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.gl-ml-3{margin-left:.5rem}
+
+/* Cloaking in order to prevent flickering of content */
+@import 'cloaking';
+@include cloak-startup-scss(none);
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 38842ec167e..99a13cc4e44 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -14,12 +14,6 @@
#{'.text-#{$variant}-#{$suffix}'} {
color: $color;
}
-
- #{'.hover-text-#{$variant}-#{$suffix}'} {
- &:hover {
- color: $color;
- }
- }
}
}
@@ -82,6 +76,10 @@
.gl-h-32 { height: px-to-rem($grid-size * 4); }
.gl-h-64 { height: px-to-rem($grid-size * 8); }
+// Migrate this to Gitlab UI when FF is removed
+// https://gitlab.com/groups/gitlab-org/-/epics/2882
+.gl-h-200\! { height: px-to-rem($grid-size * 25) !important; }
+
.d-sm-table-column {
@include media-breakpoint-up(sm) {
display: table-column !important;