enhanced default select2 theme (built in)

- created build/scss/plugins/_mixins.scss
- updated build/scss/plugins/_select2.scss
- added color variation for select2
- updated build/scss/AdminLTE(-raw).scss
- updated pages/forms/advanced.html with color variations and both themes

build/scss/AdminLTE-raw.scss

@@ -63,6 +63,7 @@
 
 // Plugins
 // ---------------------------------------------------
+@import 'plugins/mixins';
 @import 'plugins/fullcalendar';
 @import 'plugins/select2';
 @import 'plugins/bootstrap-slider';

build/scss/AdminLTE.scss

@@ -59,6 +59,7 @@
 
 // Plugins
 // ---------------------------------------------------
+@import 'plugins/mixins';
 @import 'plugins/fullcalendar';
 @import 'plugins/select2';
 @import 'plugins/bootstrap-slider';

build/scss/plugins/_mixins.scss

@@ -0,0 +1,64 @@
+//
+// General: Mixins
+//
+
+// Select2 Variant
+@mixin select2-variant($name, $color) {
+  .select2-#{$name} {
+
+    .select2-container--default &,
+    .select2-container--default {
+      &.select2-dropdown,
+      .select2-dropdown,
+      .select2-search--inline {
+        .select2-search__field {
+          &:focus {
+            border: $input-border-width solid lighten($color, 25%);
+          }
+        }
+      }
+
+      .select2-results__option--highlighted {
+        background-color: $color;
+        color: color-yiq($color);
+
+        &[aria-selected] {
+          &,
+          &:hover {
+            background-color: darken($color, 3%);
+            color: color-yiq(darken($color, 3%));
+          }
+        }
+      }
+
+      //Multiple select
+      & {
+        .select2-selection--multiple {
+          &:focus {
+            border-color: lighten($color, 25%);
+          }
+        }
+
+        &.select2-container--focus .select2-selection--multiple {
+          border-color: lighten($color, 25%);
+        }
+      }
+
+      .select2-selection--multiple {
+        .select2-selection__choice {
+          background-color: $color;
+          border-color: darken($color, 5%);
+          color: color-yiq($color);
+        }
+
+        .select2-selection__choice__remove {
+          color: rgba(color-yiq($color), 0.7);
+
+          &:hover {
+            color: color-yiq($color);
+          }
+        }
+      }
+    }
+  }
+}

build/scss/plugins/_select2.scss

@@ -3,36 +3,32 @@
 //
 
 //Signle select
-.select2-container--default,
+// .select2-container--default,
-.select2-selection {
+// .select2-selection {
-  &.select2-container--focus,
+//   &.select2-container--focus,
-  &:focus,
+//   &:focus,
-  &:active {
+//   &:active {
-    outline: none;
+//     outline: none;
-  }
+//   }
+// }
+
+.select2-container--default {
   .select2-selection--single {
-    border: 1px solid $gray-x-light;
+    border: $input-border-width solid $input-border-color;
     //border-radius: $input-radius;
     padding: 6px 12px;
     height: $input-height;
   }
-}
 
-.select2-container--default {
   &.select2-container--open {
-    border-color: theme-color("primary");
+    border-color: $primary;
   }
 
   & .select2-dropdown {
-    border: 1px solid $gray-x-light;
+    border: $input-border-width solid $input-border-color;
     //border-radius: $input-radius;
   }
 
-  & .select2-results__option--highlighted[aria-selected] {
-    background-color: theme-color("primary");
-    color: white;
-  }
-
   & .select2-results__option {
     padding: 6px 12px;
     user-select: none;
@@ -63,66 +59,130 @@
   .select2-dropdown,
   .select2-search--inline {
     .select2-search__field {
-      border: 1px solid $gray-x-light;
+      border: $input-border-width solid $input-border-color;
+
       &:focus {
         outline: none;
-        border: 1px solid theme-color("primary");
+        border: $input-border-width solid $input-focus-border-color;
       }
     }
   }
 
-  & .select2-results__option[aria-disabled=true] {
+  .select2-dropdown {
-    color: #999;
+    &.select2-dropdown--below {
+      border-top: 0;
+    }
+
+    &.select2-dropdown--above {
+      border-bottom: 0;
+    }
   }
 
-  & .select2-results__option[aria-selected=true] {
+  .select2-results__option {
-    background-color: #ddd;
+    &[aria-disabled='true'] {
-    &,
+      color: $gray-600;
-    &:hover {
+    }
-      color: #444;
+
+    &[aria-selected='true'] {
+      $color: $gray-300;
+
+      background-color: $color;
+
+      &,
+      &:hover {
+        color: color-yiq($color);
+      }
+    }
+  }
+
+  .select2-results__option--highlighted {
+    $color: $primary;
+    background-color: $color;
+    color: color-yiq($color);
+
+    &[aria-selected] {
+      $color: darken($color, 3%);
+
+      &,
+      &:hover {
+        background-color: $color;
+        color: color-yiq($color);
+      }
     }
   }
 
   //Multiple select
   & {
     .select2-selection--multiple {
-      min-height: $input-height;
+      border: $input-border-width solid $input-border-color;
-      border: 1px solid $gray-x-light;
+      height: $input-height;
-      //border-radius: $input-radius;
+
       &:focus {
-        border-color: theme-color("primary");
+        border-color: $input-focus-border-color;
       }
 
-      .select2-selection__rendered li:first-child.select2-search.select2-search--inline {
+      .select2-selection__rendered {
-        width: 100%;
+        padding: 0 $input-padding-y;
 
-        .select2-search__field {
+        li:first-child.select2-search.select2-search--inline {
-          width: 100% !important;
+          width: 100%;
+
+          .select2-search__field {
+            width: 100% !important;
+          }
+        }
+
+
+        .select2-search.select2-search--inline {
+          .select2-search__field {
+            border: 0;
+            margin-top: 6px;
+          }
         }
       }
     }
+
     &.select2-container--focus .select2-selection--multiple {
-      border-color: $gray-x-light;
+      border-color: $input-focus-border-color;
+
+      .select2-search__field {
+        border: 0;
+      }
     }
   }
 
-  & .select2-selection--multiple .select2-selection__choice {
+  .select2-selection--multiple {
-    background-color: theme-color("primary");
+    .select2-selection__choice {
-    border-color: darken(theme-color("primary"), 5%);
+      background-color: $primary;
-    padding: 0 10px;
+      border-color: darken($primary, 5%);
-    color: $white;
+      color: color-yiq($primary);
-  }
+      padding: 0 10px;
+    }
 
-  & .select2-selection--multiple .select2-selection__choice__remove {
+    .select2-selection__choice__remove {
-    margin-right: 5px;
+      color: rgba(255, 255, 255, 0.7);
-    color: rgba(255, 255, 255, 0.7);
+      float: right;
-    &:hover {
+      margin-left: 5px;
-      color: $white;
+      margin-right: -2px;
+
+      &:hover {
+        color: $white;
+      }
     }
   }
 
   & .select2-selection--single .select2-selection__rendered li {
     padding-right: 10px;
   }
-
+}
+
+
+// Background colors (theme colors)
+@each $name, $color in $theme-colors {
+  @include select2-variant($name, $color);
+}
+
+// Background colors (colors)
+@each $name, $color in $colors {
+  @include select2-variant($name, $color);
 }

pages/forms/advanced.html

@@ -714,7 +714,7 @@
         <!-- SELECT2 EXAMPLE -->
         <div class="card card-default">
           <div class="card-header">
-            <h3 class="card-title">Select2</h3>
+            <h3 class="card-title">Select2 (Default Theme)</h3>
 
             <div class="card-tools">
               <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
@@ -756,8 +756,7 @@
               <div class="col-md-6">
                 <div class="form-group">
                   <label>Multiple</label>
-                  <select class="select2" multiple="multiple" data-placeholder="Select a State"
+                  <select class="select2" multiple="multiple" data-placeholder="Select a State" style="width: 100%;">
-                          style="width: 100%;">
                     <option>Alabama</option>
                     <option>Alaska</option>
                     <option>California</option>
@@ -785,6 +784,128 @@
               <!-- /.col -->
             </div>
             <!-- /.row -->
+
+            <h5>Custom Color Variants</h5>
+            <div class="row">
+              <div class="col-12 col-sm-6">
+                <div class="form-group">
+                  <label>Minimal (.select2-danger)</label>
+                  <select class="form-control select2 select2-danger" data-dropdown-css-class="select2-danger" style="width: 100%;">
+                    <option selected="selected">Alabama</option>
+                    <option>Alaska</option>
+                    <option>California</option>
+                    <option>Delaware</option>
+                    <option>Tennessee</option>
+                    <option>Texas</option>
+                    <option>Washington</option>
+                  </select>
+                </div>
+                <!-- /.form-group -->
+              </div>
+              <!-- /.col -->
+              <div class="col-12 col-sm-6">
+                <div class="form-group">
+                  <label>Multiple (.select2-purple)</label>
+                  <div class="select2-purple">
+                    <select class="select2" multiple="multiple" data-placeholder="Select a State" data-dropdown-css-class="select2-purple" style="width: 100%;">
+                      <option>Alabama</option>
+                      <option>Alaska</option>
+                      <option>California</option>
+                      <option>Delaware</option>
+                      <option>Tennessee</option>
+                      <option>Texas</option>
+                      <option>Washington</option>
+                    </select>
+                  </div>
+                </div>
+                <!-- /.form-group -->
+              </div>
+              <!-- /.col -->
+            </div>
+            <!-- /.row -->
+          </div>
+          <!-- /.card-body -->
+          <div class="card-footer">
+            Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
+            the plugin.
+          </div>
+        </div>
+        <!-- /.card -->
+
+        <!-- SELECT2 EXAMPLE -->
+        <div class="card card-default">
+          <div class="card-header">
+            <h3 class="card-title">Select2 (Bootstrap4 Theme)</h3>
+
+            <div class="card-tools">
+              <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
+              <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
+            </div>
+          </div>
+          <!-- /.card-header -->
+          <div class="card-body">
+            <div class="row">
+              <div class="col-md-6">
+                <div class="form-group">
+                  <label>Minimal</label>
+                  <select class="form-control select2bs4" style="width: 100%;">
+                    <option selected="selected">Alabama</option>
+                    <option>Alaska</option>
+                    <option>California</option>
+                    <option>Delaware</option>
+                    <option>Tennessee</option>
+                    <option>Texas</option>
+                    <option>Washington</option>
+                  </select>
+                </div>
+                <!-- /.form-group -->
+                <div class="form-group">
+                  <label>Disabled</label>
+                  <select class="form-control select2bs4" disabled="disabled" style="width: 100%;">
+                    <option selected="selected">Alabama</option>
+                    <option>Alaska</option>
+                    <option>California</option>
+                    <option>Delaware</option>
+                    <option>Tennessee</option>
+                    <option>Texas</option>
+                    <option>Washington</option>
+                  </select>
+                </div>
+                <!-- /.form-group -->
+              </div>
+              <!-- /.col -->
+              <div class="col-md-6">
+                <div class="form-group">
+                  <label>Multiple</label>
+                  <select class="select2bs4" multiple="multiple" data-placeholder="Select a State"
+                          style="width: 100%;">
+                    <option>Alabama</option>
+                    <option>Alaska</option>
+                    <option>California</option>
+                    <option>Delaware</option>
+                    <option>Tennessee</option>
+                    <option>Texas</option>
+                    <option>Washington</option>
+                  </select>
+                </div>
+                <!-- /.form-group -->
+                <div class="form-group">
+                  <label>Disabled Result</label>
+                  <select class="form-control select2bs4" style="width: 100%;">
+                    <option selected="selected">Alabama</option>
+                    <option>Alaska</option>
+                    <option disabled="disabled">California (disabled)</option>
+                    <option>Delaware</option>
+                    <option>Tennessee</option>
+                    <option>Texas</option>
+                    <option>Washington</option>
+                  </select>
+                </div>
+                <!-- /.form-group -->
+              </div>
+              <!-- /.col -->
+            </div>
+            <!-- /.row -->
           </div>
           <!-- /.card-body -->
           <div class="card-footer">
@@ -1230,10 +1351,13 @@
 <script>
   $(function () {
     //Initialize Select2 Elements
-    $('.select2').select2({
+    $('.select2bs4').select2({
       theme: 'bootstrap4'
     })
 
+    //Initialize Select2 Elements
+    $('.select2').select2()
+
     //Datemask dd/mm/yyyy
     $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
     //Datemask2 mm/dd/yyyy