Merge branch 'tz-stylelint-episode-2' into 'master'

More Stylelint rules

See merge request gitlab-org/gitlab-ce!25266

.stylelintrc

 {
-  "extends": "stylelint-config-recommended",
-  "plugins": [
+   "plugins":[
       "stylelint-scss"
    ],
-  "rules": {
-    "no-descending-specificity": null,
-    "font-family-no-missing-generic-family-keyword": null,
-    "at-rule-no-unknown": [ true, {
-      ignoreAtRules: ["include", "each", "mixin", "extend", "if", "function", "for", "else", "return"]
-    }],
-    "selector-type-no-unknown": [true, {
-      "ignoreTypes": ["gl-emoji"]
-    }],
-    "unit-no-unknown" : [true, {
-      "ignoreFunctions": ["-webkit-image-set"]
-    }],
-    "scss/at-extend-no-missing-placeholder": null,
-    "scss/at-function-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
-    "scss/at-import-no-partial-leading-underscore": true,
-    "scss/at-import-partial-extension-blacklist": ["scss"],
-    "scss/at-mixin-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
-    "scss/at-rule-no-unknown": true,
-    "scss/dollar-variable-colon-space-after": "always",
-    "scss/dollar-variable-colon-space-before": "never",
-    "scss/dollar-variable-pattern": "^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
-    "scss/percent-placeholder-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
-    "scss/selector-no-redundant-nesting-selector": true,
+   "rules":{
+      "at-rule-blacklist":[
+         "debug"
+      ],
+      "at-rule-no-unknown":null,
+      "at-rule-no-vendor-prefix":true,
+      "block-no-empty":true,
+      "block-opening-brace-space-before":"always",
+      "color-hex-case":"lower",
+      "color-hex-length":"short",
+      "color-named":"never",
+      "color-no-invalid-hex":true,
+      "declaration-bang-space-after":"never",
+      "declaration-bang-space-before":"always",
+      "declaration-block-semicolon-newline-after":"always",
+      "declaration-block-semicolon-space-before":"never",
+      "declaration-block-single-line-max-declarations":1,
+      "declaration-block-trailing-semicolon":"always",
+      "declaration-colon-space-after":"always-single-line",
+      "declaration-colon-space-before":"never",
+      "declaration-property-value-blacklist":{
+         "border":[
+            "none"
+         ],
+         "border-top":[
+            "none"
+         ],
+         "border-right":[
+            "none"
+         ],
+         "border-bottom":[
+            "none"
+         ],
+         "border-left":[
+            "none"
+         ]
+      },
+      "function-comma-space-after":"always-single-line",
+      "function-parentheses-space-inside":"never",
+      "function-url-quotes":"always",
+      "indentation":2,
+      "length-zero-no-unit":true,
+      "max-nesting-depth":[
+         3,
+         {
+            "ignoreAtRules":[
+               "each",
+               "media",
+               "supports",
+               "include"
+            ],
+            "severity":"warning"
+         }
+      ],
+      "media-feature-name-no-vendor-prefix":true,
+      "media-feature-parentheses-space-inside":"never",
+      "no-missing-end-of-source-newline":true,
+      "number-leading-zero":"always",
+      "number-no-trailing-zeros":true,
+      "property-no-unknown":true,
+      "property-no-vendor-prefix":true,
+      "rule-empty-line-before":[
+         "always-multi-line",
+         {
+            "except":[
+               "first-nested"
+            ],
+            "ignore":[
+               "after-comment"
+            ]
+         }
+      ],
+      "scss/at-extend-no-missing-placeholder":[true,{ "severity": "warning" }],
+      "scss/at-function-pattern":"^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+      "scss/at-import-no-partial-leading-underscore":true,
+      "scss/at-import-partial-extension-blacklist":[
+         "scss"
+      ],
+      "scss/at-mixin-pattern":"^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+      "scss/at-rule-no-unknown":true,
+      "scss/dollar-variable-colon-space-after":"always",
+      "scss/dollar-variable-colon-space-before":"never",
+      "scss/dollar-variable-pattern":"^[_]?[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+      "scss/percent-placeholder-pattern":"^[a-z]+([a-z0-9-]+[a-z0-9]+)?$",
+      "scss/selector-no-redundant-nesting-selector":true,
+      "selector-class-pattern":[
+         "^[a-z0-9\\-]+$",
+         {
+            "message":"Selector should be written in lowercase with hyphens (selector-class-pattern)",
+            "severity": "warning"
+         },
+      ],
+      "selector-list-comma-newline-after":"always",
+      "selector-max-compound-selectors":[5, { "severity": "warning" }],
+      "selector-max-id":1,
+      "selector-no-vendor-prefix":true,
+      "selector-pseudo-element-colon-notation":"double",
+      "selector-pseudo-element-no-unknown":true,
+      "shorthand-property-no-redundant-values":true,
+      "string-quotes":"single",
+      "value-no-vendor-prefix":true
    }
 }

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;
 }
 

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,
+      background-image: linear-gradient(to right,
       $gray-100 0%,
       $gray-50 20%,
       $gray-100 40%,
-        $gray-100 100%
-      );
+      $gray-100 100%);
       height: 10px;
     }
   }

app/assets/stylesheets/framework/asciidoctor.scss

 .admonitionblock td.icon {
   width: 1%;
 
-  [class^="fa icon-"] {
+  [class^='fa icon-'] {
     @extend .fa-2x;
   }
 

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 {

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;

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;

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;
   }
 }

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;

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;
 }

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 {

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;
 }
 

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;

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;

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%);
         }
       }

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,
+  transform: translateZ(0);
+  background: linear-gradient(to $gradient-direction,
   $gradient-color 45%,
-    rgba($gradient-color, 0.4)
-  );
+  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;
 

app/assets/stylesheets/framework/selects.scss

@@ -32,7 +32,7 @@
       }
 
       &::after {
-        content: "\f078";
+        content: '\f078';
         position: absolute;
         z-index: 1;
         text-align: center;

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;

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; }
   }
 }

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; }

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%);
 

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),

app/assets/stylesheets/highlight/common.scss

-@import "../framework/variables";
+@import '../framework/variables';
 
 @mixin diff-background($background, $idiff, $border) {
   background: $background;

app/assets/stylesheets/highlight/embedded.scss

 .code {
-  @import "white_base";
+  @import 'white_base';
 }

app/assets/stylesheets/highlight/white_base.scss

 /* 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; }

app/assets/stylesheets/mailers/highlighted_diff_email.scss

-@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; }

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;

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;

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');
     }
   }
 }

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;

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,
+        background-image: linear-gradient(45deg,
         $border-color 25%,
         transparent 25%,
         transparent 75%,
         $border-color 75%,
-            $border-color 100%
-          ),
-          linear-gradient(
-            45deg,
+        $border-color 100%),
+          linear-gradient(45deg,
         $border-color 25%,
         transparent 25%,
         transparent 75%,
         $border-color 75%,
-            $border-color 100%
-          );
+        $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,
+    background-image: linear-gradient(45deg,
     transparent,
     transparent 73%,
     $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      ),
-      linear-gradient(
-        225deg,
+    $white-light 80%),
+      linear-gradient(225deg,
     transparent,
     transparent 73%,
     $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      ),
-      linear-gradient(
-        135deg,
+    $white-light 80%),
+      linear-gradient(135deg,
     transparent,
     transparent 73%,
     $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      ),
-      linear-gradient(
-        -45deg,
+    $white-light 80%),
+      linear-gradient(-45deg,
     transparent,
     transparent 73%,
     $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      );
+    $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;
 }
 
@@ -917,10 +903,9 @@
     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
-      )
+  // 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;
 
@@ -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;

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 {

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;
   }
 }

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,

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;
 

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;
       }
     }
   }

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;
   }

app/assets/stylesheets/pages/members.scss

@@ -27,7 +27,6 @@
 
   .controls {
     @include media-breakpoint-up(sm) {
-      display: -webkit-flex;
       display: flex;
     }
 

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;

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 {

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;
     }

app/assets/stylesheets/pages/note_form.scss

@@ -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;
     }
   }

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: '';

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 {

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 {

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;

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);
     }
   }
 }

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;
   }
 }

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 {

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;
     }
   }

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