diff options
Diffstat (limited to 'app/assets/stylesheets')
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%; +} |