1 @mixin extjs-datepicker {
2 .#{$prefix}datepicker {
3 border: $datepicker-border;
5 background-color: $datepicker-background-color;
12 color: $datepicker-monthpicker-item-color;
13 text-decoration: none;
19 .#{$prefix}datepicker-inner,
20 .#{$prefix}datepicker-inner td,
21 .#{$prefix}datepicker-inner th {
22 border-collapse: separate;
25 .#{$prefix}datepicker-header {
30 @if $datepicker-header-background-gradient {
31 @include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient);
33 background-color: $datepicker-header-background-color;
37 .#{$prefix}datepicker-prev,
38 .#{$prefix}datepicker-next {
50 background-position: top;
51 background-repeat: no-repeat;
55 text-decoration: none !important;
63 .#{$prefix}datepicker-next {
67 background-image: theme-image($theme-name, $datepicker-next-image);
71 .#{$prefix}datepicker-prev {
75 background-image: theme-image($theme-name, $datepicker-prev-image);
79 .#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover,
80 .#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover {
84 .#{$prefix}datepicker-month {
98 background: transparent !important;
99 border-width: 0 !important;
103 color: #fff !important;
106 .#{$prefix}btn-split-right {
107 background: theme-image($theme-name, $datepicker-month-arrow-image) no-repeat right center !important;
113 .#{$prefix}datepicker-next {
117 .#{$prefix}datepicker-month {
122 color: $datepicker-monthpicker-color !important;
127 table.#{$prefix}datepicker-inner {
137 color: $datepicker-th-color;
138 font: $datepicker-th-font;
139 text-align: $datepicker-th-text-align;
141 border-bottom: 1px solid $datepicker-th-border-bottom-color;
142 border-collapse: separate;
144 @if $datepicker-th-background-gradient {
145 @include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient);
147 background-color: $datepicker-th-background-color;
163 border: $datepicker-border-width $datepicker-border-style;
164 height: $datepicker-td-height;
165 border-color: $datepicker-background-color;
177 font: normal ceil($font-size * .9) $font-family;
178 color: $datepicker-item-color;
179 text-decoration: none;
183 .#{$prefix}datepicker-active {
188 .#{$prefix}datepicker-selected {
190 background: repeat-x left top;
191 background-color: $datepicker-selected-item-background-color;
192 border: 1px solid $datepicker-selected-item-border-color;
200 .#{$prefix}datepicker-today {
202 border: $datepicker-border-width $datepicker-border-style;
203 border-color: $datepicker-today-item-border-color;
207 .#{$prefix}datepicker-prevday,
208 .#{$prefix}datepicker-nextday {
210 text-decoration: none !important;
216 .#{$prefix}datepicker-disabled a:hover {
217 text-decoration: none !important;
221 background-color: $datepicker-item-hover-background-color;
224 .#{$prefix}datepicker-disabled a {
226 background-color: #eee;
231 .#{$prefix}datepicker-footer,
232 .#{$prefix}monthpicker-buttons {
235 border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color;
237 @if $datepicker-footer-background-gradient {
238 @include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient);
240 background-color: $datepicker-footer-background-color;
251 .#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover {
256 .#{$prefix}monthpicker {
261 border: $datepicker-border;
264 background-color: $datepicker-background-color;
267 .#{$prefix}monthpicker-months,
268 .#{$prefix}monthpicker-years {
271 height: $datepicker-monthpicker-height;
275 .#{$prefix}monthpicker-item {
280 font: normal ceil($font-size * .9) $font-family;
282 vertical-align: middle;
294 border: $datepicker-monthpicker-item-border;
299 background-color: $datepicker-monthpicker-item-hover-background-color;
302 &.#{$prefix}monthpicker-selected {
303 background-color: $datepicker-monthpicker-item-selected-background-color;
304 border: $datepicker-monthpicker-item-selected-border;
309 .#{$prefix}monthpicker-months {
310 border-right: $datepicker-border;
314 .#{$prefix}monthpicker-years .#{$prefix}monthpicker-item {
318 .#{$prefix}monthpicker-yearnav {
322 background-image: theme-image($theme-name, $datepicker-tool-sprite-image);
326 margin: 6px 12px 5px 15px;
329 &::-moz-focus-inner {
336 .#{$prefix}monthpicker-yearnav-next {
337 background-position: 0 -120px;
340 .#{$prefix}monthpicker-yearnav-next-over {
343 background-position: -15px -120px;
346 .#{$prefix}monthpicker-yearnav-prev {
347 background-position: 0 -105px;
350 .#{$prefix}monthpicker-yearnav-prev-over {
353 background-position: -15px -105px;
360 .#{$prefix}monthpicker-buttons {
370 @if not $supports-gradients or $compile-all {
372 @if $datepicker-header-background-gradient != null {
373 .#{$prefix}datepicker-header {
374 background-image: theme-image($theme-name, 'datepicker/datepicker-header-bg.gif');
375 background-repeat: repeat-x;
376 background-position: top left;
380 @if $datepicker-footer-background-gradient != null {
381 .#{$prefix}datepicker-footer,
382 .#{$prefix}monthpicker-buttons {
383 background-image: theme-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
384 background-repeat: repeat-x;
385 background-position: top left;