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