diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
-rw-r--r-- | app/assets/stylesheets/framework/badges.scss | 53 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/breadcrumbs.scss | 13 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/diffs.scss | 27 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 38 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/files.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/flash.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/header.scss | 124 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/labels.scss | 56 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/layout.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/sidebar.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/source_editor.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/super_sidebar.scss | 177 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/top_bar.scss | 20 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/typography.scss | 16 |
14 files changed, 368 insertions, 171 deletions
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; + } + } } /** |