| 1 | import { css } from 'lit';
|
| 2 | export const monthCalendarStyling = css `
|
| 3 | :host {
|
| 4 | --_border-width: 0px;
|
| 5 | --_inset: 0px;
|
| 6 | --_size: 32px;
|
| 7 |
|
| 8 | display: block;
|
| 9 | font-size: 13px;
|
| 10 | }
|
| 11 |
|
| 12 | table,
|
| 13 | thead,
|
| 14 | tbody,
|
| 15 | tr,
|
| 16 | th,
|
| 17 | td {
|
| 18 | position: relative;
|
| 19 | padding: 0;
|
| 20 | }
|
| 21 |
|
| 22 | .calendar-table,
|
| 23 | .calendar-day {
|
| 24 | text-align: center;
|
| 25 | }
|
| 26 |
|
| 27 | .calendar-table {
|
| 28 | -webkit-user-select: none;
|
| 29 | -moz-user-select: none;
|
| 30 | user-select: none;
|
| 31 |
|
| 32 | border-collapse: collapse;
|
| 33 | border-spacing: 0;
|
| 34 | }
|
| 35 |
|
| 36 | .weekday {
|
| 37 | max-height: 28px;
|
| 38 | height: 28px;
|
| 39 | }
|
| 40 |
|
| 41 | .weekday-value {
|
| 42 | max-height: 16px;
|
| 43 | height: 16px;
|
| 44 | color: var(--_on-weekday);
|
| 45 | line-height: 1;
|
| 46 | }
|
| 47 |
|
| 48 | .calendar-day,
|
| 49 | .calendar-day:not(.week-number):not([aria-hidden="true"])::before,
|
| 50 | .calendar-day:not(.week-number):not([aria-hidden="true"])::after {
|
| 51 | position: relative;
|
| 52 | width: var(--_size);
|
| 53 | height: var(--_size);
|
| 54 | top: var(--_inset);
|
| 55 | right: var(--_inset);
|
| 56 | bottom: var(--_inset);
|
| 57 | left: var(--_inset);
|
| 58 | inset: var(--_inset);
|
| 59 | border: var(--_border-width) solid var(--_border-color);
|
| 60 | border-radius: 50%;
|
| 61 | outline: none;
|
| 62 | }
|
| 63 |
|
| 64 | .calendar-day {
|
| 65 | min-width: var(--_size);
|
| 66 | min-height: var(--_size);
|
| 67 | max-width: var(--_size);
|
| 68 | max-height: var(--_size);
|
| 69 | }
|
| 70 | .calendar-day.week-number {
|
| 71 | color: var(--_on-week-number);
|
| 72 | }
|
| 73 | .calendar-day[aria-disabled="true"] {
|
| 74 | color: var(--_on-disabled);
|
| 75 | }
|
| 76 | @media (any-hover: hover) {
|
| 77 | .calendar-day:not(.week-number):not([aria-hidden="true"]):not([aria-disabled="true"]):hover {
|
| 78 | cursor: pointer;
|
| 79 | }
|
| 80 | }
|
| 81 |
|
| 82 | .calendar-day:not(.week-number):not([aria-hidden="true"])::before,
|
| 83 | .calendar-day:not(.week-number):not([aria-hidden="true"])::after {
|
| 84 | --_size: (var(--_size) - (var(--_inset) * 2) - (var(--_border-width) * 2));
|
| 85 |
|
| 86 | content: attr(data-day);
|
| 87 | display: flex;
|
| 88 | align-items: center;
|
| 89 | justify-content: center;
|
| 90 |
|
| 91 | position: absolute;
|
| 92 | width: var(--_size);
|
| 93 | height: var(--_size);
|
| 94 | pointer-events: none;
|
| 95 | }
|
| 96 |
|
| 97 | .calendar-day::before {
|
| 98 | z-index: 1;
|
| 99 | }
|
| 100 | .calendar-day:not([aria-disabled="true"]):focus-visible::before,
|
| 101 | .calendar-day:not([aria-disabled="true"]):hover::before {
|
| 102 | --_border-color: var(--_focus);
|
| 103 | --_border-width: 1px;
|
| 104 | --_inset: 0px;
|
| 105 |
|
| 106 | color: var(--_on-focus);
|
| 107 | }
|
| 108 | .calendar-day:not([aria-disabled="true"]):hover::before,
|
| 109 | .calendar-day.day--today:not([aria-selected="true"]):hover::before {
|
| 110 | --_border-color: var(--_hover);
|
| 111 |
|
| 112 | color: var(--_on-hover);
|
| 113 | }
|
| 114 | .calendar-day[aria-selected="true"]::before {
|
| 115 | color: var(--_on-primary);
|
| 116 | }
|
| 117 | .calendar-day[aria-selected="true"]:focus-visible::before {
|
| 118 | --_border-color: var(--_selected-focus);
|
| 119 |
|
| 120 | color: var(--_selected-on-focus);
|
| 121 | }
|
| 122 | .calendar-day[aria-selected="true"]:hover::before {
|
| 123 | --_border-color: var(--_selected-hover);
|
| 124 |
|
| 125 | color: var(--_selected-on-hover);
|
| 126 | }
|
| 127 | .calendar-day.day--today:not([aria-selected="true"])::before {
|
| 128 | --_border-color: var(--_today);
|
| 129 | --_border-width: 1px;
|
| 130 |
|
| 131 | color: var(--_on-today);
|
| 132 | }
|
| 133 |
|
| 134 | .calendar-day:not(.week-number):not([aria-hidden="true"])::after {
|
| 135 | content: '';
|
| 136 | }
|
| 137 | .calendar-day:not([aria-disabled="true"]):focus-visible::after,
|
| 138 | .calendar-day:not([aria-disabled="true"]):hover::after {
|
| 139 | --_inset: 3px;
|
| 140 | }
|
| 141 | .calendar-day[aria-selected="true"]::after {
|
| 142 | background-color: var(--_primary);
|
| 143 | }
|
| 144 | `;
|