diff options
Diffstat (limited to 'app/assets/stylesheets')
33 files changed, 318 insertions, 758 deletions
diff --git a/app/assets/stylesheets/application_dark.scss b/app/assets/stylesheets/application_dark.scss index 7d6ccc40278..dae0cd72a8f 100644 --- a/app/assets/stylesheets/application_dark.scss +++ b/app/assets/stylesheets/application_dark.scss @@ -44,6 +44,17 @@ body.gl-dark { } } + .header-search { + background-color: var(--gray-100) !important; + box-shadow: inset 0 0 0 1px var(--border-color) !important; + + &:active, + &:hover { + background-color: var(--gray-100) !important; + box-shadow: inset 0 0 0 1px var(--blue-200) !important; + } + } + .search { form { background-color: var(--gray-100); diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index 64abf5574fa..a013d971efb 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -1,8 +1,10 @@ .ProseMirror { td, th, - li { - :only-child { + li, + dd, + dt { + :first-child { margin-bottom: 0 !important; } } @@ -34,6 +36,20 @@ } } } + + .dl-content { + width: 100%; + + > li { + list-style-type: none; + margin-left: $gl-spacing-scale-5; + + &.dl-term { + margin: 0; + font-weight: 600; + } + } + } } .table-creator-grid-item { diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss index f4519841ce3..dc08c816d7d 100644 --- a/app/assets/stylesheets/errors.scss +++ b/app/assets/stylesheets/errors.scss @@ -91,6 +91,7 @@ a { .field { margin-bottom: 0; margin-right: 0.5em; + flex: 1; } } } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 264373451d5..a0682eabf01 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -154,12 +154,6 @@ } } - .cover-desc { - &.username:last-child { - padding-bottom: $gl-padding; - } - } - .cover-controls { @include media-breakpoint-up(sm) { position: absolute; @@ -343,8 +337,6 @@ } .code-block { - background: $black; - color: $gray-darkest; white-space: pre; overflow-x: auto; font-size: 12px; diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 61a20c7a8fd..568182ad796 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -613,7 +613,7 @@ table.code { grid-template-columns: 1fr 1fr; } - &.inline { + &.inline-diff-view { .diff-grid-comments { display: grid; grid-template-columns: 1fr; @@ -682,26 +682,6 @@ table.code { max-height: 50vh; } -.diff-stats-summary-toggler { - padding: 0; - background-color: transparent; - border: 0; - color: $blue-600; - font-weight: $gl-font-weight-bold; - - &:hover, - &:focus { - outline: none; - color: $blue-800; - } - - .caret-icon { - position: relative; - top: 2px; - left: -1px; - } -} - // Mobile @media (max-width: 480px) { .diff-title { @@ -853,21 +833,14 @@ table.code { .diff-files-changed { .inline-parallel-buttons { - position: relative; + @include gl-relative; z-index: 1; } - .commit-stat-summary { - @include media-breakpoint-up(sm) { - background-color: $white; - } - } - @include media-breakpoint-up(sm) { - position: -webkit-sticky; - position: sticky; + @include gl-sticky; top: $header-height + $mr-tabs-height; - background-color: $white; + @include gl-bg-white; z-index: 200; .with-performance-bar & { @@ -875,14 +848,13 @@ table.code { } &.is-stuck { - padding-top: 0; - padding-bottom: 0; + @include gl-py-0; border-top: 1px solid $white-dark; border-bottom: 1px solid $white-dark; .diff-stats-additions-deletions-expanded, .inline-parallel-buttons { - display: none !important; + @include gl-display-none; } } } @@ -890,12 +862,13 @@ table.code { @include media-breakpoint-up(lg) { &.is-stuck { .diff-stats-additions-deletions-collapsed { - display: block !important; + @include gl-display-block; } } } } + .diff-file-changes { max-width: 560px; width: 100%; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index f76101d92b1..5dd71cec8d1 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -386,15 +386,6 @@ } } } - - .boards-add-list > .btn { - text-align: left; - - > svg { - position: absolute; - right: 6px; - } - } } .droplab-dropdown .dropdown-menu .filter-dropdown-item { diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 222e10f51ad..0aeb7208c59 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -36,6 +36,7 @@ } } +.ci-status-icon-notification, .ci-status-icon-preparing, .ci-status-icon-created, .ci-status-icon-skipped, diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 603b05efe10..aeb3bb2286f 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -41,6 +41,12 @@ } } + .media-container { + display: inline-flex; + flex-direction: column; + margin-bottom: $gl-spacing-scale-2; + } + img:not(.emoji) { margin: 0 0 8px; } @@ -549,17 +555,12 @@ margin: 0; font-size: $gl-font-size-small; } + } - ul.dropdown-menu { - margin-top: 4px; - margin-bottom: 24px; - padding: 8px 0; - - li { - margin: 0; - padding: 0 1px; - } - } + .gl-new-dropdown-item { + margin: 0; + padding: 0; + line-height: 1rem; } /* AsciiDoc(tor) built-in alignment roles */ diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 726f8e28efe..099dfa28b9f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -505,7 +505,7 @@ $line-removed-dark: #fac5cd !default; * would hide other layers (selected text, matching brackets). * * When the transparent colors get layered on white background, they create their - * full opacity counterparts (computed with https://stackoverflow.com/a/12228643/606571): + * full opacity counterparts: * * - white + $line-added-transparent = $line-added * - white + $line-added-transparent + $line-added-dark-transparent = $line-added-dark diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index 9d889f111dd..3220510775c 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -1,7 +1,6 @@ @import 'framework/variables'; // Do not use 3-letter hex codes, bgcolor vs css background-color is problematic in emails -// See https://stackoverflow.com/questions/28551981/why-are-3-digit-hex-color-code-values-interpreted-differently-in-internet-explor // // stylelint-disable color-hex-length diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index 2f8602a212d..8794acd3c78 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -1,15 +1,3 @@ -@mixin flat-connector-before($length: 44px) { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -$length; - border-top: 2px solid var(--border-color, $border-color); - width: $length; - height: 1px; - } -} - @mixin build-content($border-radius: 30px) { display: inline-block; padding: 8px 10px 9px; diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 10183f774b1..4806f4b054b 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -15,14 +15,6 @@ } } -.dropdown-menu-issues-board-new { - width: 320px; - - .dropdown-content { - max-height: 140px; - } -} - .issue-board-dropdown-content { margin: 0; padding: $gl-padding-4 $gl-padding $gl-padding; @@ -256,7 +248,8 @@ margin-right: 4px; } - .confidential-icon { + .confidential-icon, + .hidden-icon { color: var(--orange-500, $orange-500); cursor: help; } @@ -437,6 +430,10 @@ height: $input-height; } +.issue-boards-content { + isolation: isolate; +} + .issue-boards-content.is-focused { position: fixed; width: 100%; diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss index 2248d95ae24..5d42ece32c9 100644 --- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss +++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss @@ -3,293 +3,4 @@ .cycle-analytics { margin: 24px auto 0; position: relative; - - .landing { - margin-top: 0; - - .inner-content { - white-space: normal; - - h4, - p { - margin: 7px 0 0; - max-width: 480px; - padding: 0 $gl-padding; - - @include media-breakpoint-down(sm) { - margin: 0 auto; - } - } - } - - .svg-container svg { - width: 136px; - height: 136px; - } - } - - .col-headers { - ul { - margin: 0; - padding: 0; - } - - li { - line-height: 50px; - } - } - - .card { - .content-block { - padding: 24px 0; - border-bottom: 0; - position: relative; - - @include media-breakpoint-down(xs) { - padding: 6px 0 24px; - } - } - - .column { - text-align: center; - - @include media-breakpoint-down(xs) { - padding: 15px 0; - } - - .header { - font-size: 30px; - line-height: 38px; - font-weight: $gl-font-weight-normal; - margin: 0; - } - - .text { - color: var(--gray-500, $gray-500); - margin: 0; - } - - &:last-child { - @include media-breakpoint-down(xs) { - text-align: center; - } - } - } - } - - .stage-panel-body { - display: flex; - flex-wrap: wrap; - } - - .stage-nav, - .stage-entries { - display: flex; - vertical-align: top; - font-size: $gl-font-size; - } - - .stage-nav { - width: 40%; - margin-bottom: 0; - - ul { - padding: 0; - margin: 0; - width: 100%; - } - - li { - list-style-type: none; - } - - .stage-nav-item { - line-height: 65px; - - &.active { - background: var(--blue-50, $blue-50); - border-color: var(--blue-300, $blue-300); - box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500); - } - - &:hover:not(.active) { - background-color: var(--gray-10, $gray-10); - box-shadow: inset 2px 0 0 0 var(--border-color, $border-color); - cursor: pointer; - } - - .stage-nav-item-cell.stage-name { - width: 44.5%; - } - - .stage-nav-item-cell.stage-median { - min-width: 43%; - } - - .stage-empty, - .not-available { - color: var(--gray-500, $gray-500); - } - } - } - - .stage-panel-container { - width: 100%; - overflow: auto; - } - - .stage-panel { - min-width: 968px; - - .card-header { - padding: 0; - background-color: transparent; - } - - .events-description { - line-height: 65px; - } - - .events-info { - color: var(--gray-500, $gray-500); - } - } - - .stage-events { - min-height: 467px; - } - - .stage-event-list { - margin: 0; - padding: 0; - } - - .stage-event-item { - @include clearfix; - list-style-type: none; - padding-bottom: $gl-padding; - margin-bottom: $gl-padding; - border-bottom: 1px solid var(--gray-50, $gray-50); - - &:last-child { - border-bottom: 0; - margin-bottom: 0; - } - - .item-details, - .item-time { - float: left; - } - - .item-details { - width: 75%; - } - - .item-title { - margin: 0 0 2px; - - &.issue-title, - &.commit-title, - &.merge-request-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 100%; - display: block; - - a { - color: var(--gl-text-color, $gl-text-color); - } - } - } - - .item-time { - width: 25%; - text-align: right; - } - - .total-time { - font-size: $cycle-analytics-big-font; - color: var(--gl-text-color, $gl-text-color); - - span { - color: var(--gl-text-color, $gl-text-color); - font-size: $gl-font-size; - } - } - - .issue-date, - .build-date { - color: var(--gl-text-color, $gl-text-color); - } - - .mr-link, - .issue-link, - .commit-author-link, - .issue-author-link { - color: var(--gl-text-color, $gl-text-color); - } - - // Custom CSS for components - .item-conmmit-component { - .commit-icon { - svg { - display: inline-block; - width: 20px; - height: 20px; - vertical-align: bottom; - } - } - } - - .merge-request-branch { - a { - max-width: 180px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - } - } - } - - // Custom Styles for stage items - .item-build-component { - .item-title { - .icon-build-status { - float: left; - margin-right: 5px; - position: relative; - top: 2px; - } - - .item-build-name { - color: var(--gl-text-color, $gl-text-color); - } - - .pipeline-id { - color: var(--gl-text-color, $gl-text-color); - padding: 0 3px 0 0; - } - - .ref-name { - color: var(--gray-900, $gray-900); - display: inline-block; - max-width: 180px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - line-height: 1.3; - vertical-align: top; - } - - .commit-sha { - color: var(--blue-600, $blue-600); - line-height: 1.3; - vertical-align: top; - font-weight: $gl-font-weight-normal; - } - } - } } diff --git a/app/assets/stylesheets/page_bundles/escalation_policies.scss b/app/assets/stylesheets/page_bundles/escalation_policies.scss index f188dde1183..6f3873fea0c 100644 --- a/app/assets/stylesheets/page_bundles/escalation_policies.scss +++ b/app/assets/stylesheets/page_bundles/escalation_policies.scss @@ -16,9 +16,6 @@ $stroke-size: 1px; .right-arrow { @include gl-relative; - @include gl-mx-5; - @include gl-display-inline-block; - @include gl-vertical-align-middle; height: $stroke-size; background-color: var(--gray-900, $gray-900); min-width: $gl-spacing-scale-7; @@ -27,7 +24,6 @@ $stroke-size: 1px; @include gl-absolute; top: -2*$stroke-size; left: calc(100% - #{5*$stroke-size}); - @include gl-display-inline-block; @include gl-p-1; @include gl-border-solid; border-width: 0 $stroke-size $stroke-size 0; @@ -35,3 +31,24 @@ $stroke-size: 1px; transform: rotate(-45deg); } } + +.escalation-rule-row { + @media (max-width: $breakpoint-lg) { + @include gl-flex-wrap; + } +} + +.rule-condition { + @media (min-width: $breakpoint-lg) { + flex-basis: 25%; + flex-shrink: 0; + } + + @media (max-width: $breakpoint-lg) { + @include gl-w-full; + } +} + +.rule-action { + min-width: 0; +} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 6a20ff3b3fa..28354b83856 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -40,7 +40,7 @@ position: -webkit-sticky; position: sticky; - // Unitless zero values are not allowed in calculations https://stackoverflow.com/a/55391061 + // Unitless zero values are not allowed in calculations // stylelint-disable-next-line length-zero-no-unit top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); // stylelint-disable-next-line length-zero-no-unit diff --git a/app/assets/stylesheets/page_bundles/new_namespace.scss b/app/assets/stylesheets/page_bundles/new_namespace.scss index 189f010bdb2..37a1231ec6b 100644 --- a/app/assets/stylesheets/page_bundles/new_namespace.scss +++ b/app/assets/stylesheets/page_bundles/new_namespace.scss @@ -17,10 +17,10 @@ $new-namespace-panel-height: 240px; .new-namespace-panel { &:hover { - background-color: $gray-10; + background-color: var(--gray-50, $gray-10); } - color: $purple-700; + color: var(--purple-700, $purple-700); min-height: $new-namespace-panel-height; text-align: center; @include media-breakpoint-up(lg) { diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index c9171eb4fc7..206c2eb09d0 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -120,17 +120,10 @@ } } -.pipeline-tab-content { - display: flex; - width: 100%; - min-height: $dropdown-max-height-lg; - background-color: var(--gray-50, $gray-50); - padding: $gl-padding 0; - overflow: auto; -} -// These are single-value classes to use with utility-class style CSS -// but to still access this variable. Do not add other styles. +// These are single-value classes to use with utility-class style CSS. +// They are here to still access a variable or because they use magic values. +// scoped to the graph. Do not add other styles. .gl-pipeline-min-h { min-height: $dropdown-max-height-lg; } @@ -147,22 +140,6 @@ padding-right: 120px; } -.gl-build-content { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid var(--border-color, $border-color); - border-radius: 30px; - background-color: var(--white, $white); - - &:hover, - &:focus { - background-color: var(--gray-50, $gray-50); - border: 1px solid $dropdown-toggle-active-border-color; - color: var(--gl-text-color, $gl-text-color); - } -} - .gl-ci-action-icon-container { position: absolute; right: 5px; @@ -180,259 +157,6 @@ } } -// Pipeline graph, used at -// app/assets/javascripts/pipelines/components/graph/graph_component.vue -.pipeline-graph { - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - .stage-column-list, - .builds-container > ul { - padding: 0; - } - - a { - text-decoration: none; - color: var(--gl-text-color, $gl-text-color); - } - - svg { - vertical-align: middle; - } - - .stage-column { - display: inline-block; - vertical-align: top; - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; - - .left-connector { - @include flat-connector-before; - } - } - } - - &.no-margin { - margin: 0; - } - - li { - list-style: none; - } - - // when downstream pipelines are present, the last stage isn't the last column - &:last-child:not(.has-downstream) { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child::after { - border: 0; - } - // Remove right curved connectors from all builds in last stage - &:not(:first-child)::after { - border: 0; - } - // Remove opposite curve - .curve::before { - display: none; - } - } - } - - // when upstream pipelines are present, the first stage isn't the first column - &:first-child:not(.has-upstream) { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child)::before { - border: 0; - } - // Remove opposite curve - .curve::after { - display: none; - } - } - } - - // Curve first child connecting lines in opposite direction - .curve { - display: none; - - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid var(--border-color, $border-color); - } - - &::after { - left: -44px; - border-right: 2px solid var(--border-color, $border-color); - border-radius: 0 20px; - } - - &::before { - right: -44px; - border-left: 2px solid var(--border-color, $border-color); - border-radius: 20px 0 0; - } - } - } - - .stage-name { - margin: 0 0 15px 10px; - font-weight: $gl-font-weight-bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: 2.2em; - } - - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - - .ci-job-dropdown-container { - // override dropdown.scss - .dropdown-menu li button { - padding: 0; - text-align: center; - } - } - - .ci-status-icon svg { - height: 24px; - width: 24px; - } - - .dropdown-menu-toggle { - background-color: transparent; - border: 0; - padding: 0; - - &:focus { - outline: none; - } - } - - .build-content { - @include build-content(); - } - - .ci-job-dropdown-container:hover .build-content, - a.build-content:hover, - button.build-content:hover { - background-color: var(--gray-100, $gray-100); - border: 1px solid $dropdown-toggle-active-border-color; - } - - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid var(--border-color, $border-color); - width: 48px; - height: 1px; - } - } - - // Connect each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid var(--border-color, $border-color); - width: 25px; - height: 69px; - } - - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid var(--border-color, $border-color); - border-radius: 0 0 20px; - } - - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid var(--border-color, $border-color); - border-radius: 0 0 0 20px; - } - } - - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } - - .curve { - display: block; - } - } - } - - .ci-action-icon-container { - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); - - // Action Icons in big pipeline-graph nodes - &.ci-action-icon-wrapper { - height: 30px; - width: 30px; - border-radius: 100%; - display: block; - padding: 0; - line-height: 0; - - svg { - fill: var(--gray-500, $gray-500); - } - - .gl-spinner { - top: 2px; - } - - &.play { - svg { - left: 1px; - top: 1px; - } - } - } - } - - .stage-action svg { - left: 1px; - top: -2px; - } -} - -// Triggers the dropdown in the big pipeline graph -.dropdown-counter-badge { - font-weight: 100; - font-size: 15px; - position: absolute; - right: 13px; - top: 8px; -} - .split-report-section { border-bottom: 1px solid var(--gray-50, $gray-50); @@ -480,34 +204,6 @@ left: 100%; top: -10px; box-shadow: 0 1px 5px $black-transparent; - - /** - * Top arrow in the dropdown in the big pipeline graph - */ - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; - } - - &::before { - left: -6px; - margin-top: 3px; - border-width: 7px 5px 7px 0; - border-right-color: var(--border-color, $border-color); - } - - &::after { - left: -5px; - border-width: 10px 7px 10px 0; - border-right-color: var(--white, $white); - } } .codequality-report { diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss index ce91988cb8a..d0748779f47 100644 --- a/app/assets/stylesheets/page_bundles/reports.scss +++ b/app/assets/stylesheets/page_bundles/reports.scss @@ -49,11 +49,6 @@ display: flex; } -.is-dismissed .report-block-list-issue-description, -.is-dismissed .vulnerability-name-button { - text-decoration: line-through; -} - .report-block-list-issue-description-text::after { content: '\00a0'; } diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss index d6c3a3ff5da..57e5d2411d1 100644 --- a/app/assets/stylesheets/page_bundles/signup.scss +++ b/app/assets/stylesheets/page_bundles/signup.scss @@ -39,36 +39,6 @@ } } -.signup-page[data-page^='registrations:experience_levels'] { - $card-shadow-color: rgba(var(--black, $black), 0.2); - - .page-wrap { - background-color: var(--white, $white); - } - - .card-deck { - max-width: 828px; - } - - .card { - transition: box-shadow 0.3s ease-in-out; - } - - .card:hover { - box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color; - } - - @media (min-width: $breakpoint-sm) { - .card-deck .card { - margin: 0 $gl-spacing-scale-3; - } - } - - .stretched-link:hover { - text-decoration: none; - } -} - .edit-profile { max-width: 460px; } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 5173aeb824e..bc4dbf695cf 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -250,6 +250,10 @@ .commit-row-description { display: none; flex: 1; + + a { + color: $blue-600; + } } &.inline-commit { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index ee97e8af296..94912b1c641 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -7,6 +7,7 @@ text-align: center; margin-right: $issuable-warning-icon-margin; line-height: $gl-line-height-24; + flex: 0 0 auto; } .limit-container-width { @@ -121,7 +122,9 @@ .right-sidebar { position: fixed; top: $header-height; - bottom: 0; + // Default value for CSS var must contain a unit + // stylelint-disable-next-line length-zero-no-unit + bottom: var(--review-bar-height, 0px); right: 0; transition: width $sidebar-transition-duration; background: $gray-light; diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index b537a46a6f2..773935f4c76 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -96,15 +96,10 @@ } form { - width: 48%; padding: 0; border: 0; background: none; margin-bottom: $gl-padding; - - @include media-breakpoint-down(md) { - width: 100%; - } } .omniauth-btn { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 34a03a07405..3c0f10eb5cb 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -37,7 +37,7 @@ .note-textarea { display: block; - padding: 10px 0; + padding: 10px 1px; color: $gl-text-color; font-family: $regular-font; border: 0; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index b52a3c445b5..de9e0c6f705 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -70,14 +70,6 @@ } } -.profile-link-holder { - display: inline; - - a:not(.text-link) { - text-decoration: none; - } -} - // Middle dot divider between each element in a list of items. .middle-dot-divider { @include middle-dot-divider; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 8f5de73365b..2e6c6a021f8 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -37,6 +37,25 @@ input[type='checkbox']:hover { 0 0 0 1px lighten($dropdown-input-focus-shadow, 20%); } +.header-search { + width: 320px; + + input, + svg { + transition: border-color ease-in-out $default-transition-duration, + background-color ease-in-out $default-transition-duration; + } +} + +.header-search-dropdown-menu { + max-height: $dropdown-max-height; + top: $header-height; +} + +.header-search-dropdown-content { + max-height: $dropdown-max-height; +} + .search { margin: 0 8px; diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index c6198315606..5765156f26c 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -102,7 +102,6 @@ .tree-table { margin-bottom: 0; - table-layout: fixed; tr { border-bottom: 1px solid $white-normal; diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index a90751f772e..b7958cdf4a3 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -11,6 +11,7 @@ body.gl-dark { --green-700: #91d4a8; --blue-400: #1f75cb; --orange-400: #ab6100; + --purple-100: #2f2a6b; --gl-text-color: #fafafa; --border-color: #4f4f4f; --black: #fff; @@ -374,6 +375,38 @@ h1 { .m-auto { margin: auto !important; } +.gl-form-input, +.gl-form-input.form-control { + background-color: #333; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 0.875rem; + line-height: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + height: auto; + color: #fafafa; + box-shadow: inset 0 0 0 1px #868686; + border-style: none; + appearance: none; + -moz-appearance: none; +} +.gl-form-input:disabled, +.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, +.gl-form-input.form-control:disabled, +.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { + background-color: #1f1f1f; + color: #868686; + box-shadow: inset 0 0 0 1px #404040; + cursor: not-allowed; +} +.gl-form-input::placeholder, +.gl-form-input.form-control::placeholder { + color: #868686; +} .gl-button { display: inline-flex; } @@ -1237,7 +1270,7 @@ input { .nav-sidebar-inner-scroll > div.context-header a .avatar-container { font-weight: 400; flex: none; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .nav-sidebar-inner-scroll > div.context-header a .avatar-container.rect-avatar { border-style: none; @@ -1247,7 +1280,7 @@ input { a .avatar-container.rect-avatar .avatar.s32 { - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items { margin-top: 0.25rem; @@ -1261,7 +1294,7 @@ input { .sidebar-top-level-items .context-header a .avatar-container { font-weight: 400; flex: none; - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items .context-header a .avatar-container.rect-avatar { border-style: none; @@ -1271,7 +1304,7 @@ input { a .avatar-container.rect-avatar .avatar.s32 { - box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); } .sidebar-top-level-items > li .badge.badge-pill { border-radius: 0.5rem; @@ -1409,6 +1442,9 @@ svg.s12 { svg.s16 { vertical-align: -3px; } +.header-search { + width: 320px; +} .search { margin: 0 8px; } @@ -1479,7 +1515,7 @@ svg.s16 { float: left; margin-right: 16px; border-radius: 50%; - border: 1px solid rgba(255, 255, 255, 0.08); + border: 1px solid rgba(0, 0, 0, 0.08); } .avatar.s16, .avatar-container.s16 { @@ -1524,7 +1560,7 @@ svg.s16 { background-color: #660e00; } .identicon.bg2 { - background-color: #f4f0ff; + background-color: #232150; } .identicon.bg3 { background-color: #f1f1ff; @@ -1635,6 +1671,22 @@ body.gl-dark .notification-dot { background-color: #fafafa; } +body.gl-dark .header-search { + background-color: rgba(250, 250, 250, 0.2) !important; +} +body.gl-dark .header-search svg { + color: rgba(250, 250, 250, 0.8) !important; +} +body.gl-dark .header-search input { + background-color: transparent; + color: rgba(250, 250, 250, 0.8); +} +body.gl-dark .header-search input::placeholder { + color: rgba(250, 250, 250, 0.8); +} +body.gl-dark .header-search input:active::placeholder { + color: #fafafa; +} body.gl-dark .search form { background-color: rgba(250, 250, 250, 0.2); } @@ -1651,7 +1703,7 @@ body.gl-dark .nav-sidebar li.active > a { body.gl-dark .nav-sidebar .fly-out-top-item a, body.gl-dark .nav-sidebar .fly-out-top-item.active a, body.gl-dark .nav-sidebar .fly-out-top-item .fly-out-top-item-container { - background-color: #2f2a6b; + background-color: var(--purple-100, #e1d8f9); color: var(--black, #333); } body.gl-dark .logo-text svg { @@ -1668,6 +1720,14 @@ body.gl-dark .navbar-gitlab .navbar-nav li.active > button { color: var(--gl-text-color); background-color: var(--gray-200); } +body.gl-dark .navbar-gitlab .header-search { + background-color: var(--gray-100) !important; + box-shadow: inset 0 0 0 1px var(--border-color) !important; +} +body.gl-dark .navbar-gitlab .header-search:active { + background-color: var(--gray-100) !important; + box-shadow: inset 0 0 0 1px var(--blue-200) !important; +} body.gl-dark .navbar-gitlab .search form { background-color: var(--gray-100); box-shadow: inset 0 0 0 1px var(--border-color); @@ -1746,6 +1806,17 @@ body.gl-dark { --indigo-900: #ebebfa; --indigo-950: #f7f7ff; --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); + --purple-50: #232150; + --purple-100: #2f2a6b; + --purple-200: #453894; + --purple-300: #5943b6; + --purple-400: #694cc0; + --purple-500: #7b58cf; + --purple-600: #9475db; + --purple-700: #ac93e6; + --purple-800: #cbbbf2; + --purple-900: #e1d8f9; + --purple-950: #f4f0ff; --gl-text-color: #fafafa; --border-color: #4f4f4f; --white: #333; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 0b2d34b6f5d..2c79b819899 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -355,6 +355,38 @@ h1 { .m-auto { margin: auto !important; } +.gl-form-input, +.gl-form-input.form-control { + background-color: #fff; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 0.875rem; + line-height: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + height: auto; + color: #303030; + box-shadow: inset 0 0 0 1px #868686; + border-style: none; + appearance: none; + -moz-appearance: none; +} +.gl-form-input:disabled, +.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, +.gl-form-input.form-control:disabled, +.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { + background-color: #fafafa; + color: #868686; + box-shadow: inset 0 0 0 1px #dbdbdb; + cursor: not-allowed; +} +.gl-form-input::placeholder, +.gl-form-input.form-control::placeholder { + color: #868686; +} .gl-button { display: inline-flex; } @@ -1390,6 +1422,9 @@ svg.s12 { svg.s16 { vertical-align: -3px; } +.header-search { + width: 320px; +} .search { margin: 0 8px; } diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 070ab36e0b3..013ad3fac87 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -315,9 +315,9 @@ fieldset:disabled a.btn { -moz-appearance: none; } .gl-form-input:disabled, -.gl-form-input:not(.form-control-plaintext):read-only, +.gl-form-input:not(.form-control-plaintext):not([type="color"]):read-only, .gl-form-input.form-control:disabled, -.gl-form-input.form-control:not(.form-control-plaintext):read-only { +.gl-form-input.form-control:not(.form-control-plaintext):not([type="color"]):read-only { background-color: #fafafa; color: #868686; box-shadow: inset 0 0 0 1px #dbdbdb; @@ -634,17 +634,11 @@ svg { margin: 0; } .login-page .omniauth-container form { - width: 48%; padding: 0; border: 0; background: none; margin-bottom: 16px; } -@media (max-width: 991.98px) { - .login-page .omniauth-container form { - width: 100%; - } -} .login-page .omniauth-container .omniauth-btn { width: 100%; } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 8e1438eaf8a..f12b2ee2591 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -72,6 +72,18 @@ $indigo-900: #ebebfa; $indigo-950: #f7f7ff; $indigo-900-alpha-008: rgba($indigo-900, 0.08); +$purple-50: #232150; +$purple-100: #2f2a6b; +$purple-200: #453894; +$purple-300: #5943b6; +$purple-400: #694cc0; +$purple-500: #7b58cf; +$purple-600: #9475db; +$purple-700: #ac93e6; +$purple-800: #cbbbf2; +$purple-900: #e1d8f9; +$purple-950: #f4f0ff; + $gray-lightest: #222; $gray-light: $gray-50; $gray-lighter: #303030; @@ -163,6 +175,18 @@ body.gl-dark { --indigo-950: #{$indigo-950}; --indigo-900-alpha-008: #{$indigo-900-alpha-008}; + --purple-50: #{$purple-50}; + --purple-100: #{$purple-100}; + --purple-200: #{$purple-200}; + --purple-300: #{$purple-300}; + --purple-400: #{$purple-400}; + --purple-500: #{$purple-500}; + --purple-600: #{$purple-600}; + --purple-700: #{$purple-700}; + --purple-800: #{$purple-800}; + --purple-900: #{$purple-900}; + --purple-950: #{$purple-950}; + --gl-text-color: #{$gray-900}; --border-color: #{$border-color}; @@ -252,6 +276,10 @@ $well-inner-border: $gray-200; color: $gray-900; } +.gl-label-text-dark.gl-label-text-dark { + color: $gray-10; +} + // This applies to "gl-labels" from "gitlab-ui" .gl-label.gl-label-scoped.gl-label-text-dark, .gl-label.gl-label-scoped.gl-label-text-light { diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index a94169ab494..a9e8b238d78 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -140,6 +140,34 @@ } } + .header-search { + background-color: rgba($search-and-nav-links, 0.2) !important; + + &:hover { + background-color: rgba($search-and-nav-links, 0.3) !important; + } + + svg { + color: rgba($search-and-nav-links, 0.8) !important; + } + + input { + background-color: transparent; + color: rgba($search-and-nav-links, 0.8); + + &::placeholder { + color: rgba($search-and-nav-links, 0.8); + } + + &:focus, + &:active { + &::placeholder { + color: $search-and-nav-links; + } + } + } + } + .search { form { background-color: rgba($search-and-nav-links, 0.2); @@ -184,7 +212,7 @@ a:hover, &.active a, .fly-out-top-item-container { - background-color: $purple-900; + background-color: var(--purple-100, $purple-900); color: var(--black, $white); } } diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss index b41377475c5..4c3bc1b2298 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -45,6 +45,16 @@ body { } } + .header-search { + background-color: $white !important; + box-shadow: inset 0 0 0 1px $border-color !important; + + &:hover { + background-color: $white !important; + box-shadow: inset 0 0 0 1px $blue-200 !important; + } + } + .search { form { background-color: $white; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index ccad503c1ed..ec70926b418 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -245,11 +245,16 @@ $gl-line-height-42: px-to-rem(42px); width: $grid-size * 28; } -// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1491 +// Will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2347 is merged .gl-min-w-8 { min-width: $gl-spacing-scale-8; } +// Will be removed after https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2347 is merged +.gl-min-w-10 { + min-width: $gl-spacing-scale-10; +} + // Will both be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1526 .gl-opacity-6 { opacity: 0.6; @@ -258,3 +263,21 @@ $gl-line-height-42: px-to-rem(42px); .gl-opacity-7 { opacity: 0.7; } + +/** + Note: ::-webkit-scrollbar is a non-standard rule only + supported by webkit browsers. + + It is added here to migrate components that use + scrolling-links() mixin from `app/assets/stylesheets/framework/mixins.scss`. + + It should not be used elsewhere: it may impact accessibility as well as + add browser compatibility issues. + + See: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar +**/ +.gl-webkit-scrollbar-display-none { + &::-webkit-scrollbar { + display: none; + } +} |