diff options
Diffstat (limited to 'app/assets/stylesheets/components')
11 files changed, 29 insertions, 426 deletions
diff --git a/app/assets/stylesheets/components/batch_comments/review_bar.scss b/app/assets/stylesheets/components/batch_comments/review_bar.scss deleted file mode 100644 index 5e1128dc4ce..00000000000 --- a/app/assets/stylesheets/components/batch_comments/review_bar.scss +++ /dev/null @@ -1,71 +0,0 @@ -.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: $white; - border-top: 1px solid $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/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss deleted file mode 100644 index 1dcaa47470b..00000000000 --- a/app/assets/stylesheets/components/dashboard_skeleton.scss +++ /dev/null @@ -1,78 +0,0 @@ -.dashboard-cards { - margin-right: -$gl-padding-8; - margin-left: -$gl-padding-8; -} - -.dashboard-card { - @include gl-cursor-grab; - - &-header { - &-warning { - background-color: $orange-100; - } - } - - &-body { - min-height: 120px; - - &-warning { - background-color: $orange-50; - } - - &-failed { - background-color: $red-50; - } - } - - &-icon { - color: $gray-300; - } - - &-footer { - border-radius: $gl-padding; - height: $gl-padding-32; - - &-arrow { - color: $gray-200; - } - - &-downstream { - margin-right: -$gl-padding-8; - } - - &-extra { - background-color: $gray-200; - font-size: 10px; - line-height: $gl-line-height; - width: $gl-padding; - } - } - - &-header { - &-failed { - background-color: $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, - $gray-50 0%, - $gray-10 20%, - $gray-50 40%, - $gray-50 100%); - border-radius: $gl-padding; - height: $gl-padding; - margin-top: -$gl-padding-8; - } - } -} diff --git a/app/assets/stylesheets/components/date_time_picker.scss b/app/assets/stylesheets/components/date_time_picker.scss deleted file mode 100644 index 21f085cdaf1..00000000000 --- a/app/assets/stylesheets/components/date_time_picker.scss +++ /dev/null @@ -1,5 +0,0 @@ -.date-time-picker { - .date-time-picker-menu { - width: 400px; - } -} diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss deleted file mode 100644 index b8bd1000bfd..00000000000 --- a/app/assets/stylesheets/components/design_management/design.scss +++ /dev/null @@ -1,193 +0,0 @@ -$design-pin-diameter: 28px; -$design-pin-diameter-sm: 24px; -$t-gray-a-16-design-pin: rgba($black, 0.16); - -.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-scaler-wrapper { - bottom: 0; - left: 50%; - transform: translateX(-50%); -} - -.design-checkbox { - position: absolute; - top: $gl-padding; - left: 30px; -} - -.image-notes { - overflow-y: scroll; - padding: $gl-padding; - padding-top: 50px; - background-color: $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 $border-color; - - &.expanded { - border-bottom: 1px solid $border-color; - } - - .toggle-comments-button:focus { - text-decoration: none; - color: $blue-600; - } - } - - .design-note-pin { - margin-left: $gl-padding; - } - - .design-discussion { - margin: $gl-padding 0; - - &::before { - content: ''; - border-left: 1px solid $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: $blue-600; - } - } - - .reply-wrapper { - padding: $gl-padding; - } - } - - .reply-wrapper { - border-top: 1px solid $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; - } -} - -.design-card-header { - background: transparent; -} - -.design-note-pin { - display: flex; - height: $design-pin-diameter; - width: $design-pin-diameter; - box-sizing: content-box; - background-color: $purple-500; - color: $white; - font-weight: $gl-font-weight-bold; - border-radius: 50%; - z-index: 1; - padding: 0; - border: 0; - - &.draft { - background-color: $orange-500; - } - - &.resolved { - background-color: $gray-500; - } - - &.on-image { - box-shadow: 0 2px 4px $t-gray-a-08, 0 0 1px $t-gray-a-24; - border: $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 $white; - height: $design-pin-diameter-sm; - width: $design-pin-diameter-sm; - } - - &.user-avatar { - top: 25px; - right: 8px; - } -} diff --git a/app/assets/stylesheets/components/design_management/design_list_item.scss b/app/assets/stylesheets/components/design_management/design_list_item.scss deleted file mode 100644 index 09af4da37e9..00000000000 --- a/app/assets/stylesheets/components/design_management/design_list_item.scss +++ /dev/null @@ -1,19 +0,0 @@ -.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; -} diff --git a/app/assets/stylesheets/components/feature_highlight.scss b/app/assets/stylesheets/components/feature_highlight.scss deleted file mode 100644 index 4d301cc5617..00000000000 --- a/app/assets/stylesheets/components/feature_highlight.scss +++ /dev/null @@ -1,5 +0,0 @@ -.gl-sm-mr-3 { - @media (min-width: $breakpoint-sm) { - @include gl-mr-3; - } -} diff --git a/app/assets/stylesheets/components/milestone_combobox.scss b/app/assets/stylesheets/components/milestone_combobox.scss deleted file mode 100644 index 94d295c324b..00000000000 --- a/app/assets/stylesheets/components/milestone_combobox.scss +++ /dev/null @@ -1,5 +0,0 @@ -.milestone-combobox { - .dropdown-menu.show { - overflow: hidden; - } -} diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 3bb889b6ba0..293caf6fc87 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -75,19 +75,6 @@ $item-remove-button-space: 42px; } } -.item-body, -.card-header { - .health-label-short { - max-width: 0; - } -} - -.card-header { - .health-label-short { - display: initial; - } -} - .item-meta { flex-basis: 100%; font-size: $gl-font-size; @@ -212,11 +199,6 @@ $item-remove-button-space: 42px; max-width: 90%; } - .card-header { - .health-label-short { - max-width: 30px; - } - } } /* Small devices (landscape phones, 768px and up) */ @@ -239,11 +221,6 @@ $item-remove-button-space: 42px; } } - .card-header { - .health-label-short { - max-width: 60px; - } - } } /* Medium devices (desktops, 992px and up) */ @@ -257,12 +234,6 @@ $item-remove-button-space: 42px; font-size: inherit; // Base size given to `item-meta` is `$gl-font-size-small` } } - - .card-header { - .health-label-short { - max-width: 100px; - } - } } /* Large devices (large desktops, 1200px and up) */ @@ -309,15 +280,3 @@ $item-remove-button-space: 42px; flex-basis: auto; } } - -@media only screen and (min-width: 1500px) { - .card-header { - .health-label-short { - display: none; - } - - .health-label-long { - display: block; - } - } -} diff --git a/app/assets/stylesheets/components/release_block.scss b/app/assets/stylesheets/components/release_block.scss deleted file mode 100644 index 7e82d0960d7..00000000000 --- a/app/assets/stylesheets/components/release_block.scss +++ /dev/null @@ -1,3 +0,0 @@ -.release-block { - transition: background-color 1s linear; -} diff --git a/app/assets/stylesheets/components/release_block_milestone_info.scss b/app/assets/stylesheets/components/release_block_milestone_info.scss deleted file mode 100644 index b6a85ae965a..00000000000 --- a/app/assets/stylesheets/components/release_block_milestone_info.scss +++ /dev/null @@ -1,6 +0,0 @@ -.release-block-milestone-info { - .milestone-progress-bar-container { - width: 300px; - min-height: 46px; - } -} diff --git a/app/assets/stylesheets/components/shortcuts_help.scss b/app/assets/stylesheets/components/shortcuts_help.scss new file mode 100644 index 00000000000..ea2281538b4 --- /dev/null +++ b/app/assets/stylesheets/components/shortcuts_help.scss @@ -0,0 +1,29 @@ +.shortcut-help { + &-body { + height: 80vh; + overflow-y: scroll; + } + + &-container { + column-count: 1; + @include media-breakpoint-up(md) { + column-count: 2; + } + column-gap: 1rem; + } + + &-mapping { + overflow: hidden; + break-inside: avoid; + + &-title { + margin-left: 40%; + } + + kbd { + margin: 0.1rem 0; + line-height: unset; + font-size: unset; + } + } +} |