1/*! 2 * Datetimepicker for Bootstrap 3 3 * version : 4.17.42 4 * https://github.com/Eonasdan/bootstrap-datetimepicker/ 5 */ 6@bs-datetimepicker-timepicker-font-size: 1.2em; 7@bs-datetimepicker-active-bg: @btn-primary-bg; 8@bs-datetimepicker-active-color: @btn-primary-color; 9@bs-datetimepicker-border-radius: @border-radius-base; 10@bs-datetimepicker-btn-hover-bg: @gray-lighter; 11@bs-datetimepicker-disabled-color: @gray-light; 12@bs-datetimepicker-alternate-color: @gray-light; 13@bs-datetimepicker-secondary-border-color: #ccc; 14@bs-datetimepicker-secondary-border-color-rgba: rgba(0, 0, 0, 0.2); 15@bs-datetimepicker-primary-border-color: white; 16@bs-datetimepicker-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 17 18.bootstrap-datetimepicker-widget { 19 list-style: none; 20 21 &.dropdown-menu { 22 margin: 2px 0; 23 padding: 4px; 24 width: 19em; 25 26 &.timepicker-sbs { 27 @media (min-width: @screen-sm-min) { 28 width: 38em; 29 } 30 31 @media (min-width: @screen-md-min) { 32 width: 38em; 33 } 34 35 @media (min-width: @screen-lg-min) { 36 width: 38em; 37 } 38 } 39 40 &:before, &:after { 41 content: ''; 42 display: inline-block; 43 position: absolute; 44 } 45 46 &.bottom { 47 &:before { 48 border-left: 7px solid transparent; 49 border-right: 7px solid transparent; 50 border-bottom: 7px solid @bs-datetimepicker-secondary-border-color; 51 border-bottom-color: @bs-datetimepicker-secondary-border-color-rgba; 52 top: -7px; 53 left: 7px; 54 } 55 56 &:after { 57 border-left: 6px solid transparent; 58 border-right: 6px solid transparent; 59 border-bottom: 6px solid @bs-datetimepicker-primary-border-color; 60 top: -6px; 61 left: 8px; 62 } 63 } 64 65 &.top { 66 &:before { 67 border-left: 7px solid transparent; 68 border-right: 7px solid transparent; 69 border-top: 7px solid @bs-datetimepicker-secondary-border-color; 70 border-top-color: @bs-datetimepicker-secondary-border-color-rgba; 71 bottom: -7px; 72 left: 6px; 73 } 74 75 &:after { 76 border-left: 6px solid transparent; 77 border-right: 6px solid transparent; 78 border-top: 6px solid @bs-datetimepicker-primary-border-color; 79 bottom: -6px; 80 left: 7px; 81 } 82 } 83 84 &.pull-right { 85 &:before { 86 left: auto; 87 right: 6px; 88 } 89 90 &:after { 91 left: auto; 92 right: 7px; 93 } 94 } 95 } 96 97 .list-unstyled { 98 margin: 0; 99 } 100 101 a[data-action] { 102 padding: 6px 0; 103 } 104 105 a[data-action]:active { 106 box-shadow: none; 107 } 108 109 .timepicker-hour, .timepicker-minute, .timepicker-second { 110 width: 54px; 111 font-weight: bold; 112 font-size: @bs-datetimepicker-timepicker-font-size; 113 margin: 0; 114 } 115 116 button[data-action] { 117 padding: 6px; 118 } 119 120 .btn[data-action="incrementHours"]::after { 121 .sr-only(); 122 content: "Increment Hours"; 123 } 124 125 .btn[data-action="incrementMinutes"]::after { 126 .sr-only(); 127 content: "Increment Minutes"; 128 } 129 130 .btn[data-action="decrementHours"]::after { 131 .sr-only(); 132 content: "Decrement Hours"; 133 } 134 135 .btn[data-action="decrementMinutes"]::after { 136 .sr-only(); 137 content: "Decrement Minutes"; 138 } 139 140 .btn[data-action="showHours"]::after { 141 .sr-only(); 142 content: "Show Hours"; 143 } 144 145 .btn[data-action="showMinutes"]::after { 146 .sr-only(); 147 content: "Show Minutes"; 148 } 149 150 .btn[data-action="togglePeriod"]::after { 151 .sr-only(); 152 content: "Toggle AM/PM"; 153 } 154 155 .btn[data-action="clear"]::after { 156 .sr-only(); 157 content: "Clear the picker"; 158 } 159 160 .btn[data-action="today"]::after { 161 .sr-only(); 162 content: "Set the date to today"; 163 } 164 165 .picker-switch { 166 text-align: center; 167 168 &::after { 169 .sr-only(); 170 content: "Toggle Date and Time Screens"; 171 } 172 173 td { 174 padding: 0; 175 margin: 0; 176 height: auto; 177 width: auto; 178 line-height: inherit; 179 180 span { 181 line-height: 2.5; 182 height: 2.5em; 183 width: 100%; 184 } 185 } 186 } 187 188 table { 189 width: 100%; 190 margin: 0; 191 192 193 & td, 194 & th { 195 text-align: center; 196 border-radius: @bs-datetimepicker-border-radius; 197 } 198 199 & th { 200 height: 20px; 201 line-height: 20px; 202 width: 20px; 203 204 &.picker-switch { 205 width: 145px; 206 } 207 208 &.disabled, 209 &.disabled:hover { 210 background: none; 211 color: @bs-datetimepicker-disabled-color; 212 cursor: not-allowed; 213 } 214 215 &.prev::after { 216 .sr-only(); 217 content: "Previous Month"; 218 } 219 220 &.next::after { 221 .sr-only(); 222 content: "Next Month"; 223 } 224 } 225 226 & thead tr:first-child th { 227 cursor: pointer; 228 229 &:hover { 230 background: @bs-datetimepicker-btn-hover-bg; 231 } 232 } 233 234 & td { 235 height: 54px; 236 line-height: 54px; 237 width: 54px; 238 239 &.cw { 240 font-size: .8em; 241 height: 20px; 242 line-height: 20px; 243 color: @bs-datetimepicker-alternate-color; 244 } 245 246 &.day { 247 height: 20px; 248 line-height: 20px; 249 width: 20px; 250 } 251 252 &.day:hover, 253 &.hour:hover, 254 &.minute:hover, 255 &.second:hover { 256 background: @bs-datetimepicker-btn-hover-bg; 257 cursor: pointer; 258 } 259 260 &.old, 261 &.new { 262 color: @bs-datetimepicker-alternate-color; 263 } 264 265 &.today { 266 position: relative; 267 268 &:before { 269 content: ''; 270 display: inline-block; 271 border: solid transparent; 272 border-width: 0 0 7px 7px; 273 border-bottom-color: @bs-datetimepicker-active-bg; 274 border-top-color: @bs-datetimepicker-secondary-border-color-rgba; 275 position: absolute; 276 bottom: 4px; 277 right: 4px; 278 } 279 } 280 281 &.active, 282 &.active:hover { 283 background-color: @bs-datetimepicker-active-bg; 284 color: @bs-datetimepicker-active-color; 285 text-shadow: @bs-datetimepicker-text-shadow; 286 } 287 288 &.active.today:before { 289 border-bottom-color: #fff; 290 } 291 292 &.disabled, 293 &.disabled:hover { 294 background: none; 295 color: @bs-datetimepicker-disabled-color; 296 cursor: not-allowed; 297 } 298 299 span { 300 display: inline-block; 301 width: 54px; 302 height: 54px; 303 line-height: 54px; 304 margin: 2px 1.5px; 305 cursor: pointer; 306 border-radius: @bs-datetimepicker-border-radius; 307 308 &:hover { 309 background: @bs-datetimepicker-btn-hover-bg; 310 } 311 312 &.active { 313 background-color: @bs-datetimepicker-active-bg; 314 color: @bs-datetimepicker-active-color; 315 text-shadow: @bs-datetimepicker-text-shadow; 316 } 317 318 &.old { 319 color: @bs-datetimepicker-alternate-color; 320 } 321 322 &.disabled, 323 &.disabled:hover { 324 background: none; 325 color: @bs-datetimepicker-disabled-color; 326 cursor: not-allowed; 327 } 328 } 329 } 330 } 331 332 &.usetwentyfour { 333 td.hour { 334 height: 27px; 335 line-height: 27px; 336 } 337 } 338 339 &.wider { 340 width: 21em; 341 } 342 343 & .datepicker-decades .decade { 344 line-height: 1.8em !important; 345 } 346} 347 348.input-group.date { 349 & .input-group-addon { 350 cursor: pointer; 351 } 352} 353