summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets')
-rw-r--r--app/assets/stylesheets/_page_specific_files.scss1
-rw-r--r--app/assets/stylesheets/application.scss4
-rw-r--r--app/assets/stylesheets/bootstrap_migration.scss4
-rw-r--r--app/assets/stylesheets/components/milestone_combobox.scss11
-rw-r--r--app/assets/stylesheets/components/popover.scss111
-rw-r--r--app/assets/stylesheets/components/whats_new.scss26
-rw-r--r--app/assets/stylesheets/fontawesome_custom.scss208
-rw-r--r--app/assets/stylesheets/framework/animations.scss3
-rw-r--r--app/assets/stylesheets/framework/awards.scss108
-rw-r--r--app/assets/stylesheets/framework/blocks.scss2
-rw-r--r--app/assets/stylesheets/framework/buttons.scss47
-rw-r--r--app/assets/stylesheets/framework/common.scss5
-rw-r--r--app/assets/stylesheets/framework/diffs.scss24
-rw-r--r--app/assets/stylesheets/framework/dropdowns.scss59
-rw-r--r--app/assets/stylesheets/framework/forms.scss14
-rw-r--r--app/assets/stylesheets/framework/header.scss15
-rw-r--r--app/assets/stylesheets/framework/lists.scss2
-rw-r--r--app/assets/stylesheets/framework/mixins.scss18
-rw-r--r--app/assets/stylesheets/framework/modal.scss1
-rw-r--r--app/assets/stylesheets/framework/secondary_navigation_elements.scss8
-rw-r--r--app/assets/stylesheets/framework/selects.scss288
-rw-r--r--app/assets/stylesheets/framework/tables.scss43
-rw-r--r--app/assets/stylesheets/framework/toggle.scss8
-rw-r--r--app/assets/stylesheets/framework/typography.scss11
-rw-r--r--app/assets/stylesheets/framework/variables.scss1
-rw-r--r--app/assets/stylesheets/lazy_bundles/select2_overrides.scss22
-rw-r--r--app/assets/stylesheets/page_bundles/_pipeline_mixins.scss26
-rw-r--r--app/assets/stylesheets/page_bundles/alert_management_details.scss23
-rw-r--r--app/assets/stylesheets/page_bundles/boards.scss8
-rw-r--r--app/assets/stylesheets/page_bundles/build.scss14
-rw-r--r--app/assets/stylesheets/page_bundles/ci_status.scss35
-rw-r--r--app/assets/stylesheets/page_bundles/cycle_analytics.scss5
-rw-r--r--app/assets/stylesheets/page_bundles/import.scss81
-rw-r--r--app/assets/stylesheets/page_bundles/merge_conflicts.scss4
-rw-r--r--app/assets/stylesheets/page_bundles/oncall_schedules.scss189
-rw-r--r--app/assets/stylesheets/page_bundles/pipeline.scss67
-rw-r--r--app/assets/stylesheets/page_bundles/pipelines.scss11
-rw-r--r--app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss11
-rw-r--r--app/assets/stylesheets/pages/clusters.scss16
-rw-r--r--app/assets/stylesheets/pages/commits.scss6
-rw-r--r--app/assets/stylesheets/pages/detail_page.scss6
-rw-r--r--app/assets/stylesheets/pages/editor.scss8
-rw-r--r--app/assets/stylesheets/pages/groups.scss12
-rw-r--r--app/assets/stylesheets/pages/import.scss61
-rw-r--r--app/assets/stylesheets/pages/issuable.scss49
-rw-r--r--app/assets/stylesheets/pages/issues.scss13
-rw-r--r--app/assets/stylesheets/pages/members.scss14
-rw-r--r--app/assets/stylesheets/pages/merge_requests.scss51
-rw-r--r--app/assets/stylesheets/pages/notes.scss24
-rw-r--r--app/assets/stylesheets/pages/notifications.scss6
-rw-r--r--app/assets/stylesheets/pages/pipelines.scss5
-rw-r--r--app/assets/stylesheets/pages/projects.scss38
-rw-r--r--app/assets/stylesheets/pages/runners.scss18
-rw-r--r--app/assets/stylesheets/pages/search.scss9
-rw-r--r--app/assets/stylesheets/pages/settings.scss7
-rw-r--r--app/assets/stylesheets/pages/tree.scss7
-rw-r--r--app/assets/stylesheets/startup/startup-signin.scss4
-rw-r--r--app/assets/stylesheets/themes/_dark.scss116
-rw-r--r--app/assets/stylesheets/themes/theme_helper.scss29
-rw-r--r--app/assets/stylesheets/utilities.scss27
60 files changed, 789 insertions, 1255 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss
index 52bc19fddd9..f56665553ba 100644
--- a/app/assets/stylesheets/_page_specific_files.scss
+++ b/app/assets/stylesheets/_page_specific_files.scss
@@ -10,7 +10,6 @@
@import './pages/events';
@import './pages/groups';
@import './pages/help';
-@import './pages/import';
@import './pages/incident_management_list';
@import './pages/issuable';
@import './pages/issues/issue_count_badge';
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 4b1139d2354..9ef1b58ed24 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -5,14 +5,10 @@
// directory.
@import '@gitlab/at.js/dist/css/jquery.atwho';
@import 'dropzone/dist/basic';
-@import 'select2';
// GitLab UI framework
@import 'framework';
-// Custom Fontawesome icons
-@import 'fontawesome_custom';
-
// Page specific styles (issues, projects etc):
@import 'page_specific_files';
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index 3d5076f485c..deeef86c386 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -235,10 +235,6 @@ h3.popover-header {
@extend .border-0;
}
- &.card-without-margin {
- margin: 0;
- }
-
&.bg-light {
@extend .border-0;
}
diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss
index e0637088bbb..f73ec4d5998 100644
--- a/app/assets/stylesheets/components/milestone_combobox.scss
+++ b/app/assets/stylesheets/components/milestone_combobox.scss
@@ -1,11 +1,6 @@
-.selected-item::before {
- content: '\f00c';
- color: $green-500;
- position: absolute;
- left: 16px;
- top: 16px;
- transform: translateY(-50%);
- font: 14px FontAwesome;
+.selected-item {
+ /* stylelint-disable-next-line function-url-quotes */
+ background: url(asset_path('checkmark.png')) no-repeat 0 2px;
}
.dropdown-item-space {
diff --git a/app/assets/stylesheets/components/popover.scss b/app/assets/stylesheets/components/popover.scss
deleted file mode 100644
index f870948cc4f..00000000000
--- a/app/assets/stylesheets/components/popover.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-.popover {
- max-width: $popover-max-width;
- border: 1px solid $gray-100;
- box-shadow: $popover-box-shadow;
- font-size: $gl-font-size-small;
-
- /**
- * Blue popover variation
- */
- &.blue {
- background-color: $blue-600;
- border-color: $blue-600;
-
- .popover-body {
- color: $white;
- }
-
- &.bs-popover-bottom {
- .arrow::before,
- .arrow::after {
- border-bottom-color: $blue-600;
- }
- }
-
- &.bs-popover-top {
- .arrow::before,
- .arrow::after {
- border-top-color: $blue-600;
- }
- }
-
- &.bs-popover-right {
- .arrow::after,
- .arrow::before {
- border-right-color: $blue-600;
- }
- }
-
- &.bs-popover-left {
- .arrow::before,
- .arrow::after {
- border-left-color: $blue-600;
- }
- }
- }
-}
-
-.bs-popover-top {
- /* When popover position is top, the arrow is translated 1 pixel
- * due to the box-shadow include in our custom styles.
- */
- > .arrow::before {
- border-top-color: $gray-100;
- bottom: 1px;
- }
-
- > .arrow::after {
- bottom: 2px;
- }
-}
-
-.bs-popover-bottom {
- > .arrow::before {
- border-bottom-color: $gray-100;
- }
-
- > .popover-header::before {
- border-color: $white;
- }
-}
-
-.bs-popover-right > .arrow::before {
- border-right-color: $gray-100;
-}
-
-.bs-popover-left > .arrow::before {
- border-left-color: $gray-100;
-}
-
-.popover-header {
- background-color: $white;
- font-size: $gl-font-size-small;
-}
-
-.popover-body {
- padding: $gl-padding $gl-padding-12;
-
- > .popover-hr {
- margin: $gl-padding 0;
- }
-}
-
-/**
-* mr_popover component
-*/
-.mr-popover {
- .text-secondary {
- font-size: 12px;
- line-height: 1.33;
- }
-}
-
-.suggest-gitlab-ci-yml {
- margin-top: -1em;
-
- .popover-header {
- padding: $gl-padding;
- display: flex;
- align-items: center;
- }
-}
diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss
index 64e82531c30..51bf2686be2 100644
--- a/app/assets/stylesheets/components/whats_new.scss
+++ b/app/assets/stylesheets/components/whats_new.scss
@@ -6,6 +6,32 @@
.gl-infinite-scroll-legend {
@include gl-display-none;
}
+
+ .gl-tabs {
+ @include gl-overflow-y-auto;
+ }
+
+ .gl-tabs-nav {
+ flex-wrap: nowrap;
+ overflow-x: scroll;
+ align-items: stretch;
+
+ .nav-item {
+ @include gl-flex-shrink-0;
+
+ a {
+ @include gl-h-full;
+ line-height: 1.5;
+ }
+ }
+ }
+
+ .gl-spinner-container {
+ @include gl-w-full;
+ @include gl-absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ }
}
.with-performance-bar .whats-new-drawer {
diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss
index 8a955cffc49..b9bb3edaaab 100644
--- a/app/assets/stylesheets/fontawesome_custom.scss
+++ b/app/assets/stylesheets/fontawesome_custom.scss
@@ -1,191 +1,43 @@
-/*!
- * 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);
+// Custom Font Awesome styles that render emojis in asciidoc
+.md {
+ .fa {
+ display: inline-block;
+ font-style: normal;
+ font-size: 14px;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
- 100% {
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
+ .fa-2x {
+ font-size: 2em;
}
-}
-@keyframes fa-spin {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
+ .fa-exclamation-triangle::before {
+ content: '⚠';
}
- 100% {
- -webkit-transform: rotate(359deg);
- transform: rotate(359deg);
+ .fa-exclamation-circle::before {
+ content: '❗';
}
-}
-
-.fa-inverse {
- color: $white;
-}
-
-.fa-chevron-down::before {
- content: '\f078';
-}
-
-.fa-caret-down::before {
- content: '\f0d7';
-}
-
-.fa-warning::before,
-.fa-exclamation-triangle::before {
- content: '\f071';
-}
-
-.fa-spinner::before {
- content: '\f110';
-}
-
-.fa-caret-right::before {
- content: '\f0da';
-}
-
-.fa-exclamation-circle::before {
- content: '\f06a';
-}
-
-.fa-file-o::before {
- content: '\f016';
-}
-
-.fa-lightbulb-o::before {
- content: '\f0eb';
-}
-
-.fa-circle::before {
- content: '\f111';
-}
-
-.fa-thumb-tack::before {
- content: '\f08d';
-}
-
-.fa-fire::before {
- content: '\f06d';
-}
-
-.fa-file-pdf-o::before {
- content: '\f1c1';
-}
-
-.fa-file-word-o::before {
- content: '\f1c2';
-}
-
-.fa-file-excel-o::before {
- content: '\f1c3';
-}
-.fa-file-powerpoint-o::before {
- content: '\f1c4';
-}
-
-.fa-file-image-o::before {
- content: '\f1c5';
-}
-
-.fa-file-archive-o::before {
- content: '\f1c6';
-}
-
-.fa-file-audio-o::before {
- content: '\f1c7';
-}
-
-.fa-file-video-o::before {
- content: '\f1c8';
-}
+ .fa-lightbulb-o::before {
+ content: '💡';
+ }
-.fa-square-o::before {
- content: '\f096';
-}
+ .fa-thumb-tack::before {
+ content: '📌';
+ }
-.fa-check-square-o::before {
- content: '\f046';
-}
+ .fa-fire::before {
+ content: '🔥';
+ }
-.sr-only {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- border: 0;
-}
+ .fa-square-o::before {
+ content: '\2610';
+ }
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
- position: static;
- width: auto;
- height: auto;
- margin: 0;
- overflow: visible;
- clip: auto;
+ .fa-check-square-o::before {
+ content: '\2611';
+ }
}
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 196fb3a7088..a93c70c75d3 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -103,7 +103,8 @@
@include transition(color);
}
-a {
+a,
+.notification-dot {
@include transition(background-color, color, border);
}
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 4f09f1a394b..d9ad4992458 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -253,3 +253,111 @@
vertical-align: middle;
}
}
+
+
+// The following encompasses the "add reaction" button redesign to
+// align properly within GitLab UI's gl-button. The implementation
+// above will be deprecated once all instances of "award emoji" are
+// migrated to Vue.
+
+.gl-button .award-emoji-block gl-emoji {
+ top: -1px;
+ margin-top: -1px;
+ margin-bottom: -1px;
+}
+
+.add-reaction-button {
+ position: relative;
+
+ // This forces the height and width of the inner content to match
+ // other gl-buttons despite all child elements being set to
+ // `position:absolute`
+ &::after {
+ content: '\a0';
+ width: 1em;
+ }
+
+ .reaction-control-icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+
+ // center the icon vertically and horizontally within the button
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ @include transition(opacity, transform);
+
+ .gl-icon {
+ height: $default-icon-size;
+ width: $default-icon-size;
+ }
+ }
+
+ .reaction-control-icon-neutral {
+ opacity: 1;
+ }
+
+ .reaction-control-icon-positive,
+ .reaction-control-icon-super-positive {
+ opacity: 0;
+ }
+
+ &:hover,
+ &.active,
+ &:active,
+ &.is-active {
+ // extra specificty added to override another selector
+ .reaction-control-icon .gl-icon {
+ color: $blue-500;
+ transform: scale(1.15);
+ }
+
+ .reaction-control-icon-neutral {
+ opacity: 0;
+ }
+ }
+
+ &:hover {
+ .reaction-control-icon-positive {
+ opacity: 1;
+ }
+ }
+
+ &.active,
+ &:active,
+ &.is-active {
+ .reaction-control-icon-positive {
+ opacity: 0;
+ }
+
+ .reaction-control-icon-super-positive {
+ opacity: 1;
+ }
+ }
+
+ &.disabled {
+ cursor: default;
+
+ &:hover,
+ &:focus,
+ &:active {
+ .reaction-control-icon .gl-icon {
+ color: inherit;
+ transform: scale(1);
+ }
+
+ .reaction-control-icon-neutral {
+ opacity: 1;
+ }
+
+ .reaction-control-icon-positive,
+ .reaction-control-icon-super-positive {
+ opacity: 0;
+ }
+ }
+ }
+}
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f42e500efa8..bfa4a640fe2 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -73,7 +73,7 @@
&.content-component-block {
padding: 11px 0;
- background-color: $white;
+ background-color: $body-bg;
}
.title {
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index a8cc685d880..182c58c3931 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -166,8 +166,7 @@
line-height: $gl-btn-xs-line-height;
}
- &.btn-success,
- &.btn-register {
+ &.btn-success {
@include btn-green;
}
@@ -176,7 +175,6 @@
@include btn-outline($white, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800);
}
- &.btn-remove,
&.btn-danger {
@include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
}
@@ -200,18 +198,11 @@
@include btn-orange;
}
- &.btn-close,
- &.btn-close-color {
+ &.btn-close {
@include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700);
}
- &.btn-spam {
- @include btn-outline($white, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800);
- }
-
- &.btn-danger,
- &.btn-remove,
- &.btn-red {
+ &.btn-danger {
@include btn-red;
}
@@ -219,11 +210,6 @@
float: right;
}
- &.btn-reopen,
- .btn-reopen-color {
- /* should be same as parent class for now */
- }
-
&.btn-grouped {
@include btn-with-margin;
}
@@ -232,17 +218,6 @@
color: $gray-700;
}
- .fa-caret-down,
- .fa-chevron-down {
- margin-left: 5px;
- }
-
- &.dropdown-toggle {
- .fa-caret-down {
- margin-left: 3px;
- }
- }
-
&.btn-text-field {
width: 100%;
text-align: left;
@@ -276,11 +251,8 @@
width: 15px;
}
- svg,
- .fa {
- &:not(:last-child) {
- margin-right: 5px;
- }
+ svg:not(:last-child) {
+ margin-right: 5px;
}
}
@@ -370,24 +342,15 @@
.btn-loading {
&:not(.disabled) {
- .fa,
.spinner {
display: none;
}
}
-
- .fa {
- margin-right: 5px;
- }
}
.btn-build {
margin-left: 10px;
- i {
- color: $gl-text-color-secondary;
- }
-
svg {
fill: $gl-text-color-secondary;
}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index deb2d6c4641..3b59c028437 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -135,7 +135,6 @@ hr {
text-overflow: ellipsis;
white-space: nowrap;
- > div:not(.block):not(.select2-display-none),
.str-truncated {
display: inline;
}
@@ -389,11 +388,7 @@ 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-15 { margin-top: 15px; }
.prepend-top-20 { margin-top: 20px; }
-.prepend-left-15 { margin-left: 15px; }
-.prepend-left-20 { margin-left: 20px; }
-.append-right-20 { margin-right: 20px; }
.append-bottom-20 { margin-bottom: 20px; }
.ml-10 { margin-left: 4.5rem; }
.inline { display: inline-block; }
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index e16ab5ee72f..cf9363b77be 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -2,10 +2,6 @@
.diff-file {
margin-bottom: $gl-padding;
- &.conflict {
- border-top: 1px solid $border-color;
- }
-
&.has-body {
.file-title {
box-shadow: 0 -2px 0 0 var(--white);
@@ -60,7 +56,7 @@
left: -11px;
width: 10px;
height: calc(100% + 1px);
- background: $white;
+ background: $body-bg;
pointer-events: none;
}
@@ -601,10 +597,6 @@ table.code {
.diff-grid-right {
display: grid;
grid-template-columns: 50px 8px 1fr;
-
- .diff-td:nth-child(2) {
- display: none;
- }
}
.diff-grid-comments {
@@ -635,20 +627,6 @@ table.code {
.diff-grid-left,
.diff-grid-right {
grid-template-columns: 50px 50px 8px 1fr;
-
- .diff-td:nth-child(2) {
- display: block;
- }
- }
-
- .diff-grid-left .old:nth-child(1) [data-linenumber],
- .diff-grid-right .new:nth-child(2) [data-linenumber] {
- display: inline;
- }
-
- .diff-grid-left .old:nth-child(2) [data-linenumber],
- .diff-grid-right .new:nth-child(1) [data-linenumber] {
- display: none;
}
}
}
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 2094c824286..e2335c184b0 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -16,12 +16,6 @@
}
}
-@mixin chevron-active {
- .fa-chevron-down {
- color: $gray-darkest;
- }
-}
-
@mixin set-visible {
transform: translateY(0);
display: block;
@@ -56,7 +50,6 @@
.dropdown-toggle,
.dropdown-menu-toggle {
- @include chevron-active;
border-color: $gray-darkest;
}
@@ -114,20 +107,11 @@
color: $gray-darkest;
}
- .fa-chevron-down {
- font-size: $dropdown-chevron-size;
- position: relative;
- top: -2px;
- margin-left: 5px;
- }
-
&:hover {
- @include chevron-active;
border-color: $gray-darkest;
}
&:focus:active {
- @include chevron-active;
border-color: $dropdown-toggle-active-border-color;
outline: 0;
}
@@ -143,18 +127,6 @@
.fa {
position: absolute;
-
- &.fa-spinner {
- font-size: 16px;
- margin-top: -3px;
- }
- }
-
- .fa-chevron-down,
- .fa-spinner {
- position: absolute;
- top: 11px;
- right: 8px;
}
.spinner {
@@ -369,7 +341,8 @@
}
.droplab-dropdown {
- .dropdown-toggle > i {
+ .dropdown-toggle > i,
+ .dropdown-toggle > svg {
pointer-events: none;
}
@@ -532,29 +505,27 @@
&.is-active {
color: $gl-text-color;
- &::before {
- position: absolute;
- left: 16px;
- top: 16px;
- transform: translateY(-50%);
- font: normal normal normal 14px/1 FontAwesome;
- font-size: inherit;
- text-rendering: auto;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
&.dropdown-menu-user-link::before {
top: 50%;
}
}
&.is-indeterminate::before {
- content: '\f068';
+ position: absolute;
+ left: 16px;
+ top: 16px;
+ transform: translateY(-50%);
+ font-style: normal;
+ font-size: inherit;
+ text-rendering: auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ content: '—';
}
- &.is-active::before {
- content: '\f00c';
+ &.is-active {
+ /* stylelint-disable-next-line function-url-quotes */
+ background: url(asset_path('checkmark.png')) no-repeat 14px 8px;
}
}
}
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 7be676ed83c..6e47fef02d5 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -133,11 +133,6 @@ label {
}
.input-group {
- .select2-container {
- display: table-cell;
- max-width: 180px;
- }
-
.input-group-prepend,
.input-group-append {
background-color: $input-group-addon-bg;
@@ -213,15 +208,6 @@ label {
position: relative;
}
-.select-wrapper > .fa-chevron-down {
- position: absolute;
- font-size: 10px;
- right: 10px;
- top: 12px;
- color: $gray-darkest;
- pointer-events: none;
-}
-
.input-icon-wrapper > .input-icon-right {
position: absolute;
right: 0.8em;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 52319d9658b..a6a01c7b090 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -384,6 +384,10 @@
text-overflow: ellipsis;
flex: 0 1 auto;
}
+
+ &:last-of-type > .breadcrumbs-list-angle {
+ display: none;
+ }
}
}
@@ -556,12 +560,17 @@
border: 1px solid $gray-normal;
}
-.header-user-notification-dot {
+.notification-dot {
background-color: $orange-300;
height: 12px;
width: 12px;
- right: 8px;
- top: -8px;
+ margin-top: -15px;
+ pointer-events: none;
+ visibility: hidden;
+}
+
+.with-notifications .notification-dot {
+ visibility: visible;
}
.with-performance-bar .navbar-gitlab {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 2464ea3607b..b0334da6943 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -234,6 +234,8 @@ ul.content-list {
}
}
+ul.content-list.issuable-list > li,
+ul.content-list.todos-list > li,
.card > .content-list > li {
padding: $gl-padding-top $gl-padding;
}
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 20d44b71bf6..7ba9236b833 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -146,7 +146,11 @@
}
@mixin green-status-color {
- @include status-color($green-100, $green-500, $green-700);
+ @include status-color(
+ var(--green-100, $green-100),
+ var(--green-500, $green-500),
+ var(--green-700, $green-700)
+ );
}
@mixin fade($gradient-direction, $gradient-color) {
@@ -169,7 +173,6 @@
transition-duration: 0.3s;
}
- .fa,
svg {
position: relative;
top: 5px;
@@ -255,9 +258,9 @@
@mixin build-trace-bar($height) {
height: $height;
min-height: $height;
- background: $gray-light;
- border: 1px solid $border-color;
- color: $gl-text-color;
+ background: var(--gray-50, $gray-50);
+ border: 1px solid var(--border-color, $border-color);
+ color: var(--gl-text-color, $gl-text-color);
padding: $grid-size;
}
@@ -361,11 +364,6 @@
color: $gray-400;
fill: $gray-400;
- .fa {
- position: relative;
- font-size: 16px;
- }
-
svg {
@include btn-svg;
margin: 0;
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 372e3bed6e0..2dbeacb0f8c 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -91,6 +91,7 @@
body.modal-open {
overflow: hidden;
+ padding-right: 0 !important;
}
.modal-no-backdrop {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 3e218de6af9..2ad9a9d2dff 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -276,7 +276,7 @@
@include fade(left, $gray-light);
right: -5px;
- .fa {
+ svg {
right: -7px;
}
}
@@ -286,7 +286,7 @@
left: -5px;
text-align: center;
- .fa {
+ svg {
left: -7px;
}
}
@@ -337,7 +337,7 @@
@include fade(left, $white);
right: -5px;
- .fa {
+ svg {
right: -7px;
}
}
@@ -346,7 +346,7 @@
@include fade(right, $white);
left: -5px;
- .fa {
+ svg {
left: -7px;
}
}
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 86a5aa1a16e..d8ce6826fc1 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -1,275 +1,3 @@
-/** Select2 selectbox style override **/
-.select2-container {
- width: 100% !important;
-
- &.input-md,
- &.input-lg {
- display: block;
- }
-}
-
-.select2-container,
-.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;
- font-size: $gl-font-size;
- line-height: 1.42857143;
- border-radius: $border-radius-base;
-
- .select2-arrow {
- background-image: none;
- background-color: transparent;
- border: 0;
- padding-top: 12px;
- padding-right: 20px;
- font-size: 10px;
-
- b {
- display: none;
- }
-
- &::after {
- content: '\f078';
- position: absolute;
- z-index: 1;
- text-align: center;
- pointer-events: none;
- box-sizing: border-box;
- color: $gray-darkest;
- 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;
- }
- }
-
- .select2-chosen {
- margin-right: 15px;
- }
-
- &:hover {
- border-color: $gray-darkest;
- color: $gl-text-color;
- }
- }
-
- // 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;
- }
-
- .select2-choices,
- .select2-choice {
- border-color: $red-500;
- }
- }
-}
-
-.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;
- min-width: 175px;
- color: $gl-text-color;
- z-index: 999;
-
- .modal-open & {
- z-index: $zindex-modal + 200;
- }
-}
-
-.select2-drop-mask {
- z-index: 998;
-
- .modal-open & {
- z-index: $zindex-modal + 100;
- }
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
- border-top: 1px solid $border-color;
- margin-top: -6px;
-}
-
-.select2-container-active {
- .select2-choice,
- .select2-choices {
- box-shadow: none;
- }
-}
-
-.select2-dropdown-open,
-.select2-dropdown-open.select2-drop-above {
- .select2-choice {
- border-color: $gray-darkest;
- outline: 0;
- }
-}
-
-.select2-container-multi {
- .select2-choices {
- border-radius: $border-radius-default;
- border-color: $input-border;
- background: none;
-
- .select2-search-field input {
- padding: 5px $gl-input-padding;
- height: auto;
- font-family: inherit;
- font-size: inherit;
- }
-
- .select2-search-choice {
- margin: 5px 0 0 8px;
- box-shadow: none;
- border-color: $input-border;
- color: $gl-text-color;
- line-height: 15px;
- background-color: $gray-light;
- background-image: none;
- padding: 3px 18px 3px 5px;
-
- .select2-search-choice-close {
- top: 5px;
- left: initial;
- right: 3px;
- }
-
- &.select2-search-choice-focus {
- border-color: $gl-text-color;
- }
- }
- }
-}
-
-.select2-drop-active {
- margin-top: $dropdown-vertical-offset;
- font-size: 14px;
-
- .select2-results {
- max-height: 350px;
- }
-}
-
-.select2-search {
- padding: $grid-size;
-
- .select2-drop-auto-width & {
- padding: $grid-size;
- }
-
- input {
- padding: $grid-size;
- background: transparent image-url('select2.png');
- color: $gl-text-color;
- background-clip: content-box;
- background-origin: content-box;
- background-repeat: no-repeat;
- background-position: right 0 bottom 0 !important;
- border: 1px solid $input-border;
- border-radius: $border-radius-default;
- line-height: 16px;
- transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-
- &:focus {
- border-color: $blue-300;
- }
-
- &.select2-active {
- background-color: $white;
- background-image: image-url('select2-spinner.gif') !important;
- background-origin: content-box;
- background-repeat: no-repeat;
- background-position: right 6px center !important;
- background-size: 16px 16px !important;
- }
- }
-
- + .select2-results {
- padding-top: 0;
- }
-}
-
-.select2-results {
- margin: 0;
- padding: #{$gl-padding / 2} 0;
-
- .select2-no-results,
- .select2-searching,
- .select2-ajax-error,
- .select2-selection-limit {
- background: transparent;
- padding: #{$gl-padding / 2} $gl-padding;
- }
-
- .select2-result-label,
- .select2-more-results {
- padding: #{$gl-padding / 2} $gl-padding;
- }
-
- .select2-highlighted {
- background: transparent;
- color: $gl-text-color;
-
- .select2-result-label {
- background: $gray-darker;
- }
- }
-
- .select2-result {
- padding: 0 1px;
- }
-
- li.select2-result-with-children > .select2-result-label {
- font-weight: $gl-font-weight-bold;
- color: $gl-text-color;
- }
-}
-
.ajax-users-select {
width: 400px;
@@ -282,14 +10,6 @@
}
}
-.select2-highlighted {
- .group-result {
- .group-path {
- color: $gray-700;
- }
- }
-}
-
.group-result {
.group-image {
float: left;
@@ -345,11 +65,3 @@
.ajax-users-dropdown {
min-width: 250px !important;
}
-
-.select2-result-selectable,
-.select2-result-unselectable {
- .select2-match {
- font-weight: $gl-font-weight-bold;
- text-decoration: none;
- }
-}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 39d9e9a77f9..89713fdbbea 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -184,46 +184,3 @@ table {
border-top: 0;
}
}
-
-.vulnerability-list {
- @media (min-width: $breakpoint-sm) {
- .checkbox {
- padding-left: $gl-spacing-scale-4;
- padding-right: 0;
- width: 1px;
-
- + td,
- + th {
- padding-left: $gl-spacing-scale-4;
- }
- }
-
- .detected {
- width: 9%;
- }
-
- .status {
- width: 8%;
- }
-
- .severity {
- width: 10%;
- }
-
- .description {
- max-width: 0;
- }
-
- .identifier {
- width: 16%;
- }
-
- .scanner {
- width: 10%;
- }
-
- .activity {
- width: 5%;
- }
- }
-}
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 054280f3321..fd888fdec65 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -4,22 +4,22 @@
* @usage
* ### Active and Inactive text should be provided as data attributes:
* <button type="button" class="project-feature-toggle" data-enabled-text="Enabled" data-disabled-text="Disabled">
-* <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+* <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
* </button>
* ### Checked should have `is-checked` class
* <button type="button" class="project-feature-toggle is-checked" data-enabled-text="Enabled" data-disabled-text="Disabled">
-* <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+* <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
* </button>
* ### Disabled should have `is-disabled` class
* <button type="button" class="project-feature-toggle is-disabled" data-enabled-text="Enabled" data-disabled-text="Disabled" disabled="true">
-* <i class="fa fa-spinner fa-spin loading-icon hidden"></i>
+* <span class="gl-spinner loading-icon hidden" aria-label="Loading"></span>
* </button>
* ### Loading should have `is-loading` and an icon with `loading-icon` class
* <button type="button" class="project-feature-toggle is-loading" data-enabled-text="Enabled" data-disabled-text="Disabled">
-* <i class="fa fa-spinner fa-spin loading-icon"></i>
+* <span class="gl-spinner loading-icon" aria-label="Loading"></span>
* </button>
*/
.project-feature-toggle {
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 3d09edfe181..1a568bb41a5 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,3 +1,6 @@
+// Custom Fontawesome icons
+@import 'fontawesome_custom';
+
/**
* Apply Markup (Markdown/AsciiDoc) typography
*
@@ -432,11 +435,11 @@
&::before {
margin-right: 4px;
- font: normal normal normal 14px/1 FontAwesome;
+ font-style: normal;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
- content: '\f0c6';
+ content: '📎';
}
&.no-attachment-icon {
@@ -573,10 +576,6 @@ body {
font-size: 1.25em;
font-weight: $gl-font-weight-bold;
- &:last-child {
- margin-bottom: 0;
- }
-
&.with-button {
line-height: 34px;
}
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index f0b1e859139..808813599c5 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -468,7 +468,6 @@ $gl-line-height-20: 20px;
$gl-line-height-24: 24px;
$gl-line-height-14: 14px;
-$issue-box-upcoming-bg: #8f8f8f;
$pages-group-name-color: #4c4e54;
/*
diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
index 6c51c4b0ec3..b148cc8f0e7 100644
--- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
+++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss
@@ -22,32 +22,14 @@
border-radius: $gl-border-radius-base;
.select2-arrow {
- background-image: none;
- background-color: transparent;
- border: 0;
padding-top: 12px;
padding-right: 20px;
- font-size: 10px;
+ /* stylelint-disable-next-line function-url-quotes */
+ background: url(asset_path('chevron-down.png')) no-repeat 2px 8px;
b {
display: none;
}
-
- &::after {
- content: '\f078';
- position: absolute;
- z-index: 1;
- text-align: center;
- pointer-events: none;
- box-sizing: border-box;
- color: $gray-darkest;
- 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;
- }
}
.select2-chosen {
diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
index 499394ad960..cc876c9a635 100644
--- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
+++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss
@@ -4,7 +4,7 @@
position: absolute;
top: 48%;
left: -$length;
- border-top: 2px solid $border-color;
+ border-top: 2px solid var(--border-color, $border-color);
width: $length;
height: 1px;
}
@@ -14,14 +14,14 @@
display: inline-block;
padding: 8px 10px 9px;
width: 100%;
- border: 1px solid $border-color;
+ border: 1px solid var(--border-color, $border-color);
border-radius: $border-radius;
- background-color: $white;
+ background-color: var(--white, $white);
&:hover {
- background-color: $gray-darker;
+ background-color: var(--gray-50, $gray-50);
border: 1px solid $dropdown-toggle-active-border-color;
- color: $gl-text-color;
+ color: var(--gl-text-color, $gl-text-color);
}
}
@@ -66,7 +66,7 @@
@mixin mini-pipeline-item() {
border-radius: 100px;
- background-color: $white;
+ background-color: var(--white, $white);
border-width: 1px;
border-style: solid;
width: $ci-action-icon-size;
@@ -85,22 +85,22 @@
// Dropdown button animation in mini pipeline graph
&.ci-status-icon-success {
- @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
+ @include mini-pipeline-graph-color(var(--white, $white), $green-100, $green-200, $green-500, $green-600, $green-700);
}
&.ci-status-icon-failed {
- @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
+ @include mini-pipeline-graph-color(var(--white, $white), $red-100, $red-200, $red-500, $red-600, $red-700);
}
&.ci-status-icon-pending,
&.ci-status-icon-waiting-for-resource,
&.ci-status-icon-success-with-warnings {
- @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
+ @include mini-pipeline-graph-color(var(--white, $white), $orange-50, $orange-100, $orange-500, $orange-600, $orange-700);
}
&.ci-status-icon-preparing,
&.ci-status-icon-running {
- @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
+ @include mini-pipeline-graph-color(var(--white, $white), $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
}
&.ci-status-icon-canceled,
@@ -108,12 +108,12 @@
&.ci-status-icon-disabled,
&.ci-status-icon-not-found,
&.ci-status-icon-manual {
- @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black);
+ @include mini-pipeline-graph-color(var(--white, $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-200, $gray-300, $gray-400, $gray-500);
+ @include mini-pipeline-graph-color(var(--white, $white), $gray-100, $gray-200, $gray-300, $gray-400, $gray-500);
}
}
@@ -226,7 +226,7 @@
&:focus {
outline: none;
text-decoration: none;
- background-color: $gray-darker;
+ background-color: var(--gray-100, $gray-50);
}
}
}
diff --git a/app/assets/stylesheets/page_bundles/alert_management_details.scss b/app/assets/stylesheets/page_bundles/alert_management_details.scss
index beb80a14c5a..2eaf4517710 100644
--- a/app/assets/stylesheets/page_bundles/alert_management_details.scss
+++ b/app/assets/stylesheets/page_bundles/alert_management_details.scss
@@ -17,22 +17,19 @@
}
}
- .assignee-dropdown-item {
- .dropdown-item {
- @include gl-display-flex;
- @include gl-align-items-center;
-
+ .dropdown-item {
+ &:first-child {
&::before {
- top: 50% !important;
+ @include gl-pt-0;
}
+ }
- &.is-active {
- &:last-child {
- @include gl-border-b-gray-100;
- @include gl-border-b-1;
- @include gl-border-b-solid;
- }
- }
+ &::before {
+ @include gl-pt-8;
+ }
+
+ .gl-new-dropdown-item-text-wrapper {
+ @include gl-py-0;
}
}
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index ffc15af6329..3d1ae3519a9 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -92,7 +92,6 @@
.board-title-caret {
border-radius: $border-radius-default;
line-height: $gl-spacing-scale-5;
- height: $gl-spacing-scale-5;
&.btn svg {
top: 0;
@@ -173,13 +172,6 @@
}
}
-.board-promotion-state {
- background-color: var(--white, $white);
- flex: 1;
- overflow-y: auto;
- overflow-x: hidden;
-}
-
.board-list-component {
min-height: 0; // firefox fix
}
diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss
index 2f0f4a46658..3962c546b51 100644
--- a/app/assets/stylesheets/page_bundles/build.scss
+++ b/app/assets/stylesheets/page_bundles/build.scss
@@ -61,7 +61,7 @@
}
.environment-information {
- border: 1px solid $border-color;
+ border: 1px solid var(--border-color, $border-color);
padding: 8px $gl-padding 12px;
border-radius: $border-radius-default;
@@ -219,9 +219,9 @@
}
.builds-container {
- background-color: $white;
- border-top: 1px solid $border-color;
- border-bottom: 1px solid $border-color;
+ background-color: var(--white, $white);
+ border-top: 1px solid var(--border-color, $border-color);
+ border-bottom: 1px solid var(--border-color, $border-color);
max-height: 300px;
width: 289px;
overflow: auto;
@@ -237,7 +237,7 @@
width: 270px;
&:hover {
- color: $gl-text-color;
+ color: var(--gl-text-color, $gl-text-color);
}
}
@@ -256,13 +256,13 @@
}
&:hover {
- background-color: $gray-darker;
+ background-color: var(--gray-50, $gray-50);
}
}
}
.link-commit {
- color: $blue-600;
+ color: var(--blue-600, $blue-600);
}
}
diff --git a/app/assets/stylesheets/page_bundles/ci_status.scss b/app/assets/stylesheets/page_bundles/ci_status.scss
index 8522a0a8fe4..232d363b7f1 100644
--- a/app/assets/stylesheets/page_bundles/ci_status.scss
+++ b/app/assets/stylesheets/page_bundles/ci_status.scss
@@ -2,7 +2,7 @@
.ci-status {
padding: 2px 7px 4px;
- border: 1px solid $gray-darker;
+ border: 1px solid var(--border-color, $border-color);
white-space: nowrap;
border-radius: 4px;
@@ -18,7 +18,11 @@
}
&.ci-failed {
- @include status-color($red-100, $red-500, $red-600);
+ @include status-color(
+ var(--red-100, $red-100),
+ var(--red-500, $red-500),
+ var(--red-600, $red-600)
+ );
}
&.ci-success {
@@ -26,11 +30,12 @@
}
&.ci-canceled,
+ &.ci-skipped,
&.ci-disabled,
&.ci-scheduled,
&.ci-manual {
- color: $gl-text-color;
- border-color: $gl-text-color;
+ color: var(--gl-text-color, $gl-text-color);
+ border-color: currentColor;
&:not(span):hover {
background-color: rgba($gl-text-color, 0.07);
@@ -38,25 +43,37 @@
}
&.ci-preparing {
- @include status-color($gray-100, $gray-300, $gray-400);
+ @include status-color(
+ var(--gray-100, $gray-100),
+ var(--gray-300, $gray-300),
+ var(--gray-400, $gray-400)
+ );
}
&.ci-pending,
&.ci-waiting-for-resource,
&.ci-failed-with-warnings,
&.ci-success-with-warnings {
- @include status-color($orange-50, $orange-500, $orange-700);
+ @include status-color(
+ var(--orange-50, $orange-50),
+ var(--orange-500, $orange-500),
+ var(--orange-700, $orange-700)
+ );
}
&.ci-info,
&.ci-running {
- @include status-color($blue-100, $blue-500, $blue-600);
+ @include status-color(
+ var(--blue-100, $blue-100),
+ var(--blue-500, $blue-500),
+ var(--blue-600, $blue-600)
+ );
}
&.ci-created,
&.ci-skipped {
- color: $gl-text-color-secondary;
- border-color: $gl-text-color-secondary;
+ color: var(--gray-500, $gray-500);
+ border-color: currentColor;
&:not(span):hover {
background-color: rgba($gl-text-color-secondary, 0.07);
diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
index 3a5e2e4159d..4a48333cd27 100644
--- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss
+++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss
@@ -314,11 +314,6 @@
vertical-align: top;
font-weight: $gl-font-weight-normal;
}
-
- .fa {
- color: var(--gray-500, $gray-500);
- font-size: $code-font-size;
- }
}
}
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
new file mode 100644
index 00000000000..5f43d5df7e3
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -0,0 +1,81 @@
+@import 'mixins_and_variables_and_functions';
+
+.import-jobs-to-col {
+ width: 39%;
+}
+
+.import-jobs-status-col {
+ width: 15%;
+}
+
+.import-jobs-cta-col {
+ width: 1%;
+}
+
+.import-project-name-input {
+ border-radius: 0 $border-radius-default $border-radius-default 0;
+ position: relative;
+ left: -1px;
+ max-width: 300px;
+}
+
+.import-slash-divider {
+ background-color: $gray-lightest;
+ border: 1px solid $border-color;
+}
+
+.import-row {
+ height: 55px;
+}
+
+.import-table {
+ .import-jobs-from-col,
+ .import-jobs-to-col,
+ .import-jobs-status-col,
+ .import-jobs-cta-col {
+ border-bottom-width: 1px;
+ padding-left: $gl-padding;
+ }
+}
+
+.import-projects-loading-icon {
+ margin-top: $gl-padding-32;
+}
+
+.import-entities-target-select {
+ &.disabled {
+ .import-entities-target-select-separator,
+ .select2-container.select2-container-disabled .select2-choice {
+ color: var(--gray-400, $gray-400);
+ border-color: var(--gray-100, $gray-100);
+ background-color: var(--gray-10, $gray-10);
+ }
+
+ .select2-container.select2-container-disabled .select2-choice .select2-arrow {
+ background-color: var(--gray-10, $gray-10);
+ }
+ }
+
+ .import-entities-target-select-separator {
+ border-color: var(--gray-200, $gray-200);
+ background-color: var(--gray-10, $gray-10);
+ }
+
+ .select2-container {
+ > .select2-choice {
+ .select2-arrow {
+ background-color: var(--white, $white);
+ }
+
+ border-color: var(--gray-200, $gray-200);
+ color: var(--gray-900, $gray-900) !important;
+ background-color: var(--white, $white) !important;
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ }
+
+ .gl-form-input {
+ box-shadow: inset 0 0 0 1px var(--gray-200, $gray-200);
+ }
+}
diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
index b0655408edf..a26affb10a9 100644
--- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss
+++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss
@@ -255,10 +255,6 @@ $colors: (
}
}
- .btn-success .fa-spinner {
- color: var(--white, $white);
- }
-
.editor-wrap {
&.is-loading {
.editor {
diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
new file mode 100644
index 00000000000..3c95ecc9bf0
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss
@@ -0,0 +1,189 @@
+@import 'mixins_and_variables_and_functions';
+
+@mixin inset-border-1-red-500($important: false) {
+ box-shadow: inset 0 0 0 $gl-border-size-1 $red-500 if-important($important);
+}
+
+.timezone-dropdown {
+ .dropdown-menu {
+ @include gl-w-full;
+ }
+
+ .gl-new-dropdown-item-text-primary {
+ @include gl-overflow-hidden;
+ @include gl-text-overflow-ellipsis;
+ }
+}
+
+.modal-footer {
+ @include gl-bg-gray-10;
+}
+
+.invalid-dropdown {
+ .gl-dropdown-toggle {
+ @include inset-border-1-red-500;
+
+ &:hover {
+ @include inset-border-1-red-500(true);
+ }
+ }
+}
+
+//// Copied from roadmaps.scss - adapted for on-call schedules
+$header-item-height: 72px;
+$item-height: 40px;
+$details-cell-width: 180px;
+$timeline-cell-height: 32px;
+$timeline-cell-width: 180px;
+$border-style: 1px solid var(--gray-100, $gray-100);
+$gradient-dark-gray: rgba(0, 0, 0, 0.15);
+$gradient-gray: rgba(255, 255, 255, 0.001);
+$scroll-top-gradient: linear-gradient(to bottom, $gradient-dark-gray 0%, $gradient-gray 100%);
+$scroll-bottom-gradient: linear-gradient(to bottom, $gradient-gray 0%, $gradient-dark-gray 100%);
+$column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradient-gray 100%);
+
+.schedule-shell {
+ @include gl-relative;
+ @include gl-h-full;
+ @include gl-w-full;
+ @include gl-overflow-x-auto;
+ @include gl-border-gray-100;
+ @include gl-border-1;
+ @include gl-border-solid;
+ @include gl-rounded-base;
+}
+
+.timeline-section {
+ @include gl-sticky;
+ @include gl-top-0;
+ z-index: 20;
+
+ .timeline-header-blank,
+ .timeline-header-item {
+ @include float-left;
+ height: $header-item-height;
+ border-bottom: $border-style;
+ background-color: var(--white, $white);
+ }
+
+ .timeline-header-blank {
+ @include gl-sticky;
+ @include gl-top-0;
+ @include gl-left-0;
+ width: $details-cell-width;
+ z-index: 2;
+ }
+
+ .timeline-header-item {
+ // container size minus left panel width divided by 2 week timeframes
+ width: calc((100% - #{$details-cell-width}) / 2);
+
+ &:last-of-type .item-label {
+ @include gl-border-r-0;
+ }
+
+ .item-label,
+ .item-sublabel .sublabel-value {
+ color: var(--gray-400, $gray-400);
+ @include gl-font-weight-normal;
+
+ &.label-dark {
+ @include gl-text-gray-900;
+ }
+
+ &.label-bold {
+ @include gl-font-weight-bold;
+ }
+ }
+
+ .item-label {
+ @include gl-py-4;
+ @include gl-pl-4;
+ border-right: $border-style;
+ border-bottom: $border-style;
+ }
+
+ .item-sublabel {
+ @include gl-relative;
+ @include gl-display-flex;
+
+ .sublabel-value {
+ @include gl-flex-grow-1;
+ @include gl-flex-basis-0;
+
+ text-align: center;
+ @include gl-font-base;
+ padding: 2px 0;
+ }
+ }
+
+ .current-day-indicator-header {
+ @include gl-absolute;
+ @include gl-bottom-0;
+ height: $grid-size;
+ width: $grid-size;
+ background-color: var(--red-500, $red-500);
+ @include gl-rounded-full;
+ transform: translate(-50%, 50%);
+ }
+ }
+}
+
+.timeline-section .timeline-header-blank,
+.list-section .details-cell {
+ &::after {
+ @include gl-h-full;
+ @include gl-content-empty;
+ @include gl-absolute;
+ @include gl-top-0;
+ right: -$grid-size;
+ width: $grid-size;
+ @include gl-pointer-events-none;
+ background: $column-right-gradient;
+ }
+}
+
+.details-cell,
+.timeline-cell {
+ @include float-left;
+ height: $item-height;
+}
+
+.details-cell {
+ @include gl-sticky;
+ @include gl-left-0;
+ width: $details-cell-width;
+ @include gl-font-base;
+ background-color: var(--white, $white);
+ z-index: 10;
+}
+
+.timeline-cell {
+ @include gl-relative;
+ // width: $timeline-cell-width;
+ // container size minus left panel width divided by 2 week timeframes
+ width: calc((100% - #{$details-cell-width}) / 2);
+ @include gl-bg-transparent;
+ border-right: $border-style;
+
+ &:last-child {
+ @include gl-border-r-0;
+ }
+
+ .current-day-indicator {
+ @include gl-absolute;
+ top: -1px;
+ width: $gl-spacing-scale-1;
+ height: calc(100% + 1px);
+ background-color: var(--red-500, $red-500);
+ @include gl-pointer-events-none;
+ transform: translateX(-50%);
+ }
+}
+
+.gl-token {
+ .gl-avatar-labeled-label {
+ @include gl-text-white;
+ @include gl-font-weight-normal;
+ }
+}
diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss
index 1de66aa73da..d9ab52774bd 100644
--- a/app/assets/stylesheets/page_bundles/pipeline.scss
+++ b/app/assets/stylesheets/page_bundles/pipeline.scss
@@ -33,7 +33,7 @@
}
.stage {
- color: $gl-text-color-secondary;
+ color: var(--gray-500, $gray-500);
font-weight: $gl-font-weight-normal;
vertical-align: middle;
}
@@ -62,7 +62,7 @@
a {
font-weight: $gl-font-weight-bold;
- color: $gl-text-color;
+ color: var(--gl-text-color, $gl-text-color);
text-decoration: none;
&:focus,
@@ -124,11 +124,46 @@
display: flex;
width: 100%;
min-height: $dropdown-max-height-lg;
- background-color: $gray-light;
+ background-color: var(--gray-50, $gray-50);
padding: $gl-padding 0;
overflow: auto;
}
+// These are single-value classes to use with utility-class style CSS
+// but to still access this variable. Do not add other styles.
+.gl-pipeline-min-h {
+ min-height: $dropdown-max-height-lg;
+}
+
+.gl-pipeline-job-width {
+ width: 186px;
+}
+
+.gl-linked-pipeline-padding {
+ padding-right: 120px;
+}
+
+.gl-build-content {
+ @include build-content();
+}
+
+.gl-ci-action-icon-container {
+ position: absolute;
+ right: 5px;
+ top: 50% !important;
+ transform: translateY(-50%);
+
+ // Action Icons in big pipeline-graph nodes
+ &.ci-action-icon-wrapper {
+ height: 30px;
+ width: 30px;
+ border-radius: 100%;
+ display: block;
+ padding: 0;
+ line-height: 0;
+ }
+}
+
// Pipeline graph, used at
// app/assets/javascripts/pipelines/components/graph/graph_component.vue
.pipeline-graph {
@@ -142,7 +177,7 @@
a {
text-decoration: none;
- color: $gl-text-color;
+ color: var(--gl-text-color, $gl-text-color);
}
svg {
@@ -214,18 +249,18 @@
height: 25px;
position: absolute;
top: -31px;
- border-top: 2px solid $border-color;
+ border-top: 2px solid var(--border-color, $border-color);
}
&::after {
left: -44px;
- border-right: 2px solid $border-color;
+ border-right: 2px solid var(--border-color, $border-color);
border-radius: 0 20px;
}
&::before {
right: -44px;
- border-left: 2px solid $border-color;
+ border-left: 2px solid var(--border-color, $border-color);
border-radius: 20px 0 0;
}
}
@@ -281,7 +316,7 @@
a.build-content:hover,
button.build-content:hover {
- background-color: $gray-darker;
+ background-color: var(--gray-100, $gray-100);
border: 1px solid $dropdown-toggle-active-border-color;
}
@@ -292,7 +327,7 @@
position: absolute;
top: 48%;
right: -48px;
- border-top: 2px solid $border-color;
+ border-top: 2px solid var(--border-color, $border-color);
width: 48px;
height: 1px;
}
@@ -305,7 +340,7 @@
content: '';
top: -49px;
position: absolute;
- border-bottom: 2px solid $border-color;
+ border-bottom: 2px solid var(--border-color, $border-color);
width: 25px;
height: 69px;
}
@@ -313,14 +348,14 @@
// Right connecting curves
&::after {
right: -25px;
- border-right: 2px solid $border-color;
+ border-right: 2px solid var(--border-color, $border-color);
border-radius: 0 0 20px;
}
// Left connecting curves
&::before {
left: -25px;
- border-left: 2px solid $border-color;
+ border-left: 2px solid var(--border-color, $border-color);
border-radius: 0 0 0 20px;
}
}
@@ -355,7 +390,7 @@
line-height: 0;
svg {
- fill: $gl-text-color-secondary;
+ fill: var(--gray-500, $gray-500);
}
.spinner {
@@ -453,13 +488,13 @@
left: -6px;
margin-top: 3px;
border-width: 7px 5px 7px 0;
- border-right-color: $border-color;
+ border-right-color: var(--border-color, $border-color);
}
&::after {
left: -5px;
border-width: 10px 7px 10px 0;
- border-right-color: $white;
+ border-right-color: var(--white, $white);
}
}
@@ -484,5 +519,5 @@
}
.progress-bar.bg-primary {
- background-color: $blue-500 !important;
+ background-color: var(--blue-500, $blue-500) !important;
}
diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss
index e0e56893afc..dbde7933a8b 100644
--- a/app/assets/stylesheets/page_bundles/pipelines.scss
+++ b/app/assets/stylesheets/page_bundles/pipelines.scss
@@ -22,7 +22,7 @@
min-width: 170px; //Guarantees buttons don't break in several lines.
.btn-default {
- color: $gl-text-color-secondary;
+ color: var(--gray-500, $gray-500);
}
.btn.btn-retry:hover,
@@ -32,7 +32,7 @@
}
svg path {
- fill: $gl-text-color-secondary;
+ fill: var(--gray-500, $gray-500);
}
.dropdown-menu {
@@ -42,12 +42,7 @@
.dropdown-toggle,
.dropdown-menu {
- color: $gl-text-color-secondary;
-
- .fa {
- color: $gl-text-color-secondary;
- font-size: 14px;
- }
+ color: var(--gray-500, $gray-500);
}
.btn-group.open .btn-default {
diff --git a/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss
new file mode 100644
index 00000000000..3b4b1fdcded
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/profile_two_factor_auth.scss
@@ -0,0 +1,11 @@
+@media print {
+ .codes-to-print {
+ background-color: var(--white);
+ height: 100%;
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ margin: 0;
+ }
+}
diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss
index 4e27f438e36..f7b8a4c5b84 100644
--- a/app/assets/stylesheets/pages/clusters.scss
+++ b/app/assets/stylesheets/pages/clusters.scss
@@ -58,22 +58,6 @@
}
}
-.cluster-application-banner {
- height: 45px;
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
-
-.cluster-application-banner-close {
- align-self: flex-start;
- font-weight: 500;
- font-size: 20px;
- color: $orange-500;
- opacity: 1;
- margin: $gl-padding-8 14px 0 0;
-}
-
.cluster-application-description {
flex: 1;
}
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 17474b95e50..9b17da80023 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -174,12 +174,6 @@
}
.commit-actions {
- @include media-breakpoint-up(sm) {
- .fa-spinner {
- font-size: 12px;
- }
- }
-
.ci-status-icon svg {
vertical-align: text-bottom;
}
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index f357d508d5d..f237d57aa88 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -41,12 +41,6 @@
@include media-breakpoint-down(xs) {
width: 100%;
margin-top: 10px;
-
- > .issue-btn-group {
- > .btn {
- width: 100%;
- }
- }
}
}
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 5c845c37e90..e0e10d63f8e 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -74,10 +74,6 @@
justify-content: flex-end;
}
- .select2 {
- float: right;
- }
-
.encoding-selector,
.soft-wrap-toggle {
display: inline-block;
@@ -220,10 +216,6 @@
}
}
-.editor-title-row {
- margin-bottom: 20px;
-}
-
.popover.suggest-gitlab-ci-yml {
z-index: $header-zindex - 1;
}
diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss
index e73b6b18afd..aeda91c1714 100644
--- a/app/assets/stylesheets/pages/groups.scss
+++ b/app/assets/stylesheets/pages/groups.scss
@@ -80,12 +80,6 @@
.btn-success {
width: 100%;
}
-
- .dropdown .dropdown-toggle .fa-chevron-down {
- position: absolute;
- top: 11px;
- right: 8px;
- }
}
}
@@ -299,12 +293,6 @@ table.pipeline-project-metrics tr td {
padding: $gl-padding;
}
-.mattermost-icon svg {
- width: 16px;
- height: 16px;
- vertical-align: text-bottom;
-}
-
.mattermost-team-name {
color: $gl-text-color-secondary;
}
diff --git a/app/assets/stylesheets/pages/import.scss b/app/assets/stylesheets/pages/import.scss
deleted file mode 100644
index 74f80a11471..00000000000
--- a/app/assets/stylesheets/pages/import.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-.import-jobs-to-col {
- width: 39%;
-}
-
-.import-jobs-status-col {
- width: 15%;
-}
-
-.import-jobs-cta-col {
- width: 1%;
-}
-
-.import-project-name-input {
- border-radius: 0 $border-radius-default $border-radius-default 0;
- position: relative;
- left: -1px;
- max-width: 300px;
-}
-
-.import-namespace-select {
- > .select2-choice {
- border-radius: $border-radius-default 0 0 $border-radius-default;
- position: relative;
- left: 1px;
- }
-}
-
-.import-slash-divider {
- background-color: $gray-lightest;
- border: 1px solid $border-color;
-}
-
-.import-row {
- height: 55px;
-}
-
-.import-table {
- .import-jobs-from-col,
- .import-jobs-to-col,
- .import-jobs-status-col,
- .import-jobs-cta-col {
- border-bottom-width: 1px;
- padding-left: $gl-padding;
- }
-}
-
-.import-projects-loading-icon {
- margin-top: $gl-padding-32;
-}
-
-.btn-import {
- .loading-icon {
- display: none;
- }
-
- &.is-loading {
- .loading-icon {
- display: inline-block;
- }
- }
-}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index cc4827f75d4..e5528c25e82 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -10,6 +10,7 @@
}
.limit-container-width {
+ .flash-container,
.detail-page-header,
.page-content-header,
.commit-box,
@@ -112,7 +113,7 @@
position: absolute;
bottom: 0;
right: 0;
- text-shadow: -1px -1px 2px $white, 1px -1px 2px $white, -1px 1px 2px $white, 1px 1px 2px $white;
+ filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white);
}
}
@@ -199,10 +200,6 @@
border: 0;
}
- .select2-container span {
- margin-top: 0;
- }
-
&.assignee {
.author-link {
display: block;
@@ -395,6 +392,13 @@
text-align: center;
}
+ .merge-icon {
+ height: 12px;
+ width: 12px;
+ bottom: -5px;
+ right: 4px;
+ }
+
.sidebar-collapsed-icon {
display: flex;
flex-direction: column;
@@ -405,7 +409,7 @@
text-align: center;
color: $gl-text-color-secondary;
- svg {
+ > svg {
fill: $gl-text-color-secondary;
}
@@ -413,7 +417,7 @@
&:hover .todo-undone {
color: $gl-text-color;
- svg {
+ > svg {
fill: $gl-text-color;
}
}
@@ -485,10 +489,6 @@
display: none;
}
- .merge-icon {
- font-size: 10px;
- }
-
.multiple-users {
position: relative;
height: 24px;
@@ -697,10 +697,6 @@
.issuable-list {
li {
- .issue-box {
- display: flex;
- }
-
.issuable-info-container {
flex: 1;
display: flex;
@@ -894,29 +890,6 @@
}
}
-.issuable-close-button,
-.issuable-close-toggle {
- @include transition(border-color, color);
-}
-
-.issuable-close-dropdown {
- .dropdown-menu {
- min-width: 270px;
- left: auto;
- right: 0;
- }
-
- .description {
- .text {
- margin: 0;
- }
- }
-
- .dropdown-toggle > .icon {
- margin: 0 3px;
- }
-}
-
/*
* Following overrides are done to prevent
* legacy dropdown styles from influencing
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 08faebc8ec0..1caf62067a6 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -92,6 +92,11 @@ ul.related-merge-requests > li {
}
}
+.issues-footer {
+ padding-top: $gl-padding;
+ padding-bottom: 37px;
+}
+
.issues-nav-controls,
.new-branch-col {
font-size: 0;
@@ -196,14 +201,6 @@ ul.related-merge-requests > li {
}
}
}
-
- .create-merge-request-dropdown-toggle {
- .fa-caret-down {
- pointer-events: none;
- color: inherit;
- margin-left: 0;
- }
- }
}
.discussion-reply-holder {
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index a8b489f1273..0ccde57746a 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -30,20 +30,6 @@
margin-bottom: 0;
}
- .member-controls {
- .fa {
- line-height: inherit;
- }
- }
-
- .btn-remove {
- width: 100%;
-
- @include media-breakpoint-up(sm) {
- width: auto;
- }
- }
-
&.existing-title {
@include media-breakpoint-up(sm) {
float: left;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index a0ac55e4c6c..efca82def92 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -53,6 +53,7 @@ $mr-widget-min-height: 69px;
position: relative;
border: 1px solid $border-color;
border-radius: $border-radius-default;
+ background: var(--white, $white);
.gl-skeleton-loader {
display: block;
@@ -61,7 +62,7 @@ $mr-widget-min-height: 69px;
.mr-widget-extension {
border-top: 1px solid $border-color;
- background-color: $gray-light;
+ background-color: $gray-50;
&.clickable:hover {
background-color: $gray-100;
@@ -87,6 +88,7 @@ $mr-widget-min-height: 69px;
border: 1px solid $border-color;
border-radius: $border-radius-default;
border-top: 0;
+ background: var(--white, $white);
}
.mr-widget-body,
@@ -161,12 +163,6 @@ $mr-widget-min-height: 69px;
.btn {
font-size: $gl-font-size;
-
- &.dropdown-toggle {
- .fa {
- color: inherit;
- }
- }
}
.accept-merge-holder {
@@ -287,10 +283,6 @@ $mr-widget-min-height: 69px;
margin-top: 0;
margin-bottom: 0;
- &.has-conflicts .fa-exclamation-triangle {
- color: $orange-500;
- }
-
time {
font-weight: $gl-font-weight-normal;
}
@@ -343,13 +335,6 @@ $mr-widget-min-height: 69px;
}
}
- .dropdown-toggle {
- .fa {
- margin-left: 0;
- color: inherit;
- }
- }
-
.has-custom-error {
display: inline-block;
}
@@ -507,19 +492,6 @@ $mr-widget-min-height: 69px;
display: none;
}
-#modal_merge_info .modal-dialog {
- .dark {
- margin-right: 40px;
- }
-
- .btn-clipboard {
- margin-right: 20px;
- margin-top: 5px;
- position: absolute;
- right: 0;
- }
-}
-
.mr-links {
padding-left: $gl-padding-8 + $status-icon-size + $gl-btn-padding;
@@ -560,16 +532,13 @@ $mr-widget-min-height: 69px;
border-radius: $border-radius-default;
padding: $gl-padding;
border: 1px solid $border-color;
+ background: var(--white, $white);
min-height: $mr-widget-min-height;
@include media-breakpoint-up(md) {
align-items: center;
}
- .dropdown-toggle .fa {
- color: $gl-text-color;
- }
-
.git-merge-container {
justify-content: space-between;
flex: 1;
@@ -720,7 +689,7 @@ $mr-widget-min-height: 69px;
z-index: 199;
white-space: nowrap;
- .dropdown-menu-toggle {
+ .gl-dropdown-toggle {
width: auto;
max-width: 170px;
@@ -778,7 +747,7 @@ $mr-widget-min-height: 69px;
.epic-tabs-holder {
top: $header-height;
z-index: 250;
- background-color: $white;
+ background-color: $body-bg;
border-bottom: 1px solid $border-color;
.with-system-header & {
@@ -1039,3 +1008,11 @@ $mr-widget-min-height: 69px;
.diff-file-row.is-active {
background-color: $gray-50;
}
+
+.mr-conflict-loader {
+ max-width: 334px;
+
+ > svg {
+ vertical-align: middle;
+ }
+}
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index e23ec25a2f3..4216091e8a9 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -190,8 +190,7 @@ $note-form-margin-left: 72px;
border: 1px solid darken($gray-100, 25%);
}
- .note-headline-light,
- .fa-spinner {
+ .note-headline-light {
margin-left: 3px;
}
}
@@ -249,16 +248,6 @@ $note-form-margin-left: 72px;
.note-emoji-button {
position: relative;
line-height: 1;
-
- .fa-spinner {
- display: none;
- }
-
- &.is-loading {
- .fa-spinner {
- display: inline-block;
- }
- }
}
}
@@ -361,7 +350,7 @@ $note-form-margin-left: 72px;
left: $gl-padding-24;
right: 0;
bottom: 0;
- background: linear-gradient(rgba($white, 0.1) -100px, $white 100%);
+ background: linear-gradient(rgba($white, 0.1) -100px, $body-bg 100%);
}
}
}
@@ -407,8 +396,6 @@ $note-form-margin-left: 72px;
.discussion-body .diff-file {
.file-title {
cursor: default;
- line-height: 42px;
- padding: 0 $gl-padding;
border-top: 1px solid $border-color;
border-radius: 0;
@@ -791,13 +778,6 @@ $note-form-margin-left: 72px;
outline: none;
color: $blue-600;
}
-
- .fa {
- margin-right: 3px;
- font-size: 10px;
- line-height: 18px;
- vertical-align: top;
- }
}
.note-role {
diff --git a/app/assets/stylesheets/pages/notifications.scss b/app/assets/stylesheets/pages/notifications.scss
index e1cbf0e6654..33ab42b5511 100644
--- a/app/assets/stylesheets/pages/notifications.scss
+++ b/app/assets/stylesheets/pages/notifications.scss
@@ -1,6 +1,4 @@
.notification-list-item {
- line-height: 34px;
-
.dropdown-menu {
@extend .dropdown-menu-right;
}
@@ -37,8 +35,4 @@
.notification {
position: relative;
top: 1px;
-
- .fa {
- font-size: 18px;
- }
}
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index b37aa6cd285..89be1c024db 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -46,11 +46,6 @@
fill: $gl-text-color;
}
- .fa {
- font-size: 12px;
- color: $gl-text-color;
- }
-
.commit-sha {
color: $blue-600;
}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 09501d3713d..7fafd28be56 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -10,12 +10,6 @@
}
.input-group {
- .select2-container {
- display: unset;
- max-width: unset;
- flex-grow: 1;
- }
-
> div {
&:last-child {
padding-right: 0;
@@ -52,7 +46,6 @@
flex-grow: 1;
}
- + .select2 a,
+ .btn-default {
border-radius: 0 $border-radius-base $border-radius-base 0;
}
@@ -147,23 +140,10 @@
margin-left: 0;
}
- .fa {
- color: $layout-link-gray;
- }
-
svg {
fill: $layout-link-gray;
}
- .fa-caret-down {
- margin-left: 3px;
- line-height: 0;
-
- &.dropdown-btn-icon {
- margin-left: 0;
- }
- }
-
.notifications-icon {
top: 1px;
margin-right: 0;
@@ -179,13 +159,6 @@
height: 24px;
}
- .dropdown-toggle,
- .clone-dropdown-btn {
- .fa {
- color: unset;
- }
- }
-
.home-panel-action-button,
.project-action-button {
margin: $gl-padding $gl-padding-8 0 0;
@@ -258,10 +231,6 @@
color: $gray-700;
}
-.transfer-project .select2-container {
- min-width: 200px;
-}
-
.deploy-key {
// Ensure that the fingerprint does not overflow on small screens
.fingerprint {
@@ -512,7 +481,7 @@
top: 0;
height: calc(100% - #{$browser-scrollbar-size});
- .fa {
+ svg {
top: 50%;
margin-top: -$gl-padding-8;
}
@@ -1057,11 +1026,6 @@ pre.light-well {
margin-bottom: 0;
}
}
-
- .select2-choice {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
- }
}
.project-home-empty {
diff --git a/app/assets/stylesheets/pages/runners.scss b/app/assets/stylesheets/pages/runners.scss
index 8ed6936475b..856e49bd144 100644
--- a/app/assets/stylesheets/pages/runners.scss
+++ b/app/assets/stylesheets/pages/runners.scss
@@ -12,16 +12,18 @@
}
}
-.runner-status-online {
- color: $green-600;
-}
+.runner-status {
+ &.runner-status-online {
+ background-color: $green-600;
+ }
-.runner-status-offline {
- color: $gray-darkest;
-}
+ &.runner-status-offline {
+ background-color: $gray-darkest;
+ }
-.runner-status-paused {
- color: $red-500;
+ &.runner-status-paused {
+ background-color: $red-500;
+ }
}
.runner {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 502a1881fd2..cd99c667001 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -1,5 +1,7 @@
$search-dropdown-max-height: 400px;
$search-avatar-size: 16px;
+$search-sidebar-min-width: 240px;
+$search-sidebar-max-width: 300px;
.search-results {
.search-result-row {
@@ -17,6 +19,13 @@ $search-avatar-size: 16px;
}
}
+.search-sidebar {
+ @include media-breakpoint-up(md) {
+ min-width: $search-sidebar-min-width;
+ max-width: $search-sidebar-max-width;
+ }
+}
+
.search form:hover,
.file-finder-input:hover,
.issuable-search-form:hover,
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index 7b18e3774d8..335e177d169 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -169,11 +169,6 @@
.form-check {
margin-bottom: 10px;
- i.fa {
- margin: 2px 0;
- font-size: 20px;
- }
-
.option-title {
font-weight: $gl-font-weight-normal;
display: inline-block;
@@ -193,7 +188,7 @@
}
&.disabled {
- i.fa {
+ svg {
opacity: 0.5;
}
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index 429181c2ad4..8f3574a337b 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -1,8 +1,11 @@
+.project-last-commit {
+ min-height: 4.75rem;
+}
+
.tree-holder {
.nav-block {
margin: 16px 0;
- .btn .fa,
.btn svg {
color: $gl-text-color-secondary;
}
@@ -69,7 +72,7 @@
}
.btn {
- margin: 10px 0 0;
+ margin-top: 10px;
}
}
}
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index b3e53e35f6e..af43c532b7c 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -977,12 +977,12 @@ body.navless {
border-color: #e3e3e3;
color: #303030;
}
-.btn.btn-success, .btn.btn-register {
+.btn.btn-success {
background-color: #108548;
border-color: #217645;
color: #fff;
}
-.btn.btn-success:active, .btn.btn-success.active, .btn.btn-register:active, .btn.btn-register.active {
+.btn.btn-success:active, .btn.btn-success.active {
box-shadow: rgba(0, 0, 0, 0.16);
background-color: #24663b;
border-color: #0d532a;
diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss
index 6ab02bd5e27..7f2bea9bf26 100644
--- a/app/assets/stylesheets/themes/_dark.scss
+++ b/app/assets/stylesheets/themes/_dark.scss
@@ -1,63 +1,63 @@
$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-50: #303030;
+$gray-100: #404040;
+$gray-200: #525252;
+$gray-300: #5e5e5e;
+$gray-400: #868686;
+$gray-500: #999;
+$gray-600: #bfbfbf;
+$gray-700: #dbdbdb;
+$gray-800: #f0f0f0;
$gray-900: #fafafa;
$gray-950: #fff;
-$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-50: #0a4020;
+$green-100: #0d532a;
+$green-200: #24663b;
+$green-300: #217645;
+$green-400: #108548;
+$green-500: #2da160;
+$green-600: #52b87a;
+$green-700: #91d4a8;
+$green-800: #c3e6cd;
+$green-900: #ecf4ee;
$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;
+$blue-50: #033464;
+$blue-100: #064787;
+$blue-200: #0b5cad;
+$blue-300: #1068bf;
+$blue-400: #1f75cb;
+$blue-500: #428fdc;
+$blue-600: #63a6e9;
+$blue-700: #9dc7f1;
+$blue-800: #cbe2f9;
+$blue-900: #e9f3fc;
+$blue-950: #f2f9ff;
+
+$orange-50: #5c2900;
+$orange-100: #703800;
+$orange-200: #8f4700;
+$orange-300: #9e5400;
+$orange-400: #ab6100;
+$orange-500: #c17d10;
+$orange-600: #d99530;
+$orange-700: #e9be74;
+$orange-800: #f5d9a8;
+$orange-900: #fdf1dd;
+$orange-950: #fff4e1;
+
+$red-50: #660e00;
+$red-100: #8d1300;
+$red-200: #ae1800;
+$red-300: #c91c00;
+$red-400: #dd2b0e;
+$red-500: #ec5941;
+$red-600: #f57f6c;
+$red-700: #fcb5aa;
+$red-800: #fdd4cd;
+$red-900: #fcf1ef;
+$red-950: #fff4f3;
$indigo-50: #1a1a40;
$indigo-100: #292961;
@@ -166,14 +166,16 @@ body.gl-dark {
--white: #{$white};
--black: #{$black};
+
+ --svg-status-bg: #{$white};
}
$border-white-light: $gray-900;
$border-white-normal: $gray-900;
-$body-bg: $gray-50;
-$input-bg: $gray-100;
-$input-focus-bg: $gray-100;
+$body-bg: $gray-10;
+$input-bg: $white;
+$input-focus-bg: $white;
$input-color: $gray-900;
$input-group-addon-bg: $gray-900;
diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss
index 85115cfd5d9..417377b514e 100644
--- a/app/assets/stylesheets/themes/theme_helper.scss
+++ b/app/assets/stylesheets/themes/theme_helper.scss
@@ -64,14 +64,20 @@
color: $search-and-nav-links;
> a {
+ .notification-dot {
+ border: 2px solid $nav-svg-color;
+ }
+
+ &.header-help-dropdown-toggle {
+ .notification-dot {
+ background-color: $search-and-nav-links;
+ }
+ }
+
&.header-user-dropdown-toggle {
.header-user-avatar {
border-color: $search-and-nav-links;
}
-
- .header-user-notification-dot {
- border: 2px solid $nav-svg-color;
- }
}
&:hover,
@@ -84,9 +90,14 @@
fill: currentColor;
}
- &.header-user-dropdown-toggle .header-user-notification-dot {
+ .notification-dot {
+ will-change: border-color, background-color;
border-color: $nav-svg-color + 33;
}
+
+ &.header-help-dropdown-toggle .notification-dot {
+ background-color: $white;
+ }
}
}
@@ -101,9 +112,15 @@
}
}
- &.header-user-dropdown-toggle .header-user-notification-dot {
+ .notification-dot {
border-color: $white;
}
+
+ &.header-help-dropdown-toggle {
+ .notification-dot {
+ background-color: $nav-svg-color;
+ }
+ }
}
.impersonated-user,
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index a3bb7c868df..bf251993c38 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -129,3 +129,30 @@
content: '';
display: flex;
}
+
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1085
+.gl-md-flex-direction-column {
+ @media (min-width: $breakpoint-md) {
+ flex-direction: column;
+ }
+}
+
+// Same as above
+.gl-md-flex-direction-column\! {
+ @media (min-width: $breakpoint-md) {
+ flex-direction: column !important;
+ }
+}
+
+// These will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1091
+.gl-w-10p {
+ width: 10%;
+}
+
+.gl-w-20p {
+ width: 20%;
+}
+
+.gl-w-40p {
+ width: 40%;
+}