diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
18 files changed, 72 insertions, 409 deletions
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index d9ad4992458..a7623b65539 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -14,7 +14,7 @@ top: 0; margin-top: 3px; padding: $gl-padding; - z-index: 300; + z-index: $zindex-dropdown-menu; width: $award-emoji-width; font-size: 14px; background-color: $white; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 182c58c3931..b51fec925cb 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -95,8 +95,6 @@ &:active, &.active { - box-shadow: $gl-btn-active-background; - background-color: $dark; border-color: $border-dark; color: $color; @@ -348,14 +346,6 @@ } } -.btn-build { - margin-left: 10px; - - svg { - fill: $gl-text-color-secondary; - } -} - .clone-dropdown-btn a { color: $gray-700; @@ -437,19 +427,6 @@ } } -.btn-missing { - color: $gl-text-color-secondary; - border: 1px dashed $border-gray-normal-dashed; - border-radius: $border-radius-default; - - &:hover, - &:active, - &:focus { - color: $gl-text-color-secondary; - background-color: $white-normal; - } -} - // The .btn-svg class is available for legacy icon buttons to // preserve a 34px height and have 16x16 icons at the same time. // Once a button is migrated (to the current 32px height) diff --git a/app/assets/stylesheets/framework/carousel.scss b/app/assets/stylesheets/framework/carousel.scss deleted file mode 100644 index d51a9f9c173..00000000000 --- a/app/assets/stylesheets/framework/carousel.scss +++ /dev/null @@ -1,202 +0,0 @@ -// Notes on the classes: -// -// 1. .carousel.pointer-event should ideally be pan-y (to allow for users to scroll vertically) -// even when their scroll action started on a carousel, but for compatibility (with Firefox) -// we're preventing all actions instead -// 2. The .carousel-item-left and .carousel-item-right is used to indicate where -// the active slide is heading. -// 3. .active.carousel-item is the current slide. -// 4. .active.carousel-item-left and .active.carousel-item-right is the current -// slide in its in-transition state. Only one of these occurs at a time. -// 5. .carousel-item-next.carousel-item-left and .carousel-item-prev.carousel-item-right -// is the upcoming slide in transition. - -.carousel { - position: relative; - - &.pointer-event { - touch-action: pan-y; - } -} - - -.carousel-inner { - position: relative; - width: 100%; - overflow: hidden; - @include clearfix(); -} - -.carousel-item { - position: relative; - display: none; - float: left; - width: 100%; - margin-right: -100%; - backface-visibility: hidden; - @include transition($carousel-transition); -} - -.carousel-item.active, -.carousel-item-next, -.carousel-item-prev { - display: block; -} - -.carousel-item-next:not(.carousel-item-left), -.active.carousel-item-right { - transform: translateX(100%); -} - -.carousel-item-prev:not(.carousel-item-right), -.active.carousel-item-left { - transform: translateX(-100%); -} - - -// -// Alternate transitions -// - -.carousel-fade { - .carousel-item { - opacity: 0; - transition-property: opacity; - transform: none; - } - - .carousel-item.active, - .carousel-item-next.carousel-item-left, - .carousel-item-prev.carousel-item-right { - z-index: 1; - opacity: 1; - } - - .active.carousel-item-left, - .active.carousel-item-right { - z-index: 0; - opacity: 0; - @include transition(0s $carousel-transition-duration opacity); - } -} - - -// -// Left/right controls for nav -// - -.carousel-control-prev, -.carousel-control-next { - position: absolute; - top: 0; - bottom: 0; - z-index: 1; - // Use flex for alignment (1-3) - display: flex; // 1. allow flex styles - align-items: center; // 2. vertically center contents - justify-content: center; // 3. horizontally center contents - width: $carousel-control-width; - color: $carousel-control-color; - text-align: center; - opacity: $carousel-control-opacity; - @include transition($carousel-control-transition); - - // Hover/focus state - @include hover-focus { - color: $carousel-control-color; - text-decoration: none; - outline: 0; - opacity: $carousel-control-hover-opacity; - } -} - -.carousel-control-prev { - left: 0; - @if $enable-gradients { - background: linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); - } -} - -.carousel-control-next { - right: 0; - @if $enable-gradients { - background: linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); - } -} - -// Icons for within -.carousel-control-prev-icon, -.carousel-control-next-icon { - display: inline-block; - width: $carousel-control-icon-width; - height: $carousel-control-icon-width; - background: no-repeat 50% / 100% 100%; -} - -.carousel-control-prev-icon { - background-image: $carousel-control-prev-icon-bg; -} - -.carousel-control-next-icon { - background-image: $carousel-control-next-icon-bg; -} - - -// Optional indicator pips -// -// Add an ordered list with the following class and add a list item for each -// slide your carousel holds. - -.carousel-indicators { - position: absolute; - right: 0; - bottom: 0; - left: 0; - z-index: 15; - display: flex; - justify-content: center; - padding-left: 0; // override <ol> default - // Use the .carousel-control's width as margin so we don't overlay those - margin-right: $carousel-control-width; - margin-left: $carousel-control-width; - list-style: none; - - li { - box-sizing: content-box; - flex: 0 1 auto; - width: $carousel-indicator-width; - height: $carousel-indicator-height; - margin-right: $carousel-indicator-spacer; - margin-left: $carousel-indicator-spacer; - text-indent: -999px; - cursor: pointer; - background-color: $carousel-indicator-active-bg; - background-clip: padding-box; - // Use transparent borders to increase the hit area by 10px on top and bottom. - border-top: $carousel-indicator-hit-area-height solid transparent; - border-bottom: $carousel-indicator-hit-area-height solid transparent; - opacity: 0.5; - @include transition($carousel-indicator-transition); - } - - .active { - opacity: 1; - } -} - - -// Optional captions -// -// - -.carousel-caption { - position: absolute; - right: (100% - $carousel-caption-width) / 2; - bottom: 20px; - left: (100% - $carousel-caption-width) / 2; - z-index: 10; - padding-top: 20px; - padding-bottom: 20px; - color: $carousel-caption-color; - text-align: center; -} diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss index 2204b037f69..95025459cc9 100644 --- a/app/assets/stylesheets/framework/ci_variable_list.scss +++ b/app/assets/stylesheets/framework/ci_variable_list.scss @@ -98,13 +98,3 @@ color: $gl-text-color-disabled; } } - -.group-variable-list { - color: $gray-500; - - .table-section:not(:first-child) { - @include media-breakpoint-down(sm) { - border-top: hidden; - } - } -} diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 3b59c028437..5d182373fb1 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -110,7 +110,7 @@ pre { } hr { - margin: 24px 0; + margin: 1.5rem 0; border-top: 1px solid $gray-darker; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 745d469e3e8..c5467c304ec 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -471,7 +471,7 @@ background-color: $black-transparent; height: 100%; width: 100%; - z-index: 300; + z-index: $zindex-dropdown-menu; } } } diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index 499b9c00116..e30caeb1dfb 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -1136,10 +1136,6 @@ table.code { display: block; } } - - .note-edit-form { - margin-left: $note-icon-gutter-width; - } } .discussion-body .image .frame { diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 41fc4d3dd4e..f56d8f2c2a9 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -216,7 +216,7 @@ position: absolute; width: auto; top: 100%; - z-index: 300; + z-index: $zindex-dropdown-menu; min-width: 240px; max-width: 500px; margin-top: $dropdown-vertical-offset; @@ -326,7 +326,7 @@ color: $gl-text-color-secondary; } - .badge.badge-pill + span:not(.badge.badge-pill) { + .badge.badge-pill + span:not(.badge):not(.badge-pill) { // Expects up to 3 digits on the badge margin-right: 40px; } @@ -497,7 +497,7 @@ li { a, button, - .dropdown-item { + .dropdown-item:not(.open-with-link) { padding: 8px 40px; position: relative; @@ -525,7 +525,7 @@ &.is-active { /* stylelint-disable-next-line function-url-quotes */ - background: url(asset_path('checkmark.png')) no-repeat 14px 8px; + background: url(asset_path('checkmark.png')) no-repeat 14px center; } } } @@ -896,7 +896,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { position: absolute; top: 13px; right: 25px; - color: $gray-50; + color: $gray-300; } } @@ -1093,17 +1093,3 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { width: $gl-dropdown-width-wide; } } - -.gl-dropdown-item-deprecated-adapter { - .dropdown-item { - align-items: flex-start; - - .gl-new-dropdown-item-text-primary { - @include gl-font-weight-bold; - } - - .gl-new-dropdown-item-text-secondary { - color: inherit; - } - } -} diff --git a/app/assets/stylesheets/framework/feature_highlight.scss b/app/assets/stylesheets/framework/feature_highlight.scss index 8d411747b28..36f1b1f2903 100644 --- a/app/assets/stylesheets/framework/feature_highlight.scss +++ b/app/assets/stylesheets/framework/feature_highlight.scss @@ -1,14 +1,7 @@ .feature-highlight { - position: relative; - margin-left: $gl-padding; - width: 20px; - height: 20px; - cursor: pointer; - &::before { content: ''; display: block; - position: absolute; top: 6px; left: 6px; width: 8px; @@ -29,56 +22,22 @@ } } -.feature-highlight-popover-content { - display: none; - - hr { - margin: $gl-padding 0; - } - - .btn-link { - svg { - @include btn-svg; - - path { - fill: currentColor; - } - } - } - - .feature-highlight-illustration { - width: 100%; - height: 100px; - padding-top: 12px; - padding-bottom: 12px; - background-color: $indigo-50; - border-top-left-radius: 2px; - border-top-right-radius: 2px; - border-bottom: 1px solid darken($gray-normal, 8%); - } -} - -.popover .feature-highlight-popover-content { - display: block; +.feature-highlight-illustration { + background-color: $indigo-50; + border-top-left-radius: 2px; + border-top-right-radius: 2px; + border-bottom: 1px solid darken($gray-normal, 8%); } .feature-highlight-popover { width: 240px; - &.right > .arrow { - border-right-color: $border-color; - } - .popover-body { padding: 0; } } -.feature-highlight-popover-sub-content { - padding: $gl-padding $gl-padding-12; -} - @include keyframes(pulse-highlight) { 0% { box-shadow: 0 0 0 0 rgba($blue-200, 0.4); diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index fe8c27ae9b6..bda123fa7ea 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -2,6 +2,14 @@ * File content holder * */ +.container-fluid.container-limited.limit-container-width { + .file-holder.readme-holder.limited-width-container .file-content { + max-width: $limited-layout-width; + margin-left: auto; + margin-right: auto; + } +} + .file-holder { border: 1px solid $border-color; border-top: 0; @@ -17,12 +25,6 @@ &.readme-holder { margin: $gl-padding 0; - - &.limited-width-container .file-content { - max-width: $limited-layout-width; - margin-left: auto; - margin-right: auto; - } } .file-title { @@ -351,23 +353,17 @@ span.idiff { color: $gl-text-color; } - .file-actions .btn:not(.btn-icon) { - padding: 0 10px; - font-size: 13px; - line-height: 28px; - display: inline-block; - float: none; - } - .file-actions .ide-edit-button { z-index: 2; } - @include media-breakpoint-down(sm) { - display: block; - + @include media-breakpoint-down(md) { .file-actions { - margin-top: 5px; + margin-top: $gl-padding-8; + + .btn { + margin-bottom: $gl-padding-8; + } } } } @@ -442,12 +438,6 @@ span.idiff { .user-avatar-link.new-comment { position: absolute; margin: 40px $gl-padding 0 116px; - - ~ .note-edit-form form.edit-note { - @include media-breakpoint-up(sm) { - margin-left: $note-icon-gutter-width; - } - } } } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 5f56fa3be86..07d59847829 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -475,6 +475,15 @@ } } + .sort-dropdown-container { + // This property is set to have borders + // around sort dropdown match with filter + // input field. + .gl-button { + box-shadow: inset 0 0 0 1px $gray-400; + } + } + @include media-breakpoint-up(md) { .sort-dropdown-container { margin-left: 10px; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 730e10114c3..ffcc20b624b 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -516,28 +516,8 @@ left: auto; max-height: $dropdown-max-height-lg; - li.current-user { - padding: $dropdown-item-padding-y $dropdown-item-padding-x; - - .user-name { - display: block; - } - - .user-status { - margin-right: 0; - max-width: 240px; - font-size: $gl-font-size-small; - - gl-emoji { - font-size: $gl-font-size-small; - } - - .user-status-emoji { - gl-emoji { - font-size: $gl-font-size; - } - } - } + .user-status { + max-width: 240px; } svg { diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 5623d38d66e..222e10f51ad 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -3,10 +3,6 @@ svg { fill: $green-500; } - - &.add-border { - @include borderless-status-icon($green-500); - } } .ci-status-icon-error, @@ -14,10 +10,6 @@ svg { fill: $red-500; } - - &.add-border { - @include borderless-status-icon($red-500); - } } .ci-status-icon-pending, @@ -27,59 +19,29 @@ svg { fill: $orange-500; } - - &.add-border { - @include borderless-status-icon($orange-500); - } -} - -.ci-status-icon-preparing { - svg { - fill: $gray-300; - } - - &.add-border { - @include borderless-status-icon($gray-300); - } } .ci-status-icon-running { svg { fill: $blue-400; } - - &.add-border { - @include borderless-status-icon($blue-400); - } } .ci-status-icon-canceled, -.ci-status-icon-disabled { +.ci-status-icon-disabled, +.ci-status-icon-scheduled, +.ci-status-icon-manual { svg { fill: $gl-text-color; } - - &.add-border { - @include borderless-status-icon($gl-text-color); - } } +.ci-status-icon-preparing, .ci-status-icon-created, .ci-status-icon-skipped, .ci-status-icon-notfound { svg { - fill: $gray-darkest; - } - - &.add-border { - @include borderless-status-icon($gray-darkest); - } -} - -.ci-status-icon-scheduled, -.ci-status-icon-manual { - svg { - fill: $gl-text-color; + fill: var(--gray-400, $gray-400); } } diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index e3d02d01496..e29e204b14f 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -354,13 +354,6 @@ } } -@mixin borderless-status-icon($color) { - svg { - border: 1px solid $color; - border-radius: 50%; - } -} - @mixin emoji-menu-toggle-button { line-height: 1; padding: 0; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index bef33bd2ef0..241aaad015e 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -75,7 +75,7 @@ .right-sidebar-expanded { padding-right: 0; - z-index: 300; + z-index: $zindex-dropdown-menu; @include media-breakpoint-only(sm) { &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper { diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 89713fdbbea..92405c00c5e 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -69,9 +69,6 @@ table { } } - td { - border-color: $white-normal; - } } .thead-white { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 1a568bb41a5..496e2aba421 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -458,7 +458,7 @@ h6 { a.anchor { float: left; - margin-left: -16px; + margin-left: -20px; text-decoration: none; outline: none; @@ -471,6 +471,11 @@ &:hover > a.anchor::after { visibility: visible; } + + > a.anchor:focus::after { + visibility: visible; + outline: auto; + } } .big { diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 674ba1a307b..4bf9236407f 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -433,6 +433,7 @@ $browser-scrollbar-size: 10px; */ $header-height: 40px; $header-zindex: 1000; +$zindex-dropdown-menu: 300; $suggestion-header-height: 46px; $ide-statusbar-height: 25px; $fixed-layout-width: 1280px; @@ -626,7 +627,6 @@ $search-input-xl-width: 320px; $note-disabled-comment-color: #b2b2b2; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; -$note-icon-gutter-width: 55px; /* * Identicon @@ -871,6 +871,27 @@ $add-to-slack-well-max-width: 750px; $add-to-slack-logo-size: 100px; /* +Security & Compliance Carousel +*/ +$security-and-compliance-carousel-image-carousel-width: 1000px; +$security-and-compliance-carousel-image-discover-button-width: 45%; +$security-and-compliance-carousel-image-discover-buttons-max-width: 280px; +$security-and-compliance-carousel-image-discover-footer-max-width: 500px; +$security-and-compliance-carousel-image-discover-feedback-width: 30%; +$security-and-compliance-carousel-image-discover-text-carousel-max-width: 650px; +$security-and-compliance-carousel-image-discover-text-carousel-caption-height: 100%; +$security-and-compliance-carousel-image-discover-text-carousel-caption-max-width: 500px; +$security-and-compliance-carousel-control-icon-width: 10px; +$security-and-compliance-carousel-control-position: -5%; +$security-and-compliance-carousel-inner-width: 90%; +$security-and-compliance-carousel-indicators-bottom: -20px; +$security-and-compliance-carousel-indicators-bottom-lg: -15px; +$security-and-compliance-carousel-indicators-dimension: 6px; +$security-and-compliance-carousel-indicators-border-radius: 100%; +$security-and-compliance-carousel-prev-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"); +$security-and-compliance-carousel-next-icon-background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23666666' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); + +/* Popup */ $popup-triangle-size: 15px; |