diff options
Diffstat (limited to 'app/assets/stylesheets')
51 files changed, 596 insertions, 653 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index ce8ccb2bc08..1b99a27b12c 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -13,10 +13,10 @@ @import 'page_specific_files'; // Component specific styles, will be moved to gitlab-ui -@import 'components/**/*'; +@import 'components/index'; // Vendors specific styles -@import 'vendors/**/*'; +@import 'vendors/index'; // Styles for JS behaviors. @import 'behaviors'; @@ -27,7 +27,5 @@ // JH-only stylesheets @import 'application_jh'; -/* print styles */ -@media print { - @import 'print'; -} +// print styles +@import 'print'; diff --git a/app/assets/stylesheets/components/_index.scss b/app/assets/stylesheets/components/_index.scss new file mode 100644 index 00000000000..f53837b5671 --- /dev/null +++ b/app/assets/stylesheets/components/_index.scss @@ -0,0 +1,11 @@ +@import './avatar'; +@import './collapsible_card'; +@import './content_editor'; +@import './deployment_instance'; +@import './detail_page'; +@import './ref_selector'; +@import './related_items_list'; +@import './severity/icons'; +@import './shortcuts_help'; +@import './upload_dropzone/upload_dropzone'; +@import './whats_new'; diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index 97f2add4e77..c654eb16af5 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -35,6 +35,10 @@ background-color: transparent; } + th[align] *, td[align] * { + text-align: inherit; + } + td, th, li, @@ -149,6 +153,11 @@ padding: $gl-spacing-scale-1 $gl-spacing-scale-3 0 0; margin: 0; } + + &[data-inapplicable] * { + text-decoration: line-through; + color: $gl-text-color-disabled; + } } } diff --git a/app/assets/stylesheets/emoji_sprites.scss b/app/assets/stylesheets/emoji_sprites.scss index 5a5f39a4b77..10bf54b4ffb 100644 --- a/app/assets/stylesheets/emoji_sprites.scss +++ b/app/assets/stylesheets/emoji_sprites.scss @@ -7176,7 +7176,7 @@ } .emoji-icon { - background-image: image-url('emoji.png'); + background-image: url('emoji.png'); background-repeat: no-repeat; color: transparent; text-indent: -99em; @@ -7190,7 +7190,7 @@ only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { - background-image: image-url('emoji@2x.png'); + background-image: url('emoji@2x.png'); background-size: 860px 840px; } /* stylelint-enable media-feature-name-no-vendor-prefix */ diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss index 6886e751b72..f776328ebdf 100644 --- a/app/assets/stylesheets/fonts.scss +++ b/app/assets/stylesheets/fonts.scss @@ -11,7 +11,7 @@ Usage: font-style: normal; /* stylelint-disable-next-line property-no-unknown */ font-named-instance: 'Regular'; - src: font-url('gitlab-sans/GitLabSans.woff2') format('woff2'); + src: url('gitlab-sans/GitLabSans.woff2') format('woff2'); } @font-face { @@ -21,7 +21,7 @@ Usage: font-style: italic; /* stylelint-disable-next-line property-no-unknown */ font-named-instance: 'Regular'; - src: font-url('gitlab-sans/GitLabSans-Italic.woff2') format('woff2'); + src: url('gitlab-sans/GitLabSans-Italic.woff2') format('woff2'); } /* ------------------------------------------------------- @@ -35,7 +35,7 @@ Usage: font-weight: 100 900; font-display: swap; font-style: normal; - src: font-url('gitlab-mono/GitLabMono.woff2') format('woff2'); + src: url('gitlab-mono/GitLabMono.woff2') format('woff2'); } @font-face { @@ -43,7 +43,7 @@ Usage: font-weight: 100 900; font-display: swap; font-style: italic; - src: font-url('gitlab-mono/GitLabMono-Italic.woff2') format('woff2'); + src: url('gitlab-mono/GitLabMono-Italic.woff2') format('woff2'); } // This isn't the best solution, but we needed a quick fix diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 6f4f7a29334..dd4b6f51ebe 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -10,6 +10,7 @@ @import 'framework/animations'; @import 'framework/vue_transitions'; @import 'framework/blocks'; +@import 'framework/breadcrumbs'; @import 'framework/buttons'; @import 'framework/badges'; @import 'framework/calendar'; @@ -23,7 +24,9 @@ @import 'framework/gfm'; @import 'framework/kbd'; @import 'framework/header'; +@import 'framework/top_bar'; @import 'framework/highlight'; +@import 'framework/labels'; @import 'framework/lists'; @import 'framework/logo'; @import 'framework/markdown_area'; diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss index 3f1d742ca14..7c3684f7c2e 100644 --- a/app/assets/stylesheets/framework/badges.scss +++ b/app/assets/stylesheets/framework/badges.scss @@ -12,3 +12,56 @@ color: $green; } } + +// FF :simplified_badges +// +// Temporarily override badge styles +// globally +// +// Once verified we will update the +// badge component in GitLab UI +// refactor GitLab and remove this +// custom code +// +// see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307 +.ff-simplified-badges-enabled { + // These changes will be moved to + // GitLab UI's badge component + .gl-badge, + .gl-badge.sm, + .gl-badge.md, + .gl-badge.lg { + @include gl-font-sm; + padding-block: $gl-spacing-scale-1; + padding-inline: calc(#{$gl-spacing-scale-3} - 2px); + + > .gl-icon { + @include gl-ml-0; + } + } + + // These changes will be moved to + // GitLab UI's button component + .gl-button .gl-badge { + @include gl-py-0; + } + + // These changes will be moved to + // app/assets/stylesheets/framework/super_sidebar.scss + .super-sidebar-nav-item .gl-badge { + vertical-align: 2px; + } + + // These changes will be moved to + // GitLab UI's tab component + .gl-tab-nav-item .gl-badge { + margin-block: -2px; + } + + // Temporarily needed because of the + // speciality this FF adds + // the utility class gets overriden + .gl-badge.ci-icon { + @include gl-p-2; + } +} diff --git a/app/assets/stylesheets/framework/breadcrumbs.scss b/app/assets/stylesheets/framework/breadcrumbs.scss new file mode 100644 index 00000000000..b71382f5570 --- /dev/null +++ b/app/assets/stylesheets/framework/breadcrumbs.scss @@ -0,0 +1,13 @@ +.breadcrumbs { + flex: 1; + min-width: 0; + align-self: center; + color: $gl-text-color-secondary; + + .avatar-tile { + margin-right: 4px; + border: 1px solid $border-color; + border-radius: 50%; + vertical-align: sub; + } +} diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index b948a57ea33..497a8a08a6f 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -225,7 +225,7 @@ $diff-file-header: 41px; width: 15px; position: absolute; top: 0; - background: image-url('swipemode_sprites.gif') 0 3px no-repeat; + background: url('swipemode_sprites.gif') 0 3px no-repeat; } .bottom-handle { @@ -234,7 +234,7 @@ $diff-file-header: 41px; width: 15px; position: absolute; bottom: 0; - background: image-url('swipemode_sprites.gif') 0 -11px no-repeat; + background: url('swipemode_sprites.gif') 0 -11px no-repeat; } } } @@ -272,7 +272,7 @@ $diff-file-header: 41px; left: 12px; height: 10px; width: 276px; - background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x; + background: url('onion_skin_sprites.gif') -4px -20px repeat-x; } .dragger { @@ -282,7 +282,7 @@ $diff-file-header: 41px; top: 0; height: 14px; width: 14px; - background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x; + background: url('onion_skin_sprites.gif') 0 -34px repeat-x; cursor: pointer; } @@ -293,7 +293,7 @@ $diff-file-header: 41px; right: 0; height: 10px; width: 10px; - background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat; + background: url('onion_skin_sprites.gif') -2px 0 no-repeat; } .opaque { @@ -303,7 +303,7 @@ $diff-file-header: 41px; left: 0; height: 10px; width: 10px; - background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat; + background: url('onion_skin_sprites.gif') -2px -10px no-repeat; } } } @@ -770,12 +770,12 @@ table.code { .frame.click-to-comment, .btn-transparent.image-diff-overlay-add-comment { position: relative; - cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset, + cursor: url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; // Retina cursor - cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, - image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset, + cursor: image-set(url('illustrations/image_comment_light_cursor.svg') 1x, + url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; .comment-indicator { @@ -944,3 +944,12 @@ table.code { left: -2px !important; } } + +.diff-file.pinned-file .file-title { + background-color: $blue-50; + border-color: $blue-200; +} + +.diff-file.pinned-file .diff-content { + border-color: $blue-200; +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index e791a0dbbbd..2558ddec9b9 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -575,7 +575,7 @@ left: 1rem; width: 1rem; height: 1rem; - mask-image: asset_url('icons-stacked.svg#check'); + mask-image: url('icons-stacked.svg#check'); mask-repeat: no-repeat; mask-size: cover; mask-position: center center; @@ -806,28 +806,6 @@ } } -@include media-breakpoint-down(xs) { - .navbar-gitlab { - li.dropdown { - position: static; - } - } - - header.navbar-gitlab .dropdown { - .dropdown-menu { - width: 100%; - min-width: 100%; - } - } - - header.navbar-gitlab-new .header-content .dropdown { - .dropdown-menu { - left: 0; - min-width: 100%; - } - } -} - .dropdown-content-faded-mask { position: relative; @@ -959,3 +937,17 @@ width: 100%; } } + +.group-namespace-dropdown .gl-new-dropdown-custom-toggle { + display: flex; + flex: auto; + + .gl-button-text { + display: flex; + @include gl-w-full; + } +} + +.group-namespace-dropdown .gl-new-dropdown-item-text-wrapper { + word-break: break-word; +} diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 9cb264c992b..7dcde5f0b3c 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -420,7 +420,7 @@ span.idiff { @include gl-h-5; @include gl-float-left; background-color: $gray-400; - mask-image: asset_url('icons-stacked.svg#doc-versions'); + mask-image: url('icons-stacked.svg#doc-versions'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 6b4f1478978..56667c10752 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -96,14 +96,6 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); } } -@include media-breakpoint-down(sm) { - ul.notes { - .flash-container.timeline-content { - margin-left: 0; - } - } -} - .gl-browser-ie .flash-container { position: fixed; max-width: $limited-layout-width; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 23f40dfe4bf..84e69e40bc2 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -9,119 +9,6 @@ left: 0; right: 0; border-radius: 0; - - .close-icon { - display: none; - } - - .header-content { - width: 100%; - display: flex; - justify-content: space-between; - position: relative; - min-height: var(--header-height); - padding-left: 0; - - .title { - padding-right: 0; - color: currentColor; - display: flex; - position: relative; - margin: 0; - font-size: 18px; - vertical-align: top; - white-space: nowrap; - - img { - height: 24px; - - + .logo-text { - margin-left: 8px; - } - } - - &.wrap { - white-space: normal; - } - - &.initializing { - opacity: 0; - } - - a:not(.canary-badge) { - display: flex; - align-items: center; - padding: 2px 8px; - margin: 4px 2px 4px -8px; - border-radius: $border-radius-default; - - &:active, - &:focus { - @include gl-focus($focus-ring: $focus-ring-dark); - } - } - } - - .dropdown.open { - > a { - border-bottom-color: $white; - } - } - } - - .container-fluid { - padding: 0; - - .nav > li { - > a { - will-change: color; - margin: 4px 0; - padding: 6px 8px; - height: 32px; - } - } - } -} - -.top-bar-container { - min-height: $top-bar-height; -} - -.top-bar-fixed { - @include gl-inset-border-b-1-gray-100; - background-color: $body-bg; - left: var(--application-bar-left); - position: fixed; - right: var(--application-bar-right); - top: $calc-application-bars-height; - width: auto; - z-index: $top-bar-z-index; - - @media (prefers-reduced-motion: no-preference) { - transition: left $gl-transition-duration-medium, right $gl-transition-duration-medium; - } -} - -.breadcrumbs { - flex: 1; - min-width: 0; - align-self: center; - color: $gl-text-color-secondary; - - .avatar-tile { - margin-right: 4px; - border: 1px solid $border-color; - border-radius: 50%; - vertical-align: sub; - } -} - -.breadcrumb-item-text { - text-decoration: inherit; - - @include media-breakpoint-down(xs) { - @include str-truncated(128px); - } } .navbar-empty { @@ -173,17 +60,6 @@ @include media-breakpoint-down(xs) { margin-right: 3px; } } -.top-nav-menu-item { - &.active, - &:hover { - background-color: $nav-active-bg !important; - } - - .gl-icon { - color: inherit !important; - } -} - .header-logged-out { z-index: $header-zindex; min-height: var(--header-height); diff --git a/app/assets/stylesheets/framework/labels.scss b/app/assets/stylesheets/framework/labels.scss new file mode 100644 index 00000000000..1933af5151c --- /dev/null +++ b/app/assets/stylesheets/framework/labels.scss @@ -0,0 +1,56 @@ +// FF :simplified_labels +// +// Temporarily override label styles +// globally +// +// Once verified we will update the +// label component in GitLab UI +// refactor GitLab and remove this +// custom code +// +// see https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3307 +.ff-simplified-labels-enabled { + // These changes will be moved to + // GitLab UI's label component + .gl-label, + .gl-label-sm { + @include gl-vertical-align-bottom; + + &:focus:active { + @include gl-reset-color; + @include gl-shadow-none; + @include gl-outline-none; + } + + .gl-label-text, + .gl-label-text-scoped { + @include gl-font-sm; + padding-block: $gl-spacing-scale-1; + padding-inline: calc(#{$gl-spacing-scale-3} - 2px); + } + + > .gl-label-close.gl-button { + width: px-to-rem(14px); + height: px-to-rem(14px); + margin-left: calc(#{-$gl-spacing-scale-2} - 1px); + margin-right: calc(#{$gl-spacing-scale-2} - 1px); + } + } + + // These changes will be moved to + // app/assets/stylesheets/framework/sidebar.scss + .issuable-show-labels .gl-label { + margin-bottom: $gl-spacing-scale-2; + margin-right: $gl-spacing-scale-2; + } + + // These changes will be moved to + // app/assets/stylesheets/framework/typography.scss + .md p > code { + font-size: px-to-rem(13px); + } + + .md code { + @include gl-vertical-align-bottom; + } +} diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 7ec13c3d54c..4ef53c673f6 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -1,6 +1,4 @@ html { - overflow-y: scroll; - &.touch .tooltip { display: none !important; } diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index 0eecf7bddc1..04799a6b8f8 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -601,6 +601,7 @@ .gutter-toggle { width: 100%; height: $sidebar-toggle-height; + margin-top: 0; margin-left: 0; border-bottom: 1px solid $border-color; border-radius: 0; diff --git a/app/assets/stylesheets/framework/source_editor.scss b/app/assets/stylesheets/framework/source_editor.scss index a09ab7ed64c..2b597634519 100644 --- a/app/assets/stylesheets/framework/source_editor.scss +++ b/app/assets/stylesheets/framework/source_editor.scss @@ -78,7 +78,7 @@ @include gl-mr-2; @include gl-w-4; @include gl-h-4; - mask-image: asset_url('icons-stacked.svg#link'); + mask-image: url('icons-stacked.svg#link'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index 84f0612a7b4..5a9a739fb13 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -22,7 +22,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; .super-sidebar { --super-sidebar-bg: #{$gray-10}; --super-sidebar-border-color: #{$t-gray-a-08}; - --super-sidebar-primary: #{$blue-500}; + --super-sidebar-context-header-color: inherit; + --super-sidebar-active-indicator-color: #{$blue-500}; --super-sidebar-notification-dot: #{$blue-500}; --super-sidebar-user-bar-bg: #{$t-gray-a-04}; @@ -42,6 +43,8 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; --super-sidebar-nav-item-current-bg: #{$t-gray-a-08}; --super-sidebar-nav-item-icon-color: #{$gray-500}; + --super-sidebar-hr-mix-blend-mode: normal; + .gl-dark & { --super-sidebar-border-color: #{$t-white-a-08}; --super-sidebar-user-bar-bg: #{$t-white-a-04}; @@ -58,7 +61,148 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; --super-sidebar-nav-item-current-bg: #{$t-white-a-08}; --super-sidebar-nav-item-icon-color: #{$gray-600}; } +} + +@mixin super-sidebar-theme( + $background, + $user-bar-background, + $user-bar-button-color, + $user-bar-button-icon-color, + $context-header, + $active-indicator, + $notification-dot, +) { + .super-sidebar { + --super-sidebar-bg: #{$background}; + --super-sidebar-user-bar-bg: #{$user-bar-background}; + --super-sidebar-context-header-color: #{$context-header}; + --super-sidebar-active-indicator-color: #{$active-indicator}; + --super-sidebar-notification-dot: #{$notification-dot}; + + --super-sidebar-user-bar-button-bg: #{$t-white-a-16}; + --super-sidebar-user-bar-button-color: #{$user-bar-button-color}; + --super-sidebar-user-bar-button-border-color: #{$t-white-a-16}; + --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24}; + --super-sidebar-user-bar-button-hover-color: #{$white}; + --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36}; + + --super-sidebar-user-bar-button-icon-color: #{$user-bar-button-icon-color}; + --super-sidebar-user-bar-button-icon-hover-color: #{$user-bar-button-icon-color}; + --super-sidebar-user-bar-button-icon-mix-blend-mode: screen; + + --super-sidebar-hr-mix-blend-mode: multiply; + } +} + +.ui-blue { + @include super-sidebar-theme( + $background: $theme-blue-10, + $user-bar-background: $theme-blue-900, + $user-bar-button-color: $theme-blue-50, + $user-bar-button-icon-color: $theme-blue-100, + $context-header: $theme-blue-900, + $active-indicator: $theme-blue-900, + $notification-dot: $theme-blue-900, + ); +} + +.ui-gray { + @include super-sidebar-theme( + $background: $gray-10, + $user-bar-background: $gray-900, + $user-bar-button-color: $gray-50, + $user-bar-button-icon-color: $gray-100, + $context-header: $gray-900, + $active-indicator: $gray-900, + $notification-dot: $gray-900, + ); +} + +.ui-green { + @include super-sidebar-theme( + $background: $theme-green-10, + $user-bar-background: $theme-green-900, + $user-bar-button-color: $theme-green-50, + $user-bar-button-icon-color: $theme-green-100, + $context-header: $theme-green-900, + $active-indicator: $theme-green-900, + $notification-dot: $theme-green-900, + ); +} + +.ui-indigo { + @include super-sidebar-theme( + $background: $theme-indigo-10, + $user-bar-background: $theme-indigo-900, + $user-bar-button-color: $theme-indigo-50, + $user-bar-button-icon-color: $theme-indigo-100, + $context-header: $theme-indigo-900, + $active-indicator: $theme-indigo-900, + $notification-dot: $theme-indigo-900, + ); +} + +.ui-light-blue { + @include super-sidebar-theme( + $background: $theme-light-blue-10, + $user-bar-background: $theme-light-blue-700, + $user-bar-button-color: $theme-light-blue-50, + $user-bar-button-icon-color: $theme-light-blue-100, + $context-header: $theme-light-blue-900, + $active-indicator: $theme-light-blue-900, + $notification-dot: $theme-light-blue-900, + ); +} + +.ui-light-green { + @include super-sidebar-theme( + $background: $theme-green-10, + $user-bar-background: $theme-green-700, + $user-bar-button-color: $theme-green-50, + $user-bar-button-icon-color: $theme-green-100, + $context-header: $theme-green-900, + $active-indicator: $theme-green-900, + $notification-dot: $theme-green-900, + ); +} + +.ui-light-indigo { + @include super-sidebar-theme( + $background: $theme-indigo-10, + $user-bar-background: $theme-indigo-700, + $user-bar-button-color: $theme-indigo-50, + $user-bar-button-icon-color: $theme-indigo-100, + $context-header: $theme-indigo-900, + $active-indicator: $theme-indigo-900, + $notification-dot: $theme-indigo-900, + ); +} + +.ui-light-red { + @include super-sidebar-theme( + $background: $theme-light-red-10, + $user-bar-background: $theme-light-red-700, + $user-bar-button-color: $theme-light-red-50, + $user-bar-button-icon-color: $theme-light-red-100, + $context-header: $theme-light-red-900, + $active-indicator: $theme-light-red-900, + $notification-dot: $theme-light-red-900, + ); +} +.ui-red { + @include super-sidebar-theme( + $background: $theme-red-10, + $user-bar-background: $theme-red-900, + $user-bar-button-color: $theme-red-50, + $user-bar-button-icon-color: $theme-red-100, + $context-header: $theme-red-900, + $active-indicator: $theme-red-900, + $notification-dot: $theme-red-900, + ); +} + +.super-sidebar { display: flex; flex-direction: column; position: fixed; @@ -167,8 +311,12 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; color: var(--super-sidebar-nav-item-icon-color); } + hr { + mix-blend-mode: var(--super-sidebar-hr-mix-blend-mode); + } + .active-indicator { - background-color: var(--super-sidebar-primary); + background-color: var(--super-sidebar-active-indicator-color); } .btn-with-notification { @@ -200,6 +348,10 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } +.super-sidebar-context-header { + color: var(--super-sidebar-context-header-color); +} + .super-sidebar-overlay { display: none; } @@ -408,6 +560,13 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } } +.super-sidebar-empty-pinned-text { + mix-blend-mode: multiply; + + .gl-dark & { + mix-blend-mode: screen; + } +} // Styles for the ScrollScrim component. // Should eventually be moved to gitlab-ui. @@ -461,3 +620,17 @@ $scroll-scrim-height: 2.25rem; opacity: 1; } } + +// Tweaks to the styles for the ScrollScrim component above (line 418) +// are leaking into the collapsible list box dropdowns +// https://gitlab.com/gitlab-org/gitlab/-/issues/435538 + +.gl-new-dropdown { + .top-scrim-wrapper { + margin-bottom: 0; + } + + .bottom-scrim-wrapper { + margin-top: 0; + } +} diff --git a/app/assets/stylesheets/framework/top_bar.scss b/app/assets/stylesheets/framework/top_bar.scss new file mode 100644 index 00000000000..d4b36b82584 --- /dev/null +++ b/app/assets/stylesheets/framework/top_bar.scss @@ -0,0 +1,20 @@ +.top-bar-container { + min-height: $top-bar-height; +} + +.top-bar-fixed { + @include gl-inset-border-b-1-gray-100; + background-color: $body-bg; + position: fixed; + left: var(--application-bar-left); + right: var(--application-bar-right); + top: $calc-application-bars-height; + width: calc(100% - var(--application-bar-left)); + z-index: $top-bar-z-index; + + @media (prefers-reduced-motion: no-preference) { + transition: left $gl-transition-duration-medium, + right $gl-transition-duration-medium, + width $gl-transition-duration-medium; + } +} diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index eefdbda8f4f..15e794fc347 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -495,7 +495,7 @@ &::after { @include gl-dark-invert-keep-hue; - content: image-url('icon_anchor.svg'); + content: url('icon_anchor.svg'); visibility: hidden; } } @@ -602,6 +602,20 @@ } @include email-code-block; + + &.gl-text-secondary { + color: $gl-text-color-secondary; + + p, + h1, + h2, + h3, + h4, + h5, + table:not(.code) { + color: $gl-text-color-secondary; + } + } } /** diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 23fa1326881..3fd72904655 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -118,7 +118,7 @@ @include gl-w-5; @include gl-h-5; background-color: rgba($color, 0.3); - mask-image: asset_url('icons-stacked.svg##{$icon}'); + mask-image: url('icons-stacked.svg##{$icon}'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss index 8b353b42f58..05563f8e314 100644 --- a/app/assets/stylesheets/page_bundles/issuable.scss +++ b/app/assets/stylesheets/page_bundles/issuable.scss @@ -105,8 +105,3 @@ @include gl-font-weight-normal; } } - -[data-page="projects:issues:show"] .top-bar-fixed, -[data-page="groups:epics:show"] .top-bar-fixed { - width: 100%; -} diff --git a/app/assets/stylesheets/page_bundles/issuable_list.scss b/app/assets/stylesheets/page_bundles/issuable_list.scss index 1ca0c5e7ce6..9084bffa951 100644 --- a/app/assets/stylesheets/page_bundles/issuable_list.scss +++ b/app/assets/stylesheets/page_bundles/issuable_list.scss @@ -90,12 +90,19 @@ .issuable-list li, .issuable-info-container .controls { .avatar-counter { - display: inline-block; - vertical-align: middle; - min-width: 16px; + @include gl-pl-1 + @include gl-pr-2; + @include gl-h-5; + @include gl-min-w-5; line-height: 14px; - height: 16px; - padding-left: 2px; - padding-right: 2px; + } +} + +.merge-request { + .issuable-info-container .controls { + .avatar-counter { + @include gl-line-height-normal; + border: 0; + } } } diff --git a/app/assets/stylesheets/page_bundles/labels.scss b/app/assets/stylesheets/page_bundles/labels.scss index bc0bf4bc490..3204e678986 100644 --- a/app/assets/stylesheets/page_bundles/labels.scss +++ b/app/assets/stylesheets/page_bundles/labels.scss @@ -1,54 +1,5 @@ @import 'mixins_and_variables_and_functions'; -.suggest-colors { - padding-top: 3px; - - a { - border-radius: 4px; - width: 30px; - height: 30px; - display: inline-block; - margin-right: 10px; - margin-bottom: 10px; - text-decoration: none; - - &:focus, - &:focus:active { - position: relative; - z-index: 1; - @include gl-focus; - } - } - - &.suggest-colors-dropdown { - margin-top: 10px; - margin-bottom: 10px; - - a { - border-radius: 0; - width: (100% / 7); - margin-right: 0; - margin-bottom: -5px; - - &:first-of-type { - border-top-left-radius: $gl-border-radius-base; - } - - &:nth-of-type(7) { - border-top-right-radius: $gl-border-radius-base; - } - - &:nth-last-child(7) { - border-bottom-left-radius: $gl-border-radius-base; - } - - &:last-of-type { - border-bottom-right-radius: $gl-border-radius-base; - } - } - } -} - .labels-select-contents-create { .dropdown-input { margin-bottom: 4px; diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss index b63f199f7b9..11582ff72f0 100644 --- a/app/assets/stylesheets/page_bundles/login.scss +++ b/app/assets/stylesheets/page_bundles/login.scss @@ -16,43 +16,8 @@ top: 8px; } - .brand-holder { - font-size: 18px; - line-height: 1.5; - - p { - font-size: 16px; - color: $login-brand-holder-color; - } - - h3 { - font-size: 22px; - } - - img { - max-width: 100%; - margin-bottom: 30px; - } - - a { - font-weight: $gl-font-weight-bold; - } - } - - p { - font-size: 13px; - } - - .signin-text { - p { - margin-bottom: 0; - line-height: 1.5; - } - } - .borderless { - .login-box, - .omniauth-container { + .login-box { box-shadow: none; } } @@ -64,67 +29,6 @@ } } - .login-box, - .omniauth-container { - box-shadow: 0 0 0 1px $border-color; - border-radius: $border-radius; - - .login-heading h3 { - font-weight: $gl-font-weight-normal; - line-height: 1.5; - margin: 0 0 10px; - } - - .login-footer { - margin-top: 10px; - - p:last-child { - margin-bottom: 0; - } - } - - a.forgot { - float: right; - padding-top: 6px; - } - - .nav .active a { - background: transparent; - } - - // Styles the glowing border of focused input for username async validation - .login-body { - font-size: 13px; - - .username .validation-success { - color: $green-600; - } - - .username .validation-error { - color: $red-500; - } - - .terms .gl-form-checkbox { - @include gl-reset-font-size; - } - } - } - - .omniauth-container { - border-radius: $border-radius; - font-size: 13px; - - p { - margin: 0; - } - - form { - padding: 0; - border: 0; - background: none; - } - } - .new-session-tabs { &.nav-links-unboxed { border-color: transparent; @@ -143,30 +47,6 @@ border-top-right-radius: $border-radius-default; border-top-left-radius: $border-radius-default; - // Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long). - // These styles prevent this from breaking the layout, and only applied when providers are configured. - &.custom-provider-tabs { - flex-wrap: wrap; - - li { - min-width: 85px; - flex-basis: auto; - - // This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen. - // We are making somewhat of an assumption about the configuration here: that users do not have more than - // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any - // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border - // above one of the bottom row elements. If you know a better way, please implement it! - &:nth-child(n+5) { - border-top: 1px solid $border-color; - } - } - - a { - font-size: 16px; - } - } - li { flex: 1; text-align: center; @@ -230,11 +110,8 @@ height: 100%; body { - padding-top: 48px; // Remove this line when the restyle_login_page feature flag is deleted. Instead, add self-align `center` to container, and maybe a top margin. - &.with-system-header { padding-top: $system-header-height; - padding-top: calc(#{$system-header-height} + 48px); // Remove this line when the restyle_login_page feature flag is deleted } &.with-system-footer { diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index d112fd83ebf..b30ec4b4253 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -259,7 +259,7 @@ $tabs-holder-z-index: 250; position: sticky; top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); // height calc is fully delegated to the tree_list_height.vue component - height: 0; + height: 100%; min-height: 300px; .drag-handle { diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index 9bab5d65b59..c729bd7a380 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -130,6 +130,11 @@ .gl-pipeline-job-width { width: 100%; + max-width: 400px; + + .pipeline-graph-container & { + max-width: unset; + } } .gl-pipeline-job-width\! { @@ -318,3 +323,13 @@ background-color: $gray-100; } } + +.scan-reports-summary-grid { + grid-template-columns: 1fr 1fr max-content; +} + +@media (max-width: $breakpoint-sm) { + .scan-reports-summary-grid :nth-child(3n+1) { + grid-column: 1 / -1; + } +} diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss index 9a8eeb9c9d6..912f0145bf1 100644 --- a/app/assets/stylesheets/page_bundles/profile.scss +++ b/app/assets/stylesheets/page_bundles/profile.scss @@ -164,12 +164,6 @@ .user-profile { .profile-header { - margin: 0 $gl-padding; - - &.with-no-profile-tabs { - margin-bottom: $gl-padding-24; - } - .avatar-holder { margin: 0 auto 10px; } diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index c2ecf3702f9..bd24d991c8d 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -189,10 +189,6 @@ .project-page-sidebar-block { width: $right-sidebar-width - 1px; - - &:first-of-type { - padding-top: $gl-spacing-scale-1; - } } .nav { diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss index b145d046fa4..87d0d5b91d3 100644 --- a/app/assets/stylesheets/page_bundles/search.scss +++ b/app/assets/stylesheets/page_bundles/search.scss @@ -281,14 +281,6 @@ $language-filter-max-height: 20rem; margin-right: 5px; } } - - .dropdown-menu-toggle, - .gl-dropdown { - @include media-breakpoint-up(sm) { - width: 180px; - margin-top: 0; - } - } } .search-page-form { diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index ed2c7662a98..6d85a4da035 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -101,7 +101,7 @@ } .active > .wiki-list { - background-color: $gray-50; + background-color: var(--gray-50, $gray-50); } .wiki-list { @@ -110,7 +110,7 @@ @include gl-rounded-base; &:hover { - background: $gray-50; + background: var(--gray-50, $gray-50); .wiki-list-create-child-button { display: block; @@ -150,10 +150,6 @@ .wiki-sidebar-header { padding: 0 $gl-padding $gl-padding; - - .gutter-toggle { - margin-top: 0; - } } } diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index b9ab2450ff9..5b354f3575c 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -4,6 +4,7 @@ $work-item-field-inset-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-200, $gray-200) !important; $work-item-overview-right-sidebar-width: 23rem; $work-item-sticky-header-height: 52px; +$work-item-overview-gap-width: 2rem; .gl-token-selector-token-container { display: flex; @@ -146,7 +147,7 @@ $work-item-sticky-header-height: 52px; @include media-breakpoint-up(md) { display: grid; grid-template-columns: 1fr $work-item-overview-right-sidebar-width; - gap: 2rem; + gap: $work-item-overview-gap-width; } } @@ -216,6 +217,12 @@ $work-item-sticky-header-height: 52px; } } +.editable-wi-title { + width: 100%; + @include media-breakpoint-up(md) { + width: calc(100% - #{$work-item-overview-right-sidebar-width} - #{$work-item-overview-gap-width}); + } +} // Disclosure hierarchy component, used for Ancestors widget $disclosure-hierarchy-chevron-dimension: 1.2rem; diff --git a/app/assets/stylesheets/pages/colors.scss b/app/assets/stylesheets/pages/colors.scss index 85c1f7da07f..aeaf2d7c1b3 100644 --- a/app/assets/stylesheets/pages/colors.scss +++ b/app/assets/stylesheets/pages/colors.scss @@ -29,3 +29,52 @@ .danger-title { color: var(--red-500, $red-500); } + +.suggest-colors { + padding-top: 3px; + + a { + border-radius: 4px; + width: 30px; + height: 30px; + display: inline-block; + margin-right: 10px; + margin-bottom: 10px; + text-decoration: none; + + &:focus, + &:focus:active { + position: relative; + z-index: 1; + @include gl-focus; + } + } + + &.suggest-colors-dropdown { + margin-top: 10px; + margin-bottom: 10px; + + a { + border-radius: 0; + width: (100% / 7); + margin-right: 0; + margin-bottom: -5px; + + &:first-of-type { + border-top-left-radius: $gl-border-radius-base; + } + + &:nth-of-type(7) { + border-top-right-radius: $gl-border-radius-base; + } + + &:nth-last-child(7) { + border-bottom-left-radius: $gl-border-radius-base; + } + + &:last-of-type { + border-bottom-right-radius: $gl-border-radius-base; + } + } + } +} diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 9748983d1ae..f57a8519992 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -225,7 +225,7 @@ ul.related-merge-requests > li gl-emoji { &::after { @include gl-dark-invert-keep-hue; - content: image-url('icon_anchor.svg'); + content: url('icon_anchor.svg'); visibility: hidden; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 8792c7f9a72..da03726fa64 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -88,18 +88,18 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; margin-top: 5px; } - .timeline-content:not(.flash-container) { + .timeline-content { margin-left: 2.5rem; border: 1px solid $border-color; border-radius: $gl-border-radius-base; padding: $gl-padding-4 $gl-padding-8; } - &:not(.target) .timeline-content:not(.flash-container) { + &:not(.target) .timeline-content { background-color: $white; } - &.draft-note .timeline-content:not(.flash-container) { + &.draft-note .timeline-content { border: 0; } @@ -127,7 +127,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; margin-top: 5px; } - .timeline-content:not(.flash-container) { + .timeline-content { margin-left: 2.5rem; border-left: 1px solid $border-color; border-right: 1px solid $border-color; @@ -138,11 +138,11 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } - &:not(.target) .timeline-content:not(.flash-container) { + &:not(.target) .timeline-content { background-color: $white; } - &.draft-note .timeline-content:not(.flash-container) { + &.draft-note .timeline-content { margin-left: 0; border-top-left-radius: 0; border-top-right-radius: 0; @@ -154,7 +154,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; border-right: 1px solid $border-color; background-color: $white; - .timeline-content:not(.flash-container) { + .timeline-content { padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 18px; } @@ -419,7 +419,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .system-note-commit-list-toggler { color: $blue-600; - padding: 10px 0 0; cursor: pointer; position: relative; z-index: 2; @@ -966,7 +965,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; .unified-diff-components-diff-note-button { &::before { background-color: $blue-500; - mask-image: asset_url('icons-stacked.svg#comment'); + mask-image: url('icons-stacked.svg#comment'); mask-repeat: no-repeat; mask-size: cover; mask-position: center; @@ -1057,7 +1056,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; padding-left: 0; ul.notes li.note-wrapper { - .timeline-content:not(.flash-container) { + .timeline-content { padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding; } @@ -1106,7 +1105,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } .draft-note-component.draft-note.timeline-entry { - .timeline-content:not(.flash-container) { + .timeline-content { padding: $gl-padding-8 $gl-padding-8 $gl-padding-8 $gl-padding; } diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss index 315b9c829a7..d6fcfb3461d 100644 --- a/app/assets/stylesheets/print.scss +++ b/app/assets/stylesheets/print.scss @@ -4,97 +4,99 @@ @import '@gitlab/ui/src/scss/variables'; @import '@gitlab/ui/src/scss/utility-mixins/index'; -.md h1, -.md h2, -.md h3, -.md h4, -.md h5, -.md h6 { - margin-top: 17px; -} +@media print { + .md h1, + .md h2, + .md h3, + .md h4, + .md h5, + .md h6 { + margin-top: 17px; + } -.md h1 { - font-size: 30px; -} + .md h1 { + font-size: 30px; + } -.md h2 { - font-size: 22px; -} + .md h2 { + font-size: 22px; + } -.md h3 { - font-size: 18px; - font-weight: 600; -} + .md h3 { + font-size: 18px; + font-weight: 600; + } -.md { - print-color-adjust: exact; - -webkit-print-color-adjust: exact; + .md { + print-color-adjust: exact; + -webkit-print-color-adjust: exact; - // fix blockquote style in print - blockquote { - &::before { - position: absolute; - top: 0; - left: -4px; - content: ' '; - height: 100%; - width: 4px; - background-color: $gray-100; - } + // fix blockquote style in print + blockquote { + &::before { + position: absolute; + top: 0; + left: -4px; + content: ' '; + height: 100%; + width: 4px; + background-color: $gray-100; + } - position: relative; - font-size: inherit; - @include gl-text-gray-700; - @include gl-py-3; - @include gl-pl-6; - @include gl-my-3; - @include gl-mx-0; - @include gl-inset-border-l-4-gray-100; - margin-left: 4px; - border: 0 !important; + position: relative; + font-size: inherit; + @include gl-text-gray-700; + @include gl-py-3; + @include gl-pl-6; + @include gl-my-3; + @include gl-mx-0; + @include gl-inset-border-l-4-gray-100; + margin-left: 4px; + border: 0 !important; + } } -} -header, -nav, -.nav-sidebar, -.super-sidebar, -.profiler-results, -.tree-ref-holder, -.tree-holder .breadcrumb, -.nav, -.btn, -ul.notes-form, -.issuable-gutter-toggle, -.gutter-toggle, -.issuable-details .content-block-small, -.edit-link, -.note-action-button, -.right-sidebar, -.flash-container, -copy-code, -#js-peek { - display: none !important; -} + header, + nav, + .nav-sidebar, + .super-sidebar, + .profiler-results, + .tree-ref-holder, + .tree-holder .breadcrumb, + .nav, + .btn, + ul.notes-form, + .issuable-gutter-toggle, + .gutter-toggle, + .issuable-details .content-block-small, + .edit-link, + .note-action-button, + .right-sidebar, + .flash-container, + copy-code, + #js-peek { + display: none !important; + } -pre { - page-break-before: avoid; - page-break-inside: auto; -} + pre { + page-break-before: avoid; + page-break-inside: auto; + } -.page-gutter { - padding-top: 0; - padding-left: 0; -} + .page-gutter { + padding-top: 0; + padding-left: 0; + } -.right-sidebar { - top: 0; -} + .right-sidebar { + top: 0; + } -a[href]::after { - content: none !important; -} + a[href]::after { + content: none !important; + } -.with-performance-bar .layout-page { - padding-top: 0; + .with-performance-bar .layout-page { + padding-top: 0; + } } diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index 91b381462be..e1b14df683e 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -15,8 +15,7 @@ .gl-snippet-icon { display: inline-block; - /* stylelint-disable-next-line function-url-quotes */ - background: url(asset_path('ext_snippet_icons/ext_snippet_icons.png')) no-repeat; + background: url('ext_snippet_icons/ext_snippet_icons.png') no-repeat; overflow: hidden; text-align: left; width: 16px; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 3ab3e195b06..59c2391d2e9 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -1,7 +1,6 @@ @import './themes/dark'; @import '@gitlab/ui/dist/tokens/css/tokens.dark'; @import 'page_bundles/mixins_and_variables_and_functions'; -@import './themes/theme_helper'; :root { color-scheme: dark; diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss deleted file mode 100644 index 1a373fbfeda..00000000000 --- a/app/assets/stylesheets/themes/theme_blue.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-blue { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-blue-50, - $theme-blue-100, - $theme-blue-900, - $theme-blue-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss deleted file mode 100644 index 9a24142f286..00000000000 --- a/app/assets/stylesheets/themes/theme_gray.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-gray { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $gray-50, - $gray-100, - $gray-900, - $gray-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss deleted file mode 100644 index a766fdddc78..00000000000 --- a/app/assets/stylesheets/themes/theme_green.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-green { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-green-50, - $theme-green-100, - $theme-green-900, - $theme-green-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss deleted file mode 100644 index c94a32891f6..00000000000 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import '../page_bundles/mixins_and_variables_and_functions'; -/** - * Styles the GitLab application with a specific color theme - */ -@mixin gitlab-theme-super-sidebar( - $theme-color-lightest, - $theme-color-light, - $theme-color, - $theme-color-darkest, -) { - .super-sidebar { - --super-sidebar-bg: #{mix(white, $theme-color-lightest, 50%)}; - --super-sidebar-user-bar-bg: #{$theme-color}; - --super-sidebar-primary: #{$theme-color}; - --super-sidebar-notification-dot: #{$theme-color-darkest}; - - --super-sidebar-user-bar-button-bg: #{$t-white-a-16}; - --super-sidebar-user-bar-button-color: #{$theme-color-lightest}; - --super-sidebar-user-bar-button-border-color: #{$t-white-a-16}; - --super-sidebar-user-bar-button-hover-bg: #{$t-white-a-24}; - --super-sidebar-user-bar-button-hover-color: #{$white}; - --super-sidebar-user-bar-button-active-bg: #{$t-white-a-36}; - - --super-sidebar-user-bar-button-icon-color: #{$theme-color-light}; - --super-sidebar-user-bar-button-icon-hover-color: #{$theme-color-light}; - --super-sidebar-user-bar-button-icon-mix-blend-mode: screen; - - hr { - mix-blend-mode: multiply; - } - - .super-sidebar-context-header { - color: var(--super-sidebar-primary); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss deleted file mode 100644 index d0a8d597b59..00000000000 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-indigo { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-indigo-50, - $theme-indigo-100, - $theme-indigo-900, - $theme-indigo-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss deleted file mode 100644 index e712b6ae859..00000000000 --- a/app/assets/stylesheets/themes/theme_light_blue.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-blue { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-light-blue-50, - $theme-light-blue-100, - $theme-light-blue-700, - $theme-light-blue-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_gray.scss b/app/assets/stylesheets/themes/theme_light_gray.scss deleted file mode 100644 index 5cb9bee37b0..00000000000 --- a/app/assets/stylesheets/themes/theme_light_gray.scss +++ /dev/null @@ -1,2 +0,0 @@ -// "Light gray" is the default unthemed state of the sidebar. -// Nothing to do here. diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss deleted file mode 100644 index 44e19b02e36..00000000000 --- a/app/assets/stylesheets/themes/theme_light_green.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-green { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-green-50, - $theme-green-100, - $theme-green-700, - $theme-green-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss deleted file mode 100644 index ab299ca9d84..00000000000 --- a/app/assets/stylesheets/themes/theme_light_indigo.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-indigo { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-indigo-50, - $theme-indigo-100, - $theme-indigo-700, - $theme-indigo-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss deleted file mode 100644 index 499cdace772..00000000000 --- a/app/assets/stylesheets/themes/theme_light_red.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-light-red { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-light-red-50, - $theme-light-red-100, - $theme-light-red-700, - $theme-light-red-900, - ); - } - } -} diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss deleted file mode 100644 index 9a17f98aa80..00000000000 --- a/app/assets/stylesheets/themes/theme_red.scss +++ /dev/null @@ -1,14 +0,0 @@ -@import './theme_helper'; - -:root { - &.ui-red { - .page-with-super-sidebar { - @include gitlab-theme-super-sidebar( - $theme-red-50, - $theme-red-100, - $theme-red-900, - $theme-red-900, - ); - } - } -} diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 79ea8d3cc70..7ae17f4c191 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -136,3 +136,13 @@ .gl-last-of-type-border-b-0:last-of-type { @include gl-border-b-0; } + +.gl-md-h-9 { + @include gl-media-breakpoint-up(md) { + height: $gl-spacing-scale-9; + } +} + +.gl-pl-12 { + padding-left: $gl-spacing-scale-12; +} diff --git a/app/assets/stylesheets/vendors/_index.scss b/app/assets/stylesheets/vendors/_index.scss new file mode 100644 index 00000000000..e26ba23d1b9 --- /dev/null +++ b/app/assets/stylesheets/vendors/_index.scss @@ -0,0 +1 @@ +@import './atwho'; |