@limetech/lime-elements 36.0.0 → 36.1.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/cjs/lime-elements.cjs.js +1 -1
  2. package/dist/cjs/limel-badge.cjs.entry.js +22 -2
  3. package/dist/cjs/limel-chip-set.cjs.entry.js +1 -1
  4. package/dist/cjs/limel-flatpickr-adapter.cjs.entry.js +139 -37
  5. package/dist/cjs/limel-form.cjs.entry.js +1 -1
  6. package/dist/cjs/limel-input-field.cjs.entry.js +2 -2
  7. package/dist/cjs/limel-popover_4.cjs.entry.js +1 -1
  8. package/dist/cjs/limel-select.cjs.entry.js +1 -1
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/collection/components/badge/badge.css +13 -0
  11. package/dist/collection/components/badge/badge.js +30 -7
  12. package/dist/collection/components/chip-set/chip-set.css +4 -0
  13. package/dist/collection/components/date-picker/flatpickr-adapter/flatpickr-adapter.css +570 -167
  14. package/dist/collection/components/input-field/input-field.css +9 -8
  15. package/dist/collection/components/input-field/input-field.js +1 -1
  16. package/dist/collection/components/popover-surface/popover-surface.css +4 -0
  17. package/dist/collection/components/select/select.template.js +1 -1
  18. package/dist/collection/icons/angle_left.svg +593 -0
  19. package/dist/collection/icons/angle_right.svg +593 -0
  20. package/dist/collection/icons/external_link.svg +593 -0
  21. package/dist/collection/icons/high_importance.svg +593 -0
  22. package/dist/collection/icons/unit-test.svg +593 -0
  23. package/dist/collection/style/internal/z-index.scss +0 -6
  24. package/dist/esm/lime-elements.js +1 -1
  25. package/dist/esm/limel-badge.entry.js +23 -3
  26. package/dist/esm/limel-chip-set.entry.js +1 -1
  27. package/dist/esm/limel-flatpickr-adapter.entry.js +139 -37
  28. package/dist/esm/limel-form.entry.js +1 -1
  29. package/dist/esm/limel-input-field.entry.js +2 -2
  30. package/dist/esm/limel-popover_4.entry.js +1 -1
  31. package/dist/esm/limel-select.entry.js +1 -1
  32. package/dist/esm/loader.js +1 -1
  33. package/dist/lime-elements/lime-elements.esm.js +1 -1
  34. package/dist/lime-elements/p-17fd6309.entry.js +16 -0
  35. package/dist/lime-elements/p-3b0c9885.entry.js +37 -0
  36. package/dist/lime-elements/{p-0ba0c38a.entry.js → p-3f388717.entry.js} +1 -1
  37. package/dist/lime-elements/{p-1390fdcb.entry.js → p-41e902ac.entry.js} +1 -1
  38. package/dist/lime-elements/p-629862f4.entry.js +1 -0
  39. package/dist/lime-elements/p-b4de3380.entry.js +1 -0
  40. package/dist/lime-elements/{p-93f42a32.entry.js → p-eec907ac.entry.js} +1 -1
  41. package/dist/lime-elements/style/internal/z-index.scss +0 -6
  42. package/dist/types/components/badge/badge.d.ts +12 -4
  43. package/dist/types/components/tab-bar/tab.types.d.ts +1 -1
  44. package/dist/types/components.d.ts +4 -4
  45. package/package.json +15 -16
  46. package/dist/lime-elements/p-42b67933.entry.js +0 -1
  47. package/dist/lime-elements/p-653faf47.entry.js +0 -1
  48. package/dist/lime-elements/p-c544c05b.entry.js +0 -16
  49. package/dist/lime-elements/p-cb8db8c2.entry.js +0 -37
@@ -1,16 +1,3 @@
1
- .flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
2
- /*rtl:begin:ignore*/left:0/*
3
- /*rtl:end:ignore*/}/*
4
- /*rtl:begin:ignore*/
5
- /*
6
- /*rtl:end:ignore*/
7
- .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
8
- /*rtl:begin:ignore*/right:0/*
9
- /*rtl:end:ignore*/}/*
10
- /*rtl:begin:ignore*/
11
- /*
12
- /*rtl:end:ignore*/
13
- .flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
14
1
  /*
15
2
  * This file is imported into every component!
16
3
  *
@@ -256,200 +243,616 @@
256
243
  background-color: var(--mdc-theme-secondary, #575756) !important;
257
244
  }
258
245
 
259
- .container {
260
- display: inline-block;
246
+ .flatpickr-calendar {
247
+ text-align: center;
248
+ direction: ltr;
249
+ font-size: 14px;
250
+ line-height: 24px;
251
+ width: 307.875px;
252
+ -ms-touch-action: manipulation;
253
+ touch-action: manipulation;
254
+ }
255
+ .flatpickr-calendar .hasWeeks .dayContainer,
256
+ .flatpickr-calendar .hasTime .dayContainer {
257
+ border-bottom: 0;
258
+ border-bottom-right-radius: 0;
259
+ border-bottom-left-radius: 0;
260
+ }
261
+ .flatpickr-calendar .hasWeeks .dayContainer {
262
+ border-left: 0;
263
+ }
264
+ .flatpickr-calendar:focus {
265
+ outline: 0;
266
+ }
267
+
268
+ .flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
269
+ box-shadow: none !important;
270
+ }
271
+
272
+ .flatpickr-wrapper {
261
273
  position: relative;
262
- width: 100%;
274
+ display: inline-block;
263
275
  }
264
276
 
265
- .flatpickr-calendar {
266
- left: 0 !important;
267
- top: auto !important;
268
- margin-top: 2px;
269
- }
270
- .flatpickr-calendar .datepicker-months-container,
271
- .flatpickr-calendar .datepicker-quarters-container,
272
- .flatpickr-calendar .datepicker-weeks-container,
273
- .flatpickr-calendar .datepicker-years-container {
277
+ .flatpickr-months {
274
278
  display: flex;
275
- flex-direction: row;
276
- justify-content: space-around;
277
- flex-wrap: wrap;
278
- }
279
- .flatpickr-calendar .datepicker-months-container .selected,
280
- .flatpickr-calendar .datepicker-quarters-container .selected,
281
- .flatpickr-calendar .datepicker-weeks-container .selected,
282
- .flatpickr-calendar .datepicker-years-container .selected {
283
- z-index: 1;
284
279
  }
285
- .flatpickr-calendar .datepicker-months-container :hover,
286
- .flatpickr-calendar .datepicker-quarters-container :hover,
287
- .flatpickr-calendar .datepicker-weeks-container :hover,
288
- .flatpickr-calendar .datepicker-years-container :hover {
289
- z-index: 1;
290
- }
291
- .flatpickr-calendar .datepicker-month,
292
- .flatpickr-calendar .datepicker-quarter,
293
- .flatpickr-calendar .datepicker-week,
294
- .flatpickr-calendar .datepicker-year {
280
+ .flatpickr-months .flatpickr-month {
281
+ background: transparent;
282
+ height: 34px;
283
+ line-height: 1;
284
+ text-align: center;
285
+ position: relative;
286
+ user-select: none;
287
+ overflow: hidden;
288
+ flex: 1;
289
+ }
290
+ .flatpickr-months .flatpickr-prev-month,
291
+ .flatpickr-months .flatpickr-next-month {
292
+ user-select: none;
293
+ text-decoration: none;
295
294
  cursor: pointer;
296
- display: inline-block;
297
- flex-grow: 0;
298
- padding: 0.625rem;
295
+ }
296
+ .flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
297
+ .flatpickr-months .flatpickr-next-month.flatpickr-disabled {
298
+ display: none;
299
+ }
300
+ .flatpickr-months .flatpickr-prev-month i,
301
+ .flatpickr-months .flatpickr-next-month i {
299
302
  position: relative;
300
- min-width: 2.5rem;
301
- }
302
- .flatpickr-calendar .datepicker-month:after,
303
- .flatpickr-calendar .datepicker-quarter:after,
304
- .flatpickr-calendar .datepicker-week:after,
305
- .flatpickr-calendar .datepicker-year:after {
306
- border-radius: 0.9375rem;
307
- content: " ";
308
- height: 1.875rem;
309
- left: 0.3125rem;
310
- position: absolute;
311
- right: 0.3125rem;
312
- top: 0.4375rem;
313
- bottom: 0.4375rem;
314
- z-index: -1;
315
- }
316
- .flatpickr-calendar .datepicker-month.selected,
317
- .flatpickr-calendar .datepicker-quarter.selected,
318
- .flatpickr-calendar .datepicker-week.selected,
319
- .flatpickr-calendar .datepicker-year.selected {
320
- color: var(--mdc-theme-on-primary);
321
303
  }
322
- .flatpickr-calendar .datepicker-month.selected:after,
323
- .flatpickr-calendar .datepicker-quarter.selected:after,
324
- .flatpickr-calendar .datepicker-week.selected:after,
325
- .flatpickr-calendar .datepicker-year.selected:after {
326
- background: var(--mdc-theme-primary);
304
+
305
+ .numInputWrapper {
306
+ position: relative;
307
+ height: auto;
327
308
  }
328
- .flatpickr-calendar .datepicker-month:hover,
329
- .flatpickr-calendar .datepicker-quarter:hover,
330
- .flatpickr-calendar .datepicker-week:hover,
331
- .flatpickr-calendar .datepicker-year:hover {
332
- color: var(--mdc-theme-on-primary);
309
+ .numInputWrapper input,
310
+ .numInputWrapper span {
311
+ display: inline-block;
333
312
  }
334
- .flatpickr-calendar .datepicker-month:hover:after,
335
- .flatpickr-calendar .datepicker-quarter:hover:after,
336
- .flatpickr-calendar .datepicker-week:hover:after,
337
- .flatpickr-calendar .datepicker-year:hover:after {
338
- background: var(--mdc-theme-primary);
339
- opacity: 0.5;
313
+ .numInputWrapper input {
314
+ width: 100%;
315
+ }
316
+ .numInputWrapper input::-ms-clear {
317
+ display: none;
318
+ }
319
+ .numInputWrapper input::-webkit-outer-spin-button, .numInputWrapper input::-webkit-inner-spin-button {
320
+ margin: 0;
321
+ -webkit-appearance: none;
340
322
  }
341
- .flatpickr-calendar .datepicker-month .datepicker-month-in-quarter,
342
- .flatpickr-calendar .datepicker-quarter .datepicker-month-in-quarter,
343
- .flatpickr-calendar .datepicker-week .datepicker-month-in-quarter,
344
- .flatpickr-calendar .datepicker-year .datepicker-month-in-quarter {
345
- color: var(--mdc-theme-text-disabled-on-background);
323
+ .numInputWrapper span {
324
+ position: absolute;
325
+ right: 0;
326
+ height: 50%;
327
+ line-height: 50%;
328
+ opacity: 0;
329
+ cursor: pointer;
330
+ box-sizing: border-box;
331
+ }
332
+ .numInputWrapper span:after {
346
333
  display: block;
347
- font-size: 0.75rem;
334
+ content: "";
335
+ position: absolute;
348
336
  }
349
- .flatpickr-calendar .datepicker-month {
350
- min-width: 4.375rem;
337
+ .numInputWrapper span.arrowUp {
338
+ top: 0;
339
+ border-bottom: 0;
351
340
  }
352
- .flatpickr-calendar .datepicker-month:after {
353
- left: 0.625rem;
354
- right: 0.625rem;
341
+ .numInputWrapper span.arrowUp:after {
342
+ border-left: 4px solid transparent;
343
+ border-right: 4px solid transparent;
344
+ border-bottom: 4px solid rgba(57, 57, 57, 0.6);
355
345
  }
356
- .flatpickr-calendar .flatpickr-month {
357
- color: var(--mdc-theme-on-primary);
346
+ .numInputWrapper span.arrowDown {
347
+ top: 50%;
358
348
  }
359
- .flatpickr-calendar .flatpickr-month .numInputWrapper span.arrowUp:after,
360
- .flatpickr-calendar .flatpickr-month .numInputWrapper span.arrowDown:after {
361
- border-top-color: var(--mdc-theme-on-primary);
362
- border-bottom-color: var(--mdc-theme-on-primary);
349
+ .numInputWrapper span.arrowDown:after {
350
+ border-left: 4px solid transparent;
351
+ border-right: 4px solid transparent;
352
+ border-top: 4px solid rgba(57, 57, 57, 0.6);
363
353
  }
364
- .flatpickr-calendar .flatpickr-months {
365
- background: var(--mdc-theme-primary);
366
- color: var(--mdc-theme-on-primary);
367
- height: 2.625rem;
368
- padding-top: 0.375rem;
354
+ .numInputWrapper span svg {
355
+ width: inherit;
356
+ height: auto;
369
357
  }
370
- .flatpickr-calendar .flatpickr-prev-month,
371
- .flatpickr-calendar .flatpickr-next-month {
372
- fill: var(--mdc-theme-on-primary);
373
- top: 0.375rem;
358
+ .numInputWrapper:hover {
359
+ background: rgba(0, 0, 0, 0.05);
374
360
  }
375
- .flatpickr-calendar .flatpickr-prev-month:hover,
376
- .flatpickr-calendar .flatpickr-next-month:hover {
377
- color: var(--mdc-theme-on-primary);
378
- fill: var(--mdc-theme-on-primary);
361
+ .numInputWrapper:hover span {
362
+ opacity: 1;
379
363
  }
380
- .flatpickr-calendar .flatpickr-current-month div.flatpickr-month {
381
- font-size: 1rem;
382
- font-weight: 400 !important;
383
- color: var(--mdc-theme-on-primary);
364
+
365
+ .flatpickr-current-month input.cur-year {
366
+ background: transparent;
367
+ box-sizing: border-box;
368
+ color: inherit;
369
+ cursor: text;
370
+ padding: 0 0 0 0.5ch;
371
+ margin: 0;
372
+ display: inline-block;
373
+ font-size: inherit;
374
+ font-family: inherit;
375
+ font-weight: 300;
376
+ line-height: inherit;
377
+ height: auto;
378
+ border: 0;
379
+ border-radius: 0;
380
+ vertical-align: initial;
381
+ -webkit-appearance: textfield;
382
+ -moz-appearance: textfield;
383
+ appearance: textfield;
384
+ }
385
+ .flatpickr-current-month input.cur-year:focus {
386
+ outline: 0;
387
+ }
388
+ .flatpickr-current-month input.cur-year[disabled] {
389
+ font-size: 100%;
390
+ background: transparent;
391
+ pointer-events: none;
384
392
  }
385
- .flatpickr-calendar .flatpickr-current-month select {
386
- color: var(--mdc-theme-on-primary);
393
+ .flatpickr-current-month input.cur-year[disabled]:hover {
394
+ font-size: 100%;
395
+ background: transparent;
396
+ pointer-events: none;
397
+ }
398
+ .flatpickr-current-month .flatpickr-monthDropdown-months {
399
+ appearance: menulist;
400
+ background: transparent;
401
+ border: none;
402
+ cursor: pointer;
403
+ font-family: inherit;
404
+ font-weight: 300;
405
+ height: auto;
406
+ line-height: inherit;
407
+ outline: none;
408
+ position: relative;
409
+ vertical-align: initial;
410
+ -webkit-appearance: menulist;
411
+ -moz-appearance: menulist;
412
+ width: auto;
387
413
  }
388
- .flatpickr-calendar .flatpickr-current-month select option {
389
- color: initial;
414
+ .flatpickr-current-month .flatpickr-monthDropdown-months:focus, .flatpickr-current-month .flatpickr-monthDropdown-months:active {
415
+ outline: none;
390
416
  }
391
- .flatpickr-calendar .flatpickr-current-month input {
392
- color: var(--mdc-theme-on-primary);
417
+ .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
418
+ background-color: transparent;
419
+ outline: none;
420
+ padding: 0;
393
421
  }
394
- .flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover {
395
- background: var(--mdc-theme-primary);
422
+
423
+ .flatpickr-weekdays {
424
+ display: flex;
425
+ align-items: center;
426
+ height: 28px;
396
427
  }
397
- .flatpickr-calendar .flatpickr-weekday {
398
- background: var(--mdc-theme-primary);
399
- color: var(--mdc-theme-on-primary);
400
- font-weight: 400;
428
+
429
+ span.flatpickr-weekday {
430
+ font-size: 90%;
431
+ font-weight: bolder;
401
432
  }
402
- .flatpickr-calendar .flatpickr-weekdays {
403
- background: var(--mdc-theme-primary);
433
+
434
+ .flatpickr-days {
435
+ position: relative;
436
+ overflow: hidden;
404
437
  }
405
- .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after {
406
- display: none;
438
+
439
+ .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange {
440
+ border-radius: 50px 0 0 50px;
407
441
  }
408
- .flatpickr-calendar .flatpickr-day {
409
- border: none;
410
- background: transparent !important;
411
- border-radius: 0 !important;
412
- box-shadow: none !important;
413
- max-width: none;
442
+ .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange {
443
+ border-radius: 0 50px 50px 0;
414
444
  }
415
- .flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.inRange, .flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.nextMonthDay:hover, .flatpickr-calendar .flatpickr-day:hover {
445
+ .flatpickr-day.selected.startRange.endRange, .flatpickr-day.startRange.startRange.endRange {
446
+ border-radius: 50px;
447
+ }
448
+ .flatpickr-day.flatpickr-disabled, .flatpickr-day.notAllowed {
449
+ opacity: 0.4;
416
450
  background: transparent;
417
- color: var(--mdc-theme-on-primary);
451
+ border-color: transparent;
452
+ cursor: default;
418
453
  }
419
- .flatpickr-calendar .flatpickr-day.today {
454
+ .flatpickr-day.flatpickr-disabled.prevMonthDay, .flatpickr-day.flatpickr-disabled.nextMonthDay, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay {
420
455
  background: transparent;
456
+ border-color: transparent;
457
+ cursor: default;
458
+ }
459
+ .flatpickr-day.week.selected {
460
+ border-radius: 0;
461
+ }
462
+ .flatpickr-day.hidden {
463
+ visibility: hidden;
464
+ }
465
+
466
+ .flatpickr-weekwrapper {
467
+ float: left;
421
468
  }
422
- .flatpickr-calendar .flatpickr-day.today:after {
423
- opacity: 0.25;
469
+ .flatpickr-weekwrapper .flatpickr-weekday {
470
+ float: none;
471
+ width: 100%;
472
+ line-height: 28px;
424
473
  }
425
- .flatpickr-calendar .flatpickr-day.today:hover {
474
+ .flatpickr-weekwrapper span.flatpickr-day {
475
+ display: block;
476
+ width: 100%;
477
+ max-width: none;
426
478
  background: transparent;
427
- color: var(--mdc-theme-on-primary);
479
+ cursor: default;
480
+ border: none;
428
481
  }
429
- .flatpickr-calendar .flatpickr-day:after {
430
- border-radius: 0.9375rem;
431
- content: " ";
432
- height: 1.875rem;
433
- left: 50%;
434
- margin-left: -0.9375rem;
435
- margin-top: -0.9375rem;
436
- position: absolute;
437
- top: 50%;
438
- width: 1.875rem;
439
- z-index: -1;
482
+ .flatpickr-weekwrapper span.flatpickr-day:hover {
483
+ display: block;
484
+ width: 100%;
485
+ max-width: none;
486
+ background: transparent;
487
+ cursor: default;
488
+ border: none;
440
489
  }
441
- .flatpickr-calendar .flatpickr-day.selected:after {
442
- background: var(--mdc-theme-primary);
443
- color: var(--mdc-theme-on-primary);
490
+
491
+ .flatpickr-innerContainer {
492
+ display: flex;
493
+ }
494
+
495
+ .flatpickr-rContainer {
496
+ display: inline-block;
497
+ padding: 0;
498
+ box-sizing: border-box;
499
+ }
500
+
501
+ .flatpickr-time {
502
+ text-align: center;
503
+ outline: 0;
504
+ display: block;
505
+ line-height: 40px;
506
+ max-height: 40px;
507
+ box-sizing: border-box;
508
+ overflow: hidden;
509
+ display: flex;
510
+ }
511
+ .flatpickr-time:after {
512
+ content: "";
513
+ display: table;
514
+ clear: both;
515
+ }
516
+ .flatpickr-time .numInputWrapper {
517
+ flex: 1;
518
+ width: 40%;
519
+ height: 40px;
520
+ float: left;
444
521
  }
445
- .flatpickr-calendar .flatpickr-day.inRange:after, .flatpickr-calendar .flatpickr-day.nextMonthDay:hover:after, .flatpickr-calendar .flatpickr-day:hover:after {
522
+ .flatpickr-time.hasSeconds .numInputWrapper {
523
+ width: 26%;
524
+ }
525
+ .flatpickr-time.time24hr .numInputWrapper {
526
+ width: 49%;
527
+ }
528
+ .flatpickr-time input {
529
+ background: transparent;
530
+ box-shadow: none;
531
+ border: 0;
532
+ border-radius: 0;
533
+ text-align: center;
534
+ margin: 0;
535
+ padding: 0;
536
+ height: inherit;
537
+ line-height: inherit;
538
+ font-size: 14px;
539
+ position: relative;
540
+ box-sizing: border-box;
541
+ appearance: textfield;
542
+ }
543
+ .flatpickr-time input.flatpickr-hour {
544
+ font-weight: bold;
545
+ }
546
+ .flatpickr-time input.flatpickr-minute, .flatpickr-time input.flatpickr-second {
547
+ font-weight: 400;
548
+ }
549
+ .flatpickr-time input:focus {
550
+ outline: 0;
551
+ border: 0;
552
+ }
553
+ .flatpickr-time .flatpickr-time-separator {
554
+ height: inherit;
555
+ float: left;
556
+ line-height: inherit;
557
+ font-weight: bold;
558
+ width: 2%;
559
+ user-select: none;
560
+ align-self: center;
561
+ }
562
+ .flatpickr-time .flatpickr-am-pm {
563
+ height: inherit;
564
+ float: left;
565
+ line-height: inherit;
566
+ font-weight: bold;
567
+ width: 2%;
568
+ user-select: none;
569
+ align-self: center;
570
+ outline: 0;
571
+ width: 18%;
572
+ cursor: pointer;
573
+ text-align: center;
574
+ font-weight: 400;
575
+ }
576
+ .flatpickr-time input:hover,
577
+ .flatpickr-time .flatpickr-am-pm:hover,
578
+ .flatpickr-time input:focus,
579
+ .flatpickr-time .flatpickr-am-pm:focus {
580
+ background: #eee;
581
+ }
582
+
583
+ .flatpickr-input[readonly] {
584
+ cursor: pointer;
585
+ }
586
+
587
+ :host(limel-flatpickr-adapter) {
588
+ --calendar-text-color: rgb(var(--contrast-1400));
589
+ color: --calendar-text-color;
590
+ }
591
+ :host(limel-flatpickr-adapter) * {
592
+ box-sizing: border-box;
593
+ font-family: "Roboto";
594
+ }
595
+
596
+ svg {
597
+ fill: var(--calendar-text-color) !important;
598
+ }
599
+
600
+ .flatpickr-calendar {
601
+ isolation: isolate;
602
+ border-radius: 0.25rem;
603
+ background-color: rgb(var(--contrast-100));
604
+ box-shadow: var(--shadow-depth-16);
605
+ }
606
+
607
+ .flatpickr-weekwrapper .flatpickr-day,
608
+ .flatpickr-weekwrapper .flatpickr-weekday {
609
+ color: rgb(var(--contrast-700));
610
+ }
611
+
612
+ .flatpickr-weeks {
613
+ padding: 0 0.5rem;
614
+ box-shadow: 1px 0 0 rgb(var(--contrast-300));
615
+ }
616
+
617
+ .flatpickr-weekdaycontainer,
618
+ .dayContainer {
619
+ flex-grow: 1;
620
+ display: grid;
621
+ grid-template-columns: repeat(7, 1fr);
622
+ }
623
+
624
+ .flatpickr-day {
625
+ cursor: pointer;
626
+ display: flex;
627
+ align-items: center;
628
+ justify-content: center;
629
+ color: var(--calendar-text-color);
630
+ border: 1px solid transparent;
631
+ border-radius: 2.5rem;
632
+ width: 2.5rem;
633
+ height: 2.5rem;
634
+ line-height: 2.5rem;
635
+ }
636
+ .dayContainer .flatpickr-day {
637
+ transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
638
+ }
639
+ .dayContainer .flatpickr-day:hover {
640
+ box-shadow: var(--button-shadow-hovered);
641
+ }
642
+ .dayContainer .flatpickr-day:active {
643
+ box-shadow: var(--button-shadow-pressed);
644
+ transform: translate3d(0, 0.08rem, 0);
645
+ }
646
+ .flatpickr-day:hover {
647
+ z-index: 1;
648
+ }
649
+ .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
650
+ color: rgb(var(--contrast-800));
651
+ }
652
+ .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange {
653
+ opacity: 0.6;
654
+ }
655
+ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.inRange, .flatpickr-day.selected:hover {
656
+ border-color: var(--mdc-theme-primary);
657
+ color: var(--mdc-theme-on-primary);
446
658
  background: var(--mdc-theme-primary);
659
+ }
660
+ .flatpickr-day.today {
661
+ border-color: var(--mdc-theme-on-primary);
662
+ box-shadow: 0 0 0 0.125rem var(--mdc-theme-primary);
663
+ }
664
+ .flatpickr-day.today:hover:not(.selected) {
665
+ background-color: transparent;
666
+ color: var(--mdc-theme-primary);
667
+ }
668
+ .flatpickr-day.inRange {
669
+ transition-duration: 0s;
670
+ }
671
+
672
+ .flatpickr-time {
673
+ border-top: 1px solid rgb(var(--contrast-400));
674
+ }
675
+
676
+ .flatpickr-weekdays {
677
+ background-color: rgb(var(--contrast-300));
678
+ }
679
+
680
+ .flatpickr-months {
681
+ justify-items: center;
682
+ padding: 0.125rem;
683
+ color: var(--calendar-text-color) !important;
684
+ border-bottom: 1px solid rgb(var(--contrast-300));
685
+ }
686
+ .flatpickr-months svg {
687
+ height: 0.75rem;
688
+ width: 0.75rem;
689
+ }
690
+ .flatpickr-months .flatpickr-month {
691
+ display: flex;
692
+ align-items: stretch;
693
+ }
694
+ .flatpickr-months .flatpickr-current-month {
695
+ display: flex;
696
+ justify-content: space-evenly;
697
+ align-items: stretch;
698
+ gap: 1rem;
699
+ inset: 0;
700
+ height: unset;
701
+ width: 100%;
702
+ padding: 0.25rem;
703
+ }
704
+ .flatpickr-months .flatpickr-current-month .numInputWrapper {
705
+ width: 4rem;
706
+ border-radius: 0.25rem;
707
+ }
708
+ .flatpickr-months .flatpickr-current-month .numInputWrapper:hover {
709
+ background-color: rgb(var(--contrast-300));
710
+ }
711
+ .flatpickr-months .flatpickr-current-month input {
712
+ height: 100%;
713
+ }
714
+ .flatpickr-months .flatpickr-prev-month,
715
+ .flatpickr-months .flatpickr-next-month {
716
+ position: relative;
717
+ display: flex;
718
+ align-items: center;
719
+ justify-content: center;
720
+ width: 2rem;
721
+ }
722
+
723
+ .flatpickr-monthDropdown-months,
724
+ .flatpickr-prev-month,
725
+ .flatpickr-next-month,
726
+ .arrowUp,
727
+ .arrowDown {
728
+ transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
729
+ border-radius: 0.25rem;
730
+ }
731
+ .flatpickr-monthDropdown-months:hover,
732
+ .flatpickr-prev-month:hover,
733
+ .flatpickr-next-month:hover,
734
+ .arrowUp:hover,
735
+ .arrowDown:hover {
736
+ box-shadow: var(--button-shadow-hovered);
737
+ }
738
+ .flatpickr-monthDropdown-months:active,
739
+ .flatpickr-prev-month:active,
740
+ .flatpickr-next-month:active,
741
+ .arrowUp:active,
742
+ .arrowDown:active {
743
+ box-shadow: var(--button-shadow-pressed);
744
+ transform: translate3d(0, 0.08rem, 0);
745
+ }
746
+ .flatpickr-monthDropdown-months:hover,
747
+ .flatpickr-prev-month:hover,
748
+ .flatpickr-next-month:hover,
749
+ .arrowUp:hover,
750
+ .arrowDown:hover {
751
+ background-color: rgb(var(--contrast-100)) !important;
752
+ }
753
+
754
+ .arrowUp {
755
+ border-radius: 0 0.25rem 0 0;
756
+ }
757
+
758
+ .arrowDown {
759
+ border-radius: 0 0 0.25rem 0;
760
+ }
761
+
762
+ .numInputWrapper {
763
+ border-radius: 0.25rem;
764
+ }
765
+ .numInputWrapper span {
766
+ display: flex;
767
+ align-items: center;
768
+ justify-content: center;
769
+ width: 1rem;
770
+ }
771
+ .numInputWrapper span.arrowUp:after {
772
+ border-bottom-color: rgb(var(--contrast-1400));
773
+ }
774
+ .numInputWrapper span.arrowDown:after {
775
+ border-top-color: rgb(var(--contrast-1400));
776
+ }
777
+
778
+ .datepicker-months-container,
779
+ .datepicker-quarters-container,
780
+ .datepicker-years-container {
781
+ display: grid;
782
+ gap: 0.5rem;
783
+ padding: 0.5rem;
784
+ }
785
+
786
+ .datepicker-months-container {
787
+ grid-template-columns: repeat(6, 1fr);
788
+ }
789
+
790
+ .datepicker-quarters-container {
791
+ grid-template-columns: repeat(4, 1fr);
792
+ }
793
+
794
+ .datepicker-years-container {
795
+ grid-template-columns: repeat(5, 1fr);
796
+ }
797
+
798
+ .datepicker-month,
799
+ .datepicker-quarter,
800
+ .datepicker-year {
801
+ transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
802
+ cursor: pointer;
803
+ min-width: 0;
804
+ text-align: center;
805
+ }
806
+ .datepicker-month:hover,
807
+ .datepicker-quarter:hover,
808
+ .datepicker-year:hover {
809
+ box-shadow: var(--button-shadow-hovered);
810
+ }
811
+ .datepicker-month:active,
812
+ .datepicker-quarter:active,
813
+ .datepicker-year:active {
814
+ box-shadow: var(--button-shadow-pressed);
815
+ transform: translate3d(0, 0.08rem, 0);
816
+ }
817
+ .datepicker-month.selected,
818
+ .datepicker-quarter.selected,
819
+ .datepicker-year.selected {
447
820
  color: var(--mdc-theme-on-primary);
448
- opacity: 0.5;
821
+ background: var(--mdc-theme-primary);
449
822
  }
450
- .flatpickr-calendar .flatpickr-weekwrapper {
451
- width: 2.5rem;
823
+
824
+ .datepicker-month-heading,
825
+ .datepicker-quarter-heading,
826
+ .datepicker-year-heading {
827
+ align-self: center;
452
828
  }
453
- .flatpickr-calendar .flatpickr-time {
454
- height: 2.5rem;
829
+
830
+ .datepicker-month {
831
+ padding: 0.125rem 0.5rem;
832
+ border-radius: 2rem;
833
+ }
834
+
835
+ .datepicker-quarter {
836
+ padding: 0.75rem 0;
837
+ border-radius: 1rem;
838
+ }
839
+
840
+ .datepicker-year {
841
+ padding: 0.125rem 0.25rem;
842
+ border-radius: 2rem;
843
+ }
844
+
845
+ .datepicker-quarter {
846
+ font-weight: bold;
847
+ font-size: 1rem;
848
+ }
849
+
850
+ .datepicker-month-in-quarter {
851
+ opacity: 0.7;
852
+ display: block;
853
+ font-size: 0.75rem;
854
+ font-weight: normal;
855
+ }
856
+ .datepicker-month-in-quarter:first-of-type {
857
+ margin-top: 0.5rem;
455
858
  }