partkeepr

_datepicker.scss (10574B)

---

 /**
  * 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;
                 }
             }
         }
     }
 }