diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
27 files changed, 108 insertions, 125 deletions
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); |