Run prettier against all of our stylesheets

app/assets/stylesheets/application.scss

@@ -16,34 +16,34 @@
  * directory.
  */
-@import "../../../node_modules/pikaday/scss/pikaday";
-@import "../../../node_modules/dropzone/dist/basic.css";
+@import '../../../node_modules/pikaday/scss/pikaday';
+@import '../../../node_modules/dropzone/dist/basic.css';
 /*
  * 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/**/*';
 /*
  * Code highlight
  */
-@import "highlight/dark";
-@import "highlight/monokai";
-@import "highlight/solarized_dark";
-@import "highlight/solarized_light";
-@import "highlight/white";
+@import 'highlight/dark';
+@import 'highlight/monokai';
+@import 'highlight/solarized_dark';
+@import 'highlight/solarized_light';
+@import 'highlight/white';
 /*
  * Styles for JS behaviors.
  */
-@import "behaviors";
+@import 'behaviors';

app/assets/stylesheets/behaviors.scss

@@ -3,26 +3,38 @@
 .js-details-container {
   .content {
     display: none;
-    &.hide { display: block; }
+    &.hide {
+      display: block;
+    }
   }
   &.open .content {
     display: block;
-    &.hide { display: none; }
+    &.hide {
+      display: none;
+    }
   }
 }
 // Toggle between two states.
 .js-toggler-container {
-  .turn-on { display: block; }
-  .turn-off { display: none; }
+  .turn-on {
+    display: block;
+  }
+  .turn-off {
+    display: none;
+  }
   &.on {
-    .turn-on { display: none; }
-    .turn-off { display: block; }
+    .turn-on {
+      display: none;
+    }
+    .turn-off {
+      display: block;
+    }
   }
 }
 // Hide element if Vue is still working on rendering it fully.
-[v-cloak="true"] {
+[v-cloak='true'] {
   display: none !important;
 }

app/assets/stylesheets/bootstrap.scss

@@ -2,36 +2,36 @@
  *  Includes specific styles from the bootstrap4 foler in node_modules
  */
-@import "../../../node_modules/bootstrap/scss/functions";
-@import "../../../node_modules/bootstrap/scss/variables";
-@import "../../../node_modules/bootstrap/scss/mixins";
-@import "../../../node_modules/bootstrap/scss/root";
-@import "../../../node_modules/bootstrap/scss/reboot";
-@import "../../../node_modules/bootstrap/scss/type";
-@import "../../../node_modules/bootstrap/scss/images";
-@import "../../../node_modules/bootstrap/scss/code";
-@import "../../../node_modules/bootstrap/scss/grid";
-@import "../../../node_modules/bootstrap/scss/tables";
-@import "../../../node_modules/bootstrap/scss/forms";
-@import "../../../node_modules/bootstrap/scss/buttons";
-@import "../../../node_modules/bootstrap/scss/transitions";
-@import "../../../node_modules/bootstrap/scss/dropdown";
-@import "../../../node_modules/bootstrap/scss/button-group";
-@import "../../../node_modules/bootstrap/scss/input-group";
-@import "../../../node_modules/bootstrap/scss/custom-forms";
-@import "../../../node_modules/bootstrap/scss/nav";
-@import "../../../node_modules/bootstrap/scss/navbar";
-@import "../../../node_modules/bootstrap/scss/card";
-@import "../../../node_modules/bootstrap/scss/breadcrumb";
-@import "../../../node_modules/bootstrap/scss/pagination";
-@import "../../../node_modules/bootstrap/scss/badge";
-@import "../../../node_modules/bootstrap/scss/alert";
-@import "../../../node_modules/bootstrap/scss/progress";
-@import "../../../node_modules/bootstrap/scss/media";
-@import "../../../node_modules/bootstrap/scss/list-group";
-@import "../../../node_modules/bootstrap/scss/close";
-@import "../../../node_modules/bootstrap/scss/modal";
-@import "../../../node_modules/bootstrap/scss/tooltip";
-@import "../../../node_modules/bootstrap/scss/popover";
-@import "../../../node_modules/bootstrap/scss/utilities";
-@import "../../../node_modules/bootstrap/scss/print";
+@import '../../../node_modules/bootstrap/scss/functions';
+@import '../../../node_modules/bootstrap/scss/variables';
+@import '../../../node_modules/bootstrap/scss/mixins';
+@import '../../../node_modules/bootstrap/scss/root';
+@import '../../../node_modules/bootstrap/scss/reboot';
+@import '../../../node_modules/bootstrap/scss/type';
+@import '../../../node_modules/bootstrap/scss/images';
+@import '../../../node_modules/bootstrap/scss/code';
+@import '../../../node_modules/bootstrap/scss/grid';
+@import '../../../node_modules/bootstrap/scss/tables';
+@import '../../../node_modules/bootstrap/scss/forms';
+@import '../../../node_modules/bootstrap/scss/buttons';
+@import '../../../node_modules/bootstrap/scss/transitions';
+@import '../../../node_modules/bootstrap/scss/dropdown';
+@import '../../../node_modules/bootstrap/scss/button-group';
+@import '../../../node_modules/bootstrap/scss/input-group';
+@import '../../../node_modules/bootstrap/scss/custom-forms';
+@import '../../../node_modules/bootstrap/scss/nav';
+@import '../../../node_modules/bootstrap/scss/navbar';
+@import '../../../node_modules/bootstrap/scss/card';
+@import '../../../node_modules/bootstrap/scss/breadcrumb';
+@import '../../../node_modules/bootstrap/scss/pagination';
+@import '../../../node_modules/bootstrap/scss/badge';
+@import '../../../node_modules/bootstrap/scss/alert';
+@import '../../../node_modules/bootstrap/scss/progress';
+@import '../../../node_modules/bootstrap/scss/media';
+@import '../../../node_modules/bootstrap/scss/list-group';
+@import '../../../node_modules/bootstrap/scss/close';
+@import '../../../node_modules/bootstrap/scss/modal';
+@import '../../../node_modules/bootstrap/scss/tooltip';
+@import '../../../node_modules/bootstrap/scss/popover';
+@import '../../../node_modules/bootstrap/scss/utilities';
+@import '../../../node_modules/bootstrap/scss/print';

app/assets/stylesheets/bootstrap_migration.scss

@@ -29,10 +29,10 @@ legend {
 }
 button,
-html [type="button"],
-[type="reset"],
-[type="submit"],
-[role="button"] {
+html [type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
   // Override bootstrap reboot
   -webkit-appearance: inherit;
   cursor: pointer;
@@ -73,7 +73,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;
@@ -140,7 +140,9 @@ table {
   @include media-breakpoint-up($breakpoint) {
     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-    .d#{$infix}-table-header-group { display: table-header-group !important; }
+    .d#{$infix}-table-header-group {
+      display: table-header-group !important;
+    }
   }
 }
@@ -320,7 +322,7 @@ pre code {
   }
 }
-input[type=color].form-control {
+input[type='color'].form-control {
   height: $input-height;
 }

app/assets/stylesheets/errors.scss

@@ -15,7 +15,7 @@ $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: 14px;
 }
@@ -105,7 +105,6 @@ a {
   }
   @include media-breakpoint-up(sm) {
-
     li {
       display: inline-block;
       padding-bottom: 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 {
@@ -55,7 +55,6 @@
 * General hover animations
 */
-
 // Sass multiple transitions mixin | https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
 // Usage:   @include transition(width, height 0.3s ease-in-out);
 // Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
@@ -92,7 +91,7 @@
   animation: none !important;
 }
-@function unfoldTransition ($transition) {
+@function unfoldTransition($transition) {
   // Default values
   $property: all;
   $duration: $general-hover-transition-duration;
@@ -202,7 +201,7 @@ a {
     }
   }
-  [class^="skeleton-line-"] {
+  [class^='skeleton-line-'] {
     position: relative;
     background-color: $theme-gray-100;
     height: 10px;
@@ -230,11 +229,7 @@ a {
   }
 }
-$skeleton-line-widths: (
-  156px,
-  235px,
-  200px,
-);
+$skeleton-line-widths: (156px, 235px, 200px);
 @for $count from 1 through length($skeleton-line-widths) {
   .skeleton-line-#{$count} {

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

@@ -9,24 +9,60 @@
   margin-right: 15px;
   border-radius: $avatar-radius;
   border: 1px solid $gray-normal;
-  &.s16 { @include avatar-size(16px, 6px); }
-  &.s18 { @include avatar-size(18px, 6px); }
-  &.s19 { @include avatar-size(19px, 6px); }
-  &.s20 { @include avatar-size(20px, 7px); }
-  &.s24 { @include avatar-size(24px, 8px); }
-  &.s26 { @include avatar-size(26px, 8px); }
-  &.s32 { @include avatar-size(32px, 10px); }
-  &.s36 { @include avatar-size(36px, 10px); }
-  &.s40 { @include avatar-size(40px, 10px); }
-  &.s46 { @include avatar-size(46px, 15px); }
-  &.s48 { @include avatar-size(48px, 10px); }
-  &.s60 { @include avatar-size(60px, 12px); }
-  &.s70 { @include avatar-size(70px, 14px); }
-  &.s90 { @include avatar-size(90px, 15px); }
-  &.s100 { @include avatar-size(100px, 15px); }
-  &.s110 { @include avatar-size(110px, 15px); }
-  &.s140 { @include avatar-size(140px, 15px); }
-  &.s160 { @include avatar-size(160px, 20px); }
+  &.s16 {
+    @include avatar-size(16px, 6px);
+  }
+  &.s18 {
+    @include avatar-size(18px, 6px);
+  }
+  &.s19 {
+    @include avatar-size(19px, 6px);
+  }
+  &.s20 {
+    @include avatar-size(20px, 7px);
+  }
+  &.s24 {
+    @include avatar-size(24px, 8px);
+  }
+  &.s26 {
+    @include avatar-size(26px, 8px);
+  }
+  &.s32 {
+    @include avatar-size(32px, 10px);
+  }
+  &.s36 {
+    @include avatar-size(36px, 10px);
+  }
+  &.s40 {
+    @include avatar-size(40px, 10px);
+  }
+  &.s46 {
+    @include avatar-size(46px, 15px);
+  }
+  &.s48 {
+    @include avatar-size(48px, 10px);
+  }
+  &.s60 {
+    @include avatar-size(60px, 12px);
+  }
+  &.s70 {
+    @include avatar-size(70px, 14px);
+  }
+  &.s90 {
+    @include avatar-size(90px, 15px);
+  }
+  &.s100 {
+    @include avatar-size(100px, 15px);
+  }
+  &.s110 {
+    @include avatar-size(110px, 15px);
+  }
+  &.s140 {
+    @include avatar-size(140px, 15px);
+  }
+  &.s160 {
+    @include avatar-size(160px, 20px);
+  }
 }
 .avatar {
@@ -46,8 +82,12 @@
     flex-shrink: 0;
     -webkit-flex-shrink: 0;
-    &.s16 { margin-right: 4px; }
-    &.s24 { margin-right: 4px; }
+    &.s16 {
+      margin-right: 4px;
+    }
+    &.s24 {
+      margin-right: 4px;
+    }
   }
   &.center {
@@ -73,28 +113,82 @@
   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; }
-  &.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;
+  }
+  &.s70 {
+    font-size: 34px;
+    line-height: 70px;
+  }
+  &.s90 {
+    font-size: 36px;
+    line-height: 88px;
+  }
+  &.s100 {
+    font-size: 36px;
+    line-height: 98px;
+  }
+  &.s110 {
+    font-size: 40px;
+    line-height: 108px;
+    font-weight: $gl-font-weight-normal;
+  }
+  &.s140 {
+    font-size: 72px;
+    line-height: 138px;
+  }
+  &.s160 {
+    font-size: 96px;
+    line-height: 158px;
+  }
   // Background colors
-  &.bg1 { background-color: $identicon-red; }
-  &.bg2 { background-color: $identicon-purple; }
-  &.bg3 { background-color: $identicon-indigo; }
-  &.bg4 { background-color: $identicon-blue; }
-  &.bg5 { background-color: $identicon-teal; }
-  &.bg6 { background-color: $identicon-orange; }
-  &.bg7 { background-color: $gray-darker; }
+  &.bg1 {
+    background-color: $identicon-red;
+  }
+  &.bg2 {
+    background-color: $identicon-purple;
+  }
+  &.bg3 {
+    background-color: $identicon-indigo;
+  }
+  &.bg4 {
+    background-color: $identicon-blue;
+  }
+  &.bg5 {
+    background-color: $identicon-teal;
+  }
+  &.bg6 {
+    background-color: $identicon-orange;
+  }
+  &.bg7 {
+    background-color: $gray-darker;
+  }
 }
 .avatar-container {
@@ -117,7 +211,10 @@
     align-self: center;
   }
-  &.s40 { min-width: 40px; min-height: 40px; }
+  &.s40 {
+    min-width: 40px;
+    min-height: 40px;
+  }
 }
 .avatar-counter {

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 {
@@ -58,7 +58,7 @@
 }
 .emoji-search {
-  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-image: url('data:image/png;base64,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');
   background-repeat: no-repeat;
   background-position: right 5px center;
   background-size: 16px;
@@ -86,7 +86,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

@@ -153,7 +153,7 @@
       display: inline-block;
       margin-left: 5px;
       font-size: 18px;
-      color: color("gray");
+      color: color('gray');
     }
     p {
@@ -228,7 +228,6 @@
   }
   .group-info {
-
     h1 {
       display: inline;
       font-weight: $gl-font-weight-normal;

app/assets/stylesheets/framework/buttons.scss

@@ -37,7 +37,16 @@
   @include btn-default;
 }
-@mixin btn-outline($background, $text, $border, $hover-background, $hover-text, $hover-border, $active-background, $active-border) {
+@mixin btn-outline(
+  $background,
+  $text,
+  $border,
+  $hover-background,
+  $hover-text,
+  $hover-border,
+  $active-background,
+  $active-border
+) {
   background-color: $background;
   color: $text;
   border-color: $border;
@@ -91,15 +100,39 @@
 }
 @mixin btn-green {
-  @include btn-color($green-500, $green-600, $green-600, $green-700, $green-700, $green-800, $white-light);
+  @include btn-color(
+    $green-500,
+    $green-600,
+    $green-600,
+    $green-700,
+    $green-700,
+    $green-800,
+    $white-light
+  );
 }
 @mixin btn-blue {
-  @include btn-color($blue-500, $blue-600, $blue-600, $blue-700, $blue-700, $blue-800, $white-light);
+  @include btn-color(
+    $blue-500,
+    $blue-600,
+    $blue-600,
+    $blue-700,
+    $blue-700,
+    $blue-800,
+    $white-light
+  );
 }
 @mixin btn-orange {
-  @include btn-color($orange-500, $orange-600, $orange-600, $orange-700, $orange-700, $orange-800, $white-light);
+  @include btn-color(
+    $orange-500,
+    $orange-600,
+    $orange-600,
+    $orange-700,
+    $orange-700,
+    $orange-800,
+    $white-light
+  );
 }
 @mixin btn-red {
@@ -107,7 +140,15 @@
 }
 @mixin btn-white {
-  @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-gray-dark, $gl-text-color);
+  @include btn-color(
+    $white-light,
+    $border-color,
+    $white-normal,
+    $border-white-normal,
+    $white-dark,
+    $border-gray-dark,
+    $gl-text-color
+  );
 }
 @mixin btn-with-margin {
@@ -153,20 +194,56 @@
   &.btn-inverted {
     &.btn-success {
-      @include btn-outline($white-light, $green-600, $green-500, $green-500, $white-light, $green-600, $green-600, $green-700);
+      @include btn-outline(
+        $white-light,
+        $green-600,
+        $green-500,
+        $green-500,
+        $white-light,
+        $green-600,
+        $green-600,
+        $green-700
+      );
     }
     &.btn-remove {
-      @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
+      @include btn-outline(
+        $white-light,
+        $red-500,
+        $red-500,
+        $red-500,
+        $white-light,
+        $red-600,
+        $red-600,
+        $red-700
+      );
     }
     &.btn-warning {
-      @include btn-outline($white-light, $orange-500, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
+      @include btn-outline(
+        $white-light,
+        $orange-500,
+        $orange-500,
+        $orange-500,
+        $white-light,
+        $orange-600,
+        $orange-600,
+        $orange-700
+      );
     }
     &.btn-primary,
     &.btn-info {
-      @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
+      @include btn-outline(
+        $white-light,
+        $blue-500,
+        $blue-500,
+        $blue-500,
+        $white-light,
+        $blue-600,
+        $blue-600,
+        $blue-700
+      );
     }
   }
@@ -181,11 +258,29 @@
   &.btn-close,
   &.btn-close-color {
-    @include btn-outline($white-light, $orange-600, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
+    @include btn-outline(
+      $white-light,
+      $orange-600,
+      $orange-500,
+      $orange-500,
+      $white-light,
+      $orange-600,
+      $orange-600,
+      $orange-700
+    );
   }
   &.btn-spam {
-    @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
+    @include btn-outline(
+      $white-light,
+      $red-500,
+      $red-500,
+      $red-500,
+      $white-light,
+      $red-600,
+      $red-600,
+      $red-700
+    );
   }
   &.btn-danger,
@@ -388,7 +483,16 @@
 .btn-inverted {
   &-secondary {
-    @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);
+    @include btn-outline(
+      $white-light,
+      $blue-500,
+      $blue-500,
+      $blue-500,
+      $white-light,
+      $blue-600,
+      $blue-600,
+      $blue-700
+    );
   }
 }

app/assets/stylesheets/framework/common.scss

 /** COLORS **/
-.cgray { color: $gl-text-color; }
-.clgray { color: $common-gray-light; }
-.cred { color: $red-500; }
-.cgreen { color: $green-600; }
-.cdark { color: $common-gray-dark; }
+.cgray {
+  color: $gl-text-color;
+}
+.clgray {
+  color: $common-gray-light;
+}
+.cred {
+  color: $red-500;
+}
+.cgreen {
+  color: $green-600;
+}
+.cdark {
+  color: $common-gray-dark;
+}
 .text-plain,
 .text-plain:hover {
@@ -43,8 +53,13 @@
   color: $brand-info;
 }
-.hint { font-style: italic; color: $gl-gray-400; }
-.light { color: $gl-text-color; }
+.hint {
+  font-style: italic;
+  color: $gl-gray-400;
+}
+.light {
+  color: $gl-text-color;
+}
 .slead {
   color: $gl-text-color;
@@ -104,7 +119,9 @@ hr {
   }
 }
-.item-title { font-weight: $gl-font-weight-bold; }
+.item-title {
+  font-weight: $gl-font-weight-bold;
+}
 .author-link {
   color: $blue-600;
@@ -146,7 +163,9 @@ p.time {
 // Fix issue with notes & lists creating a bunch of bottom borders.
 li.note {
-  img { max-width: 100%; }
+  img {
+    max-width: 100%;
+  }
   .note-title {
     li {
       border-bottom: 0 !important;
@@ -255,7 +274,6 @@ img.emoji {
   .dz-upload {
     background: $green-500 !important;
   }
-
 }
 .dz-message {
@@ -317,7 +335,7 @@ img.emoji {
 .disabled-content {
   pointer-events: none;
-  opacity: .5;
+  opacity: 0.5;
 }
 .break-word {
@@ -335,37 +353,105 @@ img.emoji {
 }
 /** COMMON CLASSES **/
-.prepend-top-0 { margin-top: 0; }
-.prepend-top-2 { margin-top: 2px; }
-.prepend-top-5 { margin-top: 5px; }
-.prepend-top-8 { margin-top: $grid-size; }
-.prepend-top-10 { margin-top: 10px; }
-.prepend-top-15 { margin-top: 15px; }
-.prepend-top-default { margin-top: $gl-padding !important; }
-.prepend-top-16 { margin-top: 16px; }
-.prepend-top-20 { margin-top: 20px; }
-.prepend-left-4 { margin-left: 4px; }
-.prepend-left-5 { margin-left: 5px; }
-.prepend-left-8 { margin-left: 8px; }
-.prepend-left-10 { margin-left: 10px; }
-.prepend-left-default { margin-left: $gl-padding; }
-.prepend-left-20 { margin-left: 20px; }
-.append-right-4 { margin-right: 4px; }
-.append-right-5 { margin-right: 5px; }
-.append-right-8 { margin-right: 8px; }
-.append-right-10 { margin-right: 10px; }
-.append-right-default { margin-right: $gl-padding; }
-.append-right-20 { margin-right: 20px; }
-.append-bottom-0 { margin-bottom: 0; }
-.append-bottom-5 { margin-bottom: 5px; }
-.append-bottom-8 { margin-bottom: $grid-size; }
-.append-bottom-10 { margin-bottom: 10px; }
-.append-bottom-15 { margin-bottom: 15px; }
-.append-bottom-20 { margin-bottom: 20px; }
-.append-bottom-default { margin-bottom: $gl-padding; }
-.inline { display: inline-block; }
-.center { text-align: center; }
-.vertical-align-middle { vertical-align: middle; }
-.flex-align-self-center { align-self: center; }
-.flex-grow { flex-grow: 1; }
-.flex-no-shrink { flex-shrink: 0; }
+.prepend-top-0 {
+  margin-top: 0;
+}
+.prepend-top-2 {
+  margin-top: 2px;
+}
+.prepend-top-5 {
+  margin-top: 5px;
+}
+.prepend-top-8 {
+  margin-top: $grid-size;
+}
+.prepend-top-10 {
+  margin-top: 10px;
+}
+.prepend-top-15 {
+  margin-top: 15px;
+}
+.prepend-top-default {
+  margin-top: $gl-padding !important;
+}
+.prepend-top-16 {
+  margin-top: 16px;
+}
+.prepend-top-20 {
+  margin-top: 20px;
+}
+.prepend-left-4 {
+  margin-left: 4px;
+}
+.prepend-left-5 {
+  margin-left: 5px;
+}
+.prepend-left-8 {
+  margin-left: 8px;
+}
+.prepend-left-10 {
+  margin-left: 10px;
+}
+.prepend-left-default {
+  margin-left: $gl-padding;
+}
+.prepend-left-20 {
+  margin-left: 20px;
+}
+.append-right-4 {
+  margin-right: 4px;
+}
+.append-right-5 {
+  margin-right: 5px;
+}
+.append-right-8 {
+  margin-right: 8px;
+}
+.append-right-10 {
+  margin-right: 10px;
+}
+.append-right-default {
+  margin-right: $gl-padding;
+}
+.append-right-20 {
+  margin-right: 20px;
+}
+.append-bottom-0 {
+  margin-bottom: 0;
+}
+.append-bottom-5 {
+  margin-bottom: 5px;
+}
+.append-bottom-8 {
+  margin-bottom: $grid-size;
+}
+.append-bottom-10 {
+  margin-bottom: 10px;
+}
+.append-bottom-15 {
+  margin-bottom: 15px;
+}
+.append-bottom-20 {
+  margin-bottom: 20px;
+}
+.append-bottom-default {
+  margin-bottom: $gl-padding;
+}
+.inline {
+  display: inline-block;
+}
+.center {
+  text-align: center;
+}
+.vertical-align-middle {
+  vertical-align: middle;
+}
+.flex-align-self-center {
+  align-self: center;
+}
+.flex-grow {
+  flex-grow: 1;
+}
+.flex-no-shrink {
+  flex-shrink: 0;
+}

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/forms.scss

@@ -209,7 +209,8 @@ label {
     border: 1px solid $green-600;
     &:focus {
-      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
+      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset,
+        0 0 4px 0 $green-600;
       border: 0 none;
     }
   }
@@ -218,7 +219,8 @@ label {
     border: 1px solid $red-500;
     &:focus {
-      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
+      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset,
+        0 0 4px 0 $gl-field-focus-shadow-error;
       border: 0 none;
     }
   }

app/assets/stylesheets/framework/gfm.scss

@@ -31,8 +31,14 @@
   width: $chip-size;
   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%);
+  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%);
   background-size: $bg-size $bg-size;
   background-position: 0 0, $bg-pos $bg-pos;

app/assets/stylesheets/framework/issue_box.scss

@@ -5,7 +5,6 @@
  */
 .status-box {
-
   /* Extra small devices (phones, less than 768px) */
   /* No media query since this is the default in Bootstrap */
   padding: 5px 11px;

app/assets/stylesheets/framework/lists.scss

@@ -15,7 +15,7 @@
     word-wrap: break-word;
     &::after {
-      content: " ";
+      content: ' ';
       display: table;
       clear: both;
     }
@@ -42,10 +42,11 @@
       &:hover {
         background: $orange-100;
       }
-
     }
-    &.smoke { background-color: $gray-light; }
+    &.smoke {
+      background-color: $gray-light;
+    }
     &:last-child {
       border-bottom: 0;
@@ -79,7 +80,6 @@
   }
 }
-
 /** light list with border-bottom between li **/
 ul.bordered-list,
 ul.unstyled-list {
@@ -167,7 +167,7 @@ ul.content-list {
       }
       .no-comments {
-        opacity: .5;
+        opacity: 0.5;
       }
     }
@@ -282,8 +282,12 @@ ul.indent-list {
 // Specific styles for tree list
 @keyframes spin-avatar {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
 .namespace-title {

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/panels.scss

@@ -7,7 +7,6 @@
   margin-bottom: $gl-vert-padding;
 }
-
 .card-header {
   padding: $gl-vert-padding $gl-padding;
   line-height: 36px;

app/assets/stylesheets/framework/popup.scss

 .popup {
-  @include triangle(
-    $gray-lighter,
-    $gray-darker,
-    $popup-triangle-size,
-    $popup-triangle-border-size
-  );
+  @include triangle($gray-lighter, $gray-darker, $popup-triangle-size, $popup-triangle-border-size);
   padding: $gl-padding;
   background-color: $gray-lighter;