123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- @use '../mixins/mixins' as *;
- @use '../common/var' as *;
- @include b(month-table) {
- font-size: 12px;
- margin: -1px;
- border-collapse: collapse;
- td {
- text-align: center;
- padding: 8px 0;
- cursor: pointer;
- & div {
- height: 48px;
- padding: 6px 0;
- box-sizing: border-box;
- }
- &.today {
- .cell {
- color: getCssVar('color-primary');
- font-weight: bold;
- }
- &.start-date .cell,
- &.end-date .cell {
- color: $color-white;
- }
- }
- &.disabled .cell {
- background-color: getCssVar('fill-color', 'light');
- cursor: not-allowed;
- color: getCssVar('text-color', 'placeholder');
- &:hover {
- color: getCssVar('text-color', 'placeholder');
- }
- }
- .cell {
- width: 60px;
- height: 36px;
- display: block;
- line-height: 36px;
- color: getCssVar('datepicker-text-color');
- margin: 0 auto;
- border-radius: 18px;
- &:hover {
- color: getCssVar('datepicker-hover-text-color');
- }
- }
- &.in-range div {
- background-color: getCssVar('datepicker-inrange-bg-color');
- &:hover {
- background-color: getCssVar('datepicker-inrange-hover-bg-color');
- }
- }
- &.start-date div,
- &.end-date div {
- color: $color-white;
- }
- &.start-date .cell,
- &.end-date .cell {
- color: $color-white;
- background-color: getCssVar('datepicker-active-color');
- }
- &.start-date div {
- border-top-left-radius: 24px;
- border-bottom-left-radius: 24px;
- }
- &.end-date div {
- border-top-right-radius: 24px;
- border-bottom-right-radius: 24px;
- }
- &.current:not(.disabled) .cell {
- color: getCssVar('datepicker-active-color');
- }
- &:focus-visible {
- outline: none;
- .cell {
- outline: 2px solid getCssVar('datepicker-active-color');
- }
- }
- }
- }
|