vexip-ui/css/calendar.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-calendar-vars{--vxp-calendar-index-color-hover:var(--vxp-content-color-base);--vxp-calendar-index-color-selected:var(--vxp-color-white);--vxp-calendar-index-color-outside:var(--vxp-content-color-disabled);--vxp-calendar-index-color-today:var(--vxp-color-primary-base);--vxp-calendar-index-color-disabled:var(--vxp-content-color-humble);--vxp-calendar-index-bg-color:transparent;--vxp-calendar-index-bg-color-week:transparent;--vxp-calendar-index-bg-color-hover:var(--vxp-color-primary-opacity-7);--vxp-calendar-index-bg-color-selected:var(--vxp-color-primary-base);--vxp-calendar-index-bg-color-disabled:var(--vxp-calendar-index-bg-color);--vxp-calendar-index-bg-color-today:var(--vxp-calendar-index-bg-color);--vxp-calendar-index-bg-color-outside:var(--vxp-calendar-index-bg-color);--vxp-calendar-index-b-width:0;--vxp-calendar-index-b-style:var(--vxp-border-style);--vxp-calendar-index-b-color:var(--vxp-border-color-base);--vxp-calendar-index-b-color-selected:var(--vxp-color-primary-opacity-2);--vxp-calendar-index-b-color-disabled:var(--vxp-border-color-opacity-2);--vxp-calendar-index-b-color-outside:var(--vxp-border-color-opacity-1);--vxp-calendar-index-width:100%;--vxp-calendar-index-height:auto;--vxp-calendar-index-border:var(--vxp-calendar-index-b-width) var(--vxp-calendar-index-b-style) var(--vxp-calendar-index-b-color);--vxp-calendar-index-radius:var(--vxp-radius-base);--vxp-calendar-range-bg-color:var(--vxp-color-primary-opacity-8);--vxp-calendar-range-opacity:60%;--vxp-calendar-header-height:50px;--vxp-calendar-date-color-today:var(--vxp-color-primary-base);--vxp-calendar-date-color-outside:var(--vxp-content-color-disabled);--vxp-calendar-date-color-disabled:var(--vxp-content-color-humble);--vxp-calendar-date-bg-color:transparent;--vxp-calendar-date-bg-color-hover:var(--vxp-color-primary-opacity-9);--vxp-calendar-date-bg-color-selected:var(--vxp-color-primary-opacity-8);--vxp-calendar-date-bg-color-disabled:var(--vxp-calendar-date-bg-color);--vxp-calendar-date-bg-color-outside:var(--vxp-calendar-date-bg-color);--vxp-calendar-date-b-width:2px;--vxp-calendar-date-b-style:var(--vxp-border-style);--vxp-calendar-date-b-color:var(--vxp-border-color-base);--vxp-calendar-date-b-color-selected:var(--vxp-color-primary-light-2);--vxp-calendar-date-b-color-disabled:var(--vxp-border-color-light-2);--vxp-calendar-date-b-color-outside:var(--vxp-border-color-light-1);--vxp-calendar-date-border:var(--vxp-calendar-date-b-width) var(--vxp-calendar-date-b-style) var(--vxp-calendar-date-b-color);--vxp-calendar-content-height:90px;--vxp-calendar-content-v-padding:4px;--vxp-calendar-content-h-padding:4px}.vxp-calendar__panel{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;flex-direction:column;align-items:center;justify-content:center}.vxp-calendar__panel,.vxp-calendar__panel *,.vxp-calendar__panel ::after,.vxp-calendar__panel ::before{box-sizing:border-box}.vxp-calendar__panel--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-calendar__action{display:flex}.vxp-calendar__row{display:flex;padding:2px 0}.vxp-calendar__cell{display:flex;padding:0 2px}.vxp-calendar__index{position:relative;display:flex;align-items:center;justify-content:center;width:var(--vxp-calendar-index-width);height:var(--vxp-calendar-index-height);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:transparent;border-radius:var(--vxp-calendar-index-radius);outline:0}.vxp-calendar__index-inner{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--vxp-calendar-index-bg-color);border:var(--vxp-calendar-index-border);border-radius:var(--vxp-calendar-index-radius);transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-calendar__index--today .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-today);background-color:var(--vxp-calendar-index-bg-color-today);border-color:var(--vxp-calendar-index-b-color-today)}.vxp-calendar__index--next .vxp-calendar__index-inner,.vxp-calendar__index--prev .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-outside);background-color:var(--vxp-calendar-index-bg-color-outside);border-color:var(--vxp-calendar-index-b-color-outside)}.vxp-calendar__index--hovered .vxp-calendar__index-inner,.vxp-calendar__index:focus .vxp-calendar__index-inner,.vxp-calendar__index:hover .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-hover);background-color:var(--vxp-calendar-index-bg-color-hover);border-color:var(--vxp-calendar-index-b-color-hover)}.vxp-calendar__index--selected .vxp-calendar__index-inner,.vxp-calendar__index--selected.vxp-calendar__index--hovered .vxp-calendar__index-inner,.vxp-calendar__index--selected:focus .vxp-calendar__index-inner,.vxp-calendar__index--selected:hover .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-selected);background-color:var(--vxp-calendar-index-bg-color-selected);border-color:var(--vxp-calendar-index-b-color-selected)}.vxp-calendar__index--disabled .vxp-calendar__index-inner,.vxp-calendar__index--disabled.vxp-calendar__index--hovered .vxp-calendar__index-inner,.vxp-calendar__index--disabled:focus .vxp-calendar__index-inner,.vxp-calendar__index--disabled:hover .vxp-calendar__index-inner{color:var(--vxp-calendar-index-color-disabled);cursor:not-allowed;background-color:var(--vxp-calendar-index-bg-color-disabled);border-color:var(--vxp-calendar-index-b-color-disabled)}.vxp-calendar__index::before{position:absolute;inset:2px -2px;display:none;pointer-events:none;content:"";background-color:var(--vxp-calendar-range-bg-color);opacity:var(--vxp-calendar-range-opacity)}.vxp-calendar__index--in-range::before{display:block}.vxp-calendar__panel--select-row .vxp-calendar__index,.vxp-calendar__panel--select-row .vxp-calendar__index-inner{border-radius:0}.vxp-calendar__panel--select-row .vxp-calendar__cell{padding:0}.vxp-calendar__panel--select-row .vxp-calendar__cell:first-child .vxp-calendar__index,.vxp-calendar__panel--select-row .vxp-calendar__cell:first-child .vxp-calendar__index-inner{border-start-start-radius:var(--vxp-calendar-index-radius);border-end-start-radius:var(--vxp-calendar-index-radius)}.vxp-calendar__panel--select-row .vxp-calendar__cell:last-child .vxp-calendar__index,.vxp-calendar__panel--select-row .vxp-calendar__cell:last-child .vxp-calendar__index-inner{border-start-end-radius:var(--vxp-calendar-index-radius);border-end-end-radius:var(--vxp-calendar-index-radius)}.vxp-calendar__row--week .vxp-calendar__index{cursor:default}.vxp-calendar__row--week .vxp-calendar__index:hover{background-color:var(--vxp-calendar-index-bg-color-week)}.vxp-calendar__row--week .vxp-calendar__index::before,.vxp-calendar__row--week .vxp-calendar__index:hover::before{display:none;content:none}.vxp-calendar{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);width:100%}.vxp-calendar,.vxp-calendar *,.vxp-calendar ::after,.vxp-calendar ::before{box-sizing:border-box}.vxp-calendar__header{width:100%;height:var(--vxp-calendar-header-height);padding-bottom:10px}.vxp-calendar__actions{display:flex;align-items:center}.vxp-calendar__year-input{min-width:100px;margin-inline-end:14px}.vxp-calendar__month-input{min-width:80px}.vxp-calendar__body,.vxp-calendar__row{width:100%}.vxp-calendar__cell{width:14.2857142857%}.vxp-calendar__week{display:flex;align-items:center;justify-content:flex-end;width:100%;padding:2px 4px}.vxp-calendar__week-value{display:flex;align-items:center;justify-content:center;min-width:var(--vxp-calendar-index-size);height:var(--vxp-calendar-index-size)}.vxp-calendar__date{width:100%;padding:4px 4px 0;margin:0 2px;cursor:pointer;background-color:var(--vxp-calendar-date-bg-color);border-top:var(--vxp-calendar-date-border);outline:0;transition:var(--vxp-transition-color),var(--vxp-transition-background),var(--vxp-transition-border)}.vxp-calendar__date:focus,.vxp-calendar__date:hover{background-color:var(--vxp-calendar-date-bg-color-hover)}.vxp-calendar__date--today{color:var(--vxp-calendar-date-color-today)}.vxp-calendar__date--next,.vxp-calendar__date--prev{color:var(--vxp-calendar-date-color-outside);background-color:var(--vxp-calendar-date-bg-color-outside);border-top-color:var(--vxp-calendar-date-b-color-outside)}.vxp-calendar__date--selected,.vxp-calendar__date--selected:focus,.vxp-calendar__date--selected:hover{background-color:var(--vxp-calendar-date-bg-color-selected);border-top-color:var(--vxp-calendar-date-b-color-selected)}.vxp-calendar__date--disabled,.vxp-calendar__date--disabled:focus,.vxp-calendar__date--disabled:hover{color:var(--vxp-calendar-date-color-disabled);cursor:not-allowed;background-color:var(--vxp-calendar-date-bg-color-disabled);border-top-color:var(--vxp-calendar-date-b-color-disabled)}.vxp-calendar__date-header{display:flex;align-items:center;justify-content:flex-end;height:var(--vxp-calendar-index-size);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-calendar__date-value{display:flex;align-items:center;justify-content:center;width:var(--vxp-calendar-index-size)}.vxp-calendar__date-content{height:var(--vxp-calendar-content-height);padding:var(--vxp-calendar-content-v-padding) var(--vxp-calendar-content-h-padding);overflow:auto}