diff options
Diffstat (limited to 'app/assets/stylesheets')
41 files changed, 526 insertions, 739 deletions
diff --git a/app/assets/stylesheets/_page_specific_files.scss b/app/assets/stylesheets/_page_specific_files.scss index f706b615e7e..e8899b0a430 100644 --- a/app/assets/stylesheets/_page_specific_files.scss +++ b/app/assets/stylesheets/_page_specific_files.scss @@ -1,13 +1,11 @@ @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'; @@ -35,7 +33,6 @@ @import './pages/members'; @import './pages/merge_conflicts'; @import './pages/merge_requests'; -@import './pages/milestone'; @import './pages/monitor'; @import './pages/note_form'; @import './pages/notes'; @@ -57,9 +54,7 @@ @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..cae886bf846 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. @@ -14,6 +6,7 @@ @import '@gitlab/at.js/dist/css/jquery.atwho'; @import 'dropzone/dist/basic'; @import 'select2'; +@import 'cropper'; // GitLab UI framework @import 'framework'; @@ -36,17 +29,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..f198c06c2df 100644 --- a/app/assets/stylesheets/components/design_management/design.scss +++ b/app/assets/stylesheets/components/design_management/design.scss @@ -152,6 +152,10 @@ } } +.design-card-header { + background: transparent; +} + .design-dropzone-border { border: 2px dashed $gray-100; } 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..7ea03c4127b 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'; } @@ -258,10 +253,6 @@ content: '\f081'; } -.fa-unlink::before { - content: '\f127'; -} - .fa-file-pdf-o::before { content: '\f1c1'; } 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/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/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/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/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 292d57f132c..bbfe65e6eda 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; - } } } 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..66267d8a8bc 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -819,7 +819,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 +867,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/page_bundles/_ide_theme_overrides.scss b/app/assets/stylesheets/page_bundles/_ide_theme_overrides.scss index 1e239877428..93cb9be4a8f 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); } diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss index c4852974a4d..ffa034a2495 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; } @@ -356,8 +358,6 @@ } .avatar { - margin: 0; - @include media-breakpoint-down(md) { width: $gl-padding; height: $gl-padding; 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/page_bundles/issues.scss b/app/assets/stylesheets/page_bundles/issues.scss new file mode 100644 index 00000000000..705583c74ae --- /dev/null +++ b/app/assets/stylesheets/page_bundles/issues.scss @@ -0,0 +1,8 @@ +.user-can-drag { + cursor: grab; +} + +.is-ghost { + opacity: 0.3; + pointer-events: none; +} diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/page_bundles/milestone.scss index e9eb79b071c..c1d7d86e3f9 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 { 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/diff.scss b/app/assets/stylesheets/pages/diff.scss index 62af7103b39..3c432fe09c0 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.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 @@ -55,10 +70,6 @@ } } - a:hover { - text-decoration: none; - } - &:hover { background-color: $gray-normal; } diff --git a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss index dfc56654229..415ff01bc33 100644 --- a/app/assets/stylesheets/pages/experimental_separate_sign_up.scss +++ b/app/assets/stylesheets/pages/experimental_separate_sign_up.scss @@ -57,4 +57,8 @@ height: $default-icon-size; } } + + .decline-page { + width: 350px; + } } diff --git a/app/assets/stylesheets/pages/incident_management_list.scss b/app/assets/stylesheets/pages/incident_management_list.scss index 316066694a8..4aa6b2492a2 100644 --- a/app/assets/stylesheets/pages/incident_management_list.scss +++ b/app/assets/stylesheets/pages/incident_management_list.scss @@ -127,9 +127,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/labels.scss b/app/assets/stylesheets/pages/labels.scss index e37b26187e7..80cb6ec89ce 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; @@ -276,35 +267,6 @@ 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 +275,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 +335,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; } } } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 2d9a9f3029f..11d5104f64d 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -209,6 +209,23 @@ } } + +.members-table { + @include media-breakpoint-up(lg) { + .col-meta { + width: px-to-rem(150px); + } + + .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..ddec04b1b0c 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -770,8 +770,6 @@ $mr-widget-min-height: 69px; position: -webkit-sticky; position: sticky; top: $header-height + $mr-tabs-height; - margin-left: -16px; - width: calc(100% + 32px); .mr-version-menus-container { flex-wrap: nowrap; @@ -868,6 +866,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..d382fc6241f 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -26,10 +26,6 @@ } .pipelines { - .negative-margin-top { - margin-top: -$pipelines-table-header-height; - } - .stage { max-width: 90px; width: 90px; @@ -111,6 +107,10 @@ white-space: nowrap; } } + + .pipeline-tags .label-container { + white-space: normal; + } } } @@ -124,22 +124,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; @@ -191,45 +175,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,14 +192,6 @@ .build-link a { color: $gl-text-color; } - - .btn-group.open .dropdown-toggle { - box-shadow: none; - } - - .pipeline-tags .label-container { - white-space: normal; - } } .stage-cell { @@ -322,9 +265,11 @@ } } -.admin-builds-table { - .ci-table td:last-child { - min-width: 120px; +[data-page='admin:jobs:index'] { + .admin-builds-table { + td:last-child { + min-width: 120px; + } } } @@ -333,377 +278,376 @@ border-bottom: 0; } -.tab-pane { - &.builds .ci-table tr { - height: 71px; - } - - .ci-table { - thead th { - border-top: 0; +[data-page='projects:pipelines:show'] { + .tab-pane { + .ci-table { + thead th { + border-top: 0; + } } } -} -.build-failures { - .build-state { - padding: 20px 2px; + .build-failures { + .build-state { + padding: 20px 2px; - .build-name { - font-weight: $gl-font-weight-normal; - } + .build-name { + font-weight: $gl-font-weight-normal; + } - .stage { - color: $gl-text-color-secondary; - font-weight: $gl-font-weight-normal; - vertical-align: middle; + .stage { + color: $gl-text-color-secondary; + font-weight: $gl-font-weight-normal; + vertical-align: middle; + } } - } - .build-log { - border: 0; - line-height: initial; - } + .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-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-trace { + width: 100%; + text-align: left; + margin-top: $gl-padding; + } - .build-name { - width: 196px; + .build-name { + width: 196px; - a { - font-weight: $gl-font-weight-bold; - color: $gl-text-color; - text-decoration: none; + a { + font-weight: $gl-font-weight-bold; + color: $gl-text-color; + text-decoration: none; - &:focus, - &:hover { - text-decoration: underline; + &: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; + .build-actions { + width: 70px; + text-align: right; } - } - @include media-breakpoint-down(sm) { - td:empty { - display: none; + .build-stage { + width: 140px; } - .ci-table { - margin-top: 2 * $gl-padding; + .ci-status-icon-failed { + padding: 10px 0 10px 12px; + width: 12px + 24px; // padding-left + svg width } - .build-trace-container { - padding-top: $gl-padding; - padding-bottom: $gl-padding; + .build-icon svg { + width: 24px; + height: 24px; + vertical-align: middle; } - .build-trace { - margin-bottom: 0; - margin-top: 0; + .build-state, + .build-trace-row { + > td:last-child { + padding-right: 0; + } } - } -} -.pipeline-tab-content { - display: flex; - width: 100%; - min-height: $dropdown-max-height-lg; - background-color: $gray-light; - padding: $gl-padding 0; - overflow: auto; -} + @include media-breakpoint-down(sm) { + td:empty { + display: none; + } -// Pipeline graph -.pipeline-graph { - white-space: nowrap; - transition: max-height 0.3s, padding 0.3s; + .ci-table { + margin-top: 2 * $gl-padding; + } - .stage-column-list, - .builds-container > ul { - padding: 0; - } + .build-trace-container { + padding-top: $gl-padding; + padding-bottom: $gl-padding; + } - a { - text-decoration: none; - color: $gl-text-color; + .build-trace { + margin-bottom: 0; + margin-top: 0; + } + } } - svg { - vertical-align: middle; + .pipeline-tab-content { + display: flex; + width: 100%; + min-height: $dropdown-max-height-lg; + background-color: $gray-light; + padding: $gl-padding 0; + overflow: auto; } - .stage-column { - display: inline-block; - vertical-align: top; - - &.left-margin { - &:not(:first-child) { - margin-left: 44px; + // 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; - .left-connector { - @include flat-connector-before; - } - } + .stage-column-list, + .builds-container > ul { + padding: 0; } - &.no-margin { - margin: 0; + a { + text-decoration: none; + color: $gl-text-color; } - li { - list-style: none; + svg { + vertical-align: middle; } - // 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; - } - } - } + .stage-column { + display: inline-block; + vertical-align: top; - // 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; + &.left-margin { + &:not(:first-child) { + margin-left: 44px; + + .left-connector { + @include flat-connector-before; + } } } - } - - // 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; + &.no-margin { + margin: 0; } - &::after { - left: -44px; - border-right: 2px solid $border-color; - border-radius: 0 20px; + li { + list-style: none; } - &::before { - right: -44px; - border-left: 2px solid $border-color; - border-radius: 20px 0 0; + // 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; + } + } } - } - } - .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; + // 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; + } + } } - } - // ensure .build-content has hover style when action-icon is hovered - .ci-job-dropdown-container:hover .build-content { - @extend .build-content:hover; - } + // Curve first child connecting lines in opposite direction + .curve { + display: none; - .ci-status-icon svg { - height: 24px; - width: 24px; - } + &::before, + &::after { + content: ''; + width: 21px; + height: 25px; + position: absolute; + top: -31px; + border-top: 2px solid $border-color; + } - .dropdown-menu-toggle { - background-color: transparent; - border: 0; - padding: 0; + &::after { + left: -44px; + border-right: 2px solid $border-color; + border-radius: 0 20px; + } - &:focus { - outline: none; + &::before { + right: -44px; + border-left: 2px solid $border-color; + border-radius: 20px 0 0; + } } } - .build-content { - @include build-content(); + .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; } - a.build-content:hover, - button.build-content:hover { - background-color: $gray-darker; - border: 1px solid $dropdown-toggle-active-border-color; - } + .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; + } + } - // 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; + // ensure .build-content has hover style when action-icon is hovered + .ci-job-dropdown-container:hover .build-content { + @extend .build-content:hover; } - } - // 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; + .ci-status-icon svg { + height: 24px; + width: 24px; } - // Right connecting curves - &::after { - right: -25px; - border-right: 2px solid $border-color; - border-radius: 0 0 20px; + .dropdown-menu-toggle { + background-color: transparent; + border: 0; + padding: 0; + + &:focus { + outline: none; + } } - // Left connecting curves - &::before { - left: -25px; - border-left: 2px solid $border-color; - border-radius: 0 0 0 20px; + .build-content { + @include build-content(); } - } - // Connect second build to first build with smaller curved line - &:nth-child(2) { - &::after, - &::before { - height: 29px; - top: -9px; + a.build-content:hover, + button.build-content:hover { + background-color: $gray-darker; + border: 1px solid $dropdown-toggle-active-border-color; } - .curve { - display: block; + // 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; + } } - } - } - .ci-action-icon-container { - position: absolute; - right: 5px; - top: 50%; - transform: translateY(-50%); + // 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; + } - // 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; + // Right connecting curves + &::after { + right: -25px; + border-right: 2px solid $border-color; + border-radius: 0 0 20px; + } - svg { - fill: $gl-text-color-secondary; + // Left connecting curves + &::before { + left: -25px; + border-left: 2px solid $border-color; + border-radius: 0 0 0 20px; + } } - .spinner { - top: 2px; + // 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; - &.play { svg { - left: 1px; - top: 1px; + fill: $gl-text-color-secondary; + } + + .spinner { + top: 2px; + } + + &.play { + svg { + left: 1px; + top: 1px; + } } } } - } - .stage-action svg { - left: 1px; - top: -2px; + .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; + // 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, @@ -1013,31 +957,35 @@ button.mini-pipeline-graph-dropdown-toggle { /** * Terminal */ -.terminal-icon { - margin-left: 3px; -} - -.terminal-container { - .content-block { - border-bottom: 0; - } +[data-page='projects:jobs:terminal'], +[data-page='projects:environments:terminal'] { + .terminal-container { + .content-block { + border-bottom: 0; + } - #terminal { - margin-top: 10px; - min-height: 450px; - box-sizing: border-box; + #terminal { + margin-top: 10px; - > div { - min-height: 450px; + > div { + min-height: 450px; + } } } } -.ci-header-container { - min-height: 55px; - - .text-center { - padding-top: 12px; +/** + * Pipelines / Jobs header + */ +[data-page='projects:pipelines:show'], +[data-page='projects:jobs:show'] { + .ci-header-container { + min-height: $gl-spacing-scale-7; + display: flex; + + .text-center { + padding-top: 12px; + } } } @@ -1045,19 +993,6 @@ button.mini-pipeline-graph-dropdown-toggle { 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(); 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..05ade210153 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -778,7 +778,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 +794,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/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..cd607e9b247 100644 --- a/app/assets/stylesheets/themes/_dark.scss +++ b/app/assets/stylesheets/themes/_dark.scss @@ -163,6 +163,8 @@ body.gl-dark { --gl-text-color: #{$gray-900}; --border-color: #{$border-color}; + + --white: #{$white}; } $border-white-light: $gray-900; diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss index 9c666331c4f..0e57fc325c2 100644 --- a/app/assets/stylesheets/utilities.scss +++ b/app/assets/stylesheets/utilities.scss @@ -156,3 +156,18 @@ display: none; } } + +// 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-flex-basis-quarter { + flex-basis: 25%; +} + +.gl-md-ml-3 { + @media (min-width: $breakpoint-md) { + margin-left: $gl-spacing-scale-3; + } +} |