diff options
Diffstat (limited to 'app/assets/stylesheets/pages')
-rw-r--r-- | app/assets/stylesheets/pages/alert_management/details.scss | 33 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/alert_management/list.scss | 93 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/boards.scss | 29 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/experience_level.scss | 29 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/groups.scss | 32 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issues.scss | 66 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/labels.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/login.scss | 13 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/note_form.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/notes.scss | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 5 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/profiles/preferences.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/projects.scss | 2 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/prometheus.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/storage_quota.scss | 17 |
17 files changed, 271 insertions, 91 deletions
diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss index 89219e41644..591a26e5941 100644 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ b/app/assets/stylesheets/pages/alert_management/details.scss @@ -35,8 +35,39 @@ } @include media-breakpoint-down(xs) { - .alert-details-create-issue-button { + .alert-details-issue-button { width: 100%; } } + + .toggle-sidebar-mobile-button { + right: 0; + } + + .dropdown-menu-toggle { + &:hover { + background-color: $white; + } + } + + .assignee-dropdown-item { + .dropdown-item { + display: flex; + align-items: center; + + &::before { + top: 50% !important; + } + + &.is-active { + &:last-child { + border-bottom: 1px solid $gray-200; + } + } + } + } + + .note-header-info { + margin-top: 1px; + } } diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss index dc181342def..c1ea9b7604a 100644 --- a/app/assets/stylesheets/pages/alert_management/list.scss +++ b/app/assets/stylesheets/pages/alert_management/list.scss @@ -1,22 +1,4 @@ .alert-management-list { - // consider adding these stateful variants to @gitlab-ui - // https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1178 - .hover-bg-blue-50:hover { - background-color: $blue-50; - } - - .hover-gl-cursor-pointer:hover { - cursor: pointer; - } - - .hover-gl-border-b-solid:hover { - @include gl-border-b-solid; - } - - .hover-gl-border-blue-200:hover { - border-color: $blue-200; - } - // these styles need to be deleted once GlTable component looks in GitLab same as in @gitlab/ui table { color: $gray-700; @@ -26,25 +8,52 @@ outline: none; } + > :not([aria-sort='none']).b-table-sort-icon-left:hover::before { + content: '' !important; + } + td, th { - @include gl-p-5; - border: 0; // Remove cell border styling so that we can set border styling per row - - &.event-count { - @include gl-pr-9; - } + // TODO: There is no gl-pl-9 utlity for this padding, to be done and then removed. + padding-left: 1.25rem; + @include gl-py-5; + @include gl-outline-none; + @include gl-relative; } th { background-color: transparent; font-weight: $gl-font-weight-bold; color: $gl-gray-600; + + &:hover::before { + left: 3%; + top: 34%; + @include gl-absolute; + content: url("data:image/svg+xml,%3Csvg \ + xmlns='http://www.w3.org/2000/svg' \ + width='14' height='14' viewBox='0 0 16 \ + 16'%3E%3Cpath fill='%23BABABA' fill-rule='evenodd' \ + d='M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 \ + C3.902375,11.3166 3.902375,10.6834 \ + 4.292875,10.2929 C4.683375,9.90237 \ + 5.316575,9.90237 5.707075,10.2929 \ + L6.999975,11.5858 L6.999975,2 C6.999975,1.44771 \ + 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \ + 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 \ + C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929 \ + C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 \ + Z'/%3E%3C/svg%3E%0A"); + } } + } - &:last-child { - td { - @include gl-border-0; + @include media-breakpoint-up(md) { + tr { + &:last-child { + td { + @include gl-border-0; + } } } } @@ -52,21 +61,31 @@ @include media-breakpoint-down(sm) { .alert-management-table { - .table-col { - min-height: 68px; + tr { + border-top: 0; - &:last-child { - background-color: $gray-10; + .table-col { + min-height: 68px; - &::before { - content: none !important; - } + &:last-child { + background-color: $gray-10; + + &::before { + content: none !important; + } - div { - width: 100% !important; - padding: 0 !important; + div { + width: 100% !important; + padding: 0 !important; + } } } + + &:hover { + background-color: $white; + border-color: $white; + border-bottom-style: none; + } } } } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index d755170fe1f..3e680c59910 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -84,17 +84,22 @@ .board-title-caret { cursor: pointer; border-radius: $border-radius-default; - padding: 4px; + line-height: $gl-spacing-scale-5; + height: $gl-spacing-scale-5; + + &.btn svg { + top: 0; + } &:hover { - background-color: $gray-dark; + background-color: $gray-50; transition: background-color 0.1s linear; } } &:not(.is-collapsed) { .board-title-caret { - margin: 0 $gl-padding-4 0 -10px; + margin-right: $gl-padding-4; } } @@ -155,7 +160,7 @@ .board-inner { font-size: $issue-boards-font-size; background: $gray-light; - border: 1px solid $border-color; + border: 1px solid $gray-100; } .board-header { @@ -186,8 +191,8 @@ .board-title { align-items: center; font-size: 1em; - border-bottom: 1px solid $border-color; - padding: $gl-padding-8 $gl-padding; + border-bottom: 1px solid $gray-100; + padding: $gl-padding-8; .js-max-issue-size::before { content: '/'; @@ -199,13 +204,13 @@ } .board-delete { - margin-right: 10px; color: $gray-darkest; background-color: transparent; outline: 0; &:hover { color: $blue-600; + box-shadow: none; } } @@ -246,7 +251,7 @@ .board-card { background: $white; - border: 1px solid $gray-200; + border: 1px solid $gray-100; box-shadow: 0 1px 2px $issue-boards-card-shadow; line-height: $gl-padding; list-style: none; @@ -541,7 +546,8 @@ cursor: help; } -.board-labels-toggle-wrapper { +.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 @@ -572,3 +578,8 @@ top: 0; } } + +.board-epics-swimlanes { + overflow-x: auto; + min-height: 600px; +} diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index ddd1a373e2a..98d74a9aaa2 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -446,7 +446,7 @@ table.code { vertical-align: top; span { - white-space: pre-wrap; + white-space: break-spaces; &.context-cell { display: inline-block; diff --git a/app/assets/stylesheets/pages/experience_level.scss b/app/assets/stylesheets/pages/experience_level.scss new file mode 100644 index 00000000000..e57ad6321a5 --- /dev/null +++ b/app/assets/stylesheets/pages/experience_level.scss @@ -0,0 +1,29 @@ +.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/groups.scss b/app/assets/stylesheets/pages/groups.scss index beb0ea27de0..c309c8d157a 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -14,17 +14,12 @@ flex-direction: column; margin: 0; - .group-row-contents .controls > .btn:last-child { - margin: 0; - } - li { .title { font-weight: 600; } a { - color: $gray-900; text-decoration: none; &:hover { @@ -42,8 +37,6 @@ } .group-row { - @include basic-list-stats; - .description p { margin-bottom: 0; color: $gl-text-color-secondary; @@ -56,6 +49,12 @@ } } +.save-group-loader { + margin-top: $gl-padding-50; + margin-bottom: $gl-padding-50; + color: $gl-gray-700; +} + .group-nav-container .nav-controls { .group-filter-form { flex: 1 1 auto; @@ -454,29 +453,10 @@ table.pipeline-project-metrics tr td { min-width: 30px; } - > span:last-child { - margin-right: 0; - } - .stat-value { margin: 2px 0 0 5px; } } - - .controls { - flex-basis: 90px; - - > .btn { - margin: 0 $btn-side-margin 0 0; - color: $gl-text-color-secondary; - } - } - - .metadata { - @include media-breakpoint-up(md) { - flex-basis: 240px; - } - } } .project-row-contents .stats { diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index b241d0a2bdc..b1e849143b0 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -396,7 +396,7 @@ overflow: hidden; &:hover { - background-color: $sidebar-block-hover-color; + background-color: $gray-200; } &.issuable-sidebar-header { @@ -754,7 +754,8 @@ margin-right: 10px; min-width: 0; - .issue-weight-icon { + .issue-weight-icon, + .issue-estimate-icon { vertical-align: sub; } } diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 0dd25ec5360..0c349ab73a3 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -304,6 +304,72 @@ ul.related-merge-requests > li { } } +.issue-sticky-header { + @include gl-left-0; + @include gl-w-full; + top: $header-height; + + // collapsed right sidebar + @include media-breakpoint-up(sm) { + width: calc(100% - #{$gutter-collapsed-width}); + } + + .issue-sticky-header-text { + max-width: $limited-layout-width; + } +} + +.with-performance-bar .issue-sticky-header { + top: $header-height + $performance-bar-height; +} + +@include media-breakpoint-up(md) { + // collapsed left sidebar + collapsed right sidebar + .issue-sticky-header { + left: $contextual-sidebar-collapsed-width; + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); + } + + // collapsed left sidebar + expanded right sidebar + .right-sidebar-expanded .issue-sticky-header { + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); + } +} + +@include media-breakpoint-up(xl) { + // expanded left sidebar + collapsed right sidebar + .issue-sticky-header { + left: $contextual-sidebar-width; + width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-collapsed-width}); + } + + // collapsed left sidebar + collapsed right sidebar + .page-with-icon-sidebar .issue-sticky-header { + left: $contextual-sidebar-collapsed-width; + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-collapsed-width}); + } + + // expanded left sidebar + expanded right sidebar + .right-sidebar-expanded .issue-sticky-header { + width: calc(100% - #{$contextual-sidebar-width} - #{$gutter-width}); + } + + // collapsed left sidebar + expanded right sidebar + .right-sidebar-expanded.page-with-icon-sidebar .issue-sticky-header { + width: calc(100% - #{$contextual-sidebar-collapsed-width} - #{$gutter-width}); + } +} + +.issuable-header-slide-enter-active, +.issuable-header-slide-leave-active { + @include gl-transition-slow; +} + +.issuable-header-slide-enter, +.issuable-header-slide-leave-to { + transform: translateY(-100%); +} + .issuable-list-root { .gl-label-link { text-decoration: none; diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 22c1cb127cd..c3bac053a0a 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -86,7 +86,7 @@ justify-content: space-between; padding: $gl-padding; border-radius: $border-radius-default; - border: 1px solid $gray-100; + border: 1px solid $gray-50; &:last-child { margin-bottom: 0; @@ -276,7 +276,7 @@ } .label-badge-gray { - background-color: $gray-100; + background-color: $gray-50; } .label-links { diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 67a8f689e9d..81a70470c65 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -96,14 +96,21 @@ margin: 0; } - .omniauth-btn { - margin-bottom: $gl-padding; + form { width: 48%; - padding: $gl-padding-8; + padding: 0; + border: 0; + background: none; + margin-bottom: $gl-padding; @include media-breakpoint-down(md) { width: 100%; } + } + + .omniauth-btn { + width: 100%; + padding: $gl-padding-8; img { width: $default-icon-size; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 57afe45a74b..c3f3dbc223b 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -253,11 +253,11 @@ table { background-color: $gray-light; border-radius: 0 0 3px 3px; padding: $gl-padding; - border-top: 1px solid $gray-100; + border-top: 1px solid $gray-50; + .new-note { background-color: $gray-light; - border-top: 1px solid $gray-100; + border-top: 1px solid $gray-50; } &.is-replying { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index bed147aa3a7..e8cdfd717c0 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -5,7 +5,7 @@ $note-form-margin-left: 72px; @mixin vertical-line($left) { &::before { content: ''; - border-left: 2px solid $gray-100; + border-left: 2px solid $gray-50; position: absolute; top: 0; bottom: 0; @@ -83,8 +83,8 @@ $note-form-margin-left: 72px; .replies-toggle { background-color: $gray-light; padding: $gl-padding-8 $gl-padding; - border-top: 1px solid $gray-100; - border-bottom: 1px solid $gray-100; + border-top: 1px solid $gray-50; + border-bottom: 1px solid $gray-50; .collapse-replies-btn:hover { color: $blue-600; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 154717f9776..43d766db9e0 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -669,7 +669,8 @@ .ci-action-icon-container { position: absolute; right: 5px; - top: 5px; + top: 50%; + transform: translateY(-50%); // Action Icons in big pipeline-graph nodes &.ci-action-icon-wrapper { @@ -920,7 +921,7 @@ button.mini-pipeline-graph-dropdown-toggle { .ci-status-icon { - @extend .append-right-8; + @include gl-mr-3; position: relative; diff --git a/app/assets/stylesheets/pages/profiles/preferences.scss b/app/assets/stylesheets/pages/profiles/preferences.scss index 45e62913f37..3bab84af492 100644 --- a/app/assets/stylesheets/pages/profiles/preferences.scss +++ b/app/assets/stylesheets/pages/profiles/preferences.scss @@ -15,6 +15,10 @@ } .application-theme { + $ui-dark-bg: #2e2e2e; + $ui-light-bg: #dfdfdf; + $ui-dark-mode-bg: #1f1f1f; + label { margin: 0 $gl-padding-32 $gl-padding 0; text-align: center; @@ -60,11 +64,17 @@ } &.ui-dark { - background-color: $gray-900; + background-color: $ui-dark-bg; + border: solid 1px $border-color; } &.ui-light { - background-color: $gray-200; + background-color: $ui-light-bg; + } + + &.gl-dark { + background-color: $ui-dark-mode-bg; + border: solid 1px $border-color; } } diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index c0a1cf10fe4..438f6c2546e 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -396,7 +396,7 @@ margin-right: $gl-padding-4; margin-bottom: $gl-padding-4; color: $gl-text-color-secondary; - background-color: $gray-100; + background-color: $gray-50; line-height: $gl-btn-line-height; &:hover { diff --git a/app/assets/stylesheets/pages/prometheus.scss b/app/assets/stylesheets/pages/prometheus.scss index 0f56b98a78d..26db1fb9f58 100644 --- a/app/assets/stylesheets/pages/prometheus.scss +++ b/app/assets/stylesheets/pages/prometheus.scss @@ -21,6 +21,14 @@ } } } + + .links-section { + .gl-hover-text-blue-600-children:hover { + * { + @include gl-text-blue-600; + } + } + } } .draggable { diff --git a/app/assets/stylesheets/pages/storage_quota.scss b/app/assets/stylesheets/pages/storage_quota.scss new file mode 100644 index 00000000000..347bd1316c0 --- /dev/null +++ b/app/assets/stylesheets/pages/storage_quota.scss @@ -0,0 +1,17 @@ +.storage-type-usage { + &:first-child { + @include gl-rounded-top-left-base; + @include gl-rounded-bottom-left-base; + } + + &:last-child { + @include gl-rounded-top-right-base; + @include gl-rounded-bottom-right-base; + } + + &:not(:last-child) { + @include gl-border-r-2; + @include gl-border-r-solid; + @include gl-border-white; + } +} |