diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
-rw-r--r-- | app/assets/stylesheets/framework/broadcast_messages.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/calendar.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/common.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/diffs.scss | 96 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/dropdowns.scss | 3 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/editor-lite.scss | 18 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/files.scss | 37 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/flash.scss | 8 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 32 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/modal.scss | 12 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/secondary_navigation_elements.scss | 68 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/spinner.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/typography.scss | 6 |
13 files changed, 204 insertions, 113 deletions
diff --git a/app/assets/stylesheets/framework/broadcast_messages.scss b/app/assets/stylesheets/framework/broadcast_messages.scss index c1647c16c77..b8934d2797a 100644 --- a/app/assets/stylesheets/framework/broadcast_messages.scss +++ b/app/assets/stylesheets/framework/broadcast_messages.scss @@ -15,10 +15,6 @@ .broadcast-banner-message { text-align: center; - - .broadcast-message-dismiss { - color: inherit; - } } .broadcast-notification-message { @@ -36,10 +32,6 @@ &.preview { position: static; } - - .broadcast-message-dismiss { - color: $gray-700; - } } .toggle-colors { diff --git a/app/assets/stylesheets/framework/calendar.scss b/app/assets/stylesheets/framework/calendar.scss index de767ac3fe0..5b7f1a3f38b 100644 --- a/app/assets/stylesheets/framework/calendar.scss +++ b/app/assets/stylesheets/framework/calendar.scss @@ -14,14 +14,11 @@ .str-truncated { max-width: 70%; } - - .user-calendar-activities-loading { - font-size: 24px; - } } .user-calendar { text-align: center; + min-height: 172px; .calendar { display: inline-block; @@ -42,12 +39,9 @@ .calendar-hint { font-size: 12px; - - &.bottom-right { - direction: ltr; - margin-top: -23px; - float: 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 8dbed9c03f2..deb2d6c4641 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -424,7 +424,6 @@ img.emoji { .w-15p { width: 15%; } .w-30p { width: 30%; } .w-60p { width: 60%; } -.w-70p { width: 70%; } .h-12em { height: 12em; } .h-32-px { height: 32px;} diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss index c0a2350d080..e16ab5ee72f 100644 --- a/app/assets/stylesheets/framework/diffs.scss +++ b/app/assets/stylesheets/framework/diffs.scss @@ -6,11 +6,18 @@ border-top: 1px solid $border-color; } + &.has-body { + .file-title { + box-shadow: 0 -2px 0 0 var(--white); + } + } + + table.code tr:last-of-type td:last-of-type { + @include gl-rounded-bottom-right-base(); + } + .file-title, .file-title-flex-parent { - border-top-left-radius: $border-radius-default; - border-top-right-radius: $border-radius-default; - box-shadow: 0 -2px 0 0 var(--white); cursor: pointer; .dropdown-menu { @@ -113,7 +120,6 @@ .diff-content { background: $white; color: $gl-text-color; - border-radius: 0 0 3px 3px; .unfold { cursor: pointer; @@ -443,6 +449,7 @@ } } +.diff-table.code, table.code { width: 100%; font-family: $monospace-font; @@ -453,14 +460,20 @@ table.code { table-layout: fixed; border-radius: 0 0 $border-radius-default $border-radius-default; + .diff-tr:first-of-type.line_expansion > .diff-td, tr:first-of-type.line_expansion > td { border-top: 0; } - tr:nth-last-of-type(2).line_expansion > td { - border-bottom: 0; + .diff-tr:nth-last-of-type(2).line_expansion > .diff-td, + tr:nth-last-of-type(2).line_expansion, + tr:last-of-type.line_expansion { + > td { + border-bottom: 0; + } } + .diff-tr.line_holder .diff-td, tr.line_holder td { line-height: $code-line-height; font-size: $code-font-size; @@ -556,24 +569,95 @@ table.code { } .line_holder:last-of-type { + .diff-td:first-child, td:first-child { border-bottom-left-radius: $border-radius-default; } } &.left-side-selected { + .diff-td.line_content.parallel.right-side, td.line_content.parallel.right-side { user-select: none; } } &.right-side-selected { + .diff-td.line_content.parallel.left-side, td.line_content.parallel.left-side { user-select: none; } } } +// Merge request diff grid layout +.diff-grid { + .diff-grid-row { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .diff-grid-left, + .diff-grid-right { + display: grid; + grid-template-columns: 50px 8px 1fr; + + .diff-td:nth-child(2) { + display: none; + } + } + + .diff-grid-comments { + display: grid; + grid-template-columns: 1fr 1fr; + } + + .diff-grid-drafts { + display: grid; + grid-template-columns: 1fr 1fr; + } + + &.inline { + .diff-grid-comments { + display: grid; + grid-template-columns: 1fr; + } + + .diff-grid-drafts { + display: grid; + grid-template-columns: 1fr; + } + + .diff-grid-row { + grid-template-columns: 1fr; + } + + .diff-grid-left, + .diff-grid-right { + grid-template-columns: 50px 50px 8px 1fr; + + .diff-td:nth-child(2) { + display: block; + } + } + + .diff-grid-left .old:nth-child(1) [data-linenumber], + .diff-grid-right .new:nth-child(2) [data-linenumber] { + display: inline; + } + + .diff-grid-left .old:nth-child(2) [data-linenumber], + .diff-grid-right .new:nth-child(1) [data-linenumber] { + display: none; + } + } +} + +// Merge request diff grid layout overrides +.diff-table.code .diff-tr.line_holder .diff-td.line_content.parallel { + width: unset; +} + .diff-stats { align-items: center; padding: 0 1rem; diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index ca20b18f851..2094c824286 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -407,7 +407,8 @@ } } - &.droplab-item-selected i { + &.droplab-item-selected i, + &.droplab-item-selected svg { visibility: visible; } diff --git a/app/assets/stylesheets/framework/editor-lite.scss b/app/assets/stylesheets/framework/editor-lite.scss index 20fea7a82ca..c3b287a6c3d 100644 --- a/app/assets/stylesheets/framework/editor-lite.scss +++ b/app/assets/stylesheets/framework/editor-lite.scss @@ -1,3 +1,21 @@ +[data-editor-loading] { + @include gl-relative; + @include gl-display-flex; + @include gl-justify-content-center; + @include gl-align-items-center; + + &::before { + content: ''; + @include spinner(32px, 3px); + @include gl-absolute; + @include gl-z-index-1; + } + + pre { + opacity: 0; + } +} + [id^='editor-lite-'] { height: 500px; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index f8710cc1346..fe8c27ae9b6 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -45,11 +45,6 @@ } .file-actions { - position: absolute; - top: 5px; - right: 15px; - margin-left: auto; - .btn:not(.btn-icon) { padding: 0 10px; font-size: 13px; @@ -342,30 +337,14 @@ span.idiff { padding: $gl-padding-8 $gl-padding; margin: 0; border-radius: $border-radius-default $border-radius-default 0 0; - } - - .file-header-content { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 30px; - position: relative; - width: auto; - - @media (max-width: map-get($grid-breakpoints, sm)-1) { - width: 100%; - } - } - .file-holder & { - .file-actions { - position: static; + @include media-breakpoint-up(md) { + flex-wrap: nowrap; } } - .btn-clipboard { - position: absolute; - right: 0; + .file-header-content { + padding-right: 30px; } a { @@ -384,15 +363,11 @@ span.idiff { z-index: 2; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { display: block; .file-actions { - white-space: normal; - - .btn-group { - padding-top: 5px; - } + margin-top: 5px; } } } diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index 0fb91db0afb..d5f7ec68454 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -9,9 +9,15 @@ $notification-box-shadow-color: rgba(0, 0, 0, 0.25); &.sticky { position: sticky; - position: -webkit-sticky; top: $flash-container-top; z-index: 251; + + .flash-alert, + .flash-notice, + .flash-success, + .flash-warning { + @include gl-mb-4; + } } &.flash-container-page { diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 63be2bdef8e..20d44b71bf6 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -3,6 +3,38 @@ * Mixins with fixed values */ +@keyframes blinking-dot { + 0% { + opacity: 1; + } + + 25% { + opacity: 0.4; + } + + 75% { + opacity: 0.4; + } + + 100% { + opacity: 1; + } +} + +@keyframes blinking-scroll-button { + 0% { + opacity: 0.2; + } + + 50% { + opacity: 1; + } + + 100% { + opacity: 0.2; + } +} + @mixin str-truncated($max-width: 82%) { display: inline-block; overflow: hidden; diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index f8c46a4495e..372e3bed6e0 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -117,12 +117,6 @@ body.modal-open { border-bottom-right-radius: $modal-border-radius; } } - - @include media-breakpoint-up(sm) { - .modal-dialog { - margin: 64px auto; - } - } } .recaptcha-modal .recaptcha-form { @@ -134,7 +128,7 @@ body.modal-open { } .issues-import-modal, -.issues-export-modal { +.issuable-export-modal { .modal-header { justify-content: flex-start; @@ -166,8 +160,4 @@ body.modal-open { min-height: $modal-body-height; } } - - .checkmark { - color: $green-400; - } } diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 7ebc972ac37..3e218de6af9 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -69,7 +69,7 @@ line-height: 28px; white-space: normal; - /* Small devices (phones, tablets, 768px and lower) */ + /* Small devices (phones, 768px and lower) */ @include media-breakpoint-down(xs) { width: 100%; } @@ -92,7 +92,7 @@ padding: 16px 15px 11px; } - /* Small devices (phones, tablets, 768px and lower) */ + /* Small devices (phones, 768px and lower) */ @include media-breakpoint-down(sm) { width: 100%; } @@ -102,15 +102,6 @@ display: inline-block; text-align: right; - @include media-breakpoint-down(sm) { - margin-top: $gl-padding-8; - } - - @include media-breakpoint-up(md) { - display: flex; - align-items: center; - } - > .btn, > .btn-group, > .btn-container, @@ -146,6 +137,35 @@ } } + @include media-breakpoint-up(md) { + display: flex; + align-items: center; + } + + @include media-breakpoint-down(md) { + $controls-margin: $btn-margin-5 - 2px; + flex: 0 0 100%; + margin-top: $gl-padding-8; + + .controls-item, + .controls-item-full, + .controls-item:last-child { + flex: 1 1 35%; + display: block; + width: 100%; + margin: $controls-margin; + + .btn, + .dropdown { + margin: 0; + } + } + + .controls-item-full { + flex: 1 1 100%; + } + } + @include media-breakpoint-down(sm) { padding-bottom: 0; width: 100%; @@ -239,32 +259,6 @@ pre { width: 100%; } - - @include media-breakpoint-down(md) { - .nav-controls { - $controls-margin: $btn-margin-5 - 2px; - flex: 0 0 100%; - margin-top: $gl-padding-8; - - .controls-item, - .controls-item-full, - .controls-item:last-child { - flex: 1 1 35%; - display: block; - width: 100%; - margin: $controls-margin; - - .btn, - .dropdown { - margin: 0; - } - } - - .controls-item-full { - flex: 1 1 100%; - } - } - } } .scrolling-tabs-container { diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss index a74aeb9f220..2aa0ab6c1eb 100644 --- a/app/assets/stylesheets/framework/spinner.scss +++ b/app/assets/stylesheets/framework/spinner.scss @@ -20,7 +20,7 @@ } } -.spinner { +@mixin spinner($size: 16px, $border-width: 2px, $color: $orange-400) { border-radius: 50%; position: relative; margin: 0 auto; @@ -30,8 +30,12 @@ animation-iteration-count: infinite; border-style: solid; display: inline-flex; - @include spinner-size(16px, 2px); - @include spinner-color($orange-400); + @include spinner-size($size, $border-width); + @include spinner-color($color); +} + +.spinner { + @include spinner; &.spinner-md { @include spinner-size(32px, 3px); @@ -56,3 +60,7 @@ vertical-align: text-bottom; } } + +.spin { + animation: spinner-rotate 2s infinite linear; +} diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index c15d46d43b2..3d09edfe181 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -453,11 +453,9 @@ h4, h5, h6 { - position: relative; - a.anchor { - left: -16px; - position: absolute; + float: left; + margin-left: -16px; text-decoration: none; outline: none; |