diff options
Diffstat (limited to 'app/assets/stylesheets')
58 files changed, 288 insertions, 409 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index 20ff78d32d3..4a15e0eb458 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -14,7 +14,6 @@ @import './pages/issues'; @import './pages/labels'; @import './pages/login'; -@import './pages/members'; @import './pages/merge_requests'; @import './pages/monitor'; @import './pages/note_form'; @@ -35,5 +34,4 @@ @import './pages/sherlock'; @import './pages/storage_quota'; @import './pages/tree'; -@import './pages/trials'; @import './pages/users'; diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index deeef86c386..a5cfc8d12b0 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -170,12 +170,6 @@ table { display: none; } -h3.popover-header { - // Default bootstrap popovers use <h3> - // which we default to having a top margin - margin-top: 0; -} - // Add to .label so that old system notes that are saved to the db // will still receive the correct styling .badge:not(.gl-badge), @@ -198,7 +192,15 @@ h3.popover-header { } .divider { - @extend .dropdown-divider; + // copied rules from node_modules/bootstrap/scss/_dropdown.scss:116 + // this might be safe to just remove instead + // most places that use divider add overrides to undo these things + // there is also a probably-unintentional use in deprecated_dropdown_divider.scss + // so we would end up with .gl-dropdown .dropdown-divider + height: 0; + margin: 4px 0; + overflow: hidden; + border-top: 1px solid $border-color; } .info-well { @@ -231,12 +233,9 @@ h3.popover-header { } .card { - &.card-without-border { - @extend .border-0; - } - + &.card-without-border, &.bg-light { - @extend .border-0; + border: 0 !important; } } diff --git a/app/assets/stylesheets/components/avatar.scss b/app/assets/stylesheets/components/avatar.scss index 3c8abe43070..c8f69bfdbaf 100644 --- a/app/assets/stylesheets/components/avatar.scss +++ b/app/assets/stylesheets/components/avatar.scss @@ -70,7 +70,8 @@ $avatar-sizes: ( $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $identicon-blue, $identicon-teal, $identicon-orange, $identicon-gray; -%avatar-circle { +.avatar, +.avatar-container { float: left; margin-right: $gl-padding; border-radius: $avatar-radius; @@ -84,7 +85,6 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i } .avatar { - @extend %avatar-circle; transition-property: none; width: 40px; @@ -151,7 +151,6 @@ $identicon-backgrounds: $identicon-red, $identicon-purple, $identicon-indigo, $i } .avatar-container { - @extend %avatar-circle; overflow: hidden; display: flex; diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss index f73ec4d5998..5d1709c22ec 100644 --- a/app/assets/stylesheets/components/milestone_combobox.scss +++ b/app/assets/stylesheets/components/milestone_combobox.scss @@ -1,8 +1,14 @@ -.selected-item { - /* stylelint-disable-next-line function-url-quotes */ - background: url(asset_path('checkmark.png')) no-repeat 0 2px; -} +.milestone-combobox { + .selected-item { + /* stylelint-disable-next-line function-url-quotes */ + background: url(asset_path('checkmark.png')) no-repeat 0 2px; + } + + .dropdown-item-space { + padding: 8px 12px; + } -.dropdown-item-space { - padding: 8px 12px; + .dropdown-menu.show { + overflow: hidden; + } } diff --git a/app/assets/stylesheets/components/ref_selector.scss b/app/assets/stylesheets/components/ref_selector.scss index 970a7b967ee..ded911c2492 100644 --- a/app/assets/stylesheets/components/ref_selector.scss +++ b/app/assets/stylesheets/components/ref_selector.scss @@ -1,17 +1,13 @@ .ref-selector { - & &-dropdown-content { - // Setting a max height is necessary to allow the dropdown's content - // to control where and how scrollbars appear. - // This content is limited to the max-height of the dropdown - // ($dropdown-max-height-lg) minus the additional padding - // on the top and bottom (2 * $gl-padding-8) - max-height: $dropdown-max-height-lg - 2 * $gl-padding-8; - } - .dropdown-menu.show { // Make the dropdown a little wider and longer than usual // since it contains quite a bit of content. + overflow: hidden; width: 20rem; - max-height: $dropdown-max-height-lg; + + &, + .gl-new-dropdown-inner { + max-height: $dropdown-max-height-lg; + } } } diff --git a/app/assets/stylesheets/disable_animations.scss b/app/assets/stylesheets/disable_animations.scss index 799c6e80ec9..1e63cdcfa39 100644 --- a/app/assets/stylesheets/disable_animations.scss +++ b/app/assets/stylesheets/disable_animations.scss @@ -12,9 +12,3 @@ animation: none !important; /* stylelint-enable property-no-vendor-prefix */ } - -// Disable sticky changes bar for tests -.diff-files-changed { - position: relative !important; - top: 0 !important; -} diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index 7931f4deea0..1fe94a796f5 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -42,7 +42,6 @@ @import 'framework/notes'; @import 'framework/tabs'; @import 'framework/timeline'; -@import 'framework/tooltips'; @import 'framework/toggle'; @import 'framework/typography'; @import 'framework/zen'; diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index a7623b65539..662f7f52d61 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -274,7 +274,9 @@ // `position:absolute` &::after { content: '\a0'; + display: block !important; width: 1em; + color: transparent; } .reaction-control-icon { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index b51fec925cb..d1fa1187703 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -196,10 +196,6 @@ @include btn-orange; } - &.btn-close { - @include btn-outline($white, $orange-500, $orange-500, $orange-50, $orange-600, $orange-600, $orange-100, $orange-700, $orange-700); - } - &.btn-danger { @include btn-red; } @@ -216,6 +212,7 @@ color: $gray-700; } + // deprecated class &.btn-text-field { width: 100%; text-align: left; @@ -436,32 +433,27 @@ } // All disabled buttons, regardless of color, type, etc -%disabled { - background-color: $gray-light; - border-color: $gray-100; - color: $gl-text-color-disabled; - opacity: 1; - text-decoration: none; - cursor: default; - - &.cursor-not-allowed { - cursor: not-allowed; - } - - i { - color: $gl-text-color-disabled; - } -} - .btn.disabled, .btn[disabled], fieldset[disabled] .btn, .dropdown-toggle[disabled], [disabled].dropdown-menu-toggle { - @extend %disabled; - + &, &:hover { - @extend %disabled; + background-color: $gray-light; + border-color: $gray-100; + color: $gl-text-color-disabled; + opacity: 1; + text-decoration: none; + cursor: default; + + &.cursor-not-allowed { + cursor: not-allowed; + } + + i { + color: $gl-text-color-disabled; + } } &.btn-link { diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index e30caeb1dfb..bd15022eadf 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -1035,7 +1035,6 @@ table.code { auto; // Retina cursor - // scss-lint:disable DuplicateProperty cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index f56d8f2c2a9..bdde6c7b313 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -34,7 +34,14 @@ overflow-y: auto; &.dropdown-extended-height { - max-height: 400px; + $extended-max-height: 400px; + + max-height: $extended-max-height; + + // See comment below for explanation + .gl-new-dropdown-inner { + max-height: $extended-max-height - 2px; + } } @include media-breakpoint-down(xs) { @@ -46,6 +53,15 @@ overflow-y: initial; max-height: initial; } + + // `GlDropdown` specifies the `max-height` of `.gl-new-dropdown-inner` + // as `$dropdown-max-height`, but the `max-height` rule above forces + // the parent `.dropdown-menu` to be _slightly_ too small because of + // the 1px borders. The workaround below overrides the @gitlab/ui style + // to avoid a double scroll bar. + .gl-new-dropdown-inner { + max-height: $dropdown-max-height - 2px; + } } .dropdown-toggle, @@ -1093,3 +1109,11 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { width: $gl-dropdown-width-wide; } } + +// This class won't be needed once we can add a prop for this in the GitLab UI component +// https://gitlab.com/gitlab-org/gitlab-ui/-/issues/966 +.gl-new-dropdown.gl-dropdown-menu-full-width { + .dropdown-menu { + width: 100%; + } +} diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss index c3b287a6c3d..eda3e33a6aa 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -3,6 +3,11 @@ @include gl-display-flex; @include gl-justify-content-center; @include gl-align-items-center; + @include gl-z-index-0; + + > * { + filter: blur(5px); + } &::before { content: ''; diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index 13c5541da92..c5c660c1014 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -16,3 +16,26 @@ gl-emoji { vertical-align: baseline; } } + +.emoji-picker-category-header { + @include gl-sticky; + background-color: $white-transparent; +} + +.emoji-picker-emoji { + height: 30px; + // Create a width that fits 9 emojis per row + width: 100 / 9 * 1%; +} + +.emoji-picker .gl-new-dropdown .dropdown-menu { + width: 350px; +} + +.emoji-picker-category-tab { + border-bottom-color: transparent; +} + +.emoji-picker .gl-new-dropdown-inner > :last-child { + padding-bottom: 0; +} diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 07d59847829..a4af45a467c 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -265,6 +265,7 @@ flex: 1; position: relative; min-width: 0; + height: 2rem; background-color: $input-bg; } @@ -453,7 +454,7 @@ .search-token-target-branch { .value { font-family: $monospace-font; - font-size: 13px; + font-size: $gl-font-size-monospace; } } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 6e47fef02d5..c366bf80093 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -35,7 +35,8 @@ label { margin: 0; } - &.form-check-label { + &.form-check-label, + &.custom-control-label { font-weight: $gl-font-weight-normal; } diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index ffcc20b624b..fdb56a128c7 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -4,7 +4,6 @@ margin-bottom: 0; min-height: $header-height; border: 0; - border-bottom: 1px solid $border-color; position: fixed; top: 0; left: 0; diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 28577e2801e..73a2170fc68 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -45,8 +45,7 @@ a { font-family: $monospace-font; - display: flex; - justify-content: flex-end; + display: block; font-size: $code-font-size !important; white-space: nowrap; diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index cac3695e1a1..4f9896dd58a 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -8,9 +8,8 @@ html { body { // Improves readability for dyslexic users; supported only in Chrome/Safari so far - // scss-lint:disable PropertySpelling text-decoration-skip: ink; - // scss-lint:enable PropertySpelling + &.navless { background-color: $white !important; } diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index b0334da6943..df2ba718c72 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -192,11 +192,6 @@ ul.content-list { display: flex; align-items: center; white-space: nowrap; - - // Override style that allows the flex-row text to wrap. - &.allow-wrap { - white-space: normal; - } } .row-main-content { @@ -283,12 +278,6 @@ ul.indent-list { to { transform: rotate(360deg); } } -.namespace-title { - .tooltip-inner { - max-width: 350px; - } -} - .horizontal-list { padding-left: 0; list-style: none; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index e29e204b14f..1e2fc1445e8 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -433,7 +433,6 @@ @mixin middle-dot-divider { &::after { // Duplicate `content` property used as a fallback - // scss-lint:disable DuplicateProperty content: '\00B7'; // middle dot fallback if browser does not support alternative content content: '\00B7' / ''; // tell screen readers to ignore the content https://www.w3.org/TR/css-content-3/#accessibility padding: 0 0.375rem; diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 2dbeacb0f8c..ec433434573 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -130,22 +130,6 @@ body.modal-open { .issues-import-modal, .issuable-export-modal { - .modal-header { - justify-content: flex-start; - - .import-export-svg-container { - flex-grow: 1; - height: 56px; - padding: $gl-btn-padding $gl-btn-padding 0; - text-align: right; - - .illustration { - height: inherit; - width: initial; - } - } - } - .modal-body { padding: 0; diff --git a/app/assets/stylesheets/framework/tooltips.scss b/app/assets/stylesheets/framework/tooltips.scss deleted file mode 100644 index edc2fb532c8..00000000000 --- a/app/assets/stylesheets/framework/tooltips.scss +++ /dev/null @@ -1,6 +0,0 @@ -.tooltip-inner { - font-size: $gl-font-size-small; - border-radius: $border-radius-default; - line-height: $gl-line-height; - font-weight: $gl-font-weight-normal; -} diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 496e2aba421..5624a6ea8a3 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -78,7 +78,9 @@ code { font-family: $monospace-font; white-space: pre-wrap; - word-wrap: normal; + // Safari + word-wrap: break-word; + overflow-wrap: break-word; word-break: keep-all; } @@ -344,6 +346,9 @@ // Multi-line code blocks should scroll horizontally code { white-space: pre; + // Safari + word-wrap: normal; + overflow-wrap: normal; } &.plain-readme { @@ -430,8 +435,7 @@ } } - a[href*='/uploads/'], - a[href*='storage.googleapis.com/google-code-attachments/'] { + a.with-attachment-icon { &::before { margin-right: 4px; @@ -441,6 +445,11 @@ -webkit-font-smoothing: antialiased; content: '📎'; } + } + + a[href*='/uploads/'], + a[href*='storage.googleapis.com/google-code-attachments/'] { + @extend .with-attachment-icon; &.no-attachment-icon { &::before { @@ -604,7 +613,7 @@ pre { display: block; padding: $gl-padding-8 $input-horizontal-padding; margin: 0 0 $gl-padding-8; - font-size: 13px; + font-size: $gl-font-size-monospace; word-break: break-all; word-wrap: break-word; color: $gl-text-color; @@ -646,7 +655,7 @@ code { */ textarea.js-gfm-input { font-family: $monospace-font; - font-size: 13px; + font-size: $gl-font-size-monospace; } .strikethrough { @@ -699,13 +708,11 @@ textarea { opacity: 1; // FF defaults to 0.54 } - // scss-lint:disable PseudoElement // support Edge vendor prefix &::-ms-input-placeholder { color: $gl-text-color-tertiary; } - // scss-lint:disable PseudoElement // support IE vendor prefix &:-ms-input-placeholder { color: $gl-text-color-tertiary; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 4bf9236407f..1aa4177c902 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -443,7 +443,7 @@ $gl-avatar-size: 40px; $border-radius-default: 4px; $border-radius-small: 2px; $border-radius-large: 8px; -$default-icon-size: 18px; +$default-icon-size: 16px; $layout-link-gray: #7e7c7c; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; @@ -830,8 +830,8 @@ $ci-variable-remove-button-width: calc(1em + #{2 * $gl-padding}); /* GitLab Plans */ -$gl-gold-plan: #d4af37; -$gl-silver-plan: #91a1ab; +$gl-ultimate-plan: #d4af37; +$gl-premium-plan: #91a1ab; $gl-bronze-plan: #cd7f32; /* diff --git a/app/assets/stylesheets/highlight/conflict_colors.scss b/app/assets/stylesheets/highlight/conflict_colors.scss index 98ca3775b72..910dc6f4ad6 100644 --- a/app/assets/stylesheets/highlight/conflict_colors.scss +++ b/app/assets/stylesheets/highlight/conflict_colors.scss @@ -1,5 +1,4 @@ // Disabled to use the color map for creating color schemes -// scss-lint:disable ColorVariable $conflict-colors: ( white-header-head-neutral : #e1fad7, white-line-head-neutral : #effdec, @@ -116,4 +115,3 @@ $conflict-colors: ( none_line_not_chosen : $gray-light ); -// scss-lint:enable ColorVariable diff --git a/app/assets/stylesheets/highlight/themes/dark.scss b/app/assets/stylesheets/highlight/themes/dark.scss index 64387fbce09..0dc01213606 100644 --- a/app/assets/stylesheets/highlight/themes/dark.scss +++ b/app/assets/stylesheets/highlight/themes/dark.scss @@ -38,7 +38,7 @@ $dark-cp: #969896; $dark-c1: #969896; $dark-cs: #969896; $dark-gd: #c66; -$dark-gh: #c5c8c6; +$dark-gh: #8abeb7; $dark-gi: #b5bd68; $dark-gp: #969896; $dark-gu: #8abeb7; diff --git a/app/assets/stylesheets/highlight/themes/monokai.scss b/app/assets/stylesheets/highlight/themes/monokai.scss index 119908ffba8..95c3e8e9103 100644 --- a/app/assets/stylesheets/highlight/themes/monokai.scss +++ b/app/assets/stylesheets/highlight/themes/monokai.scss @@ -87,6 +87,7 @@ $monokai-il: #ae81ff; $monokai-gu: #75715e; $monokai-gd: #f92672; $monokai-gi: #a6e22e; +$monokai-gh: #75715e; .code.monokai { // Line numbers @@ -281,4 +282,5 @@ $monokai-gi: #a6e22e; .gu { color: $monokai-gu; } /* Generic.Subheading & Diff Unified/Comment? */ .gd { color: $monokai-gd; } /* Generic.Deleted & Diff Deleted */ .gi { color: $monokai-gi; } /* Generic.Inserted & Diff Inserted */ + .gh { color: $monokai-gh; } /* Generic.Heading */ } diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 777332881f3..128fe0cc046 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -24,7 +24,7 @@ $white-gd-bg: #fdd; $white-gd-x: $black; $white-gd-x-bg: #faa; $white-gr: #a00; -$white-gh: #999; +$white-gh: #800080; $white-gi: $black; $white-gi-bg: #dfd; $white-gi-x: $black; @@ -280,7 +280,9 @@ span.highlight_word { .ge { font-style: italic; } .gr { color: $white-gr; } -.gh { color: $white-gh; } + +.gh { color: $white-gh; + font-weight: $gl-font-weight-bold; } .gi { color: $white-gi; diff --git a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss index b148cc8f0e7..0d40159f6de 100644 --- a/app/assets/stylesheets/lazy_bundles/select2_overrides.scss +++ b/app/assets/stylesheets/lazy_bundles/select2_overrides.scss @@ -339,3 +339,19 @@ display: inline; } } + +.gl-select2-html5-required-fix { + .select2-container { + + .select2 { + @include gl-opacity-0; + @include gl-border-0; + @include gl-bg-none; + @include gl-bg-transparent; + display: block !important; + width: 1px; + height: 1px; + z-index: -1; + margin: -3px auto 0; + } + } +} diff --git a/app/assets/stylesheets/mailer_client_specific.scss b/app/assets/stylesheets/mailer_client_specific.scss index 41bedecf90f..0547aa7752f 100644 --- a/app/assets/stylesheets/mailer_client_specific.scss +++ b/app/assets/stylesheets/mailer_client_specific.scss @@ -3,7 +3,6 @@ // These are client-specific rules, ignore some linting rules // // stylelint-disable property-no-vendor-prefix, property-no-unknown, length-zero-no-unit -// scss-lint:disable PropertySpelling, ZeroUnit body, table, diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss index d8bb021e1f5..75c2428c1d4 100644 --- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss +++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss @@ -27,7 +27,7 @@ $highlighted-gd-bg: #fdd; $highlighted-gd-x: #000; $highlighted-gd-x-bg: #faa; $highlighted-gr: #a00; -$highlighted-gh: #999; +$highlighted-gh: #800080; $highlighted-gi: #000; $highlighted-gi-bg: #dfd; $highlighted-gi-x: #000; @@ -185,7 +185,9 @@ span.highlight_word { .ge { font-style: italic; } .gr { color: $highlighted-gr; } -.gh { color: $highlighted-gh; } + +.gh { color: $highlighted-gh; + font-weight: $gl-font-weight-bold; } .gi { color: $highlighted-gi; diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index 620b37914d8..fdf9e157e1e 100644 --- a/app/assets/stylesheets/page_bundles/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -30,12 +30,21 @@ color: var(--gray-500, $gray-500); } +[data-page$='epic_boards:index'], +[data-page$='epic_boards:show'], .issue-boards-page { .content-wrapper { padding-bottom: 0; } } +[data-page$='epic_boards:index'], +[data-page$='epic_boards:show'] { + .filter-form { + display: none; + } +} + .boards-app { @include media-breakpoint-up(sm) { transition: width $sidebar-transition-duration; @@ -515,7 +524,7 @@ } } -.board-issue-path.js-show-tooltip { +.board-item-path.js-show-tooltip { cursor: help; } diff --git a/app/assets/stylesheets/page_bundles/build.scss b/app/assets/stylesheets/page_bundles/build.scss index 3962c546b51..34f88f9405a 100644 --- a/app/assets/stylesheets/page_bundles/build.scss +++ b/app/assets/stylesheets/page_bundles/build.scss @@ -140,23 +140,6 @@ width: 289px; } - .block { - width: 100%; - word-break: break-word; - - &:last-child { - border-bottom: 1px solid $border-gray-normal; - } - - &.coverage { - padding: 0 16px 11px; - } - } - - .block-last { - padding: 16px 0; - } - .trigger-variables-btn-container { justify-content: space-between; align-items: center; @@ -198,18 +181,6 @@ margin-left: 2px; } - .retry-link { - display: block; - - .btn-inverted-secondary { - color: $blue-500; - - &:hover { - color: $white; - } - } - } - .stage-item { cursor: pointer; diff --git a/app/assets/stylesheets/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss index 4a48333cd27..2742c95c6e1 100644 --- a/app/assets/stylesheets/page_bundles/cycle_analytics.scss +++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss @@ -1,6 +1,5 @@ @import 'mixins_and_variables_and_functions'; -#cycle-analytics, .cycle-analytics { margin: 24px auto 0; position: relative; @@ -316,35 +315,4 @@ } } } - - .empty-stage, - .no-access-stage { - text-align: center; - width: 75%; - margin: 0 auto; - padding-top: 130px; - color: var(--gray-500, $gray-500); - - h4 { - color: var(--gl-text-color, $gl-text-color); - } - } - - .empty-stage { - .icon-no-data { - height: 36px; - width: 78px; - display: inline-block; - margin-bottom: 20px; - } - } - - .no-access-stage { - .icon-lock { - height: 36px; - width: 78px; - display: inline-block; - margin-bottom: 20px; - } - } } diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 7c4d51ab677..009019a45d9 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -1043,8 +1043,7 @@ $ide-commit-header-height: 48px; .input-icon { right: auto; left: 10px; - top: 50%; - transform: translateY(-50%); + top: 1rem; } } diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss index 315a0ae6202..26d55dfe2d0 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-light.scss @@ -2,14 +2,14 @@ // Please see `app/assets/stylesheets/page_bundles/ide_themes/README.md` for a guide on contributing new themes // ------- .ide.theme-solarized-light { - --ide-border-color: #dfd7bf; + --ide-border-color: #ded7c1; --ide-border-color-alt: #dfd7bf; --ide-highlight-accent: #5c4e21; --ide-text-color: #616161; --ide-text-color-secondary: #526f76; - --ide-background: #efe8d3; - --ide-background-hover: #ded6be; - --ide-highlight-background: #fef6e1; + --ide-background: #ddd6c1; + --ide-background-hover: #d3cbb7; + --ide-highlight-background: #eee8d5; --ide-link-color: #955800; --ide-footer-background: #efe8d3; --ide-empty-state-background: #fef6e1; diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss index 453b810196b..525481638f3 100644 --- a/app/assets/stylesheets/page_bundles/import.scss +++ b/app/assets/stylesheets/page_bundles/import.scss @@ -1,5 +1,12 @@ @import 'mixins_and_variables_and_functions'; +// Fixing double scrollbar issue +// See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1156 and +// https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54837 +.import-entities-namespace-dropdown.show.dropdown .dropdown-menu { + max-height: initial; +} + .import-jobs-to-col { width: 39%; } diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 25401a161da..eb2dd6e578e 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -20,36 +20,23 @@ @import '@gitlab/ui/src/components/base/tooltip/tooltip'; $atlaskit-border-color: #dfe1e6; +$header-height: 40px; -.ac-content { - margin: 20px; - - .subscription-form { - margin-bottom: 20px; - - .field-group-input { - display: flex; - padding-top: $gl-padding-4; +.subscription-form { + .field-group-input { + display: flex; + padding-top: $gl-padding-4; - .ak-button { - align-items: center; - height: auto; - margin-left: $btn-margin-5; - } + .ak-button { + align-items: center; + height: auto; + margin-left: $btn-margin-5; } } } -$header-height: 40px; - .jira-connect-header { - border-bottom: 1px solid $gray-100; - display: flex; - align-items: center; - justify-content: center; min-height: $header-height; - padding-left: 16px; - padding-right: 16px; position: fixed; top: 0; left: 0; @@ -57,7 +44,6 @@ $header-height: 40px; } .jira-connect-user { - font-size: $gl-font-size; position: fixed; top: 10px; right: 20px; @@ -65,20 +51,17 @@ $header-height: 40px; .jira-connect-app { margin-top: $header-height; + height: calc(100% - #{$header-height}); + max-width: 1000px; +} + +.jira-connect-app-body { max-width: 600px; - min-height: 95vh; - padding-top: 48px; - padding-left: 16px; - padding-right: 16px; margin-left: auto; margin-right: auto; - text-align: center; -} - -.gl-mt-5 { - margin-top: 16px; } +// for external_link buttons svg { fill: currentColor; @@ -115,12 +98,3 @@ svg { } } } - -.empty-subscriptions { - color: $gray-900; -} - -.browser-limitations-notice { - font-size: $gl-font-size; - margin-top: 32px; -} diff --git a/app/assets/stylesheets/page_bundles/learn_gitlab.scss b/app/assets/stylesheets/page_bundles/learn_gitlab.scss new file mode 100644 index 00000000000..189aefb330b --- /dev/null +++ b/app/assets/stylesheets/page_bundles/learn_gitlab.scss @@ -0,0 +1,3 @@ +.learn-gitlab-info-card-content { + height: 200px; +} diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/page_bundles/members.scss index 0ccde57746a..7b4c74b8253 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/page_bundles/members.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .project-members-title { padding-bottom: 10px; border-bottom: 1px solid $border-color; diff --git a/app/assets/stylesheets/page_bundles/oncall_schedules.scss b/app/assets/stylesheets/page_bundles/oncall_schedules.scss index a6668f00147..5eaf91c3017 100644 --- a/app/assets/stylesheets/page_bundles/oncall_schedules.scss +++ b/app/assets/stylesheets/page_bundles/oncall_schedules.scss @@ -182,10 +182,3 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi transform: translateX(-50%); } } - -.gl-token { - .gl-avatar-labeled-label { - @include gl-text-white; - @include gl-font-weight-normal; - } -} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss index ae36f7e3ac1..6ef7f912ea9 100644 --- a/app/assets/stylesheets/page_bundles/pipelines.scss +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -67,8 +67,7 @@ // Mini Pipelines .stage-cell { - .mini-pipeline-graph-dropdown-toggle, - .mini-pipeline-graph-gl-dropdown-toggle { + .mini-pipeline-graph-dropdown-toggle { svg { height: $ci-action-icon-size; width: $ci-action-icon-size; @@ -138,14 +137,16 @@ } } -// Dropdown button in mini pipeline graph +// Commit mini pipeline (HAML) button.mini-pipeline-graph-dropdown-toggle, -// As the `mini-pipeline-item` mixin specificity is lower -// than the toggle of dropdown with 'variant="link"' we add -// classes ".gl-button.btn-link" to make it more specific. -// Once FF ci_mini_pipeline_gl_dropdown is removed, the `mini-pipeline-item` -// itself could increase its specificity to simplify this selector -button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle { +// GlDropdown mini pipeline (Vue) +// As the `mini-pipeline-item` mixin specificity is lower +// than the toggle of dropdown with 'variant="link"' we add +// classes ".gl-button.btn-link" to make it more specific +// and avoid having the size overriden +// +// See https://gitlab.com/gitlab-org/gitlab/-/issues/320737 +button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle { @include mini-pipeline-item(); } diff --git a/app/assets/stylesheets/page_bundles/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss index 18ca5f9a3a9..ce91988cb8a 100644 --- a/app/assets/stylesheets/page_bundles/reports.scss +++ b/app/assets/stylesheets/page_bundles/reports.scss @@ -5,11 +5,6 @@ max-height: 170px; overflow: auto; } - - .report-block-list-issue-parent { - padding: $gl-padding-top $gl-padding; - border-top: 1px solid var(--border-color, $border-color); - } } .report-block-container { diff --git a/app/assets/stylesheets/page_bundles/signup.scss b/app/assets/stylesheets/page_bundles/signup.scss index a207c10b04f..d6c3a3ff5da 100644 --- a/app/assets/stylesheets/page_bundles/signup.scss +++ b/app/assets/stylesheets/page_bundles/signup.scss @@ -32,11 +32,6 @@ @include media-breakpoint-down(md) { width: 100%; } - - img { - width: $default-icon-size; - height: $default-icon-size; - } } .decline-page { diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index f7b8a4c5b84..98074f8af29 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -105,6 +105,7 @@ border: 0; &.table-row-header { + // stylelint-disable-next-line background-color: none; border: 0; font-weight: bold; diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 87307fd682e..ee1385d36df 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -519,10 +519,6 @@ table.pipeline-project-metrics tr td { margin-left: 25px; } - .item-visibility { - margin-right: 0; - } - .last-updated { position: relative; min-width: 250px; diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 019d827798c..2d04354a99d 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -106,17 +106,6 @@ width: 100%; } } - - .omniauth-btn { - width: 100%; - padding: $gl-padding-8; - - img { - width: $default-icon-size; - height: $default-icon-size; - margin-right: $gl-padding; - } - } } .new-session-tabs { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index a62df1258af..23e368a2e73 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -4,6 +4,7 @@ */ $mr-widget-min-height: 69px; +$tabs-holder-z-index: 250; .space-children { @include clearfix; @@ -225,10 +226,6 @@ $mr-widget-min-height: 69px; } } - .mini-pipeline-graph-dropdown-toggle { - vertical-align: top; - } - .normal { flex: 1; flex-basis: auto; @@ -675,7 +672,7 @@ $mr-widget-min-height: 69px; .mr-version-controls { position: relative; - z-index: 203; + z-index: $tabs-holder-z-index + 10; background: $white; color: $gl-text-color; margin-top: -1px; @@ -745,7 +742,7 @@ $mr-widget-min-height: 69px; .merge-request-tabs-holder, .epic-tabs-holder { top: $header-height; - z-index: 250; + z-index: $tabs-holder-z-index; background-color: $body-bg; border-bottom: 1px solid $border-color; @@ -981,15 +978,15 @@ $mr-widget-min-height: 69px; line-height: initial; } - .mini-pipeline-graph-dropdown-toggle, - .stage-cell .mini-pipeline-graph-dropdown-toggle svg, - // As the `mini-pipeline-item` mixin specificity is lower - // than the toggle of dropdown with 'variant="link"' we add - // classes ".gl-button.btn-link" to make it more specific. - // Once FF ci_mini_pipeline_gl_dropdown is removed, the `mini-pipeline-item` - // itself could increase its specificity to simplify this selector - button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle, - .stage-cell button.gl-button.btn-link.mini-pipeline-graph-gl-dropdown-toggle svg { + // GlDropdown mini pipeline (Vue) + // As the `mini-pipeline-item` mixin specificity is lower + // than the toggle of dropdown with 'variant="link"' we add + // classes ".gl-button.btn-link" to make it more specific + // and avoid having the size overriden + // + // See https://gitlab.com/gitlab-org/gitlab/-/issues/320737 + button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle, + .stage-cell button.gl-button.btn-link.mini-pipeline-graph-dropdown-toggle svg { height: $ci-action-icon-size-lg; width: $ci-action-icon-size-lg; } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index ffbfa47f9bd..cb5050fc578 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -302,8 +302,21 @@ table { width: 100%; } } +} + +.discussion-reply-holder { + .reply-placeholder-text-field { + font-family: $monospace-font; + font-size: $gl-font-size-monospace; + border-radius: $gl-border-radius-base; + width: 100%; + resize: none; + padding: $gl-padding-8 $gl-padding-12; + line-height: 1; + border: 1px solid $border-color; + background-color: $white; + overflow: hidden; - .btn-text-field { @include media-breakpoint-down(xs) { margin-bottom: $gl-padding-8; } @@ -381,32 +394,6 @@ table { } .comment-type-dropdown { - .btn-success { - width: auto; - } - - .dropdown-toggle { - float: right; - - i { - color: $white; - padding-right: 2px; - margin-top: 2px; - } - - &[disabled] { - i { - color: $gl-text-color-disabled; - } - } - } - - .dropdown-menu { - top: initial; - bottom: 100%; - width: 298px; - } - @include media-breakpoint-down(xs) { display: flex; width: 100%; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 8251cdb9bbb..e51cc0b4479 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -136,33 +136,9 @@ .project-repo-buttons { .btn { - &:last-child { - margin-left: 0; - } - svg { - fill: $layout-link-gray; + fill: $gray-500; } - - .notifications-icon { - top: 1px; - margin-right: 0; - } - } - - .icon { - top: 0; - } - - .count-badge, - .btn-xs { - height: 24px; - } - - .home-panel-action-button, - .project-action-button { - margin: $gl-padding $gl-padding-8 0 0; - vertical-align: top; } .notification-dropdown .dropdown-menu { @@ -175,34 +151,6 @@ } } - .count-buttons { - display: inline-block; - vertical-align: top; - margin-top: $gl-padding; - - .count-badge-count, - .count-badge-button { - border: 1px solid $border-color; - line-height: 1; - } - - .count, - .count-badge-button { - color: $gl-text-color; - } - - .count-badge-count { - padding: 0 12px; - background: $gray-light; - border-radius: 0 $border-radius-base $border-radius-base 0; - } - - .count-badge-button { - border-right: 0; - border-radius: $border-radius-base 0 0 $border-radius-base; - } - } - .project-clone-holder { display: inline-block; margin: $gl-padding 0 0; @@ -313,7 +261,6 @@ } .fork-thumbnail { - height: 200px; width: calc((100% / 2) - #{$gl-padding * 2}); @include media-breakpoint-up(md) { @@ -887,10 +834,6 @@ pre.light-well { } .git-clone-holder { - .btn-clipboard { - border: 1px solid $border-color; - } - .clone-options { display: table-cell; @@ -1008,6 +951,18 @@ pre.light-well { } } +.compare-revision-cards { + @media (min-width: $breakpoint-lg) { + .gl-card { + width: calc(50% - 15px); + } + + .compare-ellipsis { + width: 30px; + } + } +} + .clearable-input { position: relative; diff --git a/app/assets/stylesheets/pages/trials.scss b/app/assets/stylesheets/pages/trials.scss deleted file mode 100644 index 55f323b7df7..00000000000 --- a/app/assets/stylesheets/pages/trials.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* -* A CSS cross-browser fix for Select2 failire to display HTML5 required warnings -* MR link https://gitlab.com/gitlab-org/gitlab/-/merge_requests/22716 -*/ -.gl-select2-html5-required-fix div.select2-container+select.select2 { - @include gl-opacity-0; - @include gl-border-0; - @include gl-bg-none; - @include gl-bg-transparent; - display: block !important; - width: 1px; - height: 1px; - z-index: -1; - margin: -3px auto 0; -} diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss index 849749ee7c7..9f7a8860e4d 100644 --- a/app/assets/stylesheets/startup/startup-dark.scss +++ b/app/assets/stylesheets/startup/startup-dark.scss @@ -1031,6 +1031,7 @@ body.gl-dark .logo-text svg { } body.gl-dark .navbar-gitlab { background-color: #2e2e2e; + box-shadow: 0 1px 0 0 var(--gray-100); } body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > a, body.gl-dark .navbar-gitlab .navbar-sub-nav li.active > button, diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss index 4b88b94f3a6..6b78abdb5e0 100644 --- a/app/assets/stylesheets/startup/startup-signin.scss +++ b/app/assets/stylesheets/startup/startup-signin.scss @@ -2142,11 +2142,6 @@ table.code { width: 100%; padding: 8px; } -.login-page .omniauth-container .omniauth-btn img { - width: 1.125rem; - height: 1.125rem; - margin-right: 16px; -} .login-page .new-session-tabs { display: flex; box-shadow: 0 0 0 1px #dbdbdb; diff --git a/app/assets/stylesheets/test_environment.scss b/app/assets/stylesheets/test_environment.scss new file mode 100644 index 00000000000..e9ba41f9bb7 --- /dev/null +++ b/app/assets/stylesheets/test_environment.scss @@ -0,0 +1,11 @@ +// Disable sticky changes bar for tests +.diff-files-changed { + position: relative !important; + top: 0 !important; +} + +// Un-hide inputs for @gitlab/ui custom checkboxes and radios so Capybara can target them +.custom-control-input { + z-index: 500; + opacity: 1; +} diff --git a/app/assets/stylesheets/themes/theme_helper.scss b/app/assets/stylesheets/themes/theme_helper.scss index 417377b514e..5b3e2ab4cd0 100644 --- a/app/assets/stylesheets/themes/theme_helper.scss +++ b/app/assets/stylesheets/themes/theme_helper.scss @@ -92,6 +92,7 @@ .notification-dot { will-change: border-color, background-color; + // stylelint-disable-next-line border-color: $nav-svg-color + 33; } @@ -204,6 +205,10 @@ } } + .emoji-picker-category-active { + border-bottom-color: $active-tab-border; + } + .branch-header-title { color: $border-and-box-shadow; } diff --git a/app/assets/stylesheets/themes/theme_light.scss b/app/assets/stylesheets/themes/theme_light.scss index 58003db4236..228bff94f5d 100644 --- a/app/assets/stylesheets/themes/theme_light.scss +++ b/app/assets/stylesheets/themes/theme_light.scss @@ -84,11 +84,12 @@ body { &.gl-dark { .logo-text svg { - fill: $gl-text-color; + fill: var(--gl-text-color); } .navbar-gitlab { - background-color: $gray-50; + background-color: var(--gray-50); + box-shadow: 0 1px 0 0 var(--gray-100); .navbar-sub-nav, .navbar-nav { @@ -97,8 +98,8 @@ body { > a:focus, > button:hover, > button:focus { - color: $gl-text-color; - background-color: $gray-200; + color: var(--gl-text-color); + background-color: var(--gray-200); } } @@ -106,21 +107,21 @@ body { li.dropdown.show { > a, > button { - color: $gl-text-color; - background-color: $gray-200; + color: var(--gl-text-color); + background-color: var(--gray-200); } } } .search { form { - background-color: $gray-100; - box-shadow: inset 0 0 0 1px $border-color; + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--border-color); &:active, &:hover { - background-color: $gray-100; - box-shadow: inset 0 0 0 1px $blue-200; + background-color: var(--gray-100); + box-shadow: inset 0 0 0 1px var(--blue-200); } } } diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index d424dcbf8f2..024162eba3e 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -117,6 +117,7 @@ flex-basis: 25%; } +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168 .gl-md-ml-3 { @media (min-width: $breakpoint-md) { margin-left: $gl-spacing-scale-3; @@ -157,3 +158,17 @@ margin-bottom: $gl-spacing-scale-4 !important; } } + +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168 +.gl-sm-pr-3 { + @media (min-width: $breakpoint-sm) { + padding-right: $gl-spacing-scale-3; + } +} + +// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168 +.gl-sm-w-half { + @media (min-width: $breakpoint-sm) { + width: 50%; + } +} diff --git a/app/assets/stylesheets/vendors/atwho.scss b/app/assets/stylesheets/vendors/atwho.scss index f31dbbeafe8..b92331facee 100644 --- a/app/assets/stylesheets/vendors/atwho.scss +++ b/app/assets/stylesheets/vendors/atwho.scss @@ -1,6 +1,7 @@ .atwho-view { overflow-y: auto; overflow-x: hidden; + max-width: calc(100% - 6px); .name, small.aliases, @@ -80,10 +81,6 @@ } @include media-breakpoint-down(xs) { - .atwho-view-ul { - width: 350px; - } - .atwho-view ul li { overflow: hidden; text-overflow: ellipsis; |