summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r--app/assets/stylesheets/application_dark.scss3
-rw-r--r--app/assets/stylesheets/bootstrap_migration.scss4
-rw-r--r--app/assets/stylesheets/components/avatar.scss11
-rw-r--r--app/assets/stylesheets/components/dashboard_skeleton.scss6
-rw-r--r--app/assets/stylesheets/components/design_management/design.scss59
-rw-r--r--app/assets/stylesheets/components/popover.scss2
-rw-r--r--app/assets/stylesheets/components/related_items_list.scss27
-rw-r--r--app/assets/stylesheets/components/rich_content_editor.scss22
-rw-r--r--app/assets/stylesheets/framework/animations.scss9
-rw-r--r--app/assets/stylesheets/framework/badges.scss10
-rw-r--r--app/assets/stylesheets/framework/blank.scss14
-rw-r--r--app/assets/stylesheets/framework/broadcast_messages.scss5
-rw-r--r--app/assets/stylesheets/framework/common.scss46
-rw-r--r--app/assets/stylesheets/framework/contextual_sidebar.scss2
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss5
-rw-r--r--app/assets/stylesheets/framework/files.scss2
-rw-r--r--app/assets/stylesheets/framework/filters.scss17
-rw-r--r--app/assets/stylesheets/framework/gitlab_theme.scss49
-rw-r--r--app/assets/stylesheets/framework/markdown_area.scss2
-rw-r--r--app/assets/stylesheets/framework/selects.scss41
-rw-r--r--app/assets/stylesheets/framework/system_messages.scss12
-rw-r--r--app/assets/stylesheets/framework/tables.scss2
-rw-r--r--app/assets/stylesheets/framework/typography.scss18
-rw-r--r--app/assets/stylesheets/framework/variables.scss244
-rw-r--r--app/assets/stylesheets/framework/variables_overrides.scss23
-rw-r--r--app/assets/stylesheets/notify.scss2
-rw-r--r--app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss3
-rw-r--r--app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss326
-rw-r--r--app/assets/stylesheets/page_bundles/ide.scss67
-rw-r--r--app/assets/stylesheets/page_bundles/ide_themes/README.md14
-rw-r--r--app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss50
-rw-r--r--app/assets/stylesheets/pages/alert_management/details.scss33
-rw-r--r--app/assets/stylesheets/pages/alert_management/list.scss93
-rw-r--r--app/assets/stylesheets/pages/boards.scss29
-rw-r--r--app/assets/stylesheets/pages/diff.scss2
-rw-r--r--app/assets/stylesheets/pages/experience_level.scss29
-rw-r--r--app/assets/stylesheets/pages/groups.scss32
-rw-r--r--app/assets/stylesheets/pages/issuable.scss5
-rw-r--r--app/assets/stylesheets/pages/issues.scss66
-rw-r--r--app/assets/stylesheets/pages/labels.scss4
-rw-r--r--app/assets/stylesheets/pages/login.scss13
-rw-r--r--app/assets/stylesheets/pages/note_form.scss4
-rw-r--r--app/assets/stylesheets/pages/notes.scss6
-rw-r--r--app/assets/stylesheets/pages/pipelines.scss5
-rw-r--r--app/assets/stylesheets/pages/profiles/preferences.scss14
-rw-r--r--app/assets/stylesheets/pages/projects.scss2
-rw-r--r--app/assets/stylesheets/pages/prometheus.scss8
-rw-r--r--app/assets/stylesheets/pages/storage_quota.scss17
-rw-r--r--app/assets/stylesheets/themes/_dark.scss134
-rw-r--r--app/assets/stylesheets/utilities.scss70
50 files changed, 1133 insertions, 530 deletions
diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss
new file mode 100644
index 00000000000..72196d71969
--- /dev/null
+++ b/app/assets/stylesheets/application_dark.scss
@@ -0,0 +1,3 @@
+@import "./themes/dark";
+
+@import "./application";
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 1c15400542a..a6d56819140 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -111,7 +111,7 @@ kbd {
code {
padding: 2px 4px;
color: $code-color;
- background-color: $gray-100;
+ background-color: $gray-50;
border-radius: $border-radius-default;
.code > & {
@@ -187,7 +187,7 @@ h3.popover-header {
// Add to .label so that old system notes that are saved to the db
// will still receive the correct styling
-.badge,
+.badge:not(.gl-badge),
.label {
padding: 4px 5px;
font-size: 12px;
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss
index 312123aeef9..6bb7e9d215e 100644
--- a/app/assets/stylesheets/components/avatar.scss
+++ b/app/assets/stylesheets/components/avatar.scss
@@ -70,7 +70,7 @@ $avatar-sizes: (
$identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal,
$identicon-orange, $gray-darker;
-.avatar-circle {
+%avatar-circle {
float: left;
margin-right: $gl-padding;
border-radius: $avatar-radius;
@@ -84,7 +84,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
}
.avatar {
- @extend .avatar-circle;
+ @extend %avatar-circle;
transition-property: none;
width: 40px;
@@ -100,10 +100,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
margin-left: 2px;
flex-shrink: 0;
- &.s16 {
- margin-right: 4px;
- }
-
+ &.s16,
&.s24 {
margin-right: 4px;
}
@@ -154,7 +151,7 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i
}
.avatar-container {
- @extend .avatar-circle;
+ @extend %avatar-circle;
overflow: hidden;
display: flex;
diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss
index ce33aa94df3..64091201221 100644
--- a/app/assets/stylesheets/components/dashboard_skeleton.scss
+++ b/app/assets/stylesheets/components/dashboard_skeleton.scss
@@ -67,10 +67,10 @@
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(to right,
- $gray-100 0%,
+ $gray-50 0%,
$gray-10 20%,
- $gray-100 40%,
- $gray-100 100%);
+ $gray-50 40%,
+ $gray-50 100%);
border-radius: $gl-padding;
height: $gl-padding;
margin-top: -$gl-padding-8;
diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss
index 1061aae2bbb..380b2280490 100644
--- a/app/assets/stylesheets/components/design_management/design.scss
+++ b/app/assets/stylesheets/components/design_management/design.scss
@@ -1,3 +1,7 @@
+.layout-page.design-detail-layout {
+ max-height: 100vh;
+}
+
.design-detail {
background-color: rgba($black, 0.9);
@@ -5,8 +9,30 @@
top: 35px;
}
- .inactive {
- opacity: 0.5;
+ .design-pin {
+ transition: opacity 0.5s ease;
+
+ &.inactive {
+ @include gl-opacity-5;
+
+ &:hover {
+ @include gl-opacity-10;
+ }
+ }
+ }
+
+ .badge.badge-pill {
+ display: flex;
+ height: 28px;
+ width: 28px;
+ background-color: $blue-400;
+ color: $white;
+ border: $white 1px solid;
+ border-radius: 50%;
+
+ &.resolved {
+ background-color: $gray-700;
+ }
}
}
@@ -40,14 +66,31 @@
min-width: 400px;
flex-basis: 28%;
+ .link-inherit-color {
+ &:hover,
+ &:active,
+ &:focus {
+ color: inherit;
+ text-decoration: none;
+ }
+ }
+
+ .toggle-comments {
+ line-height: 20px;
+ border-top: 1px solid $border-color;
+
+ &.expanded {
+ border-bottom: 1px solid $border-color;
+ }
+
+ .toggle-comments-button:focus {
+ text-decoration: none;
+ color: $blue-600;
+ }
+ }
+
.badge.badge-pill {
margin-left: $gl-padding;
- background-color: $blue-400;
- color: $white;
- border: $white 1px solid;
- min-height: 28px;
- padding: 7px 10px;
- border-radius: $gl-padding;
}
.design-discussion {
diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss
index fcaa1b054ed..1e78781f4b8 100644
--- a/app/assets/stylesheets/components/popover.scss
+++ b/app/assets/stylesheets/components/popover.scss
@@ -1,7 +1,7 @@
.popover {
max-width: $popover-max-width;
border: 1px solid $gray-200;
- box-shadow: 0 2px 3px 1px $gray-200;
+ box-shadow: $popover-box-shadow;
font-size: $gl-font-size-small;
/**
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss
index 61f971a3185..956f34f7a8b 100644
--- a/app/assets/stylesheets/components/related_items_list.scss
+++ b/app/assets/stylesheets/components/related_items_list.scss
@@ -23,20 +23,17 @@ $item-remove-button-space: 42px;
.sortable-link {
white-space: normal;
}
+
+ .item-assignees .avatar {
+ height: $gl-padding;
+ width: $gl-padding;
+ }
}
.item-body {
position: relative;
line-height: $gl-line-height;
- .issue-token-state-icon-open {
- color: $green-500;
- }
-
- .issue-token-state-icon-closed {
- color: $blue-500;
- }
-
.merge-request-status.closed {
color: $red-500;
}
@@ -68,7 +65,6 @@ $item-remove-button-space: 42px;
.sortable-link {
color: $gray-900;
- font-weight: normal;
}
}
@@ -276,10 +272,6 @@ $item-remove-button-space: 42px;
/* Small devices (landscape phones, 768px and up) */
@include media-breakpoint-up(md) {
- .item-body .item-contents {
- max-width: 95%;
- }
-
.related-items-tree .item-contents,
.item-body .item-title {
max-width: 100%;
@@ -348,6 +340,11 @@ $item-remove-button-space: 42px;
}
.item-assignees {
+ .avatar {
+ height: $gl-padding-24;
+ width: $gl-padding-24;
+ }
+
.avatar-counter {
height: $gl-padding-24;
min-width: $gl-padding-24;
@@ -366,6 +363,10 @@ $item-remove-button-space: 42px;
.sortable-link {
line-height: 1.3;
}
+
+ .item-info-area {
+ flex-basis: auto;
+ }
}
@media only screen and (min-width: 1500px) {
diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss
index eca0f1114af..bedd06ec9a1 100644
--- a/app/assets/stylesheets/components/rich_content_editor.scss
+++ b/app/assets/stylesheets/components/rich_content_editor.scss
@@ -1,4 +1,8 @@
-// Overrides styles from ToastUI editor
+/**
+* Overrides styles from ToastUI editor
+*/
+
+// Toolbar buttons
.tui-editor-defaultUI-toolbar .toolbar-button {
color: $gl-gray-600;
border: 0;
@@ -9,3 +13,19 @@
border: 0;
}
}
+
+// Contextual menu's & popups
+.tui-editor-defaultUI .tui-popup-wrapper {
+ @include gl-overflow-hidden;
+ @include gl-rounded-base;
+ @include gl-border-gray-400;
+
+ hr {
+ @include gl-m-0;
+ @include gl-bg-gray-400;
+ }
+
+ button {
+ @include gl-text-gray-800;
+ }
+}
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 13174687e5d..136ff82e0f8 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -93,7 +93,6 @@
}
.dropdown-menu-toggle,
-.avatar-circle,
.header-user-avatar {
@include transition(border-color);
}
@@ -177,7 +176,7 @@ a {
[class^='skeleton-line-'] {
position: relative;
- background-color: $gray-100;
+ background-color: $gray-50;
height: 10px;
overflow: hidden;
@@ -192,10 +191,10 @@ a {
background-repeat: no-repeat;
background-size: cover;
background-image: linear-gradient(to right,
- $gray-100 0%,
+ $gray-50 0%,
$gray-10 20%,
- $gray-100 40%,
- $gray-100 100%);
+ $gray-50 40%,
+ $gray-50 100%);
height: 10px;
}
}
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index c036267a7c8..5b8a4bf964e 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -1,6 +1,14 @@
-.badge.badge-pill {
+.badge.badge-pill:not(.gl-badge) {
font-weight: $gl-font-weight-normal;
background-color: $badge-bg;
color: $gray-800;
vertical-align: baseline;
+
+ // Do not use this!
+ // This is a temporary workaround until the new GlBadge component
+ // is available: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/481
+ &.badge-pill-success {
+ background-color: rgba($green-500, 0.2);
+ color: $green;
+ }
}
diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
index 7dd7ab339dd..a1e757afe56 100644
--- a/app/assets/stylesheets/framework/blank.scss
+++ b/app/assets/stylesheets/framework/blank.scss
@@ -116,3 +116,17 @@
}
}
}
+
+.experiment-new-project-page-blank-state {
+ @include media-breakpoint-down(md) {
+ flex-direction: column;
+ justify-content: center;
+ text-align: center;
+ }
+}
+
+$experiment-new-project-indigo-700: #41419f;
+
+.experiment-new-project-page-blank-state-title {
+ color: $experiment-new-project-indigo-700;
+}
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss
index 9903d10d27c..534ada08b85 100644
--- a/app/assets/stylesheets/framework/broadcast_messages.scss
+++ b/app/assets/stylesheets/framework/broadcast_messages.scss
@@ -14,8 +14,6 @@
}
.broadcast-banner-message {
- @extend .broadcast-message;
- @extend .alert-warning;
text-align: center;
.broadcast-message-dismiss {
@@ -24,8 +22,6 @@
}
.broadcast-notification-message {
- @extend .broadcast-message;
-
position: fixed;
bottom: $gl-padding;
right: $gl-padding;
@@ -42,7 +38,6 @@
}
.broadcast-message-dismiss {
- height: 100%;
color: $gray-800;
}
}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 93361c21642..849ca4a79f8 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -111,7 +111,7 @@ pre {
hr {
margin: 24px 0;
- border-top: 1px solid darken($gray-normal, 8%);
+ border-top: 1px solid $gray-darker;
}
.str-truncated {
@@ -135,7 +135,7 @@ hr {
text-overflow: ellipsis;
white-space: nowrap;
- > div:not(.block),
+ > div:not(.block):not(.select2-display-none),
.str-truncated {
display: inline;
}
@@ -396,21 +396,13 @@ 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-0 { margin-top: 0; }
-.prepend-top-2 { margin-top: 2px; }
-.prepend-top-4 { margin-top: $gl-padding-4; }
.prepend-top-5 { margin-top: 5px; }
-.prepend-top-8 { margin-top: $grid-size; }
.prepend-top-10 { margin-top: 10px; }
.prepend-top-15 { margin-top: 15px; }
.prepend-top-default { margin-top: $gl-padding !important; }
.prepend-top-16 { margin-top: 16px; }
.prepend-top-20 { margin-top: 20px; }
-.prepend-top-32 { margin-top: 32px; }
-.prepend-left-2 { margin-left: 2px; }
-.prepend-left-4 { margin-left: 4px; }
.prepend-left-5 { margin-left: 5px; }
-.prepend-left-8 { margin-left: 8px; }
.prepend-left-10 { margin-left: 10px; }
.prepend-left-15 { margin-left: 15px; }
.prepend-left-default { margin-left: $gl-padding; }
@@ -420,7 +412,6 @@ img.emoji {
.append-right-2 { margin-right: 2px; }
.append-right-4 { margin-right: 4px; }
.append-right-5 { margin-right: 5px; }
-.append-right-8 { margin-right: 8px; }
.append-right-10 { margin-right: 10px; }
.append-right-15 { margin-right: 15px; }
.append-right-default { margin-right: $gl-padding; }
@@ -428,11 +419,7 @@ img.emoji {
.append-right-32 { margin-right: 32px; }
.append-right-48 { margin-right: 48px; }
.prepend-right-32 { margin-right: 32px; }
-.append-bottom-0 { margin-bottom: 0; }
-.append-bottom-2 { margin-bottom: 2px; }
-.append-bottom-4 { margin-bottom: $gl-padding-4; }
.append-bottom-5 { margin-bottom: 5px; }
-.append-bottom-8 { margin-bottom: $grid-size; }
.append-bottom-10 { margin-bottom: 10px; }
.append-bottom-15 { margin-bottom: 15px; }
.append-bottom-20 { margin-bottom: 20px; }
@@ -521,31 +508,6 @@ img.emoji {
}
/**
- The zero-indexed classes will not change and do not need to be updated.
- These can be removed when the Gitlab UI class include is merged.
-**/
-
-.gl-p-0 {
- padding: 0;
-}
-
-.gl-pl-0 {
- padding-left: 0;
-}
-
-.gl-pr-0 {
- padding-right: 0;
-}
-
-.gl-pt-0 {
- padding-top: 0;
-}
-
-.gl-pb-0 {
- padding-bottom: 0;
-}
-
-/**
* Removes browser specific clear icon from input fields in
* Internet Explorer 10, Internet Explorer 11, and Microsoft Edge.
* This is intended for elements which add a customized clear icon.
@@ -602,7 +564,7 @@ img.emoji {
bottom: 40px;
right: 40px;
font-size: $gl-font-size-small;
- background: $gray-100;
+ background: $gray-50;
width: 200px;
border-radius: 24px;
box-shadow: 0 2px 4px $issue-boards-card-shadow;
@@ -637,8 +599,6 @@ img.emoji {
.gl-font-lg { font-size: $gl-font-size-large; }
.gl-font-base { font-size: $gl-font-size-14; }
-.gl-line-height-24 { line-height: $gl-line-height-24; }
-
.gl-font-size-0 { font-size: 0; }
.gl-font-size-28 { font-size: $gl-font-size-28; }
.gl-font-size-42 { font-size: $gl-font-size-42; }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 11064f18418..e4bee01f61f 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -137,7 +137,7 @@
.badge.badge-pill:not(.fly-out-badge),
.sidebar-context-title,
.nav-item-name {
- display: none;
+ @include gl-sr-only;
}
.sidebar-top-level-items > li > a {
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 1df9818a877..485a4879c43 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -657,6 +657,7 @@
.dropdown-input-field,
.default-dropdown-input {
+ background-color: $input-bg;
display: block;
width: 100%;
min-height: 30px;
@@ -940,7 +941,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
position: absolute;
top: 13px;
right: 25px;
- color: $gray-100;
+ color: $gray-50;
}
}
@@ -979,7 +980,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
&:hover {
.frequent-items-item-avatar-container .avatar {
- border-color: $gray-100;
+ border-color: $gray-50;
}
}
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 7ee3e68ceea..eef6d9031f8 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -480,7 +480,7 @@ span.idiff {
padding-bottom: $gl-padding;
.discussion-reply-holder {
- border-bottom: 1px solid $gray-100;
+ border-bottom: 1px solid $gray-50;
border-radius: 0;
}
}
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 5f6a26d0a14..9bba5c0614a 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -96,7 +96,7 @@
}
.name {
- background-color: $white-normal;
+ background-color: $gray-50;
color: $gl-text-color-secondary;
border-radius: 2px 0 0 2px;
margin-right: 1px;
@@ -259,6 +259,7 @@
flex: 1;
position: relative;
min-width: 0;
+ background-color: $input-bg;
}
.filtered-search-input-dropdown-menu {
@@ -449,3 +450,17 @@
font-size: 13px;
}
}
+
+.vue-filtered-search-bar-container {
+ @include media-breakpoint-up(md) {
+ .sort-dropdown-container {
+ margin-left: 10px;
+ }
+ }
+
+ @include media-breakpoint-down(sm) {
+ .sort-dropdown-container {
+ margin-top: 10px;
+ }
+ }
+}
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 6a2f36d2509..8d5afe1d312 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -314,12 +314,12 @@ body {
$gray-800,
$gray-700,
$gray-700,
- $gray-100,
+ $gray-50,
$gray-700
);
.navbar-gitlab {
- background-color: $gray-100;
+ background-color: $gray-50;
box-shadow: 0 1px 0 0 $border-color;
.logo-text svg {
@@ -388,4 +388,49 @@ body {
color: $gray-900;
}
}
+
+ &.gl-dark {
+ .logo-text svg {
+ fill: $gl-text-color;
+ }
+
+ .navbar-gitlab {
+ background-color: $gray-50;
+
+ .navbar-sub-nav,
+ .navbar-nav {
+ li {
+ > a:hover,
+ > a:focus,
+ > button:hover,
+ > button:focus {
+ color: $gl-text-color;
+ background-color: $gray-200;
+ }
+ }
+
+ li.active,
+ li.dropdown.show {
+ > a,
+ > button {
+ color: $gl-text-color;
+ background-color: $gray-200;
+ }
+ }
+ }
+
+ .search {
+ form {
+ background-color: $gray-100;
+ box-shadow: inset 0 0 0 1px $border-color;
+
+ &:active,
+ &:hover {
+ background-color: $gray-100;
+ box-shadow: inset 0 0 0 1px $blue-200;
+ }
+ }
+ }
+ }
+ }
}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 97698fefbee..2a97009e605 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -123,7 +123,7 @@
.markdown-area {
border-radius: 0;
background: $white;
- border: 1px solid $gray-100;
+ border: 1px solid $gray-50;
min-height: 140px;
max-height: 500px;
padding: 5px;
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 3c428cc352f..c2ab6f5b8c5 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -12,6 +12,7 @@
.select2-container.select2-drop-above {
.select2-choice {
background: $white;
+ color: $gl-text-color;
border-color: $input-border;
height: 34px;
padding: $gl-vert-padding $gl-input-padding;
@@ -58,6 +59,42 @@
}
}
+ // Essentially we’re doing @include form-control-focus here (from
+ // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
+ // `&:focus` selector and we’re never actually focusing the .select2-choice
+ // link nor the .select2-container, the Select2 library focuses an off-screen
+ // .select2-focusser element instead.
+ &.select2-container-active:not(.select2-dropdown-open) {
+ .select2-choice {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ }
+
+ // Reusable focus “glow” box-shadow
+ @mixin form-control-focus-glow {
+ @if $enable-shadows {
+ box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ } @else {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+
+ // Apply the focus “glow” shadow to the .select2-container if it also has
+ // the .block-truncated class as that applies an overflow: hidden, thereby
+ // hiding the glow of the nested .select2-choice element.
+ &.block-truncated {
+ @include form-control-focus-glow;
+ }
+
+ // Apply the glow directly to the .select2-choice link if we’re not
+ // block-truncating the container.
+ &:not(.block-truncated) .select2-choice {
+ @include form-control-focus-glow;
+ }
+ }
+
&.is-invalid {
~ .invalid-feedback {
display: block;
@@ -72,6 +109,7 @@
.select2-drop,
.select2-drop.select2-drop-above {
+ background: $white;
box-shadow: 0 2px 4px $dropdown-shadow-color;
border-radius: $border-radius-base;
border: 1px solid $border-color;
@@ -166,7 +204,8 @@
input {
padding: $grid-size;
- background: $white image-url('select2.png');
+ background: transparent image-url('select2.png');
+ color: $gl-text-color;
background-clip: content-box;
background-origin: content-box;
background-repeat: no-repeat;
diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss
index 5c298d5a588..4f66d6bf354 100644
--- a/app/assets/stylesheets/framework/system_messages.scss
+++ b/app/assets/stylesheets/framework/system_messages.scss
@@ -83,12 +83,20 @@
// right sidebar eg: mr page
.nav-sidebar,
.right-sidebar,
- // navless pages' footer eg: login page
- // navless pages' footer border eg: login page
+ // navless pages' footer eg: login page
+ // navless pages' footer border eg: login page
&.devise-layout-html body .footer-container,
&.devise-layout-html body hr.footer-fixed {
bottom: $system-footer-height;
}
+
+ .content-wrapper {
+ margin-bottom: 16px;
+ }
+
+ .boards-list {
+ height: calc(100vh - #{$header-height + $breadcrumb-min-height + $performance-bar-height + $system-footer-height + $gl-padding-32});
+ }
}
.fullscreen-layout {
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 5739f048e86..5bc2874ea05 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -47,7 +47,7 @@ table {
}
th {
- @include gl-bg-gray-100;
+ @include gl-bg-gray-50;
border-bottom: 0;
&.wide {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 1afcbc6d514..6e07a2b5de1 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -545,6 +545,24 @@
}
}
}
+
+ /* AsciiDoc(tor) built-in alignment roles */
+
+ .text-left {
+ text-align: left !important;
+ }
+
+ .text-right {
+ text-align: right !important;
+ }
+
+ .text-center {
+ text-align: center !important;
+ }
+
+ .text-justify {
+ text-align: justify !important;
+ }
}
/**
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index ac4d431ea57..1536c5c3022 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -73,108 +73,106 @@ $size-scale: (
'xl': #{70 * $grid-size}
);
-/*
- * Color schema
- */
-$darken-normal-factor: 7%;
-$darken-dark-factor: 10%;
-$darken-border-factor: 5%;
-$darken-border-dashed-factor: 25%;
-
-$white: #fff;
-$white-normal: #f0f0f0;
-$white-dark: #eaeaea;
-$white-transparent: rgba(255, 255, 255, 0.8);
-
-$gray-lightest: #fdfdfd;
-$gray-light: #fafafa;
-$gray-lighter: #f9f9f9;
-$gray-normal: #f5f5f5;
-$gray-dark: darken($gray-light, $darken-dark-factor);
-$gray-darker: #eee;
-$gray-darkest: #c4c4c4;
-
-$purple: #6d49cb;
-$purple-light: #ede8fb;
-
-$black: #000;
-$black-transparent: rgba(0, 0, 0, 0.3);
-$almost-black: #242424;
-
-$t-gray-a-02: rgba($black, 0.02);
-$t-gray-a-04: rgba($black, 0.04);
-$t-gray-a-06: rgba($black, 0.06);
-$t-gray-a-08: rgba($black, 0.08);
-
-$gl-gray-100: #ddd;
-$gl-gray-200: #ccc;
-$gl-gray-350: #aaa;
-$gl-gray-400: #999;
-$gl-gray-500: #777;
-$gl-gray-600: #666;
-$gl-gray-700: #555;
-$gl-gray-800: #333;
-
-$green-50: #f1fdf6;
-$green-100: #dcf5e7;
-$green-200: #b3e6c8;
-$green-300: #75d09b;
-$green-400: #37b96d;
-$green-500: #1aaa55;
-$green-600: #168f48;
-$green-700: #12753a;
-$green-800: #0e5a2d;
-$green-900: #0a4020;
-$green-950: #072b15;
-
-$blue-50: #f6fafe;
-$blue-100: #e4f0fb;
-$blue-200: #b8d6f4;
-$blue-300: #73afea;
-$blue-400: #418cd8;
-$blue-500: #1f78d1;
-$blue-600: #1b69b6;
-$blue-700: #17599c;
-$blue-800: #134a81;
-$blue-900: #0f3b66;
-$blue-950: #0a2744;
-
-$orange-50: #fffaf4;
-$orange-100: #fff1de;
-$orange-200: #fed69f;
-$orange-300: #fdbc60;
-$orange-400: #fca429;
-$orange-500: #fc9403;
-$orange-600: #de7e00;
-$orange-700: #c26700;
-$orange-800: #a35200;
-$orange-900: #853c00;
-$orange-950: #592800;
-
-$red-50: #fef6f5;
-$red-100: #fbe5e1;
-$red-200: #f2b4a9;
-$red-300: #ea8271;
-$red-400: #e05842;
-$red-500: #db3b21;
-$red-600: #c0341d;
-$red-700: #a62d19;
-$red-800: #8b2615;
-$red-900: #711e11;
-$red-950: #4b140b;
-
-$gray-10: #fafafa;
-$gray-50: #f0f0f0;
-$gray-100: #f2f2f2;
-$gray-200: #dfdfdf;
-$gray-300: #ccc;
-$gray-400: #bababa;
-$gray-500: #a7a7a7;
-$gray-600: #919191;
-$gray-700: #707070;
-$gray-800: #4f4f4f;
-$gray-900: #2e2e2e;
-$gray-950: #1f1f1f;
+// Color schema
+$darken-normal-factor: 7% !default;
+$darken-dark-factor: 10% !default;
+$darken-border-factor: 5% !default;
+$darken-border-dashed-factor: 25% !default;
+
+$white: #fff !default;
+$white-normal: #f0f0f0 !default;
+$white-dark: #eaeaea !default;
+$white-transparent: rgba(255, 255, 255, 0.8) !default;
+
+$gray-lightest: #fdfdfd !default;
+$gray-light: #fafafa !default;
+$gray-lighter: #f9f9f9 !default;
+$gray-normal: #f5f5f5 !default;
+$gray-dark: darken($gray-light, $darken-dark-factor) !default;
+$gray-darker: #eee !default;
+$gray-darkest: #c4c4c4 !default;
+
+$purple: #6d49cb !default;
+$purple-light: #ede8fb !default;
+
+$black: #000 !default;
+$black-transparent: rgba(0, 0, 0, 0.3) !default;
+$almost-black: #242424 !default;
+
+$t-gray-a-02: rgba($black, 0.02) !default;
+$t-gray-a-04: rgba($black, 0.04) !default;
+$t-gray-a-06: rgba($black, 0.06) !default;
+$t-gray-a-08: rgba($black, 0.08) !default;
+
+$gl-gray-100: #ddd !default;
+$gl-gray-200: #ccc !default;
+$gl-gray-350: #aaa !default;
+$gl-gray-400: #999 !default;
+$gl-gray-500: #777 !default;
+$gl-gray-600: #666 !default;
+$gl-gray-700: #555 !default;
+$gl-gray-800: #333 !default;
+
+$green-50: #f1fdf6 !default;
+$green-100: #dcf5e7 !default;
+$green-200: #263a2e !default;
+$green-300: #75d09b !default;
+$green-400: #37b96d !default;
+$green-500: #1aaa55 !default;
+$green-600: #168f48 !default;
+$green-700: #12753a !default;
+$green-800: #0e5a2d !default;
+$green-900: #0a4020 !default;
+$green-950: #072b15 !default;
+
+$blue-50: #f6fafe !default;
+$blue-100: #e4f0fb !default;
+$blue-200: #b8d6f4 !default;
+$blue-300: #73afea !default;
+$blue-400: #418cd8 !default;
+$blue-500: #1f78d1 !default;
+$blue-600: #1b69b6 !default;
+$blue-700: #17599c !default;
+$blue-800: #134a81 !default;
+$blue-900: #0f3b66 !default;
+$blue-950: #0a2744 !default;
+
+$orange-50: #fffaf4 !default;
+$orange-100: #fff1de !default;
+$orange-200: #fed69f !default;
+$orange-300: #fdbc60 !default;
+$orange-400: #fca429 !default;
+$orange-500: #fc9403 !default;
+$orange-600: #de7e00 !default;
+$orange-700: #c26700 !default;
+$orange-800: #a35200 !default;
+$orange-900: #853c00 !default;
+$orange-950: #592800 !default;
+
+$red-50: #fcf1ef !default;
+$red-100: #fdd4cd !default;
+$red-200: #fcb5aa !default;
+$red-300: #f57f6c !default;
+$red-400: #ec5941 !default;
+$red-500: #dd2b0e !default;
+$red-600: #c91c00 !default;
+$red-700: #ae1800 !default;
+$red-800: #8d1300 !default;
+$red-900: #660e00 !default;
+$red-950: #4d0a00 !default;
+
+$gray-10: #fafafa !default;
+$gray-50: #f0f0f0 !default;
+$gray-100: #dbdbdb !default;
+$gray-200: #dfdfdf !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-900: #2e2e2e !default;
+$gray-950: #1f1f1f !default;
$greens: (
'50': $green-50,
@@ -325,8 +323,8 @@ $theme-light-red-500: #c24b38;
$theme-light-red-600: #b03927;
$theme-light-red-700: #a62e21;
-$border-white-light: darken($white, $darken-border-factor);
-$border-white-normal: darken($white-normal, $darken-border-factor);
+$border-white-light: darken($white, $darken-border-factor) !default;
+$border-white-normal: darken($white-normal, $darken-border-factor) !default;
$border-gray-light: darken($gray-light, $darken-border-factor);
$border-gray-normal: darken($gray-normal, $darken-border-factor);
@@ -335,7 +333,7 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
/*
* UI elements
*/
-$border-color: #e5e5e5;
+$border-color: $gray-200;
$shadow-color: $t-gray-a-08;
$well-expand-item: #e8f2f7;
$well-inner-border: #eef0f2;
@@ -356,7 +354,7 @@ $gl-text-color-secondary: $gray-700;
$gl-text-color-tertiary: $gray-600;
$gl-text-color-quaternary: #d6d6d6;
$gl-text-color-inverted: $white;
-$gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85);
+$gl-text-color-secondary-inverted: rgba($white, 0.85);
$gl-text-color-disabled: $gray-600;
$gl-grayish-blue: #7f8fa4;
$gl-gray-dark: #313236;
@@ -435,7 +433,6 @@ $layout-link-gray: #7e7c7c;
$btn-side-margin: 10px;
$btn-sm-side-margin: 7px;
$btn-margin-5: 5px;
-$sidebar-block-hover-color: #ebebeb;
$count-arrow-border: #dce0e5;
$general-hover-transition-duration: 100ms;
$general-hover-transition-curve: linear;
@@ -491,8 +488,8 @@ $line-number-select: #fbf2da;
$line-target-blue: $blue-50;
$line-select-yellow: #fcf8e7;
$line-select-yellow-dark: #f0e2bd;
-$dark-diff-match-bg: rgba(255, 255, 255, 0.3);
-$dark-diff-match-color: rgba(255, 255, 255, 0.1);
+$dark-diff-match-bg: rgba($white, 0.3);
+$dark-diff-match-color: rgba($white, 0.1);
$diff-image-info-color: #808080;
$diff-view-modes-color: #808080;
$diff-view-modes-border: #c1c1c1;
@@ -520,7 +517,7 @@ $dropdown-shadow-color: rgba(#000, 0.1);
$dropdown-title-btn-color: #bfbfbf;
$dropdown-input-fa-color: #c7c7c7;
$dropdown-input-focus-shadow: rgba($blue-300, 0.4);
-$dropdown-loading-bg: rgba(#fff, 0.6);
+$dropdown-loading-bg: rgba($white, 0.6);
$dropdown-chevron-size: 10px;
$dropdown-toggle-active-border-color: darken($border-color, 14%);
$dropdown-fade-mask-height: 32px;
@@ -534,9 +531,9 @@ $filtered-search-term-shadow-color: rgba(0, 0, 0, 0.09);
/*
* Contextual Sidebar
*/
-$link-active-background: rgba(0, 0, 0, 0.04);
-$link-hover-background: rgba(0, 0, 0, 0.06);
-$inactive-badge-background: rgba(0, 0, 0, 0.08);
+$link-active-background: rgba($black, 0.04);
+$link-hover-background: rgba($gray-900, 0.06);
+$inactive-badge-background: rgba($black, 0.08);
$sidebar-toggle-height: 60px;
$sidebar-toggle-width: 40px;
$sidebar-milestone-toggle-bottom-margin: 10px;
@@ -544,8 +541,8 @@ $sidebar-milestone-toggle-bottom-margin: 10px;
/*
* Buttons
*/
-$btn-active-gray: #ececec;
-$btn-active-gray-light: #e4e7ed;
+$btn-active-gray: $gray-50;
+$btn-active-gray-light: $gray-50;
$btn-white-active: #848484;
$gl-btn-padding: 10px;
$gl-btn-line-height: 16px;
@@ -602,12 +599,12 @@ $note-icon-gutter-width: 55px;
/*
* Identicon
*/
-$identicon-red: #ffebee;
-$identicon-purple: #f3e5f5;
-$identicon-indigo: #e8eaf6;
-$identicon-blue: #e3f2fd;
-$identicon-teal: #e0f2f1;
-$identicon-orange: #fbe9e7;
+$identicon-red: #ffebee !default;
+$identicon-purple: #f3e5f5 !default;
+$identicon-indigo: #e8eaf6 !default;
+$identicon-blue: #e3f2fd !default;
+$identicon-teal: #e0f2f1 !default;
+$identicon-orange: #fbe9e7 !default;
/*
* Calendar
@@ -719,8 +716,8 @@ $accepting-mr-label-color: #69d100;
/*
* Issues
*/
-$issues-today-bg: #f3fff2;
-$issues-today-border: #e1e8d5;
+$issues-today-bg: #f3fff2 !default;
+$issues-today-border: #e1e8d5 !default;
$compare-display-color: #888;
/*
@@ -871,6 +868,7 @@ $priority-label-empty-state-width: 114px;
Popovers
*/
$popover-max-width: 384px;
+$popover-box-shadow: 0 2px 3px 1px $gray-200;
/*
Issues Analytics
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index ef75dabbda4..c7a50bdb5a3 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -55,3 +55,26 @@ $tooltip-padding-y: 0.5rem;
$tooltip-padding-x: 0.75rem;
$tooltip-arrow-height: 0.5rem;
$tooltip-arrow-width: 1rem;
+$b-table-sort-icon-bg-descending: url('data:image/svg+xml, <svg \
+ xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
+ <path style="fill: #666;" 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"/> \
+ </svg>') !default;
+$b-table-sort-icon-bg-ascending: url('data:image/svg+xml,<svg \
+ xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="4 0 8 16"> \
+ <path style="fill: #666;" fill-rule="evenodd" d="M4.29289,4.2971 L8,0.59 \
+ L11.7071,4.2971 C12.0976,4.6876 \
+ 12.0976,5.3208 11.7071,5.7113 C11.3166,6.10183 10.6834, \
+ 6.10183 10.2929,5.7113 L9,4.4184 L9,14.0042 C9,14.55649 \
+ 8.55228,15.0042 8,15.0042 C7.44772,15.0042 7,14.55649 \
+ 7,14.0042 L7,4.4184 L5.70711,5.7113 C5.31658,6.10183 4.68342,6.10183 4.29289,5.7113 \
+ C3.90237,5.3208 3.90237,4.6876 4.29289,4.2971 Z"/> \
+ </svg> ') !default;
+$b-table-sort-icon-bg-not-sorted: '';
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index 2bf823993d7..6320c10fb51 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -36,5 +36,5 @@ pre.commit-message {
}
.gl-label-text-dark {
- color: $gl-gray-800;
+ color: $gl-text-color;
}
diff --git a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
index 5675835a622..0b847902525 100644
--- a/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_monaco_overrides.scss
@@ -27,8 +27,7 @@
z-index: 2;
}
- .is-readonly,
- .editor.original {
+ .is-readonly .editor.original {
.view-lines {
cursor: default;
}
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
index e4c01c2bd6c..2b82b2226c6 100644
--- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
+++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss
@@ -1,9 +1,15 @@
// -------
// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
// -------
-.ide.theme-dark {
- a:not(.btn) {
- color: var(--ide-link-color);
+.ide {
+ $bs-input-focus-border: #80bdff;
+ $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25);
+
+ a:not(.btn),
+ .btn-link:hover,
+ .btn-link:focus,
+ .btn-link:active {
+ color: var(--ide-link-color, $blue-600);
}
h1,
@@ -19,156 +25,207 @@
.context-header > a,
input,
textarea,
- .md-area.is-focused,
.dropdown-menu li button,
.dropdown-menu-selectable li a.is-active,
.dropdown-menu-inner-title,
- .dropdown-menu-inner-content,
- .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
- .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover,
- .nav-links:not(.quick-links) li:not(.md-header-toolbar) a.active .badge.badge-pill,
- .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover .badge.badge-pill,
- .badge.badge-pill,
.bs-callout,
.ide-pipeline .top-bar,
- .ide-pipeline .top-bar .controllers .controllers-buttons {
- color: var(--ide-text-color);
+ .ide-pipeline .top-bar .controllers .controllers-buttons,
+ .controllers-buttons svg,
+ .nav-links li a.active,
+ .md-area.is-focused {
+ color: var(--ide-text-color, $gl-text-color);
}
- .drag-handle:hover,
- .card-header .badge.badge-pill {
- background-color: var(--ide-dropdown-hover-background);
+ .badge.badge-pill {
+ color: var(--ide-text-color, $gray-800);
+ background-color: var(--ide-background, $badge-bg);
}
+ .nav-links:not(.quick-links) li:not(.md-header-toolbar) a,
+ .dropdown-menu-inner-content,
.file-row .file-row-icon svg,
- .file-row:hover .file-row-icon svg,
- .controllers-buttons svg {
- color: var(--ide-text-color-secondary);
+ .file-row:hover .file-row-icon svg {
+ color: var(--ide-text-color-secondary, $gl-text-color-secondary);
+ }
+
+ .nav-links:not(.quick-links) li:not(.md-header-toolbar) {
+ &:hover a,
+ &.active a,
+ a:hover,
+ a.active {
+ &,
+ .badge.badge-pill {
+ color: var(--ide-text-color, $black);
+ border-color: var(--ide-input-border, $gray-darkest);
+ }
+ }
+ }
+
+ .drag-handle:hover {
+ background-color: var(--ide-dropdown-hover-background, $white-normal);
+ }
+
+ .card-header {
+ background-color: var(--ide-background, $white);
+
+ .badge.badge-pill {
+ background-color: var(--ide-dropdown-hover-background, $badge-bg);
+ }
}
.text-secondary {
- color: var(--ide-text-color-secondary) !important;
+ color: var(--ide-text-color-secondary, $gl-text-color-secondary) !important;
}
input[type='search']::placeholder,
input[type='text']::placeholder,
- textarea::placeholder,
+ textarea::placeholder {
+ color: var(--ide-input-border, $gl-text-color-tertiary);
+ }
+
.dropdown-input .fa {
- color: var(--ide-input-border);
+ color: var(--ide-input-border, $dropdown-input-fa-color);
}
.ide-nav-form .input-icon {
- color: var(--ide-input-border);
+ color: var(--ide-input-border, $dropdown-input-fa-color);
+ }
+
+ code {
+ background-color: var(--ide-background, $gray-100);
}
- code,
- .badge.badge-pill,
- .card-header,
.bs-callout,
.ide-pipeline .top-bar,
.ide-terminal .top-bar {
- background-color: var(--ide-background);
+ background-color: var(--ide-background, $gray-light);
}
.bs-callout {
- border-color: var(--ide-dropdown-background);
+ border-color: var(--ide-dropdown-background, $border-color);
code {
- background-color: var(--ide-dropdown-background);
+ background-color: var(--ide-dropdown-background, $gray-100);
}
}
- .nav-links:not(.quick-links) li:not(.md-header-toolbar) a:hover {
- border-color: var(--ide-dropdown-hover-background);
+ .common-note-form .md-area {
+ border-color: var(--ide-input-border, $border-color);
}
- .common-note-form .md-area {
- border-color: var(--ide-input-border);
+ .md table:not(.code) tr th {
+ background-color: var(--ide-highlight-background, $gray-100);
}
&,
- .md table:not(.code) tr th,
- .common-note-form .md-area,
- .card {
- background-color: var(--ide-highlight-background);
+ .card,
+ .common-note-form .md-area {
+ background-color: var(--ide-highlight-background, $white);
}
.card,
.card-header,
.ide-terminal .top-bar,
.ide-pipeline .top-bar {
- border-color: var(--ide-border-color);
+ border-color: var(--ide-border-color, $border-color);
+ }
+
+ hr {
+ border-color: var(--ide-border-color, darken($gray-normal, 8%));
}
- hr,
.md h1,
.md h2,
.md blockquote,
- pre,
.md table:not(.code) tbody td,
.md table:not(.code) tr th,
- .nav-links:not(.quick-links) {
- border-color: var(--ide-border-color-alt);
+ .nav-links:not(.quick-links),
+ .common-note-form .md-area.is-focused .nav-links {
+ border-color: var(--ide-border-color-alt, $white-dark);
}
- .ide-sidebar-link.active {
- color: var(--ide-highlight-accent);
- box-shadow: inset 3px 0 var(--ide-highlight-accent);
+ pre {
+ border-color: var(--ide-border-color-alt, $gray-200);
- &.is-right {
- box-shadow: inset -3px 0 var(--ide-highlight-accent);
+ code {
+ background-color: var(--ide-border-color, inherit);
}
}
- .nav-links li.active a,
- .nav-links li a.active {
- border-color: var(--ide-highlight-accent);
- color: var(--ide-text-color);
- }
+ // highlight accents (based on navigation theme) should only apply
+ // in the default white theme and "none" theme.
+ &:not(.theme-white):not(.theme-none) {
+ .ide-sidebar-link.active {
+ color: var(--ide-highlight-accent, $gl-text-color);
+ box-shadow: inset 3px 0 var(--ide-highlight-accent, $gl-text-color);
+
+ &.is-right {
+ box-shadow: inset -3px 0 var(--ide-highlight-accent, $gl-text-color);
+ }
+ }
+
+ .nav-links li.active a,
+ .nav-links li a.active {
+ border-color: var(--ide-highlight-accent, $gl-text-color);
+ }
- .avatar-container {
- &,
- .avatar {
- color: var(--ide-text-color);
- background-color: var(--ide-highlight-background);
- border-color: var(--ide-highlight-background);
+ .dropdown-menu .nav-links li a.active {
+ border-color: var(--ide-highlight-accent, $gl-text-color);
+ }
+
+ // for other themes, suppress different avatar default colors for simplicity
+ .avatar-container {
+ &,
+ .avatar {
+ color: var(--ide-text-color, $gl-text-color);
+ background-color: var(--ide-highlight-background, $white);
+ border-color: var(--ide-highlight-background, rgba($black, $gl-avatar-border-opacity));
+ }
}
}
input[type='text'],
input[type='search'],
.filtered-search-box {
- border-color: var(--ide-input-border);
- background: var(--ide-input-background) !important;
+ border-color: var(--ide-input-border, $border-color);
+ background: var(--ide-input-background, $white) !important;
+ }
+
+ input[type='text']:not([disabled]):not([readonly]):focus,
+ .md-area.is-focused {
+ border-color: var(--ide-input-border, $bs-input-focus-border);
+ box-shadow: 0 0 0 3px var(--ide-dropdown-background, $bs-input-focus-box-shadow);
}
input[type='text'],
input[type='search'],
.filtered-search-box,
textarea {
- color: var(--ide-input-color) !important;
+ color: var(--ide-input-color, $gl-text-color) !important;
}
.filtered-search-box input[type='search'] {
- border-color: transparent;
+ border-color: transparent !important;
+ box-shadow: none !important;
}
.filtered-search-token .value-container,
.filtered-search-term .value-container {
- background-color: var(--ide-dropdown-hover-background);
- color: var(--ide-text-color);
+ background-color: var(--ide-dropdown-hover-background, $white-normal);
+ color: var(--ide-text-color, $gl-text-color);
&:hover {
- background-color: var(--ide-input-border);
+ background-color: var(--ide-input-border, $gray-200);
}
}
@function calc-btn-hover-padding($original-padding, $original-border: 1px) {
- @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width));
+ @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border}));
}
.btn:not(.btn-link):not([disabled]):hover {
- border-width: var(--ide-btn-hover-border-width);
+ border-width: var(--ide-btn-hover-border-width, 1px);
padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px);
}
@@ -180,53 +237,71 @@
padding: calc-btn-hover-padding(6px) 0;
}
- .btn-inverted,
.btn-default,
.dropdown,
.dropdown-menu-toggle {
- background-color: var(--ide-input-background) !important;
- color: var(--ide-input-color) !important;
- border-color: var(--ide-btn-default-border);
+ background-color: var(--ide-input-background, $white) !important;
+ color: var(--ide-input-color, $gl-text-color) !important;
+ border-color: var(--ide-btn-default-border, $border-color);
}
- .btn-inverted,
- .btn-default {
+ .dropdown-menu-toggle {
+ border-color: var(--ide-btn-default-border, $gray-darkest);
+
&:hover,
&:focus {
- border-color: var(--ide-btn-default-hover-border) !important;
+ background-color: var(--ide-dropdown-btn-hover-background, $gray-darker) !important;
+ border-color: var(--ide-dropdown-btn-hover-border, $gray-darkest) !important;
}
}
- .dropdown,
- .dropdown-menu-toggle {
+ // In IDE, the only inverted buttons are `.btn-remove`
+ .btn-inverted.btn-remove {
+ color: var(--ide-input-color, $red-500) !important;
+ background-color: var(--ide-input-background, $white) !important;
+ border-color: var(--ide-btn-default-border, $red-500);
+
&:hover,
&:focus {
- background-color: var(--ide-dropdown-btn-hover-background) !important;
- border-color: var(--ide-dropdown-btn-hover-border) !important;
+ color: var(--ide-input-color, $red-700) !important;
+ background-color: var(--ide-input-background, $red-100) !important;
+ border-color: var(--ide-btn-default-hover-border, $red-500) !important;
}
- }
- .dropdown-menu {
- color: var(--ide-text-color);
- border-color: var(--ide-background);
- background-color: var(--ide-dropdown-background);
+ &:active {
+ color: var(--ide-input-color, $red-800) !important;
+ background-color: var(--ide-input-background, $red-200) !important;
+ border-color: var(--ide-btn-default-hover-border, $red-600) !important;
+ }
+ }
- .divider,
- .nav-links:not(.quick-links) {
- background-color: var(--ide-dropdown-hover-background);
- border-color: var(--ide-dropdown-hover-background);
+ .btn-default {
+ &:hover,
+ &:focus {
+ border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
+ background-color: var(--ide-input-background, $white-normal) !important;
}
- .nav-links li a.active {
- border-color: var(--ide-highlight-accent);
+ &:active,
+ .active {
+ border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important;
+ background-color: var(--ide-input-background, $white-dark) !important;
}
+ }
- .nav-links:not(.quick-links) li:not(.md-header-toolbar) a {
- color: var(--ide-text-color);
+ .dropdown-menu {
+ color: var(--ide-text-color, $gl-text-color);
+ border-color: var(--ide-background, $border-color);
+ background-color: var(--ide-dropdown-background, $white);
- &.active {
- color: var(--ide-text-color);
- }
+ .nav-links:not(.quick-links) {
+ background-color: var(--ide-dropdown-hover-background, $white);
+ border-color: var(--ide-dropdown-hover-background, $border-color);
+ }
+
+ .divider {
+ background-color: var(--ide-dropdown-hover-background, $gray-200);
+ border-color: var(--ide-dropdown-hover-background, $gray-200);
}
li > a:not(.disable-hover):hover,
@@ -234,75 +309,88 @@
li button:not(.disable-hover):hover,
li button:not(.disable-hover):focus,
li button.is-focused {
- background-color: var(--ide-dropdown-hover-background);
- color: var(--ide-text-color);
+ background-color: var(--ide-dropdown-hover-background, $gray-darker);
+ color: var(--ide-text-color, $gl-text-color);
}
}
.dropdown-title,
.dropdown-input {
- border-color: var(--ide-dropdown-hover-background) !important;
+ border-color: var(--ide-dropdown-hover-background, $gray-200) !important;
}
.btn-primary,
.btn-info {
- background-color: var(--ide-btn-primary-background);
- border-color: var(--ide-btn-primary-border) !important;
+ background-color: var(--ide-btn-primary-background, $blue-500);
+ border-color: var(--ide-btn-primary-border, $blue-600) !important;
&:hover,
&:focus {
- border-color: var(--ide-btn-primary-hover-border) !important;
+ background-color: var(--ide-btn-primary-background, $blue-600);
+ border-color: var(--ide-btn-primary-hover-border, $blue-700) !important;
+ }
+
+ &:active,
+ &.active {
+ background-color: var(--ide-btn-primary-background, $blue-700);
+ border-color: var(--ide-btn-primary-hover-border, $blue-800) !important;
}
}
.btn-success {
- background-color: var(--ide-btn-success-background);
- border-color: var(--ide-btn-success-border) !important;
+ background-color: var(--ide-btn-success-background, $green-500);
+ border-color: var(--ide-btn-success-border, $green-600) !important;
&:hover,
&:focus {
- border-color: var(--ide-btn-success-hover-border) !important;
+ background-color: var(--ide-btn-success-background, $green-600);
+ border-color: var(--ide-btn-success-hover-border, $green-700) !important;
+ }
+
+ &:active,
+ &.active {
+ background-color: var(--ide-btn-success-background, $green-700);
+ border-color: var(--ide-btn-success-hover-border, $green-800) !important;
}
}
.btn[disabled] {
- background: var(--ide-btn-default-background) !important;
- border: 1px solid var(--ide-btn-disabled-border) !important;
- color: var(--ide-btn-disabled-color) !important;
+ background-color: var(--ide-btn-default-background, $gray-light) !important;
+ border: 1px solid var(--ide-btn-disabled-border, $gray-200) !important;
+ color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important;
}
- pre code,
.md table:not(.code) tbody {
- background-color: var(--ide-border-color);
+ background-color: var(--ide-border-color, $white);
}
.animation-container {
[class^='skeleton-line-'] {
- background-color: var(--ide-animation-gradient-1);
+ background-color: var(--ide-animation-gradient-1, $gray-100);
&::after {
background-image: linear-gradient(to right,
- var(--ide-animation-gradient-1) 0%,
- var(--ide-animation-gradient-2) 20%,
- var(--ide-animation-gradient-1) 40%,
- var(--ide-animation-gradient-1) 100%);
+ var(--ide-animation-gradient-1, $gray-100) 0%,
+ var(--ide-animation-gradient-2, $gray-10) 20%,
+ var(--ide-animation-gradient-1, $gray-100) 40%,
+ var(--ide-animation-gradient-1, $gray-100) 100%);
}
}
}
.idiff.addition {
- background-color: var(--ide-diff-insert);
+ background-color: var(--ide-diff-insert, $line-added-dark);
}
.idiff.deletion {
- background-color: var(--ide-diff-remove);
+ background-color: var(--ide-diff-remove, $line-removed-dark);
}
-}
-.navbar.theme-dark {
- border-bottom-color: transparent;
+ ~ .popover {
+ box-shadow: none;
+ }
}
-.theme-dark ~ .popover {
- box-shadow: none;
+.navbar:not(.theme-white):not(.theme-none) {
+ border-bottom-color: transparent;
}
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 61914740ac0..9c92f891834 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -5,6 +5,7 @@
@import './ide_theme_overrides';
@import './ide_themes/dark';
+@import './ide_themes/solarized-dark';
$search-list-icon-width: 18px;
$ide-activity-bar-width: 60px;
@@ -24,6 +25,13 @@ $ide-commit-header-height: 48px;
@include str-truncated(250px);
}
+.ide-layout {
+ // Fix for iOS 13+, the height of the page is actually less than
+ // 100vh because of the presence of the bottom bar
+ max-height: 100%;
+ position: fixed;
+}
+
.ide-view {
position: relative;
margin-top: 0;
@@ -65,6 +73,7 @@ $ide-commit-header-height: 48px;
flex-direction: column;
flex: 1;
border-left: 1px solid var(--ide-border-color, $white-dark);
+ border-right: 1px solid var(--ide-border-color, $white-dark);
overflow: hidden;
}
@@ -88,7 +97,7 @@ $ide-commit-header-height: 48px;
&.active {
background-color: var(--ide-highlight-background, $white);
- border-bottom-color: var(--ide-border-color, $white);
+ border-bottom-color: transparent;
}
&:not(.disabled) {
@@ -281,7 +290,6 @@ $ide-commit-header-height: 48px;
.multi-file-commit-panel {
display: flex;
position: relative;
- width: 340px;
padding: 0;
background-color: var(--ide-background, $gray-light);
@@ -386,7 +394,7 @@ $ide-commit-header-height: 48px;
&:hover,
&:focus {
- background: var(--ide-background, $gray-100);
+ background: var(--ide-background, $gray-50);
outline: 0;
}
@@ -558,7 +566,7 @@ $ide-commit-header-height: 48px;
&:hover {
color: var(--ide-text-color, $gl-text-color);
- background-color: var(--ide-background-hover, $gray-100);
+ background-color: var(--ide-background-hover, $gray-50);
}
&:focus {
@@ -584,14 +592,15 @@ $ide-commit-header-height: 48px;
background: var(--ide-highlight-background, $white);
}
- &.is-right {
- padding-right: $gl-padding;
- padding-left: $gl-padding + 1px;
+ }
- &::after {
- right: auto;
- left: -1px;
- }
+ &.is-right {
+ padding-right: $gl-padding;
+ padding-left: $gl-padding + 1px;
+
+ &::after {
+ right: auto;
+ left: -1px;
}
}
}
@@ -872,26 +881,21 @@ $ide-commit-header-height: 48px;
}
.ide-sidebar {
- width: auto;
min-width: 60px;
}
.ide-right-sidebar {
- .ide-activity-bar {
- border-left: 1px solid var(--ide-border-color, $white-dark);
- }
-
.multi-file-commit-panel-inner {
- width: 350px;
padding: $grid-size 0;
background-color: var(--ide-highlight-background, $white);
- border-left: 1px solid var(--ide-border-color, $white-dark);
+ border-right: 1px solid var(--ide-border-color, $white-dark);
}
.ide-right-sidebar-jobs-detail {
padding-bottom: 0;
}
+ .ide-right-sidebar-terminal,
.ide-right-sidebar-clientside {
padding: 0;
}
@@ -901,7 +905,7 @@ $ide-commit-header-height: 48px;
@include ide-trace-view();
svg {
- --svg-status-bg: var(--ide-background, $white);
+ --svg-status-bg: var(--ide-background, #{$white});
}
.empty-state {
@@ -1043,7 +1047,7 @@ $ide-commit-header-height: 48px;
.ide-entry-dropdown-toggle {
padding: $gl-padding-4;
color: var(--ide-text-color, $gl-text-color);
- background-color: var(--ide-background, $gray-100);
+ background-color: var(--ide-background, $gray-50);
&:hover {
background-color: var(--ide-file-row-btn-hover-background, $gray-200);
@@ -1144,12 +1148,12 @@ $ide-commit-header-height: 48px;
}
.file-row.is-active {
- background: var(--ide-background, $gray-100);
+ background: var(--ide-background, $gray-50);
}
.file-row:hover,
.file-row:focus {
- background: var(--ide-background, $gray-100);
+ background: var(--ide-background, $gray-50);
.ide-new-btn {
display: block;
@@ -1159,3 +1163,22 @@ $ide-commit-header-height: 48px;
fill: var(--ide-text-color-secondary, $gl-text-color-secondary);
}
}
+
+.ide-terminal {
+ @include ide-trace-view();
+
+ .terminal-wrapper {
+ background: $black;
+ color: $gray-darkest;
+ overflow: hidden;
+ }
+
+ .xterm {
+ height: 100%;
+ padding: $grid-size;
+ }
+
+ .xterm-viewport {
+ overflow-y: auto;
+ }
+}
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/README.md b/app/assets/stylesheets/page_bundles/ide_themes/README.md
index 535179cc4c2..82e89aef49b 100644
--- a/app/assets/stylesheets/page_bundles/ide_themes/README.md
+++ b/app/assets/stylesheets/page_bundles/ide_themes/README.md
@@ -32,19 +32,7 @@ To add a new theme, follow the following steps:
3. Copy over all the CSS variables from `_dark.scss` to `_solarized_dark.scss` and assign them your own values.
Put them under the selector `.ide.theme-solarized-dark`.
4. Import this newly created SCSS file in `ide.scss` file in the parent directory.
-5. To make sure the variables apply to to your theme, add the selector `.ide.theme-solarized-dark` to the top
- of `_ide_theme_overrides.scss` file. The file should now look like this:
-
- ```scss
- .ide.theme-dark,
- .ide.theme-solarized-dark {
- /* file contents */
- }
- ```
-
- This step is temporary until all CSS variables in that file have their
- default values assigned.
-6. That's it! Raise a merge request with your newly added theme.
+5. That's it! Raise a merge request with your newly added theme.
## Modifying Monaco Themes
diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
new file mode 100644
index 00000000000..a58a0ed9475
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss
@@ -0,0 +1,50 @@
+// -------
+// Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes
+// -------
+.ide.theme-solarized-dark {
+ --ide-border-color: #002c38;
+ --ide-border-color-alt: var(--ide-background);
+ --ide-highlight-accent: #fff;
+ --ide-text-color: #ddd;
+ --ide-text-color-secondary: #ddd;
+ --ide-background: #004152;
+ --ide-background-hover: #003b4d;
+ --ide-highlight-background: #003240;
+ --ide-link-color: #73b9ff;
+ --ide-footer-background: var(--ide-highlight-background);
+
+ --ide-input-border: #d8d8d8;
+ --ide-input-background: transparent;
+ --ide-input-color: #fff;
+
+ --ide-btn-default-background: transparent;
+ --ide-btn-default-border: var(--ide-input-border);
+ --ide-btn-default-hover-border: #d8d8d8;
+
+ --ide-btn-primary-background: #1068bf;
+ --ide-btn-primary-border: #428fdc;
+ --ide-btn-primary-hover-border: #63a6e9;
+
+ --ide-btn-success-background: #217645;
+ --ide-btn-success-border: #108548;
+ --ide-btn-success-hover-border: #2da160;
+
+ --ide-btn-disabled-border: rgba(223, 223, 223, 0.24);
+ --ide-btn-disabled-color: rgba(145, 145, 145, 0.48);
+
+ --ide-btn-hover-border-width: 2px;
+
+ --ide-dropdown-background: #004c61;
+ --ide-dropdown-hover-background: #00617a;
+
+ --ide-dropdown-btn-hover-border: #e9ecef;
+ --ide-dropdown-btn-hover-background: var(--ide-background-hover);
+
+ --ide-file-row-btn-hover-background: #005a73;
+
+ --ide-diff-insert: rgba(155, 185, 85, 0.2);
+ --ide-diff-remove: rgba(255, 0, 0, 0.2);
+
+ --ide-animation-gradient-1: var(--ide-file-row-btn-hover-background);
+ --ide-animation-gradient-2: var(--ide-dropdown-hover-background);
+ }
diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss
index 89219e41644..591a26e5941 100644
--- a/app/assets/stylesheets/pages/alert_management/details.scss
+++ b/app/assets/stylesheets/pages/alert_management/details.scss
@@ -35,8 +35,39 @@
}
@include media-breakpoint-down(xs) {
- .alert-details-create-issue-button {
+ .alert-details-issue-button {
width: 100%;
}
}
+
+ .toggle-sidebar-mobile-button {
+ right: 0;
+ }
+
+ .dropdown-menu-toggle {
+ &:hover {
+ background-color: $white;
+ }
+ }
+
+ .assignee-dropdown-item {
+ .dropdown-item {
+ display: flex;
+ align-items: center;
+
+ &::before {
+ top: 50% !important;
+ }
+
+ &.is-active {
+ &:last-child {
+ border-bottom: 1px solid $gray-200;
+ }
+ }
+ }
+ }
+
+ .note-header-info {
+ margin-top: 1px;
+ }
}
diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss
index dc181342def..c1ea9b7604a 100644
--- a/app/assets/stylesheets/pages/alert_management/list.scss
+++ b/app/assets/stylesheets/pages/alert_management/list.scss
@@ -1,22 +1,4 @@
.alert-management-list {
- // consider adding these stateful variants to @gitlab-ui
- // https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1178
- .hover-bg-blue-50:hover {
- background-color: $blue-50;
- }
-
- .hover-gl-cursor-pointer:hover {
- cursor: pointer;
- }
-
- .hover-gl-border-b-solid:hover {
- @include gl-border-b-solid;
- }
-
- .hover-gl-border-blue-200:hover {
- border-color: $blue-200;
- }
-
// these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui
table {
color: $gray-700;
@@ -26,25 +8,52 @@
outline: none;
}
+ > :not([aria-sort='none']).b-table-sort-icon-left:hover::before {
+ content: '' !important;
+ }
+
td,
th {
- @include gl-p-5;
- border: 0; // Remove cell border styling so that we can set border styling per row
-
- &.event-count {
- @include gl-pr-9;
- }
+ // TODO: There is no gl-pl-9 utlity for this padding, to be done and then removed.
+ padding-left: 1.25rem;
+ @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;
+
+ &:hover::before {
+ left: 3%;
+ top: 34%;
+ @include gl-absolute;
+ content: url("data:image/svg+xml,%3Csvg \
+ xmlns='http://www.w3.org/2000/svg' \
+ width='14' height='14' viewBox='0 0 16 \
+ 16'%3E%3Cpath 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%0A");
+ }
}
+ }
- &:last-child {
- td {
- @include gl-border-0;
+ @include media-breakpoint-up(md) {
+ tr {
+ &:last-child {
+ td {
+ @include gl-border-0;
+ }
}
}
}
@@ -52,21 +61,31 @@
@include media-breakpoint-down(sm) {
.alert-management-table {
- .table-col {
- min-height: 68px;
+ tr {
+ border-top: 0;
- &:last-child {
- background-color: $gray-10;
+ .table-col {
+ min-height: 68px;
- &::before {
- content: none !important;
- }
+ &:last-child {
+ background-color: $gray-10;
+
+ &::before {
+ content: none !important;
+ }
- div {
- width: 100% !important;
- padding: 0 !important;
+ div {
+ width: 100% !important;
+ padding: 0 !important;
+ }
}
}
+
+ &:hover {
+ background-color: $white;
+ border-color: $white;
+ border-bottom-style: none;
+ }
}
}
}
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index d755170fe1f..3e680c59910 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -84,17 +84,22 @@
.board-title-caret {
cursor: pointer;
border-radius: $border-radius-default;
- padding: 4px;
+ line-height: $gl-spacing-scale-5;
+ height: $gl-spacing-scale-5;
+
+ &.btn svg {
+ top: 0;
+ }
&:hover {
- background-color: $gray-dark;
+ background-color: $gray-50;
transition: background-color 0.1s linear;
}
}
&:not(.is-collapsed) {
.board-title-caret {
- margin: 0 $gl-padding-4 0 -10px;
+ margin-right: $gl-padding-4;
}
}
@@ -155,7 +160,7 @@
.board-inner {
font-size: $issue-boards-font-size;
background: $gray-light;
- border: 1px solid $border-color;
+ border: 1px solid $gray-100;
}
.board-header {
@@ -186,8 +191,8 @@
.board-title {
align-items: center;
font-size: 1em;
- border-bottom: 1px solid $border-color;
- padding: $gl-padding-8 $gl-padding;
+ border-bottom: 1px solid $gray-100;
+ padding: $gl-padding-8;
.js-max-issue-size::before {
content: '/';
@@ -199,13 +204,13 @@
}
.board-delete {
- margin-right: 10px;
color: $gray-darkest;
background-color: transparent;
outline: 0;
&:hover {
color: $blue-600;
+ box-shadow: none;
}
}
@@ -246,7 +251,7 @@
.board-card {
background: $white;
- border: 1px solid $gray-200;
+ border: 1px solid $gray-100;
box-shadow: 0 1px 2px $issue-boards-card-shadow;
line-height: $gl-padding;
list-style: none;
@@ -541,7 +546,8 @@
cursor: help;
}
-.board-labels-toggle-wrapper {
+.board-labels-toggle-wrapper,
+.board-swimlanes-toggle-wrapper {
/**
* Make the wrapper the same height as a button so it aligns properly when the
* filtered-search-box input element increases in size on Linux smaller breakpoints
@@ -572,3 +578,8 @@
top: 0;
}
}
+
+.board-epics-swimlanes {
+ overflow-x: auto;
+ min-height: 600px;
+}
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index ddd1a373e2a..98d74a9aaa2 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -446,7 +446,7 @@ table.code {
vertical-align: top;
span {
- white-space: pre-wrap;
+ white-space: break-spaces;
&.context-cell {
display: inline-block;
diff --git a/app/assets/stylesheets/pages/experience_level.scss b/app/assets/stylesheets/pages/experience_level.scss
new file mode 100644
index 00000000000..e57ad6321a5
--- /dev/null
+++ b/app/assets/stylesheets/pages/experience_level.scss
@@ -0,0 +1,29 @@
+.signup-page[data-page^='registrations:experience_levels'] {
+ $card-shadow-color: rgba($black, 0.2);
+
+ .page-wrap {
+ background-color: $white;
+ }
+
+ .card-deck {
+ max-width: 828px;
+ }
+
+ .card {
+ transition: box-shadow 0.3s ease-in-out;
+ }
+
+ .card:hover {
+ box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color;
+ }
+
+ @media (min-width: $breakpoint-sm) {
+ .card-deck .card {
+ margin: 0 $gl-spacing-scale-3;
+ }
+ }
+
+ .stretched-link:hover {
+ text-decoration: none;
+ }
+}
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index beb0ea27de0..c309c8d157a 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -14,17 +14,12 @@
flex-direction: column;
margin: 0;
- .group-row-contents .controls > .btn:last-child {
- margin: 0;
- }
-
li {
.title {
font-weight: 600;
}
a {
- color: $gray-900;
text-decoration: none;
&:hover {
@@ -42,8 +37,6 @@
}
.group-row {
- @include basic-list-stats;
-
.description p {
margin-bottom: 0;
color: $gl-text-color-secondary;
@@ -56,6 +49,12 @@
}
}
+.save-group-loader {
+ margin-top: $gl-padding-50;
+ margin-bottom: $gl-padding-50;
+ color: $gl-gray-700;
+}
+
.group-nav-container .nav-controls {
.group-filter-form {
flex: 1 1 auto;
@@ -454,29 +453,10 @@ table.pipeline-project-metrics tr td {
min-width: 30px;
}
- > span:last-child {
- margin-right: 0;
- }
-
.stat-value {
margin: 2px 0 0 5px;
}
}
-
- .controls {
- flex-basis: 90px;
-
- > .btn {
- margin: 0 $btn-side-margin 0 0;
- color: $gl-text-color-secondary;
- }
- }
-
- .metadata {
- @include media-breakpoint-up(md) {
- flex-basis: 240px;
- }
- }
}
.project-row-contents .stats {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index b241d0a2bdc..b1e849143b0 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -396,7 +396,7 @@
overflow: hidden;
&:hover {
- background-color: $sidebar-block-hover-color;
+ background-color: $gray-200;
}
&.issuable-sidebar-header {
@@ -754,7 +754,8 @@
margin-right: 10px;
min-width: 0;
- .issue-weight-icon {
+ .issue-weight-icon,
+ .issue-estimate-icon {
vertical-align: sub;
}
}
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 0dd25ec5360..0c349ab73a3 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -304,6 +304,72 @@ ul.related-merge-requests > li {
}
}
+.issue-sticky-header {
+ @include gl-left-0;
+ @include gl-w-full;
+ top: $header-height;
+
+ // collapsed right sidebar
+ @include media-breakpoint-up(sm) {
+ width: calc(100% - #{$gutter-collapsed-width});
+ }
+
+ .issue-sticky-header-text {
+ max-width: $limited-layout-width;
+ }
+}
+
+.with-performance-bar .issue-sticky-header {
+ top: $header-height + $performance-bar-height;
+}
+
+@include media-breakpoint-up(md) {
+ // collapsed left sidebar + collapsed right sidebar
+ .issue-sticky-header {
+ left: $contextual-sidebar-collapsed-width;
+ width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
+ }
+
+ // collapsed left sidebar + expanded right sidebar
+ .right-sidebar-expanded .issue-sticky-header {
+ width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
+ }
+}
+
+@include media-breakpoint-up(xl) {
+ // expanded left sidebar + collapsed right sidebar
+ .issue-sticky-header {
+ left: $contextual-sidebar-width;
+ width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width});
+ }
+
+ // collapsed left sidebar + collapsed right sidebar
+ .page-with-icon-sidebar .issue-sticky-header {
+ left: $contextual-sidebar-collapsed-width;
+ width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width});
+ }
+
+ // expanded left sidebar + expanded right sidebar
+ .right-sidebar-expanded .issue-sticky-header {
+ width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width});
+ }
+
+ // collapsed left sidebar + expanded right sidebar
+ .right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header {
+ width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width});
+ }
+}
+
+.issuable-header-slide-enter-active,
+.issuable-header-slide-leave-active {
+ @include gl-transition-slow;
+}
+
+.issuable-header-slide-enter,
+.issuable-header-slide-leave-to {
+ transform: translateY(-100%);
+}
+
.issuable-list-root {
.gl-label-link {
text-decoration: none;
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 22c1cb127cd..c3bac053a0a 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -86,7 +86,7 @@
justify-content: space-between;
padding: $gl-padding;
border-radius: $border-radius-default;
- border: 1px solid $gray-100;
+ border: 1px solid $gray-50;
&:last-child {
margin-bottom: 0;
@@ -276,7 +276,7 @@
}
.label-badge-gray {
- background-color: $gray-100;
+ background-color: $gray-50;
}
.label-links {
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 67a8f689e9d..81a70470c65 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -96,14 +96,21 @@
margin: 0;
}
- .omniauth-btn {
- margin-bottom: $gl-padding;
+ form {
width: 48%;
- padding: $gl-padding-8;
+ padding: 0;
+ border: 0;
+ background: none;
+ margin-bottom: $gl-padding;
@include media-breakpoint-down(md) {
width: 100%;
}
+ }
+
+ .omniauth-btn {
+ width: 100%;
+ padding: $gl-padding-8;
img {
width: $default-icon-size;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 57afe45a74b..c3f3dbc223b 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -253,11 +253,11 @@ table {
background-color: $gray-light;
border-radius: 0 0 3px 3px;
padding: $gl-padding;
- border-top: 1px solid $gray-100;
+ border-top: 1px solid $gray-50;
+ .new-note {
background-color: $gray-light;
- border-top: 1px solid $gray-100;
+ border-top: 1px solid $gray-50;
}
&.is-replying {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index bed147aa3a7..e8cdfd717c0 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -5,7 +5,7 @@ $note-form-margin-left: 72px;
@mixin vertical-line($left) {
&::before {
content: '';
- border-left: 2px solid $gray-100;
+ border-left: 2px solid $gray-50;
position: absolute;
top: 0;
bottom: 0;
@@ -83,8 +83,8 @@ $note-form-margin-left: 72px;
.replies-toggle {
background-color: $gray-light;
padding: $gl-padding-8 $gl-padding;
- border-top: 1px solid $gray-100;
- border-bottom: 1px solid $gray-100;
+ border-top: 1px solid $gray-50;
+ border-bottom: 1px solid $gray-50;
.collapse-replies-btn:hover {
color: $blue-600;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 154717f9776..43d766db9e0 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -669,7 +669,8 @@
.ci-action-icon-container {
position: absolute;
right: 5px;
- top: 5px;
+ top: 50%;
+ transform: translateY(-50%);
// Action Icons in big pipeline-graph nodes
&.ci-action-icon-wrapper {
@@ -920,7 +921,7 @@ button.mini-pipeline-graph-dropdown-toggle {
.ci-status-icon {
- @extend .append-right-8;
+ @include gl-mr-3;
position: relative;
diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss
index 45e62913f37..3bab84af492 100644
--- a/app/assets/stylesheets/pages/profiles/preferences.scss
+++ b/app/assets/stylesheets/pages/profiles/preferences.scss
@@ -15,6 +15,10 @@
}
.application-theme {
+ $ui-dark-bg: #2e2e2e;
+ $ui-light-bg: #dfdfdf;
+ $ui-dark-mode-bg: #1f1f1f;
+
label {
margin: 0 $gl-padding-32 $gl-padding 0;
text-align: center;
@@ -60,11 +64,17 @@
}
&.ui-dark {
- background-color: $gray-900;
+ background-color: $ui-dark-bg;
+ border: solid 1px $border-color;
}
&.ui-light {
- background-color: $gray-200;
+ background-color: $ui-light-bg;
+ }
+
+ &.gl-dark {
+ background-color: $ui-dark-mode-bg;
+ border: solid 1px $border-color;
}
}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index c0a1cf10fe4..438f6c2546e 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -396,7 +396,7 @@
margin-right: $gl-padding-4;
margin-bottom: $gl-padding-4;
color: $gl-text-color-secondary;
- background-color: $gray-100;
+ background-color: $gray-50;
line-height: $gl-btn-line-height;
&:hover {
diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss
index 0f56b98a78d..26db1fb9f58 100644
--- a/app/assets/stylesheets/pages/prometheus.scss
+++ b/app/assets/stylesheets/pages/prometheus.scss
@@ -21,6 +21,14 @@
}
}
}
+
+ .links-section {
+ .gl-hover-text-blue-600-children:hover {
+ * {
+ @include gl-text-blue-600;
+ }
+ }
+ }
}
.draggable {
diff --git a/app/assets/stylesheets/pages/storage_quota.scss b/app/assets/stylesheets/pages/storage_quota.scss
new file mode 100644
index 00000000000..347bd1316c0
--- /dev/null
+++ b/app/assets/stylesheets/pages/storage_quota.scss
@@ -0,0 +1,17 @@
+.storage-type-usage {
+ &:first-child {
+ @include gl-rounded-top-left-base;
+ @include gl-rounded-bottom-left-base;
+ }
+
+ &:last-child {
+ @include gl-rounded-top-right-base;
+ @include gl-rounded-bottom-right-base;
+ }
+
+ &:not(:last-child) {
+ @include gl-border-r-2;
+ @include gl-border-r-solid;
+ @include gl-border-white;
+ }
+}
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
new file mode 100644
index 00000000000..1f2a7645495
--- /dev/null
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -0,0 +1,134 @@
+$gray-10: #1f1f1f;
+$gray-50: #2e2e2e;
+$gray-100: #4f4f4f;
+$gray-200: #707070;
+$gray-300: #919191;
+$gray-400: #a7a7a7;
+$gray-500: #bababa;
+$gray-600: #ccc;
+$gray-700: #dfdfdf;
+$gray-800: #f2f2f2;
+$gray-900: #fafafa;
+$gray-950: #fff;
+
+$gl-gray-100: #333;
+$gl-gray-200: #555;
+$gl-gray-350: #666;
+$gl-gray-400: #777;
+$gl-gray-500: #999;
+$gl-gray-600: #aaa;
+$gl-gray-700: #ccc;
+$gl-gray-800: #ddd;
+
+$green-50: #072b15;
+$green-100: #0a4020;
+$green-200: #0e5a2d;
+$green-300: #12753a;
+$green-400: #168f48;
+$green-500: #1aaa55;
+$green-600: #37b96d;
+$green-700: #75d09b;
+$green-800: #b3e6c8;
+$green-900: #dcf5e7;
+$green-950: #f1fdf6;
+
+$blue-50: #0a2744;
+$blue-100: #0f3b66;
+$blue-200: #134a81;
+$blue-300: #17599c;
+$blue-400: #1b69b6;
+$blue-500: #1f78d1;
+$blue-600: #418cd8;
+$blue-700: #73afea;
+$blue-800: #b8d6f4;
+$blue-900: #e4f0fb;
+$blue-950: #f6fafe;
+
+$orange-50: #592800;
+$orange-100: #853c00;
+$orange-200: #a35200;
+$orange-300: #c26700;
+$orange-400: #de7e00;
+$orange-500: #fc9403;
+$orange-600: #fca429;
+$orange-700: #fdbc60;
+$orange-800: #fed69f;
+$orange-900: #fff1de;
+$orange-950: #fffaf4;
+
+$red-50: #4b140b;
+$red-100: #711e11;
+$red-200: #8b2615;
+$red-300: #a62d19;
+$red-400: #c0341d;
+$red-500: #db3b21;
+$red-600: #e05842;
+$red-700: #ea8271;
+$red-800: #f2b4a9;
+$red-900: #fbe5e1;
+$red-950: #fef6f5;
+
+$indigo-50: #1a1a40;
+$indigo-100: #292961;
+$indigo-200: #393982;
+$indigo-300: #4b4ba3;
+$indigo-400: #5b5bbd;
+$indigo-500: #6666c4;
+$indigo-600: #7c7ccc;
+$indigo-700: #a6a6de;
+$indigo-800: #d1d1f0;
+$indigo-900: #ebebfa;
+$indigo-950: #f7f7ff;
+
+$gray-lightest: #222;
+$gray-light: $gray-50;
+$gray-lighter: #303030;
+$gray-normal: #333;
+$gray-dark: $gray-100;
+$gray-darker: #4f4f4f;
+$gray-darkest: #c4c4c4;
+
+$black: #fff;
+$white: #333;
+$white-light: #2b2b2b;
+$white-normal: #333;
+$white-dark: #444;
+
+$border-white-light: $gray-900;
+$border-white-normal: $gray-900;
+
+$body-bg: $gray-50;
+$input-bg: $gray-100;
+$input-focus-bg: $gray-100;
+$input-color: $gray-900;
+$input-group-addon-bg: $gray-900;
+
+$tooltip-bg: $gray-800;
+$tooltip-color: $gray-10;
+
+$popover-color: $gray-950;
+$popover-box-shadow: 0 2px 3px 1px $gray-700;
+$popover-arrow-outer-color: $gray-800;
+
+$secondary: $gray-600;
+
+$issues-today-bg: #333838;
+$issues-today-border: #333a40;
+
+.gl-label {
+ filter: brightness(0.9) contrast(1.1);
+}
+
+// white-ish text for light labels
+// and for scoped label value (the right section)
+.gl-label-text-light.gl-label-text-light,
+.gl-label-text-dark + .gl-label-text-dark {
+ color: $gray-900;
+}
+
+// duplicated class as the original .atwho-view style is added later
+.atwho-view.atwho-view {
+ background-color: $white;
+ color: $gray-900;
+ border-color: $gray-800;
+}
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 8cf5c533f1f..176d64272c2 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -81,68 +81,22 @@
.gl-h-32 { height: px-to-rem($grid-size * 4); }
.gl-h-64 { height: px-to-rem($grid-size * 8); }
-.gl-shim-h-2 {
- height: px-to-rem(4px);
-}
-
-.gl-shim-w-5 {
- width: px-to-rem(16px);
-}
-
-.gl-shim-pb-3 {
- padding-bottom: 8px;
-}
-
-.gl-shim-pt-5 {
- padding-top: 16px;
-}
-
-.gl-shim-mx-2 {
- margin-left: 4px;
- margin-right: 4px;
+.d-sm-table-column {
+ @include media-breakpoint-up(sm) {
+ display: table-column !important;
+ }
}
.gl-text-purple { color: $purple; }
-.gl-text-gray-800 { color: $gray-800; }
.gl-bg-purple-light { background-color: $purple-light; }
-// Classes using mixins coming from @gitlab-ui
-// can be removed once the mixins are added.
-// See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details.
-.gl-bg-blue-50 { @include gl-bg-blue-50; }
-.gl-bg-red-100 { @include gl-bg-red-100; }
-.gl-bg-orange-100 { @include gl-bg-orange-100; }
-.gl-bg-gray-50 { @include gl-bg-gray-50; }
-.gl-bg-gray-100 { @include gl-bg-gray-100; }
-.gl-bg-green-100 { @include gl-bg-green-100;}
-.gl-bg-blue-500 { @include gl-bg-blue-500; }
-.gl-bg-green-500 { @include gl-bg-green-500; }
-.gl-bg-theme-indigo-500 { @include gl-bg-theme-indigo-500; }
-.gl-bg-red-500 { @include gl-bg-red-500; }
-.gl-bg-orange-500 { @include gl-bg-orange-500; }
-
-.gl-text-blue-500 { @include gl-text-blue-500; }
-.gl-text-gray-500 { @include gl-text-gray-500; }
-.gl-text-gray-700 { @include gl-text-gray-700; }
-.gl-text-gray-900 { @include gl-text-gray-900; }
-.gl-text-red-700 { @include gl-text-red-700; }
-.gl-text-red-900 { @include gl-text-red-900; }
-.gl-text-orange-400 { @include gl-text-orange-400; }
-.gl-text-orange-500 { @include gl-text-orange-500; }
-.gl-text-orange-600 { @include gl-text-orange-600; }
-.gl-text-orange-700 { @include gl-text-orange-700; }
-.gl-text-green-500 { @include gl-text-green-500; }
-.gl-text-green-700 { @include gl-text-green-700; }
-
-.gl-align-items-center { @include gl-align-items-center; }
-
-.d-sm-table-column {
- @include media-breakpoint-up(sm) {
- display: table-column !important;
- }
+// move this to GitLab UI once onboarding experiment is considered a success
+.gl-py-8 {
+ padding-top: $gl-spacing-scale-8;
+ padding-bottom: $gl-spacing-scale-8;
}
-.gl-white-space-normal { @include gl-white-space-normal; }
-.gl-word-break-all { @include gl-word-break-all; }
-.gl-reset-line-height { @include gl-reset-line-height; }
-.gl-reset-text-align { @include gl-reset-text-align; }
+// move this to GitLab UI once onboarding experiment is considered a success
+.gl-pl-7 {
+ padding-left: $gl-spacing-scale-7;
+}