song-ui-u/theme/data-picker.css

vue3 + js的PC前端组件库

@charset "UTF-8";.x-date-picker{position:relative;width:100%;display:inline-block}.x-date-picker__input{width:200px}.x-date-picker__input.is-range{width:230px}.x-date-picker__panel{position:absolute;top:100%;left:0;z-index:2000;border:1px solid #e4e7ed;border-radius:4px;background-color:#fff;box-shadow:0 2px 12px 0 rgba(0,0,0,.1);margin-top:12px;padding:16px;width:320px}.x-date-picker--panel_range{display:flex;width:640px;justify-content:space-between}.x-date-picker__panel-left{flex:1}.x-date-picker__panel-right{flex:1;border-left:1px solid #e4e7ed;margin-left:16px;padding-left:16px}.x-date-picker__header{display:flex;align-items:center;justify-content:space-between;padding:0 8px 16px;border-bottom:1px solid #e4e7ed}.x-date-picker__header span{cursor:pointer;padding:4px;border-radius:4px}.x-date-picker__header span:hover{background-color:#f5f7fa}.x-date-picker__header-label{font-size:16px;font-weight:500;color:#303133}.x-date-picker__week-header{display:flex;padding:12px 0}.x-date-picker__week-header span{flex:1;text-align:center;color:#909399;font-size:14px}.x-date-picker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.x-date-picker__months{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 0}.x-date-picker__years{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 0}.x-date-picker__cell{height:36px;line-height:36px;text-align:center;cursor:pointer;border-radius:4px;font-size:14px;color:#303133}.x-date-picker__cell:hover{background-color:#f5f7fa}.x-date-picker__cell.is-today{color:var(--x-color-primary);font-weight:500}.x-date-picker__cell.is-selected{background-color:var(--x-color-primary);color:#fff;font-weight:500}.x-date-picker__cell.is-selected:hover{background-color:var(--x-color-primary)}.x-date-picker__cell.is-in-range{background-color:#e6f7ff;color:var(--x-color-primary)}.x-date-picker__cell.is-range-start{background-color:var(--x-color-primary);color:#fff;border-top-right-radius:0;border-bottom-right-radius:0}.x-date-picker__cell.is-range-end{background-color:var(--x-color-primary);color:#fff;border-top-left-radius:0;border-bottom-left-radius:0}.x-date-picker__cell.is-disabled{cursor:not-allowed;color:#c0c4cc;background-color:#f5f7fa}.x-date-picker__cell.is-not-current-month{color:#909399}.x-date-picker-enter-active,.x-date-picker-leave-active{transition:opacity .3s ease-in-out,transform .3s ease-in-out;transform-origin:top}.x-date-picker-enter-from,.x-date-picker-leave-to{opacity:0;transform:scaleY(0)}.x-date-picker-enter-to,.x-date-picker-leave-from{opacity:1;transform:scaleY(1)}