Merge pull request #1 from slavapcom/events-dropdown-rework

Events dropdown rework

Author: slavapcom

isteven-multi-select.css

@@ -4,7 +4,7 @@
 
 /* ! vertical layout */
 .multiSelect .vertical {
-    float: none;        
+    float: none;
 }
 
 /* ! horizontal layout */
@@ -15,14 +15,14 @@
 /* ! create a "row" */
 .multiSelect .line {
     padding:  2px 0px 4px 0px;
-    max-height: 30px;   
+    max-height: 30px;
     overflow: hidden;
     box-sizing: content-box;
 }
 
 /* ! create a "column" */
 .multiSelect .acol {
-    display: inline-block;    
+    display: inline-block;
     min-width: 12px;
 }
 
@@ -35,33 +35,33 @@
 .multiSelect > button {
     display: inline-block;
     position: relative;
-    text-align: center;    
+    text-align: center;
     cursor: pointer;
-    border: 1px solid #c6c6c6;    
-    padding: 1px 8px 1px 8px;    
+    border: 1px solid #c6c6c6;
+    padding: 1px 8px 1px 8px;
     font-size: 14px;
     min-height : 38px !important;
     border-radius: 4px;
-    color: #555;   
+    color: #555;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none; 
+    user-select: none;
     white-space:normal;
     background-color: #fff;
-    background-image: linear-gradient(#fff, #f7f7f7);      
+    background-image: linear-gradient(#fff, #f7f7f7);
 }
 
 /* button: hover */
-.multiSelect > button:hover {    
-    background-image: linear-gradient(#fff, #e9e9e9);    
+.multiSelect > button:hover {
+    background-image: linear-gradient(#fff, #e9e9e9);
 }
 
 /* button: disabled */
 .multiSelect > button:disabled {
-    background-image: linear-gradient(#fff, #fff);      
-    border: 1px solid #ddd;    
+    background-image: linear-gradient(#fff, #fff);
+    border: 1px solid #ddd;
     color: #999;
 }
 
@@ -73,20 +73,20 @@
 /* labels on the button */
 .multiSelect .buttonLabel {
     display: inline-block;
-    padding: 5px 0px 5px 0px; 
+    padding: 5px 0px 5px 0px;
 }
 
 /* downward pointing arrow */
 .multiSelect .caret {
     display: inline-block;
     width: 0;
     height: 0;
-    margin: 0px 0px 1px 12px  !important;    
+    margin: 0px 0px 1px 12px  !important;
     vertical-align: middle;
     border-top: 4px solid #333;
     border-right: 4px solid transparent;
     border-left: 4px solid transparent;
-    border-bottom: 0 dotted; 
+    border-bottom: 0 dotted;
 }
 
 /* the main checkboxes and helper layer */
@@ -97,15 +97,15 @@
     border: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 4px;
     -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);    
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
     min-width:278px;
-    display: none !important;    
+    display: none !important;
 }
 
 /* container of helper elements */
 .multiSelect .helperContainer {
     border-bottom: 1px solid #ddd;
-    padding: 8px 8px 0px 8px;    
+    padding: 8px 8px 0px 8px;
 }
 
 /* helper buttons (select all, none, reset); */
@@ -117,7 +117,7 @@
     height: 26px;
     font-size: 13px;
     border-radius: 2px;
-    color: #666;    
+    color: #666;
     background-color: #f1f1f1;
     line-height: 1.6;
     margin: 0px 0px 8px 0px;
@@ -128,7 +128,7 @@
 }
 
 .multiSelect .helperButton:not( .reset ) {
-    margin-right: 4px;    
+    margin-right: 4px;
 }
 
 /* clear button */
@@ -142,7 +142,7 @@
     width: 22px;
     font-size: 13px;
     border-radius: 2px;
-    color: #666;    
+    color: #666;
     background-color: #f1f1f1;
     line-height: 1.4;
     right : 2px;
@@ -151,30 +151,30 @@
 
 /* filter */
 .multiSelect .inputFilter {
-    border-radius: 2px; 
+    border-radius: 2px;
     border: 1px solid #ccc;
     height: 26px;
     font-size: 14px;
-    width:100%;    
+    width:100%;
     padding-left:7px;
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
     -moz-box-sizing: border-box;    /* Firefox, other Gecko */
-    box-sizing: border-box;         /* Opera/IE 8+ */    
+    box-sizing: border-box;         /* Opera/IE 8+ */
     color: #888;
     margin: 0px 0px 8px 0px;
     -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 }
 
 /* helper elements on hover & focus */
 .multiSelect .clearButton:hover,
 .multiSelect .helperButton:hover {
     border: 1px solid #ccc;
-    color: #999;    
-    background-color: #f4f4f4;    
+    color: #999;
+    background-color: #f4f4f4;
 }
 .multiSelect .helperButton:disabled {
-    color: #ccc;    
+    color: #ccc;
     border: 1px solid #ddd;
 }
 
@@ -184,13 +184,13 @@
     border: 1px solid #66AFE9 !important;
     outline: 0;
     -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
-            box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
+    box-shadow: inset 0 0 1px rgba(0,0,0,.065), 0 0 5px rgba(102, 175, 233, .6) !important;
 }
 
 /* container of multi select items */
 .multiSelect .checkBoxContainer {
     display: block;
-    padding: 8px;   
+    padding: 8px;
     overflow: hidden;
 }
 
@@ -203,87 +203,87 @@
 .multiSelect .multiSelectItem {
     display: block;
     padding: 3px;
-    color: #444;       
+    color: #444;
     white-space: nowrap;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
-    user-select: none;      
+    user-select: none;
     border: 1px solid transparent;
     position: relative;
-    min-width:278px;    
-    min-height: 32px;    
+    min-width:278px;
+    min-height: 32px;
 }
 
 /* Styling on selected items */
 .multiSelect .multiSelectItem:not(.multiSelectGroup).selected
 {
-    background-image: linear-gradient( #e9e9e9, #f1f1f1 );    
-    color: #555;        
-    cursor: pointer;        
+    background-image: linear-gradient( #e9e9e9, #f1f1f1 );
+    color: #555;
+    cursor: pointer;
     border-top: 1px solid #e4e4e4;
-    border-left: 1px solid #e4e4e4;    
-    border-right: 1px solid #d9d9d9;            
+    border-left: 1px solid #e4e4e4;
+    border-right: 1px solid #d9d9d9;
 }
 
 .multiSelect .multiSelectItem .acol label {
     display: inline-block;
-    padding-right: 30px;    
+    padding-right: 30px;
     margin: 0px;
-    font-weight: normal;    
+    font-weight: normal;
     line-height: normal;
 }
 
 /* item labels focus on mouse hover */
-.multiSelect .multiSelectItem:hover, 
+.multiSelect .multiSelectItem:hover,
 .multiSelect .multiSelectGroup:hover {
-    background-image: linear-gradient( #c1c1c1, #999 ) !important;    
-    color: #fff !important;    
-    cursor: pointer;        
+    background-image: linear-gradient( #c1c1c1, #999 ) !important;
+    color: #fff !important;
+    cursor: pointer;
     border: 1px solid #ccc !important;
 }
 
 /* item labels focus using keyboard */
-.multiSelect .multiSelectFocus { 
-    background-image: linear-gradient( #c1c1c1, #999 ) !important;    
-    color: #fff !important;    
-    cursor: pointer;        
+.multiSelect .multiSelectFocus {
+    background-image: linear-gradient( #c1c1c1, #999 ) !important;
+    color: #fff !important;
+    cursor: pointer;
     border: 1px solid #ccc !important;
 }
 
 /* change mouse pointer into the pointing finger */
-.multiSelect .multiSelectItem span:hover, 
+.multiSelect .multiSelectItem span:hover,
 .multiSelect .multiSelectGroup span:hover
-{    
-    cursor: pointer;  
+{
+    cursor: pointer;
 }
 
 /* ! group labels */
-.multiSelect .multiSelectGroup {    
+.multiSelect .multiSelectGroup {
     display: block;
     clear: both;
 }
 
 /* right-align the tick mark (✔) */
 .multiSelect .tickMark {
-    display:inline-block; 
-    position: absolute; 
-    right: 10px; 
+    display:inline-block;
+    position: absolute;
+    right: 10px;
     top: 7px;
-    font-size: 10px;          
+    font-size: 10px;
 }
 
 /* hide the original HTML checkbox away */
-.multiSelect .checkbox {    
-    color: #ddd !important;    
+.multiSelect .checkbox {
+    color: #ddd !important;
     position: absolute;
     left: -9999px;
-    cursor: pointer;    
+    cursor: pointer;
 }
 
 /* checkboxes currently disabled */
-.multiSelect .disabled, 
+.multiSelect .disabled,
 .multiSelect .disabled:hover,
 .multiSelect .disabled label input:hover ~ span {
     color: #c4c4c4 !important;
@@ -297,3 +297,11 @@
     max-height: 22px;
     max-width:22px;
 }
+
+.multiSelect .load-more-events {
+    overflow: hidden;
+    height: 0px;
+}
+.multiSelect .load-more-events.in-progress {
+    height: auto;
+}