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