1 | @import 'utils/scss/variables';
|
2 | @import 'utils/scss/mixins';
|
3 |
|
4 |
|
5 | .bs-datepicker {
|
6 | display: flex;
|
7 | align-items: stretch;
|
8 | flex-flow: row wrap;
|
9 | background: $main-bg;
|
10 | box-shadow: 0 0 10px 0 $main-box-shadow;
|
11 | position: relative;
|
12 | z-index: 1;
|
13 |
|
14 | &:after {
|
15 | clear: both;
|
16 | content: '';
|
17 | display: block;
|
18 | }
|
19 |
|
20 | bs-day-picker {
|
21 | float: left;
|
22 | }
|
23 |
|
24 |
|
25 | button:hover,
|
26 | button:focus,
|
27 | button:active,
|
28 | input:hover,
|
29 | input:focus,
|
30 | input:active,
|
31 | &-btns button:hover,
|
32 | &-btns button:focus,
|
33 | &-btns button:active,
|
34 | &-predefined-btns button:active,
|
35 | &-predefined-btns button:focus {
|
36 | outline: none;
|
37 | }
|
38 |
|
39 |
|
40 | &-head {
|
41 | min-width: 270px;
|
42 | height: 50px;
|
43 | padding: 10px;
|
44 | border-radius: 3px 3px 0 0;
|
45 | text-align: justify;
|
46 |
|
47 | &:after {
|
48 | content: "";
|
49 | display: inline-block;
|
50 | vertical-align: top;
|
51 | width: 100%;
|
52 | }
|
53 |
|
54 |
|
55 | button {
|
56 | display: inline-block;
|
57 | vertical-align: top;
|
58 | padding: 0;
|
59 | height: 30px;
|
60 | line-height: 30px;
|
61 | border: 0;
|
62 | background: transparent;
|
63 | text-align: center;
|
64 | cursor: pointer;
|
65 | color: $font-color-01;
|
66 | transition: 0.3s;
|
67 |
|
68 | &[disabled],
|
69 | &[disabled]:hover,
|
70 | &[disabled]:active {
|
71 | background: $disabled-background;
|
72 | color: $disabled-color;
|
73 | cursor: not-allowed;
|
74 | }
|
75 |
|
76 | &.previous {
|
77 | span {
|
78 | transform: translate(-1px, -1px);
|
79 | }
|
80 | }
|
81 |
|
82 | &.next {
|
83 | span {
|
84 | transform: translate(1px, -1px);
|
85 | }
|
86 | }
|
87 |
|
88 | &.next,
|
89 | &.previous {
|
90 | border-radius: 50%;
|
91 | width: 30px;
|
92 | height: 30px;
|
93 |
|
94 | span {
|
95 | font-size: 28px;
|
96 | line-height: 1;
|
97 | display: inline-block;
|
98 | position: relative;
|
99 | height: 100%;
|
100 | width: 100%;
|
101 | border-radius: 50%;
|
102 | }
|
103 | }
|
104 |
|
105 | &.current {
|
106 | border-radius: 15px;
|
107 | max-width: 155px;
|
108 | padding: 0 13px;
|
109 | }
|
110 | }
|
111 | }
|
112 |
|
113 | &-head {
|
114 | button {
|
115 | &:hover {
|
116 | background-color: rgba(0, 0, 0, 0.1);
|
117 | }
|
118 | &:active {
|
119 | background-color: rgba(0, 0, 0, 0.2);
|
120 | }
|
121 | }
|
122 | }
|
123 |
|
124 |
|
125 | &-body {
|
126 | padding: 10px;
|
127 | border-radius: 0 0 3px 3px;
|
128 | min-height: 232px;
|
129 | min-width: 278px;
|
130 | border: 1px solid $border-color;
|
131 |
|
132 | .days.weeks {
|
133 | position: relative;
|
134 | z-index: 1;
|
135 | }
|
136 |
|
137 |
|
138 | table {
|
139 | width: 100%;
|
140 | border-collapse: separate;
|
141 | border-spacing: 0;
|
142 |
|
143 | th {
|
144 | font-size: 13px;
|
145 | color: $font-color-02;
|
146 | font-weight: 400;
|
147 | text-align: center;
|
148 | }
|
149 |
|
150 | td {
|
151 | color: $font-color-03;
|
152 | text-align: center;
|
153 | position: relative;
|
154 | padding: 0;
|
155 |
|
156 | span {
|
157 | display: block;
|
158 | margin: 0 auto;
|
159 | font-size: 13px;
|
160 | border-radius: 50%;
|
161 |
|
162 | -moz-user-select: none;
|
163 | -webkit-user-select: none;
|
164 | -ms-user-select: none;
|
165 | }
|
166 |
|
167 |
|
168 | &:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) {
|
169 | cursor: pointer;
|
170 | }
|
171 |
|
172 | &.is-highlighted:not(.disabled):not(.selected) span,
|
173 | span.is-highlighted:not(.disabled):not(.selected) {
|
174 | background-color: $highlighted;
|
175 | transition: 0s;
|
176 | }
|
177 |
|
178 | &.is-active-other-month:not(.disabled):not(.selected) span,
|
179 | span.is-active-other-month:not(.disabled):not(.selected) {
|
180 | background-color: $highlighted;
|
181 | transition: 0s;
|
182 | cursor: pointer;
|
183 | }
|
184 |
|
185 | span.disabled,
|
186 | &.disabled span {
|
187 | color: $font-color-02;
|
188 | }
|
189 |
|
190 | span.selected,
|
191 | &.selected span {
|
192 | color: $font-color-01;
|
193 | }
|
194 |
|
195 | span.is-other-month,
|
196 | &.is-other-month span {
|
197 | color: rgba(0, 0, 0, 0.25);
|
198 | }
|
199 |
|
200 | &.active {
|
201 | position: relative;
|
202 |
|
203 | &.select-start:before {
|
204 | left: 35%;
|
205 | }
|
206 |
|
207 | &.select-end:before {
|
208 | left: -85%;
|
209 | }
|
210 | }
|
211 |
|
212 | span.active.select-start:after,
|
213 | span.active.select-end:after,
|
214 | &.active.select-start span:after,
|
215 | &.active.select-end span:after {
|
216 | content: "";
|
217 | display: block;
|
218 | position: absolute;
|
219 | z-index: -1;
|
220 | width: 100%;
|
221 | height: 100%;
|
222 | transition: 0.3s;
|
223 | top: 0;
|
224 | border-radius: 50%;
|
225 | }
|
226 |
|
227 | &:before,
|
228 | span:before {
|
229 | content: "";
|
230 | display: block;
|
231 | position: absolute;
|
232 | z-index: -1;
|
233 | top: 6px;
|
234 | bottom: 6px;
|
235 | left: -3px;
|
236 | right: -2px;
|
237 | box-sizing: content-box;
|
238 | background: transparent;
|
239 | }
|
240 |
|
241 | &.active.select-start + td.active:before {
|
242 | left: -20%;
|
243 | }
|
244 |
|
245 | &:last-child.active:before {
|
246 | border-radius: 0 3px 3px 0;
|
247 | width: 125%;
|
248 | left: -25%;
|
249 | }
|
250 |
|
251 | span[class*="select-"],
|
252 | &[class*="select-"] span {
|
253 | border-radius: 50%;
|
254 | color: $font-color-01;
|
255 | }
|
256 | }
|
257 |
|
258 |
|
259 | &.days {
|
260 | td,
|
261 | span {
|
262 | &.active:not(.select-start):before,
|
263 | &.in-range:not(.select-start):before {
|
264 | background: $highlighted;
|
265 | }
|
266 | }
|
267 |
|
268 | span {
|
269 | width: 32px;
|
270 | height: 32px;
|
271 | line-height: 32px;
|
272 |
|
273 | &.select-start {
|
274 | z-index: 2;
|
275 | }
|
276 | &.is-highlighted.in-range:before {
|
277 | right: 3px;
|
278 | left: 0;
|
279 | }
|
280 | &.in-range.select-end:before {
|
281 | right: 4px;
|
282 | left: 0;
|
283 | }
|
284 | }
|
285 |
|
286 | td {
|
287 | &.select-start + td.select-end:before,
|
288 | &.select-start + td.is-highlighted:before,
|
289 | &.active + td.is-highlighted:before,
|
290 | &.active + td.select-end:before,
|
291 | &.in-range + td.is-highlighted:before,
|
292 | &.in-range + td.select-end:before {
|
293 | background: $highlighted;
|
294 | width: 100%;
|
295 | }
|
296 | }
|
297 | }
|
298 |
|
299 |
|
300 | &.weeks {
|
301 | tr {
|
302 | td {
|
303 | &:nth-child(2).active:before {
|
304 | border-radius: 3px 0 0 3px;
|
305 | left: 0;
|
306 | width: 100%;
|
307 | }
|
308 | }
|
309 | }
|
310 | }
|
311 |
|
312 | &:not(.weeks) {
|
313 | tr {
|
314 | td{
|
315 | &:first-child:before {
|
316 | border-radius: 3px 0 0 3px;
|
317 | }
|
318 | }
|
319 | }
|
320 | }
|
321 |
|
322 | &.years {
|
323 | td {
|
324 | span {
|
325 | width: 46px;
|
326 | height: 46px;
|
327 | line-height: 45px;
|
328 | margin: 0 auto;
|
329 | }
|
330 | }
|
331 |
|
332 | tr:not(:last-child) {
|
333 | td {
|
334 | span {
|
335 | margin-bottom: 8px;
|
336 | }
|
337 | }
|
338 | }
|
339 | }
|
340 |
|
341 | &.months {
|
342 | td {
|
343 | height: 52px;
|
344 |
|
345 | span {
|
346 | padding: 6px;
|
347 | border-radius: 15px;
|
348 | }
|
349 | }
|
350 | }
|
351 | }
|
352 | }
|
353 |
|
354 |
|
355 | .current-timedate {
|
356 | color: $font-color-03;
|
357 | font-size: 15px;
|
358 | text-align: center;
|
359 | height: 30px;
|
360 | line-height: 30px;
|
361 | border-radius: 20px;
|
362 | border: 1px solid $border-color;
|
363 | margin-bottom: 10px;
|
364 | cursor: pointer;
|
365 | text-transform: uppercase;
|
366 | -moz-user-select: none;
|
367 | -webkit-user-select: none;
|
368 | -ms-user-select: none;
|
369 |
|
370 | span:not(:empty):before {
|
371 | content: "";
|
372 | width: 15px;
|
373 | height: 16px;
|
374 | display: inline-block;
|
375 | margin-right: 4px;
|
376 | vertical-align: text-bottom;
|
377 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC);
|
378 | }
|
379 | }
|
380 |
|
381 |
|
382 | &-multiple {
|
383 | border-radius: 4px 0 0 4px;
|
384 |
|
385 | & + & {
|
386 | margin-left: 10px;
|
387 | }
|
388 |
|
389 | .bs-datepicker {
|
390 | box-shadow: none;
|
391 | position: relative;
|
392 |
|
393 | &:not(:last-child) {
|
394 | padding-right: 10px;
|
395 | }
|
396 |
|
397 | & + .bs-datepicker:after {
|
398 | content: "";
|
399 | display: block;
|
400 | width: 14px;
|
401 | height: 10px;
|
402 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW
|
403 | position: absolute;
|
404 | top: 25px;
|
405 | left: -8px;
|
406 | }
|
407 |
|
408 | .left {
|
409 | float: left;
|
410 | }
|
411 |
|
412 | .right {
|
413 | float: right;
|
414 | }
|
415 | }
|
416 | }
|
417 |
|
418 |
|
419 | &-container {
|
420 | padding: 15px;
|
421 | }
|
422 |
|
423 | .bs-media-container {
|
424 | display: flex;
|
425 | @media(max-width: 768px) {
|
426 | flex-direction: column;
|
427 | }
|
428 | }
|
429 |
|
430 | .bs-timepicker-in-datepicker-container {
|
431 | display: flex;
|
432 | justify-content: space-around;
|
433 | }
|
434 |
|
435 |
|
436 | &-custom-range {
|
437 | padding: 15px;
|
438 | background: $custom-range-bg;
|
439 | }
|
440 |
|
441 |
|
442 | &-predefined-btns {
|
443 | button {
|
444 | width: 100%;
|
445 | display: block;
|
446 | height: 30px;
|
447 | background-color: $btn-bg2;
|
448 | border-radius: 4px;
|
449 | color: $font-color-01;
|
450 | border: 0;
|
451 | margin-bottom: 10px;
|
452 | padding: 0 18px;
|
453 | text-align: left;
|
454 | transition: 0.3s;
|
455 |
|
456 | &:hover {
|
457 | background-color: $btn-bg2-hover;
|
458 | }
|
459 | }
|
460 | }
|
461 |
|
462 |
|
463 | &-buttons {
|
464 | display: flex;
|
465 | flex-flow: row wrap;
|
466 | justify-content: flex-end;
|
467 | padding-top: 10px;
|
468 | border-top: 1px solid $border-color;
|
469 |
|
470 | .btn-default {
|
471 | margin-left: 10px;
|
472 | }
|
473 |
|
474 | .btn-today-wrapper {
|
475 | display: flex;
|
476 | flex-flow: row wrap;
|
477 | }
|
478 |
|
479 | .clear-right,
|
480 | .today-right {
|
481 | flex-grow: 0;
|
482 | }
|
483 | .clear-left,
|
484 | .today-left {
|
485 | flex-grow: 1;
|
486 | }
|
487 |
|
488 | .clear-center,
|
489 | .today-center {
|
490 | flex-grow: 0.5;
|
491 | }
|
492 | }
|
493 | }
|
494 |
|
495 |
|
496 | .bs-timepicker {
|
497 | &-container {
|
498 | padding: 10px 0;
|
499 | }
|
500 |
|
501 | &-label {
|
502 | color: $font-color-03;
|
503 | margin-bottom: 10px;
|
504 | }
|
505 |
|
506 | &-controls {
|
507 | display: inline-block;
|
508 | vertical-align: top;
|
509 | margin-right: 10px;
|
510 |
|
511 | button {
|
512 | width: 20px;
|
513 | height: 20px;
|
514 | border-radius: 50%;
|
515 | border: 0;
|
516 | background-color: $btn-bg;
|
517 | color: $font-color-03;
|
518 | font-size: 16px;
|
519 | font-weight: 700;
|
520 | vertical-align: middle;
|
521 | line-height: 0;
|
522 | padding: 0;
|
523 | transition: 0.3s;
|
524 |
|
525 | &:hover {
|
526 | background-color: $btn-bg-hover;
|
527 | }
|
528 | }
|
529 |
|
530 | input {
|
531 | width: 35px;
|
532 | height: 25px;
|
533 | border-radius: 13px;
|
534 | text-align: center;
|
535 | border: 1px solid $border-color;
|
536 | }
|
537 | }
|
538 |
|
539 | .switch-time-format {
|
540 | text-transform: uppercase;
|
541 | min-width: 54px;
|
542 | height: 25px;
|
543 | border-radius: 20px;
|
544 | border: 1px solid $border-color;
|
545 | background: $main-bg;
|
546 | color: $font-color-03;
|
547 | font-size: 13px;
|
548 |
|
549 | img {
|
550 | vertical-align: initial;
|
551 | margin-left: 4px;
|
552 | }
|
553 | }
|
554 | }
|
555 |
|
556 | bs-datepicker-container,
|
557 | bs-daterangepicker-container {
|
558 | z-index: 1080;
|
559 | }
|
560 |
|
561 |
|
562 | @media (max-width: 768px) {
|
563 | .bs-datepicker {
|
564 | width: min-content;
|
565 | justify-content: center;
|
566 |
|
567 | &-multiple {
|
568 | display: flex;
|
569 |
|
570 | & + & {
|
571 | margin-top: 10px;
|
572 | margin-left: 0;
|
573 | }
|
574 | }
|
575 | }
|
576 | }
|
577 |
|
578 |
|
579 | @each $name, $color in $theme-list {
|
580 | @include theming($name, $color);
|
581 | }
|