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