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 > div {
 103   display: none;
 104 }
 105 .datepicker.days div.datepicker-days {
 106   display: block;
 107 }
 108 .datepicker.months div.datepicker-months {
 109   display: block;
 110 }
 111 .datepicker.years div.datepicker-years {
 112   display: block;
 113 }
 114 .datepicker table {
 115   margin: 0;
 116 }
 117 .datepicker td,
 118 .datepicker th {
 119   text-align: center;
 120   width: 20px;
 121   height: 20px;
 122   -webkit-border-radius: 4px;
 123   -moz-border-radius: 4px;
 124   border-radius: 4px;
 125   border: none;
 126 }
 127 .table-striped .datepicker table tr td,
 128 .table-striped .datepicker table tr th {
 129   background-color: transparent;
 130 }
 131 .datepicker table tr td.day:hover {
 132   background: #eeeeee;
 133   cursor: pointer;
 134 }
 135 .datepicker table tr td.old,
 136 .datepicker table tr td.new {
 137   color: #999999;
 138 }
 139 .datepicker table tr td.disabled,
 140 .datepicker table tr td.disabled:hover {
 141   background: none;
 142   color: #999999;
 143   cursor: default;
 144 }
 145 .datepicker table tr td.today,
 146 .datepicker table tr td.today:hover,
 147 .datepicker table tr td.today.disabled,
 148 .datepicker table tr td.today.disabled:hover {
 149   background-color: #fde19a;
 150   background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
 151   background-image: -ms-linear-gradient(top, #fdd49a, #fdf59a);
 152   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
 153   background-image: -webkit-linear-gradient(top, #fdd49a, #fdf59a);
 154   background-image: -o-linear-gradient(top, #fdd49a, #fdf59a);
 155   background-image: linear-gradient(top, #fdd49a, #fdf59a);
 156   background-repeat: repeat-x;
 157   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
 158   border-color: #fdf59a #fdf59a #fbed50;
 159   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 160   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 161 }
 162 .datepicker table tr td.today:hover,
 163 .datepicker table tr td.today:hover:hover,
 164 .datepicker table tr td.today.disabled:hover,
 165 .datepicker table tr td.today.disabled:hover:hover,
 166 .datepicker table tr td.today:active,
 167 .datepicker table tr td.today:hover:active,
 168 .datepicker table tr td.today.disabled:active,
 169 .datepicker table tr td.today.disabled:hover:active,
 170 .datepicker table tr td.today.active,
 171 .datepicker table tr td.today:hover.active,
 172 .datepicker table tr td.today.disabled.active,
 173 .datepicker table tr td.today.disabled:hover.active,
 174 .datepicker table tr td.today.disabled,
 175 .datepicker table tr td.today:hover.disabled,
 176 .datepicker table tr td.today.disabled.disabled,
 177 .datepicker table tr td.today.disabled:hover.disabled,
 178 .datepicker table tr td.today[disabled],
 179 .datepicker table tr td.today:hover[disabled],
 180 .datepicker table tr td.today.disabled[disabled],
 181 .datepicker table tr td.today.disabled:hover[disabled] {
 182   background-color: #fdf59a;
 183 }
 184 .datepicker table tr td.today:active,
 185 .datepicker table tr td.today:hover:active,
 186 .datepicker table tr td.today.disabled:active,
 187 .datepicker table tr td.today.disabled:hover:active,
 188 .datepicker table tr td.today.active,
 189 .datepicker table tr td.today:hover.active,
 190 .datepicker table tr td.today.disabled.active,
 191 .datepicker table tr td.today.disabled:hover.active {
 192   background-color: #fbf069 \9;
 193 }
 194 .datepicker table tr td.active,
 195 .datepicker table tr td.active:hover,
 196 .datepicker table tr td.active.disabled,
 197 .datepicker table tr td.active.disabled:hover {
 198   background-color: #006dcc;
 199   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
 200   background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
 201   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
 202   background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
 203   background-image: -o-linear-gradient(top, #0088cc, #0044cc);
 204   background-image: linear-gradient(top, #0088cc, #0044cc);
 205   background-repeat: repeat-x;
 206   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
 207   border-color: #0044cc #0044cc #002a80;
 208   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 209   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 210   color: #fff;
 211   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 212 }
 213 .datepicker table tr td.active:hover,
 214 .datepicker table tr td.active:hover:hover,
 215 .datepicker table tr td.active.disabled:hover,
 216 .datepicker table tr td.active.disabled:hover:hover,
 217 .datepicker table tr td.active:active,
 218 .datepicker table tr td.active:hover:active,
 219 .datepicker table tr td.active.disabled:active,
 220 .datepicker table tr td.active.disabled:hover:active,
 221 .datepicker table tr td.active.active,
 222 .datepicker table tr td.active:hover.active,
 223 .datepicker table tr td.active.disabled.active,
 224 .datepicker table tr td.active.disabled:hover.active,
 225 .datepicker table tr td.active.disabled,
 226 .datepicker table tr td.active:hover.disabled,
 227 .datepicker table tr td.active.disabled.disabled,
 228 .datepicker table tr td.active.disabled:hover.disabled,
 229 .datepicker table tr td.active[disabled],
 230 .datepicker table tr td.active:hover[disabled],
 231 .datepicker table tr td.active.disabled[disabled],
 232 .datepicker table tr td.active.disabled:hover[disabled] {
 233   background-color: #0044cc;
 234 }
 235 .datepicker table tr td.active:active,
 236 .datepicker table tr td.active:hover:active,
 237 .datepicker table tr td.active.disabled:active,
 238 .datepicker table tr td.active.disabled:hover:active,
 239 .datepicker table tr td.active.active,
 240 .datepicker table tr td.active:hover.active,
 241 .datepicker table tr td.active.disabled.active,
 242 .datepicker table tr td.active.disabled:hover.active {
 243   background-color: #003399 \9;
 244 }
 245 .datepicker table tr td span {
 246   display: block;
 247   width: 23%;
 248   height: 54px;
 249   line-height: 54px;
 250   float: left;
 251   margin: 1%;
 252   cursor: pointer;
 253   -webkit-border-radius: 4px;
 254   -moz-border-radius: 4px;
 255   border-radius: 4px;
 256 }
 257 .datepicker table tr td span:hover {
 258   background: #eeeeee;
 259 }
 260 .datepicker table tr td span.disabled,
 261 .datepicker table tr td span.disabled:hover {
 262   background: none;
 263   color: #999999;
 264   cursor: default;
 265 }
 266 .datepicker table tr td span.active,
 267 .datepicker table tr td span.active:hover,
 268 .datepicker table tr td span.active.disabled,
 269 .datepicker table tr td span.active.disabled:hover {
 270   background-color: #006dcc;
 271   background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
 272   background-image: -ms-linear-gradient(top, #0088cc, #0044cc);
 273   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
 274   background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
 275   background-image: -o-linear-gradient(top, #0088cc, #0044cc);
 276   background-image: linear-gradient(top, #0088cc, #0044cc);
 277   background-repeat: repeat-x;
 278   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
 279   border-color: #0044cc #0044cc #002a80;
 280   border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
 281   filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
 282   color: #fff;
 283   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 284 }
 285 .datepicker table tr td span.active:hover,
 286 .datepicker table tr td span.active:hover:hover,
 287 .datepicker table tr td span.active.disabled:hover,
 288 .datepicker table tr td span.active.disabled:hover:hover,
 289 .datepicker table tr td span.active:active,
 290 .datepicker table tr td span.active:hover:active,
 291 .datepicker table tr td span.active.disabled:active,
 292 .datepicker table tr td span.active.disabled:hover:active,
 293 .datepicker table tr td span.active.active,
 294 .datepicker table tr td span.active:hover.active,
 295 .datepicker table tr td span.active.disabled.active,
 296 .datepicker table tr td span.active.disabled:hover.active,
 297 .datepicker table tr td span.active.disabled,
 298 .datepicker table tr td span.active:hover.disabled,
 299 .datepicker table tr td span.active.disabled.disabled,
 300 .datepicker table tr td span.active.disabled:hover.disabled,
 301 .datepicker table tr td span.active[disabled],
 302 .datepicker table tr td span.active:hover[disabled],
 303 .datepicker table tr td span.active.disabled[disabled],
 304 .datepicker table tr td span.active.disabled:hover[disabled] {
 305   background-color: #0044cc;
 306 }
 307 .datepicker table tr td span.active:active,
 308 .datepicker table tr td span.active:hover:active,
 309 .datepicker table tr td span.active.disabled:active,
 310 .datepicker table tr td span.active.disabled:hover:active,
 311 .datepicker table tr td span.active.active,
 312 .datepicker table tr td span.active:hover.active,
 313 .datepicker table tr td span.active.disabled.active,
 314 .datepicker table tr td span.active.disabled:hover.active {
 315   background-color: #003399 \9;
 316 }
 317 .datepicker table tr td span.old {
 318   color: #999999;
 319 }
 320 .datepicker th.switch {
 321   width: 145px;
 322 }
 323 .datepicker thead tr:first-child th,
 324 .datepicker tfoot tr:first-child th {
 325   cursor: pointer;
 326 }
 327 .datepicker thead tr:first-child th:hover,
 328 .datepicker tfoot tr:first-child th:hover {
 329   background: #eeeeee;
 330 }
 331 .datepicker .cw {
 332   font-size: 10px;
 333   width: 12px;
 334   padding: 0 2px 0 5px;
 335   vertical-align: middle;
 336 }
 337 .datepicker thead tr:first-child th.cw {
 338   cursor: default;
 339   background-color: transparent;
 340 }
 341 .input-append.date .add-on i,
 342 .input-prepend.date .add-on i {
 343   display: block;
 344   cursor: pointer;
 345   width: 16px;
 346   height: 16px;
 347 }
 348
 349 .datepicker .datepicker-time td span {
 350     display: block;
 351     width: 47px;
 352     height: 54px;
 353     line-height: 54px;
 354     float: left;
 355     margin: 2px;
 356     cursor: pointer;
 357     border-radius: 4px;
 358 }
 359
 360 .datepicker .datepicker-time td span.timepicker-hour,
 361 .datepicker .datepicker-time td span.timepicker-minute {
 362   width: 100%;
 363   font-weight: bold;
 364   font-size: 1.2em;
 365 }
 366