Fix #241: Enhancements to Select2 Krajee theme styles

kartik-v · Nov 25, 2017 · baaa8f8 · baaa8f8
1 parent 1699572
commit baaa8f8
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 57 deletions.
diff --git a/CHANGE.md b/CHANGE.md
@@ -3,8 +3,9 @@ Change Log: `yii2-widget-select2`
 
 ## Version 2.1.1
 
-**Date:** 24-Nov-2017
+**Date:** 25-Nov-2017
 
+- (enh #241): Enhancements to Select2 Krajee theme styles.
 - Updated code of conduct.
 - (enh #240, #233, #212): Update to latest release v4.0.5 of the plugin.
 - (enh #236): Enable Select All with Ajax Loading .

diff --git a/assets/css/select2-krajee.css b/assets/css/select2-krajee.css
@@ -12,6 +12,11 @@
     display: block;
 }
 
+.select2-container--krajee .select2-selection--single,
+.select2-container--krajee .select2-selection--multiple {
+    cursor: default;
+}
+
 .select2-container--krajee .select2-selection {
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
@@ -549,75 +554,59 @@
 /**
  * Selection Clear 
  */
+
 .select2-container--krajee .select2-selection__clear {
-    float: right;
     color: #000;
-    cursor: pointer;
-    font-size: 18px;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    top: 0.4rem;
     font-weight: 700;
-    line-height: 1.3;
+    font-size: 20px;
     opacity: 0.4;
     filter: alpha(opacity=40);
     position: absolute;
-    right: 0;
-    margin-right: 5px;
+}
+
+.select2-container--krajee .select2-selection--single .select2-selection__clear {
+    position: absolute;
 }
 
 .select2-container--krajee .select2-selection__clear:hover {
     opacity: 0.6;
     filter: alpha(opacity=60);
 }
 
-.select2-container--krajee .select2-selection--multiple .select2-selection__clear {
-    margin: 5px 10px 0 10px;
-}
-
-.input-sm.select2-container--krajee .select2-selection__clear,
-.input-group-sm .select2-container--krajee .select2-selection__clear {
-    font-size: 16px;
-    line-height: 1.2;
+.select2-container--krajee .select2-selection--single .select2-selection__clear {
+    right: 3rem;
 }
 
-.input-lg.select2-container--krajee .select2-selection__clear,
-.input-group-lg .select2-container--krajee .select2-selection__clear {
-    margin-right: 20px;
-    font-size: 20px;
-}
-
-.input-sm.select2-container--krajee .select2-selection--multiple .select2-selection__clear,
-.input-group-sm .select2-container--krajee .select2-selection--multiple .select2-selection__clear {
-    margin-right: 10px;
+.select2-container--krajee[dir="rtl"] .select2-selection--single .select2-selection__clear {
+    left: 3rem;
+    right: auto;
 }
 
-.input-lg.select2-container--krajee .select2-selection--multiple .select2-selection__clear,
-.input-group-lg .select2-container--krajee .select2-selection--multiple .select2-selection__clear {
-    font-size: 20px;
-    margin: 8px 12px 0 0;
-
+.select2-container--krajee .select2-selection--multiple .select2-selection__clear {
+    right: 1rem;
 }
 
-.select2-container--krajee[dir="rtl"] .select2-selection__clear {
-    float: left;
-    left: 0;
+.select2-container--krajee[dir="rtl"] .select2-selection--multiple .select2-selection__clear {
+    left: 1rem;
     right: auto;
-    margin-left: 3px;
 }
 
-.input-sm.select2-container--krajee[dir="rtl"] .select2-selection__clear,
-.input-group-sm .select2-container--krajee[dir="rtl"] .select2-selection__clear {
-    margin-left: 15px;
+.input-sm.select2-container--krajee .select2-selection__clear,
+.input-group-sm .select2-container--krajee .select2-selection__clear {
+    top: 0.5rem;
+    font-size: 16px;
 }
 
-.input-lg.select2-container--krajee[dir="rtl"] .select2-selection__clear,
-.input-group-lg .select2-container--krajee[dir="rtl"] .select2-selection__clear {
-    margin-left: 20px;
+.input-lg.select2-container--krajee .select2-selection__clear,
+.input-group-lg .select2-container--krajee .select2-selection__clear {
+    top: 0.8rem;
 }
 
-.select2-container--krajee[dir="rtl"] .select2-selection--multiple .select2-selection__clear {
-    float: left;
-    left: 0;
-    right: auto;
-    margin-left: 8px;
+.input-lg.select2-container--krajee .select2-selection__clear,
+.input-group-lg .select2-container--krajee .select2-selection__clear {
+    font-size: 24px;
 }
 
 /**
@@ -626,15 +615,15 @@
 .select2-container--krajee .select2-selection--multiple .select2-selection__choice__remove {
     float: right;
     color: #000;
-    cursor: pointer;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    opacity: 0.4;
+    filter: alpha(opacity=40);
     display: inline-block;
     text-shadow: 0 1px 0 #fff;
-    font-size: 15px;
+    font-size: 18px;
     font-weight: 700;
     line-height: 1;
     margin: 2px 0 0 3px;
-    opacity: 0.4;
-    filter: alpha(opacity=40);
 }
 
 .select2-container--krajee .select2-selection--multiple .select2-selection__choice__remove:hover {
@@ -644,19 +633,21 @@
 
 .input-sm.select2-container--krajee .select2-selection--multiple .select2-selection__choice__remove,
 .input-group-sm .select2-container--krajee .select2-selection--multiple .select2-selection__choice__remove {
-    margin-top: 3px;
-    font-size: 12px;
-    line-height: 1;
+    font-size: 15px;
 }
 
 .input-lg.select2-container--krajee .select2-selection--multiple .select2-selection__choice__remove,
 .input-group-lg .select2-container--krajee .select2-selection--multiple .select2-selection__choice__remove {
-    margin-top: 3px;
-    font-size: 16px;
-    line-height: 1.2;
+    font-size: 21px;
+    margin-left: 5px;
 }
 
 .select2-container--krajee[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
     float: left;
-    margin: 3px 3px 0 0;
-}
+    margin: 2px 3px 0 0;
+}
+
+.input-lg.select2-container--krajee[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove,
+.input-group-lg .select2-container--krajee[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
+    margin: 2px 5px 0 0;
+}