Merge branch 'master' into 'ce-port-3959-mirroring-interface-improvements'

# Conflicts:
#   locale/gitlab.pot

35 files changed, 487 insertions, 316 deletions

diff --git a/app/assets/stylesheets/framework/avatar.scss b/app/assets/stylesheets/framework/avatar.scss
index c1ec11e434a..dddd07c798c 100644
--- a/app/assets/stylesheets/framework/avatar.scss
+++ b/app/assets/stylesheets/framework/avatar.scss
@@ -7,7 +7,7 @@
 .avatar-circle {
   float: left;
   margin-right: 15px;
-  border-radius: $avatar_radius;
+  border-radius: $avatar-radius;
   border: 1px solid $avatar-border;
   &.s16 { @include avatar-size(16px, 6px); }
   &.s18 { @include avatar-size(18px, 6px); }
@@ -69,7 +69,10 @@
 .identicon {
   text-align: center;
   vertical-align: top;
+  color: $identicon-fg-color;
+  background-color: $identicon-gray;
 
+  // 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; }
@@ -82,6 +85,15 @@
   &.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: $identicon-gray; }
 }
 
 .avatar-container {
@@ -110,7 +122,7 @@
   color: $white-light;
   border: 1px solid $avatar-border;
   border-radius: 1em;
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: 9px;
   line-height: 16px;
   text-align: center;
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 340fddd398b..7145a76db6d 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -353,3 +353,18 @@
 .flex-right {
   margin-left: auto;
 }
+
+.code-block {
+  background: $black;
+  color: $gray-darkest;
+  white-space: pre;
+  overflow-x: auto;
+  font-size: 12px;
+  border: 0;
+  padding: $grid-size;
+
+  code {
+    background-color: inherit;
+    padding: inherit;
+  }
+}
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 218e37602dd..c9865610b78 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -113,8 +113,6 @@ hr {
 
 .item-title { font-weight: $gl-font-weight-bold; }
 
-/** FLASH message **/
-.author_link,
 .author-link {
   color: $gl-link-color;
 }
@@ -372,11 +370,14 @@ img.emoji {
   margin-right: 10px;
 }
 
-.alert,
-.progress {
+.alert {
   margin-bottom: $gl-padding;
 }
 
+.progress {
+  height: 4px;
+}
+
 .project-item-select-holder {
   display: inline-block;
   position: relative;
@@ -468,3 +469,4 @@ img.emoji {
 .inline { display: inline-block; }
 .center { text-align: center; }
 .vertical-align-middle { vertical-align: middle; }
+.flex-align-self-center { align-self: center; }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 49a56cac14b..437fcff5c62 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -80,7 +80,7 @@ label {
   .form-control {
     height: 29px;
     background: $white-light;
-    font-family: $monospace_font;
+    font-family: $monospace-font;
   }
 
   .input-group-prepend .btn,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 2097bcebf69..e7e13d35d8e 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -567,9 +567,6 @@
   border-bottom: 1px solid $white-normal;
 
   .mx-auto {
-    margin: 8px 0;
-    text-align: center;
-
     .tanuki-logo,
     img {
       height: 36px;
diff --git a/app/assets/stylesheets/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 813a1711ea2..452e946f95f 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -9,8 +9,8 @@
     padding: 10px 0;
     border: 0;
     border-radius: 0;
-    font-family: $monospace_font;
-    font-size: $code_font_size;
+    font-family: $monospace-font;
+    font-size: $code-font-size;
     line-height: 19px;
     margin: 0;
     overflow: auto;
@@ -22,7 +22,7 @@
     code {
       display: inline-block;
       min-width: 100%;
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       white-space: normal;
       word-wrap: normal;
       padding: 0;
@@ -44,7 +44,7 @@
     float: left;
 
     a {
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       display: block;
       font-size: $code_font_size !important;
       min-height: 19px;
diff --git a/app/assets/stylesheets/framework/jquery.scss b/app/assets/stylesheets/framework/jquery.scss
index 300ba4f2de6..d1360a0c0eb 100644
--- a/app/assets/stylesheets/framework/jquery.scss
+++ b/app/assets/stylesheets/framework/jquery.scss
@@ -1,5 +1,5 @@
 .ui-widget {
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: $font-size-base;
 
   .ui-state-default {
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index d54490c87c6..4b67eab05b3 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -259,7 +259,7 @@ ul.controls {
       margin-right: 0;
     }
 
-    .author_link {
+    .author-link {
       .avatar-inline {
         margin-left: 0;
         margin-right: 0;
@@ -270,7 +270,7 @@ ul.controls {
 
   .issuable-pipeline-broken a,
   .issuable-pipeline-status a,
-  .author_link {
+  .author-link {
     display: flex;
   }
 }
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index 76ebfc22ef7..98bf26a5222 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -3,13 +3,13 @@
  * Mixins with fixed values
  */
 
-@mixin str-truncated($max_width: 82%) {
+@mixin str-truncated($max-width: 82%) {
   display: inline-block;
   overflow: hidden;
   text-overflow: ellipsis;
   vertical-align: top;
   white-space: nowrap;
-  max-width: $max_width;
+  max-width: $max-width;
 }
 
 /*
@@ -22,7 +22,7 @@
   border: 0;
   border-color: $md-area-border;
 
-  @supports(width: fit-content) {
+  @supports (width: fit-content) {
     display: block;
     width: fit-content;
   }
@@ -116,7 +116,7 @@
 
 /* http://phrappe.com/css/conditional-css-for-webkit-based-browsers/ */
 @mixin on-webkit-only {
-  @media screen and (-webkit-min-device-pixel-ratio:0) {
+  @media screen and (-webkit-min-device-pixel-ratio: 0) {
     @content;
   }
 }
@@ -164,14 +164,18 @@
   bottom: 12px;
   width: 43px;
   height: 30px;
-  transition-duration: .3s;
+  transition-duration: 0.3s;
   -webkit-transform: translateZ(0);
-  background: linear-gradient(to $gradient-direction, $gradient-color 45%, rgba($gradient-color, 0.4));
+  background: linear-gradient(
+    to $gradient-direction,
+    $gradient-color 45%,
+    rgba($gradient-color, 0.4)
+  );
 
   &.scrolling {
     visibility: visible;
     opacity: 1;
-    transition-duration: .3s;
+    transition-duration: 0.3s;
   }
 
   .fa {
@@ -233,6 +237,29 @@
   max-width: 100%;
 }
 
+@mixin build-loader-animation {
+  position: relative;
+  white-space: initial;
+
+  .dot {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin: auto auto 12px;
+    border-radius: 50%;
+    animation: blinking-dot 1s linear infinite;
+    background: $white-light;
+
+    &:nth-child(2) {
+      animation-delay: 0.33s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.66s;
+    }
+  }
+}
+
 @mixin borderless-status-icon($color) {
   svg {
     border: 1px solid $color;
diff --git a/app/assets/stylesheets/framework/sidebar.scss b/app/assets/stylesheets/framework/sidebar.scss
index 8c716400913..c4dbcf2ddc9 100644
--- a/app/assets/stylesheets/framework/sidebar.scss
+++ b/app/assets/stylesheets/framework/sidebar.scss
@@ -33,11 +33,11 @@
 
   @include media-breakpoint-up(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
-      padding-right: $gutter_collapsed_width;
+      padding-right: $gutter-collapsed-width;
     }
 
     .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
+      right: $gutter-collapsed-width;
     }
   }
 
@@ -67,21 +67,21 @@
 
   @include media-breakpoint-only(sm) {
     &:not(.wiki-sidebar):not(.build-sidebar):not(.issuable-bulk-update-sidebar) .content-wrapper {
-      padding-right: $gutter_collapsed_width;
+      padding-right: $gutter-collapsed-width;
     }
   }
 
   @include media-breakpoint-up(md) {
     .content-wrapper {
-      padding-right: $gutter_width;
+      padding-right: $gutter-width;
     }
 
     &:not(.with-overlay) .merge-request-tabs-holder.affix {
-      right: $gutter_width;
+      right: $gutter-width;
     }
 
     &.with-overlay .merge-request-tabs-holder.affix {
-      right: $gutter_collapsed_width;
+      right: $gutter-collapsed-width;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 9874c928604..473ca408c04 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -44,7 +44,7 @@
 
   // Single code lines should wrap
   code {
-    font-family: $monospace_font;
+    font-family: $monospace-font;
     white-space: pre-wrap;
     word-wrap: normal;
   }
@@ -179,6 +179,10 @@
     font-weight: inherit;
   }
 
+  a > code {
+    color: $gl-link-color;
+  }
+
   dd {
     margin-left: $gl-padding;
   }
@@ -321,7 +325,7 @@ h6 {
 
 /** CODE **/
 pre {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   display: block;
   padding: $gl-padding-8;
   margin: 0 0 $gl-padding-8;
@@ -342,7 +346,7 @@ code {
 }
 
 .monospace {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
 }
 
 .weight-normal {
@@ -381,7 +385,7 @@ code {
  *
  */
 textarea.js-gfm-input {
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   font-size: 13px;
 }
 
@@ -440,3 +444,5 @@ textarea {
     color: $placeholder-text-color;
   }
 }
+
+.lh-100 { line-height: 1; }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 6c2fdbe0608..56940a7564a 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -2,9 +2,9 @@
  * Layout
  */
 $grid-size: 8px;
-$gutter_collapsed_width: 62px;
-$gutter_width: 290px;
-$gutter_inner_width: 250px;
+$gutter-collapsed-width: 62px;
+$gutter-width: 290px;
+$gutter-inner-width: 250px;
 $sidebar-transition-duration: 0.3s;
 $sidebar-breakpoint: 1024px;
 $default-transition-duration: 0.15s;
@@ -233,8 +233,8 @@ $md-area-border: #ddd;
 /*
  * Code
  */
-$code_font_size: 90%;
-$code_line_height: 1.6;
+$code-font-size: 90%;
+$code-line-height: 1.6;
 
 /*
  * Tooltips
@@ -371,9 +371,9 @@ $diff-jagged-border-gradient-color: darken($white-normal, 8%);
 /*
  * Fonts
  */
-$monospace_font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
+$monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
   'Courier New', 'andale mono', 'lucida console', monospace;
-$regular_font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
+$regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
   'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 /*
@@ -487,6 +487,18 @@ $note-icon-gutter-width: 55px;
 $zen-control-color: #555;
 
 /*
+* Identicon
+*/
+$identicon-red: #ffebee;
+$identicon-purple: #f3e5f5;
+$identicon-indigo: #e8eaf6;
+$identicon-blue: #e3f2fd;
+$identicon-teal: #e0f2f1;
+$identicon-orange: #fbe9e7;
+$identicon-gray: $gray-darker;
+$identicon-fg-color: #555555;
+
+/*
 * Calendar
 */
 $calendar-hover-bg: #ecf3fe;
@@ -526,7 +538,7 @@ $issue-board-list-difference-md: $issue-board-list-difference-sm + $issue-boards
 /*
 * Avatar
 */
-$avatar_radius: 50%;
+$avatar-radius: 50%;
 $avatar-border: $gray-normal;
 $avatar-border-hover: $gray-darker;
 $avatar-background: $gray-lightest;
@@ -830,8 +842,10 @@ $secondary: $gray-light;
 $input-disabled-bg: $gray-light;
 $input-border-color: $theme-gray-200;
 $input-color: $gl-text-color;
-$font-family-sans-serif: $regular_font;
-$font-family-monospace: $monospace_font;
+$font-family-sans-serif: $regular-font;
+$font-family-monospace: $monospace-font;
 $input-line-height: 20px;
 $btn-line-height: 20px;
 $table-accent-bg: $gray-light;
+$card-border-color: $border-color;
+$card-cap-bg: $gray-light;
diff --git a/app/assets/stylesheets/mailers/highlighted_diff_email.scss b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
index 1835c4364d3..8b234a5a656 100644
--- a/app/assets/stylesheets/mailers/highlighted_diff_email.scss
+++ b/app/assets/stylesheets/mailers/highlighted_diff_email.scss
@@ -77,13 +77,13 @@ $highlighted-gc-bg: #eaf2f5;
 .code {
   background-color: $white-light;
   font-family: monospace;
-  font-size: $code_font_size;
+  font-size: $code-font-size;
   -premailer-cellpadding: 0;
   -premailer-cellspacing: 0;
   -premailer-width: 100%;
 
   > tr {
-    line-height: $code_line_height;
+    line-height: $code-line-height;
   }
 }
 
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 8b1227b9131..58ed5bf6455 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -1,3 +1,6 @@
+@import 'framework/variables';
+@import 'framework/mixins';
+
 .project-refs-form,
 .project-refs-target-form {
   display: inline-block;
@@ -74,6 +77,7 @@
     .ide-file-icon-holder {
       display: flex;
       align-items: center;
+      color: $theme-gray-700;
     }
 
     .ide-file-changed-icon {
@@ -161,12 +165,23 @@
       background-color: $white-light;
       border-bottom-color: $white-light;
     }
+
+    &:not(.disabled) {
+      .multi-file-tab {
+        cursor: pointer;
+      }
+    }
+
+    &.disabled {
+      .multi-file-tab-close {
+        cursor: default;
+      }
+    }
   }
 }
 
 .multi-file-tab {
   @include str-truncated(141px);
-  cursor: pointer;
 
   svg {
     vertical-align: middle;
@@ -241,6 +256,38 @@
     }
   }
 
+  .is-deleted {
+    .editor.modified {
+      .margin-view-overlays,
+      .lines-content,
+      .decorationsOverviewRuler {
+        // !important to override monaco inline styles
+        display: none !important;
+      }
+    }
+
+    .diffOverviewRuler.modified {
+      // !important to override monaco inline styles
+      display: none !important;
+    }
+  }
+
+  .is-added {
+    .editor.original {
+      .margin-view-overlays,
+      .lines-content,
+      .decorationsOverviewRuler {
+        // !important to override monaco inline styles
+        display: none !important;
+      }
+    }
+
+    .diffOverviewRuler.original {
+      // !important to override monaco inline styles
+      display: none !important;
+    }
+  }
+
   .monaco-diff-editor.vs {
     .editor.modified {
       box-shadow: none;
@@ -557,16 +604,21 @@
   }
 }
 
-.multi-file-addition,
-.multi-file-addition-solid {
+.ide-file-addition,
+.ide-file-addition-solid {
   color: $green-500;
 }
 
-.multi-file-modified,
-.multi-file-modified-solid {
+.ide-file-modified,
+.ide-file-modified-solid {
   color: $orange-500;
 }
 
+.ide-file-deletion,
+.ide-file-deletion-solid {
+  color: $red-500;
+}
+
 .multi-file-commit-list-collapsed {
   display: flex;
   flex-direction: column;
@@ -781,18 +833,21 @@
   }
 }
 
-.dragHandle {
+.drag-handle {
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 1px;
-  background-color: $white-dark;
+  width: 4px;
+
+  &:hover {
+    background-color: $white-normal;
+  }
 
-  &.dragright {
+  &.drag-right {
     right: 0;
   }
 
-  &.dragleft {
+  &.drag-left {
     left: 0;
   }
 }
@@ -961,7 +1016,7 @@
   overflow: hidden;
 
   .note-textarea {
-    font-family: $monospace_font;
+    font-family: $monospace-font;
   }
 }
 
@@ -1014,6 +1069,10 @@
   .ide-new-btn {
     margin-left: auto;
   }
+
+  button {
+    color: $gl-text-color;
+  }
 }
 
 .ide-sidebar-branch-title {
@@ -1318,6 +1377,7 @@
 
 .ide-entry-dropdown-toggle {
   padding: $gl-padding-4;
+  color: $gl-text-color;
   background-color: $theme-gray-100;
 
   &:hover {
@@ -1330,6 +1390,10 @@
     background-color: $blue-500;
     outline: 0;
   }
+
+  svg {
+    fill: currentColor;
+  }
 }
 
 .ide-new-btn .dropdown.show .ide-entry-dropdown-toggle {
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 5de53892fac..a68b47b1d02 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -63,7 +63,7 @@
     width: 100%;
 
     &.is-compact {
-      width: calc(100% - #{$gutter_width});
+      width: calc(100% - #{$gutter-width});
     }
   }
 }
@@ -205,7 +205,7 @@
 
 .board-title {
   margin: 0;
-  padding: 12px $gl-padding;
+  padding: $gl-padding-8 $gl-padding;
   font-size: 1em;
   border-bottom: 1px solid $border-color;
   display: flex;
diff --git a/app/assets/stylesheets/pages/builds.scss b/app/assets/stylesheets/pages/builds.scss
index f030189af06..e8158cd7f6b 100644
--- a/app/assets/stylesheets/pages/builds.scss
+++ b/app/assets/stylesheets/pages/builds.scss
@@ -9,25 +9,21 @@
   }
 }
 
-@keyframes blinking-dots {
+@keyframes blinking-dot {
   0% {
-    background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
+    opacity: 1;
   }
 
   25% {
-    background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 2), 24px 0 0 0 rgba($white-light, 0.2);
+    opacity: 0.4;
   }
 
   75% {
-    background-color: rgba($white-light, 0.4);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 1);
+    opacity: 0.4;
   }
 
   100% {
-    background-color: rgba($white-light, 1);
-    box-shadow: 12px 0 0 0 rgba($white-light, 0.2), 24px 0 0 0 rgba($white-light, 0.2);
+    opacity: 1;
   }
 }
 
@@ -182,12 +178,7 @@
   }
 
   .build-loader-animation {
-    position: relative;
-    width: 6px;
-    height: 6px;
-    margin: auto auto 12px 2px;
-    border-radius: 50%;
-    animation: blinking-dots 1s linear infinite;
+    @include build-loader-animation;
   }
 }
 
@@ -270,6 +261,7 @@
 
   .block {
     width: 100%;
+    word-break: break-word;
 
     &:last-child {
       border-bottom: 1px solid $border-gray-normal;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 63585e26022..bce83bf0dd0 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -1,9 +1,17 @@
-.commit-description {
-  background: none;
+%commit-description-base {
+  padding: $gl-padding-8 0 $gl-padding-8 $gl-padding-8;
+  margin-top: $gl-padding-8;
   border: 0;
-  padding: 0;
+  border-radius: unset;
+  background: none;
   word-break: normal;
-  white-space: pre-wrap;
+  overflow-x: auto;
+  border-left: 3px solid $white-dark;
+  color: $gl-text-color-secondary;
+}
+
+.commit-description {
+  @extend %commit-description-base;
 }
 
 .js-details-expand {
@@ -79,7 +87,7 @@
 .commit-message-container {
   background-color: $body-bg;
   position: relative;
-  font-family: $monospace_font;
+  font-family: $monospace-font;
   $left: 12px;
   overflow: hidden; // See https://gitlab.com/gitlab-org/gitlab-ce/issues/13987
   .max-width-marker {
@@ -175,11 +183,17 @@
   justify-content: space-between;
   align-items: start;
   flex-grow: 1;
+  min-width: 0;
+
+  .project_namespace {
+    color: $gl-text-color-secondary;
+  }
 }
 
 .commit-content {
   padding-right: 10px;
   white-space: normal;
+  overflow: hidden;
 
   .commit-title {
     display: flex;
@@ -270,17 +284,9 @@
   }
 
   .commit-row-description {
-    font-size: 14px;
-    padding: 0 0 0 $gl-padding-8;
-    border: 0;
+    @extend %commit-description-base;
     display: none;
-    white-space: pre-wrap;
-    word-break: normal;
-    color: $gl-text-color-secondary;
-    background: none;
-    font-family: inherit;
-    border-left: 2px solid $theme-gray-300;
-    border-radius: unset;
+    flex: 1;
 
     a {
       color: $gl-text-color;
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index a22c666a525..e2c0a7a6225 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -368,7 +368,7 @@
 
       .fa {
         color: $gl-text-color-secondary;
-        font-size: $code_font_size;
+        font-size: $code-font-size;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/detail_page.scss b/app/assets/stylesheets/pages/detail_page.scss
index 2e007c52592..37ed5ae674a 100644
--- a/app/assets/stylesheets/pages/detail_page.scss
+++ b/app/assets/stylesheets/pages/detail_page.scss
@@ -10,7 +10,7 @@
   }
 
   .issue_created_ago,
-  .author_link {
+  .author-link {
     white-space: nowrap;
   }
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 5e39bbb9890..591e21243ed 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -16,6 +16,7 @@
 
     svg {
       vertical-align: middle;
+      top: -1px;
     }
   }
 
@@ -56,7 +57,7 @@
 
     table {
       width: 100%;
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       border: 0;
       border-collapse: separate;
       margin: 0;
@@ -73,8 +74,8 @@
       }
 
       .line_holder td {
-        line-height: $code_line_height;
-        font-size: $code_font_size;
+        line-height: $code-line-height;
+        font-size: $code-font-size;
 
         &.noteable_line {
           position: relative;
diff --git a/app/assets/stylesheets/pages/editor.scss b/app/assets/stylesheets/pages/editor.scss
index 437621299e0..ddd1f8cc98a 100644
--- a/app/assets/stylesheets/pages/editor.scss
+++ b/app/assets/stylesheets/pages/editor.scss
@@ -84,7 +84,7 @@
   .soft-wrap-toggle {
     display: inline-block;
     vertical-align: top;
-    font-family: $regular_font;
+    font-family: $regular-font;
   }
 
   .soft-wrap-toggle {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 8915b323b3c..8a074017344 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -478,7 +478,7 @@
     }
 
     .deploy-info-text-link {
-      font-family: $monospace_font;
+      font-family: $monospace-font;
       fill: $gl-link-color;
 
       &:hover {
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index 84da9180f93..49d8a5d959b 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -31,3 +31,61 @@
     color: $gl-text-red;
   }
 }
+
+.svg-graph-container {
+  width: 100%;
+
+  .axis-tick {
+    opacity: 0.4;
+  }
+
+  .tick-text {
+    fill: $gl-text-color-secondary;
+  }
+
+  .x-axis-text {
+    fill: $theme-gray-900;
+  }
+
+  .bar-rect {
+    fill: rgba($blue-500, 0.1);
+    stroke: $blue-500;
+  }
+
+  .bar-rect:hover {
+    fill: rgba($blue-700, 0.3);
+  }
+
+  .y-axis-label {
+    line {
+      stroke: $stat-graph-axis-fill;
+    }
+
+    text {
+      font-weight: bold;
+      font-size: 12px;
+      fill: $theme-gray-800;
+    }
+  }
+}
+
+.svg-graph-container-with-grab {
+  cursor: grab;
+  cursor: -webkit-grab;
+}
+
+.svg-graph-container-grabbed {
+  cursor: grabbing;
+  cursor: -webkit-grabbing;
+}
+
+@keyframes flickerAnimation {
+  0% { opacity: 1; }
+  50% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.animate-flicker {
+  animation: flickerAnimation 1.5s infinite;
+  fill: $theme-gray-500;
+}
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index f9fd9f1ab8b..d5ae2b673d9 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -166,7 +166,7 @@
     border-bottom: 1px solid $border-gray-normal;
     // This prevents the mess when resizing the sidebar
     // of elements repositioning themselves..
-    width: $gutter_inner_width;
+    width: $gutter-inner-width;
     // --
 
     &.issuable-sidebar-header {
@@ -197,7 +197,7 @@
     }
 
     &.assignee {
-      .author_link {
+      .author-link {
         display: block;
         padding-left: 42px;
         position: relative;
@@ -290,7 +290,7 @@
   }
 
   &.right-sidebar-expanded {
-    width: $gutter_width;
+    width: $gutter-width;
 
     .value {
       line-height: 1;
@@ -377,11 +377,11 @@
       display: block;
     }
 
-    width: $gutter_collapsed_width;
+    width: $gutter-collapsed-width;
     padding: 0;
 
     .block {
-      width: $gutter_collapsed_width - 2px;
+      width: $gutter-collapsed-width - 2px;
       padding: 15px 0 0;
       border-bottom: 0;
       overflow: hidden;
@@ -486,7 +486,7 @@
       padding-bottom: 0;
       margin-bottom: 10px;
 
-      .author_link {
+      .author-link {
         padding-left: 0;
 
         .avatar {
@@ -595,7 +595,7 @@
   margin: 16px 0 0;
   font-size: 85%;
 
-  .author_link {
+  .author-link {
     color: $gray-darkest;
   }
 }
@@ -620,7 +620,7 @@
     padding-right: 0;
   }
 
-  .author_link {
+  .author-link {
     display: block;
   }
 
@@ -834,17 +834,7 @@
   }
 
   .compare-meter {
-    &.within_estimate {
-      .meter-fill {
-        background: $gl-primary;
-      }
-    }
-
     &.over_estimate {
-      .meter-fill {
-        background: $red-500;
-      }
-
       .time-remaining,
       .compare-value.spent {
         color: $red-500;
@@ -852,18 +842,6 @@
     }
   }
 
-  .meter-container {
-    background: $border-gray-light;
-    border-radius: 3px;
-
-    .meter-fill {
-      max-width: 100%;
-      height: 5px;
-      border-radius: 3px;
-      background: $gl-primary;
-    }
-  }
-
   .compare-display-container {
     display: flex;
     justify-content: space-between;
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 19fb99bfa93..212e5979273 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -12,7 +12,7 @@
     }
 
     .issuable-meta {
-      .author_link {
+      .author-link {
         display: inline-block;
       }
 
diff --git a/app/assets/stylesheets/pages/issues/issue_count_badge.scss b/app/assets/stylesheets/pages/issues/issue_count_badge.scss
index ccb62bfed18..4fba89e956b 100644
--- a/app/assets/stylesheets/pages/issues/issue_count_badge.scss
+++ b/app/assets/stylesheets/pages/issues/issue_count_badge.scss
@@ -1,29 +1,11 @@
 .issue-count-badge {
   display: inline-flex;
-  align-items: stretch;
-  height: 24px;
-}
-
-.issue-count-badge-count {
-  display: flex;
-  align-items: center;
-  padding-right: 10px;
-  padding-left: 10px;
-  border: 1px solid $border-color;
   border-radius: $border-radius-base;
-  line-height: 1;
-
-  &.has-btn {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+  border: 1px solid $border-color;
+  padding: 5px $gl-padding-8;
 }
 
-.issue-count-badge-add-button {
-  display: flex;
+.issue-count-badge-count {
+  display: inline-flex;
   align-items: center;
-  border: 1px solid $border-color;
-  border-radius: 0 $border-radius-base $border-radius-base 0;
-  line-height: 1;
 }
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index c1b1d2e028d..8a4a2caa6c9 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -237,7 +237,7 @@
     }
 
     .login-page-broadcast {
-      margin-top: 50px;
+      margin-top: 40px;
     }
 
     .navless-container {
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index e76525fdbf6..d26659701e1 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -1,167 +1,162 @@
 // 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-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-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-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-origin-chosen  : #add8ff,
+  white-line-origin-chosen    : #e0f0ff,
+  white-button-origin-chosen  : #268ced,
 
-  white_header_not_chosen     : #f0f0f0,
-  white_line_not_chosen       : $gray-light,
+  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_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_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_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_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),
 
-  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_head_neutral   : rgba(#a6e22e, .25),
-  monokai_line_head_neutral     : rgba(#a6e22e, .1),
-  monokai_button_head_neutral   : #376b20,
+  monokai-header-origin-neutral : rgba(#60d9f1, .35),
+  monokai-line-origin-neutral   : rgba(#60d9f1, .15),
+  monokai-button-origin-neutral : #38848c,
 
-  monokai_header_head_chosen    : rgba(#a6e22e, .4),
-  monokai_line_head_chosen      : rgba(#a6e22e, .25),
-  monokai_button_head_chosen    : #39800d,
+  monokai-header-origin-chosen  : rgba(#60d9f1, .5),
+  monokai-line-origin-chosen    : rgba(#60d9f1, .35),
+  monokai-button-origin-chosen  : #3ea4b2,
 
-  monokai_header_origin_neutral : rgba(#60d9f1, .35),
-  monokai_line_origin_neutral   : rgba(#60d9f1, .15),
-  monokai_button_origin_neutral : #38848c,
+  monokai-header-not-chosen     : rgba(#76715d, .24),
+  monokai-line-not-chosen       : rgba(#76715d, .1),
 
-  monokai_header_origin_chosen  : rgba(#60d9f1, .5),
-  monokai_line_origin_chosen    : rgba(#60d9f1, .35),
-  monokai_button_origin_chosen  : #3ea4b2,
+  solarized-light-header-head-neutral   : rgba(#859900, .37),
+  solarized-light-line-head-neutral     : rgba(#859900, .2),
+  solarized-light-button-head-neutral   : #afb262,
 
-  monokai_header_not_chosen     : rgba(#76715d, .24),
-  monokai_line_not_chosen       : rgba(#76715d, .1),
+  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_head_neutral   : rgba(#859900, .37),
-  solarized_light_line_head_neutral     : rgba(#859900, .2),
-  solarized_light_button_head_neutral   : #afb262,
+  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_head_chosen    : rgba(#859900, .5),
-  solarized_light_line_head_chosen      : rgba(#859900, .37),
-  solarized_light_button_head_chosen    : #94993d,
+  solarized-light-header-not-chosen     : rgba(#839496, .37),
+  solarized-light-line-not-chosen       : rgba(#839496, .2),
 
-  solarized_light_header_origin_neutral : rgba(#2878c9, .37),
-  solarized_light_line_origin_neutral   : rgba(#2878c9, .15),
-  solarized_light_button_origin_neutral : #60a1bf,
+  solarized-dark-header-head-neutral   : rgba(#859900, .35),
+  solarized-dark-line-head-neutral     : rgba(#859900, .15),
+  solarized-dark-button-head-neutral   : #376b20,
 
-  solarized_light_header_origin_chosen  : rgba(#2878c9, .6),
-  solarized_light_line_origin_chosen    : rgba(#2878c9, .37),
-  solarized_light_button_origin_chosen  : #2482b2,
+  solarized-dark-header-head-chosen    : rgba(#859900, .5),
+  solarized-dark-line-head-chosen      : rgba(#859900, .35),
+  solarized-dark-button-head-chosen    : #39800d,
 
-  solarized_light_header_not_chosen     : rgba(#839496, .37),
-  solarized_light_line_not_chosen       : rgba(#839496, .2),
+  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_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)
+  solarized-dark-header-not-chosen     : rgba(#839496, .25),
+  solarized-dark-line-not-chosen       : rgba(#839496, .15)
 );
 // scss-lint:enable ColorVariable
 
-
 @mixin color-scheme($color) {
   .header.line_content,
   .diff-line-num {
     &.origin {
-      background-color: map-get($colors, #{$color}_header_origin_neutral);
-      border-color: map-get($colors, #{$color}_header_origin_neutral);
+      background-color: map-get($colors, #{$color}-header-origin-neutral);
+      border-color: map-get($colors, #{$color}-header-origin-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}_button_origin_neutral);
-        border-color: darken(map-get($colors, #{$color}_button_origin_neutral), 15);
+        background-color: map-get($colors, #{$color}-button-origin-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-origin-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}_header_origin_chosen);
-        border-color: map-get($colors, #{$color}_header_origin_chosen);
+        background-color: map-get($colors, #{$color}-header-origin-chosen);
+        border-color: map-get($colors, #{$color}-header-origin-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}_button_origin_chosen);
-          border-color: darken(map-get($colors, #{$color}_button_origin_chosen), 15);
+          background-color: map-get($colors, #{$color}-button-origin-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-origin-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_header_not_chosen);
-        border-color: map-get($colors, #{$color}_header_not_chosen);
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}_button_origin_neutral), 15);
-          border-color: map-get($colors, #{$color}_button_origin_neutral);
+          background-color: lighten(map-get($colors, #{$color}-button-origin-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-origin-neutral);
         }
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}_header_head_neutral);
-      border-color: map-get($colors, #{$color}_header_head_neutral);
+      background-color: map-get($colors, #{$color}-header-head-neutral);
+      border-color: map-get($colors, #{$color}-header-head-neutral);
 
       button {
-        background-color: map-get($colors, #{$color}_button_head_neutral);
-        border-color: darken(map-get($colors, #{$color}_button_head_neutral), 15);
+        background-color: map-get($colors, #{$color}-button-head-neutral);
+        border-color: darken(map-get($colors, #{$color}-button-head-neutral), 15);
       }
 
       &.selected {
-        background-color: map-get($colors, #{$color}_header_head_chosen);
-        border-color: map-get($colors, #{$color}_header_head_chosen);
+        background-color: map-get($colors, #{$color}-header-head-chosen);
+        border-color: map-get($colors, #{$color}-header-head-chosen);
 
         button {
-          background-color: map-get($colors, #{$color}_button_head_chosen);
-          border-color: darken(map-get($colors, #{$color}_button_head_chosen), 15);
+          background-color: map-get($colors, #{$color}-button-head-chosen);
+          border-color: darken(map-get($colors, #{$color}-button-head-chosen), 15);
         }
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_header_not_chosen);
-        border-color: map-get($colors, #{$color}_header_not_chosen);
+        background-color: map-get($colors, #{$color}-header-not-chosen);
+        border-color: map-get($colors, #{$color}-header-not-chosen);
 
         button {
-          background-color: lighten(map-get($colors, #{$color}_button_head_neutral), 15);
-          border-color: map-get($colors, #{$color}_button_head_neutral);
+          background-color: lighten(map-get($colors, #{$color}-button-head-neutral), 15);
+          border-color: map-get($colors, #{$color}-button-head-neutral);
         }
       }
     }
@@ -169,32 +164,31 @@ $colors: (
 
   .line_content {
     &.origin {
-      background-color: map-get($colors, #{$color}_line_origin_neutral);
+      background-color: map-get($colors, #{$color}-line-origin-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}_line_origin_chosen);
+        background-color: map-get($colors, #{$color}-line-origin-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_line_not_chosen);
+        background-color: map-get($colors, #{$color}-line-not-chosen);
       }
     }
 
     &.head {
-      background-color: map-get($colors, #{$color}_line_head_neutral);
+      background-color: map-get($colors, #{$color}-line-head-neutral);
 
       &.selected {
-        background-color: map-get($colors, #{$color}_line_head_chosen);
+        background-color: map-get($colors, #{$color}-line-head-chosen);
       }
 
       &.unselected {
-        background-color: map-get($colors, #{$color}_line_not_chosen);
+        background-color: map-get($colors, #{$color}-line-not-chosen);
       }
     }
   }
 }
 
-
 #conflicts {
 
   .white {
@@ -210,11 +204,11 @@ $colors: (
   }
 
   .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 {
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c8349a4ef79..a355ceea7a0 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -15,6 +15,39 @@
   }
 }
 
+.mr-widget-border-top {
+  border-top: 1px solid $border-color;
+}
+
+.media-section {
+  @include media-breakpoint-down(md) {
+    align-items: flex-start;
+
+    .media-body {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  .code-text {
+    @include media-breakpoint-up(lg) {
+      align-self: center;
+      flex: 1;
+    }
+  }
+}
+
+.mr-widget-section {
+  .media {
+    align-items: center;
+  }
+
+  .code-text {
+    flex: 1;
+  }
+}
+
+
 .mr-widget-heading {
   position: relative;
   border: 1px solid $border-color;
@@ -54,6 +87,14 @@
     padding: 0;
   }
 
+  .grouped-security-reports {
+    padding: 0;
+
+    > .media {
+      padding: $gl-padding;
+    }
+  }
+
   form {
     margin-bottom: 0;
 
@@ -208,7 +249,7 @@
         position: absolute;
         content: '...';
         right: 0;
-        font-family: $regular_font;
+        font-family: $regular-font;
         background-color: $gray-light;
       }
     }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 5e5696b1602..dcf590e7331 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -42,7 +42,7 @@
   display: block;
   padding: 10px 0;
   color: $gl-text-color;
-  font-family: $regular_font;
+  font-family: $regular-font;
   border: 0;
 
   &:focus {
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 32d14049067..7fc2936c5e6 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -328,7 +328,7 @@ ul.notes {
   }
 
   .notes_holder {
-    font-family: $regular_font;
+    font-family: $regular-font;
 
     td {
       border: 1px solid $white-normal;
@@ -403,7 +403,7 @@ ul.notes {
     }
   }
 
-  .author_link {
+  .author-link {
     color: $gl-text-color;
   }
 }
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index aa83e5bdebc..944421604fe 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -490,30 +490,31 @@
     margin-bottom: 0;
   }
 
+  .tab-pane {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
   .template-option {
-    padding: $gl-padding $gl-padding $gl-padding ($gl-padding * 4);
-    position: relative;
+    .logo {
+      .btn-template-icon {
+        width: 40px !important;
+      }
+    }
+
+    padding: 16px 0;
 
     &:not(:first-child) {
       border-top: 1px solid $border-color;
     }
 
-    .btn-template-icon {
-      position: absolute;
-      left: $gl-padding;
-      top: $gl-padding;
+    .controls {
+      margin-left: auto;
     }
-  }
-
-  .template-title {
-    font-size: 16px;
-  }
 
-  .template-description {
-    margin: 6px 0 12px;
   }
 
-  .template-button {
+  .choose-template {
     input {
       position: absolute;
       clip: rect(0, 0, 0, 0);
@@ -540,8 +541,6 @@
     }
 
     .selected-icon {
-      padding-right: $gl-padding;
-
       svg {
         display: none;
         top: 7px;
@@ -754,6 +753,11 @@
   }
 }
 
+.repository-languages-bar {
+  height: 6px;
+  margin-bottom: 8px;
+}
+
 pre.light-well {
   border-color: $well-light-border;
 }
diff --git a/app/assets/stylesheets/pages/reports.scss b/app/assets/stylesheets/pages/reports.scss
index ce253ebb71f..ecd51aa06a4 100644
--- a/app/assets/stylesheets/pages/reports.scss
+++ b/app/assets/stylesheets/pages/reports.scss
@@ -75,31 +75,27 @@
   margin: 0;
 
   .license-item {
-    line-height: $gl-padding-24;
+    line-height: $gl-padding-32;
 
-    .license-dependencies {
-      color: $gl-text-color-tertiary;
+    .license-packages {
+      font-size: $label-font-size;
     }
 
-    .btn-show-all-packages {
-      line-height: $gl-btn-line-height;
-      margin-bottom: 2px;
-    }
   }
 }
 
 .report-block-list-icon {
   display: flex;
 
-  &.failed {
+  &.failed svg {
     color: $red-500;
   }
 
-  &.success {
+  &.success svg {
     color: $green-500;
   }
 
-  &.neutral {
+  &.neutral svg {
     color: $theme-gray-700;
   }
 
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index efd26cb1f81..1cc26d40ba9 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -109,24 +109,6 @@
         line-height: 21px;
       }
 
-      .last-commit {
-        @include str-truncated(506px);
-
-        .fa-angle-right {
-          margin-left: 5px;
-        }
-
-        @include media-breakpoint-only(md) {
-          @include str-truncated(450px);
-        }
-
-      }
-
-      .commit-history-link-spacer {
-        margin: 0 10px;
-        color: $white-normal;
-      }
-
       &:hover:not(.tree-truncated-warning) {
         td {
           background-color: $row-hover;
diff --git a/app/assets/stylesheets/snippets.scss b/app/assets/stylesheets/snippets.scss
index 0d6b0735f70..bd777c66b56 100644
--- a/app/assets/stylesheets/snippets.scss
+++ b/app/assets/stylesheets/snippets.scss
@@ -6,9 +6,9 @@
 
   $border-style: 1px solid $border-color;
 
-  font-family: $regular_font;
+  font-family: $regular-font;
   font-size: $gl-font-size;
-  line-height: $code_line_height;
+  line-height: $code-line-height;
   color: $gl-text-color;
   margin: 20px;
   font-weight: 200;
@@ -22,8 +22,8 @@
     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-doc-code { background-position: 0 0;  }
+    &.gl-snippet-icon-doc-text {  background-position: 0 -16px; }
     &.gl-snippet-icon-download {  background-position: 0 -32px; }
   }
 
@@ -48,9 +48,9 @@
         padding: 10px;
         border: 0;
         border-radius: 0;
-        font-family: $monospace_font;
-        font-size: $code_font_size;
-        line-height: $code_line_height;
+        font-family: $monospace-font;
+        font-size: $code-font-size;
+        line-height: $code-line-height;
         margin: 0;
         overflow: auto;
         overflow-y: hidden;
@@ -66,10 +66,10 @@
       float: left;
 
       .diff-line-num {
-        font-family: $monospace_font;
+        font-family: $monospace-font;
         display: block;
-        font-size: $code_font_size;
-        min-height: $code_line_height;
+        font-size: $code-font-size;
+        min-height: $code-line-height;
         white-space: nowrap;
         color: $black-transparent;
         min-width: 30px;