diff options
author | Annabel Dunstone Gray <annabel.m.gray@gmail.com> | 2019-02-28 00:37:48 +0300 |
---|---|---|
committer | Annabel Dunstone Gray <annabel.m.gray@gmail.com> | 2019-02-28 00:37:48 +0300 |
commit | 9d81ee3a469b78d695713ce97bc98cd95963a6ad (patch) | |
tree | 08f4db83908bbc1adadc6a4a892d5bde7f25b3be /app | |
parent | c521b82895da2f2229ccbc4c4f515df349a115df (diff) | |
parent | 46a1ca2889e6428c860fc610a18bb16bb6d68e11 (diff) |
Merge branch 'tz-stylelint-episode-2' into 'master'
More Stylelint rules
See merge request gitlab-org/gitlab-ce!25266
Diffstat (limited to 'app')
51 files changed, 338 insertions, 395 deletions
diff --git a/app/assets/stylesheets/components/related_items_list.scss b/app/assets/stylesheets/components/related_items_list.scss index 048a5c0300c..edf7b26ebaa 100644 --- a/app/assets/stylesheets/components/related_items_list.scss +++ b/app/assets/stylesheets/components/related_items_list.scss @@ -195,8 +195,7 @@ $item-weight-max-width: 48px; } .mr-status-wrapper, -.mr-ci-status - { +.mr-ci-status { line-height: 0; } diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 70d50c74ca9..257d788873c 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; } } 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 index bfd3d776bd4..af79a4d9392 100644 --- a/app/assets/stylesheets/framework/avatar.scss +++ b/app/assets/stylesheets/framework/avatar.scss @@ -45,7 +45,6 @@ display: inline-block; margin-left: 2px; flex-shrink: 0; - -webkit-flex-shrink: 0; &.s16 { margin-right: 4px; } &.s24 { margin-right: 4px; } @@ -74,20 +73,48 @@ 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; } + &.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; } @@ -120,8 +147,11 @@ align-self: center; } - &.s40 { min-width: 40px; min-height: 40px; } - &.s64 { min-width: 64px; min-height: 64px; } + &.s40 { min-width: 40px; + min-height: 40px; } + + &.s64 { min-width: 64px; + min-height: 64px; } } .rect-avatar { diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss index 5cfd5bbd4f5..648e1944388 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; diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 43b7c26b272..e6c55252b24 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -86,11 +86,8 @@ } .block-controls { - display: -webkit-flex; display: flex; - -webkit-justify-content: flex-end; justify-content: flex-end; - -webkit-flex: 1; flex: 1; .control { @@ -153,7 +150,7 @@ display: inline-block; margin-left: 5px; font-size: 18px; - color: color("gray"); + color: color('gray'); } p { @@ -228,7 +225,6 @@ } .group-info { - h1 { display: inline; font-weight: $gl-font-weight-normal; diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss index cb2c8879c5f..a4af84f8d27 100644 --- a/app/assets/stylesheets/framework/buttons.scss +++ b/app/assets/stylesheets/framework/buttons.scss @@ -395,8 +395,6 @@ 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; } } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index b09e44e052a..d0e33dfc853 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -57,7 +57,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 { @@ -158,13 +162,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; @@ -335,7 +340,7 @@ img.emoji { .disabled-content { pointer-events: none; - opacity: .5; + opacity: 0.5; } .break-word { @@ -400,6 +405,7 @@ img.emoji { .flex-no-shrink { flex-shrink: 0; } .ws-initial { white-space: initial; } .overflow-auto { overflow: auto; } + .d-flex-center { display: flex; align-items: center; 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/filters.scss b/app/assets/stylesheets/framework/filters.scss index f48b3ddc912..e5b529ae11d 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; } @@ -176,7 +169,6 @@ } .scroll-container { - display: -webkit-flex; display: flex; overflow-x: auto; white-space: nowrap; @@ -186,7 +178,6 @@ .filtered-search-box { position: relative; flex: 1; - display: -webkit-flex; display: flex; width: 100%; min-width: 0; @@ -194,7 +185,6 @@ background-color: $white-light; @include media-breakpoint-down(xs) { - -webkit-flex: 1 1 auto; flex: 1 1 auto; margin-bottom: 10px; } @@ -349,7 +339,6 @@ } .filter-dropdown-container { - display: -webkit-flex; display: flex; .dropdown-toggle { diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index cbf9ee24ec5..3b1d1d67509 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -156,8 +156,6 @@ label { .select-control { padding-left: 10px; padding-right: 10px; - -webkit-appearance: none; - -moz-appearance: none; appearance: none; &::-ms-expand { @@ -178,7 +176,8 @@ label { font-weight: $gl-font-weight-normal; } -.form-control::-webkit-input-placeholder { + +.form-control::placeholder { color: $gl-text-color-tertiary; } 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..f5ed6621c55 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; @@ -326,14 +317,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 +333,6 @@ } .breadcrumbs-links { - -webkit-flex: 1; flex: 1; min-width: 0; align-self: center; @@ -379,7 +367,6 @@ } .breadcrumbs-list { - display: -webkit-flex; display: flex; margin-bottom: 0; line-height: 16px; @@ -430,7 +417,6 @@ } .breadcrumbs-extra { - display: -webkit-flex; display: flex; flex: 0 0 auto; margin-left: auto; diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss index d9d4a210f5f..1a74e06a75d 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; } @@ -167,7 +167,7 @@ ul.content-list { } .no-comments { - opacity: .5; + opacity: 0.5; } } @@ -196,8 +196,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/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index 3b0869e31a9..fda7b6d5467 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -120,16 +120,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 +166,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; @@ -270,7 +265,6 @@ border: 1px solid $border-color; color: $gl-text-color; position: sticky; - position: -webkit-sticky; top: $header-height; padding: $grid-size; diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index bcd601e198a..ac673eafdc7 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; 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/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..55ce0d7004e 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/app/assets/stylesheets/framework/typography.scss @@ -2,7 +2,7 @@ color: $gl-text-color; word-wrap: break-word; - [dir="auto"] { + [dir='auto'] { text-align: initial; } @@ -224,8 +224,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,7 +233,7 @@ font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; - content: "\f0c6"; + content: '\f0c6'; } &:hover::before { @@ -423,6 +423,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 +448,6 @@ textarea { color: $gl-text-color-tertiary; } } +/* stylelint-enable */ .lh-100 { line-height: 1; } diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 25b272ab3a9..1639e73a66a 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -41,13 +41,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 +100,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; @@ -323,8 +323,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%); diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss index 9b52493fd4d..79d52932719 100644 --- a/app/assets/stylesheets/framework/variables_overrides.scss +++ b/app/assets/stylesheets/framework/variables_overrides.scss @@ -37,7 +37,7 @@ $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), diff --git a/app/assets/stylesheets/highlight/common.scss b/app/assets/stylesheets/highlight/common.scss index 2b0794759d5..ac3214a07d9 100644 --- a/app/assets/stylesheets/highlight/common.scss +++ b/app/assets/stylesheets/highlight/common.scss @@ -1,4 +1,4 @@ -@import "../framework/variables"; +@import '../framework/variables'; @mixin diff-background($background, $idiff, $border) { background: $background; diff --git a/app/assets/stylesheets/highlight/embedded.scss b/app/assets/stylesheets/highlight/embedded.scss index 44c8a1d39ec..74364ee4ddb 100644 --- a/app/assets/stylesheets/highlight/embedded.scss +++ b/app/assets/stylesheets/highlight/embedded.scss @@ -1,3 +1,3 @@ .code { - @import "white_base"; + @import 'white_base'; } diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss index 23ec3380ce9..ee0ec94c636 100644 --- a/app/assets/stylesheets/highlight/white_base.scss +++ b/app/assets/stylesheets/highlight/white_base.scss @@ -1,6 +1,6 @@ /* https://github.com/aahan/pygments-github-style */ -@import "./common"; +@import './common'; /* * White Syntax Colors @@ -37,16 +37,16 @@ $white-kt: #458; $white-m: #099; $white-s: #d14; $white-n: #333; -$white-na: teal; +$white-na: #008080; $white-nb: #0086b3; $white-nc: #458; -$white-no: teal; -$white-ni: purple; +$white-no: #008080; +$white-ni: #800080; $white-ne: #900; $white-nf: #900; $white-nn: #555; -$white-nt: navy; -$white-nv: teal; +$white-nt: #000080; +$white-nv: #008080; $white-w: #bbb; $white-mf: #099; $white-mh: #099; @@ -64,9 +64,9 @@ $white-sr: #009926; $white-s1: #d14; $white-ss: #990073; $white-bp: #999; -$white-vc: teal; -$white-vg: teal; -$white-vi: teal; +$white-vc: #008080; +$white-vg: #008080; +$white-vi: #008080; $white-il: #099; $white-gc-color: #999; $white-gc-bg: #eaf2f5; @@ -77,7 +77,7 @@ $white-gc-bg: #eaf2f5; background-color: $gray-light; } - // Line numbers +// Line numbers .line-numbers, .diff-line-num { background-color: $gray-light; @@ -103,7 +103,6 @@ pre.code, // Diff line .line_holder { - &.match .line_content, .new-nonewline.line_content, .old-nonewline.line_content { @@ -201,25 +200,38 @@ pre .hll { background-color: $white-pre-hll-bg !important; } - // Search result highlight +// Search result highlight span.highlight_word { background-color: $white-highlight !important; } - // Links to URLs, emails, or dependencies +// Links to URLs, emails, or dependencies .line a { color: $white-nb; } .hll { background-color: $white-hll-bg; } -.c { color: $white-c; font-style: italic; } -.err { color: $white-err; background-color: $white-err-bg; } + +.c { color: $white-c; + font-style: italic; } + +.err { color: $white-err; + background-color: $white-err-bg; } .k { font-weight: $gl-font-weight-bold; } .o { font-weight: $gl-font-weight-bold; } -.cm { color: $white-cm; font-style: italic; } -.cp { color: $white-cp; font-weight: $gl-font-weight-bold; } -.c1 { color: $white-c1; font-style: italic; } -.cs { color: $white-cs; font-weight: $gl-font-weight-bold; font-style: italic; } + +.cm { color: $white-cm; + font-style: italic; } + +.cp { color: $white-cp; + font-weight: $gl-font-weight-bold; } + +.c1 { color: $white-c1; + font-style: italic; } + +.cs { color: $white-cs; + font-weight: $gl-font-weight-bold; + font-style: italic; } .gd { color: $white-gd; @@ -248,24 +260,34 @@ span.highlight_word { .go { color: $white-go; } .gp { color: $white-gp; } .gs { font-weight: $gl-font-weight-bold; } -.gu { color: $white-gu; font-weight: $gl-font-weight-bold; } + +.gu { color: $white-gu; + font-weight: $gl-font-weight-bold; } .gt { color: $white-gt; } .kc { font-weight: $gl-font-weight-bold; } .kd { font-weight: $gl-font-weight-bold; } .kn { font-weight: $gl-font-weight-bold; } .kp { font-weight: $gl-font-weight-bold; } .kr { font-weight: $gl-font-weight-bold; } -.kt { color: $white-kt; font-weight: $gl-font-weight-bold; } + +.kt { color: $white-kt; + font-weight: $gl-font-weight-bold; } .m { color: $white-m; } .s { color: $white-s; } .n { color: $white-n; } .na { color: $white-na; } .nb { color: $white-nb; } -.nc { color: $white-nc; font-weight: $gl-font-weight-bold; } + +.nc { color: $white-nc; + font-weight: $gl-font-weight-bold; } .no { color: $white-no; } .ni { color: $white-ni; } -.ne { color: $white-ne; font-weight: $gl-font-weight-bold; } -.nf { color: $white-nf; font-weight: $gl-font-weight-bold; } + +.ne { color: $white-ne; + font-weight: $gl-font-weight-bold; } + +.nf { color: $white-nf; + font-weight: $gl-font-weight-bold; } .nn { color: $white-nn; } .nt { color: $white-nt; } .nv { color: $white-nv; } @@ -291,4 +313,6 @@ span.highlight_word { .vg { color: $white-vg; } .vi { color: $white-vi; } .il { color: $white-il; } -.gc { color: $white-gc-color; background-color: $white-gc-bg; } + +.gc { color: $white-gc-color; + background-color: $white-gc-bg; } diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss index 8b234a5a656..33c114838c2 100644 --- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss +++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss @@ -1,4 +1,4 @@ -@import "framework/variables"; +@import 'framework/variables'; // This file is largely copied from `highlight/white.scss`, but modified to // avoid all descendant selectors (`table td`). This is because the CSS inlining @@ -40,16 +40,16 @@ $highlighted-kt: #458; $highlighted-m: #099; $highlighted-s: #d14; $highlighted-n: #333; -$highlighted-na: teal; +$highlighted-na: #008080; $highlighted-nb: #0086b3; $highlighted-nc: #458; -$highlighted-no: teal; -$highlighted-ni: purple; +$highlighted-no: #008080; +$highlighted-ni: #800080; $highlighted-ne: #900; $highlighted-nf: #900; $highlighted-nn: #555; -$highlighted-nt: navy; -$highlighted-nv: teal; +$highlighted-nt: #000080; +$highlighted-nv: #008080; $highlighted-w: #bbb; $highlighted-mf: #099; $highlighted-mh: #099; @@ -67,9 +67,9 @@ $highlighted-sr: #009926; $highlighted-s1: #d14; $highlighted-ss: #990073; $highlighted-bp: #999; -$highlighted-vc: teal; -$highlighted-vg: teal; -$highlighted-vi: teal; +$highlighted-vc: #008080; +$highlighted-vg: #008080; +$highlighted-vi: #008080; $highlighted-il: #099; $highlighted-gc: #999; $highlighted-gc-bg: #eaf2f5; @@ -151,14 +151,27 @@ span.highlight_word { } .hll { background-color: $highlighted-hll-bg; } -.c { color: $highlighted-c; font-style: italic; } -.err { color: $highlighted-err; background-color: $highlighted-err-bg; } + +.c { color: $highlighted-c; + font-style: italic; } + +.err { color: $highlighted-err; + background-color: $highlighted-err-bg; } .k { font-weight: $gl-font-weight-bold; } .o { font-weight: $gl-font-weight-bold; } -.cm { color: $highlighted-cm; font-style: italic; } -.cp { color: $highlighted-cp; font-weight: $gl-font-weight-bold; } -.c1 { color: $highlighted-c1; font-style: italic; } -.cs { color: $highlighted-cs; font-weight: $gl-font-weight-bold; font-style: italic; } + +.cm { color: $highlighted-cm; + font-style: italic; } + +.cp { color: $highlighted-cp; + font-weight: $gl-font-weight-bold; } + +.c1 { color: $highlighted-c1; + font-style: italic; } + +.cs { color: $highlighted-cs; + font-weight: $gl-font-weight-bold; + font-style: italic; } .gd { color: $highlighted-gd; @@ -187,24 +200,34 @@ span.highlight_word { .go { color: $highlighted-go; } .gp { color: $highlighted-gp; } .gs { font-weight: $gl-font-weight-bold; } -.gu { color: $highlighted-gu; font-weight: $gl-font-weight-bold; } + +.gu { color: $highlighted-gu; + font-weight: $gl-font-weight-bold; } .gt { color: $highlighted-gt; } .kc { font-weight: $gl-font-weight-bold; } .kd { font-weight: $gl-font-weight-bold; } .kn { font-weight: $gl-font-weight-bold; } .kp { font-weight: $gl-font-weight-bold; } .kr { font-weight: $gl-font-weight-bold; } -.kt { color: $highlighted-kt; font-weight: $gl-font-weight-bold; } + +.kt { color: $highlighted-kt; + font-weight: $gl-font-weight-bold; } .m { color: $highlighted-m; } .s { color: $highlighted-s; } .n { color: $highlighted-n; } .na { color: $highlighted-na; } .nb { color: $highlighted-nb; } -.nc { color: $highlighted-nc; font-weight: $gl-font-weight-bold; } + +.nc { color: $highlighted-nc; + font-weight: $gl-font-weight-bold; } .no { color: $highlighted-no; } .ni { color: $highlighted-ni; } -.ne { color: $highlighted-ne; font-weight: $gl-font-weight-bold; } -.nf { color: $highlighted-nf; font-weight: $gl-font-weight-bold; } + +.ne { color: $highlighted-ne; + font-weight: $gl-font-weight-bold; } + +.nf { color: $highlighted-nf; + font-weight: $gl-font-weight-bold; } .nn { color: $highlighted-nn; } .nt { color: $highlighted-nt; } .nv { color: $highlighted-nv; } @@ -230,4 +253,6 @@ span.highlight_word { .vg { color: $highlighted-vg; } .vi { color: $highlighted-vi; } .il { color: $highlighted-il; } -.gc { color: $highlighted-gc; background-color: $highlighted-gc-bg; } + +.gc { color: $highlighted-gc; + background-color: $highlighted-gc-bg; } diff --git a/app/assets/stylesheets/page_bundles/xterm.scss b/app/assets/stylesheets/page_bundles/xterm.scss index 7f040ac9b96..de3f2a1177d 100644 --- a/app/assets/stylesheets/page_bundles/xterm.scss +++ b/app/assets/stylesheets/page_bundles/xterm.scss @@ -6,11 +6,11 @@ $black: #000; $red: #ea1010; - $green: #009900; - $yellow: #999900; + $green: #090; + $yellow: #990; $blue: #0073e6; $magenta: #d411d4; - $cyan: #009999; + $cyan: #099; $white: #ccc; $l-black: #373b41; $l-red: #ff6161; diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss index a9324ba2ed0..81216b2b98e 100644 --- a/app/assets/stylesheets/pages/boards.scss +++ b/app/assets/stylesheets/pages/boards.scss @@ -3,7 +3,6 @@ } .user-can-drag { - cursor: -webkit-grab; cursor: grab; } @@ -12,12 +11,8 @@ opacity: 1 !important; * { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; // !important to make sure no style can override this when dragging - cursor: -webkit-grabbing !important; cursor: grabbing !important; } } @@ -501,7 +496,6 @@ } .add-issues-modal { - display: -webkit-flex; display: flex; position: fixed; top: 0; @@ -513,9 +507,7 @@ } .add-issues-container { - display: -webkit-flex; display: flex; - -webkit-flex-direction: column; flex-direction: column; width: 90vw; height: 85vh; @@ -528,16 +520,12 @@ box-shadow: 0 2px 12px rgba($black, 0.5); .empty-state { - display: -webkit-flex; display: flex; - -webkit-flex: 1; flex: 1; margin-top: 0; &.add-issues-empty-state-filter { - -webkit-flex-direction: column; flex-direction: column; - -webkit-justify-content: center; justify-content: center; } @@ -566,11 +554,9 @@ } .add-issues-search { - display: -webkit-flex; display: flex; .issues-filters { - -webkit-flex: 1; flex: 1; } } @@ -588,9 +574,7 @@ } .add-issues-list { - display: -webkit-flex; display: flex; - -webkit-flex: 1; flex: 1; padding-top: 3px; margin-left: -$gl-vert-padding; @@ -609,7 +593,6 @@ } .add-issues-list-loading { - -webkit-align-self: center; align-self: center; width: 100%; padding-left: $gl-vert-padding; diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 11966931a6c..670e320dbc2 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -342,11 +342,11 @@ } &.invalid { - @include status-color($gray-dark, color("gray"), $gray-darkest); + @include status-color($gray-dark, color('gray'), $gray-darkest); border-color: $gray-darkest; &:not(span):hover { - color: color("gray"); + color: color('gray'); } } } diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss index ec2108b15be..2b932d164a5 100644 --- a/app/assets/stylesheets/pages/cycle_analytics.scss +++ b/app/assets/stylesheets/pages/cycle_analytics.scss @@ -330,7 +330,6 @@ // Custom Styles for stage items .item-build-component { - .item-title { .icon-build-status { float: left; diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index d001dff7986..0dbbe9e4c25 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -9,7 +9,6 @@ @media (min-width: map-get($grid-breakpoints, md)) { $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height; - position: -webkit-sticky; position: sticky; top: $mr-file-header-top; z-index: 102; @@ -239,22 +238,18 @@ img { border: 1px solid $white-light; - background-image: linear-gradient( - 45deg, - $border-color 25%, - transparent 25%, - transparent 75%, - $border-color 75%, - $border-color 100% - ), - linear-gradient( - 45deg, - $border-color 25%, - transparent 25%, - transparent 75%, - $border-color 75%, - $border-color 100% - ); + background-image: linear-gradient(45deg, + $border-color 25%, + transparent 25%, + transparent 75%, + $border-color 75%, + $border-color 100%), + linear-gradient(45deg, + $border-color 25%, + transparent 25%, + transparent 75%, + $border-color 75%, + $border-color 100%); background-size: 10px 10px; background-position: 0 0, 5px 5px; max-width: 100%; @@ -510,10 +505,10 @@ .diff-stats { align-items: center; - padding: 0 .25rem; + padding: 0 0.25rem; .diff-stats-group { - padding: 0 .25rem; + padding: 0 0.25rem; } svg.diff-stats-icon { @@ -522,7 +517,7 @@ &.is-compare-versions-header { .diff-stats-group { - padding: 0 .5rem; + padding: 0 0.5rem; } } } @@ -726,7 +721,6 @@ } @include media-breakpoint-up(sm) { - position: -webkit-sticky; position: sticky; top: $header-height; background-color: $white-light; @@ -834,34 +828,26 @@ width: 100%; height: 10px; background-color: $white-light; - background-image: linear-gradient( - 45deg, - transparent, - transparent 73%, - $diff-jagged-border-gradient-color 75%, - $white-light 80% - ), - linear-gradient( - 225deg, - transparent, - transparent 73%, - $diff-jagged-border-gradient-color 75%, - $white-light 80% - ), - linear-gradient( - 135deg, - transparent, - transparent 73%, - $diff-jagged-border-gradient-color 75%, - $white-light 80% - ), - linear-gradient( - -45deg, - transparent, - transparent 73%, - $diff-jagged-border-gradient-color 75%, - $white-light 80% - ); + background-image: linear-gradient(45deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white-light 80%), + linear-gradient(225deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white-light 80%), + linear-gradient(135deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white-light 80%), + linear-gradient(-45deg, + transparent, + transparent 73%, + $diff-jagged-border-gradient-color 75%, + $white-light 80%); background-position: 5px 5px, 0 5px, 0 5px, 5px 5px; background-size: 10px 10px; background-repeat: repeat; @@ -904,7 +890,7 @@ } } -.files:not([data-can-create-note="true"]) .frame { +.files:not([data-can-create-note='true']) .frame { cursor: auto; } @@ -913,15 +899,14 @@ .btn-transparent.image-diff-overlay-add-comment { position: relative; cursor: image-url('illustrations/image_comment_light_cursor.svg') - $image-comment-cursor-left-offset $image-comment-cursor-top-offset, + $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; // Retina cursor - cursor: -webkit-image-set( - image-url('illustrations/image_comment_light_cursor.svg') 1x, - image-url('illustrations/image_comment_light_cursor@2x.svg') 2x - ) - $image-comment-cursor-left-offset $image-comment-cursor-top-offset, + // scss-lint:disable DuplicateProperty + cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, + image-url('illustrations/image_comment_light_cursor@2x.svg') 2x) + $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto; .comment-indicator { @@ -1026,7 +1011,6 @@ } .diff-tree-list { - position: -webkit-sticky; position: sticky; $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px; top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px; diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss index 83b1680512d..3febf4cf826 100644 --- a/app/assets/stylesheets/pages/graph.scss +++ b/app/assets/stylesheets/pages/graph.scss @@ -71,12 +71,10 @@ .svg-graph-container-with-grab { cursor: grab; - cursor: -webkit-grab; } .svg-graph-container-grabbed { cursor: grabbing; - cursor: -webkit-grabbing; } @keyframes flickerAnimation { diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss index 2c23f31c240..161d4dbfb22 100644 --- a/app/assets/stylesheets/pages/help.scss +++ b/app/assets/stylesheets/pages/help.scss @@ -30,7 +30,7 @@ .key { @extend .badge.badge-pill; background-color: $label-inverse-bg; - font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; + font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace; padding: 3px 5px; } } diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index e0bdc1341b1..3796ef47c32 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -136,7 +136,7 @@ color: $blue-800; .avatar { - border-color: rgba($gray-normal, .2); + border-color: rgba($gray-normal, 0.2); } } @@ -223,7 +223,7 @@ } a.edit-link:not([href]):hover { - color: rgba($gray-normal, .2); + color: rgba($gray-normal, 0.2); } .lock-edit, // uses same style, different js behaviour @@ -711,14 +711,11 @@ .issuable-list { li { - .issue-box { - display: -webkit-flex; display: flex; } .issuable-info-container { - -webkit-flex: 1; flex: 1; display: flex; padding-right: $gl-padding; @@ -813,7 +810,6 @@ .sidebar-collapsed-icon { - > .stopwatch-svg { display: inline-block; } @@ -871,11 +867,11 @@ } .help-state-toggle-enter-active { - transition: all .8s ease; + transition: all 0.8s ease; } .help-state-toggle-leave-active { - transition: all .5s ease; + transition: all 0.5s ease; } .help-state-toggle-enter, diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss index 0037364978c..9f30495a7ef 100644 --- a/app/assets/stylesheets/pages/issues.scss +++ b/app/assets/stylesheets/pages/issues.scss @@ -58,8 +58,6 @@ form.edit-issue { } ul.related-merge-requests > li { - display: -ms-flexbox; - display: -webkit-flex; display: flex; align-items: center; diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 2372640277e..75d219320ef 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -95,13 +95,11 @@ .prioritized-labels & { box-shadow: 0 1px 2px $issue-boards-card-shadow; cursor: move; - cursor: -webkit-grab; - cursor: -moz-grab; + cursor: grab; border: 0; &:active { - cursor: -webkit-grabbing; - cursor: -moz-grabbing; + cursor: grabbing; } } } diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss index 67d7a8175ac..22a515cbdaa 100644 --- a/app/assets/stylesheets/pages/login.scss +++ b/app/assets/stylesheets/pages/login.scss @@ -120,7 +120,6 @@ } .new-session-tabs { - display: -webkit-flex; display: flex; box-shadow: 0 0 0 1px $border-color; border-top-right-radius: $border-radius-default; @@ -190,7 +189,7 @@ margin-top: 16px; } - input[type="submit"] { + input[type='submit'] { @extend .btn-block; margin-bottom: 0; } diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss index 99609a96976..eb32beb0972 100644 --- a/app/assets/stylesheets/pages/members.scss +++ b/app/assets/stylesheets/pages/members.scss @@ -27,7 +27,6 @@ .controls { @include media-breakpoint-up(sm) { - display: -webkit-flex; display: flex; } diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss index e0f7d075fc7..278a9014458 100644 --- a/app/assets/stylesheets/pages/merge_conflicts.scss +++ b/app/assets/stylesheets/pages/merge_conflicts.scss @@ -20,81 +20,81 @@ $colors: ( white-header-not-chosen : #f0f0f0, white-line-not-chosen : $gray-light, - dark-header-head-neutral : rgba(#3f3, .2), - dark-line-head-neutral : rgba(#3f3, .1), + dark-header-head-neutral : rgba(#3f3, 0.2), + dark-line-head-neutral : rgba(#3f3, 0.1), dark-button-head-neutral : #40874f, - dark-header-head-chosen : rgba(#3f3, .33), - dark-line-head-chosen : rgba(#3f3, .2), + dark-header-head-chosen : rgba(#3f3, 0.33), + dark-line-head-chosen : rgba(#3f3, 0.2), dark-button-head-chosen : #258537, - dark-header-origin-neutral : rgba(#2878c9, .4), - dark-line-origin-neutral : rgba(#2878c9, .3), + dark-header-origin-neutral : rgba(#2878c9, 0.4), + dark-line-origin-neutral : rgba(#2878c9, 0.3), dark-button-origin-neutral : #2a5c8c, - dark-header-origin-chosen : rgba(#2878c9, .6), - dark-line-origin-chosen : rgba(#2878c9, .4), + dark-header-origin-chosen : rgba(#2878c9, 0.6), + dark-line-origin-chosen : rgba(#2878c9, 0.4), dark-button-origin-chosen : #1d6cbf, - dark-header-not-chosen : rgba(#fff, .25), - dark-line-not-chosen : rgba(#fff, .1), + dark-header-not-chosen : rgba(#fff, 0.25), + dark-line-not-chosen : rgba(#fff, 0.1), - monokai-header-head-neutral : rgba(#a6e22e, .25), - monokai-line-head-neutral : rgba(#a6e22e, .1), + monokai-header-head-neutral : rgba(#a6e22e, 0.25), + monokai-line-head-neutral : rgba(#a6e22e, 0.1), monokai-button-head-neutral : #376b20, - monokai-header-head-chosen : rgba(#a6e22e, .4), - monokai-line-head-chosen : rgba(#a6e22e, .25), + monokai-header-head-chosen : rgba(#a6e22e, 0.4), + monokai-line-head-chosen : rgba(#a6e22e, 0.25), monokai-button-head-chosen : #39800d, - monokai-header-origin-neutral : rgba(#60d9f1, .35), - monokai-line-origin-neutral : rgba(#60d9f1, .15), + monokai-header-origin-neutral : rgba(#60d9f1, 0.35), + monokai-line-origin-neutral : rgba(#60d9f1, 0.15), monokai-button-origin-neutral : #38848c, - monokai-header-origin-chosen : rgba(#60d9f1, .5), - monokai-line-origin-chosen : rgba(#60d9f1, .35), + monokai-header-origin-chosen : rgba(#60d9f1, 0.5), + monokai-line-origin-chosen : rgba(#60d9f1, 0.35), monokai-button-origin-chosen : #3ea4b2, - monokai-header-not-chosen : rgba(#76715d, .24), - monokai-line-not-chosen : rgba(#76715d, .1), + monokai-header-not-chosen : rgba(#76715d, 0.24), + monokai-line-not-chosen : rgba(#76715d, 0.1), - solarized-light-header-head-neutral : rgba(#859900, .37), - solarized-light-line-head-neutral : rgba(#859900, .2), + solarized-light-header-head-neutral : rgba(#859900, 0.37), + solarized-light-line-head-neutral : rgba(#859900, 0.2), solarized-light-button-head-neutral : #afb262, - solarized-light-header-head-chosen : rgba(#859900, .5), - solarized-light-line-head-chosen : rgba(#859900, .37), + solarized-light-header-head-chosen : rgba(#859900, 0.5), + solarized-light-line-head-chosen : rgba(#859900, 0.37), solarized-light-button-head-chosen : #94993d, - solarized-light-header-origin-neutral : rgba(#2878c9, .37), - solarized-light-line-origin-neutral : rgba(#2878c9, .15), + solarized-light-header-origin-neutral : rgba(#2878c9, 0.37), + solarized-light-line-origin-neutral : rgba(#2878c9, 0.15), solarized-light-button-origin-neutral : #60a1bf, - solarized-light-header-origin-chosen : rgba(#2878c9, .6), - solarized-light-line-origin-chosen : rgba(#2878c9, .37), + solarized-light-header-origin-chosen : rgba(#2878c9, 0.6), + solarized-light-line-origin-chosen : rgba(#2878c9, 0.37), solarized-light-button-origin-chosen : #2482b2, - solarized-light-header-not-chosen : rgba(#839496, .37), - solarized-light-line-not-chosen : rgba(#839496, .2), + solarized-light-header-not-chosen : rgba(#839496, 0.37), + solarized-light-line-not-chosen : rgba(#839496, 0.2), - solarized-dark-header-head-neutral : rgba(#859900, .35), - solarized-dark-line-head-neutral : rgba(#859900, .15), + solarized-dark-header-head-neutral : rgba(#859900, 0.35), + solarized-dark-line-head-neutral : rgba(#859900, 0.15), solarized-dark-button-head-neutral : #376b20, - solarized-dark-header-head-chosen : rgba(#859900, .5), - solarized-dark-line-head-chosen : rgba(#859900, .35), + solarized-dark-header-head-chosen : rgba(#859900, 0.5), + solarized-dark-line-head-chosen : rgba(#859900, 0.35), solarized-dark-button-head-chosen : #39800d, - solarized-dark-header-origin-neutral : rgba(#2878c9, .35), - solarized-dark-line-origin-neutral : rgba(#2878c9, .15), + solarized-dark-header-origin-neutral : rgba(#2878c9, 0.35), + solarized-dark-line-origin-neutral : rgba(#2878c9, 0.15), solarized-dark-button-origin-neutral : #086799, - solarized-dark-header-origin-chosen : rgba(#2878c9, .6), - solarized-dark-line-origin-chosen : rgba(#2878c9, .35), + solarized-dark-header-origin-chosen : rgba(#2878c9, 0.6), + solarized-dark-line-origin-chosen : rgba(#2878c9, 0.35), solarized-dark-button-origin-chosen : #0082cc, - solarized_dark_header_not_chosen : rgba(#839496, .25), - solarized_dark_line_not_chosen : rgba(#839496, .15), + solarized_dark_header_not_chosen : rgba(#839496, 0.25), + solarized_dark_line_not_chosen : rgba(#839496, 0.15), none_header_head_neutral : $gray-normal, none_line_head_neutral : $gray-normal, @@ -210,26 +210,20 @@ $colors: ( } #conflicts { - .white { - @include color-scheme('white') - } + @include color-scheme('white'); } .dark { - @include color-scheme('dark') - } + @include color-scheme('dark'); } .monokai { - @include color-scheme('monokai') - } + @include color-scheme('monokai'); } .solarized-light { - @include color-scheme('solarized-light') - } + @include color-scheme('solarized-light'); } .solarized-dark { - @include color-scheme('solarized-dark') - } + @include color-scheme('solarized-dark'); } .diff-wrap-lines .line_content { white-space: normal; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index cfd3faab122..e73d1a1289d 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -491,11 +491,9 @@ .merge-request { padding: 10px 0 10px 15px; position: relative; - display: -webkit-flex; display: flex; .issuable-info-container { - -webkit-flex: 1; flex: 1; } @@ -786,7 +784,6 @@ } @include media-breakpoint-up(md) { - position: -webkit-sticky; position: sticky; top: $header-height + $mr-tabs-height; width: 100%; @@ -814,7 +811,6 @@ @include media-breakpoint-up(sm) { position: sticky; - position: -webkit-sticky; } &.affix { diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index 15f3a2ef4a8..3ca8e943a3a 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -67,18 +67,14 @@ $status-box-line-height: 26px; .card-header { line-height: $line-height-base; padding: 14px 16px; - display: -webkit-flex; display: flex; .title { - -webkit-flex: 1; - -webkit-flex-grow: 1; flex: 1; flex-grow: 2; } .counter { - -webkit-flex: 1; flex: 0; padding-left: 16px; } diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss index 51f755c67af..3343b55d24b 100644 --- a/app/assets/stylesheets/pages/note_form.scss +++ b/app/assets/stylesheets/pages/note_form.scss @@ -58,7 +58,7 @@ border: 1px solid $border-color; border-radius: $border-radius-base; transition: border-color ease-in-out 0.15s, - box-shadow ease-in-out 0.15s; + box-shadow ease-in-out 0.15s; &.is-focused { @extend .form-control:focus; @@ -72,7 +72,7 @@ &.is-dropzone-hover { border-color: $green-500; box-shadow: 0 0 2px $black-transparent, - 0 0 4px $green-500-focus; + 0 0 4px $green-500-focus; .comment-toolbar, .nav-links { @@ -84,9 +84,7 @@ .md-header .nav-links { display: flex; - display: -webkit-flex; flex-flow: row wrap; - -webkit-flex-flow: row wrap; width: 100%; .float-right { @@ -444,7 +442,7 @@ table { .uploading-error-message { @include media-breakpoint-down(xs) { &::after { - content: "\a"; + content: '\a'; white-space: pre; } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index e676d48c1f4..acc562f0769 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -994,7 +994,6 @@ button.mini-pipeline-graph-dropdown-toggle { * Top arrow in the dropdown in the mini pipeline graph */ .mini-pipeline-graph-dropdown-menu { - &::before, &::after { content: ''; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index a1e847009fc..ab26259c007 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -270,11 +270,9 @@ position: static; padding: 0 16px; margin-bottom: 20px; - display: -webkit-flex; display: flex; .btn { - -webkit-flex-grow: 1; flex-grow: 1; &:first-child { diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss index 277030ad3af..1349845f300 100644 --- a/app/assets/stylesheets/pages/projects.scss +++ b/app/assets/stylesheets/pages/projects.scss @@ -571,9 +571,7 @@ .import-buttons { padding-left: 0; - display: -webkit-flex; display: flex; - -webkit-flex-wrap: wrap; flex-wrap: wrap; .btn { diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss index 149c3254d84..20bdc6596e9 100644 --- a/app/assets/stylesheets/pages/search.scss +++ b/app/assets/stylesheets/pages/search.scss @@ -84,9 +84,7 @@ input[type='checkbox']:hover { .search-icon { transition: color $default-transition-duration; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; + user-select: none; } .clear-icon { @@ -185,13 +183,11 @@ input[type='checkbox']:hover { .search-holder { @include media-breakpoint-up(sm) { - display: -webkit-flex; display: flex; } .search-field-holder, .project-filter-form { - -webkit-flex: 1 0 auto; flex: 1 0 auto; position: relative; margin-right: 0; diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss index 7d59dd3b5d1..f4d568d02ac 100644 --- a/app/assets/stylesheets/pages/status.scss +++ b/app/assets/stylesheets/pages/status.scss @@ -33,7 +33,7 @@ border-color: $gl-text-color; &:not(span):hover { - background-color: rgba($gl-text-color, .07); + background-color: rgba($gl-text-color, 0.07); } } @@ -54,7 +54,7 @@ border-color: $gl-text-color-secondary; &:not(span):hover { - background-color: rgba($gl-text-color-secondary, .07); + background-color: rgba($gl-text-color-secondary, 0.07); } } } diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss index 3fc37e20c36..2a1e8345755 100644 --- a/app/assets/stylesheets/pages/todos.scss +++ b/app/assets/stylesheets/pages/todos.scss @@ -6,9 +6,7 @@ .todos-list > .todo { // workaround because we cannot use border-colapse border-top: 1px solid transparent; - display: -webkit-flex; display: flex; - -webkit-flex-direction: row; flex-direction: row; &:hover { @@ -29,23 +27,18 @@ .todo-avatar, .todo-actions { @include transition(opacity); - -webkit-flex: 0 0 auto; flex: 0 0 auto; } .todo-actions { - display: -webkit-flex; display: flex; - -webkit-justify-content: center; justify-content: center; - -webkit-flex-direction: column; flex-direction: column; margin-left: 10px; min-width: 55px; } .todo-item { - -webkit-flex: 0 1 100%; flex: 0 1 100%; min-width: 0; } @@ -60,13 +53,13 @@ .todo-avatar, .todo-item { - opacity: .6; + opacity: 0.6; } } .todo-avatar, .todo-item { - opacity: .2; + opacity: 0.2; } .btn { @@ -82,7 +75,6 @@ display: flex; > .title-item { - -webkit-flex: 0 0 auto; flex: 0 0 auto; margin: 0 2px; @@ -96,7 +88,6 @@ } .todo-label { - -webkit-flex: 0 1 auto; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; @@ -222,23 +213,19 @@ } .todos-empty { - display: -webkit-flex; display: flex; - -webkit-flex-direction: column; flex-direction: column; max-width: 900px; margin-left: auto; margin-right: auto; @include media-breakpoint-up(sm) { - -webkit-flex-direction: row; flex-direction: row; padding-top: 80px; } } .todos-empty-content { - -webkit-align-self: center; align-self: center; max-width: 480px; margin-right: 20px; @@ -252,7 +239,6 @@ @include media-breakpoint-up(sm) { width: 300px; margin-right: 0; - -webkit-order: 2; order: 2; } } diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss index a46b8679a42..5664f46484e 100644 --- a/app/assets/stylesheets/pages/tree.scss +++ b/app/assets/stylesheets/pages/tree.scss @@ -172,26 +172,6 @@ text-decoration: inherit; } } - - .tree_commit { - max-width: 320px; - - .str-truncated { - max-width: 100%; - } - } - - .tree_time_ago { - min-width: 135px; - } - } - - .tree_author { - padding-right: 8px; - - .commit-author-name { - color: $gl-text-color; - } } .tree-truncated-warning { diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss index 84c617c7ec0..7744fd814d0 100644 --- a/app/assets/stylesheets/pages/ui_dev_kit.scss +++ b/app/assets/stylesheets/pages/ui_dev_kit.scss @@ -10,7 +10,7 @@ margin-bottom: 15px; &::before { - content: "Example"; + content: 'Example'; color: $ui-dev-kit-example-color; } } diff --git a/app/views/shared/deploy_keys/_form.html.haml b/app/views/shared/deploy_keys/_form.html.haml index 913c065e188..eb7808573b9 100644 --- a/app/views/shared/deploy_keys/_form.html.haml +++ b/app/views/shared/deploy_keys/_form.html.haml @@ -15,7 +15,7 @@ %p.light Paste a machine public key here. Read more about how to generate it = link_to 'here', help_page_path('ssh/README') - = form.text_area :key, class: 'form-control thin_area', rows: 5 + = form.text_area :key, class: 'form-control thin-area', rows: 5 - else = form.label :fingerprint, class: 'col-form-label col-sm-2' .col-sm-10 |