diff options
Diffstat (limited to 'app/assets/stylesheets/pages')
22 files changed, 125 insertions, 1119 deletions
diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss index f0acb78f731..af1eefd7587 100644 --- a/app/assets/stylesheets/pages/admin.scss +++ b/app/assets/stylesheets/pages/admin.scss @@ -8,3 +8,11 @@ .usage-data { max-height: 400px; } + +[data-page='admin:jobs:index'] { + .admin-builds-table { + td:last-child { + min-width: 120px; + } + } +} diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss deleted file mode 100644 index 514f228e223..00000000000 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ /dev/null @@ -1,42 +0,0 @@ -.alert-management-details { - @include media-breakpoint-down(xs) { - .alert-details-incident-button { - width: 100%; - } - } - - .toggle-sidebar-mobile-button { - right: 0; - } - - .dropdown-menu-toggle { - &:hover { - background-color: $white; - } - } - - .assignee-dropdown-item { - .dropdown-item { - display: flex; - align-items: center; - - &::before { - top: 50% !important; - } - - &.is-active { - &:last-child { - border-bottom: 1px solid $gray-100; - } - } - } - } - - .main-notes-list::before { - left: $gl-spacing-scale-5 !important; - } - - .note-header-info { - @include gl-mt-1; - } -} diff --git a/app/assets/stylesheets/pages/alert_management/severity-icons.scss b/app/assets/stylesheets/pages/alert_management/severity-icons.scss deleted file mode 100644 index f58ad87a673..00000000000 --- a/app/assets/stylesheets/pages/alert_management/severity-icons.scss +++ /dev/null @@ -1,27 +0,0 @@ -.incident-severity, -.incident-management-list, -.alert-management-details { - .icon-critical { - color: $red-800; - } - - .icon-high { - color: $red-600; - } - - .icon-medium { - color: $orange-400; - } - - .icon-low { - color: $orange-300; - } - - .icon-info { - color: $blue-400; - } - - .icon-unknown { - color: $gray-200; - } -} diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss deleted file mode 100644 index d7b4db3840e..00000000000 --- a/app/assets/stylesheets/pages/builds.scss +++ /dev/null @@ -1,349 +0,0 @@ -@keyframes fade-out-status { - 0%, - 50% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@keyframes blinking-dot { - 0% { - opacity: 1; - } - - 25% { - opacity: 0.4; - } - - 75% { - opacity: 0.4; - } - - 100% { - opacity: 1; - } -} - -@keyframes blinking-scroll-button { - 0% { - opacity: 0.2; - } - - 50% { - opacity: 1; - } - - 100% { - opacity: 0.2; - } -} - -.build-page { - .build-trace { - @include build-trace(); - } - - .archived-job { - top: $header-height; - border-radius: 2px 2px 0 0; - color: $orange-600; - background-color: $orange-50; - border: 1px solid $border-gray-normal; - padding: 3px 12px; - margin: auto; - align-items: center; - z-index: 1; - - .with-performance-bar & { - top: $header-height + $performance-bar-height; - } - } - - .top-bar { - @include build-trace-top-bar(50px); - - &.has-archived-block { - top: $header-height + 28px; - - .with-performance-bar & { - top: $header-height + $performance-bar-height + 28px; - } - } - - &.affix { - top: $header-height; - - // with sidebar - &.sidebar-expanded { - right: 306px; - left: 16px; - } - - // without sidebar - &.sidebar-collapsed { - right: 16px; - left: 16px; - } - } - - &.affix-top { - position: absolute; - right: 0; - left: 0; - top: 0; - } - - .controllers { - @include build-controllers(15px, center, false, 0, inline, 0); - } - } - - .environment-information { - border: 1px solid $border-color; - padding: 8px $gl-padding 12px; - border-radius: $border-radius-default; - - svg { - position: relative; - top: 3px; - margin-right: 5px; - width: 22px; - height: 22px; - } - } - - .build-loader-animation { - @include build-loader-animation; - float: left; - padding-left: $gl-padding-8; - } -} - -.build-header { - .page-content-header { - padding: 10px 0 9px; - } - - .header-action-buttons { - display: flex; - - @include media-breakpoint-down(xs) { - .sidebar-toggle-btn { - margin-top: 0; - margin-left: 10px; - max-height: 34px; - } - } - } - - .header-content { - a { - color: $gl-text-color; - - &:hover { - color: $blue-600; - text-decoration: none; - } - } - } - - code { - color: $code-color; - } - - .avatar { - float: none; - margin-right: 2px; - margin-left: 2px; - } -} - -.right-sidebar.build-sidebar { - padding: 0; - - &.right-sidebar-collapsed { - display: none; - } - - .sidebar-container { - padding-right: 100px; - height: 100%; - overflow-y: scroll; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - } - - .blocks-container { - padding: 0 $gl-padding; - 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; - - .trigger-variables-btn { - margin-top: -5px; - margin-bottom: -5px; - } - } - - .trigger-build-variables { - margin: 0; - overflow-x: auto; - width: 100%; - -ms-overflow-style: scrollbar; - -webkit-overflow-scrolling: touch; - } - - .trigger-build-variable { - font-weight: $gl-font-weight-normal; - color: $code-color; - } - - .trigger-build-value { - padding: 2px 4px; - color: $black; - } - - .trigger-variables-table-cell { - font-size: $gl-font-size-small; - line-height: $gl-line-height; - border: 1px solid $gray-100; - padding: $gl-padding-4 6px; - width: 50%; - vertical-align: top; - } - - .badge.badge-pill { - margin-left: 2px; - } - - .retry-link { - display: block; - - .btn-inverted-secondary { - color: $blue-500; - - &:hover { - color: $white; - } - } - } - - .stage-item { - cursor: pointer; - - &:hover { - color: $gl-text-color; - } - } - - .builds-container { - background-color: $white; - border-top: 1px solid $border-color; - border-bottom: 1px solid $border-color; - max-height: 300px; - width: 289px; - overflow: auto; - - svg { - margin-right: 3px; - height: 14px; - width: 14px; - } - - a { - padding: $gl-padding 10px $gl-padding 40px; - width: 270px; - - &:hover { - color: $gl-text-color; - } - } - - .icon-arrow-right { - left: 15px; - top: 20px; - } - - .build-job { - &.active { - font-weight: $gl-font-weight-bold; - } - - &.retried { - background-color: $gray-lightest; - } - - &:hover { - background-color: $gray-darker; - } - } - } - - .link-commit { - color: $blue-600; - } -} - -.build-sidebar { - .container-fluid.container-limited { - max-width: 100%; - } - - .content-wrapper { - padding-bottom: 6px; - } -} - -.build-detail-row { - margin-bottom: 5px; - - &:last-of-type { - margin-bottom: 0; - } -} - -.build-light-text { - color: $gl-text-color-secondary; - word-wrap: break-word; -} - -.build-gutter-toggle { - position: absolute; - top: 50%; - right: 0; - margin-top: -17px; -} - -@include media-breakpoint-down(sm) { - .top-bar { - .truncated-info { - white-space: nowrap; - overflow: hidden; - max-width: 220px; - text-overflow: ellipsis; - } - } -} diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index c55bfeb7b15..17474b95e50 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -14,12 +14,6 @@ @extend %commit-description-base; } -.js-details-expand { - &:hover { - text-decoration: none; - } -} - .commit-box { border-top: 1px solid $border-color; padding: $gl-padding 0; @@ -30,17 +24,6 @@ } } -.commit-hash-full { - @include media-breakpoint-down(sm) { - width: 80px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - } -} - .pipeline-info { .status-icon-container { display: inline-block; @@ -225,9 +208,9 @@ display: inline-flex; .label, - .btn { + .btn:not(.gl-button) { padding: $gl-vert-padding $gl-btn-padding; - border: 1px $border-color solid; + border: 1px $gray-200 solid; font-size: $gl-font-size; line-height: $line-height-base; border-radius: 0; diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index 9f9964ac447..5c845c37e90 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -8,18 +8,18 @@ background: $gray-normal; } - #editor { - border: 0; - border-radius: 0; + #editor, + .editor { + @include gl-border-0; + @include gl-m-0; + @include gl-p-0; + @include gl-relative; + @include gl-w-full; height: 500px; - margin: 0; - padding: 0; - position: relative; - width: 100%; .editor-loading-content { - height: 100%; - border: 0; + @include gl-h-full; + @include gl-border-0; } } diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index ee4f74882a1..e73b6b18afd 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -43,12 +43,6 @@ } } -.ldap-group-links { - .form-actions { - margin-bottom: $gl-padding; - } -} - .save-group-loader { margin-top: $gl-padding-50; margin-bottom: $gl-padding-50; @@ -343,11 +337,11 @@ table.pipeline-project-metrics tr td { } .user-access-role { + @include gl-px-3; display: inline-block; color: $gl-text-color-secondary; font-size: 12px; line-height: 20px; - padding: 0 $label-padding; border: 1px solid $border-color; border-radius: $label-border-radius; font-weight: $gl-font-weight-normal; diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss index c0a1fa72b1f..ba363e2d119 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/pages/incident_management_list.scss @@ -8,13 +8,12 @@ @include gl-text-gray-500; tbody { - tr:not(.b-table-busy-slot) { - // TODO replace with gitlab/ui utilities: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1791 + tr:not(.b-table-busy-slot):not(.b-table-empty-row) { &:hover { - border-top-style: double; + @include gl-border-t-double; td { - border-bottom-style: initial; + @include gl-border-b-initial; } } } @@ -22,7 +21,7 @@ tr { &:focus { - outline: none; + @include gl-outline-none; } td, @@ -118,26 +117,34 @@ } .gl-tabs-nav { - border-bottom-width: 0; + @include gl-border-b-0; .gl-tab-nav-item { - color: $gray-500; + @include gl-text-gray-500; > .gl-tab-counter-badge { - color: inherit; + @include gl-reset-color; @include gl-font-sm; - background-color: $gray-50; + @include gl-bg-gray-50; } } } @include media-breakpoint-down(xs) { .list-header { - flex-direction: column-reverse; + @include gl-flex-direction-column-reverse; } .create-incident-button { @include gl-w-full; } } + + .integration-list { + .b-table-empty-row { + td { + @include gl-px-0; + } + } + } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 7097c2b10c4..cc4827f75d4 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,16 +1,12 @@ .issuable-warning-icon { background-color: $orange-50; border-radius: $border-radius-default; + color: $orange-600; width: $issuable-warning-size; height: $issuable-warning-size; text-align: center; margin-right: $issuable-warning-icon-margin; line-height: $gl-line-height-24; - - .icon { - fill: $orange-600; - vertical-align: text-bottom; - } } .limit-container-width { @@ -77,14 +73,6 @@ } } -.issuable-filter-count { - span { - display: block; - margin-bottom: -16px; - padding: 13px 0; - } -} - .issuable-show-labels { .gl-label { margin-bottom: 5px; @@ -662,12 +650,6 @@ } } -.issuable-form-padding-top { - @include media-breakpoint-up(sm) { - padding-top: 7px; - } -} - .issuable-status-box { align-self: stretch; display: flex; @@ -822,11 +804,7 @@ } } -.time_tracker { - padding-bottom: 0; - border-bottom: 0; - - +.time-tracker { .sidebar-collapsed-icon { > .stopwatch-svg { display: inline-block; @@ -939,6 +917,25 @@ } } +/* + * Following overrides are done to prevent + * legacy dropdown styles from influencing + * GitLab UI components used within GlDropdown + */ +.issuable-move-dropdown { + .b-dropdown-form { + @include gl-p-0; + } + + .gl-search-box-by-type button.gl-clear-icon-button:hover { + @include gl-bg-transparent; + } + + .issuable-move-button:not(.disabled):hover { + @include gl-text-white; + } +} + .right-sidebar-collapsed { .sidebar-grouped-item { .sidebar-collapsed-icon { diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index d2eb00c4a4d..08faebc8ec0 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -67,7 +67,6 @@ ul.related-merge-requests > li { } } -.merge-request-ci-status, .related-merge-requests { .ci-status-link { display: block; @@ -93,11 +92,6 @@ ul.related-merge-requests > li { } } -.issues-footer { - padding-top: $gl-padding; - padding-bottom: 37px; -} - .issues-nav-controls, .new-branch-col { font-size: 0; @@ -194,6 +188,12 @@ ul.related-merge-requests > li { border-width: 1px; line-height: $line-height-base; width: auto; + + &.disabled { + background-color: $gray-light; + border-color: $gray-100; + color: $gl-text-color-disabled; + } } } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 31606cb3ba5..4d93702f1c2 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -92,13 +92,8 @@ margin-bottom: 0; } - &.sortable-ghost { - opacity: 0.3; - } - .prioritized-labels:not(.is-not-draggable) & { box-shadow: 0 1px 2px $issue-boards-card-shadow; - cursor: move; cursor: grab; border: 0; @@ -108,126 +103,20 @@ } } - .btn-action { - .fa { - font-size: 18px; - vertical-align: middle; - pointer-events: none; - } - - &:hover { - color: $blue-600; - - &.remove-row { - color: $red-500; - } - } - } - - .color-label { - padding: $gl-padding-4 $grid-size; - } - .prepend-description-left { vertical-align: top; line-height: 24px; } } -.prioritized-labels { - margin-bottom: 30px; - - .add-priority { - display: none; - color: $gray-light; - } - - li:hover { - .draggable-handler { - display: inline-block; - opacity: 1; - } - } -} - -.other-labels { - .remove-priority { - display: none; - } -} - -.filtered-labels { - font-size: 0; - padding: 12px 16px; - - .label-row { - margin-top: 4px; - margin-bottom: 4px; - - &:not(:last-child) { - margin-right: 8px; - } - } - - .label-remove { - border-left: 1px solid $label-remove-border; - z-index: 3; - border-radius: $label-border-radius; - padding: 6px 10px 6px 9px; - - &:hover { - box-shadow: inset 0 0 0 80px $label-remove-border; - } - } - - .btn { - color: inherit; - } - - a.btn { - padding: 0; - - .has-tooltip { - top: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - line-height: 1.1; - } - } -} - -.label-subscription { - vertical-align: middle; - - .dropdown-group-label a { - cursor: pointer; - } +.prioritized-labels .add-priority, +.other-labels .remove-priority { + display: none; } .label-subscribe-button { width: 105px; font-weight: 200; - - .label-subscribe-button-icon { - &[disabled] { - opacity: 0.5; - pointer-events: none; - } - } - - .label-subscribe-button-loading { - display: none; - } - - &.disabled { - .label-subscribe-button-icon { - display: none; - } - - .label-subscribe-button-loading { - display: block; - } - } } .labels-container { @@ -255,11 +144,6 @@ } .label-list-item { - .content-list &::before, - .content-list &::after { - content: none; - } - .label-name { width: 200px; @@ -268,37 +152,16 @@ } } - .label { - padding: 4px $grid-size; - font-size: $label-font-size; - position: relative; - top: $gl-padding-4; - } - .label-action { color: $gray-700; cursor: pointer; - svg { - fill: $gray-700; - } - &:hover { color: $blue-600; - - svg { - fill: $blue-600; - } } - &.remove-row { - &:hover { - color: $red-500; - - svg { - fill: $red-500; - } - } + &.remove-row:hover { + color: $red-500; } } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 922f95ff5df..a8b489f1273 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -225,9 +225,14 @@ } .col-actions { - width: px-to-rem(50px); + width: px-to-rem(65px); } } + + .gl-datepicker-input { + width: px-to-rem(165px); + max-width: 100%; + } } .card-mobile { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 6f71177e870..a0ac55e4c6c 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -463,8 +463,7 @@ $mr-widget-min-height: 69px; .mr-list { .merge-request { - padding: 10px 0 10px 15px; - position: relative; + padding: 10px $gl-padding; display: flex; .issuable-info-container { @@ -737,14 +736,6 @@ $mr-widget-min-height: 69px; border-bottom: 0; } - .comments-disabled-notif { - line-height: 28px; - - .btn { - margin-left: 5px; - } - } - .mr-version-dropdown, .mr-version-compare-dropdown { margin: 0 7px; @@ -1048,9 +1039,3 @@ $mr-widget-min-height: 69px; .diff-file-row.is-active { background-color: $gray-50; } - -.merge-request-container { - .flash-container { - @include gl-mb-4; - } -} diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 8b3d3268a8c..0c24ea9ccc6 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -2,6 +2,7 @@ * Note Form */ .diff-file .diff-content { + .diff-tr.line_holder:hover > .diff-td .line_note_link, tr.line_holder:hover > td .line_note_link { opacity: 1; filter: alpha(opacity = 100); @@ -226,10 +227,6 @@ table { display: none; } -.parallel-comment { - padding: 6px; -} - .error-alert > .alert { margin-top: 5px; margin-bottom: 5px; @@ -311,31 +308,12 @@ table { } } -.discussion-notes-count { - font-size: 16px; -} - -.edit_note { - .markdown-area { - min-height: 140px; - max-height: 500px; - } - - .note-form-actions { - background: transparent; - } -} - .comment-toolbar { padding-top: $gl-padding-top; color: $gl-text-color-secondary; border-top: 1px solid $border-color; } -.md-helper { - padding-top: 10px; -} - .toolbar-button { padding: 0; background: none; @@ -473,31 +451,6 @@ table { margin-right: 5px; } -.attach-new-file, -.button-attach-file, -.retry-uploading-link { - color: $blue-600; - padding: 0; - background: none; - border: 0; - font-size: 14px; - line-height: 16px; - vertical-align: initial; - - &:hover, - &:focus { - text-decoration: none; - - .text-attach-file { - text-decoration: underline; - } - } - - .gl-icon:not(:last-child) { - margin-right: 0; - } -} - .markdown-selector { color: $blue-600; } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index b510822a20a..e23ec25a2f3 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -453,6 +453,8 @@ $note-form-margin-left: 72px; } .diff-file { + .diff-grid-left:hover, + .diff-grid-right:hover, .is-over { .add-diff-note { display: inline-flex; @@ -490,6 +492,7 @@ $note-form-margin-left: 72px; .notes_holder { font-family: $regular-font; + .diff-td, td { border: 1px solid $border-color; border-left: 0; @@ -798,21 +801,15 @@ $note-form-margin-left: 72px; } .note-role { - margin: 0 3px; -} - -.note-role-special { - position: relative; - display: inline-block; - color: $gl-text-color-secondary; - font-size: 12px; - text-shadow: 0 0 15px $gl-text-color-inverted; + margin: 0 8px; } /** * Line note button on the side of diffs */ +.diff-grid-left:hover, +.diff-grid-right:hover, .line_holder .is-over:not(.no-comment-btn) { .add-diff-note { opacity: 1; @@ -895,6 +892,15 @@ $note-form-margin-left: 72px; outline: 0; transition: color $general-hover-transition-duration $general-hover-transition-curve; + &[disabled] { + padding: 0 8px !important; + box-shadow: none !important; + + .gl-button-loading-indicator { + margin-right: 0 !important; + } + } + &.is-disabled { cursor: default; } @@ -902,16 +908,22 @@ $note-form-margin-left: 72px; &:not(.is-disabled) { &:hover, &:focus { - color: $green-600; + svg { + color: $green-600; + } } } &.is-active { - color: $green-600; + svg { + @include gl-text-green-500; + } &:hover, &:focus { - color: $green-700; + svg { + color: $green-700; + } } } diff --git a/app/assets/stylesheets/pages/pipeline_schedules.scss b/app/assets/stylesheets/pages/pipeline_schedules.scss deleted file mode 100644 index 81716991a36..00000000000 --- a/app/assets/stylesheets/pages/pipeline_schedules.scss +++ /dev/null @@ -1,70 +0,0 @@ -.pipeline-schedule-form { - .gl-field-error { - margin: 10px 0 0; - } -} - -.interval-pattern-form-group { - label { - margin-right: 10px; - font-weight: $gl-font-weight-normal; - - &[for='custom'] { - margin-right: 0; - } - } - - .cron-interval-input-wrapper { - padding-left: 0; - } - - .cron-interval-input { - margin: 10px 10px 0 0; - } -} - -.pipeline-schedule-table-row { - .branch-name-cell { - max-width: 300px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .next-run-cell { - color: $gl-text-color-secondary; - } - - a { - color: $text-color; - } - - svg { - vertical-align: middle; - } -} - -.pipeline-schedules-user-callout { - .bordered-box.content-block { - border: 1px solid $border-color; - background-color: transparent; - padding: 16px; - } - - #dismiss-callout-btn { - color: $gl-text-color; - } -} - -.cron-preset-radio-input { - display: inline-block; - - @include media-breakpoint-down(md) { - display: block; - margin: 0 0 5px 5px; - } - - input { - margin-right: 3px; - } -} diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 2df43b861b2..b37aa6cd285 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,11 +1,17 @@ -@include media-breakpoint-down(md) { - .content-list { - &.builds-content-list { - width: 100%; - overflow: auto; - } - } -} +/** + * !! NOTE: Do not add more code in this file: + * + * https://gitlab.com/gitlab-org/gitlab/-/issues/267602 + * + * For new pipeline CSS please consider: + * + * For pipelines tables and lists: + * - `app/assets/stylesheets/page_bundles/pipelines.scss` + * + * For individual pipelines and mini-pipelines: + * - `app/assets/stylesheets/page_bundles/pipeline.scss` + * +**/ .ci-table { .avatar { @@ -81,38 +87,13 @@ } } -[data-page='admin:jobs:index'] { - .admin-builds-table { - td:last-child { - min-width: 120px; +@include media-breakpoint-down(sm) { + .top-bar { + .truncated-info { + white-space: nowrap; + overflow: hidden; + max-width: 220px; + text-overflow: ellipsis; } } } - -.pipelines-container .top-area .nav-controls > .btn:last-child { - float: none; -} - -.progress-bar.bg-primary { - background-color: $blue-500 !important; -} - -.pipeline-stage-pill { - width: 10rem; -} - -.pipeline-job-pill { - width: 8rem; -} - -.stage-rounded { - border-radius: 2rem; -} - -.stage-left-rounded { - border-radius: 2rem 0 0 2rem; -} - -.stage-right-rounded { - border-radius: 0 2rem 2rem 0; -} diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 938d8d34717..09501d3713d 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -252,15 +252,6 @@ } } -.split-one { - display: inline-table; - margin-right: 12px; - - > a { - margin: -1px; - } -} - .save-project-loader { margin-top: 50px; margin-bottom: 50px; @@ -505,92 +496,6 @@ } } -.create-project-options { - display: flex; - - @include media-breakpoint-down(xs) { - display: block; - } - - .first-column { - @include media-breakpoint-up(xs) { - max-width: 50%; - padding-right: 30px; - } - - @include media-breakpoint-down(xs) { - max-width: 100%; - width: 100%; - } - } - - .second-column { - @include media-breakpoint-up(xs) { - width: 50%; - flex: 1; - padding-left: 30px; - position: relative; - } - - @include media-breakpoint-down(xs) { - max-width: 100%; - width: 100%; - padding-left: 0; - position: relative; - } - - // Mobile - @include media-breakpoint-down(xs) { - padding-top: 30px; - } - - &::before { - content: 'OR'; - position: absolute; - left: -10px; - top: 50%; - z-index: 10; - padding: $gl-padding-8 0; - text-align: center; - background-color: $white; - color: $gl-text-color-tertiary; - transform: translateY(-50%); - font-size: 12px; - font-weight: $gl-font-weight-bold; - line-height: 20px; - - // Mobile - @include media-breakpoint-down(xs) { - left: 50%; - top: 0; - transform: translateX(-50%); - padding: 0 $gl-padding-8; - } - } - - &::after { - content: ''; - position: absolute; - background-color: $border-color; - bottom: 0; - left: 0; - right: auto; - height: 100%; - width: 1px; - top: 0; - - // Mobile - @include media-breakpoint-down(xs) { - top: 10px; - left: 10px; - right: 10px; - height: 1px; - width: auto; - } - } - } -} - .project-stats, .project-buttons { .scrolling-tabs-container { @@ -754,17 +659,6 @@ pre.light-well { } } -.project-footer { - margin-top: 20px; - - .btn-remove { - @include btn-middle; - @include btn-red; - - float: left !important; - } -} - /* * Projects list rendered on dashboard and user page */ @@ -1059,24 +953,6 @@ pre.light-well { } } -.cannot-be-merged, -.cannot-be-merged:hover { - color: $red-500; - margin-top: 2px; - position: relative; - z-index: 2; -} - -.private-forks-notice .private-fork-icon { - i:nth-child(1) { - color: $green-600; - } - - i:nth-child(2) { - color: $white; - } -} - .new-protected-branch, .new-protected-tag { label { @@ -1117,23 +993,6 @@ pre.light-well { } } -.custom-notifications-form { - .is-loading { - .custom-notification-event-loading { - display: inline-block; - } - } -} - -.custom-notification-event-loading { - display: none; - margin-left: 5px; - - &.is-done { - color: $green-600; - } -} - .project-refs-form .dropdown-menu, .dropdown-menu-projects { width: 300px; @@ -1233,34 +1092,6 @@ pre.light-well { } } -.variables-table { - table-layout: fixed; - - &.table-responsive { - border: 0; - } - - .variable-key { - max-width: 120px; - overflow: hidden; - word-wrap: break-word; - white-space: nowrap; - text-overflow: ellipsis; - } - - .variable-value { - max-width: 150px; - overflow: hidden; - word-wrap: break-word; - white-space: nowrap; - text-overflow: ellipsis; - } - - .variable-menu { - text-align: right; - } -} - .services-installation-info .row { margin-bottom: 10px; } @@ -1286,18 +1117,6 @@ pre.light-well { padding-bottom: 37px; } -.project-ci-body { - .incorrect-syntax { - font-size: 18px; - color: $red-500; - } - - .correct-syntax { - font-size: 18px; - color: $green-500; - } -} - .project-ci-linter { .ci-editor { height: 400px; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index a62e28a9b8a..502a1881fd2 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -270,7 +270,8 @@ input[type='checkbox']:hover { width: 100%; } - .dropdown-menu-toggle { + .dropdown-menu-toggle, + .gl-new-dropdown { @include media-breakpoint-up(lg) { width: 240px; } diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss deleted file mode 100644 index b37c5172ad2..00000000000 --- a/app/assets/stylesheets/pages/status.scss +++ /dev/null @@ -1,77 +0,0 @@ -.ci-status { - padding: 2px 7px 4px; - border: 1px solid $gray-darker; - white-space: nowrap; - border-radius: 4px; - - &:hover, - &:focus { - text-decoration: none; - } - - svg { - height: 13px; - width: 13px; - overflow: visible; - } - - &.ci-failed { - @include status-color($red-100, $red-500, $red-600); - } - - &.ci-success { - @include green-status-color; - } - - &.ci-canceled, - &.ci-disabled, - &.ci-scheduled, - &.ci-manual { - color: $gl-text-color; - border-color: $gl-text-color; - - &:not(span):hover { - background-color: rgba($gl-text-color, 0.07); - } - } - - &.ci-preparing { - @include status-color($gray-100, $gray-300, $gray-400); - } - - &.ci-pending, - &.ci-waiting-for-resource, - &.ci-failed-with-warnings, - &.ci-success-with-warnings { - @include status-color($orange-50, $orange-500, $orange-700); - } - - &.ci-info, - &.ci-running { - @include status-color($blue-100, $blue-500, $blue-600); - } - - &.ci-created, - &.ci-skipped { - color: $gl-text-color-secondary; - border-color: $gl-text-color-secondary; - - &:not(span):hover { - background-color: rgba($gl-text-color-secondary, 0.07); - } - } -} - -.d-block.d-sm-none-inline { - .ci-status-link { - position: relative; - top: 2px; - left: 5px; - } -} - -.ci-status-link { - svg { - overflow: visible; - } -} diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index 73fe76f139f..429181c2ad4 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -62,7 +62,7 @@ .tree-controls { margin-bottom: 10px; - .btn, + .btn:not(.dropdown-toggle-split), .dropdown, .btn-group { width: 100%; diff --git a/app/assets/stylesheets/pages/users.scss b/app/assets/stylesheets/pages/users.scss index 0863b573f75..917d16a9c53 100644 --- a/app/assets/stylesheets/pages/users.scss +++ b/app/assets/stylesheets/pages/users.scss @@ -51,43 +51,6 @@ outline: 0; } -.flex-users-panel { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - @include media-breakpoint-down(sm) { - display: block; - - .flex-project-title { - vertical-align: top; - display: inline-block; - max-width: 90%; - } - } - - .flex-project-title { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - .badge.badge-pill { - height: 17px; - line-height: 16px; - margin-right: 5px; - padding-top: 1px; - padding-bottom: 1px; - } - - .flex-users-form { - flex-wrap: nowrap; - white-space: nowrap; - margin-left: auto; - } -} - .content-list.members-list li { display: flex; justify-content: space-between; |