React v16, Reactstrap v5

Author: xidedix

React_Full_Project/.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 node_modules
+package-lock.json
 
 # testing
 coverage

React_Full_Project/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
   "url": "http://coreui.io",
@@ -14,35 +14,35 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
-    "copy-webpack-plugin": "^4.0.1",
-    "css-hot-loader": "^1.3.1",
+    "copy-webpack-plugin": "^4.1.1",
+    "css-hot-loader": "^1.3.2",
     "css-loader": "^0.28.7",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "file-loader": "^1.1.5",
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "node-sass": "^4.5.3",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
-    "style-loader": "^0.18.2",
-    "uglify-js": "^3.1.1",
-    "url-loader": "^0.5.9",
+    "style-loader": "^0.19.0",
+    "uglify-js": "^3.1.3",
+    "url-loader": "^0.6.2",
     "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.8.2"
+    "webpack-dev-server": "^2.9.1"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",
     "chart.js": "2.7.0",
     "font-awesome": "^4.7.0",
     "history": "4.7.2",
     "is-url-external": "^1.0.3",
-    "react": "^15.6.1",
-    "react-chartjs-2": "2.6.2",
-    "react-dom": "^15.6.1",
-    "react-router-dom": "4.2.2",
-    "react-transition-group": "^1.2.0",
-    "reactstrap": "^4.8.0",
+    "react": "^16.0.0",
+    "react-chartjs-2": "2.6.4",
+    "react-dom": "^16.0.0",
+    "react-router-dom": "^4.2.2",
+    "react-transition-group": "^2.2.1",
+    "reactstrap": "^5.0.0-alpha.3",
     "simple-line-icons": "^2.4.1"
   },
   "scripts": {

React_Full_Project/REACT.md

@@ -1,7 +1,8 @@
 // Temp fix for reactstrap
-.show {
-  > .dropdown-menu-right {
-    right: 0;
-    left: auto; // Reset the default from `.dropdown-menu`
+.app-header {
+  .navbar-nav {
+    .dropdown-menu-right {
+      right: auto;
+    }
   }
-}
+}

React_Full_Project/package.json

@@ -1,8 +1,9 @@
 .app-footer {
-  min-height: $footer-height;
+  display: flex;
   padding: 0 $spacer;
-  line-height: $footer-height;
   color: $footer-color;
   background: $footer-bg;
+  flex-wrap: wrap;
+  align-items: center;
   @include borders($footer-borders);
 }

React_Full_Project/scss/core/_dropdown-menu-right.scss

@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  flex-direction: column;
   min-height: 100vh;
+  flex-direction: column;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
   overflow-x: hidden;
+  flex-grow: 1;
 
   .main {
-    flex: 1;
     min-width: 0;
+    flex: 1;
   }
 
   .sidebar {
@@ -328,7 +328,8 @@ app-root {
     margin-top: $navbar-height;
   }
 
-  .sidebar {
+  .sidebar,
+  .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;

React_Full_Project/scss/core/_footer.scss

@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  flex-direction: row;
   height: $navbar-height;
+  flex-direction: row;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -102,13 +102,16 @@
   background-color: rgba(0,0,0,.075);
 }
 
-.brand-minimized {
-  .app-header.navbar {
-    .navbar-brand {
-      width: $navbar-brand-minimized-width;
-      background-color: $navbar-brand-minimized-bg;
-      background-image: $navbar-brand-minimized-logo;
-      background-size: $navbar-brand-minimized-logo-size;
+@include media-breakpoint-up(lg) {
+  .brand-minimized {
+    .app-header.navbar {
+      .navbar-brand {
+        width: $navbar-brand-minimized-width;
+        background-color: $navbar-brand-minimized-bg;
+        background-image: $navbar-brand-minimized-logo;
+        background-size: $navbar-brand-minimized-logo-size;
+        @include borders($navbar-brand-minimized-border);
+      }
     }
   }
 }

React_Full_Project/scss/core/_layout.scss

@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    flex-direction: column;
     min-height: 100%;
+    flex-direction: column;
   }
 
   .nav-title {
@@ -254,13 +254,15 @@
     flex: 0 0 $sidebar-footer-height;
     padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
     background: $sidebar-footer-bg;
+    @include borders($sidebar-footer-borders);
   }
 
   .sidebar-minimizer {
     position: relative;
     flex: 0 0 $sidebar-minimizer-height;
     background-color: $sidebar-minimizer-bg;
     border: 0;
+    @include borders($sidebar-minimizer-borders);
 
     &::before {
       position: absolute;

React_Full_Project/scss/core/_navbar.scss

@@ -58,10 +58,11 @@ $navbar-brand-border: (
   )
 ) !default;
 
-$navbar-brand-minimized-width:        50px !default
-$navbar-brand-minimized-bg:           #fff !default;
+$navbar-brand-minimized-width:        50px !default;
+$navbar-brand-minimized-bg:           $navbar-brand-bg !default;
 $navbar-brand-minimized-logo:         url('../img/logo-symbol.png') !default;
 $navbar-brand-minimized-logo-size:    24px !default;
+$navbar-brand-minimized-border:       $navbar-brand-border !default;
 
 $navbar-color:                        $gray-600 !default;
 $navbar-hover-color:                  $gray-800 !default;
@@ -132,11 +133,13 @@ $sidebar-footer-height:               auto !default;
 $sidebar-footer-bg:                   rgba(0,0,0,.2) !default;
 $sidebar-footer-padding-y:            .75rem !default;
 $sidebar-footer-padding-x:            1rem !default;
+$sidebar-footer-borders:              0 !default;
 
 // Sidebar Minimizer
 
 $sidebar-minimizer-height:            50px !default;
 $sidebar-minimizer-bg:                rgba(0,0,0,.2) !default;
+$sidebar-minimizer-borders:           0 !default;
 $sidebar-minimizer-indicator-color:   $gray-600 !default;
 $sidebar-minimizer-indicator:         str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
 $sidebar-minimizer-hover-bg:          rgba(0,0,0,.3) !default;