diff options
Diffstat (limited to 'app/assets/stylesheets')
41 files changed, 309 insertions, 863 deletions
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index a5cfc8d12b0..c4f292dd05d 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -105,10 +105,6 @@ hr { } } -kbd { - display: inline-block; -} - code { padding: 2px 4px; color: $code-color; diff --git a/app/assets/stylesheets/components/feature_highlight.scss b/app/assets/stylesheets/components/feature_highlight.scss index 08706951967..54123e74675 100644 --- a/app/assets/stylesheets/components/feature_highlight.scss +++ b/app/assets/stylesheets/components/feature_highlight.scss @@ -7,3 +7,25 @@ padding: 0.25rem; } } + +.gl-order-1 { + order: 1; +} + +.gl-sm-order-init { + @media (min-width: $breakpoint-sm) { + order: initial; + } +} + +.gl-xs-ml-3 { + @media (max-width: $breakpoint-sm) { + @include gl-ml-3; + } +} + +.gl-sm-mr-3 { + @media (min-width: $breakpoint-sm) { + @include gl-mr-3; + } +} diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 3e9060e869b..7af97505749 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -2,6 +2,7 @@ margin-top: $header-height; @include gl-shadow-none; overflow-y: hidden; + width: 500px; .gl-infinite-scroll-legend { @include gl-display-none; @@ -54,18 +55,9 @@ .whats-new-item-image { border-color: $gray-50; + height: 250px; } .whats-new-modal-backdrop { z-index: 699; } - -.whats-new-notification-count { - @include gl-bg-gray-900; - @include gl-font-sm; - @include gl-line-height-normal; - @include gl-text-white; - @include gl-vertical-align-top; - border-radius: 20px; - padding: 3px 10px; -} diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 1fe94a796f5..cde5ad24fa5 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -22,6 +22,7 @@ @import 'framework/flash'; @import 'framework/forms'; @import 'framework/gfm'; +@import 'framework/kbd'; @import 'framework/header'; @import 'framework/highlight'; @import 'framework/issue_box'; @@ -45,7 +46,6 @@ @import 'framework/toggle'; @import 'framework/typography'; @import 'framework/zen'; -@import 'framework/blank'; @import 'framework/wells'; @import 'framework/page_header'; @import 'framework/page_title'; diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss deleted file mode 100644 index 0ada5fabde9..00000000000 --- a/app/assets/stylesheets/framework/blank.scss +++ /dev/null @@ -1,136 +0,0 @@ -.blank-state-parent-container { - .section-container { - padding: 10px; - } - - .section-body { - width: 100%; - height: 100%; - padding-bottom: 25px; - border-radius: $border-radius-default; - } -} - -.blank-state-row { - display: flex; - flex-wrap: wrap; - justify-content: space-between; -} - -.blank-state-welcome { - text-align: center; - padding: $gl-padding 0 ($gl-padding * 2); - - .blank-state-welcome-title { - font-size: 24px; - } - - .blank-state-text { - margin-bottom: 0; - } -} - -.blank-state-link { - color: $gl-text-color; - margin-bottom: 15px; - - &:hover { - background-color: $gray-light; - text-decoration: none; - color: $gl-text-color; - } -} - -.blank-state-center { - padding-top: 20px; - padding-bottom: 20px; - text-align: center; -} - -.blank-state { - display: flex; - align-items: center; - padding: 20px 50px; - border: 1px solid $border-color; - border-radius: $border-radius-default; - min-height: 240px; - margin-bottom: $gl-padding; - width: calc(50% - #{$gl-padding-8}); - - @include media-breakpoint-down(sm) { - width: 100%; - flex-direction: column; - justify-content: center; - padding: 50px 20px; - - .column-small & { - width: 100%; - } - - } -} - -.blank-state, -.blank-state-center { - .blank-state-icon { - svg { - display: block; - margin: auto; - } - } - - .blank-state-title { - margin-top: 0; - font-size: 18px; - } - - .blank-state-body { - @include media-breakpoint-down(sm) { - text-align: center; - margin-top: 20px; - } - - @include media-breakpoint-up(sm) { - padding-left: 20px; - } - } -} - -@include media-breakpoint-up(lg) { - .column-large { - flex: 2; - } - - .column-small { - flex: 1; - margin-bottom: 15px; - - .blank-state { - max-width: 400px; - flex-wrap: wrap; - margin-left: 15px; - } - - .blank-state-icon { - margin-bottom: 30px; - } - } -} - -.experiment-new-project-page-blank-state { - @include media-breakpoint-down(md) { - flex-direction: column; - justify-content: center; - text-align: center; - } - - .blank-state-icon { - min-width: 215px; - } -} - -$experiment-new-project-indigo-700: #41419f; - -.experiment-new-project-page-blank-state-title { - color: $experiment-new-project-indigo-700; -} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index d1fa1187703..603d28a8395 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -337,7 +337,7 @@ .btn-loading { &:not(.disabled) { - .spinner { + .gl-spinner { display: none; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 652ffd79ab3..a7ce19ffc69 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -93,6 +93,9 @@ .tab-content { overflow: visible; + @include media-breakpoint-down(sm) { + isolation: isolate; + } } pre { @@ -266,12 +269,6 @@ img.emoji { height: 220px; } -.description-block { - @extend .light-well; - @extend .light; - margin-bottom: 10px; -} - .footer-links { margin-bottom: 20px; diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index c5467c304ec..14d1a0663d0 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -429,30 +429,6 @@ display: none; } -.toggle-mobile-nav { - display: none; - background-color: transparent; - border: 0; - padding: 6px 16px; - margin: 0 0 0 -15px; - height: 46px; - color: $gl-text-color; - - @include media-breakpoint-down(sm) { - display: flex; - align-items: center; - - i { - font-size: 18px; - } - - + .breadcrumbs-links { - padding-left: $gl-padding; - border-left: 1px solid $gl-text-color-quaternary; - } - } -} - @include media-breakpoint-down(sm) { .close-nav-button { display: flex; diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index bc7a31c112f..a07e0b48cff 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -670,10 +670,6 @@ table.code { float: right; } -.files-changed { - border-bottom: 0; -} - .merge-request-details .file-content.image_file img { max-height: 50vh; } @@ -733,7 +729,7 @@ table.code { } .files { - .diff-file:last-child { + .diff-file:not(.is-virtual-scrolling):last-child { margin-bottom: 0; } } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ff42cd836da..894eddbe1a7 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -147,7 +147,7 @@ position: absolute; } - .spinner { + .gl-spinner { position: absolute; top: 9px; right: 8px; @@ -266,15 +266,6 @@ } } - .shortcut-mappings { - display: none; - } - - &.shortcuts .shortcut-mappings { - display: inline-block; - margin-right: 5px; - } - ul { margin: 0; padding: 0; @@ -848,12 +839,56 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { .frequent-items-dropdown-container { display: flex; flex-direction: row; - width: 500px; - height: 354px; + height: $grid-size * 40; + + &.with-deprecated-styles { + width: 500px; + height: 354px; + + .section-header, + .frequent-items-list-container li.section-empty { + padding: 0 $gl-padding; + } + + .search-input-container { + position: relative; + padding: 4px $gl-padding; + + .search-icon { + position: absolute; + top: 13px; + right: 25px; + color: $gray-300; + } + } + + @include media-breakpoint-down(xs) { + flex-direction: column; + width: 100%; + height: auto; + flex: 1; + + .frequent-items-dropdown-sidebar, + .frequent-items-dropdown-content { + width: 100%; + } + + .frequent-items-dropdown-sidebar { + border-bottom: 1px solid $border-color; + border-right: 0; + } + } + + .frequent-items-list-container { + width: auto; + height: auto; + padding-bottom: 0; + } + } .frequent-items-dropdown-sidebar, .frequent-items-dropdown-content { - padding: 8px 0; + @include gl-pt-3; } .loading-animation { @@ -870,32 +905,13 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { width: 70%; } - @include media-breakpoint-down(xs) { - flex-direction: column; - width: 100%; - height: auto; - flex: 1; - - .frequent-items-dropdown-sidebar, - .frequent-items-dropdown-content { - width: 100%; - } - - .frequent-items-dropdown-sidebar { - border-bottom: 1px solid $border-color; - border-right: 0; - } - } - .section-header, .frequent-items-list-container li.section-empty { - padding: 0 $gl-padding; color: $gl-text-color-secondary; font-size: $gl-font-size; } .frequent-items-list-container { - height: 304px; padding: 8px 0; overflow-y: auto; @@ -908,36 +924,16 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { } } - .search-input-container { - position: relative; - padding: 4px $gl-padding; - - .search-icon { - position: absolute; - top: 13px; - right: 25px; - color: $gray-300; - } - } - .section-header { font-weight: 700; margin-top: 8px; } - - @include media-breakpoint-down(xs) { - .frequent-items-list-container { - width: auto; - height: auto; - padding-bottom: 0; - } - } } .frequent-items-list-item-container { .frequent-items-item-avatar-container, .frequent-items-item-metadata-container { - float: left; + flex-shrink: 0; } .frequent-items-item-metadata-container { diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss index 78995c6e4f5..05b53e0c3d8 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -11,7 +11,7 @@ &::before { content: ''; - @include spinner(32px, 3px); + @include spinner-deprecated(32px, 3px); @include gl-absolute; @include gl-z-index-1; } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 432be7d0b3f..7566a533911 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -1,3 +1,5 @@ +$top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important; + .navbar-gitlab { padding: 0 16px; z-index: $header-zindex; @@ -254,6 +256,7 @@ } } + .top-nav-toggle, > button { background: transparent; border: 0; @@ -605,3 +608,60 @@ @include media-breakpoint-down(xs) { margin-right: 3px; } } + +.toggle-mobile-nav { + display: none; + background-color: transparent; + border: 0; + padding: 6px 16px; + margin: 0 0 0 -15px; + height: 46px; + color: $gl-text-color; + + @include media-breakpoint-down(sm) { + display: flex; + align-items: center; + + i { + font-size: 18px; + } + + + .breadcrumbs-links { + padding-left: $gl-padding; + border-left: 1px solid $gl-text-color-quaternary; + } + } +} + +.top-nav-container-view { + .gl-new-dropdown & .gl-search-box-by-type { + @include gl-m-0; + } + + .frequent-items-list-item-container > a:hover { + background-color: $top-nav-hover-bg; + } +} + +.top-nav-toggle { + .dropdown-icon { + @include gl-mr-3; + } + + .dropdown-chevron { + top: 0; + } +} + +.top-nav-menu-item { + color: var(--indigo-900, $theme-indigo-900) !important; + + &.active, + &:hover { + background-color: $top-nav-hover-bg; + } + + .gl-icon { + color: inherit !important; + } +} diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 4d5032ac674..8baf70da0c6 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -5,16 +5,7 @@ */ .status-box { - - /* Extra small devices (phones, less than 768px) */ - /* No media query since this is the default in Bootstrap */ - padding: 5px 11px; - margin-top: 4px; - /* Small devices (tablets, 768px and up) */ - @include media-breakpoint-up(sm) { - padding: 0 $gl-btn-padding; - margin-top: 5px; - } + padding: 0 $gl-btn-padding; border-radius: $border-radius-default; display: block; diff --git a/app/assets/stylesheets/framework/kbd.scss b/app/assets/stylesheets/framework/kbd.scss new file mode 100644 index 00000000000..05991bc16fd --- /dev/null +++ b/app/assets/stylesheets/framework/kbd.scss @@ -0,0 +1,15 @@ +kbd { + display: inline-block; + padding: 3px 5px; + font-size: $gl-font-size-monospace-sm; + line-height: 10px; + color: var(--gray-700, $gray-700); + vertical-align: middle; + background-color: var(--gray-10, $gray-10); + border-width: 1px; + border-style: solid; + border-color: var(--gray-100, $gray-100) var(--gray-100, $gray-100) var(--gray-200, $gray-200); + border-image: none; + border-radius: 3px; + box-shadow: 0 -1px 0 var(--gray-200, $gray-200) inset; +} diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index df2ba718c72..a3e8b2c245c 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -146,7 +146,7 @@ ul.content-list { > .btn, > .btn-group, > .dropdown.inline { - margin-right: $gl-padding-top; + margin-right: $grid-size; display: inline-block; margin-top: 3px; margin-bottom: 4px; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 27b7cac2df5..f904ef11f5b 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -182,6 +182,11 @@ width: 100%; } + /* This resets the width of the control so that the search button doesn't wrap */ + .gl-search-box-by-click .form-control { + width: 1%; + } + .dropdown-menu-toggle { margin-bottom: 0; } diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss index c8eadce5c51..afd2e7ff757 100644 --- a/app/assets/stylesheets/framework/spinner.scss +++ b/app/assets/stylesheets/framework/spinner.scss @@ -1,16 +1,20 @@ -@mixin spinner-color($color) { +/** +* Do not use these spinner mixins. Rely on GitLab UI +* GlLoadingIcon component instead. +*/ +@mixin spinner-color-deprecated($color) { border-color: rgba($color, 0.25); border-top-color: $color; } -@mixin spinner-size($size, $border-width) { +@mixin spinner-size-deprecated($size, $border-width) { width: $size; height: $size; border-width: $border-width; @include webkit-prefix(transform-origin, 50% 50% calc((#{$size} / 2) + #{$border-width})); } -@keyframes spinner-rotate { +@keyframes spinner-rotate-deprecated { 0% { transform: rotate(0); } @@ -20,47 +24,16 @@ } } -@mixin spinner($size: 16px, $border-width: 2px, $color: $gray-700) { +@mixin spinner-deprecated($size: 16px, $border-width: 2px, $color: $gray-700) { border-radius: 50%; position: relative; margin: 0 auto; - animation-name: spinner-rotate; + animation-name: spinner-rotate-deprecated; animation-duration: 0.6s; animation-timing-function: linear; animation-iteration-count: infinite; border-style: solid; display: inline-flex; - @include spinner-size($size, $border-width); - @include spinner-color($color); -} - -.spinner { - @include spinner; - - &.spinner-md { - @include spinner-size(32px, 3px); - } - - &.spinner-lg { - @include spinner-size(64px, 4px); - } - - &.spinner-dark { - @include spinner-color($gray-700); - } - - &.spinner-light { - @include spinner-color($white); - } -} - -.btn { - .spinner, - .gl-spinner { - vertical-align: text-bottom; - } -} - -.spin { - animation: spinner-rotate 2s infinite linear; + @include spinner-size-deprecated($size, $border-width); + @include spinner-color-deprecated($color); } diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 1504f3ee50f..9b38e842635 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -50,6 +50,12 @@ img.avatar { margin-right: $gl-padding; + + @include media-breakpoint-down(sm) { + width: $gl-spacing-scale-6; + height: $gl-spacing-scale-6; + margin-right: $gl-padding-8; + } } .controls { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 648ae29e212..603b05efe10 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -81,22 +81,6 @@ word-break: keep-all; } - kbd { - display: inline-block; - padding: 3px 5px; - font-size: 11px; - line-height: 10px; - color: $gray-700; - vertical-align: middle; - background-color: $gray-10; - border-width: 1px; - border-style: solid; - border-color: $gray-100 $gray-100 $gray-200; - border-image: none; - border-radius: 3px; - box-shadow: 0 -1px 0 $gray-200 inset; - } - h1 { font-size: 1.75em; font-weight: $gl-font-weight-bold; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 18aa0d3013d..bfb21d7112b 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -283,6 +283,8 @@ $indigo-700: #4b4ba3; $indigo-800: #393982; $indigo-900: #292961; $indigo-950: #1a1a40; +// To do this variant right for darkmode, we need to create a variable for it. +$indigo-900-alpha-008: rgba($indigo-900, 0.08); $theme-blue-50: #f4f8fc; $theme-blue-100: #e6edf5; diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss index 0d6f360112b..2f8602a212d 100644 --- a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -147,11 +147,11 @@ display: block; &:hover { - box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color; + box-shadow: inset 0 0 0 2px var(--gray-400, $gray-400); background-color: var(--gray-50, $gray-50); } - .spinner, + .gl-spinner, svg { width: $ci-action-dropdown-svg-size; height: $ci-action-dropdown-svg-size; @@ -176,12 +176,6 @@ li { position: relative; - // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered - &:hover > .mini-pipeline-graph-dropdown-item, - &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { - @extend .mini-pipeline-graph-dropdown-item:hover; - } - // link to the build .mini-pipeline-graph-dropdown-item { align-items: center; @@ -216,13 +210,16 @@ display: block; } } + } - &:hover, - &:focus { - outline: none; - text-decoration: none; - background-color: var(--gray-100, $gray-50); - } + // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered + &:hover > .mini-pipeline-graph-dropdown-item, + &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item, + .mini-pipeline-graph-dropdown-item:hover, + .mini-pipeline-graph-dropdown-item:focus { + outline: none; + text-decoration: none; + background-color: var(--gray-100, $gray-50); } } } diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index b91850f1775..ec41909beec 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -11,10 +11,6 @@ color: var(--orange-600, $orange-600); background-color: var(--orange-50, $orange-50); border: 1px solid var(--border-color, $border-color); - padding: 3px 12px; - margin: auto; - align-items: center; - z-index: 1; .with-performance-bar & { top: $header-height + $performance-bar-height; @@ -202,10 +198,6 @@ } .build-job { - &.active { - font-weight: $gl-font-weight-bold; - } - &.retried { background-color: var(--gray-10, $gray-10); } diff --git a/app/assets/stylesheets/page_bundles/dev_ops_report.scss b/app/assets/stylesheets/page_bundles/dev_ops_report.scss deleted file mode 100644 index 5c6019efce6..00000000000 --- a/app/assets/stylesheets/page_bundles/dev_ops_report.scss +++ /dev/null @@ -1,261 +0,0 @@ -@import 'mixins_and_variables_and_functions'; - -$space-between-cards: 8px; - -.devops-empty svg { - margin: 64px auto 32px; - max-width: 420px; -} - -.devops-header { - margin-top: $gl-padding; - margin-bottom: $gl-padding; - padding: 0 4px; - display: flex; - align-items: center; - - .devops-header-title { - font-size: 48px; - line-height: 1; - margin: 0; - } - - .devops-header-subtitle { - font-size: 22px; - line-height: 1; - color: var(--gl-text-color-secondary, $gl-text-color-secondary); - margin-left: 8px; - font-weight: $gl-font-weight-normal; - - .devops-header-icon { - vertical-align: px-to-rem(-$gl-spacing-scale-1); - } - - a { - font-size: 18px; - color: var(--gl-text-color-secondary, $gl-text-color-secondary); - - &:hover { - color: var(--blue-500, $blue-500); - } - } - } -} - -.devops-cards { - display: flex; - justify-content: center; - flex-wrap: wrap; -} - -.devops-card-wrapper { - display: flex; - flex-direction: column; - align-items: stretch; - text-align: center; - width: 50%; - border-color: var(--border-color, $border-color); - margin: 0 0 32px; - padding: $space-between-cards / 2; - position: relative; - - @include media-breakpoint-up(xs) { - width: percentage(1 / 4); - } - - @include media-breakpoint-up(sm) { - width: percentage(1 / 5); - } - - @include media-breakpoint-up(md) { - width: percentage(1 / 6); - } - - @include media-breakpoint-up(lg) { - width: percentage(1 / 10); - } -} - -.devops-card { - border: solid 1px var(--border-color, $border-color); - border-radius: 3px; - border-top-width: 3px; - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.devops-card-low { - border-top-color: var(--red-400, $red-400); - - .board-card-score-big { - background-color: var(--red-50, $red-50); - } -} - -.devops-card-average { - border-top-color: var(--orange-200, $orange-200); - - .board-card-score-big { - background-color: var(--orange-50, $orange-50); - } -} - -.devops-card-high { - border-top-color: var(--green-400, $green-400); - - .board-card-score-big { - background-color: var(--green-50, $green-50); - } -} - -.devops-card-title { - margin: $gl-padding auto auto; - max-width: 100px; - - h3 { - font-size: 14px; - margin: 0 0 2px; - } - - .light-text { - font-size: 13px; - line-height: 1.25; - color: var(--gl-text-color-secondary, $gl-text-color-secondary); - } -} - -.board-card-scores { - display: flex; - justify-content: space-around; - align-items: center; - margin: $gl-padding $gl-btn-padding; - line-height: 1; -} - -.board-card-score { - color: var(--gl-text-color-secondary, $gl-text-color-secondary); - - .board-card-score-name { - font-size: 13px; - margin-top: 4px; - } -} - -.board-card-score-value { - font-size: 16px; - color: var(--gl-text-color, $gl-text-color); - font-weight: $gl-font-weight-normal; -} - -.board-card-score-big { - border-top: 2px solid var(--border-color, $border-color); - border-bottom: 1px solid var(--border-color, $border-color); - font-size: 22px; - padding: 10px 0; - font-weight: $gl-font-weight-normal; -} - -.board-card-buttons { - display: flex; - - > * { - font-size: 16px; - color: var(--gl-text-color-secondary, $gl-text-color-secondary); - padding: 10px; - flex-grow: 1; - - &:hover { - background-color: var(--border-color, $border-color); - color: var(--border-color, $border-color); - } - - + * { - border-left: solid 1px var(--border-color, $border-color); - } - } -} - -.devops-steps { - margin-top: $gl-padding; - height: 1px; - min-width: 100%; - justify-content: space-around; - position: relative; - background: var(--border-color, $border-color); -} - -.devops-step { - $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%; - @each $pos in $step-positions { - $i: index($step-positions, $pos); - - &:nth-child(#{$i}) { - left: $pos; - } - } - - position: absolute; - transform-origin: 75% 50%; - padding: 8px; - height: 50px; - width: 50px; - border-radius: 3px; - display: flex; - flex-direction: column; - align-items: center; - border: solid 1px var(--border-color, $border-color); - background: var(--white, $white); - transform: translate(-50%, -50%); - color: var(--gl-text-color-secondary, $gl-text-color-secondary); - fill: var(--gl-text-color-secondary, $gl-text-color-secondary); - box-shadow: 0 2px 4px var(--dropdown-shadow-color, $dropdown-shadow-color); - - &:hover { - padding: 8px 10px; - fill: currentColor; - z-index: 100; - height: auto; - width: auto; - - .devops-step-title { - max-height: 2em; - opacity: 1; - transition: opacity 0.2s; - } - - svg { - transform: scale(1.5); - margin: $gl-btn-padding; - } - } - - svg { - transition: transform 0.1s; - width: 30px; - height: 30px; - min-height: 30px; - min-width: 30px; - } -} - -.devops-step-title { - max-height: 0; - opacity: 0; - text-transform: uppercase; - margin: $gl-vert-padding 0 0; - text-align: center; - font-size: 12px; -} - -.devops-high-score { - color: var(--green-400, $green-400); -} - -.devops-average-score { - color: var(--orange-500, $orange-500); -} - -.devops-low-score { - color: var(--red-400, $red-400); -} diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index db4be3f18e8..4beb5edbe7b 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -45,3 +45,9 @@ $header-height: 40px; margin-left: auto; margin-right: auto; } + +// needed for external_link +svg.s16 { + width: 16px; + height: 16px; +} diff --git a/app/assets/stylesheets/page_bundles/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss index d7473d2c942..9fe56fd337f 100644 --- a/app/assets/stylesheets/page_bundles/merge_conflicts.scss +++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss @@ -173,22 +173,5 @@ text-align: right; padding: $gl-padding-top $gl-padding; color: var(--gl-text-color, $gl-text-color); - - .discard-actions { - display: inline-block; - margin-left: 10px; - } - } - - .resolve-conflicts-form { - h4 { - margin-top: 0; - } - - .resolve-info { - @media(max-width: map-get($grid-breakpoints, lg)-1) { - margin-bottom: $gl-padding; - } - } } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 9fdc30359f8..5e9dd883635 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -7,6 +7,10 @@ .diff-files-holder { flex: 1; min-width: 0; + + .vue-recycle-scroller__item-wrapper { + overflow: visible; + } } .with-system-header { diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 858e13fc558..03dd12ec230 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -38,18 +38,6 @@ $status-box-line-height: 26px; color: var(--blue-600, $blue-600); } } - - .status-box { - font-size: $tooltip-font-size; - margin-top: 0; - margin-right: $gl-padding-4; - line-height: $status-box-line-height; - - @include media-breakpoint-down(xs) { - line-height: unset; - padding: $gl-padding-4 $gl-input-padding; - } - } } } @@ -199,11 +187,6 @@ $status-box-line-height: 26px; align-items: center; flex-wrap: wrap; - .status-box { - margin-top: 0; - order: 1; - } - .milestone-buttons { margin-left: auto; order: 2; diff --git a/app/assets/stylesheets/page_bundles/new_namespace.scss b/app/assets/stylesheets/page_bundles/new_namespace.scss new file mode 100644 index 00000000000..60aa3c8f29f --- /dev/null +++ b/app/assets/stylesheets/page_bundles/new_namespace.scss @@ -0,0 +1,28 @@ +@import 'mixins_and_variables_and_functions'; + +$new-namespace-panel-illustration-width: 215px; +$new-namespace-panel-height: 240px; + +.new-namespace-panel-illustration { + width: $new-namespace-panel-illustration-width; +} + +.new-namespace-panel-wrapper { + @include media-breakpoint-down(md) { + width: 100%; + } + width: 50%; +} + +.new-namespace-panel { + &:hover { + background-color: $gray-10; + } + + color: $purple-700; + min-height: $new-namespace-panel-height; + text-align: center; + @include media-breakpoint-up(lg) { + text-align: left; + } +} diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index 5eaf91c3017..ddc638197ca 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -95,7 +95,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-font-weight-normal; &.label-dark { - @include gl-text-gray-900; + color: var(--gray-900, $gray-900); } &.label-bold { diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index 2f3cf889549..c9171eb4fc7 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -306,11 +306,6 @@ } } - // ensure .build-content has hover style when action-icon is hovered - .ci-job-dropdown-container:hover .build-content { - @extend .build-content:hover; - } - .ci-status-icon svg { height: 24px; width: 24px; @@ -330,6 +325,7 @@ @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); @@ -409,7 +405,7 @@ fill: var(--gray-500, $gray-500); } - .spinner { + .gl-spinner { top: 2px; } diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index 6ef7f912ea9..ace91d197b6 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -182,11 +182,6 @@ button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle { border-bottom-color: $border-color; } - &::after { - margin-top: 1px; - border-bottom-color: $white; - } - /** * Center dropdown menu in mini graph */ diff --git a/app/assets/stylesheets/page_bundles/todos.scss b/app/assets/stylesheets/page_bundles/todos.scss index 3e20ca9c62f..e7813e3b56e 100644 --- a/app/assets/stylesheets/page_bundles/todos.scss +++ b/app/assets/stylesheets/page_bundles/todos.scss @@ -8,8 +8,6 @@ .todos-list > .todo { // workaround because we cannot use border-collapse border-top: 1px solid transparent; - display: flex; - flex-direction: row; &:hover { background-color: var(--blue-50, $blue-50); @@ -26,25 +24,6 @@ } } - .todo-avatar, - .todo-actions { - @include transition(opacity); - flex: 0 0 auto; - } - - .todo-actions { - display: flex; - justify-content: center; - flex-direction: column; - margin-left: 10px; - min-width: 55px; - } - - .todo-item { - flex: 0 1 100%; - min-width: 0; - } - &.todo-pending.done-reversible { &:hover { border-color: var(--border-color, $border-color); @@ -71,58 +50,22 @@ .todo-item { @include transition(opacity); - .todo-title { - > .title-item { - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - } - - .todo-label { - flex: 0 1 auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - } - .status-box { - margin: 0; - float: none; - display: inline-block; - font-weight: $gl-font-weight-normal; - padding: 0 5px; line-height: inherit; - font-size: 14px; } .todo-label, .todo-project { a { - font-weight: $gl-font-weight-normal; color: var(--blue-600, $blue-600); } } .todo-body { - .badge.badge-pill, p { color: var(--gl-text-color, $gl-text-color); } - .md { - color: $gl-grayish-blue; - font-size: $gl-font-size; - } - - code { - white-space: pre-wrap; - } - pre { border: 0; background: var(--gray-50, $gray-50); @@ -139,120 +82,13 @@ float: none; } - p:last-child { - margin-bottom: 0; - } - } - - .gl-label-scoped { - --label-inset-border: inset 0 0 0 1px currentColor; - } -} - -@include media-breakpoint-down(lg) { - .todos-filters { - .filter-categories { - width: 75%; - - .filter-item { - margin-bottom: 10px; - } + .gl-label-scoped { + --label-inset-border: inset 0 0 0 1px currentColor; } - } -} -@include media-breakpoint-down(sm) { - .container-fluid .todos-list-container { - margin: 0 (-$gl-padding); - } - - .todo { - .avatar { - display: none; - } - } - - .todo-item { - .todo-title { - margin-bottom: 10px; - - .todo-label { - white-space: normal; - } - } - - .todo-body { - margin: 0; + @include media-breakpoint-down(sm) { border-left: 2px solid var(--border-color, $border-color); padding-left: 10px; } } - - .todos-filters { - .filter-categories { - width: auto; - } - - .dropdown-menu-toggle { - width: 100%; - } - - .dropdown-menu-toggle-sort { - width: auto; - } - } -} - -.todos-empty { - display: flex; - flex-direction: column; - max-width: 900px; - margin-left: auto; - margin-right: auto; - - @include media-breakpoint-up(sm) { - flex-direction: row; - padding-top: 80px; - } -} - -.todos-empty-content { - align-self: center; - max-width: 480px; -} - -.todos-empty-hero { - width: 200px; - margin-left: auto; - margin-right: auto; - - @include media-breakpoint-up(sm) { - width: 300px; - margin-right: 0; - order: 2; - } -} - -.todos-all-done { - padding-top: 20px; - - @include media-breakpoint-up(sm) { - padding-top: 50px; - } - - > svg { - display: block; - max-width: 300px; - margin: 0 auto 20px; - } - - p { - max-width: 470px; - margin-left: auto; - margin-right: auto; - } - - a { - font-weight: $gl-font-weight-bold; - } } diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 14cff5b038a..c177d0b74a2 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -37,10 +37,6 @@ .file-title { @include gl-font-monospace; - line-height: 35px; - padding-top: 7px; - padding-bottom: 7px; - display: flex; } .editor-ref { @@ -69,19 +65,15 @@ } .file-buttons { - display: flex; flex: 1; - justify-content: flex-end; } .soft-wrap-toggle { - display: inline-block; - vertical-align: top; font-family: $regular-font; - margin: 0 $btn-side-margin; + margin-left: $gl-padding-8; .soft-wrap { - display: block; + display: inline-flex; } .no-wrap { @@ -94,7 +86,7 @@ } .no-wrap { - display: block; + display: inline-flex; } } } @@ -111,17 +103,21 @@ .new-file-path { max-width: none; width: 100%; - margin-bottom: 3px; + margin-top: $gl-padding-8; } .file-buttons { - display: block; + display: flex; + flex-direction: column; width: 100%; - margin-bottom: 10px; + + .md-header-toolbar { + margin: $gl-padding 0; + } .soft-wrap-toggle { width: 100%; - margin: 3px 0; + margin-left: 0; } @media(max-width: map-get($grid-breakpoints, md)-1) { @@ -168,7 +164,6 @@ .license-selector, .gitignore-selector, .gitlab-ci-yml-selector, - .gitlab-ci-syntax-yml-selector, .dockerfile-selector, .template-type-selector, .metrics-dashboard-selector { diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index c05216ac6e6..9182292ffd3 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -1,30 +1,30 @@ -.shortcut-mappings { - font-size: 12px; - color: $gray-700; - - tbody:first-child tr:first-child { - padding-top: 0; +.shortcut-help { + &-body { + height: 80vh; + overflow-y: scroll; } - th { - padding-top: 15px; - line-height: 1.5; - color: $help-shortcut-header-color; - text-align: left; + &-container { + column-count: 1; + @include media-breakpoint-up(md) { + column-count: 2; + } + column-gap: 1rem; } - td { - padding-top: 3px; - padding-bottom: 3px; - vertical-align: top; - line-height: 20px; - } + &-mapping { + overflow: hidden; + break-inside: avoid; + + &-title { + margin-left: 40%; + } - .shortcut { - padding-right: 10px; - color: $gray-300; - text-align: right; - white-space: nowrap; + kbd { + margin: 0.1rem 0; + line-height: unset; + font-size: unset; + } } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b9f5a427a24..0437fa19752 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -217,7 +217,6 @@ .title { color: $gl-text-color; - margin-bottom: $gl-padding-4; line-height: $gl-line-height-20; .avatar { diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 59768f4cda8..c025d8569a7 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -369,10 +369,6 @@ table { .btn { float: none; width: 100%; - - &:not(:last-child) { - margin-bottom: 10px; - } } } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 801dd44be8e..01739c7eb3e 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -372,7 +372,7 @@ $system-note-svg-size: 16px; top: $mr-tabs-height + $header-height; .with-performance-bar & { - top: 126px; + top: 123px; } } @@ -672,6 +672,7 @@ $system-note-svg-size: 16px; align-items: center; margin-left: 10px; color: $gray-400; + margin-top: -4px; @include notes-media('max', map-get($grid-breakpoints, sm) - 1) { float: none; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 16f96ebadc9..dfd64d0773c 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -237,11 +237,6 @@ line-height: 34px; margin: 0; - > li + li::before { - padding: 0 3px; - color: $gray-300; - } - a { color: $gl-text-color; } @@ -1032,11 +1027,6 @@ pre.light-well { } } -.issuable-footer { - padding-top: $gl-padding; - padding-bottom: 37px; -} - .project-ci-linter { .ci-editor { height: 400px; diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss index 346b3f61caa..7d74070b4f2 100644 --- a/app/assets/stylesheets/pages/settings_ci_cd.scss +++ b/app/assets/stylesheets/pages/settings_ci_cd.scss @@ -11,10 +11,6 @@ .trigger-actions { white-space: nowrap; - - .btn { - margin-left: 10px; - } } .auto-devops-card { diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index 11b4bde74a6..9d98fe5c739 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -70,6 +70,7 @@ $indigo-700: #a6a6de; $indigo-800: #d1d1f0; $indigo-900: #ebebfa; $indigo-950: #f7f7ff; +$indigo-900-alpha-008: rgba($indigo-900, 0.08); $gray-lightest: #222; $gray-light: $gray-50; @@ -160,6 +161,7 @@ body.gl-dark { --indigo-800: #{$indigo-800}; --indigo-900: #{$indigo-900}; --indigo-950: #{$indigo-950}; + --indigo-900-alpha-008: #{$indigo-900-alpha-008}; --gl-text-color: #{$gray-900}; --border-color: #{$border-color}; @@ -232,9 +234,7 @@ $well-inner-border: $gray-200; } // white-ish text for light labels -// and for scoped label value (the right section) -.gl-label-text-light.gl-label-text-light, -.gl-label-text-dark + .gl-label-text-dark { +.gl-label-text-light.gl-label-text-light { color: $gray-900; } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 024162eba3e..c22a1ae1187 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -172,3 +172,38 @@ width: 50%; } } + +.gl-sm-mr-3 { + @include media-breakpoint-up(sm) { + margin-right: $gl-spacing-scale-3; + } +} + +.gl-mb-n3 { + margin-bottom: -$gl-spacing-scale-3; +} + +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1408 +$gl-line-height-42: px-to-rem(42px); + +.gl-line-height-42 { + line-height: $gl-line-height-42; +} + +.gl-w-grid-size-30 { + width: $grid-size * 30; +} + +.gl-w-grid-size-40 { + width: $grid-size * 40; +} + +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2209 +.gl-max-w-none\! { + max-width: none !important; +} + +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2209 +.gl-max-h-none\! { + max-height: none !important; +} |