diff options
Diffstat (limited to 'app/assets/stylesheets/pages')
20 files changed, 379 insertions, 1791 deletions
diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss index a104c06c853..514f228e223 100644 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ b/app/assets/stylesheets/pages/alert_management/details.scss @@ -33,7 +33,7 @@ } .main-notes-list::before { - left: 15px !important; + left: $gl-spacing-scale-5 !important; } .note-header-info { diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss deleted file mode 100644 index c4852974a4d..00000000000 --- a/app/assets/stylesheets/pages/boards.scss +++ /dev/null @@ -1,613 +0,0 @@ -.user-can-drag { - cursor: grab; -} - -.is-ghost { - opacity: 0.3; - pointer-events: none; -} - -.dropdown-projects { - .dropdown-content { - max-height: 200px; - } -} - -.dropdown-menu-issues-board-new { - width: 320px; - - .dropdown-content { - max-height: 140px; - } -} - -.issue-board-dropdown-content { - margin: 0; - padding: $gl-padding-4 $gl-padding $gl-padding; - border-bottom: 0; - color: $gl-text-color-secondary; -} - -.issue-boards-page { - .content-wrapper { - padding-bottom: 0; - } -} - -.boards-app { - @include media-breakpoint-up(sm) { - transition: width $sidebar-transition-duration; - width: 100%; - - &.is-compact { - width: calc(100% - #{$gutter-width}); - } - } -} - -.boards-list, -.board-swimlanes { - height: calc(100vh - #{$issue-board-list-difference-xs}); - overflow-x: scroll; - min-height: 200px; - - @include media-breakpoint-only(sm) { - height: calc(100vh - #{$issue-board-list-difference-sm}); - } - - @include media-breakpoint-up(md) { - height: calc(100vh - #{$issue-board-list-difference-md}); - } - - @include media-breakpoint-up(lg) { - height: calc(100vh - #{$issue-board-list-difference-lg}); - } - - .with-performance-bar & { - height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}); - - @include media-breakpoint-only(sm) { - height: calc(100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}); - } - - @include media-breakpoint-up(md) { - height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}); - } - - @include media-breakpoint-up(lg) { - height: calc(100vh - #{$issue-board-list-difference-lg} - #{$performance-bar-height}); - } - } -} - -.board { - // the next line cannot be replaced with .d-inline-block because it breaks display: none of SortableJS - // see https://gitlab.com/gitlab-org/gitlab-foss/issues/64828 - display: inline-block; - width: calc(85vw - 15px); - - @include media-breakpoint-up(sm) { - width: 400px; - } - - .board-title-caret { - border-radius: $border-radius-default; - line-height: $gl-spacing-scale-5; - height: $gl-spacing-scale-5; - - &.btn svg { - top: 0; - } - - &:hover { - background-color: $gray-50; - transition: background-color 0.1s linear; - } - } - - &:not(.is-collapsed) { - .board-title-caret { - margin-right: $gl-padding-4; - } - } - - &.is-collapsed { - width: 50px; - - .board-title { - flex-direction: column; - } - - .board-title-caret { - margin-top: 1px; - } - - .user-avatar-link, - .milestone-icon { - margin-top: $gl-padding-8; - transform: rotate(90deg); - } - - .board-title-text { - flex-grow: 0; - margin: $gl-padding-8 0; - - .board-title-main-text { - display: block; - } - - .board-title-sub-text { - display: none; - } - } - - .issue-count-badge { - border: 0; - white-space: nowrap; - padding: 0; - } - - .board-title-text > span, - .issue-count-badge > span { - height: 16px; - - // Force the height to be equal to the parent's width while centering the contents. - // The contents *should* be about 16 px. - // We do this because the flow of elements isn't affected by the rotate transform, so we must ensure that a - // rotated element has square dimensions so it won't overlap with its siblings. - margin: calc(50% - 8px) 0; - - transform: rotate(90deg); - transform-origin: center; - } - } -} - -.board-inner { - font-size: $issue-boards-font-size; - background: $gray-light; - border: 1px solid $gray-100; -} - -.board-header { - &.has-border::before { - border-top: 3px solid; - border-color: inherit; - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; - content: ''; - position: absolute; - width: calc(100% + 2px); - top: 0; - left: 0; - margin-top: -1px; - margin-right: -1px; - margin-left: -1px; - padding-top: 1px; - padding-right: 1px; - padding-left: 1px; - - .board-title { - padding-top: ($gl-padding - 3px); - padding-bottom: $gl-padding; - } - } -} - -.board-title { - align-items: center; - font-size: 1em; - border-bottom: 1px solid $gray-100; - padding: 0 $gl-spacing-scale-3; - height: 3rem; - - .js-max-issue-size::before { - content: '/'; - } -} - -.board-title-text { - flex-grow: 1; -} - -.board-delete.gl-button { - background-color: transparent; - outline: 0; - - &:hover { - color: $blue-600; - box-shadow: none; - } -} - -.board-blank-state, -.board-promotion-state { - background-color: $white; - flex: 1; - overflow-y: auto; - overflow-x: hidden; -} - -.board-blank-state-list { - > li:not(:last-child) { - margin-bottom: 8px; - } - - .label-color { - top: 2px; - width: 16px; - height: 16px; - margin-right: 3px; - } -} - -.board-list-component { - min-height: 0; // firefox fix -} - -.board-list { - overflow-y: auto; - overflow-x: hidden; -} - -.board-list-loading { - margin-top: 10px; - font-size: (26px / $issue-boards-font-size) * 1em; -} - -.board-card { - background: $white; - border: 1px solid $gray-100; - box-shadow: 0 1px 2px $issue-boards-card-shadow; - line-height: $gl-padding; - list-style: none; - position: relative; - - &:not(:last-child) { - margin-bottom: $gl-padding-8; - } - - &.is-active, - &.is-active .board-card-assignee:hover a { - background-color: $blue-50; - } - - &.multi-select { - border-color: $blue-200; - background-color: $blue-50; - } - - .gl-label { - margin-top: 4px; - margin-right: 4px; - } - - .confidential-icon { - color: $orange-500; - cursor: help; - } - - .issue-blocked-icon { - color: $red-500; - } - - @include media-breakpoint-down(md) { - padding: $gl-padding-8; - } -} - -.board-card-title { - @include overflow-break-word(); - font-size: 1em; - - a { - color: $gl-text-color; - } - - @include media-breakpoint-down(md) { - font-size: $label-font-size; - } -} - -.board-card-header { - text-align: initial; -} - -.board-card-assignee { - margin-top: -$gl-padding-4; - margin-bottom: -$gl-padding-4; - - .avatar-counter { - vertical-align: middle; - line-height: $gl-padding-24; - min-width: $gl-padding-24; - height: $gl-padding-24; - border-radius: $gl-padding-24; - background-color: $gl-text-color-tertiary; - font-size: $gl-font-size-xs; - cursor: help; - font-weight: $gl-font-weight-bold; - margin-left: -$gl-padding-4; - border: 0; - padding: 0 $gl-padding-4; - - @include media-breakpoint-down(md) { - min-width: auto; - height: $gl-padding; - border-radius: $gl-padding; - line-height: $gl-padding; - } - } - - img { - vertical-align: top; - } - - .user-avatar-link:not(:only-child) { - margin-left: -$gl-padding-4; - - &:nth-of-type(1) { - z-index: 2; - } - - &:nth-of-type(2) { - z-index: 1; - } - } - - .avatar { - margin: 0; - - @include media-breakpoint-down(md) { - width: $gl-padding; - height: $gl-padding; - } - } - - @include media-breakpoint-down(md) { - margin-top: 0; - margin-bottom: 0; - } -} - -.board-card-number { - font-size: $gl-font-size-xs; - color: $gl-text-color-secondary; - - @include media-breakpoint-up(md) { - font-size: $label-font-size; - } -} - -.board-list-count { - padding: 10px 0; - color: $gl-text-color-secondary; - font-size: 13px; -} - -.board-new-issue-form { - z-index: 4; - margin: 5px; -} - -.right-sidebar.issue-boards-sidebar { - .gutter-toggle { - bottom: 15px; - width: 22px; - padding-left: $gl-padding-32; - - svg { - position: absolute; - top: 50%; - right: 0; - margin-top: (-11px / 2); - height: $gl-font-size-12; - width: $gl-font-size-12; - } - } - - .issuable-header-text { - @include overflow-break-word(); - padding-right: 35px; - } -} - -.right-sidebar.right-sidebar-expanded { - &.boards-sidebar-slide-enter-active, - &.boards-sidebar-slide-leave-active { - transition: width $sidebar-transition-duration, padding $sidebar-transition-duration; - } - - &.boards-sidebar-slide-enter, - &.boards-sidebar-slide-leave-active { - width: 0; - padding-left: 0; - padding-right: 0; - } -} - -.add-issues-modal { - background-color: rgba($black, 0.3); - z-index: 9999; -} - -.add-issues-container { - width: 90vw; - height: 85vh; - max-width: 1100px; - min-height: 500px; - padding: 25px 15px 0; - background-color: $white; - box-shadow: 0 2px 12px rgba($black, 0.5); - - .empty-state { - &.add-issues-empty-state-filter { - flex-direction: column; - justify-content: center; - } - - .svg-content { - margin-top: -40px; - } - } -} - -.add-issues-header { - margin: -25px -15px -5px; - border-bottom: 1px solid $border-color; - border-top-right-radius: $border-radius-default; - border-top-left-radius: $border-radius-default; - - > h2 { - font-size: 18px; - } -} - -.add-issues-list-column { - width: 100%; - - @include media-breakpoint-up(sm) { - width: 50%; - } - - @include media-breakpoint-up(md) { - width: (100% / 3); - } -} - -.add-issues-list { - padding-top: 3px; - margin-left: -$gl-vert-padding; - margin-right: -$gl-vert-padding; - overflow-y: scroll; - - .board-card-parent { - padding: 0 5px 5px; - } - - .board-card { - border: 1px solid $border-white-normal; - box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3); - cursor: pointer; - } -} - -.add-issues-footer { - margin: auto -15px 0; - padding-left: 15px; - padding-right: 15px; - border-bottom-right-radius: $border-radius-default; - border-bottom-left-radius: $border-radius-default; -} - -.add-issues-footer-to-list { - padding-left: $gl-vert-padding; - padding-right: $gl-vert-padding; - line-height: $input-height; -} - -.issue-card-selected { - position: absolute; - right: -3px; - top: -3px; - width: 17px; - background-color: $blue-500; - color: $white; - border: 1px solid $blue-600; - font-size: 9px; - line-height: 15px; - border-radius: 50%; -} - -.board-card-info { - color: $gl-text-color-secondary; - white-space: nowrap; - margin-right: $gl-padding-8; - - &:not(.board-card-weight) { - cursor: help; - } - - &.board-card-weight { - color: $gl-text-color-secondary; - cursor: pointer; - - &:hover { - color: initial; - text-decoration: underline; - } - } - - .board-card-info-icon { - color: $gray-500; - margin-right: $gl-padding-4; - vertical-align: text-top; - } - - @include media-breakpoint-down(md) { - font-size: $label-font-size; - } -} - -.board-issue-path.js-show-tooltip { - cursor: help; -} - -.board-labels-toggle-wrapper, -.board-swimlanes-toggle-wrapper { - /** - * Make the wrapper the same height as a button so it aligns properly when the - * filtered-search-box input element increases in size on Linux smaller breakpoints - */ - height: $input-height; -} - -.issue-boards-content.is-focused { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background: $white; - z-index: 9000; - - @include media-breakpoint-down(sm) { - padding-top: 10px; - } - - .boards-list { - height: calc(100vh - #{$issue-boards-filter-height}); - overflow-x: scroll; - } - - .issue-boards-sidebar { - height: 100%; - top: 0; - } -} - -.board-swimlanes { - overflow-x: auto; -} - -.board-header-collapsed-info-icon:hover { - color: $gray-900; -} - -$epic-icons-spacing: 40px; - -.board-epic-lane { - max-width: calc(100vw - #{$contextual-sidebar-width} - #{$epic-icons-spacing}); - - .page-with-icon-sidebar & { - max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$epic-icons-spacing}); - } - - .page-with-icon-sidebar .is-compact & { - max-width: calc(100vw - #{$contextual-sidebar-collapsed-width} - #{$gutter-width} - #{$epic-icons-spacing}); - } - - .is-compact & { - max-width: calc(100vw - #{$contextual-sidebar-width} - #{$gutter-width} - #{$epic-icons-spacing}); - } -} diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 04167cbee1b..d7b4db3840e 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -123,20 +123,13 @@ } .build-header { - .ci-header-container, - .header-action-buttons { - display: flex; - } - - .ci-header-container { - min-height: 54px; - } - .page-content-header { padding: 10px 0 9px; } .header-action-buttons { + display: flex; + @include media-breakpoint-down(xs) { .sidebar-toggle-btn { margin-top: 0; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index e6378fd9168..c55bfeb7b15 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -306,7 +306,6 @@ .commit, .generic-commit-status, .branch-commit { - .autodevops-link, .commit-sha { color: $blue-600; } diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss deleted file mode 100644 index c509bf121bc..00000000000 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ /dev/null @@ -1,353 +0,0 @@ -#cycle-analytics, -.cycle-analytics { - margin: 24px auto 0; - position: relative; - - .landing { - margin-top: 0; - - .inner-content { - white-space: normal; - - h4, - p { - margin: 7px 0 0; - max-width: 480px; - padding: 0 $gl-padding; - - @include media-breakpoint-down(sm) { - margin: 0 auto; - } - } - } - - .svg-container svg { - width: 136px; - height: 136px; - } - } - - .col-headers { - ul { - @include clearfix; - margin: 0; - padding: 0; - } - - li { - display: inline-block; - float: left; - line-height: 50px; - width: 20%; - } - - .stage-header { - width: 20.5%; - } - - .median-header { - width: 19.5%; - } - - .event-header { - width: 45%; - } - - .total-time-header { - width: 15%; - } - } - - .card { - .content-block { - padding: 24px 0; - border-bottom: 0; - position: relative; - - @include media-breakpoint-down(xs) { - padding: 6px 0 24px; - } - } - - .column { - text-align: center; - - @include media-breakpoint-down(xs) { - padding: 15px 0; - } - - .header { - font-size: 30px; - line-height: 38px; - font-weight: $gl-font-weight-normal; - margin: 0; - } - - .text { - color: $layout-link-gray; - margin: 0; - } - - &:last-child { - @include media-breakpoint-down(xs) { - text-align: center; - } - } - } - } - - .stage-panel-body { - display: flex; - flex-wrap: wrap; - } - - .stage-nav, - .stage-entries { - display: flex; - vertical-align: top; - font-size: $gl-font-size; - } - - .stage-nav { - width: 40%; - margin-bottom: 0; - - ul { - padding: 0; - margin: 0; - width: 100%; - } - - li { - @include clearfix; - list-style-type: none; - } - - .stage-nav-item { - line-height: 65px; - - &.active { - background: $blue-50; - border-color: $blue-300; - box-shadow: inset 4px 0 0 0 $blue-500; - } - - &:hover:not(.active) { - background-color: $gray-lightest; - box-shadow: inset 2px 0 0 0 $border-color; - cursor: pointer; - } - - .stage-nav-item-cell.stage-name { - width: 44.5%; - } - - .stage-nav-item-cell.stage-median { - min-width: 43%; - } - - .stage-empty, - .not-available { - color: $gl-text-color-secondary; - } - } - } - - .stage-panel-container { - width: 100%; - overflow: auto; - } - - .stage-panel { - min-width: 968px; - - .card-header { - padding: 0; - background-color: transparent; - } - - .events-description { - line-height: 65px; - padding: 0 $gl-padding; - } - - .events-info { - color: $gl-text-color-secondary; - } - } - - .stage-events { - width: 60%; - min-height: 467px; - } - - .stage-event-list { - margin: 0; - padding: 0; - } - - .stage-event-item { - @include clearfix; - list-style-type: none; - padding: 0 0 $gl-padding; - margin: 0 $gl-padding $gl-padding; - border-bottom: 1px solid $gray-darker; - - &:last-child { - border-bottom: 0; - margin-bottom: 0; - } - - .item-details, - .item-time { - float: left; - } - - .item-details { - width: 75%; - } - - .item-title { - margin: 0 0 2px; - - &.issue-title, - &.commit-title, - &.merge-request-title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 100%; - display: block; - - a { - color: $gl-text-color; - } - } - } - - .item-time { - width: 25%; - text-align: right; - } - - .total-time { - font-size: $cycle-analytics-big-font; - color: $gl-text-color; - - span { - color: $gl-text-color; - font-size: $gl-font-size; - } - } - - .issue-date, - .build-date { - color: $gl-text-color; - } - - .mr-link, - .issue-link, - .commit-author-link, - .issue-author-link { - color: $gl-text-color; - } - - // Custom CSS for components - .item-conmmit-component { - .commit-icon { - svg { - display: inline-block; - width: 20px; - height: 20px; - vertical-align: bottom; - } - } - } - - .merge-request-branch { - a { - max-width: 180px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - vertical-align: bottom; - } - } - } - - // Custom Styles for stage items - .item-build-component { - .item-title { - .icon-build-status { - float: left; - margin-right: 5px; - position: relative; - top: 2px; - } - - .item-build-name { - color: $gl-text-color; - } - - .pipeline-id { - color: $gl-text-color; - padding: 0 3px 0 0; - } - - .ref-name { - color: $black; - display: inline-block; - max-width: 180px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - line-height: 1.3; - vertical-align: top; - } - - .commit-sha { - color: $blue-600; - line-height: 1.3; - vertical-align: top; - font-weight: $gl-font-weight-normal; - } - - .fa { - color: $gl-text-color-secondary; - font-size: $code-font-size; - } - } - } - - .empty-stage, - .no-access-stage { - text-align: center; - width: 75%; - margin: 0 auto; - padding-top: 130px; - color: $gl-text-color-secondary; - - h4 { - 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/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 62af7103b39..3c432fe09c0 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -13,6 +13,21 @@ 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 @@ -55,10 +70,6 @@ } } - a:hover { - text-decoration: none; - } - &:hover { background-color: $gray-normal; } diff --git a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss index dfc56654229..415ff01bc33 100644 --- a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss +++ b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss @@ -57,4 +57,8 @@ height: $default-icon-size; } } + + .decline-page { + width: 350px; + } } diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss index 316066694a8..4aa6b2492a2 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/pages/incident_management_list.scss @@ -127,9 +127,4 @@ @include gl-w-full; } } - - // TODO: Abstract to `@gitlab/ui` utility set: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/921 - .gl-fill-green-500 { - fill: $green-500; - } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 53525a4d877..7097c2b10c4 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -117,7 +117,8 @@ } } -.assignee { +.assignee, +.reviewer { .merge-icon { color: $orange-400; position: absolute; @@ -240,16 +241,6 @@ .avatar { margin-left: 0; } - - a.edit-link:not([href]):hover { - color: rgba($gray-normal, 0.2); - } - - .confidential-edit, - .lock-edit, - .edit-link { - @extend .btn-link; - } } .cross-project-reference, diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index e37b26187e7..80cb6ec89ce 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -134,11 +134,6 @@ } } -.label-description-wrapper { - margin-right: 8px; - margin-left: 8px; -} - .prioritized-labels { margin-bottom: 30px; @@ -201,10 +196,6 @@ } } -.label-options-toggle { - width: 100%; -} - .label-subscription { vertical-align: middle; @@ -276,35 +267,6 @@ font-size: $label-font-size; } -.label-badge-blue { - background-color: $theme-blue-100; -} - -.label-badge-gray { - background-color: $gray-50; -} - -.label-links { - list-style: none; - margin: 0; - padding: 0; - white-space: nowrap; -} - -.label-link-item { - padding: 0; -} - -.label-description { - .description-text { - margin-bottom: 10px; - - .admin-labels & { - margin-bottom: 0; - } - } -} - .label-list-item { .content-list &::before, .content-list &::after { @@ -313,21 +275,12 @@ .label-name { width: 200px; - flex-shrink: 0; .gl-label { line-height: $gl-line-height; } } - .label-description { - flex-grow: 1; - - a { - color: $blue-600; - } - } - .label { padding: 4px $grid-size; font-size: $label-font-size; @@ -382,31 +335,8 @@ text-align: left; } - .label-links { - white-space: normal; - } - .label-description { order: 3; - width: 100%; - - > .label-description-wrapper { - margin-left: 0; - margin-right: 0; - } - } - } -} - -@media (max-width: 910px) { - .priority-badge { - display: block; - width: 100%; - margin-left: 0; - margin-top: $gl-padding; - - .label-badge { - display: inline-block; } } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 2d9a9f3029f..11d5104f64d 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -209,6 +209,23 @@ } } + +.members-table { + @include media-breakpoint-up(lg) { + .col-meta { + width: px-to-rem(150px); + } + + .col-expiration { + width: px-to-rem(200px); + } + + .col-actions { + width: px-to-rem(50px); + } + } +} + .card-mobile { .content-list.members-list li { display: block; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 8aaeb92eb7a..ddec04b1b0c 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -770,8 +770,6 @@ $mr-widget-min-height: 69px; position: -webkit-sticky; position: sticky; top: $header-height + $mr-tabs-height; - margin-left: -16px; - width: calc(100% + 32px); .mr-version-menus-container { flex-wrap: nowrap; @@ -868,6 +866,13 @@ $mr-widget-min-height: 69px; } } +.container-fluid { + // Negative margins for mobile/tablet screen + .diffs.tab-pane { + margin: 0 (-$gl-padding); + } +} + // Wrap MR tabs/buttons so you don't have to scroll on desktop @include media-breakpoint-down(md) { .merge-request-tabs-container, diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss deleted file mode 100644 index e9eb79b071c..00000000000 --- a/app/assets/stylesheets/pages/milestone.scss +++ /dev/null @@ -1,252 +0,0 @@ -$status-box-line-height: 26px; - -.issues-sortable-list .str-truncated { - max-width: 90%; -} - -.milestones { - padding: $gl-padding-8; - margin-top: $gl-padding-8; - border-radius: $border-radius-default; - background-color: $gray-100; - - .milestone { - border: 0; - padding: $gl-padding-top $gl-padding; - border-radius: $border-radius-default; - background-color: $white; - - &:not(:last-child) { - margin-bottom: $gl-padding-4; - } - - h4 { - font-weight: $gl-font-weight-bold; - } - - .progress { - width: 100%; - height: 6px; - margin-bottom: $gl-padding-4; - } - - .milestone-progress, - .milestone-release-links { - a { - color: $blue-600; - } - } - - .status-box { - font-size: $tooltip-font-size; - margin-top: 0; - margin-right: $gl-padding-4; - line-height: $status-box-line-height; - - @include media-breakpoint-down(xs) { - line-height: unset; - padding: $gl-padding-4 $gl-input-padding; - } - } - } -} - -.milestone-content { - .issues-count { - margin-right: 17px; - float: right; - width: 105px; - } - - .issuable-row { - span { - a { - color: $gl-text-color; - word-wrap: break-word; - } - - .gl-label-link { - color: inherit; - } - } - } - - .card-header { - line-height: $line-height-base; - padding: 14px 16px; - display: flex; - - .title { - flex: 1; - flex-grow: 2; - } - - .counter { - flex: 0; - padding-left: 16px; - } - } -} - -.milestone-sidebar { - .milestone-progress { - .title { - padding-top: 5px; - } - - .progress { - height: 6px; - margin: 0; - } - - .sidebar-collapsed-icon { - clear: both; - padding: 15px 5px 5px; - - .progress { - margin: 5px 0; - } - } - } - - .collapsed-milestone-date { - font-size: 12px; - } - - .milestone-date { - display: block; - } - - .date-separator { - line-height: 5px; - } - - .remaining-days strong { - font-weight: $gl-font-weight-normal; - } - - .milestone-stat { - float: left; - margin-right: 14px; - } - - .milestone-stat:last-child { - margin-right: 0; - } - - .right-sidebar-expanded & { - .gutter-toggle { - margin-bottom: $sidebar-milestone-toggle-bottom-margin; - } - } - - .right-sidebar-collapsed & { - .milestone-progress { - padding-top: 0; - } - - .reference { - border-top: 1px solid $border-gray-normal; - } - } -} - -.milestone-issues-list, -.milestone-merge_requests-list { - .issuable-detail { - display: block; - margin-top: 7px; - - .issue-link { - display: inline-block; - } - - .issuable-number { - color: $gl-text-color-secondary; - margin-right: 5px; - } - - .avatar { - float: none; - } - - > a:not(:last-of-type) { - margin-right: 5px; - } - } -} - -.milestone-detail { - border-bottom: 1px solid $border-color; -} - -@include media-breakpoint-down(xs) { - .milestone-actions { - @include clearfix(); - padding-top: $gl-vert-padding; - - .btn:first-child { - margin-left: 0; - } - } -} - -.milestone-page-header { - display: flex; - flex-flow: row; - align-items: center; - flex-wrap: wrap; - - .status-box { - margin-top: 0; - order: 1; - } - - .milestone-buttons { - margin-left: auto; - order: 2; - - .verbose { - display: none; - } - } - - .header-text-content { - order: 3; - width: 100%; - } - - @include media-breakpoint-up(xs) { - .milestone-buttons .verbose { - display: inline; - } - - .header-text-content { - order: 2; - width: auto; - } - - .milestone-buttons { - order: 3; - } - } -} - -.issuable-row { - background-color: $white; -} - -.milestone-popover-instructions-list { - padding-left: 2em; - - > li { - padding-left: 1em; - } -} - -@include media-breakpoint-down(xs) { - .milestone-banner-text, - .milestone-banner-link { - display: inline; - } -} diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index c144fb13322..b510822a20a 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -858,68 +858,28 @@ $note-form-margin-left: 72px; } .line-resolve-all-container { - margin: $gl-padding-4; - > div { white-space: nowrap; } - .discussion-next-btn { - border-radius: 0; - } - - .toggle-all-discussions-btn { + .btn-group .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } - - .btn { - line-height: $gl-line-height; - - svg { - fill: $gray-500; - } - - &.discussion-create-issue-btn { - border-radius: 0; - border-right: 0; - - a { - padding: 0; - line-height: 0; - - &:hover { - text-decoration: none; - border: 0; - } - } - } - - &.discussion-next-btn { - border-right: 0; - } - } } .line-resolve-all { vertical-align: middle; display: inline-block; - padding: $gl-padding-4 10px; + padding: $gl-padding-8 $gl-padding-12; background-color: $gray-light; border: 1px solid $border-color; + border-right: 0; border-radius: $border-radius-default; - font-size: $gl-btn-small-font-size; border-top-right-radius: 0; border-bottom-right-radius: 0; - border-right: 0; - - .line-resolve-btn { - color: $gray-500; - - svg { - vertical-align: text-top; - } - } + font-size: $gl-font-size; + line-height: 1rem; @include media-breakpoint-down(xs) { flex: 1; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8b104ce9017..d382fc6241f 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -26,10 +26,6 @@ } .pipelines { - .negative-margin-top { - margin-top: -$pipelines-table-header-height; - } - .stage { max-width: 90px; width: 90px; @@ -111,6 +107,10 @@ white-space: nowrap; } } + + .pipeline-tags .label-container { + white-space: normal; + } } } @@ -124,22 +124,6 @@ } .ci-table { - .build.retried { - background-color: $gray-lightest; - } - - .commit-link { - a { - &:focus { - text-decoration: none; - } - } - - a:hover { - text-decoration: none; - } - } - .avatar { margin-left: 0; float: none; @@ -191,45 +175,12 @@ } } - .icon-container { - display: inline-block; - - &.commit-icon { - width: 15px; - text-align: center; - } - } - - /** - * Play button with icon in dropdowns - */ - .no-btn { - border: 0; - background: none; - outline: none; - width: 100%; - text-align: left; - - .icon-play { - position: relative; - top: 2px; - margin-right: 5px; - height: 13px; - width: 12px; - } - } - .duration, .finished-at { color: $gl-text-color-secondary; margin: 0; white-space: nowrap; - .fa { - font-size: 12px; - margin-right: 4px; - } - svg { width: 12px; height: 12px; @@ -241,14 +192,6 @@ .build-link a { color: $gl-text-color; } - - .btn-group.open .dropdown-toggle { - box-shadow: none; - } - - .pipeline-tags .label-container { - white-space: normal; - } } .stage-cell { @@ -322,9 +265,11 @@ } } -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; +[data-page='admin:jobs:index'] { + .admin-builds-table { + td:last-child { + min-width: 120px; + } } } @@ -333,377 +278,376 @@ border-bottom: 0; } -.tab-pane { - &.builds .ci-table tr { - height: 71px; - } - - .ci-table { - thead th { - border-top: 0; +[data-page='projects:pipelines:show'] { + .tab-pane { + .ci-table { + thead th { + border-top: 0; + } } } -} -.build-failures { - .build-state { - padding: 20px 2px; + .build-failures { + .build-state { + padding: 20px 2px; - .build-name { - font-weight: $gl-font-weight-normal; - } + .build-name { + font-weight: $gl-font-weight-normal; + } - .stage { - color: $gl-text-color-secondary; - font-weight: $gl-font-weight-normal; - vertical-align: middle; + .stage { + color: $gl-text-color-secondary; + font-weight: $gl-font-weight-normal; + vertical-align: middle; + } } - } - .build-log { - border: 0; - line-height: initial; - } + .build-log { + border: 0; + line-height: initial; + } - .build-trace-row td { - border-top: 0; - border-bottom-width: 1px; - border-bottom-style: solid; - padding-top: 0; - } + .build-trace-row td { + border-top: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + padding-top: 0; + } - .build-trace { - width: 100%; - text-align: left; - margin-top: $gl-padding; - } + .build-trace { + width: 100%; + text-align: left; + margin-top: $gl-padding; + } - .build-name { - width: 196px; + .build-name { + width: 196px; - a { - font-weight: $gl-font-weight-bold; - color: $gl-text-color; - text-decoration: none; + a { + font-weight: $gl-font-weight-bold; + color: $gl-text-color; + text-decoration: none; - &:focus, - &:hover { - text-decoration: underline; + &:focus, + &:hover { + text-decoration: underline; + } } } - } - - .build-actions { - width: 70px; - text-align: right; - } - - .build-stage { - width: 140px; - } - - .ci-status-icon-failed { - padding: 10px 0 10px 12px; - width: 12px + 24px; // padding-left + svg width - } - .build-icon svg { - width: 24px; - height: 24px; - vertical-align: middle; - } - - .build-state, - .build-trace-row { - > td:last-child { - padding-right: 0; + .build-actions { + width: 70px; + text-align: right; } - } - @include media-breakpoint-down(sm) { - td:empty { - display: none; + .build-stage { + width: 140px; } - .ci-table { - margin-top: 2 * $gl-padding; + .ci-status-icon-failed { + padding: 10px 0 10px 12px; + width: 12px + 24px; // padding-left + svg width } - .build-trace-container { - padding-top: $gl-padding; - padding-bottom: $gl-padding; + .build-icon svg { + width: 24px; + height: 24px; + vertical-align: middle; } - .build-trace { - margin-bottom: 0; - margin-top: 0; + .build-state, + .build-trace-row { + > td:last-child { + padding-right: 0; + } } - } -} -.pipeline-tab-content { - display: flex; - width: 100%; - min-height: $dropdown-max-height-lg; - background-color: $gray-light; - padding: $gl-padding 0; - overflow: auto; -} + @include media-breakpoint-down(sm) { + td:empty { + display: none; + } -// Pipeline graph -.pipeline-graph { - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; + .ci-table { + margin-top: 2 * $gl-padding; + } - .stage-column-list, - .builds-container > ul { - padding: 0; - } + .build-trace-container { + padding-top: $gl-padding; + padding-bottom: $gl-padding; + } - a { - text-decoration: none; - color: $gl-text-color; + .build-trace { + margin-bottom: 0; + margin-top: 0; + } + } } - svg { - vertical-align: middle; + .pipeline-tab-content { + display: flex; + width: 100%; + min-height: $dropdown-max-height-lg; + background-color: $gray-light; + padding: $gl-padding 0; + overflow: auto; } - .stage-column { - display: inline-block; - vertical-align: top; - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; + // Pipeline graph, used at + // app/assets/javascripts/pipelines/components/graph/graph_component.vue + .pipeline-graph { + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; - .left-connector { - @include flat-connector-before; - } - } + .stage-column-list, + .builds-container > ul { + padding: 0; } - &.no-margin { - margin: 0; + a { + text-decoration: none; + color: $gl-text-color; } - li { - list-style: none; + svg { + vertical-align: middle; } - // when downstream pipelines are present, the last stage isn't the last column - &:last-child:not(.has-downstream) { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child::after { - border: 0; - } - // Remove right curved connectors from all builds in last stage - &:not(:first-child)::after { - border: 0; - } - // Remove opposite curve - .curve::before { - display: none; - } - } - } + .stage-column { + display: inline-block; + vertical-align: top; - // when upstream pipelines are present, the first stage isn't the first column - &:first-child:not(.has-upstream) { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child)::before { - border: 0; - } - // Remove opposite curve - .curve::after { - display: none; + &.left-margin { + &:not(:first-child) { + margin-left: 44px; + + .left-connector { + @include flat-connector-before; + } } } - } - - // Curve first child connecting lines in opposite direction - .curve { - display: none; - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid $border-color; + &.no-margin { + margin: 0; } - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; + li { + list-style: none; } - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; + // when downstream pipelines are present, the last stage isn't the last column + &:last-child:not(.has-downstream) { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child::after { + border: 0; + } + // Remove right curved connectors from all builds in last stage + &:not(:first-child)::after { + border: 0; + } + // Remove opposite curve + .curve::before { + display: none; + } + } } - } - } - .stage-name { - margin: 0 0 15px 10px; - font-weight: $gl-font-weight-bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: 2.2em; - } - - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - - .ci-job-dropdown-container { - // override dropdown.scss - .dropdown-menu li button { - padding: 0; - text-align: center; + // when upstream pipelines are present, the first stage isn't the first column + &:first-child:not(.has-upstream) { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child)::before { + border: 0; + } + // Remove opposite curve + .curve::after { + display: none; + } + } } - } - // ensure .build-content has hover style when action-icon is hovered - .ci-job-dropdown-container:hover .build-content { - @extend .build-content:hover; - } + // Curve first child connecting lines in opposite direction + .curve { + display: none; - .ci-status-icon svg { - height: 24px; - width: 24px; - } + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } - .dropdown-menu-toggle { - background-color: transparent; - border: 0; - padding: 0; + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; + } - &:focus { - outline: none; + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } } } - .build-content { - @include build-content(); + .stage-name { + margin: 0 0 15px 10px; + font-weight: $gl-font-weight-bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 2.2em; } - a.build-content:hover, - button.build-content:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - } + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; + + .ci-job-dropdown-container { + // override dropdown.scss + .dropdown-menu li button { + padding: 0; + text-align: center; + } + } - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; + // ensure .build-content has hover style when action-icon is hovered + .ci-job-dropdown-container:hover .build-content { + @extend .build-content:hover; } - } - // Connect each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid $border-color; - width: 25px; - height: 69px; + .ci-status-icon svg { + height: 24px; + width: 24px; } - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; + .dropdown-menu-toggle { + background-color: transparent; + border: 0; + padding: 0; + + &:focus { + outline: none; + } } - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; + .build-content { + @include build-content(); } - } - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; + a.build-content:hover, + button.build-content:hover { + background-color: $gray-darker; + border: 1px solid $dropdown-toggle-active-border-color; } - .curve { - display: block; + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } } - } - } - .ci-action-icon-container { - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; + } - // Action Icons in big pipeline-graph nodes - &.ci-action-icon-wrapper { - height: 30px; - width: 30px; - border-radius: 100%; - display: block; - padding: 0; - line-height: 0; + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } - svg { - fill: $gl-text-color-secondary; + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; + } } - .spinner { - top: 2px; + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } + + .curve { + display: block; + } } + } + + .ci-action-icon-container { + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + + // Action Icons in big pipeline-graph nodes + &.ci-action-icon-wrapper { + height: 30px; + width: 30px; + border-radius: 100%; + display: block; + padding: 0; + line-height: 0; - &.play { svg { - left: 1px; - top: 1px; + fill: $gl-text-color-secondary; + } + + .spinner { + top: 2px; + } + + &.play { + svg { + left: 1px; + top: 1px; + } } } } - } - .stage-action svg { - left: 1px; - top: -2px; + .stage-action svg { + left: 1px; + top: -2px; + } } -} -// Triggers the dropdown in the big pipeline graph -.dropdown-counter-badge { - font-weight: 100; - font-size: 15px; - position: absolute; - right: 13px; - top: 8px; + // Triggers the dropdown in the big pipeline graph + .dropdown-counter-badge { + font-weight: 100; + font-size: 15px; + position: absolute; + right: 13px; + top: 8px; + } } .ci-build-text, @@ -1013,31 +957,35 @@ button.mini-pipeline-graph-dropdown-toggle { /** * Terminal */ -.terminal-icon { - margin-left: 3px; -} - -.terminal-container { - .content-block { - border-bottom: 0; - } +[data-page='projects:jobs:terminal'], +[data-page='projects:environments:terminal'] { + .terminal-container { + .content-block { + border-bottom: 0; + } - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; + #terminal { + margin-top: 10px; - > div { - min-height: 450px; + > div { + min-height: 450px; + } } } } -.ci-header-container { - min-height: 55px; - - .text-center { - padding-top: 12px; +/** + * Pipelines / Jobs header + */ +[data-page='projects:pipelines:show'], +[data-page='projects:jobs:show'] { + .ci-header-container { + min-height: $gl-spacing-scale-7; + display: flex; + + .text-center { + padding-top: 12px; + } } } @@ -1045,19 +993,6 @@ button.mini-pipeline-graph-dropdown-toggle { float: none; } -.autodevops-title { - font-weight: $gl-font-weight-normal; - line-height: 1.5; -} - -.legend-all { - color: $gl-text-color-secondary; -} - -.legend-success { - color: $green-500; -} - .test-reports-table { .build-trace { @include build-trace(); diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 4dc1f2034f3..3605283245f 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -227,6 +227,10 @@ padding-left: 40px; } + .gl-label-scoped { + --label-inset-border: inset 0 0 0 1px currentColor; + } + @include media-breakpoint-up(lg) { margin-right: 5px; } @@ -443,20 +447,3 @@ table.u2f-registrations, width: 100%; max-width: $add-to-slack-popup-max-width; } - -.gitlab-slack-right-arrow svg { - fill: $white-dark; - width: $right-arrow-size; - height: $right-arrow-size; - vertical-align: text-bottom; -} - -.gitlab-slack-double-headed-arrow { - vertical-align: text-top; - - svg { - fill: $gray-darker; - width: $double-headed-arrow-width; - height: $double-headed-arrow-height; - } -} diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index a2f8447c0b6..05ade210153 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -778,7 +778,7 @@ } .btn { - margin-top: $gl-padding-8; + margin-bottom: $gl-padding-8; padding: $gl-btn-vert-padding $gl-btn-padding; line-height: $gl-btn-line-height; @@ -794,11 +794,6 @@ } .project-buttons { - .stat-text { - @extend .btn; - @extend .btn-default; - } - .nav > li:not(:last-child) { margin-right: $gl-padding-8; } diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss index 239123fc3ab..ebf21f58208 100644 --- a/app/assets/stylesheets/pages/settings_ci_cd.scss +++ b/app/assets/stylesheets/pages/settings_ci_cd.scss @@ -5,6 +5,10 @@ } } +.trigger-description { + max-width: 100px; +} + .trigger-actions { white-space: nowrap; diff --git a/app/assets/stylesheets/pages/tags.scss b/app/assets/stylesheets/pages/tags.scss deleted file mode 100644 index a6d30522ff7..00000000000 --- a/app/assets/stylesheets/pages/tags.scss +++ /dev/null @@ -1,3 +0,0 @@ -.tag-release-link { - color: $blue-600 !important; -} diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss deleted file mode 100644 index 288da4da5c3..00000000000 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ /dev/null @@ -1,17 +0,0 @@ -.gitlab-ui-dev-kit { - > h2 { - margin: 35px 0 20px; - font-weight: $gl-font-weight-bold; - } - - .example { - padding: 15px; - border: 1px dashed $gray-100; - margin-bottom: 15px; - - &::before { - content: 'Example'; - color: $ui-dev-kit-example-color; - } - } -} |