9 files changed, 25 insertions, 9 deletions
diff --git a/app/assets/stylesheets/framework.bs3.scss b/app/assets/stylesheets/framework.bs3.scss
index c990c251a6b..c895da5023c 100644
--- a/app/assets/stylesheets/framework.bs3.scss
+++ b/app/assets/stylesheets/framework.bs3.scss
@@ -11,3 +11,6 @@ $border-radius-base: 3px !default;
 $modal-body-bg: $white-light;
 $input-border: $border-color;
 $input-border-focus: $focus-border-color;
+
+$padding-base-vertical: $gl-vert-padding;
+$padding-base-horizontal: $gl-padding;
diff --git a/app/assets/stylesheets/framework.bs4.scss b/app/assets/stylesheets/framework.bs4.scss
new file mode 100644
index 00000000000..bd1627d2d77
--- /dev/null
+++ b/app/assets/stylesheets/framework.bs4.scss
@@ -0,0 +1,5 @@
+// Override variables from bs4
+
+html {
+  font-size: 14px;
+}
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 8bab0e1ec13..dba97281c38 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -1,5 +1,6 @@
 @import "framework/variables";
 @import "framework/mixins";
+@import "framework.bs4";
 @import "../../../node_modules/bootstrap/scss/bootstrap";
 @import "framework.bs3";
 @import "framework/layout";
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index f8f991bf1dd..627acae135f 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -317,7 +317,7 @@
   }
 
   &.invalid {
-    @include status-color($gray-dark, $gray, $gray-darkest);
+    @include status-color($gray-dark, color("gray"), $gray-darkest);
     border-color: $gray-darkest;
   }
 }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index 2e0d44cec95..236fb090dee 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -266,7 +266,9 @@
       &.issue-title,
       &.commit-title,
       &.merge-merquest-title {
-        @include text-overflow();
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         max-width: 100%;
         display: block;
 
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index b3b188684a8..bdb915e6acd 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -80,13 +80,13 @@
 
       &.left-side-selected {
         td.line_content.parallel.right-side {
-          @include user-select(none);
+          user-select: none;
         }
       }
 
       &.right-side-selected {
         td.line_content.parallel.left-side {
-          @include user-select(none);
+          user-select: none;
         }
       }
     }
@@ -103,7 +103,7 @@
 
     .old_line,
     .new_line {
-      @include user-select(none);
+      user-select: none;
       margin: 0;
       border: 0;
       padding: 0 5px;
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 5c0b9572c50..0350fe5752e 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -29,7 +29,7 @@
 
   .key {
     @extend .badge.badge-pill;
-    @extend .badge.badge-pill-inverse;
+    background-color: $label-inverse-bg;
     font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
     padding: 3px 5px;
   }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index ad4268784e1..d11d6a9ceaf 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -419,7 +419,7 @@ table.u2f-registrations {
     }
 
     &.unverified {
-      @include status-color($gray-dark, $gray, $common-gray-dark);
+      @include status-color($gray-dark, color("gray"), $common-gray-dark);
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/stat_graph.scss b/app/assets/stylesheets/pages/stat_graph.scss
index 3de3a55bc83..2b52331da51 100644
--- a/app/assets/stylesheets/pages/stat_graph.scss
+++ b/app/assets/stylesheets/pages/stat_graph.scss
@@ -14,7 +14,9 @@
 }
 
 #contributors-master {
-  @include make-md-column(12);
+  @include media-breakpoint-up(md) {
+    @include make-col(12);
+  }
 
   svg {
     width: 100%;
@@ -33,7 +35,10 @@
   }
 
   .person {
-    @include make-md-column(6);
+    @include media-breakpoint-up(md) {
+      @include make-col(6);
+    }
+
     margin-top: 10px;
 
     @include media-breakpoint-down(xs) {