Resolve stylelint errors

- by using stylelint autofix
- by disabling certain rules for the affected lines

app/assets/stylesheets/application.scss

@@ -11,30 +11,30 @@
 // like a table or typography then make changes in the framework/ directory.
 // If you need to add unique style that should affect only one page - use pages/
 // directory.
-@import "@gitlab/at.js/dist/css/jquery.atwho";
-@import "dropzone/dist/basic";
-@import "select2/select2";
+@import '@gitlab/at.js/dist/css/jquery.atwho';
+@import 'dropzone/dist/basic';
+@import 'select2/select2';
 
 // GitLab UI framework
-@import "framework";
+@import 'framework';
 
 // Font icons
-@import "font-awesome";
+@import 'font-awesome';
 
 // Page specific styles (issues, projects etc):
-@import "pages/**/*";
+@import 'pages/**/*';
 
 // Component specific styles, will be moved to gitlab-ui
-@import "components/**/*";
+@import 'components/**/*';
 
 // Vendors specific styles
-@import "vendors/**/*";
+@import 'vendors/**/*';
 
 // Styles for JS behaviors.
-@import "behaviors";
+@import 'behaviors';
 
 // EE-only stylesheets
-@import "application_ee";
+@import 'application_ee';
 
 // CSS util classes
 /**
@@ -42,12 +42,12 @@
   Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
   to see the available utility classes.
 **/
-@import "utilities";
+@import 'utilities';
 
 // Gitlab UI util classes
-@import "@gitlab/ui/src/scss/utilities";
+@import '@gitlab/ui/src/scss/utilities';
 
 /* print styles */
 @media print {
-  @import "print";
+  @import 'print';
 }

app/assets/stylesheets/application_dark.scss

-@import "./themes/dark";
+@import './themes/dark';
 
-@import "./application";
+@import './application';

app/assets/stylesheets/behaviors.scss

@@ -16,6 +16,7 @@
 .js-toggler-container {
   .turn-on { display: block; }
   .turn-off { display: none; }
+
   &.on {
     .turn-on { display: none; }
     .turn-off { display: block; }
@@ -23,6 +24,6 @@
 }
 
 // Hide element if Vue is still working on rendering it fully.
-[v-cloak="true"] {
+[v-cloak='true'] {
   display: none !important;
 }

app/assets/stylesheets/bootstrap_migration.scss

@@ -23,7 +23,7 @@ body,
   // Override default font size used in non-csslab UI
   // Use rem to keep default font-size at 14px on body so 1rem still
   // fits 8px grid, but also allow users to change browser font size
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
 legend {
@@ -32,11 +32,12 @@ legend {
 }
 
 button,
-html [type="button"],
-[type="reset"],
-[type="submit"],
-[role="button"] {
+html [type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
   // Override bootstrap reboot
+  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-appearance: inherit;
   cursor: pointer;
 }
@@ -77,7 +78,7 @@ h5,
   font-size: $gl-font-size;
 }
 
-input[type="file"] {
+input[type='file'] {
   // Bootstrap 4 file input height is taller by default
   // which makes them look ugly
   line-height: 1;

app/assets/stylesheets/disable_animations.scss

 * {
+  /* stylelint-disable property-no-vendor-prefix */
   -o-transition: none !important;
   -moz-transition: none !important;
   -ms-transition: none !important;
@@ -9,6 +10,7 @@
   -o-animation: none !important;
   -ms-animation: none !important;
   animation: none !important;
+  /* stylelint-enable property-no-vendor-prefix */
 }
 
 // Disable sticky changes bar for tests

app/assets/stylesheets/errors.scss

@@ -15,9 +15,9 @@ $header-color: #456;
 body {
   color: $body-color;
   text-align: center;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   margin: auto;
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 
 h1 {
@@ -105,7 +105,6 @@ a {
   }
 
   @include media-breakpoint-up(sm) {
-
     li {
       display: inline-block;
       padding-bottom: 0;

app/assets/stylesheets/framework.scss

@@ -68,6 +68,6 @@
 @import 'framework/read_more';
 @import 'framework/flex_grid';
 @import 'framework/system_messages';
-@import "framework/spinner";
+@import 'framework/spinner';
 @import 'framework/card';
 @import 'framework/editor-lite';

app/assets/stylesheets/highlight/themes/dark.scss

 /* https://github.com/MozMorris/tomorrow-pygments */
 
-@import "../common";
+@import '../common';
 
 /*
 * Dark syntax colors
@@ -223,11 +223,20 @@ $dark-il: #de935f;
   .cs { color: $dark-cs; } /* Comment.Special */
   .gd { color: $dark-gd; } /* Generic.Deleted */
   .ge { font-style: italic; } /* Generic.Emph */
-  .gh { color: $dark-gh; font-weight: $gl-font-weight-bold; } /* Generic.Heading */
+  .gh { /* Generic.Heading */
+    color: $dark-gh;
+    font-weight: $gl-font-weight-bold;
+  }
   .gi { color: $dark-gi; } /* Generic.Inserted */
-  .gp { color: $dark-gp; font-weight: $gl-font-weight-bold; } /* Generic.Prompt */
+  .gp { /* Generic.Prompt */
+    color: $dark-gp;
+    font-weight: $gl-font-weight-bold;
+  }
   .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */
-  .gu { color: $dark-gu; font-weight: $gl-font-weight-bold; } /* Generic.Subheading */
+  .gu { /* Generic.Subheading */
+    color: $dark-gu;
+    font-weight: $gl-font-weight-bold;
+  }
   .kc { color: $dark-kc; } /* Keyword.Constant */
   .kd { color: $dark-kd; } /* Keyword.Declaration */
   .kn { color: $dark-kn; } /* Keyword.Namespace */

app/assets/stylesheets/highlight/themes/monokai.scss

 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */
 
-@import "../common";
+@import '../common';
 
 /*
 * Monokai Colors
@@ -211,7 +211,10 @@ $monokai-gi: #a6e22e;
 
   .hll { background-color: $monokai-hll; }
   .c { color: $monokai-c; } /* Comment */
-  .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */
+  .err { /* Error */
+    color: $monokai-err-color;
+    background-color: $monokai-err-bg;
+  }
   .k { color: $monokai-k; } /* Keyword */
   .l { color: $monokai-l; } /* Literal */
   .n { color: $monokai-n; } /* Name */

app/assets/stylesheets/highlight/themes/none.scss

@@ -2,7 +2,7 @@
 * None Syntax Colors
 */
 
-@import "../common";
+@import '../common';
 
 @mixin match-line {
   color: $black-transparent;
@@ -44,7 +44,6 @@
   $none-expanded-bg: #e0e0e0;
 
   .line_holder {
-
     &.match .line_content,
     .new-nonewline.line_content,
     .old-nonewline.line_content {

app/assets/stylesheets/highlight/themes/solarized-dark.scss

 /* https://gist.github.com/qguv/7936275 */
 
-@import "../common";
+@import '../common';
 
 /*
 * Solarized dark colors
@@ -244,13 +244,19 @@ $solarized-dark-il: #2aa198;
   .c1 { color: $solarized-dark-c1; } /* Comment.Single */
   .cs { color: $solarized-dark-cs; } /* Comment.Special */
   .gd { color: $solarized-dark-gd; } /* Generic.Deleted */
-  .ge { color: $solarized-dark-ge; font-style: italic; } /* Generic.Emph */
+  .ge { /* Generic.Emph */
+    color: $solarized-dark-ge;
+    font-style: italic;
+  }
   .gr { color: $solarized-dark-gr; } /* Generic.Error */
   .gh { color: $solarized-dark-gh; } /* Generic.Heading */
   .gi { color: $solarized-dark-gi; } /* Generic.Inserted */
   .go { color: $solarized-dark-go; } /* Generic.Output */
   .gp { color: $solarized-dark-gp; } /* Generic.Prompt */
-  .gs { color: $solarized-dark-gs; font-weight: $gl-font-weight-bold; } /* Generic.Strong */
+  .gs { /* Generic.Strong */
+    color: $solarized-dark-gs;
+    font-weight: $gl-font-weight-bold;
+  }
   .gu { color: $solarized-dark-gu; } /* Generic.Subheading */
   .gt { color: $solarized-dark-gt; } /* Generic.Traceback */
   .kc { color: $solarized-dark-kc; } /* Keyword.Constant */

app/assets/stylesheets/highlight/themes/solarized-light.scss

 /* https://gist.github.com/qguv/7936275 */
 
-@import "../common";
+@import '../common';
 
 /*
 * Solarized light syntax colors
@@ -252,13 +252,19 @@ $solarized-light-il: #2aa198;
   .c1 { color: $solarized-light-c1; } /* Comment.Single */
   .cs { color: $solarized-light-cs; } /* Comment.Special */
   .gd { color: $solarized-light-gd; } /* Generic.Deleted */
-  .ge { color: $solarized-light-ge; font-style: italic; } /* Generic.Emph */
+  .ge { /* Generic.Emph */
+    color: $solarized-light-ge;
+    font-style: italic;
+  }
   .gr { color: $solarized-light-gr; } /* Generic.Error */
   .gh { color: $solarized-light-gh; } /* Generic.Heading */
   .gi { color: $solarized-light-gi; } /* Generic.Inserted */
   .go { color: $solarized-light-go; } /* Generic.Output */
   .gp { color: $solarized-light-gp; } /* Generic.Prompt */
-  .gs { color: $solarized-light-gs; font-weight: $gl-font-weight-bold; } /* Generic.Strong */
+  .gs { /* Generic.Strong */
+    color: $solarized-light-gs;
+    font-weight: $gl-font-weight-bold;
+  }
   .gu { color: $solarized-light-gu; } /* Generic.Subheading */
   .gt { color: $solarized-light-gt; } /* Generic.Traceback */
   .kc { color: $solarized-light-kc; } /* Keyword.Constant */

app/assets/stylesheets/highlight/themes/white.scss

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

app/assets/stylesheets/mailer.scss

@@ -6,12 +6,12 @@
 // stylelint-disable color-hex-length
 
 $mailer-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$mailer-text-color: #333333;
+$mailer-text-color: #333;
 $mailer-bg-color: #fafafa;
 $mailer-link-color: #3777b0;
-$mailer-link-muted-color: #333333;
+$mailer-link-muted-color: #333;
 $mailer-line-cell-bg-color: #6b4fbb;
-$mailer-wrapper-cell-bg-color: #ffffff;
+$mailer-wrapper-cell-bg-color: #fff;
 $mailer-wrapper-cell-border-color: #ededed;
 $mailer-header-footer-text-color: #5c5c5c;
 

app/assets/stylesheets/page_bundles/ide_themes/_solarized-dark.scss

@@ -47,4 +47,4 @@
 
   --ide-animation-gradient-1: var(--ide-file-row-btn-hover-background);
   --ide-animation-gradient-2: var(--ide-dropdown-hover-background);
-  }
+}

app/assets/stylesheets/snippets.scss

-@import "framework/variables";
+@import 'framework/variables';
 
 .gitlab-embed-snippets {
-  @import "highlight/embedded";
-  @import "framework/images";
+  @import 'highlight/embedded';
+  @import 'framework/images';
 
   $border-style: 1px solid $border-color;
 
@@ -15,6 +15,7 @@
 
   .gl-snippet-icon {
     display: inline-block;
+    /* stylelint-disable-next-line function-url-quotes */
     background: url(asset_path('ext_snippet_icons/ext_snippet_icons.png')) no-repeat;
     overflow: hidden;
     text-align: left;

app/assets/stylesheets/utilities.scss

@@ -43,6 +43,7 @@
 
 @for $i from 1 through 12 {
   #{'.tab-width-#{$i}'} {
+    /* stylelint-disable-next-line property-no-vendor-prefix */
     -moz-tab-size: $i;
     tab-size: $i;
   }

ee/app/assets/stylesheets/components/feature_flags/form.scss

 .feature-flags-form {
   input.rollout-percentage {
+    /* stylelint-disable property-no-vendor-prefix */
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
       -webkit-appearance: none;
@@ -7,5 +8,6 @@
     }
 
     -moz-appearance: textfield;
+    /* stylelint-enable property-no-vendor-prefix */
   }
 }