git.roojs.org Git - roojs1/blob - old-css-bootstrap/datepicker.css

   1 /*!
   2  * Datepicker for Bootstrap
   3  *
   4  * Copyright 2012 Stefan Petre
   5  * Improvements by Andrew Rowls
   6  * Licensed under the Apache License v2.0
   7  * http://www.apache.org/licenses/LICENSE-2.0
   8  *
   9  */
  10 .datepicker {
  11   padding: 8px 12px;
  12   margin-top: 1px;
  13   -webkit-border-radius: 4px;
  14   -moz-border-radius: 4px;
  15   border-radius: 4px;
  16   direction: ltr;
  17   font-size: 13px;
  18   /*.dow {
  19                 border-top: 1px solid #ddd !important;
  20         }*/
  21
  22 }
  23 .datepicker-inline {
  24   width: 220px;
  25 }
  26 .datepicker.datepicker-rtl {
  27   direction: rtl;
  28 }
  29 .datepicker.datepicker-rtl table tr td span {
  30   float: right;
  31 }
  32 .datepicker-dropdown {
  33   top: 0;
  34   left: 0;
  35 }
  36 /*.datepicker-dropdown:before {
  37   content: '';
  38   display: inline-block;
  39   border-left: 7px solid transparent;
  40   border-right: 7px solid transparent;
  41   border-bottom: 7px solid #ccc;
  42   border-bottom-color: rgba(0, 0, 0, 0.2);
  43   position: absolute;
  44   top: -7px;
  45   left: 6px;
  46 }
  47 .datepicker-dropdown:after {
  48   content: '';
  49   display: inline-block;
  50   border-left: 6px solid transparent;
  51   border-right: 6px solid transparent;
  52   border-bottom: 6px solid #ffffff;
  53   position: absolute;
  54   top: -6px;
  55   left: 7px;
  56 }*/
  57
  58 .datepicker-dropdown.bottom:before {
  59   content: '';
  60   display: inline-block;
  61   border-left: 7px solid transparent;
  62   border-right: 7px solid transparent;
  63   border-bottom: 7px solid #ccc;
  64   border-bottom-color: rgba(0, 0, 0, 0.2);
  65   position: absolute;
  66   top: -7px;
  67   left: 7px;
  68 }
  69 .datepicker-dropdown.bottom:after {
  70   content: '';
  71   display: inline-block;
  72   border-left: 6px solid transparent;
  73   border-right: 6px solid transparent;
  74   border-bottom: 6px solid white;
  75   position: absolute;
  76   top: -6px;
  77   left: 8px;
  78 }
  79 .datepicker-dropdown.top:before {
  80   content: '';
  81   display: inline-block;
  82   border-left: 7px solid transparent;
  83   border-right: 7px solid transparent;
  84   border-top: 7px solid #ccc;
  85   border-bottom: 0;
  86   border-top-color: rgba(0, 0, 0, 0.2);
  87   position: absolute;
  88   bottom: -7px;
  89   left: 6px;
  90 }
  91
  92 .datepicker-dropdown.top:after {
  93   content: '';
  94   display: inline-block;
  95   border-left: 6px solid transparent;
  96   border-right: 6px solid transparent;
  97   border-top: 6px solid white;
  98   border-bottom: 0;
  99   position: absolute;
 100   bottom: -6px;
 101   left: 7px;
 102 }
 103
 104 .datepicker-dropdown.bottom-right:before {
 105   content: '';
 106   display: inline-block;
 107   border-left: 7px solid transparent;
 108   border-right: 7px solid transparent;
 109   border-bottom: 7px solid #ccc;
 110   border-bottom-color: rgba(0, 0, 0, 0.2);
 111   position: absolute;
 112   top: -7px;
 113   left: 7px;
 114 }
 115 .datepicker-dropdown.bottom-right:after {
 116   content: '';
 117   display: inline-block;
 118   border-left: 6px solid transparent;
 119   border-right: 6px solid transparent;
 120   border-bottom: 6px solid white;
 121   position: absolute;
 122   top: -6px;
 123   left: 8px;
 124 }
 125
 126 .datepicker-dropdown.bottom-left:before {
 127   content: '';
 128   display: inline-block;
 129   border-left: 7px solid transparent;
 130   border-right: 7px solid transparent;
 131   border-bottom: 7px solid #ccc;
 132   border-bottom-color: rgba(0, 0, 0, 0.2);
 133   position: absolute;
 134   top: -7px;
 135   left: 260px;
 136 }
 137 .datepicker-dropdown.bottom-left:after {
 138   content: '';
 139   display: inline-block;
 140   border-left: 6px solid transparent;
 141   border-right: 6px solid transparent;
 142   border-bottom: 6px solid white;
 143   position: absolute;
 144   top: -6px;
 145   left: 261px;
 146 }
 147
 148 .datepicker-dropdown.top-right:before {
 149   content: '';
 150   display: inline-block;
 151   border-left: 7px solid transparent;
 152   border-right: 7px solid transparent;
 153   border-top: 7px solid #ccc;
 154   border-top-color: rgba(0, 0, 0, 0.2);
 155   position: absolute;
 156   bottom: -7px;
 157   left: 6px;
 158 }
 159
 160 .datepicker-dropdown.top-right:after {
 161   content: '';
 162   display: inline-block;
 163   border-left: 6px solid transparent;
 164   border-right: 6px solid transparent;
 165   border-top: 6px solid white;
 166   position: absolute;
 167   bottom: -6px;
 168   left: 7px;
 169 }
 170
 171 .datepicker-dropdown.top-left:before {
 172   content: '';
 173   display: inline-block;
 174   border-left: 7px solid transparent;
 175   border-right: 7px solid transparent;
 176   border-top: 7px solid #ccc;
 177   border-top-color: rgba(0, 0, 0, 0.2);
 178   position: absolute;
 179   bottom: -7px;
 180   left: 260px;
 181 }
 182
 183 .datepicker-dropdown.top-left:after {
 184   content: '';
 185   display: inline-block;
 186   border-left: 6px solid transparent;
 187   border-right: 6px solid transparent;
 188   border-top: 6px solid white;
 189   position: absolute;
 190   bottom: -6px;
 191   left: 261px;
 192 }
 193
 194 .datepicker > div {
 195   display: none;
 196 }
 197 .datepicker.days div.datepicker-days {
 198   display: block;
 199 }
 200 .datepicker.months div.datepicker-months {
 201   display: block;
 202 }
 203 .datepicker.years div.datepicker-years {
 204   display: block;
 205 }
 206 .datepicker table {
 207   margin: 0;
 208 }
 209 .datepicker td,
 210 .datepicker th {
 211   text-align: center;
 212   width: 20px;
 213   height: 20px;
 214   -webkit-border-radius: 4px;
 215   -moz-border-radius: 4px;
 216   border-radius: 4px;
 217   border: none;
 218 }
 219 .table-striped .datepicker table tr td,
 220 .table-striped .datepicker table tr th {
 221   background-color: transparent;
 222 }
 223 .datepicker table tr td.day:hover {
 224   background: #eeeeee;
 225   cursor: pointer;
 226 }
 227 .datepicker table tr td.old,
 228 .datepicker table tr td.new {
 229   color: #999999;
 230 }
 231 .datepicker table tr td.disabled,
 232 .datepicker table tr td.disabled:hover {
 233   background: none;
 234   color: #999999;
 235   cursor: default;
 236 }
 237 .datepicker table tr td.today,
 238 .datepicker table tr td.today:hover,
 239 .datepicker table tr td.today.disabled,
 240 .datepicker table tr td.today.disabled:hover {
 241   background-color: #fde19a;
 242   background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
 243   background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
 244   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
 245   background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
 246   background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
 247   background-image: linear-gradient(top, #fdd49a, #fdf59a);
 248   background-repeat: repeat-x;
 249   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
 250   border-color: #fdf59a #fdf59a #fbed50;
 251   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 252   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 253 }
 254 .datepicker table tr td.today:hover,
 255 .datepicker table tr td.today:hover:hover,
 256 .datepicker table tr td.today.disabled:hover,
 257 .datepicker table tr td.today.disabled:hover:hover,
 258 .datepicker table tr td.today:active,
 259 .datepicker table tr td.today:hover:active,
 260 .datepicker table tr td.today.disabled:active,
 261 .datepicker table tr td.today.disabled:hover:active,
 262 .datepicker table tr td.today.active,
 263 .datepicker table tr td.today:hover.active,
 264 .datepicker table tr td.today.disabled.active,
 265 .datepicker table tr td.today.disabled:hover.active,
 266 .datepicker table tr td.today.disabled,
 267 .datepicker table tr td.today:hover.disabled,
 268 .datepicker table tr td.today.disabled.disabled,
 269 .datepicker table tr td.today.disabled:hover.disabled,
 270 .datepicker table tr td.today[disabled],
 271 .datepicker table tr td.today:hover[disabled],
 272 .datepicker table tr td.today.disabled[disabled],
 273 .datepicker table tr td.today.disabled:hover[disabled] {
 274   background-color: #fdf59a;
 275 }
 276 .datepicker table tr td.today:active,
 277 .datepicker table tr td.today:hover:active,
 278 .datepicker table tr td.today.disabled:active,
 279 .datepicker table tr td.today.disabled:hover:active,
 280 .datepicker table tr td.today.active,
 281 .datepicker table tr td.today:hover.active,
 282 .datepicker table tr td.today.disabled.active,
 283 .datepicker table tr td.today.disabled:hover.active {
 284   background-color: #fbf069 \9;
 285 }
 286 .datepicker table tr td.active,
 287 .datepicker table tr td.active:hover,
 288 .datepicker table tr td.active.disabled,
 289 .datepicker table tr td.active.disabled:hover {
 290   background-color: #006dcc;
 291   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
 292   background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
 293   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
 294   background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
 295   background-image: -o-linear-gradient(top, #0088cc, #0044cc);
 296   background-image: linear-gradient(top, #0088cc, #0044cc);
 297   background-repeat: repeat-x;
 298   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
 299   border-color: #0044cc #0044cc #002a80;
 300   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 301   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 302   color: #fff;
 303   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 304 }
 305 .datepicker table tr td.active:hover,
 306 .datepicker table tr td.active:hover:hover,
 307 .datepicker table tr td.active.disabled:hover,
 308 .datepicker table tr td.active.disabled:hover:hover,
 309 .datepicker table tr td.active:active,
 310 .datepicker table tr td.active:hover:active,
 311 .datepicker table tr td.active.disabled:active,
 312 .datepicker table tr td.active.disabled:hover:active,
 313 .datepicker table tr td.active.active,
 314 .datepicker table tr td.active:hover.active,
 315 .datepicker table tr td.active.disabled.active,
 316 .datepicker table tr td.active.disabled:hover.active,
 317 .datepicker table tr td.active.disabled,
 318 .datepicker table tr td.active:hover.disabled,
 319 .datepicker table tr td.active.disabled.disabled,
 320 .datepicker table tr td.active.disabled:hover.disabled,
 321 .datepicker table tr td.active[disabled],
 322 .datepicker table tr td.active:hover[disabled],
 323 .datepicker table tr td.active.disabled[disabled],
 324 .datepicker table tr td.active.disabled:hover[disabled] {
 325   background-color: #0044cc;
 326 }
 327 .datepicker table tr td.active:active,
 328 .datepicker table tr td.active:hover:active,
 329 .datepicker table tr td.active.disabled:active,
 330 .datepicker table tr td.active.disabled:hover:active,
 331 .datepicker table tr td.active.active,
 332 .datepicker table tr td.active:hover.active,
 333 .datepicker table tr td.active.disabled.active,
 334 .datepicker table tr td.active.disabled:hover.active {
 335   background-color: #003399 \9;
 336 }
 337 .datepicker table tr td span {
 338   display: block;
 339   width: 23%;
 340   height: 54px;
 341   line-height: 54px;
 342   float: left;
 343   margin: 1%;
 344   cursor: pointer;
 345   -webkit-border-radius: 4px;
 346   -moz-border-radius: 4px;
 347   border-radius: 4px;
 348 }
 349 .datepicker table tr td span:hover {
 350   background: #eeeeee;
 351 }
 352 .datepicker table tr td span.disabled,
 353 .datepicker table tr td span.disabled:hover {
 354   background: none;
 355   color: #999999;
 356   cursor: default;
 357 }
 358 .datepicker table tr td span.active,
 359 .datepicker table tr td span.active:hover,
 360 .datepicker table tr td span.active.disabled,
 361 .datepicker table tr td span.active.disabled:hover {
 362   background-color: #006dcc;
 363   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
 364   background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
 365   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
 366   background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
 367   background-image: -o-linear-gradient(top, #0088cc, #0044cc);
 368   background-image: linear-gradient(top, #0088cc, #0044cc);
 369   background-repeat: repeat-x;
 370   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
 371   border-color: #0044cc #0044cc #002a80;
 372   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 373   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 374   color: #fff;
 375   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 376 }
 377 .datepicker table tr td span.active:hover,
 378 .datepicker table tr td span.active:hover:hover,
 379 .datepicker table tr td span.active.disabled:hover,
 380 .datepicker table tr td span.active.disabled:hover:hover,
 381 .datepicker table tr td span.active:active,
 382 .datepicker table tr td span.active:hover:active,
 383 .datepicker table tr td span.active.disabled:active,
 384 .datepicker table tr td span.active.disabled:hover:active,
 385 .datepicker table tr td span.active.active,
 386 .datepicker table tr td span.active:hover.active,
 387 .datepicker table tr td span.active.disabled.active,
 388 .datepicker table tr td span.active.disabled:hover.active,
 389 .datepicker table tr td span.active.disabled,
 390 .datepicker table tr td span.active:hover.disabled,
 391 .datepicker table tr td span.active.disabled.disabled,
 392 .datepicker table tr td span.active.disabled:hover.disabled,
 393 .datepicker table tr td span.active[disabled],
 394 .datepicker table tr td span.active:hover[disabled],
 395 .datepicker table tr td span.active.disabled[disabled],
 396 .datepicker table tr td span.active.disabled:hover[disabled] {
 397   background-color: #0044cc;
 398 }
 399 .datepicker table tr td span.active:active,
 400 .datepicker table tr td span.active:hover:active,
 401 .datepicker table tr td span.active.disabled:active,
 402 .datepicker table tr td span.active.disabled:hover:active,
 403 .datepicker table tr td span.active.active,
 404 .datepicker table tr td span.active:hover.active,
 405 .datepicker table tr td span.active.disabled.active,
 406 .datepicker table tr td span.active.disabled:hover.active {
 407   background-color: #003399 \9;
 408 }
 409 .datepicker table tr td span.old {
 410   color: #999999;
 411 }
 412 .datepicker th.switch {
 413   width: 145px;
 414 }
 415 .datepicker thead tr:first-child th,
 416 .datepicker tfoot tr:first-child th {
 417   cursor: pointer;
 418 }
 419 .datepicker thead tr:first-child th:hover,
 420 .datepicker tfoot tr:first-child th:hover {
 421   background: #eeeeee;
 422 }
 423 .datepicker .cw {
 424   font-size: 10px;
 425   width: 12px;
 426   padding: 0 2px 0 5px;
 427   vertical-align: middle;
 428 }
 429 .datepicker thead tr:first-child th.cw {
 430   cursor: default;
 431   background-color: transparent;
 432 }
 433 .input-append.date .add-on i,
 434 .input-prepend.date .add-on i {
 435   display: block;
 436   cursor: pointer;
 437   width: 16px;
 438   height: 16px;
 439 }
 440
 441 .datepicker .datepicker-time td span {
 442     display: block;
 443     width: 47px;
 444     height: 54px;
 445     line-height: 54px;
 446     float: left;
 447     margin: 2px;
 448     cursor: pointer;
 449     border-radius: 4px;
 450 }
 451
 452 .datepicker .datepicker-time td span.timepicker-hour,
 453 .datepicker .datepicker-time td span.timepicker-minute {
 454   width: 100%;
 455   font-weight: bold;
 456   font-size: 1.2em;
 457 }