diff options
Diffstat (limited to 'app/assets/stylesheets')
46 files changed, 1320 insertions, 1402 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index ff2b82d1806..24549a170bd 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -31,3 +31,4 @@ @import './pages/storage_quota'; @import './pages/tree'; @import './pages/users'; +@import './pages/hierarchy'; diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 377d5130571..a9be1d89495 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -1,4 +1,5 @@ $design-pin-diameter: 28px; +$design-pin-diameter-sm: 24px; $t-gray-a-16-design-pin: rgba($black, 0.16); .layout-page.design-detail-layout { @@ -12,24 +13,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); top: 35px; } - .design-note-pin { - display: flex; - height: $design-pin-diameter; - width: $design-pin-diameter; - box-sizing: content-box; - background-color: $purple-500; - color: $white; - font-weight: $gl-font-weight-bold; - border-radius: 50%; - z-index: 1; - padding: 0; - border: 0; - - &.resolved { - background-color: $gray-500; - } - } - .comment-indicator { border-radius: 50%; } @@ -40,35 +23,6 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); cursor: grabbing; } } - - /** - * Design pin that overlays the design - */ - .frame .design-note-pin { - box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24; - border: $white 2px solid; - will-change: transform, box-shadow, opacity; - // NOTE: verbose transition property required for Safari - transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear; - transform-origin: 0 0; - transform: translate(-50%, -50%); - - &:hover { - transform: scale(1.2) translate(-50%, -50%); - } - - &:active { - box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin; - } - - &.inactive { - @include gl-opacity-5; - - &:hover { - @include gl-opacity-10; - } - } - } } .design-scaler-wrapper { @@ -177,3 +131,63 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); .design-card-header { background: transparent; } + +.design-note-pin { + display: flex; + height: $design-pin-diameter; + width: $design-pin-diameter; + box-sizing: content-box; + background-color: $purple-500; + color: $white; + font-weight: $gl-font-weight-bold; + border-radius: 50%; + z-index: 1; + padding: 0; + border: 0; + + &.draft { + background-color: $orange-500; + } + + &.resolved { + background-color: $gray-500; + } + + &.on-image { + box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24; + border: $white 2px solid; + will-change: transform, box-shadow, opacity; + // NOTE: verbose transition property required for Safari + transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear; + transform-origin: 0 0; + transform: translate(-50%, -50%); + + &:hover { + transform: scale(1.2) translate(-50%, -50%); + } + + &:active { + box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin; + } + + &.inactive { + @include gl-opacity-5; + + &:hover { + @include gl-opacity-10; + } + } + } + + &.small { + position: absolute; + border: 1px solid $white; + height: $design-pin-diameter-sm; + width: $design-pin-diameter-sm; + } + + &.user-avatar { + top: 25px; + right: 8px; + } +} diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index c1c8bfffff7..8e43a9b1b0d 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -46,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 7dd7ab339dd..00000000000 --- a/app/assets/stylesheets/framework/blank.scss +++ /dev/null @@ -1,118 +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; - } - } -} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index e0e9043ae24..9cebd4f49a4 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -158,12 +158,6 @@ line-height: $gl-btn-small-line-height; } - &.btn-xs { - padding: 2px $gl-btn-padding; - font-size: $gl-btn-xs-font-size; - line-height: $gl-btn-xs-line-height; - } - &.btn-success { @include btn-green; } @@ -372,29 +366,6 @@ background-color: transparent; border-color: transparent; } - - &.btn-secondary-hover-link, - &.btn-default-hover-link { - color: $gl-text-color-secondary; - - &:hover, - &:active, - &:focus { - color: $blue-600; - text-decoration: none; - } - } - - &.btn-primary-hover-link { - color: inherit; - - &:hover, - &:active, - &:focus { - color: $blue-600; - text-decoration: none; - } - } } // The .btn-svg class is available for legacy icon buttons to @@ -438,10 +409,6 @@ fieldset[disabled] .btn, cursor: default; } -.btn-no-padding { - padding: 0; -} - // This class helps convert `.gl-button` children so that they consistently // match the style of `.btn` elements which might be around them. Ideally we // wouldn't need this class. diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 2a3ed29258a..7b4f68e7a44 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -267,6 +267,8 @@ .nav-item-name { flex: 1; + overflow: hidden; + text-overflow: ellipsis; } > a, @@ -336,7 +338,8 @@ .nav-sidebar-inner-scroll { @include gl-h-full; @include gl-w-full; - @include gl-overflow-auto; + @include gl-overflow-x-hidden; + @include gl-overflow-y-auto; > div.context-header { @include gl-mt-2; diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index ffacac07517..f0495fdc94e 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -582,6 +582,25 @@ table.code { } } +.diff-expansion-cell { + flex: 1 1; + min-width: max-content; +} + +.diff-expansion-cell-middle { + flex: 0 1 max-content; +} + +@media only screen and (min-width: $breakpoint-xl) { + .diff-expansion-cell-start { + text-align: right; + } + + .diff-expansion-cell-end { + text-align: left; + } +} + // Merge request diff grid layout .diff-grid { .diff-td { @@ -603,6 +622,14 @@ table.code { grid-template-columns: 50px 8px 0 1fr; } + .diff-grid-3-col { + grid-template-columns: 50px 1fr !important; + } + + &.inline-diff-view .diff-grid-3-col { + grid-template-columns: 50px 50px 1fr !important; + } + .diff-grid-comments { display: grid; grid-template-columns: 1fr 1fr; @@ -832,6 +859,8 @@ table.code { } .diff-files-changed { + background-color: $body-bg; + .inline-parallel-buttons { @include gl-relative; z-index: 1; @@ -840,7 +869,6 @@ table.code { @include media-breakpoint-up(sm) { @include gl-sticky; top: calc(#{$header-height} + #{$mr-tabs-height}); - @include gl-bg-white; z-index: 200; .with-performance-bar & { @@ -1064,24 +1092,6 @@ table.code { } } -.frame .badge.badge-pill, -.image-diff-avatar-link .badge.badge-pill, -.user-avatar-link .badge.badge-pill, -.notes > .badge.badge-pill { - position: absolute; - background-color: $blue-400; - color: $white; - border: $white 1px solid; - min-height: $gl-padding; - padding: 5px 8px; - border-radius: 12px; - - &:focus { - outline: none; - } -} - -.frame .badge.badge-pill, .frame .image-comment-badge, .frame .comment-indicator { // Center align badges on the frame @@ -1113,11 +1123,6 @@ table.code { } } -.notes > .badge.badge-pill { - display: none; - left: -13px; -} - .discussion-notes { min-height: 35px; @@ -1126,18 +1131,22 @@ table.code { min-height: 25px; } + .diff-notes-expand { + display: none; + } + &.collapsed { background-color: $white; + .diff-notes-expand { + display: initial; + } + .diff-notes-collapse, .note, .discussion-reply-holder { display: none; } - - .notes > .badge.badge-pill { - display: block; - } } } @@ -1183,7 +1192,7 @@ table.code { } } -@media (max-width: map-get($grid-breakpoints, md)-1) { +@media (max-width: map-get($grid-breakpoints, lg)-1) { .diffs .files { @include fixed-width-container; flex-direction: column; diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 9209a0c2173..9387500e66f 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -411,11 +411,6 @@ span.idiff { margin-right: 1.5em; } -.label-lfs { - color: $common-gray-light; - border: 1px solid $common-gray-light; -} - .preview-container { overflow: auto; diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 2a46e50f0da..4d0d64ae723 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -150,6 +150,10 @@ label { margin-bottom: 0; margin-top: #{$grid-size / 2}; font-size: $gl-font-size; + + .invisible { + visibility: hidden; + } } .gl-field-error, diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 68535badd78..1004383cfd3 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -150,7 +150,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important } li { - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { + .badge.badge-pill:not(.gl-badge) { box-shadow: none; font-weight: $gl-font-weight-bold; } @@ -415,49 +415,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important } } -.title-container, -.navbar-nav { - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { - position: inherit; - font-weight: $gl-font-weight-normal; - margin-left: -6px; - font-size: 11px; - color: var(--gray-950, $white); - padding: 0 5px; - line-height: 12px; - border-radius: 7px; - box-shadow: 0 1px 0 rgba($gl-header-color, 0.2); - - &.green-badge { - background-color: var(--green-400, $green-400); - } - - &.merge-requests-count { - background-color: var(--orange-400, $orange-400); - } - - &.todos-count { - background-color: var(--blue-400, $blue-400); - } - } - - .canary-badge { - .badge { - font-size: $gl-font-size-small; - line-height: $gl-line-height; - padding: 0 $grid-size; - } - - &:hover { - text-decoration: none; - - .badge { - text-decoration: none; - } - } - } -} - @include media-breakpoint-down(xs) { .navbar-gitlab .container-fluid { font-size: 18px; diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index c6e52c13e83..7731ec751c9 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -67,6 +67,27 @@ } } } + + .gl-tabs-nav { + @include media-breakpoint-down(xs) { + .nav-item { + flex: 1; + border-bottom: 1px solid $border-color; + } + + .gl-tab-nav-item { + padding-top: $gl-padding-4; + padding-bottom: $gl-padding-8; + } + + .md-header-toolbar { + width: 100%; + display: flex; + flex-wrap: wrap; + margin-top: $gl-padding-8; + } + } + } } .md-header-tab { diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 563075b911c..8cad55f414a 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -18,7 +18,6 @@ line-height: 28px; color: $gl-text-color-secondary; border: 0; - border-bottom: 2px solid transparent; white-space: nowrap; &:hover, @@ -26,7 +25,7 @@ &:focus { text-decoration: none; color: $black; - border-bottom: 2px solid $gray-darkest; + box-shadow: inset 0 -2px 0 0 $gray-darkest; } } @@ -40,7 +39,7 @@ a.active { color: $black; font-weight: $gl-font-weight-bold; - border-bottom: 2px solid var(--gl-theme-accent, $theme-indigo-500); + box-shadow: inset 0 -2px 0 0 var(--gl-theme-accent, $theme-indigo-500); .badge.badge-pill { color: $black; diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 51c41c46f61..feedc40b487 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -47,6 +47,10 @@ margin-bottom: $gl-spacing-scale-2; } + img { + max-width: 100%; + } + img:not(.emoji) { margin: 0 0 8px; } @@ -62,15 +66,6 @@ min-width: inherit; min-height: inherit; background-color: inherit; - max-width: 100%; - } - - &:not(.md) img:not(.emoji) { - border: 1px solid $white-normal; - padding: 5px; - margin: 5px 0; - // Ensure that image does not exceed viewport - max-height: calc(100vh - 100px); } details { @@ -375,7 +370,8 @@ // Loose lists need bottom margin added back p ~ ol, p ~ ul { - margin-bottom: 16px;
} + margin-bottom: 16px; + } } ul:dir(rtl), @@ -521,32 +517,26 @@ -moz-osx-font-smoothing: grayscale; } - .fa-2x, .admonitionblock td.icon [class^='fa icon-'] { font-size: 2em; } - .fa-exclamation-triangle::before, .admonitionblock td.icon .icon-warning::before { content: '⚠'; } - .fa-exclamation-circle::before, .admonitionblock td.icon .icon-important::before { content: '❗'; } - .fa-lightbulb-o::before, .admonitionblock td.icon .icon-tip::before { content: '💡'; } - .fa-thumb-tack::before, .admonitionblock td.icon .icon-note::before { content: '📌'; } - .fa-fire::before, .admonitionblock td.icon .icon-caution::before { content: '🔥'; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 21add43ad3f..31ef5ae0646 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -52,6 +52,11 @@ $spacing-scale: ( 5: #{4 * $grid-size} ); +/* Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 */ +$gl-spacing-scale-48: 48 * $grid-size; +$gl-spacing-scale-75: 75 * $grid-size; +/* End gitlab-ui#1709 */ + /* * Why another sizing scale??? * Great question, friend! @@ -589,8 +594,6 @@ $gl-btn-vert-padding: 8px; $gl-btn-horz-padding: 12px; $gl-btn-small-font-size: 13px; $gl-btn-small-line-height: 18px; -$gl-btn-xs-font-size: 13px; -$gl-btn-xs-line-height: 13px; /* * Badges @@ -722,7 +725,7 @@ $calendar-activity-colors: ( #7fa8c9, #527ba0, #254e77, -); +) !default; /* * Commit Page @@ -931,8 +934,6 @@ Merge requests */ $mr-tabs-height: 48px; $mr-version-controls-height: 56px; -$mr-widget-margin-left: 40px; -$mr-review-bar-height: calc(2rem + 13px); /* Compare Branches diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 97dd7edef13..bd327082e20 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -28,8 +28,24 @@ border-bottom: 1px solid $border; } - a { + button { color: $link; + border: 0; + background: transparent; + + &[disabled] { + color: desaturate($link, 100%); + opacity: 0.5; + cursor: default; + } + + &:hover:not([disabled]) { + text-decoration: underline; + } + + &:not(:focus-visible) { + outline: 0; + } } } @@ -37,11 +53,11 @@ transition: border-left 0.1s ease-out; &.coverage { - border-left: 4px solid $coverage; + border-left: 2px solid $coverage; } &.no-coverage { - border-left: 2px solid $no-coverage; + border-left: 4px solid $no-coverage; } } diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 0b696f1be60..28878280d24 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -36,6 +36,7 @@ $dark-cm: #969896; $dark-cp: #969896; $dark-c1: #969896; $dark-cs: #969896; +$dark-cd: #969896; $dark-gd: #c66; $dark-gh: #8abeb7; $dark-gi: #b5bd68; @@ -168,8 +169,8 @@ $dark-il: #de935f; } } - .diff-grid-left:hover, - .diff-grid-right:hover, + &:not(.match) .diff-grid-left:hover, + &:not(.match) .diff-grid-right:hover, &.code-search-line:hover { .diff-line-num:not(.empty-cell) { @include line-number-hover; @@ -236,6 +237,7 @@ $dark-il: #de935f; .cp { color: $dark-cp; } /* Comment.Preproc */ .c1 { color: $dark-c1; } /* Comment.Single */ .cs { color: $dark-cs; } /* Comment.Special */ + .cd { color: $dark-cd; } /* Comment.Doc */ .gd { color: $dark-gd; } /* Generic.Deleted */ .ge { font-style: italic; } /* Generic.Emph */ .gh { /* Generic.Heading */ diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index ae72c0b6bf4..6faf1cffdef 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -38,6 +38,7 @@ $monokai-cm: #75715e; $monokai-cp: #75715e; $monokai-c1: #75715e; $monokai-cs: #75715e; +$monokai-cd: #75715e; $monokai-kc: #66d9ef; $monokai-kd: #66d9ef; $monokai-kn: #f92672; @@ -169,8 +170,8 @@ $monokai-gh: #75715e; } } - .diff-grid-left:hover, - .diff-grid-right:hover, + &:not(.match) .diff-grid-left:hover, + &:not(.match) .diff-grid-right:hover, &.code-search-line:hover { .diff-line-num:not(.empty-cell) { @include line-number-hover; @@ -240,6 +241,7 @@ $monokai-gh: #75715e; .cp { color: $monokai-cp; } /* Comment.Preproc */ .c1 { color: $monokai-c1; } /* Comment.Single */ .cs { color: $monokai-cs; } /* Comment.Special */ + .cd { color: $monokai-cd; } /* Comment.Doc */ .ge { font-style: italic; } /* Generic.Emph */ .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */ .kc { color: $monokai-kc; } /* Keyword.Constant */ diff --git a/app/assets/stylesheets/highlight/themes/none.scss b/app/assets/stylesheets/highlight/themes/none.scss index 913b289d808..9c28d9463dc 100644 --- a/app/assets/stylesheets/highlight/themes/none.scss +++ b/app/assets/stylesheets/highlight/themes/none.scss @@ -66,9 +66,9 @@ } } - .diff-grid-left:hover, - .diff-grid-right:hover, - &.code-search-line:hover { + &:not(.match) .diff-grid-left:hover, + &:not(.match) .diff-grid-right:hover, + &:not(.match) &.code-search-line:hover { .diff-line-num:not(.empty-cell) { @include line-number-hover; } @@ -204,6 +204,7 @@ .cp { color: $gl-text-color; } /* Comment.Preproc */ .c1 { color: $gl-text-color; } /* Comment.Single */ .cs { color: $gl-text-color; } /* Comment.Special */ + .cd { color: $gl-text-color; } /* Comment.Doc */ .ge { color: $gl-text-color; } /* Generic.Emph */ .gr { color: $gl-text-color; } /* Generic.Error */ .gh { color: $gl-text-color; } /* Generic.Heading */ diff --git a/app/assets/stylesheets/highlight/themes/solarized-dark.scss b/app/assets/stylesheets/highlight/themes/solarized-dark.scss index eee699ca4c2..c9f889c79fc 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss @@ -35,6 +35,7 @@ $solarized-dark-cm: #586e75; $solarized-dark-cp: #859900; $solarized-dark-c1: #586e75; $solarized-dark-cs: #859900; +$solarized-dark-cd: #586e75; $solarized-dark-gd: #2aa198; $solarized-dark-ge: #93a1a1; $solarized-dark-gr: #dc322f; @@ -148,8 +149,8 @@ $solarized-dark-il: #2aa198; @include line-coverage-border-color($solarized-dark-coverage, $solarized-dark-no-coverage); } - .diff-grid-left:hover, - .diff-grid-right:hover, + &:not(.match) .diff-grid-left:hover, + &:not(.match) .diff-grid-right:hover, &.code-search-line:hover { .diff-line-num:not(.empty-cell) { @include line-number-hover; @@ -258,6 +259,7 @@ $solarized-dark-il: #2aa198; .cp { color: $solarized-dark-cp; } /* Comment.Preproc */ .c1 { color: $solarized-dark-c1; } /* Comment.Single */ .cs { color: $solarized-dark-cs; } /* Comment.Special */ + .cd { color: $solarized-dark-cd; } /* Comment.Doc */ .gd { color: $solarized-dark-gd; } /* Generic.Deleted */ .ge { /* Generic.Emph */ color: $solarized-dark-ge; diff --git a/app/assets/stylesheets/highlight/themes/solarized-light.scss b/app/assets/stylesheets/highlight/themes/solarized-light.scss index 8c5e1f7318b..0108d7e496f 100644 --- a/app/assets/stylesheets/highlight/themes/solarized-light.scss +++ b/app/assets/stylesheets/highlight/themes/solarized-light.scss @@ -37,6 +37,7 @@ $solarized-light-cm: #93a1a1; $solarized-light-cp: #859900; $solarized-light-c1: #93a1a1; $solarized-light-cs: #859900; +$solarized-light-cd: #93a1a1; $solarized-light-gd: #2aa198; $solarized-light-ge: #586e75; $solarized-light-gr: #dc322f; @@ -168,8 +169,8 @@ $solarized-light-il: #2aa198; } } - .diff-grid-left:hover, - .diff-grid-right:hover, + &:not(.match) .diff-grid-left:hover, + &:not(.match) .diff-grid-right:hover, &.code-search-line:hover { .diff-line-num:not(.empty-cell) { @include line-number-hover; @@ -266,6 +267,7 @@ $solarized-light-il: #2aa198; .cp { color: $solarized-light-cp; } /* Comment.Preproc */ .c1 { color: $solarized-light-c1; } /* Comment.Single */ .cs { color: $solarized-light-cs; } /* Comment.Special */ + .cd { color: $solarized-light-cd; } /* Comment.Doc */ .gd { color: $solarized-light-gd; } /* Generic.Deleted */ .ge { /* Generic.Emph */ color: $solarized-light-ge; diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 80052f4a4d5..91d8f4a1ba5 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -18,6 +18,7 @@ $white-cm: #998; $white-cp: #999; $white-c1: #998; $white-cs: #999; +$white-cd: #998; $white-gd: $black; $white-gd-bg: #fdd; $white-gd-x: $black; @@ -118,6 +119,15 @@ pre.code, .line_expansion { @include diff-expansion($gray-light, $border-color, $blue-600); + + &.diff-tr:last-child { + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + + .diff-td { + border-bottom: 0; + } + } } // Diff line @@ -128,8 +138,8 @@ pre.code, @include match-line; } - .diff-grid-left:hover, - .diff-grid-right:hover, + &:not(.match) .diff-grid-left:hover, + &:not(.match) .diff-grid-right:hover, &.code-search-line:hover { .diff-line-num:not(.empty-cell):not(.conflict_marker_their):not(.conflict_marker_our) { @include line-number-hover; @@ -281,6 +291,9 @@ span.highlight_word { font-weight: $gl-font-weight-bold; font-style: italic; } +.cd { color: $white-cd; + font-style: italic; } + .gd { color: $white-gd; background-color: $white-gd-bg; diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss index 75c2428c1d4..fd212d14e30 100644 --- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss +++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss @@ -22,6 +22,7 @@ $highlighted-cm: #998; $highlighted-cp: #999; $highlighted-c1: #998; $highlighted-cs: #999; +$highlighted-cd: #998; $highlighted-gd: #000; $highlighted-gd-bg: #fdd; $highlighted-gd-x: #000; @@ -173,6 +174,9 @@ span.highlight_word { font-weight: $gl-font-weight-bold; font-style: italic; } +.cd { color: $highlighted-cd; + font-style: italic; } + .gd { color: $highlighted-gd; background-color: $highlighted-gd-bg; diff --git a/app/assets/stylesheets/page_bundles/dashboard_projects.scss b/app/assets/stylesheets/page_bundles/dashboard_projects.scss new file mode 100644 index 00000000000..eb0e1701b7f --- /dev/null +++ b/app/assets/stylesheets/page_bundles/dashboard_projects.scss @@ -0,0 +1,35 @@ +@import 'mixins_and_variables_and_functions'; + +.blank-state { + padding: 20px 50px; + min-height: 240px; + width: calc(50% - #{$gl-padding-8}); + + @include media-breakpoint-down(sm) { + width: 100%; + flex-direction: column; + justify-content: center; + padding: 50px 20px; + } +} + +.blank-state-link { + &:hover { + background-color: $gray-light; + text-decoration: none; + color: $gl-text-color; + } +} + +.blank-state-icon { + svg { + display: block; + } +} + +.blank-state-body { + @include media-breakpoint-down(sm) { + text-align: center; + margin-top: 20px; + } +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index d37171bc75e..6c270852e53 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -630,7 +630,6 @@ $ide-commit-header-height: 48px; width: 1px; background: var(--ide-highlight-background, $white); } - } &.is-right { @@ -642,17 +641,6 @@ $ide-commit-header-height: 48px; left: -1px; } } - - .ide-commit-badge { - background-color: var(--ide-highlight-accent, $almost-black) !important; - color: var(--ide-highlight-background, $white) !important; - position: absolute; - left: 38px; - top: $gl-padding-8; - font-size: $gl-font-size-12; - padding: 2px $gl-padding-4; - font-weight: $gl-font-weight-bold !important; - } } .ide-activity-bar { diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 9fe0490571e..1c8fd7e2590 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -40,10 +40,6 @@ $header-height: 40px; max-width: 1000px; } -.jira-connect-app-body { - max-width: 768px; -} - // needed for external_link svg.s16 { width: 16px; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 37ab2e2be2b..63e951be698 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -1,5 +1,10 @@ @import 'mixins_and_variables_and_functions'; +$mr-review-bar-height: calc(2rem + 13px); +$mr-widget-margin-left: 40px; +$mr-widget-min-height: 69px; +$tabs-holder-z-index: 250; + .compare-versions-container { min-width: 0; } @@ -45,11 +50,9 @@ top: calc(#{$top-pos} + var(--system-header-height, 0px) + var(--performance-bar-height, 0px)); // stylelint-disable-next-line length-zero-no-unit max-height: calc(100vh - #{$top-pos} - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); - z-index: 205; .drag-handle { bottom: 16px; - transform: translateX(10px); } } @@ -94,7 +97,7 @@ line-height: 0; } -@media (max-width: map-get($grid-breakpoints, md)-1) { +@media (max-width: map-get($grid-breakpoints, lg)-1) { .diffs .files { .diff-tree-list { position: relative; @@ -110,6 +113,638 @@ } } +.ci-widget-container { + justify-content: space-between; + flex: 1; + flex-direction: row; + + @include media-breakpoint-down(sm) { + flex-direction: column; + + .stage-cell .stage-container { + margin-top: 16px; + } + + .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu { + transform: initial; + } + } + + .coverage { + font-size: 12px; + color: var(--gray-500, $gray-500); + line-height: initial; + } +} + +.deploy-body { + display: flex; + align-items: center; + flex-wrap: wrap; + + @include media-breakpoint-up(xs) { + flex-wrap: nowrap; + white-space: nowrap; + } + + @include media-breakpoint-down(md) { + flex-direction: column; + align-items: flex-start; + + .deployment-info { + margin-bottom: $gl-padding; + } + } + + > *:not(:last-child) { + margin-right: 0.3em; + } + + svg { + vertical-align: text-top; + } + + .deployment-info { + flex: 1; + white-space: nowrap; + text-overflow: ellipsis; + min-width: 100px; + + @include media-breakpoint-up(xs) { + min-width: 0; + max-width: 100%; + } + } + + .dropdown-menu { + width: 400px; + } +} + +.deploy-heading, +.merge-train-position-indicator { + @include media-breakpoint-up(md) { + padding: $gl-padding-8 $gl-padding; + } + + .media-body { + min-width: 0; + font-size: 12px; + margin-left: 32px; + } + + &:not(:last-child) { + border-bottom: 1px solid var(--border-color, $border-color); + } +} + +.diff-file-row.is-active { + background-color: var(--gray-50, $gray-50); +} + +.mr-conflict-loader { + max-width: 334px; + + > svg { + vertical-align: middle; + } +} + +.mr-info-list { + clear: left; + position: relative; + padding-top: 4px; + + p { + margin: 0; + position: relative; + padding: 4px 0; + + &:last-child { + padding-bottom: 0; + } + } + + &.mr-memory-usage { + p { + float: left; + } + + .memory-graph-container { + float: left; + margin-left: 5px; + } + } +} + +.mr-memory-usage { + width: 100%; + + p.usage-info-loading .usage-info-load-spinner { + margin-right: 10px; + font-size: 16px; + } +} + +.mr-ready-to-merge-loader { + max-width: 418px; + + > svg { + vertical-align: middle; + } +} + +.mr-section-container { + border: 1px solid var(--border-color, $border-color); + border-radius: $border-radius-default; + background: var(--white, $white); + + > .mr-widget-border-top:first-of-type { + border-top: 0; + } +} + +.mr-source-target { + flex-wrap: wrap; + padding: $gl-padding; + background: var(--white, $white); + min-height: $mr-widget-min-height; + + @include media-breakpoint-up(md) { + align-items: center; + } + + .git-merge-container { + justify-content: space-between; + flex: 1; + flex-direction: row; + align-items: center; + + @include media-breakpoint-down(md) { + flex-direction: column; + align-items: stretch; + + .branch-actions { + margin-top: 16px; + } + } + + @include media-breakpoint-up(lg) { + .branch-actions { + align-self: center; + margin-left: $gl-padding; + white-space: nowrap; + } + } + } + + .diverged-commits-count { + color: var(--gray-500, $gl-text-color-secondary); + } +} + +.mr-state-widget { + color: var(--gl-text-color, $gl-text-color); + + .commit-message-edit { + border-radius: $border-radius-default; + } + + .mr-widget-section:not(:first-child) { + border-top: solid 1px var(--border-color, $border-color); + } + + .mr-widget-alert-container + .mr-widget-section { + border-top: 0; + } + + .mr-fast-forward-message { + padding-left: $gl-padding-50; + padding-bottom: $gl-padding; + } + + .commits-list { + > li { + padding: $gl-padding; + + @include media-breakpoint-up(md) { + margin-left: $gl-spacing-scale-7; + } + } + } + + .mr-commit-dropdown { + .dropdown-menu { + @include media-breakpoint-up(md) { + width: 150%; + } + } + } + + .mr-report { + padding: 0; + + > .media { + padding: $gl-padding; + } + } + + form { + margin-bottom: 0; + + .clearfix { + margin-bottom: 0; + } + } + + label { + margin-bottom: 0; + } + + .btn { + font-size: $gl-font-size; + } + + .accept-merge-holder { + .accept-action { + display: inline-block; + float: left; + } + } + + .ci-widget { + color: var(--gl-text-color, $gl-text-color); + display: flex; + align-items: center; + justify-content: space-between; + + @include media-breakpoint-down(xs) { + flex-wrap: wrap; + } + + .ci-widget-content { + display: flex; + align-items: center; + flex: 1; + } + } + + .mr-widget-icon { + font-size: 22px; + } + + .mr-loading-icon { + margin: 3px 0; + } + + .ci-status-icon svg { + margin: 3px 0; + position: relative; + overflow: visible; + display: block; + } + + .mr-widget-pipeline-graph { + .dropdown-menu { + z-index: $zindex-dropdown-menu; + } + } + + .normal { + flex: 1; + flex-basis: auto; + } + + .capitalize { + text-transform: capitalize; + } + + .label-branch { + @include gl-font-monospace; + font-size: 95%; + color: var(--gl-text-color, $gl-text-color); + font-weight: normal; + overflow: hidden; + word-break: break-all; + } + + .deploy-link, + .label-branch { + &.label-truncate { + // NOTE: This selector targets its children because some of the HTML comes from + // 'source_branch_link'. Once this external HTML is no longer used, we could + // simplify this. + > a, + > span { + display: inline-block; + max-width: 12.5em; + margin-bottom: -6px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + } + } + + .mr-widget-body { + &:not(.mr-widget-body-line-height-1) { + line-height: 28px; + } + + @include clearfix; + + .approve-btn { + margin-right: 5px; + } + + h4 { + float: left; + font-weight: $gl-font-weight-bold; + font-size: 14px; + line-height: inherit; + margin-top: 0; + margin-bottom: 0; + + time { + font-weight: $gl-font-weight-normal; + } + } + + .btn-grouped { + margin-left: 0; + margin-right: 7px; + } + + label { + font-weight: $gl-font-weight-normal; + } + + .spacing { + margin: 0 0 0 10px; + } + + .bold, + .gl-font-weight-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; + } + + .danger { + color: var(--red-500, $red-500); + } + + .spacing, + .bold, + .gl-font-weight-bold { + vertical-align: middle; + } + + .dropdown-menu { + li a { + padding: 5px; + } + + .merge-opt-icon { + line-height: 1.5; + } + + .merge-opt-title { + margin-left: 8px; + } + } + + .has-custom-error { + display: inline-block; + } + + @include media-breakpoint-down(xs) { + p { + font-size: 13px; + } + + .btn-grouped { + float: none; + margin-right: 0; + } + + .accept-action { + width: 100%; + text-align: center; + } + } + + .commit-message-editor { + label { + padding: 0; + } + } + + &.mr-widget-empty-state { + line-height: 20px; + padding: $gl-padding; + + .artwork { + + @include media-breakpoint-down(md) { + margin-bottom: $gl-padding; + } + } + + .text { + p { + margin-top: $gl-padding; + } + + .highlight { + margin: 0 0 $gl-padding; + font-weight: $gl-font-weight-bold; + } + } + } + + &.mr-pipeline-suggest { + border-radius: $border-radius-default; + line-height: 20px; + border: 1px solid var(--border-color, $border-color); + + .circle-icon-container { + color: var(--gray-100, $gl-text-color-quaternary); + } + } + } + + .ci-coverage { + float: right; + } + + .stop-env-container { + color: var(--gl-text-color, $gl-text-color); + float: right; + + a { + color: var(--gl-text-color, $gl-text-color); + } + } +} + +.mr-widget-alert-container { + $radius: $border-radius-default - 1px; + + border-radius: $radius $radius 0 0; + + .gl-alert:not(:last-child) { + margin-bottom: 1px; + } +} + +.mr-widget-body, +.mr-widget-content { + padding: $gl-padding; +} + +.mr-widget-border-top { + border-top: 1px solid var(--border-color, $border-color); +} + +.mr-widget-extension { + border-top: 1px solid var(--border-color, $border-color); + background-color: var(--gray-50, $gray-50); + + &.clickable:hover { + background-color: var(--gray-100, $gray-100); + cursor: pointer; + } +} + +.mr-widget-extension-icon::before { + @include gl-content-empty; + @include gl-absolute; + @include gl-left-0; + @include gl-top-0; + @include gl-opacity-3; + @include gl-border-solid; + @include gl-border-4; + @include gl-rounded-full; + + width: 24px; + height: 24px; +} + +.mr-widget-heading { + position: relative; + border: 1px solid var(--border-color, $border-color); + border-radius: $border-radius-default; + background: var(--white, $white); + + .gl-skeleton-loader { + display: block; + } +} + +.mr-widget-info { + padding-left: $gl-padding; + padding-right: $gl-padding; +} + +.mr-widget-margin-left { + margin-left: $mr-widget-margin-left; +} + +.mr-widget-section { + .code-text { + flex: 1; + } +} + +.mr-widget-workflow { + margin-top: $gl-padding; + position: relative; + + &::before { + content: ''; + border-left: 1px solid var(--gray-100, $gray-100); + position: absolute; + left: 28px; + top: -17px; + height: 16px; + } +} + +.mr-version-controls { + position: relative; + z-index: $tabs-holder-z-index + 10; + background: var(--white, $white); + color: var(--gl-text-color, $gl-text-color); + margin-top: -1px; + + .mr-version-menus-container { + display: flex; + align-items: center; + flex-wrap: wrap; + padding: 16px; + z-index: 199; + white-space: nowrap; + + .gl-dropdown-toggle { + width: auto; + max-width: 170px; + + svg { + top: 10px; + right: 8px; + } + } + } + + .content-block { + padding: $gl-padding; + border-bottom: 0; + } + + .mr-version-dropdown, + .mr-version-compare-dropdown { + margin: 0 0.5rem; + } + + .dropdown-title { + color: var(--gl-text-color, $gl-text-color); + } + + // Shortening button height by 1px to make compare-versions + // header 56px and fit into our 8px design grid + .btn { + height: 34px; + } + + @include media-breakpoint-up(md) { + position: -webkit-sticky; + position: sticky; + top: calc(#{$header-height} + #{$mr-tabs-height}); + + .with-system-header & { + top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height}); + } + + .with-system-header.with-performance-bar & { + top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height}); + } + + .mr-version-menus-container { + flex-wrap: nowrap; + } + + .with-performance-bar & { + top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height}); + } + } +} + // TODO: Move to GitLab UI .mr-extenson-scrim { background: linear-gradient(to bottom, rgba($gray-light, 0), rgba($gray-light, 1)); diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 08d9d24d246..989219552a6 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -42,12 +42,6 @@ $status-box-line-height: 26px; } .milestone-content { - .issues-count { - margin-right: 17px; - float: right; - width: 105px; - } - .issuable-row { span { a { diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss index a9d353a0444..cbb6d68bf35 100644 --- a/app/assets/stylesheets/page_bundles/pipeline.scss +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -139,7 +139,7 @@ } .gl-downstream-pipeline-job-width { - width: 240px; + width: 170px; } .gl-linked-pipeline-padding { diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index 7f044f081d4..0bc3cc6678c 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -49,7 +49,7 @@ .project-repo-buttons { .btn { svg { - fill: $gray-500; + fill: var(--gray-500, $gray-500); } } @@ -80,3 +80,134 @@ margin-top: $gl-padding-8; } } + +.project-stats, +.project-buttons { + .scrolling-tabs-container { + .scrolling-tabs { + margin-top: $gl-padding-8; + margin-bottom: $gl-padding-8 - $browser-scrollbar-size; + padding-bottom: $browser-scrollbar-size; + flex-wrap: wrap; + border-bottom: 0; + } + + .fade-left, + .fade-right { + top: 0; + height: calc(100% - #{$browser-scrollbar-size}); + + svg { + top: 50%; + margin-top: -$gl-padding-8; + } + } + + .nav { + flex-basis: 100%; + + + .nav { + margin: $gl-padding-8 0; + } + } + + @include media-breakpoint-down(md) { + flex-direction: column; + + .nav { + flex-wrap: nowrap; + } + + .nav:first-child { + margin-right: $gl-padding-8; + } + } + } + + .nav { + > li { + display: inline-block; + + &:not(:last-child) { + margin-right: $gl-padding; + } + + &.right { + vertical-align: top; + margin-top: 0; + + @include media-breakpoint-up(lg) { + float: right; + } + } + } + + .stat-text, + .stat-link { + padding: $gl-btn-vert-padding 0; + background-color: transparent; + font-size: $gl-font-size; + line-height: $gl-btn-line-height; + color: var(--gray-500, $gl-text-color-secondary); + white-space: pre-wrap; + } + + .stat-link { + border-bottom: 0; + color: var(--black, $black); + + &:hover, + &:focus { + text-decoration: underline; + border-bottom: 0; + } + + .project-stat-value { + color: var(--gl-text-color, $gl-text-color); + } + + .icon { + color: var(--gray-500, $gl-text-color-secondary); + } + + .add-license-link { + &, + .icon { + color: var(--blue-600, $blue-600); + } + } + } + + .btn { + margin-bottom: $gl-padding-8; + padding: $gl-btn-vert-padding $gl-btn-padding; + line-height: $gl-btn-line-height; + + .icon { + top: 0; + } + } + } +} + +.project-buttons { + .nav > li:not(:last-child) { + margin-right: $gl-padding-8; + } +} + +.git-empty { + margin-bottom: 7px; + + h5 { + color: var(--gl-text-color, $gl-text-color); + } + + .light-well { + border-radius: 2px; + + color: var(--gray-600, $well-light-text-color); + font-size: 13px; + line-height: 1.6em; + } +} diff --git a/app/assets/stylesheets/page_bundles/projects_edit.scss b/app/assets/stylesheets/page_bundles/projects_edit.scss new file mode 100644 index 00000000000..9a8b4ffcdd7 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/projects_edit.scss @@ -0,0 +1,25 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.project-repo-select { + transition: background 2s ease-out; + + &:disabled { + opacity: 0.5; + pointer-events: none; + } + + .highlight-changes & { + background: var(--green-50, $highlight-changes-color); + transition: none; + } +} + +.project-feature-controls { + max-width: 432px; +} + +.project-feature-setting-group { + .project-feature-controls { + max-width: 400px; + } +} diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 5a091c14e53..d9ad82d4e4b 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -7,13 +7,6 @@ } } - .gl-card-body { - @include media-breakpoint-up(sm) { - @include gl-pt-2; - min-height: 372px; - } - } - @include media-breakpoint-down(xs) { .nav-controls { @include gl-w-full; @@ -27,6 +20,13 @@ } } +.cluster-card-item { + @include media-breakpoint-up(sm) { + @include gl-pt-2; + min-height: 372px; + } +} + .agent-activity-list { .system-note .timeline-entry-inner { .timeline-icon { diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index ca6c9b9a073..7ac3ef2221f 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -112,19 +112,6 @@ table.pipeline-project-metrics tr td { font-weight: $gl-font-weight-normal; } -.js-groups-dropdown { - width: 100%; -} - -.dropdown-group-transfer { - bottom: 100%; - top: initial; - - .dropdown-content { - overflow-y: unset; - } -} - .groups-list-tree-container { .has-no-search-results { text-align: center; diff --git a/app/assets/stylesheets/pages/hierarchy.scss b/app/assets/stylesheets/pages/hierarchy.scss new file mode 100644 index 00000000000..0812e4cc41e --- /dev/null +++ b/app/assets/stylesheets/pages/hierarchy.scss @@ -0,0 +1,15 @@ +.hierarchy-rounded-arrow-tail { + position: absolute; + top: 4px; + left: 5px; + height: calc(100% - 20px); +} + +.hierarchy-icon-wrapper { + height: $default-icon-size; + width: $default-icon-size; +} + +.hierarchy-rounded-arrow { + transform: scale(1, -1) rotate(90deg); +} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index cdef843c9b4..fa07d29b536 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -148,12 +148,7 @@ } .gl-label .gl-label-link:hover { - text-decoration: none; color: inherit; - - .gl-label-text:last-of-type { - text-decoration: underline; - } } .btn-link { @@ -274,16 +269,10 @@ font-weight: $gl-font-weight-normal; } - .no-value, - .btn-default-hover-link, - .btn-secondary-hover-link { + .no-value { color: $gl-text-color-secondary; } - .btn-secondary-hover-link:hover { - color: $blue-600; - } - .sidebar-collapsed-icon { display: none; } @@ -753,6 +742,26 @@ } } +.sidebar-help-wrap { + .sidebar-help-state { + margin: 16px -20px -20px; + padding: 16px 20px; + } + + .help-state-toggle-enter-active { + transition: all 0.8s ease; + } + + .help-state-toggle-leave-active { + transition: all 0.5s ease; + } + + .help-state-toggle-enter, + .help-state-toggle-leave-active { + opacity: 0; + } +} + .time-tracker { .sidebar-collapsed-icon { > .stopwatch-svg { @@ -770,11 +779,6 @@ } } - .help-button, - .close-help-button { - cursor: pointer; - } - .compare-meter { &.over_estimate { .time-remaining, @@ -787,31 +791,6 @@ .compare-display-container { font-size: 13px; } - - .time-tracking-help-state { - background: $white; - margin: 16px -20px -20px; - padding: 16px 20px; - border-top: 1px solid $border-gray-light; - border-bottom: 1px solid $border-gray-light; - - a:hover { - color: $btn-white-active; - } - } - - .help-state-toggle-enter-active { - transition: all 0.8s ease; - } - - .help-state-toggle-leave-active { - transition: all 0.5s ease; - } - - .help-state-toggle-enter, - .help-state-toggle-leave-active { - opacity: 0; - } } .issuable-todo-btn { @@ -890,3 +869,13 @@ } } } + +.icon-overlap-and-shadow { + filter: + drop-shadow(0 1px 0.5px #fff) + drop-shadow(1px 0 0.5px #fff) + drop-shadow(0 -1px 0.5px #fff) + drop-shadow(-1px 0 0.5px #fff); + margin-right: -7px; + z-index: 1; +} diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index d77c8a40a79..9bb4c5357e7 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -249,7 +249,9 @@ ul.related-merge-requests > li gl-emoji { @include media-breakpoint-up(sm) { width: calc(100% - #{$gutter-collapsed-width}); } +} +.limit-container-width { .issue-sticky-header-text { max-width: $limited-layout-width; } @@ -305,3 +307,32 @@ ul.related-merge-requests > li gl-emoji { .issuable-header-slide-leave-to { transform: translateY(-100%); } + +.description.work-items-enabled { + ul.task-list { + > li.task-list-item { + padding-inline-start: 2.25rem; + + .js-add-task { + svg { + visibility: hidden; + } + + &:focus svg { + visibility: visible; + } + } + + > input.task-list-item-checkbox { + left: 0.875rem; + } + + &:hover, + &:focus-within { + .js-add-task svg { + visibility: visible; + } + } + } + } +} diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index fffea301a4f..4a3ec5992a5 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -242,10 +242,14 @@ } .navless-container { - padding: 65px 15px; // height of footer + bottom padding of email confirmation link + padding: 0 15px 65px; // height of footer + bottom padding of email confirmation link + } + + .flash-container { + padding-bottom: 65px; @include media-breakpoint-down(xs) { - padding: 0 15px 65px; + padding-bottom: 0; } } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 10026e290e8..f95cff012d0 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -2,8 +2,6 @@ * MR -> show: Automerge widget * */ - -$mr-widget-min-height: 69px; $tabs-holder-z-index: 250; .space-children { @@ -18,12 +16,6 @@ $tabs-holder-z-index: 250; } } -.mr-widget-border-top { - border-top: 1px solid $border-color; -} - -.mr-widget-margin-left { margin-left: $mr-widget-margin-left; } - .media-section { @include media-breakpoint-down(md) { align-items: flex-start; @@ -42,140 +34,9 @@ $tabs-holder-z-index: 250; } } -.mr-widget-section { - .code-text { - flex: 1; - } -} - -.mr-widget-heading { - position: relative; - border: 1px solid $border-color; - border-radius: $border-radius-default; - background: var(--white, $white); - - .gl-skeleton-loader { - display: block; - } -} - -.mr-widget-extension { - border-top: 1px solid $border-color; - background-color: $gray-50; - - &.clickable:hover { - background-color: $gray-100; - cursor: pointer; - } -} - -.mr-widget-workflow { - margin-top: $gl-padding; - position: relative; - - &::before { - content: ''; - border-left: 1px solid $gray-100; - position: absolute; - left: 28px; - top: -17px; - height: 16px; - } -} - -.mr-section-container { - border: 1px solid $border-color; - border-radius: $border-radius-default; - background: var(--white, $white); - - > .mr-widget-border-top:first-of-type { - border-top: 0; - } -} - -.mr-widget-body, -.mr-widget-content, -.mr-widget-footer { - padding: $gl-padding; -} - -.mr-widget-info { - padding-left: $gl-padding; - padding-right: $gl-padding; -} - .mr-state-widget { - color: $gl-text-color; - - .commit-message-edit { - border-radius: $border-radius-default; - } - - .mr-widget-section:not(:first-child), - .mr-widget-footer { - border-top: solid 1px $border-color; - } - - .mr-widget-alert-container + .mr-widget-section { - border-top: 0; - } - - .mr-fast-forward-message { - padding-left: $gl-padding-50; - padding-bottom: $gl-padding; - } - - .commits-list { - > li { - padding: $gl-padding; - - @include media-breakpoint-up(md) { - margin-left: $gl-spacing-scale-7; - } - } - } - - .mr-commit-dropdown { - .dropdown-menu { - @include media-breakpoint-up(md) { - width: 150%; - } - } - } - - .mr-widget-footer { - padding: 0; - } - - .mr-report { - padding: 0; - - > .media { - padding: $gl-padding; - } - } - - form { - margin-bottom: 0; - - .clearfix { - margin-bottom: 0; - } - } - - label { - margin-bottom: 0; - } - - .btn { - font-size: $gl-font-size; - } - .accept-merge-holder { .accept-action { - display: inline-block; - float: left; - .accept-merge-request { &.ci-preparing, &.ci-pending, @@ -192,227 +53,6 @@ $tabs-holder-z-index: 250; } } } - - .ci-widget { - color: $gl-text-color; - display: flex; - align-items: center; - justify-content: space-between; - - @include media-breakpoint-down(xs) { - flex-wrap: wrap; - } - - .ci-widget-content { - display: flex; - align-items: center; - flex: 1; - } - } - - .mr-widget-icon { - font-size: 22px; - } - - .mr-loading-icon { - margin: 3px 0; - } - - .ci-status-icon svg { - margin: 3px 0; - position: relative; - overflow: visible; - display: block; - } - - .mr-widget-pipeline-graph { - .dropdown-menu { - z-index: $zindex-dropdown-menu; - } - } - - .normal { - flex: 1; - flex-basis: auto; - } - - .capitalize { - text-transform: capitalize; - } - - .label-branch { - @include gl-font-monospace; - font-size: 95%; - color: $gl-text-color; - font-weight: normal; - overflow: hidden; - word-break: break-all; - } - - .deploy-link, - .label-branch { - &.label-truncate { - // NOTE: This selector targets its children because some of the HTML comes from - // 'source_branch_link'. Once this external HTML is no longer used, we could - // simplify this. - > a, - > span { - display: inline-block; - max-width: 12.5em; - margin-bottom: -3px; - white-space: nowrap; - text-overflow: ellipsis; - line-height: 14px; - overflow: hidden; - } - } - } - - .mr-widget-body { - &:not(.mr-widget-body-line-height-1) { - line-height: 28px; - } - - @include clearfix; - - .approve-btn { - margin-right: 5px; - } - - h4 { - float: left; - font-weight: $gl-font-weight-bold; - font-size: 14px; - line-height: inherit; - margin-top: 0; - margin-bottom: 0; - - time { - font-weight: $gl-font-weight-normal; - } - } - - .btn-grouped { - margin-left: 0; - margin-right: 7px; - } - - label { - font-weight: $gl-font-weight-normal; - } - - .spacing { - margin: 0 0 0 10px; - } - - .bold, - .gl-font-weight-bold { - font-weight: $gl-font-weight-bold; - color: $gray-600; - margin-left: 10px; - } - - .state-label { - font-weight: $gl-font-weight-bold; - padding-right: 10px; - } - - .danger { - color: $red-500; - } - - .spacing, - .bold, - .gl-font-weight-bold { - vertical-align: middle; - } - - .dropdown-menu { - li a { - padding: 5px; - } - - .merge-opt-icon { - line-height: 1.5; - } - - .merge-opt-title { - margin-left: 8px; - } - } - - .has-custom-error { - display: inline-block; - } - - @include media-breakpoint-down(xs) { - p { - font-size: 13px; - } - - .btn-grouped { - float: none; - margin-right: 0; - } - - .accept-action { - width: 100%; - text-align: center; - } - } - - .commit-message-editor { - label { - padding: 0; - } - } - - &.mr-widget-empty-state { - line-height: 20px; - padding: $gl-padding; - - .artwork { - - @include media-breakpoint-down(md) { - margin-bottom: $gl-padding; - } - } - - .text { - p { - margin-top: $gl-padding; - } - - .highlight { - margin: 0 0 $gl-padding; - font-weight: $gl-font-weight-bold; - } - } - } - - &.mr-pipeline-suggest { - border-radius: $border-radius-default; - line-height: 20px; - border: 1px solid $border-color; - - .circle-icon-container { - color: $gl-text-color-quaternary; - } - } - } - - .ci-coverage { - float: right; - } - - .stop-env-container { - color: $gl-text-color; - float: right; - - a { - color: $gl-text-color; - } - } } .mr_source_commit, @@ -478,72 +118,6 @@ $tabs-holder-z-index: 250; } } -.mr-info-list { - clear: left; - position: relative; - padding-top: 4px; - - p { - margin: 0; - position: relative; - padding: 4px 0; - - &:last-child { - padding-bottom: 0; - } - } - - &.mr-memory-usage { - p { - float: left; - } - - .memory-graph-container { - float: left; - margin-left: 5px; - } - } -} - -.mr-source-target { - flex-wrap: wrap; - padding: $gl-padding; - background: var(--white, $white); - min-height: $mr-widget-min-height; - - @include media-breakpoint-up(md) { - align-items: center; - } - - .git-merge-container { - justify-content: space-between; - flex: 1; - flex-direction: row; - align-items: center; - - @include media-breakpoint-down(md) { - flex-direction: column; - align-items: stretch; - - .branch-actions { - margin-top: 16px; - } - } - - @include media-breakpoint-up(lg) { - .branch-actions { - align-self: center; - margin-left: $gl-padding; - white-space: nowrap; - } - } - } - - .diverged-commits-count { - color: $gl-text-color-secondary; - } -} - .card-new-merge-request { .card-header { padding: 5px 10px; @@ -640,79 +214,14 @@ $tabs-holder-z-index: 250; } } -.mr-version-controls { - position: relative; - z-index: $tabs-holder-z-index + 10; - background: $white; - color: $gl-text-color; - margin-top: -1px; - - .mr-version-menus-container { - display: flex; - align-items: center; - flex-wrap: wrap; - padding: 16px; - z-index: 199; - white-space: nowrap; - - .gl-dropdown-toggle { - width: auto; - max-width: 170px; - - svg { - top: 10px; - right: 8px; - } - } - } - - .content-block { - padding: $gl-padding; - border-bottom: 0; - } - - .mr-version-dropdown, - .mr-version-compare-dropdown { - margin: 0 0.5rem; - } - - .dropdown-title { - color: $gl-text-color; - } - - // Shortening button height by 1px to make compare-versions - // header 56px and fit into our 8px design grid - .btn { - height: 34px; - } - - @include media-breakpoint-up(md) { - position: -webkit-sticky; - position: sticky; - top: calc(#{$header-height} + #{$mr-tabs-height}); - - .with-system-header & { - top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height}); - } - - .with-system-header.with-performance-bar & { - top: calc(#{$header-height} + #{$mr-tabs-height} + #{$system-header-height} + #{$performance-bar-height}); - } - - .mr-version-menus-container { - flex-wrap: nowrap; - } - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height} + #{$mr-tabs-height}); - } - } -} - .merge-request-tabs-holder, .epic-tabs-holder { top: $header-height; z-index: $tabs-holder-z-index; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + padding-left: $gl-padding; + padding-right: $gl-padding; background-color: $body-bg; border-bottom: 1px solid $border-color; @@ -834,80 +343,10 @@ $tabs-holder-z-index: 250; } } -.mr-memory-usage { - width: 100%; - - p.usage-info-loading .usage-info-load-spinner { - margin-right: 10px; - font-size: 16px; - } -} - .fork-sprite { margin-right: -5px; } -.deploy-heading, -.merge-train-position-indicator { - @include media-breakpoint-up(md) { - padding: $gl-padding-8 $gl-padding; - } - - .media-body { - min-width: 0; - font-size: 12px; - margin-left: 32px; - } - - &:not(:last-child) { - border-bottom: 1px solid $border-color; - } -} - -.deploy-body { - display: flex; - align-items: center; - flex-wrap: wrap; - - @include media-breakpoint-up(xs) { - flex-wrap: nowrap; - white-space: nowrap; - } - - @include media-breakpoint-down(md) { - flex-direction: column; - align-items: flex-start; - - .deployment-info { - margin-bottom: $gl-padding; - } - } - - > *:not(:last-child) { - margin-right: 0.3em; - } - - svg { - vertical-align: text-top; - } - - .deployment-info { - flex: 1; - white-space: nowrap; - text-overflow: ellipsis; - min-width: 100px; - - @include media-breakpoint-up(xs) { - min-width: 0; - max-width: 100%; - } - } - - .dropdown-menu { - width: 400px; - } -} - // Hack alert: we've rewritten `btn` class in a way that // we've broken it and it is not possible to use with `btn-link` // which causes a blank button when it's disabled and hovering @@ -925,30 +364,6 @@ $tabs-holder-z-index: 250; } } -.ci-widget-container { - justify-content: space-between; - flex: 1; - flex-direction: row; - - @include media-breakpoint-down(sm) { - flex-direction: column; - - .stage-cell .stage-container { - margin-top: 16px; - } - - .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu { - transform: initial; - } - } - - .coverage { - font-size: 12px; - color: $gray-500; - line-height: initial; - } -} - .merge-request-details .file-finder-overlay.diff-file-finder { position: fixed; z-index: 99999; @@ -964,47 +379,3 @@ $tabs-holder-z-index: 250; } } } - -.diff-file-row.is-active { - background-color: $gray-50; -} - -.mr-conflict-loader { - max-width: 334px; - - > svg { - vertical-align: middle; - } -} - -.mr-ready-to-merge-loader { - max-width: 418px; - - > svg { - vertical-align: middle; - } -} - -.mr-widget-alert-container { - $radius: $border-radius-default - 1px; - - border-radius: $radius $radius 0 0; - - .gl-alert:not(:last-child) { - margin-bottom: 1px; - } -} - -.mr-widget-extension-icon::before { - @include gl-content-empty; - @include gl-absolute; - @include gl-left-0; - @include gl-top-0; - @include gl-opacity-3; - @include gl-border-solid; - @include gl-border-4; - @include gl-rounded-full; - - width: 24px; - height: 24px; -} diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss index ebaf875ad8f..2de33f20595 100644 --- a/app/assets/stylesheets/pages/pages.scss +++ b/app/assets/stylesheets/pages/pages.scss @@ -42,8 +42,6 @@ } :first-child { - border-bottom-right-radius: 0; - border-top-right-radius: 0; line-height: $gl-line-height; } @@ -52,7 +50,6 @@ } :last-child { - border-bottom-right-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; + border-radius: $border-radius-default; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 6b4d7c2520c..ac3d4dad585 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -52,37 +52,6 @@ } } -// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components -.project-repo-select { - transition: background 2s ease-out; - - &:disabled { - opacity: 0.5; - pointer-events: none; - } - - .highlight-changes & { - background: $highlight-changes-color; - transition: none; - } -} - -// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components -.project-feature-controls { - max-width: 432px; -} - -// INFO Scoped to settings_panel component in app/assets/javascripts/pages/projects/shared/permissions/components -.project-feature-setting-group { - .project-feature-controls { - max-width: 400px; - } -} - -.nav > .project-buttons { - margin-top: 0; -} - .save-project-loader { margin-top: 50px; margin-bottom: 50px; @@ -317,121 +286,6 @@ } } -.project-stats, -.project-buttons { - .scrolling-tabs-container { - .scrolling-tabs { - margin-top: $gl-padding-8; - margin-bottom: $gl-padding-8 - $browser-scrollbar-size; - padding-bottom: $browser-scrollbar-size; - flex-wrap: wrap; - border-bottom: 0; - } - - .fade-left, - .fade-right { - top: 0; - height: calc(100% - #{$browser-scrollbar-size}); - - svg { - top: 50%; - margin-top: -$gl-padding-8; - } - } - - .nav { - flex-basis: 100%; - - + .nav { - margin: $gl-padding-8 0; - } - } - - @include media-breakpoint-down(md) { - flex-direction: column; - - .nav { - flex-wrap: nowrap; - } - - .nav:first-child { - margin-right: $gl-padding-8; - } - } - } - - .nav { - > li { - display: inline-block; - - &:not(:last-child) { - margin-right: $gl-padding; - } - - &.right { - vertical-align: top; - margin-top: 0; - - @include media-breakpoint-up(lg) { - float: right; - } - } - } - - .stat-text, - .stat-link { - padding: $gl-btn-vert-padding 0; - background-color: transparent; - font-size: $gl-font-size; - line-height: $gl-btn-line-height; - color: $gl-text-color-secondary; - white-space: pre-wrap; - } - - .stat-link { - border-bottom: 0; - color: $black; - - &:hover, - &:focus { - text-decoration: underline; - border-bottom: 0; - } - - .project-stat-value { - color: $gl-text-color; - } - - .icon { - color: $gl-text-color-secondary; - } - - .add-license-link { - &, - .icon { - color: $blue-600; - } - } - } - - .btn { - margin-bottom: $gl-padding-8; - padding: $gl-btn-vert-padding $gl-btn-padding; - line-height: $gl-btn-line-height; - - .icon { - top: 0; - } - } - } -} - -.project-buttons { - .nav > li:not(:last-child) { - margin-right: $gl-padding-8; - } -} - .repository-languages-bar { height: 8px; margin-bottom: $gl-padding-8; @@ -460,22 +314,6 @@ pre.light-well { border-color: $well-light-border; } -.git-empty { - margin-bottom: 7px; - - h5 { - color: $gl-text-color; - } - - .light-well { - border-radius: 2px; - - color: $well-light-text-color; - font-size: 13px; - line-height: 1.6em; - } -} - /* * Projects list rendered on dashboard and user page */ diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 633051918a4..5956368a977 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -130,10 +130,6 @@ border-radius: $border-radius-base; } -.empty-variables { - padding: 20px 0; -} - .warning-title { color: $gray-900; } diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index c72de0e6f29..1397590cc31 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -7,12 +7,8 @@ body.gl-dark { --gray-100: #404040; --gray-600: #bfbfbf; --gray-900: #fafafa; - --gray-950: #fff; --green-100: #0d532a; - --green-400: #108548; --green-700: #91d4a8; - --blue-400: #1f75cb; - --orange-400: #ab6100; --indigo-900-alpha-008: rgba(235, 235, 250, 0.08); --gl-text-color: #fafafa; --border-color: #4f4f4f; @@ -314,10 +310,18 @@ h1 { padding-left: 0.6em; border-radius: 10rem; } +.badge-success { + color: #fff; + background-color: #2da160; +} .badge-info { color: #fff; background-color: #428fdc; } +.badge-warning { + color: #fff; + background-color: #c17d10; +} .bg-transparent { background-color: transparent !important; } @@ -394,6 +398,34 @@ a.gl-badge.badge-info:active { 0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48); outline: none; } +.gl-badge.badge-success { + background-color: #0d532a; + color: #91d4a8; +} +a.gl-badge.badge-success.active, +a.gl-badge.badge-success:active { + color: #ecf4ee; + background-color: #24663b; +} +a.gl-badge.badge-success:active { + box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8), + 0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48); + outline: none; +} +.gl-badge.badge-warning { + background-color: #703800; + color: #e9be74; +} +a.gl-badge.badge-warning.active, +a.gl-badge.badge-warning:active { + color: #fdf1dd; + background-color: #8f4700; +} +a.gl-badge.badge-warning:active { + box-shadow: inset 0 0 0 1px rgba(51, 51, 51, 0.8), + 0 0 0 1px rgba(51, 51, 51, 0.4), 0 0 0 4px rgba(66, 143, 220, 0.48); + outline: none; +} .gl-button .gl-badge { top: 0; } @@ -837,7 +869,7 @@ input { .container-fluid .navbar-nav li - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { + .badge.badge-pill:not(.gl-badge) { box-shadow: none; font-weight: 600; } @@ -920,44 +952,6 @@ input { line-height: 18px; margin: 4px 0 4px 2px; } -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge), -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { - position: inherit; - font-weight: 400; - margin-left: -6px; - font-size: 11px; - color: var(--gray-950, #333); - padding: 0 5px; - line-height: 12px; - border-radius: 7px; - box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); -} -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge, -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge { - background-color: var(--green-400, #108548); -} -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count, -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count { - background-color: var(--orange-400, #ab6100); -} -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count, -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count { - background-color: var(--blue-400, #1f75cb); -} -.title-container .canary-badge .badge, -.navbar-nav .canary-badge .badge { - font-size: 12px; - line-height: 16px; - padding: 0 0.5rem; -} @media (max-width: 575.98px) { .navbar-gitlab .container-fluid { font-size: 18px; @@ -1103,6 +1097,8 @@ input { } .nav-sidebar li .nav-item-name { flex: 1; + overflow: hidden; + text-overflow: ellipsis; } .nav-sidebar li > a, .nav-sidebar li > .fly-out-top-item-container { @@ -1335,7 +1331,8 @@ input { .nav-sidebar-inner-scroll { height: 100%; width: 100%; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; } .nav-sidebar-inner-scroll > div.context-header { margin-top: 0.25rem; @@ -1780,10 +1777,16 @@ body.gl-dark { --purple-800: #cbbbf2; --purple-900: #e1d8f9; --purple-950: #f4f0ff; + --dark-icon-color-purple-1: #524a68; + --dark-icon-color-purple-2: #715bae; + --dark-icon-color-purple-3: #9a79f7; + --dark-icon-color-orange-1: #665349; + --dark-icon-color-orange-2: #b37a5d; --gl-text-color: #fafafa; --border-color: #4f4f4f; --white: #333; --black: #fff; + --black-normal: #fafafa; --svg-status-bg: #333; } .nav-sidebar li a { @@ -2005,10 +2008,16 @@ body.gl-dark { --purple-800: #cbbbf2; --purple-900: #e1d8f9; --purple-950: #f4f0ff; + --dark-icon-color-purple-1: #524a68; + --dark-icon-color-purple-2: #715bae; + --dark-icon-color-purple-3: #9a79f7; + --dark-icon-color-orange-1: #665349; + --dark-icon-color-orange-2: #b37a5d; --gl-text-color: #fafafa; --border-color: #4f4f4f; --white: #333; --black: #fff; + --black-normal: #fafafa; --svg-status-bg: #333; } .tab-width-8 { @@ -2026,18 +2035,9 @@ body.gl-dark { white-space: nowrap; width: 1px; } -.gl-bg-green-500 { - background-color: #2da160; -} .gl-border-none\! { border-style: none !important; } -.gl-rounded-pill { - border-radius: 0.75rem; -} -.gl-text-white { - color: #333; -} .gl-display-none { display: none; } @@ -2059,9 +2059,8 @@ body.gl-dark { .gl-pr-2 { padding-right: 0.25rem; } -.gl-py-1 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; +.gl-ml-n2 { + margin-left: -0.25rem; } .gl-ml-3 { margin-left: 0.5rem; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 2f79c86cdc6..0d35c400676 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -295,10 +295,18 @@ h1 { padding-left: 0.6em; border-radius: 10rem; } +.badge-success { + color: #fff; + background-color: #108548; +} .badge-info { color: #fff; background-color: #1f75cb; } +.badge-warning { + color: #fff; + background-color: #ab6100; +} .bg-transparent { background-color: transparent !important; } @@ -375,6 +383,34 @@ a.gl-badge.badge-info:active { 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48); outline: none; } +.gl-badge.badge-success { + background-color: #c3e6cd; + color: #24663b; +} +a.gl-badge.badge-success.active, +a.gl-badge.badge-success:active { + color: #0a4020; + background-color: #91d4a8; +} +a.gl-badge.badge-success:active { + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), + 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48); + outline: none; +} +.gl-badge.badge-warning { + background-color: #f5d9a8; + color: #8f4700; +} +a.gl-badge.badge-warning.active, +a.gl-badge.badge-warning:active { + color: #5c2900; + background-color: #e9be74; +} +a.gl-badge.badge-warning:active { + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), + 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 0 4px rgba(31, 117, 203, 0.48); + outline: none; +} .gl-button .gl-badge { top: 0; } @@ -818,7 +854,7 @@ input { .container-fluid .navbar-nav li - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { + .badge.badge-pill:not(.gl-badge) { box-shadow: none; font-weight: 600; } @@ -901,44 +937,6 @@ input { line-height: 18px; margin: 4px 0 4px 2px; } -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge), -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) { - position: inherit; - font-weight: 400; - margin-left: -6px; - font-size: 11px; - color: var(--gray-950, #fff); - padding: 0 5px; - line-height: 12px; - border-radius: 7px; - box-shadow: 0 1px 0 rgba(76, 78, 84, 0.2); -} -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge, -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).green-badge { - background-color: var(--green-400, #2da160); -} -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count, -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).merge-requests-count { - background-color: var(--orange-400, #c17d10); -} -.title-container - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count, -.navbar-nav - .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge).todos-count { - background-color: var(--blue-400, #428fdc); -} -.title-container .canary-badge .badge, -.navbar-nav .canary-badge .badge { - font-size: 12px; - line-height: 16px; - padding: 0 0.5rem; -} @media (max-width: 575.98px) { .navbar-gitlab .container-fluid { font-size: 18px; @@ -1084,6 +1082,8 @@ input { } .nav-sidebar li .nav-item-name { flex: 1; + overflow: hidden; + text-overflow: ellipsis; } .nav-sidebar li > a, .nav-sidebar li > .fly-out-top-item-container { @@ -1316,7 +1316,8 @@ input { .nav-sidebar-inner-scroll { height: 100%; width: 100%; - overflow: auto; + overflow-x: hidden; + overflow-y: auto; } .nav-sidebar-inner-scroll > div.context-header { margin-top: 0.25rem; @@ -1697,18 +1698,9 @@ svg.s16 { white-space: nowrap; width: 1px; } -.gl-bg-green-500 { - background-color: #108548; -} .gl-border-none\! { border-style: none !important; } -.gl-rounded-pill { - border-radius: 0.75rem; -} -.gl-text-white { - color: #fff; -} .gl-display-none { display: none; } @@ -1730,9 +1722,8 @@ svg.s16 { .gl-pr-2 { padding-right: 0.25rem; } -.gl-py-1 { - padding-top: 0.125rem; - padding-bottom: 0.125rem; +.gl-ml-n2 { + margin-left: -0.25rem; } .gl-ml-3 { margin-left: 0.5rem; diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 3ed257caf60..c5cbe58ec27 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -138,10 +138,10 @@ hr { margin-right: -15px; margin-left: -15px; } -.col, -.col-sm-5, +.col-sm-12, .col-sm-7, -.col-sm-12 { +.col-sm-5, +.col { position: relative; width: 100%; padding-right: 15px; @@ -160,12 +160,12 @@ hr { } @media (min-width: 576px) { .col-sm-5 { - flex: 0 0 41.66667%; - max-width: 41.66667%; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; } .col-sm-7 { - flex: 0 0 58.33333%; - max-width: 58.33333%; + flex: 0 0 58.3333333333%; + max-width: 58.3333333333%; } .col-sm-12 { flex: 0 0 100%; @@ -725,11 +725,14 @@ svg { margin-top: 40px; } .devise-layout-html body .navless-container { - padding: 65px 15px; + padding: 0 15px 65px; +} +.devise-layout-html body .flash-container { + padding-bottom: 65px; } @media (max-width: 575.98px) { - .devise-layout-html body .navless-container { - padding: 0 15px 65px; + .devise-layout-html body .flash-container { + padding-bottom: 0; } } diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index c79816e3579..9db134ffa65 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -93,6 +93,7 @@ $gray-darker: #4f4f4f; $gray-darkest: #c4c4c4; $black: #fff; +$black-normal: $gray-900; $white: #333; $white-light: #2b2b2b; $white-normal: #333; @@ -187,11 +188,18 @@ body.gl-dark { --purple-900: #{$purple-900}; --purple-950: #{$purple-950}; + --dark-icon-color-purple-1: #524a68; + --dark-icon-color-purple-2: #715bae; + --dark-icon-color-purple-3: #9a79f7; + --dark-icon-color-orange-1: #665349; + --dark-icon-color-orange-2: #b37a5d; + --gl-text-color: #{$gray-900}; --border-color: #{$border-color}; --white: #{$white}; --black: #{$black}; + --black-normal: #{$black-normal}; --svg-status-bg: #{$white}; @@ -257,3 +265,11 @@ $line-removed-dark: $red-200; $well-expand-item: $gray-200; $well-inner-border: $gray-200; + +$calendar-activity-colors: ( + #303030, + #333861, + #4a5593, + #6172c5, + #788ff7 +); diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 0e7e52129b4..8a4f9c32f9f 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -200,6 +200,12 @@ } } +.gl-xl-ml-3 { + @include media-breakpoint-up(lg) { + margin-left: $gl-spacing-scale-3; + } +} + .gl-mb-n3 { margin-bottom: -$gl-spacing-scale-3; } @@ -247,30 +253,6 @@ $gl-line-height-42: px-to-rem(42px); max-width: 50%; } -// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1490 -.gl-w-grid-size-28 { - width: $grid-size * 28; -} - -// 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; -} - -.gl-opacity-7 { - opacity: 0.7; -} - /** Note: ::-webkit-scrollbar is a non-standard rule only supported by webkit browsers. @@ -298,14 +280,66 @@ $gl-line-height-42: px-to-rem(42px); @include gl-focus($gl-border-size-1, $gray-900, true); } -// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1637 -.gl-lg-w-25p { - @include gl-media-breakpoint-up(lg) { - width: 25%; - } -} - // Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2600 .gl-pr-10 { padding-right: $gl-spacing-scale-10; } + +/* +All of the following (up until the "End gitlab-ui#1709" comment) will be moved +to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 +*/ +.gl-sm-grid-template-columns-2 { + @include media-breakpoint-up(sm) { + grid-template-columns: 1fr 1fr; + } +} + +.gl-md-grid-template-columns-2 { + @include media-breakpoint-up(md) { + grid-template-columns: 1fr 1fr; + } +} + +.gl-md-grid-template-columns-3 { + @include media-breakpoint-up(md) { + grid-template-columns: repeat(3, 1fr); + } +} + +.gl-lg-grid-template-columns-4 { + @include media-breakpoint-up(lg) { + grid-template-columns: repeat(4, 1fr); + } +} + +.gl-gap-6 { + gap: $gl-spacing-scale-6; +} + +.gl-max-w-48 { + max-width: $gl-spacing-scale-48; +} + +.gl-max-w-75 { + max-width: $gl-spacing-scale-75; +} + +.gl-md-pt-11 { + @include media-breakpoint-up(md) { + padding-top: $gl-spacing-scale-11 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence + } +} + +.gl-md-mb-6 { + @include media-breakpoint-up(md) { + margin-bottom: $gl-spacing-scale-6 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence + } +} + +.gl-md-mb-12 { + @include media-breakpoint-up(md) { + margin-bottom: $gl-spacing-scale-12 !important; // only need !important for now so that it overrides styles from @gitlab/ui which currently take precedence + } +} +/* End gitlab-ui#1709 */ diff --git a/app/assets/stylesheets/vendors/tribute.scss b/app/assets/stylesheets/vendors/tribute.scss deleted file mode 100644 index 65f3d1b6199..00000000000 --- a/app/assets/stylesheets/vendors/tribute.scss +++ /dev/null @@ -1,41 +0,0 @@ -.tribute-container { - background: $white; - border: 1px solid $gray-100; - border-radius: $border-radius-base; - box-shadow: 0 0 5px $issue-boards-card-shadow; - color: $black; - margin-top: $gl-padding-12; - max-height: 200px; - min-width: 120px; - overflow-y: auto; - z-index: 11110 !important; - - ul { - list-style: none; - margin-bottom: 0; - padding: $gl-padding-8 1px; - } - - li { - cursor: pointer; - padding: $gl-padding-8 $gl-padding; - white-space: nowrap; - - small { - color: $gray-500; - } - - &.highlight { - background-color: $gray-darker; - - .avatar { - @include disable-all-animation; - border: 1px solid $white; - } - - small { - color: inherit; - } - } - } -} |