diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
14 files changed, 107 insertions, 250 deletions
diff --git a/app/assets/stylesheets/page_bundles/branches.scss b/app/assets/stylesheets/page_bundles/branches.scss index a5b201c7dac..daf828fb559 100644 --- a/app/assets/stylesheets/page_bundles/branches.scss +++ b/app/assets/stylesheets/page_bundles/branches.scss @@ -43,3 +43,15 @@ .branches-list .branch-item:not(:last-of-type) { border-bottom: 1px solid $border-color; } + +.branch-item { + .issuable-reference { + max-width: 92px; + } + + .right-block { + @media (min-width: map-get($grid-breakpoints, md)) { + min-width: 200px; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss index c19561a5e5e..e206b5e5b8b 100644 --- a/app/assets/stylesheets/page_bundles/design_management.scss +++ b/app/assets/stylesheets/page_bundles/design_management.scss @@ -115,11 +115,11 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); flex-basis: 28%; .link-inherit-color { + &, &:hover, &:active, &:focus { color: inherit; - text-decoration: none; } } @@ -159,27 +159,14 @@ $t-gray-a-16-design-pin: rgba($black, 0.16); transition: background $gl-transition-duration-medium $general-hover-transition-curve; border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box border-top-right-radius: $border-radius-default; - - a { - color: inherit; - } - - .note-text a { - color: var(--blue-600, $blue-600); - } } .reply-wrapper { - padding: $gl-padding-8 $gl-padding-8 $gl-padding-4; - background: $gray-10; + padding: $gl-padding-8; border-radius: 0 0 $border-radius-default $border-radius-default; } } - .reply-wrapper { - border-top: 1px solid var(--border-color, $border-color); - } - .new-discussion-disclaimer { line-height: 20px; } diff --git a/app/assets/stylesheets/page_bundles/issuable.scss b/app/assets/stylesheets/page_bundles/issuable.scss index 1b98fd4df07..1b5da0368c6 100644 --- a/app/assets/stylesheets/page_bundles/issuable.scss +++ b/app/assets/stylesheets/page_bundles/issuable.scss @@ -149,6 +149,10 @@ .gl-search-box-by-type button.gl-clear-icon-button:hover { @include gl-bg-transparent; + + &:focus { + @include gl-focus($inset: true); + } } .issuable-move-button:not(.disabled):hover { diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 2c54c819543..6972e98b0bf 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -9,6 +9,8 @@ @import '@gitlab/ui/src/components/base/alert/alert'; @import '@gitlab/ui/src/components/base/avatar/avatar'; @import '@gitlab/ui/src/components/base/button/button'; +@import '@gitlab/ui/src/components/base/banner/banner'; +@import '@gitlab/ui/src/components/base/card/card'; @import '@gitlab/ui/src/components/base/icon/icon'; @import '@gitlab/ui/src/components/base/link/link'; @import '@gitlab/ui/src/components/base/loading_icon/loading_icon'; @@ -23,7 +25,7 @@ @import '@gitlab/ui/src/components/base/form/form_group/form_group'; @import '@gitlab/ui/src/components/base/search_box_by_type/search_box_by_type'; -$header-height: 40px; +$header-height: $gl-spacing-scale-8; .jira-connect-header { min-height: $header-height; @@ -35,6 +37,6 @@ $header-height: 40px; .jira-connect-app { margin-top: $header-height; - height: calc(100% - #{$header-height}); - max-width: 1000px; + height: 100%; + max-height: calc(100% - #{$header-height + $gl-spacing-scale-7 * 2}); } diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss index 355d2afc0ba..b63f199f7b9 100644 --- a/app/assets/stylesheets/page_bundles/login.scss +++ b/app/assets/stylesheets/page_bundles/login.scss @@ -196,10 +196,6 @@ } } - .submit-container { - margin-top: 16px; - } - input[type='submit'] { margin-bottom: 0; display: block; @@ -228,65 +224,33 @@ } } -.devise-layout-html { +.html-devise-layout { 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); + padding-top: 48px; // Remove this line when the restyle_login_page feature flag is deleted. Instead, add self-align `center` to container, and maybe a top margin. - // offset without the header - &.navless { - height: calc(100% - 11px); + &.with-system-header { + padding-top: $system-header-height; + padding-top: calc(#{$system-header-height} + 48px); // Remove this line when the restyle_login_page feature flag is deleted } - 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: var(--white, $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; + &.with-system-footer { + .footer-container { + padding-bottom: $system-footer-height; } } } } @include media-breakpoint-down(sm) { - .sm-bg-gray-10 { + .sm-bg-gray { @include gl-bg-gray-10; + + .gl-dark & { + background-color: var(--gray-100); + } } } diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index fc4a9d3dff9..5e20588dd70 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -226,7 +226,7 @@ $tabs-holder-z-index: 250; clear: left; .note-body { - padding: 0 0 $gl-padding-8; + padding: 0 $gl-padding-8 $gl-padding-8 $gl-padding-32; } } @@ -234,14 +234,15 @@ $tabs-holder-z-index: 250; margin-top: -2px; margin-right: $gl-padding-8; } +} - // tiny adjustment to vertical align with the note header text - .discussion-collapsible { - margin-left: 1rem; +// tiny adjustment to vertical align with the note header text +.discussion-collapsible { + border: 0 !important; + margin: 0; - .timeline-icon { - padding-top: 2px; - } + .timeline-icon { + padding-top: 2px; } } @@ -1275,20 +1276,12 @@ $tabs-holder-z-index: 250; .diff-file-discussions-wrapper { @include gl-w-full; - max-width: 800px; - - .diff-discussions > .notes { - @include gl-p-5; - } - .diff-discussions:not(:first-child) >.notes { @include gl-pt-0; } .note-discussion { - @include gl-rounded-base; - - border: 1px solid var(--gray-100, $gray-100) !important; + border-bottom: 1px solid var(--gray-100, $gray-100) !important; } .discussion-collapsible { diff --git a/app/assets/stylesheets/page_bundles/notifications.scss b/app/assets/stylesheets/page_bundles/notifications.scss index 88437954f4c..a901235df50 100644 --- a/app/assets/stylesheets/page_bundles/notifications.scss +++ b/app/assets/stylesheets/page_bundles/notifications.scss @@ -1,31 +1,7 @@ @import 'mixins_and_variables_and_functions'; .notification-list-item { - @include media-breakpoint-down(sm) { - .notification-dropdown { - width: 100%; - } - - .btn-group { - width: 100%; - } - - .table-section { - border-top: 0; - min-height: unset; - - &:not(:first-child) { - padding-top: 0; - } - } - - .update-notifications { - width: 100%; - } + &:not(:last-of-type) { + border-bottom: 1px solid $gray-100; } } - -.notification { - position: relative; - top: 1px; -} diff --git a/app/assets/stylesheets/page_bundles/profiles/preferences.scss b/app/assets/stylesheets/page_bundles/profiles/preferences.scss index c9c78a70163..1a59f96c6ee 100644 --- a/app/assets/stylesheets/page_bundles/profiles/preferences.scss +++ b/app/assets/stylesheets/page_bundles/profiles/preferences.scss @@ -66,13 +66,8 @@ .syntax-theme { label { - margin-right: $gl-padding-32; - margin-bottom: $gl-padding; - text-align: center; - .preview { - margin-bottom: 10px; - width: 160px; + margin-bottom: 8px; img { border-radius: 4px; diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index 68bf2fa0f82..8d8da10268a 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -47,12 +47,6 @@ } .project-repo-buttons { - .btn { - svg { - fill: var(--gray-500, $gray-500); - } - } - .download-button { @include media-breakpoint-down(md) { margin-left: 0; diff --git a/app/assets/stylesheets/page_bundles/prometheus.scss b/app/assets/stylesheets/page_bundles/prometheus.scss deleted file mode 100644 index 702c0e4dd72..00000000000 --- a/app/assets/stylesheets/page_bundles/prometheus.scss +++ /dev/null @@ -1,113 +0,0 @@ -@import 'mixins_and_variables_and_functions'; - -.date-time-picker { - .date-time-picker-menu { - width: 400px; - } -} - -.prometheus-graphs { - .dropdown-buttons { - > div { - margin-left: auto; - } - } - - .col-form-label { - line-height: 1; - padding-top: 0; - } - - .form-group { - margin-bottom: map-get($spacing-scale, 3); - } - - .variables-section { - input { - @include media-breakpoint-up(sm) { - width: 160px; - } - } - } - - .links-section { - .gl-hover-text-blue-600-children:hover { - * { - @include gl-text-blue-600; - } - } - } -} - -.draggable { - &.draggable-enabled { - .draggable-panel { - border: $gray-100 1px solid; - border-radius: $border-radius-default; - margin: -1px; - cursor: grab; - } - - .prometheus-graph { - // Make dragging easier by disabling use of chart - pointer-events: none; - } - } - - &.sortable-chosen .draggable-panel { - background: $white; - box-shadow: 0 0 4px $gray-300; - } - - .draggable-remove { - z-index: 1; - - .draggable-remove-link { - cursor: pointer; - color: $gray-400; - background-color: $white; - } - } -} - -.prometheus-graphs-header { - .monitor-environment-dropdown-menu, - .monitor-dashboard-dropdown-menu { - &.show { - display: flex; - flex-direction: column; - overflow: hidden; - } - - .no-matches-message { - padding: $gl-padding-8 $gl-padding-12; - } - } - - .show-last-dropdown { - // same as in .dropdown-menu-toggle - // see app/assets/stylesheets/framework/dropdowns.scss - width: 160px; - } -} - -.prometheus-panel { - margin-top: 20px; -} - -.prometheus-graph-group { - display: flex; - flex-wrap: wrap; -} - -.prometheus-graph { - padding: $gl-padding-8; -} - -.prometheus-panel-builder { - .preview-date-time-picker { - // same as in .dropdown-menu-toggle - // see app/assets/stylesheets/framework/dropdowns.scss - width: 160px; - } -} diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss index d1d14cbcddd..a3a62b44e98 100644 --- a/app/assets/stylesheets/page_bundles/search.scss +++ b/app/assets/stylesheets/page_bundles/search.scss @@ -69,11 +69,9 @@ $language-filter-max-height: 20rem; } .label-with-color-checkbox { - max-height: $gl-spacing-scale-5; - .custom-control-label { + display: flex; margin-bottom: 0; - max-height: $gl-spacing-scale-5; .label-title { margin-left: -$gl-spacing-scale-2; diff --git a/app/assets/stylesheets/page_bundles/settings.scss b/app/assets/stylesheets/page_bundles/settings.scss index 9a0d7880734..b906a932e70 100644 --- a/app/assets/stylesheets/page_bundles/settings.scss +++ b/app/assets/stylesheets/page_bundles/settings.scss @@ -65,6 +65,8 @@ } .settings-content { + // #416312: Fix white space at bottom of page + position: relative; max-height: 1px; overflow-y: hidden; padding-right: 110px; diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss index a13b8704095..e0ee157187b 100644 --- a/app/assets/stylesheets/page_bundles/tree.scss +++ b/app/assets/stylesheets/page_bundles/tree.scss @@ -205,17 +205,6 @@ margin-top: $gl-padding; } - -.web-ide-promo-popover { - box-shadow: 0 0 18px -1.9px rgba(119, 89, 194, 0.16), - 0 0 12.9px -1.7px rgba(119, 89, 194, 0.16), 0 0 9.2px -1.4px rgba(119, 89, 194, 0.16), - 0 0 6.4px -1.1px rgba(119, 89, 194, 0.16), 0 0 4.5px -0.8px rgba(119, 89, 194, 0.16), - 0 0 3px -0.6px rgba(119, 89, 194, 0.16), 0 0 1.8px -0.3px rgba(119, 89, 194, 0.16), - 0 0 0.6px rgba(119, 89, 194, 0.16); - z-index: 999; -} - -.web-ide-promo-popover-illustration { - width: calc(100% + 24px); - margin: -28px -12px 0; +.edit-dropdown-group-width { + width: 320px; } diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index ecbb872e1df..013aa064c4e 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -1,5 +1,8 @@ @import 'mixins_and_variables_and_functions'; +$work-item-overview-right-sidebar-width: 340px; +$work-item-sticky-header-height: 52px; + .gl-token-selector-token-container { display: flex; align-items: center; @@ -104,3 +107,54 @@ @include gl-font-weight-normal; } } + +.work-item-overview { + @include media-breakpoint-up(md) { + display: grid; + grid-template-columns: 1fr $work-item-overview-right-sidebar-width; + gap: 2rem; + } +} + +.work-item-overview-right-sidebar { + @include media-breakpoint-up(md) { + &.is-modal { + .work-item-attributes-wrapper { + top: 0; + } + } + } +} + +.work-item-attributes-wrapper { + .work-item-overview & { + @include media-breakpoint-up(md) { + top: calc(#{$calc-application-header-height} + #{$work-item-sticky-header-height}); + height: calc(#{$calc-application-viewport-height} - #{$work-item-sticky-header-height}); + margin-bottom: calc(#{$content-wrapper-padding} * -1); + position: sticky; + overflow-y: auto; + overflow-x: hidden; + } + } +} + +.work-item-field-label { + .work-item-overview & { + max-width: 30%; + flex: none; + } +} + +.work-item-field-value { + .work-item-overview & { + max-width: 65%; + } +} + +.token-selector-menu-class { + .work-item-overview & { + width: 100%; + min-width: 100%; + } +} |