diff options
| author | Filipa Lacerda <filipa@gitlab.com> | 2018-10-08 10:40:10 +0100 |
|---|---|---|
| committer | Filipa Lacerda <filipa@gitlab.com> | 2018-10-08 10:40:10 +0100 |
| commit | fa875ba7a9441df6827ef1d6b05405c66ee0c579 (patch) | |
| tree | 23d0cf911c9bf6a73fec9bb1f3de1bf61bedeacd /app/assets/stylesheets | |
| parent | ecefe090460687a078e3d1aacf621fd5bff07fb5 (diff) | |
| parent | 838c1076694d24d180e19625d663749c8b5c1a1c (diff) | |
| download | gitlab-ce-fa875ba7a9441df6827ef1d6b05405c66ee0c579.tar.gz | |
Merge branch 'master' into 42611-removed-branch-link
* master: (1252 commits)
Render log artifact files in GitLab
Check disabled_services when finding a service
Fix invalid parent path on group settings page
Backport CE changes for: [Frontend only] Batch comments on merge requests
Add button to insert table in markdown editor
Update GITALY_SERVER_VERSION
Updates Laravel.gitlab-ci.yml template
Update operations metrics empty state
Fix LFS uploaded images not being rendered
Prepare admin/projects/show view to allow EE specific feature
Add timed incremental rollout to Auto DevOps
Update spec comment to point to correct issue
Fix documentation for variables
Document Security and Licence Management features permissions
Fix time dependent jobs spec
Use a CTE to remove the query timeout
Backport changes from gitlab-ee!7538
Fix CE to EE merge (backport)
Add changelog entry
Refactor Feature.flipper method
...
Diffstat (limited to 'app/assets/stylesheets')
62 files changed, 719 insertions, 692 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index f2950308019..ffe65ce780e 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -5,7 +5,6 @@ *= require jquery.atwho *= require select2 *= require_self - *= require dropzone/basic *= require cropper.css */ @@ -18,6 +17,7 @@ */ @import "../../../node_modules/pikaday/scss/pikaday"; +@import "../../../node_modules/dropzone/dist/basic.css"; /* * GitLab UI framework diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index c91f5e279ea..af73954bd2e 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -93,7 +93,6 @@ hr { } .form-group.row .col-form-label { - padding-top: 0; // Bootstrap 4 aligns labels to the left // for horizontal forms @include media-breakpoint-up(md) { diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index b1a20c06910..4ffb3e9ab42 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -27,7 +27,6 @@ @import 'framework/header'; @import 'framework/highlight'; @import 'framework/issue_box'; -@import 'framework/jquery'; @import 'framework/lists'; @import 'framework/logo'; @import 'framework/markdown_area'; @@ -64,3 +63,4 @@ @import 'framework/ci_variable_list'; @import 'framework/feature_highlight'; @import 'framework/terms'; +@import 'framework/read_more'; diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 9dd0384a228..fcf282a7d7c 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -69,7 +69,7 @@ .identicon { text-align: center; vertical-align: top; - color: $identicon-fg-color; + color: $gl-gray-700; background-color: $gray-darker; // Sizes @@ -104,6 +104,7 @@ a { width: 100%; + height: 100%; display: flex; } diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index a265e4206f1..702276780e9 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -229,8 +229,8 @@ svg { margin-bottom: 1px; - height: 18px; - width: 18px; + height: $default-icon-size; + width: $default-icon-size; border-radius: 50%; path { diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 72b4ed0ac33..c4296c7a88a 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -147,17 +147,12 @@ } &.btn-success, - &.btn-new, - &.btn-create, - &.btn-save { + &.btn-register { @include btn-green; } &.btn-inverted { - &.btn-success, - &.btn-new, - &.btn-create, - &.btn-save { + &.btn-success { @include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700); } @@ -165,6 +160,10 @@ @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700); } + &.btn-warning { + @include btn-outline($white-light, $orange-500, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700); + } + &.btn-primary, &.btn-info { @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700); @@ -172,8 +171,7 @@ } &.btn-info, - &.btn-primary, - &.btn-register { + &.btn-primary { @include btn-blue; } @@ -248,7 +246,7 @@ .btn-terminal { svg { height: 14px; - width: 18px; + width: $default-icon-size; } } @@ -362,10 +360,14 @@ i { color: $gl-text-color-secondary; } + + svg { + fill: $gl-text-color-secondary; + } } .clone-dropdown-btn a { - color: $dropdown-link-color; + color: $gl-gray-700; &:hover { text-decoration: none; diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index 0b9dff64b0b..9638fee6078 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -1,8 +1,7 @@ -.calender-block { +.calendar-block { padding-left: 0; padding-right: 0; border-top: 0; - direction: rtl; @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { overflow-x: auto; @@ -42,10 +41,13 @@ } .calendar-hint { - margin-top: -23px; - float: right; font-size: 12px; - direction: ltr; + + &.bottom-right { + direction: ltr; + margin-top: -23px; + float: right; + } } .pika-single.gitlab-theme { diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 72e27f9ad16..3c9505a21d6 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -43,7 +43,7 @@ color: $brand-info; } -.hint { font-style: italic; color: $hint-color; } +.hint { font-style: italic; color: $gl-gray-400; } .light { color: $gl-text-color; } .slead { @@ -70,13 +70,6 @@ pre { padding: 0; } - &.card.card-body-pre { - border: 1px solid $gray-darker; - background: $gray-light; - border-radius: 0; - color: $well-pre-color; - } - &.wrap { word-break: break-word; white-space: pre-wrap; @@ -121,49 +114,24 @@ hr { text-decoration: none; } -.back-link { - font-size: 14px; -} - table { a code { position: relative; top: -2px; margin-right: 3px; } - - td.permission-x { - background: $table-permission-x-bg !important; - text-align: center; - } } .loading { margin: 20px auto; height: 40px; - color: $loading-color; + color: $gl-gray-700; font-size: 32px; text-align: center; } -span.update-author { - display: block; - color: $update-author-color; - font-weight: $gl-font-weight-normal; - font-style: italic; - - strong { - font-weight: $gl-font-weight-bold; - font-style: normal; - } -} - -.field_with_errors { - display: inline; -} - p.time { - color: $time-color; + color: $gl-gray-400; font-size: 90%; margin: 30px 3px 3px 2px; } @@ -197,40 +165,11 @@ li.note { background-color: inherit; } -.project_member_show { - td:first-child { - color: $project-member-show-color; - } -} - -.rss-icon { - img { - width: 24px; - vertical-align: top; - } - - strong { - line-height: 24px; - } -} - .show-suppressed-diff, .show-all-commits { cursor: pointer; } -.git_error_tips { - @extend .col-lg-6; - text-align: left; - margin-top: 40px; - - pre { - background: $white-light; - border: 0; - font-size: 12px; - } -} - .error-message { padding: 10px; background: $red-400; @@ -258,7 +197,7 @@ li.note { .gitlab-promo { a { - color: $gl-promo-color; + color: $gl-gray-350; margin-right: 30px; } } @@ -271,19 +210,6 @@ li.note { } } -.control-group { - .controls { - span { - &.descr { - position: relative; - top: 2px; - left: 5px; - color: $control-group-descr-color; - } - } - } -} - img.emoji { height: 20px; vertical-align: top; @@ -302,12 +228,6 @@ img.emoji { margin-bottom: 10px; } -.side-filters { - fieldset { - margin-bottom: 15px; - } -} - .footer-links { margin-bottom: 20px; @@ -329,25 +249,6 @@ img.emoji { text-align: center; } -.header-with-avatar { - h3 { - margin: 0; - font-weight: $gl-font-weight-bold; - } - - .username { - font-size: 18px; - color: $username-color; - margin-top: 8px; - } - - .description { - font-size: $gl-font-size; - color: $description-color; - margin-top: 8px; - } -} - .dropzone .dz-preview .dz-progress { border-color: $border-color !important; @@ -386,16 +287,6 @@ img.emoji { } } -.content-separator { - margin-left: -$gl-padding; - margin-right: -$gl-padding; - border-top: 1px solid $border-color; -} - -.hide-bottom-border { - border-bottom: 0 !important; -} - .gl-accessibility { &:focus { display: flex; @@ -433,6 +324,16 @@ img.emoji { word-wrap: break-word; } +.checkbox-icon-inline-wrapper { + .checkbox { + display: inline; + + label { + display: inline; + } + } +} + /** COMMON CLASSES **/ .prepend-top-0 { margin-top: 0; } .prepend-top-2 { margin-top: 2px; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index e2bbcc67a67..2e7f25d975e 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -9,8 +9,7 @@ padding-left: $contextual-sidebar-width; } - .issues-bulk-update.right-sidebar.right-sidebar-expanded - .issuable-sidebar-header { + .issues-bulk-update.right-sidebar.right-sidebar-expanded .issuable-sidebar-header { padding: 10px 0 15px; } } @@ -75,7 +74,7 @@ .nav-sidebar { transition: width $sidebar-transition-duration, left $sidebar-transition-duration; position: fixed; - z-index: 400; + z-index: 600; width: $contextual-sidebar-width; top: $header-height; bottom: 0; @@ -86,8 +85,7 @@ &:not(.sidebar-collapsed-desktop) { @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { - box-shadow: inset -1px 0 0 $border-color, - 2px 1px 3px $dropdown-shadow-color; + box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color; } } @@ -113,7 +111,7 @@ } .avatar-container { - margin-right: 0; + margin: 0 auto; } } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index 8a224dc517e..8603714f709 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -607,25 +607,25 @@ width: 100%; min-height: 30px; padding: 0 7px; - color: $dropdown-input-color; + color: $gl-gray-700; line-height: 30px; border: 1px solid $dropdown-divider-color; border-radius: 2px; outline: 0; &:focus { - color: $dropdown-link-color; + color: $gl-gray-700; border-color: $blue-300; box-shadow: 0 0 4px $dropdown-input-focus-shadow; ~ .fa { - color: $dropdown-link-color; + color: $gl-gray-700; } } &:hover { ~ .fa { - color: $dropdown-link-color; + color: $gl-gray-700; } } } @@ -890,7 +890,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { position: absolute; top: 13px; right: 25px; - color: $md-area-border; + color: $gray-100; } } @@ -929,7 +929,7 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu { &:hover { .frequent-items-item-avatar-container .avatar { - border-color: $md-area-border; + border-color: $gray-100; } } diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index 6c50ea719d3..be85e03430e 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -6,3 +6,13 @@ gl-emoji { font-size: 1.4em; line-height: 1em; } + +.user-status-emoji { + margin-right: $gl-padding-4; + + gl-emoji { + font-size: 1em; + line-height: 16px; + vertical-align: baseline; + } +} diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 1d3512bbb4c..53f198b47c6 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -184,7 +184,7 @@ &.line-numbers { float: none; - border-left: 1px solid $blame-line-numbers-border; + border-left: 1px solid $gl-gray-100; i { float: none; diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index abfe350677e..d5693a5d1a1 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -92,8 +92,8 @@ display: -webkit-flex; display: flex; flex-shrink: 0; - margin-top: 5px; - margin-bottom: 5px; + margin-top: 4px; + margin-bottom: 4px; .selectable { display: -webkit-flex; @@ -216,8 +216,8 @@ vertical-align: inherit; img { - height: 18px; - width: 18px; + height: $default-icon-size; + width: $default-icon-size; } } @@ -389,9 +389,8 @@ .btn { text-overflow: ellipsis; - .fa { - width: 15px; - line-height: $line-height-base; + svg { + margin-right: $gl-padding-8; } .dropdown-label-box { diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index d2ba76f5160..50d4298d418 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -11,6 +11,10 @@ padding: 0 2px; background-color: $blue-100; border-radius: $border-radius-default; + + &.current-user { + background-color: $orange-100; + } } .gfm-color_chip { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 11a30d83f03..c430009bfe0 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -529,9 +529,10 @@ } .header-user { - .dropdown-menu { + &.show .dropdown-menu { width: auto; min-width: unset; + max-height: 323px; margin-top: 4px; color: $gl-text-color; left: auto; @@ -542,6 +543,18 @@ .user-name { display: block; } + + .user-status-emoji { + margin-right: 0; + display: block; + vertical-align: text-top; + max-width: 148px; + font-size: 12px; + + gl-emoji { + font-size: $gl-font-size; + } + } } svg { @@ -573,3 +586,24 @@ } } } + +.set-user-status-modal { + .modal-body { + min-height: unset; + } + + .input-lg { + max-width: unset; + } + + .no-emoji-placeholder, + .clear-user-status { + svg { + fill: $gl-text-color-secondary; + } + } + + .emoji-menu-toggle-button { + @include emoji-menu-toggle-button; + } +} diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index f002edced8a..abd26e38d18 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -64,6 +64,7 @@ } } +.ci-status-icon-scheduled, .ci-status-icon-manual { svg { fill: $gl-text-color; diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss deleted file mode 100644 index d1360a0c0eb..00000000000 --- a/app/assets/stylesheets/framework/jquery.scss +++ /dev/null @@ -1,15 +0,0 @@ -.ui-widget { - font-family: $regular-font; - font-size: $font-size-base; - - .ui-state-default { - border: 1px solid $white-light; - background: $white-light; - color: $jq-ui-default-color; - } - - .ui-state-highlight { - border: 0; - background: transparent; - } -} diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss index d4bae4cb137..9218df9b40f 100644 --- a/app/assets/stylesheets/framework/layout.scss +++ b/app/assets/stylesheets/framework/layout.scss @@ -69,10 +69,14 @@ body { float: right; } - /* Center alert text and alert action links on smaller screens */ - @include media-breakpoint-down(sm) { - .alert { - text-align: center; + .flex-alert { + @include media-breakpoint-up(lg) { + display: flex; + + .alert-message { + flex: 1; + padding-right: 40px; + } } .alert-link-group { @@ -80,6 +84,13 @@ body { } } + @include media-breakpoint-down(sm) { + .alert-link-group { + float: none; + margin-top: $gl-padding-8; + } + } + /* Stripe the background colors so that adjacent alert-warnings are distinct from one another */ .alert-warning { transition: background-color 0.15s, border-color 0.15s; diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index fdc0454d837..d9d4a210f5f 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -111,6 +111,7 @@ ul.content-list { border-color: $white-normal; font-size: $gl-font-size; color: $gl-text-color; + word-break: break-word; &.no-description { .title { diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index d8391b59a8c..554e2b6720a 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -122,7 +122,7 @@ .markdown-area { border-radius: 0; background: $white-light; - border: 1px solid $md-area-border; + border: 1px solid $gray-100; min-height: 140px; max-height: 500px; padding: 5px; diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 7edb89ce6f3..be41dbfc61f 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -20,20 +20,24 @@ display: inline-block; overflow-x: auto; border: 0; - border-color: $md-area-border; + border-color: $gl-gray-100; @supports (width: fit-content) { display: block; width: fit-content; } + tbody { + background-color: $white-light; + } + tr { th { - border-bottom: solid 2px $md-area-border; + border-bottom: solid 2px $gl-gray-100; } td { - border-color: $md-area-border; + border-color: $gl-gray-100; } } } @@ -266,3 +270,59 @@ border-radius: 50%; } } + +@mixin emoji-menu-toggle-button { + line-height: 1; + padding: 0; + min-width: 16px; + color: $gray-darkest; + fill: $gray-darkest; + + .fa { + position: relative; + font-size: 16px; + } + + svg { + @include btn-svg; + margin: 0; + } + + .award-control-icon-positive, + .award-control-icon-super-positive { + position: absolute; + top: 0; + left: 0; + opacity: 0; + } + + &:hover, + &.is-active { + .danger-highlight { + color: $red-500; + } + + .link-highlight { + color: $blue-600; + fill: $blue-600; + } + + .award-control-icon-neutral { + opacity: 0; + } + + .award-control-icon-positive { + opacity: 1; + } + } + + &.is-active { + .award-control-icon-positive { + opacity: 0; + } + + .award-control-icon-super-positive { + opacity: 1; + } + } +} diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss index 6244fb86fea..6d20c46b99d 100644 --- a/app/assets/stylesheets/framework/mobile.scss +++ b/app/assets/stylesheets/framework/mobile.scss @@ -4,11 +4,6 @@ margin-top: 20px; } - .container-fluid { - padding-left: 5px; - padding-right: 5px; - } - .nav-links > li > a { padding: 10px; font-size: 12px; @@ -49,12 +44,8 @@ .project-repo-buttons { display: block; - .count-buttons .btn { - margin: 0 10px; - } - - .count-buttons .count-with-arrow { - display: none; + .count-buttons .count-badge { + margin-top: $gl-padding-8; } } } diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 7d53a631cdf..7e30747963a 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -19,6 +19,17 @@ } } + // leave enough space for the close icon + .modal-title { + &.mw-100, + &.w-100 { + // after upgrading to Bootstrap 4.2 we can use $modal-header-padding-x here + // https://github.com/twbs/bootstrap/pull/26976 + margin-right: -2rem; + padding-right: 2rem; + } + } + .page-title { margin-top: 0; } @@ -59,7 +70,7 @@ } @include media-breakpoint-up(sm) { - .btn:first-of-type { + .btn:nth-child(1) { margin-left: auto; } } diff --git a/app/assets/stylesheets/framework/read_more.scss b/app/assets/stylesheets/framework/read_more.scss new file mode 100644 index 00000000000..b84b6e0b256 --- /dev/null +++ b/app/assets/stylesheets/framework/read_more.scss @@ -0,0 +1,13 @@ +.read-more-container { + @include media-breakpoint-down(md) { + &:not(.is-expanded) { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + > * { + display: inline; + } + } + } +} diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss index 764bebd82c6..29a9c076cdf 100644 --- a/app/assets/stylesheets/framework/responsive_tables.scss +++ b/app/assets/stylesheets/framework/responsive_tables.scss @@ -39,7 +39,7 @@ .table-section { white-space: nowrap; - $section-widths: 10 15 20 25 30 40 50 100; + $section-widths: 5 10 15 20 25 30 40 50 60 100; @each $width in $section-widths { &.section-#{$width} { flex: 0 0 #{$width + '%'}; diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 3ae2c7078d6..381c0290d32 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -237,7 +237,7 @@ } .group-path { - color: $group-path-color; + color: $gl-gray-400; } } @@ -257,7 +257,7 @@ .namespace-result { .namespace-kind { - color: $namespace-kind-color; + color: $gl-gray-350; font-weight: $gl-font-weight-normal; } diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 7152ef9bcfd..36ab38f1c9d 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -45,7 +45,7 @@ } } -.snippet-scope-menu .btn-new { +.snippet-scope-menu .btn-success { margin-top: 15px; } diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss index 20394cc1e52..8258da07e4d 100644 --- a/app/assets/stylesheets/framework/toggle.scss +++ b/app/assets/stylesheets/framework/toggle.scss @@ -31,7 +31,7 @@ height: 24px; cursor: pointer; user-select: none; - background: $feature-toggle-color-disabled; + background: $gl-gray-400; border-radius: 12px; padding: 3px; transition: all .4s ease; @@ -56,12 +56,12 @@ &, .toggle-icon-svg { - width: 18px; - height: 18px; + width: $default-icon-size; + height: $default-icon-size; } .toggle-icon-svg { - fill: $feature-toggle-color-disabled; + fill: $gl-gray-400; } .toggle-status-checked { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 9929f1bdebf..6d891e21556 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -61,12 +61,12 @@ padding: 3px 5px; font-size: 11px; line-height: 10px; - color: $kdb-color; + color: $gl-gray-700; vertical-align: middle; background-color: $kdb-bg; border-width: 1px; border-style: solid; - border-color: $kdb-border $kdb-border $kdb-border-bottom; + border-color: $gl-gray-200 $gl-gray-200 $kdb-border-bottom; border-image: none; border-radius: 3px; box-shadow: 0 -1px 0 $kdb-shadow inset; @@ -286,7 +286,7 @@ body { } .page-title { - margin-top: $gl-padding; + margin: #{2 * $grid-size} 0; line-height: 1.3; font-size: 1.25em; font-weight: $gl-font-weight-bold; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index d76f5cbd9ff..b7a95f604b8 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -31,6 +31,14 @@ $gray-dark: darken($gray-light, $darken-dark-factor); $gray-darker: #eee; $gray-darkest: #c4c4c4; +$gl-gray-100: #dddddd; +$gl-gray-200: #cccccc; +$gl-gray-350: #aaaaaa; +$gl-gray-400: #999999; +$gl-gray-500: #777777; +$gl-gray-600: #666666; +$gl-gray-700: #555555; + $green-50: #f1fdf6; $green-100: #dcf5e7; $green-200: #b3e6c8; @@ -47,7 +55,7 @@ $blue-50: #f6fafe; $blue-100: #e4f0fb; $blue-200: #b8d6f4; $blue-300: #73afea; -$blue-400: #2e87e0; +$blue-400: #418cd8; $blue-500: #1f78d1; $blue-600: #1b69b6; $blue-700: #17599c; @@ -59,7 +67,7 @@ $orange-50: #fffaf4; $orange-100: #fff1de; $orange-200: #fed69f; $orange-300: #fdbc60; -$orange-400: #fca121; +$orange-400: #fca429; $orange-500: #fc9403; $orange-600: #de7e00; $orange-700: #c26700; @@ -70,7 +78,7 @@ $orange-950: #592800; $red-50: #fef6f5; $red-100: #fbe5e1; $red-200: #f2b4a9; -$red-300: #e67664; +$red-300: #ea8271; $red-400: #e05842; $red-500: #db3b21; $red-600: #c0341d; @@ -207,11 +215,6 @@ $list-border: rgba(0, 0, 0, 0.05); $list-text-height: 42px; /* - * Markdown - */ -$md-area-border: #ddd; - -/* * Code */ $code-font-size: 90%; @@ -241,7 +244,6 @@ $input-horizontal-padding: 12px; /* * Misc */ -$progress-color: #c0392b; $header-height: 40px; $ide-statusbar-height: 25px; $fixed-layout-width: 1280px; @@ -250,20 +252,13 @@ $container-text-max-width: 540px; $gl-avatar-size: 40px; $border-radius-default: 4px; $border-radius-small: 2px; -$settings-icon-size: 18px; +$default-icon-size: 18px; $layout-link-gray: #7e7c7c; $btn-side-margin: 10px; $btn-sm-side-margin: 7px; $btn-margin-5: 5px; $sidebar-block-hover-color: #ebebeb; -$group-path-color: #999; -$namespace-kind-color: #aaa; -$panel-heading-link-color: #777; -$graph-author-email-color: #777; $count-arrow-border: #dce0e5; -$save-project-loader-color: #555; -$divergence-graph-bar-bg: #ccc; -$divergence-graph-separator-bg: #ccc; $general-hover-transition-duration: 100ms; $general-hover-transition-curve: linear; $highlight-changes-color: rgb(235, 255, 232); @@ -271,24 +266,13 @@ $performance-bar-height: 35px; $flash-height: 52px; $context-header-height: 60px; $breadcrumb-min-height: 48px; +$project-title-row-height: 24px; /* * Common component specific colors */ -$hint-color: #999; -$well-pre-color: #555; -$loading-color: #555; -$update-author-color: #999; $user-mention-bg: rgba($blue-500, 0.044); $user-mention-bg-hover: rgba($blue-500, 0.15); -$time-color: #999; -$project-member-show-color: #aaa; -$gl-promo-color: #aaa; -$control-group-descr-color: #666; -$table-permission-x-bg: #d9edf7; -$username-color: #666; -$description-color: #666; -$profiler-border: #eee; /* tanuki logo colors */ $tanuki-red: #e24329; @@ -319,9 +303,7 @@ $line-select-yellow: #fcf8e7; $line-select-yellow-dark: #f0e2bd; $dark-diff-match-bg: rgba(255, 255, 255, 0.3); $dark-diff-match-color: rgba(255, 255, 255, 0.1); -$file-mode-changed: #777; $diff-image-info-color: gray; -$diff-swipe-border: #999; $diff-view-modes-color: gray; $diff-view-modes-border: #c1c1c1; $diff-jagged-border-gradient-color: darken($white-normal, 8%); @@ -332,7 +314,8 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%); $monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono', 'Courier New', 'andale mono', 'lucida console', monospace; $regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, - 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', + 'Noto Color Emoji'; /* * Dropdowns @@ -341,12 +324,10 @@ $dropdown-width: 300px; $dropdown-min-height: 40px; $dropdown-max-height: 312px; $dropdown-vertical-offset: 4px; -$dropdown-link-color: #555; $dropdown-empty-row-bg: rgba(#000, 0.04); $dropdown-shadow-color: rgba(#000, 0.1); $dropdown-divider-color: rgba(#000, 0.1); $dropdown-title-btn-color: #bfbfbf; -$dropdown-input-color: #555; $dropdown-input-fa-color: #c7c7c7; $dropdown-input-focus-shadow: rgba($blue-300, 0.4); $dropdown-loading-bg: rgba(#fff, 0.6); @@ -419,15 +400,9 @@ $location-icon-color: #e7e9ed; $note-disabled-comment-color: #b2b2b2; $note-targe3-outside: #fffff0; $note-targe3-inside: #ffffd3; -$note-line2-border: #ddd; $note-icon-gutter-width: 55px; /* -* Zen -*/ -$zen-control-color: #555; - -/* * Identicon */ $identicon-red: #ffebee; @@ -436,7 +411,6 @@ $identicon-indigo: #e8eaf6; $identicon-blue: #e3f2fd; $identicon-teal: #e0f2f1; $identicon-orange: #fbe9e7; -$identicon-fg-color: #555555; /* * Calendar @@ -505,16 +479,8 @@ $common-gray-light: #bbb; $common-gray-dark: #444; /* -* Events -*/ -$events-pre-color: #777; -$events-note-icon-color: #777; -$events-body-border: #ddd; - -/* * Files */ -$blame-line-numbers-border: #ddd; $logs-li-color: #888; $logs-p-color: #333; @@ -533,8 +499,6 @@ $input-short-md-width: 280px; * Help */ $document-index-color: #888; -$help-shortcut-color: #999; -$help-shortcut-mapping-color: #555; $help-shortcut-header-color: #333; /* @@ -545,12 +509,6 @@ $issues-today-border: #e1e8d5; $compare-display-color: #888; /* -* jQuery UI -*/ -$jq-ui-border: #ddd; -$jq-ui-default-color: #777; - -/* * Label */ $label-font-size: 12px; @@ -574,34 +532,19 @@ $fade-mask-transition-curve: ease-in-out; $login-brand-holder-color: #888; /* -* Nav -*/ -$nav-link-gray: #959494; -$nav-toggle-gray: #666; - -/* -* Notify -*/ -$notify-details: #777; -$notify-footer: #777; - -/* * Projects */ $project-option-descr-color: #54565b; -$project-breadcrumb-color: #999; $project-network-controls-color: #888; $feature-toggle-color: #fff; $feature-toggle-text-color: #fff; -$feature-toggle-color-disabled: #999; $feature-toggle-color-enabled: #4a8bee; /* Stat Graph */ $stat-graph-common-bg: #f3f3f3; -$stat-graph-axis-fill: #aaa; $stat-graph-selection-fill: #333; $stat-graph-selection-stroke: #333; @@ -612,17 +555,9 @@ $select2-drop-shadow1: rgba(76, 86, 103, 0.247059); $select2-drop-shadow2: rgba(31, 37, 50, 0.317647); /* -* Todo -*/ -$todo-body-pre-color: #777; -$todo-body-border: #ddd; - -/* * Typography */ $kdb-bg: #fcfcfc; -$kdb-color: #555; -$kdb-border: #ccc; $kdb-border-bottom: #bbb; $kdb-shadow: #bbb; $body-text-shadow: rgba(255, 255, 255, 0.01); @@ -631,7 +566,6 @@ $body-text-shadow: rgba(255, 255, 255, 0.01); * UI Dev Kit */ $ui-dev-kit-example-color: #bbb; -$ui-dev-kit-example-border: #ddd; /* Pipeline Graph @@ -665,12 +599,10 @@ $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1); /* Performance Bar */ -$perf-bar-text: #999; $perf-bar-production: #222; $perf-bar-staging: #291430; $perf-bar-development: #4c1210; $perf-bar-bucket-bg: #111; -$perf-bar-bucket-color: #ccc; $perf-bar-bucket-box-shadow-from: rgba($white-light, 0.2); $perf-bar-bucket-box-shadow-to: rgba($black, 0.25); @@ -703,5 +635,4 @@ Modals */ $modal-body-height: 134px; - $priority-label-empty-state-width: 114px; diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index 7d90452e1f4..759b4f333ca 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -18,3 +18,4 @@ $success: $green-500; $info: $blue-500; $warning: $orange-500; $danger: $red-500; +$zindex-modal-backdrop: 1040; diff --git a/app/assets/stylesheets/framework/zen.scss b/app/assets/stylesheets/framework/zen.scss index f2d296fb875..a4fbd9c073f 100644 --- a/app/assets/stylesheets/framework/zen.scss +++ b/app/assets/stylesheets/framework/zen.scss @@ -35,7 +35,7 @@ .zen-control { padding: 0; - color: $zen-control-color; + color: $gl-gray-700; background: none; border: 0; } diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss index a81e5eb5ebf..f24c80bd81c 100644 --- a/app/assets/stylesheets/notify.scss +++ b/app/assets/stylesheets/notify.scss @@ -7,12 +7,12 @@ img { p.details { font-style: italic; - color: $notify-details; + color: $gl-gray-500; } .footer > p { font-size: small; - color: $notify-footer; + color: $gl-gray-500; } pre.commit-message { diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss index 5ff4e487d04..07d82e984ba 100644 --- a/app/assets/stylesheets/page_bundles/ide.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -7,6 +7,8 @@ $ide-context-header-padding: 10px; $ide-project-avatar-end: $ide-context-header-padding + 48px; $ide-tree-padding: $gl-padding; $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; +$ide-commit-row-height: 32px; +$ide-commit-header-height: 48px; .project-refs-form, .project-refs-target-form { @@ -51,83 +53,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; flex: 1; min-height: 0; // firefox fix - .file { - height: 32px; - cursor: pointer; - - &.file-active { - background: $theme-gray-100; - } - - .ide-file-name { - flex: 1; - white-space: nowrap; - text-overflow: ellipsis; - max-width: inherit; - line-height: 16px; - display: inline-block; - height: 18px; - - svg { - vertical-align: middle; - margin-right: 2px; - } - - .loading-container { - margin-right: 4px; - display: inline-block; - } - } - - .ide-file-icon-holder { - display: flex; - align-items: center; - color: $theme-gray-700; - } - - .ide-file-changed-icon { - margin-left: auto; - - > svg { - display: block; - } - } - - .ide-new-btn { - display: none; - - .btn { - padding: 2px 5px; - } - } - - &:hover, - &:focus { - .ide-new-btn { - display: block; - } - } - - .folder-icon { - fill: $gl-text-color-secondary; - } - } - a { color: $gl-text-color; } - - th { - position: sticky; - top: 0; - } -} - -.file-name { - display: flex; - overflow: visible; - align-items: center; - width: 100%; } .multi-file-loading-container { @@ -567,24 +495,11 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } .multi-file-commit-panel-header { - display: flex; - align-items: center; - margin-bottom: 0; + height: $ide-commit-header-height; border-bottom: 1px solid $white-dark; padding: 12px 0; } -.multi-file-commit-panel-header-title { - display: flex; - flex: 1; - align-items: center; - - svg { - margin-right: $gl-btn-padding; - color: $theme-gray-700; - } -} - .multi-file-commit-panel-collapse-btn { border-left: 1px solid $white-dark; margin-left: auto; @@ -594,8 +509,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; flex: 1; overflow: auto; padding: $grid-size 0; - margin-left: -$grid-size; - margin-right: -$grid-size; min-height: 60px; &.form-text.text-muted { @@ -604,21 +517,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } } -.ide-file-addition, -.ide-file-addition-solid { - color: $green-500; -} - -.ide-file-modified, -.ide-file-modified-solid { - color: $orange-500; -} - -.ide-file-deletion, -.ide-file-deletion-solid { - color: $red-500; -} - .multi-file-commit-list-collapsed { display: flex; flex-direction: column; @@ -638,8 +536,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } } -.multi-file-commit-list-path, -.ide-file-list .file { +.multi-file-commit-list-path { display: flex; align-items: center; margin-left: -$grid-size; @@ -647,29 +544,31 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; padding: $grid-size / 2 $grid-size; border-radius: $border-radius-default; text-align: left; + cursor: pointer; + height: $ide-commit-row-height; + padding-right: 0; &:hover, &:focus { background: $theme-gray-100; + + outline: 0; + + .multi-file-discard-btn { + > .btn { + display: flex; + } + } } &:active { background: $theme-gray-200; } -} - -.multi-file-commit-list-path { - cursor: pointer; &.is-active { background-color: $white-normal; } - &:hover, - &:focus { - outline: 0; - } - svg { min-width: 16px; vertical-align: middle; @@ -679,6 +578,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; .multi-file-commit-list-file-path { @include str-truncated(calc(100% - 30px)); + user-select: none; &:active { text-decoration: none; @@ -686,9 +586,11 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } .multi-file-discard-btn { - top: 4px; - right: 8px; - bottom: 4px; + > .btn { + display: none; + width: $ide-commit-row-height; + height: $ide-commit-row-height; + } svg { top: 0; @@ -807,10 +709,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } .ide-staged-action-btn { - width: 22px; - margin-left: -1px; - border-top-left-radius: 0; - border-bottom-left-radius: 0; + width: $ide-commit-row-height; + height: $ide-commit-row-height; + color: inherit; > svg { top: 0; @@ -1401,9 +1302,17 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; } } -.ide-new-btn .dropdown.show .ide-entry-dropdown-toggle { - color: $white-normal; - background-color: $blue-500; +.ide-new-btn { + display: none; + + .btn { + padding: 2px 5px; + } + + .dropdown.show .ide-entry-dropdown-toggle { + color: $white-normal; + background-color: $blue-500; + } } .ide-preview-header { @@ -1442,3 +1351,46 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding; top: 50%; transform: translateY(-50%); } + +.ide-file-templates { + padding: $grid-size $gl-padding; + background-color: $gray-light; + border-bottom: 1px solid $white-dark; + + .dropdown { + min-width: 180px; + } + + .dropdown-content { + max-height: 222px; + } +} + +.ide-commit-editor-header { + height: 65px; + padding: 8px 16px; + background-color: $theme-gray-50; + box-shadow: inset 0 -1px $white-dark; +} + +.ide-commit-list-changed-icon { + width: $ide-commit-row-height; + height: $ide-commit-row-height; +} + +.ide-file-icon-holder { + display: flex; + align-items: center; + color: $theme-gray-700; +} + +.file-row:hover, +.file-row:focus { + .ide-new-btn { + display: block; + } + + .folder-icon { + fill: $gl-text-color-secondary; + } +} diff --git a/app/assets/stylesheets/pages/xterm.scss b/app/assets/stylesheets/page_bundles/xterm.scss index 7d40c61da26..7f040ac9b96 100644 --- a/app/assets/stylesheets/pages/xterm.scss +++ b/app/assets/stylesheets/page_bundles/xterm.scss @@ -1,3 +1,5 @@ +@import 'framework/variables'; + .build-page { // color codes are based on http://en.wikipedia.org/wiki/File:Xterm_256color_chart.svg // see also: https://gist.github.com/jasonm23/2868981 diff --git a/app/assets/stylesheets/pages/admin.scss b/app/assets/stylesheets/pages/admin.scss index 6c555aee20a..f0acb78f731 100644 --- a/app/assets/stylesheets/pages/admin.scss +++ b/app/assets/stylesheets/pages/admin.scss @@ -4,3 +4,7 @@ padding-bottom: 46px; } } + +.usage-data { + max-height: 400px; +} diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 69d7de886b4..b3c5c693824 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -136,15 +136,23 @@ right: 0; bottom: 0; left: 0; + + button { + display: none; + } } .board-title { padding: 0; border-bottom: 0; + justify-content: center; > span { + width: 100%; + margin-top: -12px; display: block; - transform: rotate(90deg) translate(35px, 10px); + transform: rotate(90deg) translate(35px, 0); + overflow: initial; } } @@ -265,7 +273,7 @@ margin-bottom: 0; padding: 5px; list-style: none; - overflow-y: scroll; + overflow-y: auto; overflow-x: hidden; } diff --git a/app/assets/stylesheets/pages/branches.scss b/app/assets/stylesheets/pages/branches.scss index 49fe50977f5..38fec3f0aa8 100644 --- a/app/assets/stylesheets/pages/branches.scss +++ b/app/assets/stylesheets/pages/branches.scss @@ -23,7 +23,7 @@ .bar { position: absolute; height: 4px; - background-color: $divergence-graph-bar-bg; + background-color: $gl-gray-200; } .bar-behind { @@ -61,7 +61,7 @@ height: 18px; margin: 5px 0 0; float: left; - background-color: $divergence-graph-separator-bg; + background-color: $gl-gray-200; } } diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index 14ba8b1df83..ed877f625b5 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -328,23 +328,6 @@ } } - .build-dropdown { - margin: $gl-padding 0; - padding: 0; - - .dropdown-menu-toggle { - margin-top: #{$gl-padding / 2}; - } - - svg { - position: relative; - top: 3px; - margin-right: 3px; - width: 14px; - height: 14px; - } - } - .builds-container { background-color: $white-light; border-top: 1px solid $border-color; @@ -381,15 +364,11 @@ position: absolute; left: 15px; top: 20px; - display: none; + display: block; } &.active { font-weight: $gl-font-weight-bold; - - .icon-arrow-right { - display: block; - } } &.retried { diff --git a/app/assets/stylesheets/pages/clusters.scss b/app/assets/stylesheets/pages/clusters.scss index 0f22fe21143..71a3fd544f2 100644 --- a/app/assets/stylesheets/pages/clusters.scss +++ b/app/assets/stylesheets/pages/clusters.scss @@ -4,9 +4,60 @@ } } -.cluster-applications-table { - // Wait for the Vue to kick-in and render the applications block - min-height: 628px; +.cluster-application-row { + background: $gray-lighter; + + &.cluster-application-installed { + background: none; + } + + .settings-message { + padding: $gl-vert-padding $gl-padding-8; + } +} + +@media (min-width: map-get($grid-breakpoints, md)) { + .cluster-application-list { + border: 1px solid $border-color; + border-radius: $border-radius-default; + } + + .cluster-application-row { + border-bottom: 1px solid $border-color; + padding: $gl-padding; + } +} + +.cluster-application-logo { + border: 3px solid $white-light; + box-shadow: 0 0 0 1px $gray-normal; + + &.avatar:hover { + border-color: $white-light; + } +} + +.cluster-application-warning { + font-weight: bold; + text-align: center; + padding: $gl-padding; + border-bottom: 1px solid $white-normal; + + .svg-container { + display: inline-block; + vertical-align: middle; + margin-right: $gl-padding-8; + width: 40px; + height: 40px; + } +} + +.cluster-application-description { + flex: 1; +} + +.cluster-application-disabled { + opacity: 0.5; } .clusters-dropdown-menu { diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 10764e0f3df..628a4ca38da 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -223,6 +223,7 @@ } } +.clipboard-group, .commit-sha-group { display: inline-flex; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 7d7143631f2..17b02c6e31e 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -31,7 +31,7 @@ .file-mode-changed { padding: 10px; - color: $file-mode-changed; + color: $gl-gray-500; } .suppressed-container { @@ -72,6 +72,7 @@ .line_holder td { line-height: $code-line-height; font-size: $code-font-size; + vertical-align: top; &.noteable_line { position: relative; @@ -244,7 +245,7 @@ .swipe-wrap { overflow: hidden; - border-left: 1px solid $diff-swipe-border; + border-left: 1px solid $gl-gray-400; position: absolute; display: block; top: 13px; @@ -570,8 +571,6 @@ } .files { - margin-top: 1px; - .diff-file:last-child { margin-bottom: 0; } @@ -749,6 +748,10 @@ left: $gl-padding; } + .dropdown-input .dropdown-input-search { + pointer-events: all; + } + .diff-changed-file { display: flex; padding-top: 8px; @@ -982,3 +985,64 @@ .discussion-body .image .frame { position: relative; } + +.diff-tree-list { + width: 320px; +} + +.diff-files-holder { + flex: 1; + min-width: 0; +} + +.compare-versions-container { + min-width: 0; +} + +.tree-list-holder { + position: -webkit-sticky; + position: sticky; + top: 100px; + max-height: calc(100vh - 100px); + padding-right: $gl-padding; + + .file-row { + margin-left: 0; + margin-right: 0; + } + + .with-performance-bar & { + top: 135px; + } +} + +.tree-list-scroll { + max-height: 100%; + padding-top: $grid-size; + padding-bottom: $grid-size; + border-top: 1px solid $border-color; + border-bottom: 1px solid $border-color; + overflow-y: scroll; + overflow-x: auto; +} + +.tree-list-search .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; +} diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss index 196f6ae6d8c..79984c1a546 100644 --- a/app/assets/stylesheets/pages/environments.scss +++ b/app/assets/stylesheets/pages/environments.scss @@ -153,7 +153,7 @@ .x-axis path, .y-axis path { - stroke: $stat-graph-axis-fill; + stroke: $gl-gray-350; } .label-x-axis-line, @@ -163,7 +163,7 @@ .y-axis { line { - stroke: $stat-graph-axis-fill; + stroke: $gl-gray-350; stroke-width: 1; } } diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss index da0c9b44498..a91d44805ee 100644 --- a/app/assets/stylesheets/pages/events.scss +++ b/app/assets/stylesheets/pages/events.scss @@ -87,7 +87,7 @@ border: 0; background: $gray-light; border-radius: 0; - color: $events-pre-color; + color: $gl-gray-500; overflow: hidden; } @@ -104,7 +104,7 @@ } .event-note-icon { - color: $events-pre-color; + color: $gl-gray-500; float: left; font-size: $gl-font-size; line-height: 16px; diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss index 22fce893fd7..4fb1a956fab 100644 --- a/app/assets/stylesheets/pages/graph.scss +++ b/app/assets/stylesheets/pages/graph.scss @@ -20,7 +20,7 @@ .graphs { .graph-author-email { float: right; - color: $graph-author-email-color; + color: $gl-gray-500; } .graph-additions { @@ -58,7 +58,7 @@ .y-axis-label { line { - stroke: $stat-graph-axis-fill; + stroke: $gl-gray-350; } text { diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 60b4d39bb1a..fe792a53b44 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -3,7 +3,6 @@ } .dashboard .side .card .card-header .input-group { - .form-control { height: 42px; } @@ -30,14 +29,15 @@ } } +.group-nav-container .group-search, .group-nav-container .nav-controls { display: flex; align-items: flex-start; - padding: $gl-padding-top 0; - border-bottom: 1px solid $border-color; + padding: $gl-padding-top 0 0; .group-filter-form { - flex: 1; + flex: 1 1 auto; + margin-right: $gl-padding-8; } .dropdown-menu-right { @@ -106,7 +106,7 @@ &, .dropdown, .dropdown .dropdown-toggle, - .btn-new { + .btn-success { display: block; } @@ -118,7 +118,7 @@ .group-filter-form, .dropdown .dropdown-toggle, - .btn-new { + .btn-success { width: 100%; } @@ -136,6 +136,10 @@ flex: 1; } + .dropdown-toggle { + width: auto; + } + .dropdown-menu { width: 100%; max-width: inherit; @@ -145,38 +149,14 @@ } } -.groups-empty-state { - padding: 50px 100px; - overflow: hidden; - - @include media-breakpoint-down(sm) { - padding: 50px 0; - } - - svg { - float: right; - - @include media-breakpoint-down(sm) { - float: none; - display: block; - width: 250px; - position: relative; - left: 50%; - margin-left: -125px; - } - } - - .text-content { - float: left; - width: 460px; - margin-top: 120px; +.group-nav-container .group-search { + padding: $gl-padding 0; + border-bottom: 1px solid $border-color; +} - @include media-breakpoint-down(sm) { - float: none; - margin-top: 60px; - width: auto; - text-align: center; - } +.groups-listing { + .group-list-tree .group-row:first-child { + border-top: 0; } } @@ -278,12 +258,12 @@ } &::after { - content: ""; + content: ''; position: absolute; height: 100%; width: 100%; background-color: transparent; - border: 2px outset $kdb-border; + border: 2px outset $gl-gray-200; border-radius: 50%; animation: spin-avatar 3s infinite linear; } @@ -346,7 +326,7 @@ position: relative; &::before { - content: ""; + content: ''; display: block; width: 10px; height: 0; diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index 0350fe5752e..2c23f31c240 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -1,6 +1,6 @@ .shortcut-mappings { font-size: 12px; - color: $help-shortcut-mapping-color; + color: $gl-gray-700; tbody:first-child tr:first-child { padding-top: 0; @@ -22,7 +22,7 @@ .shortcut { padding-right: 10px; - color: $help-shortcut-color; + color: $gl-gray-400; text-align: right; white-space: nowrap; } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 9ac47a771a5..62a9f97caa9 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -701,6 +701,11 @@ align-self: center; overflow: hidden; text-overflow: ellipsis; + + .user-status-emoji { + margin-left: $gl-padding-4; + margin-right: 0; + } } .js-issuable-selector-wrap { @@ -721,13 +726,13 @@ display: flex; } - .issue-info-container { + .issuable-info-container { -webkit-flex: 1; flex: 1; display: flex; padding-right: $gl-padding; - .issue-main-info { + .issuable-main-info { flex: 1 auto; margin-right: 10px; } @@ -763,7 +768,7 @@ margin-bottom: 10px; min-width: 15px; - .selected_issue { + .selected-issuable { vertical-align: text-top; } } @@ -795,7 +800,7 @@ } .issuable-list li, -.issue-info-container .controls { +.issuable-info-container .controls { .avatar-counter { display: inline-block; vertical-align: middle; diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index c9e5fb9c579..fa0ab1a3bae 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -100,6 +100,22 @@ p { margin: 0; } + + .omniauth-btn { + margin-bottom: $gl-padding; + width: 48%; + padding: $gl-padding-8; + + @include media-breakpoint-down(md) { + width: 100%; + } + + img { + width: $default-icon-size; + height: $default-icon-size; + margin-right: $gl-padding; + } + } } .new-session-tabs { @@ -169,10 +185,6 @@ } } - label { - font-weight: $gl-font-weight-normal; - } - .submit-container { margin-top: 16px; } @@ -200,15 +212,6 @@ } } -.oauth-image-link { - margin-right: 10px; - - img { - width: 32px; - height: 32px; - } -} - .devise-layout-html { margin: 0; padding: 0; diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 5fdb2b4a90a..99609a96976 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -4,7 +4,7 @@ } .users-project-form { - .btn-create { + .btn-success { margin-right: 10px; } } diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 7b8cad254c7..45382d4ea43 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -460,7 +460,7 @@ display: -webkit-flex; display: flex; - .issue-info-container { + .issuable-info-container { -webkit-flex: 1; flex: 1; } @@ -723,6 +723,17 @@ align-items: center; padding: 16px; z-index: 199; + white-space: nowrap; + + .dropdown-menu-toggle { + width: auto; + max-width: 170px; + + svg { + top: 10px; + right: 8px; + } + } } .content-block { @@ -910,7 +921,7 @@ opacity: .65; &:hover { - color: $file-mode-changed; + color: $gl-gray-500; text-decoration: none; } } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index ac7b701c2e2..4268e194ed7 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -2,7 +2,7 @@ * Note Form */ .comment-btn { - @extend .btn-create; + @extend .btn-success; } .diff-file .diff-content { diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index dbe9f0c03fb..bfba1bf1b2b 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -94,8 +94,8 @@ ul.notes { opacity: 0.5; .dummy-avatar { - background-color: $kdb-border; - border: 1px solid darken($kdb-border, 25%); + background-color: $gl-gray-200; + border: 1px solid darken($gl-gray-200, 25%); } .note-headline-light, @@ -334,20 +334,6 @@ ul.notes { border: 1px solid $white-normal; border-left: 0; - &.notes_line { - vertical-align: middle; - text-align: center; - padding: 10px 0; - background: $gray-light; - color: $text-color; - } - - &.notes_line2 { - text-align: center; - padding: 10px 0; - border-left: 1px solid $note-line2-border !important; - } - &.notes_content { background-color: $gray-light; border-width: 1px 0; @@ -357,6 +343,10 @@ ul.notes { &.parallel { border-width: 1px; + + &.new { + border-right-width: 0; + } } .discussion-notes { @@ -533,59 +523,7 @@ ul.notes { } .note-action-button { - line-height: 1; - padding: 0; - min-width: 16px; - color: $gray-darkest; - fill: $gray-darkest; - - .fa { - position: relative; - font-size: 16px; - } - - svg { - @include btn-svg; - margin: 0; - } - - .award-control-icon-positive, - .award-control-icon-super-positive { - position: absolute; - top: 0; - left: 0; - opacity: 0; - } - - &:hover, - &.is-active { - .danger-highlight { - color: $red-500; - } - - .link-highlight { - color: $blue-600; - fill: $blue-600; - } - - .award-control-icon-neutral { - opacity: 0; - } - - .award-control-icon-positive { - opacity: 1; - } - } - - &.is-active { - .award-control-icon-positive { - opacity: 0; - } - - .award-control-icon-super-positive { - opacity: 1; - } - } + @include emoji-menu-toggle-button; } .discussion-toggle-button { @@ -804,7 +742,7 @@ ul.notes { padding-top: 0; .discussion-wrapper { - border-color: transparent; + border: 0; } } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 8bb8b83dc5e..14395cc59b0 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -760,6 +760,7 @@ } &.ci-status-icon-canceled, + &.ci-status-icon-scheduled, &.ci-status-icon-disabled, &.ci-status-icon-not-found, &.ci-status-icon-manual { diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 17f34319050..f084adaf5d3 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -81,14 +81,14 @@ // Middle dot divider between each element in a list of items. .middle-dot-divider { &::after { - content: "\00B7"; // Middle Dot + content: '\00B7'; // Middle Dot padding: 0 6px; font-weight: $gl-font-weight-bold; } &:last-child { &::after { - content: ""; + content: ''; padding: 0; } } @@ -191,7 +191,6 @@ @include media-breakpoint-down(xs) { width: auto; } - } .profile-crop-image-container { @@ -215,7 +214,6 @@ } } - .user-profile { .cover-controls a { margin-left: 5px; @@ -279,6 +277,10 @@ table.u2f-registrations { } } +.codes { + padding-top: 14px; +} + .oauth-application-show { .scope-name { font-weight: $gl-font-weight-bold; @@ -414,7 +416,7 @@ table.u2f-registrations { } &.unverified { - @include status-color($gray-dark, color("gray"), $common-gray-dark); + @include status-color($gray-dark, color('gray'), $common-gray-dark); } } } @@ -427,7 +429,7 @@ table.u2f-registrations { } .emoji-menu-toggle-button { - @extend .note-action-button; + @include emoji-menu-toggle-button; .no-emoji-placeholder { position: relative; diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index a95e78931b1..da3d8aa53ad 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -115,7 +115,7 @@ .project-feature-controls { display: flex; align-items: center; - margin: 8px 0; + margin: $gl-padding-8 0; max-width: 432px; .toggle-wrapper { @@ -144,12 +144,8 @@ .group-home-panel { padding-top: 24px; padding-bottom: 24px; + border-bottom: 1px solid $border-color; - @include media-breakpoint-up(sm) { - border-bottom: 1px solid $border-color; - } - - .project-avatar, .group-avatar { float: none; margin: 0 auto; @@ -175,7 +171,6 @@ } } - .project-home-desc, .group-home-desc { margin-left: auto; margin-right: auto; @@ -199,6 +194,62 @@ } } +.project-home-panel { + padding-top: $gl-padding-8; + padding-bottom: $gl-padding-24; + + .project-title-row { + margin-right: $gl-padding-8; + } + + .project-avatar { + width: $project-title-row-height; + height: $project-title-row-height; + flex-shrink: 0; + flex-basis: $project-title-row-height; + margin: 0 $gl-padding-8 0 0; + } + + .project-title { + font-size: 20px; + line-height: $project-title-row-height; + font-weight: bold; + } + + .project-metadata { + font-weight: normal; + font-size: 14px; + line-height: $gl-btn-line-height; + color: $gl-text-color-secondary; + + .icon { + margin-right: $gl-padding-4; + font-size: 16px; + } + + .project-visibility, + .project-license, + .project-tag-list { + margin-right: $gl-padding-8; + } + + .project-license { + .btn { + line-height: 0; + border-width: 0; + } + } + + .project-tag-list, + .project-license { + .icon { + position: relative; + top: 2px; + } + } + } +} + .nav > .project-repo-buttons { margin-top: 0; } @@ -206,8 +257,6 @@ .project-repo-buttons, .group-buttons { .btn { - padding: 3px 10px; - &:last-child { margin-left: 0; } @@ -222,11 +271,15 @@ .fa-caret-down { margin-left: 3px; + + &.dropdown-btn-icon { + margin-left: 0; + } } } .project-action-button { - margin: 15px 5px 0; + margin: $gl-padding $gl-padding-8 0 0; vertical-align: top; } @@ -243,82 +296,45 @@ .count-buttons { display: inline-block; vertical-align: top; - margin-top: 15px; - } + margin-top: $gl-padding; - .project-clone-holder { - display: inline-block; - margin: 15px 5px 0 0; + .count-badge { + height: $input-height; - input { - height: 28px; + .icon { + top: -1px; + } } - } - .count-with-arrow { - display: inline-block; - position: relative; - margin-left: 4px; + .count-badge-count, + .count-badge-button { + border: 1px solid $border-color; + line-height: 1; + } - .arrow { - &::before { - content: ''; - display: inline-block; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 50%; - left: 0; - margin-top: -6px; - border-width: 7px 5px 7px 0; - border-right-color: $count-arrow-border; - pointer-events: none; - } + .count, + .count-badge-button { + color: $gl-text-color; + } - &::after { - content: ''; - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - top: 50%; - left: 1px; - margin-top: -9px; - border-width: 10px 7px 10px 0; - border-right-color: $white-light; - pointer-events: none; - } + .count-badge-count { + padding: 0 12px; + border-right: 0; + border-radius: $border-radius-base 0 0 $border-radius-base; + background: $gray-light; } - .count { - @include btn-white; - display: inline-block; - background: $white-light; - border-radius: 2px; - border-width: 1px; - border-style: solid; - font-size: 13px; - font-weight: $gl-font-weight-bold; - line-height: 13px; - letter-spacing: 0.4px; - padding: 6px 14px; - text-align: center; - vertical-align: middle; - touch-action: manipulation; - background-image: none; - white-space: nowrap; - margin: 0 10px 0 4px; + .count-badge-button { + border-radius: 0 $border-radius-base $border-radius-base 0; + } + } - a { - color: inherit; - } + .project-clone-holder { + display: inline-block; + margin: $gl-padding $gl-padding-8 0 0; - &:hover { - background: $white-light; - } + input { + height: $input-height; } } @@ -333,6 +349,14 @@ min-width: 320px; } } + + .mobile-git-clone { + margin-top: $gl-padding-8; + + .dropdown-menu-inner-content { + @extend .monospace; + } + } } .split-one { @@ -347,7 +371,7 @@ .save-project-loader { margin-top: 50px; margin-bottom: 50px; - color: $save-project-loader-color; + color: $gl-gray-700; } .transfer-project .select2-container { @@ -423,7 +447,7 @@ > li + li::before { padding: 0 3px; - color: $project-breadcrumb-color; + color: $gl-gray-400; } a { @@ -511,7 +535,6 @@ .controls { margin-left: auto; } - } .choose-template { @@ -574,7 +597,7 @@ flex-wrap: wrap; .btn { - padding: 8px; + padding: $gl-padding-8; margin-right: 10px; } @@ -651,7 +674,7 @@ left: -10px; top: 50%; z-index: 10; - padding: 8px 0; + padding: $gl-padding-8 0; text-align: center; background-color: $white-light; color: $gl-text-color-tertiary; @@ -665,7 +688,7 @@ left: 50%; top: 0; transform: translateX(-50%); - padding: 0 8px; + padding: 0 $gl-padding-8; } } @@ -699,17 +722,51 @@ .project-stats { font-size: 0; text-align: center; - max-width: 100%; border-bottom: 1px solid $border-color; - .nav { - margin-top: $gl-padding-8; - margin-bottom: $gl-padding-8; + .scrolling-tabs-container { + .scrolling-tabs { + margin-top: $gl-padding-8; + margin-bottom: $gl-padding-8; + flex-wrap: wrap; + border-bottom: 0; + } + + .fade-left, + .fade-right { + top: 0; + height: 100%; + .fa { + top: 50%; + margin-top: -$gl-padding-8; + } + } + + .nav { + flex-basis: 100%; + + + .nav { + margin: $gl-padding-8 0; + } + } + + @include media-breakpoint-down(md) { + flex-direction: column; + + .nav { + flex-wrap: nowrap; + } + + .nav:first-child { + margin-right: $gl-padding-8; + } + } + } + + .nav { > li { display: inline-block; - margin-top: $gl-padding-4; - margin-bottom: $gl-padding-4; &:not(:last-child) { margin-right: $gl-padding; @@ -732,13 +789,17 @@ font-size: $gl-font-size; line-height: $gl-btn-line-height; color: $gl-text-color-secondary; + white-space: nowrap; } .stat-link { + border-bottom: 0; + &:hover, &:focus { color: $gl-text-color; text-decoration: underline; + border-bottom: 0; } } @@ -769,6 +830,14 @@ } } +.repository-language-bar-tooltip-language { + font-weight: $gl-font-weight-bold; +} + +.repository-language-bar-tooltip-share { + color: $theme-gray-400; +} + pre.light-well { border-color: $well-light-border; } @@ -868,7 +937,7 @@ pre.light-well { } .git-clone-holder { - width: 380px; + width: 320px; .btn-clipboard { border: 1px solid $border-color; diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 77119aea9e2..04151b1cd59 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -218,7 +218,7 @@ input[type='checkbox']:hover { } .btn-search, - .btn-new { + .btn-success { width: 100%; margin-top: 5px; diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index e351dd7c0bb..dbf8692d69b 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -106,7 +106,7 @@ .settings-list-icon { color: $gl-text-color-secondary; - font-size: $settings-icon-size; + font-size: $default-icon-size; line-height: 42px; } @@ -249,7 +249,7 @@ } .loading-metrics .metrics-load-spinner { - color: $loading-color; + color: $gl-gray-700; } .metrics-list { diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 620297e589d..7d59dd3b5d1 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -27,6 +27,7 @@ &.ci-canceled, &.ci-disabled, + &.ci-scheduled, &.ci-manual { color: $gl-text-color; border-color: $gl-text-color; diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 5d3b7b21ce4..3fc37e20c36 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -143,7 +143,7 @@ border: 0; background: $gray-light; border-radius: 0; - color: $todo-body-pre-color; + color: $gl-gray-500; margin: 0 20px; overflow: hidden; } @@ -205,7 +205,7 @@ .todo-body { margin: 0; - border-left: 2px solid $todo-body-border; + border-left: 2px solid $gl-gray-100; padding-left: 10px; } } diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss index 48ac5b21db8..84c617c7ec0 100644 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ b/app/assets/stylesheets/pages/ui_dev_kit.scss @@ -6,7 +6,7 @@ .example { padding: 15px; - border: 1px dashed $ui-dev-kit-example-border; + border: 1px dashed $gl-gray-100; margin-bottom: 15px; &::before { diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index 57d43beaf21..59fdbf31fe9 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -1,4 +1,5 @@ @import 'framework/variables'; +@import 'framework/variables_overrides'; @import 'peek/views/rblineprof'; #js-peek { @@ -6,15 +7,15 @@ left: 0; top: 0; width: 100%; - z-index: 1039; + z-index: #{$zindex-modal-backdrop + 1}; height: $performance-bar-height; background: $black; line-height: $performance-bar-height; - color: $perf-bar-text; + color: $gl-gray-400; select { - color: $perf-bar-text; + color: $gl-gray-400; width: 200px; } @@ -53,7 +54,7 @@ padding: 4px 6px; font-family: Consolas, 'Liberation Mono', Courier, monospace; line-height: 1; - color: $perf-bar-bucket-color; + color: $gl-gray-200; border-radius: 3px; box-shadow: 0 1px 0 $perf-bar-bucket-box-shadow-from, inset 0 1px 2px $perf-bar-bucket-box-shadow-to; |