less/roojs-bootstrap/datepicker.less

[roojs1] / less / roojs-bootstrap / datepicker.less

diff --git a/less/roojs-bootstrap/datepicker.less b/less/roojs-bootstrap/datepicker.less
index 74a414b..0dd927c 100644 (file)
--- a/less/roojs-bootstrap/datepicker.less
+++ b/less/roojs-bootstrap/datepicker.less
@@ -16,7 +16,7 @@
   direction: ltr;
   font-size: 13px;
   /*.dow {
-               border-top: 1px solid #ddd !important;
+               border-top: 1px solid @gray-light !important;
        }*/
 
 }
@@ -38,7 +38,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
+  border-bottom: 7px solid @gray-light;
   border-bottom-color: @black-opacity-20;
   position: absolute;
   top: -7px;
@@ -49,7 +49,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid #ffffff;
+  border-bottom: 6px solid @body-bg;
   position: absolute;
   top: -6px;
   left: 7px;
@@ -60,7 +60,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
+  border-bottom: 7px solid @gray-light;
   border-bottom-color: @black-opacity-20;
   position: absolute;
   top: -7px;
@@ -71,7 +71,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid white;
+  border-bottom: 6px solid @body-bg;
   position: absolute;
   top: -6px;
   left: 8px;
@@ -81,7 +81,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-top: 7px solid #ccc;
+  border-top: 7px solid @gray-light;
   border-bottom: 0;
   border-top-color: @black-opacity-20;
   position: absolute;
@@ -94,7 +94,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 6px solid white;
+  border-top: 6px solid @body-bg;
   border-bottom: 0;
   position: absolute;
   bottom: -6px;
@@ -106,7 +106,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
+  border-bottom: 7px solid @gray-light;
   border-bottom-color: @black-opacity-20;
   position: absolute;
   top: -7px;
@@ -117,7 +117,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid white;
+  border-bottom: 6px solid @body-bg;
   position: absolute;
   top: -6px;
   left: 8px;
@@ -128,7 +128,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-bottom: 7px solid #ccc;
+  border-bottom: 7px solid @gray-light;
   border-bottom-color: @black-opacity-20;
   position: absolute;
   top: -7px;
@@ -139,7 +139,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-bottom: 6px solid white;
+  border-bottom: 6px solid @body-bg;
   position: absolute;
   top: -6px;
   left: 261px;
@@ -150,7 +150,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-top: 7px solid #ccc;
+  border-top: 7px solid @gray-light;
   border-top-color: @black-opacity-20;
   position: absolute;
   bottom: -7px;
@@ -162,7 +162,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 6px solid white;
+  border-top: 6px solid @body-bg;
   position: absolute;
   bottom: -6px;
   left: 7px;
@@ -173,7 +173,7 @@
   display: inline-block;
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
-  border-top: 7px solid #ccc;
+  border-top: 7px solid @gray-light;
   border-top-color: @black-opacity-20;
   position: absolute;
   bottom: -7px;
@@ -185,7 +185,7 @@
   display: inline-block;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
-  border-top: 6px solid white;
+  border-top: 6px solid @body-bg;
   position: absolute;
   bottom: -6px;
   left: 261px;
@@ -221,34 +221,34 @@
   background-color: transparent;
 }
 .datepicker table tr td.day:hover {
-  background: #eeeeee;
+  background: @gray-lighter;
   cursor: pointer;
 }
 .datepicker table tr td.old,
 .datepicker table tr td.new {
-  color: #999999;
+  color: @gray-lighter;
 }
 .datepicker table tr td.disabled,
 .datepicker table tr td.disabled:hover {
   background: none;
-  color: #999999;
+  color: @gray-lighter;
   cursor: default;
 }
 .datepicker table tr td.today,
 .datepicker table tr td.today:hover,
 .datepicker table tr td.today.disabled,
 .datepicker table tr td.today.disabled:hover {
-  background-color: #fde19a;
-  background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
-  background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
-  background-image: linear-gradient(top, #fdd49a, #fdf59a);
+  background-color: @brand-warning; //#fde19a;
+  background-image: -moz-linear-gradient(top, @brand-warning, @brand-warning);
+  background-image: -ms-linear-gradient(top, @brand-warning, @brand-warning);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@brand-warning), to(@brand-warning));
+  background-image: -webkit-linear-gradient(top, @brand-warning, @brand-warning);
+  background-image: -o-linear-gradient(top, @brand-warning, @brand-warning);
+  background-image: linear-gradient(top, @brand-warning, @brand-warning);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
-  border-color: #fdf59a #fdf59a #fbed50;
-  border-color: @black-opacity-10 @black-opacity-10 @black-opacity-25;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@brand-warning', endColorstr='@brand-warning', GradientType=0);
+  border-color: @brand-warning @brand-warning @brand-warning;
+  border-color: @black-opacity-20 @black-opacity-20 @black-opacity-50;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 }
 .datepicker table tr td.today:hover,
@@ -271,7 +271,7 @@
 .datepicker table tr td.today:hover[disabled],
 .datepicker table tr td.today.disabled[disabled],
 .datepicker table tr td.today.disabled:hover[disabled] {
-  background-color: #fdf59a;
+  background-color: @brand-warning; //#fdf59a;
 }
 .datepicker table tr td.today:active,
 .datepicker table tr td.today:hover:active,
@@ -281,26 +281,26 @@
 .datepicker table tr td.today:hover.active,
 .datepicker table tr td.today.disabled.active,
 .datepicker table tr td.today.disabled:hover.active {
-  background-color: #fbf069 \9;
+  background-color: @brand-warning; //#fbf069 \9;
 }
 .datepicker table tr td.active,
 .datepicker table tr td.active:hover,
 .datepicker table tr td.active.disabled,
 .datepicker table tr td.active.disabled:hover {
-  background-color: #006dcc;
-  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
-  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
-  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-color: @brand-primary; //#006dcc;
+  background-image: -moz-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: -ms-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(lighten(@brand-primary, 5%)), to(@brand-primary));
+  background-image: -webkit-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: -o-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
-  border-color: #0044cc #0044cc #002a80;
-  border-color: @black-opacity-10 @black-opacity-10 @black-opacity-25;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lighten(@brand-primary, 5%)', endColorstr='@brand-primary', GradientType=0);
+  border-color: @brand-primary @brand-primary darken(@brand-primary, 10%);
+  border-color: @black-opacity-20 @black-opacity-20 @black-opacity-50;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  color: #fff;
-  text-shadow: 0 -1px 0 @black-opacity-25;
+  color: @body-bg;
+  text-shadow: 0 -1px 0 @black-opacity-50;
 }
 .datepicker table tr td.active:hover,
 .datepicker table tr td.active:hover:hover,
@@ -322,7 +322,7 @@
 .datepicker table tr td.active:hover[disabled],
 .datepicker table tr td.active.disabled[disabled],
 .datepicker table tr td.active.disabled:hover[disabled] {
-  background-color: #0044cc;
+  background-color: @brand-primary;
 }
 .datepicker table tr td.active:active,
 .datepicker table tr td.active:hover:active,
@@ -332,7 +332,7 @@
 .datepicker table tr td.active:hover.active,
 .datepicker table tr td.active.disabled.active,
 .datepicker table tr td.active.disabled:hover.active {
-  background-color: #003399 \9;
+  background-color: darken(@brand-primary, 10%); //#003399 \9;
 }
 .datepicker table tr td span {
   display: block;
@@ -347,32 +347,32 @@
   border-radius: 4px;
 }
 .datepicker table tr td span:hover {
-  background: #eeeeee;
+  background: @gray-lighter;
 }
 .datepicker table tr td span.disabled,
 .datepicker table tr td span.disabled:hover {
   background: none;
-  color: #999999;
+  color: @gray-light;
   cursor: default;
 }
 .datepicker table tr td span.active,
 .datepicker table tr td span.active:hover,
 .datepicker table tr td span.active.disabled,
 .datepicker table tr td span.active.disabled:hover {
-  background-color: #006dcc;
-  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
-  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
-  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
-  background-image: linear-gradient(top, #0088cc, #0044cc);
+  background-color: @brand-primary; //#006dcc;
+  background-image: -moz-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: -ms-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(lighten(@brand-primary, 5%)), to(@brand-primary));
+  background-image: -webkit-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: -o-linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
+  background-image: linear-gradient(top, lighten(@brand-primary, 5%), @brand-primary);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
-  border-color: #0044cc #0044cc #002a80;
-  border-color: @black-opacity-10 @black-opacity-10 @black-opacity-25;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='lighten(@brand-primary, 5%)', endColorstr='@brand-primary', GradientType=0);
+  border-color: @brand-primary @brand-primary darken(@brand-primary, 10%);
+  border-color: @black-opacity-20 @black-opacity-20 @black-opacity-50;
   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-  color: #fff;
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+  color: @body-bg;
+  text-shadow: 0 -1px 0 @black-opacity-50;
 }
 .datepicker table tr td span.active:hover,
 .datepicker table tr td span.active:hover:hover,
@@ -394,7 +394,7 @@
 .datepicker table tr td span.active:hover[disabled],
 .datepicker table tr td span.active.disabled[disabled],
 .datepicker table tr td span.active.disabled:hover[disabled] {
-  background-color: #0044cc;
+  background-color: @brand-primary;
 }
 .datepicker table tr td span.active:active,
 .datepicker table tr td span.active:hover:active,
@@ -404,10 +404,10 @@
 .datepicker table tr td span.active:hover.active,
 .datepicker table tr td span.active.disabled.active,
 .datepicker table tr td span.active.disabled:hover.active {
-  background-color: #003399 \9;
+  background-color: darken(@brand-primary, 10%); //#003399 \9;
 }
 .datepicker table tr td span.old {
-  color: #999999;
+  color: @gray-light;
 }
 .datepicker th.switch {
   width: 145px;
@@ -418,7 +418,7 @@
 }
 .datepicker thead tr:first-child th:hover,
 .datepicker tfoot tr:first-child th:hover {
-  background: #eeeeee;
+  background: @gray-lighter;
 }
 .datepicker .cw {
   font-size: 10px;