--- /dev/null
+@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;
+
+ &:hover {
+ @include opacity(1);
+ }
+ }
+ }
+
+ .#{$prefix}datepicker-next {
+ right: 5px;
+
+ a {
+ background-image: theme-image($theme-name, $datepicker-next-image);
+ }
+ }
+
+ .#{$prefix}datepicker-prev {
+ left: 5px;
+
+ a {
+ background-image: theme-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: theme-image($theme-name, $datepicker-month-arrow-image) no-repeat right center !important;
+
+ 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}monthpicker {
+ position: absolute;
+ left: 0;
+ top: 0;
+
+ 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 0 5px;
+
+ 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-image($theme-name, $datepicker-tool-sprite-image);
+ height: 15px;
+ width: 15px;
+ padding: 0;
+ margin: 6px 12px 5px 15px;
+ border: none;
+ 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;
+ }
+
+ @if $include-ie {
+ .#{$prefix}quirks {
+ .#{$prefix}ie7,
+ .#{$prefix}ie8 {
+ .#{$prefix}monthpicker-buttons {
+ .#{$prefix}btn {
+ margin-top: 2px;
+ }
+ }
+ }
+ }
+ }
+
+ //nlg support
+ @if not $supports-gradients or $compile-all {
+ .#{$prefix}nlg {
+ @if $datepicker-header-background-gradient != null {
+ .#{$prefix}datepicker-header {
+ background-image: theme-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-image($theme-name, 'datepicker/datepicker-footer-bg.gif');
+ background-repeat: repeat-x;
+ background-position: top left;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff