diff options
Diffstat (limited to 'app/assets/stylesheets/pages')
35 files changed, 185 insertions, 5011 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/dev_ops_report.scss b/app/assets/stylesheets/pages/dev_ops_report.scss deleted file mode 100644 index 871cd9c4f02..00000000000 --- a/app/assets/stylesheets/pages/dev_ops_report.scss +++ /dev/null @@ -1,259 +0,0 @@ -$space-between-cards: 8px; - -.devops-empty svg { - margin: 64px auto 32px; - max-width: 420px; -} - -.devops-header { - margin-top: $gl-padding; - margin-bottom: $gl-padding; - padding: 0 4px; - display: flex; - align-items: center; - - .devops-header-title { - font-size: 48px; - line-height: 1; - margin: 0; - } - - .devops-header-subtitle { - font-size: 22px; - line-height: 1; - color: $gl-text-color-secondary; - margin-left: 8px; - font-weight: $gl-font-weight-normal; - - .devops-header-icon { - vertical-align: px-to-rem(-$gl-spacing-scale-1); - } - - a { - font-size: 18px; - color: $gl-text-color-secondary; - - &:hover { - color: $blue-500; - } - } - } -} - -.devops-cards { - display: flex; - justify-content: center; - flex-wrap: wrap; -} - -.devops-card-wrapper { - display: flex; - flex-direction: column; - align-items: stretch; - text-align: center; - width: 50%; - border-color: $border-color; - margin: 0 0 32px; - padding: $space-between-cards / 2; - position: relative; - - @include media-breakpoint-up(xs) { - width: percentage(1 / 4); - } - - @include media-breakpoint-up(sm) { - width: percentage(1 / 5); - } - - @include media-breakpoint-up(md) { - width: percentage(1 / 6); - } - - @include media-breakpoint-up(lg) { - width: percentage(1 / 10); - } -} - -.devops-card { - border: solid 1px $border-color; - border-radius: 3px; - border-top-width: 3px; - display: flex; - flex-direction: column; - flex-grow: 1; -} - -.devops-card-low { - border-top-color: $red-400; - - .board-card-score-big { - background-color: $red-50; - } -} - -.devops-card-average { - border-top-color: $orange-200; - - .board-card-score-big { - background-color: $orange-50; - } -} - -.devops-card-high { - border-top-color: $green-400; - - .board-card-score-big { - background-color: $green-50; - } -} - -.devops-card-title { - margin: $gl-padding auto auto; - max-width: 100px; - - h3 { - font-size: 14px; - margin: 0 0 2px; - } - - .light-text { - font-size: 13px; - line-height: 1.25; - color: $gl-text-color-secondary; - } -} - -.board-card-scores { - display: flex; - justify-content: space-around; - align-items: center; - margin: $gl-padding $gl-btn-padding; - line-height: 1; -} - -.board-card-score { - color: $gl-text-color-secondary; - - .board-card-score-name { - font-size: 13px; - margin-top: 4px; - } -} - -.board-card-score-value { - font-size: 16px; - color: $gl-text-color; - font-weight: $gl-font-weight-normal; -} - -.board-card-score-big { - border-top: 2px solid $border-color; - border-bottom: 1px solid $border-color; - font-size: 22px; - padding: 10px 0; - font-weight: $gl-font-weight-normal; -} - -.board-card-buttons { - display: flex; - - > * { - font-size: 16px; - color: $gl-text-color-secondary; - padding: 10px; - flex-grow: 1; - - &:hover { - background-color: $border-color; - color: $gl-text-color; - } - - + * { - border-left: solid 1px $border-color; - } - } -} - -.devops-steps { - margin-top: $gl-padding; - height: 1px; - min-width: 100%; - justify-content: space-around; - position: relative; - background: $border-color; -} - -.devops-step { - $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%; - @each $pos in $step-positions { - $i: index($step-positions, $pos); - - &:nth-child(#{$i}) { - left: $pos; - } - } - - position: absolute; - transform-origin: 75% 50%; - padding: 8px; - height: 50px; - width: 50px; - border-radius: 3px; - display: flex; - flex-direction: column; - align-items: center; - border: solid 1px $border-color; - background: $white; - transform: translate(-50%, -50%); - color: $gl-text-color-secondary; - fill: $gl-text-color-secondary; - box-shadow: 0 2px 4px $dropdown-shadow-color; - - &:hover { - padding: 8px 10px; - fill: currentColor; - z-index: 100; - height: auto; - width: auto; - - .devops-step-title { - max-height: 2em; - opacity: 1; - transition: opacity 0.2s; - } - - svg { - transform: scale(1.5); - margin: $gl-btn-padding; - } - } - - svg { - transition: transform 0.1s; - width: 30px; - height: 30px; - min-height: 30px; - min-width: 30px; - } -} - -.devops-step-title { - max-height: 0; - opacity: 0; - text-transform: uppercase; - margin: $gl-vert-padding 0 0; - text-align: center; - font-size: 12px; -} - -.devops-high-score { - color: $green-400; -} - -.devops-average-score { - color: $orange-500; -} - -.devops-low-score { - color: $red-400; -} diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss deleted file mode 100644 index 62af7103b39..00000000000 --- a/app/assets/stylesheets/pages/diff.scss +++ /dev/null @@ -1,1193 +0,0 @@ -// 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; - - @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; - - &::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; - } - } - } - - a:hover { - text-decoration: none; - } - - &: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; -} - -.diff-tree-list { - position: -webkit-sticky; - position: sticky; - $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px; - top: $top-pos; - max-height: calc(100vh - #{$top-pos}); - z-index: 202; - - .with-performance-bar & { - $performance-bar-top-pos: $performance-bar-height + $top-pos; - top: $performance-bar-top-pos; - max-height: calc(100vh - #{$performance-bar-top-pos}); - } - - .drag-handle { - bottom: 16px; - transform: translateX(10px); - } -} - -.diff-files-holder { - flex: 1; - min-width: 0; - z-index: 201; -} - -.compare-versions-container { - min-width: 0; -} - -.tree-list-holder { - height: 100%; - - .file-row { - margin-left: 0; - margin-right: 0; - } -} - -.tree-list-scroll { - max-height: 100%; - padding-bottom: $grid-size; - overflow-y: scroll; - overflow-x: auto; -} - -.tree-list-search { - flex: 0 0 34px; - - .form-control { - padding-left: 30px; - } -} - -.tree-list-icon { - top: 50%; - left: 10px; - transform: translateY(-50%); - - &, - svg { - fill: $gl-text-color-tertiary; - } -} - -.tree-list-clear-icon { - right: 10px; - left: auto; - line-height: 0; -} - -.discussion-collapsible { - margin: 0 $gl-padding $gl-padding 71px; - - .notes { - border-radius: $border-radius-default; - } -} - -.parallel { - .discussion-collapsible { - margin: $gl-padding; - margin-top: 0; - } -} - -@media (max-width: map-get($grid-breakpoints, md)-1) { - .diffs .files { - @include fixed-width-container; - flex-direction: column; - - .diff-tree-list { - position: relative; - top: 0; - // !important is required to override inline styles of resizable sidebar - width: 100% !important; - } - - .tree-list-holder { - max-height: calc(50px + 50vh); - padding-right: 0; - } - } - - .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; - } -} diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss deleted file mode 100644 index 5ce500dad1d..00000000000 --- a/app/assets/stylesheets/pages/environments.scss +++ /dev/null @@ -1,140 +0,0 @@ -@include media-breakpoint-down(md) { - .deployments-container { - width: 100%; - overflow: auto; - } -} - -.environments-folder-name { - font-weight: $gl-font-weight-normal; -} - -.environments-container { - .ci-table { - .commit-title { - margin: 0; - } - - .external-url, - .dropdown-new { - color: $gl-text-color-secondary; - } - - .build-link, - .ref-name { - color: $gl-text-color; - } - - .folder-icon { - margin-right: 3px; - color: $gl-text-color-secondary; - display: inline-block; - vertical-align: text-top; - } - - .folder-name { - cursor: pointer; - color: $gl-text-color-secondary; - display: inline-block; - } - - .icon-container { - width: 20px; - text-align: center; - } - - .no-btn { - border: 0; - background: none; - outline: none; - width: 100%; - text-align: left; - } - - .environment-child-row { - padding-left: 20px; - } - } -} - -.gl-responsive-table-row { - .branch-commit { - max-width: 100%; - } -} - -.folder-row { - border-left: 0; - border-right: 0; - - @media (min-width: map-get($grid-breakpoints, md)-1) { - border-top: 0; - } -} - -.x-axis path, -.y-axis path, -.label-x-axis-line, -.label-y-axis-line { - fill: none; - stroke-width: 1; - shape-rendering: crispEdges; -} - -.x-axis path, -.y-axis path { - stroke: $gray-300; -} - -.label-x-axis-line, -.label-y-axis-line { - stroke: $border-color; -} - -.y-axis { - line { - stroke: $gray-300; - stroke-width: 1; - } -} - -.metric-area { - opacity: 0.25; -} - -.rect-text-metric { - fill: $white; - stroke-width: 1; - stroke: $gray-darkest; -} - -.rect-axis-text { - fill: $white; -} - -.text-metric { - font-size: 12px; -} - -.selected-metric-line { - stroke: $gray-900; - stroke-width: 1; -} - -.deployment-line { - stroke: $black; - stroke-width: 1; -} - -.divider-line { - stroke-width: 1; - stroke: $gray-darkest; -} - -.environments-actions { - .external-url, - .monitoring-url, - .terminal-button { - width: 38px; - } -} diff --git a/app/assets/stylesheets/pages/error_details.scss b/app/assets/stylesheets/pages/error_details.scss deleted file mode 100644 index 78cac12d6be..00000000000 --- a/app/assets/stylesheets/pages/error_details.scss +++ /dev/null @@ -1,49 +0,0 @@ -.error-details { - li { - @include gl-line-height-32; - } - - .btn-outline-info { - color: $blue-500; - border-color: $blue-500; - } - - .error-details-header { - border-bottom: 1px solid $border-color; - - @include media-breakpoint-down(xs) { - flex-flow: column; - - .error-details-meta-culprit { - display: flex; - } - - .error-details-options { - width: 100%; - - .dropdown-toggle { - text-align: center; - } - } - } - } -} - -.stacktrace { - .file-title { - svg { - vertical-align: middle; - top: -1px; - } - } - - .file-title-name { - &.limited-width { - max-width: 80%; - } - } - - .line_content.old::before { - content: none !important; - } -} diff --git a/app/assets/stylesheets/pages/error_list.scss b/app/assets/stylesheets/pages/error_list.scss deleted file mode 100644 index 3ec3e4f6b43..00000000000 --- a/app/assets/stylesheets/pages/error_list.scss +++ /dev/null @@ -1,34 +0,0 @@ -.error-list { - .sort-control { - .btn { - padding-right: 2rem; - } - - .gl-dropdown-caret { - position: absolute; - right: 0.5rem; - top: 0.5rem; - } - } - - @include media-breakpoint-down(sm) { - .error-list-table { - .table-col { - min-height: 68px; - - &:last-child { - background-color: $gray-10; - - &::before { - content: none !important; - } - - div { - width: 100% !important; - padding: 0 !important; - } - } - } - } - } -} diff --git a/app/assets/stylesheets/pages/error_tracking_list.scss b/app/assets/stylesheets/pages/error_tracking_list.scss deleted file mode 100644 index cc391ca6c97..00000000000 --- a/app/assets/stylesheets/pages/error_tracking_list.scss +++ /dev/null @@ -1,5 +0,0 @@ -.error-list { - .dropdown { - min-width: auto; - } -} diff --git a/app/assets/stylesheets/pages/experience_level.scss b/app/assets/stylesheets/pages/experience_level.scss deleted file mode 100644 index e57ad6321a5..00000000000 --- a/app/assets/stylesheets/pages/experience_level.scss +++ /dev/null @@ -1,29 +0,0 @@ -.signup-page[data-page^='registrations:experience_levels'] { - $card-shadow-color: rgba($black, 0.2); - - .page-wrap { - background-color: $white; - } - - .card-deck { - max-width: 828px; - } - - .card { - transition: box-shadow 0.3s ease-in-out; - } - - .card:hover { - box-shadow: 0 $gl-spacing-scale-3 $gl-spacing-scale-5 $card-shadow-color; - } - - @media (min-width: $breakpoint-sm) { - .card-deck .card { - margin: 0 $gl-spacing-scale-3; - } - } - - .stretched-link:hover { - text-decoration: none; - } -} diff --git a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss deleted file mode 100644 index dfc56654229..00000000000 --- a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss +++ /dev/null @@ -1,60 +0,0 @@ -.signup-page { - .page-wrap { - background-color: $gray-light; - } - - .signup-box-container { - max-width: 960px; - } - - .signup-box { - background-color: $white; - box-shadow: 0 0 0 1px $border-color; - border-radius: $border-radius; - } - - .form-control { - &:active, - &:focus { - background-color: $white; - } - } - - .devise-errors { - h2 { - font-size: $gl-font-size; - color: $red-700; - } - } - - .omniauth-divider { - &::before, - &::after { - content: ''; - flex: 1; - border-bottom: 1px solid $gray-dark; - margin: $gl-padding-24 0; - } - - &::before { - margin-right: $gl-padding; - } - - &::after { - margin-left: $gl-padding; - } - } - - .omniauth-btn { - width: 48%; - - @include media-breakpoint-down(md) { - width: 100%; - } - - img { - width: $default-icon-size; - height: $default-icon-size; - } - } -} diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss deleted file mode 100644 index bca4d50973a..00000000000 --- a/app/assets/stylesheets/pages/graph.scss +++ /dev/null @@ -1,74 +0,0 @@ -.project-network { - border: 1px solid $border-color; - - .controls { - color: $project-network-controls-color; - font-size: 14px; - padding: 5px; - border-bottom: 1px solid $border-color; - background: $gray-darker; - } - - .network-graph { - background: $white; - height: 500px; - overflow-y: scroll; - overflow-x: hidden; - } -} - -.svg-graph-container { - width: 100%; - - .axis-tick { - opacity: 0.4; - } - - .tick-text { - fill: $gl-text-color-secondary; - } - - .x-axis-text { - fill: $gray-900; - } - - .bar-rect { - fill: rgba($blue-500, 0.1); - stroke: $blue-500; - } - - .bar-rect:hover { - fill: rgba($blue-700, 0.3); - } - - .y-axis-label { - line { - stroke: $gray-300; - } - - text { - font-weight: bold; - font-size: 12px; - fill: $gray-700; - } - } -} - -.svg-graph-container-with-grab { - cursor: grab; -} - -.svg-graph-container-grabbed { - cursor: grabbing; -} - -@keyframes flickerAnimation { - 0% { opacity: 1; } - 50% { opacity: 0; } - 100% { opacity: 1; } -} - -.animate-flicker { - animation: flickerAnimation 1.5s infinite; - fill: $gray-300; -} diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 69fd094f83b..ee4f74882a1 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -95,6 +95,78 @@ } } +.group-home-panel { + margin-top: $gl-padding; + margin-bottom: $gl-padding; + + .home-panel-avatar { + width: $home-panel-title-row-height; + height: $home-panel-title-row-height; + flex-shrink: 0; + flex-basis: $home-panel-title-row-height; + } + + .home-panel-title { + font-size: 20px; + line-height: $gl-line-height-24; + font-weight: bold; + + .icon { + vertical-align: -1px; + } + + .home-panel-topic-list { + font-size: $gl-font-size; + font-weight: $gl-font-weight-normal; + + .icon { + position: relative; + top: 3px; + margin-right: $gl-padding-4; + } + } + } + + .home-panel-title-row { + @include media-breakpoint-down(sm) { + .home-panel-avatar { + width: $home-panel-avatar-mobile-size; + height: $home-panel-avatar-mobile-size; + flex-basis: $home-panel-avatar-mobile-size; + + .avatar { + font-size: 20px; + line-height: 46px; + } + } + + .home-panel-title { + margin-top: 4px; + margin-bottom: 2px; + font-size: $gl-font-size; + line-height: $gl-font-size-large; + } + + .home-panel-topic-list, + .home-panel-metadata { + font-size: $gl-font-size-small; + } + } + } + + .home-panel-metadata { + font-weight: normal; + font-size: 14px; + line-height: $gl-btn-line-height; + } + + .home-panel-description { + @include media-breakpoint-up(md) { + font-size: $gl-font-size-large; + } + } +} + .home-panel-buttons { .home-panel-action-button { vertical-align: top; diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss index 316066694a8..c0a1fa72b1f 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/pages/incident_management_list.scss @@ -7,6 +7,19 @@ table { @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 + &:hover { + border-top-style: double; + + td { + border-bottom-style: initial; + } + } + } + } + tr { &:focus { outline: none; @@ -119,7 +132,7 @@ } @include media-breakpoint-down(xs) { - .incident-management-list-header { + .list-header { flex-direction: column-reverse; } @@ -127,9 +140,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/issues.scss b/app/assets/stylesheets/pages/issues.scss index 03603f637c8..d2eb00c4a4d 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -1,38 +1,3 @@ -.issues-list { - &.manual-ordering { - background-color: $gray-light; - border-radius: $border-radius-default; - padding: $gl-padding-8; - - .issue { - background-color: $white; - margin-bottom: $gl-padding-8; - border-radius: $border-radius-default; - border: 1px solid $gray-100; - box-shadow: 0 1px 2px $issue-boards-card-shadow; - } - } - - .issue { - padding: 10px $gl-padding; - position: relative; - - .title { - margin-bottom: 2px; - } - - .issue-labels, - .author-link { - display: inline-block; - } - - .icon-merge-request-unmerged { - height: 13px; - margin-bottom: 3px; - } - } -} - .issue-realtime-pre-pulse { opacity: 0; } @@ -369,13 +334,3 @@ ul.related-merge-requests > li { .issuable-header-slide-leave-to { transform: translateY(-100%); } - -.issuable-list-root { - .gl-label-link { - text-decoration: none; - - &:hover { - color: inherit; - } - } -} diff --git a/app/assets/stylesheets/pages/issues/issues_list.scss b/app/assets/stylesheets/pages/issues/issues_list.scss deleted file mode 100644 index c0af7a6af6d..00000000000 --- a/app/assets/stylesheets/pages/issues/issues_list.scss +++ /dev/null @@ -1,5 +0,0 @@ -.svg-container.jira-logo-container { - svg { - vertical-align: text-bottom; - } -} diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index e37b26187e7..31606cb3ba5 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; @@ -239,20 +230,6 @@ } } -.label-link { - display: inline-flex; - vertical-align: text-bottom; - - &:hover .color-label { - text-decoration: underline; - } - - .label { - vertical-align: inherit; - font-size: $label-font-size; - } -} - .labels-container { background-color: $gray-light; border-radius: $border-radius-default; @@ -270,41 +247,13 @@ .label-badge { color: $gray-900; + display: inline-block; font-weight: $gl-font-weight-normal; padding: $gl-padding-4 $gl-padding-8; border-radius: $border-radius-default; 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 +262,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 +322,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; } } } @@ -426,3 +343,9 @@ box-shadow: 0 0 0 1px inset; } } + +/* Fix scoped label padding in cases where old markdown uses the old label structure */ +.gl-label-text + .gl-label-text { + @include gl-pl-2; + @include gl-pr-3; +} diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 2d9a9f3029f..922f95ff5df 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -209,6 +209,27 @@ } } + +.members-table { + @include media-breakpoint-up(lg) { + .col-meta { + width: px-to-rem(150px); + } + + .col-max-role { + width: px-to-rem(175px); + } + + .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_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss deleted file mode 100644 index 9d583dcaa52..00000000000 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ /dev/null @@ -1,307 +0,0 @@ -// Disabled to use the color map for creating color schemes -// scss-lint:disable ColorVariable -$colors: ( - white-header-head-neutral : #e1fad7, - white-line-head-neutral : #effdec, - white-button-head-neutral : #9adb84, - - white-header-head-chosen : #baf0a8, - white-line-head-chosen : #e1fad7, - white-button-head-chosen : #52c22d, - - white-header-origin-neutral : #e0f0ff, - white-line-origin-neutral : #f2f9ff, - white-button-origin-neutral : #87c2fa, - - white-header-origin-chosen : #add8ff, - white-line-origin-chosen : #e0f0ff, - white-button-origin-chosen : #268ced, - - white-header-not-chosen : #f0f0f0, - white-line-not-chosen : $gray-light, - - dark-header-head-neutral : rgba(#3f3, 0.2), - dark-line-head-neutral : rgba(#3f3, 0.1), - dark-button-head-neutral : #40874f, - - dark-header-head-chosen : rgba(#3f3, 0.33), - dark-line-head-chosen : rgba(#3f3, 0.2), - dark-button-head-chosen : #258537, - - dark-header-origin-neutral : rgba(#2878c9, 0.4), - dark-line-origin-neutral : rgba(#2878c9, 0.3), - dark-button-origin-neutral : #2a5c8c, - - dark-header-origin-chosen : rgba(#2878c9, 0.6), - dark-line-origin-chosen : rgba(#2878c9, 0.4), - dark-button-origin-chosen : #1d6cbf, - - dark-header-not-chosen : rgba(#fff, 0.25), - dark-line-not-chosen : rgba(#fff, 0.1), - - monokai-header-head-neutral : rgba(#a6e22e, 0.25), - monokai-line-head-neutral : rgba(#a6e22e, 0.1), - monokai-button-head-neutral : #376b20, - - monokai-header-head-chosen : rgba(#a6e22e, 0.4), - monokai-line-head-chosen : rgba(#a6e22e, 0.25), - monokai-button-head-chosen : #39800d, - - monokai-header-origin-neutral : rgba(#60d9f1, 0.35), - monokai-line-origin-neutral : rgba(#60d9f1, 0.15), - monokai-button-origin-neutral : #38848c, - - monokai-header-origin-chosen : rgba(#60d9f1, 0.5), - monokai-line-origin-chosen : rgba(#60d9f1, 0.35), - monokai-button-origin-chosen : #3ea4b2, - - monokai-header-not-chosen : rgba(#76715d, 0.24), - monokai-line-not-chosen : rgba(#76715d, 0.1), - - solarized-light-header-head-neutral : rgba(#859900, 0.37), - solarized-light-line-head-neutral : rgba(#859900, 0.2), - solarized-light-button-head-neutral : #afb262, - - solarized-light-header-head-chosen : rgba(#859900, 0.5), - solarized-light-line-head-chosen : rgba(#859900, 0.37), - solarized-light-button-head-chosen : #94993d, - - solarized-light-header-origin-neutral : rgba(#2878c9, 0.37), - solarized-light-line-origin-neutral : rgba(#2878c9, 0.15), - solarized-light-button-origin-neutral : #60a1bf, - - solarized-light-header-origin-chosen : rgba(#2878c9, 0.6), - solarized-light-line-origin-chosen : rgba(#2878c9, 0.37), - solarized-light-button-origin-chosen : #2482b2, - - solarized-light-header-not-chosen : rgba(#839496, 0.37), - solarized-light-line-not-chosen : rgba(#839496, 0.2), - - solarized-dark-header-head-neutral : rgba(#859900, 0.35), - solarized-dark-line-head-neutral : rgba(#859900, 0.15), - solarized-dark-button-head-neutral : #376b20, - - solarized-dark-header-head-chosen : rgba(#859900, 0.5), - solarized-dark-line-head-chosen : rgba(#859900, 0.35), - solarized-dark-button-head-chosen : #39800d, - - solarized-dark-header-origin-neutral : rgba(#2878c9, 0.35), - solarized-dark-line-origin-neutral : rgba(#2878c9, 0.15), - solarized-dark-button-origin-neutral : #086799, - - solarized-dark-header-origin-chosen : rgba(#2878c9, 0.6), - solarized-dark-line-origin-chosen : rgba(#2878c9, 0.35), - solarized-dark-button-origin-chosen : #0082cc, - - solarized_dark_header_not_chosen : rgba(#839496, 0.25), - solarized_dark_line_not_chosen : rgba(#839496, 0.15), - - none_header_head_neutral : $gray-normal, - none_line_head_neutral : $gray-normal, - none_button_head_neutral : $gray-normal, - - none_header_head_chosen : $gray-darker, - none_line_head_chosen : $gray-darker, - none_button_head_chosen : $gray-darker, - - none_header_origin_neutral : $gray-normal, - none_line_origin_neutral : $gray-normal, - none_button_origin_neutral : $gray-normal, - - none_header_origin_chosen : $gray-darker, - none_line_origin_chosen : $gray-darker, - none_button_origin_chosen : $gray-darker, - - none_header_not_chosen : $gray-light, - none_line_not_chosen : $gray-light - -); -// scss-lint:enable ColorVariable - -@mixin color-scheme($color) { - .header.line_content, - .diff-line-num { - &.origin { - background-color: map-get($colors, #{$color}-header-origin-neutral); - border-color: map-get($colors, #{$color}-header-origin-neutral); - - button { - background-color: map-get($colors, #{$color}-button-origin-neutral); - border-color: darken(map-get($colors, #{$color}-button-origin-neutral), 15); - } - - &.selected { - background-color: map-get($colors, #{$color}-header-origin-chosen); - border-color: map-get($colors, #{$color}-header-origin-chosen); - - button { - background-color: map-get($colors, #{$color}-button-origin-chosen); - border-color: darken(map-get($colors, #{$color}-button-origin-chosen), 15); - } - } - - &.unselected { - background-color: map-get($colors, #{$color}-header-not-chosen); - border-color: map-get($colors, #{$color}-header-not-chosen); - - button { - background-color: lighten(map-get($colors, #{$color}-button-origin-neutral), 15); - border-color: map-get($colors, #{$color}-button-origin-neutral); - } - } - } - - &.head { - background-color: map-get($colors, #{$color}-header-head-neutral); - border-color: map-get($colors, #{$color}-header-head-neutral); - - button { - background-color: map-get($colors, #{$color}-button-head-neutral); - border-color: darken(map-get($colors, #{$color}-button-head-neutral), 15); - } - - &.selected { - background-color: map-get($colors, #{$color}-header-head-chosen); - border-color: map-get($colors, #{$color}-header-head-chosen); - - button { - background-color: map-get($colors, #{$color}-button-head-chosen); - border-color: darken(map-get($colors, #{$color}-button-head-chosen), 15); - } - } - - &.unselected { - background-color: map-get($colors, #{$color}-header-not-chosen); - border-color: map-get($colors, #{$color}-header-not-chosen); - - button { - background-color: lighten(map-get($colors, #{$color}-button-head-neutral), 15); - border-color: map-get($colors, #{$color}-button-head-neutral); - } - } - } - } - - .line_content { - &.origin { - background-color: map-get($colors, #{$color}-line-origin-neutral); - - &.selected { - background-color: map-get($colors, #{$color}-line-origin-chosen); - } - - &.unselected { - background-color: map-get($colors, #{$color}-line-not-chosen); - } - } - - &.head { - background-color: map-get($colors, #{$color}-line-head-neutral); - - &.selected { - background-color: map-get($colors, #{$color}-line-head-chosen); - } - - &.unselected { - background-color: map-get($colors, #{$color}-line-not-chosen); - } - } - } -} - -#conflicts { - .white { - @include color-scheme('white'); } - - .dark { - @include color-scheme('dark'); } - - .monokai { - @include color-scheme('monokai'); } - - .solarized-light { - @include color-scheme('solarized-light'); } - - .solarized-dark { - @include color-scheme('solarized-dark'); } - - .diff-wrap-lines .line_content { - white-space: normal; - min-height: 19px; - } - - .line_content.header { - position: relative; - - button { - border-radius: 2px; - font-size: 10px; - position: absolute; - right: 10px; - padding: 0; - outline: none; - color: $white; - width: 75px; // static width to make 2 buttons have same width - height: 19px; - } - } - - .btn-success .fa-spinner { - color: $white; - } - - .editor-wrap { - &.is-loading { - .editor { - display: none; - } - - .loading { - display: block; - } - } - - &.saved { - .editor { - border-top: solid 2px $green-300; - } - } - - .editor { - pre { - height: 350px; - border: 0; - border-radius: 0; - margin-bottom: 0; - } - } - - .loading { - display: none; - } - } - - .discard-changes-alert { - background-color: $gray-light; - text-align: right; - padding: $gl-padding-top $gl-padding; - color: $gl-text-color; - - .discard-actions { - display: inline-block; - margin-left: 10px; - } - } - - .resolve-conflicts-form { - h4 { - margin-top: 0; - } - - .resolve-info { - @media(max-width: map-get($grid-breakpoints, lg)-1) { - margin-bottom: $gl-padding; - } - } - } -} diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 8aaeb92eb7a..6f71177e870 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -471,12 +471,6 @@ $mr-widget-min-height: 69px; flex: 1; } - .issuable-meta { - .author-link { - display: inline-block; - } - } - .merge-request-title { margin-bottom: 2px; @@ -770,8 +764,14 @@ $mr-widget-min-height: 69px; position: -webkit-sticky; position: sticky; top: $header-height + $mr-tabs-height; - margin-left: -16px; - width: calc(100% + 32px); + + .with-system-header & { + top: $header-height + $mr-tabs-height + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $header-height + $mr-tabs-height + $system-header-height + $performance-bar-height; + } .mr-version-menus-container { flex-wrap: nowrap; @@ -790,6 +790,14 @@ $mr-widget-min-height: 69px; background-color: $white; border-bottom: 1px solid $border-color; + .with-system-header & { + top: $header-height + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $header-height + $system-header-height + $performance-bar-height; + } + @include media-breakpoint-up(sm) { position: -webkit-sticky; position: sticky; @@ -868,6 +876,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..2df43b861b2 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,119 +1,3 @@ -@mixin flat-connector-before($length: 44px) { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -$length; - border-top: 2px solid $border-color; - width: $length; - height: 1px; - } -} - -@mixin build-content($border-radius: 30px) { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: $border-radius; - background-color: $white; - - &:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - color: $gl-text-color; - } -} - -.pipelines { - .negative-margin-top { - margin-top: -$pipelines-table-header-height; - } - - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .table-holder { - overflow: unset; - width: 100%; - } - - .commit-title { - margin: 0; - white-space: normal; - - @include media-breakpoint-down(sm) { - justify-content: flex-end; - } - } - - .ci-table { - .badge { - margin-bottom: 3px; - } - - .pipeline-id { - color: $black; - } - - .pipelines-time-ago { - text-align: right; - } - - .pipeline-actions { - min-width: 170px; //Guarantees buttons don't break in several lines. - - .btn-default { - color: $gl-text-color-secondary; - } - - .btn.btn-retry:hover, - .btn.btn-retry:focus { - border-color: $dropdown-toggle-active-border-color; - background-color: $white-normal; - } - - svg path { - fill: $gl-text-color-secondary; - } - - .dropdown-menu { - max-height: $dropdown-max-height; - overflow-y: auto; - } - - .dropdown-toggle, - .dropdown-menu { - color: $gl-text-color-secondary; - - .fa { - color: $gl-text-color-secondary; - font-size: 14px; - } - } - - .btn-group.open .btn-default { - background-color: $white-normal; - border-color: $border-white-normal; - } - - .btn .text-center { - display: inline; - } - - .tooltip { - white-space: nowrap; - } - } - } -} - @include media-breakpoint-down(md) { .content-list { &.builds-content-list { @@ -124,22 +8,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; @@ -160,7 +28,10 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-text-color-secondary; + + &:not(.text-warning) { + fill: $gl-text-color-secondary; + } } .sprite { @@ -191,45 +62,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,843 +79,20 @@ .build-link a { color: $gl-text-color; } - - .btn-group.open .dropdown-toggle { - box-shadow: none; - } - - .pipeline-tags .label-container { - white-space: normal; - } } -.stage-cell { - .mini-pipeline-graph-dropdown-toggle { - svg { - height: $ci-action-icon-size; - width: $ci-action-icon-size; - position: absolute; - top: -1px; - left: -1px; - z-index: 2; - overflow: visible; - } - - &:hover, - &:active, - &:focus { - svg { - top: -2px; - left: -2px; - } +[data-page='admin:jobs:index'] { + .admin-builds-table { + td:last-child { + min-width: 120px; } } - - .stage-container { - display: inline-block; - position: relative; - vertical-align: middle; - height: $ci-action-icon-size; - margin: 3px 0; - - + .stage-container { - margin-left: 6px; - } - - // Hack to show a button tooltip inline - button.has-tooltip + .tooltip { - min-width: 105px; - } - - // Bootstrap way of showing the content inline for anchors. - a.has-tooltip { - white-space: nowrap; - } - - &:not(:last-child) { - &::after { - content: ''; - width: 7px; - position: absolute; - right: -7px; - top: 11px; - border-bottom: 2px solid $border-color; - } - } - - //delete when all pipelines are updated to new size - &.mr-widget-pipeline-stages { - + .stage-container { - margin-left: 4px; - } - - &:not(:last-child) { - &::after { - width: 4px; - right: -4px; - top: 11px; - } - } - } - } -} - -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; - } -} - -// Pipeline visualization -.pipeline-actions { - border-bottom: 0; -} - -.tab-pane { - &.builds .ci-table tr { - height: 71px; - } - - .ci-table { - thead th { - border-top: 0; - } - } -} - -.build-failures { - .build-state { - padding: 20px 2px; - - .build-name { - font-weight: $gl-font-weight-normal; - } - - .stage { - color: $gl-text-color-secondary; - font-weight: $gl-font-weight-normal; - vertical-align: middle; - } - } - - .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 { - width: 100%; - text-align: left; - margin-top: $gl-padding; - } - - .build-name { - width: 196px; - - a { - font-weight: $gl-font-weight-bold; - color: $gl-text-color; - text-decoration: none; - - &: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; - } - } - - @include media-breakpoint-down(sm) { - td:empty { - display: none; - } - - .ci-table { - margin-top: 2 * $gl-padding; - } - - .build-trace-container { - padding-top: $gl-padding; - padding-bottom: $gl-padding; - } - - .build-trace { - margin-bottom: 0; - margin-top: 0; - } - } -} - -.pipeline-tab-content { - display: flex; - width: 100%; - min-height: $dropdown-max-height-lg; - background-color: $gray-light; - padding: $gl-padding 0; - overflow: auto; -} - -// Pipeline graph -.pipeline-graph { - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - .stage-column-list, - .builds-container > ul { - padding: 0; - } - - a { - text-decoration: none; - color: $gl-text-color; - } - - svg { - vertical-align: middle; - } - - .stage-column { - display: inline-block; - vertical-align: top; - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; - - .left-connector { - @include flat-connector-before; - } - } - } - - &.no-margin { - margin: 0; - } - - li { - list-style: none; - } - - // 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; - } - } - } - - // 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; - } - } - } - - // 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; - } - - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } - - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; - } - } - } - - .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; - } - } - - // ensure .build-content has hover style when action-icon is hovered - .ci-job-dropdown-container:hover .build-content { - @extend .build-content:hover; - } - - .ci-status-icon svg { - height: 24px; - width: 24px; - } - - .dropdown-menu-toggle { - background-color: transparent; - border: 0; - padding: 0; - - &:focus { - outline: none; - } - } - - .build-content { - @include build-content(); - } - - a.build-content:hover, - button.build-content:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - } - - // 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; - } - } - - // 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; - } - - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; - } - - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; - } - } - - // 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; - - svg { - fill: $gl-text-color-secondary; - } - - .spinner { - top: 2px; - } - - &.play { - svg { - left: 1px; - top: 1px; - } - } - } - } - - .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; -} - -.ci-build-text, -.ci-status-text { - font-weight: 200; -} - -@mixin mini-pipeline-graph-color( - $color-background-default, - $color-background-hover-focus, - $color-background-active, - $color-foreground-default, - $color-foreground-hover-focus, - $color-foreground-active -) { - background-color: $color-background-default; - border-color: $color-foreground-default; - - svg { - fill: $color-foreground-default; - } - - &:hover, - &:focus { - background-color: $color-background-hover-focus; - border-color: $color-foreground-hover-focus; - - svg { - fill: $color-foreground-hover-focus; - } - } - - &:active { - background-color: $color-background-active; - border-color: $color-foreground-active; - - svg { - fill: $color-foreground-active; - } - } - - &:focus { - box-shadow: 0 0 4px 1px $blue-300; - } -} - -@mixin mini-pipeline-item() { - border-radius: 100px; - background-color: $white; - border-width: 1px; - border-style: solid; - width: $ci-action-icon-size; - height: $ci-action-icon-size; - margin: 0; - padding: 0; - position: relative; - vertical-align: middle; - - &:hover, - &:active, - &:focus { - outline: none; - border-width: 2px; - } - - // Dropdown button animation in mini pipeline graph - &.ci-status-icon-success { - @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700); - } - - &.ci-status-icon-failed { - @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700); - } - - &.ci-status-icon-pending, - &.ci-status-icon-waiting-for-resource, - &.ci-status-icon-success-with-warnings { - @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); - } - - &.ci-status-icon-preparing, - &.ci-status-icon-running { - @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); - } - - &.ci-status-icon-canceled, - &.ci-status-icon-scheduled, - &.ci-status-icon-disabled, - &.ci-status-icon-not-found, - &.ci-status-icon-manual { - @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black); - } - - &.ci-status-icon-created, - &.ci-status-icon-skipped { - @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); - } -} - -// Dropdown button in mini pipeline graph -button.mini-pipeline-graph-dropdown-toggle { - @include mini-pipeline-item(); -} - -/** - Action icons inside dropdowns: - - mini graph in pipelines table - - dropdown in big graph - - mini graph in MR widget pipeline - - mini graph in Commit widget pipeline -*/ -.big-pipeline-graph-dropdown-menu, -.mini-pipeline-graph-dropdown-menu { - width: 240px; - max-width: 240px; - - // override dropdown.scss - &.dropdown-menu li button, - &.dropdown-menu li a.ci-action-icon-container { - padding: 0; - text-align: center; - } - - .ci-action-icon-container { - position: absolute; - right: 8px; - top: 8px; - - &.ci-action-icon-wrapper { - height: $ci-action-dropdown-button-size; - width: $ci-action-dropdown-button-size; - border-radius: 50%; - display: block; - - &:hover { - box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color; - background-color: $gray-darker; - - svg { - fill: $gl-text-color; - } - } - - .spinner, - svg { - width: $ci-action-dropdown-svg-size; - height: $ci-action-dropdown-svg-size; - fill: $gl-text-color-secondary; - position: relative; - top: 1px; - vertical-align: initial; - } - } - } - - // SVGs in the commit widget and mr widget - a.ci-action-icon-container.ci-action-icon-wrapper svg { - top: 5px; - } - - .scrollable-menu { - padding: 0; - max-height: 245px; - overflow: auto; - } - - li { - position: relative; - - // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered - &:hover > .mini-pipeline-graph-dropdown-item, - &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { - @extend .mini-pipeline-graph-dropdown-item:hover; - } - - // link to the build - .mini-pipeline-graph-dropdown-item { - align-items: center; - clear: both; - display: flex; - font-weight: normal; - line-height: $line-height-base; - white-space: nowrap; - - // Match dropdown.scss for all `a` tags - &.non-details-job-component { - padding: $gl-padding-8 $gl-btn-horz-padding; - } - - .ci-job-name-component { - align-items: center; - display: flex; - flex: 1; - } - - - .ci-status-icon { - @include gl-mr-3; - - position: relative; - - > svg { - width: $pipeline-dropdown-status-icon-size; - height: $pipeline-dropdown-status-icon-size; - margin: 3px 0; - position: relative; - overflow: visible; - display: block; - } - } - - &:hover, - &:focus { - outline: none; - text-decoration: none; - background-color: $gray-darker; - } - } - } -} - -// Dropdown in the big pipeline graph -.big-pipeline-graph-dropdown-menu { - width: 195px; - min-width: 195px; - left: 100%; - top: -10px; - box-shadow: 0 1px 5px $black-transparent; - - /** - * Top arrow in the dropdown in the big pipeline graph - */ - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; - } - - &::before { - left: -6px; - margin-top: 3px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; - } - - &::after { - left: -5px; - border-width: 10px 7px 10px 0; - border-right-color: $white; - } -} - -/** - * Top arrow in the dropdown in the mini pipeline graph - */ -.mini-pipeline-graph-dropdown-menu { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: -6px; - left: 50%; - transform: translate(-50%, 0); - border-width: 0 5px 6px; - - @include media-breakpoint-down(sm) { - left: 100%; - margin-left: -12px; - } - } - - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; - } - - &::after { - margin-top: 1px; - border-bottom-color: $white; - } - - /** - * Center dropdown menu in mini graph - */ - .dropdown &.dropdown-menu { - transform: translate(-80%, 0); - - @media (min-width: map-get($grid-breakpoints, md)) { - transform: translate(-50%, 0); - right: auto; - left: 50%; - } - } -} - -/** - * Terminal - */ -.terminal-icon { - margin-left: 3px; -} - -.terminal-container { - .content-block { - border-bottom: 0; - } - - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; - - > div { - min-height: 450px; - } - } -} - -.ci-header-container { - min-height: 55px; - - .text-center { - padding-top: 12px; - } } .pipelines-container .top-area .nav-controls > .btn:last-child { 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(); - } -} - -.codequality-report { - .media { - padding: $gl-padding; - } - - .media-body { - flex-direction: row; - } - - .report-block-container { - height: auto !important; - } -} - .progress-bar.bg-primary { background-color: $blue-500 !important; } @@ -1090,6 +105,10 @@ button.mini-pipeline-graph-dropdown-toggle { width: 8rem; } +.stage-rounded { + border-radius: 2rem; +} + .stage-left-rounded { border-radius: 2rem 0 0 2rem; } 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..938d8d34717 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -1,11 +1,3 @@ -.alert_holder { - margin: -16px; - - .alert-link { - font-weight: $gl-font-weight-normal; - } -} - .new_project, .edit-project, .import-project { @@ -67,38 +59,7 @@ } } -.classification-label { - background-color: $red-500; -} - -.toggle-wrapper { - margin-top: 5px; -} - -.project-feature-row > .toggle-wrapper { - margin: 10px 0; -} - -.project-visibility-setting, -.project-feature-settings { - border: 1px solid $border-color; - padding: 10px 32px; - - @include media-breakpoint-down(xs) { - padding: 10px 20px; - } -} - -.project-visibility-setting .request-access { - line-height: 2; -} - -.project-feature-settings { - background: $gray-lighter; - border-top: 0; - margin-bottom: 16px; -} - +// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components .project-repo-select { transition: background 2s ease-out; @@ -113,63 +74,31 @@ } } +// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components .project-feature-controls { - display: flex; - align-items: center; - margin: $gl-padding-8 0; max-width: 432px; - - .toggle-wrapper { - flex: 0; - margin-right: 10px; - } - - .select-wrapper { - flex: 1; - } } +// INFO Scoped to settings_panel component in app/assets/javascripts/pages/projects/shared/permissions/components .project-feature-setting-group { - padding-left: 32px; - .project-feature-controls { max-width: 400px; } - - @include media-breakpoint-down(xs) { - padding-left: 20px; - } } -.group-home-panel, .project-home-panel { - margin-top: $gl-padding; - margin-bottom: $gl-padding; - .home-panel-avatar { - width: $home-panel-title-row-height; - height: $home-panel-title-row-height; - flex-shrink: 0; flex-basis: $home-panel-title-row-height; } .home-panel-title { - font-size: 20px; - line-height: $gl-line-height-24; - font-weight: bold; - .icon { vertical-align: -1px; } .home-panel-topic-list { - font-size: $gl-font-size; - font-weight: $gl-font-weight-normal; - .icon { - position: relative; top: 3px; - margin-right: $gl-padding-4; } } } @@ -201,24 +130,6 @@ } } - .home-panel-metadata { - font-weight: normal; - font-size: 14px; - line-height: $gl-btn-line-height; - - .home-panel-license { - .btn { - line-height: 0; - border-width: 0; - } - } - - .access-request-link { - padding-left: $gl-padding-8; - border-left: 1px solid $gl-text-color-secondary; - } - } - .home-panel-description { @include media-breakpoint-up(md) { font-size: $gl-font-size-large; @@ -778,7 +689,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 +705,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/reports.scss b/app/assets/stylesheets/pages/reports.scss deleted file mode 100644 index 0c0605b0b3d..00000000000 --- a/app/assets/stylesheets/pages/reports.scss +++ /dev/null @@ -1,132 +0,0 @@ -.split-report-section { - border-bottom: 1px solid $gray-darker; - - .report-block-container { - max-height: 500px; - overflow: auto; - } - - .space-children, - .space-children > span { - display: flex; - align-self: center; - } - - .media { - align-items: center; - padding: 10px; - line-height: 20px; - - /* - This fixes the wrapping div of the icon in the report header. - Apparently the borderless status icons are half the size of the status icons with border. - This means we have to double the size of the wrapping div for borderless icons. - */ - .space-children:first-child { - width: 32px; - height: 32px; - align-items: center; - justify-content: center; - margin-right: 5px; - margin-left: 1px; - } - } - - .code-text { - width: 100%; - flex: 1; - } -} - -.mr-widget-grouped-section { - .report-block-container { - max-height: 170px; - overflow: auto; - } - - .report-block-list-issue-parent { - padding: $gl-padding-top $gl-padding; - border-top: 1px solid $border-color; - } -} - -.report-block-container { - border-top: 1px solid $border-color; - padding: $gl-padding - 2; - background-color: $gray-light; - - // Clean MR widget CSS - line-height: 20px; -} - -.report-block-list { - list-style: none; - padding: 0 1px; - margin: 0; -} - -.report-block-list-icon { - display: flex; - - &.failed svg { - color: $red-500; - } - - &.success svg { - color: $green-500; - } - - &.neutral svg { - color: $gray-500; - } - - .ci-status-icon { - svg { - width: 24px; - height: 24px; - } - } -} - -.report-block-list-issue { - display: flex; -} - -.is-dismissed .report-block-list-issue-description, -.is-dismissed .vulnerability-name-button { - text-decoration: line-through; -} - -.report-block-list-issue-description-text::after { - content: '\00a0'; -} - -.report-block-list-issue-description { - align-content: space-around; - align-items: flex-start; - flex-wrap: wrap; - display: flex; - align-self: center; -} - -.report-block { - .break-link { - word-wrap: break-word; - word-break: break-all; - } -} - -.report-block-issue-code { - width: 600px; -} - -.modal-security-report-dast { - .modal-dialog { - max-width: $modal-lg; - } - - // This is temporary till we get the new modals hooked up - &.modal-hide-footer .modal-footer { - display: none; - } -} diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 4b8e1da4867..a62e28a9b8a 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -198,11 +198,20 @@ input[type='checkbox']:hover { } } + .search-clear { + position: absolute; + right: 10px; + top: 9px; + padding: 0; + line-height: 0; + background: none; + border: 0; + } .search-icon { position: absolute; left: 10px; - top: 10px; + top: 9px; color: $gray-darkest; pointer-events: none; } @@ -247,14 +256,7 @@ input[type='checkbox']:hover { } .search-clear { - position: absolute; - right: 10px; - top: 9px; - padding: 0; color: $gray-darkest; - line-height: 0; - background: none; - border: 0; &:hover, &:focus { @@ -281,6 +283,10 @@ input[type='checkbox']:hover { } } +.ref-truncated { + @include str-truncated(10em); +} + // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling /* stylelint-disable property-no-vendor-prefix */ input[type='search']::-webkit-search-decoration, diff --git a/app/assets/stylesheets/pages/serverless.scss b/app/assets/stylesheets/pages/serverless.scss deleted file mode 100644 index a5b73492380..00000000000 --- a/app/assets/stylesheets/pages/serverless.scss +++ /dev/null @@ -1,3 +0,0 @@ -.url-text-field { - cursor: text; -} 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; - } - } -} diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss deleted file mode 100644 index ccf11058b5b..00000000000 --- a/app/assets/stylesheets/pages/wiki.scss +++ /dev/null @@ -1,157 +0,0 @@ -.title .edit-wiki-header { - width: 780px; - margin-left: auto; - margin-right: auto; - padding-right: 7px; -} - -.wiki-page-header { - position: relative; - - .wiki-breadcrumb { - border-bottom: 1px solid $white-normal; - padding: 11px 0; - } - - .wiki-page-title { - margin: 0; - font-size: 22px; - } - - .wiki-last-edit-by { - display: block; - color: $gl-text-color-secondary; - - strong { - color: $gl-text-color; - } - } - - .light { - font-weight: $gl-font-weight-normal; - color: $gl-text-color-secondary; - } - - .git-clone-holder { - .input-group-prepend, - .input-group-append { - background-color: transparent; - } - } - - button.sidebar-toggle { - position: absolute; - right: 0; - top: 11px; - display: block; - } - - &.has-sidebar-toggle .git-access-header { - padding-right: $sidebar-toggle-width; - } - - @include media-breakpoint-up(md) { - &.has-sidebar-toggle { - padding-right: 0; - } - - button.sidebar-toggle { - display: none; - } - } -} - -.wiki-git-access { - margin: $gl-padding 0; - - h3 { - font-size: 19px; - font-weight: $gl-font-weight-normal; - margin: $gl-padding 0; - } -} - -.right-sidebar.wiki-sidebar { - padding: 0; - - &.right-sidebar-collapsed { - display: none; - } - - .sidebar-container { - padding: $gl-padding 0; - padding-right: 100px; - height: 100%; - overflow-y: scroll; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - } - - .blocks-container { - padding: 0 $gl-padding; - } - - a { - color: $layout-link-gray; - - &:hover, - &.active { - text-decoration: none; - - span { - text-decoration: underline; - } - } - } - - .active > a { - color: $black; - } - - ul.wiki-pages, - ul.wiki-pages li { - list-style: none; - padding: 0; - margin: 0; - } - - ul.wiki-pages li { - margin: 5px 0 10px; - } - - ul.wiki-pages ul { - padding-left: 15px; - } - - .wiki-sidebar-header { - padding: 0 $gl-padding $gl-padding; - - .gutter-toggle { - margin-top: 0; - } - } -} - -ul.wiki-pages-list.content-list { - a { - color: $blue-600; - } - - ul { - list-style: none; - margin-left: 0; - padding-left: 15px; - - li { - padding: 5px 0; - } - } -} - -.empty-state-wiki .text-content { - max-width: 490px; // Widen to allow for the Confluence button -} - -.wiki-form .markdown-area { - max-height: none; -} |