Merge pull request #2123 from REJack/v3-dev

custom-switch, modal overlay, plugin updates & one bug fixed

Author: REJack

build/js/PushMenu.js

@@ -81,7 +81,6 @@ const PushMenu = (($) => {
       } else {
         return $(Selector.BODY).hasClass(ClassName.OPEN)
       }
-
     }
 
     toggle() {
@@ -140,7 +139,7 @@ const PushMenu = (($) => {
           $(this).data(DATA_KEY, data)
         }
 
-        if (operation === 'init') {
+        if (operation === 'toggle') {
           data[operation]()
         }
       })

build/npm/Plugins.js

@@ -11,8 +11,8 @@ const Plugins = [
   },
   // Bootstrap
   {
-    from: 'node_modules/bootstrap/dist',
-    to  : 'plugins/bootstrap'
+    from: 'node_modules/bootstrap/dist/js',
+    to  : 'plugins/bootstrap/js'
   },
   // Font Awesome
   {
@@ -23,16 +23,67 @@ const Plugins = [
     from: 'node_modules/@fortawesome/fontawesome-free/webfonts',
     to  : 'plugins/fontawesome-free/webfonts'
   },
-  // Chart.js 2
+  // overlayScrollbars
+  {
+    from: 'node_modules/overlayscrollbars/js',
+    to  : 'plugins/overlayScrollbars/js'
+  },
+  {
+    from: 'node_modules/overlayscrollbars/css',
+    to  : 'plugins/overlayScrollbars/css'
+  },
+  // Chart.js
   {
     from: 'node_modules/chart.js/dist/',
     to  : 'plugins/chart.js'
   },
-  // CKEditor
+  // Summernote
+  {
+    from: 'node_modules/summernote/dist/',
+    to  : 'plugins/summernote'
+  },
+  // Bootstrap Slider
+  {
+    from: 'node_modules/bootstrap-slider/dist/',
+    to  : 'plugins/bootstrap-slider'
+  },
+  {
+    from: 'node_modules/bootstrap-slider/dist/css',
+    to  : 'plugins/bootstrap-slider/css'
+  },
+  // Bootstrap Colorpicker
+  {
+    from: 'node_modules/bootstrap-colorpicker/dist/js',
+    to  : 'plugins/bootstrap-colorpicker/js'
+  },
+  {
+    from: 'node_modules/bootstrap-colorpicker/dist/css',
+    to  : 'plugins/bootstrap-colorpicker/css'
+  },
+  // Tempusdominus Bootstrap 4
   {
-    from: 'node_modules/@ckeditor/ckeditor5-build-classic/build/',
-    to  : 'plugins/ckeditor'
+    from: 'node_modules/tempusdominus-bootstrap-4/build/js',
+    to  : 'plugins/tempusdominus-bootstrap-4/js'
   },
+  {
+    from: 'node_modules/tempusdominus-bootstrap-4/build/css',
+    to  : 'plugins/tempusdominus-bootstrap-4/css'
+  },
+  // Moment
+  {
+    from: 'node_modules/moment/min',
+    to  : 'plugins/moment'
+  },
+  {
+    from: 'node_modules/moment/locale',
+    to  : 'plugins/moment/locale'
+  },
+  // FastClick
+  {
+    from: 'node_modules/fastclick/lib',
+    to  : 'plugins/fastclick'
+  },
+
   // DataTables
   {
     from: 'node_modules/datatables.net/js',
@@ -46,15 +97,6 @@ const Plugins = [
     from: 'node_modules/datatables.net-bs4/css',
     to: 'plugins/datatables'
   },
-  // overlayScrollbars
-  {
-    from: 'node_modules/overlayscrollbars/js',
-    to  : 'plugins/overlayScrollbars/js'
-  },
-  {
-    from: 'node_modules/overlayscrollbars/css',
-    to  : 'plugins/overlayScrollbars/css'
-  },
 
   // // Doc Assets
   // // AdminLTE Dist

build/scss/_cards.scss

@@ -343,4 +343,30 @@
       }
     }
   }
+
+  .card.bg-#{$name},
+  .card.bg-#{$name}-gradient {
+    .bootstrap-datetimepicker-widget {
+      .table td,
+      .table th {
+        border: none;
+      }
+      
+      table thead tr:first-child th:hover,
+      table td.day:hover,
+      table td.hour:hover,
+      table td.minute:hover,
+      table td.second:hover {
+        background: darken($color, 8%);
+        color: color-yiq($color);
+      }
+
+
+      table td.active,
+      table td.active:hover {
+        background: lighten($color, 10%);
+        color: color-yiq($color);
+      }
+    }
+  }
 }

build/scss/_forms.scss

@@ -230,3 +230,50 @@ textarea.form-control {
     }
   }
 }
+
+.custom-switch {
+  @each $name, $color in $theme-colors {
+    &.custom-switch-off-#{$name} { 
+      & .custom-control-input ~ .custom-control-label::before {
+        background-color: #{$color};
+        border-color: darken($color, 20%);
+      }
+      & .custom-control-input ~ .custom-control-label::after {
+        background-color: darken($color, 25%);
+      }
+    }
+    &.custom-switch-on-#{$name} { 
+      & .custom-control-input:checked ~ .custom-control-label::before {
+        background-color: #{$color};
+        border-color: darken($color, 20%);
+      }
+      & .custom-control-input:checked ~ .custom-control-label::after {
+        background-color: lighten($color, 30%);
+      }
+    }
+  }
+
+  // Background colors (colors)
+  @each $name, $color in $colors {
+    &.custom-switch-off-#{$name} { 
+      & .custom-control-input ~ .custom-control-label::before {
+        background-color: #{$color};
+        border-color: darken($color, 20%);
+      }
+      & .custom-control-input ~ .custom-control-label::after {
+        background-color: darken($color, 25%);
+      }
+    }
+    &.custom-switch-on-#{$name} { 
+      & .custom-control-input:checked ~ .custom-control-label::before {
+        background-color: #{$color};
+        border-color: darken($color, 20%);
+      }
+      & .custom-control-input:checked ~ .custom-control-label::after {
+        background-color: lighten($color, 30%);
+      }
+    }
+  }  
+}
+
+

build/scss/_miscellaneous.scss

@@ -70,6 +70,14 @@ a.text-muted:hover {
   color: color-yiq($white) !important;
 }
 
+// Gradient Background colors
+@each $name, $color in $theme-colors {
+  .bg-#{$name}-gradient {
+    @include gradient($color, $color, lighten($color, 10%));
+    color: color-yiq($color);
+  }
+}
+
 // Disabled!
 [class^="bg-"].disabled {
   opacity: .65;
@@ -135,14 +143,6 @@ a.text-muted:hover {
   height: auto !important;
 }
 
-// Gradient Background colors
-@each $name, $color in $theme-colors {
-  .bg-#{$name}-gradient {
-    @include gradient($color, $color, lighten($color, 10%));
-    color: color-yiq($color);
-  }
-}
-
 // Description Block Extension
 .description-block {
   .description-icon {
@@ -363,6 +363,19 @@ a.text-muted:hover {
 }
 
 // Modals
+.modal-dialog {
+  .overlay {
+      display: block;
+      position: absolute;
+      z-index: ($zindex-modal + 2);
+      background: rgba(255, 255, 255, 0.7);
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+  }
+}
+
 .modal-content {
   &.bg-warning {
     .modal-header,
@@ -381,4 +394,13 @@ a.text-muted:hover {
       color: $white;
     }
   }
-}
+}
+
+// Background colors (colors)
+@each $name, $color in $colors {
+  ##{$name}.slider {
+    .slider-selection {
+      background: $color;
+    }
+  }
+}