diff options
Diffstat (limited to 'app/assets/stylesheets/framework')
45 files changed, 1070 insertions, 802 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 70d50c74ca9..6f5a2e561af 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -27,7 +27,7 @@ &.flipOutY, &.bounceIn, &.bounceOut { - @include webkit-prefix(animation-duration, .75s); + @include webkit-prefix(animation-duration, 0.75s); } &.short { @@ -73,22 +73,10 @@ @mixin disable-all-animation { /*CSS transitions*/ - -o-transition-property: none !important; - -moz-transition-property: none !important; - -ms-transition-property: none !important; - -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ - -o-transform: none !important; - -moz-transform: none !important; - -ms-transform: none !important; - -webkit-transform: none !important; transform: none !important; /*CSS animations*/ - -webkit-animation: none !important; - -moz-animation: none !important; - -o-animation: none !important; - -ms-animation: none !important; animation: none !important; } @@ -202,7 +190,7 @@ a { } } - [class^="skeleton-line-"] { + [class^='skeleton-line-'] { position: relative; background-color: $gray-100; height: 10px; @@ -218,13 +206,11 @@ a { animation: blockTextShine 1s linear infinite forwards; background-repeat: no-repeat; background-size: cover; - background-image: linear-gradient( - to right, - $gray-100 0%, - $gray-50 20%, - $gray-100 40%, - $gray-100 100% - ); + background-image: linear-gradient(to right, + $gray-100 0%, + $gray-50 20%, + $gray-100 40%, + $gray-100 100%); height: 10px; } } @@ -282,3 +268,27 @@ $skeleton-line-widths: ( @include webkit-prefix(animation-duration, 1s); transform-origin: 50% 50%; } + +/* ---------------------------------------------- + * Generated by Animista on 2019-4-26 17:40:41 + * w: http://animista.net, t: @cssanimista + * ---------------------------------------------- */ +@keyframes slide-in-fwd-bottom { + 0% { + transform: translateZ(-1400px) translateY(800px); + opacity: 0; + } + + 100% { + transform: translateZ(0) translateY(0); + opacity: 1; + } +} + +.slide-in-fwd-bottom-enter-active { + animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; +} + +.slide-in-fwd-bottom-leave-active { + animation: slide-in-fwd-bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both reverse; +} diff --git a/app/assets/stylesheets/framework/asciidoctor.scss b/app/assets/stylesheets/framework/asciidoctor.scss index 62493c32833..1586265d40e 100644 --- a/app/assets/stylesheets/framework/asciidoctor.scss +++ b/app/assets/stylesheets/framework/asciidoctor.scss @@ -1,7 +1,7 @@ .admonitionblock td.icon { width: 1%; - [class^="fa icon-"] { + [class^='fa icon-'] { @extend .fa-2x; } diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss deleted file mode 100644 index bfd3d776bd4..00000000000 --- a/app/assets/stylesheets/framework/avatar.scss +++ /dev/null @@ -1,160 +0,0 @@ -@mixin avatar-size($size, $margin-right) { - width: $size; - height: $size; - margin-right: $margin-right; -} - -.avatar-circle { - float: left; - margin-right: 15px; - border-radius: $avatar-radius; - border: 1px solid $gray-normal; - &.s16 { @include avatar-size(16px, 6px); } - &.s18 { @include avatar-size(18px, 6px); } - &.s19 { @include avatar-size(19px, 6px); } - &.s20 { @include avatar-size(20px, 7px); } - &.s24 { @include avatar-size(24px, 8px); } - &.s26 { @include avatar-size(26px, 8px); } - &.s32 { @include avatar-size(32px, 10px); } - &.s36 { @include avatar-size(36px, 10px); } - &.s40 { @include avatar-size(40px, 10px); } - &.s46 { @include avatar-size(46px, 15px); } - &.s48 { @include avatar-size(48px, 10px); } - &.s60 { @include avatar-size(60px, 12px); } - &.s64 { @include avatar-size(64px, 14px); } - &.s70 { @include avatar-size(70px, 14px); } - &.s90 { @include avatar-size(90px, 15px); } - &.s100 { @include avatar-size(100px, 15px); } - &.s110 { @include avatar-size(110px, 15px); } - &.s140 { @include avatar-size(140px, 15px); } - &.s160 { @include avatar-size(160px, 20px); } -} - -.avatar { - @extend .avatar-circle; - transition-property: none; - - width: 40px; - height: 40px; - padding: 0; - background: $gray-lightest; - overflow: hidden; - - &.avatar-inline { - float: none; - display: inline-block; - margin-left: 2px; - flex-shrink: 0; - -webkit-flex-shrink: 0; - - &.s16 { margin-right: 4px; } - &.s24 { margin-right: 4px; } - } - - &.center { - font-size: 14px; - line-height: 1.8em; - text-align: center; - } - - &.avatar-tile { - border-radius: 0; - border: 0; - } - - &:not([href]):hover { - border-color: darken($gray-normal, 10%); - } -} - -.identicon { - text-align: center; - vertical-align: top; - color: $gl-gray-700; - background-color: $gray-darker; - - // 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; } - &.s64 { font-size: 32px; line-height: 64px; } - &.s70 { font-size: 34px; line-height: 70px; } - &.s90 { font-size: 36px; line-height: 88px; } - &.s100 { font-size: 36px; line-height: 98px; } - &.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: $gray-darker; } -} - -.avatar-container { - @extend .avatar-circle; - overflow: hidden; - display: flex; - - a { - width: 100%; - height: 100%; - display: flex; - text-decoration: none; - } - - .avatar { - border-radius: 0; - border: 0; - height: auto; - width: 100%; - margin: 0; - align-self: center; - } - - &.s40 { min-width: 40px; min-height: 40px; } - &.s64 { min-width: 64px; min-height: 64px; } -} - -.rect-avatar { - border-radius: $border-radius-small; - &.s16 { border-radius: $border-radius-small; } - &.s18 { border-radius: $border-radius-small; } - &.s19 { border-radius: $border-radius-small; } - &.s20 { border-radius: $border-radius-small; } - &.s24 { border-radius: $border-radius-default; } - &.s26 { border-radius: $border-radius-default; } - &.s32 { border-radius: $border-radius-default; } - &.s36 { border-radius: $border-radius-default; } - &.s40 { border-radius: $border-radius-default; } - &.s46 { border-radius: $border-radius-default; } - &.s48 { border-radius: $border-radius-large; } - &.s60 { border-radius: $border-radius-large; } - &.s64 { border-radius: $border-radius-large; } - &.s70 { border-radius: $border-radius-large; } - &.s90 { border-radius: $border-radius-large; } - &.s96 { border-radius: $border-radius-large; } - &.s100 { border-radius: $border-radius-large; } - &.s110 { border-radius: $border-radius-large; } - &.s140 { border-radius: $border-radius-large; } - &.s160 { border-radius: $border-radius-large; } -} - -.avatar-counter { - background-color: $gray-darkest; - color: $white-light; - border: 1px solid $gray-normal; - border-radius: 1em; - font-family: $regular-font; - font-size: 9px; - line-height: 16px; - text-align: center; -} diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 5cfd5bbd4f5..7760c48cb92 100644 --- a/app/assets/stylesheets/framework/awards.scss +++ b/app/assets/stylesheets/framework/awards.scss @@ -23,9 +23,9 @@ box-shadow: 0 6px 12px $award-emoji-menu-shadow; pointer-events: none; opacity: 0; - transform: scale(.2); + transform: scale(0.2); transform-origin: 0 -45px; - transition: .3s cubic-bezier(.67, .06, .19, 1.44); + transition: 0.3s cubic-bezier(0.67, 0.06, 0.19, 1.44); transition-property: transform, opacity; &.is-rendered { @@ -62,7 +62,7 @@ } .emoji-search { - background-image: url("data:image/png;base64,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"); + background-image: url('data:image/png;base64,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'); background-repeat: no-repeat; background-position: right 5px center; background-size: 16px; @@ -90,7 +90,7 @@ background: none; border: 0; border-radius: $border-radius-base; - transition: transform .15s cubic-bezier(.3, 0, .2, 2); + transition: transform 0.15s cubic-bezier(0.3, 0, 0.2, 2); &:hover { background-color: transparent; @@ -151,8 +151,7 @@ outline: 0; .award-control-icon svg { - background: $award-emoji-positive-add-bg; - fill: $award-emoji-positive-add-lines; + fill: $blue-500; } .award-control-icon-neutral { @@ -233,10 +232,7 @@ height: $default-icon-size; width: $default-icon-size; border-radius: 50%; - } - - path { - fill: $border-gray-normal; + fill: $gray-700; } } diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss index 91dbb2a6365..cbd390e7145 100644 --- a/app/assets/stylesheets/framework/blank.scss +++ b/app/assets/stylesheets/framework/blank.scss @@ -69,6 +69,7 @@ @include media-breakpoint-up(sm) { display: flex; + height: 100%; align-items: center; padding: 50px 30px; } @@ -99,3 +100,30 @@ } } } + +@include media-breakpoint-up(lg) { + .column-large { + flex: 2; + } + + .column-small { + flex: 1; + margin-bottom: 15px; + + .blank-state { + max-width: 400px; + flex-wrap: wrap; + margin-left: 15px; + } + + .blank-state-icon { + margin-bottom: 30px; + } + } +} + +@include media-breakpoint-down(xs) { + .blank-state-icon svg { + width: 315px; + } +} diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 43b7c26b272..65c0ee74c60 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -22,6 +22,10 @@ } } +.oneline { + line-height: 35px; +} + .row-content-block { margin-top: 0; background-color: $gray-light; @@ -77,20 +81,13 @@ color: $gl-text-color; } - .oneline { - line-height: 35px; - } - > p:last-child { margin-bottom: 0; } .block-controls { - display: -webkit-flex; display: flex; - -webkit-justify-content: flex-end; justify-content: flex-end; - -webkit-flex: 1; flex: 1; .control { @@ -111,10 +108,6 @@ padding: 11px 0; margin-bottom: 11px; - .oneline { - line-height: 35px; - } - &.no-bottom-space { border-bottom: 0; margin-bottom: 0; @@ -153,7 +146,7 @@ display: inline-block; margin-left: 5px; font-size: 18px; - color: color("gray"); + color: color('gray'); } p { @@ -163,8 +156,6 @@ } .cover-desc { - color: $gl-text-color; - &.username:last-child { padding-bottom: $gl-padding; } @@ -208,6 +199,7 @@ &.user-cover-block { padding: 24px 0 0; + border-bottom: 1px solid $border-color; .nav-links { width: 100%; @@ -228,7 +220,6 @@ } .group-info { - h1 { display: inline; font-weight: $gl-font-weight-normal; @@ -242,14 +233,6 @@ margin-top: -1px; } -.nav-block { - .controls { - float: right; - margin-top: 8px; - padding-bottom: 8px; - } -} - .content-block { padding: $gl-padding 0; border-bottom: 1px solid $white-dark; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index cb2c8879c5f..767832e242c 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -1,12 +1,12 @@ @mixin btn-comment-icon { border-radius: 50%; background: $white-light; - padding: 1px 5px; + padding: 1px; font-size: 12px; color: $blue-500; + border: 1px solid $blue-500; width: 24px; height: 24px; - border: 1px solid $blue-500; &:hover, &.inverted { @@ -21,7 +21,7 @@ } @mixin btn-default { - border-radius: 3px; + border-radius: $border-radius-default; font-size: $gl-font-size; font-weight: $gl-font-weight-normal; padding: $gl-vert-padding $gl-btn-padding; @@ -37,7 +37,7 @@ @include btn-default; } -@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) { +@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border, $active-text) { background-color: $background; color: $text; border-color: $border; @@ -61,13 +61,22 @@ } } + &:focus { + box-shadow: 0 0 4px 1px $blue-300; + } + &:active { background-color: $active-background; border-color: $active-border; - color: $hover-text; + box-shadow: inset 0 2px 4px 0 rgba($black, 0.2); + color: $active-text; > .icon { - color: $hover-text; + color: $active-text; + } + + &:focus { + box-shadow: inset 0 2px 4px 0 rgba($black, 0.2); } } } @@ -139,6 +148,7 @@ @include btn-white; color: $gl-text-color; + white-space: nowrap; &:focus:active { outline: 0; @@ -163,21 +173,21 @@ &.btn-inverted { &.btn-success { - @include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700); + @include btn-outline($white-light, $green-600, $green-500, $green-100, $green-700, $green-500, $green-200, $green-600, $green-800); } &.btn-remove, &.btn-danger { - @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700); + @include btn-outline($white-light, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800); } &.btn-warning { - @include btn-outline($white-light, $orange-500, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700); + @include btn-outline($white-light, $orange-500, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800); } &.btn-primary, &.btn-info { - @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700); + @include btn-outline($white-light, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800); } } @@ -192,11 +202,11 @@ &.btn-close, &.btn-close-color { - @include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700); + @include btn-outline($white-light, $orange-600, $orange-500, $orange-100, $orange-700, $orange-500, $orange-200, $orange-600, $orange-800); } &.btn-spam { - @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700); + @include btn-outline($white-light, $red-500, $red-500, $red-100, $red-700, $red-500, $red-200, $red-600, $red-800); } &.btn-danger, @@ -239,7 +249,7 @@ padding: 6px 16px; border-color: $border-color; color: $gray-darkest; - background-color: $gray-light; + background-color: $white-light; &:hover, &:active, @@ -248,7 +258,6 @@ box-shadow: none; border-color: lighten($blue-300, 20%); color: $gray-darkest; - background-color: $gray-light; } } @@ -329,6 +338,8 @@ svg { top: auto; + width: 16px; + height: 16px; } } @@ -395,15 +406,13 @@ cursor: default; &:active { - -moz-box-shadow: inset 0 0 0 $white-light; - -webkit-box-shadow: inset 0 0 0 $white-light; box-shadow: inset 0 0 0 $white-light; } } .btn-inverted { &-secondary { - @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700); + @include btn-outline($white-light, $blue-500, $blue-500, $blue-100, $blue-700, $blue-500, $blue-200, $blue-600, $blue-800); } } @@ -445,7 +454,8 @@ border-color: transparent; } - &.btn-secondary-hover-link { + &.btn-secondary-hover-link, + &.btn-default-hover-link { color: $gl-text-color-secondary; &:hover, diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss index 0d8e4afa76f..643b20c56bc 100644 --- a/app/assets/stylesheets/framework/callout.scss +++ b/app/assets/stylesheets/framework/callout.scss @@ -28,6 +28,10 @@ background-color: $red-100; border-color: $red-200; color: $red-700; + + a { + color: $red-700; + } } .bs-callout-warning { diff --git a/app/assets/stylesheets/framework/ci_variable_list.scss b/app/assets/stylesheets/framework/ci_variable_list.scss index 7207e5119ce..28d7492b99c 100644 --- a/app/assets/stylesheets/framework/ci_variable_list.scss +++ b/app/assets/stylesheets/framework/ci_variable_list.scss @@ -47,6 +47,7 @@ display: flex; align-items: flex-start; width: 100%; + padding-bottom: $gl-padding; @include media-breakpoint-down(xs) { display: block; @@ -66,6 +67,7 @@ } } +.ci-variable-masked-item, .ci-variable-protected-item { flex: 0 1 auto; display: flex; diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index fa424532879..db09118ba15 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -5,6 +5,9 @@ .cgreen { color: $green-600; } .cdark { color: $common-gray-dark; } +.fwhite { fill: $white-light; } +.fgray { fill: $gray-700; } + .text-plain, .text-plain:hover { color: $gl-text-color; @@ -48,6 +51,10 @@ color: $brand-info; } +.bg-gray-light { + background-color: $gray-light; +} + .text-break-word { word-break: break-all; } @@ -57,7 +64,11 @@ text-decoration: underline; } -.hint { font-style: italic; color: $gl-gray-400; } +.hint { + font-style: italic; + color: $gl-gray-400; +} + .light { color: $gl-text-color; } .slead { @@ -116,7 +127,7 @@ hr { text-overflow: ellipsis; white-space: nowrap; - > div, + > div:not(.block), .str-truncated { display: inline; } @@ -158,13 +169,14 @@ p.time { text-shadow: none; } -.thin_area { +.thin-area { height: 150px; } // Fix issue with notes & lists creating a bunch of bottom borders. li.note { img { max-width: 100%; } + .note-title { li { border-bottom: 0 !important; @@ -183,11 +195,6 @@ li.note { background-color: inherit; } -.show-suppressed-diff, -.show-all-commits { - cursor: pointer; -} - .error-message { padding: 10px; background: $red-400; @@ -200,12 +207,12 @@ li.note { } } -.warning_message { - border-left: 4px solid $orange-200; - color: $orange-700; +@mixin message($background-color, $border-color, $text-color) { + border-left: 4px solid $border-color; + color: $text-color; padding: 10px; margin-bottom: 10px; - background: $orange-100; + background: $background-color; padding-left: 20px; &.centered { @@ -213,6 +220,14 @@ li.note { } } +.warning_message { + @include message($orange-100, $orange-200, $orange-700); +} + +.danger_message { + @include message($red-100, $red-200, $red-900); +} + .gitlab-promo { a { color: $gl-gray-350; @@ -335,7 +350,7 @@ img.emoji { .disabled-content { pointer-events: none; - opacity: .5; + opacity: 0.5; } .break-word { @@ -371,18 +386,23 @@ img.emoji { .prepend-top-default { margin-top: $gl-padding !important; } .prepend-top-16 { margin-top: 16px; } .prepend-top-20 { margin-top: 20px; } +.prepend-top-32 { margin-top: 32px; } .prepend-left-4 { margin-left: 4px; } .prepend-left-5 { margin-left: 5px; } .prepend-left-8 { margin-left: 8px; } .prepend-left-10 { margin-left: 10px; } +.prepend-left-15 { margin-left: 15px; } .prepend-left-default { margin-left: $gl-padding; } .prepend-left-20 { margin-left: 20px; } +.prepend-left-32 { margin-left: 32px; } .append-right-4 { margin-right: 4px; } .append-right-5 { margin-right: 5px; } .append-right-8 { margin-right: 8px; } .append-right-10 { margin-right: 10px; } +.append-right-15 { margin-right: 15px; } .append-right-default { margin-right: $gl-padding; } .append-right-20 { margin-right: 20px; } +.prepend-right-32 { margin-right: 32px; } .append-bottom-0 { margin-bottom: 0; } .append-bottom-4 { margin-bottom: $gl-padding-4; } .append-bottom-5 { margin-bottom: 5px; } @@ -391,15 +411,20 @@ img.emoji { .append-bottom-15 { margin-bottom: 15px; } .append-bottom-20 { margin-bottom: 20px; } .append-bottom-default { margin-bottom: $gl-padding; } +.prepend-bottom-32 { margin-bottom: 32px; } .inline { display: inline-block; } .center { text-align: center; } +.block { display: block; } +.flex { display: flex; } .vertical-align-middle { vertical-align: middle; } .vertical-align-sub { vertical-align: sub; } .flex-align-self-center { align-self: center; } .flex-grow { flex-grow: 1; } .flex-no-shrink { flex-shrink: 0; } .ws-initial { white-space: initial; } +.ws-normal { white-space: normal; } .overflow-auto { overflow: auto; } + .d-flex-center { display: flex; align-items: center; @@ -413,27 +438,24 @@ img.emoji { .mw-460 { max-width: 460px; } .mw-6em { max-width: 6em; } +.mw-70p { max-width: 70%; } .min-height-0 { min-height: 0; } -.w-3 { width: #{3 * $grid-size}; } - -.h-3 { width: #{3 * $grid-size}; } +.svg-w-100 { + svg { + width: 100%; + } +} /** COMMON SPACING CLASSES **/ -.gl-pl-0 { padding-left: 0; } -.gl-pl-1 { padding-left: #{0.5 * $grid-size}; } -.gl-pl-2 { padding-left: $grid-size; } -.gl-pl-3 { padding-left: #{2 * $grid-size}; } -.gl-pl-4 { padding-left: #{3 * $grid-size}; } -.gl-pl-5 { padding-left: #{4 * $grid-size}; } - -.gl-pr-0 { padding-right: 0; } -.gl-pr-1 { padding-right: #{0.5 * $grid-size}; } -.gl-pr-2 { padding-right: $grid-size; } -.gl-pr-3 { padding-right: #{2 * $grid-size}; } -.gl-pr-4 { padding-right: #{3 * $grid-size}; } -.gl-pr-5 { padding-right: #{4 * $grid-size}; } +@each $index, $padding in $spacing-scale { + #{'.gl-p-#{$index}'} { padding: $padding; } + #{'.gl-pl-#{$index}'} { padding-left: $padding; } + #{'.gl-pr-#{$index}'} { padding-right: $padding; } + #{'.gl-pt-#{$index}'} { padding-top: $padding; } + #{'.gl-pb-#{$index}'} { padding-bottom: $padding; } +} /** * Removes browser specific clear icon from input fields in @@ -447,10 +469,10 @@ img.emoji { } /** COMMON POSITIONING CLASSES */ -.position-bottom-0 { bottom: 0; } -.position-left-0 { left: 0; } -.position-right-0 { right: 0; } -.position-top-0 { top: 0; } +.position-bottom-0 { bottom: 0 !important; } +.position-left-0 { left: 0 !important; } +.position-right-0 { right: 0 !important; } +.position-top-0 { top: 0 !important; } .drag-handle { width: 4px; @@ -463,3 +485,54 @@ img.emoji { background-color: $gray-600; } } + +.cursor-pointer { + cursor: pointer; +} + +// Make buttons/dropdowns full-width on mobile +.full-width-mobile { + @include media-breakpoint-down(xs) { + width: 100%; + + > .dropdown-menu, + > .btn { + width: 100%; + } + } +} + +.onboarding-helper-container { + bottom: 40px; + right: 40px; + font-size: $gl-font-size-small; + background: $gray-100; + width: 200px; + border-radius: 24px; + box-shadow: 0 2px 4px $issue-boards-card-shadow; + z-index: 10000; + + .collapsible { + max-height: 0; + transition: max-height 0.5s cubic-bezier(0, 1, 0, 1); + } + + &.expanded { + border-bottom-right-radius: $border-radius-default; + border-bottom-left-radius: $border-radius-default; + + .collapsible { + max-height: 1000px; + transition: max-height 1s ease-in-out; + } + } + + .avatar { + border-color: darken($gray-normal, 10%); + + img { + width: 32px; + height: 32px; + } + } +} diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 8b6a7017c47..3238b01c6c0 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -5,7 +5,7 @@ padding-left: $contextual-sidebar-collapsed-width; } - @include media-breakpoint-up(lg) { + @include media-breakpoint-up(xl) { padding-left: $contextual-sidebar-width; } @@ -15,7 +15,7 @@ } .page-with-icon-sidebar { - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { padding-left: $contextual-sidebar-collapsed-width; } } @@ -71,6 +71,44 @@ } } +@mixin collapse-contextual-sidebar-content { + .context-header { + height: 60px; + width: $contextual-sidebar-collapsed-width; + + a { + padding: 10px 4px; + } + } + + .sidebar-top-level-items > li { + .sidebar-sub-level-items { + &:not(.flyout-list) { + display: none; + } + } + } + + .nav-icon-container { + margin-right: 0; + } + + .toggle-sidebar-button { + padding: 16px; + width: $contextual-sidebar-collapsed-width - 1px; + + .collapse-text, + .icon-angle-double-left { + display: none; + } + + .icon-angle-double-right { + display: block; + margin: 0; + } + } +} + .nav-sidebar { transition: width $sidebar-transition-duration, left $sidebar-transition-duration; position: fixed; @@ -89,7 +127,7 @@ } } - &.sidebar-collapsed-desktop { + @mixin collapse-contextual-sidebar { width: $contextual-sidebar-collapsed-width; .nav-sidebar-inner-scroll { @@ -115,6 +153,10 @@ } } + &.sidebar-collapsed-desktop { + @include collapse-contextual-sidebar; + } + &.sidebar-expanded-mobile { left: 0; } @@ -150,7 +192,7 @@ } } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { left: (-$contextual-sidebar-width); } @@ -167,16 +209,19 @@ height: 16px; width: 16px; } + + @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { + &:not(.sidebar-expanded-mobile) { + @include collapse-contextual-sidebar; + @include collapse-contextual-sidebar-content; + } + } } .nav-sidebar-inner-scroll { height: 100%; width: 100%; overflow: auto; - - @include media-breakpoint-up(sm) { - overflow: hidden; - } } .with-performance-bar .nav-sidebar { @@ -346,53 +391,13 @@ } } -.toggle-sidebar-button { - @include media-breakpoint-down(xs) { - display: none; - } -} - .collapse-text { white-space: nowrap; overflow: hidden; } .sidebar-collapsed-desktop { - .context-header { - height: 60px; - width: $contextual-sidebar-collapsed-width; - - a { - padding: 10px 4px; - } - } - - .sidebar-top-level-items > li { - .sidebar-sub-level-items { - &:not(.flyout-list) { - display: none; - } - } - } - - .nav-icon-container { - margin-right: 0; - } - - .toggle-sidebar-button { - padding: 16px; - width: $contextual-sidebar-collapsed-width - 1px; - - .collapse-text, - .icon-angle-double-left { - display: none; - } - - .icon-angle-double-right { - display: block; - margin: 0; - } - } + @include collapse-contextual-sidebar-content; } .fly-out-top-item { @@ -428,16 +433,14 @@ color: $gl-text-color-secondary; } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { display: flex; align-items: center; i { font-size: 18px; } - } - @include media-breakpoint-down(xs) { + .breadcrumbs-links { padding-left: $gl-padding; border-left: 1px solid $gl-text-color-quaternary; @@ -445,21 +448,25 @@ } } -@include media-breakpoint-down(xs) { +@include media-breakpoint-down(sm) { .close-nav-button { display: flex; } -} -.mobile-overlay { - display: none; + .toggle-sidebar-button { + display: none; + } - &.mobile-nav-open { - display: block; - position: fixed; - background-color: $black-transparent; - height: 100%; - width: 100%; - z-index: 300; + .mobile-overlay { + display: none; + + &.mobile-nav-open { + display: block; + position: fixed; + background-color: $black-transparent; + height: 100%; + width: 100%; + z-index: 300; + } } } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index b90db135b4a..cd951f67293 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -351,6 +351,10 @@ // Expects up to 3 digits on the badge margin-right: 40px; } + + .dropdown-menu-content { + padding: $dropdown-item-padding-y $dropdown-item-padding-x; + } } .droplab-dropdown { @@ -566,10 +570,10 @@ } .dropdown-menu-close { - right: 5px; + top: $gl-padding-4; + right: $gl-padding-8; width: 20px; height: 20px; - top: -1px; } .dropdown-menu-close-icon { diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss index be85e03430e..13c5541da92 100644 --- a/app/assets/stylesheets/framework/emojis.scss +++ b/app/assets/stylesheets/framework/emojis.scss @@ -2,7 +2,7 @@ gl-emoji { font-style: normal; display: inline-flex; vertical-align: middle; - font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; font-size: 1.4em; line-height: 1em; } diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index 6108eaa1ad0..536a26a6ffe 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -25,10 +25,6 @@ } } - table { - @extend .table; - } - .file-title { position: relative; background-color: $gray-light; @@ -123,7 +119,7 @@ } } - &.wiki { + &.md { padding: $gl-padding; @include media-breakpoint-up(md) { @@ -245,6 +241,7 @@ */ &.code { padding: 0; + border-radius: 0 0 $border-radius-default $border-radius-default; } .list-inline.previews { @@ -332,9 +329,13 @@ span.idiff { background-color: $gray-light; border-bottom: 1px solid $border-color; border-top: 1px solid $border-color; - padding: 5px $gl-padding; + padding: $gl-padding-8 $gl-padding; margin: 0; border-radius: $border-radius-default $border-radius-default 0 0; + + &.is-stuck { + border-radius: 0; + } } .file-header-content { @@ -365,10 +366,6 @@ span.idiff { color: $gl-text-color; } - small { - margin: 0 10px 0 0; - } - .file-actions .btn { padding: 0 10px; font-size: 13px; @@ -456,6 +453,28 @@ span.idiff { } } + .note-container { + .user-avatar-link.new-comment { + position: absolute; + margin: 40px $gl-padding 0 116px; + + ~ .note-edit-form form.edit-note { + @include media-breakpoint-up(sm) { + margin-left: $note-icon-gutter-width; + } + } + } + } + + .diff-discussions:not(:last-child) .discussion .discussion-body { + padding-bottom: $gl-padding; + + .discussion-reply-holder { + border-bottom: 1px solid $gray-100; + border-radius: 0; + } + } + .md-previewer { padding: $gl-padding; } diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index f48b3ddc912..26cbb7f5c13 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -50,19 +50,15 @@ } .filtered-search-wrapper { - display: -webkit-flex; display: flex; @include media-breakpoint-down(xs) { - -webkit-flex-direction: column; flex-direction: column; } .tokens-container { - display: -webkit-flex; display: flex; flex: 1; - -webkit-flex: 1; padding-left: 12px; position: relative; margin-bottom: 0; @@ -82,21 +78,18 @@ .input-token:only-child, .input-token:last-child { flex: 1; - -webkit-flex: 1; max-width: inherit; } } .filtered-search-token, .filtered-search-term { - display: -webkit-flex; display: flex; flex-shrink: 0; margin-top: 4px; margin-bottom: 4px; .selectable { - display: -webkit-flex; display: flex; } @@ -115,6 +108,8 @@ } .value-container { + display: flex; + align-items: center; background-color: $white-normal; color: $filter-value-text-color; border-radius: 0 2px 2px 0; @@ -128,7 +123,7 @@ .remove-token { display: inline-block; - padding-left: 4px; + padding-left: 8px; padding-right: 0; .fa-close { @@ -176,7 +171,6 @@ } .scroll-container { - display: -webkit-flex; display: flex; overflow-x: auto; white-space: nowrap; @@ -186,7 +180,6 @@ .filtered-search-box { position: relative; flex: 1; - display: -webkit-flex; display: flex; width: 100%; min-width: 0; @@ -194,7 +187,6 @@ background-color: $white-light; @include media-breakpoint-down(xs) { - -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-bottom: 10px; } @@ -226,7 +218,7 @@ min-width: 200px; padding-right: 25px; padding-left: 0; - height: $input-height; + height: $input-height - 2; line-height: inherit; border-color: transparent; @@ -349,7 +341,6 @@ } .filter-dropdown-container { - display: -webkit-flex; display: flex; .dropdown-toggle { @@ -423,3 +414,10 @@ padding: 8px 16px; text-align: center; } + +.search-token-target-branch { + .value { + font-family: $monospace-font; + font-size: 13px; + } +} diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss index afa85f0e4ae..e3dd127366d 100644 --- a/app/assets/stylesheets/framework/flash.scss +++ b/app/assets/stylesheets/framework/flash.scss @@ -6,6 +6,19 @@ position: relative; z-index: 1; + .flash-notice, + .flash-alert, + .flash-success, + .flash-warning { + border-radius: $border-radius-default; + color: $white-light; + + .container-fluid, + .container-fluid.container-limited { + background: transparent; + } + } + .flash-notice { @extend .alert; background-color: $blue-500; @@ -28,7 +41,8 @@ .flash-warning { @extend .alert; - background-color: $orange-500; + background-color: $orange-100; + color: $orange-900; margin: 0; } @@ -60,19 +74,6 @@ margin: 0; } - .flash-notice, - .flash-alert, - .flash-success, - .flash-warning { - border-radius: $border-radius-default; - color: $white-light; - - .container-fluid, - .container-fluid.container-limited { - background: transparent; - } - } - &.flash-container-page { margin-bottom: 0; diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index cbf9ee24ec5..2a601afff53 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -27,10 +27,16 @@ input[type='text'].danger { } label { + font-weight: $gl-font-weight-bold; + &.inline-label { margin: 0; } + &.form-check-label { + font-weight: $gl-font-weight-normal; + } + &.label-bold { font-weight: $gl-font-weight-bold; } @@ -41,14 +47,6 @@ label { margin: 0; } -.form-label { - @extend label; -} - -.form-control-label { - @extend .col-md-2; -} - .inline-input-group { width: 250px; } @@ -81,44 +79,14 @@ label { margin-left: 0; margin-right: 0; - .form-control-label { - font-weight: $gl-font-weight-bold; - padding-top: 4px; - } - .form-control { height: 29px; background: $white-light; font-family: $monospace-font; } - .input-group-prepend .btn, - .input-group-append .btn { - padding: 3px $gl-btn-padding; - background-color: $gray-light; - border: 1px solid $border-color; - } - - .text-block { - line-height: 0.8; - padding-top: 9px; - - code { - line-height: 1.8; - } - - img { - margin-right: $gl-padding; - } - } - @include media-breakpoint-down(xs) { padding: 0 $gl-padding; - - .form-control-label, - .text-block { - padding-left: 0; - } } } @@ -128,7 +96,7 @@ label { .form-control { @include box-shadow(none); - border-radius: 2px; + border-radius: $border-radius-default; padding: $gl-vert-padding $gl-input-padding; &.input-short { @@ -140,25 +108,14 @@ label { } } -.select-wrapper { - position: relative; - - .fa-chevron-down { - position: absolute; - font-size: 10px; - right: 10px; - top: 12px; - color: $gray-darkest; - pointer-events: none; - } -} - .select-control { padding-left: 10px; padding-right: 10px; + appearance: none; + /* stylelint-disable property-no-vendor-prefix */ -webkit-appearance: none; -moz-appearance: none; - appearance: none; + /* stylelint-enable property-no-vendor-prefix */ &::-ms-expand { display: none; @@ -173,12 +130,7 @@ label { margin-top: 35px; } -.form-group .form-control-label, -.form-group .form-control-label-full-width { - font-weight: $gl-font-weight-normal; -} - -.form-control::-webkit-input-placeholder { +.form-control::placeholder { color: $gl-text-color-tertiary; } @@ -203,10 +155,13 @@ label { .form-text.text-muted { margin-bottom: 0; margin-top: #{$grid-size / 2}; + font-size: $gl-font-size; } -.gl-field-error { +.gl-field-error, +.invalid-feedback { color: $red-500; + font-size: $gl-font-size; } .gl-show-field-errors { @@ -218,7 +173,8 @@ label { border: 1px solid $green-600; &:focus { - box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600; + box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, + 0 0 4px 0 $green-600; border: 0 none; } } @@ -227,7 +183,8 @@ label { border: 1px solid $red-500; &:focus { - box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error; + box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, + 0 0 4px 0 $gl-field-focus-shadow-error; border: 0 none; } } @@ -253,16 +210,26 @@ label { } } -.input-icon-wrapper { +.input-icon-wrapper, +.select-wrapper { position: relative; +} - .input-icon-right { - position: absolute; - right: 0.8em; - top: 50%; - transform: translateY(-50%); - color: $gray-600; - } +.select-wrapper > .fa-chevron-down { + position: absolute; + font-size: 10px; + right: 10px; + top: 12px; + color: $gray-darkest; + pointer-events: none; +} + +.input-icon-wrapper > .input-icon-right { + position: absolute; + right: 0.8em; + top: 50%; + transform: translateY(-50%); + color: $gray-600; } .input-md { @@ -274,3 +241,21 @@ label { max-width: $input-lg-width; width: 100%; } + +.input-group-text { + max-height: $input-height; +} + +.gl-form-checkbox { + align-items: baseline; + + &.form-check-inline .form-check-input { + align-self: flex-start; + margin-right: $gl-padding-8; + height: 1.5 * $gl-font-size; + } + + .help-text { + margin-bottom: 0; + } +} diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss index 50d4298d418..6943bfbc3d0 100644 --- a/app/assets/stylesheets/framework/gfm.scss +++ b/app/assets/stylesheets/framework/gfm.scss @@ -32,7 +32,7 @@ height: $chip-size; background: $white-light; background-image: linear-gradient(135deg, $gray-dark 25%, transparent 0%, transparent 75%, $gray-dark 0%), - linear-gradient(135deg, $gray-dark 25%, transparent 0%, transparent 75%, $gray-dark 0%); + linear-gradient(135deg, $gray-dark 25%, transparent 0%, transparent 75%, $gray-dark 0%); background-size: $bg-size $bg-size; background-position: 0 0, $bg-pos $bg-pos; diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss index 23dcc1817b1..1bc597bd4ae 100644 --- a/app/assets/stylesheets/framework/header.scss +++ b/app/assets/stylesheets/framework/header.scss @@ -39,7 +39,6 @@ .header-content { width: 100%; - display: -webkit-flex; display: flex; justify-content: space-between; position: relative; @@ -47,11 +46,8 @@ padding-left: 0; .title-container { - display: -webkit-flex; display: flex; - -webkit-align-items: stretch; align-items: stretch; - -webkit-flex: 1 1 auto; flex: 1 1 auto; padding-top: 0; overflow: visible; @@ -60,7 +56,6 @@ .title { padding-right: 0; color: currentColor; - display: -webkit-flex; display: flex; position: relative; margin: 0; @@ -85,7 +80,6 @@ } a { - display: -webkit-flex; display: flex; align-items: center; padding: 2px 8px; @@ -173,7 +167,6 @@ .navbar-nav { @include media-breakpoint-down(xs) { - display: -webkit-flex; display: flex; padding-right: 10px; flex-direction: row; @@ -258,7 +251,6 @@ > li { > a, > button { - display: -webkit-flex; display: flex; align-items: center; justify-content: center; @@ -294,7 +286,6 @@ } .navbar-sub-nav { - display: -webkit-flex; display: flex; margin: 0 0 0 6px; @@ -313,7 +304,9 @@ } } -.caret-down { +.caret-down, +.btn .caret-down { + top: 0; height: 11px; width: 11px; margin-left: 4px; @@ -326,14 +319,12 @@ } .breadcrumbs { - display: -webkit-flex; display: flex; min-height: $breadcrumb-min-height; color: $gl-text-color; } .breadcrumbs-container { - display: -webkit-flex; display: flex; width: 100%; position: relative; @@ -344,7 +335,6 @@ } .breadcrumbs-links { - -webkit-flex: 1; flex: 1; min-width: 0; align-self: center; @@ -379,7 +369,6 @@ } .breadcrumbs-list { - display: -webkit-flex; display: flex; margin-bottom: 0; line-height: 16px; @@ -430,7 +419,6 @@ } .breadcrumbs-extra { - display: -webkit-flex; display: flex; flex: 0 0 auto; margin-left: auto; @@ -459,29 +447,44 @@ } } +.title-container, .navbar-nav { - li { - .badge.badge-pill { - position: inherit; - font-weight: $gl-font-weight-normal; - margin-left: -6px; - font-size: 11px; - color: $white-light; - padding: 0 5px; - line-height: 12px; - border-radius: 7px; - box-shadow: 0 1px 0 rgba($gl-header-color, 0.2); - - &.issues-count { - background-color: $green-500; - } + .badge.badge-pill { + position: inherit; + font-weight: $gl-font-weight-normal; + margin-left: -6px; + font-size: 11px; + color: $white-light; + padding: 0 5px; + line-height: 12px; + border-radius: 7px; + box-shadow: 0 1px 0 rgba($gl-header-color, 0.2); + + &.green-badge { + background-color: $green-500; + } - &.merge-requests-count { - background-color: $orange-600; - } + &.merge-requests-count { + background-color: $orange-600; + } + + &.todos-count { + background-color: $blue-500; + } + } + + .canary-badge { + .badge { + font-size: $gl-font-size-small; + line-height: $gl-line-height; + padding: 0 $grid-size; + } - &.todos-count { - background-color: $blue-500; + &:hover { + text-decoration: none; + + .badge { + text-decoration: none; } } } @@ -594,10 +597,15 @@ .emoji-menu-toggle-button { @include emoji-menu-toggle-button; + padding: $gl-vert-padding $gl-btn-padding; } .input-group { - height: 34px; + &, + .input-group-prepend, + .input-group-append { + height: $input-height; + } } } diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss index 946f575ac13..741f92110c3 100644 --- a/app/assets/stylesheets/framework/highlight.scss +++ b/app/assets/stylesheets/framework/highlight.scss @@ -8,7 +8,7 @@ pre { padding: 10px 0; border: 0; - border-radius: 0; + border-radius: 0 0 $border-radius-default $border-radius-default; font-family: $monospace-font; font-size: $code-font-size; line-height: 19px; @@ -42,6 +42,7 @@ padding: 10px; text-align: right; float: left; + border-bottom-left-radius: $border-radius-default; a { font-family: $monospace-font; diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 49b9b7014ae..1be5ef276fd 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -20,8 +20,8 @@ } .ci-status-icon-pending, -.ci-status-icon-failed_with_warnings, -.ci-status-icon-success_with_warnings { +.ci-status-icon-failed-with-warnings, +.ci-status-icon-success-with-warnings { svg { fill: $orange-500; } @@ -31,6 +31,7 @@ } } +.ci-status-icon-preparing, .ci-status-icon-running { svg { fill: $blue-400; diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index d9d4a210f5f..555a3fe0dc7 100644 --- a/app/assets/stylesheets/framework/lists.scss +++ b/app/assets/stylesheets/framework/lists.scss @@ -15,7 +15,7 @@ word-wrap: break-word; &::after { - content: " "; + content: ' '; display: table; clear: both; } @@ -156,6 +156,12 @@ ul.content-list { margin-top: 3px; margin-bottom: 4px; + &.btn-ldap-override { + @include media-breakpoint-up(sm) { + margin-bottom: 0; + } + } + &.has-tooltip, &:last-child { margin-right: 0; @@ -167,15 +173,7 @@ ul.content-list { } .no-comments { - opacity: .5; - } - } - - .member-controls { - float: none; - - @include media-breakpoint-up(sm) { - float: right; + opacity: 0.5; } } @@ -196,8 +194,6 @@ ul.content-list { // Content list using flexbox .flex-list { .flex-row { - display: -webkit-flex; - display: -ms-flexbox; display: flex; align-items: center; white-space: nowrap; diff --git a/app/assets/stylesheets/framework/logo.scss b/app/assets/stylesheets/framework/logo.scss index 429cfbe7235..c5feefb8c54 100644 --- a/app/assets/stylesheets/framework/logo.scss +++ b/app/assets/stylesheets/framework/logo.scss @@ -9,7 +9,6 @@ } .tanuki-logo { - .tanuki-left-ear, .tanuki-right-ear, .tanuki-nose { @@ -34,7 +33,9 @@ .tanuki-left-cheek { @include include-keyframes(animate-tanuki-left-cheek) { - 0%, 10%, 100% { + 0%, + 10%, + 100% { fill: lighten($tanuki-yellow, 25%); } @@ -46,11 +47,13 @@ .tanuki-left-eye { @include include-keyframes(animate-tanuki-left-eye) { - 10%, 80% { + 10%, + 80% { fill: $tanuki-orange; } - 20%, 90% { + 20%, + 90% { fill: lighten($tanuki-orange, 25%); } } @@ -58,11 +61,13 @@ .tanuki-left-ear { @include include-keyframes(animate-tanuki-left-ear) { - 10%, 80% { + 10%, + 80% { fill: $tanuki-red; } - 20%, 90% { + 20%, + 90% { fill: lighten($tanuki-red, 25%); } } @@ -70,11 +75,13 @@ .tanuki-nose { @include include-keyframes(animate-tanuki-nose) { - 20%, 70% { + 20%, + 70% { fill: $tanuki-red; } - 30%, 80% { + 30%, + 80% { fill: lighten($tanuki-red, 25%); } } @@ -82,11 +89,13 @@ .tanuki-right-eye { @include include-keyframes(animate-tanuki-right-eye) { - 30%, 60% { + 30%, + 60% { fill: $tanuki-orange; } - 40%, 70% { + 40%, + 70% { fill: lighten($tanuki-orange, 25%); } } @@ -94,11 +103,13 @@ .tanuki-right-ear { @include include-keyframes(animate-tanuki-right-ear) { - 30%, 60% { + 30%, + 60% { fill: $tanuki-red; } - 40%, 70% { + 40%, + 70% { fill: lighten($tanuki-red, 25%); } } diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss index d6c4e68f68f..bfd96a4bc05 100644 --- a/app/assets/stylesheets/framework/markdown_area.scss +++ b/app/assets/stylesheets/framework/markdown_area.scss @@ -50,10 +50,6 @@ transition: opacity 200ms ease-in-out; } -.md-area { - position: relative; -} - .md-header { .nav-links { a { @@ -61,6 +57,10 @@ padding-top: 0; line-height: 19px; + &.btn.btn-sm { + padding: 2px 5px; + } + &:focus { margin-top: -10px; padding-top: 10px; @@ -131,30 +131,6 @@ width: 100%; } -.md:not(.use-csslab) { - &.md-preview-holder { - // Reset ul style types since we're nested inside a ul already - @include bulleted-list; - } - - // On diffs code should wrap nicely and not overflow - code { - white-space: pre-wrap; - word-break: keep-all; - } - - hr { - // Darken 'whitesmoke' a bit to make it more visible in note bodies - border-color: darken($gray-normal, 8%); - margin: 10px 0; - } - - - table:not(.js-syntax-highlight) { - @include markdown-table; - } -} - .toolbar-btn { float: left; padding: 0 7px; @@ -187,88 +163,6 @@ } } -.atwho-view { - overflow-y: auto; - overflow-x: hidden; - - .name, - small.aliases, - small.params { - float: left; - } - - small.aliases, - small.params { - padding: 2px 5px; - } - - small.description { - float: right; - padding: 3px 5px; - } - - .avatar-inline { - margin-bottom: 0; - } - - .has-warning { - .name, - .description { - color: $orange-700; - } - } - - .cur { - .avatar { - @include disable-all-animation; - border: 1px solid $white-light; - } - } - - ul > li { - @include clearfix; - white-space: nowrap; - } - - // TODO: fallback to global style - .atwho-view-ul { - padding: 8px 1px; - - li { - padding: 8px 16px; - border: 0; - - &.cur { - background-color: $gray-darker; - color: $gl-text-color; - - small { - color: inherit; - } - - &.has-warning { - color: $orange-700; - background-color: $orange-100; - } - } - - div.avatar { - display: inline-flex; - justify-content: center; - align-items: center; - - .center { - line-height: 14px; - } - } - - strong { - color: $gl-text-color; - } - } - } -} - .md-suggestion-diff { display: table !important; border: 1px solid $border-color !important; @@ -293,15 +187,6 @@ } @include media-breakpoint-down(xs) { - .atwho-view-ul { - width: 350px; - } - - .atwho-view ul li { - overflow: hidden; - text-overflow: ellipsis; - } - .referenced-users { margin-right: 0; } diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 3b0869e31a9..e7278554e6e 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -22,32 +22,6 @@ } /* - * Mixin for markdown tables - */ -@mixin markdown-table { - width: auto; - display: inline-block; - overflow-x: auto; - border: 0; - border-color: $gl-gray-100; - - @supports (width: fit-content) { - display: block; - width: fit-content; - } - - tr { - th { - border-bottom: solid 2px $gl-gray-100; - } - - td { - border-color: $gl-gray-100; - } - } -} - -/* * Base mixin for lists in GitLab */ @mixin basic-list { @@ -99,20 +73,6 @@ } } -@mixin bulleted-list { - > ul { - list-style-type: disc; - - ul { - list-style-type: circle; - - ul { - list-style-type: square; - } - } - } -} - @mixin webkit-prefix($property, $value) { #{'-webkit-' + $property}: $value; #{$property}: $value; @@ -120,16 +80,13 @@ /* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */ @mixin on-webkit-only { + /* stylelint-disable-next-line media-feature-name-no-vendor-prefix */ @media screen and (-webkit-min-device-pixel-ratio: 0) { @content; } } @mixin keyframes($animation-name) { - @-webkit-keyframes #{$animation-name} { - @content; - } - @keyframes #{$animation-name} { @content; } @@ -169,12 +126,10 @@ width: 43px; height: 30px; transition-duration: 0.3s; - -webkit-transform: translateZ(0); - background: linear-gradient( - to $gradient-direction, - $gradient-color 45%, - rgba($gradient-color, 0.4) - ); + transform: translateZ(0); + background: linear-gradient(to $gradient-direction, + $gradient-color 45%, + rgba($gradient-color, 0.4)); &.scrolling { visibility: visible; @@ -263,16 +218,22 @@ } } -@mixin build-trace-top-bar($height) { +// Used in EE for Web Terminal +@mixin build-trace-bar($height) { height: $height; min-height: $height; background: $gray-light; border: 1px solid $border-color; color: $gl-text-color; - position: sticky; + padding: $grid-size; +} + +@mixin build-trace-top-bar($height) { + @include build-trace-bar($height); + position: -webkit-sticky; + position: sticky; top: $header-height; - padding: $grid-size; .with-performance-bar & { top: $header-height + $performance-bar-height; @@ -370,8 +331,8 @@ line-height: 1; padding: 0; min-width: 16px; - color: $gray-darkest; - fill: $gray-darkest; + color: $gray-600; + fill: $gray-600; .fa { position: relative; @@ -421,3 +382,17 @@ } } } + +/* +* Mixin that handles the size and right margin of avatars. +*/ +@mixin avatar-size($size, $margin-right) { + width: $size; + height: $size; + margin-right: $margin-right; +} + +@mixin code-icon-size() { + width: $gl-font-size * $code-line-height * 0.9; + height: $gl-font-size * $code-line-height * 0.9; +} diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss index 3703b7568c8..f75e5b55506 100644 --- a/app/assets/stylesheets/framework/modal.scss +++ b/app/assets/stylesheets/framework/modal.scss @@ -34,10 +34,10 @@ .modal-body { background-color: $modal-body-bg; line-height: $line-height-base; - min-height: $modal-body-height; position: relative; padding: #{3 * $grid-size} #{2 * $grid-size}; text-align: left; + white-space: normal; .form-actions { margin: #{2 * $grid-size} #{-2 * $grid-size} #{-2 * $grid-size}; @@ -52,24 +52,22 @@ display: flex; flex-direction: row; - .btn + .btn { + .btn + .btn:not(.dropdown-toggle-split), + .btn + .btn-group, + .btn-group + .btn { margin-left: $grid-size; } @include media-breakpoint-down(xs) { flex-direction: column; - .btn + .btn { + .btn + .btn:not(.dropdown-toggle-split), + .btn + .btn-group, + .btn-group + .btn { margin-left: 0; margin-top: $grid-size; } } - - @include media-breakpoint-up(sm) { - .btn:nth-child(1) { - margin-left: auto; - } - } } body.modal-open { diff --git a/app/assets/stylesheets/framework/notes.scss b/app/assets/stylesheets/framework/notes.scss index d349e3fad9c..85ddf11d6fe 100644 --- a/app/assets/stylesheets/framework/notes.scss +++ b/app/assets/stylesheets/framework/notes.scss @@ -4,7 +4,7 @@ } // Diff is side by side - .notes_content.parallel & { + .notes-content.parallel & { // We hide at double what we normally hide at because // there are two columns of notes @media (#{$condition}-width: (2 * $breakpoint-width)) { diff --git a/app/assets/stylesheets/framework/page_title.scss b/app/assets/stylesheets/framework/page_title.scss index e8302953a63..c77e2be8e5a 100644 --- a/app/assets/stylesheets/framework/page_title.scss +++ b/app/assets/stylesheets/framework/page_title.scss @@ -1,8 +1,4 @@ .page-title-holder { - @extend .d-flex; - @extend .align-items-center; - - padding-top: $gl-padding-top; border-bottom: 1px solid $border-color; .page-title { diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss index 3a117106cff..cd3d6f8297e 100644 --- a/app/assets/stylesheets/framework/panels.scss +++ b/app/assets/stylesheets/framework/panels.scss @@ -7,7 +7,6 @@ margin-bottom: $gl-vert-padding; } - .card-header { padding: $gl-vert-padding $gl-padding; line-height: 36px; diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss index 19640ab5986..ada8f2fe1a6 100644 --- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss +++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss @@ -13,8 +13,8 @@ a, button { - padding: $gl-btn-padding; - padding-bottom: 11px; + padding: $gl-padding-8; + padding-bottom: $gl-padding-8 + 1; font-size: 14px; line-height: 28px; color: $gl-text-color-secondary; @@ -58,8 +58,12 @@ } .top-area { - @include clearfix; border-bottom: 1px solid $border-color; + display: flex; + + @include media-breakpoint-down(md) { + flex-flow: column-reverse wrap; + } .nav-text { padding-top: 16px; @@ -75,9 +79,8 @@ } .nav-links { - margin-bottom: 0; border-bottom: 0; - float: left; + flex: 1; &.wide { width: 100%; @@ -98,16 +101,23 @@ &.mobile-separator { border-bottom: 1px solid $border-color; + margin-bottom: $gl-padding-8; } } } .nav-controls { display: inline-block; - float: right; text-align: right; - padding: $gl-padding-8 0; - margin-bottom: 0; + + @include media-breakpoint-down(sm) { + margin-top: $gl-padding-8; + } + + @include media-breakpoint-up(md) { + display: flex; + align-items: center; + } > .btn, > .btn-container, @@ -115,8 +125,6 @@ > input, > form { margin-right: $gl-padding-top; - display: inline-block; - vertical-align: top; &:last-child { margin-right: 0; @@ -143,7 +151,7 @@ @include media-breakpoint-up(lg) { width: 250px; } } - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { padding-bottom: 0; width: 100%; @@ -153,7 +161,7 @@ .dropdown-toggle, .dropdown-menu-toggle, .form-control { - margin: 0 0 10px; + margin: 0 0 $gl-padding-8; display: block; width: 100%; } @@ -165,7 +173,7 @@ form { display: block; height: auto; - margin-bottom: 14px; + margin-bottom: $gl-padding-8; input { width: 100%; @@ -181,6 +189,33 @@ margin: 0; width: 100%; } + + &.inline { + display: flex; + flex-flow: row wrap; + justify-content: space-between; + + > .btn, + > .btn-container, + > .dropdown, + > input, + > form { + flex: 1 1 auto; + margin: 0 0 10px; + margin-left: $gl-padding-top; + width: auto; + + &:first-child { + margin-left: 0; + float: none; + } + } + + .btn-full { + flex: 1 1 100%; + margin-left: 0; + } + } } } @@ -209,20 +244,11 @@ width: 100%; } - @include media-breakpoint-down(xs) { - flex-flow: row wrap; - + @include media-breakpoint-down(md) { .nav-controls { $controls-margin: $btn-margin-5 - 2px; flex: 0 0 100%; - - &.controls-flex { - display: flex; - flex-flow: row wrap; - align-items: center; - justify-content: center; - padding: 0 0 $gl-padding-top; - } + margin-top: $gl-padding-8; .controls-item, .controls-item-full, @@ -299,8 +325,8 @@ .fade-right, .fade-left { - top: 16px; - bottom: auto; + bottom: $gl-padding; + top: auto; } &.is-smaller { @@ -340,6 +366,7 @@ display: flex; border-bottom: 1px solid $border-color; overflow: hidden; + align-items: center; .nav-links { border-bottom: 0; diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index bcd601e198a..81ccea1e01f 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -32,7 +32,7 @@ } &::after { - content: "\f078"; + content: '\f078'; position: absolute; z-index: 1; text-align: center; @@ -264,6 +264,16 @@ } } +.project-result { + .project-name { + font-weight: $gl-font-weight-bold; + } + + .project-path { + color: $gl-gray-400; + } +} + .user-result { min-height: 24px; display: flex; diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss index c4dbcf2ddc9..43d0e51e4c9 100644 --- a/app/assets/stylesheets/framework/sidebar.scss +++ b/app/assets/stylesheets/framework/sidebar.scss @@ -157,3 +157,55 @@ .sidebar-collapsed-icon .sidebar-collapsed-value { font-size: 12px; } + +.ancestor-tree { + .vertical-timeline { + position: relative; + list-style: none; + margin: 0; + padding: 0; + + &::before { + content: ''; + border-left: 1px solid $gray-500; + position: absolute; + top: $gl-padding; + bottom: $gl-padding; + left: map-get($spacers, 2) - 1px; + } + + &-row { + margin-top: map-get($spacers, 3); + + &:nth-child(1) { + margin-top: 0; + } + } + + &-icon { + /** + * 2px extra is to give a little more height than needed + * to hide timeline line before/after the element starts/ends + */ + height: map-get($spacers, 4) + 2px; + z-index: 1; + position: relative; + top: -3px; + padding: $gl-padding-4 0; + background-color: $gray-light; + + &.opened { + color: $green-500; + } + + &.closed { + color: $blue-500; + } + } + + &-content { + line-height: initial; + margin-left: $gl-padding-8; + } + } +} diff --git a/app/assets/stylesheets/framework/snippets.scss b/app/assets/stylesheets/framework/snippets.scss index 36ab38f1c9d..3ab83f4c8e6 100644 --- a/app/assets/stylesheets/framework/snippets.scss +++ b/app/assets/stylesheets/framework/snippets.scss @@ -22,6 +22,10 @@ .snippet-file-content { border-radius: 3px; + + .file-title-flex-parent .btn-clipboard { + line-height: 28px; + } } .snippet-header { diff --git a/app/assets/stylesheets/framework/sortable.scss b/app/assets/stylesheets/framework/sortable.scss new file mode 100644 index 00000000000..8c070200135 --- /dev/null +++ b/app/assets/stylesheets/framework/sortable.scss @@ -0,0 +1,92 @@ +.sortable-container { + background-color: $gray-light; + + .flex-list { + padding: 5px; + margin-bottom: 0; + } +} + +.sortable-row { + .flex-row { + display: flex; + + &.issuable-info-container { + padding-right: 0; + } + } + + .sortable-link { + color: $black; + } +} + +.gl-sortable { + .header { + user-select: none; + + &:hover { + cursor: pointer; + background-color: $gray-100; + } + + &:focus { + outline: 1px solid $blue-300; + } + } +} + +.related-issues-list-item { + .card-body, + .issuable-info-container { + padding: $gl-padding-4 $gl-padding-4 $gl-padding-4 $gl-padding; + + .block-truncated { + padding: $gl-padding-8 0; + line-height: $gl-btn-line-height; + } + + @include media-breakpoint-down(md) { + padding-left: $gl-padding; + + .block-truncated { + flex-direction: column-reverse; + padding: $gl-padding-4 0; + + .text-secondary { + margin-top: $gl-padding-4; + } + + .issue-token-title-text { + display: block; + } + } + + .issue-item-remove-button { + align-self: baseline; + } + } + + @include media-breakpoint-only(md) { + .block-truncated .issue-token-title-text { + white-space: nowrap; + } + + .issue-item-remove-button { + align-self: center; + } + } + + @include media-breakpoint-down(sm) { + padding-left: $gl-padding-8; + + .block-truncated .issue-token-title-text { + white-space: normal; + } + } + } + + &.is-dragging { + padding: 0; + } +} diff --git a/app/assets/stylesheets/framework/spinner.scss b/app/assets/stylesheets/framework/spinner.scss new file mode 100644 index 00000000000..91fe75075dc --- /dev/null +++ b/app/assets/stylesheets/framework/spinner.scss @@ -0,0 +1,51 @@ +@mixin spinner-color($color) { + border-color: rgba($color, 0.25); + border-top-color: $color; +} + +@mixin spinner-size($size, $border-width) { + width: $size; + height: $size; + border-width: $border-width; + @include webkit-prefix(transform-origin, 50% 50% calc((#{$size} / 2) + #{$border-width})); +} + +@keyframes spinner-rotate { + 0% { + transform: rotate(0); + } + + 100% { + transform: rotate(360deg); + } +} + +.spinner { + border-radius: 50%; + position: relative; + margin: 0 auto; + animation-name: spinner-rotate; + animation-duration: 0.6s; + animation-timing-function: linear; + animation-iteration-count: infinite; + border-style: solid; + display: inline-flex; + @include spinner-size(16px, 2px); + @include spinner-color($orange-600); + + &.spinner-md { + @include spinner-size(32px, 3px); + } + + &.spinner-lg { + @include spinner-size(64px, 4px); + } + + &.spinner-dark { + @include spinner-color($gray-700); + } + + &.spinner-light { + @include spinner-color($white); + } +} diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss index 3d66136938f..6205ccaa52f 100644 --- a/app/assets/stylesheets/framework/system_messages.scss +++ b/app/assets/stylesheets/framework/system_messages.scss @@ -12,8 +12,9 @@ p { @include str-truncated(100%); - margin-top: 0; + margin-top: -1px; margin-bottom: 0; + font-size: $gl-font-size-small; } } diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss index 295a5b5ee7a..ba406bac50b 100644 --- a/app/assets/stylesheets/framework/tables.scss +++ b/app/assets/stylesheets/framework/tables.scss @@ -161,4 +161,3 @@ table { border-top: 0; } } - diff --git a/app/assets/stylesheets/framework/terms.scss b/app/assets/stylesheets/framework/terms.scss index 3f4be8829d7..b07d6023127 100644 --- a/app/assets/stylesheets/framework/terms.scss +++ b/app/assets/stylesheets/framework/terms.scss @@ -13,7 +13,6 @@ .card { .card-header { - display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss index 3d5208c3db5..42a739e88f7 100644 --- a/app/assets/stylesheets/framework/timeline.scss +++ b/app/assets/stylesheets/framework/timeline.scss @@ -42,8 +42,8 @@ } } - .avatar { - margin-right: 15px; + img.avatar { + margin-right: $gl-padding; } .controls { @@ -55,4 +55,5 @@ .discussion .timeline-entry { margin: 0; border-right: 0; + border-radius: $border-radius-default $border-radius-default 0 0; } diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss index 8258da07e4d..5f8ac3b7e37 100644 --- a/app/assets/stylesheets/framework/toggle.scss +++ b/app/assets/stylesheets/framework/toggle.scss @@ -34,7 +34,7 @@ background: $gl-gray-400; border-radius: 12px; padding: 3px; - transition: all .4s ease; + transition: all 0.4s ease; &::selection, &::before::selection, @@ -52,7 +52,7 @@ left: 0; border-radius: 9px; background: $feature-toggle-color; - transition: all .2s ease; + transition: all 0.2s ease; &, .toggle-icon-svg { @@ -135,12 +135,18 @@ } @keyframes animate-enabled { - 0%, 35% { opacity: 0; } + 0%, + + 35% { opacity: 0; } + 100% { opacity: 1; } } @keyframes animate-disabled { - 0%, 35% { opacity: 0; } + 0%, + + 35% { opacity: 0; } + 100% { opacity: 1; } } } diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 1b36c1f4862..7c152efd9c7 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -1,13 +1,44 @@ -@mixin md-typography { +/** + * Apply Markdown typography + * + */ +.md:not(.use-csslab) { color: $gl-text-color; word-wrap: break-word; - [dir="auto"] { + [dir='auto'] { text-align: initial; } + *:first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } + + p { + color: $gl-text-color; + margin: 0 0 16px; + + > code { + font-weight: inherit; + } + + a:not(.no-attachment-icon) img { + // Remove bottom padding because + // <p> already has $gl-padding bottom + margin-bottom: 0; + } + } + a { color: $blue-600; + + > code { + color: $blue-600; + } } img:not(.emoji) { @@ -28,18 +59,12 @@ max-width: 100%; } - p a:not(.no-attachment-icon) img { - // Remove bottom padding because - // <p> already has $gl-padding bottom - margin-bottom: 0; - } - - *:first-child { - margin-top: 0; - } - - > :last-child { - margin-bottom: 0; + &:not(.md-file) img:not(.emoji) { + border: 1px solid $white-normal; + padding: 5px; + margin: 5px 0; + // Ensure that image does not exceed viewport + max-height: calc(100vh - 100px); } // Single code lines should wrap @@ -47,6 +72,7 @@ font-family: $monospace-font; white-space: pre-wrap; word-wrap: normal; + word-break: keep-all; } kbd { @@ -131,20 +157,34 @@ } } - p { - color: $gl-text-color; - margin: 0 0 16px; + hr { + // Darken 'whitesmoke' a bit to make it more visible in note bodies + border-color: darken($gray-normal, 8%); + margin: 10px 0; } - table:not(.js-syntax-highlight) { + table:not(.code) { @extend .table; @extend .table-bordered; margin: 16px 0; color: $gl-text-color; border: 0; + width: auto; + display: block; + overflow-x: auto; - th { - background: $label-gray-bg; + tbody { + background-color: $white-light; + } + + tr { + th { + border-bottom: solid 2px $gl-gray-200; + } + + td { + border-color: $gl-gray-200; + } } } @@ -173,14 +213,6 @@ } } - p > code { - font-weight: inherit; - } - - a > code { - color: $blue-600; - } - dd { margin-left: $gl-padding; } @@ -196,6 +228,18 @@ margin: 3px 28px 3px 0 !important; } + > ul { + list-style-type: disc; + + ul { + list-style-type: circle; + + ul { + list-style-type: square; + } + } + } + li { line-height: 1.6em; margin-left: 25px; @@ -224,8 +268,8 @@ } } - a[href*="/uploads/"], - a[href*="storage.googleapis.com/google-code-attachments/"] { + a[href*='/uploads/'], + a[href*='storage.googleapis.com/google-code-attachments/'] { &::before { margin-right: 4px; @@ -233,17 +277,17 @@ font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; - content: "\f0c6"; + content: '\f0c6'; } &:hover::before { text-decoration: none; } - } - a.no-attachment-icon { - &::before { - display: none; + &.no-attachment-icon { + &::before { + display: none; + } } } @@ -362,28 +406,6 @@ code { } /** - * Apply Markdown typography - * - */ -.wiki:not(.use-csslab) { - @include md-typography; -} - -.md:not(.use-csslab) { - @include md-typography; - - &:not(.wiki) { - img:not(.emoji) { - border: 1px solid $white-normal; - padding: 5px; - margin: 5px 0; - // Ensure that image does not exceed viewport - max-height: calc(100vh - 100px); - } - } -} - -/** * Textareas intended for GFM * */ @@ -423,6 +445,7 @@ h4 { /** * form text input i.e. search bar, comments, forms, etc. */ +/* stylelint-disable selector-no-vendor-prefix */ input, textarea { &::-webkit-input-placeholder { @@ -447,5 +470,10 @@ textarea { color: $gl-text-color-tertiary; } } +/* stylelint-enable */ .lh-100 { line-height: 1; } + +wbr { + display: inline-block; +} diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 25b272ab3a9..dc451a97e17 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -11,6 +11,14 @@ $default-transition-duration: 0.15s; $contextual-sidebar-width: 220px; $contextual-sidebar-collapsed-width: 50px; $toggle-sidebar-height: 48px; +$spacing-scale: ( + 0: 0, + 1: #{0.5 * $grid-size}, + 2: $grid-size, + 3: #{2 * $grid-size}, + 4: #{3 * $grid-size}, + 5: #{4 * $grid-size} +); /* * Color schema @@ -23,6 +31,7 @@ $darken-border-dashed-factor: 25%; $white-light: #fff; $white-normal: #f0f0f0; $white-dark: #eaeaea; +$white-transparent: rgba(255, 255, 255, 0.8); $gray-lightest: #fdfdfd; $gray-light: #fafafa; @@ -41,13 +50,13 @@ $t-gray-a-04: rgba($black, 0.04); $t-gray-a-06: rgba($black, 0.06); $t-gray-a-08: rgba($black, 0.08); -$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; +$gl-gray-100: #ddd; +$gl-gray-200: #ccc; +$gl-gray-350: #aaa; +$gl-gray-400: #999; +$gl-gray-500: #777; +$gl-gray-600: #666; +$gl-gray-700: #555; $green-50: #f1fdf6; $green-100: #dcf5e7; @@ -100,7 +109,7 @@ $red-950: #4b140b; $gray-50: #fafafa; $gray-100: #f2f2f2; $gray-200: #dfdfdf; -$gray-300: #cccccc; +$gray-300: #ccc; $gray-400: #bababa; $gray-500: #a7a7a7; $gray-600: #919191; @@ -109,6 +118,84 @@ $gray-800: #4f4f4f; $gray-900: #2e2e2e; $gray-950: #1f1f1f; +$greens: ( + '50': $green-50, + '100': $green-100, + '200': $green-200, + '300': $green-300, + '400': $green-400, + '500': $green-500, + '600': $green-600, + '700': $green-700, + '800': $green-800, + '900': $green-900, + '950': $green-950 +); + +$blues: ( + '50': $blue-50, + '100': $blue-100, + '200': $blue-200, + '300': $blue-300, + '400': $blue-400, + '500': $blue-500, + '600': $blue-600, + '700': $blue-700, + '800': $blue-800, + '900': $blue-900, + '950': $blue-950 +); + +$oranges: ( + '50': $orange-50, + '100': $orange-100, + '200': $orange-200, + '300': $orange-300, + '400': $orange-400, + '500': $orange-500, + '600': $orange-600, + '700': $orange-700, + '800': $orange-800, + '900': $orange-900, + '950': $orange-950 +); + +$reds: ( + '50': $red-50, + '100': $red-100, + '200': $red-200, + '300': $red-300, + '400': $red-400, + '500': $red-500, + '600': $red-600, + '700': $red-700, + '800': $red-800, + '900': $red-900, + '950': $red-950 +); + +$grays: ( + '50': $gray-50, + '100': $gray-100, + '200': $gray-200, + '300': $gray-300, + '400': $gray-400, + '500': $gray-500, + '600': $gray-600, + '700': $gray-700, + '800': $gray-800, + '900': $gray-900, + '950': $gray-950 +); + +$color-ranges: ( + 'primary': $blues, + 'secondary': $grays, + 'success': $greens, + 'warning': $oranges, + 'danger': $reds +); + // GitLab themes $indigo-50: #f7f7ff; @@ -218,6 +305,15 @@ $gl-gray-dark: #313236; $gl-gray-light: #5c5c5c; $gl-header-color: #4c4e54; +$type-scale: ( + 1: 12px, + 2: 14px, + 3: 16px, + 4: 20px, + 5: 28px, + 6: 42px +); + /* * Lists */ @@ -277,7 +373,7 @@ $general-hover-transition-duration: 100ms; $general-hover-transition-curve: linear; $highlight-changes-color: rgb(235, 255, 232); $performance-bar-height: 35px; -$system-header-height: 35px; +$system-header-height: 16px; $system-footer-height: $system-header-height; $flash-height: 52px; $context-header-height: 60px; @@ -285,9 +381,13 @@ $breadcrumb-min-height: 48px; $home-panel-title-row-height: 64px; $home-panel-avatar-mobile-size: 24px; $gl-line-height: 16px; +$gl-line-height-20: 20px; $gl-line-height-24: 24px; $gl-line-height-14: 14px; +$issue-box-upcoming-bg: #8f8f8f; +$pages-group-name-color: #4c4e54; + /* * Common component specific colors */ @@ -323,8 +423,8 @@ $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); -$diff-image-info-color: gray; -$diff-view-modes-color: gray; +$diff-image-info-color: #808080; +$diff-view-modes-color: #808080; $diff-view-modes-border: #c1c1c1; $diff-jagged-border-gradient-color: darken($white-normal, 8%); @@ -333,7 +433,7 @@ $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, +$regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; @@ -343,6 +443,7 @@ $regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-San $dropdown-width: 300px; $dropdown-min-height: 40px; $dropdown-max-height: 312px; +$dropdown-max-height-lg: 445px; $dropdown-vertical-offset: 4px; $dropdown-empty-row-bg: rgba(#000, 0.04); $dropdown-shadow-color: rgba(#000, 0.1); @@ -398,6 +499,17 @@ $pagination-line-height: 20px; $pagination-disabled-color: #cdcdcd; /* +* Toasts +*/ +$toast-offset: 24px; +$toast-height: 48px; +$toast-max-width: 586px; +$toast-padding-right: 42px; +$toast-default-margin: 8px; +$toast-action-margin-left: 16px; +$toast-background-opacity: 0.95; + +/* * Status icons */ $status-icon-size: 22px; @@ -409,7 +521,7 @@ $award-emoji-menu-shadow: rgba(0, 0, 0, 0.175); $award-emoji-positive-add-bg: #fed159; $award-emoji-positive-add-lines: #bb9c13; $award-emoji-width: 376px; -$award-emoji-width-xs: 300px; +$award-emoji-width-xs: 90%; /* * Search Box @@ -478,6 +590,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards */ $avatar-radius: 50%; $gl-avatar-size: 40px; +$gl-avatar-border-opacity: 0.1; /* * Blame @@ -528,6 +641,7 @@ $input-lg-width: 320px; */ $document-index-color: #888; $help-shortcut-header-color: #333; +$accepting-mr-label-color: #69d100; /* * Issues @@ -570,6 +684,11 @@ $feature-toggle-text-color: #fff; $feature-toggle-color-enabled: #4a8bee; /* + * Monitor Charts + */ +$chart-tooltip-max-width: 512px; + +/* Stat Graph */ $stat-graph-common-bg: #f3f3f3; @@ -625,6 +744,18 @@ Animation Functions $dropdown-animation-timing: cubic-bezier(0.23, 1, 0.32, 1); /* +GitLab Plans +*/ +$gl-gold-plan: #d4af37; +$gl-silver-plan: #91a1ab; +$gl-bronze-plan: #cd7f32; + +/* +Cross-project Pipelines + */ +$linked-project-column-margin: 60px; + +/* Performance Bar */ $perf-bar-production: #222; @@ -648,6 +779,17 @@ $image-comment-cursor-left-offset: 12; $image-comment-cursor-top-offset: 12; /* +Add GitLab Slack Application +*/ +$add-to-slack-popup-max-width: 400px; +$add-to-slack-gif-max-width: 850px; +$add-to-slack-well-max-width: 750px; +$add-to-slack-logo-size: 100px; +$double-headed-arrow-width: 100px; +$double-headed-arrow-height: 25px; +$right-arrow-size: 16px; + +/* Popup */ $popup-triangle-size: 15px; @@ -682,3 +824,16 @@ $mr-version-controls-height: 56px; Compare Branches */ $compare-branches-sticky-header-height: 68px; + +/** + Bootstrap 4.2.0 introduced new icons for validating forms. + Our design system does not use those, so we are disabling them for now: + - Docs: https://getbootstrap.com/docs/4.3/components/forms/#server-side + - Issue: https://gitlab.com/gitlab-org/design.gitlab.com/issues/242 + */ +$enable-validation-icons: false; + +/* +Licenses +*/ +$license-header-cell-width: 150px; diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index 1dfe2a69a2f..ea96381a098 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -7,9 +7,9 @@ $secondary: $gray-light; $input-disabled-bg: $gray-light; $input-border-color: $gray-200; $input-color: $gl-text-color; +$input-font-size: $gl-font-size; $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; @@ -37,9 +37,14 @@ $h6-font-size: 14px; $spacer: $grid-size; $spacers: ( 0: 0, - 1: ($spacer * .5), + 1: ($spacer * 0.5), 2: ($spacer), 3: ($spacer * 2), 4: ($spacer * 3), - 5: ($spacer * 4) + 5: ($spacer * 4), + 6: ($spacer * 5), + 7: ($spacer * 6), + 8: ($spacer * 7), + 9: ($spacer * 8) ); +$pagination-color: $gl-text-color; diff --git a/app/assets/stylesheets/framework/vue_transitions.scss b/app/assets/stylesheets/framework/vue_transitions.scss index e07a177e153..e3bdc0b0199 100644 --- a/app/assets/stylesheets/framework/vue_transitions.scss +++ b/app/assets/stylesheets/framework/vue_transitions.scss @@ -1,9 +1,13 @@ .fade-enter-active, -.fade-leave-active { +.fade-leave-active, +.fade-in-enter-active, +.fade-out-leave-active { transition: opacity $sidebar-transition-duration $general-hover-transition-curve; } .fade-enter, +.fade-in-enter, +.fade-out-leave-to, .fade-leave-to { opacity: 0; } diff --git a/app/assets/stylesheets/framework/wells.scss b/app/assets/stylesheets/framework/wells.scss index 161943766d4..434cbd6d21c 100644 --- a/app/assets/stylesheets/framework/wells.scss +++ b/app/assets/stylesheets/framework/wells.scss @@ -12,6 +12,10 @@ border-bottom: 1px solid $well-inner-border; } + &.borderless { + border-bottom: 0; + } + &.branch-info { .commit-sha, .commit-info { |