- 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

Author: mrholek

Vue_Full_Project/CHANGELOG.md

@@ -1,8 +1,13 @@
 ## [vue](./README.md) version `changelog`
 
+###### `v1.0.3`
+- moved vue-chartjs to `3.0.0` **[breaking change](https://github.com/apertureless/vue-chartjs/releases/tag/v3.0.0)** :fire:
+
 ###### `v1.0.2`
 - moved to vue: `^2.5.x`
+- updated bootstrap-vue to `1.0.0-beta.9`
 - (vue `v2.5.x`) deprecated `<template scope="props">` replaced with `<div slot-scope="props">`
 - `HeaderDropdown` component added to `Header`
-- moved to component `b-badge` (bootstrap-vue)
+- `b-badge` component added (bootstrap-vue)
+- `package.json` project dependencies update
 

Vue_Full_Project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
   "private": true,
@@ -17,10 +17,9 @@
     "bootstrap-vue": "1.0.0-beta.9",
     "chart.js": "2.7.0",
     "font-awesome": "^4.7.0",
-    "is-url-external": "^1.0.3",
     "simple-line-icons": "^2.4.1",
     "vue": "^2.5.2",
-    "vue-chartjs": "2.8.7",
+    "vue-chartjs": "^3.0.0",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
@@ -29,10 +28,10 @@
     "babel-eslint": "8.0.1",
     "babel-loader": "7.1.2",
     "babel-plugin-transform-runtime": "^6.22.0",
-    "babel-preset-env": "1.6.0",
+    "babel-preset-env": "1.6.1",
     "babel-preset-stage-2": "6.24.1",
     "babel-register": "6.26.0",
-    "chalk": "2.1.0",
+    "chalk": "2.2.0",
     "connect-history-api-fallback": "^1.4.0",
     "copy-webpack-plugin": "^4.1.1",
     "css-loader": "0.28.7",
@@ -43,7 +42,7 @@
     "eslint-plugin-import": "2.7.0",
     "eslint-plugin-node": "5.2.0",
     "eslint-config-standard": "10.2.1",
-    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-promise": "3.6.0",
     "eslint-plugin-standard": "3.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "4.16.2",
@@ -53,7 +52,7 @@
     "html-webpack-plugin": "2.30.1",
     "http-proxy-middleware": "0.17.4",
     "webpack-bundle-analyzer": "2.9.0",
-    "cross-env": "5.0.5",
+    "cross-env": "^5.1.0",
     "karma": "1.7.1",
     "karma-coverage": "^1.1.1",
     "karma-mocha": "^1.3.0",
@@ -72,7 +71,7 @@
     "babel-plugin-istanbul": "4.1.5",
     "phantomjs-prebuilt": "^2.1.15",
     "chromedriver": "2.33.1",
-    "cross-spawn": "^5.0.1",
+    "cross-spawn": "^5.1.0",
     "nightwatch": "0.9.16",
     "selenium-server": "3.6.0",
     "semver": "5.4.1",
@@ -85,9 +84,9 @@
     "vue-loader": "13.3.0",
     "vue-style-loader": "3.0.3",
     "vue-template-compiler": "^2.5.2",
-    "webpack": "^3.7.1",
-    "webpack-dev-middleware": "^1.12.0",
-    "webpack-hot-middleware": "^2.20.0",
+    "webpack": "^3.8.1",
+    "webpack-dev-middleware": "1.12.0",
+    "webpack-hot-middleware": "2.20.0",
     "webpack-merge": "4.1.0",
     "node-sass": "4.5.3",
     "sass-loader": "6.0.6"

Vue_Full_Project/scss/_bootstrap-variables.scss

@@ -76,6 +76,7 @@ $font-size-base:                  0.875rem;
 // Breadcrumbs
 
 $breadcrumb-bg:                   #fff;
+$breadcrumb-margin-bottom:        1.5rem;
 
 // Cards
 

Vue_Full_Project/scss/bootstrap/_alert.scss

@@ -3,6 +3,7 @@
 //
 
 .alert {
+  position: relative;
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
   border: $alert-border-width solid transparent;
@@ -28,9 +29,9 @@
 .alert-dismissible {
   // Adjust close link position
   .close {
-    position: relative;
-    top: -$alert-padding-y;
-    right: -$alert-padding-x;
+    position: absolute;
+    top: 0;
+    right: 0;
     padding: $alert-padding-y $alert-padding-x;
     color: inherit;
   }

Vue_Full_Project/scss/bootstrap/_badge.scss

@@ -9,11 +9,10 @@
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
   line-height: 1;
-  color: $badge-color;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  @include border-radius();
+  @include border-radius($badge-border-radius);
 
   // Empty badges collapse automatically
   &:empty {

Vue_Full_Project/scss/bootstrap/_breadcrumb.scss

@@ -1,15 +1,14 @@
 .breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
   padding: $breadcrumb-padding-y $breadcrumb-padding-x;
-  margin-bottom: 1rem;
+  margin-bottom: $breadcrumb-margin-bottom;
   list-style: none;
   background-color: $breadcrumb-bg;
   @include border-radius($border-radius);
-  @include clearfix;
 }
 
 .breadcrumb-item {
-  float: left;
-
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item::before {
     display: inline-block; // Suppress underlining of the separator in modern browsers
@@ -28,6 +27,7 @@
   + .breadcrumb-item:hover::before {
     text-decoration: underline;
   }
+  // stylelint-disable-next-line no-duplicate-selectors
   + .breadcrumb-item:hover::before {
     text-decoration: none;
   }

Vue_Full_Project/scss/bootstrap/_button-group.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
 // Make the div behave like a button
 .btn-group,
@@ -10,7 +10,6 @@
   > .btn {
     position: relative;
     flex: 0 1 auto;
-    margin-bottom: 0;
 
     // Bring the hover, focused, and "active" buttons to the front to overlay
     // the borders properly
@@ -48,33 +47,39 @@
   border-radius: 0;
 }
 
-// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+// Set corners individual because sometimes a single button can be in a .btn-group
+// and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
   margin-left: 0;
 
   &:not(:last-child):not(.dropdown-toggle) {
     @include border-right-radius(0);
   }
 }
-// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
+// immediately after it
 .btn-group > .btn:last-child:not(:first-child),
 .btn-group > .dropdown-toggle:not(:first-child) {
   @include border-left-radius(0);
 }
 
-// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+// Custom edits for including btn-groups within btn-groups (useful for including
+// dropdown buttons within a btn-group)
 .btn-group > .btn-group {
   float: left;
 }
+
 .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
   border-radius: 0;
 }
+
 .btn-group > .btn-group:first-child:not(:last-child) {
   > .btn:last-child,
   > .dropdown-toggle {
     @include border-right-radius(0);
   }
 }
+
 .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
   @include border-left-radius(0);
 }
@@ -129,7 +134,6 @@
 //
 
 .btn-group-vertical {
-  display: inline-flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
@@ -146,31 +150,36 @@
     margin-top: -$input-btn-border-width;
     margin-left: 0;
   }
-}
 
-.btn-group-vertical > .btn {
-  &:not(:first-child):not(:last-child) {
+  > .btn {
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child:not(:last-child) {
+      @include border-bottom-radius(0);
+    }
+
+    &:last-child:not(:first-child) {
+      @include border-top-radius(0);
+    }
+  }
+
+  > .btn-group:not(:first-child):not(:last-child) > .btn {
     border-radius: 0;
   }
-  &:first-child:not(:last-child) {
-    @include border-bottom-radius(0);
+
+  > .btn-group:first-child:not(:last-child) {
+    > .btn:last-child,
+    > .dropdown-toggle {
+      @include border-bottom-radius(0);
+    }
   }
-  &:last-child:not(:first-child) {
+
+  > .btn-group:last-child:not(:first-child) > .btn:first-child {
     @include border-top-radius(0);
   }
 }
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
-  border-radius: 0;
-}
-.btn-group-vertical > .btn-group:first-child:not(:last-child) {
-  > .btn:last-child,
-  > .dropdown-toggle {
-    @include border-bottom-radius(0);
-  }
-}
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  @include border-top-radius(0);
-}
 
 
 // Checkbox and radio options

Vue_Full_Project/scss/bootstrap/_buttons.scss

@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
 //
 // Base styles
@@ -22,7 +22,7 @@
   &:focus,
   &.focus {
     outline: 0;
-    box-shadow: $btn-focus-box-shadow;
+    box-shadow: $input-btn-focus-box-shadow;
   }
 
   // Disabled comes first so active can properly restyle
@@ -32,10 +32,10 @@
     @include box-shadow(none);
   }
 
-  &:active,
-  &.active {
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
     background-image: none;
-    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    @include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow);
   }
 }
 
@@ -58,7 +58,11 @@ fieldset[disabled] a.btn {
 
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    @include button-outline-variant($value, #fff);
+    @if $color == "light" {
+      @include button-outline-variant($value, $gray-900);
+    } @else {
+      @include button-outline-variant($value, $white);
+    }
   }
 }
 
@@ -71,36 +75,27 @@ fieldset[disabled] a.btn {
 .btn-link {
   font-weight: $font-weight-normal;
   color: $link-color;
-  border-radius: 0;
+  background-color: transparent;
 
-  &,
-  &:active,
-  &.active,
-  &:disabled {
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
     background-color: transparent;
-    @include box-shadow(none);
+    border-color: transparent;
   }
-  &,
+
   &:focus,
-  &:active {
+  &.focus {
     border-color: transparent;
     box-shadow: none;
   }
-  @include hover {
-    border-color: transparent;
-  }
-  @include hover-focus {
-    color: $link-hover-color;
-    text-decoration: $link-hover-decoration;
-    background-color: transparent;
-  }
-  &:disabled {
-    color: $btn-link-disabled-color;
 
-    @include hover-focus {
-      text-decoration: none;
-    }
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color;
   }
+
+  // No need for an active state here
 }
 
 
@@ -109,11 +104,11 @@ fieldset[disabled] a.btn {
 //
 
 .btn-lg {
-  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+  @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
 }
 
 .btn-sm {
-  @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+  @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
 }