static/css/daterangepicker.css

   1 .daterangepicker {
   2   position: absolute;
   3   color: inherit;
   4   background: #fff;
   5   border-radius: 4px;
   6   width: 278px;
   7   padding: 4px;
   8   margin-top: 1px;
   9   top: 100px;
  10   left: 20px;
  11   /* Calendars */ }
  12   .daterangepicker:before, .daterangepicker:after {
  13     position: absolute;
  14     display: inline-block;
  15     border-bottom-color: rgba(0, 0, 0, 0.2);
  16     content: ''; }
  17   .daterangepicker:before {
  18     top: -7px;
  19     border-right: 7px solid transparent;
  20     border-left: 7px solid transparent;
  21     border-bottom: 7px solid #ccc; }
  22   .daterangepicker:after {
  23     top: -6px;
  24     border-right: 6px solid transparent;
  25     border-bottom: 6px solid #fff;
  26     border-left: 6px solid transparent; }
  27   .daterangepicker.opensleft:before {
  28     right: 9px; }
  29   .daterangepicker.opensleft:after {
  30     right: 10px; }
  31   .daterangepicker.openscenter:before {
  32     left: 0;
  33     right: 0;
  34     width: 0;
  35     margin-left: auto;
  36     margin-right: auto; }
  37   .daterangepicker.openscenter:after {
  38     left: 0;
  39     right: 0;
  40     width: 0;
  41     margin-left: auto;
  42     margin-right: auto; }
  43   .daterangepicker.opensright:before {
  44     left: 9px; }
  45   .daterangepicker.opensright:after {
  46     left: 10px; }
  47   .daterangepicker.dropup {
  48     margin-top: -5px; }
  49     .daterangepicker.dropup:before {
  50       top: initial;
  51       bottom: -7px;
  52       border-bottom: initial;
  53       border-top: 7px solid #ccc; }
  54     .daterangepicker.dropup:after {
  55       top: initial;
  56       bottom: -6px;
  57       border-bottom: initial;
  58       border-top: 6px solid #fff; }
  59   .daterangepicker.dropdown-menu {
  60     max-width: none;
  61     z-index: 3001; }
  62   .daterangepicker.single .ranges, .daterangepicker.single .calendar {
  63     float: none; }
  64   .daterangepicker.show-calendar .calendar {
  65     display: block; }
  66   .daterangepicker .calendar {
  67     display: none;
  68     max-width: 270px;
  69     margin: 4px; }
  70     .daterangepicker .calendar.single .calendar-table {
  71       border: none; }
  72     .daterangepicker .calendar th, .daterangepicker .calendar td {
  73       white-space: nowrap;
  74       text-align: center;
  75       min-width: 32px; }
  76   .daterangepicker .calendar-table {
  77     border: 1px solid #fff;
  78     padding: 4px;
  79     border-radius: 4px;
  80     background: #fff; }
  81   .daterangepicker table {
  82     width: 100%;
  83     margin: 0; }
  84   .daterangepicker td, .daterangepicker th {
  85     text-align: center;
  86     width: 20px;
  87     height: 20px;
  88     border-radius: 4px;
  89     border: 1px solid transparent;
  90     white-space: nowrap;
  91     cursor: pointer; }
  92     .daterangepicker td.available:hover, .daterangepicker th.available:hover {
  93       background: #eee; }
  94     .daterangepicker td.week, .daterangepicker th.week {
  95       font-size: 80%;
  96       color: #ccc; }
  97   .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
  98     background-color: #fff;
  99     border-color: transparent;
 100     color: #999; }
 101   .daterangepicker td.in-range {
 102     background-color: #ebf4f8;
 103     border-color: transparent;
 104     color: #000;
 105     border-radius: 0; }
 106   .daterangepicker td.start-date {
 107     border-radius: 4px 0 0 4px; }
 108   .daterangepicker td.end-date {
 109     border-radius: 0 4px 4px 0; }
 110   .daterangepicker td.start-date.end-date {
 111     border-radius: 4px; }
 112   .daterangepicker td.active, .daterangepicker td.active:hover {
 113     background-color: #357ebd;
 114     border-color: transparent;
 115     color: #fff; }
 116   .daterangepicker th.month {
 117     width: auto; }
 118   .daterangepicker td.disabled, .daterangepicker option.disabled {
 119     color: #999;
 120     cursor: not-allowed;
 121     text-decoration: line-through; }
 122   .daterangepicker select.monthselect, .daterangepicker select.yearselect {
 123     font-size: 12px;
 124     padding: 1px;
 125     height: auto;
 126     margin: 0;
 127     cursor: default; }
 128   .daterangepicker select.monthselect {
 129     margin-right: 2%;
 130     width: 56%; }
 131   .daterangepicker select.yearselect {
 132     width: 40%; }
 133   .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
 134     width: 50px;
 135     margin-bottom: 0; }
 136   .daterangepicker .input-mini {
 137     border: 1px solid #ccc;
 138     border-radius: 4px;
 139     color: #555;
 140     height: 30px;
 141     line-height: 30px;
 142     display: block;
 143     vertical-align: middle;
 144     margin: 0 0 5px 0;
 145     padding: 0 6px 0 28px;
 146     width: 100%; }
 147     .daterangepicker .input-mini.active {
 148       border: 1px solid #08c;
 149       border-radius: 4px; }
 150   .daterangepicker .daterangepicker_input {
 151     position: relative; }
 152     .daterangepicker .daterangepicker_input i {
 153       position: absolute;
 154       left: 8px;
 155       top: 8px; }
 156   .daterangepicker .calendar-time {
 157     text-align: center;
 158     margin: 5px auto;
 159     line-height: 30px;
 160     position: relative;
 161     padding-left: 28px; }
 162     .daterangepicker .calendar-time select.disabled {
 163       color: #ccc;
 164       cursor: not-allowed; }
 165
 166 .ranges {
 167   font-size: 11px;
 168   float: none;
 169   margin: 4px;
 170   text-align: left; }
 171   .ranges ul {
 172     list-style: none;
 173     margin: 0 auto;
 174     padding: 0;
 175     width: 100%; }
 176   .ranges li {
 177     font-size: 13px;
 178     background: #f5f5f5;
 179     border: 1px solid #f5f5f5;
 180     border-radius: 4px;
 181     color: #08c;
 182     padding: 3px 12px;
 183     margin-bottom: 8px;
 184     cursor: pointer; }
 185     .ranges li:hover {
 186       background: #08c;
 187       border: 1px solid #08c;
 188       color: #fff; }
 189     .ranges li.active {
 190       background: #08c;
 191       border: 1px solid #08c;
 192       color: #fff; }
 193
 194 /*  Larger Screen Styling */
 195 @media (min-width: 564px) {
 196   .daterangepicker {
 197     width: auto; }
 198     .daterangepicker .ranges ul {
 199       width: 160px; }
 200     .daterangepicker.single .ranges ul {
 201       width: 100%; }
 202     .daterangepicker.single .calendar.left {
 203       clear: none; }
 204     .daterangepicker.single .ranges, .daterangepicker.single .calendar {
 205       float: left; }
 206     .daterangepicker .calendar.left {
 207       clear: left;
 208       margin-right: 0; }
 209       .daterangepicker .calendar.left .calendar-table {
 210         border-right: none;
 211         border-top-right-radius: 0;
 212         border-bottom-right-radius: 0; }
 213     .daterangepicker .calendar.right {
 214       margin-left: 0; }
 215       .daterangepicker .calendar.right .calendar-table {
 216         border-left: none;
 217         border-top-left-radius: 0;
 218         border-bottom-left-radius: 0; }
 219     .daterangepicker .left .daterangepicker_input {
 220       padding-right: 12px; }
 221     .daterangepicker .calendar.left .calendar-table {
 222       padding-right: 12px; }
 223     .daterangepicker .ranges, .daterangepicker .calendar {
 224       float: left; } }
 225
 226 @media (min-width: 730px) {
 227   .daterangepicker .ranges {
 228     width: auto;
 229     float: left; }
 230   .daterangepicker .calendar.left {
 231     clear: none; } }
 232