Added Stylelint Setup

Added stylelint to static-analysis
Updated yarn dependencies
CSS Fixes and rule adoptions of stylelint
Added stylelint-scss
Deduplicated yarn.lock to clear dependencies

First round of advanced stylelint rules

Mainly Vendor prefix updates related to flex

Updates to more webkit specific vendor prefixes

Finished all vendor specific fixes

Moved now 4 rules to warning

Fixed the new scss lint problems

More stylelint adaptions after rebase

.stylelintrc

 {
-  "extends": "stylelint-config-recommended",
-  "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,
-  }
+   "plugins":[
+      "stylelint-scss"
+   ],
+   "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,
-        $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;
     }
   }

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,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAFu0lEQVRIia1WTahkVxH+quqce7vf6zdvJpHoIlkYJ2SiJiIokmQjgoGgIAaEIYuYXWICgojiwkmC4taFwhjcyIDusogEIwwiSSCKPwsdwzAg0SjJ9Izzk5n3+nXfe8+pqizOvd395scfsJqi6dPnnDr11Vc/NJ1OwUTosqJLCmYCHCAC2mSHs+ojZv6AO46Y+20AhIneJsafhPhXVZSXDk7qi+aOLhtQNuBmQtcarAKjTXpn2+l3u2yPunvZSABRucjcAV/eMZuM48/Go/g1d19kc4wq+e8MZjWkbI/P5t2P3RFFbv7SQdyBlBUx8N8OTuqjMcof+N94yMPrY2DMm/ytnb32J0QrY+6AqsHM4Q64O9SKDmerKDD3Oy/tNL9vk342CC8RuU6n0ymCMHb22scu7zQngtASOjUHE1BX4UUAv4b7Ow6qiXCXuz/UdvogAAweDY943/b4cAz0ZlYHXeMsnT07RVb7wMUr8ykI4H5HVkMd5Rcb4/jNURVOL5qErAaAUUdCCIJ5kx5q2nw8m39ImEAAsjpE6PStB0YfMcd1wqqG3Xn7A3PfZyyKnNjaqD4fmE/fCNKshirIyY1xvI+Av6g5QIAIIWX7cJPssboSiBBEeKmsZne0Sb8kzAUWNYyq8NvbDo0fZ6beqxuLmqOOMr/lwOh+YXpXtbjERGja9JyZ9+HxpXKb9Gj5oywRESbj+Cj1ENG1QViTGBl1FbC1We1tbVRfHWIoQkhqH9xbpE92XUbb6VJZ1R4crjRz1JWcDMJvLdoMcyAEhjuwHo8Bfndg3mbszhOY+adVlMtD3po51OwzIQiEaams7oeJhxRw1FFOVpFRRUYIhMBAFRnjOsC8IFHHUA4TQQhgAqpAiIFfGbxkIqj54ayGbL7UoOqHCniAEKHLNr26l+D9wQJzeUwMAnfHvEnLECzZRwRV++d60ptjW9VLZeolEJG6GwCCE0CFVNB+Ay0NEqoQYG4YYFu7B8IEVRt3uRzy/osIoLV9QZimWXGHUMFdmI6M64DUF2Je88R9VZqCSP+QlcF5k+4tCzSsXaqjINuK6UyE0+s/mk6/qFq8oAIL9pqMLhkGsNrOyoOIlszust3aJv0U9+kFdwjTGwWl1YdF+KWlQSZ0Se/psj8yGVdg5tJyfH96EBWmLtoEMwMzMFt031NzGWLLzKhC+KV7H5ZeeaMOPxemma2x68puc0LN3+/u6LJiePS6MKHvn4wu6cPzJj0hsioeMfDrEvjv5r6W9gBvjKJujuKzQ0URIZj75NylvT+mbHfXQa4rwAMaVRTMm/SFyzvNy0yF6+4AM+1ubcSnqkAIUjQKl1RKSbE5jt+vovx1MBqF0WW7/d1Z80ab9BtmuJ3Xk5cJKds9TZt/uLPXvtiTrQ+dIwqfAejUvM1os6FNikXKUHfQ+ekUsXT5u85enJ0CaBSkkGEo1syUQ+DfMdE/4GA1uzupf9zdbzhOmLsF4efHVXjaHHAzmDtGdQRd/Nc5wAEJjNki3XfhyvwVNz80xANrht3LsENY9cBBdN1L9GUyyvFRFZ42t75sBvCQRykbRlU4tT2pPxoCvzx09d4GmPs200M6wKdWSDGK8mppYSWdhAlt0qeaLv+IadXU9/Evq4FAZ8ej+LmtcTxaRX4NWI0Uag5Vg1p5MYg8BnlhXIdPHDow+vTWZvVMVttXDLqkTzZdPj6Qii6cP1cSvIdl3iQkNYyi9HH0I22y+93tY3DcQkTZgQtM+POoCr8x97eylkmtrgKuztrvXJ21x/aNKuqIkZ/fntRfCdcTfhUTAIhRzoDojJD0aSNLLwMzmpT7+JaLtyf1MwDo6qz9djFaUq3t9MlFmy/c1OCSceY9fMsVaL9mvH9ocXdkdWxv1scAePG0THAhMOaLdOw/Gvxfxb1w4eCapyIENUcV5M3/u8FitAxZ25P6GAHT3UX39Srw+QOb1ZffA98Dl2Wy1BYkAAAAAElFTkSuQmCC');
   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/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;

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,
-    $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;

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