roojs-ui.js
[roojs1] / less / roojs-bootstrap / select2.less
index ab59983..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 #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, #eee 0%, #fff 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, #eee 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: #fff;
+    background-color: @body-bg;
     filter: alpha(opacity=0);
 }
 
@@ -135,39 +135,39 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     z-index: 9999;
     top: 100%;
 
-    background: #fff;
-    color: #000;
-    border: 1px solid #aaa;
+    background: @body-bg;
+    color: @gray-base;
+    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 #aaa;
+    border-top: 1px solid @gray-light; //#aaa;
     border-bottom: 0;
 
     border-radius: 4px 4px 0 0;
 
-    -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-active {
-    border: 1px solid #5897fb;
+    border: 1px solid @brand-primary; //#5897fb;
     border-top: none;
 }
 
 .roo-select2-drop.roo-select2-drop-above.roo-select2-drop-active {
-    border-top: 1px solid #5897fb;
+    border-top: 1px solid @brand-primary; //#5897fb;
 }
 
 .roo-select2-drop-auto-width {
-    border-top: 1px solid #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 #aaa;
+    border-left: 1px solid @gray-light; //#aaa;
     border-radius: 0 4px 4px 0;
 
     background-clip: padding-box;
 
-    background: #ccc;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
-    background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-    background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
-    background-image: linear-gradient(to top, #ccc 0%, #eee 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 #aaa;
+    border: 1px solid @gray-light;
     border-radius: 0;
 
     -webkit-box-shadow: none;
             box-shadow: none;
 
-    background: #fff 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, #fff), color-stop(0.99, #eee));
-    background: url('../images/select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
-    background: url('../images/select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
-    background: url('../images/select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 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: #fff 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, #fff), color-stop(0.99, #eee));
-    background: url('../images/select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
-    background: url('../images/select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
-    background: url('../images/select2/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 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 rgba(0, 0, 0, .3);
-            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+    -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 #fff inset;
-            box-shadow: 0 1px 0 #fff 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: #eee;
-    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
-    background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
-    background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
-    background-image: linear-gradient(to top, #fff 0%, #eee 50%);
+    background-color: @gray-lighter;
+    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, #fff), color-stop(0.5, #eee));
-    background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
-    background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
-    background-image: linear-gradient(to bottom, #fff 0%, #eee 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 {
@@ -318,7 +318,7 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: fade(@gray-base, 0%);
 }
 
 .roo-select2-results ul.roo-select2-result-sub {
@@ -359,12 +359,12 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 .roo-select2-results-dept-7 .roo-select2-result-label { padding-left: 120px }
 
 .roo-select2-results .roo-select2-highlighted {
-    background: #3875d7;
-    color: #fff;
+    background: @brand-primary; //#3875d7;
+    color: @body-bg;
 }
 
 .roo-select2-results li em {
-    background: #feffde;
+    background: @brand-warning;
     font-style: normal;
 }
 
@@ -373,15 +373,15 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 }
 
 .roo-select2-results .roo-select2-highlighted ul {
-    background: #fff;
-    color: #000;
+    background: @body-bg;
+    color: @gray-base;
 }
 
 
 .roo-select2-results .roo-select2-no-results,
 .roo-select2-results .roo-select2-searching,
 .roo-select2-results .roo-select2-selection-limit {
-    background: #f4f4f4;
+    background: @gray-light; //#f4f4f4;
     display: list-item;
     padding-left: 5px;
 }
@@ -390,13 +390,13 @@ Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
 disabled look for disabled choices in the results dropdown
 */
 .roo-select2-results .roo-select2-disabled.roo-select2-highlighted {
-    color: #666;
-    background: #f4f4f4;
+    color: @gray-lighter; //#666;
+    background: @gray-light; //#f4f4f4;
     display: list-item;
     cursor: default;
 }
 .roo-select2-results .roo-select2-disabled {
-  background: #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: #f4f4f4 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: #f4f4f4;
+    background: @gray-light; //#f4f4f4;
     display: list-item;
 }
 
 /* disabled styles */
 
 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice {
-    background-color: #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: #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: #fff;
-    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
-    background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
-    background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
-    background-image: linear-gradient(to bottom, #eee 1%, #fff 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 {
@@ -461,11 +461,11 @@ disabled look for disabled choices in the results dropdown
 }
 
 .roo-select2-container-multi.roo-select2-container-active .roo-select2-choices {
-    border: 1px solid #5897fb;
+    border: 1px solid @brand-primary;
     outline: none;
 
-    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-            box-shadow: 0 0 5px rgba(0, 0, 0, .3);
+    -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;
@@ -487,7 +487,7 @@ html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices li
 
     font-family: sans-serif;
     font-size: 100%;
-    color: #666;
+    color: @gray; //#666;
     outline: 0;
     border: 0;
     -webkit-box-shadow: none;
@@ -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: #fff 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: #999 !important;
+    color: @gray-light !important;
 }
 
 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice {
@@ -510,9 +510,9 @@ html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices li
     margin: 0 1px;
     position: relative;
     line-height: 13px;
-    color: #333;
+    color: @gray-dark;
     cursor: default;
-    border: 1px solid #ccc;
+    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: #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: #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 #ddd;
+    border: 1px solid @gray-light;
     background-image: none;
-    background-color: #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;
     }
@@ -634,13 +639,13 @@ html[dir="rtl"] .roo-select2-search-choice-close {
 }
 
 .has-error .roo-select2-choices {
-    border-color: #a94442;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+    border-color: @brand-danger; //#a94442;
+    -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 {
-    background-color: #eee;
-    color: #777;
+    background-color: @gray-lighter;
+    color: @gray-light;
     cursor: not-allowed;
 }
\ No newline at end of file