diff options
Diffstat (limited to 'app/assets/stylesheets')
77 files changed, 2328 insertions, 2170 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index f706b615e7e..a31cb0b0485 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,41 +1,27 @@ @import './pages/admin'; @import './pages/alert_management/details'; @import './pages/alert_management/severity-icons'; -@import './pages/boards'; @import './pages/branches'; @import './pages/builds'; @import './pages/ci_projects'; @import './pages/clusters'; @import './pages/commits'; -@import './pages/cycle_analytics'; @import './pages/deploy_keys'; @import './pages/detail_page'; -@import './pages/dev_ops_report'; -@import './pages/diff'; @import './pages/editor'; @import './pages/environment_logs'; -@import './pages/environments'; -@import './pages/error_details'; -@import './pages/error_list'; -@import './pages/error_tracking_list'; @import './pages/events'; -@import './pages/experience_level'; -@import './pages/experimental_separate_sign_up'; -@import './pages/graph'; @import './pages/groups'; @import './pages/help'; @import './pages/import'; @import './pages/incident_management_list'; @import './pages/issuable'; @import './pages/issues/issue_count_badge'; -@import './pages/issues/issues_list'; @import './pages/issues'; @import './pages/labels'; @import './pages/login'; @import './pages/members'; -@import './pages/merge_conflicts'; @import './pages/merge_requests'; -@import './pages/milestone'; @import './pages/monitor'; @import './pages/note_form'; @import './pages/notes'; @@ -47,19 +33,14 @@ @import './pages/profiles/preferences'; @import './pages/projects'; @import './pages/prometheus'; -@import './pages/reports'; @import './pages/runners'; @import './pages/search'; -@import './pages/serverless'; @import './pages/service_desk'; @import './pages/settings'; @import './pages/settings_ci_cd'; @import './pages/sherlock'; @import './pages/status'; @import './pages/storage_quota'; -@import './pages/tags'; @import './pages/tree'; @import './pages/trials'; -@import './pages/ui_dev_kit'; @import './pages/users'; -@import './pages/wiki'; diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 8acd338fff8..4b1139d2354 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -1,11 +1,3 @@ -/* - * This is a manifest file that'll automatically include all the stylesheets available in this directory - * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at - * the top of the compiled file, but it's generally better to create a new file per style scope. - *= require_self - *= require cropper.css -*/ - // Welcome to GitLab css! // If you need to add or modify UI component that is common for many pages // like a table or typography then make changes in the framework/ directory. @@ -36,17 +28,6 @@ // EE-only stylesheets @import 'application_ee'; -// CSS util classes -/** - These are deprecated in favor of the Gitlab UI utilities imported below. - Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss - to see the available utility classes. -**/ -@import 'utilities'; - -// Gitlab UI util classes -@import '@gitlab/ui/src/scss/utilities'; - /* print styles */ @media print { @import 'print'; diff --git a/app/assets/stylesheets/application_utilities.scss b/app/assets/stylesheets/application_utilities.scss new file mode 100644 index 00000000000..817e983a0ec --- /dev/null +++ b/app/assets/stylesheets/application_utilities.scss @@ -0,0 +1,12 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + +// CSS util classes +/** + These are deprecated in favor of the Gitlab UI utilities imported below. + Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss + to see the available utility classes. +**/ +@import 'utilities'; + +// Gitlab UI util classes +@import '@gitlab/ui/src/scss/utilities'; diff --git a/app/assets/stylesheets/application_utilities_dark.scss b/app/assets/stylesheets/application_utilities_dark.scss new file mode 100644 index 00000000000..eb32cdfc444 --- /dev/null +++ b/app/assets/stylesheets/application_utilities_dark.scss @@ -0,0 +1,3 @@ +@import './themes/dark'; + +@import 'application_utilities'; diff --git a/app/assets/stylesheets/components/design_management/design.scss b/app/assets/stylesheets/components/design_management/design.scss index 21133316291..81f2091e915 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -1,3 +1,6 @@ +$design-pin-diameter: 28px; +$t-gray-a-16-design-pin: rgba($black, 0.16); + .layout-page.design-detail-layout { max-height: 100vh; } @@ -9,34 +12,61 @@ top: 35px; } - .design-pin { - transition: opacity $gl-transition-duration-medium $general-hover-transition-curve; - - &.inactive { - @include gl-opacity-5; - - &:hover { - @include gl-opacity-10; - } - } - } - .badge.badge-pill { display: flex; - height: 28px; - width: 28px; - background-color: $blue-400; + height: $design-pin-diameter; + width: $design-pin-diameter; + box-sizing: content-box; + background-color: $purple-500; color: $white; - border: $white 1px solid; + font-weight: $gl-font-weight-bold; border-radius: 50%; + z-index: 1; + padding: 0; &.resolved { background-color: $gray-500; } } - .design-detail-overlay-add-comment { - cursor: crosshair; + .comment-indicator { + border-radius: 50%; + } + + .comment-indicator, + .frame .badge.badge-pill { + &:active { + cursor: grabbing; + } + } + + /** + * Design pin that overlays the design + */ + .frame .badge.badge-pill { + 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; + } + } } } @@ -105,8 +135,8 @@ border-left: 1px solid $gray-100; position: absolute; left: 28px; - top: -18px; - height: 18px; + top: -17px; + height: 17px; } .design-note { @@ -152,6 +182,10 @@ } } +.design-card-header { + background: transparent; +} + .design-dropzone-border { border: 2px dashed $gray-100; } diff --git a/app/assets/stylesheets/components/rich_content_editor.scss b/app/assets/stylesheets/components/rich_content_editor.scss index b1189137d59..d97a9bc227d 100644 --- a/app/assets/stylesheets/components/rich_content_editor.scss +++ b/app/assets/stylesheets/components/rich_content_editor.scss @@ -44,3 +44,11 @@ @include gl-line-height-20; } } + +/** +* Styling below ensures that YouTube videos are displayed in the editor the same as they would in about.gitlab.com +* https://gitlab.com/gitlab-com/www-gitlab-com/-/blob/master/source/stylesheets/_base.scss#L977 +*/ +.video_container { + padding-bottom: 56.25%; +} diff --git a/app/assets/stylesheets/components/whats_new.scss b/app/assets/stylesheets/components/whats_new.scss index 4fff900f5a5..6c58346b750 100644 --- a/app/assets/stylesheets/components/whats_new.scss +++ b/app/assets/stylesheets/components/whats_new.scss @@ -1,9 +1,32 @@ +.whats-new-drawer { + margin-top: $header-height; + @include gl-shadow-none; +} + +.with-performance-bar .whats-new-drawer { + margin-top: calc(#{$performance-bar-height} + #{$header-height}); +} + .gl-badge.whats-new-item-badge { background-color: $purple-light; color: $purple; - font-weight: bold; + @include gl-font-weight-bold; } .whats-new-item-image { border-color: $gray-50; } + +.whats-new-modal-backdrop { + z-index: 9; +} + +.whats-new-notification-count { + @include gl-bg-gray-900; + @include gl-font-sm; + @include gl-line-height-normal; + @include gl-text-white; + @include gl-vertical-align-top; + border-radius: 20px; + padding: 3px 10px; +} diff --git a/app/assets/stylesheets/fontawesome_custom.scss b/app/assets/stylesheets/fontawesome_custom.scss index 46e5e5a28ea..a3338ff13b5 100644 --- a/app/assets/stylesheets/fontawesome_custom.scss +++ b/app/assets/stylesheets/fontawesome_custom.scss @@ -88,11 +88,6 @@ content: '\f078'; } -.fa-remove::before, -.fa-times::before { - content: '\f00d'; -} - .fa-caret-down::before { content: '\f0d7'; } @@ -101,10 +96,6 @@ content: '\f00c'; } -.fa-search::before { - content: '\f002'; -} - .fa-warning::before, .fa-exclamation-triangle::before { content: '\f071'; @@ -118,18 +109,6 @@ content: '\f110'; } -.fa-calendar::before { - content: '\f073'; -} - -.fa-angle-double-right::before { - content: '\f101'; -} - -.fa-angle-double-left::before { - content: '\f100'; -} - .fa-trash-o::before { content: '\f014'; } @@ -146,14 +125,6 @@ content: '\f077'; } -.fa-file-text-o::before { - content: '\f0f6'; -} - -.fa-github::before { - content: '\f09b'; -} - .fa-paperclip::before { content: '\f0c6'; } @@ -162,10 +133,6 @@ content: '\f188'; } -.fa-google::before { - content: '\f1a0'; -} - .fa-exclamation-circle::before { content: '\f06a'; } @@ -174,10 +141,6 @@ content: '\f0f3'; } -.fa-bitbucket-square::before { - content: '\f172'; -} - .fa-file-o::before { content: '\f016'; } @@ -190,22 +153,10 @@ content: '\f111'; } -.fa-bitbucket::before { - content: '\f171'; -} - .fa-git::before { content: '\f1d3'; } -.fa-folder::before { - content: '\f07b'; -} - -.fa-archive::before { - content: '\f187'; -} - .fa-thumb-tack::before { content: '\f08d'; } @@ -214,10 +165,6 @@ content: '\f06d'; } -.fa-globe::before { - content: '\f0ac'; -} - .fa-pause::before { content: '\f04c'; } @@ -226,14 +173,6 @@ content: '\f04b'; } -.fa-search-plus::before { - content: '\f00e'; -} - -.fa-search-minus::before { - content: '\f010'; -} - .fa-share::before { content: '\f064'; } @@ -258,10 +197,6 @@ content: '\f081'; } -.fa-unlink::before { - content: '\f127'; -} - .fa-file-pdf-o::before { content: '\f1c1'; } diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index f875420b9c9..e40b95cdce6 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -70,3 +70,4 @@ @import 'framework/spinner'; @import 'framework/card'; @import 'framework/editor-lite'; +@import 'framework/diffs'; diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 136ff82e0f8..196fb3a7088 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -112,8 +112,7 @@ a { } .dropdown-menu a, -.dropdown-menu button, -.dropdown-menu-nav a { +.dropdown-menu button { transition: none; } diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index a9c1652d00d..a8cc685d880 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -417,12 +417,6 @@ } } -@include media-breakpoint-down(xs) { - .btn-wide-on-xs { - width: 100%; - } -} - .btn-blank { padding: 0; background: transparent; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 714ef8b2175..8dbed9c03f2 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -324,15 +324,8 @@ img.emoji { } .project-item-select-holder { - display: inline-block; - position: relative; - .project-item-select { - position: absolute; - top: 0; - right: 0; min-width: 250px; - visibility: hidden; } } @@ -428,7 +421,6 @@ img.emoji { /** COMMON SIZING CLASSES **/ .w-0 { width: 0; } .w-8em { width: 8em; } -.w-3rem { width: 3rem; } .w-15p { width: 15%; } .w-30p { width: 30%; } .w-60p { width: 60%; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 7004bcc121d..48252762546 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -363,20 +363,30 @@ // Collapsed nav .toggle-sidebar-button, -.close-nav-button { - width: $contextual-sidebar-width - 1px; +.close-nav-button, +.toggle-right-sidebar-button { transition: width $sidebar-transition-duration; - position: fixed; height: $toggle-sidebar-height; - bottom: 0; padding: 0 $gl-padding; background-color: $gray-light; border: 0; - border-top: 1px solid $border-color; color: $gl-text-color-secondary; display: flex; align-items: center; + &:hover { + background-color: $border-color; + color: $gl-text-color; + } +} + +.toggle-sidebar-button, +.close-nav-button { + position: fixed; + bottom: 0; + width: $contextual-sidebar-width - 1px; + border-top: 1px solid $border-color; + svg { margin-right: 8px; } @@ -384,11 +394,10 @@ .icon-chevron-double-lg-right { display: none; } +} - &:hover { - background-color: $border-color; - color: $gl-text-color; - } +.toggle-right-sidebar-button { + border-bottom: 1px solid $border-color; } .collapse-text { diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/framework/diffs.scss index 62af7103b39..c0a2350d080 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -13,6 +13,21 @@ box-shadow: 0 -2px 0 0 var(--white); cursor: pointer; + .dropdown-menu { + cursor: auto; + } + + @media (max-width: map-get($grid-breakpoints, sm)-1) { + .file-header-content { + width: 0; + flex: 1; + } + + .file-actions { + margin-left: $gl-spacing-scale-2; + } + } + @media (min-width: map-get($grid-breakpoints, md)) { // The `+11` is to ensure the file header border shows when scrolled - // the bottom of the compare-versions header and the top of the file header @@ -23,6 +38,14 @@ top: $mr-file-header-top; z-index: 120; + .with-system-header & { + top: $mr-file-header-top + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $mr-file-header-top + $system-header-height + $performance-bar-height; + } + &::before { content: ''; position: absolute; @@ -55,10 +78,6 @@ } } - a:hover { - text-decoration: none; - } - &:hover { background-color: $gray-normal; } @@ -248,6 +267,7 @@ } } } + //.view.swipe .view.onion-skin { .onion-skin-frame { @@ -316,6 +336,7 @@ } } } + //.view.onion-skin } @@ -942,15 +963,13 @@ table.code { .frame.click-to-comment, .btn-transparent.image-diff-overlay-add-comment { position: relative; - cursor: image-url('illustrations/image_comment_light_cursor.svg') - $image-comment-cursor-left-offset $image-comment-cursor-top-offset, + cursor: image-url('illustrations/image_comment_light_cursor.svg') $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; // Retina cursor // scss-lint:disable DuplicateProperty cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, - image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) - $image-comment-cursor-left-offset $image-comment-cursor-top-offset, + image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; .comment-indicator { @@ -1059,77 +1078,6 @@ table.code { position: relative; } -.diff-tree-list { - position: -webkit-sticky; - position: sticky; - $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px; - top: $top-pos; - max-height: calc(100vh - #{$top-pos}); - z-index: 202; - - .with-performance-bar & { - $performance-bar-top-pos: $performance-bar-height + $top-pos; - top: $performance-bar-top-pos; - max-height: calc(100vh - #{$performance-bar-top-pos}); - } - - .drag-handle { - bottom: 16px; - transform: translateX(10px); - } -} - -.diff-files-holder { - flex: 1; - min-width: 0; - z-index: 201; -} - -.compare-versions-container { - min-width: 0; -} - -.tree-list-holder { - height: 100%; - - .file-row { - margin-left: 0; - margin-right: 0; - } -} - -.tree-list-scroll { - max-height: 100%; - padding-bottom: $grid-size; - overflow-y: scroll; - overflow-x: auto; -} - -.tree-list-search { - flex: 0 0 34px; - - .form-control { - padding-left: 30px; - } -} - -.tree-list-icon { - top: 50%; - left: 10px; - transform: translateY(-50%); - - &, - svg { - fill: $gl-text-color-tertiary; - } -} - -.tree-list-clear-icon { - right: 10px; - left: auto; - line-height: 0; -} - .discussion-collapsible { margin: 0 $gl-padding $gl-padding 71px; @@ -1145,30 +1093,6 @@ table.code { } } -@media (max-width: map-get($grid-breakpoints, md)-1) { - .diffs .files { - @include fixed-width-container; - flex-direction: column; - - .diff-tree-list { - position: relative; - top: 0; - // !important is required to override inline styles of resizable sidebar - width: 100% !important; - } - - .tree-list-holder { - max-height: calc(50px + 50vh); - padding-right: 0; - } - } - - .discussion-collapsible { - margin: $gl-padding; - margin-top: 0; - } -} - .image-diff-overlay, .image-diff-overlay-add-comment { top: 0; @@ -1191,3 +1115,15 @@ table.code { display: none; } } + +@media (max-width: map-get($grid-breakpoints, md)-1) { + .diffs .files { + @include fixed-width-container; + flex-direction: column; + } + + .discussion-collapsible { + margin: $gl-padding; + margin-top: 0; + } +} diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ad5864ef6d9..e8d37fcf40b 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -33,8 +33,7 @@ } .show.dropdown { - .dropdown-menu, - .dropdown-menu-nav { + .dropdown-menu { @include set-visible; min-height: $dropdown-min-height; max-height: $dropdown-max-height; @@ -190,15 +189,6 @@ background-color: $gray-darker; color: $gl-text-color; outline: 0; - - // make sure the text color is not overridden - &.text-danger { - color: $brand-danger; - } - - .avatar { - border-color: $white; - } } @mixin dropdown-link { @@ -217,11 +207,6 @@ text-align: left; width: 100%; - // make sure the text color is not overridden - &.text-danger { - color: $brand-danger; - } - &.disable-hover { text-decoration: none; } @@ -233,10 +218,6 @@ @include dropdown-item-hover; text-decoration: none; - - .badge.badge-pill { - background-color: darken($blue-50, 5%); - } } &.dropdown-menu-user-link { @@ -258,8 +239,7 @@ } } -.dropdown-menu, -.dropdown-menu-nav { +.dropdown-menu { display: none; position: absolute; width: auto; @@ -393,49 +373,56 @@ pointer-events: none; } - .dropdown-menu li { - cursor: pointer; + .dropdown-menu { + display: none; + opacity: 1; + visibility: visible; + transform: translateY(0); - &.droplab-item-active button { - @include dropdown-item-hover; - } + li { + cursor: pointer; - > a, - > button { - display: flex; - margin: 0; - text-overflow: inherit; - text-align: left; + &.droplab-item-active button { + @include dropdown-item-hover; + } - &.btn .fa:not(:last-child) { - margin-left: 5px; + > a, + > button { + display: flex; + margin: 0; + text-overflow: inherit; + text-align: left; + + &.btn .fa:not(:last-child) { + margin-left: 5px; + } } - } - > button.dropdown-epic-button { - flex-direction: column; + > button.dropdown-epic-button { + flex-direction: column; - .reference { - color: $gray-300; - margin-top: $gl-padding-4; + .reference { + color: $gray-300; + margin-top: $gl-padding-4; + } } - } - &.droplab-item-selected i { - visibility: visible; - } + &.droplab-item-selected i { + visibility: visible; + } - .icon { - visibility: hidden; - } + .icon { + visibility: hidden; + } - .description { - display: inline-block; - white-space: normal; - margin-left: 5px; + .description { + display: inline-block; + white-space: normal; + margin-left: 5px; - p { - margin-bottom: 0; + p { + margin-bottom: 0; + } } } } @@ -447,21 +434,12 @@ } } -.droplab-dropdown .dropdown-menu, -.droplab-dropdown .dropdown-menu-nav { - display: none; - opacity: 1; - visibility: visible; - transform: translateY(0); -} - .comment-type-dropdown.show .dropdown-menu { display: block; } .filtered-search-box-input-container { - .dropdown-menu, - .dropdown-menu-nav { + .dropdown-menu { max-width: 280px; } } @@ -850,8 +828,7 @@ } header.navbar-gitlab .dropdown { - .dropdown-menu, - .dropdown-menu-nav { + .dropdown-menu { width: 100%; min-width: 100%; } diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss index 75d511d7f66..20fea7a82ca 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -1,5 +1,3 @@ -.monaco-editor.gl-editor-lite { - .line-numbers { - @include gl-pt-0; - } +[id^='editor-lite-'] { + height: 500px; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 76c6e03377c..f8710cc1346 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -50,7 +50,7 @@ right: 15px; margin-left: auto; - .btn { + .btn:not(.btn-icon) { padding: 0 10px; font-size: 13px; line-height: 28px; @@ -372,7 +372,7 @@ span.idiff { color: $gl-text-color; } - .file-actions .btn { + .file-actions .btn:not(.btn-icon) { padding: 0 10px; font-size: 13px; line-height: 28px; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 1a394ad124b..5f56fa3be86 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -355,28 +355,45 @@ background-color: $white; } - .boards-switcher { - margin: 0 0 10px; + .filtered-search-block .boards-switcher { + @include gl-mr-0; + margin-bottom: $gl-input-padding; .boards-selector-wrapper, .dropdown { - display: block; + @include gl-display-block; } } .filter-dropdown-container { > div { - margin: 0; + @include gl-m-0; > .btn { - margin: 0 0 10px; - width: 100%; + margin: 0 0 $gl-input-padding; + @include gl-w-full; } } .board-labels-toggle-wrapper { margin-bottom: $gl-input-padding; } + + .board-swimlanes-toggle-wrapper { + @include gl-h-auto; + margin-bottom: $gl-input-padding; + + > span, + > .dropdown, + .gl-dropdown-toggle { + @include gl-w-full; + @include gl-m-0; + } + + > .dropdown { + @include gl-mt-2; + } + } } .boards-add-list > .btn { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index cf21c23cb17..52319d9658b 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -203,18 +203,6 @@ margin-right: 0; } } - - &:hover, - &:focus { - text-decoration: none; - outline: 0; - opacity: 1; - color: $white; - - &.header-user-dropdown-toggle .header-user-avatar { - border-color: $white; - } - } } .header-new-dropdown-toggle { diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index ec0755b1614..5623d38d66e 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -9,6 +9,7 @@ } } +.ci-status-icon-error, .ci-status-icon-failed { svg { fill: $red-500; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 61e8c0d4718..63be2bdef8e 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -215,7 +215,7 @@ } &.build-trace-rounded { - border-radius: $border-radius-base; + border-radius: $gl-border-radius-base; } } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 292d57f132c..7ebc972ac37 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -28,10 +28,6 @@ text-decoration: none; color: $black; border-bottom: 2px solid $gray-darkest; - - .badge.badge-pill { - color: $black; - } } } @@ -380,33 +376,11 @@ } .project-item-select-holder.btn-group { - display: flex; - overflow: hidden; - float: right; - - .new-project-item-link { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - .new-project-item-select-button { - width: 32px; + max-width: 44px; } } .empty-state .project-item-select-holder.btn-group { - float: none; - justify-content: center; - - .btn { - // overrides styles applied to plain `.empty-state .btn` - margin: 10px 0; - max-width: 300px; - width: auto; - - @include media-breakpoint-down(xs) { - max-width: 250px; - } - } + max-width: 320px; } diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 4c1c9d15121..47184804353 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -18,18 +18,6 @@ } } -.snippet-form-holder .file-holder .file-title { - padding: 2px; -} - -.markdown-snippet-copy { - position: fixed; - top: -10px; - left: -10px; - max-height: 0; - max-width: 0; -} - .snippet-file-content { border-radius: 3px; @@ -49,21 +37,6 @@ min-height: $header-height; } -.snippet-actions { - @include media-breakpoint-up(sm) { - float: right; - } -} - .snippet-scope-menu .btn-success { margin-top: 15px; } - -.embed-snippet { - padding-right: 0; - padding-top: $gl-padding; - - .embed-toggle-list li button { - padding: 8px 40px; - } -} diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 59e83608d9d..39d9e9a77f9 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -9,11 +9,15 @@ table { * This is a temporary workaround until we fix the neutral * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570 * - * The overwrites here affected the security dashboard tables, when removing - * this code, table-th-transparent and original-text-color classes should - * be removed there. + * The overwrites here affected the following areas: + * - The security dashboard tables. When removing + * this code, table-th-transparent and original-text-color classes should + * be removed there. + * - The subscription seats table. When removing this code, the .seats-table + * <th> and margin overrides should be removed there. * * Remove this code as soon as this happens + * */ &.gl-table { @include gl-text-gray-500; @@ -186,6 +190,7 @@ table { .checkbox { padding-left: $gl-spacing-scale-4; padding-right: 0; + width: 1px; + td, + th { @@ -205,12 +210,20 @@ table { width: 10%; } + .description { + max-width: 0; + } + .identifier { width: 16%; } .scanner { - width: 15%; + width: 10%; + } + + .activity { + width: 5%; } } } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 8b5fa6c1b6c..c15d46d43b2 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -439,10 +439,6 @@ content: '\f0c6'; } - &:hover::before { - text-decoration: none; - } - &.no-attachment-icon { &::before { display: none; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 8cebfc430e0..f0b1e859139 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -780,7 +780,6 @@ $login-brand-holder-color: #888; * Projects */ $project-option-descr-color: #54565b; -$project-network-controls-color: #888; /* * Monitor Charts @@ -819,7 +818,6 @@ $pipeline-dropdown-line-height: 20px; $pipeline-dropdown-status-icon-size: 18px; $ci-action-dropdown-button-size: 24px; $ci-action-dropdown-svg-size: 12px; -$pipelines-table-header-height: 40px; /* CI variable lists @@ -868,9 +866,6 @@ $add-to-slack-popup-max-width: 400px; $add-to-slack-gif-max-width: 850px; $add-to-slack-well-max-width: 750px; $add-to-slack-logo-size: 100px; -$double-headed-arrow-width: 100px; -$double-headed-arrow-height: 25px; -$right-arrow-size: 16px; /* Popup diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 55996a074c6..d550a1faa18 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -3,7 +3,6 @@ color: $gl-text-color; border: 1px solid $border-color; border-radius: $border-radius-default; - margin-bottom: $gl-padding-8; .card.card-body-segment { padding: $gl-padding; @@ -29,11 +28,6 @@ .ref-name { font-size: 12px; - - &:hover { - text-decoration: underline; - color: $gl-text-color; - } } } diff --git a/app/assets/stylesheets/lazy_bundles/cropper.css b/app/assets/stylesheets/lazy_bundles/cropper.css new file mode 100644 index 00000000000..9c7fdded117 --- /dev/null +++ b/app/assets/stylesheets/lazy_bundles/cropper.css @@ -0,0 +1,378 @@ +/*! + * Cropper v2.3.0 + * https://github.com/fengyuanchen/cropper + * + * Copyright (c) 2014-2016 Fengyuan Chen and contributors + * Released under the MIT license + * + * Date: 2016-02-22T02:13:13.332Z + */ +.cropper-container { + font-size: 0; + line-height: 0; + + position: relative; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + direction: ltr !important; + touch-action: none; + -webkit-tap-highlight-color: transparent; + -webkit-touch-callout: none; +} + +.cropper-container img { + display: block; + + width: 100%; + min-width: 0 !important; + max-width: none !important; + height: 100%; + min-height: 0 !important; + max-height: none !important; + + image-orientation: 0deg !important; +} + +.cropper-wrap-box, +.cropper-canvas, +.cropper-drag-box, +.cropper-crop-box, +.cropper-modal { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.cropper-wrap-box { + overflow: hidden; +} + +.cropper-drag-box { + opacity: 0; + background-color: #fff; + + filter: alpha(opacity=0); +} + +.cropper-modal { + opacity: 0.5; + background-color: #000; + + filter: alpha(opacity=50); +} + +.cropper-view-box { + display: block; + overflow: hidden; + + width: 100%; + height: 100%; + + outline: 1px solid #39f; + outline-color: rgba(51, 153, 255, 0.75); +} + +.cropper-dashed { + position: absolute; + + display: block; + + opacity: 0.5; + border: 0 dashed #eee; + + filter: alpha(opacity=50); +} + +.cropper-dashed.dashed-h { + top: 33.33333%; + left: 0; + + width: 100%; + height: 33.33333%; + + border-top-width: 1px; + border-bottom-width: 1px; +} + +.cropper-dashed.dashed-v { + top: 0; + left: 33.33333%; + + width: 33.33333%; + height: 100%; + + border-right-width: 1px; + border-left-width: 1px; +} + +.cropper-center { + position: absolute; + top: 50%; + left: 50%; + + display: block; + + width: 0; + height: 0; + + opacity: 0.75; + + filter: alpha(opacity=75); +} + +.cropper-center::before, +.cropper-center::after { + position: absolute; + + display: block; + + content: ' '; + + background-color: #eee; +} + +.cropper-center::before { + top: 0; + left: -3px; + + width: 7px; + height: 1px; +} + +.cropper-center::after { + top: -3px; + left: 0; + + width: 1px; + height: 7px; +} + +.cropper-face, +.cropper-line, +.cropper-point { + position: absolute; + + display: block; + + width: 100%; + height: 100%; + + opacity: 0.1; + + filter: alpha(opacity=10); +} + +.cropper-face { + top: 0; + left: 0; + + background-color: #fff; +} + +.cropper-line { + background-color: #39f; +} + +.cropper-line.line-e { + top: 0; + right: -3px; + + width: 5px; + + cursor: e-resize; +} + +.cropper-line.line-n { + top: -3px; + left: 0; + + height: 5px; + + cursor: n-resize; +} + +.cropper-line.line-w { + top: 0; + left: -3px; + + width: 5px; + + cursor: w-resize; +} + +.cropper-line.line-s { + bottom: -3px; + left: 0; + + height: 5px; + + cursor: s-resize; +} + +.cropper-point { + width: 5px; + height: 5px; + + opacity: 0.75; + background-color: #39f; + + filter: alpha(opacity=75); +} + +.cropper-point.point-e { + top: 50%; + right: -3px; + + margin-top: -3px; + + cursor: e-resize; +} + +.cropper-point.point-n { + top: -3px; + left: 50%; + + margin-left: -3px; + + cursor: n-resize; +} + +.cropper-point.point-w { + top: 50%; + left: -3px; + + margin-top: -3px; + + cursor: w-resize; +} + +.cropper-point.point-s { + bottom: -3px; + left: 50%; + + margin-left: -3px; + + cursor: s-resize; +} + +.cropper-point.point-ne { + top: -3px; + right: -3px; + + cursor: ne-resize; +} + +.cropper-point.point-nw { + top: -3px; + left: -3px; + + cursor: nw-resize; +} + +.cropper-point.point-sw { + bottom: -3px; + left: -3px; + + cursor: sw-resize; +} + +.cropper-point.point-se { + right: -3px; + bottom: -3px; + + width: 20px; + height: 20px; + + cursor: se-resize; + + opacity: 1; + + filter: alpha(opacity=100); +} + +.cropper-point.point-se::before { + position: absolute; + right: -50%; + bottom: -50%; + + display: block; + + width: 200%; + height: 200%; + + content: ' '; + + opacity: 0; + background-color: #39f; + + filter: alpha(opacity=0); +} + +@media (min-width: 768px) { + .cropper-point.point-se { + width: 15px; + height: 15px; + } +} + +@media (min-width: 992px) { + .cropper-point.point-se { + width: 10px; + height: 10px; + } +} + +@media (min-width: 1200px) { + .cropper-point.point-se { + width: 5px; + height: 5px; + + opacity: 0.75; + + filter: alpha(opacity=75); + } +} + +.cropper-invisible { + opacity: 0; + + filter: alpha(opacity=0); +} + +.cropper-bg { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC'); +} + +.cropper-hide { + position: absolute; + + display: block; + + width: 0; + height: 0; +} + +.cropper-hidden { + display: none !important; +} + +.cropper-move { + cursor: move; +} + +.cropper-crop { + cursor: crosshair; +} + +.cropper-disabled .cropper-drag-box, +.cropper-disabled .cropper-face, +.cropper-disabled .cropper-line, +.cropper-disabled .cropper-point { + cursor: not-allowed; +} diff --git a/app/assets/stylesheets/mailer.scss b/app/assets/stylesheets/mailer.scss index a5fc92237df..b2050c0e73f 100644 --- a/app/assets/stylesheets/mailer.scss +++ b/app/assets/stylesheets/mailer.scss @@ -52,6 +52,10 @@ a { margin-top: 0; } +.invite-body { + width: 360px; +} + .invite-actions { margin-top: 24px; } @@ -64,6 +68,15 @@ a { color: $white; } +.invite-btn-decline { + border-radius: $border-radius-default; + border: 1px solid $purple; + padding: $gl-btn-vert-padding $gl-btn-horz-padding; + cursor: pointer; + color: $purple; + margin-left: 4px; +} + tr td { font-family: $mailer-font; } diff --git a/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 1e239877428..d1f7c2e9865 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); } @@ -225,20 +226,20 @@ @return calc(#{$original-padding + $original-border} - var(--ide-btn-hover-border-width, #{$original-border})); } - .btn:not(.btn-link):not([disabled]):hover { + .btn:not(.gl-button):not(.btn-link):not([disabled]):hover { border-width: var(--ide-btn-hover-border-width, 1px); padding: calc-btn-hover-padding(6px) calc-btn-hover-padding(10px); } - .btn:not([disabled]).btn-sm:hover { + .btn:not(.gl-button):not([disabled]).btn-sm:hover { padding: calc-btn-hover-padding(4px) calc-btn-hover-padding(10px); } - .btn:not([disabled]).btn-block:hover { + .btn:not(.gl-button):not([disabled]).btn-block:hover { padding: calc-btn-hover-padding(6px) 0; } - .btn-default, + .btn-default:not(.gl-button), .dropdown, .dropdown-menu-toggle { background-color: var(--ide-input-background, $white) !important; @@ -257,7 +258,7 @@ } // In IDE, the only inverted buttons are `.btn-remove` - .btn-inverted.btn-remove { + .btn-inverted.btn-remove:not(.gl-button) { color: var(--ide-input-color, $red-500) !important; background-color: var(--ide-input-background, $white) !important; border-color: var(--ide-btn-default-border, $red-500); @@ -276,17 +277,21 @@ } } - .btn-default { + // todo: remove this block after all default buttons have been migrated to gl-button + .btn-default:not(.gl-button) { + background-color: var(--ide-btn-default-background, $white) !important; + border-color: var(--ide-btn-default-border, $border-color); + &:hover, &:focus { border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; - background-color: var(--ide-input-background, $white-normal) !important; + background-color: var(--ide-btn-default-background, $white-normal) !important; } &:active, .active { border-color: var(--ide-btn-default-hover-border, $border-white-normal) !important; - background-color: var(--ide-input-background, $white-dark) !important; + background-color: var(--ide-btn-default-background, $white-dark) !important; } } @@ -320,8 +325,9 @@ border-color: var(--ide-dropdown-hover-background, $gray-100) !important; } - .btn-primary, - .btn-info { + // todo: remove this block after all primary/info buttons have been migrated to gl-button + .btn-primary:not(.gl-button), + .btn-info:not(.gl-button) { background-color: var(--ide-btn-primary-background, $blue-500); border-color: var(--ide-btn-primary-border, $blue-600) !important; @@ -338,7 +344,8 @@ } } - .btn-success { + // todo: remove this block after all success buttons have been migrated to gl-button + .btn-success:not(.gl-button) { background-color: var(--ide-btn-success-background, $green-500); border-color: var(--ide-btn-success-border, $green-600) !important; @@ -355,12 +362,70 @@ } } - .btn[disabled] { + // todo: remove this block after all disabled buttons have been migrated to gl-button + .btn[disabled]:not(.gl-button) { background-color: var(--ide-btn-default-background, $gray-light) !important; border: 1px solid var(--ide-btn-disabled-border, $gray-100) !important; color: var(--ide-btn-disabled-color, $gl-text-color-disabled) !important; } + @function ide-btn-var($btn-type, $var-type, $value) { + @return var(--ide-btn-#{$btn-type}-#{$var-type}, $value); + } + + @mixin ide-gl-button($btn-type, $bg-normal, $bg-hover, $bg-active, $border-normal, $border-hover, $border-focus, $border-active, $border-width-hover: 2px, $box-shadow-hover: $t-gray-a-08, $box-shadow-focus: 0 0 0 4px rgba($blue-500, 0.25)) { + background-color: ide-btn-var($btn-type, background, $bg-normal); + box-shadow: inset 0 0 0 1px ide-btn-var($btn-type, border, $border-normal); + + &:hover, + &:focus { + background-color: ide-btn-var($btn-type, background, $bg-hover); + } + + &:hover { + box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-hover), + 0 2px 2px 0 $box-shadow-hover; + } + + &:focus { + box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-focus), + ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus); + } + + &:active:focus { + background-color: ide-btn-var($btn-type, background, $bg-active); + box-shadow: inset 0 0 0 ide-btn-var($btn-type, hover-border-width, $border-width-hover) ide-btn-var($btn-type, hover-border, $border-active), + ide-btn-var($btn-type, focus-box-shadow, $box-shadow-focus); + } + } + + .btn-default.gl-button.gl-button { + color: var(--ide-input-color, $gl-text-color); + + @include ide-gl-button(default, $white, $gray-50, $gray-100, $gray-200, $gray-300, $gray-300, $gray-400); + } + + .btn-success.gl-button.gl-button { + @include ide-gl-button(success, $green-500, $green-600, $green-800, $green-600, $green-800, $green-800, $green-900); + } + + .btn-info.gl-button.gl-button, + .btn-primary.gl-button.gl-button { + @include ide-gl-button(primary, $blue-500, $blue-600, $blue-800, $blue-600, $blue-800, $blue-800, $blue-900); + } + + .btn-danger.btn-danger-secondary.gl-button.gl-button { + color: var(--ide-input-color, $red-500); + + @include ide-gl-button(danger-secondary, $white, $red-50, $red-100, $red-500, $red-600, $red-600, $red-700); + } + + .btn[disabled].gl-button.gl-button { + color: var(--ide-btn-disabled-color, $gl-text-color-disabled); + + @include ide-gl-button(disabled, $gray-10, $gray-10, $gray-10, $gray-100, $gray-100, $gray-100, $gray-100, 1px, transparent, transparent); + } + .md table:not(.code) tbody { background-color: var(--ide-border-color, $white); } diff --git a/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss new file mode 100644 index 00000000000..499394ad960 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/_pipeline_mixins.scss @@ -0,0 +1,233 @@ +@mixin flat-connector-before($length: 44px) { + &::before { + content: ''; + position: absolute; + top: 48%; + left: -$length; + border-top: 2px solid $border-color; + width: $length; + height: 1px; + } +} + +@mixin build-content($border-radius: 30px) { + display: inline-block; + padding: 8px 10px 9px; + width: 100%; + border: 1px solid $border-color; + border-radius: $border-radius; + background-color: $white; + + &:hover { + background-color: $gray-darker; + border: 1px solid $dropdown-toggle-active-border-color; + color: $gl-text-color; + } +} + +@mixin mini-pipeline-graph-color( + $color-background-default, + $color-background-hover-focus, + $color-background-active, + $color-foreground-default, + $color-foreground-hover-focus, + $color-foreground-active +) { + background-color: $color-background-default; + border-color: $color-foreground-default; + + svg { + fill: $color-foreground-default; + } + + &:hover, + &:focus { + background-color: $color-background-hover-focus; + border-color: $color-foreground-hover-focus; + + svg { + fill: $color-foreground-hover-focus; + } + } + + &:active { + background-color: $color-background-active; + border-color: $color-foreground-active; + + svg { + fill: $color-foreground-active; + } + } + + &:focus { + box-shadow: 0 0 4px 1px $blue-300; + } +} + +@mixin mini-pipeline-item() { + border-radius: 100px; + background-color: $white; + border-width: 1px; + border-style: solid; + width: $ci-action-icon-size; + height: $ci-action-icon-size; + margin: 0; + padding: 0; + position: relative; + vertical-align: middle; + + &:hover, + &:active, + &:focus { + outline: none; + border-width: 2px; + } + + // Dropdown button animation in mini pipeline graph + &.ci-status-icon-success { + @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700); + } + + &.ci-status-icon-failed { + @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700); + } + + &.ci-status-icon-pending, + &.ci-status-icon-waiting-for-resource, + &.ci-status-icon-success-with-warnings { + @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); + } + + &.ci-status-icon-preparing, + &.ci-status-icon-running { + @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); + } + + &.ci-status-icon-canceled, + &.ci-status-icon-scheduled, + &.ci-status-icon-disabled, + &.ci-status-icon-not-found, + &.ci-status-icon-manual { + @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black); + } + + &.ci-status-icon-created, + &.ci-status-icon-skipped { + @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); + } +} + +/** + Action icons inside dropdowns: + - mini graph in pipelines table + - dropdown in big graph + - mini graph in MR widget pipeline + - mini graph in Commit widget pipeline +*/ +@mixin pipeline-graph-dropdown-menu() { + width: 240px; + max-width: 240px; + + // override dropdown.scss + &.dropdown-menu li button, + &.dropdown-menu li a.ci-action-icon-container { + padding: 0; + text-align: center; + } + + .ci-action-icon-container { + position: absolute; + right: 8px; + top: 8px; + + &.ci-action-icon-wrapper { + height: $ci-action-dropdown-button-size; + width: $ci-action-dropdown-button-size; + border-radius: 50%; + display: block; + + &:hover { + box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color; + background-color: $gray-darker; + + svg { + fill: $gl-text-color; + } + } + + .spinner, + svg { + width: $ci-action-dropdown-svg-size; + height: $ci-action-dropdown-svg-size; + fill: $gl-text-color-secondary; + position: relative; + top: 1px; + vertical-align: initial; + } + } + } + + // SVGs in the commit widget and mr widget + a.ci-action-icon-container.ci-action-icon-wrapper svg { + top: 5px; + } + + .scrollable-menu { + padding: 0; + max-height: 245px; + overflow: auto; + } + + li { + position: relative; + + // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered + &:hover > .mini-pipeline-graph-dropdown-item, + &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { + @extend .mini-pipeline-graph-dropdown-item:hover; + } + + // link to the build + .mini-pipeline-graph-dropdown-item { + align-items: center; + clear: both; + display: flex; + font-weight: normal; + line-height: $line-height-base; + white-space: nowrap; + + // Match dropdown.scss for all `a` tags + &.non-details-job-component { + padding: $gl-padding-8 $gl-btn-horz-padding; + } + + .ci-job-name-component { + align-items: center; + display: flex; + flex: 1; + } + + .ci-status-icon { + @include gl-mr-3; + + position: relative; + + > svg { + width: $pipeline-dropdown-status-icon-size; + height: $pipeline-dropdown-status-icon-size; + margin: 3px 0; + position: relative; + overflow: visible; + display: block; + } + } + + &:hover, + &:focus { + outline: none; + text-decoration: none; + background-color: $gray-darker; + } + } + } +} diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index c4852974a4d..e908e3622ed 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/page_bundles/boards.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .user-can-drag { cursor: grab; } @@ -25,7 +27,7 @@ margin: 0; padding: $gl-padding-4 $gl-padding $gl-padding; border-bottom: 0; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); } .issue-boards-page { @@ -100,7 +102,7 @@ } &:hover { - background-color: $gray-50; + background-color: var(--gray-50, $gray-50); transition: background-color 0.1s linear; } } @@ -165,8 +167,8 @@ .board-inner { font-size: $issue-boards-font-size; - background: $gray-light; - border: 1px solid $gray-100; + background: var(--gray-10, $gray-10); + border: 1px solid var(--gray-100, $gray-100); } .board-header { @@ -197,7 +199,7 @@ .board-title { align-items: center; font-size: 1em; - border-bottom: 1px solid $gray-100; + border-bottom: 1px solid var(--gray-100, $gray-100); padding: 0 $gl-spacing-scale-3; height: 3rem; @@ -215,14 +217,14 @@ outline: 0; &:hover { - color: $blue-600; + color: var(--blue-600, $blue-600); box-shadow: none; } } .board-blank-state, .board-promotion-state { - background-color: $white; + background-color: var(--white, $white); flex: 1; overflow-y: auto; overflow-x: hidden; @@ -256,9 +258,9 @@ } .board-card { - background: $white; - border: 1px solid $gray-100; - box-shadow: 0 1px 2px $issue-boards-card-shadow; + background: var(--white, $white); + border: 1px solid var(--gray-100, $gray-100); + box-shadow: 0 1px 2px rgba(var(--black, $black), 0.1); line-height: $gl-padding; list-style: none; position: relative; @@ -269,12 +271,12 @@ &.is-active, &.is-active .board-card-assignee:hover a { - background-color: $blue-50; + background-color: var(--blue-50, $blue-50); } &.multi-select { - border-color: $blue-200; - background-color: $blue-50; + border-color: var(--blue-200, $blue-200); + background-color: var(--blue-50, $blue-50); } .gl-label { @@ -283,12 +285,12 @@ } .confidential-icon { - color: $orange-500; + color: var(--orange-500, $orange-500); cursor: help; } .issue-blocked-icon { - color: $red-500; + color: var(--red-500, $red-500); } @include media-breakpoint-down(md) { @@ -301,7 +303,7 @@ font-size: 1em; a { - color: $gl-text-color; + color: var(--gray-900, $gray-900); } @include media-breakpoint-down(md) { @@ -323,7 +325,7 @@ min-width: $gl-padding-24; height: $gl-padding-24; border-radius: $gl-padding-24; - background-color: $gl-text-color-tertiary; + background-color: var(--gray-400, $gray-400); font-size: $gl-font-size-xs; cursor: help; font-weight: $gl-font-weight-bold; @@ -356,8 +358,6 @@ } .avatar { - margin: 0; - @include media-breakpoint-down(md) { width: $gl-padding; height: $gl-padding; @@ -372,7 +372,7 @@ .board-card-number { font-size: $gl-font-size-xs; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); @include media-breakpoint-up(md) { font-size: $label-font-size; @@ -381,7 +381,7 @@ .board-list-count { padding: 10px 0; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); font-size: 13px; } @@ -437,8 +437,8 @@ max-width: 1100px; min-height: 500px; padding: 25px 15px 0; - background-color: $white; - box-shadow: 0 2px 12px rgba($black, 0.5); + background-color: var(--white, $white); + box-shadow: 0 2px 12px rgba(var(--black, $black), 0.5); .empty-state { &.add-issues-empty-state-filter { @@ -486,8 +486,8 @@ } .board-card { - border: 1px solid $border-white-normal; - box-shadow: 0 1px 2px rgba($issue-boards-card-shadow, 0.3); + border: 1px solid var(--gray-900, $gray-900); + box-shadow: 0 1px 2px rgba(var(--black, $black), 0.4); cursor: pointer; } } @@ -511,16 +511,16 @@ right: -3px; top: -3px; width: 17px; - background-color: $blue-500; + background-color: var(--blue-500, $blue-500); color: $white; - border: 1px solid $blue-600; + border: 1px solid var(--blue-600, $blue-600); font-size: 9px; line-height: 15px; border-radius: 50%; } .board-card-info { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); white-space: nowrap; margin-right: $gl-padding-8; @@ -529,7 +529,7 @@ } &.board-card-weight { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); cursor: pointer; &:hover { @@ -539,7 +539,7 @@ } .board-card-info-icon { - color: $gray-500; + color: var(--gray-500, $gray-500); margin-right: $gl-padding-4; vertical-align: text-top; } @@ -568,7 +568,7 @@ height: 100%; top: 0; left: 0; - background: $white; + background: var(--white, $white); z-index: 9000; @include media-breakpoint-down(sm) { @@ -591,7 +591,7 @@ } .board-header-collapsed-info-icon:hover { - color: $gray-900; + color: var(--gray-900, $gray-900); } $epic-icons-spacing: 40px; diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/page_bundles/cycle_analytics.scss index c509bf121bc..3a5e2e4159d 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/page_bundles/cycle_analytics.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + #cycle-analytics, .cycle-analytics { margin: 24px auto 0; @@ -84,7 +86,7 @@ } .text { - color: $layout-link-gray; + color: var(--gray-500, $gray-500); margin: 0; } @@ -127,14 +129,14 @@ line-height: 65px; &.active { - background: $blue-50; - border-color: $blue-300; - box-shadow: inset 4px 0 0 0 $blue-500; + 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: $gray-lightest; - box-shadow: inset 2px 0 0 0 $border-color; + background-color: var(--gray-10, $gray-10); + box-shadow: inset 2px 0 0 0 var(--border-color, $border-color); cursor: pointer; } @@ -148,7 +150,7 @@ .stage-empty, .not-available { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); } } } @@ -172,7 +174,7 @@ } .events-info { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); } } @@ -191,7 +193,7 @@ list-style-type: none; padding: 0 0 $gl-padding; margin: 0 $gl-padding $gl-padding; - border-bottom: 1px solid $gray-darker; + border-bottom: 1px solid var(--gray-50, $gray-50); &:last-child { border-bottom: 0; @@ -220,7 +222,7 @@ display: block; a { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } } } @@ -232,24 +234,24 @@ .total-time { font-size: $cycle-analytics-big-font; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); span { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); font-size: $gl-font-size; } } .issue-date, .build-date { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } .mr-link, .issue-link, .commit-author-link, .issue-author-link { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } // Custom CSS for components @@ -287,16 +289,16 @@ } .item-build-name { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } .pipeline-id { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); padding: 0 3px 0 0; } .ref-name { - color: $black; + color: var(--gray-900, $gray-900); display: inline-block; max-width: 180px; text-overflow: ellipsis; @@ -307,14 +309,14 @@ } .commit-sha { - color: $blue-600; + color: var(--blue-600, $blue-600); line-height: 1.3; vertical-align: top; font-weight: $gl-font-weight-normal; } .fa { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); font-size: $code-font-size; } } @@ -326,10 +328,10 @@ width: 75%; margin: 0 auto; padding-top: 130px; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); h4 { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } } diff --git a/app/assets/stylesheets/pages/dev_ops_report.scss b/app/assets/stylesheets/page_bundles/dev_ops_report.scss index 871cd9c4f02..5c6019efce6 100644 --- a/app/assets/stylesheets/pages/dev_ops_report.scss +++ b/app/assets/stylesheets/page_bundles/dev_ops_report.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + $space-between-cards: 8px; .devops-empty svg { @@ -21,7 +23,7 @@ $space-between-cards: 8px; .devops-header-subtitle { font-size: 22px; line-height: 1; - color: $gl-text-color-secondary; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); margin-left: 8px; font-weight: $gl-font-weight-normal; @@ -31,10 +33,10 @@ $space-between-cards: 8px; a { font-size: 18px; - color: $gl-text-color-secondary; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); &:hover { - color: $blue-500; + color: var(--blue-500, $blue-500); } } } @@ -52,7 +54,7 @@ $space-between-cards: 8px; align-items: stretch; text-align: center; width: 50%; - border-color: $border-color; + border-color: var(--border-color, $border-color); margin: 0 0 32px; padding: $space-between-cards / 2; position: relative; @@ -75,7 +77,7 @@ $space-between-cards: 8px; } .devops-card { - border: solid 1px $border-color; + border: solid 1px var(--border-color, $border-color); border-radius: 3px; border-top-width: 3px; display: flex; @@ -84,26 +86,26 @@ $space-between-cards: 8px; } .devops-card-low { - border-top-color: $red-400; + border-top-color: var(--red-400, $red-400); .board-card-score-big { - background-color: $red-50; + background-color: var(--red-50, $red-50); } } .devops-card-average { - border-top-color: $orange-200; + border-top-color: var(--orange-200, $orange-200); .board-card-score-big { - background-color: $orange-50; + background-color: var(--orange-50, $orange-50); } } .devops-card-high { - border-top-color: $green-400; + border-top-color: var(--green-400, $green-400); .board-card-score-big { - background-color: $green-50; + background-color: var(--green-50, $green-50); } } @@ -119,7 +121,7 @@ $space-between-cards: 8px; .light-text { font-size: 13px; line-height: 1.25; - color: $gl-text-color-secondary; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); } } @@ -132,7 +134,7 @@ $space-between-cards: 8px; } .board-card-score { - color: $gl-text-color-secondary; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); .board-card-score-name { font-size: 13px; @@ -142,13 +144,13 @@ $space-between-cards: 8px; .board-card-score-value { font-size: 16px; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); font-weight: $gl-font-weight-normal; } .board-card-score-big { - border-top: 2px solid $border-color; - border-bottom: 1px solid $border-color; + border-top: 2px solid var(--border-color, $border-color); + border-bottom: 1px solid var(--border-color, $border-color); font-size: 22px; padding: 10px 0; font-weight: $gl-font-weight-normal; @@ -159,17 +161,17 @@ $space-between-cards: 8px; > * { font-size: 16px; - color: $gl-text-color-secondary; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); padding: 10px; flex-grow: 1; &:hover { - background-color: $border-color; - color: $gl-text-color; + background-color: var(--border-color, $border-color); + color: var(--border-color, $border-color); } + * { - border-left: solid 1px $border-color; + border-left: solid 1px var(--border-color, $border-color); } } } @@ -180,7 +182,7 @@ $space-between-cards: 8px; min-width: 100%; justify-content: space-around; position: relative; - background: $border-color; + background: var(--border-color, $border-color); } .devops-step { @@ -202,12 +204,12 @@ $space-between-cards: 8px; display: flex; flex-direction: column; align-items: center; - border: solid 1px $border-color; - background: $white; + border: solid 1px var(--border-color, $border-color); + background: var(--white, $white); transform: translate(-50%, -50%); - color: $gl-text-color-secondary; - fill: $gl-text-color-secondary; - box-shadow: 0 2px 4px $dropdown-shadow-color; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + fill: var(--gl-text-color-secondary, $gl-text-color-secondary); + box-shadow: 0 2px 4px var(--dropdown-shadow-color, $dropdown-shadow-color); &:hover { padding: 8px 10px; @@ -247,13 +249,13 @@ $space-between-cards: 8px; } .devops-high-score { - color: $green-400; + color: var(--green-400, $green-400); } .devops-average-score { - color: $orange-500; + color: var(--orange-500, $orange-500); } .devops-low-score { - color: $red-400; + color: var(--red-400, $red-400); } diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/page_bundles/environments.scss index 5ce500dad1d..871f118ea9d 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/page_bundles/environments.scss @@ -1,13 +1,4 @@ -@include media-breakpoint-down(md) { - .deployments-container { - width: 100%; - overflow: auto; - } -} - -.environments-folder-name { - font-weight: $gl-font-weight-normal; -} +@import 'page_bundles/mixins_and_variables_and_functions'; .environments-container { .ci-table { @@ -17,24 +8,24 @@ .external-url, .dropdown-new { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); } .build-link, .ref-name { - color: $gl-text-color; + color: var(--gray-900, $gray-900); } .folder-icon { margin-right: 3px; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); display: inline-block; vertical-align: text-top; } .folder-name { cursor: pointer; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); display: inline-block; } @@ -83,17 +74,17 @@ .x-axis path, .y-axis path { - stroke: $gray-300; + stroke: var(--gray-300, $gray-300); } .label-x-axis-line, .label-y-axis-line { - stroke: $border-color; + stroke: var(--gray-100, $gray-100); } .y-axis { line { - stroke: $gray-300; + stroke: var(--gray-300, $gray-300); stroke-width: 1; } } @@ -103,13 +94,13 @@ } .rect-text-metric { - fill: $white; + fill: var(--white, $white); stroke-width: 1; - stroke: $gray-darkest; + stroke: var(--gray-600, $gray-600); } .rect-axis-text { - fill: $white; + fill: var(--white, $white); } .text-metric { @@ -117,18 +108,18 @@ } .selected-metric-line { - stroke: $gray-900; + stroke: var(--gray-900, $gray-900); stroke-width: 1; } .deployment-line { - stroke: $black; + stroke: var(--white, $white); stroke-width: 1; } .divider-line { stroke-width: 1; - stroke: $gray-darkest; + stroke: var(--gray-600, $gray-600); } .environments-actions { diff --git a/app/assets/stylesheets/pages/error_details.scss b/app/assets/stylesheets/page_bundles/error_tracking_details.scss index 78cac12d6be..a47c5cc9b3e 100644 --- a/app/assets/stylesheets/pages/error_details.scss +++ b/app/assets/stylesheets/page_bundles/error_tracking_details.scss @@ -1,15 +1,17 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + .error-details { li { @include gl-line-height-32; } .btn-outline-info { - color: $blue-500; - border-color: $blue-500; + color: var(--blue-500, $blue-500); + border-color: var(--blue-500, $blue-500); } .error-details-header { - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-color, $border-color); @include media-breakpoint-down(xs) { flex-flow: column; diff --git a/app/assets/stylesheets/pages/error_list.scss b/app/assets/stylesheets/page_bundles/error_tracking_index.scss index 3ec3e4f6b43..65bddfb7890 100644 --- a/app/assets/stylesheets/pages/error_list.scss +++ b/app/assets/stylesheets/page_bundles/error_tracking_index.scss @@ -1,4 +1,10 @@ +@import 'page_bundles/mixins_and_variables_and_functions'; + .error-list { + .dropdown { + min-width: auto; + } + .sort-control { .btn { padding-right: 2rem; @@ -17,7 +23,7 @@ min-height: 68px; &:last-child { - background-color: $gray-10; + background-color: var(--gray-10, $gray-10); &::before { content: none !important; diff --git a/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss new file mode 100644 index 00000000000..337b5b001fe --- /dev/null +++ b/app/assets/stylesheets/page_bundles/experimental_separate_sign_up.scss @@ -0,0 +1,96 @@ +@import 'mixins_and_variables_and_functions'; + +.signup-page { + .page-wrap { + background-color: var(--gray-10, $gray-10); + } + + .signup-box-container { + max-width: 960px; + } + + .signup-box { + background-color: var(--white, $white); + box-shadow: 0 0 0 1px var(--border-color, $border-color); + border-radius: $border-radius; + } + + .form-control { + &:active, + &:focus { + background-color: var(--white, $white); + } + } + + .devise-errors { + h2 { + font-size: $gl-font-size; + color: var(--red-700, $red-700); + } + } + + .omniauth-divider { + &::before, + &::after { + content: ''; + flex: 1; + border-bottom: 1px solid var(--gray-100, $gray-100); + margin: $gl-padding-24 0; + } + + &::before { + margin-right: $gl-padding; + } + + &::after { + margin-left: $gl-padding; + } + } + + .omniauth-btn { + width: 48%; + + @include media-breakpoint-down(md) { + width: 100%; + } + + img { + width: $default-icon-size; + height: $default-icon-size; + } + } + + .decline-page { + width: 350px; + } +} + +.signup-page[data-page^='registrations:experience_levels'] { + $card-shadow-color: rgba(var(--black, $black), 0.2); + + .page-wrap { + background-color: var(--white, $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/page_bundles/ide_themes/_dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss index 37e6be9849b..41f9a8e6db7 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_dark.scss @@ -20,20 +20,28 @@ --ide-btn-default-background: transparent; --ide-btn-default-border: #bfbfbf; --ide-btn-default-hover-border: #d8d8d8; + --ide-btn-default-hover-border-width: 2px; + --ide-btn-default-focus-box-shadow: 0 0 0 1px #bfbfbf; --ide-btn-primary-background: #1068bf; --ide-btn-primary-border: #428fdc; --ide-btn-primary-hover-border: #63a6e9; + --ide-btn-primary-hover-border-width: 2px; + --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9; --ide-btn-success-background: #217645; --ide-btn-success-border: #108548; --ide-btn-success-hover-border: #2da160; + --ide-btn-success-hover-border-width: 2px; + --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160; + --ide-btn-disabled-background: transparent; --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border-width: 1px; + --ide-btn-disabled-focus-box-shadow: 0 0 0 0 transparent; --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); - --ide-btn-hover-border-width: 2px; - --ide-dropdown-background: #404040; --ide-dropdown-hover-background: #525252; diff --git a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss index 0ef0834d8db..ccb6f7a333b 100644 --- a/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss +++ b/app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss @@ -18,22 +18,30 @@ --ide-input-color: #fff; --ide-btn-default-background: transparent; - --ide-btn-default-border: var(--ide-input-border); + --ide-btn-default-border: #d8d8d8; --ide-btn-default-hover-border: #d8d8d8; + --ide-btn-default-hover-border-width: 2px; + --ide-btn-default-focus-box-shadow: 0 0 0 1px #d8d8d8; --ide-btn-primary-background: #1068bf; --ide-btn-primary-border: #428fdc; --ide-btn-primary-hover-border: #63a6e9; + --ide-btn-primary-hover-border-width: 2px; + --ide-btn-primary-focus-box-shadow: 0 0 0 1px #63a6e9; --ide-btn-success-background: #217645; --ide-btn-success-border: #108548; --ide-btn-success-hover-border: #2da160; + --ide-btn-success-hover-border-width: 2px; + --ide-btn-success-focus-box-shadow: 0 0 0 1px #2da160; + --ide-btn-disabled-background: transparent; --ide-btn-disabled-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border: rgba(223, 223, 223, 0.24); + --ide-btn-disabled-hover-border-width: 1px; + --ide-btn-disabled-focus-box-shadow: transparent; --ide-btn-disabled-color: rgba(145, 145, 145, 0.48); - --ide-btn-hover-border-width: 2px; - --ide-dropdown-background: #004c61; --ide-dropdown-hover-background: #00617a; diff --git a/app/assets/stylesheets/page_bundles/issues_list.scss b/app/assets/stylesheets/page_bundles/issues_list.scss new file mode 100644 index 00000000000..8a958bdf0c5 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/issues_list.scss @@ -0,0 +1,45 @@ +@import 'mixins_and_variables_and_functions'; + +.issues-list { + &.manual-ordering { + background-color: var(--gray-10, $gray-10); + border-radius: $border-radius-default; + padding: $gl-padding-8; + + .issue { + background-color: var(--white, $white); + margin-bottom: $gl-padding-8; + border-radius: $border-radius-default; + border: 1px solid var(--border-color, $border-color); + box-shadow: 0 1px 2px $issue-boards-card-shadow; + } + } + + .issue { + padding: 10px $gl-padding; + position: relative; + + .title { + margin-bottom: 2px; + } + + .issue-labels, + .author-link { + display: inline-block; + } + + .icon-merge-request-unmerged { + height: 13px; + margin-bottom: 3px; + } + } +} + +.user-can-drag { + cursor: grab; +} + +.is-ghost { + opacity: 0.3; + pointer-events: none; +} diff --git a/app/assets/stylesheets/page_bundles/jira_connect.scss b/app/assets/stylesheets/page_bundles/jira_connect.scss index 83d16f29d49..b8cdd120e04 100644 --- a/app/assets/stylesheets/page_bundles/jira_connect.scss +++ b/app/assets/stylesheets/page_bundles/jira_connect.scss @@ -13,6 +13,7 @@ $atlaskit-border-color: #dfe1e6; padding-top: $gl-padding-4; .ak-button { + align-items: center; height: auto; margin-left: $btn-margin-5; } @@ -20,6 +21,74 @@ $atlaskit-border-color: #dfe1e6; } } +$header-height: 40px; + +.jira-connect-header { + border-bottom: 1px solid $gray-100; + display: flex; + align-items: center; + justify-content: center; + min-height: $header-height; + padding-left: 16px; + padding-right: 16px; + position: fixed; + top: 0; + left: 0; + right: 0; +} + +.jira-connect-user { + float: right; + position: relative; + top: -30px; +} + +.jira-connect-app { + margin-top: $header-height; + max-width: 600px; + padding-top: 48px; + padding-left: 16px; + padding-right: 16px; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +.gl-mt-5 { + margin-top: 16px; +} + +.heading-with-border { + border-bottom: 1px solid $gray-100; + display: inline-block; + padding-bottom: 16px; +} + +svg { + fill: currentColor; + + &.s16 { + height: 16px; + width: 16px; + } +} + +.ak-field-group label { + text-align: left; +} + +.ak-button__appearance-primary { + &:hover { + color: $white; + text-decoration: none; + } + + svg { + align-self: center; + margin-left: 4px; + } +} + .subscriptions { tbody { tr { @@ -31,3 +100,11 @@ $atlaskit-border-color: #dfe1e6; } } } + +.empty-subscriptions { + color: $gray-900; +} + +.browser-limitations-notice { + margin-top: 32px; +} diff --git a/app/assets/stylesheets/page_bundles/jira_connect_users.scss b/app/assets/stylesheets/page_bundles/jira_connect_users.scss new file mode 100644 index 00000000000..6725bf8f1a1 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/jira_connect_users.scss @@ -0,0 +1,13 @@ +@import 'mixins_and_variables_and_functions'; + +.jira-connect-users-container { + margin-left: auto; + margin-right: auto; + width: px-to-rem(350px); +} + +.devise-layout-html body .navless-container { + @include media-breakpoint-down(xs) { + padding-top: 65px; + } +} diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/page_bundles/merge_conflicts.scss index 9d583dcaa52..b0655408edf 100644 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ b/app/assets/stylesheets/page_bundles/merge_conflicts.scss @@ -1,3 +1,4 @@ +@import 'mixins_and_variables_and_functions'; // Disabled to use the color map for creating color schemes // scss-lint:disable ColorVariable $colors: ( @@ -225,6 +226,14 @@ $colors: ( .solarized-dark { @include color-scheme('solarized-dark'); } + .none { + .line_content.header { + button { + color: $gray-900; + } + } + } + .diff-wrap-lines .line_content { white-space: normal; min-height: 19px; @@ -240,14 +249,14 @@ $colors: ( right: 10px; padding: 0; outline: none; - color: $white; + color: var(--white, $white); width: 75px; // static width to make 2 buttons have same width height: 19px; } } .btn-success .fa-spinner { - color: $white; + color: var(--white, $white); } .editor-wrap { @@ -263,7 +272,7 @@ $colors: ( &.saved { .editor { - border-top: solid 2px $green-300; + border-top: solid 2px var(--green-300, $green-300); } } @@ -282,10 +291,10 @@ $colors: ( } .discard-changes-alert { - background-color: $gray-light; + background-color: var(--gray-10, $gray-10); text-align: right; padding: $gl-padding-top $gl-padding; - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); .discard-actions { display: inline-block; diff --git a/app/assets/stylesheets/page_bundles/merge_requests.scss b/app/assets/stylesheets/page_bundles/merge_requests.scss new file mode 100644 index 00000000000..5553dffac05 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/merge_requests.scss @@ -0,0 +1,96 @@ +@import 'mixins_and_variables_and_functions'; + +.compare-versions-container { + min-width: 0; +} + +.diff-files-holder { + flex: 1; + min-width: 0; + z-index: 201; +} + +.diff-tree-list { + position: -webkit-sticky; + position: sticky; + $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 15px; + top: $top-pos; + max-height: calc(100vh - #{$top-pos}); + z-index: 202; + + .with-system-header & { + top: $top-pos + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $top-pos + $system-header-height + $performance-bar-height; + } + + .with-performance-bar & { + $performance-bar-top-pos: $performance-bar-height + $top-pos; + top: $performance-bar-top-pos; + max-height: calc(100vh - #{$performance-bar-top-pos}); + } + + .drag-handle { + bottom: 16px; + transform: translateX(10px); + } +} + +.tree-list-holder { + height: 100%; + + .file-row { + margin-left: 0; + margin-right: 0; + } +} + +.tree-list-scroll { + max-height: 100%; + padding-bottom: $grid-size; + overflow-y: scroll; + overflow-x: auto; +} + +.tree-list-search { + flex: 0 0 34px; + + .form-control { + padding-left: 30px; + } +} + +.tree-list-icon { + top: 50%; + left: 10px; + transform: translateY(-50%); + + &, + svg { + fill: var(--gray-400, $gray-400); + } +} + +.tree-list-clear-icon { + right: 10px; + left: auto; + line-height: 0; +} + +@media (max-width: map-get($grid-breakpoints, md)-1) { + .diffs .files { + .diff-tree-list { + position: relative; + top: 0; + // !important is required to override inline styles of resizable sidebar + width: 100% !important; + } + + .tree-list-holder { + max-height: calc(50px + 50vh); + padding-right: 0; + } + } +} diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index e9eb79b071c..858e13fc558 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/page_bundles/milestone.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + $status-box-line-height: 26px; .issues-sortable-list .str-truncated { @@ -8,13 +10,13 @@ $status-box-line-height: 26px; padding: $gl-padding-8; margin-top: $gl-padding-8; border-radius: $border-radius-default; - background-color: $gray-100; + background-color: var(--gray-100, $gray-100); .milestone { border: 0; padding: $gl-padding-top $gl-padding; border-radius: $border-radius-default; - background-color: $white; + background-color: var(--white, $white); &:not(:last-child) { margin-bottom: $gl-padding-4; @@ -33,7 +35,7 @@ $status-box-line-height: 26px; .milestone-progress, .milestone-release-links { a { - color: $blue-600; + color: var(--blue-600, $blue-600); } } @@ -61,7 +63,7 @@ $status-box-line-height: 26px; .issuable-row { span { a { - color: $gl-text-color; + color: var(--gray-900, $gray-900); word-wrap: break-word; } @@ -162,7 +164,7 @@ $status-box-line-height: 26px; } .issuable-number { - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); margin-right: 5px; } @@ -177,7 +179,7 @@ $status-box-line-height: 26px; } .milestone-detail { - border-bottom: 1px solid $border-color; + border-bottom: 1px solid var(--border-color, $border-color); } @include media-breakpoint-down(xs) { @@ -233,7 +235,7 @@ $status-box-line-height: 26px; } .issuable-row { - background-color: $white; + background-color: var(--white, $white); } .milestone-popover-instructions-list { diff --git a/app/assets/stylesheets/page_bundles/pipeline.scss b/app/assets/stylesheets/page_bundles/pipeline.scss new file mode 100644 index 00000000000..8e7be629481 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/pipeline.scss @@ -0,0 +1,484 @@ +@import 'mixins_and_variables_and_functions'; +@import './pipeline_mixins'; + +/** + * Pipeline Page Bundle + * + * Styles used to render a single pipeline page. + * + * Includes its tabs: + * + * - [data-page='projects:pipelines:show'] + * - [data-page='projects:pipelines:dag'] + * - [data-page='projects:pipelines:builds'] + * - [data-page='projects:pipelines:failures'] + * - [data-page='projects:pipelines:tests'] + * - ... + */ + +.tab-pane { + .ci-table { + thead th { + border-top: 0; + } + } +} + +.build-failures { + .build-state { + padding: 20px 2px; + + .build-name { + font-weight: $gl-font-weight-normal; + } + + .stage { + color: $gl-text-color-secondary; + font-weight: $gl-font-weight-normal; + vertical-align: middle; + } + } + + .build-log { + border: 0; + line-height: initial; + } + + .build-trace-row td { + border-top: 0; + border-bottom-width: 1px; + border-bottom-style: solid; + padding-top: 0; + } + + .build-trace { + width: 100%; + text-align: left; + margin-top: $gl-padding; + } + + .build-name { + width: 196px; + + a { + font-weight: $gl-font-weight-bold; + color: $gl-text-color; + text-decoration: none; + + &:focus, + &:hover { + text-decoration: underline; + } + } + } + + .build-actions { + width: 70px; + text-align: right; + } + + .build-stage { + width: 140px; + } + + .ci-status-icon-failed { + padding: 10px 0 10px 12px; + width: 12px + 24px; // padding-left + svg width + } + + .build-icon svg { + width: 24px; + height: 24px; + vertical-align: middle; + } + + .build-state, + .build-trace-row { + > td:last-child { + padding-right: 0; + } + } + + @include media-breakpoint-down(sm) { + td:empty { + display: none; + } + + .ci-table { + margin-top: 2 * $gl-padding; + } + + .build-trace-container { + padding-top: $gl-padding; + padding-bottom: $gl-padding; + } + + .build-trace { + margin-bottom: 0; + margin-top: 0; + } + } +} + +.pipeline-tab-content { + display: flex; + width: 100%; + min-height: $dropdown-max-height-lg; + background-color: $gray-light; + padding: $gl-padding 0; + overflow: auto; +} + +// Pipeline graph, used at +// app/assets/javascripts/pipelines/components/graph/graph_component.vue +.pipeline-graph { + white-space: nowrap; + transition: max-height 0.3s, padding 0.3s; + + .stage-column-list, + .builds-container > ul { + padding: 0; + } + + a { + text-decoration: none; + color: $gl-text-color; + } + + svg { + vertical-align: middle; + } + + .stage-column { + display: inline-block; + vertical-align: top; + + &.left-margin { + &:not(:first-child) { + margin-left: 44px; + + .left-connector { + @include flat-connector-before; + } + } + } + + &.no-margin { + margin: 0; + } + + li { + list-style: none; + } + + // when downstream pipelines are present, the last stage isn't the last column + &:last-child:not(.has-downstream) { + .build { + // Remove right connecting horizontal line from first build in last stage + &:first-child::after { + border: 0; + } + // Remove right curved connectors from all builds in last stage + &:not(:first-child)::after { + border: 0; + } + // Remove opposite curve + .curve::before { + display: none; + } + } + } + + // when upstream pipelines are present, the first stage isn't the first column + &:first-child:not(.has-upstream) { + .build { + // Remove left curved connectors from all builds in first stage + &:not(:first-child)::before { + border: 0; + } + // Remove opposite curve + .curve::after { + display: none; + } + } + } + + // Curve first child connecting lines in opposite direction + .curve { + display: none; + + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } + + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; + } + + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } + } + } + + .stage-name { + margin: 0 0 15px 10px; + font-weight: $gl-font-weight-bold; + width: 176px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 2.2em; + } + + .build { + position: relative; + width: 186px; + margin-bottom: 10px; + white-space: normal; + + .ci-job-dropdown-container { + // override dropdown.scss + .dropdown-menu li button { + padding: 0; + text-align: center; + } + } + + // ensure .build-content has hover style when action-icon is hovered + .ci-job-dropdown-container:hover .build-content { + @extend .build-content:hover; + } + + .ci-status-icon svg { + height: 24px; + width: 24px; + } + + .dropdown-menu-toggle { + background-color: transparent; + border: 0; + padding: 0; + + &:focus { + outline: none; + } + } + + .build-content { + @include build-content(); + } + + a.build-content:hover, + button.build-content:hover { + background-color: $gray-darker; + border: 1px solid $dropdown-toggle-active-border-color; + } + + // Connect first build in each stage with right horizontal line + &:first-child { + &::after { + content: ''; + position: absolute; + top: 48%; + right: -48px; + border-top: 2px solid $border-color; + width: 48px; + height: 1px; + } + } + + // Connect each build (except for first) with curved lines + &:not(:first-child) { + &::after, + &::before { + content: ''; + top: -49px; + position: absolute; + border-bottom: 2px solid $border-color; + width: 25px; + height: 69px; + } + + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } + + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; + } + } + + // Connect second build to first build with smaller curved line + &:nth-child(2) { + &::after, + &::before { + height: 29px; + top: -9px; + } + + .curve { + display: block; + } + } + } + + .ci-action-icon-container { + position: absolute; + right: 5px; + top: 50%; + transform: translateY(-50%); + + // Action Icons in big pipeline-graph nodes + &.ci-action-icon-wrapper { + height: 30px; + width: 30px; + border-radius: 100%; + display: block; + padding: 0; + line-height: 0; + + svg { + fill: $gl-text-color-secondary; + } + + .spinner { + top: 2px; + } + + &.play { + svg { + left: 1px; + top: 1px; + } + } + } + } + + .stage-action svg { + left: 1px; + top: -2px; + } +} + +// Triggers the dropdown in the big pipeline graph +.dropdown-counter-badge { + font-weight: 100; + font-size: 15px; + position: absolute; + right: 13px; + top: 8px; +} + +.split-report-section { + border-bottom: 1px solid var(--gray-50, $gray-50); + + .report-block-container { + max-height: 500px; + overflow: auto; + } + + .space-children, + .space-children > span { + display: flex; + align-self: center; + } + + .media { + align-items: center; + padding: 10px; + line-height: 20px; + + /* + This fixes the wrapping div of the icon in the report header. + Apparently the borderless status icons are half the size of the status icons with border. + This means we have to double the size of the wrapping div for borderless icons. + */ + .space-children:first-child { + width: 32px; + height: 32px; + align-items: center; + justify-content: center; + margin-right: 5px; + margin-left: 1px; + } + } + + .code-text { + width: 100%; + flex: 1; + } +} + +.big-pipeline-graph-dropdown-menu { + @include pipeline-graph-dropdown-menu(); + width: 195px; + min-width: 195px; + left: 100%; + top: -10px; + box-shadow: 0 1px 5px $black-transparent; + + /** + * Top arrow in the dropdown in the big pipeline graph + */ + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: 18px; + } + + &::before { + left: -6px; + margin-top: 3px; + border-width: 7px 5px 7px 0; + border-right-color: $border-color; + } + + &::after { + left: -5px; + border-width: 10px 7px 10px 0; + border-right-color: $white; + } +} + +.codequality-report { + .media { + padding: $gl-padding; + } + + .media-body { + flex-direction: row; + } + + .report-block-container { + height: auto !important; + } +} + +.test-reports-table { + .build-trace { + @include build-trace(); + } +} diff --git a/app/assets/stylesheets/page_bundles/pipelines.scss b/app/assets/stylesheets/page_bundles/pipelines.scss new file mode 100644 index 00000000000..6ff07017d2e --- /dev/null +++ b/app/assets/stylesheets/page_bundles/pipelines.scss @@ -0,0 +1,195 @@ +@import 'mixins_and_variables_and_functions'; +@import './pipeline_mixins'; + +/** + * Pipelines Bundle: Pipeline lists and Mini Pipelines + */ + +// Pipelines list +// Should affect pipelines table components rendered by: +// - app/assets/javascripts/commit/pipelines/pipelines_bundle.js + +.pipelines { + .badge { + margin-bottom: 3px; + } + + .pipeline-actions { + min-width: 170px; //Guarantees buttons don't break in several lines. + + .btn-default { + color: $gl-text-color-secondary; + } + + .btn.btn-retry:hover, + .btn.btn-retry:focus { + border-color: $dropdown-toggle-active-border-color; + background-color: $white-normal; + } + + svg path { + fill: $gl-text-color-secondary; + } + + .dropdown-menu { + max-height: $dropdown-max-height; + overflow-y: auto; + } + + .dropdown-toggle, + .dropdown-menu { + color: $gl-text-color-secondary; + + .fa { + color: $gl-text-color-secondary; + font-size: 14px; + } + } + + .btn-group.open .btn-default { + background-color: $white-normal; + border-color: $border-white-normal; + } + + .btn .text-center { + display: inline; + } + + .tooltip { + white-space: nowrap; + } + } + + .pipeline-tags .label-container { + white-space: normal; + } +} + +// Mini Pipelines + +.stage-cell { + .mini-pipeline-graph-dropdown-toggle { + svg { + height: $ci-action-icon-size; + width: $ci-action-icon-size; + position: absolute; + top: -1px; + left: -1px; + z-index: 2; + overflow: visible; + } + + &:hover, + &:active, + &:focus { + svg { + top: -2px; + left: -2px; + } + } + } + + .stage-container { + display: inline-block; + position: relative; + vertical-align: middle; + height: $ci-action-icon-size; + margin: 3px 0; + + + .stage-container { + margin-left: 6px; + } + + // Hack to show a button tooltip inline + button.has-tooltip + .tooltip { + min-width: 105px; + } + + // Bootstrap way of showing the content inline for anchors. + a.has-tooltip { + white-space: nowrap; + } + + &:not(:last-child) { + &::after { + content: ''; + width: 7px; + position: absolute; + right: -7px; + top: 11px; + border-bottom: 2px solid $border-color; + } + } + + //delete when all pipelines are updated to new size + &.mr-widget-pipeline-stages { + + .stage-container { + margin-left: 4px; + } + + &:not(:last-child) { + &::after { + width: 4px; + right: -4px; + top: 11px; + } + } + } + } +} + +// Dropdown button in mini pipeline graph +button.mini-pipeline-graph-dropdown-toggle { + @include mini-pipeline-item(); +} + +// Action icons inside dropdowns: +// mini graph in pipelines table +// mini graph in MR widget pipeline +// mini graph in Commit widget pipeline +.mini-pipeline-graph-dropdown-menu { + @include pipeline-graph-dropdown-menu(); + + &::before, + &::after { + content: ''; + display: inline-block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + top: -6px; + left: 50%; + transform: translate(-50%, 0); + border-width: 0 5px 6px; + + @include media-breakpoint-down(sm) { + left: 100%; + margin-left: -12px; + } + } + + &::before { + border-width: 0 5px 5px; + border-bottom-color: $border-color; + } + + &::after { + margin-top: 1px; + border-bottom-color: $white; + } + + /** + * Center dropdown menu in mini graph + */ + .dropdown &.dropdown-menu { + transform: translate(-80%, 0); + + @media (min-width: map-get($grid-breakpoints, md)) { + transform: translate(-50%, 0); + right: auto; + left: 50%; + } + } +} diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/page_bundles/reports.scss index 0c0605b0b3d..5a9dd454970 100644 --- a/app/assets/stylesheets/pages/reports.scss +++ b/app/assets/stylesheets/page_bundles/reports.scss @@ -1,42 +1,4 @@ -.split-report-section { - border-bottom: 1px solid $gray-darker; - - .report-block-container { - max-height: 500px; - overflow: auto; - } - - .space-children, - .space-children > span { - display: flex; - align-self: center; - } - - .media { - align-items: center; - padding: 10px; - line-height: 20px; - - /* - This fixes the wrapping div of the icon in the report header. - Apparently the borderless status icons are half the size of the status icons with border. - This means we have to double the size of the wrapping div for borderless icons. - */ - .space-children:first-child { - width: 32px; - height: 32px; - align-items: center; - justify-content: center; - margin-right: 5px; - margin-left: 1px; - } - } - - .code-text { - width: 100%; - flex: 1; - } -} +@import 'mixins_and_variables_and_functions'; .mr-widget-grouped-section { .report-block-container { @@ -69,15 +31,15 @@ display: flex; &.failed svg { - color: $red-500; + color: var(--red-500, $red-500); } &.success svg { - color: $green-500; + color: var(--green-500, $green-500); } &.neutral svg { - color: $gray-500; + color: var(--gray-500, $gray-500); } .ci-status-icon { diff --git a/app/assets/stylesheets/page_bundles/terminal.scss b/app/assets/stylesheets/page_bundles/terminal.scss new file mode 100644 index 00000000000..627baf96d6f --- /dev/null +++ b/app/assets/stylesheets/page_bundles/terminal.scss @@ -0,0 +1,3 @@ +#terminal > div { + min-height: 450px; +} diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/page_bundles/wiki.scss index ccf11058b5b..eb34e7f3876 100644 --- a/app/assets/stylesheets/pages/wiki.scss +++ b/app/assets/stylesheets/page_bundles/wiki.scss @@ -1,3 +1,5 @@ +@import 'mixins_and_variables_and_functions'; + .title .edit-wiki-header { width: 780px; margin-left: auto; @@ -9,7 +11,7 @@ position: relative; .wiki-breadcrumb { - border-bottom: 1px solid $white-normal; + border-bottom: 1px solid var(--gray-50, $gray-50); padding: 11px 0; } @@ -20,16 +22,16 @@ .wiki-last-edit-by { display: block; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); strong { - color: $gl-text-color; + color: var(--gl-text-color, $gl-text-color); } } .light { font-weight: $gl-font-weight-normal; - color: $gl-text-color-secondary; + color: var(--gray-500, $gray-500); } .git-clone-holder { @@ -92,7 +94,7 @@ } a { - color: $layout-link-gray; + color: var(--gray-400, $gray-400); &:hover, &.active { @@ -105,7 +107,7 @@ } .active > a { - color: $black; + color: var(--black, $black); } ul.wiki-pages, @@ -134,7 +136,7 @@ ul.wiki-pages-list.content-list { a { - color: $blue-600; + color: var(--blue-600, $blue-600); } ul { diff --git a/app/assets/stylesheets/pages/alert_management/details.scss b/app/assets/stylesheets/pages/alert_management/details.scss index a104c06c853..514f228e223 100644 --- a/app/assets/stylesheets/pages/alert_management/details.scss +++ b/app/assets/stylesheets/pages/alert_management/details.scss @@ -33,7 +33,7 @@ } .main-notes-list::before { - left: 15px !important; + left: $gl-spacing-scale-5 !important; } .note-header-info { diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 04167cbee1b..d7b4db3840e 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -123,20 +123,13 @@ } .build-header { - .ci-header-container, - .header-action-buttons { - display: flex; - } - - .ci-header-container { - min-height: 54px; - } - .page-content-header { padding: 10px 0 9px; } .header-action-buttons { + display: flex; + @include media-breakpoint-down(xs) { .sidebar-toggle-btn { margin-top: 0; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index e6378fd9168..c55bfeb7b15 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -306,7 +306,6 @@ .commit, .generic-commit-status, .branch-commit { - .autodevops-link, .commit-sha { color: $blue-600; } diff --git a/app/assets/stylesheets/pages/error_tracking_list.scss b/app/assets/stylesheets/pages/error_tracking_list.scss deleted file mode 100644 index cc391ca6c97..00000000000 --- a/app/assets/stylesheets/pages/error_tracking_list.scss +++ /dev/null @@ -1,5 +0,0 @@ -.error-list { - .dropdown { - min-width: auto; - } -} diff --git a/app/assets/stylesheets/pages/experience_level.scss b/app/assets/stylesheets/pages/experience_level.scss deleted file mode 100644 index e57ad6321a5..00000000000 --- a/app/assets/stylesheets/pages/experience_level.scss +++ /dev/null @@ -1,29 +0,0 @@ -.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/experimental_separate_sign_up.scss b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss deleted file mode 100644 index dfc56654229..00000000000 --- a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss +++ /dev/null @@ -1,60 +0,0 @@ -.signup-page { - .page-wrap { - background-color: $gray-light; - } - - .signup-box-container { - max-width: 960px; - } - - .signup-box { - background-color: $white; - box-shadow: 0 0 0 1px $border-color; - border-radius: $border-radius; - } - - .form-control { - &:active, - &:focus { - background-color: $white; - } - } - - .devise-errors { - h2 { - font-size: $gl-font-size; - color: $red-700; - } - } - - .omniauth-divider { - &::before, - &::after { - content: ''; - flex: 1; - border-bottom: 1px solid $gray-dark; - margin: $gl-padding-24 0; - } - - &::before { - margin-right: $gl-padding; - } - - &::after { - margin-left: $gl-padding; - } - } - - .omniauth-btn { - width: 48%; - - @include media-breakpoint-down(md) { - width: 100%; - } - - img { - width: $default-icon-size; - height: $default-icon-size; - } - } -} diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss deleted file mode 100644 index bca4d50973a..00000000000 --- a/app/assets/stylesheets/pages/graph.scss +++ /dev/null @@ -1,74 +0,0 @@ -.project-network { - border: 1px solid $border-color; - - .controls { - color: $project-network-controls-color; - font-size: 14px; - padding: 5px; - border-bottom: 1px solid $border-color; - background: $gray-darker; - } - - .network-graph { - background: $white; - height: 500px; - overflow-y: scroll; - overflow-x: hidden; - } -} - -.svg-graph-container { - width: 100%; - - .axis-tick { - opacity: 0.4; - } - - .tick-text { - fill: $gl-text-color-secondary; - } - - .x-axis-text { - fill: $gray-900; - } - - .bar-rect { - fill: rgba($blue-500, 0.1); - stroke: $blue-500; - } - - .bar-rect:hover { - fill: rgba($blue-700, 0.3); - } - - .y-axis-label { - line { - stroke: $gray-300; - } - - text { - font-weight: bold; - font-size: 12px; - fill: $gray-700; - } - } -} - -.svg-graph-container-with-grab { - cursor: grab; -} - -.svg-graph-container-grabbed { - cursor: grabbing; -} - -@keyframes flickerAnimation { - 0% { opacity: 1; } - 50% { opacity: 0; } - 100% { opacity: 1; } -} - -.animate-flicker { - animation: flickerAnimation 1.5s infinite; - fill: $gray-300; -} diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 69fd094f83b..ee4f74882a1 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -95,6 +95,78 @@ } } +.group-home-panel { + margin-top: $gl-padding; + margin-bottom: $gl-padding; + + .home-panel-avatar { + width: $home-panel-title-row-height; + height: $home-panel-title-row-height; + flex-shrink: 0; + flex-basis: $home-panel-title-row-height; + } + + .home-panel-title { + font-size: 20px; + line-height: $gl-line-height-24; + font-weight: bold; + + .icon { + vertical-align: -1px; + } + + .home-panel-topic-list { + font-size: $gl-font-size; + font-weight: $gl-font-weight-normal; + + .icon { + position: relative; + top: 3px; + margin-right: $gl-padding-4; + } + } + } + + .home-panel-title-row { + @include media-breakpoint-down(sm) { + .home-panel-avatar { + width: $home-panel-avatar-mobile-size; + height: $home-panel-avatar-mobile-size; + flex-basis: $home-panel-avatar-mobile-size; + + .avatar { + font-size: 20px; + line-height: 46px; + } + } + + .home-panel-title { + margin-top: 4px; + margin-bottom: 2px; + font-size: $gl-font-size; + line-height: $gl-font-size-large; + } + + .home-panel-topic-list, + .home-panel-metadata { + font-size: $gl-font-size-small; + } + } + } + + .home-panel-metadata { + font-weight: normal; + font-size: 14px; + line-height: $gl-btn-line-height; + } + + .home-panel-description { + @include media-breakpoint-up(md) { + font-size: $gl-font-size-large; + } + } +} + .home-panel-buttons { .home-panel-action-button { vertical-align: top; diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss index 316066694a8..c0a1fa72b1f 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/pages/incident_management_list.scss @@ -7,6 +7,19 @@ table { @include gl-text-gray-500; + tbody { + tr:not(.b-table-busy-slot) { + // TODO replace with gitlab/ui utilities: https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1791 + &:hover { + border-top-style: double; + + td { + border-bottom-style: initial; + } + } + } + } + tr { &:focus { outline: none; @@ -119,7 +132,7 @@ } @include media-breakpoint-down(xs) { - .incident-management-list-header { + .list-header { flex-direction: column-reverse; } @@ -127,9 +140,4 @@ @include gl-w-full; } } - - // TODO: Abstract to `@gitlab/ui` utility set: https://gitlab.com/gitlab-org/gitlab-ui/-/issues/921 - .gl-fill-green-500 { - fill: $green-500; - } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 53525a4d877..7097c2b10c4 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -117,7 +117,8 @@ } } -.assignee { +.assignee, +.reviewer { .merge-icon { color: $orange-400; position: absolute; @@ -240,16 +241,6 @@ .avatar { margin-left: 0; } - - a.edit-link:not([href]):hover { - color: rgba($gray-normal, 0.2); - } - - .confidential-edit, - .lock-edit, - .edit-link { - @extend .btn-link; - } } .cross-project-reference, diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 03603f637c8..d2eb00c4a4d 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -1,38 +1,3 @@ -.issues-list { - &.manual-ordering { - background-color: $gray-light; - border-radius: $border-radius-default; - padding: $gl-padding-8; - - .issue { - background-color: $white; - margin-bottom: $gl-padding-8; - border-radius: $border-radius-default; - border: 1px solid $gray-100; - box-shadow: 0 1px 2px $issue-boards-card-shadow; - } - } - - .issue { - padding: 10px $gl-padding; - position: relative; - - .title { - margin-bottom: 2px; - } - - .issue-labels, - .author-link { - display: inline-block; - } - - .icon-merge-request-unmerged { - height: 13px; - margin-bottom: 3px; - } - } -} - .issue-realtime-pre-pulse { opacity: 0; } @@ -369,13 +334,3 @@ ul.related-merge-requests > li { .issuable-header-slide-leave-to { transform: translateY(-100%); } - -.issuable-list-root { - .gl-label-link { - text-decoration: none; - - &:hover { - color: inherit; - } - } -} diff --git a/app/assets/stylesheets/pages/issues/issues_list.scss b/app/assets/stylesheets/pages/issues/issues_list.scss deleted file mode 100644 index c0af7a6af6d..00000000000 --- a/app/assets/stylesheets/pages/issues/issues_list.scss +++ /dev/null @@ -1,5 +0,0 @@ -.svg-container.jira-logo-container { - svg { - vertical-align: text-bottom; - } -} diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index e37b26187e7..31606cb3ba5 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -134,11 +134,6 @@ } } -.label-description-wrapper { - margin-right: 8px; - margin-left: 8px; -} - .prioritized-labels { margin-bottom: 30px; @@ -201,10 +196,6 @@ } } -.label-options-toggle { - width: 100%; -} - .label-subscription { vertical-align: middle; @@ -239,20 +230,6 @@ } } -.label-link { - display: inline-flex; - vertical-align: text-bottom; - - &:hover .color-label { - text-decoration: underline; - } - - .label { - vertical-align: inherit; - font-size: $label-font-size; - } -} - .labels-container { background-color: $gray-light; border-radius: $border-radius-default; @@ -270,41 +247,13 @@ .label-badge { color: $gray-900; + display: inline-block; font-weight: $gl-font-weight-normal; padding: $gl-padding-4 $gl-padding-8; border-radius: $border-radius-default; font-size: $label-font-size; } -.label-badge-blue { - background-color: $theme-blue-100; -} - -.label-badge-gray { - background-color: $gray-50; -} - -.label-links { - list-style: none; - margin: 0; - padding: 0; - white-space: nowrap; -} - -.label-link-item { - padding: 0; -} - -.label-description { - .description-text { - margin-bottom: 10px; - - .admin-labels & { - margin-bottom: 0; - } - } -} - .label-list-item { .content-list &::before, .content-list &::after { @@ -313,21 +262,12 @@ .label-name { width: 200px; - flex-shrink: 0; .gl-label { line-height: $gl-line-height; } } - .label-description { - flex-grow: 1; - - a { - color: $blue-600; - } - } - .label { padding: 4px $grid-size; font-size: $label-font-size; @@ -382,31 +322,8 @@ text-align: left; } - .label-links { - white-space: normal; - } - .label-description { order: 3; - width: 100%; - - > .label-description-wrapper { - margin-left: 0; - margin-right: 0; - } - } - } -} - -@media (max-width: 910px) { - .priority-badge { - display: block; - width: 100%; - margin-left: 0; - margin-top: $gl-padding; - - .label-badge { - display: inline-block; } } } @@ -426,3 +343,9 @@ box-shadow: 0 0 0 1px inset; } } + +/* Fix scoped label padding in cases where old markdown uses the old label structure */ +.gl-label-text + .gl-label-text { + @include gl-pl-2; + @include gl-pr-3; +} diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 2d9a9f3029f..922f95ff5df 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -209,6 +209,27 @@ } } + +.members-table { + @include media-breakpoint-up(lg) { + .col-meta { + width: px-to-rem(150px); + } + + .col-max-role { + width: px-to-rem(175px); + } + + .col-expiration { + width: px-to-rem(200px); + } + + .col-actions { + width: px-to-rem(50px); + } + } +} + .card-mobile { .content-list.members-list li { display: block; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 8aaeb92eb7a..6f71177e870 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -471,12 +471,6 @@ $mr-widget-min-height: 69px; flex: 1; } - .issuable-meta { - .author-link { - display: inline-block; - } - } - .merge-request-title { margin-bottom: 2px; @@ -770,8 +764,14 @@ $mr-widget-min-height: 69px; position: -webkit-sticky; position: sticky; top: $header-height + $mr-tabs-height; - margin-left: -16px; - width: calc(100% + 32px); + + .with-system-header & { + top: $header-height + $mr-tabs-height + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $header-height + $mr-tabs-height + $system-header-height + $performance-bar-height; + } .mr-version-menus-container { flex-wrap: nowrap; @@ -790,6 +790,14 @@ $mr-widget-min-height: 69px; background-color: $white; border-bottom: 1px solid $border-color; + .with-system-header & { + top: $header-height + $system-header-height; + } + + .with-system-header.with-performance-bar & { + top: $header-height + $system-header-height + $performance-bar-height; + } + @include media-breakpoint-up(sm) { position: -webkit-sticky; position: sticky; @@ -868,6 +876,13 @@ $mr-widget-min-height: 69px; } } +.container-fluid { + // Negative margins for mobile/tablet screen + .diffs.tab-pane { + margin: 0 (-$gl-padding); + } +} + // Wrap MR tabs/buttons so you don't have to scroll on desktop @include media-breakpoint-down(md) { .merge-request-tabs-container, diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index c144fb13322..b510822a20a 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -858,68 +858,28 @@ $note-form-margin-left: 72px; } .line-resolve-all-container { - margin: $gl-padding-4; - > div { white-space: nowrap; } - .discussion-next-btn { - border-radius: 0; - } - - .toggle-all-discussions-btn { + .btn-group .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } - - .btn { - line-height: $gl-line-height; - - svg { - fill: $gray-500; - } - - &.discussion-create-issue-btn { - border-radius: 0; - border-right: 0; - - a { - padding: 0; - line-height: 0; - - &:hover { - text-decoration: none; - border: 0; - } - } - } - - &.discussion-next-btn { - border-right: 0; - } - } } .line-resolve-all { vertical-align: middle; display: inline-block; - padding: $gl-padding-4 10px; + padding: $gl-padding-8 $gl-padding-12; background-color: $gray-light; border: 1px solid $border-color; + border-right: 0; border-radius: $border-radius-default; - font-size: $gl-btn-small-font-size; border-top-right-radius: 0; border-bottom-right-radius: 0; - border-right: 0; - - .line-resolve-btn { - color: $gray-500; - - svg { - vertical-align: text-top; - } - } + font-size: $gl-font-size; + line-height: 1rem; @include media-breakpoint-down(xs) { flex: 1; diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8b104ce9017..2df43b861b2 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -1,119 +1,3 @@ -@mixin flat-connector-before($length: 44px) { - &::before { - content: ''; - position: absolute; - top: 48%; - left: -$length; - border-top: 2px solid $border-color; - width: $length; - height: 1px; - } -} - -@mixin build-content($border-radius: 30px) { - display: inline-block; - padding: 8px 10px 9px; - width: 100%; - border: 1px solid $border-color; - border-radius: $border-radius; - background-color: $white; - - &:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - color: $gl-text-color; - } -} - -.pipelines { - .negative-margin-top { - margin-top: -$pipelines-table-header-height; - } - - .stage { - max-width: 90px; - width: 90px; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .table-holder { - overflow: unset; - width: 100%; - } - - .commit-title { - margin: 0; - white-space: normal; - - @include media-breakpoint-down(sm) { - justify-content: flex-end; - } - } - - .ci-table { - .badge { - margin-bottom: 3px; - } - - .pipeline-id { - color: $black; - } - - .pipelines-time-ago { - text-align: right; - } - - .pipeline-actions { - min-width: 170px; //Guarantees buttons don't break in several lines. - - .btn-default { - color: $gl-text-color-secondary; - } - - .btn.btn-retry:hover, - .btn.btn-retry:focus { - border-color: $dropdown-toggle-active-border-color; - background-color: $white-normal; - } - - svg path { - fill: $gl-text-color-secondary; - } - - .dropdown-menu { - max-height: $dropdown-max-height; - overflow-y: auto; - } - - .dropdown-toggle, - .dropdown-menu { - color: $gl-text-color-secondary; - - .fa { - color: $gl-text-color-secondary; - font-size: 14px; - } - } - - .btn-group.open .btn-default { - background-color: $white-normal; - border-color: $border-white-normal; - } - - .btn .text-center { - display: inline; - } - - .tooltip { - white-space: nowrap; - } - } - } -} - @include media-breakpoint-down(md) { .content-list { &.builds-content-list { @@ -124,22 +8,6 @@ } .ci-table { - .build.retried { - background-color: $gray-lightest; - } - - .commit-link { - a { - &:focus { - text-decoration: none; - } - } - - a:hover { - text-decoration: none; - } - } - .avatar { margin-left: 0; float: none; @@ -160,7 +28,10 @@ height: 14px; width: 14px; vertical-align: middle; - fill: $gl-text-color-secondary; + + &:not(.text-warning) { + fill: $gl-text-color-secondary; + } } .sprite { @@ -191,45 +62,12 @@ } } - .icon-container { - display: inline-block; - - &.commit-icon { - width: 15px; - text-align: center; - } - } - - /** - * Play button with icon in dropdowns - */ - .no-btn { - border: 0; - background: none; - outline: none; - width: 100%; - text-align: left; - - .icon-play { - position: relative; - top: 2px; - margin-right: 5px; - height: 13px; - width: 12px; - } - } - .duration, .finished-at { color: $gl-text-color-secondary; margin: 0; white-space: nowrap; - .fa { - font-size: 12px; - margin-right: 4px; - } - svg { width: 12px; height: 12px; @@ -241,843 +79,20 @@ .build-link a { color: $gl-text-color; } - - .btn-group.open .dropdown-toggle { - box-shadow: none; - } - - .pipeline-tags .label-container { - white-space: normal; - } } -.stage-cell { - .mini-pipeline-graph-dropdown-toggle { - svg { - height: $ci-action-icon-size; - width: $ci-action-icon-size; - position: absolute; - top: -1px; - left: -1px; - z-index: 2; - overflow: visible; - } - - &:hover, - &:active, - &:focus { - svg { - top: -2px; - left: -2px; - } +[data-page='admin:jobs:index'] { + .admin-builds-table { + td:last-child { + min-width: 120px; } } - - .stage-container { - display: inline-block; - position: relative; - vertical-align: middle; - height: $ci-action-icon-size; - margin: 3px 0; - - + .stage-container { - margin-left: 6px; - } - - // Hack to show a button tooltip inline - button.has-tooltip + .tooltip { - min-width: 105px; - } - - // Bootstrap way of showing the content inline for anchors. - a.has-tooltip { - white-space: nowrap; - } - - &:not(:last-child) { - &::after { - content: ''; - width: 7px; - position: absolute; - right: -7px; - top: 11px; - border-bottom: 2px solid $border-color; - } - } - - //delete when all pipelines are updated to new size - &.mr-widget-pipeline-stages { - + .stage-container { - margin-left: 4px; - } - - &:not(:last-child) { - &::after { - width: 4px; - right: -4px; - top: 11px; - } - } - } - } -} - -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; - } -} - -// Pipeline visualization -.pipeline-actions { - border-bottom: 0; -} - -.tab-pane { - &.builds .ci-table tr { - height: 71px; - } - - .ci-table { - thead th { - border-top: 0; - } - } -} - -.build-failures { - .build-state { - padding: 20px 2px; - - .build-name { - font-weight: $gl-font-weight-normal; - } - - .stage { - color: $gl-text-color-secondary; - font-weight: $gl-font-weight-normal; - vertical-align: middle; - } - } - - .build-log { - border: 0; - line-height: initial; - } - - .build-trace-row td { - border-top: 0; - border-bottom-width: 1px; - border-bottom-style: solid; - padding-top: 0; - } - - .build-trace { - width: 100%; - text-align: left; - margin-top: $gl-padding; - } - - .build-name { - width: 196px; - - a { - font-weight: $gl-font-weight-bold; - color: $gl-text-color; - text-decoration: none; - - &:focus, - &:hover { - text-decoration: underline; - } - } - } - - .build-actions { - width: 70px; - text-align: right; - } - - .build-stage { - width: 140px; - } - - .ci-status-icon-failed { - padding: 10px 0 10px 12px; - width: 12px + 24px; // padding-left + svg width - } - - .build-icon svg { - width: 24px; - height: 24px; - vertical-align: middle; - } - - .build-state, - .build-trace-row { - > td:last-child { - padding-right: 0; - } - } - - @include media-breakpoint-down(sm) { - td:empty { - display: none; - } - - .ci-table { - margin-top: 2 * $gl-padding; - } - - .build-trace-container { - padding-top: $gl-padding; - padding-bottom: $gl-padding; - } - - .build-trace { - margin-bottom: 0; - margin-top: 0; - } - } -} - -.pipeline-tab-content { - display: flex; - width: 100%; - min-height: $dropdown-max-height-lg; - background-color: $gray-light; - padding: $gl-padding 0; - overflow: auto; -} - -// Pipeline graph -.pipeline-graph { - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; - - .stage-column-list, - .builds-container > ul { - padding: 0; - } - - a { - text-decoration: none; - color: $gl-text-color; - } - - svg { - vertical-align: middle; - } - - .stage-column { - display: inline-block; - vertical-align: top; - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; - - .left-connector { - @include flat-connector-before; - } - } - } - - &.no-margin { - margin: 0; - } - - li { - list-style: none; - } - - // when downstream pipelines are present, the last stage isn't the last column - &:last-child:not(.has-downstream) { - .build { - // Remove right connecting horizontal line from first build in last stage - &:first-child::after { - border: 0; - } - // Remove right curved connectors from all builds in last stage - &:not(:first-child)::after { - border: 0; - } - // Remove opposite curve - .curve::before { - display: none; - } - } - } - - // when upstream pipelines are present, the first stage isn't the first column - &:first-child:not(.has-upstream) { - .build { - // Remove left curved connectors from all builds in first stage - &:not(:first-child)::before { - border: 0; - } - // Remove opposite curve - .curve::after { - display: none; - } - } - } - - // Curve first child connecting lines in opposite direction - .curve { - display: none; - - &::before, - &::after { - content: ''; - width: 21px; - height: 25px; - position: absolute; - top: -31px; - border-top: 2px solid $border-color; - } - - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; - } - - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; - } - } - } - - .stage-name { - margin: 0 0 15px 10px; - font-weight: $gl-font-weight-bold; - width: 176px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - line-height: 2.2em; - } - - .build { - position: relative; - width: 186px; - margin-bottom: 10px; - white-space: normal; - - .ci-job-dropdown-container { - // override dropdown.scss - .dropdown-menu li button { - padding: 0; - text-align: center; - } - } - - // ensure .build-content has hover style when action-icon is hovered - .ci-job-dropdown-container:hover .build-content { - @extend .build-content:hover; - } - - .ci-status-icon svg { - height: 24px; - width: 24px; - } - - .dropdown-menu-toggle { - background-color: transparent; - border: 0; - padding: 0; - - &:focus { - outline: none; - } - } - - .build-content { - @include build-content(); - } - - a.build-content:hover, - button.build-content:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - } - - // Connect first build in each stage with right horizontal line - &:first-child { - &::after { - content: ''; - position: absolute; - top: 48%; - right: -48px; - border-top: 2px solid $border-color; - width: 48px; - height: 1px; - } - } - - // Connect each build (except for first) with curved lines - &:not(:first-child) { - &::after, - &::before { - content: ''; - top: -49px; - position: absolute; - border-bottom: 2px solid $border-color; - width: 25px; - height: 69px; - } - - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; - } - - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; - } - } - - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; - } - - .curve { - display: block; - } - } - } - - .ci-action-icon-container { - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); - - // Action Icons in big pipeline-graph nodes - &.ci-action-icon-wrapper { - height: 30px; - width: 30px; - border-radius: 100%; - display: block; - padding: 0; - line-height: 0; - - svg { - fill: $gl-text-color-secondary; - } - - .spinner { - top: 2px; - } - - &.play { - svg { - left: 1px; - top: 1px; - } - } - } - } - - .stage-action svg { - left: 1px; - top: -2px; - } -} - -// Triggers the dropdown in the big pipeline graph -.dropdown-counter-badge { - font-weight: 100; - font-size: 15px; - position: absolute; - right: 13px; - top: 8px; -} - -.ci-build-text, -.ci-status-text { - font-weight: 200; -} - -@mixin mini-pipeline-graph-color( - $color-background-default, - $color-background-hover-focus, - $color-background-active, - $color-foreground-default, - $color-foreground-hover-focus, - $color-foreground-active -) { - background-color: $color-background-default; - border-color: $color-foreground-default; - - svg { - fill: $color-foreground-default; - } - - &:hover, - &:focus { - background-color: $color-background-hover-focus; - border-color: $color-foreground-hover-focus; - - svg { - fill: $color-foreground-hover-focus; - } - } - - &:active { - background-color: $color-background-active; - border-color: $color-foreground-active; - - svg { - fill: $color-foreground-active; - } - } - - &:focus { - box-shadow: 0 0 4px 1px $blue-300; - } -} - -@mixin mini-pipeline-item() { - border-radius: 100px; - background-color: $white; - border-width: 1px; - border-style: solid; - width: $ci-action-icon-size; - height: $ci-action-icon-size; - margin: 0; - padding: 0; - position: relative; - vertical-align: middle; - - &:hover, - &:active, - &:focus { - outline: none; - border-width: 2px; - } - - // Dropdown button animation in mini pipeline graph - &.ci-status-icon-success { - @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700); - } - - &.ci-status-icon-failed { - @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700); - } - - &.ci-status-icon-pending, - &.ci-status-icon-waiting-for-resource, - &.ci-status-icon-success-with-warnings { - @include mini-pipeline-graph-color($white, $orange-50, $orange-100, $orange-500, $orange-600, $orange-700); - } - - &.ci-status-icon-preparing, - &.ci-status-icon-running { - @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700); - } - - &.ci-status-icon-canceled, - &.ci-status-icon-scheduled, - &.ci-status-icon-disabled, - &.ci-status-icon-not-found, - &.ci-status-icon-manual { - @include mini-pipeline-graph-color($white, $gray-500, $gray-700, $gray-900, $gray-950, $black); - } - - &.ci-status-icon-created, - &.ci-status-icon-skipped { - @include mini-pipeline-graph-color($white, $gray-100, $gray-200, $gray-300, $gray-400, $gray-500); - } -} - -// Dropdown button in mini pipeline graph -button.mini-pipeline-graph-dropdown-toggle { - @include mini-pipeline-item(); -} - -/** - Action icons inside dropdowns: - - mini graph in pipelines table - - dropdown in big graph - - mini graph in MR widget pipeline - - mini graph in Commit widget pipeline -*/ -.big-pipeline-graph-dropdown-menu, -.mini-pipeline-graph-dropdown-menu { - width: 240px; - max-width: 240px; - - // override dropdown.scss - &.dropdown-menu li button, - &.dropdown-menu li a.ci-action-icon-container { - padding: 0; - text-align: center; - } - - .ci-action-icon-container { - position: absolute; - right: 8px; - top: 8px; - - &.ci-action-icon-wrapper { - height: $ci-action-dropdown-button-size; - width: $ci-action-dropdown-button-size; - border-radius: 50%; - display: block; - - &:hover { - box-shadow: inset 0 0 0 0.0625rem $dropdown-toggle-active-border-color; - background-color: $gray-darker; - - svg { - fill: $gl-text-color; - } - } - - .spinner, - svg { - width: $ci-action-dropdown-svg-size; - height: $ci-action-dropdown-svg-size; - fill: $gl-text-color-secondary; - position: relative; - top: 1px; - vertical-align: initial; - } - } - } - - // SVGs in the commit widget and mr widget - a.ci-action-icon-container.ci-action-icon-wrapper svg { - top: 5px; - } - - .scrollable-menu { - padding: 0; - max-height: 245px; - overflow: auto; - } - - li { - position: relative; - - // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered - &:hover > .mini-pipeline-graph-dropdown-item, - &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { - @extend .mini-pipeline-graph-dropdown-item:hover; - } - - // link to the build - .mini-pipeline-graph-dropdown-item { - align-items: center; - clear: both; - display: flex; - font-weight: normal; - line-height: $line-height-base; - white-space: nowrap; - - // Match dropdown.scss for all `a` tags - &.non-details-job-component { - padding: $gl-padding-8 $gl-btn-horz-padding; - } - - .ci-job-name-component { - align-items: center; - display: flex; - flex: 1; - } - - - .ci-status-icon { - @include gl-mr-3; - - position: relative; - - > svg { - width: $pipeline-dropdown-status-icon-size; - height: $pipeline-dropdown-status-icon-size; - margin: 3px 0; - position: relative; - overflow: visible; - display: block; - } - } - - &:hover, - &:focus { - outline: none; - text-decoration: none; - background-color: $gray-darker; - } - } - } -} - -// Dropdown in the big pipeline graph -.big-pipeline-graph-dropdown-menu { - width: 195px; - min-width: 195px; - left: 100%; - top: -10px; - box-shadow: 0 1px 5px $black-transparent; - - /** - * Top arrow in the dropdown in the big pipeline graph - */ - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 18px; - } - - &::before { - left: -6px; - margin-top: 3px; - border-width: 7px 5px 7px 0; - border-right-color: $border-color; - } - - &::after { - left: -5px; - border-width: 10px 7px 10px 0; - border-right-color: $white; - } -} - -/** - * Top arrow in the dropdown in the mini pipeline graph - */ -.mini-pipeline-graph-dropdown-menu { - &::before, - &::after { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: -6px; - left: 50%; - transform: translate(-50%, 0); - border-width: 0 5px 6px; - - @include media-breakpoint-down(sm) { - left: 100%; - margin-left: -12px; - } - } - - &::before { - border-width: 0 5px 5px; - border-bottom-color: $border-color; - } - - &::after { - margin-top: 1px; - border-bottom-color: $white; - } - - /** - * Center dropdown menu in mini graph - */ - .dropdown &.dropdown-menu { - transform: translate(-80%, 0); - - @media (min-width: map-get($grid-breakpoints, md)) { - transform: translate(-50%, 0); - right: auto; - left: 50%; - } - } -} - -/** - * Terminal - */ -.terminal-icon { - margin-left: 3px; -} - -.terminal-container { - .content-block { - border-bottom: 0; - } - - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; - - > div { - min-height: 450px; - } - } -} - -.ci-header-container { - min-height: 55px; - - .text-center { - padding-top: 12px; - } } .pipelines-container .top-area .nav-controls > .btn:last-child { float: none; } -.autodevops-title { - font-weight: $gl-font-weight-normal; - line-height: 1.5; -} - -.legend-all { - color: $gl-text-color-secondary; -} - -.legend-success { - color: $green-500; -} - -.test-reports-table { - .build-trace { - @include build-trace(); - } -} - -.codequality-report { - .media { - padding: $gl-padding; - } - - .media-body { - flex-direction: row; - } - - .report-block-container { - height: auto !important; - } -} - .progress-bar.bg-primary { background-color: $blue-500 !important; } @@ -1090,6 +105,10 @@ button.mini-pipeline-graph-dropdown-toggle { width: 8rem; } +.stage-rounded { + border-radius: 2rem; +} + .stage-left-rounded { border-radius: 2rem 0 0 2rem; } diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 4dc1f2034f3..3605283245f 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -227,6 +227,10 @@ padding-left: 40px; } + .gl-label-scoped { + --label-inset-border: inset 0 0 0 1px currentColor; + } + @include media-breakpoint-up(lg) { margin-right: 5px; } @@ -443,20 +447,3 @@ table.u2f-registrations, width: 100%; max-width: $add-to-slack-popup-max-width; } - -.gitlab-slack-right-arrow svg { - fill: $white-dark; - width: $right-arrow-size; - height: $right-arrow-size; - vertical-align: text-bottom; -} - -.gitlab-slack-double-headed-arrow { - vertical-align: text-top; - - svg { - fill: $gray-darker; - width: $double-headed-arrow-width; - height: $double-headed-arrow-height; - } -} diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index a2f8447c0b6..938d8d34717 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -1,11 +1,3 @@ -.alert_holder { - margin: -16px; - - .alert-link { - font-weight: $gl-font-weight-normal; - } -} - .new_project, .edit-project, .import-project { @@ -67,38 +59,7 @@ } } -.classification-label { - background-color: $red-500; -} - -.toggle-wrapper { - margin-top: 5px; -} - -.project-feature-row > .toggle-wrapper { - margin: 10px 0; -} - -.project-visibility-setting, -.project-feature-settings { - border: 1px solid $border-color; - padding: 10px 32px; - - @include media-breakpoint-down(xs) { - padding: 10px 20px; - } -} - -.project-visibility-setting .request-access { - line-height: 2; -} - -.project-feature-settings { - background: $gray-lighter; - border-top: 0; - margin-bottom: 16px; -} - +// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components .project-repo-select { transition: background 2s ease-out; @@ -113,63 +74,31 @@ } } +// INFO Scoped to project_feature_setting and settings_panel components in app/assets/javascripts/pages/projects/shared/permissions/components .project-feature-controls { - display: flex; - align-items: center; - margin: $gl-padding-8 0; max-width: 432px; - - .toggle-wrapper { - flex: 0; - margin-right: 10px; - } - - .select-wrapper { - flex: 1; - } } +// INFO Scoped to settings_panel component in app/assets/javascripts/pages/projects/shared/permissions/components .project-feature-setting-group { - padding-left: 32px; - .project-feature-controls { max-width: 400px; } - - @include media-breakpoint-down(xs) { - padding-left: 20px; - } } -.group-home-panel, .project-home-panel { - margin-top: $gl-padding; - margin-bottom: $gl-padding; - .home-panel-avatar { - width: $home-panel-title-row-height; - height: $home-panel-title-row-height; - flex-shrink: 0; flex-basis: $home-panel-title-row-height; } .home-panel-title { - font-size: 20px; - line-height: $gl-line-height-24; - font-weight: bold; - .icon { vertical-align: -1px; } .home-panel-topic-list { - font-size: $gl-font-size; - font-weight: $gl-font-weight-normal; - .icon { - position: relative; top: 3px; - margin-right: $gl-padding-4; } } } @@ -201,24 +130,6 @@ } } - .home-panel-metadata { - font-weight: normal; - font-size: 14px; - line-height: $gl-btn-line-height; - - .home-panel-license { - .btn { - line-height: 0; - border-width: 0; - } - } - - .access-request-link { - padding-left: $gl-padding-8; - border-left: 1px solid $gl-text-color-secondary; - } - } - .home-panel-description { @include media-breakpoint-up(md) { font-size: $gl-font-size-large; @@ -778,7 +689,7 @@ } .btn { - margin-top: $gl-padding-8; + margin-bottom: $gl-padding-8; padding: $gl-btn-vert-padding $gl-btn-padding; line-height: $gl-btn-line-height; @@ -794,11 +705,6 @@ } .project-buttons { - .stat-text { - @extend .btn; - @extend .btn-default; - } - .nav > li:not(:last-child) { margin-right: $gl-padding-8; } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 4b8e1da4867..a62e28a9b8a 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -198,11 +198,20 @@ input[type='checkbox']:hover { } } + .search-clear { + position: absolute; + right: 10px; + top: 9px; + padding: 0; + line-height: 0; + background: none; + border: 0; + } .search-icon { position: absolute; left: 10px; - top: 10px; + top: 9px; color: $gray-darkest; pointer-events: none; } @@ -247,14 +256,7 @@ input[type='checkbox']:hover { } .search-clear { - position: absolute; - right: 10px; - top: 9px; - padding: 0; color: $gray-darkest; - line-height: 0; - background: none; - border: 0; &:hover, &:focus { @@ -281,6 +283,10 @@ input[type='checkbox']:hover { } } +.ref-truncated { + @include str-truncated(10em); +} + // Disable webkit input icons, link to solution: https://stackoverflow.com/questions/9421551/how-do-i-remove-all-default-webkit-search-field-styling /* stylelint-disable property-no-vendor-prefix */ input[type='search']::-webkit-search-decoration, diff --git a/app/assets/stylesheets/pages/serverless.scss b/app/assets/stylesheets/pages/serverless.scss deleted file mode 100644 index a5b73492380..00000000000 --- a/app/assets/stylesheets/pages/serverless.scss +++ /dev/null @@ -1,3 +0,0 @@ -.url-text-field { - cursor: text; -} diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss index 239123fc3ab..ebf21f58208 100644 --- a/app/assets/stylesheets/pages/settings_ci_cd.scss +++ b/app/assets/stylesheets/pages/settings_ci_cd.scss @@ -5,6 +5,10 @@ } } +.trigger-description { + max-width: 100px; +} + .trigger-actions { white-space: nowrap; diff --git a/app/assets/stylesheets/pages/tags.scss b/app/assets/stylesheets/pages/tags.scss deleted file mode 100644 index a6d30522ff7..00000000000 --- a/app/assets/stylesheets/pages/tags.scss +++ /dev/null @@ -1,3 +0,0 @@ -.tag-release-link { - color: $blue-600 !important; -} diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss deleted file mode 100644 index 288da4da5c3..00000000000 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ /dev/null @@ -1,17 +0,0 @@ -.gitlab-ui-dev-kit { - > h2 { - margin: 35px 0 20px; - font-weight: $gl-font-weight-bold; - } - - .example { - padding: 15px; - border: 1px dashed $gray-100; - margin-bottom: 15px; - - &::before { - content: 'Example'; - color: $ui-dev-kit-example-color; - } - } -} diff --git a/app/assets/stylesheets/themes/_dark.scss b/app/assets/stylesheets/themes/_dark.scss index bfbcb8c13c6..66cc4452858 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -163,6 +163,9 @@ body.gl-dark { --gl-text-color: #{$gray-900}; --border-color: #{$border-color}; + + --white: #{$white}; + --black: #{$black}; } $border-white-light: $gray-900; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 9c666331c4f..e236c264f5c 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -44,13 +44,10 @@ } .border-width-1px { border-width: 1px; } -.border-bottom-width-1px { border-bottom-width: 1px; } .border-style-dashed { border-style: dashed; } .border-style-solid { border-style: solid; } -.border-bottom-style-solid { border-bottom-style: solid; } .border-color-blue-300 { border-color: $blue-300; } .border-color-default { border-color: $border-color; } -.border-bottom-color-default { border-bottom-color: $border-color; } .border-radius-default { border-radius: $border-radius-default; } .border-radius-small { border-radius: $border-radius-small; } .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; } @@ -95,11 +92,6 @@ padding-bottom: $gl-spacing-scale-8; } -// move this to GitLab UI once onboarding experiment is considered a success -.gl-pl-7 { - padding-left: $gl-spacing-scale-7; -} - .gl-transition-property-stroke-opacity { transition-property: stroke-opacity; } @@ -116,43 +108,17 @@ box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500; } - -.gl-sm-align-items-flex-end { - @media (min-width: $breakpoint-sm) { - align-items: flex-end; - } -} - -.gl-sm-text-body { - @media (min-width: $breakpoint-sm) { - color: $body-color; - } +// This utility is used to force the z-index to match that of dropdown menu's +.gl-z-dropdown-menu\! { + z-index: 300 !important; } -.gl-sm-font-weight-bold { - @media (min-width: $breakpoint-sm) { - font-weight: $gl-font-weight-bold; - } -} - -.gl-min-h-6 { - min-height: $gl-spacing-scale-6; -} - -.gl-md-justify-content-end { - @media (min-width: $breakpoint-md) { - width: auto !important; - } -} - -.gl-display-md-flex { - @media (min-width: $breakpoint-md) { - display: flex; - } +.gl-flex-basis-quarter { + flex-basis: 25%; } -.gl-display-md-none { +.gl-md-ml-3 { @media (min-width: $breakpoint-md) { - display: none; + margin-left: $gl-spacing-scale-3; } } |