Run prettier against all of our stylesheetsprettify-stylesheets

author: Mike Greiling <mike@pixelcog.com> 2018-10-10 02:20:37 -0500
committer: Mike Greiling <mike@pixelcog.com> 2018-10-10 02:20:37 -0500
commit: 3d0a6b1b16f9c8efaeb61a585b845bdf7ac05330 (patch)
tree: 2ce6c19299fe504f22c6eb83221faa86ca1412cf /app/assets
parent: 550f55745a3be5f86bafaf25b3bcc90beba8e2ac (diff)
download: gitlab-ce-prettify-stylesheets.tar.gz
54 files changed, 1884 insertions, 794 deletions
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index ffe65ce780e..6e4c9f37c5b 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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';
diff --git a/app/assets/stylesheets/behaviors.scss b/app/assets/stylesheets/behaviors.scss
index e3ca7f6373a..5b89fb97d14 100644
--- a/app/assets/stylesheets/behaviors.scss
+++ b/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;
 }
diff --git a/app/assets/stylesheets/bootstrap.scss b/app/assets/stylesheets/bootstrap.scss
index a040c2f8c20..fb7dd8c12cb 100644
--- a/app/assets/stylesheets/bootstrap.scss
+++ b/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';
diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss
index af73954bd2e..c699b99cc55 100644
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/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;
 }
 
diff --git a/app/assets/stylesheets/errors.scss b/app/assets/stylesheets/errors.scss
index 658e0ff638e..f63544602bc 100644
--- a/app/assets/stylesheets/errors.scss
+++ b/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;
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss
index 549a8730301..09c804ddc28 100644
--- a/app/assets/stylesheets/framework/animations.scss
+++ b/app/assets/stylesheets/framework/animations.scss
@@ -27,7 +27,7 @@
   &.flipOutY,
   &.bounceIn,
   &.bounceOut {
-    @include webkit-prefix(animation-duration, .75s);
+    @include webkit-prefix(animation-duration, 0.75s);
   }
 
   &.short {
@@ -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} {
diff --git a/app/assets/stylesheets/framework/asciidoctor.scss b/app/assets/stylesheets/framework/asciidoctor.scss
index 62493c32833..1586265d40e 100644
--- a/app/assets/stylesheets/framework/asciidoctor.scss
+++ b/app/assets/stylesheets/framework/asciidoctor.scss
@@ -1,7 +1,7 @@
 .admonitionblock td.icon {
   width: 1%;
 
-  [class^="fa icon-"] {
+  [class^='fa icon-'] {
     @extend .fa-2x;
   }
 
diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index fcf282a7d7c..b7ee26889cb 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 702276780e9..c3421f96406 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -23,9 +23,9 @@
   box-shadow: 0 6px 12px $award-emoji-menu-shadow;
   pointer-events: none;
   opacity: 0;
-  transform: scale(.2);
+  transform: scale(0.2);
   transform-origin: 0 -45px;
-  transition: .3s cubic-bezier(.67, .06, .19, 1.44);
+  transition: 0.3s cubic-bezier(0.67, 0.06, 0.19, 1.44);
   transition-property: transform, opacity;
 
   &.is-rendered {
@@ -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,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;
@@ -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;
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 7145a76db6d..ad3e6d694db 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/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;
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index c4296c7a88a..c06acaee3e6 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/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
+    );
   }
 }
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 3c9505a21d6..b5294d68df2 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -1,9 +1,19 @@
 /** 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;
+}
diff --git a/app/assets/stylesheets/framework/emojis.scss b/app/assets/stylesheets/framework/emojis.scss
index be85e03430e..13c5541da92 100644
--- a/app/assets/stylesheets/framework/emojis.scss
+++ b/app/assets/stylesheets/framework/emojis.scss
@@ -2,7 +2,7 @@ gl-emoji {
   font-style: normal;
   display: inline-flex;
   vertical-align: middle;
-  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   font-size: 1.4em;
   line-height: 1em;
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index afd888af672..af3d2f5a7ac 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/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;
     }
   }
diff --git a/app/assets/stylesheets/framework/gfm.scss b/app/assets/stylesheets/framework/gfm.scss
index 50d4298d418..4461a428c50 100644
--- a/app/assets/stylesheets/framework/gfm.scss
+++ b/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;
 
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 2d672e62e08..7880e0d670d 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/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;
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index d9d4a210f5f..ad7c2e1e7de 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -15,7 +15,7 @@
     word-wrap: break-word;
 
     &::after {
-      content: " ";
+      content: ' ';
       display: table;
       clear: both;
     }
@@ -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 {
diff --git a/app/assets/stylesheets/framework/logo.scss b/app/assets/stylesheets/framework/logo.scss
index 429cfbe7235..c5feefb8c54 100644
--- a/app/assets/stylesheets/framework/logo.scss
+++ b/app/assets/stylesheets/framework/logo.scss
@@ -9,7 +9,6 @@
 }
 
 .tanuki-logo {
-
   .tanuki-left-ear,
   .tanuki-right-ear,
   .tanuki-nose {
@@ -34,7 +33,9 @@
 
     .tanuki-left-cheek {
       @include include-keyframes(animate-tanuki-left-cheek) {
-        0%, 10%, 100% {
+        0%,
+        10%,
+        100% {
           fill: lighten($tanuki-yellow, 25%);
         }
 
@@ -46,11 +47,13 @@
 
     .tanuki-left-eye {
       @include include-keyframes(animate-tanuki-left-eye) {
-        10%, 80% {
+        10%,
+        80% {
           fill: $tanuki-orange;
         }
 
-        20%, 90% {
+        20%,
+        90% {
           fill: lighten($tanuki-orange, 25%);
         }
       }
@@ -58,11 +61,13 @@
 
     .tanuki-left-ear {
       @include include-keyframes(animate-tanuki-left-ear) {
-        10%, 80% {
+        10%,
+        80% {
           fill: $tanuki-red;
         }
 
-        20%, 90% {
+        20%,
+        90% {
           fill: lighten($tanuki-red, 25%);
         }
       }
@@ -70,11 +75,13 @@
 
     .tanuki-nose {
       @include include-keyframes(animate-tanuki-nose) {
-        20%, 70% {
+        20%,
+        70% {
           fill: $tanuki-red;
         }
 
-        30%, 80% {
+        30%,
+        80% {
           fill: lighten($tanuki-red, 25%);
         }
       }
@@ -82,11 +89,13 @@
 
     .tanuki-right-eye {
       @include include-keyframes(animate-tanuki-right-eye) {
-        30%, 60% {
+        30%,
+        60% {
           fill: $tanuki-orange;
         }
 
-        40%, 70% {
+        40%,
+        70% {
           fill: lighten($tanuki-orange, 25%);
         }
       }
@@ -94,11 +103,13 @@
 
     .tanuki-right-ear {
       @include include-keyframes(animate-tanuki-right-ear) {
-        30%, 60% {
+        30%,
+        60% {
           fill: $tanuki-red;
         }
 
-        40%, 70% {
+        40%,
+        70% {
           fill: lighten($tanuki-red, 25%);
         }
       }
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index 5ca4d944d73..4b860535bfd 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/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;
diff --git a/app/assets/stylesheets/framework/popup.scss b/app/assets/stylesheets/framework/popup.scss
index 5c76205095f..86a6c0be42c 100644
--- a/app/assets/stylesheets/framework/popup.scss
+++ b/app/assets/stylesheets/framework/popup.scss
@@ -1,10 +1,5 @@
 .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;
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 8bab8cf36b1..e84cea4b2bb 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -125,10 +125,14 @@
       position: relative;
 
       /* Medium devices (desktops, 992px and up) */
-      @include media-breakpoint-up(md) { width: 200px; }
+      @include media-breakpoint-up(md) {
+        width: 200px;
+      }
 
       /* Large devices (large desktops, 1200px and up) */
-      @include media-breakpoint-up(lg) { width: 250px; }
+      @include media-breakpoint-up(lg) {
+        width: 250px;
+      }
     }
 
     @include media-breakpoint-down(xs) {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 381c0290d32..2ae729da566 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -27,7 +27,7 @@
       }
 
       &::after {
-        content: "\f078";
+        content: '\f078';
         position: absolute;
         z-index: 1;
         text-align: center;
diff --git a/app/assets/stylesheets/framework/stacked_progress_bar.scss b/app/assets/stylesheets/framework/stacked_progress_bar.scss
index 29a2d5881f7..647fb997ca2 100644
--- a/app/assets/stylesheets/framework/stacked_progress_bar.scss
+++ b/app/assets/stylesheets/framework/stacked_progress_bar.scss
@@ -8,7 +8,7 @@
   .status-unavailable,
   .status-green,
   .status-neutral,
-  .status-red, {
+  .status-red {
     height: 100%;
     min-width: 40px;
     padding: 0 5px;
diff --git a/app/assets/stylesheets/framework/toggle.scss b/app/assets/stylesheets/framework/toggle.scss
index 8258da07e4d..f635de63d5e 100644
--- a/app/assets/stylesheets/framework/toggle.scss
+++ b/app/assets/stylesheets/framework/toggle.scss
@@ -34,7 +34,7 @@
   background: $gl-gray-400;
   border-radius: 12px;
   padding: 3px;
-  transition: all .4s ease;
+  transition: all 0.4s ease;
 
   &::selection,
   &::before::selection,
@@ -52,7 +52,7 @@
     left: 0;
     border-radius: 9px;
     background: $feature-toggle-color;
-    transition: all .2s ease;
+    transition: all 0.2s ease;
 
     &,
     .toggle-icon-svg {
@@ -135,12 +135,22 @@
   }
 
   @keyframes animate-enabled {
-    0%, 35% { opacity: 0; }
-    100% { opacity: 1; }
+    0%,
+    35% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 
   @keyframes animate-disabled {
-    0%, 35% { opacity: 0; }
-    100% { opacity: 1; }
+    0%,
+    35% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 6d891e21556..a8b831d23a5 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -2,7 +2,7 @@
   color: $gl-text-color;
   word-wrap: break-word;
 
-  [dir="auto"] {
+  [dir='auto'] {
     text-align: initial;
   }
 
@@ -165,7 +165,6 @@
     overflow-x: auto;
     border-radius: 2px;
 
-
     &.plain-readme {
       background: none;
       border: 0;
@@ -226,8 +225,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;
 
@@ -235,7 +234,7 @@
       font-size: inherit;
       text-rendering: auto;
       -webkit-font-smoothing: antialiased;
-      content: "\f0c6";
+      content: '\f0c6';
     }
 
     &:hover::before {
@@ -276,7 +275,6 @@
   }
 }
 
-
 /**
  * Headers
  *
@@ -298,7 +296,6 @@ body {
   &.with-button {
     line-height: 34px;
   }
-
 }
 
 .page-title-empty {
@@ -416,7 +413,6 @@ h4 {
   background: $line-added-dark;
 }
 
-
 /**
  * form text input i.e. search bar, comments, forms, etc.
  */
@@ -445,4 +441,6 @@ textarea {
   }
 }
 
-.lh-100 { line-height: 1; }
+.lh-100 {
+  line-height: 1;
+}
diff --git a/app/assets/stylesheets/highlight/dark.scss b/app/assets/stylesheets/highlight/dark.scss
index 604f806dc58..a766a67a812 100644
--- a/app/assets/stylesheets/highlight/dark.scss
+++ b/app/assets/stylesheets/highlight/dark.scss
@@ -192,68 +192,199 @@ $dark-il: #de935f;
     color: $dark-na;
   }
 
-  .hll { background-color: $dark-hll-bg; }
-  .c { color: $dark-c; } /* Comment */
-  .err { color: $dark-err; } /* Error */
-  .k { color: $dark-k; } /* Keyword */
-  .l { color: $dark-l; } /* Literal */
-  .n { color: $dark-n; } /* Name */
-  .o { color: $dark-o; } /* Operator */
-  .p { color: $dark-p; } /* Punctuation */
-  .cm { color: $dark-cm; } /* Comment.Multiline */
-  .cp { color: $dark-cp; } /* Comment.Preproc */
-  .c1 { color: $dark-c1; } /* Comment.Single */
-  .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 */
-  .gi { color: $dark-gi; } /* Generic.Inserted */
-  .gp { color: $dark-gp; font-weight: $gl-font-weight-bold; } /* Generic.Prompt */
-  .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */
-  .gu { color: $dark-gu; font-weight: $gl-font-weight-bold; } /* Generic.Subheading */
-  .kc { color: $dark-kc; } /* Keyword.Constant */
-  .kd { color: $dark-kd; } /* Keyword.Declaration */
-  .kn { color: $dark-kn; } /* Keyword.Namespace */
-  .kp { color: $dark-kp; } /* Keyword.Pseudo */
-  .kr { color: $dark-kr; } /* Keyword.Reserved */
-  .kt { color: $dark-kt; } /* Keyword.Type */
-  .ld { color: $dark-ld; } /* Literal.Date */
-  .m { color: $dark-m; } /* Literal.Number */
-  .s { color: $dark-s; } /* Literal.String */
-  .na { color: $dark-na; } /* Name.Attribute */
-  .nb { color: $dark-nb; } /* Name.Builtin */
-  .nc { color: $dark-nc; } /* Name.Class */
-  .no { color: $dark-no; } /* Name.Constant */
-  .nd { color: $dark-nd; } /* Name.Decorator */
-  .ni { color: $dark-ni; } /* Name.Entity */
-  .ne { color: $dark-ne; } /* Name.Exception */
-  .nf { color: $dark-nf; } /* Name.Function */
-  .nl { color: $dark-nl; } /* Name.Label */
-  .nn { color: $dark-nn; } /* Name.Namespace */
-  .nx { color: $dark-nx; } /* Name.Other */
-  .py { color: $dark-py; } /* Name.Property */
-  .nt { color: $dark-nt; } /* Name.Tag */
-  .nv { color: $dark-nv; } /* Name.Variable */
-  .ow { color: $dark-ow; } /* Operator.Word */
-  .w { color: $dark-w; } /* Text.Whitespace */
-  .mf { color: $dark-mf; } /* Literal.Number.Float */
-  .mh { color: $dark-mh; } /* Literal.Number.Hex */
-  .mi { color: $dark-mi; } /* Literal.Number.Integer */
-  .mo { color: $dark-mo; } /* Literal.Number.Oct */
-  .sb { color: $dark-sb; } /* Literal.String.Backtick */
-  .sc { color: $dark-sc; } /* Literal.String.Char */
-  .sd { color: $dark-sd; } /* Literal.String.Doc */
-  .s2 { color: $dark-s2; } /* Literal.String.Double */
-  .se { color: $dark-se; } /* Literal.String.Escape */
-  .sh { color: $dark-sh; } /* Literal.String.Heredoc */
-  .si { color: $dark-si; } /* Literal.String.Interpol */
-  .sx { color: $dark-sx; } /* Literal.String.Other */
-  .sr { color: $dark-sr; } /* Literal.String.Regex */
-  .s1 { color: $dark-s1; } /* Literal.String.Single */
-  .ss { color: $dark-ss; } /* Literal.String.Symbol */
-  .bp { color: $dark-bp; } /* Name.Builtin.Pseudo */
-  .vc { color: $dark-vc; } /* Name.Variable.Class */
-  .vg { color: $dark-vg; } /* Name.Variable.Global */
-  .vi { color: $dark-vi; } /* Name.Variable.Instance */
-  .il { color: $dark-il; } /* Literal.Number.Integer.Long */
+  .hll {
+    background-color: $dark-hll-bg;
+  }
+  .c {
+    color: $dark-c;
+  } /* Comment */
+  .err {
+    color: $dark-err;
+  } /* Error */
+  .k {
+    color: $dark-k;
+  } /* Keyword */
+  .l {
+    color: $dark-l;
+  } /* Literal */
+  .n {
+    color: $dark-n;
+  } /* Name */
+  .o {
+    color: $dark-o;
+  } /* Operator */
+  .p {
+    color: $dark-p;
+  } /* Punctuation */
+  .cm {
+    color: $dark-cm;
+  } /* Comment.Multiline */
+  .cp {
+    color: $dark-cp;
+  } /* Comment.Preproc */
+  .c1 {
+    color: $dark-c1;
+  } /* Comment.Single */
+  .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 */
+  .gi {
+    color: $dark-gi;
+  } /* Generic.Inserted */
+  .gp {
+    color: $dark-gp;
+    font-weight: $gl-font-weight-bold;
+  } /* Generic.Prompt */
+  .gs {
+    font-weight: $gl-font-weight-bold;
+  } /* Generic.Strong */
+  .gu {
+    color: $dark-gu;
+    font-weight: $gl-font-weight-bold;
+  } /* Generic.Subheading */
+  .kc {
+    color: $dark-kc;
+  } /* Keyword.Constant */
+  .kd {
+    color: $dark-kd;
+  } /* Keyword.Declaration */
+  .kn {
+    color: $dark-kn;
+  } /* Keyword.Namespace */
+  .kp {
+    color: $dark-kp;
+  } /* Keyword.Pseudo */
+  .kr {
+    color: $dark-kr;
+  } /* Keyword.Reserved */
+  .kt {
+    color: $dark-kt;
+  } /* Keyword.Type */
+  .ld {
+    color: $dark-ld;
+  } /* Literal.Date */
+  .m {
+    color: $dark-m;
+  } /* Literal.Number */
+  .s {
+    color: $dark-s;
+  } /* Literal.String */
+  .na {
+    color: $dark-na;
+  } /* Name.Attribute */
+  .nb {
+    color: $dark-nb;
+  } /* Name.Builtin */
+  .nc {
+    color: $dark-nc;
+  } /* Name.Class */
+  .no {
+    color: $dark-no;
+  } /* Name.Constant */
+  .nd {
+    color: $dark-nd;
+  } /* Name.Decorator */
+  .ni {
+    color: $dark-ni;
+  } /* Name.Entity */
+  .ne {
+    color: $dark-ne;
+  } /* Name.Exception */
+  .nf {
+    color: $dark-nf;
+  } /* Name.Function */
+  .nl {
+    color: $dark-nl;
+  } /* Name.Label */
+  .nn {
+    color: $dark-nn;
+  } /* Name.Namespace */
+  .nx {
+    color: $dark-nx;
+  } /* Name.Other */
+  .py {
+    color: $dark-py;
+  } /* Name.Property */
+  .nt {
+    color: $dark-nt;
+  } /* Name.Tag */
+  .nv {
+    color: $dark-nv;
+  } /* Name.Variable */
+  .ow {
+    color: $dark-ow;
+  } /* Operator.Word */
+  .w {
+    color: $dark-w;
+  } /* Text.Whitespace */
+  .mf {
+    color: $dark-mf;
+  } /* Literal.Number.Float */
+  .mh {
+    color: $dark-mh;
+  } /* Literal.Number.Hex */
+  .mi {
+    color: $dark-mi;
+  } /* Literal.Number.Integer */
+  .mo {
+    color: $dark-mo;
+  } /* Literal.Number.Oct */
+  .sb {
+    color: $dark-sb;
+  } /* Literal.String.Backtick */
+  .sc {
+    color: $dark-sc;
+  } /* Literal.String.Char */
+  .sd {
+    color: $dark-sd;
+  } /* Literal.String.Doc */
+  .s2 {
+    color: $dark-s2;
+  } /* Literal.String.Double */
+  .se {
+    color: $dark-se;
+  } /* Literal.String.Escape */
+  .sh {
+    color: $dark-sh;
+  } /* Literal.String.Heredoc */
+  .si {
+    color: $dark-si;
+  } /* Literal.String.Interpol */
+  .sx {
+    color: $dark-sx;
+  } /* Literal.String.Other */
+  .sr {
+    color: $dark-sr;
+  } /* Literal.String.Regex */
+  .s1 {
+    color: $dark-s1;
+  } /* Literal.String.Single */
+  .ss {
+    color: $dark-ss;
+  } /* Literal.String.Symbol */
+  .bp {
+    color: $dark-bp;
+  } /* Name.Builtin.Pseudo */
+  .vc {
+    color: $dark-vc;
+  } /* Name.Variable.Class */
+  .vg {
+    color: $dark-vg;
+  } /* Name.Variable.Global */
+  .vi {
+    color: $dark-vi;
+  } /* Name.Variable.Instance */
+  .il {
+    color: $dark-il;
+  } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/embedded.scss b/app/assets/stylesheets/highlight/embedded.scss
index 44c8a1d39ec..74364ee4ddb 100644
--- a/app/assets/stylesheets/highlight/embedded.scss
+++ b/app/assets/stylesheets/highlight/embedded.scss
@@ -1,3 +1,3 @@
 .code {
-  @import "white_base";
+  @import 'white_base';
 }
diff --git a/app/assets/stylesheets/highlight/monokai.scss b/app/assets/stylesheets/highlight/monokai.scss
index 8e2720511da..181b16f42b1 100644
--- a/app/assets/stylesheets/highlight/monokai.scss
+++ b/app/assets/stylesheets/highlight/monokai.scss
@@ -192,66 +192,191 @@ $monokai-gi: #a6e22e;
     color: $monokai-k;
   }
 
-  .hll { background-color: $monokai-hll; }
-  .c { color: $monokai-c; } /* Comment */
-  .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */
-  .k { color: $monokai-k; } /* Keyword */
-  .l { color: $monokai-l; } /* Literal */
-  .n { color: $monokai-n; } /* Name */
-  .o { color: $monokai-o; } /* Operator */
-  .p { color: $monokai-p; } /* Punctuation */
-  .cm { color: $monokai-cm; } /* Comment.Multiline */
-  .cp { color: $monokai-cp; } /* Comment.Preproc */
-  .c1 { color: $monokai-c1; } /* Comment.Single */
-  .cs { color: $monokai-cs; } /* Comment.Special */
-  .ge { font-style: italic; } /* Generic.Emph */
-  .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */
-  .kc { color: $monokai-kc; } /* Keyword.Constant */
-  .kd { color: $monokai-kd; } /* Keyword.Declaration */
-  .kn { color: $monokai-kn; } /* Keyword.Namespace */
-  .kp { color: $monokai-kp; } /* Keyword.Pseudo */
-  .kr { color: $monokai-kr; } /* Keyword.Reserved */
-  .kt { color: $monokai-kt; } /* Keyword.Type */
-  .ld { color: $monokai-ld; } /* Literal.Date */
-  .m { color: $monokai-m; } /* Literal.Number */
-  .s { color: $monokai-s; } /* Literal.String */
-  .na { color: $monokai-na; } /* Name.Attribute */
-  .nb { color: $monokai-nb; } /* Name.Builtin */
-  .nc { color: $monokai-nc; } /* Name.Class */
-  .no { color: $monokai-no; } /* Name.Constant */
-  .nd { color: $monokai-nd; } /* Name.Decorator */
-  .ni { color: $monokai-ni; } /* Name.Entity */
-  .ne { color: $monokai-ne; } /* Name.Exception */
-  .nf { color: $monokai-nf; } /* Name.Function */
-  .nl { color: $monokai-nl; } /* Name.Label */
-  .nn { color: $monokai-nn; } /* Name.Namespace */
-  .nx { color: $monokai-nx; } /* Name.Other */
-  .py { color: $monokai-py; } /* Name.Property */
-  .nt { color: $monokai-nt; } /* Name.Tag */
-  .nv { color: $monokai-nv; } /* Name.Variable */
-  .ow { color: $monokai-ow; } /* Operator.Word */
-  .w { color: $monokai-w; } /* Text.Whitespace */
-  .mf { color: $monokai-mf; } /* Literal.Number.Float */
-  .mh { color: $monokai-mh; } /* Literal.Number.Hex */
-  .mi { color: $monokai-mi; } /* Literal.Number.Integer */
-  .mo { color: $monokai-mo; } /* Literal.Number.Oct */
-  .sb { color: $monokai-sb; } /* Literal.String.Backtick */
-  .sc { color: $monokai-sc; } /* Literal.String.Char */
-  .sd { color: $monokai-sd; } /* Literal.String.Doc */
-  .s2 { color: $monokai-s2; } /* Literal.String.Double */
-  .se { color: $monokai-se; } /* Literal.String.Escape */
-  .sh { color: $monokai-sh; } /* Literal.String.Heredoc */
-  .si { color: $monokai-si; } /* Literal.String.Interpol */
-  .sx { color: $monokai-sx; } /* Literal.String.Other */
-  .sr { color: $monokai-sr; } /* Literal.String.Regex */
-  .s1 { color: $monokai-s1; } /* Literal.String.Single */
-  .ss { color: $monokai-ss; } /* Literal.String.Symbol */
-  .bp { color: $monokai-bp; } /* Name.Builtin.Pseudo */
-  .vc { color: $monokai-vc; } /* Name.Variable.Class */
-  .vg { color: $monokai-vg; } /* Name.Variable.Global */
-  .vi { color: $monokai-vi; } /* Name.Variable.Instance */
-  .il { color: $monokai-il; } /* Literal.Number.Integer.Long */
-  .gu { color: $monokai-gu; } /* Generic.Subheading & Diff Unified/Comment? */
-  .gd { color: $monokai-gd; } /* Generic.Deleted & Diff Deleted */
-  .gi { color: $monokai-gi; } /* Generic.Inserted & Diff Inserted */
+  .hll {
+    background-color: $monokai-hll;
+  }
+  .c {
+    color: $monokai-c;
+  } /* Comment */
+  .err {
+    color: $monokai-err-color;
+    background-color: $monokai-err-bg;
+  } /* Error */
+  .k {
+    color: $monokai-k;
+  } /* Keyword */
+  .l {
+    color: $monokai-l;
+  } /* Literal */
+  .n {
+    color: $monokai-n;
+  } /* Name */
+  .o {
+    color: $monokai-o;
+  } /* Operator */
+  .p {
+    color: $monokai-p;
+  } /* Punctuation */
+  .cm {
+    color: $monokai-cm;
+  } /* Comment.Multiline */
+  .cp {
+    color: $monokai-cp;
+  } /* Comment.Preproc */
+  .c1 {
+    color: $monokai-c1;
+  } /* Comment.Single */
+  .cs {
+    color: $monokai-cs;
+  } /* Comment.Special */
+  .ge {
+    font-style: italic;
+  } /* Generic.Emph */
+  .gs {
+    font-weight: $gl-font-weight-bold;
+  } /* Generic.Strong */
+  .kc {
+    color: $monokai-kc;
+  } /* Keyword.Constant */
+  .kd {
+    color: $monokai-kd;
+  } /* Keyword.Declaration */
+  .kn {
+    color: $monokai-kn;
+  } /* Keyword.Namespace */
+  .kp {
+    color: $monokai-kp;
+  } /* Keyword.Pseudo */
+  .kr {
+    color: $monokai-kr;
+  } /* Keyword.Reserved */
+  .kt {
+    color: $monokai-kt;
+  } /* Keyword.Type */
+  .ld {
+    color: $monokai-ld;
+  } /* Literal.Date */
+  .m {
+    color: $monokai-m;
+  } /* Literal.Number */
+  .s {
+    color: $monokai-s;
+  } /* Literal.String */
+  .na {
+    color: $monokai-na;
+  } /* Name.Attribute */
+  .nb {
+    color: $monokai-nb;
+  } /* Name.Builtin */
+  .nc {
+    color: $monokai-nc;
+  } /* Name.Class */
+  .no {
+    color: $monokai-no;
+  } /* Name.Constant */
+  .nd {
+    color: $monokai-nd;
+  } /* Name.Decorator */
+  .ni {
+    color: $monokai-ni;
+  } /* Name.Entity */
+  .ne {
+    color: $monokai-ne;
+  } /* Name.Exception */
+  .nf {
+    color: $monokai-nf;
+  } /* Name.Function */
+  .nl {
+    color: $monokai-nl;
+  } /* Name.Label */
+  .nn {
+    color: $monokai-nn;
+  } /* Name.Namespace */
+  .nx {
+    color: $monokai-nx;
+  } /* Name.Other */
+  .py {
+    color: $monokai-py;
+  } /* Name.Property */
+  .nt {
+    color: $monokai-nt;
+  } /* Name.Tag */
+  .nv {
+    color: $monokai-nv;
+  } /* Name.Variable */
+  .ow {
+    color: $monokai-ow;
+  } /* Operator.Word */
+  .w {
+    color: $monokai-w;
+  } /* Text.Whitespace */
+  .mf {
+    color: $monokai-mf;
+  } /* Literal.Number.Float */
+  .mh {
+    color: $monokai-mh;
+  } /* Literal.Number.Hex */
+  .mi {
+    color: $monokai-mi;
+  } /* Literal.Number.Integer */
+  .mo {
+    color: $monokai-mo;
+  } /* Literal.Number.Oct */
+  .sb {
+    color: $monokai-sb;
+  } /* Literal.String.Backtick */
+  .sc {
+    color: $monokai-sc;
+  } /* Literal.String.Char */
+  .sd {
+    color: $monokai-sd;
+  } /* Literal.String.Doc */
+  .s2 {
+    color: $monokai-s2;
+  } /* Literal.String.Double */
+  .se {
+    color: $monokai-se;
+  } /* Literal.String.Escape */
+  .sh {
+    color: $monokai-sh;
+  } /* Literal.String.Heredoc */
+  .si {
+    color: $monokai-si;
+  } /* Literal.String.Interpol */
+  .sx {
+    color: $monokai-sx;
+  } /* Literal.String.Other */
+  .sr {
+    color: $monokai-sr;
+  } /* Literal.String.Regex */
+  .s1 {
+    color: $monokai-s1;
+  } /* Literal.String.Single */
+  .ss {
+    color: $monokai-ss;
+  } /* Literal.String.Symbol */
+  .bp {
+    color: $monokai-bp;
+  } /* Name.Builtin.Pseudo */
+  .vc {
+    color: $monokai-vc;
+  } /* Name.Variable.Class */
+  .vg {
+    color: $monokai-vg;
+  } /* Name.Variable.Global */
+  .vi {
+    color: $monokai-vi;
+  } /* Name.Variable.Instance */
+  .il {
+    color: $monokai-il;
+  } /* Literal.Number.Integer.Long */
+  .gu {
+    color: $monokai-gu;
+  } /* Generic.Subheading & Diff Unified/Comment? */
+  .gd {
+    color: $monokai-gd;
+  } /* Generic.Deleted & Diff Deleted */
+  .gi {
+    color: $monokai-gi;
+  } /* Generic.Inserted & Diff Inserted */
 }
diff --git a/app/assets/stylesheets/highlight/solarized_dark.scss b/app/assets/stylesheets/highlight/solarized_dark.scss
index cd1f0f6650f..f5ba38307b4 100644
--- a/app/assets/stylesheets/highlight/solarized_dark.scss
+++ b/app/assets/stylesheets/highlight/solarized_dark.scss
@@ -129,7 +129,11 @@ $solarized-dark-il: #2aa198;
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background($solarized-dark-new-bg, $solarized-dark-new-idiff, $solarized-dark-border);
+      @include diff_background(
+        $solarized-dark-new-bg,
+        $solarized-dark-new-idiff,
+        $solarized-dark-border
+      );
 
       &::before,
       a {
@@ -139,7 +143,11 @@ $solarized-dark-il: #2aa198;
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background($solarized-dark-old-bg, $solarized-dark-old-idiff, $solarized-dark-border);
+      @include diff_background(
+        $solarized-dark-old-bg,
+        $solarized-dark-old-idiff,
+        $solarized-dark-border
+      );
 
       &::before,
       a {
@@ -213,72 +221,210 @@ $solarized-dark-il: #2aa198;
   green     #859900  operators, other keywords
   */
 
-  .c { color: $solarized-dark-c; } /* Comment */
-  .err { color: $solarized-dark-err; } /* Error */
-  .g { color: $solarized-dark-g; } /* Generic */
-  .k { color: $solarized-dark-k; } /* Keyword */
-  .l { color: $solarized-dark-l; } /* Literal */
-  .n { color: $solarized-dark-n; } /* Name */
-  .o { color: $solarized-dark-o; } /* Operator */
-  .x { color: $solarized-dark-x; } /* Other */
-  .p { color: $solarized-dark-p; } /* Punctuation */
-  .cm { color: $solarized-dark-cm; } /* Comment.Multiline */
-  .cp { color: $solarized-dark-cp; } /* Comment.Preproc */
-  .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 */
-  .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 */
-  .gu { color: $solarized-dark-gu; } /* Generic.Subheading */
-  .gt { color: $solarized-dark-gt; } /* Generic.Traceback */
-  .kc { color: $solarized-dark-kc; } /* Keyword.Constant */
-  .kd { color: $solarized-dark-kd; } /* Keyword.Declaration */
-  .kn { color: $solarized-dark-kn; } /* Keyword.Namespace */
-  .kp { color: $solarized-dark-kp; } /* Keyword.Pseudo */
-  .kr { color: $solarized-dark-kr; } /* Keyword.Reserved */
-  .kt { color: $solarized-dark-kt; } /* Keyword.Type */
-  .ld { color: $solarized-dark-ld; } /* Literal.Date */
-  .m { color: $solarized-dark-m; } /* Literal.Number */
-  .s { color: $solarized-dark-s; } /* Literal.String */
-  .na { color: $solarized-dark-na; } /* Name.Attribute */
-  .nb { color: $solarized-dark-nb; } /* Name.Builtin */
-  .nc { color: $solarized-dark-nc; } /* Name.Class */
-  .no { color: $solarized-dark-no; } /* Name.Constant */
-  .nd { color: $solarized-dark-nd; } /* Name.Decorator */
-  .ni { color: $solarized-dark-ni; } /* Name.Entity */
-  .ne { color: $solarized-dark-ne; } /* Name.Exception */
-  .nf { color: $solarized-dark-nf; } /* Name.Function */
-  .nl { color: $solarized-dark-nl; } /* Name.Label */
-  .nn { color: $solarized-dark-nn; } /* Name.Namespace */
-  .nx { color: $solarized-dark-nx; } /* Name.Other */
-  .py { color: $solarized-dark-py; } /* Name.Property */
-  .nt { color: $solarized-dark-nt; } /* Name.Tag */
-  .nv { color: $solarized-dark-nv; } /* Name.Variable */
-  .ow { color: $solarized-dark-ow; } /* Operator.Word */
-  .w { color: $solarized-dark-w; } /* Text.Whitespace */
-  .mf { color: $solarized-dark-mf; } /* Literal.Number.Float */
-  .mh { color: $solarized-dark-mh; } /* Literal.Number.Hex */
-  .mi { color: $solarized-dark-mi; } /* Literal.Number.Integer */
-  .mo { color: $solarized-dark-mo; } /* Literal.Number.Oct */
-  .sb { color: $solarized-dark-sb; } /* Literal.String.Backtick */
-  .sc { color: $solarized-dark-sc; } /* Literal.String.Char */
-  .sd { color: $solarized-dark-sd; } /* Literal.String.Doc */
-  .s2 { color: $solarized-dark-s2; } /* Literal.String.Double */
-  .se { color: $solarized-dark-se; } /* Literal.String.Escape */
-  .sh { color: $solarized-dark-sh; } /* Literal.String.Heredoc */
-  .si { color: $solarized-dark-si; } /* Literal.String.Interpol */
-  .sx { color: $solarized-dark-sx; } /* Literal.String.Other */
-  .sr { color: $solarized-dark-sr; } /* Literal.String.Regex */
-  .s1 { color: $solarized-dark-s1; } /* Literal.String.Single */
-  .ss { color: $solarized-dark-ss; } /* Literal.String.Symbol */
-  .bp { color: $solarized-dark-bp; } /* Name.Builtin.Pseudo */
-  .vc { color: $solarized-dark-vc; } /* Name.Variable.Class */
-  .vg { color: $solarized-dark-vg; } /* Name.Variable.Global */
-  .vi { color: $solarized-dark-vi; } /* Name.Variable.Instance */
-  .il { color: $solarized-dark-il; } /* Literal.Number.Integer.Long */
+  .c {
+    color: $solarized-dark-c;
+  } /* Comment */
+  .err {
+    color: $solarized-dark-err;
+  } /* Error */
+  .g {
+    color: $solarized-dark-g;
+  } /* Generic */
+  .k {
+    color: $solarized-dark-k;
+  } /* Keyword */
+  .l {
+    color: $solarized-dark-l;
+  } /* Literal */
+  .n {
+    color: $solarized-dark-n;
+  } /* Name */
+  .o {
+    color: $solarized-dark-o;
+  } /* Operator */
+  .x {
+    color: $solarized-dark-x;
+  } /* Other */
+  .p {
+    color: $solarized-dark-p;
+  } /* Punctuation */
+  .cm {
+    color: $solarized-dark-cm;
+  } /* Comment.Multiline */
+  .cp {
+    color: $solarized-dark-cp;
+  } /* Comment.Preproc */
+  .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 */
+  .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 */
+  .gu {
+    color: $solarized-dark-gu;
+  } /* Generic.Subheading */
+  .gt {
+    color: $solarized-dark-gt;
+  } /* Generic.Traceback */
+  .kc {
+    color: $solarized-dark-kc;
+  } /* Keyword.Constant */
+  .kd {
+    color: $solarized-dark-kd;
+  } /* Keyword.Declaration */
+  .kn {
+    color: $solarized-dark-kn;
+  } /* Keyword.Namespace */
+  .kp {
+    color: $solarized-dark-kp;
+  } /* Keyword.Pseudo */
+  .kr {
+    color: $solarized-dark-kr;
+  } /* Keyword.Reserved */
+  .kt {
+    color: $solarized-dark-kt;
+  } /* Keyword.Type */
+  .ld {
+    color: $solarized-dark-ld;
+  } /* Literal.Date */
+  .m {
+    color: $solarized-dark-m;
+  } /* Literal.Number */
+  .s {
+    color: $solarized-dark-s;
+  } /* Literal.String */
+  .na {
+    color: $solarized-dark-na;
+  } /* Name.Attribute */
+  .nb {
+    color: $solarized-dark-nb;
+  } /* Name.Builtin */
+  .nc {
+    color: $solarized-dark-nc;
+  } /* Name.Class */
+  .no {
+    color: $solarized-dark-no;
+  } /* Name.Constant */
+  .nd {
+    color: $solarized-dark-nd;
+  } /* Name.Decorator */
+  .ni {
+    color: $solarized-dark-ni;
+  } /* Name.Entity */
+  .ne {
+    color: $solarized-dark-ne;
+  } /* Name.Exception */
+  .nf {
+    color: $solarized-dark-nf;
+  } /* Name.Function */
+  .nl {
+    color: $solarized-dark-nl;
+  } /* Name.Label */
+  .nn {
+    color: $solarized-dark-nn;
+  } /* Name.Namespace */
+  .nx {
+    color: $solarized-dark-nx;
+  } /* Name.Other */
+  .py {
+    color: $solarized-dark-py;
+  } /* Name.Property */
+  .nt {
+    color: $solarized-dark-nt;
+  } /* Name.Tag */
+  .nv {
+    color: $solarized-dark-nv;
+  } /* Name.Variable */
+  .ow {
+    color: $solarized-dark-ow;
+  } /* Operator.Word */
+  .w {
+    color: $solarized-dark-w;
+  } /* Text.Whitespace */
+  .mf {
+    color: $solarized-dark-mf;
+  } /* Literal.Number.Float */
+  .mh {
+    color: $solarized-dark-mh;
+  } /* Literal.Number.Hex */
+  .mi {
+    color: $solarized-dark-mi;
+  } /* Literal.Number.Integer */
+  .mo {
+    color: $solarized-dark-mo;
+  } /* Literal.Number.Oct */
+  .sb {
+    color: $solarized-dark-sb;
+  } /* Literal.String.Backtick */
+  .sc {
+    color: $solarized-dark-sc;
+  } /* Literal.String.Char */
+  .sd {
+    color: $solarized-dark-sd;
+  } /* Literal.String.Doc */
+  .s2 {
+    color: $solarized-dark-s2;
+  } /* Literal.String.Double */
+  .se {
+    color: $solarized-dark-se;
+  } /* Literal.String.Escape */
+  .sh {
+    color: $solarized-dark-sh;
+  } /* Literal.String.Heredoc */
+  .si {
+    color: $solarized-dark-si;
+  } /* Literal.String.Interpol */
+  .sx {
+    color: $solarized-dark-sx;
+  } /* Literal.String.Other */
+  .sr {
+    color: $solarized-dark-sr;
+  } /* Literal.String.Regex */
+  .s1 {
+    color: $solarized-dark-s1;
+  } /* Literal.String.Single */
+  .ss {
+    color: $solarized-dark-ss;
+  } /* Literal.String.Symbol */
+  .bp {
+    color: $solarized-dark-bp;
+  } /* Name.Builtin.Pseudo */
+  .vc {
+    color: $solarized-dark-vc;
+  } /* Name.Variable.Class */
+  .vg {
+    color: $solarized-dark-vg;
+  } /* Name.Variable.Global */
+  .vi {
+    color: $solarized-dark-vi;
+  } /* Name.Variable.Instance */
+  .il {
+    color: $solarized-dark-il;
+  } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/solarized_light.scss b/app/assets/stylesheets/highlight/solarized_light.scss
index 09c3ea36414..6e7d0a98533 100644
--- a/app/assets/stylesheets/highlight/solarized_light.scss
+++ b/app/assets/stylesheets/highlight/solarized_light.scss
@@ -136,8 +136,11 @@ $solarized-light-il: #2aa198;
 
     .diff-line-num.new,
     .line_content.new {
-      @include diff_background($solarized-light-new-bg,
-      $solarized-light-new-idiff, $solarized-light-border);
+      @include diff_background(
+        $solarized-light-new-bg,
+        $solarized-light-new-idiff,
+        $solarized-light-border
+      );
 
       &::before,
       a {
@@ -147,7 +150,11 @@ $solarized-light-il: #2aa198;
 
     .diff-line-num.old,
     .line_content.old {
-      @include diff_background($solarized-light-old-bg, $solarized-light-old-idiff, $solarized-light-border);
+      @include diff_background(
+        $solarized-light-old-bg,
+        $solarized-light-old-idiff,
+        $solarized-light-border
+      );
 
       &::before,
       a {
@@ -221,72 +228,210 @@ $solarized-light-il: #2aa198;
   green     #859900  operators, other keywords
   */
 
-  .c { color: $solarized-light-c; } /* Comment */
-  .err { color: $solarized-light-err; } /* Error */
-  .g { color: $solarized-light-g; } /* Generic */
-  .k { color: $solarized-light-k; } /* Keyword */
-  .l { color: $solarized-light-l; } /* Literal */
-  .n { color: $solarized-light-n; } /* Name */
-  .o { color: $solarized-light-o; } /* Operator */
-  .x { color: $solarized-light-x; } /* Other */
-  .p { color: $solarized-light-p; } /* Punctuation */
-  .cm { color: $solarized-light-cm; } /* Comment.Multiline */
-  .cp { color: $solarized-light-cp; } /* Comment.Preproc */
-  .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 */
-  .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 */
-  .gu { color: $solarized-light-gu; } /* Generic.Subheading */
-  .gt { color: $solarized-light-gt; } /* Generic.Traceback */
-  .kc { color: $solarized-light-kc; } /* Keyword.Constant */
-  .kd { color: $solarized-light-kd; } /* Keyword.Declaration */
-  .kn { color: $solarized-light-kn; } /* Keyword.Namespace */
-  .kp { color: $solarized-light-kp; } /* Keyword.Pseudo */
-  .kr { color: $solarized-light-kr; } /* Keyword.Reserved */
-  .kt { color: $solarized-light-kt; } /* Keyword.Type */
-  .ld { color: $solarized-light-ld; } /* Literal.Date */
-  .m { color: $solarized-light-m; } /* Literal.Number */
-  .s { color: $solarized-light-s; } /* Literal.String */
-  .na { color: $solarized-light-na; } /* Name.Attribute */
-  .nb { color: $solarized-light-nb; } /* Name.Builtin */
-  .nc { color: $solarized-light-nc; } /* Name.Class */
-  .no { color: $solarized-light-no; } /* Name.Constant */
-  .nd { color: $solarized-light-nd; } /* Name.Decorator */
-  .ni { color: $solarized-light-ni; } /* Name.Entity */
-  .ne { color: $solarized-light-ne; } /* Name.Exception */
-  .nf { color: $solarized-light-nf; } /* Name.Function */
-  .nl { color: $solarized-light-nl; } /* Name.Label */
-  .nn { color: $solarized-light-nn; } /* Name.Namespace */
-  .nx { color: $solarized-light-nx; } /* Name.Other */
-  .py { color: $solarized-light-py; } /* Name.Property */
-  .nt { color: $solarized-light-nt; } /* Name.Tag */
-  .nv { color: $solarized-light-nv; } /* Name.Variable */
-  .ow { color: $solarized-light-ow; } /* Operator.Word */
-  .w { color: $solarized-light-w; } /* Text.Whitespace */
-  .mf { color: $solarized-light-mf; } /* Literal.Number.Float */
-  .mh { color: $solarized-light-mh; } /* Literal.Number.Hex */
-  .mi { color: $solarized-light-mi; } /* Literal.Number.Integer */
-  .mo { color: $solarized-light-mo; } /* Literal.Number.Oct */
-  .sb { color: $solarized-light-sb; } /* Literal.String.Backtick */
-  .sc { color: $solarized-light-sc; } /* Literal.String.Char */
-  .sd { color: $solarized-light-sd; } /* Literal.String.Doc */
-  .s2 { color: $solarized-light-s2; } /* Literal.String.Double */
-  .se { color: $solarized-light-se; } /* Literal.String.Escape */
-  .sh { color: $solarized-light-sh; } /* Literal.String.Heredoc */
-  .si { color: $solarized-light-si; } /* Literal.String.Interpol */
-  .sx { color: $solarized-light-sx; } /* Literal.String.Other */
-  .sr { color: $solarized-light-sr; } /* Literal.String.Regex */
-  .s1 { color: $solarized-light-s1; } /* Literal.String.Single */
-  .ss { color: $solarized-light-ss; } /* Literal.String.Symbol */
-  .bp { color: $solarized-light-bp; } /* Name.Builtin.Pseudo */
-  .vc { color: $solarized-light-vc; } /* Name.Variable.Class */
-  .vg { color: $solarized-light-vg; } /* Name.Variable.Global */
-  .vi { color: $solarized-light-vi; } /* Name.Variable.Instance */
-  .il { color: $solarized-light-il; } /* Literal.Number.Integer.Long */
+  .c {
+    color: $solarized-light-c;
+  } /* Comment */
+  .err {
+    color: $solarized-light-err;
+  } /* Error */
+  .g {
+    color: $solarized-light-g;
+  } /* Generic */
+  .k {
+    color: $solarized-light-k;
+  } /* Keyword */
+  .l {
+    color: $solarized-light-l;
+  } /* Literal */
+  .n {
+    color: $solarized-light-n;
+  } /* Name */
+  .o {
+    color: $solarized-light-o;
+  } /* Operator */
+  .x {
+    color: $solarized-light-x;
+  } /* Other */
+  .p {
+    color: $solarized-light-p;
+  } /* Punctuation */
+  .cm {
+    color: $solarized-light-cm;
+  } /* Comment.Multiline */
+  .cp {
+    color: $solarized-light-cp;
+  } /* Comment.Preproc */
+  .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 */
+  .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 */
+  .gu {
+    color: $solarized-light-gu;
+  } /* Generic.Subheading */
+  .gt {
+    color: $solarized-light-gt;
+  } /* Generic.Traceback */
+  .kc {
+    color: $solarized-light-kc;
+  } /* Keyword.Constant */
+  .kd {
+    color: $solarized-light-kd;
+  } /* Keyword.Declaration */
+  .kn {
+    color: $solarized-light-kn;
+  } /* Keyword.Namespace */
+  .kp {
+    color: $solarized-light-kp;
+  } /* Keyword.Pseudo */
+  .kr {
+    color: $solarized-light-kr;
+  } /* Keyword.Reserved */
+  .kt {
+    color: $solarized-light-kt;
+  } /* Keyword.Type */
+  .ld {
+    color: $solarized-light-ld;
+  } /* Literal.Date */
+  .m {
+    color: $solarized-light-m;
+  } /* Literal.Number */
+  .s {
+    color: $solarized-light-s;
+  } /* Literal.String */
+  .na {
+    color: $solarized-light-na;
+  } /* Name.Attribute */
+  .nb {
+    color: $solarized-light-nb;
+  } /* Name.Builtin */
+  .nc {
+    color: $solarized-light-nc;
+  } /* Name.Class */
+  .no {
+    color: $solarized-light-no;
+  } /* Name.Constant */
+  .nd {
+    color: $solarized-light-nd;
+  } /* Name.Decorator */
+  .ni {
+    color: $solarized-light-ni;
+  } /* Name.Entity */
+  .ne {
+    color: $solarized-light-ne;
+  } /* Name.Exception */
+  .nf {
+    color: $solarized-light-nf;
+  } /* Name.Function */
+  .nl {
+    color: $solarized-light-nl;
+  } /* Name.Label */
+  .nn {
+    color: $solarized-light-nn;
+  } /* Name.Namespace */
+  .nx {
+    color: $solarized-light-nx;
+  } /* Name.Other */
+  .py {
+    color: $solarized-light-py;
+  } /* Name.Property */
+  .nt {
+    color: $solarized-light-nt;
+  } /* Name.Tag */
+  .nv {
+    color: $solarized-light-nv;
+  } /* Name.Variable */
+  .ow {
+    color: $solarized-light-ow;
+  } /* Operator.Word */
+  .w {
+    color: $solarized-light-w;
+  } /* Text.Whitespace */
+  .mf {
+    color: $solarized-light-mf;
+  } /* Literal.Number.Float */
+  .mh {
+    color: $solarized-light-mh;
+  } /* Literal.Number.Hex */
+  .mi {
+    color: $solarized-light-mi;
+  } /* Literal.Number.Integer */
+  .mo {
+    color: $solarized-light-mo;
+  } /* Literal.Number.Oct */
+  .sb {
+    color: $solarized-light-sb;
+  } /* Literal.String.Backtick */
+  .sc {
+    color: $solarized-light-sc;
+  } /* Literal.String.Char */
+  .sd {
+    color: $solarized-light-sd;
+  } /* Literal.String.Doc */
+  .s2 {
+    color: $solarized-light-s2;
+  } /* Literal.String.Double */
+  .se {
+    color: $solarized-light-se;
+  } /* Literal.String.Escape */
+  .sh {
+    color: $solarized-light-sh;
+  } /* Literal.String.Heredoc */
+  .si {
+    color: $solarized-light-si;
+  } /* Literal.String.Interpol */
+  .sx {
+    color: $solarized-light-sx;
+  } /* Literal.String.Other */
+  .sr {
+    color: $solarized-light-sr;
+  } /* Literal.String.Regex */
+  .s1 {
+    color: $solarized-light-s1;
+  } /* Literal.String.Single */
+  .ss {
+    color: $solarized-light-ss;
+  } /* Literal.String.Symbol */
+  .bp {
+    color: $solarized-light-bp;
+  } /* Name.Builtin.Pseudo */
+  .vc {
+    color: $solarized-light-vc;
+  } /* Name.Variable.Class */
+  .vg {
+    color: $solarized-light-vg;
+  } /* Name.Variable.Global */
+  .vi {
+    color: $solarized-light-vi;
+  } /* Name.Variable.Instance */
+  .il {
+    color: $solarized-light-il;
+  } /* Literal.Number.Integer.Long */
 }
diff --git a/app/assets/stylesheets/highlight/white.scss b/app/assets/stylesheets/highlight/white.scss
index 355c8d223f7..b063ecd509b 100644
--- a/app/assets/stylesheets/highlight/white.scss
+++ b/app/assets/stylesheets/highlight/white.scss
@@ -1,3 +1,3 @@
 .code.white {
-  @import "white_base";
+  @import 'white_base';
 }
diff --git a/app/assets/stylesheets/highlight/white_base.scss b/app/assets/stylesheets/highlight/white_base.scss
index 90a5250c247..8e16618fbd3 100644
--- a/app/assets/stylesheets/highlight/white_base.scss
+++ b/app/assets/stylesheets/highlight/white_base.scss
@@ -69,13 +69,12 @@ $white-il: #099;
 $white-gc-color: #999;
 $white-gc-bg: #eaf2f5;
 
-
 @mixin matchLine {
   color: $black-transparent;
   background-color: $gray-light;
 }
 
-  // Line numbers
+// Line numbers
 .line-numbers,
 .diff-line-num {
   background-color: $gray-light;
@@ -101,7 +100,6 @@ pre.code,
 
 // Diff line
 .line_holder {
-
   &.match .line_content,
   .new-nonewline.line_content,
   .old-nonewline.line_content {
@@ -199,25 +197,50 @@ 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; }
-.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; }
+.hll {
+  background-color: $white-hll-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;
+}
 
 .gd {
   color: $white-gd;
@@ -229,9 +252,15 @@ span.highlight_word {
   }
 }
 
-.ge { font-style: italic; }
-.gr { color: $white-gr; }
-.gh { color: $white-gh; }
+.ge {
+  font-style: italic;
+}
+.gr {
+  color: $white-gr;
+}
+.gh {
+  color: $white-gh;
+}
 
 .gi {
   color: $white-gi;
@@ -243,50 +272,150 @@ 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; }
-.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; }
-.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; }
-.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; }
-.nn { color: $white-nn; }
-.nt { color: $white-nt; }
-.nv { color: $white-nv; }
-.ow { font-weight: $gl-font-weight-bold; }
-.w { color: $white-w; }
-.mf { color: $white-mf; }
-.mh { color: $white-mh; }
-.mi { color: $white-mi; }
-.mo { color: $white-mo; }
-.sb { color: $white-sb; }
-.sc { color: $white-sc; }
-.sd { color: $white-sd; }
-.s2 { color: $white-s2; }
-.se { color: $white-se; }
-.sh { color: $white-sh; }
-.si { color: $white-si; }
-.sx { color: $white-sx; }
-.sr { color: $white-sr; }
-.s1 { color: $white-s1; }
-.ss { color: $white-ss; }
-.bp { color: $white-bp; }
-.vc { color: $white-vc; }
-.vg { color: $white-vg; }
-.vi { color: $white-vi; }
-.il { color: $white-il; }
-.gc { color: $white-gc-color; background-color: $white-gc-bg; }
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.nn {
+  color: $white-nn;
+}
+.nt {
+  color: $white-nt;
+}
+.nv {
+  color: $white-nv;
+}
+.ow {
+  font-weight: $gl-font-weight-bold;
+}
+.w {
+  color: $white-w;
+}
+.mf {
+  color: $white-mf;
+}
+.mh {
+  color: $white-mh;
+}
+.mi {
+  color: $white-mi;
+}
+.mo {
+  color: $white-mo;
+}
+.sb {
+  color: $white-sb;
+}
+.sc {
+  color: $white-sc;
+}
+.sd {
+  color: $white-sd;
+}
+.s2 {
+  color: $white-s2;
+}
+.se {
+  color: $white-se;
+}
+.sh {
+  color: $white-sh;
+}
+.si {
+  color: $white-si;
+}
+.sx {
+  color: $white-sx;
+}
+.sr {
+  color: $white-sr;
+}
+.s1 {
+  color: $white-s1;
+}
+.ss {
+  color: $white-ss;
+}
+.bp {
+  color: $white-bp;
+}
+.vc {
+  color: $white-vc;
+}
+.vg {
+  color: $white-vg;
+}
+.vi {
+  color: $white-vi;
+}
+.il {
+  color: $white-il;
+}
+.gc {
+  color: $white-gc-color;
+  background-color: $white-gc-bg;
+}
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index 8b234a5a656..a322f07b8ca 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -1,4 +1,4 @@
-@import "framework/variables";
+@import 'framework/variables';
 
 // This file is largely copied from `highlight/white.scss`, but modified to
 // avoid all descendant selectors (`table td`). This is because the CSS inlining
@@ -150,15 +150,40 @@ span.highlight_word {
   background-color: $highlighted-highlight-word !important;
 }
 
-.hll { background-color: $highlighted-hll-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; }
+.hll {
+  background-color: $highlighted-hll-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;
+}
 
 .gd {
   color: $highlighted-gd;
@@ -170,9 +195,15 @@ span.highlight_word {
   }
 }
 
-.ge { font-style: italic; }
-.gr { color: $highlighted-gr; }
-.gh { color: $highlighted-gh; }
+.ge {
+  font-style: italic;
+}
+.gr {
+  color: $highlighted-gr;
+}
+.gh {
+  color: $highlighted-gh;
+}
 
 .gi {
   color: $highlighted-gi;
@@ -184,50 +215,150 @@ 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; }
-.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; }
-.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; }
-.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; }
-.nn { color: $highlighted-nn; }
-.nt { color: $highlighted-nt; }
-.nv { color: $highlighted-nv; }
-.ow { font-weight: $gl-font-weight-bold; }
-.w { color: $highlighted-w; }
-.mf { color: $highlighted-mf; }
-.mh { color: $highlighted-mh; }
-.mi { color: $highlighted-mi; }
-.mo { color: $highlighted-mo; }
-.sb { color: $highlighted-sb; }
-.sc { color: $highlighted-sc; }
-.sd { color: $highlighted-sd; }
-.s2 { color: $highlighted-s2; }
-.se { color: $highlighted-se; }
-.sh { color: $highlighted-sh; }
-.si { color: $highlighted-si; }
-.sx { color: $highlighted-sx; }
-.sr { color: $highlighted-sr; }
-.s1 { color: $highlighted-s1; }
-.ss { color: $highlighted-ss; }
-.bp { color: $highlighted-bp; }
-.vc { color: $highlighted-vc; }
-.vg { color: $highlighted-vg; }
-.vi { color: $highlighted-vi; }
-.il { color: $highlighted-il; }
-.gc { color: $highlighted-gc; background-color: $highlighted-gc-bg; }
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+.nn {
+  color: $highlighted-nn;
+}
+.nt {
+  color: $highlighted-nt;
+}
+.nv {
+  color: $highlighted-nv;
+}
+.ow {
+  font-weight: $gl-font-weight-bold;
+}
+.w {
+  color: $highlighted-w;
+}
+.mf {
+  color: $highlighted-mf;
+}
+.mh {
+  color: $highlighted-mh;
+}
+.mi {
+  color: $highlighted-mi;
+}
+.mo {
+  color: $highlighted-mo;
+}
+.sb {
+  color: $highlighted-sb;
+}
+.sc {
+  color: $highlighted-sc;
+}
+.sd {
+  color: $highlighted-sd;
+}
+.s2 {
+  color: $highlighted-s2;
+}
+.se {
+  color: $highlighted-se;
+}
+.sh {
+  color: $highlighted-sh;
+}
+.si {
+  color: $highlighted-si;
+}
+.sx {
+  color: $highlighted-sx;
+}
+.sr {
+  color: $highlighted-sr;
+}
+.s1 {
+  color: $highlighted-s1;
+}
+.ss {
+  color: $highlighted-ss;
+}
+.bp {
+  color: $highlighted-bp;
+}
+.vc {
+  color: $highlighted-vc;
+}
+.vg {
+  color: $highlighted-vg;
+}
+.vi {
+  color: $highlighted-vi;
+}
+.il {
+  color: $highlighted-il;
+}
+.gc {
+  color: $highlighted-gc;
+  background-color: $highlighted-gc-bg;
+}
diff --git a/app/assets/stylesheets/notify.scss b/app/assets/stylesheets/notify.scss
index f24c80bd81c..d77b7dfad68 100644
--- a/app/assets/stylesheets/notify.scss
+++ b/app/assets/stylesheets/notify.scss
@@ -1,4 +1,4 @@
-@import "framework/variables";
+@import 'framework/variables';
 
 img {
   max-width: 100%;
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index b3c5c693824..024c0230ee4 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -90,20 +90,14 @@
   }
 
   .with-performance-bar & {
-    height: calc(
-      100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height}
-    );
+    height: calc(100vh - #{$issue-board-list-difference-xs} - #{$performance-bar-height});
 
     @include media-breakpoint-only(sm) {
-      height: calc(
-        100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height}
-      );
+      height: calc(100vh - #{$issue-board-list-difference-sm} - #{$performance-bar-height});
     }
 
     @include media-breakpoint-up(md) {
-      height: calc(
-        100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height}
-      );
+      height: calc(100vh - #{$issue-board-list-difference-md} - #{$performance-bar-height});
     }
   }
 }
@@ -475,8 +469,7 @@
 .right-sidebar.right-sidebar-expanded {
   &.boards-sidebar-slide-enter-active,
   &.boards-sidebar-slide-leave-active {
-    transition: width $sidebar-transition-duration,
-      padding $sidebar-transition-duration;
+    transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
   }
 
   &.boards-sidebar-slide-enter,
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 11966931a6c..670e320dbc2 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -342,11 +342,11 @@
   }
 
   &.invalid {
-    @include status-color($gray-dark, color("gray"), $gray-darkest);
+    @include status-color($gray-dark, color('gray'), $gray-darkest);
     border-color: $gray-darkest;
 
     &:not(span):hover {
-      color: color("gray");
+      color: color('gray');
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index f0228768b5a..5af0f1f0973 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -41,7 +41,6 @@
       width: 20%;
     }
 
-
     .fa {
       color: $cycle-analytics-light-gray;
 
@@ -330,7 +329,6 @@
 
   // Custom Styles for stage items
   .item-build-component {
-
     .item-title {
       .icon-build-status {
         float: left;
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 04570c057d1..fcc9f41532d 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -60,7 +60,7 @@
     max-width: 420px;
     float: left;
 
-    @media(max-width: map-get($grid-breakpoints, lg)-1) {
+    @media (max-width: map-get($grid-breakpoints, lg)-1) {
       width: 180px;
     }
   }
@@ -105,7 +105,6 @@
   }
 }
 
-
 @include media-breakpoint-down(sm) {
   .file-editor {
     .file-title {
@@ -150,7 +149,7 @@
   vertical-align: top;
   display: inline-block;
 
-  @media(max-width: map-get($grid-breakpoints, md)-1) {
+  @media (max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     margin: 19px 0 12px;
   }
@@ -163,7 +162,7 @@
   padding: 0 0 0 14px;
   border-left: 1px solid $border-color;
 
-  @media(max-width: map-get($grid-breakpoints, md)-1) {
+  @media (max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 5px 0;
@@ -178,7 +177,7 @@
   margin-top: 6px;
   line-height: 21px;
 
-  @media(max-width: map-get($grid-breakpoints, md)-1) {
+  @media (max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     margin: 5px 0;
   }
@@ -190,7 +189,7 @@
   vertical-align: top;
   margin: 5px 0 0 8px;
 
-  @media(max-width: map-get($grid-breakpoints, md)-1) {
+  @media (max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 0 0 16px;
@@ -206,7 +205,7 @@
     font-family: $regular_font;
     margin-top: -5px;
 
-    @media(max-width: map-get($grid-breakpoints, md)-1) {
+    @media (max-width: map-get($grid-breakpoints, md)-1) {
       display: block;
       width: 100%;
       margin: 5px 0;
@@ -220,13 +219,12 @@
       width: 250px;
       vertical-align: top;
 
-      @media(max-width: map-get($grid-breakpoints, md)-1) {
+      @media (max-width: map-get($grid-breakpoints, md)-1) {
         display: block;
         width: 100%;
         margin: 5px 0;
       }
     }
-
   }
 }
 
@@ -234,7 +232,7 @@
   display: inline-block;
   margin: 7px 0 0 10px;
 
-  @media(max-width: map-get($grid-breakpoints, md)-1) {
+  @media (max-width: map-get($grid-breakpoints, md)-1) {
     display: block;
     width: 100%;
     margin: 20px 0;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 79984c1a546..b94a413aa6b 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -365,7 +365,7 @@
     }
 
     .arrow-shadow {
-      content: "";
+      content: '';
       position: absolute;
       width: 7px;
       height: 7px;
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index a91d44805ee..5ef14ac9db9 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -127,7 +127,9 @@
     }
   }
 
-  &:last-child { border: 0; }
+  &:last-child {
+    border: 0;
+  }
 
   .event_commits {
     li {
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index 4fb1a956fab..9467e7fe691 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -80,9 +80,15 @@
 }
 
 @keyframes flickerAnimation {
-  0% { opacity: 1; }
-  50% { opacity: 0; }
-  100% { opacity: 1; }
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
 .animate-flicker {
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 2c23f31c240..161d4dbfb22 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -30,7 +30,7 @@
   .key {
     @extend .badge.badge-pill;
     background-color: $label-inverse-bg;
-    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     padding: 3px 5px;
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 62a9f97caa9..178b6155345 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -144,11 +144,9 @@
       color: $blue-800;
 
       .avatar {
-        border-color: rgba($gray-normal, .2);
+        border-color: rgba($gray-normal, 0.2);
       }
-
     }
-
   }
 
   .btn-link {
@@ -231,7 +229,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
@@ -560,7 +558,6 @@
         @include dropdown-item-hover;
       }
     }
-
   }
 }
 
@@ -607,7 +604,6 @@
   margin: -7px;
 }
 
-
 .user-list {
   display: flex;
   flex-wrap: wrap;
@@ -720,7 +716,6 @@
 
 .issuable-list {
   li {
-
     .issue-box {
       display: -webkit-flex;
       display: flex;
@@ -789,7 +784,7 @@
       }
     }
 
-    @media(max-width: map-get($grid-breakpoints, lg)-1) {
+    @media (max-width: map-get($grid-breakpoints, lg)-1) {
       .task-status,
       .issuable-due-date,
       .project-ref-path {
@@ -816,9 +811,7 @@
   padding-bottom: 0;
   border-bottom: 0;
 
-
   .sidebar-collapsed-icon {
-
     > .stopwatch-svg {
       display: inline-block;
     }
@@ -876,11 +869,11 @@
   }
 
   .help-state-toggle-enter-active {
-    transition: all .8s ease;
+    transition: all 0.8s ease;
   }
 
   .help-state-toggle-leave-active {
-    transition: all .5s ease;
+    transition: all 0.5s ease;
   }
 
   .help-state-toggle-enter,
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index fa0ab1a3bae..0425739c82a 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -139,7 +139,7 @@
         // 3 LDAP servers configured (in addition to standard login) and they are not using especially long names for any
         // of them. If either condition is false, this will work as expected. If both are true, there may be a missing border
         // above one of the bottom row elements. If you know a better way, please implement it!
-        &:nth-child(n+5) {
+        &:nth-child(n + 5) {
           border-top: 1px solid $border-color;
         }
       }
@@ -189,7 +189,7 @@
     margin-top: 16px;
   }
 
-  input[type="submit"] {
+  input[type='submit'] {
     @extend .btn-block;
     margin-bottom: 0;
   }
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index d26659701e1..603c97d85ed 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -1,100 +1,76 @@
 // Disabled to use the color map for creating color schemes
 // scss-lint:disable ColorVariable
 $colors: (
-  white-header-head-neutral   : #e1fad7,
-  white-line-head-neutral     : #effdec,
-  white-button-head-neutral   : #9adb84,
-
-  white-header-head-chosen    : #baf0a8,
-  white-line-head-chosen      : #e1fad7,
-  white-button-head-chosen    : #52c22d,
-
-  white-header-origin-neutral : #e0f0ff,
-  white-line-origin-neutral   : #f2f9ff,
-  white-button-origin-neutral : #87c2fa,
-
-  white-header-origin-chosen  : #add8ff,
-  white-line-origin-chosen    : #e0f0ff,
-  white-button-origin-chosen  : #268ced,
-
-  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-button-head-neutral   : #40874f,
-
-  dark-header-head-chosen    : rgba(#3f3, .33),
-  dark-line-head-chosen      : rgba(#3f3, .2),
-  dark-button-head-chosen    : #258537,
-
-  dark-header-origin-neutral : rgba(#2878c9, .4),
-  dark-line-origin-neutral   : rgba(#2878c9, .3),
-  dark-button-origin-neutral : #2a5c8c,
-
-  dark-header-origin-chosen  : rgba(#2878c9, .6),
-  dark-line-origin-chosen    : rgba(#2878c9, .4),
-  dark-button-origin-chosen  : #1d6cbf,
-
-  dark-header-not-chosen     : rgba(#fff, .25),
-  dark-line-not-chosen       : rgba(#fff, .1),
-
-  monokai-header-head-neutral   : rgba(#a6e22e, .25),
-  monokai-line-head-neutral     : rgba(#a6e22e, .1),
-  monokai-button-head-neutral   : #376b20,
-
-  monokai-header-head-chosen    : rgba(#a6e22e, .4),
-  monokai-line-head-chosen      : rgba(#a6e22e, .25),
-  monokai-button-head-chosen    : #39800d,
-
-  monokai-header-origin-neutral : rgba(#60d9f1, .35),
-  monokai-line-origin-neutral   : rgba(#60d9f1, .15),
-  monokai-button-origin-neutral : #38848c,
-
-  monokai-header-origin-chosen  : rgba(#60d9f1, .5),
-  monokai-line-origin-chosen    : rgba(#60d9f1, .35),
-  monokai-button-origin-chosen  : #3ea4b2,
-
-  monokai-header-not-chosen     : rgba(#76715d, .24),
-  monokai-line-not-chosen       : rgba(#76715d, .1),
-
-  solarized-light-header-head-neutral   : rgba(#859900, .37),
-  solarized-light-line-head-neutral     : rgba(#859900, .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-button-head-chosen    : #94993d,
-
-  solarized-light-header-origin-neutral : rgba(#2878c9, .37),
-  solarized-light-line-origin-neutral   : rgba(#2878c9, .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-button-origin-chosen  : #2482b2,
-
-  solarized-light-header-not-chosen     : rgba(#839496, .37),
-  solarized-light-line-not-chosen       : rgba(#839496, .2),
-
-  solarized-dark-header-head-neutral   : rgba(#859900, .35),
-  solarized-dark-line-head-neutral     : rgba(#859900, .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-button-head-chosen    : #39800d,
-
-  solarized-dark-header-origin-neutral : rgba(#2878c9, .35),
-  solarized-dark-line-origin-neutral   : rgba(#2878c9, .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-button-origin-chosen  : #0082cc,
-
-  solarized-dark-header-not-chosen     : rgba(#839496, .25),
-  solarized-dark-line-not-chosen       : rgba(#839496, .15)
+  white-header-head-neutral: #e1fad7,
+  white-line-head-neutral: #effdec,
+  white-button-head-neutral: #9adb84,
+  white-header-head-chosen: #baf0a8,
+  white-line-head-chosen: #e1fad7,
+  white-button-head-chosen: #52c22d,
+  white-header-origin-neutral: #e0f0ff,
+  white-line-origin-neutral: #f2f9ff,
+  white-button-origin-neutral: #87c2fa,
+  white-header-origin-chosen: #add8ff,
+  white-line-origin-chosen: #e0f0ff,
+  white-button-origin-chosen: #268ced,
+  white-header-not-chosen: #f0f0f0,
+  white-line-not-chosen: $gray-light,
+  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, 0.33),
+  dark-line-head-chosen: rgba(#3f3, 0.2),
+  dark-button-head-chosen: #258537,
+  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, 0.6),
+  dark-line-origin-chosen: rgba(#2878c9, 0.4),
+  dark-button-origin-chosen: #1d6cbf,
+  dark-header-not-chosen: rgba(#fff, 0.25),
+  dark-line-not-chosen: rgba(#fff, 0.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, 0.4),
+  monokai-line-head-chosen: rgba(#a6e22e, 0.25),
+  monokai-button-head-chosen: #39800d,
+  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, 0.5),
+  monokai-line-origin-chosen: rgba(#60d9f1, 0.35),
+  monokai-button-origin-chosen: #3ea4b2,
+  monokai-header-not-chosen: rgba(#76715d, 0.24),
+  monokai-line-not-chosen: rgba(#76715d, 0.1),
+  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, 0.5),
+  solarized-light-line-head-chosen: rgba(#859900, 0.37),
+  solarized-light-button-head-chosen: #94993d,
+  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, 0.6),
+  solarized-light-line-origin-chosen: rgba(#2878c9, 0.37),
+  solarized-light-button-origin-chosen: #2482b2,
+  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, 0.35),
+  solarized-dark-line-head-neutral: rgba(#859900, 0.15),
+  solarized-dark-button-head-neutral: #376b20,
+  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, 0.35),
+  solarized-dark-line-origin-neutral: rgba(#2878c9, 0.15),
+  solarized-dark-button-origin-neutral: #086799,
+  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, 0.25),
+  solarized-dark-line-not-chosen: rgba(#839496, 0.15),
 );
 // scss-lint:enable ColorVariable
 
@@ -190,25 +166,24 @@ $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 {
@@ -285,7 +260,7 @@ $colors: (
     }
 
     .resolve-info {
-      @media(max-width: map-get($grid-breakpoints, lg)-1) {
+      @media (max-width: map-get($grid-breakpoints, lg)-1) {
         margin-bottom: $gl-padding;
       }
     }
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 45382d4ea43..d244a098862 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -47,7 +47,6 @@
   }
 }
 
-
 .mr-widget-heading {
   position: relative;
   border: 1px solid $border-color;
@@ -455,7 +454,7 @@
 
 .mr-list {
   .merge-request {
-    padding: 10px  0 10px 15px;
+    padding: 10px 0 10px 15px;
     position: relative;
     display: -webkit-flex;
     display: flex;
@@ -469,7 +468,6 @@
       margin-bottom: 2px;
 
       .ci-status-link {
-
         svg {
           height: 16px;
           width: 16px;
@@ -699,7 +697,6 @@
 
 .table-holder {
   .ci-table {
-
     th {
       background-color: $white-light;
       color: $gl-text-color-secondary;
@@ -776,7 +773,7 @@
 
   &.affix {
     left: 0;
-    transition: right .15s;
+    transition: right 0.15s;
 
     @include media-breakpoint-down(xs) {
       right: 0;
@@ -885,7 +882,7 @@
   }
 
   > *:not(:last-child) {
-    margin-right: .3em;
+    margin-right: 0.3em;
   }
 
   svg {
@@ -918,7 +915,7 @@
   &[disabled] {
     cursor: not-allowed;
     box-shadow: none;
-    opacity: .65;
+    opacity: 0.65;
 
     &:hover {
       color: $gl-gray-500;
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 4268e194ed7..14a0477f6f3 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -61,8 +61,7 @@
     padding: $gl-padding-top $gl-padding;
     border: 1px solid $border-color;
     border-radius: $border-radius-base;
-    transition: border-color ease-in-out 0.15s,
-                box-shadow ease-in-out 0.15s;
+    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
     &.is-focused {
       @extend .form-control:focus;
@@ -75,8 +74,7 @@
 
     &.is-dropzone-hover {
       border-color: $green-500;
-      box-shadow: 0 0 2px $black-transparent,
-                  0 0 4px $green-500-focus;
+      box-shadow: 0 0 2px $black-transparent, 0 0 4px $green-500-focus;
 
       .comment-toolbar,
       .nav-links {
@@ -430,7 +428,7 @@
 .uploading-error-message {
   @include media-breakpoint-down(xs) {
     &::after {
-      content: "\a";
+      content: '\a';
       white-space: pre;
     }
   }
diff --git a/app/assets/stylesheets/pages/pages.scss b/app/assets/stylesheets/pages/pages.scss
index fb42dee66d2..92e0b4954d8 100644
--- a/app/assets/stylesheets/pages/pages.scss
+++ b/app/assets/stylesheets/pages/pages.scss
@@ -13,17 +13,14 @@
     .domain-name {
       flex-grow: 1;
     }
-
   }
 
   &.has-verification-status > li {
     padding-left: 3 * $gl-padding;
   }
-
 }
 
 .status-badge {
-
   display: inline-flex;
   margin-bottom: $gl-padding-8;
 
@@ -56,5 +53,4 @@
     border-bottom-right-radius: $border-radius-default;
     border-top-right-radius: $border-radius-default;
   }
-
 }
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss
index ecd51aa06a4..27b0a77b73a 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/pages/reports.scss
@@ -80,7 +80,6 @@
     .license-packages {
       font-size: $label-font-size;
     }
-
   }
 }
 
diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss
index dbf8692d69b..f60562fed04 100644
--- a/app/assets/stylesheets/pages/settings.scss
+++ b/app/assets/stylesheets/pages/settings.scss
@@ -70,7 +70,7 @@
     animation: none;
   }
 
-  @media(max-width: map-get($grid-breakpoints, md)-1) {
+  @media (max-width: map-get($grid-breakpoints, md)-1) {
     padding-right: 20px;
   }
 
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 7d59dd3b5d1..f4d568d02ac 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -33,7 +33,7 @@
     border-color: $gl-text-color;
 
     &:not(span):hover {
-      background-color: rgba($gl-text-color, .07);
+      background-color: rgba($gl-text-color, 0.07);
     }
   }
 
@@ -54,7 +54,7 @@
     border-color: $gl-text-color-secondary;
 
     &:not(span):hover {
-      background-color: rgba($gl-text-color-secondary, .07);
+      background-color: rgba($gl-text-color-secondary, 0.07);
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 3fc37e20c36..7a7f45c4907 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -60,13 +60,13 @@
 
       .todo-avatar,
       .todo-item {
-        opacity: .6;
+        opacity: 0.6;
       }
     }
 
     .todo-avatar,
     .todo-item {
-      opacity: .2;
+      opacity: 0.2;
     }
 
     .btn {
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 84c617c7ec0..7744fd814d0 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -10,7 +10,7 @@
     margin-bottom: 15px;
 
     &::before {
-      content: "Example";
+      content: 'Example';
       color: $ui-dev-kit-example-color;
     }
   }
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index bd777c66b56..053a33f78a1 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -1,8 +1,8 @@
-@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;
 
@@ -22,9 +22,15 @@
     height: 16px;
     background-size: cover;
 
-    &.gl-snippet-icon-doc-code { background-position: 0 0;  }
-    &.gl-snippet-icon-doc-text {  background-position: 0 -16px; }
-    &.gl-snippet-icon-download {  background-position: 0 -32px; }
+    &.gl-snippet-icon-doc-code {
+      background-position: 0 0;
+    }
+    &.gl-snippet-icon-doc-text {
+      background-position: 0 -16px;
+    }
+    &.gl-snippet-icon-download {
+      background-position: 0 -32px;
+    }
   }
 
   .blob-viewer {
author	Mike Greiling <mike@pixelcog.com>	2018-10-10 02:20:37 -0500
committer	Mike Greiling <mike@pixelcog.com>	2018-10-10 02:20:37 -0500
commit	3d0a6b1b16f9c8efaeb61a585b845bdf7ac05330 (patch)
tree	2ce6c19299fe504f22c6eb83221faa86ca1412cf /app/assets
parent	550f55745a3be5f86bafaf25b3bcc90beba8e2ac (diff)
download	gitlab-ce-prettify-stylesheets.tar.gz