PluginProbe
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5
BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5
4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.2 4.8.1 4.8.0 4.7.0 4.6.2 4.6.1 4.6.0 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.1 4.4.0 3.3.4 3.4.0 3.4.1 All 203 releases
betterdocs / react-src / admin / analytics / scss / _datePicker.scss

_datePicker.scss in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/admin/analytics/scss/_datePicker.scss

663 lines 15.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .btd-chart-date-filter {
2 .btd-datePicker-icon {
3 display: flex;
4 align-items: center;
5 svg,
6 img,
7 object {
8 width: 15px;
9 display: flex;
10 fill: var(--text-color-600);
11 &:not(:last-child) {
12 margin-right: 8px;
13 }
14 }
15 }
16
17 .btd-list-view-calendar {
18 height: 40px;
19 border-radius: 3px;
20 display: inline-flex;
21 align-items: center;
22 text-align: center;
23 background: var(--base-background);
24 border: 1px solid var(--text-color-150);
25 color: var(--text-color-900);
26 padding: 4px 12px;
27 margin-right: 10px;
28 box-sizing: border-box;
29 cursor: pointer;
30 }
31 }
32
33 .btd-date-range-picker-wrap {
34 position: fixed;
35 top: 0;
36 bottom: 0;
37 left: 0;
38 right: 0;
39 z-index: 9999;
40 display: flex;
41 justify-content: center;
42 text-align: center;
43 padding: 50px;
44 overflow-x: hidden;
45 overflow-y: auto;
46 .btd-date-range-picker {
47 position: relative;
48 display: inline-block;
49 border-radius: 6px;
50 margin: auto;
51 .btn-date-range-close {
52 position: absolute;
53 top: 0;
54 right: 0;
55 z-index: 999;
56 border: 0;
57 background: transparent;
58 outline: none;
59 color: var(--text-color-600);
60 padding: 5px 5px;
61 cursor: pointer;
62 }
63 .rdrDateRangePickerWrapper .rdrInputRanges {
64 display: none;
65 }
66 }
67 }
68
69 .btd-overlay {
70 position: fixed;
71 top: 0;
72 right: 0;
73 bottom: 0;
74 left: 0;
75 background-color: #000;
76 z-index: 99;
77 opacity: 0.65;
78 }
79
80 .rdrCalendarWrapper {
81 box-sizing: border-box;
82 background: var(--base-background);
83 display: -webkit-inline-box;
84 display: inline-flex;
85 -webkit-box-orient: vertical;
86 -webkit-box-direction: normal;
87 flex-direction: column;
88 -webkit-user-select: none;
89 -moz-user-select: none;
90 -ms-user-select: none;
91 user-select: none;
92 }
93 .rdrDateDisplay {
94 display: -webkit-box;
95 display: flex;
96 -webkit-box-pack: justify;
97 justify-content: space-between;
98 }
99 .rdrDateDisplayItem {
100 -webkit-box-flex: 1;
101 flex: 1 1;
102 width: 0;
103 text-align: center;
104 color: inherit;
105 }
106 .rdrDateDisplayItem + .rdrDateDisplayItem {
107 margin-left: 0.833em;
108 }
109 .rdrDateDisplayItem input {
110 text-align: inherit;
111 }
112 .rdrDateDisplayItem input:disabled {
113 cursor: default;
114 }
115 .rdrMonthAndYearWrapper {
116 box-sizing: inherit;
117 display: -webkit-box;
118 display: flex;
119 -webkit-box-pack: justify;
120 justify-content: space-between;
121 }
122 .rdrMonthAndYearPickers {
123 -webkit-box-flex: 1;
124 flex: 1 1 auto;
125 display: -webkit-box;
126 display: flex;
127 -webkit-box-pack: center;
128 justify-content: center;
129 -webkit-box-align: center;
130 align-items: center;
131 }
132 .rdrNextPrevButton {
133 box-sizing: inherit;
134 cursor: pointer;
135 outline: none;
136 }
137 .rdrMonths {
138 display: -webkit-box;
139 display: flex;
140 }
141 .rdrMonthsVertical {
142 -webkit-box-orient: vertical;
143 -webkit-box-direction: normal;
144 flex-direction: column;
145 }
146 .rdrMonthsHorizontal > div > div > div {
147 display: -webkit-box;
148 display: flex;
149 -webkit-box-orient: horizontal;
150 -webkit-box-direction: normal;
151 flex-direction: row;
152 }
153 .rdrMonth {
154 width: 27.667em;
155 }
156 .rdrWeekDays {
157 display: -webkit-box;
158 display: flex;
159 }
160 .rdrWeekDay {
161 flex-basis: calc(100% / 7);
162 box-sizing: inherit;
163 text-align: center;
164 }
165 .rdrDays {
166 display: -webkit-box;
167 display: flex;
168 flex-wrap: wrap;
169 }
170 .rdrInfiniteMonths {
171 overflow: auto;
172 }
173 .rdrDateRangeWrapper {
174 -webkit-user-select: none;
175 -moz-user-select: none;
176 -ms-user-select: none;
177 user-select: none;
178 }
179 .rdrDateInput {
180 position: relative;
181 }
182 .rdrDateInput input {
183 outline: none;
184 }
185 .rdrDateInput .rdrWarning {
186 position: absolute;
187 font-size: 1.6em;
188 line-height: 1.6em;
189 top: 0;
190 right: 0.25em;
191 color: var(--danger-700);
192 }
193 .rdrDay {
194 box-sizing: inherit;
195 width: calc(100% / 7);
196 position: relative;
197 font: inherit;
198 cursor: pointer;
199 }
200 .rdrDayNumber {
201 display: block;
202 position: relative;
203 }
204 .rdrDayNumber span {
205 color: var(--text-color-900);
206 }
207 .rdrDayDisabled {
208 cursor: not-allowed;
209 }
210 @supports (-ms-ime-align: auto) {
211 .rdrDay {
212 flex-basis: 14.285% !important;
213 }
214 }
215 .rdrSelected,
216 .rdrInRange,
217 .rdrStartEdge,
218 .rdrEndEdge {
219 pointer-events: none;
220 }
221 .rdrDayStartPreview,
222 .rdrDayInPreview,
223 .rdrDayEndPreview {
224 pointer-events: none;
225 }
226 .rdrDateRangePickerWrapper {
227 display: -webkit-inline-box;
228 display: inline-flex;
229 -webkit-user-select: none;
230 -moz-user-select: none;
231 -ms-user-select: none;
232 user-select: none;
233 }
234 .rdrStaticRanges {
235 display: -webkit-box;
236 display: flex;
237 -webkit-box-orient: vertical;
238 -webkit-box-direction: normal;
239 flex-direction: column;
240 }
241 .rdrStaticRange {
242 font-size: inherit;
243 }
244 .rdrInputRange {
245 display: -webkit-box;
246 display: flex;
247 }
248 .rdrCalendarWrapper {
249 color: var(--text-color-900);
250 font-size: 12px;
251 padding: 30px;
252 border-top-right-radius: 6px;
253 border-bottom-right-radius: 6px;
254 }
255 .rdrDateDisplayWrapper {
256 background: transparent;
257 }
258 .rdrDateDisplay {
259 margin: 0;
260 }
261 .rdrDateDisplayItem {
262 border-radius: 4px;
263 background-color: var(--text-color-150);
264 box-shadow: 0 1px 2px 0 var(--text-color-150);
265 color: var(--base-color-700);
266 border: 1px solid transparent;
267 text-align: start;
268 }
269 .rdrDateDisplayItem input {
270 cursor: pointer;
271 height: 2.5em;
272 line-height: 2.5em;
273 border: 0px;
274 background: transparent;
275 width: 100%;
276 color: var(--text-color-900);
277 padding: 5px 20px;
278 font-weight: 700;
279 font-size: 12px;
280 height: 38px;
281 }
282 .rdrDateDisplayItemActive {
283 border-color: currentColor;
284 }
285 .rdrDateDisplayItemActive input {
286 color: var(--text-color-900);
287 }
288 .rdrMonthAndYearWrapper {
289 -webkit-box-align: center;
290 align-items: center;
291 height: 60px;
292 padding-top: 10px;
293 }
294 .rdrMonthAndYearPickers {
295 font-weight: 600;
296 }
297 .rdrMonthAndYearPickers select {
298 -moz-appearance: none;
299 appearance: none;
300 -webkit-appearance: none;
301 border: 0;
302 background: transparent;
303 padding: 10px 30px 10px 10px;
304 border-radius: 4px;
305 outline: 0;
306 color: var(--text-color-600);
307 background: url("data:image/svg+xml;utf8,<svg width='9px' height='6px' viewBox='0 0 9 6' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(-636.000000, -171.000000)' fill-opacity='0.368716033'><g id='input' transform='translate(172.000000, 37.000000)' fill='%230E242F' fill-rule='nonzero'><g id='Group-9' transform='translate(323.000000, 127.000000)'><path d='M142.280245,7.23952813 C141.987305,6.92353472 141.512432,6.92361662 141.219585,7.23971106 C140.926739,7.5558055 140.926815,8.06821394 141.219755,8.38420735 L145.498801,13 L149.780245,8.38162071 C150.073185,8.0656273 150.073261,7.55321886 149.780415,7.23712442 C149.487568,6.92102998 149.012695,6.92094808 148.719755,7.23694149 L145.498801,10.7113732 L142.280245,7.23952813 Z' id='arrow'></path></g></g></g></svg>")
308 no-repeat;
309 background-position: right 8px center;
310 cursor: pointer;
311 text-align: center;
312 }
313 .rdrMonthAndYearPickers select:hover {
314 background-color: rgba(0, 0, 0, 0.07);
315 }
316 .rdrMonthPicker,
317 .rdrYearPicker {
318 margin: 0 5px;
319 }
320 .rdrNextPrevButton {
321 display: block;
322 width: 24px;
323 height: 24px;
324 margin: 0 0.833em;
325 padding: 0;
326 border: 0;
327 border-radius: 5px;
328 background: transparent;
329 border: 1px solid;
330 @include set-mode(
331 border-color,
332 var(--text-color-200),
333 var(--base-color-50),
334 true
335 );
336 }
337 .rdrNextPrevButton:hover {
338 @include set-mode(
339 background,
340 var(--text-color-200),
341 var(--base-color-50),
342 true
343 );
344 }
345 .rdrNextPrevButton i {
346 display: block;
347 width: 0;
348 height: 0;
349 padding: 0;
350 text-align: center;
351 border-style: solid;
352 margin: auto;
353 -webkit-transform: translate(-3px, 0px);
354 transform: translate(-3px, 0px);
355 }
356 .rdrPprevButton i {
357 border-width: 4px 6px 4px 4px;
358 border-color: transparent var(--base-color-700) transparent transparent;
359 -webkit-transform: translate(-3px, 0px);
360 transform: translate(-3px, 0px);
361 }
362 .rdrNextButton i {
363 margin: 0 0 0 7px;
364 border-width: 4px 4px 4px 6px;
365 border-color: transparent transparent transparent var(--base-color-700);
366 -webkit-transform: translate(3px, 0px);
367 transform: translate(3px, 0px);
368 }
369 .rdrWeekDays {
370 padding: 0 0.833em;
371 }
372 .rdrMonth {
373 padding: 0 0.833em 1.666em 0.833em;
374 }
375 .rdrMonth .rdrWeekDays {
376 padding: 0;
377 }
378 .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName {
379 display: none;
380 }
381 .rdrWeekDay {
382 font-weight: 400;
383 line-height: 2.667em;
384 color: var(--text-color-500);
385 }
386 .rdrDay {
387 background: transparent;
388 -webkit-user-select: none;
389 -moz-user-select: none;
390 -ms-user-select: none;
391 user-select: none;
392 border: 0;
393 padding: 0;
394 line-height: 3em;
395 height: 3em;
396 text-align: center;
397 color: var(--text-color-900);
398 }
399 .rdrDay:focus {
400 outline: 0;
401 }
402 .rdrDayNumber {
403 outline: 0;
404 font-weight: 300;
405 position: absolute;
406 left: 0;
407 right: 0;
408 top: 0;
409 bottom: 0;
410 top: 5px;
411 bottom: 5px;
412 display: -webkit-box;
413 display: flex;
414 -webkit-box-align: center;
415 align-items: center;
416 -webkit-box-pack: center;
417 justify-content: center;
418 }
419 .rdrDayToday .rdrDayNumber span {
420 font-weight: 500;
421 }
422 .rdrDayToday .rdrDayNumber span:after {
423 content: "";
424 position: absolute;
425 bottom: 4px;
426 left: 50%;
427 -webkit-transform: translate(-50%, 0);
428 transform: translate(-50%, 0);
429 width: 18px;
430 height: 2px;
431 border-radius: 2px;
432 background: var(--base-color-700);
433 }
434 .rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,
435 .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,
436 .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,
437 .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after {
438 background: var(--base-background);
439 }
440 .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,
441 .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,
442 .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,
443 .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span {
444 color: #fff;
445 }
446 .rdrSelected,
447 .rdrInRange,
448 .rdrStartEdge,
449 .rdrEndEdge {
450 background: currentColor;
451 position: absolute;
452 top: 5px;
453 left: 0;
454 right: 0;
455 bottom: 5px;
456 }
457 .rdrSelected {
458 left: 2px;
459 right: 2px;
460 }
461 .rdrStartEdge {
462 border-top-left-radius: 6px;
463 border-bottom-left-radius: 6px;
464 left: 2px;
465 }
466 .rdrEndEdge {
467 border-top-right-radius: 6px;
468 border-bottom-right-radius: 6px;
469 right: 2px;
470 }
471 .rdrSelected {
472 border-radius: 6px;
473 }
474 .rdrDayStartOfMonth .rdrInRange,
475 .rdrDayStartOfMonth .rdrEndEdge,
476 .rdrDayStartOfWeek .rdrInRange,
477 .rdrDayStartOfWeek .rdrEndEdge {
478 border-top-left-radius: 6px;
479 border-bottom-left-radius: 6px;
480 left: 2px;
481 }
482 .rdrDayEndOfMonth .rdrInRange,
483 .rdrDayEndOfMonth .rdrStartEdge,
484 .rdrDayEndOfWeek .rdrInRange,
485 .rdrDayEndOfWeek .rdrStartEdge {
486 border-top-right-radius: 6px;
487 border-bottom-right-radius: 6px;
488 right: 2px;
489 }
490 .rdrDayStartOfMonth .rdrDayInPreview,
491 .rdrDayStartOfMonth .rdrDayEndPreview,
492 .rdrDayStartOfWeek .rdrDayInPreview,
493 .rdrDayStartOfWeek .rdrDayEndPreview {
494 border-top-left-radius: 6px;
495 border-bottom-left-radius: 6px;
496 border-left-width: 1px;
497 left: 0px;
498 }
499 .rdrDayEndOfMonth .rdrDayInPreview,
500 .rdrDayEndOfMonth .rdrDayStartPreview,
501 .rdrDayEndOfWeek .rdrDayInPreview,
502 .rdrDayEndOfWeek .rdrDayStartPreview {
503 border-top-right-radius: 6px;
504 border-bottom-right-radius: 6px;
505 border-right-width: 1px;
506 right: 0px;
507 }
508 .rdrDayStartPreview,
509 .rdrDayInPreview,
510 .rdrDayEndPreview {
511 background: rgba(255, 255, 255, 0.09);
512 position: absolute;
513 top: 3px;
514 left: 0px;
515 right: 0px;
516 bottom: 3px;
517 pointer-events: none;
518 border: 0px solid currentColor;
519 z-index: 1;
520 }
521 .rdrDayStartPreview {
522 border-top-width: 1px;
523 border-left-width: 1px;
524 border-bottom-width: 1px;
525 border-top-left-radius: 6px;
526 border-bottom-left-radius: 6px;
527 left: 0px;
528 }
529 .rdrDayInPreview {
530 border-top-width: 1px;
531 border-bottom-width: 1px;
532 }
533 .rdrDayEndPreview {
534 border-top-width: 1px;
535 border-right-width: 1px;
536 border-bottom-width: 1px;
537 border-top-right-radius: 6px;
538 border-bottom-right-radius: 6px;
539 right: 2px;
540 right: 0px;
541 }
542 .rdrDefinedRangesWrapper {
543 font-size: 12px;
544 width: 226px;
545 border-right: solid 1px var(--text-color-150);
546 background: var(--base-background);
547 width: 140px;
548 border-top-left-radius: 6px;
549 border-bottom-left-radius: 6px;
550 padding: 10px 0;
551 }
552 .rdrDefinedRangesWrapper {
553 .rdrStaticRangeLabel {
554 color: var(--text-color-900);
555 }
556 .rdrStaticRangeSelected {
557 color: currentColor;
558 font-weight: 600;
559 border-right: 1px solid var(--base-color-700);
560 .rdrStaticRangeLabel {
561 background: var(--text-color-150);
562 }
563 }
564 }
565 .rdrStaticRange {
566 border: none;
567 font-weight: 700;
568 cursor: pointer;
569 display: block;
570 outline: 0;
571 padding: 0;
572 background: var(--base-background);
573 }
574 .rdrStaticRange:hover .rdrStaticRangeLabel,
575 .rdrStaticRange:focus .rdrStaticRangeLabel {
576 background: var(--text-color-150);
577 }
578 .rdrStaticRangeLabel {
579 display: block;
580 outline: 0;
581 line-height: 18px;
582 padding: 10px 20px;
583 text-align: left;
584 }
585 .rdrInputRanges {
586 padding: 10px 0;
587 }
588 .rdrInputRange {
589 -webkit-box-align: center;
590 align-items: center;
591 padding: 5px 20px;
592 span {
593 color: var(--text-color-900);
594 }
595 }
596 .rdrInputRangeInput {
597 width: 30px;
598 height: 30px;
599 line-height: 30px;
600 border-radius: 4px;
601 text-align: center;
602 border: 1px solid var(--text-color-150);
603 background: var(--text-color-150);
604 margin-right: 10px;
605 color: var(--text-color-700);
606 }
607 .rdrInputRangeInput:focus,
608 .rdrInputRangeInput:hover {
609 border-color: var(--text-color-500);
610 outline: 0;
611 color: var(--text-color-900);
612 }
613 .rdrCalendarWrapper:not(.rdrDateRangeWrapper)
614 .rdrDayHovered
615 .rdrDayNumber:after {
616 content: "";
617 border: 1px solid currentColor;
618 border-radius: 6px;
619 position: absolute;
620 top: -2px;
621 bottom: -2px;
622 left: 0px;
623 right: 0px;
624 background: transparent;
625 }
626 .rdrDayPassive {
627 pointer-events: none;
628 }
629 .rdrDayPassive .rdrDayNumber span {
630 @include set-mode(color, var(--text-color-500), #98a2b3, true);
631 }
632 .rdrDayPassive .rdrInRange,
633 .rdrDayPassive .rdrStartEdge,
634 .rdrDayPassive .rdrEndEdge,
635 .rdrDayPassive .rdrSelected,
636 .rdrDayPassive .rdrDayStartPreview,
637 .rdrDayPassive .rdrDayInPreview,
638 .rdrDayPassive .rdrDayEndPreview {
639 display: none;
640 }
641 .rdrDayDisabled {
642 background-color: var(--text-color-150);
643 }
644 .rdrDayDisabled .rdrDayNumber span {
645 @include set-mode(color, var(--text-color-500), #98a2b3, true);
646 }
647 .rdrDayDisabled .rdrInRange,
648 .rdrDayDisabled .rdrStartEdge,
649 .rdrDayDisabled .rdrEndEdge,
650 .rdrDayDisabled .rdrSelected,
651 .rdrDayDisabled .rdrDayStartPreview,
652 .rdrDayDisabled .rdrDayInPreview,
653 .rdrDayDisabled .rdrDayEndPreview {
654 -webkit-filter: grayscale(100%) opacity(60%);
655 filter: grayscale(100%) opacity(60%);
656 }
657 .rdrMonthName {
658 text-align: left;
659 font-weight: 600;
660 color: var(--text-color-600);
661 padding: 0.833em;
662 }
663