diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
| -rw-r--r-- | app/assets/stylesheets/framework/common.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 14 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/emojis.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/filters.scss | 5 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/forms.scss | 38 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/header.scss | 57 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/kbd.scss | 4 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 2 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 644 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/typography.scss | 15 | ||||
| -rw-r--r-- | app/assets/stylesheets/framework/variables.scss | 71 |
11 files changed, 788 insertions, 70 deletions
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index be8a890320f..14e756a5c21 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -1,9 +1,9 @@ /** COLORS **/ .cgray { color: $gl-text-color; } -.clgray { color: $common-gray-light; } +.clgray { color: $gray-200; } .cred { color: $red-500; } .cgreen { color: $green-600; } -.cdark { color: $common-gray-dark; } +.cdark { color: $gray-800; } .fwhite { fill: $white; } .fgray { fill: $gray-500; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index c5a34ca4b31..0acda85f527 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -5,7 +5,7 @@ // for Snippets is introduced and Clone button is relocated, we won't // need this style. // Issue for the refactoring: https://gitlab.com/gitlab-org/gitlab/-/issues/213327 - &.gl-new-dropdown button.dropdown-toggle { + &.gl-dropdown button.dropdown-toggle { @include gl-display-inline-flex; } @@ -41,7 +41,7 @@ max-height: $extended-max-height; // See comment below for explanation - .gl-new-dropdown-inner { + .gl-dropdown-inner { max-height: $extended-max-height - 2px; } } @@ -54,12 +54,12 @@ width: 100%; } - // `GlDropdown` specifies the `max-height` of `.gl-new-dropdown-inner` + // `GlDropdown` specifies the `max-height` of `.gl-dropdown-inner` // as `$dropdown-max-height`, but the `max-height` rule above forces // the parent `.dropdown-menu` to be _slightly_ too small because of // the 1px borders. The workaround below overrides the @gitlab/ui style // to avoid a double scroll bar. - .gl-new-dropdown-inner { + .gl-dropdown-inner { max-height: $dropdown-max-height - 2px; } } @@ -285,7 +285,7 @@ list-style: none; > a, - button, + > button, .gl-button.btn-link, .menu-item { @include dropdown-link; @@ -1027,7 +1027,7 @@ // This class won't be needed once we can add a prop for this in the GitLab UI component // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/966 -.gl-new-dropdown { +.gl-dropdown { .gl-dropdown-menu-wide { width: $gl-dropdown-width-wide; } @@ -1035,7 +1035,7 @@ // This class won't be needed once we can add a prop for this in the GitLab UI component // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/966 -.gl-new-dropdown.gl-dropdown-menu-full-width { +.gl-dropdown.gl-dropdown-menu-full-width { .dropdown-menu { width: 100%; } diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index 68a3493670d..16ad6f62c64 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -36,7 +36,7 @@ gl-emoji { } } -.emoji-picker .gl-new-dropdown .dropdown-menu { +.emoji-picker .gl-dropdown .dropdown-menu { width: 350px; } @@ -48,6 +48,6 @@ gl-emoji { border-bottom-color: var(--gl-theme-accent, $theme-indigo-500); } -.emoji-picker .gl-new-dropdown-inner > :last-child { +.emoji-picker .gl-dropdown-inner > :last-child { padding-bottom: 0; } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 37b61d36911..b35175f4ef6 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -252,7 +252,7 @@ z-index: 1; &:hover .clear-search-icon { - color: $common-gray-dark; + color: $gray-800; } } } @@ -433,8 +433,7 @@ .search-token-target-branch { .value { - font-family: $monospace-font; - font-size: $gl-font-size-monospace; + @include gl-font-monospace; } } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index bba995a6de3..e86edff3f13 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -14,6 +14,28 @@ input[type='text'].danger { text-shadow: 0 1px 1px $white; } +/** + * When form input type is number, Firefox & Safari show the up/down arrows + * on the right side of the input persistently, while Chrome shows it only + * on hover or focus, this fix allows us to hide the arrows in all browsers. + * You can conditionally add/remove `hide-spinners` class to have consistent + * behaviour across browsers. + */ + +/* stylelint-disable property-no-vendor-prefix */ +input[type='number'].hide-spinners { + -moz-appearance: textfield; + appearance: textfield; + + &::-webkit-inner-spin-button, + &::-webkit-outer-spin-button { + -webkit-appearance: none; + appearance: none; + margin: 0; + } +} +/* stylelint-enable property-no-vendor-prefix */ + .datetime-controls { select { width: 100px; @@ -204,6 +226,22 @@ label { } } +.show-password-complexity-errors { + .form-control:not(textarea) { + height: 34px; + } + + .password-complexity-error-outline { + border: 1px solid $red-500; + + &:focus { + box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, + 0 0 4px 0 $gl-field-focus-shadow-error; + border: 0 none; + } + } +} + .input-icon-wrapper, .select-wrapper { position: relative; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index ed41d10f3b2..4b1efcc1e9a 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -1,3 +1,7 @@ +$search-input-field-min-width: 320px; +$search-input-field-max-width: 640px; +$search-input-field-x-min-width: 200px; + .navbar-gitlab { padding: 0 16px; z-index: $header-zindex; @@ -76,6 +80,57 @@ .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } + + .header-search-new { + max-width: $search-input-field-max-width; + } + + &.header-search-is-active { + .global-search-container { + flex-grow: 1; + } + } + } + + .header-search { + min-width: $search-input-field-min-width; + + // This is a temporary workaround! + // the button in GitLab UI Search components need to be updated to not be the small size + // see in Figma: https://www.figma.com/file/qEddyqCrI7kPSBjGmwkZzQ/Component-library?node-id=43905%3A45540 + .gl-search-box-by-type-clear.btn-sm { + padding: 0.5rem !important; + } + + @include media-breakpoint-between(md, lg) { + min-width: $search-input-field-x-min-width; + } + + &.is-searching { + .in-search-scope-help { + position: absolute; + top: $gl-spacing-scale-2; + right: 2.125rem; + z-index: 2; + } + } + + &.is-not-focused { + .gl-search-box-by-type-clear { + display: none; + } + } + + .keyboard-shortcut-helper { + transform: translateY(calc(50% - 2px)); + box-shadow: none; + border-color: transparent; + } + } + + .header-search-dropdown-menu { + max-height: $dropdown-max-height; + top: 100%; } .navbar-collapse { @@ -555,7 +610,7 @@ } .top-nav-container-view { - .gl-new-dropdown & .gl-search-box-by-type { + .gl-dropdown & .gl-search-box-by-type { @include gl-m-0; } diff --git a/app/assets/stylesheets/framework/kbd.scss b/app/assets/stylesheets/framework/kbd.scss index 7dd0ae47834..16e0214c703 100644 --- a/app/assets/stylesheets/framework/kbd.scss +++ b/app/assets/stylesheets/framework/kbd.scss @@ -1,10 +1,10 @@ kbd { display: inline-block; padding: 3px 5px; - font-size: $gl-font-size-monospace-sm; + @include gl-font-sm; line-height: 10px; color: var(--gray-700, $gray-700); - vertical-align: middle; + vertical-align: unset; background-color: var(--gray-10, $gray-10); border-width: 1px; border-style: solid; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 47856f1a0d3..628406d5889 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -450,7 +450,7 @@ } @mixin avatar-counter($border-radius: 1em) { - background-color: $gray-darkest; + background-color: $gray-400; color: $white; border: 1px solid $gray-normal; border-radius: $border-radius; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 7878e08e549..eb34d91476b 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -198,17 +198,17 @@ } } + $line-height: map-get($spacers, 4) + px-to-rem(2px); + &-icon { /** * 2px extra is to give a little more height than needed * to hide timeline line before/after the element starts/ends */ - height: map-get($spacers, 4) + px-to-rem(2px); + height: $line-height; z-index: 1; position: relative; - top: -3px; padding: $gl-padding-4 0; - background-color: $body-bg; &.opened { color: $green-500; @@ -220,7 +220,7 @@ } &-content { - line-height: initial; + line-height: $line-height; margin-left: $gl-padding-8; } } @@ -280,3 +280,639 @@ grid-area: user; } } + +@mixin right-sidebar { + position: fixed; + top: $header-height; + // Default value for CSS var must contain a unit + // stylelint-disable-next-line length-zero-no-unit + bottom: var(--review-bar-height, 0px); + right: 0; + transition: width $gl-transition-duration-medium; + background-color: $white; + z-index: 200; + overflow: hidden; + +} + +.right-sidebar { + &:not(.right-sidebar-merge-requests) { + @include right-sidebar; + } + + &.right-sidebar-merge-requests { + @include media-breakpoint-down(md) { + @include right-sidebar; + z-index: 251; + } + } + + @include media-breakpoint-down(sm) { + z-index: 251; + } + + a:not(.btn) { + color: inherit; + + &:hover { + color: $blue-800; + } + } + + .gl-label .gl-label-link:hover { + color: inherit; + } + + .btn-link { + color: inherit; + } + + .issuable-header-text { + margin-top: 7px; + } + + .gutter-toggle { + display: flex; + align-items: center; + margin-left: 20px; + padding: 4px; + border-radius: 4px; + height: 24px; + + &:hover { + color: $gl-text-color; + background: $gray-50; + } + + &:hover, + &:focus { + text-decoration: none; + } + } + + &.right-sidebar-merge-requests { + .block, + .sidebar-contained-width, + .issuable-sidebar-header { + width: 100%; + } + + .block { + @include media-breakpoint-up(lg) { + padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5; + } + + &.participants { + border-bottom: 0; + } + } + } + + .block, + .sidebar-contained-width, + .issuable-sidebar-header { + @include clearfix; + padding: $gl-spacing-scale-4 0 $gl-spacing-scale-5; + border-bottom: 1px solid $border-gray-normal; + // This prevents the mess when resizing the sidebar + // of elements repositioning themselves.. + width: $gutter-inner-width; + // -- + + &:last-child { + border: 0; + } + + &.assignee { + .author-link { + display: block; + position: relative; + + &:hover { + .author { + text-decoration: underline; + } + } + } + } + + &.time-tracking, + &.participants, + &.subscriptions, + &.with-sub-blocks { + padding-top: $gl-spacing-scale-5; + } + } + + .block-first { + padding-top: 0; + } + + .title { + color: $gl-text-color; + line-height: $gl-line-height-20; + + .avatar { + margin-left: 0; + } + } + + .selectbox { + display: none; + + &.show { + display: block; + } + } + + .btn-clipboard:hover { + color: $gl-text-color; + } + + .issuable-sidebar { + height: 100%; + + &:not(.is-merge-request) { + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + + &.is-merge-request { + @include media-breakpoint-down(sm) { + overflow-y: scroll; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + } + } + } + + &.right-sidebar-expanded { + &:not(.right-sidebar-merge-requests) { + width: $gutter-width; + } + + .value { + line-height: 1; + } + + .issuable-sidebar { + padding: 0 20px; + + &.is-merge-request { + @include media-breakpoint-up(lg) { + padding: 0; + + .issuable-context-form { + --initial-top: calc(#{$header-height} + 76px); + --top: var(--initial-top); + + @include gl-sticky; + @include gl-overflow-auto; + + top: var(--top); + height: calc(100vh - var(--top)); + padding: 0 15px; + margin-bottom: calc(var(--top) * -1); + + .with-performance-bar & { + --top: calc(var(--initial-top) + #{$performance-bar-height}); + } + + .with-system-header & { + --top: calc(var(--initial-top) + #{$system-header-height}); + } + + .with-performance-bar.with-system-header & { + --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height}); + } + } + } + } + } + + &:not(.boards-sidebar):not([data-signed-in]):not([data-always-show-toggle]) { + .issuable-sidebar-header { + display: none; + } + } + + .light { + font-weight: $gl-font-weight-normal; + } + + .no-value { + color: $gl-text-color-secondary; + } + + .sidebar-collapsed-icon { + display: none; + } + + .gutter-toggle { + text-align: center; + } + + .title .gutter-toggle { + margin-top: 0; + } + + .assignee .user-list .avatar { + margin: 0; + } + + .hide-expanded { + display: none; + } + } + + &.right-sidebar-collapsed { + /* Extra small devices (phones, less than 768px) */ + display: none; + /* Small devices (tablets, 768px and up) */ + + &:not(.right-sidebar-merge-requests) { + @include media-breakpoint-up(sm) { + display: block; + } + } + + &.right-sidebar-merge-requests { + @include media-breakpoint-up(lg) { + display: block; + } + } + + width: $gutter-collapsed-width; + padding: 0; + + .block, + .sidebar-contained-width, + .issuable-sidebar-header { + width: $gutter-collapsed-width - 2px; + padding: 0; + border-bottom: 0; + overflow: hidden; + } + + .block, + .gutter-toggle, + .sidebar-collapsed-container { + &.with-sub-blocks .sub-block:hover, + &:not(.with-sub-blocks):hover { + background-color: $gray-100; + } + } + + .participants { + border-bottom: 1px solid $border-gray-normal; + } + + .hide-collapsed { + display: none; + } + + .gutter-toggle { + width: 100%; + height: $sidebar-toggle-height; + margin-left: 0; + border-bottom: 1px solid $border-white-normal; + border-radius: 0; + } + + a.gutter-toggle { + display: flex; + justify-content: center; + flex-direction: column; + text-align: center; + } + + .merge-icon { + height: 12px; + width: 12px; + bottom: -5px; + right: 4px; + } + + .sidebar-collapsed-icon { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: $sidebar-toggle-height; + text-align: center; + color: $gl-text-color-secondary; + + > svg { + fill: $gl-text-color-secondary; + } + + &:hover:not(.disabled), + &:hover .todo-undone { + color: $gl-text-color; + + > svg { + fill: $gl-text-color; + } + } + + .todo-undone { + color: $blue-600; + fill: $blue-600; + } + + .author { + display: none; + } + + .btn-clipboard { + /* + This change should be temporary, because the DOM currently gets + generated from a ruby definition in `app/helpers/button_helper.rb`. + As soon as the `copy to clipboard` button will be transferred to + Vue this should be adjusted as well. + */ + flex: 1; + align-self: stretch; + padding: 0; + + border: 0; + background: transparent; + color: $gl-text-color-secondary; + + &:hover { + color: $gl-text-color; + } + } + + &.multiple-users { + display: flex; + justify-content: center; + } + } + + .sidebar-avatar-counter { + width: 24px; + height: 24px; + border-radius: 12px; + + ~.merge-icon { + bottom: 0; + } + } + + .sidebar-collapsed-user { + padding-bottom: 0; + + .author-link { + padding-left: 0; + + .avatar { + position: static; + margin: 0; + } + } + } + + .issuable-header-btn { + display: none; + } + + .multiple-users { + .btn-link { + padding: 0; + border: 0; + + .avatar { + margin: 0; + } + } + + .btn-link:first-child { + position: absolute; + left: 10px; + z-index: 1; + } + + .btn-link:last-child { + position: absolute; + right: 10px; + + &:hover { + text-decoration: none; + } + } + } + + .milestone-title span, + .collapse-truncated-title { + @include str-truncated(100%); + display: block; + margin: 0 4px; + } + } + + .dropdown-menu-toggle { + width: 100%; + padding-top: 6px; + } + + .dropdown-menu { + width: 100%; + + /* + * Overwrite hover style for dropdown items, so that they are not blue + * This should be removed during dev of https://gitlab.com/gitlab-org/gitlab-foss/issues/44040 + */ + li a { + &:hover, + &:active, + &:focus, + &.is-focused { + @include dropdown-item-hover; + } + } + + } +} + +.with-performance-bar .right-sidebar { + top: calc(#{$header-height} + #{$performance-bar-height}); +} + +.sidebar-move-issue-confirmation-button { + width: 100%; + + &.is-loading { + .sidebar-move-issue-confirmation-loading-icon { + display: inline-block; + } + } +} + +.sidebar-move-issue-confirmation-loading-icon { + display: none; +} + +.issuable-show-labels { + .gl-label { + margin-bottom: 5px; + margin-right: 5px; + } + + a { + display: inline-block; + + .color-label { + padding: 4px $grid-size; + border-radius: $label-border-radius; + margin-right: 4px; + margin-bottom: 4px; + } + + &:hover .color-label { + text-decoration: underline; + } + } + + &.has-labels { + // this font size is a fix to + // prevent unintended spacing between labels + // which shows up when rendering markup has white-space + // characters present. + // see: https://css-tricks.com/fighting-the-space-between-inline-block-elements/#article-header-id-3 + font-size: 0; + margin-bottom: -5px; + } +} + +.assignee, +.reviewer { + .merge-icon { + color: $orange-400; + position: absolute; + bottom: -3px; + right: -3px; + filter: drop-shadow(0 0 0.5px $white) drop-shadow(0 0 1px $white) drop-shadow(0 0 2px $white); + } +} + +.participants-author { + &:nth-of-type(8n) { + padding-right: 0; + } + + .avatar.avatar-inline { + margin: 0; + } +} + +.participants-more, +.user-list-more { + margin-left: 5px; + + a, + .btn-link { + color: $gl-text-color-secondary; + } + + .btn-link { + padding: 0; + } + + .btn-link:hover { + color: $blue-800; + text-decoration: none; + } + + .btn-link:focus { + text-decoration: none; + } +} + +.sidebar-help-wrap { + .sidebar-help-state { + margin: 16px -20px -20px; + padding: 16px 20px; + } + + .help-state-toggle-enter-active { + transition: all 0.8s ease; + } + + .help-state-toggle-leave-active { + transition: all 0.5s ease; + } + + .help-state-toggle-enter, + .help-state-toggle-leave-active { + opacity: 0; + } +} + +.time-tracker { + .sidebar-collapsed-icon { + > .stopwatch-svg { + display: inline-block; + } + + svg { + width: 16px; + height: 16px; + fill: $gl-text-color-secondary; + } + + &:hover svg { + fill: $gl-text-color; + } + } + + .compare-meter { + &.over_estimate { + .time-remaining, + .compare-value.spent { + color: $red-500; + } + } + } + + .compare-display-container { + font-size: 13px; + } +} + +/* + * Following overrides are done to prevent + * legacy dropdown styles from influencing + * GitLab UI components used within GlDropdown + */ +.right-sidebar-collapsed { + .sidebar-grouped-item { + .sidebar-collapsed-icon { + margin-bottom: 0; + } + + .sidebar-collapsed-divider { + line-height: 5px; + font-size: 12px; + color: $gray-500; + + + .sidebar-collapsed-icon { + padding-top: 0; + } + } + } +} + +@include media-breakpoint-down(sm) { + // Overriding the following rule with the negative margin + // https://gitlab.com/gitlab-org/gitlab/-/blob/146c43c931c3743a140529307aea616e4aa9ff21/app/assets/stylesheets/framework/sidebar.scss#L1-5 + .container-fluid { + .issuable-list, + .issues-filters, + .epics-filters { + margin: 0 (-$gl-padding); + } + } +} diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 2c2d8a2b592..0a475845fd3 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -81,6 +81,7 @@ word-wrap: break-word; overflow-wrap: break-word; word-break: keep-all; + @include gl-font-base; } h1 { @@ -322,7 +323,6 @@ pre { margin-bottom: 16px; - font-size: 13px; line-height: 1.6em; overflow-x: auto; border-radius: $border-radius-default; @@ -587,7 +587,7 @@ } } - .gl-new-dropdown-item { + .gl-dropdown-item { margin: 0; padding: 0; line-height: 1rem; @@ -658,7 +658,7 @@ pre { display: block; padding: $gl-padding-8 $input-horizontal-padding; margin: 0 0 $gl-padding-8; - font-size: $gl-font-size-monospace; + @include gl-font-base; word-break: break-all; word-wrap: break-word; color: $gl-text-color; @@ -680,7 +680,7 @@ code { } .monospace { - font-family: $monospace-font; + @include gl-font-monospace; } .weight-normal { @@ -706,7 +706,7 @@ code { */ textarea.js-gfm-input { font-family: $monospace-font; - font-size: $gl-font-size-monospace; + @include gl-font-base; } h1, @@ -772,3 +772,8 @@ textarea { wbr { display: inline-block; } + +// The font used in Monaco editor - Web IDE, Snippets, single file editor +:root { + --code-editor-font: #{$monospace-font}; +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 99284ea0a64..ec8ffaf8c53 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -83,18 +83,9 @@ $darken-dark-factor: 10% !default; $darken-border-factor: 5% !default; $darken-border-dashed-factor: 25% !default; -$white: #fff !default; -$white-normal: #f0f0f0 !default; -$white-dark: #eaeaea !default; -$white-transparent: rgba($white, 0.8) !default; - $purple: #6d49cb !default; $purple-light: #ede8fb !default; -$black: #000 !default; -$black-transparent: rgba(0, 0, 0, 0.3) !default; -$almost-black: #242424 !default; - $green-50: #ecf4ee !default; $green-100: #c3e6cd !default; $green-200: #91d4a8 !default; @@ -183,6 +174,15 @@ $t-gray-a-08: rgba($gray-950, 0.08) !default; $t-gray-a-16: rgba($gray-950, 0.16) !default; $t-gray-a-24: rgba($gray-950, 0.24) !default; +$white: #fff !default; +$white-normal: $gray-50 !default; +$white-dark: darken($gray-50, 2) !default; +$white-transparent: rgba($white, 0.8) !default; + +$black: #000 !default; +$black-transparent: $t-gray-a-24 !default; +$almost-black: $gray-950 !default; + $greens: ( '50': $green-50, '100': $green-100, @@ -350,17 +350,17 @@ $theme-light-red-700: #a62e21; // Data visualization color palette -$data-viz-blue-50: #e9ebff; -$data-viz-blue-100: #d4dcfa; -$data-viz-blue-200: #b7c6ff; -$data-viz-blue-300: #97acff; -$data-viz-blue-400: #748eff; -$data-viz-blue-500: #5772ff; -$data-viz-blue-600: #445cf2; -$data-viz-blue-700: #3547de; -$data-viz-blue-800: #232fcf; -$data-viz-blue-900: #1e23a8; -$data-viz-blue-950: #11118a; +$data-viz-blue-50: #e9ebff !default; +$data-viz-blue-100: #d2dcff !default; +$data-viz-blue-200: #b7c6ff !default; +$data-viz-blue-300: #97acff !default; +$data-viz-blue-400: #7992f5 !default; +$data-viz-blue-500: #617ae2 !default; +$data-viz-blue-600: #4e65cd !default; +$data-viz-blue-700: #3f51ae !default; +$data-viz-blue-800: #374291 !default; +$data-viz-blue-900: #303470 !default; +$data-viz-blue-950: #2a2b59 !default; $border-white-light: darken($white, $darken-border-factor) !default; $border-white-normal: darken($white-normal, $darken-border-factor) !default; @@ -380,7 +380,7 @@ $well-expand-item: #e8f2f7 !default; $well-inner-border: #eef0f2 !default; $well-light-border: #f1f1f1; $well-light-text-color: #5b6169; -$nav-active-bg: rgba($black, 0.08); +$nav-active-bg: $t-gray-a-08; /* * Text @@ -555,11 +555,13 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%); /* * Fonts */ -$monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', - 'Courier New', 'andale mono', 'lucida console', monospace; -$regular-font: -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'; +$monospace-font: var(--default-mono-font, 'Menlo'), 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', + 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; +$regular-font: var(--default-regular-font, -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'; +$gl-monospace-font: $monospace-font; +$gl-regular-font: $regular-font; /* * Dropdowns @@ -730,12 +732,6 @@ $commit-message-text-area-bg: rgba(0, 0, 0, 0); $commit-stat-summary-height: 36px; /* -* Common -*/ -$common-gray-light: #bbb; -$common-gray-dark: #444; - -/* * Files */ $logs-li-color: #888; @@ -784,16 +780,6 @@ $fade-mask-transition-curve: ease-in-out; $login-brand-holder-color: #888; /* -* Projects -*/ -$project-option-descr-color: #54565b; - -/* - * Monitor Charts - */ -$chart-tooltip-max-width: 512px; - -/* Stat Graph */ $stat-graph-common-bg: #f3f3f3; @@ -822,7 +808,6 @@ Pipeline Graph $ci-action-icon-size: 22px; $ci-action-icon-size-lg: 24px; $pipeline-dropdown-line-height: 20px; -$pipeline-dropdown-status-icon-size: 18px; $ci-action-dropdown-button-size: 24px; $ci-action-dropdown-svg-size: 12px; |