roojs-ui.js
[roojs1] / less / roojs-bootstrap / select2.less
index f65f54d..d85414b 100644 (file)
@@ -32,7 +32,7 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     overflow: hidden;
     position: relative;
 
-    border: 1px solid @gray-lighter-75; //#aaa;
+    border: 1px solid @gray-light; //#aaa;
     white-space: nowrap;
     line-height: 26px;
     color: @gray-dark; //#444;
@@ -48,24 +48,24 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
           -ms-user-select: none;
               user-select: none;
 
-    background-color: @white;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @gray-lighter), color-stop(0.5, @white));
-    background-image: -webkit-linear-gradient(center bottom, @gray-lighter 0%, @white 50%);
-    background-image: -moz-linear-gradient(center bottom, @gray-lighter 0%, @white 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@white', endColorstr = '@gray-lighter', GradientType = 0);
-    background-image: linear-gradient(to top, @gray-lighter 0%, @white 50%);
+    background-color: @body-bg;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @gray-lighter), color-stop(0.5, @body-bg));
+    background-image: -webkit-linear-gradient(center bottom, @gray-lighter 0%, @body-bg 50%);
+    background-image: -moz-linear-gradient(center bottom, @gray-lighter 0%, @body-bg 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@body-bg', endColorstr = '@gray-lighter', GradientType = 0);
+    background-image: linear-gradient(to top, @gray-lighter 0%, @body-bg 50%);
 }
 
 .roo-select2-container.roo-select2-drop-above .roo-select2-choice {
-    border-bottom-color: @gray-lighter-75; //#aaa;
+    border-bottom-color: @gray-light; //#aaa;
 
     border-radius: 0 0 4px 4px;
 
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @gray-lighter), color-stop(0.9, @white));
-    background-image: -webkit-linear-gradient(center bottom, @gray-lighter 0%, @white 90%);
-    background-image: -moz-linear-gradient(center bottom, @gray-lighter 0%, @white 90%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@white', endColorstr='@gray-lighter', GradientType=0);
-    background-image: linear-gradient(to bottom, @gray-lighter 0%, @white 90%);
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @gray-lighter), color-stop(0.9, @body-bg));
+    background-image: -webkit-linear-gradient(center bottom, @gray-lighter 0%, @body-bg 90%);
+    background-image: -moz-linear-gradient(center bottom, @gray-lighter 0%, @body-bg 90%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@body-bg', endColorstr='@gray-lighter', GradientType=0);
+    background-image: linear-gradient(to bottom, @gray-lighter 0%, @body-bg 90%);
 }
 
 .roo-select2-container.roo-select2-allowclear .roo-select2-choice .roo-select2-chosen {
@@ -96,7 +96,7 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     text-decoration: none;
 
     border: 0;
-    background: url('../images/select2/select2.png') right top no-repeat;
+    background: url('@{bootstrap-image-path}/select2/select2.png') right top no-repeat;
     cursor: pointer;
     outline: 0;
 }
@@ -124,7 +124,7 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     opacity: 0;
     z-index: 9998;
     /* styles required for IE to work */
-    background-color: @white;
+    background-color: @body-bg;
     filter: alpha(opacity=0);
 }
 
@@ -135,26 +135,26 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     z-index: 9999;
     top: 100%;
 
-    background: @white;
+    background: @body-bg;
     color: @gray-base;
-    border: 1px solid @gray-lighter-75;
+    border: 1px solid @gray-light;
     border-top: 0;
 
     border-radius: 0 0 4px 4px;
 
-    -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-            box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
+    -webkit-box-shadow: 0 4px 5px @black-opacity-20;
+            box-shadow: 0 4px 5px @black-opacity-20;
 }
 
 .roo-select2-drop.roo-select2-drop-above {
     margin-top: 1px;
-    border-top: 1px solid @gray-lighter-75; //#aaa;
+    border-top: 1px solid @gray-light; //#aaa;
     border-bottom: 0;
 
     border-radius: 4px 4px 0 0;
 
-    -webkit-box-shadow: 0 -4px 5px @black-opacity-15;
-            box-shadow: 0 -4px 5px @black-opacity-15;
+    -webkit-box-shadow: 0 -4px 5px @black-opacity-20;
+            box-shadow: 0 -4px 5px @black-opacity-20;
 }
 
 .roo-select2-drop-active {
@@ -167,7 +167,7 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 }
 
 .roo-select2-drop-auto-width {
-    border-top: 1px solid @gray-lighter-75; //#aaa;
+    border-top: 1px solid @gray-light; //#aaa;
     width: auto;
 }
 
@@ -183,24 +183,24 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     right: 0;
     top: 0;
 
-    border-left: 1px solid @gray-lighter-75; //#aaa;
+    border-left: 1px solid @gray-light; //#aaa;
     border-radius: 0 4px 4px 0;
 
     background-clip: padding-box;
 
-    background: @gray-lighter-80;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @gray-lighter-80), color-stop(0.6, @gray-lighter));
-    background-image: -webkit-linear-gradient(center bottom, @gray-lighter-80 0%, @gray-lighter 60%);
-    background-image: -moz-linear-gradient(center bottom, @gray-lighter-80 0%, @gray-lighter 60%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@gray-lighter', endColorstr = '@gray-lighter-80', GradientType = 0);
-    background-image: linear-gradient(to top, @gray-lighter-80 0%, @gray-lighter 60%);
+    background: @gray-light;
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @gray-light), color-stop(0.6, @gray-lighter));
+    background-image: -webkit-linear-gradient(center bottom, @gray-light 0%, @gray-lighter 60%);
+    background-image: -moz-linear-gradient(center bottom, @gray-light 0%, @gray-lighter 60%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '@gray-lighter', endColorstr = '@gray-light', GradientType = 0);
+    background-image: linear-gradient(to top, @gray-light 0%, @gray-lighter 60%);
 }
 
 .roo-select2-container .roo-select2-choice .roo-select2-arrow b {
     display: block;
     width: 100%;
     height: 100%;
-    background: url('../images/select2/select2.png') no-repeat 0 1px;
+    background: url('@{bootstrap-image-path}/select2/select2.png') no-repeat 0 1px;
 }
 
 .roo-select2-search {
@@ -228,17 +228,17 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     font-family: sans-serif;
     font-size: 1em;
 
-    border: 1px solid @gray-lighter-75;
+    border: 1px solid @gray-light;
     border-radius: 0;
 
     -webkit-box-shadow: none;
             box-shadow: none;
 
-    background: @white url('../images/select2/select2.png') no-repeat 100% -22px;
-    background: url('../images/select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, @white), color-stop(0.99, @gray-lighter));
-    background: url('../images/select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, @white 85%, @gray-lighter 99%);
-    background: url('../images/select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, @white 85%, @gray-lighter 99%);
-    background: url('../images/select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, @white 85%, @gray-lighter 99%) 0 0;
+    background: @body-bg url('@{bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px;
+    background: url('@{bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, @body-bg), color-stop(0.99, @gray-lighter));
+    background: url('@{bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, @body-bg 85%, @gray-lighter 99%);
+    background: url('@{bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, @body-bg 85%, @gray-lighter 99%);
+    background: url('@{bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, @body-bg 85%, @gray-lighter 99%) 0 0;
 }
 
 .roo-select2-drop.roo-select2-drop-above .roo-select2-search input {
@@ -246,48 +246,48 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 }
 
 .roo-select2-search input.roo-select2-active {
-    background: @white url('../images/select2/select2-spinner.gif') no-repeat 100%;
-    background: url('../images/select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, @white), color-stop(0.99, @gray-lighter));
-    background: url('../images/select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, @white 85%, @gray-lighter 99%);
-    background: url('../images/select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, @white 85%, @gray-lighter 99%);
-    background: url('../images/select2/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, @white 85%, @gray-lighter 99%) 0 0;
+    background: @body-bg url('@{bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%;
+    background: url('@{bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, @body-bg), color-stop(0.99, @gray-lighter));
+    background: url('@{bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, @body-bg 85%, @gray-lighter 99%);
+    background: url('@{bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, @body-bg 85%, @gray-lighter 99%);
+    background: url('@{bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, @body-bg 85%, @gray-lighter 99%) 0 0;
 }
 
 .roo-select2-container-active .roo-select2-choice,
 .roo-select2-container-active .roo-select2-choices {
-    border: 1px solid #5897fb;
+    border: 1px solid @brand-primary; //#5897fb;
     outline: none;
 
-    -webkit-box-shadow: 0 0 5px @black-opacity-30;
-            box-shadow: 0 0 5px @black-opacity-30;
+    -webkit-box-shadow: 0 0 5px @black-opacity-50;
+            box-shadow: 0 0 5px @black-opacity-50;
 }
 
 .roo-select2-dropdown-open .roo-select2-choice {
     border-bottom-color: transparent;
-    -webkit-box-shadow: 0 1px 0 @white inset;
-            box-shadow: 0 1px 0 @white inset;
+    -webkit-box-shadow: 0 1px 0 @body-bg inset;
+            box-shadow: 0 1px 0 @body-bg inset;
 
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
 
     background-color: @gray-lighter;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @white), color-stop(0.5, @gray-lighter));
-    background-image: -webkit-linear-gradient(center bottom, @white 0%, @gray-lighter 50%);
-    background-image: -moz-linear-gradient(center bottom, @white 0%, @gray-lighter 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@gray-lighter', endColorstr='@white', GradientType=0);
-    background-image: linear-gradient(to top, @white 0%, @gray-lighter 50%);
+    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @body-bg), color-stop(0.5, @gray-lighter));
+    background-image: -webkit-linear-gradient(center bottom, @body-bg 0%, @gray-lighter 50%);
+    background-image: -moz-linear-gradient(center bottom, @body-bg 0%, @gray-lighter 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@gray-lighter', endColorstr='@body-bg', GradientType=0);
+    background-image: linear-gradient(to top, @body-bg 0%, @gray-lighter 50%);
 }
 
 .roo-select2-dropdown-open.roo-select2-drop-above .roo-select2-choice,
 .roo-select2-dropdown-open.roo-select2-drop-above .roo-select2-choices {
-    border: 1px solid #5897fb;
+    border: 1px solid @brand-primary; //#5897fb;
     border-top-color: transparent;
 
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, @white), color-stop(0.5, @gray-lighter));
-    background-image: -webkit-linear-gradient(center top, @white 0%, @gray-lighter 50%);
-    background-image: -moz-linear-gradient(center top, @white 0%, @gray-lighter 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@gray-lighter', endColorstr='@white', GradientType=0);
-    background-image: linear-gradient(to bottom, @white 0%, @gray-lighter 50%);
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, @body-bg), color-stop(0.5, @gray-lighter));
+    background-image: -webkit-linear-gradient(center top, @body-bg 0%, @gray-lighter 50%);
+    background-image: -moz-linear-gradient(center top, @body-bg 0%, @gray-lighter 50%);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@gray-lighter', endColorstr='@body-bg', GradientType=0);
+    background-image: linear-gradient(to bottom, @body-bg 0%, @gray-lighter 50%);
 }
 
 .roo-select2-dropdown-open .roo-select2-choice .roo-select2-arrow {
@@ -360,11 +360,11 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 
 .roo-select2-results .roo-select2-highlighted {
     background: @brand-primary; //#3875d7;
-    color: @white;
+    color: @body-bg;
 }
 
 .roo-select2-results li em {
-    background: @papaya-whip;
+    background: @brand-warning;
     font-style: normal;
 }
 
@@ -373,7 +373,7 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 }
 
 .roo-select2-results .roo-select2-highlighted ul {
-    background: @white;
+    background: @body-bg;
     color: @gray-base;
 }
 
@@ -381,7 +381,7 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 .roo-select2-results .roo-select2-no-results,
 .roo-select2-results .roo-select2-searching,
 .roo-select2-results .roo-select2-selection-limit {
-    background: @gray-lighter-96-5; //#f4f4f4;
+    background: @gray-light; //#f4f4f4;
     display: list-item;
     padding-left: 5px;
 }
@@ -391,12 +391,12 @@ disabled look for disabled choices in the results dropdown
 */
 .roo-select2-results .roo-select2-disabled.roo-select2-highlighted {
     color: @gray-lighter; //#666;
-    background: @gray-lighter-96-5; //#f4f4f4;
+    background: @gray-light; //#f4f4f4;
     display: list-item;
     cursor: default;
 }
 .roo-select2-results .roo-select2-disabled {
-  background: @gray-lighter-96-5; //#f4f4f4;
+  background: @gray-light; //#f4f4f4;
   display: list-item;
   cursor: default;
 }
@@ -406,25 +406,25 @@ disabled look for disabled choices in the results dropdown
 }
 
 .roo-select2-more-results.roo-select2-active {
-    background: @gray-lighter-96-5 url('../images/select2/select2-spinner.gif') no-repeat 100%;
+    background: @gray-light url('@{bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%;
 }
 
 .roo-select2-more-results {
-    background: @gray-lighter-96-5; //#f4f4f4;
+    background: @gray-light; //#f4f4f4;
     display: list-item;
 }
 
 /* disabled styles */
 
 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice {
-    background-color: @gray-lighter-96-5; //#f4f4f4;
+    background-color: @gray-light; //#f4f4f4;
     background-image: none;
-    border: 1px solid #ddd;
+    border: 1px solid @gray-light;
     cursor: default;
 }
 
 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice .roo-select2-arrow {
-    background-color: @gray-lighter-96-5; //#f4f4f4;
+    background-color: @gray-light; //#f4f4f4;
     background-image: none;
     border-left: 0;
 }
@@ -442,14 +442,14 @@ disabled look for disabled choices in the results dropdown
     margin: 0;
     padding: 0;
     /*position: relative;*/
-    border: 1px solid #aaa;
+    border: 1px solid @gray-light;
     cursor: text;
     overflow: hidden;
-    background-color: @white;
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, @gray-lighter), color-stop(15%, @white));
-    background-image: -webkit-linear-gradient(top, @gray-lighter 1%, @white 15%);
-    background-image: -moz-linear-gradient(top, @gray-lighter 1%, @white 15%);
-    background-image: linear-gradient(to bottom, @gray-lighter 1%, @white 15%);
+    background-color: @body-bg;
+    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, @gray-lighter), color-stop(15%, @body-bg));
+    background-image: -webkit-linear-gradient(top, @gray-lighter 1%, @body-bg 15%);
+    background-image: -moz-linear-gradient(top, @gray-lighter 1%, @body-bg 15%);
+    background-image: linear-gradient(to bottom, @gray-lighter 1%, @body-bg 15%);
 }
 
 .roo-select2-locked {
@@ -464,8 +464,8 @@ disabled look for disabled choices in the results dropdown
     border: 1px solid @brand-primary;
     outline: none;
 
-    -webkit-box-shadow: 0 0 5px @black-opacity-30;
-            box-shadow: 0 0 5px @black-opacity-30;
+    -webkit-box-shadow: 0 0 5px @black-opacity-50;
+            box-shadow: 0 0 5px @black-opacity-50;
 }
 .roo-select2-container-multi .roo-select2-choices li {
     float: left;
@@ -496,11 +496,11 @@ html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices li
 }
 
 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-field input.roo-select2-active {
-    background: @white url('../images/select2/select2-spinner.gif') no-repeat 100% !important;
+    background: @body-bg url('@{bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100% !important;
 }
 
 .roo-select2-default {
-    color: @gray-lighter-60 !important;
+    color: @gray-light !important;
 }
 
 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice {
@@ -512,7 +512,7 @@ html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices li
     line-height: 13px;
     color: @gray-dark;
     cursor: default;
-    border: 1px solid @gray-lighter-80;
+    border: 1px solid @gray-light;
     border-radius: 3px;
   
     -webkit-touch-callout: none;
@@ -532,7 +532,7 @@ html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices .roo-select2-s
     cursor: default;
 }
 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice-focus {
-    background: @gray-lighter-86-5; //#d4d4d4;
+    background: @gray-light; //#d4d4d4;
 }
 
 .roo-select2-search-choice-close {
@@ -542,11 +542,16 @@ html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices .roo-select2-s
     position: absolute;
     right: 3px;
     top: 4px;
-
-    font-size: 1px;
+    font-size: 12px;
     outline: none;
-    background: url('../images/select2/select2.png') right top no-repeat;
+    color: @gray-light;
+    /*background: url('@{bootstrap-image-path}/select2/select2.png') right top no-repeat;*/
 }
+
+.roo-select2-search-choice-close:hover {
+    color: @gray-dark;
+}
+
 html[dir="rtl"] .roo-select2-search-choice-close {
     right: auto;
     left: 3px;
@@ -565,17 +570,17 @@ html[dir="rtl"] .roo-select2-search-choice-close {
 
 /* disabled styles */
 .roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices {
-    background-color: @gray-lighter-90; //#f4f4f4;
+    background-color: @gray-light; //#f4f4f4;
     background-image: none;
-    border: 1px solid #ddd;
+    border: 1px solid @gray-light;
     cursor: default;
 }
 
 .roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices .roo-select2-search-choice {
     padding: 3px 5px 3px 5px;
-    border: 1px solid @gray-lighter-86-5;
+    border: 1px solid @gray-light;
     background-image: none;
-    background-color: @gray-lighter-90; //#f4f4f4;
+    background-color: @gray-light; //#f4f4f4;
 }
 
 .roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices .roo-select2-search-choice .roo-select2-search-choice-close {    display: none;
@@ -623,7 +628,7 @@ html[dir="rtl"] .roo-select2-search-choice-close {
     .roo-select2-search-choice-close,
     .roo-select2-container .roo-select2-choice abbr,
     .roo-select2-container .roo-select2-choice .roo-select2-arrow b {
-        background-image: url('../images/select2/select2x2.png') !important;
+        background-image: url('@{bootstrap-image-path}/select2/select2x2.png') !important;
         background-repeat: no-repeat !important;
         background-size: 60px 40px !important;
     }
@@ -635,8 +640,8 @@ html[dir="rtl"] .roo-select2-search-choice-close {
 
 .has-error .roo-select2-choices {
     border-color: @brand-danger; //#a94442;
-    -webkit-box-shadow: inset 0 1px 1px @black-opacity-75;
-    box-shadow: inset 0 1px 1px @black-opacity-75;
+    -webkit-box-shadow: inset 0 1px 1px @black-opacity-80;
+    box-shadow: inset 0 1px 1px @black-opacity-80;
 }
 
 .dropdown-menu .roo-select2-result.disabled {