- update: Bootstrap version to v4.0.0-beta.2

- update: vue-chartjs version to 3.0.0
- refactor: Remove old SCSS variables
- refactor: Breadcrumb Menu styles
- fix: External links issue
- fix: Mobile sidebar-nav height issue

Vue_Full_Project/scss/bootstrap/_tables.scss

@@ -99,32 +99,37 @@
 @include table-row-variant(active, $table-active-bg);
 
 
-// Inverse styles
+// Dark styles
 //
 // Same table markup, but inverted color scheme: dark background and light text.
 
-.thead-inverse {
-  th {
-    color: $table-inverse-color;
-    background-color: $table-inverse-bg;
+// stylelint-disable-next-line no-duplicate-selectors
+.table {
+  .thead-dark {
+    th {
+      color: $table-dark-color;
+      background-color: $table-dark-bg;
+      border-color: $table-dark-border-color;
+    }
+  }
+
+  .thead-light {
+    th {
+      color: $table-head-color;
+      background-color: $table-head-bg;
+      border-color: $table-border-color;
+    }
   }
 }
 
-.thead-default {
-  th {
-    color: $table-head-color;
-    background-color: $table-head-bg;
-  }
-}
-
-.table-inverse {
-  color: $table-inverse-color;
-  background-color: $table-inverse-bg;
+.table-dark {
+  color: $table-dark-color;
+  background-color: $table-dark-bg;
 
   th,
   td,
   thead th {
-    border-color: $table-inverse-border-color;
+    border-color: $table-dark-border-color;
   }
 
   &.table-bordered {
@@ -133,14 +138,14 @@
 
   &.table-striped {
     tbody tr:nth-of-type(odd) {
-      background-color: $table-inverse-accent-bg;
+      background-color: $table-dark-accent-bg;
     }
   }
 
   &.table-hover {
     tbody tr {
       @include hover {
-        background-color: $table-inverse-hover-bg;
+        background-color: $table-dark-hover-bg;
       }
     }
   }
@@ -149,20 +154,27 @@
 
 // Responsive tables
 //
-// Add `.table-responsive` to `.table`s and we'll make them mobile friendly by
-// enabling horizontal scrolling. Only applies <768px. Everything above that
-// will display normally.
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
 
 .table-responsive {
-  @include media-breakpoint-down(md) {
-    display: block;
-    width: 100%;
-    overflow-x: auto;
-    -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
-    // Prevent double border on horizontal scroll due to use of `display: block;`
-    &.table-bordered {
-      border: 0;
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        display: block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+
+        // Prevent double border on horizontal scroll due to use of `display: block;`
+        &.table-bordered {
+          border: 0;
+        }
+      }
     }
   }
 }