diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
18 files changed, 1239 insertions, 190 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 136ff82e0f8..196fb3a7088 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -112,8 +112,7 @@ a { } .dropdown-menu a, -.dropdown-menu button, -.dropdown-menu-nav a { +.dropdown-menu button { transition: none; } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index a9c1652d00d..a8cc685d880 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -417,12 +417,6 @@ } } -@include media-breakpoint-down(xs) { - .btn-wide-on-xs { - width: 100%; - } -} - .btn-blank { padding: 0; background: transparent; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 714ef8b2175..8dbed9c03f2 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -324,15 +324,8 @@ img.emoji { } .project-item-select-holder { - display: inline-block; - position: relative; - .project-item-select { - position: absolute; - top: 0; - right: 0; min-width: 250px; - visibility: hidden; } } @@ -428,7 +421,6 @@ img.emoji { /** COMMON SIZING CLASSES **/ .w-0 { width: 0; } .w-8em { width: 8em; } -.w-3rem { width: 3rem; } .w-15p { width: 15%; } .w-30p { width: 30%; } .w-60p { width: 60%; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 7004bcc121d..48252762546 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -363,20 +363,30 @@ // Collapsed nav .toggle-sidebar-button, -.close-nav-button { - width: $contextual-sidebar-width - 1px; +.close-nav-button, +.toggle-right-sidebar-button { transition: width $sidebar-transition-duration; - position: fixed; height: $toggle-sidebar-height; - bottom: 0; padding: 0 $gl-padding; background-color: $gray-light; border: 0; - border-top: 1px solid $border-color; color: $gl-text-color-secondary; display: flex; align-items: center; + &:hover { + background-color: $border-color; + color: $gl-text-color; + } +} + +.toggle-sidebar-button, +.close-nav-button { + position: fixed; + bottom: 0; + width: $contextual-sidebar-width - 1px; + border-top: 1px solid $border-color; + svg { margin-right: 8px; } @@ -384,11 +394,10 @@ .icon-chevron-double-lg-right { display: none; } +} - &:hover { - background-color: $border-color; - color: $gl-text-color; - } +.toggle-right-sidebar-button { + border-bottom: 1px solid $border-color; } .collapse-text { diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss new file mode 100644 index 00000000000..c0a2350d080 --- /dev/null +++ b/app/assets/stylesheets/framework/diffs.scss @@ -0,0 +1,1129 @@ +// Common +.diff-file { + margin-bottom: $gl-padding; + + &.conflict { + border-top: 1px solid $border-color; + } + + .file-title, + .file-title-flex-parent { + border-top-left-radius: $border-radius-default; + border-top-right-radius: $border-radius-default; + box-shadow: 0 -2px 0 0 var(--white); + cursor: pointer; + + .dropdown-menu { + cursor: auto; + } + + @media (max-width: map-get($grid-breakpoints, sm)-1) { + .file-header-content { + width: 0; + flex: 1; + } + + .file-actions { + margin-left: $gl-spacing-scale-2; + } + } + + @media (min-width: map-get($grid-breakpoints, md)) { + // The `+11` is to ensure the file header border shows when scrolled - + // the bottom of the compare-versions header and the top of the file header + $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height + 11; + + position: -webkit-sticky; + position: sticky; + top: $mr-file-header-top; + z-index: 120; + + .with-system-header & { + top: $mr-file-header-top + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $mr-file-header-top + $system-header-height + $performance-bar-height; + } + + &::before { + content: ''; + position: absolute; + top: -1px; + left: -11px; + width: 10px; + height: calc(100% + 1px); + background: $white; + pointer-events: none; + } + + .with-performance-bar & { + top: $mr-file-header-top + $performance-bar-height; + } + + &.is-commit { + top: $header-height + $commit-stat-summary-height; + + .with-performance-bar & { + top: $header-height + $commit-stat-summary-height + $performance-bar-height; + } + } + + &.is-compare { + top: $header-height + $compare-branches-sticky-header-height; + + .with-performance-bar & { + top: $performance-bar-height + $header-height + $compare-branches-sticky-header-height; + } + } + } + + &:hover { + background-color: $gray-normal; + } + + svg { + vertical-align: middle; + top: -1px; + } + } + + @media (min-width: map-get($grid-breakpoints, md)) { + &.conflict .file-title, + &.conflict .file-title-flex-parent { + top: $header-height; + } + + .with-performance-bar &.conflict .file-title, + .with-performance-bar &.conflict .file-title-flex-parent { + top: $header-height + $performance-bar-height; + } + + .with-system-header &.conflict .file-title, + .with-system-header &.conflict .file-title-flex-parent { + top: $header-height + $system-header-height; + } + + .with-system-header.with-performance-bar &.conflict .file-title, + .with-system-header.with-performance-bar &.conflict .file-title-flex-parent { + top: $header-height + $performance-bar-height + $system-header-height; + } + } + + .diff-content { + background: $white; + color: $gl-text-color; + border-radius: 0 0 3px 3px; + + .unfold { + cursor: pointer; + } + + .file-mode-changed { + padding: 10px; + color: $gray-500; + } + + .suppressed-container { + padding: ($padding-base-vertical + 5px) $padding-base-horizontal; + text-align: center; + + // "Changes suppressed. Click to show." link + .show-suppressed-diff { + font-size: 110%; + font-weight: $gl-font-weight-bold; + } + } + + .diff-loading-error-block { + padding: $gl-padding * 2 $gl-padding; + text-align: center; + } + } + + .image { + background: $gray-darker; + text-align: center; + padding: 30px; + + .wrap { + display: inline-block; + } + + .frame { + display: inline-block; + background-color: $white; + line-height: 0; + + img { + border: 1px solid $white; + background-image: linear-gradient(45deg, + $border-color 25%, + transparent 25%, + transparent 75%, + $border-color 75%, + $border-color 100%), + linear-gradient(45deg, + $border-color 25%, + transparent 25%, + transparent 75%, + $border-color 75%, + $border-color 100%); + background-size: 10px 10px; + background-position: 0 0, 5px 5px; + max-width: 100%; + } + + &.deleted { + border: 1px solid $deleted; + } + + &.added { + border: 1px solid $added; + } + } + + .image-info { + font-size: 12px; + margin: 5px 0 0; + color: $diff-image-info-color; + } + + .view.swipe { + position: relative; + + .swipe-frame { + display: block; + margin: auto; + position: relative; + } + + .swipe-wrap { + overflow: hidden; + border-right: 1px solid $gray-300; + position: absolute; + display: block; + top: 13px; + right: 7px; + + &.left-oriented { + /* only for commit view (different swipe viewer) */ + border-right: 0; + border-left: 1px solid $gray-300; + } + } + + .frame { + top: 0; + right: 0; + + &.old-diff { + /* only for commit / compare view */ + position: absolute; + } + + &.deleted { + margin: 0; + display: block; + top: 13px; + right: 7px; + } + } + + .swipe-bar { + display: block; + height: 100%; + width: 15px; + z-index: 100; + position: absolute; + cursor: pointer; + + &:hover { + .top-handle { + background-position: -15px 3px; + } + + .bottom-handle { + background-position: -15px -11px; + } + } + + .top-handle { + display: block; + height: 14px; + width: 15px; + position: absolute; + top: 0; + background: image-url('swipemode_sprites.gif') 0 3px no-repeat; + } + + .bottom-handle { + display: block; + height: 14px; + width: 15px; + position: absolute; + bottom: 0; + background: image-url('swipemode_sprites.gif') 0 -11px no-repeat; + } + } + } + + //.view.swipe + .view.onion-skin { + .onion-skin-frame { + display: block; + margin: auto; + position: relative; + } + + .frame.added, + .frame.deleted { + position: absolute; + display: block; + top: 0; + left: 0; + } + + .controls { + display: block; + height: 14px; + width: 300px; + z-index: 100; + position: absolute; + bottom: 0; + left: 50%; + margin-left: -150px; + + .drag-track { + display: block; + position: absolute; + top: 0; + left: 12px; + height: 10px; + width: 276px; + background: image-url('onion_skin_sprites.gif') -4px -20px repeat-x; + } + + .dragger { + display: block; + position: absolute; + left: 0; + top: 0; + height: 14px; + width: 14px; + background: image-url('onion_skin_sprites.gif') 0 -34px repeat-x; + cursor: pointer; + } + + .transparent { + display: block; + position: absolute; + top: 2px; + right: 0; + height: 10px; + width: 10px; + background: image-url('onion_skin_sprites.gif') -2px 0 no-repeat; + } + + .opaque { + display: block; + position: absolute; + top: 2px; + left: 0; + height: 10px; + width: 10px; + background: image-url('onion_skin_sprites.gif') -2px -10px no-repeat; + } + } + } + + //.view.onion-skin + } + + .view-modes { + padding: 10px; + text-align: center; + background: $gray-darker; + + ul, + li { + list-style: none; + margin: 0; + padding: 0; + display: inline-block; + } + + li { + color: $diff-view-modes-color; + border-left: 1px solid $diff-view-modes-border; + padding: 0 12px 0 16px; + cursor: pointer; + + &:first-child { + border-left: 0; + } + + &:hover { + text-decoration: underline; + } + + &.active { + cursor: default; + color: $gl-text-color; + + &:hover { + text-decoration: none; + } + } + + &.disabled { + display: none; + } + } + } + + .diff-file-container { + .frame.deleted { + border: 1px solid $deleted; + background-color: inherit; + } + + .frame.added { + border: 1px solid $added; + background-color: inherit; + } + + .swipe.view, + .onion-skin.view { + .swipe-wrap { + top: 0; + left: 0; + } + + .frame.deleted { + top: 0; + right: 0; + } + + .swipe-bar { + top: 0; + + .top-handle { + top: -14px; + left: -7px; + } + + .bottom-handle { + bottom: -14px; + left: -7px; + } + } + + .file-container { + display: inline-block; + + .file-content { + padding: 0; + + img { + max-width: none; + } + } + } + } + + .onion-skin.view .controls { + bottom: -25px; + } + } + + .discussion-notes .discussion-notes { + margin-left: 0; + border-left: 0; + } +} + +table.code { + width: 100%; + font-family: $monospace-font; + border: 0; + border-collapse: separate; + margin: 0; + padding: 0; + table-layout: fixed; + border-radius: 0 0 $border-radius-default $border-radius-default; + + tr:first-of-type.line_expansion > td { + border-top: 0; + } + + tr:nth-last-of-type(2).line_expansion > td { + border-bottom: 0; + } + + tr.line_holder td { + line-height: $code-line-height; + font-size: $code-font-size; + vertical-align: top; + + span { + white-space: break-spaces; + + &.context-cell { + display: inline-block; + width: 100%; + height: 100%; + } + + &.line { + word-wrap: break-word; + } + } + + &.diff-line-num { + user-select: none; + margin: 0; + padding: 0 10px 0 5px; + border-right-width: 1px; + border-right-style: solid; + text-align: right; + width: 50px; + position: relative; + white-space: nowrap; + + a { + transition: none; + float: left; + width: 100%; + font-weight: $gl-font-weight-normal; + + &[disabled] { + cursor: default; + + &:hover, + &:active { + text-decoration: none; + } + } + } + + &:not(.js-unfold-bottom) a::before { + content: attr(data-linenumber); + } + } + + &.line_content { + display: block; + margin: 0; + padding: 0 1.5em; + border: 0; + position: relative; + white-space: pre-wrap; + + &.parallel { + display: table-cell; + width: 46%; + + span { + word-break: break-all; + } + } + + &.old { + &::before { + content: '-'; + position: absolute; + left: 0.5em; + } + + &.with-coverage::before { + left: 0; + } + } + + &.new { + &::before { + content: '+'; + position: absolute; + left: 0.5em; + } + + &.with-coverage::before { + left: 0; + } + } + } + } + + .line_holder:last-of-type { + td:first-child { + border-bottom-left-radius: $border-radius-default; + } + } + + &.left-side-selected { + td.line_content.parallel.right-side { + user-select: none; + } + } + + &.right-side-selected { + td.line_content.parallel.left-side { + user-select: none; + } + } +} + +.diff-stats { + align-items: center; + padding: 0 1rem; + + .diff-stats-group { + padding: 0 0.25rem; + } + + svg.diff-stats-icon { + vertical-align: text-bottom; + } + + &.is-compare-versions-header { + .diff-stats-group { + padding: 0 0.25rem; + } + } +} + +.file-content .diff-file { + margin: 0; + border: 0; +} + +.diff-wrap-lines .line_content { + white-space: pre-wrap; +} + +.inline-parallel-buttons { + float: right; +} + +.files-changed { + border-bottom: 0; +} + +.merge-request-details .file-content.image_file img { + max-height: 50vh; +} + +.diff-stats-summary-toggler { + padding: 0; + background-color: transparent; + border: 0; + color: $blue-600; + font-weight: $gl-font-weight-bold; + + &:hover, + &:focus { + outline: none; + color: $blue-800; + } + + .caret-icon { + position: relative; + top: 2px; + left: -1px; + } +} + +// Mobile +@media (max-width: 480px) { + .diff-title { + margin: 0; + + .file-mode { + display: none; + } + } + + .diff-controls { + position: static; + text-align: center; + } +} + +// Bigger screens +@media (min-width: 481px) { + .diff-title { + margin-right: 200px; + + .file-mode { + margin-left: 10px; + } + } + + .diff-controls { + float: right; + position: absolute; + top: 5px; + right: 15px; + } +} + +.files { + .diff-file:last-child { + margin-bottom: 0; + } +} + +.diff-comment-avatar-holders { + position: absolute; + margin-left: -$gl-padding; + z-index: 100; + @include code-icon-size(); + + &:hover { + .diff-comment-avatar, + .diff-comments-more-count { + @for $i from 1 through 4 { + $x-pos: 14px; + + &:nth-child(#{$i}) { + @if $i == 4 { + $x-pos: 14.5px; + } + + transform: translateX((($i * $x-pos) - $x-pos)); + + &:hover { + transform: translateX((($i * $x-pos) - $x-pos)); + } + } + } + } + + .diff-comments-more-count { + padding-left: 2px; + padding-right: 2px; + width: auto; + } + } +} + +.diff-comment-avatar, +.diff-comments-more-count { + position: absolute; + left: 0; + margin-right: 0; + border-color: $white; + cursor: pointer; + transition: all 0.1s ease-out; + @include code-icon-size(); + + @for $i from 1 through 4 { + &:nth-child(#{$i}) { + z-index: (4 - $i); + } + } + + .avatar { + @include code-icon-size(); + } +} + +.diff-comments-more-count { + padding-left: 0; + padding-right: 0; + overflow: hidden; + @include code-icon-size(); +} + +.diff-comments-more-count, +.diff-notes-collapse { + @include avatar-counter(50%); +} + +.diff-notes-collapse { + border: 0; + border-radius: 50%; + padding: 0; + transition: transform 0.1s ease-out; + z-index: 100; + display: flex; + justify-content: center; + align-items: center; + @include code-icon-size(); + + .collapse-icon { + height: 50%; + width: 100%; + } + + svg { + vertical-align: middle; + } + + .collapse-icon, + path { + fill: $white; + } + + &:focus { + outline: 0; + } +} + +.diff-files-changed { + .inline-parallel-buttons { + position: relative; + z-index: 1; + } + + .commit-stat-summary { + @include media-breakpoint-up(sm) { + margin-left: -$gl-padding; + padding-left: $gl-padding; + background-color: $white; + } + } + + @include media-breakpoint-up(sm) { + position: -webkit-sticky; + position: sticky; + top: $header-height; + background-color: $white; + z-index: 200; + + .with-performance-bar & { + top: $header-height + $performance-bar-height; + } + + &.is-stuck { + padding-top: 0; + padding-bottom: 0; + border-top: 1px solid $white-dark; + border-bottom: 1px solid $white-dark; + + .diff-stats-additions-deletions-expanded, + .inline-parallel-buttons { + display: none !important; + } + } + } + + @include media-breakpoint-up(lg) { + &.is-stuck { + .diff-stats-additions-deletions-collapsed { + display: block !important; + } + } + } +} + +.diff-file-changes { + max-width: 560px; + width: 100%; + z-index: 150; + min-height: $dropdown-min-height; + max-height: $dropdown-max-height; + overflow-y: auto; + margin-bottom: 0; + + @include media-breakpoint-up(sm) { + left: $gl-padding; + } + + .dropdown-input .dropdown-input-search { + pointer-events: all; + } + + .diff-changed-file { + display: flex; + padding-top: 8px; + padding-bottom: 8px; + min-width: 0; + } + + .diff-file-changed-icon { + margin-top: 2px; + } + + .diff-changed-file-content { + display: flex; + flex-direction: column; + min-width: 0; + } + + .diff-changed-file-name, + .diff-changed-blank-file-name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .diff-changed-blank-file-name { + color: $gl-text-color-tertiary; + font-style: italic; + } + + .diff-changed-file-path { + color: $gl-text-color-tertiary; + } + + .diff-changed-stats { + margin-left: auto; + white-space: nowrap; + } +} + +.diff-file-changes-path { + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.note-container { + background-color: $gray-light; + border-top: 1px solid $white-normal; + + // double jagged line divider + .discussion-notes + .discussion-notes::before, + .diff-file-discussions + .discussion-form::before { + content: ''; + position: relative; + display: block; + width: 100%; + height: 10px; + background-color: $white; + background-image: linear-gradient(45deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white 80%), + linear-gradient(225deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white 80%), + linear-gradient(135deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white 80%), + linear-gradient(-45deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white 80%); + background-position: 5px 5px, 0 5px, 0 5px, 5px 5px; + background-size: 10px 10px; + background-repeat: repeat; + } + + .diff-file-discussions + .discussion-form { + padding: $gl-padding; + + &::before { + width: auto; + margin-left: -$gl-padding; + margin-right: -$gl-padding; + margin-bottom: $gl-padding; + } + } + + .notes { + position: relative; + } + + .diff-notes-collapse { + position: absolute; + left: -12px; + } +} + +.diff-file .note-container > .new-note, +.note-container .discussion-notes.diff-discussions { + margin-left: 100px; + border-left: 1px solid $white-normal; +} + +.notes.active { + .diff-file .note-container > .new-note, + .note-container .discussion-notes { + // Override our margin and border (set for diff tab) + // when user is on the discussion tab for MR + margin-left: inherit; + border-left: inherit; + } +} + +.files:not([data-can-create-note]) .frame { + cursor: auto; +} + +.frame.click-to-comment, +.btn-transparent.image-diff-overlay-add-comment { + position: relative; + cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset, + 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; + + .comment-indicator { + position: absolute; + padding: 0; + width: (2px * $image-comment-cursor-left-offset); + height: (2px * $image-comment-cursor-top-offset); + color: $blue-400; + // center the indicator to match the top left click region + margin-top: (-1px * $image-comment-cursor-top-offset) + 2; + margin-left: (-1px * $image-comment-cursor-left-offset) + 1; + + svg { + width: 100%; + height: 100%; + } + + &:focus { + outline: none; + } + } +} + +.frame .badge.badge-pill, +.image-diff-avatar-link .badge.badge-pill, +.user-avatar-link .badge.badge-pill, +.notes > .badge.badge-pill { + position: absolute; + background-color: $blue-400; + color: $white; + border: $white 1px solid; + min-height: $gl-padding; + padding: 5px 8px; + border-radius: 12px; + + &:focus { + outline: none; + } +} + +.frame .badge.badge-pill, +.frame .image-comment-badge, +.frame .comment-indicator { + // Center align badges on the frame + transform: translate(-50%, -50%); +} + +.image-comment-badge { + position: absolute; + width: 24px; + height: 24px; + padding: 0; + background: none; + border: 0; + + > svg { + width: 100%; + height: 100%; + } +} + +.image-diff-avatar-link, +.user-avatar-link { + position: relative; + + .badge.badge-pill, + .image-comment-badge { + top: 25px; + right: 8px; + } +} + +.notes > .badge.badge-pill { + display: none; + left: -13px; +} + +.discussion-notes { + min-height: 35px; + + &:first-child { + // First child does not have the jagged borders + min-height: 25px; + } + + &.collapsed { + background-color: $white; + + .diff-notes-collapse, + .note, + .discussion-reply-holder { + display: none; + } + + .notes > .badge.badge-pill { + display: block; + } + } + + .note-edit-form { + margin-left: $note-icon-gutter-width; + } +} + +.discussion-body .image .frame { + position: relative; +} + +.discussion-collapsible { + margin: 0 $gl-padding $gl-padding 71px; + + .notes { + border-radius: $border-radius-default; + } +} + +.parallel { + .discussion-collapsible { + margin: $gl-padding; + margin-top: 0; + } +} + +.image-diff-overlay, +.image-diff-overlay-add-comment { + top: 0; + left: 0; + + &:active, + &:focus { + outline: 0; + } +} + +.diff-suggest-popover { + &.popover { + width: 250px; + min-width: 250px; + z-index: 210; + } + + .popover-header { + display: none; + } +} + +@media (max-width: map-get($grid-breakpoints, md)-1) { + .diffs .files { + @include fixed-width-container; + flex-direction: column; + } + + .discussion-collapsible { + margin: $gl-padding; + margin-top: 0; + } +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ad5864ef6d9..e8d37fcf40b 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -33,8 +33,7 @@ } .show.dropdown { - .dropdown-menu, - .dropdown-menu-nav { + .dropdown-menu { @include set-visible; min-height: $dropdown-min-height; max-height: $dropdown-max-height; @@ -190,15 +189,6 @@ background-color: $gray-darker; color: $gl-text-color; outline: 0; - - // make sure the text color is not overridden - &.text-danger { - color: $brand-danger; - } - - .avatar { - border-color: $white; - } } @mixin dropdown-link { @@ -217,11 +207,6 @@ text-align: left; width: 100%; - // make sure the text color is not overridden - &.text-danger { - color: $brand-danger; - } - &.disable-hover { text-decoration: none; } @@ -233,10 +218,6 @@ @include dropdown-item-hover; text-decoration: none; - - .badge.badge-pill { - background-color: darken($blue-50, 5%); - } } &.dropdown-menu-user-link { @@ -258,8 +239,7 @@ } } -.dropdown-menu, -.dropdown-menu-nav { +.dropdown-menu { display: none; position: absolute; width: auto; @@ -393,49 +373,56 @@ pointer-events: none; } - .dropdown-menu li { - cursor: pointer; + .dropdown-menu { + display: none; + opacity: 1; + visibility: visible; + transform: translateY(0); - &.droplab-item-active button { - @include dropdown-item-hover; - } + li { + cursor: pointer; - > a, - > button { - display: flex; - margin: 0; - text-overflow: inherit; - text-align: left; + &.droplab-item-active button { + @include dropdown-item-hover; + } - &.btn .fa:not(:last-child) { - margin-left: 5px; + > a, + > button { + display: flex; + margin: 0; + text-overflow: inherit; + text-align: left; + + &.btn .fa:not(:last-child) { + margin-left: 5px; + } } - } - > button.dropdown-epic-button { - flex-direction: column; + > button.dropdown-epic-button { + flex-direction: column; - .reference { - color: $gray-300; - margin-top: $gl-padding-4; + .reference { + color: $gray-300; + margin-top: $gl-padding-4; + } } - } - &.droplab-item-selected i { - visibility: visible; - } + &.droplab-item-selected i { + visibility: visible; + } - .icon { - visibility: hidden; - } + .icon { + visibility: hidden; + } - .description { - display: inline-block; - white-space: normal; - margin-left: 5px; + .description { + display: inline-block; + white-space: normal; + margin-left: 5px; - p { - margin-bottom: 0; + p { + margin-bottom: 0; + } } } } @@ -447,21 +434,12 @@ } } -.droplab-dropdown .dropdown-menu, -.droplab-dropdown .dropdown-menu-nav { - display: none; - opacity: 1; - visibility: visible; - transform: translateY(0); -} - .comment-type-dropdown.show .dropdown-menu { display: block; } .filtered-search-box-input-container { - .dropdown-menu, - .dropdown-menu-nav { + .dropdown-menu { max-width: 280px; } } @@ -850,8 +828,7 @@ } header.navbar-gitlab .dropdown { - .dropdown-menu, - .dropdown-menu-nav { + .dropdown-menu { width: 100%; min-width: 100%; } diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss index 75d511d7f66..20fea7a82ca 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -1,5 +1,3 @@ -.monaco-editor.gl-editor-lite { - .line-numbers { - @include gl-pt-0; - } +[id^='editor-lite-'] { + height: 500px; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 76c6e03377c..f8710cc1346 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -50,7 +50,7 @@ right: 15px; margin-left: auto; - .btn { + .btn:not(.btn-icon) { padding: 0 10px; font-size: 13px; line-height: 28px; @@ -372,7 +372,7 @@ span.idiff { color: $gl-text-color; } - .file-actions .btn { + .file-actions .btn:not(.btn-icon) { padding: 0 10px; font-size: 13px; line-height: 28px; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 1a394ad124b..5f56fa3be86 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -355,28 +355,45 @@ background-color: $white; } - .boards-switcher { - margin: 0 0 10px; + .filtered-search-block .boards-switcher { + @include gl-mr-0; + margin-bottom: $gl-input-padding; .boards-selector-wrapper, .dropdown { - display: block; + @include gl-display-block; } } .filter-dropdown-container { > div { - margin: 0; + @include gl-m-0; > .btn { - margin: 0 0 10px; - width: 100%; + margin: 0 0 $gl-input-padding; + @include gl-w-full; } } .board-labels-toggle-wrapper { margin-bottom: $gl-input-padding; } + + .board-swimlanes-toggle-wrapper { + @include gl-h-auto; + margin-bottom: $gl-input-padding; + + > span, + > .dropdown, + .gl-dropdown-toggle { + @include gl-w-full; + @include gl-m-0; + } + + > .dropdown { + @include gl-mt-2; + } + } } .boards-add-list > .btn { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index cf21c23cb17..52319d9658b 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -203,18 +203,6 @@ margin-right: 0; } } - - &:hover, - &:focus { - text-decoration: none; - outline: 0; - opacity: 1; - color: $white; - - &.header-user-dropdown-toggle .header-user-avatar { - border-color: $white; - } - } } .header-new-dropdown-toggle { diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index ec0755b1614..5623d38d66e 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -9,6 +9,7 @@ } } +.ci-status-icon-error, .ci-status-icon-failed { svg { fill: $red-500; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 61e8c0d4718..63be2bdef8e 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -215,7 +215,7 @@ } &.build-trace-rounded { - border-radius: $border-radius-base; + border-radius: $gl-border-radius-base; } } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 292d57f132c..7ebc972ac37 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -28,10 +28,6 @@ text-decoration: none; color: $black; border-bottom: 2px solid $gray-darkest; - - .badge.badge-pill { - color: $black; - } } } @@ -380,33 +376,11 @@ } .project-item-select-holder.btn-group { - display: flex; - overflow: hidden; - float: right; - - .new-project-item-link { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .new-project-item-select-button { - width: 32px; + max-width: 44px; } } .empty-state .project-item-select-holder.btn-group { - float: none; - justify-content: center; - - .btn { - // overrides styles applied to plain `.empty-state .btn` - margin: 10px 0; - max-width: 300px; - width: auto; - - @include media-breakpoint-down(xs) { - max-width: 250px; - } - } + max-width: 320px; } diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 4c1c9d15121..47184804353 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -18,18 +18,6 @@ } } -.snippet-form-holder .file-holder .file-title { - padding: 2px; -} - -.markdown-snippet-copy { - position: fixed; - top: -10px; - left: -10px; - max-height: 0; - max-width: 0; -} - .snippet-file-content { border-radius: 3px; @@ -49,21 +37,6 @@ min-height: $header-height; } -.snippet-actions { - @include media-breakpoint-up(sm) { - float: right; - } -} - .snippet-scope-menu .btn-success { margin-top: 15px; } - -.embed-snippet { - padding-right: 0; - padding-top: $gl-padding; - - .embed-toggle-list li button { - padding: 8px 40px; - } -} diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 59e83608d9d..39d9e9a77f9 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -9,11 +9,15 @@ table { * This is a temporary workaround until we fix the neutral * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570 * - * The overwrites here affected the security dashboard tables, when removing - * this code, table-th-transparent and original-text-color classes should - * be removed there. + * The overwrites here affected the following areas: + * - The security dashboard tables. When removing + * this code, table-th-transparent and original-text-color classes should + * be removed there. + * - The subscription seats table. When removing this code, the .seats-table + * <th> and margin overrides should be removed there. * * Remove this code as soon as this happens + * */ &.gl-table { @include gl-text-gray-500; @@ -186,6 +190,7 @@ table { .checkbox { padding-left: $gl-spacing-scale-4; padding-right: 0; + width: 1px; + td, + th { @@ -205,12 +210,20 @@ table { width: 10%; } + .description { + max-width: 0; + } + .identifier { width: 16%; } .scanner { - width: 15%; + width: 10%; + } + + .activity { + width: 5%; } } } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 8b5fa6c1b6c..c15d46d43b2 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -439,10 +439,6 @@ content: '\f0c6'; } - &:hover::before { - text-decoration: none; - } - &.no-attachment-icon { &::before { display: none; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 8cebfc430e0..f0b1e859139 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -780,7 +780,6 @@ $login-brand-holder-color: #888; * Projects */ $project-option-descr-color: #54565b; -$project-network-controls-color: #888; /* * Monitor Charts @@ -819,7 +818,6 @@ $pipeline-dropdown-line-height: 20px; $pipeline-dropdown-status-icon-size: 18px; $ci-action-dropdown-button-size: 24px; $ci-action-dropdown-svg-size: 12px; -$pipelines-table-header-height: 40px; /* CI variable lists @@ -868,9 +866,6 @@ $add-to-slack-popup-max-width: 400px; $add-to-slack-gif-max-width: 850px; $add-to-slack-well-max-width: 750px; $add-to-slack-logo-size: 100px; -$double-headed-arrow-width: 100px; -$double-headed-arrow-height: 25px; -$right-arrow-size: 16px; /* Popup diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 55996a074c6..d550a1faa18 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -3,7 +3,6 @@ color: $gl-text-color; border: 1px solid $border-color; border-radius: $border-radius-default; - margin-bottom: $gl-padding-8; .card.card-body-segment { padding: $gl-padding; @@ -29,11 +28,6 @@ .ref-name { font-size: 12px; - - &:hover { - text-decoration: underline; - color: $gl-text-color; - } } } |