Merge pull request #2110 from REJack/v3-dev

little v3 changes

build/config/postcss.config.js

+'use strict'
+
+module.exports = (ctx) => ({
+  map: ctx.file.dirname.includes('examples') ? false : {
+    inline: false,
+    annotation: true,
+    sourcesContent: true
+  },
+  plugins: {
+    autoprefixer: {
+      cascade: false
+    }
+  }
+})

build/npm/Plugins.js

@@ -16,12 +16,12 @@ const Plugins = [
   },
   // Font Awesome
   {
-    from: 'node_modules/font-awesome/css',
-    to  : 'plugins/font-awesome/css'
+    from: 'node_modules/@fortawesome/fontawesome-free/css',
+    to  : 'plugins/fontawesome-free/css'
   },
   {
-    from: 'node_modules/font-awesome/fonts',
-    to  : 'plugins/font-awesome/fonts'
+    from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
+    to  : 'plugins/fontawesome-free/webfonts'
   },
   // Chart.js 2
   {
@@ -45,6 +45,45 @@ const Plugins = [
   {
     from: 'node_modules/datatables.net-bs4/css',
     to: 'plugins/datatables'
+  },
+
+  // Doc Assets
+  // AdminLTE Dist
+  {
+    from: 'dist/css',
+    to  : 'docs/assets/css'
+  },
+  {
+    from: 'dist/js',
+    to  : 'docs/assets/js'
+  },
+  // jQuery
+  {
+    from: 'node_modules/jquery/dist',
+    to  : 'docs/assets/plugins/jquery'
+  },
+  // Popper
+  {
+    from: 'node_modules/popper.js/dist',
+    to  : 'docs/assets/plugins/popper'
+  },
+  // Bootstrap
+  {
+    from: 'node_modules/bootstrap/dist/js',
+    to  : 'docs/assets/plugins/bootstrap/js'
+  },
+  // Font Awesome
+  {
+    from: 'node_modules/@fortawesome/fontawesome-free/css',
+    to  : 'docs/assets/plugins/fontawesome-free/css'
+  },
+  {
+    from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
+    to  : 'docs/assets/plugins/fontawesome-free/webfonts'
+  },
+  {
+    from: 'plugins/slimScroll',
+    to  : 'docs/assets/plugins/slimScroll'
   }
 ]
 

build/scss/_buttons.scss

@@ -60,6 +60,9 @@
   font-size: 12px;
   // Icons within the btn
   > .fa,
+  > .fas,
+  > .far,
+  > .fab,
   > .glyphicon,
   > .ion {
     font-size: 20px;

build/scss/_cards.scss

@@ -65,7 +65,10 @@
     z-index: 50;
     background: rgba(255, 255, 255, 0.7);
     @include border-radius($border-radius);
-    > .fa {
+    > .fa, 
+    > .fas,
+    > .far,
+    > .fab {
       position: absolute;
       top: 50%;
       left: 50%;
@@ -253,7 +256,12 @@
       float: right;
       color: theme-color("danger");
       // icons
-      > .fa, > .glyphicon, > .ion {
+      > .fa, 
+      > .fas, 
+      > .far, 
+      > .fab, 
+      > .glyphicon, 
+      > .ion {
         margin-right: 5px;
         cursor: pointer;
       }

build/scss/_layout.scss

@@ -12,6 +12,10 @@ body,
 .wrapper {
   position: relative;
 
+  & .content-wrapper {
+    min-height: calc(100vh - 112px);
+  }
+
   .layout-boxed & {
     @include box-shadow(0 0 10px rgba(0, 0, 0, .3));
 
@@ -20,6 +24,34 @@ body,
       margin: 0 auto;
       max-width: $boxed-layout-max-width;
     }
+
+    & .main-sidebar {
+      left: inherit;
+    }
+  }
+
+  .layout-top-nav & {
+    margin-left: 0;
+
+
+    & .main-sidebar {
+      bottom: inherit;
+      height: inherit;
+    }
+
+    .brand-image {
+      height: 33px;
+    }
+
+    & .main-sidebar{
+      display: none;
+    }
+
+    & .content-wrapper,
+    & .main-header,
+    & .main-footer {
+      margin-left: 0;
+    }
   }
 }
 

build/scss/_mailbox.scss

@@ -67,6 +67,10 @@
 .mailbox-attachment-size {
   color: #999;
   font-size: 12px;
+  > span {
+    display: inline-block;
+    padding-top: 0.75rem;
+  }
 }
 
 .mailbox-attachment-icon {
@@ -74,6 +78,7 @@
   font-size: 65px;
   color: #666;
   padding: 20px 10px;
+  max-height: 132.5px;
   &.has-img {
     padding: 0;
     > img {

build/scss/_main-sidebar.scss

@@ -73,6 +73,10 @@
     position: absolute;
     right: 1rem;
     top: 12px;
+
+    &:nth-child(2) {
+      right: 2.5rem;
+    }
   }
 
   .menu-open {
@@ -81,7 +85,7 @@
     }
 
     > .nav-link {
-      .right {
+      i.right {
         @include rotate(-90deg);
       }
     }
@@ -96,6 +100,13 @@
       width: $sidebar-nav-icon-width;
       font-size: 1.2rem;
       margin-right: .2rem;
+      
+      &.fa,
+      &.fas,
+      &.far,
+      &.fab {
+        font-size: 1.1rem;
+      }
     }
 
     .float-right {

build/scss/_miscellaneous.scss

@@ -29,7 +29,7 @@ a.text-muted:hover {
   }
 }
 
-// Background colors
+// Background colors (theme colors)
 @each $name, $color in $theme-colors {
   .bg-#{$name} {
     &,
@@ -39,6 +39,17 @@ a.text-muted:hover {
   }
 }
 
+// Background colors (colors)
+@each $name, $color in $colors {
+  .bg-#{$name} {
+    background-color: #{$color};
+    &,
+    a {
+      color: color-yiq($color) !important;
+    }
+  }
+}
+
 .bg-gray {
   color: #000;
   background-color: $gray-500;

build/scss/_navs.scss

@@ -6,10 +6,41 @@
   .nav-link {
     color: $gray-600;
 
-    &:not(.active) {
-      &:not(.dropdown-toggle):hover {
-        color: theme-color("primary")
+    &:not(.active):hover {
+      color: theme-color("primary")
+    }
+  }
+  .nav-item {
+    &.dropdown.show {
+      .nav-link:hover {
+        color: $dropdown-link-active-color;
       }
     }
   }
 }
+
+
+//
+// Color variants
+//
+@each $color, $value in $theme-colors {
+  @if $color==dark or $color==light {
+    .navbar-#{$color} {
+      background-color: $value;
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  @if $color!=dark and $color!=light {
+    .navbar-#{$color} {
+      background-color: $value;
+    }
+  }
+}
+
+@each $color, $value in $colors {
+  .navbar-#{$color} {
+    background-color: $value;
+  }
+}

build/scss/_small-box.scss

@@ -58,21 +58,40 @@
 
   // the icon
   .icon {
-    transition: all $transition-speed linear;
-    position: absolute;
-    top: -10px;
-    right: 10px;
     z-index: 0;
-    font-size: 90px;
     color: rgba(0, 0, 0, 0.15);
+
+    > i {
+      transition: all $transition-speed linear;
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      font-size: 90px;
+      
+      &.fa, 
+      &.fas,
+      &.far,
+      &.fab {
+        font-size: 70px;
+        top: 20px;
+      }
+    }
+
   }
 
   // Small box hover state
   &:hover {
     text-decoration: none;
     // Animate icons on small box hover
-    .icon {
+    .icon > i {
       font-size: 95px;
+
+      &.fa, 
+      &.fas,
+      &.far,
+      &.fab {
+        font-size: 75px;
+      }
     }
   }
 }

dist/js/demo.js

@@ -15,16 +15,26 @@
   $sidebar.append($container)
 
   var navbar_dark_skins = [
-    'bg-primary',
-    'bg-info',
-    'bg-success',
-    'bg-danger'
+    'navbar-primary',
+    'navbar-secondary',
+    'navbar-info',
+    'navbar-success',
+    'navbar-danger',
+    'navbar-indigo',
+    'navbar-purple',
+    'navbar-pink',
+    'navbar-teal',
+    'navbar-cyan',
+    'navbar-dark',
+    'navbar-gray-dark',
+    'navbar-gray',
   ]
 
   var navbar_light_skins = [
-    'bg-warning',
-    'bg-white',
-    'bg-gray-light'
+    'navbar-light',
+    'navbar-warning',
+    'navbar-white',
+    'navbar-orange',
   ]
 
   $container.append(
@@ -38,7 +48,6 @@
   var navbar_all_colors       = navbar_dark_skins.concat(navbar_light_skins)
   var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function (e) {
     var color = $(this).data('color')
-    console.log('Adding ' + color)
     var $main_header = $('.main-header')
     $main_header.removeClass('navbar-dark').removeClass('navbar-light')
     navbar_all_colors.map(function (color) {
@@ -47,9 +56,7 @@
 
     if (navbar_dark_skins.indexOf(color) > -1) {
       $main_header.addClass('navbar-dark')
-      console.log('AND navbar-dark')
     } else {
-      console.log('AND navbar-light')
       $main_header.addClass('navbar-light')
     }
 

dist/js/plugins/chartjs2/docs/general/device-pixel-ratio.md

-# Device Pixel Ratio
-
-By default the chart's canvas will use a 1:1 pixel ratio, unless the physical display has a higher pixel ratio (e.g. Retina displays).
-
-For applications where a chart will be converted to a bitmap, or printed to a higher DPI medium it can be desirable to render the chart at a higher resolution than the default.
-
-Setting `devicePixelRatio` to a value other than 1 will force the canvas size to be scaled by that amount, relative to the container size. There should be no visible difference on screen; the difference will only be visible when the image is zoomed or printed.
-
-## Configuration Options
-
-| Name | Type | Default | Description
-| ---- | ---- | ------- | -----------
-| `devicePixelRatio` | `Number` | window.devicePixelRatio | Override the window's default devicePixelRatio.

dist/js/plugins/chartjs2/docs/gitbook/gitbook-plugin-anchorjs/anchor-style.js

-gitbook.events.bind('start', function(e, config) {
-    anchors.options = config.anchorjs || {};
-});
-
-gitbook.events.bind('page.change', function() {
-    anchors.add('h1,h2,h3,h4,h5');
-});

dist/js/plugins/chartjs2/docs/gitbook/gitbook-plugin-chartjs/chartjs-plugin-deferred.js

-/*!
- * chartjs-plugin-deferred
- * http://chartjs.org/
- * Version: 0.2.0
- *
- * Copyright 2016 Simon Brunel
- * Released under the MIT license
- * https://github.com/chartjs/chartjs-plugin-deferred/blob/master/LICENSE.md
- */
-/* global window: false */
-'use strict';
-
-(function() {
-
-	var Chart = window.Chart;
-	var helpers = Chart.helpers;
-	var STUB_KEY = '_chartjs_deferred';
-	var MODEL_KEY = '_deferred_model';
-
-	/**
-	 * Plugin based on discussion from Chart.js issue #2745.
-	 * @see https://github.com/chartjs/Chart.js/issues/2745
-	 */
-	Chart.Deferred = Chart.Deferred || {};
-	Chart.Deferred.defaults = {
-		enabled: true,
-		xOffset: 0,
-		yOffset: 0,
-		delay: 0
-	};
-
-	// DOM implementation
-	// @TODO move it in Chart.js: src/core/core.platform.js
-	Chart.platform = helpers.extend(Chart.platform || {}, {
-		defer: function(fn, delay, scope) {
-			var callback = function() {
-				fn.call(scope);
-			};
-			if (!delay) {
-				helpers.requestAnimFrame.call(window, callback);
-			} else {
-				window.setTimeout(callback, delay);
-			}
-		}
-	});
-
-	function computeOffset(value, base) {
-		var number = parseInt(value, 10);
-		if (isNaN(number)) {
-			return 0;
-		} else if (typeof value === 'string' && value.indexOf('%') !== -1) {
-			return number / 100 * base;
-		}
-		return number;
-	}
-
-	function chartInViewport(instance) {
-		var model = instance[MODEL_KEY];
-		var canvas = instance.chart.canvas;
-
-		// http://stackoverflow.com/a/21696585
-		if (canvas.offsetParent === null) {
-			return false;
-		}
-
-		var rect = canvas.getBoundingClientRect();
-		var dy = computeOffset(model.yOffset || 0, rect.height);
-		var dx = computeOffset(model.xOffset || 0, rect.width);
-
-		return rect.right - dx >= 0
-			&& rect.bottom - dy >= 0
-			&& rect.left + dx <= window.innerWidth
-			&& rect.top + dy <= window.innerHeight;
-	}
-
-	function buildDeferredModel(instance) {
-		var defaults = Chart.Deferred.defaults;
-		var options = instance.options.deferred;
-		var getValue = helpers.getValueOrDefault;
-
-		if (options === undefined) {
-			options = {};
-		} else if (typeof options === 'boolean') {
-			// accepting { options: { deferred: true } }
-			options = {enabled: options};
-		}
-
-		return {
-			enabled: getValue(options.enabled, defaults.enabled),
-			xOffset: getValue(options.xOffset, defaults.xOffset),
-			yOffset: getValue(options.yOffset, defaults.yOffset),
-			delay: getValue(options.delay, defaults.delay),
-			appeared: false,
-			delayed: false,
-			loaded: false,
-			elements: []
-		};
-	}
-
-	function onScroll(event) {
-		var node = event.target;
-		var stub = node[STUB_KEY];
-		if (stub.ticking) {
-			return;
-		}
-
-		stub.ticking = true;
-		Chart.platform.defer(function() {
-			var instances = stub.instances.slice();
-			var ilen = instances.length;
-			var instance, i;
-
-			for (i=0; i<ilen; ++i) {
-				instance = instances[i];
-				if (chartInViewport(instance)) {
-					unwatch(instance); // eslint-disable-line
-					instance[MODEL_KEY].appeared = true;
-					instance.update();
-				}
-			}
-
-			stub.ticking = false;
-		});
-	}
-
-	function isScrollable(node) {
-		var type = node.nodeType;
-		if (type === Node.ELEMENT_NODE) {
-			var overflowX = helpers.getStyle(node, 'overflow-x');
-			var overflowY = helpers.getStyle(node, 'overflow-y');
-			return overflowX === 'auto' || overflowX === 'scroll'
-				|| overflowY === 'auto' || overflowY === 'scroll';
-		}
-
-		return node.nodeType === Node.DOCUMENT_NODE;
-	}
-
-	function watch(instance) {
-		var canvas = instance.chart.canvas;
-		var parent = canvas.parentElement;
-		var stub, instances;
-
-		while (parent) {
-			if (isScrollable(parent)) {
-				stub = parent[STUB_KEY] || (parent[STUB_KEY] = {});
-				instances = stub.instances || (stub.instances = []);
-				if (instances.length === 0) {
-					parent.addEventListener('scroll', onScroll, {passive: true});
-				}
-
-				instances.push(instance);
-				instance[MODEL_KEY].elements.push(parent);
-			}
-
-			parent = parent.parentElement || parent.ownerDocument;
-		}
-	}
-
-	function unwatch(instance) {
-		instance[MODEL_KEY].elements.forEach(function(element) {
-			var instances = element[STUB_KEY].instances;
-			instances.splice(instances.indexOf(instance), 1);
-			if (!instances.length) {
-				helpers.removeEvent(element, 'scroll', onScroll);
-				delete element[STUB_KEY];
-			}
-		});
-
-		instance[MODEL_KEY].elements = [];
-	}
-
-	Chart.plugins.register({
-		beforeInit: function(instance) {
-			var model = instance[MODEL_KEY] = buildDeferredModel(instance);
-			if (model.enabled) {
-				watch(instance);
-			}
-		},
-
-		beforeDatasetsUpdate: function(instance) {
-			var model = instance[MODEL_KEY];
-			if (!model.enabled) {
-				return true;
-			}
-
-			if (!model.loaded) {
-				if (!model.appeared && !chartInViewport(instance)) {
-					// cancel the datasets update
-					return false;
-				}
-
-				model.appeared = true;
-				model.loaded = true;
-				unwatch(instance);
-
-				if (model.delay > 0) {
-					model.delayed = true;
-					Chart.platform.defer(function() {
-						model.delayed = false;
-						instance.update();
-					}, model.delay);
-
-					return false;
-				}
-			}
-
-			if (model.delayed) {
-				// in case of delayed update, ensure to block external requests, such
-				// as interacting with the legend label, or direct calls to update()
-				return false;
-			}
-		}
-	});
-
-}());