diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles')
18 files changed, 1277 insertions, 93 deletions
diff --git a/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss b/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss new file mode 100644 index 00000000000..b0aaa48569a --- /dev/null +++ b/app/assets/stylesheets/page_bundles/admin/geo_nodes.scss @@ -0,0 +1,45 @@ +@import '../mixins_and_variables_and_functions'; + +.geo-node-header-grid-columns { + grid-template-columns: 1fr auto; + grid-gap: $gl-spacing-scale-5; + + @include media-breakpoint-up(md) { + grid-template-columns: 3fr 1fr; + } +} + +.geo-node-details-grid-columns { + grid-gap: $gl-spacing-scale-5; + + @include media-breakpoint-up(lg) { + grid-template-columns: 1fr 3fr; + } +} + +.geo-node-core-details-grid-columns { + grid-template-columns: 1fr 1fr; + grid-gap: $gl-spacing-scale-5; +} + +.geo-node-replication-details-grid-columns { + grid-template-columns: 1fr 1fr; + grid-gap: 1rem; + + @include media-breakpoint-up(md) { + grid-template-columns: 1fr 1fr 2fr 2fr; + } +} + +.geo-node-filter-grid-columns { + grid-template-columns: 1fr; + + @include media-breakpoint-up(md) { + grid-template-columns: 3fr 1fr; + } +} + +.geo-node-replication-counts-grid { + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 1rem; +} diff --git a/app/assets/stylesheets/page_bundles/admin/geo_replicable.scss b/app/assets/stylesheets/page_bundles/admin/geo_replicable.scss new file mode 100644 index 00000000000..691d4abd195 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/admin/geo_replicable.scss @@ -0,0 +1,18 @@ +@import '../mixins_and_variables_and_functions'; + +.geo-replicable-item-grid { + grid-template-columns: 8ch 1fr auto; + grid-gap: 1rem; +} + +.geo-replicable-filter-grid { + grid-template-columns: 1fr; + + @include media-breakpoint-up(md) { + grid-template-columns: 2fr 1fr; + } + + @include media-breakpoint-up(xl) { + grid-template-columns: 1fr 1fr; + } +} diff --git a/app/assets/stylesheets/page_bundles/cluster_agents.scss b/app/assets/stylesheets/page_bundles/cluster_agents.scss new file mode 100644 index 00000000000..d1fab55738f --- /dev/null +++ b/app/assets/stylesheets/page_bundles/cluster_agents.scss @@ -0,0 +1,13 @@ +@import 'mixins_and_variables_and_functions'; + +.agent-activity-list { + .system-note .timeline-entry-inner { + .timeline-icon { + @include gl-mt-1; + } + } + + .timeline-entry::before { + @include gl-mt-4; + } +} diff --git a/app/assets/stylesheets/page_bundles/clusters.scss b/app/assets/stylesheets/page_bundles/clusters.scss new file mode 100644 index 00000000000..a877ae72e31 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/clusters.scss @@ -0,0 +1,22 @@ +@import 'mixins_and_variables_and_functions'; + +.clusters-container { + @include media-breakpoint-down(xs) { + .nav-controls { + @include gl-w-full; + order: -1; + + .gl-new-dropdown, + .split-content-button { + @include gl-w-full; + } + } + } +} + +.cluster-card-item { + @include media-breakpoint-up(sm) { + @include gl-pt-2; + min-height: 372px; + } +} diff --git a/app/assets/stylesheets/page_bundles/graph_charts.scss b/app/assets/stylesheets/page_bundles/graph_charts.scss new file mode 100644 index 00000000000..37a75f92a7e --- /dev/null +++ b/app/assets/stylesheets/page_bundles/graph_charts.scss @@ -0,0 +1,27 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +.repo-charts { + .sub-header { + margin: 20px 0; + } + + .sub-header-block.border-top { + margin-top: 20px; + padding: 0; + border-top: 1px solid var(--border-color, $border-color); + border-bottom: 0; + } + + .commit-stats li { + font-size: 16px; + } + + .tree-ref-header { + margin-bottom: 20px; + + h4 { + margin: 0; + line-height: 36px; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index a4a82fdcef3..3951f72112f 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -970,9 +970,6 @@ $ide-commit-header-height: 48px; .ide-stage { .card-header { - display: flex; - cursor: pointer; - .ci-status-icon { display: flex; align-items: center; @@ -980,10 +977,6 @@ $ide-commit-header-height: 48px; } } -.ide-stage-collapse-icon { - margin: auto 0 auto auto; -} - .ide-job-header { min-height: 60px; padding: 0 $gl-padding; diff --git a/app/assets/stylesheets/page_bundles/incidents.scss b/app/assets/stylesheets/page_bundles/incidents.scss new file mode 100644 index 00000000000..de246fa14b9 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/incidents.scss @@ -0,0 +1,73 @@ +@import 'mixins_and_variables_and_functions'; + +.issuable-discussion.incident-timeline-events { + .main-notes-list::before { + content: none; + } + + .timeline-event-note { + p { + margin-bottom: 0; + font-size: 0.875rem; + } + } +} + +/** + * We have a very specific design proposal where we cannot + * use `vertical-line` mixin as it is and have to use + * custom styles, see https://gitlab.com/gitlab-org/gitlab/-/merge_requests/81284#note_904867444 + */ +.timeline-entry-vertical-line { + &::before, + &::after { + content: ''; + border-left: 2px solid $gray-50; + position: absolute; + left: 20px; + height: calc(100% + #{$gl-spacing-scale-5}); + top: -#{$gl-spacing-scale-5}; + } + + &:first-child::before { + content: none; + } + + &:first-child { + &::after { + top: $gl-spacing-scale-5; + height: calc(100% + #{$gl-spacing-scale-5}); + } + } + + &:last-child, + &.create-timeline-event { + &::before { + top: - #{$gl-spacing-scale-5} !important; // Override default positioning + @include gl-h-8; + } + + &::after { + content: none; + } + } +} + +.timeline-entry:not(:last-child) { + .timeline-event-border { + @include gl-pb-5; + @include gl-border-gray-50; + @include gl-border-1; + @include gl-border-b-solid; + } +} + +.timeline-group:last-child { + .timeline-entry:last-child, + .create-timeline-event { + .timeline-event-bottom-border { + @include gl-border-b; + @include gl-pt-5; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/issues_show.scss b/app/assets/stylesheets/page_bundles/issues_show.scss index 26d694f7421..bbdcf1ea0c6 100644 --- a/app/assets/stylesheets/page_bundles/issues_show.scss +++ b/app/assets/stylesheets/page_bundles/issues_show.scss @@ -1,5 +1,9 @@ @import 'mixins_and_variables_and_functions'; +$design-pin-diameter: 28px; +$design-pin-diameter-sm: 24px; +$t-gray-a-16-design-pin: rgba($black, 0.16); + .description { li { position: relative; @@ -23,6 +27,216 @@ } } +.design-card-header { + background: transparent; +} + +.design-checkbox { + position: absolute; + top: $gl-padding; + left: 30px; +} + +.layout-page.design-detail-layout { + max-height: 100vh; +} + +.design-detail { + background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity); + + .with-performance-bar & { + top: 35px; + } + + .comment-indicator { + border-radius: 50%; + } + + .comment-indicator, + .frame .design-note-pin { + &:active { + cursor: grabbing; + } + } +} + +.design-list-item { + height: 280px; + text-decoration: none; + + .icon-version-status { + position: absolute; + right: 10px; + top: 10px; + } + + .card-body { + height: 230px; + } +} + +// This is temporary class to be removed after feature flag removal: https://gitlab.com/gitlab-org/gitlab/-/issues/223197 +.design-list-item-new { + height: 210px; +} + +.design-note-pin { + display: flex; + height: $design-pin-diameter; + width: $design-pin-diameter; + box-sizing: content-box; + background-color: var(--purple-500, $purple-500); + color: var(--white, $white); + font-weight: $gl-font-weight-bold; + border-radius: 50%; + z-index: 1; + padding: 0; + border: 0; + + &.draft { + background-color: var(--orange-500, $orange-500); + } + + &.resolved { + background-color: var(--gray-500, $gray-500); + } + + &.on-image { + box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24; + border: var(--white, $white) 2px solid; + will-change: transform, box-shadow, opacity; + // NOTE: verbose transition property required for Safari + transition: transform $general-hover-transition-duration linear, box-shadow $general-hover-transition-duration linear, opacity $general-hover-transition-duration linear; + transform-origin: 0 0; + transform: translate(-50%, -50%); + + &:hover { + transform: scale(1.2) translate(-50%, -50%); + } + + &:active { + box-shadow: 0 0 4px $t-gray-a-16-design-pin, 0 4px 12px $t-gray-a-16-design-pin; + } + + &.inactive { + @include gl-opacity-5; + + &:hover { + @include gl-opacity-10; + } + } + } + + &.small { + position: absolute; + border: 1px solid var(--white, $white); + height: $design-pin-diameter-sm; + width: $design-pin-diameter-sm; + } + + &.user-avatar { + top: 25px; + right: 8px; + } +} + +.design-scaler-wrapper { + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.image-notes { + overflow-y: scroll; + padding: $gl-padding; + padding-top: 50px; + background-color: var(--white, $white); + flex-shrink: 0; + min-width: 400px; + flex-basis: 28%; + + .link-inherit-color { + &:hover, + &:active, + &:focus { + color: inherit; + text-decoration: none; + } + } + + .toggle-comments { + line-height: 20px; + border-top: 1px solid var(--border-color, $border-color); + + &.expanded { + border-bottom: 1px solid var(--border-color, $border-color); + } + + .toggle-comments-button:focus { + text-decoration: none; + color: var(--blue-600, $blue-600); + } + } + + .design-note-pin { + margin-left: $gl-padding; + } + + .design-discussion { + margin: $gl-padding 0; + + &::before { + content: ''; + border-left: 1px solid var(--gray-100, $gray-100); + position: absolute; + left: 28px; + top: -17px; + height: 17px; + } + + .design-note { + padding: $gl-padding; + list-style: none; + transition: background $gl-transition-duration-medium $general-hover-transition-curve; + border-top-left-radius: $border-radius-default; // same border radius used by .bordered-box + border-top-right-radius: $border-radius-default; + + a { + color: inherit; + } + + .note-text a { + color: var(--blue-600, $blue-600); + } + } + + .reply-wrapper { + padding: $gl-padding; + } + } + + .reply-wrapper { + border-top: 1px solid var(--border-color, $border-color); + } + + .new-discussion-disclaimer { + line-height: 20px; + } +} + +@media (max-width: map-get($grid-breakpoints, lg)) { + .design-detail { + overflow-y: scroll; + } + + .image-notes { + overflow-y: auto; + min-width: 100%; + flex-grow: 1; + flex-basis: auto; + } +} + .is-ghost { opacity: 0.3; pointer-events: none; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss index 463c8f74342..b2fbce7cb4b 100644 --- a/app/assets/stylesheets/page_bundles/merge_requests.scss +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -9,6 +9,124 @@ $tabs-holder-z-index: 250; min-width: 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: var(--white, $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-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: var(--gray-400, $gray-400); + font-style: italic; + } + + .diff-changed-file-path { + color: var(--gray-400, $gray-400); + } + + .diff-changed-stats { + margin-left: auto; + white-space: nowrap; + } +} + .diff-files-holder { flex: 1; min-width: 0; @@ -19,6 +137,111 @@ $tabs-holder-z-index: 250; } } +.diff-grid { + .diff-td { + // By default min-width is auto with 1fr which causes some overflow problems + // https://gitlab.com/gitlab-org/gitlab/-/issues/296222 + min-width: 0; + } + + .diff-grid-row { + display: grid; + grid-template-columns: 1fr 1fr; + + &.diff-grid-row-full { + grid-template-columns: 1fr; + } + } + + .diff-grid-left, + .diff-grid-right { + display: grid; + // Zero width column is a placeholder for the EE inline code quality diff + // see ee/.../diffs.scss for more details + grid-template-columns: 50px 8px 0 1fr; + } + + .diff-grid-2-col { + grid-template-columns: 100px 1fr !important; + + &.parallel { + grid-template-columns: 50px 1fr !important; + } + } + + .diff-grid-comments { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .diff-grid-drafts { + display: grid; + grid-template-columns: 1fr 1fr; + + .content + .content { + @include gl-border-t; + } + } + + &.inline-diff-view { + .diff-grid-comments { + display: grid; + grid-template-columns: 1fr; + } + + .diff-grid-drafts { + display: grid; + grid-template-columns: 1fr; + } + + .diff-grid-row { + grid-template-columns: 1fr; + } + + .diff-grid-left, + .diff-grid-right { + // Zero width column is a placeholder for the EE inline code quality diff + // see ee/../diffs.scss for more details + grid-template-columns: 50px 50px 8px 0 1fr; + } + } +} + +.diff-line-expand-button { + &:hover, + &:focus { + background-color: var(--gray-200, $gray-200); + } +} + +.diff-table.code .diff-tr.line_holder .diff-td.line_content.parallel { + width: unset; +} + +.diff-tr { + .timeline-discussion-body { + clear: left; + + .note-body { + padding: 0 0 $gl-padding-8; + } + } + + .timeline-entry img.avatar { + margin-top: -2px; + margin-right: $gl-padding-8; + } + + // tiny adjustment to vertical align with the note header text + .discussion-collapsible { + margin-left: 1rem; + + .timeline-icon { + padding-top: 2px; + } + } +} + .with-system-header { --system-header-height: #{$system-header-height}; } @@ -497,10 +720,6 @@ $tabs-holder-z-index: 250; } @include media-breakpoint-down(xs) { - p { - font-size: 13px; - } - .btn-grouped { float: none; margin-right: 0; @@ -661,10 +880,10 @@ $tabs-holder-z-index: 250; &:not(:last-child)::before { content: ''; - border-left: 1px solid var(--gray-100, $gray-100); + border-left: 2px solid var(--gray-10, $gray-10); position: absolute; - left: 28px; bottom: -17px; + left: calc(1rem - 1px); height: 16px; } } @@ -677,7 +896,6 @@ $tabs-holder-z-index: 250; display: flex; align-items: center; flex-wrap: wrap; - padding: 16px; z-index: 199; white-space: nowrap; @@ -833,6 +1051,12 @@ $tabs-holder-z-index: 250; .detail-page-header-actions { .gl-toggle { @include gl-ml-auto; + @include gl-rounded-pill; + @include gl-w-9; + + &.is-checked:hover { + background-color: $blue-500; + } } } @@ -845,3 +1069,88 @@ $tabs-holder-z-index: 250; @include gl-font-weight-normal; } } + +.dropdown-menu li button.gl-toggle:not(.is-checked) { + background: $gray-400; +} + +.mr-widget-content-row:first-child { + border-top: 0; +} + +.memory-graph-container { + background: var(--white, $white); + border: 1px solid var(--gray-100, $gray-100); +} + +.review-bar-component { + position: fixed; + bottom: 0; + left: 0; + z-index: $zindex-dropdown-menu; + display: flex; + align-items: center; + width: 100%; + height: $toggle-sidebar-height; + padding-left: $contextual-sidebar-width; + padding-right: $gutter_collapsed_width; + background: var(--white, $white); + border-top: 1px solid var(--border-color, $border-color); + transition: padding $gl-transition-duration-medium; + + .page-with-icon-sidebar & { + padding-left: $contextual-sidebar-collapsed-width; + } + + .right-sidebar-expanded & { + padding-right: $gutter_width; + } + + @media (max-width: map-get($grid-breakpoints, sm)-1) { + padding-left: 0; + padding-right: 0; + } + + .dropdown { + margin-left: $grid-size; + } +} + +.review-bar-content { + max-width: $limited-layout-width; + padding: 0 $gl-padding; + width: 100%; + margin: 0 auto; +} + +.review-preview-item-header { + display: flex; + align-items: center; + width: 100%; + margin-bottom: 4px; + + > .bold { + display: flex; + min-width: 0; + line-height: 16px; + } +} + +.review-preview-item-footer { + display: flex; + align-items: center; + margin-top: 4px; +} + +.review-preview-item-content { + width: 100%; + + p { + display: block; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + margin-bottom: 0; + } +} diff --git a/app/assets/stylesheets/page_bundles/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index c401f1a4902..63bcb83e747 100644 --- a/app/assets/stylesheets/page_bundles/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -1,4 +1,4 @@ -@import 'mixins_and_variables_and_functions'; +@import 'page_bundles/mixins_and_variables_and_functions'; $status-box-line-height: 26px; @@ -40,39 +40,6 @@ $status-box-line-height: 26px; } } } - - .card-header { - line-height: $line-height-base; - padding: 14px 16px; - display: flex; - justify-content: space-between; - - .title { - flex: 1; - flex-grow: 2; - } - - .issuable-count-weight { - white-space: nowrap; - - .counter, - .weight { - color: var(--gray-500, $gray-500); - font-weight: $gl-font-weight-bold; - } - } - - &.text-white { - .issuable-count-weight svg { - fill: $white; - } - - .issuable-count-weight .counter, - .weight { - color: var(--white, $white); - } - } - } } .milestone-sidebar { diff --git a/app/assets/stylesheets/page_bundles/operations.scss b/app/assets/stylesheets/page_bundles/operations.scss new file mode 100644 index 00000000000..497cb63033c --- /dev/null +++ b/app/assets/stylesheets/page_bundles/operations.scss @@ -0,0 +1,80 @@ +@import 'mixins_and_variables_and_functions'; + +.dashboard-cards { + margin-right: -$gl-padding-8; + margin-left: -$gl-padding-8; +} + +.dashboard-card { + @include gl-cursor-grab; + + &-header { + &-warning { + background-color: var(--orange-100, $orange-100); + } + } + + &-body { + min-height: 120px; + + &-warning { + background-color: var(--orange-50, $orange-50); + } + + &-failed { + background-color: var(--red-50, $red-50); + } + } + + &-icon { + color: var(--gray-300, $gray-300); + } + + &-footer { + border-radius: $gl-padding; + height: $gl-padding-32; + + &-arrow { + color: var(--gray-200, $gray-200); + } + + &-downstream { + margin-right: -$gl-padding-8; + } + + &-extra { + background-color: var(--gray-200, $gray-200); + font-size: 10px; + line-height: $gl-line-height; + width: $gl-padding; + } + } + + &-header { + &-failed { + background-color: var(--red-100, $red-100); + } + } + + &-skeleton-info { + border-radius: $gl-padding; + height: $gl-padding; + overflow: hidden; + + &::after { + content: ' '; + display: block; + animation: blockTextShine 1s linear infinite forwards; + background-repeat: no-repeat; + background-size: cover; + background-image: linear-gradient(to right, + var(--gray-50, $gray-50) 0%, + var(--gray-10, $gray-10) 20%, + var(--gray-50, $gray-50) 40%, + var(--gray-50, $gray-50) 100%); + border-radius: $gl-padding; + height: $gl-padding; + margin-top: -$gl-padding-8; + } + } +} diff --git a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss index 0c73bece035..af2dac7739e 100644 --- a/app/assets/stylesheets/page_bundles/pipeline_schedules.scss +++ b/app/assets/stylesheets/page_bundles/pipeline_schedules.scss @@ -1,60 +1,82 @@ @import 'mixins_and_variables_and_functions'; -.pipeline-schedule-form { - .gl-field-error { - margin: 10px 0 0; - } +.ci-variable-list { + margin-left: 0; + margin-bottom: 0; + padding-left: 0; + list-style: none; + clear: both; } -.interval-pattern-form-group { - label { - margin-right: 10px; - font-weight: $gl-font-weight-normal; +.ci-variable-row { + display: flex; + align-items: flex-start; - &[for='custom'] { - margin-right: 0; - } + @include media-breakpoint-down(xs) { + align-items: flex-end; } - .cron-interval-input-wrapper { - padding-left: 0; - } + &:not(:last-child) { + margin-bottom: $gl-btn-padding; - .cron-interval-input { - margin: 10px 10px 0 0; + @include media-breakpoint-down(xs) { + margin-bottom: 3 * $gl-btn-padding; + } } -} -.pipeline-schedule-table-row { - .branch-name-cell { - max-width: 300px; - } + &:last-child { + .ci-variable-body-item:last-child { + margin-right: $ci-variable-remove-button-width; - a { - color: var(--gl-text-color, $gl-text-color); - } + @include media-breakpoint-down(xs) { + margin-right: 0; + } + } + + .ci-variable-row-remove-button { + display: none; + } - svg { - vertical-align: middle; + @include media-breakpoint-down(xs) { + .ci-variable-row-body { + margin-right: $ci-variable-remove-button-width; + } + } } } -.pipeline-schedules-user-callout { - .bordered-box.content-block { - border: 1px solid var(--border-color, $border-color); - background-color: transparent; +.ci-variable-row-body { + display: flex; + align-items: flex-start; + width: 100%; + padding-bottom: $gl-padding; + + @include media-breakpoint-down(xs) { + display: block; } } -.cron-preset-radio-input { - display: inline-block; +.ci-variable-body-item { + flex: 1; - @include media-breakpoint-down(md) { - display: block; - margin: 0 0 5px 5px; + &:not(:last-child) { + margin-right: $gl-btn-padding; + + @include media-breakpoint-down(xs) { + margin-right: 0; + margin-bottom: $gl-btn-padding; + } } +} - input { - margin-right: 3px; +.pipeline-schedule-form { + .gl-field-error { + margin: 10px 0 0; + } +} + +.pipeline-schedule-table-row { + a { + color: var(--gl-text-color, $gl-text-color); } } diff --git a/app/assets/stylesheets/page_bundles/profile.scss b/app/assets/stylesheets/page_bundles/profile.scss index 59b8823c113..ac1e9fb024b 100644 --- a/app/assets/stylesheets/page_bundles/profile.scss +++ b/app/assets/stylesheets/page_bundles/profile.scss @@ -1,4 +1,33 @@ @import 'mixins_and_variables_and_functions'; +@import 'framework/buttons'; + +.edit-user { + .emoji-menu-toggle-button { + @include emoji-menu-toggle-button; + } + + @include media-breakpoint-down(sm) { + .input-md, + .input-lg { + max-width: 100%; + } + } +} + +.modal-profile-crop { + .modal-dialog { + width: 380px; + + @include media-breakpoint-down(xs) { + width: auto; + } + } + + .profile-crop-image-container { + height: 300px; + margin: 0 auto; + } +} .calendar-block { padding-left: 0; @@ -210,3 +239,32 @@ .twitter-icon { color: $twitter; } + +.key-created-at { + line-height: 42px; +} + +.key-list-item { + .key-list-item-info { + @include media-breakpoint-up(sm) { + float: left; + } + } +} + +.ssh-keys-list { + .last-used-at, + .expires, + .key-created-at { + line-height: 32px; + } +} + +.subkeys-list { + @include basic-list; + + li { + padding: 3px 0; + border: 0; + } +} diff --git a/app/assets/stylesheets/page_bundles/project.scss b/app/assets/stylesheets/page_bundles/project.scss index eec5ebdb383..68bf2fa0f82 100644 --- a/app/assets/stylesheets/page_bundles/project.scss +++ b/app/assets/stylesheets/page_bundles/project.scss @@ -191,12 +191,4 @@ h5 { color: var(--gl-text-color, $gl-text-color); } - - .light-well { - border-radius: 2px; - - color: var(--gray-600, $well-light-text-color); - font-size: 13px; - line-height: 1.6em; - } } diff --git a/app/assets/stylesheets/page_bundles/prometheus.scss b/app/assets/stylesheets/page_bundles/prometheus.scss new file mode 100644 index 00000000000..702c0e4dd72 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/prometheus.scss @@ -0,0 +1,113 @@ +@import 'mixins_and_variables_and_functions'; + +.date-time-picker { + .date-time-picker-menu { + width: 400px; + } +} + +.prometheus-graphs { + .dropdown-buttons { + > div { + margin-left: auto; + } + } + + .col-form-label { + line-height: 1; + padding-top: 0; + } + + .form-group { + margin-bottom: map-get($spacing-scale, 3); + } + + .variables-section { + input { + @include media-breakpoint-up(sm) { + width: 160px; + } + } + } + + .links-section { + .gl-hover-text-blue-600-children:hover { + * { + @include gl-text-blue-600; + } + } + } +} + +.draggable { + &.draggable-enabled { + .draggable-panel { + border: $gray-100 1px solid; + border-radius: $border-radius-default; + margin: -1px; + cursor: grab; + } + + .prometheus-graph { + // Make dragging easier by disabling use of chart + pointer-events: none; + } + } + + &.sortable-chosen .draggable-panel { + background: $white; + box-shadow: 0 0 4px $gray-300; + } + + .draggable-remove { + z-index: 1; + + .draggable-remove-link { + cursor: pointer; + color: $gray-400; + background-color: $white; + } + } +} + +.prometheus-graphs-header { + .monitor-environment-dropdown-menu, + .monitor-dashboard-dropdown-menu { + &.show { + display: flex; + flex-direction: column; + overflow: hidden; + } + + .no-matches-message { + padding: $gl-padding-8 $gl-padding-12; + } + } + + .show-last-dropdown { + // same as in .dropdown-menu-toggle + // see app/assets/stylesheets/framework/dropdowns.scss + width: 160px; + } +} + +.prometheus-panel { + margin-top: 20px; +} + +.prometheus-graph-group { + display: flex; + flex-wrap: wrap; +} + +.prometheus-graph { + padding: $gl-padding-8; +} + +.prometheus-panel-builder { + .preview-date-time-picker { + // same as in .dropdown-menu-toggle + // see app/assets/stylesheets/framework/dropdowns.scss + width: 160px; + } +} diff --git a/app/assets/stylesheets/page_bundles/releases.scss b/app/assets/stylesheets/page_bundles/releases.scss new file mode 100644 index 00000000000..24ffbf9b90c --- /dev/null +++ b/app/assets/stylesheets/page_bundles/releases.scss @@ -0,0 +1,12 @@ +@import 'mixins_and_variables_and_functions'; + +.release-block { + transition: background-color 1s linear; +} + +.release-block-milestone-info { + .milestone-progress-bar-container { + width: 300px; + min-height: 46px; + } +} diff --git a/app/assets/stylesheets/page_bundles/tree.scss b/app/assets/stylesheets/page_bundles/tree.scss new file mode 100644 index 00000000000..58e55e11f7e --- /dev/null +++ b/app/assets/stylesheets/page_bundles/tree.scss @@ -0,0 +1,207 @@ +@import 'mixins_and_variables_and_functions'; + +.project-last-commit { + min-height: 4.75rem; +} + +.tree-holder { + .nav-block { + margin: 16px 0; + + .tree-ref-holder { + margin-right: 15px; + } + + @include media-breakpoint-up(sm) { + display: flex; + + .tree-ref-container { + flex: 1; + } + + .tree-controls { + text-align: right; + + .control { + float: left; + margin-left: 8px; + } + } + + .tree-ref-holder { + float: left; + } + + .tree-ref-target-holder { + display: inline-block; + } + + .repo-breadcrumb { + li:last-of-type { + position: relative; + } + } + } + } + + @include media-breakpoint-down(xs) { + .tree-ref-container { + justify-content: space-between; + } + + .repo-breadcrumb { + position: relative; + + .dropdown-menu { + left: inherit; + right: 0; + } + } + + .add-to-tree-dropdown { + position: absolute; + left: 0; + right: 0; + } + + .tree-controls { + margin-bottom: 10px; + + .btn:not(.dropdown-toggle-split), + .dropdown, + .btn-group { + width: 100%; + } + + .btn { + margin-top: 10px; + } + } + } + + .file-finder { + max-width: 500px; + width: 100%; + + .file-finder-input { + width: 95%; + display: inline-block; + } + } + + .add-to-tree { + vertical-align: top; + padding: 8px; + + svg { + top: 0; + } + } + + table.tree-table { + margin-bottom: 0; + + tr { + border-bottom: 1px solid var(--gray-50, $gray-50); + border-top: 1px solid var(--gray-50, $gray-50); + + &:last-of-type { + border-bottom-color: transparent; + } + + td, + th { + line-height: 21px; + } + + th { + border: 0; + } + + td { + border-color: var(--border-color, $border-color); + } + + &:hover:not(.tree-truncated-warning) { + td { + background-color: var(--blue-50, $blue-50); + background-clip: padding-box; + border-top: 1px solid var(--blue-200, $blue-200); + border-bottom: 1px solid var(--blue-200, $blue-200); + cursor: pointer; + } + } + + &.selected { + td { + background: var(--gray-50, $gray-50); + border-top: 1px solid var(--border-color, $border-color); + border-bottom: 1px solid var(--border-color, $border-color); + } + } + } + } + + .tree-item { + .link-container { + padding: 0; + + a { + padding: 10px $gl-padding; + display: block; + } + } + + .tree-item-file-name { + max-width: 320px; + vertical-align: middle; + + i, + a { + color: var(--gl-text-color, $gl-text-color); + } + + img { + position: relative; + top: -1px; + } + } + + .tree-item-file-external-link { + margin-right: 4px; + + span { + text-decoration: inherit; + } + } + } + + .tree-truncated-warning { + color: var(--orange-600, $orange-600); + background-color: var(--orange-50, $orange-50); + } + + .tree-time-ago { + min-width: 135px; + } + + .tree-commit { + max-width: 320px; + + .tree-commit-link { + &:hover { + text-decoration: underline; + } + } + } +} + +.blob-commit-info { + list-style: none; + margin: 0; + padding: 0; +} + +.blob-content-holder { + margin-top: $gl-padding; +} diff --git a/app/assets/stylesheets/page_bundles/work_items.scss b/app/assets/stylesheets/page_bundles/work_items.scss index d0fc011dde7..820a1a0b53e 100644 --- a/app/assets/stylesheets/page_bundles/work_items.scss +++ b/app/assets/stylesheets/page_bundles/work_items.scss @@ -63,3 +63,22 @@ display: none; } } + +.work-item-dropdown { + .gl-dropdown-toggle { + background: none !important; + + &:hover, + &:focus { + box-shadow: inset 0 0 0 $gl-border-size-1 var(--gray-darkest, $gray-darkest) !important; + } + + &.is-not-focused:not(:hover, :focus) { + box-shadow: none; + + .gl-button-icon { + display: none; + } + } + } +} |