diff options
Diffstat (limited to 'app/assets/stylesheets')
44 files changed, 701 insertions, 552 deletions
diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index 6a6febbf7b4..23a7beb527b 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -189,3 +189,24 @@ $avatar-sizes: ( .avatar-counter { @include avatar-counter(); } + +.user-popover { + // GlAvatarLabeled doesn't expose any prop to override internal classes + + // Max width of popover container is set by gl-max-w-48 + // so we need to ensure that name/username/status container doesn't overflow + .gl-avatar-labeled-labels { + max-width: px-to-rem(290px); + } + + .gl-avatar-labeled-label, + .gl-avatar-labeled-sublabel { + @include gl-text-truncate; + } + + &.user-popover-cannot-merge { + .popover-header { + @include gl-bg-orange-50; + } + } +} diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss index 2ed955a56b6..08a956bf90f 100644 --- a/app/assets/stylesheets/components/content_editor.scss +++ b/app/assets/stylesheets/components/content_editor.scss @@ -1,18 +1,38 @@ .ProseMirror { + width: calc(100% - 4px); padding-top: $gl-spacing-scale-4; + padding-left: calc(#{$gl-spacing-scale-5} - 2px); + padding-right: $gl-spacing-scale-5; + margin: 2px; min-height: 140px; max-height: 55vh; + position: static; overflow-y: auto; + transition: box-shadow ease-in-out 0.15s; + + .gl-dark & { + width: calc(100% - 6px); + margin: 2px 3px; + padding-left: calc(#{$gl-spacing-scale-5} - 3px); + } ::selection { background-color: transparent; } + &:focus { + @include gl-focus; + } + &:not(.ProseMirror-hideselection) .content-editor-selection, a.ProseMirror-selectednode, span.ProseMirror-selectednode { background-color: $blue-100; - box-shadow: 0 2px 0 $blue-100, 0 -2px 0 $blue-100; + box-shadow: 0 2px 0 $blue-100, 0 -2px 0 $blue-100; + } + + pre > code { + background-color: transparent; } td, @@ -44,6 +64,48 @@ pointer-events: none; } + .image-resize-container { + position: relative; + } + + .image-resize { + display: inline-block; + position: absolute; + width: 8px; + height: 8px; + background: $blue-200; + outline: 1px solid $white; + } + + .image-resize-nw { + top: -4px; + left: -4px; + cursor: nw-resize; + } + + .image-resize-ne { + top: -4px; + right: -4px; + cursor: ne-resize; + } + + .image-resize-sw { + bottom: 4px; + left: -4px; + cursor: sw-resize; + } + + .image-resize-se { + bottom: 4px; + right: -4px; + cursor: se-resize; + } + + img.ProseMirror-selectednode { + outline: 2px solid $blue-200; + outline-offset: -2px; + } + video { max-width: 400px; } @@ -78,6 +140,81 @@ } } + .suggestion-added, + .suggestion-deleted, + .suggestion-added-input { + white-space: pre-wrap; + + > code { + white-space: pre-wrap; + padding: 0; + display: flex; + } + } + + .suggestion-added-input { + > code { + display: block; + margin-left: 120px; + background-color: transparent !important; + } + } + + .suggestion-added, + .suggestion-deleted { + background-color: $line-added; + width: 100%; + + > code { + border-left: 100px solid $line-number-new; + padding-left: 20px; + border-radius: 0; + background-color: inherit !important; + } + + > code::before { + content: attr(data-line-number); + position: absolute; + width: 100px; + margin-left: -120px; + text-align: right; + padding-right: 10px; + padding-left: 10px; + + @include gl-text-secondary; + } + + > code::after { + content: '+'; + position: absolute; + margin-left: -20px; + width: 20px; + text-align: center; + + @include gl-text-secondary; + } + } + + .suggestion-added > code { + color: rgba($white, 0); + } + + .suggestion-deleted { + background-color: $line-removed; + cursor: not-allowed; + + > code { + border-color: $line-number-old; + } + + > code::before { + padding-right: 60px; + } + + > code::after { + content: '-'; + } + } .dl-content { width: 100%; @@ -135,6 +272,31 @@ } } +.gl-dark .ProseMirror { + .suggestion-added-input, + .suggestion-deleted { + > code { + color: $gray-50; + } + } + + .suggestion-deleted, + .suggestion-added { + > code::before, + > code::after { + color: $gray-400; + } + } +} + +// Fixes a problem with the layout shifting +// when switching between Markdown and the +// Richtext editor due to a loosly defined +// style in typography.scss +.md > .ProseMirror { + margin: 2px; +} + .table-creator-grid-item { box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white, inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100, @@ -179,6 +341,17 @@ min-width: auto; } +.content-editor-suggestions-dropdown { + .gl-new-dropdown-panel { + width: max-content; + } + + li.focused div.gl-new-dropdown-item-content { + @include gl-focus($inset: true); + @include gl-bg-gray-50; + } +} + .bubble-menu-form { min-width: 320px; } diff --git a/app/assets/stylesheets/fonts.scss b/app/assets/stylesheets/fonts.scss index bc49d17fcbb..0d87d49ac18 100644 --- a/app/assets/stylesheets/fonts.scss +++ b/app/assets/stylesheets/fonts.scss @@ -9,15 +9,26 @@ Usage: font-weight: 100 900; font-display: optional; font-style: normal; - font-named-instance: 'Regular'; /* stylelint-disable property-no-unknown */ + /* stylelint-disable-next-line property-no-unknown */ + font-named-instance: 'Regular'; src: font-url('gitlab-sans/GitLabSans.woff2') format('woff2'); } +@font-face { + font-family: 'GitLab Sans'; + font-weight: 100 900; + font-display: optional; + font-style: italic; + /* stylelint-disable-next-line property-no-unknown */ + font-named-instance: 'Regular'; + src: font-url('gitlab-sans/GitLabSans-Italic.woff2') format('woff2'); +} + /* ------------------------------------------------------- Monospaced font: GitLab Mono. Usage: - html { font-family: 'GitLab Mono', sans-serif; } + html { font-family: 'GitLab Mono', monospace; } */ @font-face { font-family: 'GitLab Mono'; @@ -35,45 +46,6 @@ Usage: src: font-url('gitlab-mono/GitLabMono-Italic.woff2') format('woff2'); } -/* ------------------------------------------------------- -Monospaced font: JetBrains Mono. - -All of the definitions below can be removed once -`GitLab Mono` is properly rolled out. - -Usage: - html { font-family: 'JetBrains Mono', sans-serif; } -*/ -@font-face { - font-family: 'JetBrains Mono'; - font-display: optional; - font-style: normal; - src: font-url('jetbrains-mono/JetBrainsMono.woff2') format('woff2'); -} - -@font-face { - font-family: 'JetBrains Mono'; - font-display: optional; - font-weight: bold; - src: font-url('jetbrains-mono/JetBrainsMono-Bold.woff2') format('woff2'); -} - -@font-face { - font-family: 'JetBrains Mono'; - font-display: optional; - font-weight: normal; - font-style: italic; - src: font-url('jetbrains-mono/JetBrainsMono-Italic.woff2') format('woff2'); -} - -@font-face { - font-family: 'JetBrains Mono'; - font-display: optional; - font-weight: bold; - font-style: italic; - src: font-url('jetbrains-mono/JetBrainsMono-BoldItalic.woff2') format('woff2'); -} - // This isn't the best solution, but we needed a quick fix // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107592/ * { diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index e60353578b0..4d4144fe9dd 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -39,6 +39,7 @@ @import 'framework/contextual_sidebar_header'; @import 'framework/contextual_sidebar'; @import 'framework/super_sidebar'; +@import 'framework/brand_logo'; @import 'framework/tables'; @import 'framework/notes'; @import 'framework/tabs'; @@ -64,3 +65,4 @@ @import 'framework/card'; @import 'framework/source_editor'; @import 'framework/diffs'; +@import 'framework/new_card'; diff --git a/app/assets/stylesheets/framework/brand_logo.scss b/app/assets/stylesheets/framework/brand_logo.scss new file mode 100644 index 00000000000..1bc1ef797a7 --- /dev/null +++ b/app/assets/stylesheets/framework/brand_logo.scss @@ -0,0 +1,29 @@ +$brand-logo-light-background: #e0dfe5; +$brand-logo-dark-background: #53515b; + +.brand-logo { + display: inline-block; + @include gl-rounded-base; + @include gl-p-2; + @include gl-bg-transparent; + @include gl-border-none; + + .tanuki-logo { + @include gl-vertical-align-middle; + } + + &:focus, + &:active { + @include gl-focus; + } + + &:hover, + &:focus, + &:active { + background-color: $brand-logo-light-background; + + .gl-dark & { + background-color: $brand-logo-dark-background; + } + } +} diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 2ec7c891197..7b8d9281148 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -34,11 +34,7 @@ --mr-review-bar-height: #{$mr-review-bar-height}; } -@include media-breakpoint-up(md) { - .page-with-contextual-sidebar { - --application-bar-left: #{$contextual-sidebar-collapsed-width}; - } - +@include media-breakpoint-up(sm) { .right-sidebar-collapsed { --application-bar-right: #{$right-sidebar-collapsed-width}; @@ -52,6 +48,12 @@ } } +@include media-breakpoint-up(md) { + .page-with-contextual-sidebar { + --application-bar-left: #{$contextual-sidebar-collapsed-width}; + } +} + @include media-breakpoint-up(xl) { .page-with-contextual-sidebar { --application-bar-left: #{$contextual-sidebar-width}; @@ -330,14 +332,6 @@ li.note { height: 220px; } -.footer-links { - margin-bottom: 20px; - - a { - margin-right: 15px; - } -} - .card.card-body { margin-bottom: $gl-padding; @@ -555,3 +549,16 @@ li.note { See https://gitlab.com/gitlab-org/gitlab/issues/36857 for more details. **/ .gl-line-height-14 { line-height: $gl-line-height-14; } + +// TODO: To be removed once `split` option for new dropdowns is implemented. +// See issue at https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2263 +.gl-new-dropdown.split:nth-child(n+2) { + .gl-new-dropdown-toggle { + margin-left: 1px; + + &.btn-tertiary, + &.disabled { + margin-left: -1px; + } + } +} diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 192cb82aaab..7b35659e90a 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -1,6 +1,6 @@ // Common .diff-file { - padding-bottom: $gl-padding; + margin-bottom: $gl-padding; &.has-body { .file-title { @@ -864,19 +864,6 @@ table.code { } } -// Remove border from collapsed replies widget only on diffs -.diff-grid-comments { - .replies-widget-collapsed { - border-bottom: 0; - } - // Rounded border radius only on diff comments with no replies - .discussion-collapsible { - .discussion-reply-holder:first-of-type { - border-radius: $gl-border-radius-base; - } - } -} - .discussion-body .image .frame { position: relative; } @@ -889,13 +876,6 @@ table.code { } } -.parallel { - .discussion-collapsible { - margin: $gl-padding; - margin-top: 0; - } -} - .image-diff-overlay, .image-diff-overlay-add-comment { top: 0; diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index 16ad6f62c64..358f599e0e9 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -3,8 +3,11 @@ gl-emoji { display: inline-flex; vertical-align: baseline; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - font-size: 1.2em; - line-height: 1; + + img { + width: 1.2em; + height: 1.2em; + } } .user-status-emoji { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index b2ba1d8830d..f5ed85e8845 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -8,7 +8,7 @@ $search-input-field-x-min-width: 200px; min-height: $header-height; border: 0; position: fixed; - top: $calc-application-bars-height; + top: $calc-system-headers-height; left: 0; right: 0; border-radius: 0; @@ -322,7 +322,7 @@ $search-input-field-x-min-width: 200px; left: var(--application-bar-left); position: fixed; right: var(--application-bar-right); - top: $calc-application-bars-height; + top: $calc-system-headers-height; width: auto; z-index: $top-bar-z-index; diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index 7dfbd5485d8..086a16edda2 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -36,7 +36,7 @@ body { } .layout-page { - padding-top: calc(#{$header-height} + #{$calc-application-bars-height}); + padding-top: $calc-application-bars-height; padding-bottom: $calc-application-footer-height; } @@ -62,11 +62,6 @@ body { } } -.navless-container { - margin-top: $header-height; - padding-top: $gl-padding * 2; -} - .container-limited { max-width: $fixed-layout-width; diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index 5fdab7891ec..f8f54567ef2 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -91,7 +91,7 @@ } .md-preview-holder { - min-height: 176px; + min-height: 173px; padding: 10px 0; overflow-x: auto; } @@ -106,6 +106,7 @@ box-shadow: none; width: 100%; resize: none !important; + transition: box-shadow $gl-transition-duration-medium ease; } .md-suggestion-diff { diff --git a/app/assets/stylesheets/framework/new_card.scss b/app/assets/stylesheets/framework/new_card.scss new file mode 100644 index 00000000000..ef8f5cc1d1b --- /dev/null +++ b/app/assets/stylesheets/framework/new_card.scss @@ -0,0 +1,94 @@ +.gl-new-card { + @include gl-mt-5; + @include gl-bg-gray-10; + @include gl-border-1; + @include gl-border-solid; + @include gl-border-gray-100; + @include gl-rounded-base; + + &-header { + @include gl-px-5; + @include gl-py-4; + @include gl-display-flex; + @include gl-justify-content-space-between; + @include gl-bg-white; + @include gl-border-b-1; + @include gl-border-b-solid; + @include gl-border-b-gray-100; + @include gl-rounded-top-base; + } + + &[aria-expanded=false] &-header { + @include gl-border-bottom-0; + @include gl-rounded-base; + } + + &-title-wrapper { + @include gl-display-flex; + @include gl-flex-grow-1; + } + + &-title { + @include gl-display-flex; + @include gl-font-base; + @include gl-font-weight-bold; + @include gl-relative; + @include gl-m-0; + @include gl-line-height-24; + } + + &-count { + @include gl-mx-3; + @include gl-font-base; + @include gl-font-weight-bold; + @include gl-text-gray-500; + @include gl-display-inline-flex; + @include gl-align-items-center; + } + + &-description { + @include gl-font-sm; + @include gl-text-gray-500; + @include gl-m-0; + } + + &-toggle { + @include gl-pl-3; + @include gl-ml-3; + @include gl-mr-n2; + @include gl-border-l-1; + @include gl-border-l-solid; + @include gl-border-l-gray-100; + } + + &-body { + @include gl-rounded-bottom-base; + @include gl-px-3; + @include gl-py-0; + } + + &-content { + @include gl-px-2; + @include gl-py-3; + } + + &-empty { + @include gl-p-2; + @include gl-mb-0; + @include gl-text-gray-500; + } + + &-footer { + @include gl-bg-white; + } + + &-add-form { + @include gl-p-4; + @include gl-my-2; + @include gl-bg-white; + @include gl-border-1; + @include gl-border-solid; + @include gl-border-gray-100; + @include gl-rounded-base; + } +} diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 98083fbc72a..9bf6ed45483 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -39,6 +39,12 @@ } .approvers-select { + width: calc(70% - #{$gl-spacing-scale-5}); + + .gl-new-dropdown-toggle { + @include gl-w-full; + } + .dropdown-menu { @include gl-w-full; @include gl-max-w-none; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index b7a674a35e7..5f90dd62426 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -317,7 +317,7 @@ .right-sidebar { &:not(.right-sidebar-merge-requests) { @include right-sidebar; - top: calc(#{$header-height} + #{$calc-application-bars-height}); + top: $calc-application-bars-height; @include media-breakpoint-down(md) { z-index: 251; @@ -327,7 +327,7 @@ &.right-sidebar-merge-requests { @include media-breakpoint-down(md) { @include right-sidebar; - top: calc(#{$header-height} + #{$calc-application-bars-height}); + top: $calc-application-bars-height; z-index: 251; } diff --git a/app/assets/stylesheets/framework/super_sidebar.scss b/app/assets/stylesheets/framework/super_sidebar.scss index ca67b472322..12801b272e8 100644 --- a/app/assets/stylesheets/framework/super_sidebar.scss +++ b/app/assets/stylesheets/framework/super_sidebar.scss @@ -23,7 +23,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; } .super-sidebar-skip-to { - top: calc(#{$header-height} + #{$calc-application-bars-height}); + top: $calc-application-bars-height; width: calc(#{$super-sidebar-width} - #{$gl-spacing-scale-5}); z-index: $super-sidebar-skip-to-z-index; } @@ -32,7 +32,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; display: flex; flex-direction: column; position: fixed; - top: calc(#{$header-height} + #{$calc-application-bars-height}); + top: $calc-application-bars-height; bottom: $calc-application-footer-height; left: 0; background-color: var(--gray-10, $gray-10); @@ -57,12 +57,7 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; .user-bar { background-color: $t-gray-a-04; - .tanuki-logo { - @include gl-vertical-align-middle; - } - - .user-bar-item, - .tanuki-logo-container { + .user-bar-item { @include gl-rounded-base; @include gl-p-2; @include gl-bg-transparent; @@ -81,21 +76,6 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; @include active-toggle; } } - - $light-mode-btn-bg: #e0dfe5; - $dark-mode-btn-bg: #53515b; - - .tanuki-logo-container { - &:hover, - &:focus, - &:active { - background-color: $light-mode-btn-bg; - - .gl-dark & { - background-color: $dark-mode-btn-bg; - } - } - } } .counter .gl-icon, @@ -313,12 +293,9 @@ $super-sidebar-transition-hint-duration: $super-sidebar-transition-duration / 4; padding: 0.5rem !important; } - .is-searching { - .in-search-scope-help { - position: absolute; - top: 0.625rem; - right: 2.5rem; - } + .search-scope-help { + top: 0.625rem; + right: 2.5rem; } .gl-search-box-by-type-input-borderless { diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 703c2ca0dad..5a8ef077c9b 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -36,16 +36,6 @@ } } -// System Footer -.with-system-footer { - // navless pages' footer eg: login page - // navless pages' footer border eg: login page - &.devise-layout-html body .footer-container, - &.devise-layout-html body hr.footer-fixed { - bottom: $system-footer-height; - } -} - .fullscreen-layout { .header-message, .footer-message { diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index a3b238d657d..921e03f45f3 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -31,7 +31,6 @@ &:not(.note-form).internal-note .timeline-content, &:not(.note-form).draft-note .timeline-content { background-color: $orange-50 !important; - border-radius: 3px; } .timeline-entry-inner { @@ -40,9 +39,12 @@ &:target, &.target { - .timeline-content, + .timeline-content { + background-color: $line-target-blue; + } + + .public-note.discussion-reply-holder { - background-color: $line-target-blue !important; + padding-top: $gl-padding-12 !important; } &.system-note .note-body .note-text.system-note-commit-list::after { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 88f990d2320..25542a86e8c 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -577,17 +577,6 @@ width: 1%; } - .metrics-embed { - h3.popover-header { - /** Override <h3> .popover-header - * as embed metrics do not follow the same - * style as default md <h3> (which are deeply nested) - */ - margin: 0; - font-size: $gl-font-size-small; - } - } - .gl-dropdown-item { margin: 0; padding: 0; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index f77804fb7fc..ebaaece1281 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -10,7 +10,7 @@ $default-transition-duration: 0.15s; $contextual-sidebar-width: 256px; $contextual-sidebar-collapsed-width: 56px; $toggle-sidebar-height: 48px; -$super-sidebar-width: 256px; +$super-sidebar-width: 16rem; $super-sidebar-z-index: 600; $super-sidebar-skip-to-z-index: 601; $super-sidebar-overlay-z-index: 599; @@ -467,7 +467,6 @@ $ide-statusbar-height: 25px; $fixed-layout-width: 1280px; $limited-layout-width: 990px; $container-text-max-width: 540px; -$gl-avatar-size: 40px; $border-radius-default: 4px; $border-radius-small: 2px; $border-radius-large: 8px; @@ -502,8 +501,9 @@ $pages-group-name-color: #4c4e54; /* * Calculated heights */ -$calc-application-bars-height: calc(var(--system-header-height) + var(--performance-bar-height)); -$calc-application-header-height: calc(#{$header-height} + #{$calc-application-bars-height} + var(--top-bar-height)); +$calc-system-headers-height: calc(var(--system-header-height) + var(--performance-bar-height)); +$calc-application-bars-height: calc(#{$header-height} + #{$calc-system-headers-height}); +$calc-application-header-height: calc(#{$calc-application-bars-height} + var(--top-bar-height)); $calc-application-footer-height: var(--system-footer-height); $calc-application-viewport-height: calc(100vh - #{$calc-application-header-height} - #{$calc-application-footer-height}); @@ -568,10 +568,12 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%); /* * Fonts + * The --default-mono-font and --default-regular-font variables give users + * a way to override our font choices for them. */ -$monospace-font: 'GitLab Mono', 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', +$monospace-font: var(--default-mono-font, 'GitLab Mono'), 'JetBrains Mono', 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; -$regular-font: 'GitLab Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', +$regular-font: var(--default-regular-font, 'GitLab Sans'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; $gl-monospace-font: $monospace-font; @@ -704,7 +706,6 @@ $environment-logs-difference-md-up: calc(#{$header-height} + #{$environment-logs * Avatar */ $avatar-radius: 50%; -$gl-avatar-size: 40px; $gl-avatar-border-opacity: 0.1; /* 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%; + } +} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index b25a5b1c493..8b093e7bb7b 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -307,14 +307,6 @@ } } -.gpg-popover-user-link { - display: flex; - align-items: center; - margin-bottom: $gl-padding / 2; - text-decoration: none; - color: $gl-text-color; -} - .add-review-item { .gl-tab-nav-item { height: 100%; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 322363d7f4b..0c9d151e3cd 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -48,7 +48,7 @@ .common-note-form { .md-area { - border: 1px solid $border-color; + border: 1px solid $gray-400; border-radius: $border-radius-large; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; @@ -65,19 +65,41 @@ } } - // Disable inner focus - textarea:focus { - @include gl-shadow-none; + &:hover, + &:focus-within { + @include gl-shadow-md; } - } - .comment-warning-wrapper:focus-within { - @include gl-focus; - } -} + &:hover { + border: 1px solid $gray-500; + } -.md-area:focus-within { - @include gl-focus; + &:focus-within { + border: 1px solid $gray-900; + } + + // Add focus + .zen-backdrop:not(.fullscreen) textarea { + width: calc(100% - 4px); + margin: 2px; + padding-left: calc(#{$gl-spacing-scale-5} - 2px); + + .gl-dark & { + width: calc(100% - 6px); + margin: 2px 3px; + padding-left: calc(#{$gl-spacing-scale-5} - 3px); + } + + &:focus { + @include gl-focus; + } + } + + .note-textarea-rounded-bottom { + border-bottom-left-radius: calc(#{$border-radius-large} - 1px); + border-bottom-right-radius: calc(#{$border-radius-large} - 1px); + } + } } .md-header { @@ -217,6 +239,7 @@ table { .md-area { background-color: $white; + @include gl-rounded-base; } } @@ -245,24 +268,21 @@ table { .diff-file, .commit-diff { .discussion-reply-holder { - background-color: $gray-light; border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base; - padding: $gl-padding; + padding: 0 $gl-padding $gl-padding-12 $gl-padding; border-top: 1px solid $gray-50; + .new-note { - background-color: $gray-light; border-top: 1px solid $gray-50; } &.is-replying { - padding-bottom: $gl-padding; - background-color: $white; + padding-top: $gl-padding-12; } &.internal-note, &.internal-note.is-replying { - background-color: $orange-50; + padding-top: $gl-padding-12 !important; } .user-avatar-link { @@ -273,6 +293,11 @@ table { } } +.diff-td > .content > .discussion-reply-holder { + padding-top: $gl-padding-12; + @include gl-bg-gray-10; +} + .discussion-with-resolve-btn { @include media-breakpoint-up(sm) { display: flex; @@ -307,13 +332,19 @@ table { resize: none; padding: $gl-padding-8 $gl-padding-12; line-height: 1; - border: 1px solid $border-color; + border: 1px solid $gray-200; background-color: $white; overflow: hidden; + transition: border-color ease-in-out 0.15s, + box-shadow ease-in-out 0.15s; @include media-breakpoint-down(xs) { margin-bottom: $gl-padding-8; } + + &:hover { + border: 1px solid $gray-500; + } } } @@ -348,10 +379,6 @@ table { .toolbar-text { font-size: 14px; line-height: $gl-spacing-scale-7; - - @include media-breakpoint-up(md) { - float: left; - } } .note-form-actions { @@ -438,9 +465,4 @@ table { .comment-warning-wrapper { transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; - - .md-area { - border: 0; - box-shadow: none; - } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index c5b644bd72f..005fbc8b058 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -100,10 +100,13 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; margin-left: 2.5rem; border: 1px solid $border-color; border-radius: $gl-border-radius-base; - background-color: $white; padding: $gl-padding-4 $gl-padding-8; } + &:not(.target) .timeline-content:not(.flash-container) { + background-color: $white; + } + &.draft-note .timeline-content:not(.flash-container) { border: 0; } @@ -139,11 +142,14 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; border-top: 1px solid $border-color; border-top-left-radius: $gl-border-radius-base; border-top-right-radius: $gl-border-radius-base; - background-color: $white; padding: $gl-padding-4 $gl-padding-8; } } + &:not(.target) .timeline-content:not(.flash-container) { + background-color: $white; + } + &.draft-note .timeline-content:not(.flash-container) { margin-left: 0; border-top-left-radius: 0; @@ -239,15 +245,6 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; } } - .discussion-toggle-replies { - border-top: 0; - border-radius: 4px 4px 0 0; - - &.collapsed { - border-radius: 4px; - } - } - .note-created-ago, .note-updated-at { white-space: normal; @@ -1090,6 +1087,7 @@ $system-note-icon-m-left: $avatar-m-left + $icon-size-diff / $avatar-m-ratio; margin-left: 0; border-left: 0; border-right: 0; + border-radius: 0 !important; } .discussion-reply-holder { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index ff1987f35b3..8cf0bebfc4e 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -518,64 +518,24 @@ } } -.project-refs-form .dropdown-menu { - width: 300px; - @include media-breakpoint-up(sm) { - width: 500px; - } - - a { - white-space: normal; - } -} - -.compare-form-group { - .dropdown-menu, - .inline-input-group { - width: 100%; - - @include media-breakpoint-up(sm) { - width: 300px; +.compare-revision-cards { + @media (max-width: $breakpoint-lg) { + .swap-button { + display: none; } } - + .compare-ellipsis { - width: 100%; - vertical-align: middle; - text-align: center; - margin-top: -20px; - - @include media-breakpoint-up(sm) { - margin: 0 $gl-padding-8; - width: auto; + @media (max-width: $breakpoint-lg) { + .swap-button-mobile { + display: flex; } } - // Remove once gitlab/ui solution is implemented: - // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1157 - // https://gitlab.com/gitlab-org/gitlab/-/issues/300405 - .gl-search-box-by-type-input { - width: 100%; - } - - // Remove once gitlab/ui solution is implemented - // https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1158 - // https://gitlab.com/gitlab-org/gitlab/-/issues/300405 - .gl-dropdown-button-text { - @include str-truncated; - } -} - -.compare-revision-cards { @media (min-width: $breakpoint-lg) { .gl-card { width: calc(50% - 15px); } - - .compare-ellipsis { - width: 30px; - } } } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 3b5e234c6b8..728eb1fe441 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -75,3 +75,70 @@ } } } + +.settings-section { + @include gl-pt-6; + + &::after { + content: ''; + display: block; + @include gl-pb-5; + } +} + +.settings-section, +.settings-section-no-bottom + .settings-section { + @include gl-pt-0; +} + +.settings-section ~ .settings-section { + @include gl-pt-6; +} + +.settings-section:not(.settings-section-no-bottom) + .settings-section { + @include gl-border-t; +} + +.settings-section-no-bottom::after { + @include gl-pb-0; + + @include media-breakpoint-up(sm) { + @include gl-pb-5; + } +} + +$sticky-header-z-index: 98; + +.settings-sticky-header, +.settings-sticky-footer { + position: sticky; + z-index: $sticky-header-z-index; + background: $body-bg; +} + +.settings-sticky-header { + top: $calc-application-header-height; + + &::before { + content: ''; + display: block; + height: $gl-padding-8; + position: sticky; + top: calc(#{$calc-application-header-height} + 40px); + box-shadow: 0 1px 1px $gray-200; + } +} + +.settings-sticky-header-inner { + position: sticky; + padding: $gl-padding $gl-padding $gl-padding-12; + margin: #{-$gl-padding} #{-$gl-padding} 0; + background: $body-bg; +} + +.settings-sticky-footer { + bottom: 0; + padding-top: $gl-padding-8; + padding-bottom: $gl-padding-8; + box-shadow: 0 #{-$gl-padding-4} $gl-padding-12 $gl-padding-4 $body-bg; +} diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 7be15c2d8f9..60cbcffd506 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -20,9 +20,10 @@ header { } body { margin: 0; - font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, + "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -50,9 +51,9 @@ a:not([href]):not([class]) { text-decoration: none; } kbd { - font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", - "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", - "lucida console", monospace; + font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", + "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", + "Courier New", "andale mono", "lucida console", monospace; font-size: 1em; } img { @@ -415,9 +416,10 @@ a.gl-badge.badge-warning:active { .gl-form-input, .gl-form-input.form-control { background-color: #333238; - font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, + "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.875rem; line-height: 1rem; padding-top: 0.5rem; diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss index 65500800ce3..04c44dd9603 100644 --- a/app/assets/stylesheets/startup/startup-general.scss +++ b/app/assets/stylesheets/startup/startup-general.scss @@ -20,9 +20,10 @@ header { } body { margin: 0; - font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, + "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -50,9 +51,9 @@ a:not([href]):not([class]) { text-decoration: none; } kbd { - font-family: "GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", - "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", - "lucida console", monospace; + font-family: var(--default-mono-font, "GitLab Mono"), "JetBrains Mono", + "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", + "Courier New", "andale mono", "lucida console", monospace; font-size: 1em; } img { @@ -415,9 +416,10 @@ a.gl-badge.badge-warning:active { .gl-form-input, .gl-form-input.form-control { background-color: #fff; - font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, + "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.875rem; line-height: 1rem; padding-top: 0.5rem; diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 40e1e4b1996..32da8e1bb6b 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -19,9 +19,10 @@ header { } body { margin: 0; - font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, + "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; font-weight: 400; line-height: 1.5; @@ -382,9 +383,10 @@ input.btn-block[type="submit"] { .gl-form-input, .gl-form-input.form-control { background-color: #fff; - font-family: "GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", - Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--default-regular-font, "GitLab Sans"), -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, + "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; font-size: 0.875rem; line-height: 1rem; padding-top: 0.5rem; @@ -622,10 +624,6 @@ body.navless { margin-top: 20px; } } -.navless-container { - margin-top: var(--header-height, 48px); - padding-top: 32px; -} .btn { border-radius: 4px; font-size: 0.875rem; @@ -685,12 +683,6 @@ hr { margin: 1.5rem 0; border-top: 1px solid #ececef; } -.footer-links { - margin-bottom: 20px; -} -.footer-links a { - margin-right: 15px; -} .flash-container { margin: 0; margin-bottom: 16px; @@ -777,9 +769,15 @@ svg { .gl-align-items-center { align-items: center; } +.gl-flex-wrap { + flex-wrap: wrap; +} .gl-justify-content-space-between { justify-content: space-between; } +.gl-align-self-end { + align-self: flex-end; +} .gl-w-10 { width: 3.5rem; } @@ -794,6 +792,9 @@ svg { width: 100%; } } +.gl-h-full { + height: 100%; +} .gl-p-5 { padding: 1rem; } @@ -805,6 +806,9 @@ svg { padding-top: 1rem; padding-bottom: 1rem; } +.gl-m-0 { + margin: 0; +} .gl-mt-3 { margin-top: 0.5rem; } @@ -823,6 +827,9 @@ svg { .gl-ml-auto { margin-left: auto; } +.gl-gap-5 { + gap: 1rem; +} @media (min-width: 576px) { .gl-sm-mt-0 { margin-top: 0; diff --git a/app/assets/stylesheets/themes/dark_mode_overrides.scss b/app/assets/stylesheets/themes/dark_mode_overrides.scss index e004ca4bb4a..030e41046d3 100644 --- a/app/assets/stylesheets/themes/dark_mode_overrides.scss +++ b/app/assets/stylesheets/themes/dark_mode_overrides.scss @@ -296,8 +296,7 @@ body.gl-dark { } .timeline-entry.internal-note:not(.note-form) .timeline-content, -.timeline-entry.draft-note:not(.note-form) .timeline-content, -.discussion-reply-holder.internal-note { +.timeline-entry.draft-note:not(.note-form) .timeline-content { // soften on darkmode background-color: mix($gray-50, $orange-50, 75%) !important; } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 08c4efce542..db9802eeefa 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -42,7 +42,7 @@ // Override Bootstrap class with offset for system-header and // performance bar when present .fixed-top { - top: $calc-application-bars-height; + top: $calc-system-headers-height; } .gl-children-ml-sm-3 > * { @@ -128,24 +128,6 @@ } } -.gl-md-w-15 { - @include gl-media-breakpoint-up(md) { - width: $gl-spacing-scale-15; - } -} - -.gl-md-w-20 { - @include gl-media-breakpoint-up(md) { - width: $gl-spacing-scale-20; - } -} - -.gl-md-w-30 { - @include gl-media-breakpoint-up(md) { - width: $gl-spacing-scale-30; - } -} - .gl-fill-orange-500 { fill: $orange-500; } diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss index b92331facee..cf7dc79c5f5 100644 --- a/app/assets/stylesheets/vendors/atwho.scss +++ b/app/assets/stylesheets/vendors/atwho.scss @@ -2,6 +2,11 @@ overflow-y: auto; overflow-x: hidden; max-width: calc(100% - 6px); + @include gl-border-b-1; + @include gl-border-b-solid; + @include gl-border-b-gray-100; + @include gl-rounded-lg; + @include gl-shadow-md; .name, small.aliases, @@ -44,11 +49,15 @@ // TODO: fallback to global style .atwho-view-ul { - padding: 8px 1px; + @include gl-p-2; + max-height: $gl-max-dropdown-max-height; li { - padding: 8px 16px; + @include gl-px-3; + padding-top: $gl-padding-6; + padding-bottom: $gl-padding-6; border: 0; + @include gl-rounded-base; &.cur { background-color: $gray-darker; @@ -67,15 +76,25 @@ display: inline-flex; justify-content: center; align-items: center; + } - .center { - line-height: 14px; - } + .center { + line-height: 14px; } strong { color: $gl-text-color; } + + gl-emoji { + @include gl-mr-2; + } + + .dropdown-label-box { + position: relative; + top: -1px; + @include gl-mr-2; + } } } } |