resources/themes/stylesheets/ext4/default/widgets/_datepicker.scss

   1 @mixin extjs-datepicker {
   2     .#{$prefix}datepicker {
   3         border: $datepicker-border;
   4
   5         background-color: $datepicker-background-color;
   6         position: relative;
   7
   8         a {
   9             -moz-outline: 0 none;
  10             outline: 0 none;
  11
  12             color: $datepicker-monthpicker-item-color;
  13             text-decoration: none;
  14
  15             border-width: 0;
  16         }
  17     }
  18
  19     .#{$prefix}datepicker-inner,
  20     .#{$prefix}datepicker-inner td,
  21     .#{$prefix}datepicker-inner th {
  22         border-collapse: separate;
  23     }
  24
  25     .#{$prefix}datepicker-header {
  26         position: relative;
  27
  28         height: 26px;
  29
  30         @if $datepicker-header-background-gradient {
  31             @include background-gradient($datepicker-header-background-color, $datepicker-header-background-gradient);
  32         } @else {
  33             background-color: $datepicker-header-background-color;
  34         }
  35     }
  36
  37     .#{$prefix}datepicker-prev,
  38     .#{$prefix}datepicker-next {
  39         position: absolute;
  40         top: 5px;
  41
  42         width: 18px;
  43
  44         a {
  45             display: block;
  46
  47             width: 16px;
  48             height: 16px;
  49
  50             background-position: top;
  51             background-repeat: no-repeat;
  52
  53             cursor: pointer;
  54
  55             text-decoration: none !important;
  56
  57             &:hover {
  58                 @include opacity(1);
  59             }
  60         }
  61     }
  62
  63     .#{$prefix}datepicker-next {
  64         right: 5px;
  65
  66         a {
  67             background-image: theme-image($theme-name, $datepicker-next-image);
  68         }
  69     }
  70
  71     .#{$prefix}datepicker-prev {
  72         left: 5px;
  73
  74         a {
  75             background-image: theme-image($theme-name, $datepicker-prev-image);
  76         }
  77     }
  78
  79     .#{$prefix}item-disabled .#{$prefix}datepicker-prev a:hover,
  80     .#{$prefix}item-disabled .#{$prefix}datepicker-next a:hover {
  81         @include opacity(.6);
  82     }
  83
  84     .#{$prefix}datepicker-month {
  85         padding-top: 3px;
  86
  87         .#{$prefix}btn,
  88         button,
  89         .#{$prefix}btn-tc,
  90         .#{$prefix}btn-tl,
  91         .#{$prefix}btn-tr,
  92         .#{$prefix}btn-mc,
  93         .#{$prefix}btn-ml,
  94         .#{$prefix}btn-mr,
  95         .#{$prefix}btn-bc,
  96         .#{$prefix}btn-bl,
  97         .#{$prefix}btn-br {
  98             background: transparent !important;
  99             border-width: 0 !important;
 100         }
 101
 102         span {
 103             color: #fff !important;
 104         }
 105
 106         .#{$prefix}btn-split-right {
 107             background: theme-image($theme-name, $datepicker-month-arrow-image) no-repeat right center !important;
 108
 109             padding-right: 12px;
 110         }
 111     }
 112
 113     .#{$prefix}datepicker-next {
 114         text-align: right;
 115     }
 116
 117     .#{$prefix}datepicker-month {
 118         //width: 120px;
 119         text-align: center;
 120
 121         button {
 122             color: $datepicker-monthpicker-color !important;
 123         }
 124     }
 125
 126
 127     table.#{$prefix}datepicker-inner {
 128         width: 100%;
 129         table-layout: fixed;
 130
 131         th {
 132             width: 25px;
 133             height: 19px;
 134
 135             padding: 0;
 136
 137             color: $datepicker-th-color;
 138             font: $datepicker-th-font;
 139             text-align: $datepicker-th-text-align;
 140
 141             border-bottom: 1px solid $datepicker-th-border-bottom-color;
 142             border-collapse: separate;
 143
 144             @if $datepicker-th-background-gradient {
 145                 @include background-gradient($datepicker-th-background-color, $datepicker-th-background-gradient);
 146             } @else {
 147                 background-color: $datepicker-th-background-color;
 148             }
 149
 150             cursor: default;
 151
 152             span {
 153                 display: block;
 154                 padding-right: 7px;
 155             }
 156         }
 157
 158         tr {
 159             height: 20px;
 160         }
 161
 162         td {
 163             border: $datepicker-border-width $datepicker-border-style;
 164             height: $datepicker-td-height;
 165             border-color: $datepicker-background-color;
 166             text-align: right;
 167             padding: 0;
 168         }
 169
 170         a {
 171             padding-right: 4px;
 172
 173             display: block;
 174
 175             zoom: 1;
 176
 177             font: normal ceil($font-size * .9) $font-family;
 178             color: $datepicker-item-color;
 179             text-decoration: none;
 180             text-align: right;
 181         }
 182
 183         .#{$prefix}datepicker-active {
 184             cursor: pointer;
 185             color: black;
 186         }
 187
 188         .#{$prefix}datepicker-selected {
 189             a {
 190                 background: repeat-x left top;
 191                 background-color: $datepicker-selected-item-background-color;
 192                 border: 1px solid $datepicker-selected-item-border-color;
 193             }
 194
 195             span {
 196                 font-weight: bold;
 197             }
 198         }
 199
 200         .#{$prefix}datepicker-today {
 201             a {
 202                 border: $datepicker-border-width $datepicker-border-style;
 203                 border-color: $datepicker-today-item-border-color;
 204             }
 205         }
 206
 207         .#{$prefix}datepicker-prevday,
 208         .#{$prefix}datepicker-nextday {
 209             a {
 210                 text-decoration: none !important;
 211                 color: #aaa;
 212             }
 213         }
 214
 215         a:hover,
 216         .#{$prefix}datepicker-disabled a:hover {
 217             text-decoration: none !important;
 218
 219             color: #000;
 220
 221             background-color: $datepicker-item-hover-background-color;
 222         }
 223
 224         .#{$prefix}datepicker-disabled a {
 225             cursor: default;
 226             background-color: #eee;
 227             color: #bbb;
 228         }
 229     }
 230
 231     .#{$prefix}datepicker-footer,
 232     .#{$prefix}monthpicker-buttons {
 233         position: relative;
 234
 235         border-top: $datepicker-border-width $datepicker-border-style $datepicker-footer-border-top-color;
 236
 237         @if $datepicker-footer-background-gradient {
 238             @include background-gradient($datepicker-footer-background-color, $datepicker-footer-background-gradient);
 239         } @else {
 240             background-color: $datepicker-footer-background-color;
 241         }
 242
 243         text-align: center;
 244
 245         .#{$prefix}btn {
 246             position: relative;
 247             margin: 4px;
 248         }
 249     }
 250
 251     .#{$prefix}item-disabled .#{$prefix}datepicker-inner a:hover {
 252         background: none;
 253     }
 254
 255     // month picker
 256     .#{$prefix}monthpicker {
 257         position: absolute;
 258         left: 0;
 259         top: 0;
 260
 261         border: $datepicker-border;
 262         //
 263
 264         background-color: $datepicker-background-color;
 265     }
 266
 267     .#{$prefix}monthpicker-months,
 268     .#{$prefix}monthpicker-years {
 269         float: left;
 270
 271         height: $datepicker-monthpicker-height;
 272         width: 88px;
 273     }
 274
 275     .#{$prefix}monthpicker-item {
 276         float: left;
 277
 278         margin: 4px 0 5px 0;
 279
 280         font: normal ceil($font-size * .9) $font-family;
 281         text-align: center;
 282         vertical-align: middle;
 283
 284         height: 18px;
 285         width: 43px;
 286
 287         border: 0 none;
 288
 289         a {
 290             display: block;
 291
 292             margin: 0 5px 0 5px;
 293
 294             border: $datepicker-monthpicker-item-border;
 295
 296             line-height: 17px;
 297
 298             &:hover {
 299                 background-color: $datepicker-monthpicker-item-hover-background-color;
 300             }
 301
 302             &.#{$prefix}monthpicker-selected {
 303                 background-color: $datepicker-monthpicker-item-selected-background-color;
 304                 border: $datepicker-monthpicker-item-selected-border;
 305             }
 306         }
 307     }
 308
 309     .#{$prefix}monthpicker-months {
 310         border-right: $datepicker-border;
 311         width: 87px;
 312     }
 313
 314     .#{$prefix}monthpicker-years .#{$prefix}monthpicker-item {
 315         width: 44px;
 316     }
 317
 318     .#{$prefix}monthpicker-yearnav {
 319         height: 28px;
 320
 321         button {
 322             background-image: theme-image($theme-name, $datepicker-tool-sprite-image);
 323             height: 15px;
 324             width: 15px;
 325             padding: 0;
 326             margin: 6px 12px 5px 15px;
 327             border: none;
 328             outline: 0 none;
 329             &::-moz-focus-inner {
 330                 border: 0;
 331                 padding: 0;
 332             }
 333         }
 334     }
 335
 336     .#{$prefix}monthpicker-yearnav-next {
 337         background-position: 0 -120px;
 338     }
 339
 340     .#{$prefix}monthpicker-yearnav-next-over {
 341         cursor: pointer;
 342         cursor: hand;
 343         background-position: -15px -120px;
 344     }
 345
 346     .#{$prefix}monthpicker-yearnav-prev {
 347         background-position: 0 -105px;
 348     }
 349
 350     .#{$prefix}monthpicker-yearnav-prev-over {
 351         cursor: pointer;
 352         cursor: hand;
 353         background-position: -15px -105px;
 354     }
 355
 356     @if $include-ie {
 357         .#{$prefix}quirks {
 358             .#{$prefix}ie7,
 359             .#{$prefix}ie8 {
 360                 .#{$prefix}monthpicker-buttons {
 361                     .#{$prefix}btn {
 362                         margin-top: 2px;
 363                     }
 364                 }
 365             }
 366         }
 367     }
 368
 369     //nlg support
 370     @if not $supports-gradients or $compile-all {
 371         .#{$prefix}nlg {
 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;
 377                 }
 378             }
 379
 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;
 386                 }
 387             }
 388         }
 389     }
 390 }