10 files changed, 293 insertions, 74 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 0115f542c88..88b174491dd 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -497,6 +497,10 @@ fieldset[disabled] .btn,
   }
 }
 
+[readonly] {
+  cursor: default;
+}
+
 .btn-no-padding {
   padding: 0;
 }
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 996e5c1512d..e5197e27b82 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -305,14 +305,6 @@ img.emoji {
   margin-bottom: 10px;
 }
 
-.btn-sign-in {
-  text-shadow: none;
-
-  @include media-breakpoint-up(sm) {
-    margin-top: 8px;
-  }
-}
-
 .side-filters {
   fieldset {
     margin-bottom: 15px;
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 0ee5748952a..551a7e852ae 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -299,6 +299,7 @@
     height: 14px;
     width: 14px;
     vertical-align: middle;
+    margin-bottom: 4px;
   }
 
   .dropdown-toggle-text {
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index c76ea532912..03520f42997 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -170,7 +170,7 @@ label {
 }
 
 .form-control::-webkit-input-placeholder {
-  color: $gl-text-color-secondary;
+  color: $placeholder-text-color;
 }
 
 .input-group {
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index 14dd3879bdc..b40d02f381a 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -3,26 +3,26 @@
  */
 
 @mixin gitlab-theme(
-  $color-100,
-  $color-200,
-  $color-500,
-  $color-700,
-  $color-800,
-  $color-900,
+  $location-badge-color,
+  $search-and-nav-links,
+  $active-tab-border,
+  $border-and-box-shadow,
+  $sidebar-text,
+  $nav-svg-color,
   $color-alternate
 ) {
   // Header
 
   .navbar-gitlab {
-    background-color: $color-900;
+    background-color: $nav-svg-color;
 
     .navbar-collapse {
-      color: $color-200;
+      color: $search-and-nav-links;
     }
 
     .container-fluid {
       .navbar-toggler {
-        border-left: 1px solid lighten($color-700, 10%);
+        border-left: 1px solid lighten($border-and-box-shadow, 10%);
       }
     }
 
@@ -31,40 +31,40 @@
       > li {
         > a:hover,
         > a:focus {
-          background-color: rgba($color-200, 0.2);
+          background-color: rgba($search-and-nav-links, 0.2);
         }
 
         &.active > a,
         &.dropdown.show > a {
-          color: $color-900;
+          color: $nav-svg-color;
           background-color: $color-alternate;
         }
 
         &.line-separator {
-          border-left: 1px solid rgba($color-200, 0.2);
+          border-left: 1px solid rgba($search-and-nav-links, 0.2);
         }
       }
     }
 
     .navbar-sub-nav {
-      color: $color-200;
+      color: $search-and-nav-links;
     }
 
     .nav {
       > li {
-        color: $color-200;
+        color: $search-and-nav-links;
 
         > a {
           &.header-user-dropdown-toggle {
             .header-user-avatar {
-              border-color: $color-200;
+              border-color: $search-and-nav-links;
             }
           }
 
           &:hover,
           &:focus {
             @include media-breakpoint-up(sm) {
-              background-color: rgba($color-200, 0.2);
+              background-color: rgba($search-and-nav-links, 0.2);
             }
 
             svg {
@@ -75,12 +75,12 @@
 
         &.active > a,
         &.dropdown.show > a {
-          color: $color-900;
+          color: $nav-svg-color;
           background-color: $color-alternate;
 
           &:hover {
             svg {
-              fill: $color-900;
+              fill: $nav-svg-color;
             }
           }
         }
@@ -88,7 +88,7 @@
         .impersonated-user,
         .impersonated-user:hover {
           svg {
-            fill: $color-900;
+            fill: $nav-svg-color;
           }
         }
       }
@@ -99,34 +99,34 @@
     > a {
       &:hover,
       &:focus {
-        background-color: rgba($color-200, 0.2);
+        background-color: rgba($search-and-nav-links, 0.2);
       }
     }
   }
 
   .search {
     form {
-      background-color: rgba($color-200, 0.2);
+      background-color: rgba($search-and-nav-links, 0.2);
 
       &:hover {
-        background-color: rgba($color-200, 0.3);
+        background-color: rgba($search-and-nav-links, 0.3);
       }
     }
 
     .location-badge {
-      color: $color-100;
-      background-color: rgba($color-200, 0.1);
-      border-right: 1px solid $color-800;
+      color: $location-badge-color;
+      background-color: rgba($search-and-nav-links, 0.1);
+      border-right: 1px solid $sidebar-text;
     }
 
     .search-input::placeholder {
-      color: rgba($color-200, 0.8);
+      color: rgba($search-and-nav-links, 0.8);
     }
 
     .search-input-wrap {
       .search-icon,
       .clear-icon {
-        fill: rgba($color-200, 0.8);
+        fill: rgba($search-and-nav-links, 0.8);
       }
     }
 
@@ -141,38 +141,34 @@
 
       .search-input-wrap {
         .search-icon {
-          fill: rgba($color-200, 0.8);
+          fill: rgba($search-and-nav-links, 0.8);
         }
       }
     }
   }
 
-  .btn-sign-in {
-    background-color: $color-100;
-    color: $color-900;
-  }
 
   // Sidebar
   .nav-sidebar li.active {
-    box-shadow: inset 4px 0 0 $color-700;
+    box-shadow: inset 4px 0 0 $border-and-box-shadow;
 
     > a {
-      color: $color-800;
+      color: $sidebar-text;
     }
 
     svg {
-      fill: $color-800;
+      fill: $sidebar-text;
     }
   }
 
   .sidebar-top-level-items > li.active .badge.badge-pill {
-    color: $color-800;
+    color: $sidebar-text;
   }
 
   .nav-links li {
     &.active a,
     a.active {
-      border-bottom: 2px solid $color-500;
+      border-bottom: 2px solid $active-tab-border;
 
       .badge.badge-pill {
         font-weight: $gl-font-weight-bold;
@@ -181,27 +177,27 @@
   }
 
   .branch-header-title {
-    color: $color-700;
+    color: $border-and-box-shadow;
   }
 
   .ide-file-list .file.file-active {
-    color: $color-700;
+    color: $border-and-box-shadow;
   }
 
   .ide-sidebar-link {
     &.active {
-      color: $color-700;
-      box-shadow: inset 3px 0 $color-700;
+      color: $border-and-box-shadow;
+      box-shadow: inset 3px 0 $border-and-box-shadow;
 
       &.is-right {
-        box-shadow: inset -3px 0 $color-700;
+        box-shadow: inset -3px 0 $border-and-box-shadow;
       }
     }
   }
 }
 
 body {
-  &.ui_indigo {
+  &.ui-indigo {
     @include gitlab-theme(
       $indigo-100,
       $indigo-200,
@@ -213,19 +209,19 @@ body {
     );
   }
 
-  &.ui_dark {
+  &.ui-light-indigo {
     @include gitlab-theme(
-      $theme-gray-100,
-      $theme-gray-200,
-      $theme-gray-500,
-      $theme-gray-700,
-      $theme-gray-800,
-      $theme-gray-900,
+      $indigo-100,
+      $indigo-200,
+      $indigo-500,
+      $indigo-500,
+      $indigo-700,
+      $indigo-700,
       $white-light
     );
   }
 
-  &.ui_blue {
+  &.ui-blue {
     @include gitlab-theme(
       $theme-blue-100,
       $theme-blue-200,
@@ -237,7 +233,19 @@ body {
     );
   }
 
-  &.ui_green {
+  &.ui-light-blue {
+    @include gitlab-theme(
+      $theme-light-blue-100,
+      $theme-light-blue-200,
+      $theme-light-blue-500,
+      $theme-light-blue-500,
+      $theme-light-blue-700,
+      $theme-light-blue-700,
+      $white-light
+    );
+  }
+
+  &.ui-green {
     @include gitlab-theme(
       $theme-green-100,
       $theme-green-200,
@@ -249,7 +257,55 @@ body {
     );
   }
 
-  &.ui_light {
+  &.ui-light-green {
+    @include gitlab-theme(
+      $theme-green-100,
+      $theme-green-200,
+      $theme-green-500,
+      $theme-green-500,
+      $theme-light-green-700,
+      $theme-light-green-700,
+      $white-light
+    );
+  }
+
+  &.ui-red {
+    @include gitlab-theme(
+      $theme-red-100,
+      $theme-red-200,
+      $theme-red-500,
+      $theme-red-700,
+      $theme-red-800,
+      $theme-red-900,
+      $white-light
+    );
+  }
+
+  &.ui-light-red {
+    @include gitlab-theme(
+      $theme-light-red-100,
+      $theme-light-red-200,
+      $theme-light-red-500,
+      $theme-light-red-500,
+      $theme-light-red-700,
+      $theme-light-red-700,
+      $white-light
+    );
+  }
+
+  &.ui-dark {
+    @include gitlab-theme(
+      $theme-gray-100,
+      $theme-gray-200,
+      $theme-gray-500,
+      $theme-gray-700,
+      $theme-gray-800,
+      $theme-gray-900,
+      $white-light
+    );
+  }
+
+  &.ui-light {
     @include gitlab-theme(
       $theme-gray-900,
       $theme-gray-700,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 094134b63b0..1d5bdaa8961 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -139,6 +139,8 @@
     }
 
     .nav {
+      flex-wrap: nowrap;
+
       > li:not(.d-none) a {
         @include media-breakpoint-down(xs) {
           margin-left: 0;
@@ -158,11 +160,12 @@
     }
 
     .navbar-toggler {
+      position: relative;
       right: -10px;
       border-radius: 0;
       min-width: 45px;
       padding: 0;
-      margin-right: -7px;
+      margin: $gl-padding-8 -7px $gl-padding-8 0;
       font-size: 14px;
       text-align: center;
       color: currentColor;
@@ -186,6 +189,7 @@
         display: -webkit-flex;
         display: flex;
         padding-right: 10px;
+        flex-direction: row;
       }
 
       li {
@@ -290,6 +294,10 @@
       margin: 8px;
     }
   }
+
+  .dropdown-menu {
+    position: absolute;
+  }
 }
 
 .navbar-sub-nav {
@@ -437,12 +445,18 @@
 }
 
 .btn-sign-in {
-  margin-top: 3px;
+  background-color: $indigo-100;
+  color: $indigo-900;
   font-weight: $gl-font-weight-bold;
+  line-height: 18px;
 
   &:hover {
     background-color: $white-light;
   }
+
+  @include media-breakpoint-down(xs) {
+    margin-top: $gl-padding-4;
+  }
 }
 
 .navbar-nav {
diff --git a/app/assets/stylesheets/framework/pagination.scss b/app/assets/stylesheets/framework/pagination.scss
index 50a1b1c446d..61d02511ff4 100644
--- a/app/assets/stylesheets/framework/pagination.scss
+++ b/app/assets/stylesheets/framework/pagination.scss
@@ -4,3 +4,11 @@
     text-decoration: none;
   }
 }
+
+.page-item {
+  &.active {
+    .page-link {
+      z-index: 3;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/tables.scss b/app/assets/stylesheets/framework/tables.scss
index a10bd1544c5..ba9de6941ac 100644
--- a/app/assets/stylesheets/framework/tables.scss
+++ b/app/assets/stylesheets/framework/tables.scss
@@ -1,5 +1,6 @@
 .table-holder {
   margin: 0;
+  overflow: auto;
 }
 
 table {
@@ -38,6 +39,11 @@ table {
         &.wide {
           width: 55%;
         }
+
+        &.table-th-transparent {
+          background: none;
+          color: $gl-text-color-secondary;
+        }
       }
 
       td {
@@ -45,9 +51,91 @@ table {
       }
     }
   }
+
+  &.responsive-table {
+    @include media-breakpoint-down(sm) {
+      thead {
+        display: none;
+      }
+
+      table,
+      tbody,
+      td {
+        display: block;
+      }
+
+      td {
+        color: $gl-text-color-secondary;
+      }
+
+      tbody td.responsive-table-cell {
+        padding: $gl-padding 0;
+        width: 100%;
+        display: flex;
+        text-align: right;
+        align-items: center;
+        justify-content: space-between;
+
+        &[data-column]::before {
+          content: attr(data-column);
+          display: block;
+          text-align: left;
+          padding-right: $gl-padding;
+          color: $gl-text-color-secondary;
+        }
+
+        &:not([data-column]) {
+          flex-direction: row-reverse;
+        }
+      }
+
+      tr.responsive-table-border-start,
+      tr.responsive-table-border-end {
+        display: block;
+        border: solid $gl-text-color-quaternary;
+        padding-left: 0;
+        padding-right: 0;
+
+        > td {
+          border-color: $gl-text-color-quaternary;
+
+          &,
+          &:last-child {
+            padding-left: $gl-padding;
+            padding-right: $gl-padding;
+          }
+        }
+      }
+
+      tr.responsive-table-border-start {
+        border-width: 1px 1px 0;
+        border-radius: $border-radius-default $border-radius-default 0 0;
+        padding-top: 0;
+        padding-bottom: 0;
+
+        > td:first-child {
+          border-top: 0; // always have the <table> top border
+        }
+
+        > td:last-child {
+          border-bottom: 1px solid $gl-text-color-quaternary;
+        }
+      }
+
+      tr.responsive-table-border-end {
+        border-width: 0 1px 1px;
+        border-radius: 0 0 $border-radius-default $border-radius-default;
+        margin-bottom: 2 * $gl-padding;
+
+        > :last-child {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
 }
 
-.responsive-table {
+.responsive-table:not(table) {
   @include media-breakpoint-down(sm) {
     th {
       width: 100%;
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 75c11590547..dfb145debe7 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -4,7 +4,7 @@
   padding: 0;
 
   &::before {
-    @include notes-media('max', map-get($grid-breakpoints, xs)) {
+    @include notes-media('max', map-get($grid-breakpoints, sm)) {
       background: none;
     }
   }
@@ -34,7 +34,7 @@
   .timeline-entry-inner {
     position: relative;
 
-    @include notes-media('max', map-get($grid-breakpoints, xs)) {
+    @include notes-media('max', map-get($grid-breakpoints, sm)) {
       .timeline-icon {
         display: none;
       }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 946223cfff0..d1179df96a9 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -99,7 +99,7 @@ $theme-gray-200: #dfdfdf;
 $theme-gray-300: #cccccc;
 $theme-gray-400: #bababa;
 $theme-gray-500: #a7a7a7;
-$theme-gray-600: #949494;
+$theme-gray-600: #919191;
 $theme-gray-700: #707070;
 $theme-gray-800: #4f4f4f;
 $theme-gray-900: #2e2e2e;
@@ -117,6 +117,15 @@ $theme-blue-800: #25496e;
 $theme-blue-900: #1a3652;
 $theme-blue-950: #0f2235;
 
+$theme-light-blue-50: #f2f7fc;
+$theme-light-blue-100: #ebf1f7;
+$theme-light-blue-200: #c9dcf2;
+$theme-light-blue-300: #83abd4;
+$theme-light-blue-400: #4d86bf;
+$theme-light-blue-500: #367cc2;
+$theme-light-blue-600: #3771ab;
+$theme-light-blue-700: #2261a1;
+
 $theme-green-50: #f2faf6;
 $theme-green-100: #e4f3ea;
 $theme-green-200: #c0dfcd;
@@ -129,6 +138,29 @@ $theme-green-800: #145d33;
 $theme-green-900: #0d4524;
 $theme-green-950: #072d16;
 
+$theme-light-green-700: #156b39;
+
+$theme-red-50: #fcf4f2;
+$theme-red-100: #fae9e6;
+$theme-red-200: #ebcac5;
+$theme-red-300: #d99b91;
+$theme-red-400: #b0655a;
+$theme-red-500: #ad4a3b;
+$theme-red-600: #9e4133;
+$theme-red-700: #912f20;
+$theme-red-800: #78291d;
+$theme-red-900: #691a16;
+$theme-red-950: #36140f;
+
+$theme-light-red-50: #fff6f5;
+$theme-light-red-100: #fae2de;
+$theme-light-red-200: #f7d5d0;
+$theme-light-red-300: #d9796a;
+$theme-light-red-400: #cf604e;
+$theme-light-red-500: #c24b38;
+$theme-light-red-600: #b03927;
+$theme-light-red-700: #a62e21;
+
 $black: #000;
 $black-transparent: rgba(0, 0, 0, 0.3);
 $almost-black: #242424;
@@ -142,11 +174,6 @@ $border-gray-normal-dashed: darken($gray-normal, $darken-border-dashed-factor);
 $border-gray-dark: darken($white-normal, $darken-border-factor);
 
 /*
- * Override Bootstrap 4 variables
- */
-$secondary: $gray-light;
-
-/*
  * UI elements
  */
 $border-color: #e5e5e5;
@@ -164,7 +191,7 @@ $gl-font-weight-normal: 400;
 $gl-font-weight-bold: 600;
 $gl-text-color: #2e2e2e;
 $gl-text-color-secondary: #707070;
-$gl-text-color-tertiary: #949494;
+$gl-text-color-tertiary: #919191;
 $gl-text-color-quaternary: #d6d6d6;
 $gl-text-color-inverted: rgba(255, 255, 255, 1);
 $gl-text-color-secondary-inverted: rgba(255, 255, 255, 0.85);
@@ -408,6 +435,22 @@ $badge-bg: rgba(0, 0, 0, 0.07);
 $badge-color: $gl-text-color-secondary;
 
 /*
+* Pagination
+*/
+$pagination-padding-y: 6px;
+$pagination-padding-x: 16px;
+$pagination-line-height: 20px;
+$pagination-border-color: $border-color;
+$pagination-active-bg: $blue-600;
+$pagination-active-border-color: $blue-600;
+$pagination-hover-bg: $blue-50;
+$pagination-hover-border-color: $border-color;
+$pagination-hover-color: $gl-text-color;
+$pagination-disabled-color: #cdcdcd;
+$pagination-disabled-bg: $gray-light;
+$pagination-disabled-border-color: $border-color;
+
+/*
  *  Status icons
  */
 $status-icon-size: 22px;
@@ -776,3 +819,16 @@ $modal-body-height: 134px;
 Prometheus
 */
 $prometheus-table-row-highlight-color: $theme-gray-100;
+
+$priority-label-empty-state-width: 114px;
+
+/*
+ * Override Bootstrap 4 variables
+ */
+
+$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;