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

- refactor: Remove old SCSS variables
- refactor: Breadcrumb Menu styles
- fix: External links issue
- fix: Mobile sidebar-nav height issue

Author: mrholek

React_Full_Project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "",
   "author": "Łukasz Holeczek <[email protected]>",
   "url": "http://coreui.io",
@@ -32,11 +32,10 @@
     "webpack-dev-server": "^2.9.2"
   },
   "dependencies": {
-    "bootstrap": "^4.0.0-beta",
+    "bootstrap": "^4.0.0-beta.2",
     "chart.js": "2.7.0",
     "font-awesome": "^4.7.0",
     "history": "4.7.2",
-    "is-url-external": "^1.0.3",
     "react": "^16.0.0",
     "react-chartjs-2": "2.6.4",
     "react-dom": "^16.0.0",

React_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
 

React_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;
   }

React_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 {

React_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;
   }

React_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

React_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);
 }