enhanced card & widget with expand/compress (fullscreen) and some little fixes

- updated Widget.js
- updated _cards.scss
- enabled gradients in _bootstrap-variables.scss
- fixed old bg-*-gradient (theme colors)
- added bg-*-gradient (colors)
- updated cards demo section in pages/widgets.html

build/js/Widget.js

@@ -19,12 +19,15 @@ const Widget = (($) => {
   const Event = {
     EXPANDED : `expanded${EVENT_KEY}`,
     COLLAPSED: `collapsed${EVENT_KEY}`,
+    MAXIMIZED: `maximized${EVENT_KEY}`,
+    MINIMIZED: `minimized${EVENT_KEY}`,
     REMOVED  : `removed${EVENT_KEY}`
   }
 
   const Selector = {
     DATA_REMOVE   : '[data-widget="remove"]',
     DATA_COLLAPSE : '[data-widget="collapse"]',
+    DATA_MAXIMIZE : '[data-widget="maximize"]',
     CARD          : '.card',
     CARD_HEADER   : '.card-header',
     CARD_BODY     : '.card-body',
@@ -36,8 +39,12 @@ const Widget = (($) => {
 
   const ClassName = {
     COLLAPSED     : 'collapsed-card',
+    WAS_COLLAPSED : 'was-collapsed',
+    MAXIMIZED     : 'maximized-card',
     COLLAPSE_ICON : 'fa-minus',
-    EXPAND_ICON   : 'fa-plus'
+    EXPAND_ICON   : 'fa-plus',
+    MAXIMIZE_ICON : 'fa-expand',
+    MINIMIZE_ICON : 'fa-compress',
   }
 
   const Default = {
@@ -100,6 +107,44 @@ const Widget = (($) => {
       this.collapse()
     }
     
+    toggleMaximize() {
+      var button = this._element.find('i')
+
+      if (this._parent.hasClass(ClassName.MAXIMIZED)) {
+        button.addClass(ClassName.MAXIMIZE_ICON).removeClass(ClassName.MINIMIZE_ICON)
+        this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
+          'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
+        ).delay(100).queue(function(){
+          $(this).removeClass(ClassName.MAXIMIZED)
+          $('html').removeClass(ClassName.MAXIMIZED)
+          $(this).trigger(Event.MINIMIZED)
+          $(this).css({
+            'height': 'inherit',
+            'width': 'inherit'
+          })
+          if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
+            $(this).removeClass(ClassName.WAS_COLLAPSED)
+          }
+          $(this).dequeue()
+        })
+      } else {
+        button.addClass(ClassName.MINIMIZE_ICON).removeClass(ClassName.MAXIMIZE_ICON)
+        this._parent.css({
+          'height': this._parent.height(),
+          'width': this._parent.width(),
+          'transition': 'all .15s'
+        }).delay(150).queue(function(){
+          $(this).addClass(ClassName.MAXIMIZED)
+          $('html').addClass(ClassName.MAXIMIZED)
+          $(this).trigger(Event.MAXIMIZED)
+          if ($(this).hasClass(ClassName.COLLAPSED)) {
+            $(this).addClass(ClassName.WAS_COLLAPSED)
+          }
+          $(this).dequeue()
+        })
+      }
+    }
+
     // Private
 
     _init(card) {
@@ -155,6 +200,14 @@ const Widget = (($) => {
     Widget._jQueryInterface.call($(this), 'remove')
   })
 
+  $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
+    if (event) {
+      event.preventDefault()
+    }
+
+    Widget._jQueryInterface.call($(this), 'toggleMaximize')
+  })
+
   /**
    * jQuery API
    * ====================================================

build/scss/_bootstrap-variables.scss

@@ -101,7 +101,7 @@ $yiq-text-light: $white !default;
 $enable-caret:              true !default;
 $enable-rounded:            true !default;
 $enable-shadows:            true !default;
-$enable-gradients:          false !default;
+$enable-gradients:          true !default;
 $enable-transitions:        true !default;
 $enable-hover-media-query:  false !default; // Deprecated, no longer affects any compiled CSS
 $enable-grid-classes:       true !default;

build/scss/_cards.scss

@@ -14,6 +14,30 @@
     }
   }
 
+  &.maximized-card {
+    z-index: 9999;
+    width: 100% !important;
+    height: 100% !important;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    
+    &.was-collapsed .card-body {
+      display: block !important;
+    }
+
+    [data-widget="collapse"] {
+      display: none;
+    }
+
+    .card-header,
+    .card-footer {
+      @include border-radius(0 !important);
+    }
+  }
+
   // collapsed mode
   &.collapsed-card {
     .card-body,
@@ -49,6 +73,11 @@
   }
 }
 
+// Maximized Card Body Scroll fix
+html.maximized-card {
+  overflow: hidden;
+}
+
 .card,
 .overlay-wrapper {
   // Box overlay for LOADING STATE effect

build/scss/_miscellaneous.scss

@@ -70,19 +70,28 @@ a.text-muted:hover {
   color: color-yiq($white) !important;
 }
 
-// Gradient Background colors
+// Gradient Background colors (theme colors)
 @each $name, $color in $theme-colors {
   .bg-#{$name}-gradient {
-    @include gradient($color, $color, lighten($color, 10%));
+    @include gradient-bg($color);
     color: color-yiq($color);
   }
 }
 
-// Disabled!
+// Gradient Background colors (colors)
+@each $name, $color in $colors {
+  .bg-#{$name}-gradient {
+    @include gradient-bg($color);
+    color: color-yiq($color);
+  }
+}
+
+// Backgrund Color Disabled
 [class^="bg-"].disabled {
   opacity: .65;
 }
 
+// Link Styles
 .link-muted {
   color: darken($gray-500, 30%);
   &:hover,
@@ -114,23 +123,6 @@ a.text-muted:hover {
   box-shadow: none !important;
 }
 
-// Unstyled List
-.list-unstyled {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.list-group-unbordered {
-  > .list-group-item {
-    border-left: 0;
-    border-right: 0;
-    border-radius: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-
 // Remove border radius
 .flat {
   @include border-radius(0 !important);
@@ -151,6 +143,22 @@ a.text-muted:hover {
 }
 
 // List utility classes
+.list-unstyled {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.list-group-unbordered {
+  > .list-group-item {
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+    padding-left: 0;
+    padding-right: 0;
+  }
+}
+
 .list-header {
   font-size: 15px;
   padding: 10px 4px;
@@ -361,3 +369,4 @@ a.text-muted:hover {
 .flex-1 {
   flex: 1;
 }
+

dist/css/adminlte.css

@@ -2002,7 +2002,7 @@ textarea.form-control {
 
 .was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
   border-color: #34ce57;
-  background-color: #34ce57;
+  background: #34ce57 linear-gradient(180deg, #52d670, #34ce57) repeat-x;
 }
 
 .was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
@@ -2125,7 +2125,7 @@ textarea.form-control {
 
 .was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
   border-color: #e4606d;
-  background-color: #e4606d;
+  background: #e4606d linear-gradient(180deg, #e87883, #e4606d) repeat-x;
 }
 
 .was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
@@ -2265,14 +2265,14 @@ fieldset:disabled a.btn {
 
 .btn-primary {
   color: #ffffff;
-  background-color: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
   border-color: #007bff;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-primary:hover {
   color: #ffffff;
-  background-color: #0069d9;
+  background: #0069d9 linear-gradient(180deg, #267fde, #0069d9) repeat-x;
   border-color: #0062cc;
 }
 
@@ -2284,12 +2284,14 @@ fieldset:disabled a.btn {
   color: #ffffff;
   background-color: #007bff;
   border-color: #007bff;
+  background-image: none;
 }
 
 .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
   color: #ffffff;
   background-color: #0062cc;
+  background-image: none;
   border-color: #005cbf;
 }
 
@@ -2300,14 +2302,14 @@ fieldset:disabled a.btn {
 
 .btn-secondary {
   color: #ffffff;
-  background-color: #6c757d;
+  background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x;
   border-color: #6c757d;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-secondary:hover {
   color: #ffffff;
-  background-color: #5a6268;
+  background: #5a6268 linear-gradient(180deg, #73797f, #5a6268) repeat-x;
   border-color: #545b62;
 }
 
@@ -2319,12 +2321,14 @@ fieldset:disabled a.btn {
   color: #ffffff;
   background-color: #6c757d;
   border-color: #6c757d;
+  background-image: none;
 }
 
 .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
 .show > .btn-secondary.dropdown-toggle {
   color: #ffffff;
   background-color: #545b62;
+  background-image: none;
   border-color: #4e555b;
 }
 
@@ -2335,14 +2339,14 @@ fieldset:disabled a.btn {
 
 .btn-success {
   color: #ffffff;
-  background-color: #28a745;
+  background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x;
   border-color: #28a745;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-success:hover {
   color: #ffffff;
-  background-color: #218838;
+  background: #218838 linear-gradient(180deg, #429a56, #218838) repeat-x;
   border-color: #1e7e34;
 }
 
@@ -2354,12 +2358,14 @@ fieldset:disabled a.btn {
   color: #ffffff;
   background-color: #28a745;
   border-color: #28a745;
+  background-image: none;
 }
 
 .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
   color: #ffffff;
   background-color: #1e7e34;
+  background-image: none;
   border-color: #1c7430;
 }
 
@@ -2370,14 +2376,14 @@ fieldset:disabled a.btn {
 
 .btn-info {
   color: #ffffff;
-  background-color: #17a2b8;
+  background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x;
   border-color: #17a2b8;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-info:hover {
   color: #ffffff;
-  background-color: #138496;
+  background: #138496 linear-gradient(180deg, #3697a6, #138496) repeat-x;
   border-color: #117a8b;
 }
 
@@ -2389,12 +2395,14 @@ fieldset:disabled a.btn {
   color: #ffffff;
   background-color: #17a2b8;
   border-color: #17a2b8;
+  background-image: none;
 }
 
 .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
   color: #ffffff;
   background-color: #117a8b;
+  background-image: none;
   border-color: #10707f;
 }
 
@@ -2405,14 +2413,14 @@ fieldset:disabled a.btn {
 
 .btn-warning {
   color: #1F2D3D;
-  background-color: #ffc107;
+  background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x;
   border-color: #ffc107;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-warning:hover {
   color: #1F2D3D;
-  background-color: #e0a800;
+  background: #e0a800 linear-gradient(180deg, #e4b526, #e0a800) repeat-x;
   border-color: #d39e00;
 }
 
@@ -2424,12 +2432,14 @@ fieldset:disabled a.btn {
   color: #1F2D3D;
   background-color: #ffc107;
   border-color: #ffc107;
+  background-image: none;
 }
 
 .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
 .show > .btn-warning.dropdown-toggle {
   color: #1F2D3D;
   background-color: #d39e00;
+  background-image: none;
   border-color: #c69500;
 }
 
@@ -2440,14 +2450,14 @@ fieldset:disabled a.btn {
 
 .btn-danger {
   color: #ffffff;
-  background-color: #dc3545;
+  background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x;
   border-color: #dc3545;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-danger:hover {
   color: #ffffff;
-  background-color: #c82333;
+  background: #c82333 linear-gradient(180deg, #d04451, #c82333) repeat-x;
   border-color: #bd2130;
 }
 
@@ -2459,12 +2469,14 @@ fieldset:disabled a.btn {
   color: #ffffff;
   background-color: #dc3545;
   border-color: #dc3545;
+  background-image: none;
 }
 
 .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
   color: #ffffff;
   background-color: #bd2130;
+  background-image: none;
   border-color: #b21f2d;
 }
 
@@ -2475,14 +2487,14 @@ fieldset:disabled a.btn {
 
 .btn-light {
   color: #1F2D3D;
-  background-color: #f8f9fa;
+  background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
   border-color: #f8f9fa;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-light:hover {
   color: #1F2D3D;
-  background-color: #e2e6ea;
+  background: #e2e6ea linear-gradient(180deg, #e6eaed, #e2e6ea) repeat-x;
   border-color: #dae0e5;
 }
 
@@ -2494,12 +2506,14 @@ fieldset:disabled a.btn {
   color: #1F2D3D;
   background-color: #f8f9fa;
   border-color: #f8f9fa;
+  background-image: none;
 }
 
 .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
 .show > .btn-light.dropdown-toggle {
   color: #1F2D3D;
   background-color: #dae0e5;
+  background-image: none;
   border-color: #d3d9df;
 }
 
@@ -2510,14 +2524,14 @@ fieldset:disabled a.btn {
 
 .btn-dark {
   color: #ffffff;
-  background-color: #343a40;
+  background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x;
   border-color: #343a40;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
 }
 
 .btn-dark:hover {
   color: #ffffff;
-  background-color: #23272b;
+  background: #23272b linear-gradient(180deg, #44474b, #23272b) repeat-x;
   border-color: #1d2124;
 }
 
@@ -2529,12 +2543,14 @@ fieldset:disabled a.btn {
   color: #ffffff;
   background-color: #343a40;
   border-color: #343a40;
+  background-image: none;
 }
 
 .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
 .show > .btn-dark.dropdown-toggle {
   color: #ffffff;
   background-color: #1d2124;
+  background-image: none;
   border-color: #171a1d;
 }
 
@@ -3095,19 +3111,20 @@ input[type="button"].btn-block {
 .dropdown-item:hover, .dropdown-item:focus {
   color: #16181b;
   text-decoration: none;
-  background-color: #f8f9fa;
+  background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
 }
 
 .dropdown-item.active, .dropdown-item:active {
   color: #ffffff;
   text-decoration: none;
-  background-color: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
 }
 
 .dropdown-item.disabled, .dropdown-item:disabled {
   color: #6c757d;
   pointer-events: none;
   background-color: transparent;
+  background-image: none;
 }
 
 .dropdown-menu.show {
@@ -3463,7 +3480,7 @@ input[type="button"].btn-block {
 .custom-control-input:checked ~ .custom-control-label::before {
   color: #ffffff;
   border-color: #007bff;
-  background-color: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
   box-shadow: none;
 }
 
@@ -3531,7 +3548,7 @@ input[type="button"].btn-block {
 
 .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
   border-color: #007bff;
-  background-color: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
   box-shadow: none;
 }
 
@@ -3723,7 +3740,7 @@ input[type="button"].btn-block {
   line-height: 1.5;
   color: #495057;
   content: "Browse";
-  background-color: #e9ecef;
+  background: #e9ecef linear-gradient(180deg, #eceff1, #e9ecef) repeat-x;
   border-left: inherit;
   border-radius: 0 0.25rem 0.25rem 0;
 }
@@ -3762,7 +3779,7 @@ input[type="button"].btn-block {
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
-  background-color: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
   border: 0;
   border-radius: 1rem;
   box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
@@ -3778,7 +3795,7 @@ input[type="button"].btn-block {
 }
 
 .custom-range::-webkit-slider-thumb:active {
-  background-color: #b3d7ff;
+  background: #b3d7ff linear-gradient(180deg, #beddff, #b3d7ff) repeat-x;
 }
 
 .custom-range::-webkit-slider-runnable-track {
@@ -3795,7 +3812,7 @@ input[type="button"].btn-block {
 .custom-range::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
-  background-color: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
   border: 0;
   border-radius: 1rem;
   box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
@@ -3811,7 +3828,7 @@ input[type="button"].btn-block {
 }
 
 .custom-range::-moz-range-thumb:active {
-  background-color: #b3d7ff;
+  background: #b3d7ff linear-gradient(180deg, #beddff, #b3d7ff) repeat-x;
 }
 
 .custom-range::-moz-range-track {
@@ -3831,7 +3848,7 @@ input[type="button"].btn-block {
   margin-top: 0;
   margin-right: 0.2rem;
   margin-left: 0.2rem;
-  background-color: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
   border: 0;
   border-radius: 1rem;
   box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
@@ -3846,7 +3863,7 @@ input[type="button"].btn-block {
 }
 
 .custom-range::-ms-thumb:active {
-  background-color: #b3d7ff;
+  background: #b3d7ff linear-gradient(180deg, #beddff, #b3d7ff) repeat-x;
 }
 
 .custom-range::-ms-track {
@@ -4921,7 +4938,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-primary {
   color: #004085;
-  background-color: #cce5ff;
+  background: #cce5ff linear-gradient(180deg, #d4e9ff, #cce5ff) repeat-x;
   border-color: #b8daff;
 }
 
@@ -4935,7 +4952,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-secondary {
   color: #383d41;
-  background-color: #e2e3e5;
+  background: #e2e3e5 linear-gradient(180deg, #e6e7e9, #e2e3e5) repeat-x;
   border-color: #d6d8db;
 }
 
@@ -4949,7 +4966,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-success {
   color: #155724;
-  background-color: #d4edda;
+  background: #d4edda linear-gradient(180deg, #daf0e0, #d4edda) repeat-x;
   border-color: #c3e6cb;
 }
 
@@ -4963,7 +4980,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-info {
   color: #0c5460;
-  background-color: #d1ecf1;
+  background: #d1ecf1 linear-gradient(180deg, #d8eff3, #d1ecf1) repeat-x;
   border-color: #bee5eb;
 }
 
@@ -4977,7 +4994,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-warning {
   color: #856404;
-  background-color: #fff3cd;
+  background: #fff3cd linear-gradient(180deg, #fff5d5, #fff3cd) repeat-x;
   border-color: #ffeeba;
 }
 
@@ -4991,7 +5008,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-danger {
   color: #721c24;
-  background-color: #f8d7da;
+  background: #f8d7da linear-gradient(180deg, #f9dde0, #f8d7da) repeat-x;
   border-color: #f5c6cb;
 }
 
@@ -5005,7 +5022,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-light {
   color: #818182;
-  background-color: #fefefe;
+  background: #fefefe linear-gradient(180deg, #fefefe, #fefefe) repeat-x;
   border-color: #fdfdfe;
 }
 
@@ -5019,7 +5036,7 @@ a.badge-dark:focus, a.badge-dark.focus {
 
 .alert-dark {
   color: #1b1e21;
-  background-color: #d6d8d9;
+  background: #d6d8d9 linear-gradient(180deg, #dcdedf, #d6d8d9) repeat-x;
   border-color: #c6c8ca;
 }
 
@@ -6097,10 +6114,12 @@ a.close.disabled, a.disabled.mailbox-attachment-close {
 
 .carousel-control-prev {
   left: 0;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001));
 }
 
 .carousel-control-next {
   right: 0;
+  background: linear-gradient(270deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001));
 }
 
 .carousel-control-prev-icon,
@@ -6368,6 +6387,38 @@ button.bg-dark:focus {
   background-color: #1d2124 !important;
 }
 
+.bg-gradient-primary {
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x !important;
+}
+
+.bg-gradient-secondary {
+  background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x !important;
+}
+
+.bg-gradient-success {
+  background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x !important;
+}
+
+.bg-gradient-info {
+  background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x !important;
+}
+
+.bg-gradient-warning {
+  background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x !important;
+}
+
+.bg-gradient-danger {
+  background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x !important;
+}
+
+.bg-gradient-light {
+  background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x !important;
+}
+
+.bg-gradient-dark {
+  background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x !important;
+}
+
 .bg-white {
   background-color: #ffffff !important;
 }
@@ -12101,7 +12152,7 @@ textarea.form-control.is-warning {
 
 .custom-control-input.is-warning:checked ~ .custom-control-label::before {
   border-color: #ffce3a;
-  background-color: #ffce3a;
+  background: #ffce3a linear-gradient(180deg, #ffd558, #ffce3a) repeat-x;
 }
 
 .custom-control-input.is-warning:focus ~ .custom-control-label::before {
@@ -12666,6 +12717,30 @@ textarea.form-control.is-warning {
   color: #ffffff;
 }
 
+.card.maximized-card {
+  z-index: 9999;
+  width: 100% !important;
+  height: 100% !important;
+  max-width: 100% !important;
+  max-height: 100% !important;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.card.maximized-card.was-collapsed .card-body {
+  display: block !important;
+}
+
+.card.maximized-card [data-widget="collapse"] {
+  display: none;
+}
+
+.card.maximized-card .card-header,
+.card.maximized-card .card-footer {
+  border-radius: 0 !important;
+}
+
 .card.collapsed-card .card-body,
 .card.collapsed-card .card-footer {
   display: none;
@@ -12693,6 +12768,10 @@ textarea.form-control.is-warning {
   border-left: 1px solid rgba(0, 0, 0, 0.125);
 }
 
+html.maximized-card {
+  overflow: hidden;
+}
+
 .card > .overlay,
 .card > .loading-img,
 .overlay-wrapper > .overlay,
@@ -15659,50 +15738,107 @@ a.text-muted:hover {
 }
 
 .bg-primary-gradient {
-  background: #007bff;
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
-  background: -o-linear-gradient(#3395ff, #007bff);
   color: #ffffff;
 }
 
 .bg-secondary-gradient {
-  background: #6c757d;
+  background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x;
-  background: -o-linear-gradient(#868e96, #6c757d);
   color: #ffffff;
 }
 
 .bg-success-gradient {
-  background: #28a745;
+  background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x;
-  background: -o-linear-gradient(#34ce57, #28a745);
   color: #ffffff;
 }
 
 .bg-info-gradient {
-  background: #17a2b8;
+  background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x;
-  background: -o-linear-gradient(#1fc8e3, #17a2b8);
   color: #ffffff;
 }
 
 .bg-warning-gradient {
-  background: #ffc107;
+  background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x;
-  background: -o-linear-gradient(#ffce3a, #ffc107);
   color: #1F2D3D;
 }
 
 .bg-danger-gradient {
-  background: #dc3545;
+  background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x;
-  background: -o-linear-gradient(#e4606d, #dc3545);
   color: #ffffff;
 }
 
 .bg-light-gradient {
-  background: #f8f9fa;
+  background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
-  background: -o-linear-gradient(white, #f8f9fa);
   color: #1F2D3D;
 }
 
 .bg-dark-gradient {
-  background: #343a40;
+  background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x;
-  background: -o-linear-gradient(#4b545c, #343a40);
+  color: #ffffff;
+}
+
+.bg-blue-gradient {
+  background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
+  color: #ffffff;
+}
+
+.bg-indigo-gradient {
+  background: #6610f2 linear-gradient(180deg, #7d34f4, #6610f2) repeat-x;
+  color: #ffffff;
+}
+
+.bg-purple-gradient {
+  background: #6f42c1 linear-gradient(180deg, #855eca, #6f42c1) repeat-x;
+  color: #ffffff;
+}
+
+.bg-pink-gradient {
+  background: #e83e8c linear-gradient(180deg, #eb5b9d, #e83e8c) repeat-x;
+  color: #ffffff;
+}
+
+.bg-red-gradient {
+  background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x;
+  color: #ffffff;
+}
+
+.bg-orange-gradient {
+  background: #fd7e14 linear-gradient(180deg, #fd9137, #fd7e14) repeat-x;
+  color: #1F2D3D;
+}
+
+.bg-yellow-gradient {
+  background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x;
+  color: #1F2D3D;
+}
+
+.bg-green-gradient {
+  background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x;
+  color: #ffffff;
+}
+
+.bg-teal-gradient {
+  background: #20c997 linear-gradient(180deg, #41d1a7, #20c997) repeat-x;
+  color: #ffffff;
+}
+
+.bg-cyan-gradient {
+  background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x;
+  color: #ffffff;
+}
+
+.bg-white-gradient {
+  background: #ffffff linear-gradient(180deg, white, #ffffff) repeat-x;
+  color: #1F2D3D;
+}
+
+.bg-gray-gradient {
+  background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x;
+  color: #ffffff;
+}
+
+.bg-gray-dark-gradient {
+  background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x;
   color: #ffffff;
 }
 
@@ -15738,20 +15874,6 @@ a.text-muted:hover {
   box-shadow: none !important;
 }
 
-.list-unstyled, .chart-legend, .contacts-list, .users-list, .mailbox-attachments {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.list-group-unbordered > .list-group-item {
-  border-left: 0;
-  border-right: 0;
-  border-radius: 0;
-  padding-left: 0;
-  padding-right: 0;
-}
-
 .flat {
   border-radius: 0 !important;
 }
@@ -15766,6 +15888,20 @@ a.text-muted:hover {
   font-size: 16px;
 }
 
+.list-unstyled, .chart-legend, .contacts-list, .users-list, .mailbox-attachments {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.list-group-unbordered > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .list-header {
   font-size: 15px;
   padding: 10px 4px;

dist/js/adminlte.js

@@ -689,11 +689,14 @@
     var Event = {
       EXPANDED: "expanded" + EVENT_KEY,
       COLLAPSED: "collapsed" + EVENT_KEY,
+      MAXIMIZED: "maximized" + EVENT_KEY,
+      MINIMIZED: "minimized" + EVENT_KEY,
       REMOVED: "removed" + EVENT_KEY
     };
     var Selector = {
       DATA_REMOVE: '[data-widget="remove"]',
       DATA_COLLAPSE: '[data-widget="collapse"]',
+      DATA_MAXIMIZE: '[data-widget="maximize"]',
       CARD: '.card',
       CARD_HEADER: '.card-header',
       CARD_BODY: '.card-body',
@@ -704,8 +707,12 @@
     };
     var ClassName = {
       COLLAPSED: 'collapsed-card',
+      WAS_COLLAPSED: 'was-collapsed',
+      MAXIMIZED: 'maximized-card',
       COLLAPSE_ICON: 'fa-minus',
-      EXPAND_ICON: 'fa-plus'
+      EXPAND_ICON: 'fa-plus',
+      MAXIMIZE_ICON: 'fa-expand',
+      MINIMIZE_ICON: 'fa-compress'
     };
     var Default = {
       animationSpeed: 'normal',
@@ -767,6 +774,48 @@
         }
 
         this.collapse();
+      };
+
+      _proto.toggleMaximize = function toggleMaximize() {
+        var button = this._element.find('i');
+
+        if (this._parent.hasClass(ClassName.MAXIMIZED)) {
+          button.addClass(ClassName.MAXIMIZE_ICON).removeClass(ClassName.MINIMIZE_ICON);
+
+          this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' + 'width:' + this._parent[0].style.width + ' !important; transition: all .15s;').delay(100).queue(function () {
+            $(this).removeClass(ClassName.MAXIMIZED);
+            $('html').removeClass(ClassName.MAXIMIZED);
+            $(this).trigger(Event.MINIMIZED);
+            $(this).css({
+              'height': 'inherit',
+              'width': 'inherit'
+            });
+
+            if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
+              $(this).removeClass(ClassName.WAS_COLLAPSED);
+            }
+
+            $(this).dequeue();
+          });
+        } else {
+          button.addClass(ClassName.MINIMIZE_ICON).removeClass(ClassName.MAXIMIZE_ICON);
+
+          this._parent.css({
+            'height': this._parent.height(),
+            'width': this._parent.width(),
+            'transition': 'all .15s'
+          }).delay(150).queue(function () {
+            $(this).addClass(ClassName.MAXIMIZED);
+            $('html').addClass(ClassName.MAXIMIZED);
+            $(this).trigger(Event.MAXIMIZED);
+
+            if ($(this).hasClass(ClassName.COLLAPSED)) {
+              $(this).addClass(ClassName.WAS_COLLAPSED);
+            }
+
+            $(this).dequeue();
+          });
+        }
       } // Private
       ;
 
@@ -822,6 +871,13 @@
 
       Widget._jQueryInterface.call($(this), 'remove');
     });
+    $(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
+      if (event) {
+        event.preventDefault();
+      }
+
+      Widget._jQueryInterface.call($(this), 'toggleMaximize');
+    });
     /**
      * jQuery API
      * ====================================================

pages/widgets.html

@@ -859,9 +859,10 @@
 
         <!-- =========================================================== -->
         <h4 class="mb-2 mt-4">Cards</h4>
+        <h5 class="mb-2">Abilities</h5>
         <div class="row">
           <div class="col-md-3">
-            <div class="card card-default collapsed-card">
+            <div class="card card-primary collapsed-card">
               <div class="card-header">
                 <h3 class="card-title">Expandable</h3>
 
@@ -882,6 +883,26 @@
           <!-- /.col -->
           <div class="col-md-3">
             <div class="card card-success">
+              <div class="card-header">
+                <h3 class="card-title">Collapsable</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+          <div class="col-md-3">
+            <div class="card card-warning">
               <div class="card-header">
                 <h3 class="card-title">Removable</h3>
 
@@ -900,10 +921,122 @@
             <!-- /.card -->
           </div>
           <!-- /.col -->
+          <div class="col-md-3">
+            <div class="card card-danger">
+              <div class="card-header">
+                <h3 class="card-title">Maximizable</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+        </div>
+        <!-- /.row -->
+
+        <div class="row">
+          <div class="col-md-3">
+            <div class="card card-primary">
+              <div class="card-header">
+                <h3 class="card-title">All together</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i>
+                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+          <div class="col-md-3">
+            <div class="card card-success">
+              <div class="card-header">
+                <h3 class="card-title">Loading state</h3>
+              </div>
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+              <!-- Loading (remove the following to stop the loading)-->
+              <div class="overlay">
+                <i class="fas fa-sync-alt"></i>
+              </div>
+              <!-- end loading -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+        </div>
+        <!-- /.row -->
+
+        <!-- =========================================================== -->
+
+        <h5 class="mb-2">Colors Variations</h5>
+
+        <div class="row">
+          <div class="col-md-3">
+            <div class="card card-primary">
+              <div class="card-header">
+                <h3 class="card-title">Primary Outline</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+          <div class="col-md-3">
+            <div class="card card-success">
+              <div class="card-header">
+                <h3 class="card-title">Success Outline</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
           <div class="col-md-3">
             <div class="card card-warning">
               <div class="card-header">
-                <h3 class="card-title">Collapsable</h3>
+                <h3 class="card-title">Warning Outline</h3>
 
                 <div class="card-tools">
                   <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
@@ -923,17 +1056,12 @@
           <div class="col-md-3">
             <div class="card card-danger">
               <div class="card-header">
-                <h3 class="card-title">Loading state</h3>
+                <h3 class="card-title">Danger Outline</h3>
               </div>
               <div class="card-body">
                 The body of the card
               </div>
               <!-- /.card-body -->
-              <!-- Loading (remove the following to stop the loading)-->
-              <div class="overlay">
-                <i class="fas fa-sync-alt fa-spin"></i>
-              </div>
-              <!-- end loading -->
             </div>
             <!-- /.card -->
           </div>
@@ -941,16 +1069,14 @@
         </div>
         <!-- /.row -->
 
-        <!-- =========================================================== -->
-
         <div class="row">
           <div class="col-md-3">
-            <div class="card card-info collapsed-card cardutline">
+            <div class="card card-outline card-primary">
               <div class="card-header">
-                <h3 class="card-title">Expandable</h3>
+                <h3 class="card-title">Primary Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-plus"></i>
+                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -965,13 +1091,12 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3">
-            <div class="card card-sucress cardutline">
+            <div class="card card-outline card-success">
               <div class="card-header">
-                <h3 class="card-title">Removable</h3>
+                <h3 class="card-title">Success Outline</h3>
 
                 <div class="card-tools">
-                  <button type="button" class="btn btn-tool" data-widget="remove">
+                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
-                    <i class="fas fa-times"></i>
                   </button>
                 </div>
                 <!-- /.card-tools -->
@@ -986,7 +1111,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3">
-            <div class="card card-warring cardutline">
+            <div class="card card-outline card-warning">
               <div class="card-header">
                 <h3 class="card-title">Warning Outline</h3>
 
@@ -1006,7 +1131,7 @@
           </div>
           <!-- /.col -->
           <div class="col-md-3">
-            <div class="card card-darger cardutline">
+            <div class="card card-outline card-danger">
               <div class="card-header">
                 <h3 class="card-title">Danger Outline</h3>
               </div>
@@ -1021,7 +1146,82 @@
         </div>
         <!-- /.row -->
 
-        <!-- =========================================================== -->
+        <div class="row">
+          <div class="col-md-3">
+            <div class="card bg-primary">
+              <div class="card-header">
+                <h3 class="card-title">Primary</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+          <div class="col-md-3">
+            <div class="card bg-success">
+              <div class="card-header">
+                <h3 class="card-title">Success</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+          <div class="col-md-3">
+            <div class="card bg-warning">
+              <div class="card-header">
+                <h3 class="card-title">Warning</h3>
+
+                <div class="card-tools">
+                  <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
+                  </button>
+                </div>
+                <!-- /.card-tools -->
+              </div>
+              <!-- /.card-header -->
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+          <div class="col-md-3">
+            <div class="card bg-danger">
+              <div class="card-header">
+                <h3 class="card-title">Danger</h3>
+              </div>
+              <div class="card-body">
+                The body of the card
+              </div>
+              <!-- /.card-body -->
+            </div>
+            <!-- /.card -->
+          </div>
+          <!-- /.col -->
+        </div>
+        <!-- /.row -->
 
         <div class="row">
           <div class="col-md-3">