/**
* Creates the base structure of a date picker.
* @member Ext.picker.Date
*/
@mixin extjs-datepicker {
.#{$prefix}datepicker {
border: $datepicker-border;
background-color: $datepicker-background-color;
position: relative;
a {
-moz-outline: 0 none;
outline: 0 none;
color: $datepicker-monthpicker-item-color;
text-decoration: none;
border-width: 0;
}
}
.#{$prefix}datepicker-inner,
.#{$prefix}datepicker-inner td,
.#{$prefix}datepicker-inner th {
border-collapse: separate;
}
.#{$prefix}datepicker-header {
position: relative;
height: 26px;
@if $datepicker-header-background-gradient {
@include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient);
} @else {
background-color: $datepicker-header-background-color;
}
}
.#{$prefix}datepicker-prev,
.#{$prefix}datepicker-next {
position: absolute;
top: 5px;
width: 18px;
a {
display: block;
width: 16px;
height: 16px;
background-position: top;
background-repeat: no-repeat;
cursor: pointer;
text-decoration: none !important;
@include opacity(.7);
&:hover {
@include opacity(1);
}
}
}
.#{$prefix}datepicker-next {
right: 5px;
a {
background-image: theme-background-image($theme-name, $datepicker-next-image);
}
}
.#{$prefix}datepicker-prev {
left: 5px;
a {
background-image: theme-background-image($theme-name, $datepicker-prev-image);
}
}
.#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover,
.#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover {
@include opacity(.6);
}
.#{$prefix}datepicker-month {
padding-top: 3px;
.#{$prefix}btn,
button,
.#{$prefix}btn-tc,
.#{$prefix}btn-tl,
.#{$prefix}btn-tr,
.#{$prefix}btn-mc,
.#{$prefix}btn-ml,
.#{$prefix}btn-mr,
.#{$prefix}btn-bc,
.#{$prefix}btn-bl,
.#{$prefix}btn-br {
background: transparent !important;
border-width: 0 !important;
}
span {
color: #fff !important;
}
.#{$prefix}btn-split-right {
background-image: theme-background-image($theme-name, $datepicker-month-arrow-image);
padding-right: 12px;
}
}
.#{$prefix}datepicker-next {
text-align: right;
}
.#{$prefix}datepicker-month {
//width: 120px;
text-align: center;
button {
color: $datepicker-monthpicker-color !important;
}
}
table.#{$prefix}datepicker-inner {
width: 100%;
table-layout: fixed;
th {
width: 25px;
height: 19px;
padding: 0;
color: $datepicker-th-color;
font: $datepicker-th-font;
text-align: $datepicker-th-text-align;
border-bottom: 1px solid $datepicker-th-border-bottom-color;
border-collapse: separate;
@if $datepicker-th-background-gradient {
@include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient);
} @else {
background-color: $datepicker-th-background-color;
}
cursor: default;
span {
display: block;
padding-right: 7px;
}
}
tr {
height: 20px;
}
td {
border: $datepicker-border-width $datepicker-border-style;
height: $datepicker-td-height;
border-color: $datepicker-background-color;
text-align: right;
padding: 0;
}
a {
padding-right: 4px;
display: block;
zoom: 1;
font: normal ceil($font-size * .9) $font-family;
color: $datepicker-item-color;
text-decoration: none;
text-align: right;
}
.#{$prefix}datepicker-active {
cursor: pointer;
color: black;
}
.#{$prefix}datepicker-selected {
a {
background: repeat-x left top;
background-color: $datepicker-selected-item-background-color;
border: 1px solid $datepicker-selected-item-border-color;
}
span {
font-weight: bold;
}
}
.#{$prefix}datepicker-today {
a {
border: $datepicker-border-width $datepicker-border-style;
border-color: $datepicker-today-item-border-color;
}
}
.#{$prefix}datepicker-prevday,
.#{$prefix}datepicker-nextday {
a {
text-decoration: none !important;
color: #aaa;
}
}
a:hover,
.#{$prefix}datepicker-disabled a:hover {
text-decoration: none !important;
color: #000;
background-color: $datepicker-item-hover-background-color;
}
.#{$prefix}datepicker-disabled a {
cursor: default;
background-color: #eee;
color: #bbb;
}
}
.#{$prefix}datepicker-footer,
.#{$prefix}monthpicker-buttons {
position: relative;
border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color;
@if $datepicker-footer-background-gradient {
@include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient);
} @else {
background-color: $datepicker-footer-background-color;
}
text-align: center;
.#{$prefix}btn {
position: relative;
margin: 4px;
}
}
.#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover {
background: none;
}
// month picker
.#{$prefix}datepicker .#{$prefix}monthpicker {
position: absolute;
left: 0;
top: 0;
}
.#{$prefix}monthpicker {
border: $datepicker-border;
background-color: $datepicker-background-color;
}
.#{$prefix}monthpicker-months,
.#{$prefix}monthpicker-years {
float: left;
height: $datepicker-monthpicker-height;
width: 88px;
}
.#{$prefix}monthpicker-item {
float: left;
margin: 4px 0 5px 0;
font: normal ceil($font-size * .9) $font-family;
text-align: center;
vertical-align: middle;
height: 18px;
width: 43px;
border: 0 none;
a {
display: block;
margin: 0 5px;
text-decoration: none;
color: $datepicker-monthpicker-item-color;
border: $datepicker-monthpicker-item-border;
line-height: 17px;
&:hover {
background-color: $datepicker-monthpicker-item-hover-background-color;
}
&.#{$prefix}monthpicker-selected {
background-color: $datepicker-monthpicker-item-selected-background-color;
border: $datepicker-monthpicker-item-selected-border;
}
}
}
.#{$prefix}monthpicker-months {
border-right: $datepicker-border;
width: 87px;
}
.#{$prefix}monthpicker-years .#{$prefix}monthpicker-item {
width: 44px;
}
.#{$prefix}monthpicker-yearnav {
height: 28px;
button {
background-image: theme-background-image($theme-name, $datepicker-tool-sprite-image);
height: 15px;
width: 15px;
padding: 0;
margin: 6px 12px 5px 15px;
border: 0;
outline: 0 none;
&::-moz-focus-inner {
border: 0;
padding: 0;
}
}
}
.#{$prefix}monthpicker-yearnav-next {
background-position: 0 -120px;
}
.#{$prefix}monthpicker-yearnav-next-over {
cursor: pointer;
cursor: hand;
background-position: -15px -120px;
}
.#{$prefix}monthpicker-yearnav-prev {
background-position: 0 -105px;
}
.#{$prefix}monthpicker-yearnav-prev-over {
cursor: pointer;
cursor: hand;
background-position: -15px -105px;
}
.#{$prefix}monthpicker-small {
.#{$prefix}monthpicker-item {
margin: 2px 0 2px 0;
}
.#{$prefix}monthpicker-yearnav {
height: 23px;
}
.#{$prefix}monthpicker-months, .#{$prefix}monthpicker-years {
height: 136px;
}
}
@if $include-ie {
.#{$prefix}quirks {
.#{$prefix}ie7,
.#{$prefix}ie8 {
.#{$prefix}monthpicker-buttons {
.#{$prefix}btn {
margin-top: 2px;
}
}
}
.#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
margin-top: 3px;
margin-bottom: 3px;
}
}
.#{$prefix}ie6 .#{$prefix}monthpicker-small .#{$prefix}monthpicker-yearnav button {
margin-top: 3px;
margin-bottom: 3px;
}
}
//nlg support
@if not $supports-gradients or $compile-all {
.#{$prefix}nlg {
@if $datepicker-header-background-gradient != null {
.#{$prefix}datepicker-header {
background-image: theme-background-image($theme-name, 'datepicker/datepicker-header-bg.gif');
background-repeat: repeat-x;
background-position: top left;
}
}
@if $datepicker-footer-background-gradient != null {
.#{$prefix}datepicker-footer,
.#{$prefix}monthpicker-buttons {
background-image: theme-background-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
background-repeat: repeat-x;
background-position: top left;
}
}
}
}
}
|
Download
