- HeaderDropdown component example extracted out of Header

- Fix height and position problems with .fixed-footer
- Fix mobile sidebar height
- Fix mobile breadcrumb position with .fixed-breadcrumb
- Add new navbar toggler icon
- Update old bootstrap classes ex. `hidden-sm-down`
- Add gulp-autoprefixer

Author: mrholek

CHANGELOG.md

@@ -1,5 +1,8 @@
 ## [react](./REACT.md) version `changelog`
 
+###### `v1.0.2`
+- `HeaderDropdown` component example extracted out of `Header`
+
 ###### `v1.0.1`
 - moved to react: `^16.0.0`
 - moved to reactstrap: `^5.0.0-alpha.3`

React_Full_Project/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "author": "Łukasz Holeczek <[email protected]>",
   "url": "http://coreui.io",
@@ -26,10 +26,10 @@
     "sass-loader": "^6.0.6",
     "source-list-map": "^2.0.0",
     "style-loader": "^0.19.0",
-    "uglify-js": "^3.1.3",
+    "uglify-js": "^3.1.4",
     "url-loader": "^0.6.2",
-    "webpack": "^3.6.0",
-    "webpack-dev-server": "^2.9.1"
+    "webpack": "^3.7.1",
+    "webpack-dev-server": "^2.9.2"
   },
   "dependencies": {
     "bootstrap": "^4.0.0-beta",

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

@@ -5,4 +5,4 @@
       right: auto;
     }
   }
-}
+}

React_Full_Project/scss/core/_footer.scss

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

React_Full_Project/scss/core/_layout.scss

@@ -11,8 +11,8 @@
 app-dashboard,
 app-root {
   display: flex;
-  min-height: 100vh;
   flex-direction: column;
+  min-height: 100vh;
 }
 
 .app-header {
@@ -26,12 +26,12 @@ app-root {
 .app-body {
   display: flex;
   flex-direction: row;
-  overflow-x: hidden;
   flex-grow: 1;
+  overflow-x: hidden;
 
   .main {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 
   .sidebar {
@@ -269,9 +269,11 @@ app-root {
 .footer-fixed {
   .app-footer {
     position: fixed;
+    right: 0;
     bottom: 0;
+    left: 0;
     z-index: $zindex-sticky;
-    width: 100%;
+    height: $footer-height;
   }
 
   .app-body {
@@ -328,17 +330,26 @@ app-root {
     margin-top: $navbar-height;
   }
 
+  .breadcrumb-fixed {
+    .main:nth-child(2) .breadcrumb {
+      right: auto;
+      left: auto;
+      width: 100%;
+    }
+  }
+
   .sidebar,
   .sidebar-fixed .sidebar {
     position: fixed;
     z-index: $zindex-sticky - 1;
     width: $mobile-sidebar-width;
-    height: 100%;
+    // height: 100%;
     margin-left: - $mobile-sidebar-width;
 
     .sidebar-nav,
     .nav {
       width: $mobile-sidebar-width !important;
+      height: calc(100vh - #{$navbar-height});
     }
 
     .sidebar-minimizer {
@@ -364,22 +375,11 @@ app-root {
     .sidebar {
       width: $mobile-sidebar-width;
       margin-left: 0;
-
-      .sidebar-nav {
-        height: calc(100vh - #{$navbar-height});
-      }
     }
 
     .main {
       margin-right: - $mobile-sidebar-width !important;
       margin-left: $mobile-sidebar-width !important;
     }
   }
-
-  .breadcrumb-fixed {
-    .main .breadcrumb {
-      right: 0 !important;
-      left: 0 !important;
-    }
-  }
 }

React_Full_Project/scss/core/_navbar.scss

@@ -1,7 +1,7 @@
 .app-header.navbar {
   position: relative;
-  height: $navbar-height;
   flex-direction: row;
+  height: $navbar-height;
   padding: 0;
   margin: 0;
   background-color: $navbar-bg;
@@ -22,7 +22,17 @@
   }
 
   .navbar-toggler {
-    color: $navbar-color;
+    min-width: 50px;
+    padding: $navbar-toggler-padding-y 0;
+
+    &:hover .navbar-toggler-icon {
+      background-image: $navbar-toggler-icon-hover;
+    }
+  }
+
+  .navbar-toggler-icon {
+    height: 23px;
+    background-image: $navbar-toggler-icon;
   }
 
   .navbar-nav {

React_Full_Project/scss/core/_sidebar.scss

@@ -78,8 +78,8 @@
 
   .nav {
     @include sidebar-width($sidebar-borders, $sidebar-width);
-    min-height: 100%;
     flex-direction: column;
+    min-height: 100%;
   }
 
   .nav-title {

React_Full_Project/scss/core/_variables.scss

@@ -69,6 +69,9 @@ $navbar-hover-color:                  $gray-800 !default;
 $navbar-active-color:                 $gray-800 !default;
 $navbar-disabled-color:               $gray-300 !default;
 
+$navbar-toggler-icon:                 str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+$navbar-toggler-icon-hover:           str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
+
 // Sidebar
 
 $sidebar-width:                       200px !default;

React_Full_Project/scss/style.scss

@@ -1,10 +1,11 @@
 /*!
  * CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.1
+ * @version v1.0.2
  * @link http://coreui.io
  * Copyright (c) 2017 creativeLabs Łukasz Holeczek
  * @license MIT
  */
+
 // Override Boostrap variables
 @import "bootstrap-variables";
 

React_Full_Project/src/components/Aside/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Aside",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "./Aside.js"
 }