17 files changed, 170 insertions, 72 deletions

diff --git a/app/assets/stylesheets/framework/asciidoctor.scss b/app/assets/stylesheets/framework/asciidoctor.scss
deleted file mode 100644
index 1586265d40e..00000000000
--- a/app/assets/stylesheets/framework/asciidoctor.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.admonitionblock td.icon {
-  width: 1%;
-
-  [class^='fa icon-'] {
-    @extend .fa-2x;
-  }
-
-  .icon-note {
-    @extend .fa-thumb-tack;
-  }
-
-  .icon-tip {
-    @extend .fa-lightbulb-o;
-  }
-
-  .icon-warning {
-    @extend .fa-exclamation-triangle;
-  }
-
-  .icon-caution {
-    @extend .fa-fire;
-  }
-
-  .icon-important {
-    @extend .fa-exclamation-circle;
-  }
-}
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
index c6060161dec..c036267a7c8 100644
--- a/app/assets/stylesheets/framework/badges.scss
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -1,6 +1,6 @@
 .badge.badge-pill {
   font-weight: $gl-font-weight-normal;
   background-color: $badge-bg;
-  color: $gl-text-color-secondary;
+  color: $gray-800;
   vertical-align: baseline;
 }
diff --git a/app/assets/stylesheets/framework/callout.scss b/app/assets/stylesheets/framework/callout.scss
index 643b20c56bc..c5bb2a1256a 100644
--- a/app/assets/stylesheets/framework/callout.scss
+++ b/app/assets/stylesheets/framework/callout.scss
@@ -9,7 +9,9 @@
 .bs-callout {
   margin: $gl-padding 0;
   padding: $gl-padding;
-  border-left: 3px solid $border-color;
+  border-color: $border-color;
+  border-style: solid;
+  border-width: 0 0 0 3px;
   color: $text-color;
   background: $gray-light;
 
@@ -48,6 +50,10 @@
   background-color: $blue-100;
   border-color: $blue-200;
   color: $blue-700;
+
+  h4 {
+    color: $blue-700;
+  }
 }
 
 .bs-callout-success {
diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss
index 1bd5043ed10..e9218dcec67 100644
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -434,12 +434,16 @@ img.emoji {
 
 /** COMMON SIZING CLASSES **/
 .w-0 { width: 0; }
+.w-8em { width: 8em; }
+.w-3rem { width: 3rem; }
 
 .h-12em { height: 12em; }
+.h-32-px { height: 32px;}
 
 .mw-460 { max-width: 460px; }
 .mw-6em { max-width: 6em; }
 .mw-70p { max-width: 70%; }
+.mw-90p { max-width: 90%; }
 
 .min-height-0 { min-height: 0; }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index e75c1379dfb..29f63e9578d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -63,7 +63,8 @@
   margin-top: 11px;
 }
 
-.dropdown-toggle {
+.dropdown-toggle,
+.confidential-merge-request-fork-group .dropdown-toggle {
   padding: 6px 8px 6px 10px;
   background-color: $white-light;
   color: $gl-text-color;
@@ -288,7 +289,7 @@
     padding: 0 1px;
 
     a,
-    button:not(.dropdown-toggle,.ci-action-icon-container),
+    button,
     .menu-item {
       @include dropdown-link;
     }
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 26cbb7f5c13..5984efd1cf8 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -9,14 +9,14 @@
     float: right;
     margin-right: 0;
 
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       float: none;
     }
   }
 }
 
 .filters-section {
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     display: inline-block;
   }
 }
@@ -37,7 +37,7 @@
   }
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .filter-item {
     display: block;
     margin: 0 0 10px;
@@ -50,12 +50,6 @@
 }
 
 .filtered-search-wrapper {
-  display: flex;
-
-  @include media-breakpoint-down(xs) {
-    flex-direction: column;
-  }
-
   .tokens-container {
     display: flex;
     flex: 1;
@@ -186,7 +180,7 @@
   border: 1px solid $border-color;
   background-color: $white-light;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     flex: 1 1 auto;
     margin-bottom: 10px;
   }
@@ -259,7 +253,7 @@
   max-width: 280px;
   overflow: auto;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     width: auto;
     left: 0;
     right: 0;
@@ -311,7 +305,7 @@
 .filtered-search-history-dropdown {
   width: 40%;
 
-  @include media-breakpoint-down(xs) {
+  @include media-breakpoint-down(sm) {
     left: 0;
     right: 0;
     max-width: none;
@@ -341,35 +335,46 @@
 }
 
 .filter-dropdown-container {
-  display: flex;
-
   .dropdown-toggle {
     line-height: 22px;
   }
 }
 
-@include media-breakpoint-down(xs) {
+@include media-breakpoint-down(sm) {
   .issues-details-filters {
-    padding: 0 0 10px;
+    padding-top: 0;
+    padding-bottom: 0;
     background-color: $white-light;
     border-top: 0;
   }
 
-  .filter-dropdown-container {
+  .boards-switcher {
+    margin: 0 0 10px;
+
+    .boards-selector-wrapper,
     .dropdown {
-      margin-left: 0;
+      display: block;
     }
   }
-}
 
-@include media-breakpoint-down(sm) {
-  .filter-dropdown-container {
-    .dropdown-toggle,
-    .dropdown,
-    .dropdown-menu {
+  .filter-dropdown-container > div {
+    margin: 0;
+
+    > .btn {
+      margin: 0 0 10px;
       width: 100%;
     }
   }
+
+  .boards-add-list > .btn {
+    text-align: left;
+
+    > svg {
+      position: absolute;
+      top: 11px;
+      right: 6px;
+    }
+  }
 }
 
 .droplab-dropdown .dropdown-menu .filter-dropdown-item {
diff --git a/app/assets/stylesheets/framework/flash.scss b/app/assets/stylesheets/framework/flash.scss
index e3dd127366d..96f6d02a68f 100644
--- a/app/assets/stylesheets/framework/flash.scss
+++ b/app/assets/stylesheets/framework/flash.scss
@@ -43,6 +43,7 @@
     @extend .alert;
     background-color: $orange-100;
     color: $orange-900;
+    cursor: default;
     margin: 0;
   }
 
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 1bc597bd4ae..ca737c53318 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -131,7 +131,6 @@
       > li:not(.d-none) a {
         @include media-breakpoint-down(xs) {
           margin-left: 0;
-          min-width: 100%;
         }
       }
     }
@@ -233,7 +232,6 @@
       .impersonation-btn,
       .impersonation-btn:hover {
         background-color: $white-light;
-        margin-left: 0;
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
 
diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss
index 1be5ef276fd..7332c4981d2 100644
--- a/app/assets/stylesheets/framework/icons.scss
+++ b/app/assets/stylesheets/framework/icons.scss
@@ -88,8 +88,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: $border-size solid $gray-400;
-  border-radius: 50%;
-  padding: $gl-padding-8 - $border-size;
   color: $gray-700;
 }
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 954551fef97..ecd32dcd0ce 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -265,7 +265,6 @@ ul.controls {
   }
 
   .issuable-pipeline-broken a,
-  .issuable-pipeline-status a,
   .author-link {
     display: flex;
   }
@@ -286,3 +285,19 @@ ul.indent-list {
     max-width: 350px;
   }
 }
+
+.horizontal-list {
+  padding-left: 0;
+  list-style: none;
+
+  > li {
+    float: left;
+  }
+
+  &.list-items-separated {
+    > li:not(:last-child)::after {
+      content: '\00b7';
+      margin: 0 $gl-padding-4;
+    }
+  }
+}
diff --git a/app/assets/stylesheets/framework/modal.scss b/app/assets/stylesheets/framework/modal.scss
index 1d00372d04d..fd9a75bc5b6 100644
--- a/app/assets/stylesheets/framework/modal.scss
+++ b/app/assets/stylesheets/framework/modal.scss
@@ -19,16 +19,23 @@
     }
   }
 
-  // leave enough space for the close icon
   .modal-title {
+    line-height: $gl-line-height-24;
+
+    // leave enough space for the close icon
     &.mw-100,
     &.w-100 {
-      // after upgrading to Bootstrap 4.2 we can use $modal-header-padding-x here
-      // https://github.com/twbs/bootstrap/pull/26976
-      margin-right: -28px;
-      padding-right: 28px;
+      margin-right: -$modal-header-padding-x;
+      padding-right: $modal-header-padding-x;
     }
   }
+
+  .close {
+    font-weight: $gl-font-weight-normal;
+    line-height: $gl-line-height;
+    color: $gray-900;
+    opacity: 1;
+  }
 }
 
 .modal-body {
@@ -63,6 +70,10 @@
     margin-left: $grid-size;
   }
 
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
+
   @include media-breakpoint-down(xs) {
     flex-direction: column;
 
@@ -72,6 +83,11 @@
       margin-left: 0;
       margin-top: $grid-size;
     }
+
+    .btn-group .btn + .btn {
+      margin-left: -1px;
+      margin-top: 0;
+    }
   }
 }
 
@@ -90,6 +106,20 @@ body.modal-open {
 .modal {
   background-color: $black-transparent;
 
+  .modal-content {
+    border-radius: $modal-border-radius;
+
+    > :first-child {
+      border-top-left-radius: $modal-border-radius;
+      border-top-right-radius: $modal-border-radius;
+    }
+
+    > :last-child {
+      border-bottom-left-radius: $modal-border-radius;
+      border-bottom-right-radius: $modal-border-radius;
+    }
+  }
+
   @include media-breakpoint-up(sm) {
     .modal-dialog {
       margin: 64px auto;
diff --git a/app/assets/stylesheets/framework/panels.scss b/app/assets/stylesheets/framework/panels.scss
index cd3d6f8297e..d9c93fed1c4 100644
--- a/app/assets/stylesheets/framework/panels.scss
+++ b/app/assets/stylesheets/framework/panels.scss
@@ -3,7 +3,6 @@
 }
 
 .card-slim {
-  @extend .card;
   margin-bottom: $gl-vert-padding;
 }
 
diff --git a/app/assets/stylesheets/framework/responsive_tables.scss b/app/assets/stylesheets/framework/responsive_tables.scss
index 6bd44ee19bd..fd6f80e26cb 100644
--- a/app/assets/stylesheets/framework/responsive_tables.scss
+++ b/app/assets/stylesheets/framework/responsive_tables.scss
@@ -155,7 +155,7 @@
   text-overflow: ellipsis;
 
   @include media-breakpoint-up(md) {
-    flex: 0 0 90%;
+    flex: 0 0 85%;
   }
 
   .avatar {
diff --git a/app/assets/stylesheets/framework/tooltips.scss b/app/assets/stylesheets/framework/tooltips.scss
index 98f28987a82..edc2fb532c8 100644
--- a/app/assets/stylesheets/framework/tooltips.scss
+++ b/app/assets/stylesheets/framework/tooltips.scss
@@ -1,7 +1,6 @@
 .tooltip-inner {
-  font-size: $tooltip-font-size;
+  font-size: $gl-font-size-small;
   border-radius: $border-radius-default;
-  line-height: 16px;
+  line-height: $gl-line-height;
   font-weight: $gl-font-weight-normal;
-  padding: 8px;
 }
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 7baab478034..c201605e83d 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -1,5 +1,5 @@
 /**
- * Apply Markdown typography
+ * Apply Markup (Markdown/AsciiDoc) typography
  *
  */
 .md:not(.use-csslab) {
@@ -245,6 +245,21 @@
     }
   }
 
+  ul.checklist,
+  ul.none,
+  ol.none,
+  ul.no-bullet,
+  ol.no-bullet,
+  ol.unnumbered,
+  ul.unstyled,
+  ol.unstyled {
+    list-style-type: none;
+
+    li {
+      margin-left: 0;
+    }
+  }
+
   li {
     line-height: 1.6em;
     margin-left: 25px;
@@ -321,6 +336,54 @@
       visibility: visible;
     }
   }
+
+  .big {
+    font-size: larger;
+  }
+
+  .small {
+    font-size: smaller;
+  }
+
+  .underline {
+    text-decoration: underline;
+  }
+
+  .overline {
+    text-decoration: overline;
+  }
+
+  .line-through {
+    text-decoration: line-through;
+  }
+
+  .admonitionblock td.icon {
+    width: 1%;
+
+    [class^='fa icon-'] {
+      @extend .fa-2x;
+    }
+
+    .icon-note {
+      @extend .fa-thumb-tack;
+    }
+
+    .icon-tip {
+      @extend .fa-lightbulb-o;
+    }
+
+    .icon-warning {
+      @extend .fa-exclamation-triangle;
+    }
+
+    .icon-caution {
+      @extend .fa-fire;
+    }
+
+    .icon-important {
+      @extend .fa-exclamation-circle;
+    }
+  }
 }
 
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 4521643ce08..9871771542d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -469,6 +469,7 @@ $link-active-background: rgba(0, 0, 0, 0.04);
 $link-hover-background: rgba(0, 0, 0, 0.06);
 $inactive-badge-background: rgba(0, 0, 0, 0.08);
 $sidebar-toggle-height: 60px;
+$sidebar-toggle-width: 40px;
 $sidebar-milestone-toggle-bottom-margin: 10px;
 
 /*
@@ -603,6 +604,7 @@ $blame-blue: #254e77;
 * Builds
 */
 $builds-trace-bg: #111;
+$job-log-highlight-height: 18px;
 
 /*
 * Commit Page
@@ -806,6 +808,7 @@ Modals
 */
 $modal-body-height: 80px;
 $modal-border-color: #e9ecef;
+$modal-border-radius: 0.25rem;
 
 $priority-label-empty-state-width: 114px;
 
diff --git a/app/assets/stylesheets/framework/variables_overrides.scss b/app/assets/stylesheets/framework/variables_overrides.scss
index ea96381a098..604b48e11ab 100644
--- a/app/assets/stylesheets/framework/variables_overrides.scss
+++ b/app/assets/stylesheets/framework/variables_overrides.scss
@@ -48,3 +48,7 @@ $spacers: (
   9: ($spacer * 8)
 );
 $pagination-color: $gl-text-color;
+$tooltip-padding-y: 0.5rem;
+$tooltip-padding-x: 0.75rem;
+$tooltip-arrow-height: 0.5rem;
+$tooltip-arrow-width: 1rem;