diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-20 14:43:17 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-04-20 14:43:17 +0300 |
commit | dfc94207fec2d84314b1a5410cface22e8b369bd (patch) | |
tree | c54022f61ced104305889a64de080998a0dc773b /app/assets/stylesheets/page_bundles | |
parent | b874efeff674f6bf0355d5d242ecf81c6f7155df (diff) |
Add latest changes from gitlab-org/gitlab@15-11-stable-eev15.11.0-rc42
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
-rw-r--r-- | app/assets/stylesheets/page_bundles/boards.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/build.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/design_management.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/issuable.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/issuable_list.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/login.scss | 290 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/merge_requests.scss | 109 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/milestone.scss | 36 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/oncall_schedules.scss | 36 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/projects_usage_quotas.scss | 19 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/releases.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/search.scss | 12 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/wiki.scss | 51 | ||||
-rw-r--r-- | app/assets/stylesheets/page_bundles/work_items.scss | 24 |
14 files changed, 475 insertions, 150 deletions
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 99e7f7ae0a4..f7ab78c1bcc 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -208,15 +208,11 @@ } .boards-sidebar { - top: $header-height !important; + top: $calc-application-header-height !important; height: auto; - bottom: 0; + bottom: $calc-application-footer-height; padding-bottom: 0.5rem; - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}) !important; - } - .sidebar-collapsed-icon { @include gl-display-none; } diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index d40c03b7fd1..5114f484e53 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -6,30 +6,22 @@ } .archived-job { - top: $header-height; + top: $calc-application-header-height; border-radius: 2px 2px 0 0; color: var(--orange-600, $orange-600); background-color: var(--orange-50, $orange-50); border: 1px solid var(--border-color, $border-color); - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height}); - } } .top-bar { @include build-log-top-bar(50px); &.has-archived-block { - top: calc(#{$header-height} + 28px); - - .with-performance-bar & { - top: calc(#{$header-height} + #{$performance-bar-height} + 28px); - } + top: calc(#{$calc-application-header-height} + 28px); } &.affix { - top: $header-height; + top: $calc-application-header-height; // with sidebar &.sidebar-expanded { diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss index 143682e1cd7..f56eb4ae6fb 100644 --- a/app/assets/stylesheets/page_bundles/design_management.scss +++ b/app/assets/stylesheets/page_bundles/design_management.scss @@ -20,10 +20,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); .design-detail { background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity); - - .with-performance-bar & { - top: 35px; - } + bottom: $calc-application-footer-height; .comment-indicator { border-radius: 50%; diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss index 79595fa3a98..e0fb95a1359 100644 --- a/app/assets/stylesheets/page_bundles/issuable.scss +++ b/app/assets/stylesheets/page_bundles/issuable.scss @@ -66,7 +66,7 @@ .title { padding: 0; - margin-bottom: $gl-padding; + margin-bottom: $gl-spacing-scale-4; border-bottom: 0; word-wrap: break-word; overflow-wrap: break-word; diff --git a/app/assets/stylesheets/page_bundles/issuable_list.scss b/app/assets/stylesheets/page_bundles/issuable_list.scss index b08e129a805..1ca0c5e7ce6 100644 --- a/app/assets/stylesheets/page_bundles/issuable_list.scss +++ b/app/assets/stylesheets/page_bundles/issuable_list.scss @@ -18,6 +18,11 @@ } } + .issuable-info, + .issuable-meta { + font-size: $gl-font-size-sm; + } + .issuable-meta { display: flex; flex-direction: column; diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss new file mode 100644 index 00000000000..495b7d58788 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/login.scss @@ -0,0 +1,290 @@ +@import 'mixins_and_variables_and_functions'; + +/* Login Page */ +.login-page { + .container { + max-width: 960px; + } + + .navbar-gitlab .container { + max-width: none; + } + + .flash-container { + margin-bottom: $gl-padding; + position: relative; + top: 8px; + } + + .brand-holder { + font-size: 18px; + line-height: 1.5; + + p { + font-size: 16px; + color: $login-brand-holder-color; + } + + h3 { + font-size: 22px; + } + + img { + max-width: 100%; + margin-bottom: 30px; + } + + a { + font-weight: $gl-font-weight-bold; + } + } + + p { + font-size: 13px; + } + + .signin-text { + p { + margin-bottom: 0; + line-height: 1.5; + } + } + + .borderless { + .login-box, + .omniauth-container { + box-shadow: none; + } + + .g-recaptcha { + > div { + margin-left: auto; + margin-right: auto; + } + } + } + + .login-box, + .omniauth-container { + box-shadow: 0 0 0 1px $border-color; + border-radius: $border-radius; + + .login-heading h3 { + font-weight: $gl-font-weight-normal; + line-height: 1.5; + margin: 0 0 10px; + } + + .login-footer { + margin-top: 10px; + + p:last-child { + margin-bottom: 0; + } + } + + a.forgot { + float: right; + padding-top: 6px; + } + + .nav .active a { + background: transparent; + } + + // Styles the glowing border of focused input for username async validation + .login-body { + font-size: 13px; + + input + p, + input ~ p.field-validation { + margin-top: 5px; + } + + .username .validation-success { + color: $green-600; + } + + .username .validation-error { + color: $red-500; + } + } + } + + .omniauth-container { + border-radius: $border-radius; + font-size: 13px; + + p { + margin: 0; + } + + form { + padding: 0; + border: 0; + background: none; + } + } + + .new-session-tabs { + &.nav-links-unboxed { + border-color: transparent; + box-shadow: none; + + .nav-item { + border-left: 0; + border-right: 0; + border-bottom: 1px solid $gray-100; + background-color: transparent; + } + } + + display: flex; + box-shadow: 0 0 0 1px $border-color; + border-top-right-radius: $border-radius-default; + border-top-left-radius: $border-radius-default; + + // Ldap configurations may need more tabs & the tab labels are user generated (arbitrarily long). + // These styles prevent this from breaking the layout, and only applied when providers are configured. + &.custom-provider-tabs { + flex-wrap: wrap; + + li { + min-width: 85px; + flex-basis: auto; + + // This styles tab elements that have wrapped to a second line. We cannot easily predict when this will happen. + // We are making somewhat of an assumption about the configuration here: that users do not have more than + // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any + // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border + // above one of the bottom row elements. If you know a better way, please implement it! + &:nth-child(n+5) { + border-top: 1px solid $border-color; + } + } + + a { + font-size: 16px; + } + } + + li { + flex: 1; + text-align: center; + border-left: 1px solid $border-color; + + &:first-of-type { + border-left: 0; + border-top-left-radius: $border-radius-default; + } + + &:last-of-type { + border-top-right-radius: $border-radius-default; + } + + &:not(.active) { + background-color: $gray-light; + } + + a { + width: 100%; + font-size: 18px; + } + + &.active > a { + cursor: default; + } + } + } + + .form-control { + &:active, + &:focus { + background-color: $white; + } + } + + .submit-container { + margin-top: 16px; + } + + input[type='submit'] { + margin-bottom: 0; + display: block; + width: 100%; + } + + .devise-errors { + h2 { + margin-top: 0; + font-size: 14px; + color: $red-700; + } + } +} + +@include media-breakpoint-down(xs) { + .login-page { + .col-md-5.float-right { + float: none !important; + margin-bottom: 45px; + } + } +} + +.devise-layout-html { + margin: 0; + padding: 0; + height: 100%; + + &.with-system-header { + .login-page-broadcast { + margin-top: calc(#{$system-header-height} + #{$header-height}); + } + } + + // Fixes footer container to bottom of viewport + body { + // offset height of fixed header + 1 to avoid scroll + height: calc(100% - 51px); + + // offset without the header + &.navless { + height: calc(100% - 11px); + } + + margin: 0; + padding: 0; + + .page-wrap { + min-height: 100%; + position: relative; + } + + .footer-container, + hr.footer-fixed { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 40px; + background: $white; + } + + .login-page-broadcast { + margin-top: 40px; + } + + .navless-container { + padding: 0 15px 65px; // height of footer + bottom padding of email confirmation link + } + + .flash-container { + padding-bottom: 65px; + + @include media-breakpoint-down(xs) { + padding-bottom: 0; + } + } + } +} diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 396c590d912..97df87458ab 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -1,6 +1,5 @@ @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; @@ -181,6 +180,10 @@ $tabs-holder-z-index: 250; .content + .content { @include gl-border-t; } + + .notes-content { + border: 0; + } } &.inline-diff-view { @@ -242,18 +245,6 @@ $tabs-holder-z-index: 250; } } -.with-system-header { - --system-header-height: #{$system-header-height}; -} - -.with-performance-bar { - --performance-bar-height: #{$performance-bar-height}; -} - -.review-bar-visible { - --review-bar-height: #{$mr-review-bar-height}; -} - .diff-tree-list { // This 11px value should match the additional value found in // /assets/stylesheets/framework/diffs.scss @@ -264,21 +255,19 @@ $tabs-holder-z-index: 250; // If they don't match, the file tree and the diff files stick // to the top at different heights, which is a bad-looking defect $diff-file-header-top: 11px; - --initial-pos: calc(#{$header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); - --top-pos: var(--initial-pos); - position: -webkit-sticky; position: sticky; - top: calc(var(--top-pos) + var(--performance-bar-height, 0px)); + top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + #{$diff-file-header-top}); min-height: 300px; - height: calc(100vh - var(--top-pos) - var(--system-header-height, 0px) - var(--performance-bar-height, 0px) - var(--review-bar-height, 0px)); + height: calc(#{$calc-application-viewport-height} - (#{$mr-tabs-height} + #{$diff-file-header-top})); .drag-handle { bottom: 16px; } &.is-sidebar-moved { - --top-pos: calc(var(--initial-pos) + 26px); + height: calc(#{$calc-application-viewport-height} - (#{$mr-tabs-height} + #{$diff-file-header-top} + 26px)); + top: calc(#{$calc-application-header-height} + #{$mr-tabs-height} + #{$diff-file-header-top} + 26px); } } @@ -915,15 +904,6 @@ $tabs-holder-z-index: 250; &:not(:first-child) { margin-top: $gl-padding; } - - &:not(:last-child)::before { - content: ''; - border-left: 2px solid var(--border-color, $border-color); - position: absolute; - bottom: -17px; - left: 26px; - height: 16px; - } } .mr-version-controls { @@ -992,8 +972,8 @@ $tabs-holder-z-index: 250; .merge-request-overview { @include media-breakpoint-up(lg) { display: grid; - grid-template-columns: calc(95% - 285px) auto; - grid-gap: 5%; + grid-template-columns: calc(97% - 285px) auto; + grid-gap: 3%; } } @@ -1156,7 +1136,7 @@ $tabs-holder-z-index: 250; .review-bar-component { position: fixed; - bottom: 0; + bottom: $calc-application-footer-height; left: 0; z-index: $zindex-dropdown-menu; display: flex; @@ -1241,3 +1221,70 @@ $tabs-holder-z-index: 250; } } } + +.mr-state-loader { + svg { + vertical-align: middle; + } + + .gl-skeleton-loader { + max-width: 334px; + } +} + +.mr-system-note-icon { + width: 20px; + height: 20px; + margin-left: 6px; + + &.gl-bg-green-100 { + --bg-color: var(--green-100, #{$green-100}); + } + + &.gl-bg-red-100 { + --bg-color: var(--red-100, #{$red-100}); + } + + &.gl-bg-blue-100 { + --bg-color: var(--blue-100, #{$blue-100}); + } +} + +.mr-system-note-icon:not(.mr-system-note-empty)::before { + content: ''; + display: block; + position: absolute; + left: calc(50% - 1px); + bottom: 100%; + width: 2px; + height: 20px; + background: linear-gradient(to bottom, transparent, var(--bg-color)); + + .system-note:first-child & { + display: none; + } +} + +.mr-system-note-icon:not(.mr-system-note-empty)::after { + content: ''; + display: block; + position: absolute; + left: calc(50% - 1px); + top: 100%; + width: 2px; + height: 20px; + background: linear-gradient(to bottom, var(--bg-color), transparent); + + .system-note:last-child & { + display: none; + } +} + +.mr-system-note-empty { + width: 8px; + height: 8px; + margin-top: 6px; + margin-left: 12px; + margin-right: 8px; + border: 2px solid var(--gray-50, $gray-50); +} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index 708d1a2895e..8dc07715989 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -131,42 +131,6 @@ } } -.milestone-page-header { - display: flex; - flex-flow: row; - align-items: center; - flex-wrap: wrap; - - .milestone-buttons { - margin-left: auto; - order: 2; - - .verbose { - display: none; - } - } - - .header-text-content { - order: 3; - width: 100%; - } - - @include media-breakpoint-up(xs) { - .milestone-buttons .verbose { - display: inline; - } - - .header-text-content { - order: 2; - width: auto; - } - - .milestone-buttons { - order: 3; - } - } -} - .issuable-row { background-color: var(--white, $white); } diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index f08d6e3ca95..51bffd99dd0 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -57,10 +57,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-h-full; @include gl-w-full; @include gl-overflow-x-auto; - @include gl-border-gray-100; - @include gl-border-1; - @include gl-border-solid; - @include gl-rounded-base; } .timeline-section { @@ -68,15 +64,12 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-top-0; z-index: 20; - .timeline-header-blank, + .timeline-header-label, .timeline-header-item { @include gl-float-left; - height: $header-item-height; - border-bottom: $border-style; - background-color: var(--white, $white); } - .timeline-header-blank { + .timeline-header-label { @include gl-sticky; @include gl-top-0; @include gl-left-0; @@ -85,13 +78,8 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi } .timeline-header-item { - &:last-of-type .item-label { - @include gl-border-r-0; - } - - .item-label, .item-sublabel .sublabel-value { - color: var(--gray-400, $gray-400); + color: var(--gray-700, $gray-700); @include gl-font-weight-normal; &.label-dark { @@ -103,11 +91,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi } } - .item-label { - border-right: $border-style; - border-bottom: $border-style; - } - .item-sublabel { @include gl-relative; @include gl-display-flex; @@ -118,7 +101,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi text-align: center; @include gl-font-base; - padding: 2px 0; } } @@ -131,10 +113,15 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-rounded-full; transform: translate(-50%, 50%); } + + &:first-of-type { + .week-item-sublabel .sublabel-value:nth-of-type(7) { + @include gl-border-r; + } + } } } -.timeline-section .timeline-header-blank, .list-section .details-cell { &::after { @include gl-h-full; @@ -159,7 +146,6 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi @include gl-left-0; width: $details-cell-width; @include gl-font-base; - background-color: var(--white, $white); z-index: 10; } @@ -182,3 +168,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi transform: translateX(-50%); } } + +.rotation-asignee-container { + overflow-x: clip; +} diff --git a/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss b/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss new file mode 100644 index 00000000000..8f2cbc402c9 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/projects_usage_quotas.scss @@ -0,0 +1,19 @@ +@import 'mixins_and_variables_and_functions'; + +.storage-type-usage { + &:first-child { + @include gl-rounded-top-left-base; + @include gl-rounded-bottom-left-base; + } + + &:last-child { + @include gl-rounded-top-right-base; + @include gl-rounded-bottom-right-base; + } + + &:not(:last-child) { + @include gl-border-r-2; + @include gl-border-r-solid; + border-right-color: var(--white, $white); + } +} diff --git a/app/assets/stylesheets/page_bundles/releases.scss b/app/assets/stylesheets/page_bundles/releases.scss index 24ffbf9b90c..c011ec3fe4c 100644 --- a/app/assets/stylesheets/page_bundles/releases.scss +++ b/app/assets/stylesheets/page_bundles/releases.scss @@ -10,3 +10,17 @@ min-height: 46px; } } + +.release-tag-selector { + .popover-body { + padding-left: 0; + padding-right: 0; + padding-bottom: 0; + min-width: $gl-dropdown-width; + max-width: $gl-dropdown-width; + } + + .release-tag-list { + max-height: $dropdown-max-height; + } +} diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss index cde570cfb0f..d37e87b5cd5 100644 --- a/app/assets/stylesheets/page_bundles/search.scss +++ b/app/assets/stylesheets/page_bundles/search.scss @@ -21,18 +21,18 @@ $border-radius-medium: 3px; } } +.language-filter-checkbox { + .custom-control-label { + flex-grow: 1; + } +} + .search-sidebar { @include media-breakpoint-up(md) { min-width: $search-sidebar-min-width; max-width: $search-sidebar-max-width; } - .language-filter-checkbox { - .custom-control-label { - flex-grow: 1; - } - } - .language-filter-max-height { max-height: $language-filter-max-height; } diff --git a/app/assets/stylesheets/page_bundles/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index d7d454bde45..69a3ec94fda 100644 --- a/app/assets/stylesheets/page_bundles/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -102,24 +102,42 @@ } } - .active > a { - color: var(--black, $black); - } - .active > .wiki-list { a, .wiki-list-expand-button, .wiki-list-collapse-button { - color: var(--black, $black); + color: $black; + } + } + + .wiki-list { + height: $gl-spacing-scale-8; + + &:hover { + background: $gray-10; + + .wiki-list-create-child-button { + display: block; + box-shadow: none; + + &:focus { + box-shadow: 0 0 0 1px #fff, 0 0 0 3px $blue-400; + } + + &:active { + background: $gray-100 !important; + box-shadow: 0 0 0 1px #fff, 0 0 0 3px $blue-400; + } + } } } .wiki-list-expand-button, .wiki-list-collapse-button { - color: var(--gray-400, $gray-400); + color: $gray-400; &:hover { - color: var(--black, $black); + color: $black; } } @@ -130,10 +148,6 @@ margin: 0; } - ul.wiki-pages li { - margin: 5px 0 10px; - } - ul.wiki-pages ul { padding-left: 20px; } @@ -172,6 +186,10 @@ ul.wiki-pages-list.content-list { } .wiki-list { + .wiki-list-create-child-button { + display: none; + } + .wiki-list-expand-button, .wiki-list-collapse-button { left: -$gl-spacing-scale-5; @@ -198,17 +216,12 @@ ul.wiki-pages-list.content-list { .drawio-editor { position: fixed; - top: calc(var(--header-height, 48px)); + top: 0; left: 0; bottom: 0; - width: 100%; - height: calc(100% - var(--header-height, 48px)); + width: 100vw; + height: 100vh; border: 0; z-index: 1100; visibility: hidden; } - -.with-performance-bar .drawio-editor { - top: calc(var(--header-height, 48px) + 35px); - height: calc(100% - var(--header-height, 48px) - 35px); -} diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index 00c86c46ac8..ecbb872e1df 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -87,22 +87,20 @@ } } -.work-item-link-child { - @include gl-border-1; - @include gl-border-solid; - @include gl-border-transparent; - @include gl-rounded-base; - - &:hover, - &:focus-within { - @include gl-bg-white; - @include gl-border-gray-50; - } -} - // sticky error placement for errors in modals , by default it is 83px for full view #work-item-detail-modal { .flash-container.flash-container-page.sticky { top: -8px; } } + + +.work-item-notifications-form { + .gl-toggle { + @include gl-ml-auto; + } + + .gl-toggle-label { + @include gl-font-weight-normal; + } +} |