12 files changed, 57 insertions, 34 deletions

diff --git a/app/assets/stylesheets/framework/awards.scss b/app/assets/stylesheets/framework/awards.scss
index 702276780e9..7a95db5976d 100644
--- a/app/assets/stylesheets/framework/awards.scss
+++ b/app/assets/stylesheets/framework/awards.scss
@@ -148,10 +148,7 @@
 
     .award-control-icon svg {
       background: $award-emoji-positive-add-bg;
-
-      path {
-        fill: $award-emoji-positive-add-lines;
-      }
+      fill: $award-emoji-positive-add-lines;
     }
 
     .award-control-icon-neutral {
diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index f26b1fddae5..43b7c26b272 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -348,6 +348,7 @@
 
     @include media-breakpoint-down(xs) {
       width: 100%;
+      margin: $btn-side-margin 0;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index c4296c7a88a..219fd99b097 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -207,6 +207,10 @@
     @include btn-with-margin;
   }
 
+  &.btn-icon {
+    color: $gl-gray-700;
+  }
+
   .fa-caret-down,
   .fa-chevron-down {
     margin-left: 5px;
@@ -218,6 +222,25 @@
     }
   }
 
+  &.btn-text-field {
+    width: 100%;
+    text-align: left;
+    padding: 6px 16px;
+    border-color: $border-color;
+    color: $gray-darkest;
+    background-color: $gray-light;
+
+    &:hover,
+    &:active,
+    &:focus {
+      cursor: text;
+      box-shadow: none;
+      border-color: lighten($blue-300, 20%);
+      color: $gray-darkest;
+      background-color: $gray-light;
+    }
+  }
+
   &.dot-highlight::after {
     content: '';
     background-color: $blue-500;
@@ -335,25 +358,6 @@
   }
 }
 
-.btn-text-field {
-  width: 100%;
-  text-align: left;
-  padding: 6px 16px;
-  border-color: $border-color;
-  color: $gray-darkest;
-  background-color: $gray-light;
-
-  &:hover,
-  &:active,
-  &:focus {
-    cursor: text;
-    box-shadow: none;
-    border-color: lighten($blue-300, 20%);
-    color: $gray-darkest;
-    background-color: $gray-light;
-  }
-}
-
 .btn-build {
   margin-left: 10px;
 
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index fa753b13e5f..626c8f92d1d 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -33,6 +33,11 @@
   color: $brand-danger;
 }
 
+.text-danger-muted,
+.text-danger-muted:hover {
+  color: $red-300;
+}
+
 .text-warning,
 .text-warning:hover {
   color: $brand-warning;
@@ -345,6 +350,7 @@ img.emoji {
 /** COMMON CLASSES **/
 .prepend-top-0 { margin-top: 0; }
 .prepend-top-2 { margin-top: 2px; }
+.prepend-top-4 { margin-top: $gl-padding-4; }
 .prepend-top-5 { margin-top: 5px; }
 .prepend-top-8 { margin-top: $grid-size; }
 .prepend-top-10 { margin-top: 10px; }
@@ -365,6 +371,7 @@ img.emoji {
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }
 .append-bottom-0 { margin-bottom: 0; }
+.append-bottom-4 { margin-bottom: $gl-padding-4; }
 .append-bottom-5 { margin-bottom: 5px; }
 .append-bottom-8 { margin-bottom: $grid-size; }
 .append-bottom-10 { margin-bottom: 10px; }
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 2e7f25d975e..6f103e4e89a 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -322,15 +322,15 @@
   width: $contextual-sidebar-width - 1px;
   transition: width $sidebar-transition-duration;
   position: fixed;
+  height: $toggle-sidebar-height;
   bottom: 0;
-  padding: $gl-padding;
+  padding: 0 $gl-padding;
   background-color: $gray-light;
   border: 0;
   border-top: 1px solid $border-color;
   color: $gl-text-color-secondary;
   display: flex;
   align-items: center;
-  line-height: 1;
 
   svg {
     margin-right: 8px;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 53f198b47c6..6bdcb20210b 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -36,7 +36,6 @@
     text-align: left;
     padding: 10px $gl-padding;
     word-wrap: break-word;
-    border-radius: $border-radius-default $border-radius-default 0 0;
 
     &.file-title-clear {
       padding-left: 0;
diff --git a/app/assets/stylesheets/framework/images.scss b/app/assets/stylesheets/framework/images.scss
index 1e93bf2b751..a20920e2503 100644
--- a/app/assets/stylesheets/framework/images.scss
+++ b/app/assets/stylesheets/framework/images.scss
@@ -39,7 +39,7 @@
 svg {
   fill: currentColor;
 
-  $svg-sizes: 8 10 12 16 18 24 32 48 72;
+  $svg-sizes: 8 10 12 14 16 18 24 32 48 72;
   @each $svg-size in $svg-sizes {
     &.s#{$svg-size} {
       @include svg-size(#{$svg-size}px);
diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss
index c030d75f5a4..9837b1a6bd0 100644
--- a/app/assets/stylesheets/framework/mixins.scss
+++ b/app/assets/stylesheets/framework/mixins.scss
@@ -291,7 +291,7 @@
 /*
 * Mixin that handles the position of the controls placed on the top bar
 */
-@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size) {
+@mixin build-controllers($control-font-size, $flex-direction, $with-grow, $flex-grow-size, $svg-display: 'block', $svg-top: '2px') {
   display: flex;
   font-size: $control-font-size;
   justify-content: $flex-direction;
@@ -304,8 +304,9 @@
   svg {
     width: 15px;
     height: 15px;
-    display: block;
+    display: $svg-display;
     fill: $gl-text-color;
+    top: $svg-top;
   }
 
   .controllers-buttons {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index 381c0290d32..7f0edd88dfb 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -243,6 +243,8 @@
 
 .user-result {
   min-height: 24px;
+  display: flex;
+  align-items: center;
 
   .user-image {
     float: left;
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index 339388392df..6954e6599b1 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -147,3 +147,9 @@ table {
     }
   }
 }
+
+.top-area + .content-list {
+  th {
+    border-top: 0;
+  }
+}
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index dfb145debe7..4a311da1675 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -1,7 +1,7 @@
 .timeline {
-  @include basic-list;
   margin: 0;
   padding: 0;
+  list-style: none;
 
   &::before {
     @include notes-media('max', map-get($grid-breakpoints, sm)) {
@@ -26,10 +26,8 @@
 }
 
 .timeline-entry {
-  border-color: $white-normal;
   color: $gl-text-color;
-  border-bottom: 1px solid $border-white-light;
-  background: $white-light;
+  background-color: $white-light;
 
   .timeline-entry-inner {
     position: relative;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index ad66a0365ed..f4540146a25 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -10,6 +10,7 @@ $sidebar-breakpoint: 1024px;
 $default-transition-duration: 0.15s;
 $contextual-sidebar-width: 220px;
 $contextual-sidebar-collapsed-width: 50px;
+$toggle-sidebar-height: 48px;
 
 /*
  * Color schema
@@ -194,6 +195,7 @@ $well-light-text-color: #5b6169;
  * Text
  */
 $gl-font-size: 14px;
+$gl-font-size-xs: 11px;
 $gl-font-size-small: 12px;
 $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
@@ -268,6 +270,7 @@ $flash-height: 52px;
 $context-header-height: 60px;
 $breadcrumb-min-height: 48px;
 $project-title-row-height: 24px;
+$gl-line-height: 16px;
 
 /*
 * Common component specific colors
@@ -438,7 +441,7 @@ $ci-skipped-color: #888;
 * Boards
 */
 $issue-boards-font-size: 14px;
-$issue-boards-card-shadow: rgba(186, 186, 186, 0.5);
+$issue-boards-card-shadow: rgba(0, 0, 0, 0.1);
 /*
  The following heights are used in boards.scss and are used for calculation of the board height.
  They probably should be derived in a smarter way.
@@ -638,3 +641,8 @@ Modals
 $modal-body-height: 134px;
 
 $priority-label-empty-state-width: 114px;
+
+/*
+Issues Analytics
+*/
+$issues-analytics-popover-boarder-color: rgba(0, 0, 0, 0.15);