diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
5 files changed, 1234 insertions, 3 deletions
diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 1e239877428..93cb9be4a8f 100644 --- a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss +++ b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss @@ -6,9 +6,10 @@ $bs-input-focus-box-shadow: rgba(0, 123, 255, 0.25); a:not(.btn), - .btn-link:hover, - .btn-link:focus, - .btn-link:active { + .gl-button.btn-link, + .gl-button.btn-link:hover, + .gl-button.btn-link:focus, + .gl-button.btn-link:active { color: var(--ide-link-color, $blue-600); } diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss new file mode 100644 index 00000000000..ffa034a2495 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -0,0 +1,613 @@ +@import 'mixins_and_variables_and_functions'; + +.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 { + @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/page_bundles/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss new file mode 100644 index 00000000000..3a5e2e4159d --- /dev/null +++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss @@ -0,0 +1,355 @@ +@import 'mixins_and_variables_and_functions'; + +#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: var(--gray-500, $gray-500); + 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: var(--blue-50, $blue-50); + border-color: var(--blue-300, $blue-300); + box-shadow: inset 4px 0 0 0 var(--blue-500, $blue-500); + } + + &:hover:not(.active) { + background-color: var(--gray-10, $gray-10); + box-shadow: inset 2px 0 0 0 var(--border-color, $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: var(--gray-500, $gray-500); + } + } + } + + .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: var(--gray-500, $gray-500); + } + } + + .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 var(--gray-50, $gray-50); + + &: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: var(--gl-text-color, $gl-text-color); + } + } + } + + .item-time { + width: 25%; + text-align: right; + } + + .total-time { + font-size: $cycle-analytics-big-font; + color: var(--gl-text-color, $gl-text-color); + + span { + color: var(--gl-text-color, $gl-text-color); + font-size: $gl-font-size; + } + } + + .issue-date, + .build-date { + color: var(--gl-text-color, $gl-text-color); + } + + .mr-link, + .issue-link, + .commit-author-link, + .issue-author-link { + color: var(--gl-text-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: var(--gl-text-color, $gl-text-color); + } + + .pipeline-id { + color: var(--gl-text-color, $gl-text-color); + padding: 0 3px 0 0; + } + + .ref-name { + color: var(--gray-900, $gray-900); + display: inline-block; + max-width: 180px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + line-height: 1.3; + vertical-align: top; + } + + .commit-sha { + color: var(--blue-600, $blue-600); + line-height: 1.3; + vertical-align: top; + font-weight: $gl-font-weight-normal; + } + + .fa { + color: var(--gray-500, $gray-500); + font-size: $code-font-size; + } + } + } + + .empty-stage, + .no-access-stage { + text-align: center; + width: 75%; + margin: 0 auto; + padding-top: 130px; + color: var(--gray-500, $gray-500); + + h4 { + color: var(--gl-text-color, $gl-text-color); + } + } + + .empty-stage { + .icon-no-data { + height: 36px; + width: 78px; + display: inline-block; + margin-bottom: 20px; + } + } + + .no-access-stage { + .icon-lock { + height: 36px; + width: 78px; + display: inline-block; + margin-bottom: 20px; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/issues.scss b/app/assets/stylesheets/page_bundles/issues.scss new file mode 100644 index 00000000000..705583c74ae --- /dev/null +++ b/app/assets/stylesheets/page_bundles/issues.scss @@ -0,0 +1,8 @@ +.user-can-drag { + cursor: grab; +} + +.is-ghost { + opacity: 0.3; + pointer-events: none; +} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss new file mode 100644 index 00000000000..c1d7d86e3f9 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -0,0 +1,254 @@ +@import 'mixins_and_variables_and_functions'; + +$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; + } +} |