1/*! 2 * Stylesheet for the Date Range Picker, for use with Bootstrap 2.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 float: right; 23 margin: 4px; 24} 25 26.daterangepicker .ranges { 27 width: 160px; 28 text-align: left; 29} 30 31.daterangepicker .ranges .range_inputs>div { 32 float: left; 33} 34 35.daterangepicker .ranges .range_inputs>div:nth-child(2) { 36 padding-left: 11px; 37} 38 39.daterangepicker .calendar { 40 display: none; 41 max-width: 250px; 42} 43 44.daterangepicker .calendar th, .daterangepicker .calendar td { 45 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 46 white-space: nowrap; 47 text-align: center; 48} 49 50.daterangepicker .ranges label { 51 color: #333; 52 font-size: 11px; 53 margin-bottom: 2px; 54 text-transform: uppercase; 55 text-shadow: 1px 1px 0 #fff; 56} 57 58.daterangepicker .ranges input { 59 font-size: 11px; 60} 61 62.daterangepicker .ranges ul { 63 list-style: none; 64 margin: 0; 65 padding: 0; 66} 67 68.daterangepicker .ranges li { 69 font-size: 13px; 70 background: #f5f5f5; 71 border: 1px solid #f5f5f5; 72 color: #08c; 73 padding: 3px 12px; 74 margin-bottom: 8px; 75 -webkit-border-radius: 5px; 76 -moz-border-radius: 5px; 77 border-radius: 5px; 78 cursor: pointer; 79} 80 81.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { 82 background: #08c; 83 border: 1px solid #08c; 84 color: #fff; 85} 86 87.daterangepicker .calendar-date { 88 border: 1px solid #ddd; 89 padding: 4px; 90 border-radius: 4px; 91 background: #fff; 92} 93 94.daterangepicker .calendar-time { 95 text-align: center; 96 margin: 8px auto 0 auto; 97 line-height: 30px; 98} 99 100.daterangepicker { 101 position: absolute; 102 background: #fff; 103 top: 100px; 104 left: 20px; 105 padding: 4px; 106 margin-top: 1px; 107 -webkit-border-radius: 4px; 108 -moz-border-radius: 4px; 109 border-radius: 4px; 110} 111 112.daterangepicker.opensleft:before { 113 position: absolute; 114 top: -7px; 115 right: 9px; 116 display: inline-block; 117 border-right: 7px solid transparent; 118 border-bottom: 7px solid #ccc; 119 border-left: 7px solid transparent; 120 border-bottom-color: rgba(0, 0, 0, 0.2); 121 content: ''; 122} 123 124.daterangepicker.opensleft:after { 125 position: absolute; 126 top: -6px; 127 right: 10px; 128 display: inline-block; 129 border-right: 6px solid transparent; 130 border-bottom: 6px solid #fff; 131 border-left: 6px solid transparent; 132 content: ''; 133} 134 135.daterangepicker.opensright:before { 136 position: absolute; 137 top: -7px; 138 left: 9px; 139 display: inline-block; 140 border-right: 7px solid transparent; 141 border-bottom: 7px solid #ccc; 142 border-left: 7px solid transparent; 143 border-bottom-color: rgba(0, 0, 0, 0.2); 144 content: ''; 145} 146 147.daterangepicker.opensright:after { 148 position: absolute; 149 top: -6px; 150 left: 10px; 151 display: inline-block; 152 border-right: 6px solid transparent; 153 border-bottom: 6px solid #fff; 154 border-left: 6px solid transparent; 155 content: ''; 156} 157 158.daterangepicker table { 159 width: 100%; 160 margin: 0; 161} 162 163.daterangepicker td, .daterangepicker th { 164 text-align: center; 165 width: 20px; 166 height: 20px; 167 -webkit-border-radius: 4px; 168 -moz-border-radius: 4px; 169 border-radius: 4px; 170 cursor: pointer; 171 white-space: nowrap; 172} 173 174.daterangepicker td.off { 175 color: #999; 176} 177 178.daterangepicker td.disabled { 179 color: #999; 180} 181 182.daterangepicker td.available:hover, .daterangepicker th.available:hover { 183 background: #eee; 184} 185 186.daterangepicker td.in-range { 187 background: #ebf4f8; 188 -webkit-border-radius: 0; 189 -moz-border-radius: 0; 190 border-radius: 0; 191} 192 193.daterangepicker td.active, .daterangepicker td.active:hover { 194 background-color: #006dcc; 195 background-image: -moz-linear-gradient(top, #0088cc, #0044cc); 196 background-image: -ms-linear-gradient(top, #0088cc, #0044cc); 197 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); 198 background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); 199 background-image: -o-linear-gradient(top, #0088cc, #0044cc); 200 background-image: linear-gradient(top, #0088cc, #0044cc); 201 background-repeat: repeat-x; 202 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0); 203 border-color: #0044cc #0044cc #002a80; 204 border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 205 filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 206 color: #fff; 207 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 208} 209 210.daterangepicker td.week, .daterangepicker th.week { 211 font-size: 80%; 212 color: #ccc; 213} 214 215.daterangepicker select.monthselect, .daterangepicker select.yearselect { 216 font-size: 12px; 217 padding: 1px; 218 height: auto; 219 margin: 0; 220 cursor: default; 221} 222 223.daterangepicker select.monthselect { 224 margin-right: 2%; 225 width: 56%; 226} 227 228.daterangepicker select.yearselect { 229 width: 40%; 230} 231 232.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect { 233 width: 60px; 234 margin-bottom: 0; 235} 236