@arco-design/web-react
Version:
Arco Design React UI Library.
1 lines • 9.07 kB
CSS
.arco-calendar{box-sizing:border-box;border:1px solid var(--color-neutral-3)}.arco-calendar-header{display:flex;padding:24px 24px}.arco-calendar-header-left{display:flex;flex:1;align-items:center;position:relative;height:28px;line-height:28px}.arco-calendar-header-right{height:28px;position:relative}.arco-calendar-header-value{font-size:20px;font-weight:500;color:var(--color-text-1)}.arco-calendar-header-icon{width:28px;height:28px;line-height:28px;border-radius:50%;text-align:center;font-size:12px;transition:all .1s cubic-bezier(0,0,1,1);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:12px;color:var(--color-text-2);background-color:var(--color-bg-5)}.arco-calendar-header-icon:not(:first-child){margin:0 12px}.arco-calendar-header-icon:focus-visible{box-shadow:0 0 0 2px var(--color-primary-light-3)}.arco-calendar-header-icon:not(.arco-calendar-header-icon-hidden){cursor:pointer}.arco-calendar-header-icon:not(.arco-calendar-header-icon-hidden):hover{background-color:var(--color-fill-3)}.arco-calendar .arco-calendar-header-value-year{width:100px;margin-right:8px}.arco-calendar .arco-calendar-header-value-month{width:76px;margin-right:32px}.arco-calendar-month{width:100%}.arco-calendar-month-row{height:100px;display:flex}.arco-calendar-month-row .arco-calendar-cell{flex:1;border-bottom:1px solid var(--color-neutral-3);overflow:hidden}.arco-calendar-month-row:last-child .arco-calendar-cell{border-bottom:unset}.arco-calendar-month-cell-body{box-sizing:border-box}.arco-calendar-mode-month:not(.arco-calendar-panel) .arco-calendar-cell:not(:last-child){border-right:1px solid var(--color-neutral-3)}.arco-calendar-week-list{display:flex;padding:0;width:100%;box-sizing:border-box;border-bottom:1px solid var(--color-neutral-3)}.arco-calendar-week-list-item{padding:20px 16px;text-align:left;color:#7d7d7f;flex:1}.arco-calendar-cell .arco-calendar-date{height:100%;width:100%;padding:10px;box-sizing:border-box;cursor:pointer}.arco-calendar-cell .arco-calendar-date-circle{width:28px;height:28px;line-height:28px;border-radius:50%;text-align:center}.arco-calendar-date-content{height:70px;overflow-y:auto}.arco-calendar-cell-today .arco-calendar-date-circle{box-sizing:border-box;border:1px solid rgb(var(--primary-6))}.arco-calendar-date-value{font-size:16px;font-weight:500;color:var(--color-text-4)}.arco-calendar-cell-in-view .arco-calendar-date-value{color:var(--color-text-1)}.arco-calendar-mode-month .arco-calendar-cell-selected .arco-calendar-date-circle{border:1px solid rgb(var(--primary-6));background-color:rgb(var(--primary-6));color:#fff}.arco-calendar-mode-year .arco-calendar-cell-selected .arco-calendar-cell-selected .arco-calendar-date-circle{border:1px solid rgb(var(--primary-6));background-color:rgb(var(--primary-6));color:#fff}.arco-calendar-mode-year:not(.arco-calendar-panel){min-width:820px}.arco-calendar-mode-year .arco-calendar-header{border-bottom:1px solid var(--color-neutral-3)}.arco-calendar-mode-year .arco-calendar-body{padding:12px}.arco-calendar-mode-year .arco-calendar-year-row{display:flex}.arco-calendar-year-row>.arco-calendar-cell{flex:1;padding:20px 8px}.arco-calendar-year-row>.arco-calendar-cell:not(:last-child){border-right:1px solid var(--color-neutral-3)}.arco-calendar-year-row:not(:last-child)>.arco-calendar-cell{border-bottom:1px solid var(--color-neutral-3)}.arco-calendar-month-with-days .arco-calendar-month-row{height:26px}.arco-calendar-month-with-days .arco-calendar-cell{border-bottom:0}.arco-calendar-month-with-days .arco-calendar-month-cell-body{padding:0}.arco-calendar-month-with-days .arco-calendar-month-title{padding:10px 6px;font-size:16px;font-weight:500;color:var(--color-text-1)}.arco-calendar-month-cell{font-size:12px;width:100%}.arco-calendar-month-cell .arco-calendar-week-list{border-bottom:unset;padding:0}.arco-calendar-month-cell .arco-calendar-week-list-item{padding:6px;text-align:center;color:#7d7d7f}.arco-calendar-month-cell .arco-calendar-cell{text-align:center}.arco-calendar-month-cell .arco-calendar-date{padding:2px}.arco-calendar-month-cell .arco-calendar-date-value{font-size:14px}.arco-calendar-month-cell .arco-calendar-date-circle{display:inline-block;width:22px;height:22px;line-height:22px;border-radius:50%;text-align:center}.arco-calendar-panel{border:1px solid var(--color-neutral-3);background-color:var(--color-bg-5)}.arco-calendar-panel .arco-calendar-header{padding:8px 16px;border-bottom:1px solid var(--color-neutral-3)}.arco-calendar-panel .arco-calendar-header-value{font-size:14px;line-height:24px;flex:1;text-align:center}.arco-calendar-panel .arco-calendar-header-icon{width:24px;height:24px;line-height:24px;margin-left:2px;margin-right:2px}.arco-calendar-panel .arco-calendar-body{padding:14px 16px}.arco-calendar-panel .arco-calendar-month-cell-body{padding:0}.arco-calendar-panel .arco-calendar-month-row{height:unset}.arco-calendar-panel .arco-calendar-week-list{padding:0;border-bottom:unset}.arco-calendar-panel .arco-calendar-week-list-item{padding:0;text-align:center;font-weight:400;height:32px;line-height:32px}.arco-calendar-panel .arco-calendar-cell,.arco-calendar-panel .arco-calendar-year-row .arco-calendar-cell{text-align:center;box-sizing:border-box;padding:2px 0;border-bottom:0;border-right:0}.arco-calendar-panel .arco-calendar-cell .arco-calendar-date{padding:4px 0;display:flex;justify-content:center}.arco-calendar-panel .arco-calendar-cell .arco-calendar-date-value{font-size:14px;min-width:24px;height:24px;line-height:24px;cursor:pointer}.arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell{padding:4px 0}.arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell .arco-calendar-date{padding:4px}.arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell .arco-calendar-date-value{border-radius:12px;width:100%}.arco-calendar-panel .arco-calendar-cell-selected .arco-calendar-date-value{color:var(--color-white);background-color:rgb(var(--primary-6));border-radius:50%}.arco-calendar-panel .arco-calendar-cell:not(.arco-calendar-cell-selected):not(.arco-calendar-cell-range-start):not(.arco-calendar-cell-range-end):not(.arco-calendar-cell-hover-range-start):not(.arco-calendar-cell-hover-range-end):not(.arco-calendar-cell-disabled):not(.arco-calendar-cell-week) .arco-calendar-date-value:hover{background-color:var(--color-primary-light-1);border-radius:50%;color:rgb(var(--primary-6))}.arco-calendar-panel.arco-calendar-mode-year .arco-calendar-cell:not(.arco-calendar-cell-selected):not(.arco-calendar-cell-range-start):not(.arco-calendar-cell-range-end):not(.arco-calendar-cell-hover-range-start):not(.arco-calendar-cell-hover-range-end):not(.arco-calendar-cell-disabled) .arco-calendar-date-value:hover{border-radius:12px}.arco-calendar-panel .arco-calendar-cell-today{position:relative}.arco-calendar-panel .arco-calendar-cell-today::after{content:'';display:block;position:absolute;bottom:0;left:50%;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:rgb(var(--primary-6))}.arco-calendar-cell-in-range .arco-calendar-date{background-color:var(--color-primary-light-1)}.arco-calendar-cell-range-start .arco-calendar-date{border-radius:16px 0 0 16px}.arco-calendar-cell-range-end .arco-calendar-date{border-radius:0 16px 16px 0}.arco-calendar-cell-in-range-near-hover .arco-calendar-date{border-radius:0}.arco-calendar-cell-range-end .arco-calendar-date-value,.arco-calendar-cell-range-start .arco-calendar-date-value{background-color:rgb(var(--primary-6));border-radius:50%;color:var(--color-white)}.arco-calendar-cell-hover-in-range .arco-calendar-date{background-color:var(--color-primary-light-1)}.arco-calendar-cell-hover-range-start .arco-calendar-date{border-radius:16px 0 0 16px}.arco-calendar-cell-hover-range-end .arco-calendar-date{border-radius:0 16px 16px 0}.arco-calendar-cell-hover-range-end .arco-calendar-date-value,.arco-calendar-cell-hover-range-start .arco-calendar-date-value{background-color:var(--color-primary-light-2);border-radius:50%;color:var(--color-text-1)}.arco-calendar-panel .arco-calendar-cell-disabled>.arco-calendar-date{background-color:var(--color-fill-1);cursor:not-allowed}.arco-calendar-panel .arco-calendar-cell-disabled>.arco-calendar-date>.arco-calendar-date-value{color:var(--color-text-4);background-color:var(--color-fill-1);cursor:not-allowed}.arco-calendar-panel .arco-calendar-footer-btn-wrapper{height:38px;line-height:38px;text-align:center;border-top:1px solid var(--color-neutral-3);cursor:pointer;color:var(--color-text-1)}.arco-calendar-rtl{direction:rtl}.arco-calendar-rtl .arco-calendar-header-icon{margin-right:0;margin-left:12px;transform:scaleX(-1)}.arco-calendar-rtl .arco-calendar-week-list-item{text-align:right}.arco-calendar-rtl.arco-calendar-mode-month:not(.arco-calendar-panel) .arco-calendar-cell:not(:last-child){border-left:1px solid var(--color-neutral-3);border-right:0}.arco-calendar-rtl .arco-calendar-header-value-year{margin-left:8px;margin-right:0}.arco-calendar-rtl .arco-calendar-header-value-month{margin-right:0;margin-left:32px}