diff options
Diffstat (limited to 'app/assets/stylesheets')
44 files changed, 733 insertions, 313 deletions
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index d28ad407734..056d4b7207a 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -14,7 +14,6 @@ $border-radius-base: 3px !default; $modal-body-bg: $white-light; $input-border: $border-color; -$input-border-focus: $focus-border-color; $padding-base-vertical: $gl-vert-padding; $padding-base-horizontal: $gl-padding; @@ -339,3 +338,13 @@ input[type=color].form-control { vertical-align: unset; } } + +// Bootstrap 3 compatibility because bootstrap_form Gem is not updated yet +.input-group-btn:first-child { + @extend .input-group-prepend; +} + +// Bootstrap 3 compatibility because bootstrap_form Gem is not updated yet +.input-group-btn:last-child { + @extend .input-group-append; +} diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss index c46b0b5db09..b1a20c06910 100644 --- a/app/assets/stylesheets/framework.scss +++ b/app/assets/stylesheets/framework.scss @@ -1,4 +1,5 @@ @import 'framework/variables'; +@import 'framework/variables_overrides'; @import 'framework/mixins'; @import 'bootstrap'; diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss index 94fa7993133..4c7c399a3ca 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -69,12 +69,16 @@ .identicon { text-align: center; vertical-align: top; + color: $identicon-fg-color; + background-color: $identicon-gray; + // Sizes &.s16 { font-size: 12px; line-height: 1.33; } &.s24 { font-size: 13px; line-height: 1.8; } &.s26 { font-size: 20px; line-height: 1.33; } &.s32 { font-size: 20px; line-height: 30px; } &.s40 { font-size: 16px; line-height: 38px; } + &.s48 { font-size: 20px; line-height: 46px; } &.s60 { font-size: 32px; line-height: 58px; } &.s70 { font-size: 34px; line-height: 70px; } &.s90 { font-size: 36px; line-height: 88px; } @@ -82,6 +86,15 @@ &.s110 { font-size: 40px; line-height: 108px; font-weight: $gl-font-weight-normal; } &.s140 { font-size: 72px; line-height: 138px; } &.s160 { font-size: 96px; line-height: 158px; } + + // Background colors + &.bg1 { background-color: $identicon-red; } + &.bg2 { background-color: $identicon-purple; } + &.bg3 { background-color: $identicon-indigo; } + &.bg4 { background-color: $identicon-blue; } + &.bg5 { background-color: $identicon-teal; } + &.bg6 { background-color: $identicon-orange; } + &.bg7 { background-color: $identicon-gray; } } .avatar-container { @@ -90,6 +103,7 @@ display: flex; a { + width: 100%; display: flex; } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 340fddd398b..7145a76db6d 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -353,3 +353,18 @@ .flex-right { margin-left: auto; } + +.code-block { + background: $black; + color: $gray-darkest; + white-space: pre; + overflow-x: auto; + font-size: 12px; + border: 0; + padding: $grid-size; + + code { + background-color: inherit; + padding: inherit; + } +} diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index 646cedd79ed..ea4798fcefd 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -350,7 +350,7 @@ &:focus { cursor: text; box-shadow: none; - border-color: lighten($dropdown-input-focus-border, 20%); + border-color: lighten($blue-300, 20%); color: $gray-darkest; background-color: $gray-light; } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 637587de597..af17210f341 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -370,11 +370,14 @@ img.emoji { margin-right: 10px; } -.alert, -.progress { +.alert { margin-bottom: $gl-padding; } +.progress { + height: 4px; +} + .project-item-select-holder { display: inline-block; position: relative; @@ -451,6 +454,7 @@ img.emoji { .prepend-left-10 { margin-left: 10px; } .prepend-left-default { margin-left: $gl-padding; } .prepend-left-20 { margin-left: 20px; } +.append-right-4 { margin-right: 4px; } .append-right-5 { margin-right: 5px; } .append-right-8 { margin-right: 8px; } .append-right-10 { margin-right: 10px; } @@ -466,3 +470,6 @@ img.emoji { .inline { display: inline-block; } .center { text-align: center; } .vertical-align-middle { vertical-align: middle; } +.flex-align-self-center { align-self: center; } +.flex-grow { flex-grow: 1; } +.flex-no-shrink { flex-shrink: 0; } diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index ea4cb9a0b75..e2bbcc67a67 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -55,6 +55,11 @@ .sidebar-context-title { overflow: hidden; text-overflow: ellipsis; + + &.text-secondary { + font-weight: normal; + font-size: 0.8em; + } } } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ec4a0f378d0..83bc3776178 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -571,7 +571,8 @@ margin-bottom: 10px; padding: 0 10px; - .fa { + .fa, + .input-icon { position: absolute; top: 10px; right: 20px; @@ -614,7 +615,7 @@ &:focus { color: $dropdown-link-color; - border-color: $dropdown-input-focus-border; + border-color: $blue-300; box-shadow: 0 0 4px $dropdown-input-focus-shadow; ~ .fa { diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 5d79610b21e..9b09ed0ed0a 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -205,7 +205,7 @@ &.focus, &.focus:hover { - border-color: $dropdown-input-focus-border; + border-color: $blue-300; box-shadow: 0 0 4px $search-input-focus-shadow-color; } @@ -294,7 +294,7 @@ &:hover, &:focus { color: $gl-text-color; - border-color: $dropdown-input-focus-border; + border-color: $blue-300; outline: none; } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index d7149d93622..437fcff5c62 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -201,7 +201,7 @@ label { } .gl-show-field-errors { - .form-control { + .form-control:not(textarea) { height: 34px; } diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss index dff6bce370f..50ebc6d0dd1 100644 --- a/app/assets/stylesheets/framework/gitlab_theme.scss +++ b/app/assets/stylesheets/framework/gitlab_theme.scss @@ -3,7 +3,6 @@ */ @mixin gitlab-theme( - $location-badge-color, $search-and-nav-links, $active-tab-border, $border-and-box-shadow, @@ -119,12 +118,6 @@ } } - .location-badge { - color: $location-badge-color; - background-color: rgba($search-and-nav-links, 0.1); - border-right: 1px solid $sidebar-text; - } - .search-input::placeholder { color: rgba($search-and-nav-links, 0.8); } @@ -141,10 +134,6 @@ background-color: $white-light; } - .location-badge { - color: $gl-text-color; - } - .search-input-wrap { .search-icon { fill: rgba($search-and-nav-links, 0.8); @@ -200,7 +189,6 @@ body { &.ui-indigo { @include gitlab-theme( - $indigo-100, $indigo-200, $indigo-500, $indigo-700, @@ -212,7 +200,6 @@ body { &.ui-light-indigo { @include gitlab-theme( - $indigo-100, $indigo-200, $indigo-500, $indigo-500, @@ -224,7 +211,6 @@ body { &.ui-blue { @include gitlab-theme( - $theme-blue-100, $theme-blue-200, $theme-blue-500, $theme-blue-700, @@ -236,7 +222,6 @@ body { &.ui-light-blue { @include gitlab-theme( - $theme-light-blue-100, $theme-light-blue-200, $theme-light-blue-500, $theme-light-blue-500, @@ -248,7 +233,6 @@ body { &.ui-green { @include gitlab-theme( - $theme-green-100, $theme-green-200, $theme-green-500, $theme-green-700, @@ -260,7 +244,6 @@ body { &.ui-light-green { @include gitlab-theme( - $theme-green-100, $theme-green-200, $theme-green-500, $theme-green-500, @@ -272,7 +255,6 @@ body { &.ui-red { @include gitlab-theme( - $theme-red-100, $theme-red-200, $theme-red-500, $theme-red-700, @@ -284,7 +266,6 @@ body { &.ui-light-red { @include gitlab-theme( - $theme-light-red-100, $theme-light-red-200, $theme-light-red-500, $theme-light-red-500, @@ -296,7 +277,6 @@ body { &.ui-dark { @include gitlab-theme( - $theme-gray-100, $theme-gray-200, $theme-gray-500, $theme-gray-700, @@ -308,7 +288,6 @@ body { &.ui-light { @include gitlab-theme( - $theme-gray-900, $theme-gray-700, $theme-gray-800, $theme-gray-700, @@ -357,10 +336,6 @@ body { &:hover { background-color: $white-light; box-shadow: inset 0 0 0 1px $blue-200; - - .location-badge { - box-shadow: inset 0 0 0 1px $blue-200; - } } } @@ -373,13 +348,6 @@ body { color: $gl-text-color; } } - - .location-badge { - color: $theme-gray-700; - box-shadow: inset 0 0 0 1px $border-color; - background-color: $nav-badge-bg; - border-right: 0; - } } .nav-sidebar li.active { diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 2097bcebf69..e7e13d35d8e 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -567,9 +567,6 @@ border-bottom: 1px solid $white-normal; .mx-auto { - margin: 8px 0; - text-align: center; - .tanuki-logo, img { height: 36px; diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss index ab3cceceae9..f878ec1ca91 100644 --- a/app/assets/stylesheets/framework/images.scss +++ b/app/assets/stylesheets/framework/images.scss @@ -39,7 +39,7 @@ svg { fill: currentColor; - $svg-sizes: 8 12 16 18 24 32 48 72; + $svg-sizes: 8 10 12 16 18 24 32 48 72; @each $svg-size in $svg-sizes { &.s#{$svg-size} { @include svg-size(#{$svg-size}px); diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 11d332be1be..98bf26a5222 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -22,7 +22,7 @@ border: 0; border-color: $md-area-border; - @supports(width: fit-content) { + @supports (width: fit-content) { display: block; width: fit-content; } @@ -116,7 +116,7 @@ /* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */ @mixin on-webkit-only { - @media screen and (-webkit-min-device-pixel-ratio:0) { + @media screen and (-webkit-min-device-pixel-ratio: 0) { @content; } } @@ -164,14 +164,18 @@ bottom: 12px; width: 43px; height: 30px; - transition-duration: .3s; + transition-duration: 0.3s; -webkit-transform: translateZ(0); - background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4)); + background: linear-gradient( + to $gradient-direction, + $gradient-color 45%, + rgba($gradient-color, 0.4) + ); &.scrolling { visibility: visible; opacity: 1; - transition-duration: .3s; + transition-duration: 0.3s; } .fa { @@ -233,6 +237,29 @@ max-width: 100%; } +@mixin build-loader-animation { + position: relative; + white-space: initial; + + .dot { + display: inline-block; + width: 6px; + height: 6px; + margin: auto auto 12px; + border-radius: 50%; + animation: blinking-dot 1s linear infinite; + background: $white-light; + + &:nth-child(2) { + animation-delay: 0.33s; + } + + &:nth-child(3) { + animation-delay: 0.66s; + } + } +} + @mixin borderless-status-icon($color) { svg { border: 1px solid $color; diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index ffb40166c15..7d53a631cdf 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -79,7 +79,6 @@ body.modal-open { .modal { background-color: $black-transparent; - z-index: 2100; @include media-breakpoint-up(md) { .modal-dialog { diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index b40dcf93969..88d2f0aaf85 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -153,7 +153,7 @@ transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; &:focus { - border-color: $input-border-focus; + border-color: $blue-300; } &.select2-active { diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 56307777a72..473ca408c04 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -179,6 +179,10 @@ font-weight: inherit; } + a > code { + color: $gl-link-color; + } + dd { margin-left: $gl-padding; } @@ -440,3 +444,5 @@ textarea { color: $placeholder-text-color; } } + +.lh-100 { line-height: 1; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index baae4772708..d2ea314f176 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -177,7 +177,6 @@ $border-gray-dark: darken($white-normal, $darken-border-factor); * UI elements */ $border-color: #e5e5e5; -$focus-border-color: $blue-300; $well-expand-item: #e8f2f7; $well-inner-border: #eef0f2; $well-light-border: #f1f1f1; @@ -392,8 +391,7 @@ $dropdown-divider-color: rgba(#000, 0.1); $dropdown-title-btn-color: #bfbfbf; $dropdown-input-color: #555; $dropdown-input-fa-color: #c7c7c7; -$dropdown-input-focus-border: $focus-border-color; -$dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, 0.4); +$dropdown-input-focus-shadow: rgba($blue-300, 0.4); $dropdown-loading-bg: rgba(#fff, 0.6); $dropdown-chevron-size: 10px; $dropdown-toggle-active-border-color: darken($border-color, 14%); @@ -467,7 +465,8 @@ $award-emoji-positive-add-lines: #bb9c13; */ $search-input-border-color: rgba($blue-400, 0.8); $search-input-focus-shadow-color: $dropdown-input-focus-shadow; -$search-input-width: 220px; +$search-input-width: 240px; +$search-input-active-width: 320px; $location-badge-active-bg: $blue-500; $location-icon-color: #e7e9ed; @@ -487,6 +486,18 @@ $note-icon-gutter-width: 55px; $zen-control-color: #555; /* +* Identicon +*/ +$identicon-red: #ffebee; +$identicon-purple: #f3e5f5; +$identicon-indigo: #e8eaf6; +$identicon-blue: #e3f2fd; +$identicon-teal: #e0f2f1; +$identicon-orange: #fbe9e7; +$identicon-gray: $gray-darker; +$identicon-fg-color: #555555; + +/* * Calendar */ $calendar-hover-bg: #ecf3fe; @@ -821,17 +832,3 @@ Prometheus $prometheus-table-row-highlight-color: $theme-gray-100; $priority-label-empty-state-width: 114px; - -/* - * Override Bootstrap 4 variables - */ - -$secondary: $gray-light; -$input-disabled-bg: $gray-light; -$input-border-color: $theme-gray-200; -$input-color: $gl-text-color; -$font-family-sans-serif: $regular-font; -$font-family-monospace: $monospace-font; -$input-line-height: 20px; -$btn-line-height: 20px; -$table-accent-bg: $gray-light; diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss new file mode 100644 index 00000000000..b9c343fa2e9 --- /dev/null +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -0,0 +1,16 @@ +/* + * This file is only for overriding Bootstrap 4 variables. + * Please add any new variables to variables.scss + */ + +$secondary: $gray-light; +$input-disabled-bg: $gray-light; +$input-border-color: $theme-gray-200; +$input-color: $gl-text-color; +$font-family-sans-serif: $regular-font; +$font-family-monospace: $monospace-font; +$input-line-height: 20px; +$btn-line-height: 20px; +$table-accent-bg: $gray-light; +$card-border-color: $border-color; +$card-cap-bg: $gray-light; diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/page_bundles/ide.scss index 2d76f0ce004..2b8163b8c68 100644 --- a/app/assets/stylesheets/pages/repo.scss +++ b/app/assets/stylesheets/page_bundles/ide.scss @@ -1,3 +1,13 @@ +@import 'framework/variables'; +@import 'framework/mixins'; + +$search-list-icon-width: 18px; +$ide-activity-bar-width: 60px; +$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; + .project-refs-form, .project-refs-target-form { display: inline-block; @@ -21,7 +31,6 @@ display: flex; height: calc(100vh - #{$header-height}); margin-top: 0; - border-top: 1px solid $white-dark; padding-bottom: $ide-statusbar-height; color: $gl-text-color; @@ -38,10 +47,10 @@ } .ide-file-list { + display: flex; + flex-direction: column; flex: 1; - padding-left: $gl-padding; - padding-right: $gl-padding; - padding-bottom: $grid-size; + min-height: 0; .file { height: 32px; @@ -74,6 +83,7 @@ .ide-file-icon-holder { display: flex; align-items: center; + color: $theme-gray-700; } .ide-file-changed-icon { @@ -161,12 +171,23 @@ background-color: $white-light; border-bottom-color: $white-light; } + + &:not(.disabled) { + .multi-file-tab { + cursor: pointer; + } + } + + &.disabled { + .multi-file-tab-close { + cursor: default; + } + } } } .multi-file-tab { @include str-truncated(141px); - cursor: pointer; svg { vertical-align: middle; @@ -241,6 +262,38 @@ } } + .is-deleted { + .editor.modified { + .margin-view-overlays, + .lines-content, + .decorationsOverviewRuler { + // !important to override monaco inline styles + display: none !important; + } + } + + .diffOverviewRuler.modified { + // !important to override monaco inline styles + display: none !important; + } + } + + .is-added { + .editor.original { + .margin-view-overlays, + .lines-content, + .decorationsOverviewRuler { + // !important to override monaco inline styles + display: none !important; + } + } + + .diffOverviewRuler.original { + // !important to override monaco inline styles + display: none !important; + } + } + .monaco-diff-editor.vs { .editor.modified { box-shadow: none; @@ -470,35 +523,30 @@ > a, > button { - height: 60px; + text-decoration: none; + padding-top: $gl-padding-8; + padding-bottom: $gl-padding-8; } } - .projects-sidebar { - min-height: 0; - display: flex; - flex-direction: column; - flex: 1; - } - .multi-file-commit-panel-inner { position: relative; display: flex; flex-direction: column; - height: 100%; + min-height: 100%; min-width: 0; width: 100%; } - .multi-file-commit-panel-inner-scroll { + .multi-file-commit-panel-inner-content { display: flex; flex: 1; flex-direction: column; - overflow: auto; background-color: $white-light; border-left: 1px solid $white-dark; border-top: 1px solid $white-dark; border-top-left-radius: $border-radius-small; + min-height: 0; } } @@ -557,16 +605,21 @@ } } -.multi-file-addition, -.multi-file-addition-solid { +.ide-file-addition, +.ide-file-addition-solid { color: $green-500; } -.multi-file-modified, -.multi-file-modified-solid { +.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; @@ -751,12 +804,6 @@ height: calc(100vh - #{$header-height + $flash-height}); } } - - .projects-sidebar { - .multi-file-commit-panel-inner-scroll { - flex: 1; - } - } } } @@ -781,18 +828,21 @@ } } -.dragHandle { +.drag-handle { position: absolute; top: 0; bottom: 0; - width: 1px; - background-color: $white-dark; + width: 4px; - &.dragright { + &:hover { + background-color: $white-normal; + } + + &.drag-right { right: 0; } - &.dragleft { + &.drag-left { left: 0; } } @@ -909,7 +959,7 @@ .ide-activity-bar { position: relative; - flex: 0 0 60px; + flex: 0 0 $ide-activity-bar-width; z-index: 1; } @@ -1005,15 +1055,54 @@ } .ide-tree-header { + flex: 0 0 auto; display: flex; align-items: center; - margin-bottom: 8px; + flex-wrap: wrap; padding: 12px 0; + margin-left: $ide-tree-padding; + margin-right: $ide-tree-padding; border-bottom: 1px solid $white-dark; .ide-new-btn { margin-left: auto; } + + .ide-nav-dropdown { + width: 100%; + margin-bottom: 12px; + + .dropdown-menu { + width: 385px; + max-height: initial; + } + + .dropdown-menu-toggle { + svg { + vertical-align: middle; + } + + &:hover { + background-color: $white-normal; + } + } + + &.show { + .dropdown-menu-toggle { + background-color: $white-dark; + } + } + } + + button { + color: $gl-text-color; + } +} + +.ide-tree-body { + overflow: auto; + padding-left: $ide-tree-padding; + padding-right: $ide-tree-padding; } .ide-sidebar-branch-title { @@ -1104,14 +1193,23 @@ } .ide-context-header { - .avatar { - flex: 0 0 38px; - } - .ide-merge-requests-dropdown.dropdown-menu { width: 385px; max-height: initial; } + + .avatar-container { + flex: initial; + margin-right: 0; + } + + .ide-sidebar-project-title { + margin-left: $ide-tree-text-start - $ide-project-avatar-end; + } +} + +.ide-context-body { + min-height: 0; } .ide-sidebar-project-title { @@ -1119,10 +1217,11 @@ .sidebar-context-title { white-space: nowrap; - } + display: block; - .ide-sidebar-branch-title { - min-width: 50px; + &.text-secondary { + font-weight: normal; + } } } @@ -1158,6 +1257,10 @@ background-color: $white-light; border-left: 1px solid $white-dark; } + + .ide-right-sidebar-clientside { + padding: 0; + } } .ide-pipeline { @@ -1256,7 +1359,7 @@ min-height: 60px; } -.ide-merge-requests-dropdown { +.ide-nav-form { .nav-links li { width: 50%; padding-left: 0; @@ -1275,22 +1378,36 @@ padding-left: $gl-padding; padding-right: $gl-padding; - .fa { - right: 26px; + .input-icon { + right: auto; + left: 10px; + top: 50%; + transform: translateY(-50%); } } + .dropdown-input-field { + padding-left: $search-list-icon-width + $gl-padding; + padding-top: 2px; + padding-bottom: 2px; + } + + .tokens-container { + padding-left: $search-list-icon-width + $gl-padding; + overflow-x: hidden; + } + .btn-link { padding-top: $gl-padding; padding-bottom: $gl-padding; } } -.ide-merge-request-current-icon { - min-width: 18px; +.ide-search-list-current-icon { + min-width: $search-list-icon-width; } -.ide-merge-requests-empty { +.ide-search-list-empty { height: 230px; } @@ -1318,6 +1435,7 @@ .ide-entry-dropdown-toggle { padding: $gl-padding-4; + color: $gl-text-color; background-color: $theme-gray-100; &:hover { @@ -1330,9 +1448,50 @@ background-color: $blue-500; outline: 0; } + + svg { + fill: currentColor; + } } .ide-new-btn .dropdown.show .ide-entry-dropdown-toggle { color: $white-normal; background-color: $blue-500; } + +.ide-preview-header { + padding: 0 $grid-size; + border-bottom: 1px solid $white-dark; + background-color: $gray-light; + min-height: 44px; +} + +.ide-navigator-btn { + height: 24px; + min-width: 24px; + max-width: 24px; + padding: 0; + margin: 0 ($grid-size / 2); + color: $gl-gray-light; + + &:first-child { + margin-left: 0; + } +} + +.ide-navigator-location { + padding-top: ($grid-size / 2); + padding-bottom: ($grid-size / 2); + + &:focus { + outline: 0; + box-shadow: none; + border-color: $theme-gray-200; + } +} + +.ide-preview-loading-icon { + right: $grid-size; + top: 50%; + transform: translateY(-50%); +} diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index 7347da2ae61..a68b47b1d02 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -205,7 +205,7 @@ .board-title { margin: 0; - padding: 12px $gl-padding; + padding: $gl-padding-8 $gl-padding; font-size: 1em; border-bottom: 1px solid $border-color; display: flex; diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss index f030189af06..e8158cd7f6b 100644 --- a/app/assets/stylesheets/pages/builds.scss +++ b/app/assets/stylesheets/pages/builds.scss @@ -9,25 +9,21 @@ } } -@keyframes blinking-dots { +@keyframes blinking-dot { 0% { - background-color: rgba($white-light, 1); - box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2); + opacity: 1; } 25% { - background-color: rgba($white-light, 0.4); - box-shadow: 12px 0 0 0 rgba($white-light, 2), 24px 0 0 0 rgba($white-light, 0.2); + opacity: 0.4; } 75% { - background-color: rgba($white-light, 0.4); - box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 1); + opacity: 0.4; } 100% { - background-color: rgba($white-light, 1); - box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2); + opacity: 1; } } @@ -182,12 +178,7 @@ } .build-loader-animation { - position: relative; - width: 6px; - height: 6px; - margin: auto auto 12px 2px; - border-radius: 50%; - animation: blinking-dots 1s linear infinite; + @include build-loader-animation; } } @@ -270,6 +261,7 @@ .block { width: 100%; + word-break: break-word; &:last-child { border-bottom: 1px solid $border-gray-normal; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 9b51c54a0fc..bce83bf0dd0 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -1,9 +1,17 @@ -.commit-description { - background: none; +%commit-description-base { + padding: $gl-padding-8 0 $gl-padding-8 $gl-padding-8; + margin-top: $gl-padding-8; border: 0; - padding: 0; + border-radius: unset; + background: none; word-break: normal; - white-space: pre-wrap; + overflow-x: auto; + border-left: 3px solid $white-dark; + color: $gl-text-color-secondary; +} + +.commit-description { + @extend %commit-description-base; } .js-details-expand { @@ -175,11 +183,17 @@ justify-content: space-between; align-items: start; flex-grow: 1; + min-width: 0; + + .project_namespace { + color: $gl-text-color-secondary; + } } .commit-content { padding-right: 10px; white-space: normal; + overflow: hidden; .commit-title { display: flex; @@ -270,17 +284,9 @@ } .commit-row-description { - font-size: 14px; - padding: 0 0 0 $gl-padding-8; - border: 0; + @extend %commit-description-base; display: none; - white-space: pre-wrap; - word-break: normal; - color: $gl-text-color-secondary; - background: none; - font-family: inherit; - border-left: 2px solid $theme-gray-300; - border-radius: unset; + flex: 1; a { color: $gl-text-color; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index b616357bb8d..591e21243ed 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -16,6 +16,7 @@ svg { vertical-align: middle; + top: -1px; } } diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss index ddd1f8cc98a..892da152b5f 100644 --- a/app/assets/stylesheets/pages/editor.scss +++ b/app/assets/stylesheets/pages/editor.scss @@ -36,10 +36,7 @@ line-height: 35px; padding-top: 7px; padding-bottom: 7px; - - .float-right { - height: 20px; - } + display: flex; } .editor-ref { @@ -60,20 +57,18 @@ .new-file-name { display: inline-block; - max-width: 450px; + max-width: 420px; float: left; @media(max-width: map-get($grid-breakpoints, lg)-1) { - width: 280px; - } - - @media(max-width: map-get($grid-breakpoints, md)-1) { width: 180px; } } .file-buttons { - font-size: 0; + display: flex; + flex: 1; + justify-content: flex-end; } .select2 { @@ -111,12 +106,10 @@ } -@include media-breakpoint-down(xs) { +@include media-breakpoint-down(sm) { .file-editor { .file-title { - .float-right { - height: auto; - } + display: block; } .new-file-name { @@ -144,6 +137,10 @@ } } } + + .editor-ref { + max-width: 250px; + } } } diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss index 84da9180f93..49d8a5d959b 100644 --- a/app/assets/stylesheets/pages/graph.scss +++ b/app/assets/stylesheets/pages/graph.scss @@ -31,3 +31,61 @@ color: $gl-text-red; } } + +.svg-graph-container { + width: 100%; + + .axis-tick { + opacity: 0.4; + } + + .tick-text { + fill: $gl-text-color-secondary; + } + + .x-axis-text { + fill: $theme-gray-900; + } + + .bar-rect { + fill: rgba($blue-500, 0.1); + stroke: $blue-500; + } + + .bar-rect:hover { + fill: rgba($blue-700, 0.3); + } + + .y-axis-label { + line { + stroke: $stat-graph-axis-fill; + } + + text { + font-weight: bold; + font-size: 12px; + fill: $theme-gray-800; + } + } +} + +.svg-graph-container-with-grab { + cursor: grab; + cursor: -webkit-grab; +} + +.svg-graph-container-grabbed { + cursor: grabbing; + cursor: -webkit-grabbing; +} + +@keyframes flickerAnimation { + 0% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 1; } +} + +.animate-flicker { + animation: flickerAnimation 1.5s infinite; + fill: $theme-gray-500; +} diff --git a/app/assets/stylesheets/pages/groups.scss b/app/assets/stylesheets/pages/groups.scss index 05bf5596fb3..fa8a0f26b5d 100644 --- a/app/assets/stylesheets/pages/groups.scss +++ b/app/assets/stylesheets/pages/groups.scss @@ -290,9 +290,8 @@ } .folder-toggle-wrap { - float: left; - line-height: $list-text-height; font-size: 0; + flex-shrink: 0; span { font-size: $gl-font-size; @@ -308,7 +307,7 @@ width: 15px; svg { - margin-bottom: 2px; + margin-bottom: 1px; } } @@ -391,9 +390,17 @@ cursor: pointer; } - .avatar-container > a { - width: 100%; - text-decoration: none; + .group-text { + min-width: 0; // allows for truncated text within flex children + } + + .avatar-container { + flex-shrink: 0; + + > a { + width: 100%; + text-decoration: none; + } } &.has-more-items { @@ -401,9 +408,19 @@ padding: 20px 10px; } + .description { + p { + @include str-truncated; + + max-width: none; + } + } + .stats { position: relative; - line-height: 46px; + line-height: normal; + text-align: right; + flex-shrink: 0; > span { display: inline-flex; @@ -422,14 +439,20 @@ } .controls { - margin-left: 5px; + flex-shrink: 0; > .btn { - margin-right: $btn-margin-5; + margin: 0 0 0 $btn-margin-5; } } } + @include media-breakpoint-down(xs) { + .group-stats { + display: none; + } + } + .project-row-contents .stats { line-height: inherit; @@ -442,7 +465,7 @@ } .last-updated { - position: absolute; + position: relative; right: 12px; min-width: 250px; text-align: right; @@ -451,18 +474,6 @@ } } -ul.group-list-tree { - li.group-row { - > .group-row-contents .title { - line-height: $list-text-height; - } - - &.has-description > .group-row-contents .title { - line-height: inherit; - } - } -} - .js-groups-list-holder { .groups-list-loading { font-size: 34px; diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 797b106de23..8e78d9f65eb 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -449,6 +449,7 @@ .todo-undone { color: $gl-link-color; + fill: $gl-link-color; } .author { @@ -834,17 +835,7 @@ } .compare-meter { - &.within_estimate { - .meter-fill { - background: $gl-primary; - } - } - &.over_estimate { - .meter-fill { - background: $red-500; - } - .time-remaining, .compare-value.spent { color: $red-500; @@ -852,18 +843,6 @@ } } - .meter-container { - background: $border-gray-light; - border-radius: 3px; - - .meter-fill { - max-width: 100%; - height: 5px; - border-radius: 3px; - background: $gl-primary; - } - } - .compare-display-container { display: flex; justify-content: space-between; diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss index ccb62bfed18..4fba89e956b 100644 --- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss +++ b/app/assets/stylesheets/pages/issues/issue_count_badge.scss @@ -1,29 +1,11 @@ .issue-count-badge { display: inline-flex; - align-items: stretch; - height: 24px; -} - -.issue-count-badge-count { - display: flex; - align-items: center; - padding-right: 10px; - padding-left: 10px; - border: 1px solid $border-color; border-radius: $border-radius-base; - line-height: 1; - - &.has-btn { - border-right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } + border: 1px solid $border-color; + padding: 5px $gl-padding-8; } -.issue-count-badge-add-button { - display: flex; +.issue-count-badge-count { + display: inline-flex; align-items: center; - border: 1px solid $border-color; - border-radius: 0 $border-radius-base $border-radius-base 0; - line-height: 1; } diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 391dfea0703..b25dc4f419a 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -72,6 +72,9 @@ } .manage-labels-list { + padding: 0; + margin-bottom: 0; + > li:not(.empty-message):not(.is-not-draggable) { background-color: $white-light; margin-bottom: 5px; @@ -81,6 +84,10 @@ border-radius: $border-radius-default; border: 1px solid $theme-gray-100; + &:last-child { + margin-bottom: 0; + } + &.sortable-ghost { opacity: 0.3; } @@ -243,7 +250,10 @@ .label-actions-list { list-style: none; flex-shrink: 0; + text-align: right; padding: 0; + position: relative; + margin: 0; } .label-badge { @@ -264,6 +274,7 @@ .label-links { list-style: none; + margin: 0; padding: 0; white-space: nowrap; } @@ -272,6 +283,16 @@ padding: 0; } +.label-description { + .description-text { + margin-bottom: 10px; + + .admin-labels & { + margin-bottom: 0; + } + } +} + .label-list-item { .content-list &::before, .content-list &::after { @@ -319,6 +340,64 @@ fill: $blue-600; } } + + &.remove-row { + &:hover { + color: $gl-text-red; + + svg { + fill: $gl-text-red; + } + } + } + } +} + +@media (max-width: map-get($grid-breakpoints, md)-1) { + .manage-labels-list { + > li:not(.empty-message):not(.is-not-draggable) { + flex-wrap: wrap; + } + + .label-name { + order: 1; + flex-grow: 1; + width: auto; + max-width: 100%; + } + + .label-actions-list { + order: 2; + flex-shrink: 1; + text-align: left; + } + + .label-links { + white-space: normal; + } + + .label-description { + order: 3; + width: 100%; + + > .append-right-default.prepend-left-default { + 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/login.scss b/app/assets/stylesheets/pages/login.scss index c1b1d2e028d..8a4a2caa6c9 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -237,7 +237,7 @@ } .login-page-broadcast { - margin-top: 50px; + margin-top: 40px; } .navless-container { diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index 7bd0f0bf1e0..621321101cd 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -15,6 +15,39 @@ } } +.mr-widget-border-top { + border-top: 1px solid $border-color; +} + +.media-section { + @include media-breakpoint-down(md) { + align-items: flex-start; + + .media-body { + flex-direction: column; + align-items: flex-start; + } + } + + .code-text { + @include media-breakpoint-up(lg) { + align-self: center; + flex: 1; + } + } +} + +.mr-widget-section { + .media { + align-items: center; + } + + .code-text { + flex: 1; + } +} + + .mr-widget-heading { position: relative; border: 1px solid $border-color; @@ -54,6 +87,14 @@ padding: 0; } + .mr-report { + padding: 0; + + > .media { + padding: $gl-padding; + } + } + form { margin-bottom: 0; diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index dcf590e7331..8acd64ca1a1 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -69,7 +69,7 @@ .comment-toolbar, .nav-links { - border-color: $focus-border-color; + border-color: $blue-300; } } diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss index 7fc2936c5e6..c369d89d63c 100644 --- a/app/assets/stylesheets/pages/notes.scss +++ b/app/assets/stylesheets/pages/notes.scss @@ -546,6 +546,7 @@ ul.notes { svg { @include btn-svg; + margin: 0; } .award-control-icon-positive, diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 5d0d59e12f2..b45e305897c 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -418,3 +418,23 @@ table.u2f-registrations { } } } + +.edit-user { + .clear-user-status { + svg { + fill: $gl-text-color-secondary; + } + } + + .emoji-menu-toggle-button { + @extend .note-action-button; + + .no-emoji-placeholder { + position: relative; + + svg { + fill: $gl-text-color-secondary; + } + } + } +} diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index aa83e5bdebc..6d9f415e869 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -490,30 +490,31 @@ margin-bottom: 0; } + .tab-pane { + padding-top: 0; + padding-bottom: 0; + } + .template-option { - padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4); - position: relative; + .logo { + .btn-template-icon { + width: 40px !important; + } + } + + padding: 16px 0; &:not(:first-child) { border-top: 1px solid $border-color; } - .btn-template-icon { - position: absolute; - left: $gl-padding; - top: $gl-padding; + .controls { + margin-left: auto; } - } - - .template-title { - font-size: 16px; - } - .template-description { - margin: 6px 0 12px; } - .template-button { + .choose-template { input { position: absolute; clip: rect(0, 0, 0, 0); @@ -540,8 +541,6 @@ } .selected-icon { - padding-right: $gl-padding; - svg { display: none; top: 7px; @@ -754,6 +753,22 @@ } } +.repository-languages-bar { + height: 8px; + margin-bottom: $gl-padding-8; + background-color: $white-light; + border-radius: $border-radius-default; + + .progress-bar { + margin-right: 2px; + padding: 0 $gl-padding-4; + + &:last-child { + margin-right: 0; + } + } +} + pre.light-well { border-color: $well-light-border; } @@ -819,10 +834,6 @@ pre.light-well { .avatar-container { align-self: flex-start; - - > a { - width: 100%; - } } .project-details { diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss index ce253ebb71f..ecd51aa06a4 100644 --- a/app/assets/stylesheets/pages/reports.scss +++ b/app/assets/stylesheets/pages/reports.scss @@ -75,31 +75,27 @@ margin: 0; .license-item { - line-height: $gl-padding-24; + line-height: $gl-padding-32; - .license-dependencies { - color: $gl-text-color-tertiary; + .license-packages { + font-size: $label-font-size; } - .btn-show-all-packages { - line-height: $gl-btn-line-height; - margin-bottom: 2px; - } } } .report-block-list-icon { display: flex; - &.failed { + &.failed svg { color: $red-500; } - &.success { + &.success svg { color: $green-500; } - &.neutral { + &.neutral svg { color: $theme-gray-700; } diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 2d66f336076..c9405004c38 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -1,3 +1,6 @@ +$search-dropdown-max-height: 400px; +$search-avatar-size: 16px; + .search-results { .search-result-row { border-bottom: 1px solid $border-color; @@ -20,12 +23,13 @@ .search-text-input:hover, .form-control:hover, :not[readonly] { - border-color: lighten($dropdown-input-focus-border, 20%); + border-color: lighten($blue-300, 20%); box-shadow: 0 0 4px lighten($search-input-focus-shadow-color, 20%); } -input[type="checkbox"]:hover { - box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), 0 0 0 1px lighten($search-input-focus-shadow-color, 20%); +input[type='checkbox']:hover { + box-shadow: 0 0 2px 2px lighten($search-input-focus-shadow-color, 20%), + 0 0 0 1px lighten($search-input-focus-shadow-color, 20%); } .search { @@ -40,24 +44,15 @@ input[type="checkbox"]:hover { height: 32px; border: 0; border-radius: $border-radius-default; - transition: border-color ease-in-out $default-transition-duration, background-color ease-in-out $default-transition-duration; + transition: border-color ease-in-out $default-transition-duration, + background-color ease-in-out $default-transition-duration, + width ease-in-out $default-transition-duration; &:hover { box-shadow: none; } } - .location-badge { - white-space: nowrap; - height: 32px; - font-size: 12px; - margin: -4px 4px -4px -4px; - line-height: 25px; - padding: 4px 8px; - border-radius: $border-radius-default 0 0 $border-radius-default; - transition: border-color ease-in-out $default-transition-duration; - } - .search-input { border: 0; font-size: 14px; @@ -104,26 +99,41 @@ input[type="checkbox"]:hover { } .dropdown-header { - text-transform: uppercase; - font-size: 11px; + // Necessary because glDropdown doesn't support a second style of headers + font-weight: $gl-font-weight-bold; + // .dropdown-menu li has 1px side padding + padding: $gl-padding-8 17px; + color: $gl-text-color; + font-size: $gl-font-size; + line-height: 16px; } // Custom dropdown positioning .dropdown-menu { left: -5px; + max-height: $search-dropdown-max-height; + overflow: auto; + + @include media-breakpoint-up(xl) { + width: $search-input-active-width; + } } .dropdown-content { - max-height: none; + max-height: $search-dropdown-max-height - 18px; } } &.search-active { form { @extend .form-control:focus; - border-color: $dropdown-input-focus-border; + border-color: $blue-300; box-shadow: none; + @include media-breakpoint-up(xl) { + width: $search-input-active-width; + } + .search-input-wrap { .search-icon, .clear-icon { @@ -141,12 +151,6 @@ input[type="checkbox"]:hover { color: $gl-text-color-tertiary; } } - - .location-badge { - transition: all $default-transition-duration; - background-color: $nav-badge-bg; - border-color: $border-color; - } } &.has-value { @@ -160,10 +164,24 @@ input[type="checkbox"]:hover { } } - &.has-location-badge { - .search-input-wrap { - width: 68%; - } + .inline-search-icon { + position: relative; + margin-right: 4px; + color: $gl-text-color-secondary; + } + + .identicon, + .search-item-avatar { + flex-basis: $search-avatar-size; + flex-shrink: 0; + margin-right: 4px; + } + + .search-item-avatar { + width: $search-avatar-size; + height: $search-avatar-size; + border-radius: 50%; + border: 1px solid $avatar-border; } } diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 839ac5ba59b..fb03970f64f 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -301,3 +301,17 @@ margin-bottom: 0; } } + +.mirror-error-badge { + background-color: $error-bg; + border-radius: $border-radius-default; + color: $white-light; +} + +.push-pull-table { + margin-top: 1em; + + .mirror-action-buttons { + padding-right: 0; + } +} diff --git a/app/assets/stylesheets/pages/settings_ci_cd.scss b/app/assets/stylesheets/pages/settings_ci_cd.scss index 777fdb3581e..239123fc3ab 100644 --- a/app/assets/stylesheets/pages/settings_ci_cd.scss +++ b/app/assets/stylesheets/pages/settings_ci_cd.scss @@ -19,9 +19,4 @@ .auto-devops-card { margin-bottom: $gl-vert-padding; - - > .card-body { - border-radius: $card-border-radius; - padding: $gl-padding $gl-padding-24; - } } diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index e5d7dd13915..010a2c05a1c 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -174,6 +174,18 @@ } } +@include media-breakpoint-down(lg) { + .todos-filters { + .filter-categories { + width: 75%; + + .filter-item { + margin-bottom: 10px; + } + } + } +} + @include media-breakpoint-down(xs) { .todo { .avatar { @@ -199,6 +211,10 @@ } .todos-filters { + .filter-categories { + width: auto; + } + .dropdown-menu-toggle { width: 100%; } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index efd26cb1f81..1cc26d40ba9 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -109,24 +109,6 @@ line-height: 21px; } - .last-commit { - @include str-truncated(506px); - - .fa-angle-right { - margin-left: 5px; - } - - @include media-breakpoint-only(md) { - @include str-truncated(450px); - } - - } - - .commit-history-link-spacer { - margin: 0 10px; - color: $white-normal; - } - &:hover:not(.tree-truncated-warning) { td { background-color: $row-hover; diff --git a/app/assets/stylesheets/performance_bar.scss b/app/assets/stylesheets/performance_bar.scss index 7a93c4dfa28..57d43beaf21 100644 --- a/app/assets/stylesheets/performance_bar.scss +++ b/app/assets/stylesheets/performance_bar.scss @@ -6,7 +6,7 @@ left: 0; top: 0; width: 100%; - z-index: 2000; + z-index: 1039; height: $performance-bar-height; background: $black; diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss index 64110f9c3a0..bd777c66b56 100644 --- a/app/assets/stylesheets/snippets.scss +++ b/app/assets/stylesheets/snippets.scss @@ -22,8 +22,8 @@ height: 16px; background-size: cover; - &.gl-snippet-icon-doc_code { background-position: 0 0; } - &.gl-snippet-icon-doc_text { background-position: 0 -16px; } + &.gl-snippet-icon-doc-code { background-position: 0 0; } + &.gl-snippet-icon-doc-text { background-position: 0 -16px; } &.gl-snippet-icon-download { background-position: 0 -32px; } } |