qcg/static/qcg/daterangepicker/daterangepicker-bs3.css

   1 /*!
   2  * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
   3  *
   4  * Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
   5  * Licensed under the Apache License v2.0
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  * Built for http://www.improvely.com
   9  */
  10
  11  .daterangepicker.dropdown-menu {
  12   max-width: none;
  13   z-index: 3000;
  14 }
  15
  16 .daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
  17   float: left;
  18   margin: 4px;
  19 }
  20
  21 .daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar,
  22 .daterangepicker.openscenter .ranges, .daterangepicker.openscenter .calendar {
  23   float: right;
  24   margin: 4px;
  25 }
  26
  27 .daterangepicker.single .ranges, .daterangepicker.single .calendar {
  28   float: none;
  29 }
  30
  31 .daterangepicker .ranges {
  32   width: 160px;
  33   text-align: left;
  34 }
  35
  36 .daterangepicker .ranges .range_inputs>div {
  37   float: left;
  38 }
  39
  40 .daterangepicker .ranges .range_inputs>div:nth-child(2) {
  41   padding-left: 11px;
  42 }
  43
  44 .daterangepicker .calendar {
  45   display: none;
  46   max-width: 270px;
  47 }
  48
  49 .daterangepicker.show-calendar .calendar {
  50     display: block;
  51 }
  52
  53 .daterangepicker .calendar.single .calendar-date {
  54   border: none;
  55 }
  56
  57 .daterangepicker .calendar th, .daterangepicker .calendar td {
  58   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  59   white-space: nowrap;
  60   text-align: center;
  61   min-width: 32px;
  62 }
  63
  64 .daterangepicker .daterangepicker_start_input label,
  65 .daterangepicker .daterangepicker_end_input label {
  66   color: #333;
  67   display: block;
  68   font-size: 11px;
  69   font-weight: normal;
  70   height: 20px;
  71   line-height: 20px;
  72   margin-bottom: 2px;
  73   text-shadow: #fff 1px 1px 0px;
  74   text-transform: uppercase;
  75   width: 74px;
  76 }
  77
  78 .daterangepicker .ranges input {
  79   font-size: 11px;
  80 }
  81
  82 .daterangepicker .ranges .input-mini {
  83   border: 1px solid #ccc;
  84   border-radius: 4px;
  85   color: #555;
  86   display: block;
  87   font-size: 11px;
  88   height: 30px;
  89   line-height: 30px;
  90   vertical-align: middle;
  91   margin: 0 0 10px 0;
  92   padding: 0 6px;
  93   width: 74px;
  94 }
  95
  96 .daterangepicker .ranges ul {
  97   list-style: none;
  98   margin: 0;
  99   padding: 0;
 100 }
 101
 102 .daterangepicker .ranges li {
 103   font-size: 13px;
 104   background: #f5f5f5;
 105   border: 1px solid #f5f5f5;
 106   color: #08c;
 107   padding: 3px 12px;
 108   margin-bottom: 8px;
 109   -webkit-border-radius: 5px;
 110   -moz-border-radius: 5px;
 111   border-radius: 5px;
 112   cursor: pointer;
 113 }
 114
 115 .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
 116   background: #08c;
 117   border: 1px solid #08c;
 118   color: #fff;
 119 }
 120
 121 .daterangepicker .calendar-date {
 122   border: 1px solid #ddd;
 123   padding: 4px;
 124   border-radius: 4px;
 125   background: #fff;
 126 }
 127
 128 .daterangepicker .calendar-time {
 129   text-align: center;
 130   margin: 8px auto 0 auto;
 131   line-height: 30px;
 132 }
 133
 134 .daterangepicker {
 135   position: absolute;
 136   background: #fff;
 137   top: 100px;
 138   left: 20px;
 139   padding: 4px;
 140   margin-top: 1px;
 141   -webkit-border-radius: 4px;
 142   -moz-border-radius: 4px;
 143   border-radius: 4px;
 144 }
 145
 146 .daterangepicker.opensleft:before {
 147   position: absolute;
 148   top: -7px;
 149   right: 9px;
 150   display: inline-block;
 151   border-right: 7px solid transparent;
 152   border-bottom: 7px solid #ccc;
 153   border-left: 7px solid transparent;
 154   border-bottom-color: rgba(0, 0, 0, 0.2);
 155   content: '';
 156 }
 157
 158 .daterangepicker.opensleft:after {
 159   position: absolute;
 160   top: -6px;
 161   right: 10px;
 162   display: inline-block;
 163   border-right: 6px solid transparent;
 164   border-bottom: 6px solid #fff;
 165   border-left: 6px solid transparent;
 166   content: '';
 167 }
 168
 169 .daterangepicker.openscenter:before {
 170   position: absolute;
 171   top: -7px;
 172   left: 0;
 173   right: 0;
 174   width: 0;
 175   margin-left: auto;
 176   margin-right: auto;
 177   display: inline-block;
 178   border-right: 7px solid transparent;
 179   border-bottom: 7px solid #ccc;
 180   border-left: 7px solid transparent;
 181   border-bottom-color: rgba(0, 0, 0, 0.2);
 182   content: '';
 183 }
 184
 185 .daterangepicker.openscenter:after {
 186   position: absolute;
 187   top: -6px;
 188   left: 0;
 189   right: 0;
 190   width: 0;
 191   margin-left: auto;
 192   margin-right: auto;
 193   display: inline-block;
 194   border-right: 6px solid transparent;
 195   border-bottom: 6px solid #fff;
 196   border-left: 6px solid transparent;
 197   content: '';
 198 }
 199
 200 .daterangepicker.opensright:before {
 201   position: absolute;
 202   top: -7px;
 203   left: 9px;
 204   display: inline-block;
 205   border-right: 7px solid transparent;
 206   border-bottom: 7px solid #ccc;
 207   border-left: 7px solid transparent;
 208   border-bottom-color: rgba(0, 0, 0, 0.2);
 209   content: '';
 210 }
 211
 212 .daterangepicker.opensright:after {
 213   position: absolute;
 214   top: -6px;
 215   left: 10px;
 216   display: inline-block;
 217   border-right: 6px solid transparent;
 218   border-bottom: 6px solid #fff;
 219   border-left: 6px solid transparent;
 220   content: '';
 221 }
 222
 223 .daterangepicker table {
 224   width: 100%;
 225   margin: 0;
 226 }
 227
 228 .daterangepicker td, .daterangepicker th {
 229   text-align: center;
 230   width: 20px;
 231   height: 20px;
 232   -webkit-border-radius: 4px;
 233   -moz-border-radius: 4px;
 234   border-radius: 4px;
 235   cursor: pointer;
 236   white-space: nowrap;
 237 }
 238
 239 .daterangepicker td.off {
 240   color: #999;
 241 }
 242
 243 .daterangepicker td.disabled, .daterangepicker option.disabled {
 244   color: #999;
 245 }
 246
 247 .daterangepicker td.available:hover, .daterangepicker th.available:hover {
 248   background: #eee;
 249 }
 250
 251 .daterangepicker td.in-range {
 252   background: #ebf4f8;
 253   -webkit-border-radius: 0;
 254   -moz-border-radius: 0;
 255   border-radius: 0;
 256 }
 257
 258 .daterangepicker td.start-date {
 259   -webkit-border-radius: 4px 0 0 4px;
 260   -moz-border-radius: 4px 0 0 4px;
 261   border-radius: 4px 0 0 4px;
 262 }
 263
 264 .daterangepicker td.end-date {
 265   -webkit-border-radius: 0 4px 4px 0;
 266   -moz-border-radius: 0 4px 4px 0;
 267   border-radius: 0 4px 4px 0;
 268 }
 269
 270 .daterangepicker td.start-date.end-date {
 271   -webkit-border-radius: 4px;
 272   -moz-border-radius: 4px;
 273   border-radius: 4px;
 274 }
 275
 276 .daterangepicker td.active, .daterangepicker td.active:hover {
 277   background-color: #357ebd;
 278   border-color: #3071a9;
 279   color: #fff;
 280 }
 281
 282 .daterangepicker td.week, .daterangepicker th.week {
 283   font-size: 80%;
 284   color: #ccc;
 285 }
 286
 287 .daterangepicker select.monthselect, .daterangepicker select.yearselect {
 288   font-size: 12px;
 289   padding: 1px;
 290   height: auto;
 291   margin: 0;
 292   cursor: default;
 293 }
 294
 295 .daterangepicker select.monthselect {
 296   margin-right: 2%;
 297   width: 56%;
 298 }
 299
 300 .daterangepicker select.yearselect {
 301   width: 40%;
 302 }
 303
 304 .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
 305   width: 50px;
 306   margin-bottom: 0;
 307 }
 308
 309 .daterangepicker_start_input {
 310   float: left;
 311 }
 312
 313 .daterangepicker_end_input {
 314   float: left;
 315   padding-left: 11px
 316 }
 317
 318 .daterangepicker th.month {
 319   width: auto;
 320 }