- 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/utilities/_align.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 .align-baseline    { vertical-align: baseline !important; } // Browser default
 .align-top         { vertical-align: top !important; }
 .align-middle      { vertical-align: middle !important; }

Vue_Full_Project/scss/bootstrap/utilities/_background.scss

@@ -1,6 +1,19 @@
+// stylelint-disable declaration-no-important
+
 @each $color, $value in $theme-colors {
-  @include bg-variant('.bg-#{$color}', $value);
+  @include bg-variant(".bg-#{$color}", $value);
 }
 
-.bg-white { background-color: $white !important; }
-.bg-transparent { background-color: transparent !important; }
+@if $enable-gradients {
+  @each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+  }
+}
+
+.bg-white {
+  background-color: $white !important;
+}
+
+.bg-transparent {
+  background-color: transparent !important;
+}

Vue_Full_Project/scss/bootstrap/utilities/_borders.scss

@@ -1,8 +1,10 @@
+// stylelint-disable declaration-no-important
+
 //
 // Border
 //
 
-.border          { border: 1px solid $gray-200 !important; }
+.border          { border: $border-width solid $border-color !important; }
 .border-0        { border: 0 !important; }
 .border-top-0    { border-top: 0 !important; }
 .border-right-0  { border-right: 0 !important; }
@@ -44,9 +46,9 @@
 }
 
 .rounded-circle {
-  border-radius: 50%;
+  border-radius: 50% !important;
 }
 
 .rounded-0 {
-  border-radius: 0;
+  border-radius: 0 !important;
 }

Vue_Full_Project/scss/bootstrap/utilities/_display.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 //
 // Utilities for common `display` values
 //
@@ -11,6 +13,7 @@
     .d#{$infix}-inline-block { display: inline-block !important; }
     .d#{$infix}-block        { display: block !important; }
     .d#{$infix}-table        { display: table !important; }
+    .d#{$infix}-table-row    { display: table-row !important; }
     .d#{$infix}-table-cell   { display: table-cell !important; }
     .d#{$infix}-flex         { display: flex !important; }
     .d#{$infix}-inline-flex  { display: inline-flex !important; }

Vue_Full_Project/scss/bootstrap/utilities/_flex.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Flex variation
 //
 // Custom styles for additional flex alignment options.

Vue_Full_Project/scss/bootstrap/utilities/_position.scss

@@ -1,4 +1,15 @@
-// Positioning
+// stylelint-disable declaration-no-important
+
+// Common values
+
+// Sass list not in variables since it's not intended for customization.
+$positions: static, relative, absolute, fixed, sticky;
+
+@each $position in $positions {
+  .position-#{$position} { position: $position !important; }
+}
+
+// Shorthand
 
 .fixed-top {
   position: fixed;

Vue_Full_Project/scss/bootstrap/utilities/_sizing.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Width and height
 
 @each $prop, $abbrev in (width: w, height: h) {

Vue_Full_Project/scss/bootstrap/utilities/_spacing.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 // Margin and Padding
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -7,35 +9,43 @@
     @each $prop, $abbrev in (margin: m, padding: p) {
       @each $size, $length in $spacers {
 
-        .#{$abbrev}#{$infix}-#{$size}  { #{$prop}:        $length !important; }
-        .#{$abbrev}t#{$infix}-#{$size} { #{$prop}-top:    $length !important; }
-        .#{$abbrev}r#{$infix}-#{$size} { #{$prop}-right:  $length !important; }
-        .#{$abbrev}b#{$infix}-#{$size} { #{$prop}-bottom: $length !important; }
-        .#{$abbrev}l#{$infix}-#{$size} { #{$prop}-left:   $length !important; }
+        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+        .#{$abbrev}r#{$infix}-#{$size},
         .#{$abbrev}x#{$infix}-#{$size} {
           #{$prop}-right: $length !important;
-          #{$prop}-left:  $length !important;
         }
+        .#{$abbrev}b#{$infix}-#{$size},
         .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top:    $length !important;
           #{$prop}-bottom: $length !important;
         }
+        .#{$abbrev}l#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
       }
     }
 
     // Some special margin utils
-    .m#{$infix}-auto  { margin:        auto !important; }
-    .mt#{$infix}-auto { margin-top:    auto !important; }
-    .mr#{$infix}-auto { margin-right:  auto !important; }
-    .mb#{$infix}-auto { margin-bottom: auto !important; }
-    .ml#{$infix}-auto { margin-left:   auto !important; }
+    .m#{$infix}-auto { margin: auto !important; }
+    .mt#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+    }
+    .mr#{$infix}-auto,
     .mx#{$infix}-auto {
       margin-right: auto !important;
-      margin-left:  auto !important;
     }
+    .mb#{$infix}-auto,
     .my#{$infix}-auto {
-      margin-top:    auto !important;
       margin-bottom: auto !important;
     }
+    .ml#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-left: auto !important;
+    }
   }
 }

Vue_Full_Project/scss/bootstrap/utilities/_text.scss

@@ -1,3 +1,5 @@
+// stylelint-disable declaration-no-important
+
 //
 // Text
 //
@@ -28,16 +30,17 @@
 
 // Weight and italics
 
-.font-weight-normal { font-weight: $font-weight-normal; }
-.font-weight-bold   { font-weight: $font-weight-bold; }
-.font-italic        { font-style: italic; }
+.font-weight-light  { font-weight: $font-weight-light !important; }
+.font-weight-normal { font-weight: $font-weight-normal !important; }
+.font-weight-bold   { font-weight: $font-weight-bold !important; }
+.font-italic        { font-style: italic !important; }
 
 // Contextual colors
 
 .text-white { color: #fff !important; }
 
 @each $color, $value in $theme-colors {
-  @include text-emphasis-variant('.text-#{$color}', $value);
+  @include text-emphasis-variant(".text-#{$color}", $value);
 }
 
 .text-muted { color: $text-muted !important; }