diff options
Diffstat (limited to 'app/assets/stylesheets')
48 files changed, 722 insertions, 680 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 004dc22c9b8..9e81e1d4771 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -4,7 +4,6 @@ @import './pages/commits'; @import './pages/deploy_keys'; @import './pages/detail_page'; -@import './pages/editor'; @import './pages/environment_logs'; @import './pages/events'; @import './pages/groups'; @@ -21,7 +20,6 @@ @import './pages/notifications'; @import './pages/pipelines'; @import './pages/profile'; -@import './pages/profiles/preferences'; @import './pages/projects'; @import './pages/prometheus'; @import './pages/registry'; diff --git a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss index f6be241d644..324c23022ca 100644 --- a/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss +++ b/app/assets/stylesheets/components/upload_dropzone/upload_dropzone.scss @@ -7,14 +7,14 @@ @return $string; } -@mixin dropzone-background($stroke-color, $stroke-width: 4, $stroke-linecap: 'butt') { - background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='#{encodecolor($stroke-linecap)}'/%3e%3c/svg%3e"); +@mixin dropzone-background($stroke-color, $stroke-width: 4) { + background-image: url("data:image/svg+xml, %3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='#{$border-radius-default}' ry='#{$border-radius-default}' stroke='#{encodecolor($stroke-color)}' stroke-width='#{$stroke-width}' stroke-dasharray='6%2c4' stroke-dashoffset='0' stroke-linecap='butt' /%3e %3c/svg%3e"); } .upload-dropzone-border { border: 0; - @include dropzone-background($gray-400, 2, 'round'); - border-radius: 8px; + @include dropzone-background($gray-400, 2); + border-radius: $border-radius-default; } .upload-dropzone-card { diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index ad0036df607..34c7ffa58fe 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -149,7 +149,7 @@ margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin; &:hover { - background-color: $indigo-900-alpha-008; + background-color: $nav-active-bg; } } @@ -275,7 +275,7 @@ &:not(.fly-out-top-item) { > a:not(.has-sub-items) { - background-color: $indigo-900-alpha-008; + background-color: $nav-active-bg; } } } diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 904d041fdc9..8d1fb5eb55f 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -34,19 +34,28 @@ @media (min-width: map-get($grid-breakpoints, md)) { // The `+11` is to ensure the file header border shows when scrolled - // the bottom of the compare-versions header and the top of the file header - $mr-file-header-top: calc(#{$header-height} + #{$mr-tabs-height}); + --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); + --top: var(--initial-top); position: -webkit-sticky; position: sticky; - top: $mr-file-header-top; + top: var(--top); z-index: 120; + &.is-sidebar-moved { + --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 28px}); + } + .with-system-header & { - top: calc(#{$mr-file-header-top} + #{$system-header-height}); + --top: calc(var(--initial-top) + #{$system-header-height}); } .with-system-header.with-performance-bar & { - top: calc(#{$mr-file-header-top} + #{$system-header-height} + #{$performance-bar-height}); + --top: calc(var(--initial-top) + #{$system-header-height} + #{$performance-bar-height}); + } + + .with-performance-bar & { + top: calc(var(--initial-top) + #{$performance-bar-height}); } &::before { @@ -60,10 +69,6 @@ pointer-events: none; } - .with-performance-bar & { - top: calc(#{$mr-file-header-top} + #{$performance-bar-height}); - } - &.is-commit { top: calc(#{$header-height} + #{$commit-stat-summary-height}); @@ -788,11 +793,13 @@ table.code { } .diff-comments-more-count, -.diff-notes-collapse { +.diff-notes-collapse, +.diff-codequality-collapse { @include avatar-counter(50%); } -.diff-notes-collapse { +.diff-notes-collapse, +.diff-codequality-collapse { border: 0; border-radius: 50%; padding: 0; @@ -977,7 +984,8 @@ table.code { position: relative; } - .diff-notes-collapse { + .diff-notes-collapse, + .diff-codequality-collapse { position: absolute; left: -12px; } @@ -1107,6 +1115,7 @@ table.code { } .diff-notes-collapse, + .diff-codequality-collapse, .note, .discussion-reply-holder { display: none; diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index b980d7fdaa7..07516275e58 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -39,8 +39,8 @@ .file-title { position: relative; - background-color: $gray-light; - border-bottom: 1px solid $border-color; + background-color: var(--gray-10, $gray-10); + border-bottom: 1px solid var(--border-color, $border-color); margin: 0; text-align: left; padding: 10px $gl-padding; @@ -471,11 +471,6 @@ span.idiff { } } -.jupyter-notebook-scrolled { - overflow-y: auto; - max-height: 20rem; -} - #js-openapi-viewer { pre.version, code { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 37f92d3cf3d..ed41d10f3b2 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -48,7 +48,7 @@ opacity: 0; } - a { + a:not(.canary-badge) { display: flex; align-items: center; padding: 2px 8px; @@ -61,10 +61,6 @@ } } - .canary-badge { - margin-left: -8px; - } - .project-item-select { right: auto; left: 0; @@ -564,15 +560,11 @@ } .frequent-items-list-item-container > a:hover { - background-color: $nav-active-bg; + background-color: $nav-active-bg !important; } } .top-nav-toggle { - .dropdown-icon { - @include gl-mr-3; - } - .dropdown-chevron { top: 0; } @@ -581,7 +573,7 @@ .top-nav-menu-item { &.active, &:hover { - background-color: $nav-active-bg; + background-color: $nav-active-bg !important; } .gl-icon { diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index ab426f388c6..a63ce66e681 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -31,8 +31,7 @@ width: 100%; padding-left: 10px; padding-right: 10px; - white-space: break-spaces; - word-break: break-word; + white-space: pre; &:empty::before { content: '\200b'; diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index fb05f8575ef..02b76b89482 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -7,9 +7,6 @@ html { } body { - // Improves readability for dyslexic users; supported only in Chrome/Safari so far - text-decoration-skip: ink; - &.navless { background-color: $white !important; } @@ -139,6 +136,13 @@ body { } } +.gl--flex-full { + @include gl-display-flex; + @include gl-align-items-stretch; + @include gl-overflow-hidden; +} + + .with-performance-bar .layout-page { margin-top: calc(#{$header-height} + #{$performance-bar-height}); } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 7522f791b8e..b623f18c4ae 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -104,7 +104,6 @@ li.md-header-toolbar { margin-left: auto; visibility: hidden; - padding-bottom: $gl-padding-8; &.active { visibility: visible; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 92ca8654287..7e0a601223d 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -13,9 +13,9 @@ a, button { - padding: $gl-padding-8; - font-size: 14px; - line-height: 28px; + padding: $gl-spacing-scale-5 $gl-spacing-scale-4; + font-size: $gl-font-size; + line-height: $gl-line-height-16; color: $gl-text-color-secondary; border: 0; white-space: nowrap; @@ -88,10 +88,6 @@ float: left; } - li a { - padding: 16px 15px 11px; - } - /* Small devices (phones, 768px and lower) */ @include media-breakpoint-down(sm) { width: 100%; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index ae0f18753ad..7878e08e549 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -208,7 +208,7 @@ position: relative; top: -3px; padding: $gl-padding-4 0; - background-color: $gray-light; + background-color: $body-bg; &.opened { color: $green-500; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 031f5dc45ca..e79fb843967 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -333,7 +333,7 @@ font-size: 13px; line-height: 1.6em; overflow-x: auto; - border-radius: 2px; + border-radius: $border-radius-default; // Multi-line code blocks should scroll horizontally code { @@ -427,10 +427,11 @@ padding-inline-start: 28px; margin-inline-start: 0 !important; + > p > input.task-list-item-checkbox, > input.task-list-item-checkbox { position: absolute; - inset-inline-start: 8px; - top: 5px; + inset-inline-start: $gl-padding-8; + inset-block-start: 5px; } } } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index e9ad930ef2b..bd32a817d5d 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -364,7 +364,7 @@ $well-expand-item: #e8f2f7 !default; $well-inner-border: #eef0f2 !default; $well-light-border: #f1f1f1; $well-light-text-color: #5b6169; -$nav-active-bg: var(--nav-active-bg, rgba($black, 0.08)) !important; +$nav-active-bg: rgba($black, 0.08); /* * Text diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 197073412e8..d45bc865da5 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -5,34 +5,6 @@ pointer-events: none; } -.dropdown-projects { - .dropdown-content { - max-height: 200px; - } -} - -.issue-board-dropdown-content { - margin: 0; - padding: $gl-padding-4 $gl-padding $gl-padding; - border-bottom: 0; - color: var(--gray-500, $gray-500); -} - -[data-page$='epic_boards:index'], -[data-page$='epic_boards:show'], -.issue-boards-page { - .content-wrapper { - padding-bottom: 0; - } -} - -[data-page$='epic_boards:index'], -[data-page$='epic_boards:show'] { - .filtered-search-wrapper { - display: none !important; - } -} - .boards-app { @include media-breakpoint-up(sm) { transition: width $gl-transition-duration-medium; @@ -87,33 +59,7 @@ width: 400px; } - .board-title-caret { - border-radius: $border-radius-default; - line-height: $gl-spacing-scale-5; - - &.btn svg { - top: 0; - } - - &:hover { - background-color: var(--gray-50, $gray-50); - transition: background-color 0.1s linear; - } - } - - &:not(.is-collapsed) { - .board-title-caret { - margin-right: $gl-padding-4; - } - } - &.is-collapsed { - width: 50px; - - .board-title-caret { - margin-top: 1px; - } - .board-title-text > span, .issue-count-badge > span { height: 16px; @@ -124,17 +70,11 @@ // rotated element has square dimensions so it won't overlap with its siblings. margin: calc(50% - 8px) 0; - transform: rotate(90deg); transform-origin: center; } } } -.board-inner { - font-size: $issue-boards-font-size; - background: var(--gray-50, $gray-50); -} - // to highlight columns we have animated pulse of box-shadow // we don't want to actually animate the box-shadow property // because that causes costly repaints. Instead we can add a @@ -169,103 +109,45 @@ } } -.board-title { - height: 3rem; - - .max-issue-size::before { - content: '/'; - } -} - -.board-list-component { - min-height: 0; // firefox fix -} - -.board-list { - overflow-y: auto; - overflow-x: hidden; -} - -.board-list-loading { - margin-top: 10px; - font-size: (26px / $issue-boards-font-size) * 1em; -} - .board-card { background: var(--gray-10, $white); box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1); - line-height: $gl-padding; - list-style: none; - position: relative; - - &:not(:last-child) { - margin-bottom: $gl-padding-8; - } - - &.is-active, - &.is-active .board-card-assignee:hover a { - background-color: var(--blue-50, $blue-50); - } - - &.multi-select { - border-color: var(--blue-200, $blue-200); - background-color: var(--blue-50, $blue-50); - } - - &.sortable-chosen { - box-shadow: 0 2px 4px 0 rgba($black, 0.16); - } - .gl-label { - margin-top: 4px; - margin-right: 4px; + &:last-child { + @include gl-mb-0; } - .confidential-icon, - .hidden-icon { - color: var(--orange-500, $orange-500); - cursor: help; + .move-to-position { + visibility: hidden; } - .issue-blocked-icon { - color: var(--red-500, $red-500); + &:hover .move-to-position { + visibility: visible; } - @include media-breakpoint-down(md) { - padding: $gl-padding-8; + @include media-breakpoint-down(sm) { + .move-to-position { + visibility: visible; + } } } .board-card-title { - @include overflow-break-word(); - font-size: 1em; + width: 95%; a { - color: var(--gray-900, $gray-900); - } - - @include media-breakpoint-down(md) { - font-size: $label-font-size; + @include media-breakpoint-down(md) { + font-size: $gl-font-size-sm; + } } } .board-card-assignee { - margin-top: -$gl-padding-4; - margin-bottom: -$gl-padding-4; - .avatar-counter { - vertical-align: middle; - line-height: $gl-padding-24; min-width: $gl-padding-24; height: $gl-padding-24; border-radius: $gl-padding-24; - background-color: var(--gray-400, $gray-400); font-size: $gl-font-size-xs; - cursor: help; - font-weight: $gl-font-weight-bold; - margin-left: -$gl-padding-4; - border: 0; - padding: 0 $gl-padding-4; @include media-breakpoint-down(md) { min-width: auto; @@ -275,12 +157,8 @@ } } - img { - vertical-align: top; - } - .user-avatar-link:not(:only-child) { - margin-left: -$gl-padding-4; + margin-left: -$gl-padding; &:nth-of-type(1) { z-index: 2; @@ -299,89 +177,26 @@ } @include media-breakpoint-down(md) { - margin-top: 0; - margin-bottom: 0; + margin-bottom: 0 !important; } } .board-card-number { - font-size: $gl-font-size-xs; - color: var(--gray-500, $gray-500); - - @include media-breakpoint-up(md) { - font-size: $label-font-size; + @include media-breakpoint-down(md) { + font-size: $gl-font-size-sm; } } .board-list-count { - padding: 10px 0; - color: var(--gray-500, $gray-500); font-size: 13px; } -.board-new-issue-form { - z-index: 4; - margin: 5px; -} - -.right-sidebar.boards-sidebar { - .gutter-toggle { - bottom: 15px; - width: 22px; - padding-left: $gl-padding-32; - - svg { - position: absolute; - top: 50%; - right: 0; - margin-top: (-11px / 2); - height: $gl-font-size-12; - width: $gl-font-size-12; - } - } - - .issuable-header-text { - @include overflow-break-word(); - padding-right: 35px; - } -} - -.right-sidebar.right-sidebar-expanded { - &.boards-sidebar-slide-enter-active, - &.boards-sidebar-slide-leave-active { - transition: width $gl-transition-duration-medium, padding $gl-transition-duration-medium; - } - - &.boards-sidebar-slide-enter, - &.boards-sidebar-slide-leave-active { - width: 0; - padding-left: 0; - padding-right: 0; - } -} - .board-card-info { - color: var(--gray-500, $gray-500); - white-space: nowrap; - margin-right: $gl-padding-8; - - &:not(.board-card-weight) { - cursor: help; - } - - &.board-card-weight { - color: var(--gray-500, $gray-500); - cursor: pointer; - - &:hover { - color: initial; - text-decoration: underline; - } + &.board-card-weight:hover { + color: initial; } .board-card-info-icon { - color: var(--gray-500, $gray-500); - margin-right: $gl-padding-4; vertical-align: text-top; } @@ -394,15 +209,6 @@ cursor: help; } -.board-labels-toggle-wrapper, -.board-swimlanes-toggle-wrapper { - /** - * Make the wrapper the same height as a button so it aligns properly when the - * filtered-search-box input element increases in size on Linux smaller breakpoints - */ - height: $input-height; -} - .issue-boards-content:not(.breadcrumbs) { isolation: isolate; } @@ -422,7 +228,6 @@ .boards-list { height: calc(100vh - #{$issue-boards-filter-height}); - overflow-x: scroll; } .boards-sidebar { @@ -433,15 +238,7 @@ .boards-sidebar { .sidebar-collapsed-icon { - display: none; - } - - .gl-drawer-header { - align-items: flex-start; - } - - .labels-select-wrapper.is-embedded .labels-select-wrapper.is-embedded { - width: auto; + @include gl-display-none; } .show.dropdown .dropdown-menu { @@ -449,10 +246,6 @@ } } -.board-header-collapsed-info-icon:hover { - color: var(--gray-900, $gray-900); -} - .board-card-skeleton { height: 110px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss index c177d0b74a2..b7b698b2128 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/page_bundles/editor.scss @@ -1,11 +1,13 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + .file-editor { .nav-links { - border-top: 1px solid $border-color; - border-right: 1px solid $border-color; - border-left: 1px solid $border-color; + border-top: 1px solid var(--border-color, $border-color); + border-right: 1px solid var(--border-color, $border-color); + border-left: 1px solid var(--border-color, $border-color); border-bottom: 0; border-radius: $border-radius-small $border-radius-small 0 0; - background: $gray-normal; + background: var(--gray-50, $gray-50); } #editor, @@ -23,10 +25,6 @@ } } - .ace_gutter-cell { - background-color: $gray-light; - } - .cancel-btn { color: $red-600; @@ -40,9 +38,9 @@ } .editor-ref { - background: $gray-light; + background: var(--gray-10, $gray-10); padding-right: $gl-padding; - border-right: 1px solid $border-color; + border-right: 1px solid var(--border-color, $border-color); display: block; float: left; margin-right: 10px; diff --git a/app/assets/stylesheets/page_bundles/group.scss b/app/assets/stylesheets/page_bundles/group.scss index 71dbb855103..5086cdbf9bc 100644 --- a/app/assets/stylesheets/page_bundles/group.scss +++ b/app/assets/stylesheets/page_bundles/group.scss @@ -1,35 +1,16 @@ @import 'page_bundles/mixins_and_variables_and_functions'; .group-home-panel { - margin-top: $gl-padding; - margin-bottom: $gl-padding; - .home-panel-avatar { width: $home-panel-title-row-height; height: $home-panel-title-row-height; - flex-shrink: 0; flex-basis: $home-panel-title-row-height; } .home-panel-title { - font-size: 20px; - line-height: $gl-line-height-24; - font-weight: bold; - .icon { vertical-align: -1px; } - - .home-panel-topic-list { - font-size: $gl-font-size; - font-weight: $gl-font-weight-normal; - - .icon { - position: relative; - top: 3px; - margin-right: $gl-padding-4; - } - } } .home-panel-title-row { @@ -52,7 +33,7 @@ line-height: $gl-font-size-large; } - .home-panel-topic-list, + .home-panel-metadata { font-size: $gl-font-size-small; } @@ -60,8 +41,6 @@ } .home-panel-metadata { - font-weight: normal; - font-size: 14px; line-height: $gl-btn-line-height; } diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss index c664e0a734e..26d694f7421 100644 --- a/app/assets/stylesheets/page_bundles/issues_show.scss +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -1,77 +1,24 @@ @import 'mixins_and_variables_and_functions'; .description { - ul, - ol { - /* We're changing list-style-position to inside because the default of - * outside doesn't move negative margin to the left of the bullet. */ - list-style-position: inside; - } - li { position: relative; - /* In the browser, the li element comes after (to the right of) the bullet point, so hovering - * over the left of the bullet point doesn't trigger a row hover. To trigger hovering on the - * left, we're applying negative margin here to shift the li element left. */ - margin-inline-start: -1rem; - padding-inline-start: 2.5rem; + margin-inline-start: 2.25rem; .drag-icon { position: absolute; inset-block-start: 0.3rem; - inset-inline-start: 1rem; - } - - /* The inside bullet aligns itself to the bottom, which we see when text to the right of - * a multi-line list item wraps. We fix this by aligning it to the top, and excluding - * other elements. Targeting ::marker doesn't seem to work, instead we exclude custom elements - * or anything with a class */ - > *:not(gl-emoji, code, [class]) { - vertical-align: top; - } - - /* The inside bullet is treated like an element inside the li element, so when we have a - * multi-paragraph list item, the text doesn't start on the right of the bullet because - * it is a block level p element. We make it inline to fix this. */ - > p:first-of-type { - display: inline-block; - max-width: calc(100% - 1.5rem); - } - - /* We fix the other paragraphs not indenting to the - * right of the bullet due to the inside bullet. */ - p ~ a, - p ~ blockquote, - p ~ code, - p ~ details, - p ~ dl, - p ~ h1, - p ~ h2, - p ~ h3, - p ~ h4, - p ~ h5, - p ~ h6, - p ~ hr, - p ~ ol, - p ~ p, - p ~ table:not(.code), /* We need :not(.code) to override typography.scss */ - p ~ ul, - p ~ .markdown-code-block { - margin-inline-start: 1rem; + inset-inline-start: -2.3rem; + padding-inline-end: 1rem; + width: 2rem; } } - ul.task-list { - > li.task-list-item { - /* We're using !important to override the same selector in typography.scss */ - margin-inline-start: -1rem !important; - padding-inline-start: 2.5rem; + ul.task-list > li.task-list-item { + margin-inline-start: 0.5rem !important; /* Override typography.scss */ - > input.task-list-item-checkbox { - position: static; - vertical-align: middle; - margin-block-start: -2px; - } + > .drag-icon { + inset-inline-start: -0.6rem; } } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index b7a75884425..463c8f74342 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -41,17 +41,21 @@ $tabs-holder-z-index: 250; // If they don't match, the file tree and the diff files stick // to the top at different heights, which is a bad-looking defect $diff-file-header-top: 11px; - $top-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); + --initial-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); + --top-pos: var(--initial-pos); position: -webkit-sticky; position: sticky; - // Unitless zero values are not allowed in calculations - top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); - max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); + top: var(--top-pos); + max-height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); .drag-handle { bottom: 16px; } + + &.is-sidebar-moved { + --top-pos: calc(var(--initial-pos) + 26px); + } } .tree-list-holder { @@ -196,12 +200,8 @@ $tabs-holder-z-index: 250; background-color: var(--gray-50, $gray-50); } -.mr-conflict-loader { - max-width: 334px; - - > svg { - vertical-align: middle; - } +.mr-widget-body-loading svg { + vertical-align: middle; } .mr-info-list { @@ -398,12 +398,6 @@ $tabs-holder-z-index: 250; display: block; } - .mr-widget-pipeline-graph { - .dropdown-menu { - z-index: $zindex-dropdown-menu; - } - } - .normal { flex: 1; flex-basis: auto; @@ -440,7 +434,7 @@ $tabs-holder-z-index: 250; .mr-widget-body { &:not(.mr-widget-body-line-height-1) { - line-height: 28px; + line-height: 24px; } @include clearfix; @@ -475,12 +469,6 @@ $tabs-holder-z-index: 250; margin: 0 0 0 10px; } - .bold { - font-weight: $gl-font-weight-bold; - color: var(--gray-600, $gray-600); - margin-left: 10px; - } - .state-label { font-weight: $gl-font-weight-bold; padding-right: 10px; @@ -490,11 +478,6 @@ $tabs-holder-z-index: 250; color: var(--red-500, $red-500); } - .spacing, - .bold { - vertical-align: middle; - } - .dropdown-menu { li a { padding: 5px; @@ -621,8 +604,8 @@ $tabs-holder-z-index: 250; .mr-widget-extension-icon::before { @include gl-content-empty; @include gl-absolute; - @include gl-left-0; - @include gl-top-0; + @include gl-left-50p; + @include gl-top-half; @include gl-opacity-3; @include gl-border-solid; @include gl-border-4; @@ -630,24 +613,20 @@ $tabs-holder-z-index: 250; width: 24px; height: 24px; + transform: translate(-50%, -50%); } .mr-widget-extension-icon::after { @include gl-content-empty; @include gl-absolute; @include gl-rounded-full; + @include gl-left-50p; + @include gl-top-half; - top: 4px; - left: 4px; width: 16px; height: 16px; - border: 4px solid currentColor; -} - -.mr-widget-extension-icon svg { - position: relative; - top: 2px; - left: 2px; + border: 4px solid; + transform: translate(-50%, -50%); } .mr-widget-heading { @@ -777,6 +756,7 @@ $tabs-holder-z-index: 250; &.show .dropdown-menu { width: calc(100vw - 20px); max-width: 650px; + max-height: calc(100vh - 50px); .gl-new-dropdown-inner { max-height: none !important; @@ -818,8 +798,7 @@ $tabs-holder-z-index: 250; } .md-preview-holder { - max-height: 180px; - height: 180px; + max-height: 172px; } } @@ -840,3 +819,29 @@ $tabs-holder-z-index: 250; } } } + +.merge-request-sticky-header { + z-index: 204; + box-shadow: 0 1px 2px $issue-boards-card-shadow; + --width: calc(100% - #{$contextual-sidebar-width}); + + @include media-breakpoint-down(lg) { + --width: calc(100% - #{$contextual-sidebar-collapsed-width}); + } +} + +.detail-page-header-actions { + .gl-toggle { + @include gl-ml-auto; + } +} + +.page-with-icon-sidebar .issue-sticky-header { + --width: calc(100% - #{$contextual-sidebar-collapsed-width}); +} + +.merge-request-notification-toggle { + .gl-toggle-label { + @include gl-font-weight-normal; + } +} diff --git a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss index 412971253ca..0c73bece035 100644 --- a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss +++ b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss @@ -28,13 +28,6 @@ .pipeline-schedule-table-row { .branch-name-cell { max-width: 300px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .next-run-cell { - color: var(--gray-500, $gray-500); } a { @@ -50,7 +43,6 @@ .bordered-box.content-block { border: 1px solid var(--border-color, $border-color); background-color: transparent; - padding: $gl-spacing-scale-5; } } diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/page_bundles/profiles/preferences.scss index c7d7aacceec..c9c78a70163 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/page_bundles/profiles/preferences.scss @@ -1,3 +1,5 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + .application-theme { $ui-gray-bg: #303030; $ui-light-gray-bg: #f0f0f0; diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss index d0748779f47..03c9fc7508d 100644 --- a/app/assets/stylesheets/page_bundles/reports.scss +++ b/app/assets/stylesheets/page_bundles/reports.scss @@ -16,6 +16,10 @@ line-height: 20px; } +.report-block-child-icon { + height: 20px; +} + .report-block-list { list-style: none; padding: 0 1px; diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss index e7813e3b56e..3eacf98688e 100644 --- a/app/assets/stylesheets/page_bundles/todos.scss +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -9,12 +9,6 @@ // workaround because we cannot use border-collapse border-top: 1px solid transparent; - &:hover { - background-color: var(--blue-50, $blue-50); - border-color: var(--blue-200, $blue-200); - cursor: pointer; - } - // overwrite border style of .content-list &:last-child { border-bottom: 1px solid transparent; @@ -26,8 +20,6 @@ &.todo-pending.done-reversible { &:hover { - border-color: var(--border-color, $border-color); - background-color: var(--gray-50, $gray-50); border-top: 1px solid transparent; .todo-avatar, @@ -40,20 +32,12 @@ .todo-item { opacity: 0.2; } - - .btn { - background-color: var(--gray-50, $gray-50); - } } } .todo-item { @include transition(opacity); - .status-box { - line-height: inherit; - } - .todo-label, .todo-project { a { @@ -66,22 +50,6 @@ color: var(--gl-text-color, $gl-text-color); } - pre { - border: 0; - background: var(--gray-50, $gray-50); - border-radius: 0; - color: var(--gray-500, $gray-500); - margin: 0 20px; - overflow: hidden; - } - - .note-image-attach { - margin-top: 4px; - margin-left: 0; - max-width: 200px; - float: none; - } - .gl-label-scoped { --label-inset-border: inset 0 0 0 1px currentColor; } diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index 9220fa82b46..d0fc011dde7 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -7,7 +7,7 @@ #weight-widget-input:not(:hover, :focus), #weight-widget-input[readonly] { - box-shadow: inset 0 0 0 $gl-border-size-1 var(--white, $white); + box-shadow: none; } #weight-widget-input[readonly] { @@ -19,8 +19,38 @@ display: none; } - .assignees-selector:hover .assign-myself { - display: block; + @include media-breakpoint-up(sm) { + .assignees-selector:hover .assign-myself { + display: block; + } + } +} + +.work-item-due-date { + .gl-datepicker-input.gl-form-input.form-control { + width: 10rem; + + &:not(:focus, :hover) { + box-shadow: none; + + ~ .gl-datepicker-actions { + display: none; + } + } + + &[disabled] { + background-color: var(--white, $white); + box-shadow: none; + + ~ .gl-datepicker-actions { + display: none; + } + } + } + + .gl-datepicker-actions:focus, + .gl-datepicker-actions:hover { + display: flex !important; } } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index c96d8ecc782..19318d87731 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -33,12 +33,6 @@ height: 22px; } } - - .mr-widget-pipeline-graph { - .dropdown-menu { - margin-top: 11px; - } - } } .branch-info .commit-icon { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 69797c6b303..85205f4d5ac 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -297,7 +297,7 @@ padding: 0; .issuable-context-form { - --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); + --initial-top: calc(#{$header-height} + 76px); --top: var(--initial-top); @include gl-sticky; @@ -613,7 +613,7 @@ } .participants-author { - &:nth-of-type(7n) { + &:nth-of-type(8n) { padding-right: 0; } @@ -962,40 +962,26 @@ border-left: 2px solid $gray-50; position: absolute; left: 39px; - height: 80%; + height: calc(100% + #{$gl-spacing-scale-5}); + top: -#{$gl-spacing-scale-5}; } - &:first-child::before, - &:last-child::after { + &:first-child::before { content: none; } &:first-child { &::after { - top: 50%; + top: $gl-spacing-scale-5; + height: calc(100% + #{$gl-spacing-scale-5}); } } - &:last-child { + &:last-child, + &.create-timeline-event { &::before { - bottom: 50%; - } - } - - &:not(:first-child):not(:last-child) { - &::before { - top: -10%; - } - - &::after { - bottom: -10%; - } - } - - &.timeline-event-note-form { - &::before { - top: -15% !important; // Override default positioning - height: 20%; + top: - #{$gl-spacing-scale-5} !important; // Override default positioning + @include gl-h-8; } &::after { @@ -1007,3 +993,22 @@ .timeline-event-note-form { padding-left: 20px; } + +.timeline-entry:not(:last-child) { + .timeline-event-border { + @include gl-pb-5; + @include gl-border-gray-50; + @include gl-border-1; + @include gl-border-b-solid; + } +} + +.timeline-group:last-child { + .timeline-entry:last-child, + .create-timeline-event { + .timeline-event-bottom-border { + @include gl-border-b; + @include gl-pt-5; + } + } +} diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index a151c28fe93..843daec8cda 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -259,13 +259,15 @@ ul.related-merge-requests > li gl-emoji { } .issue-sticky-header { + --width: 100%; + @include gl-left-0; - @include gl-w-full; + width: var(--width); top: $header-height; // collapsed right sidebar @include media-breakpoint-up(sm) { - width: calc(100% - #{$gutter-collapsed-width}); + --width: calc(100% - #{$gutter-collapsed-width}); } } @@ -283,12 +285,12 @@ ul.related-merge-requests > li gl-emoji { // collapsed left sidebar + collapsed right sidebar .issue-sticky-header { left: $contextual-sidebar-collapsed-width; - width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); + --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); } // collapsed left sidebar + expanded right sidebar .right-sidebar-expanded .issue-sticky-header { - width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); + --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); } } @@ -296,23 +298,23 @@ ul.related-merge-requests > li gl-emoji { // expanded left sidebar + collapsed right sidebar .issue-sticky-header { left: $contextual-sidebar-width; - width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width}); + --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width}); } // collapsed left sidebar + collapsed right sidebar .page-with-icon-sidebar .issue-sticky-header { left: $contextual-sidebar-collapsed-width; - width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); + --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); } // expanded left sidebar + expanded right sidebar .right-sidebar-expanded .issue-sticky-header { - width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width}); + --width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width}); } // collapsed left sidebar + expanded right sidebar .right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header { - width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); + --width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); } } diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 1beb9f05b6c..d4ad6da7f4d 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -1,3 +1,4 @@ +@import 'framework/variables'; /* Login Page */ .login-page { .container { @@ -41,6 +42,13 @@ font-size: 13px; } + .signin-text { + p { + margin-bottom: 0; + line-height: 1.5; + } + } + .borderless { .login-box, .omniauth-container { @@ -118,6 +126,18 @@ } .new-session-tabs { + &.nav-links-unboxed { + border-color: transparent; + box-shadow: none; + + .nav-item { + border-left: 0; + border-right: 0; + border-bottom: 1px solid $gray-100; + background-color: transparent; + } + } + display: flex; box-shadow: 0 0 0 1px $border-color; border-top-right-radius: $border-radius-default; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 9692becef4f..cb77c31d59a 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -48,7 +48,7 @@ .common-note-form { .md-area { - padding: $gl-padding-8 $gl-padding; + padding: 0 $gl-padding; border: 1px solid $border-color; border-radius: $border-radius-base; transition: border-color ease-in-out 0.15s, @@ -305,7 +305,6 @@ table { } .comment-toolbar { - padding-top: $gl-padding-top; color: $gl-text-color-secondary; border-top: 1px solid $border-color; } @@ -336,8 +335,7 @@ table { .toolbar-text { font-size: 14px; - line-height: 16px; - margin-top: 2px; + line-height: $gl-spacing-scale-7; @include media-breakpoint-up(md) { float: left; diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index db07f16dfd0..fc1b78bf730 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -164,7 +164,7 @@ $system-note-svg-size: 16px; } .note-body { - padding: $gl-padding-4; + padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding-8; overflow-x: auto; overflow-y: hidden; @@ -305,7 +305,7 @@ $system-note-svg-size: 16px; height: $system-note-icon-size; border: 1px solid $gray-10; border-radius: $system-note-icon-size; - margin: -6px 20px 0 0; + margin: -6px 0 0; svg { width: $system-note-svg-size; @@ -334,10 +334,14 @@ $system-note-svg-size: 16px; border-radius: 0; @media (min-width: map-get($grid-breakpoints, md)) { - top: calc(#{$mr-tabs-height} + #{$header-height}); + --initial-top: calc(#{$header-height} + #{$mr-tabs-height}); + + &.is-sidebar-moved { + --initial-top: calc(#{$header-height} + #{$mr-tabs-height + 28px}); + } .with-performance-bar & { - top: 123px; + --top: 123px; } } @@ -551,6 +555,7 @@ $system-note-svg-size: 16px; .note-header { display: flex; justify-content: space-between; + align-items: center; flex-wrap: wrap; > .note-header-info, @@ -581,7 +586,7 @@ $system-note-svg-size: 16px; .note-header-info { min-width: 0; - padding-left: $gl-padding-4; + padding-left: $gl-padding-8; &.discussion { padding-bottom: 0; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 6c909b8d9fa..e8f71c8a21c 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -49,7 +49,7 @@ input[type='checkbox']:hover { } &.header-search-is-active { - .navbar-collapse { + .global-search-container { flex-grow: 1; } @@ -59,12 +59,6 @@ input[type='checkbox']:hover { overflow: hidden; } } - - @include media-breakpoint-up(xl) { - .navbar-nav { - padding-left: 1rem; - } - } } } @@ -383,6 +377,10 @@ input[type='checkbox']:hover { .line_holder { pre { padding: 0; // This overrides the existing style that will add space between each line. + .line { + @include gl-word-break-word; + white-space: break-spaces; + } } svg { diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 935595d1b3b..56acf6de828 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -349,3 +349,9 @@ } } } + +.gl-md-flex-wrap-nowrap.gl-md-flex-wrap-nowrap { + @include gl-media-breakpoint-up(md) { + @include gl-flex-wrap-nowrap; + } +} diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index ffe4d5dde9d..0450b3d9a44 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -10,7 +10,6 @@ body.gl-dark { --gray-50: #303030; --gray-100: #404040; --gray-200: #525252; - --gray-600: #bfbfbf; --gray-700: #dbdbdb; --gray-900: #fafafa; --green-100: #0d532a; @@ -18,7 +17,6 @@ body.gl-dark { --gl-text-color: #fafafa; --border-color: #4f4f4f; --black: #fff; - --nav-active-bg: rgba(255, 255, 255, 0.08); } :root { --white: #333; @@ -332,9 +330,6 @@ kbd kbd { color: #fff; background-color: #c17d10; } -.bg-transparent { - background-color: transparent !important; -} .rounded-circle { border-radius: 50% !important; } @@ -459,7 +454,7 @@ a.gl-badge.badge-warning:active { .gl-form-input:disabled, .gl-form-input.form-control:disabled { cursor: not-allowed; - color: #868686; + color: #999; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { @@ -594,9 +589,6 @@ svg { html { overflow-y: scroll; } -body { - text-decoration-skip: ink; -} .btn { border-radius: 4px; font-size: 0.875rem; @@ -815,20 +807,17 @@ kbd { .navbar-gitlab .header-content .title img { height: 24px; } -.navbar-gitlab .header-content .title a { +.navbar-gitlab .header-content .title a:not(.canary-badge) { display: flex; align-items: center; padding: 2px 8px; margin: 4px 2px 4px -8px; border-radius: 4px; } -.navbar-gitlab .header-content .title a:active { +.navbar-gitlab .header-content .title a:not(.canary-badge):active { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 3px #1068bf; outline: none; } -.navbar-gitlab .header-content .title .canary-badge { - margin-left: -8px; -} .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } @@ -1012,9 +1001,6 @@ kbd { visibility: hidden; top: 3px; } -.top-nav-toggle .dropdown-icon { - margin-right: 0.5rem; -} .tanuki-logo .tanuki { fill: #e24329; } @@ -1137,7 +1123,7 @@ kbd { font-weight: 600; } .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { - background-color: rgba(41, 41, 97, 0.08); + background-color: rgba(255, 255, 255, 0.08); } .nav-sidebar ul { padding-left: 0; @@ -1790,7 +1776,6 @@ body.gl-dark { --white: #333; --black: #fff; --svg-status-bg: #333; - --nav-active-bg: rgba(255, 255, 255, 0.08); } .nav-sidebar, .toggle-sidebar-button, @@ -1802,15 +1787,6 @@ body.gl-dark { .avatar { background: rgba(255, 255, 255, 0.04); } -.nav-sidebar li a { - color: var(--gray-600); -} -.nav-sidebar li.active { - box-shadow: none; -} -.nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { - background-color: var(--nav-active-bg); -} body.gl-dark { --gl-theme-accent: #868686; } @@ -2038,7 +2014,6 @@ body.gl-dark { --white: #333; --black: #fff; --svg-status-bg: #333; - --nav-active-bg: rgba(255, 255, 255, 0.08); } .tab-width-8 { tab-size: 8; @@ -2113,6 +2088,12 @@ body.gl-dark { .gl-pt-0 { padding-top: 0; } +.gl-mr-auto { + margin-right: auto; +} +.gl-mr-3 { + margin-right: 0.5rem; +} .gl-ml-n2 { margin-left: -0.25rem; } diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 00ca98bfd27..356fb58b4c8 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -311,9 +311,6 @@ kbd kbd { color: #fff; background-color: #ab6100; } -.bg-transparent { - background-color: transparent !important; -} .rounded-circle { border-radius: 50% !important; } @@ -438,7 +435,7 @@ a.gl-badge.badge-warning:active { .gl-form-input:disabled, .gl-form-input.form-control:disabled { cursor: not-allowed; - color: #868686; + color: #666; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { @@ -573,9 +570,6 @@ svg { html { overflow-y: scroll; } -body { - text-decoration-skip: ink; -} .btn { border-radius: 4px; font-size: 0.875rem; @@ -794,20 +788,17 @@ kbd { .navbar-gitlab .header-content .title img { height: 24px; } -.navbar-gitlab .header-content .title a { +.navbar-gitlab .header-content .title a:not(.canary-badge) { display: flex; align-items: center; padding: 2px 8px; margin: 4px 2px 4px -8px; border-radius: 4px; } -.navbar-gitlab .header-content .title a:active { +.navbar-gitlab .header-content .title a:not(.canary-badge):active { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 3px #63a6e9; outline: none; } -.navbar-gitlab .header-content .title .canary-badge { - margin-left: -8px; -} .navbar-gitlab .header-content .navbar-collapse > ul.nav > li:not(.d-none) { margin: 0 2px; } @@ -991,9 +982,6 @@ kbd { visibility: hidden; top: 3px; } -.top-nav-toggle .dropdown-icon { - margin-right: 0.5rem; -} .tanuki-logo .tanuki { fill: #e24329; } @@ -1116,7 +1104,7 @@ kbd { font-weight: 600; } .nav-sidebar li.active:not(.fly-out-top-item) > a:not(.has-sub-items) { - background-color: rgba(41, 41, 97, 0.08); + background-color: rgba(0, 0, 0, 0.08); } .nav-sidebar ul { padding-left: 0; @@ -1751,6 +1739,12 @@ svg.s16 { .gl-pt-0 { padding-top: 0; } +.gl-mr-auto { + margin-right: auto; +} +.gl-mr-3 { + margin-right: 0.5rem; +} .gl-ml-n2 { margin-left: -0.25rem; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index c0e2d8d44d4..edc579f48f6 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -11,6 +11,9 @@ html { font-family: sans-serif; line-height: 1.15; } +header { + display: block; +} body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, @@ -28,7 +31,8 @@ hr { height: 0; overflow: visible; } -h1 { +h1, +h3 { margin-top: 0; margin-bottom: 0.25rem; } @@ -49,26 +53,49 @@ img { vertical-align: middle; border-style: none; } +svg { + overflow: hidden; + vertical-align: middle; +} label { display: inline-block; margin-bottom: 0.5rem; } -input { +button { + border-radius: 0; +} +input, +button { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; } +button, input { overflow: visible; } +button { + text-transform: none; +} +[role="button"] { + cursor: pointer; +} +button:not(:disabled), +[type="button"]:not(:disabled), [type="submit"]:not(:disabled) { cursor: pointer; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { padding: 0; border-style: none; } +input[type="checkbox"] { + box-sizing: border-box; + padding: 0; +} fieldset { min-width: 0; padding: 0; @@ -78,7 +105,8 @@ fieldset { [hidden] { display: none !important; } -h1 { +h1, +h3 { margin-bottom: 0.25rem; font-weight: 600; line-height: 1.2; @@ -87,6 +115,9 @@ h1 { h1 { font-size: 2.1875rem; } +h3 { + font-size: 1.53125rem; +} hr { margin-top: 0.5rem; margin-bottom: 0.5rem; @@ -120,23 +151,42 @@ hr { max-width: 1140px; } } -.col-sm-12, -.col { +.row { + display: flex; + flex-wrap: wrap; + margin-right: -15px; + margin-left: -15px; +} +.col-md-6, +.col-sm-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } -.col { - flex-basis: 0; - flex-grow: 1; - max-width: 100%; +.order-1 { + order: 1; +} +.order-12 { + order: 12; } @media (min-width: 576px) { .col-sm-12 { flex: 0 0 100%; max-width: 100%; } + .order-sm-1 { + order: 1; + } + .order-sm-12 { + order: 12; + } +} +@media (min-width: 768px) { + .col-md-6 { + flex: 0 0 50%; + max-width: 50%; + } } .form-control { display: block; @@ -169,16 +219,6 @@ hr { .form-group { margin-bottom: 1rem; } -.form-row { - display: flex; - flex-wrap: wrap; - margin-right: -5px; - margin-left: -5px; -} -.form-row > .col { - padding-right: 5px; - padding-left: 5px; -} .btn { display: inline-block; font-weight: 400; @@ -204,6 +244,137 @@ hr { fieldset:disabled a.btn { pointer-events: none; } +.btn-block { + display: block; + width: 100%; +} +.btn-block + .btn-block { + margin-top: 0.5rem; +} +input.btn-block[type="submit"], +input.btn-block[type="button"] { + width: 100%; +} +.custom-control { + position: relative; + z-index: 1; + display: block; + min-height: 1.5rem; + padding-left: 1.5rem; + color-adjust: exact; +} +.custom-control-input { + position: absolute; + left: 0; + z-index: -1; + width: 1rem; + height: 1.25rem; + opacity: 0; +} +.custom-control-input:checked ~ .custom-control-label::before { + color: #fff; + border-color: #007bff; + background-color: #007bff; +} +.custom-control-input:not(:disabled):active ~ .custom-control-label::before { + color: #fff; + background-color: #b3d7ff; + border-color: #b3d7ff; +} +.custom-control-input:disabled ~ .custom-control-label { + color: #5e5e5e; +} +.custom-control-input:disabled ~ .custom-control-label::before { + background-color: #fafafa; +} +.custom-control-label { + position: relative; + margin-bottom: 0; + vertical-align: top; +} +.custom-control-label::before { + position: absolute; + top: 0.25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + pointer-events: none; + content: ""; + background-color: #fff; + border: #666 solid 1px; +} +.custom-control-label::after { + position: absolute; + top: 0.25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + content: ""; + background: no-repeat 50% / 50% 50%; +} +.custom-checkbox .custom-control-label::before { + border-radius: 0.25rem; +} +.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e"); +} +.custom-checkbox + .custom-control-input:indeterminate + ~ .custom-control-label::before { + border-color: #007bff; + background-color: #007bff; +} +.custom-checkbox + .custom-control-input:indeterminate + ~ .custom-control-label::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e"); +} +.custom-checkbox + .custom-control-input:disabled:checked + ~ .custom-control-label::before { + background-color: rgba(0, 123, 255, 0.5); +} +.custom-checkbox + .custom-control-input:disabled:indeterminate + ~ .custom-control-label::before { + background-color: rgba(0, 123, 255, 0.5); +} +@media (prefers-reduced-motion: reduce) { +} +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} +.navbar { + position: relative; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + padding: 0.25rem 0.5rem; +} +.navbar .container { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; +} +.clearfix::after { + display: block; + clear: both; + content: ""; +} +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} .mt-3 { margin-top: 1rem !important; } @@ -213,8 +384,8 @@ fieldset:disabled a.btn { .text-nowrap { white-space: nowrap !important; } -.text-center { - text-align: center !important; +.font-weight-normal { + font-weight: 400 !important; } .gl-form-input, .gl-form-input.form-control { @@ -245,19 +416,109 @@ fieldset:disabled a.btn { .gl-form-input:disabled, .gl-form-input.form-control:disabled { cursor: not-allowed; - color: #868686; + color: #666; } .gl-form-input::placeholder, .gl-form-input.form-control::placeholder { color: #868686; } +.gl-form-checkbox { + font-size: 0.875rem; + line-height: 1rem; + color: #303030; +} +.gl-form-checkbox .custom-control-input:disabled, +.gl-form-checkbox .custom-control-input:disabled ~ .custom-control-label { + cursor: not-allowed; + color: #868686; +} +.gl-form-checkbox.custom-control .custom-control-input ~ .custom-control-label { + cursor: pointer; +} +.gl-form-checkbox.custom-control + .custom-control-input + ~ .custom-control-label::before, +.gl-form-checkbox.custom-control + .custom-control-input + ~ .custom-control-label::after { + top: 0; +} +.gl-form-checkbox.custom-control + .custom-control-input + ~ .custom-control-label::before { + background-color: #fff; + border-color: #868686; +} +.gl-form-checkbox.custom-control + .custom-control-input:checked + ~ .custom-control-label::before { + background-color: #1f75cb; + border-color: #1f75cb; +} +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:checked + ~ .custom-control-label::after, +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:indeterminate + ~ .custom-control-label::after { + background: none; + background-color: #fff; + mask-repeat: no-repeat; + mask-position: center center; +} +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:checked + ~ .custom-control-label::after { + mask-image: url('data:image/svg+xml,%3Csvg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1 3.05299L2.99123 5L7 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A'); +} +.gl-form-checkbox.custom-control + .custom-control-input[type="checkbox"]:indeterminate + ~ .custom-control-label::after { + mask-image: url('data:image/svg+xml,%3Csvg width="8" height="2" viewBox="0 0 8 2" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 1L8 1" stroke="white" stroke-width="2"/%3E%3C/svg%3E%0A'); +} +.gl-form-checkbox.custom-control.custom-checkbox + .custom-control-input:indeterminate + ~ .custom-control-label::before { + background-color: #1f75cb; + border-color: #1f75cb; +} +.gl-form-checkbox.custom-control + .custom-control-input:disabled + ~ .custom-control-label { + cursor: not-allowed; +} +.gl-form-checkbox.custom-control + .custom-control-input:disabled + ~ .custom-control-label::before { + background-color: #f0f0f0; + border-color: #dbdbdb; + pointer-events: auto; +} +.gl-form-checkbox.custom-control + .custom-control-input:checked:disabled + ~ .custom-control-label::before, +.gl-form-checkbox.custom-control + .custom-control-input:indeterminate:disabled + ~ .custom-control-label::before { + background-color: #dbdbdb; + border-color: #dbdbdb; +} +.gl-form-checkbox.custom-control + .custom-control-input:checked:disabled + ~ .custom-control-label::after, +.gl-form-checkbox.custom-control + .custom-control-input:indeterminate:disabled + ~ .custom-control-label::after { + background-color: #5e5e5e; +} .gl-button { display: inline-flex; } .gl-button:not(.btn-link):active { text-decoration: none; } -.gl-button.gl-button { +.gl-button.gl-button, +.gl-button.gl-button.btn-block { border-width: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -273,7 +534,8 @@ fieldset:disabled a.btn { font-size: 0.875rem; border-radius: 0.25rem; } -.gl-button.gl-button .gl-button-text { +.gl-button.gl-button .gl-button-text, +.gl-button.gl-button.btn-block .gl-button-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -282,29 +544,39 @@ fieldset:disabled a.btn { margin-top: -1px; margin-bottom: -1px; } -.gl-button.gl-button .gl-button-icon { +.gl-button.gl-button .gl-button-icon, +.gl-button.gl-button.btn-block .gl-button-icon { height: 1rem; width: 1rem; flex-shrink: 0; margin-right: 0.25rem; top: auto; } -.gl-button.gl-button.btn-default { +.gl-button.gl-button.btn-default, +.gl-button.gl-button.btn-block.btn-default { background-color: #fff; } -.gl-button.gl-button.btn-default:active { +.gl-button.gl-button.btn-default:active, +.gl-button.gl-button.btn-default.active, +.gl-button.gl-button.btn-block.btn-default:active, +.gl-button.gl-button.btn-block.btn-default.active { box-shadow: inset 0 0 0 1px #5e5e5e, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #dbdbdb; } -.gl-button.gl-button.btn-confirm { +.gl-button.gl-button.btn-confirm, +.gl-button.gl-button.btn-block.btn-confirm { color: #fff; } -.gl-button.gl-button.btn-confirm { +.gl-button.gl-button.btn-confirm, +.gl-button.gl-button.btn-block.btn-confirm { background-color: #1f75cb; box-shadow: inset 0 0 0 1px #1068bf; } -.gl-button.gl-button.btn-confirm:active { +.gl-button.gl-button.btn-confirm:active, +.gl-button.gl-button.btn-confirm.active, +.gl-button.gl-button.btn-block.btn-confirm:active, +.gl-button.gl-button.btn-block.btn-confirm.active { box-shadow: inset 0 0 0 1px #033464, 0 0 0 1px #fff, 0 0 0 3px #428fdc; outline: none; background-color: #0b5cad; @@ -312,10 +584,14 @@ fieldset:disabled a.btn { body { font-size: 0.875rem; } -[type="submit"] { +button, +html [type="button"], +[type="submit"], +[role="button"] { cursor: pointer; } -h1 { +h1, +h3 { margin-top: 20px; margin-bottom: 10px; } @@ -325,6 +601,9 @@ a { hr { overflow: hidden; } +svg { + vertical-align: baseline; +} .form-control { font-size: 0.875rem; } @@ -332,15 +611,9 @@ hr { display: none !important; visibility: hidden !important; } -.hide { - display: none; -} html { overflow-y: scroll; } -body { - text-decoration-skip: ink; -} body.navless { background-color: #fff !important; } @@ -375,13 +648,34 @@ body.navless { background-color: #f0f0f0; box-shadow: none; } -.btn:active { +.btn:active, +.btn.active { background-color: #eaeaea; border-color: #e3e3e3; color: #303030; } -.light { - color: #303030; +.btn svg { + height: 15px; + width: 15px; +} +.btn svg:not(:last-child) { + margin-right: 5px; +} +.btn-block { + width: 100%; + margin: 0; + margin-bottom: 1rem; +} +.btn-block.btn { + padding: 6px 0; +} +.tab-content { + overflow: visible; +} +@media (max-width: 767.98px) { + .tab-content { + isolation: isolate; + } } hr { margin: 1.5rem 0; @@ -419,6 +713,9 @@ input { label { font-weight: 600; } +label.custom-control-label { + font-weight: 400; +} label.label-bold { font-weight: 600; } @@ -432,8 +729,25 @@ label.label-bold { .gl-show-field-errors .form-control:not(textarea) { height: 34px; } -.gl-show-field-errors .gl-field-hint { - color: #303030; +.navbar-empty { + justify-content: center; + height: var(--header-height, 48px); + background: #fff; + border-bottom: 1px solid #dbdbdb; +} +.navbar-empty .tanuki-logo, +.navbar-empty .brand-header-logo { + max-height: 100%; +} +.tanuki-logo .tanuki { + fill: #e24329; +} +.tanuki-logo .left-cheek, +.tanuki-logo .right-cheek { + fill: #fc6d26; +} +.tanuki-logo .chin { + fill: #fca326; } input::-moz-placeholder { color: #868686; @@ -445,6 +759,9 @@ input::-ms-input-placeholder { input:-ms-input-placeholder { color: #868686; } +svg { + fill: currentColor; +} .login-page .container { max-width: 960px; } @@ -477,6 +794,10 @@ input:-ms-input-placeholder { .login-page p { font-size: 13px; } +.login-page .signin-text p { + margin-bottom: 0; + line-height: 1.5; +} .login-page .borderless .login-box, .login-page .borderless .omniauth-container { box-shadow: none; @@ -549,6 +870,16 @@ input:-ms-input-placeholder { border-top-right-radius: 4px; border-top-left-radius: 4px; } +.login-page .new-session-tabs.nav-links-unboxed { + border-color: transparent; + box-shadow: none; +} +.login-page .new-session-tabs.nav-links-unboxed .nav-item { + border-left: 0; + border-right: 0; + border-bottom: 1px solid #dbdbdb; + background-color: transparent; +} .login-page .new-session-tabs.custom-provider-tabs { flex-wrap: wrap; } @@ -648,14 +979,20 @@ input:-ms-input-placeholder { } } -.gl-text-green-600 { - color: #217645; +.gl-display-flex { + display: flex; } -.gl-text-red-500 { - color: #dd2b0e; +.gl-display-inline-block { + display: inline-block; } -.gl-display-block { - display: block; +.gl-flex-wrap { + flex-wrap: wrap; +} +.gl-justify-content-center { + justify-content: center; +} +.gl-float-right { + float: right; } .gl-w-10 { width: 3.5rem; @@ -674,14 +1011,18 @@ input:-ms-input-placeholder { width: 100%; } } -.gl-p-4 { - padding: 0.75rem; +.gl-p-5 { + padding: 1rem; +} +.gl-px-5 { + padding-left: 1rem; + padding-right: 1rem; } .gl-pt-5 { padding-top: 1rem; } -.gl-mt-2 { - margin-top: 0.25rem; +.gl-mt-3 { + margin-top: 0.5rem; } .gl-mt-5 { margin-top: 1rem; @@ -701,15 +1042,17 @@ input:-ms-input-placeholder { .gl-mb-3 { margin-bottom: 0.5rem; } -.gl-mb-5 { - margin-bottom: 1rem; -} .gl-ml-auto { margin-left: auto; } .gl-ml-2 { margin-left: 0.25rem; } +@media (min-width: 576px) { + .gl-sm-mt-0 { + margin-top: 0; + } +} .gl-text-center { text-align: center; } @@ -719,6 +1062,9 @@ input:-ms-input-placeholder { .gl-font-weight-normal { font-weight: 400; } +.gl-font-weight-bold { + font-weight: 600; +} @import "startup/cloaking"; @include cloak-startup-scss(none); diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index eeb4604f32a..4b74e449e06 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -101,7 +101,6 @@ $white-dark: #444; $theme-indigo-50: #1a1a40; $border-color: #4f4f4f; -$nav-active-bg: rgba(255, 255, 255, 0.08); :root { color-scheme: dark; @@ -206,7 +205,6 @@ body.gl-dark { --black: #{$black}; --svg-status-bg: #{$white}; - --nav-active-bg: #{$nav-active-bg}; .gl-button.gl-button, .gl-button.gl-button.btn-block { diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index 92740aaf89e..e1ba2a69420 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -60,26 +60,6 @@ } .nav-sidebar { - li { - a { - color: var(--gray-600); - } - - > a:hover { - background-color: var(--nav-active-bg); - } - - &.active { - box-shadow: none; - - &:not(.fly-out-top-item) { - > a:not(.has-sub-items) { - background-color: var(--nav-active-bg); - } - } - } - } - .sidebar-sub-level-items.fly-out-list { box-shadow: none; border: 1px solid $border-color; @@ -92,7 +72,7 @@ aside.right-sidebar:not(.right-sidebar-merge-requests) { } body.gl-dark { - @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $gray-900, $white); + @include gitlab-theme($gray-900, $gray-400, $gray-500, $gray-900, $white); .terms { .logo-text { diff --git a/app/assets/stylesheets/themes/theme_blue.scss b/app/assets/stylesheets/themes/theme_blue.scss index 817557f37cd..90122cec31f 100644 --- a/app/assets/stylesheets/themes/theme_blue.scss +++ b/app/assets/stylesheets/themes/theme_blue.scss @@ -6,7 +6,6 @@ body { $theme-blue-200, $theme-blue-500, $theme-blue-700, - $gray-900, $theme-blue-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_gray.scss b/app/assets/stylesheets/themes/theme_gray.scss index 75b111f90c7..a6cdfb36a7c 100644 --- a/app/assets/stylesheets/themes/theme_gray.scss +++ b/app/assets/stylesheets/themes/theme_gray.scss @@ -7,7 +7,6 @@ body { $gray-300, $gray-500, $gray-900, - $gray-900, $white ); } diff --git a/app/assets/stylesheets/themes/theme_green.scss b/app/assets/stylesheets/themes/theme_green.scss index 7e387e97452..0300f261d64 100644 --- a/app/assets/stylesheets/themes/theme_green.scss +++ b/app/assets/stylesheets/themes/theme_green.scss @@ -6,7 +6,6 @@ body { $theme-green-200, $theme-green-500, $theme-green-700, - $gray-900, $theme-green-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 042e21cebd6..d644d8acc98 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -6,18 +6,22 @@ $search-and-nav-links, $accent, $border-and-box-shadow, - $sidebar-text, - $nav-svg-color, - $color-alternate + $navbar-theme-color, + $navbar-theme-contrast-color ) { // Set custom properties --gl-theme-accent: #{$accent}; + $search-and-nav-links-a20: rgba($search-and-nav-links, 0.2); + $search-and-nav-links-a30: rgba($search-and-nav-links, 0.3); + $search-and-nav-links-a40: rgba($search-and-nav-links, 0.4); + $search-and-nav-links-a80: rgba($search-and-nav-links, 0.8); + // Header .navbar-gitlab { - background-color: $nav-svg-color; + background-color: $navbar-theme-color; .navbar-collapse { color: $search-and-nav-links; @@ -37,7 +41,7 @@ > button { &:hover, &:focus { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } } @@ -45,13 +49,13 @@ &.dropdown.show { > a, > button { - color: $nav-svg-color; - background-color: $color-alternate; + color: $navbar-theme-color; + background-color: $navbar-theme-contrast-color; } } &.line-separator { - border-left: 1px solid rgba($search-and-nav-links, 0.2); + border-left: 1px solid $search-and-nav-links-a20; } } } @@ -65,12 +69,12 @@ color: $search-and-nav-links; &.header-search-new { - color: $sidebar-text; + color: $gray-900; } > a { .notification-dot { - border: 2px solid $nav-svg-color; + border: 2px solid $navbar-theme-color; } &.header-help-dropdown-toggle { @@ -88,7 +92,7 @@ &:hover, &:focus { @include media-breakpoint-up(sm) { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } svg { @@ -97,7 +101,7 @@ .notification-dot { will-change: border-color, background-color; - border-color: adjust-color($nav-svg-color, $red: 33, $green: 33, $blue: 33); + border-color: adjust-color($navbar-theme-color, $red: 33, $green: 33, $blue: 33); } &.header-help-dropdown-toggle .notification-dot { @@ -108,12 +112,12 @@ &.active > a, &.dropdown.show > a { - color: $nav-svg-color; - background-color: $color-alternate; + color: $navbar-theme-color; + background-color: $navbar-theme-contrast-color; &:hover { svg { - fill: $nav-svg-color; + fill: $navbar-theme-color; } } @@ -123,7 +127,7 @@ &.header-help-dropdown-toggle { .notification-dot { - background-color: $nav-svg-color; + background-color: $navbar-theme-color; } } } @@ -131,7 +135,7 @@ .impersonated-user, .impersonated-user:hover { svg { - fill: $nav-svg-color; + fill: $navbar-theme-color; } } } @@ -142,30 +146,30 @@ > a { &:hover, &:focus { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } } } .header-search { - background-color: rgba($search-and-nav-links, 0.2) !important; + background-color: $search-and-nav-links-a20 !important; border-radius: $border-radius-default; &:hover { - background-color: rgba($search-and-nav-links, 0.3) !important; + background-color: $search-and-nav-links-a30 !important; } svg.gl-search-box-by-type-search-icon { - color: rgba($search-and-nav-links, 0.8); + color: $search-and-nav-links-a80; } input { background-color: transparent; - color: rgba($search-and-nav-links, 0.8); - box-shadow: inset 0 0 0 1px rgba($search-and-nav-links, 0.4); + color: $search-and-nav-links-a80; + box-shadow: inset 0 0 0 1px $search-and-nav-links-a40; &::placeholder { - color: rgba($search-and-nav-links, 0.8); + color: $search-and-nav-links-a80; } &:focus, @@ -178,27 +182,27 @@ .keyboard-shortcut-helper { color: $search-and-nav-links; - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; } } .search { form { - background-color: rgba($search-and-nav-links, 0.2); + background-color: $search-and-nav-links-a20; &:hover { - background-color: rgba($search-and-nav-links, 0.3); + background-color: $search-and-nav-links-a30; } } .search-input::placeholder { - color: rgba($search-and-nav-links, 0.8); + color: $search-and-nav-links-a80; } .search-input-wrap { .search-icon, .clear-icon { - fill: rgba($search-and-nav-links, 0.8); + fill: $search-and-nav-links-a80; } } @@ -209,7 +213,7 @@ .search-input-wrap { .search-icon { - fill: rgba($search-and-nav-links, 0.8); + fill: $search-and-nav-links-a80; } } } @@ -217,7 +221,7 @@ // Sidebar .nav-sidebar li.active > a { - color: $sidebar-text; + color: $gray-900; } .nav-sidebar { diff --git a/app/assets/stylesheets/themes/theme_indigo.scss b/app/assets/stylesheets/themes/theme_indigo.scss index 3bf6cfea650..5a27a9cfdc5 100644 --- a/app/assets/stylesheets/themes/theme_indigo.scss +++ b/app/assets/stylesheets/themes/theme_indigo.scss @@ -6,7 +6,6 @@ body { $indigo-200, $indigo-500, $indigo-700, - $gray-900, $indigo-900, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_blue.scss b/app/assets/stylesheets/themes/theme_light_blue.scss index 771a84911b3..7cb0d98802e 100644 --- a/app/assets/stylesheets/themes/theme_light_blue.scss +++ b/app/assets/stylesheets/themes/theme_light_blue.scss @@ -6,7 +6,6 @@ body { $theme-light-blue-200, $theme-light-blue-500, $theme-light-blue-500, - $gray-900, $theme-light-blue-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_gray.scss b/app/assets/stylesheets/themes/theme_light_gray.scss index ad19438d79a..a0cbec9a92b 100644 --- a/app/assets/stylesheets/themes/theme_light_gray.scss +++ b/app/assets/stylesheets/themes/theme_light_gray.scss @@ -6,7 +6,6 @@ body { $gray-500, $gray-700, $gray-500, - $gray-900, $gray-50, $gray-500 ); diff --git a/app/assets/stylesheets/themes/theme_light_green.scss b/app/assets/stylesheets/themes/theme_light_green.scss index 8c991a7bfb3..797279cc37b 100644 --- a/app/assets/stylesheets/themes/theme_light_green.scss +++ b/app/assets/stylesheets/themes/theme_light_green.scss @@ -6,7 +6,6 @@ body { $theme-green-200, $theme-green-500, $theme-green-500, - $gray-900, $theme-light-green-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_indigo.scss b/app/assets/stylesheets/themes/theme_light_indigo.scss index 6c220e0459a..3632c5ad45a 100644 --- a/app/assets/stylesheets/themes/theme_light_indigo.scss +++ b/app/assets/stylesheets/themes/theme_light_indigo.scss @@ -6,7 +6,6 @@ body { $indigo-200, $indigo-500, $indigo-500, - $gray-900, $indigo-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_light_red.scss b/app/assets/stylesheets/themes/theme_light_red.scss index e1a715293b4..6c10d9178f1 100644 --- a/app/assets/stylesheets/themes/theme_light_red.scss +++ b/app/assets/stylesheets/themes/theme_light_red.scss @@ -6,7 +6,6 @@ body { $theme-light-red-200, $theme-light-red-500, $theme-light-red-500, - $gray-900, $theme-light-red-700, $white ); diff --git a/app/assets/stylesheets/themes/theme_red.scss b/app/assets/stylesheets/themes/theme_red.scss index 19fd150727d..140e27de6e2 100644 --- a/app/assets/stylesheets/themes/theme_red.scss +++ b/app/assets/stylesheets/themes/theme_red.scss @@ -6,7 +6,6 @@ body { $theme-red-200, $theme-red-500, $theme-red-700, - $gray-900, $theme-red-900, $white ); diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 6bd05f90f26..bdb8f758137 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -370,3 +370,13 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 .gl-flex-flow-row-wrap { flex-flow: row wrap; } + +/* + * The below style will be moved to @gitlab/ui by + * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1963 + */ +.gl-gap-y-3 { + > * + * { + margin-top: $gl-spacing-scale-3; + } +} |