@opentiny/vue-theme/date-table/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-date-table{--tv-DateTable-text-color:var(--tv-color-text, #191919);--tv-DateTable-font-size:var(--tv-font-size-default, 14px);--tv-DateTable-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-DateTable-td-padding:var(--tv-space-sm, 4px) 0;--tv-DateTable-td-width:36px;--tv-DateTable-td-height:34px;--tv-DateTable-td-span-width:28px;--tv-DateTable-td-span-height:28px;--tv-DateTable-th-text-color:var(--tv-color-text-weaken, #808080);--tv-DateTable-td-border-radius:var(--tv-border-radius-brand, 999px);--tv-DateTable-border-radius-current-select:var(--tv-border-radius-brand, 999px);--tv-DateTable-td-pre-month-text-color:var(--tv-color-text-weaken, #808080);--tv-DateTable-td-normal-text-color:var(--tv-color-text-inverse, #ffffff);--tv-DateTable-td-bg-color-range-selected:var(--tv-color-bg-active-emphasize, #deecff);--tv-DateTable-week-bg-color-current-select:var(--tv-color-bg-active-emphasize, #deecff);--tv-DateTable-week-bg-color-current-hover:var(--tv-color-bg-hover-3, #deecff);--tv-DateTable-hover-bg-color:var(--tv-color-bg-hover-3, #deecff);--tv-DateTable-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-DateTable-range-bg-color:var(--tv-color-bg-active-emphasize, #deecff);--tv-DateTable-range-hover-bg-color:var(--tv-color-bg-hover-3, #deecff);--tv-DateTable-bg-color-current-select:var(--tv-color-bg-active-control, #1476ff);--tv-DateTable-td-today-width:var(--tv-size-height-sm, 28px);--tv-DateTable-td-today-height:var(--tv-size-height-sm, 28px);--tv-DateTable-td-today-border-radius:var(--tv-border-radius-brand, 999px);--tv-DateTable-td-today-circle-border-color:var(--tv-color-border-active, #191919);--tv-DateTable-td-div-height:var(--tv-size-height-sm, 28px);--tv-DateTable-td-div-width:28px;--tv-DateTable-td-span-top:4px;--tv-DateTable-start-date-border-radius:var(--tv-border-radius-brand, 999px);--tv-DateTable-cell-border-radius-selected:var(--tv-border-radius-brand, 999px);--tv-DateTable-tr-line-height:var(--tv-line-height-number, 1.5);--tv-DateTable-td-border-radius-disabled:var(--tv-border-radius-brand, 999px);--tv-DateTable-week-height:var(--tv-size-height-md, 32px);font-size:var(--tv-DateTable-font-size);-ms-user-select:none;-webkit-user-select:none;-o-user-select:none;-moz-user-select:none;user-select:none}.tiny-date-table.is-week-mode .tiny-date-table__row:hover td.available:hover{color:var(--tv-DateTable-text-color)}.tiny-date-table.is-week-mode .tiny-date-table__row:hover td:first-child div{margin-left:5px;border-top-left-radius:var(--tv-DateTable-td-border-radius);border-bottom-left-radius:var(--tv-DateTable-td-border-radius)}.tiny-date-table.is-week-mode .tiny-date-table__row:hover td:last-child div{margin-right:5px;border-top-right-radius:var(--tv-DateTable-td-border-radius);border-bottom-right-radius:var(--tv-DateTable-td-border-radius)}.tiny-date-table.is-week-mode .tiny-date-table__row:hover div{background-color:var(--tv-DateTable-hover-bg-color)}.tiny-date-table.is-week-mode .tiny-date-table__row.current div{background-color:var(--tv-DateTable-week-bg-color-current-select)}.tiny-date-table.is-week-mode .tiny-date-table__row.current div:hover{background-color:var(--tv-DateTable-week-bg-color-current-hover)}.tiny-date-table.is-week-mode .tiny-date-table__row.current td.available:hover span{background-color:transparent}.tiny-date-table.is-week-mode .tiny-date-table__row.current td.available.end-date span,.tiny-date-table.is-week-mode .tiny-date-table__row.current td.available.start-date span{background-color:var(--tv-DateTable-bg-color-current-select);border-radius:var(--tv-DateTable-border-radius-current-select)}.tiny-date-table__week{height:var(--tv-DateTable-week-height);line-height:var(--tv-DateTable-tr-line-height)}.tiny-date-table td{width:var(--tv-DateTable-td-width);height:var(--tv-DateTable-td-height);padding:var(--tv-DateTable-td-padding);-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;cursor:pointer;vertical-align:middle;position:relative}.tiny-date-table td div{height:var(--tv-DateTable-td-div-height);min-width:var(--tv-DateTable-td-div-width);padding:3px 0;-webkit-box-sizing:border-box;box-sizing:border-box}.tiny-date-table td span{min-width:var(--tv-DateTable-td-span-width);height:var(--tv-DateTable-td-span-height);line-height:var(--tv-DateTable-td-span-height);display:block;margin:0 auto;position:absolute;left:50%;top:var(--tv-DateTable-td-span-top);-webkit-transform:translateX(-50%);transform:translateX(-50%)}.tiny-date-table td.next-month,.tiny-date-table td.pre-month{color:var(--tv-DateTable-td-pre-month-text-color);cursor:pointer}.tiny-date-table td.today{position:relative;color:var(--tv-DateTable-text-color)}.tiny-date-table td.today:after{content:'';width:12px;height:1px;background:0 0;position:absolute;left:0;right:0;margin:auto;bottom:5px}.tiny-date-table td.today span{line-height:var(--tv-DateTable-td-today-height);min-width:var(--tv-DateTable-td-today-width);height:var(--tv-DateTable-td-today-height);border-radius:var(--tv-DateTable-td-today-border-radius);-webkit-box-shadow:0 0 1px 1px var(--tv-DateTable-td-today-circle-border-color);box-shadow:0 0 1px 1px var(--tv-DateTable-td-today-circle-border-color)}.tiny-date-table td.today.end-date span,.tiny-date-table td.today.start-date span{color:var(--tv-DateTable-td-normal-text-color)}.tiny-date-table td.available:not(.today):hover span{background-color:var(--tv-DateTable-hover-bg-color);border-radius:var(--tv-DateTable-border-radius-current-select);-webkit-box-shadow:none;box-shadow:none}.tiny-date-table td.current.available:not(.today):hover span{color:var(--tv-DateTable-td-normal-text-color);background-color:var(--tv-DateTable-bg-color-current-select);border-radius:var(--tv-DateTable-border-radius-current-select);-webkit-box-shadow:none;box-shadow:none}.tiny-date-table td.current:not(.disabled) span{color:var(--tv-DateTable-td-normal-text-color);background-color:var(--tv-DateTable-bg-color-current-select);border-radius:var(--tv-DateTable-border-radius-current-select);-webkit-box-shadow:none;box-shadow:none}.tiny-date-table td.current:not(.disabled):after{background-color:transparent}.tiny-date-table td.end-date div,.tiny-date-table td.start-date div{color:var(--tv-DateTable-td-normal-text-color)}.tiny-date-table td.end-date span,.tiny-date-table td.start-date span{background-color:var(--tv-DateTable-bg-color-current-select);border-radius:var(--tv-DateTable-start-date-border-radius);-webkit-box-shadow:none;box-shadow:none}.tiny-date-table td.start-date div{margin-left:5px;border-top-left-radius:var(--tv-DateTable-td-border-radius);border-bottom-left-radius:var(--tv-DateTable-td-border-radius)}.tiny-date-table td.end-date div{margin-right:5px;border-top-right-radius:var(--tv-DateTable-td-border-radius);border-bottom-right-radius:var(--tv-DateTable-td-border-radius)}.tiny-date-table td.disabled div{background-color:var(--tv-DateTable-bg-color-disabled);opacity:1;cursor:not-allowed;color:var(--tv-DateTable-text-color-disabled);border-top-left-radius:var(--tv-DateTable-td-border-radius-disabled);border-bottom-left-radius:var(--tv-DateTable-td-border-radius-disabled)}.tiny-date-table td.in-range div{background-color:var(--tv-DateTable-range-bg-color)}.tiny-date-table td.in-range.end-date:hover span,.tiny-date-table td.in-range.start-date:hover span{background-color:var(--tv-DateTable-bg-color-current-select)}.tiny-date-table td.available{padding:0}.tiny-date-table td.selected div{margin-left:4px;margin-right:4px}.tiny-date-table td.selected span{background-color:var(--tv-DateTable-bg-color-current-select);color:var(--tv-DateTable-td-normal-text-color);border:none;border-radius:var(--tv-DateTable-cell-border-radius-selected)}.tiny-date-table td.selected.available:hover span{background-color:var(--tv-DateTable-bg-color-current-select)}.tiny-date-table td.selected.in-range div{background-color:var(--tv-DateTable-td-bg-color-range-selected)}.tiny-date-table td.week{font-size:80%;color:var(--tv-DateTable-text-color)}.tiny-date-table th{color:var(--tv-DateTable-th-text-color);font-weight:400;white-space:nowrap;vertical-align:middle}.tiny-date-table__row .disabled+.disabled div{border-radius:unset}.tiny-date-table__row .disabled:not(:has(+.disabled)) div{border-top-right-radius:var(--tv-DateTable-td-border-radius-disabled);border-bottom-right-radius:var(--tv-DateTable-td-border-radius-disabled)}.tiny-date-table__row td:first-of-type div{border-top-left-radius:var(--tv-DateTable-td-border-radius-disabled);border-bottom-left-radius:var(--tv-DateTable-td-border-radius-disabled)}.tiny-date-table__row td:last-of-type div{border-top-right-radius:var(--tv-DateTable-td-border-radius-disabled);border-bottom-right-radius:var(--tv-DateTable-td-border-radius-disabled)}.tiny-date-table__row td.pre-month+td.available.in-range div{border-top-left-radius:var(--tv-DateTable-td-border-radius-disabled);border-bottom-left-radius:var(--tv-DateTable-td-border-radius-disabled)}.tiny-date-table__row td.available.in-range:has(+td.next-month) div{border-top-right-radius:var(--tv-DateTable-td-border-radius-disabled);border-bottom-right-radius:var(--tv-DateTable-td-border-radius-disabled)}