various-ui/styles/date-range-picker.css

This is a test version of the Vue 3 component library

.ui-date-range-picker{cursor:pointer;position:relative}.ui-date-range-picker .ui-form-control{display:flex;align-items:center}.ui-date-range-picker .ui-form-control .ui-date-range-context{flex:1;width:0;color:var(--uioption-form-font-color);cursor:pointer;border:0;padding:0;text-align:center}.ui-date-range-picker .ui-form-control .ui-date-range-rect{width:16px;height:2px;margin:0 var(--uisize-spacing-x);background-color:var(--uicolor-font-2)}.ui-date-range-picker .ui-form-candidates.ui-form-candidates-detach{left:50%;transform:translateX(-50%)}.ui-date-range-picker.ui-active .ui-form-control,.ui-date-range-picker:hover .ui-form-control{border-color:var(--uioption-form-active-color)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header{height:40px;display:flex;padding:0 var(--uisize-spacing-x);border-bottom:1px solid var(--uicolor-font-4-05)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-context{flex:1;color:var(--uicolor-font-1);display:flex;transition:color .3s;align-items:center;font-weight:700;justify-content:center}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-context>span:not(:first-child){margin-left:8px}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-context.ui-candidates-selector{cursor:pointer}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-context.ui-candidates-selector:hover{color:var(--uicolor-main-color)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-controls{display:flex}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-controls .ui-candidates-control{cursor:pointer;display:flex;padding:0 4px;font-size:18px;-webkit-user-select:none;user-select:none;align-items:center;transition:color .5s}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-controls .ui-candidates-control:hover{color:var(--uicolor-main-color)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-controls.ui-candidates-left .ui-candidates-month{transform:rotate(90deg)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-controls.ui-candidates-right .ui-candidates-year{transform:rotate(180deg)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-header .ui-candidates-controls.ui-candidates-right .ui-candidates-month{transform:rotate(-90deg)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidates-footer{padding:8px var(--uisize-spacing-x);text-align:right;border-top:1px solid var(--uicolor-font-4-05)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidate,.ui-form-candidates .ui-date-range-picker-candidate .ui-candidate-context{display:flex;align-items:center;justify-content:center}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidate{cursor:pointer;transition:background-color .5s;-webkit-user-select:none;user-select:none;border-radius:var(--uisize-radius)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidate:hover{background-color:var(--uicolor-font-5)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidate.ui-active{color:#fff;background-color:var(--uicolor-main-color)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidate.ui-other-status{color:var(--uicolor-font-4)}.ui-form-candidates .ui-date-range-picker-candidate .ui-candidate.ui-contain-status{background-color:var(--uicolor-main-color-005)}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-time .ui-candidate-modules{display:flex}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-time .ui-candidate-modules .ui-candidate-module:not(:first-child){border-left:1px solid var(--uicolor-font-4-05)}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-time .ui-candidates-times{display:flex;text-align:center}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-time .ui-candidates-times>.ui-candidates-time{width:56px;padding:4px}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-time .ui-candidates-times>.ui-candidates-time .ui-simplebar-slideway{width:8px;background-color:var(--uicolor-font-4-05)}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-time .ui-candidates-times>.ui-candidates-time .ui-simplebar-slideway .ui-simplebar-bar{border-radius:9999px;border-color:var(--uicolor-font-4-05)}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-time .ui-candidates-times>.ui-candidates-time:not(:first-child){border-left:1px solid var(--uicolor-font-4-05)}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-date .ui-candidates-date{width:calc((var(--uisize-spacing-x) * 2) + 276px);display:flex;padding:var(--uisize-spacing-y) var(--uisize-spacing-x);flex-wrap:wrap}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-date .ui-candidates-date .ui-candidate,.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-date .ui-candidates-date .ui-candidate-context{width:36px;height:36px}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-date .ui-candidates-date .ui-candidate-context:not(:nth-child(7n+1)),.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-date .ui-candidates-date .ui-candidate:not(:nth-child(7n+1)){margin-left:4px}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-date .ui-candidates-date .ui-candidate-context:nth-child(n+8),.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-date .ui-candidates-date .ui-candidate:nth-child(n+8){margin-top:4px}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-month .ui-candidates-month{width:calc((var(--uisize-spacing-x) * 2) + (80px * 3) + 16px);display:flex;padding:var(--uisize-spacing-y) var(--uisize-spacing-x);flex-wrap:wrap;justify-content:space-between}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-month .ui-candidates-month .ui-candidate{width:80px;height:36px}.ui-form-candidates .ui-date-range-picker-candidate.ui-picker-month .ui-candidates-month .ui-candidate:nth-child(n+4){margin-top:8px}