bi-eleme 2.1.2 → 2.4.1

package/packages/theme-chalk/lib/super-date.css

@@ -0,0 +1 @@
+.el-date-table,.el-time-panel{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.el-date-table{font-size:12px;user-select:none}.el-date-table.is-week-mode .el-date-table__row:hover div{background-color:#f2f3f5}.el-date-table.is-week-mode .el-date-table__row:hover td.available:hover{color:#4e5969}.el-date-table.is-week-mode .el-date-table__row:hover td:first-child div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table.is-week-mode .el-date-table__row:hover td:last-child div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table.is-week-mode .el-date-table__row.current div{background-color:#eaf7f3ff}.el-date-table td{width:32px;height:30px;padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;cursor:pointer;position:relative}.el-date-table td div{height:30px;padding:3px 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-date-table td span{width:24px;height:24px;display:block;margin:0 auto;line-height:24px;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);border-radius:50%}.el-date-table td span:hover{background-color:#f2f3f5}.el-date-table td.next-month,.el-date-table td.prev-month{color:#c9cdd4}.el-date-table td.today{position:relative}.el-date-table td.today span{color:#00bf8a;font-weight:700}.el-date-table td.today.end-date span,.el-date-table td.today.start-date span{color:#fff}.el-date-table td.available:hover{color:#00bf8a}.el-date-table td.in-range div,.el-date-table td.in-range div:hover{background-color:#eaf7f3ff}.el-date-table td.current:not(.disabled) span{color:#fff;background-color:#00bf8a}.el-date-table td.end-date div,.el-date-table td.start-date div{color:#fff}.el-date-table td.end-date span,.el-date-table td.start-date span{background-color:#00bf8a}.el-date-table td.start-date div{margin-left:5px;border-top-left-radius:15px;border-bottom-left-radius:15px}.el-date-table td.end-date div{margin-right:5px;border-top-right-radius:15px;border-bottom-right-radius:15px}.el-date-table td.disabled div{background-color:#f6f8f9;opacity:1;cursor:not-allowed;color:#c9cdd4}.el-date-table td.selected div{margin-left:5px;margin-right:5px;background-color:#f2f3f5;border-radius:15px}.el-date-table td.selected div:hover{background-color:#f2f3f5}.el-date-table td.selected span{background-color:#00bf8a;color:#fff;border-radius:15px}.el-date-table td.week{font-size:80%;color:#86909c}.el-date-table th{padding:5px;color:#86909c;font-weight:500}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:7px 0;cursor:pointer}.el-month-table td div{padding:4px 0;-webkit-box-sizing:border-box;box-sizing:border-box}.el-month-table td.today .cell{color:#00bf8a;font-weight:700;position:relative}.el-month-table td.today .cell::after{content:' ';width:4px;height:4px;position:absolute;bottom:-4px;left:50%;margin-left:-2px;background-color:#00bf8a;border-radius:2px}.el-month-table td.today.end-date .cell,.el-month-table td.today.start-date .cell{color:#fff}.el-month-table td.disabled .cell{background-color:#f6f8f9;cursor:not-allowed;color:#c9cdd4}.el-month-table td.disabled .cell:hover{color:#c9cdd4}.el-month-table td .cell{width:56px;height:24px;display:block;line-height:24px;color:#4e5969;margin:0 auto;border-radius:4px}.el-month-table td .cell:hover{background-color:#f2f3f5}.el-month-table td.in-range div,.el-month-table td.in-range div:hover{background-color:#eaf7f3ff}.el-month-table td.end-date div,.el-month-table td.start-date div{color:#fff}.el-month-table td.end-date .cell,.el-month-table td.start-date .cell{color:#fff;border-radius:20px;background-color:#00bf8a}.el-month-table td.start-date div{border-top-left-radius:24px;border-bottom-left-radius:24px}.el-month-table td.end-date div{border-top-right-radius:24px;border-bottom-right-radius:24px}.el-month-table td.current:not(.disabled) .cell{color:#fff;background-color:#00bf8a}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#323335}.el-year-table td{text-align:center;padding:7px 0;cursor:pointer}.el-year-table td.today .cell{color:#00bf8a;font-weight:700;position:relative}.el-year-table td.today .cell::after{content:' ';width:4px;height:4px;position:absolute;bottom:-4px;left:50%;margin-left:-2px;background-color:#00bf8a;border-radius:2px}.el-year-table td.disabled .cell{background-color:#f6f8f9;cursor:not-allowed;color:#c9cdd4}.el-range-editor.is-disabled,.el-range-editor.is-disabled input{background-color:#f2f3f5;cursor:not-allowed;color:#c9cdd4}.el-year-table td.disabled .cell:hover{color:#c9cdd4}.el-year-table td .cell{width:56px;height:24px;display:block;line-height:24px;color:#4e5969;margin:0 auto;border-radius:4px}.el-year-table td .cell:hover{background-color:#f2f3f5}.el-year-table td.current:not(.disabled) .cell{color:#fff;background-color:#00bf8a}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33.3%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner__wrapper.is-arrow{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;overflow:hidden}.el-time-spinner__wrapper.is-arrow .el-time-spinner__list{-webkit-transform:translateY(-32px);transform:translateY(-32px)}.el-time-spinner__wrapper.is-arrow .el-time-spinner__item:hover:not(.disabled):not(.active){background:#fff;cursor:default}.el-time-spinner__arrow{font-size:12px;color:#86909c;position:absolute;left:0;width:100%;z-index:1;text-align:center;height:30px;line-height:30px;cursor:pointer}.el-time-spinner__arrow:hover{color:#00bf8a}.el-time-spinner__arrow.el-icon-arrow-up{top:10px}.el-time-spinner__arrow.el-icon-arrow-down{bottom:10px}.el-time-spinner__input.el-input{width:70%}.el-time-spinner__input.el-input .el-input__inner{padding:0;text-align:center}.el-time-spinner__list{padding:0 4px;margin:0;list-style:none;text-align:center}.el-time-spinner__list::after,.el-time-spinner__list::before{content:'';display:block;width:100%;height:80px}.el-time-spinner__item{height:28px;line-height:28px;font-size:12px;color:#4e5969;border-radius:4px}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#f6f8f9;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#323335;font-weight:700}.el-time-spinner__item.disabled{color:#c9cdd4;cursor:not-allowed}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1,1);transform:scale(1,1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45,.45);transform:scale(.45,.45)}.collapse-transition{-webkit-transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out;transition:.3s height ease-in-out,.3s padding-top ease-in-out,.3s padding-bottom ease-in-out}.horizontal-collapse-transition{-webkit-transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out;transition:.3s width ease-in-out,.3s padding-left ease-in-out,.3s padding-right ease-in-out}.el-list-enter-active,.el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}.el-super-date{position:relative;display:inline-block;text-align:left}.el-super-date .el-range-input,.el-super-date .el-range-separator{height:100%;margin:0;text-align:center;display:inline-block;font-size:14px}.el-super-date.el-input,.el-super-date.el-input__inner{width:220px}.el-super-date .el-range__close-icon,.el-super-date .el-range__icon{width:16px}.el-super-date--monthrange.el-input,.el-super-date--monthrange.el-input__inner{width:300px}.el-super-date--daterange.el-input,.el-super-date--daterange.el-input__inner,.el-super-date--timerange.el-input,.el-super-date--timerange.el-input__inner{width:350px}.el-super-date--datetimerange.el-input,.el-super-date--datetimerange.el-input__inner{width:400px}.el-super-date--dates .el-input__inner{text-overflow:ellipsis;white-space:nowrap}.el-super-date .el-icon-close-circle-fill{cursor:pointer}.el-super-date .el-range__icon{width:16px;font-size:14px;color:#86909c;float:left;line-height:32px}.el-super-date .el-range-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:0;padding:0;width:calc(100% - 32px);color:#4e5969}.el-super-date .el-range-input::-webkit-input-placeholder{color:#c9cdd4}.el-super-date .el-range-input::-moz-placeholder{color:#c9cdd4}.el-super-date .el-range-input:-ms-input-placeholder{color:#c9cdd4}.el-super-date .el-range-input::-ms-input-placeholder{color:#c9cdd4}.el-super-date .el-range-input::placeholder{color:#c9cdd4}.el-super-date .el-range-separator{padding:0 5px;line-height:32px;width:5%;color:#323335}.el-super-date .el-range__close-icon{font-size:14px;color:#86909c;width:15px;display:inline-block;float:right;line-height:32px}.el-range-editor.el-input__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:3px 5px}.el-range-editor .el-range-input{line-height:1}.el-range-editor.is-active{border-color:#00bf8a;-webkit-box-shadow:0 0 0 2px rgba(0,191,138,.1);box-shadow:0 0 0 2px rgba(0,191,138,.1)}.el-picker-panel,.el-time-panel{-webkit-box-shadow:0 4px 10px 0 rgba(0,0,0,.1)}.el-range-editor.is-active:hover{border-color:#00bf8a}.el-range-editor--medium.el-input__inner{height:36px}.el-range-editor--medium .el-range-separator{line-height:28px;font-size:14px}.el-range-editor--medium .el-range-input{font-size:14px}.el-range-editor--medium .el-range__close-icon,.el-range-editor--medium .el-range__icon{line-height:28px}.el-range-editor--small.el-input__inner{height:32px}.el-range-editor--small .el-range-separator{line-height:24px;font-size:13px}.el-range-editor--small .el-range-input{font-size:13px}.el-picker-panel__icon-btn,.el-range-editor--small .el-range__close-icon,.el-range-editor--small .el-range__icon{font-size:16px;line-height:24px}.el-range-editor--mini.el-input__inner{height:24px}.el-range-editor--mini .el-range-separator{line-height:20px;font-size:12px}.el-range-editor--mini .el-range-input{font-size:12px}.el-range-editor--mini .el-range__close-icon,.el-range-editor--mini .el-range__icon{line-height:20px}.el-range-editor.is-disabled,.el-range-editor.is-disabled:focus,.el-range-editor.is-disabled:hover{border-color:#d6d9e0}.el-range-editor.is-disabled input::-webkit-input-placeholder{color:#c9cdd4}.el-range-editor.is-disabled input::-moz-placeholder{color:#c9cdd4}.el-range-editor.is-disabled input:-ms-input-placeholder{color:#c9cdd4}.el-range-editor.is-disabled input::-ms-input-placeholder{color:#c9cdd4}.el-range-editor.is-disabled input::placeholder{color:#c9cdd4}.el-range-editor.is-disabled .el-range-separator{color:#c9cdd4}.el-picker-panel{color:#4e5969;border:1px solid #e5e6eb;box-shadow:0 4px 10px 0 rgba(0,0,0,.1);background:#fff;border-radius:4px;line-height:30px;margin:5px 0}.el-picker-panel__body-wrapper::after,.el-picker-panel__body::after{content:'';display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative;font-size:0}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;height:24px;line-height:24px;font-size:12px;padding:0;color:#4e5969;text-align:center;outline:0;cursor:pointer;border-radius:4px;margin-bottom:10px}.el-picker-panel__shortcut:hover{color:#00bf8a;background-color:#f2f3f5}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#00bf8a}.el-picker-panel__shortcut:last-child{margin-bottom:0}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:0;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{color:#323335;border:0;background:0 0;cursor:pointer;outline:0;height:24px;width:24px;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;padding:0;border-radius:4px}.el-picker-panel__icon-btn:hover{color:#00bf8a;background-color:#f2f3f5}.el-picker-panel__icon-btn.is-disabled{color:#bbb}.el-picker-panel__icon-btn.is-disabled:hover{cursor:not-allowed}.el-picker-panel__link-btn{vertical-align:middle}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;-webkit-box-sizing:border-box;box-sizing:border-box;padding:12px 8px;background-color:#fff;overflow:auto}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-date-picker{width:322px}.el-date-picker.has-sidebar.has-time{width:434px}.el-date-picker.has-sidebar{width:438px}.el-date-picker.has-time .el-picker-panel__body-wrapper{position:relative}.el-date-picker .el-picker-panel__content{width:292px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.el-date-picker__header{padding:8px 12px;-webkit-box-sizing:content-box;box-sizing:content-box;height:24px;text-align:center;border-bottom:solid 1px #e5e6eb;display:-webkit-box;display:-ms-flexbox;display:flex}.el-date-picker__header--bordered{margin-bottom:0;padding-bottom:8px;border-bottom:solid 1px #e5e6eb}.el-date-picker__header-label-warp{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-flex:1;-ms-flex:1;flex:1}.el-date-picker__header-label{font-size:14px;font-weight:500;padding:0 5px;line-height:22px;text-align:center;cursor:pointer;color:#4e5969}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#00bf8a}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.el-super-date-range-picker{width:646px}.el-super-date-range-picker.has-sidebar{width:756px}.el-super-date-range-picker table{table-layout:fixed;width:100%}.el-super-date-range-picker .el-picker-panel__body{min-width:513px;position:relative}.el-super-date-range-picker .el-picker-panel__body .rang-text{position:absolute;top:0;right:0;z-index:1;padding:0 10px;line-height:36px;font-size:12px}.el-super-date-range-picker .el-picker-panel__body .rang-text p,.el-super-date-range-picker .el-picker-panel__content{margin:0}.el-super-date-range-picker .dynamic-content{padding:10px 10px 0}.el-super-date-range-picker .dynamic-content .el-date-table{padding-bottom:5px}.el-super-date-range-picker__header{position:relative;text-align:center;height:24px;line-height:24px;padding:8px 18px;-webkit-box-sizing:content-box;box-sizing:content-box;border-bottom:1px solid #e4e4e4}.el-super-date-range-picker__header [class*=icon-left]{float:left}.el-super-date-range-picker__header [class*=icon-right]{float:right}.el-super-date-range-picker__header div{font-size:16px;font-weight:500;margin-right:50px}.el-super-date-range-picker__content{float:left;width:50%;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}.el-super-date-range-picker__content .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-super-date-range-picker .el-date-table{padding:16px}.el-super-date-range-picker__editors-wrap{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;width:50%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-super-date-range-picker__editors-wrap.is-right{text-align:right}.el-super-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:0 5px 5px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.el-super-date-range-picker__time-header>.el-icon-right{font-size:20px;vertical-align:middle;display:table-cell;color:#323335}.el-super-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-super-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.el-super-date-range-picker__editor .el-input__inner{text-align:center}.el-super-date-range-picker .dynamic-header{padding-bottom:10px}.el-time-range-picker{width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px;-webkit-box-sizing:content-box;box-sizing:content-box}.el-time-range-picker__body{border-radius:2px;border:1px solid #e5e6eb}.el-time-panel{margin:5px 0;border:1px solid #e5e6eb;background-color:#fff;box-shadow:0 4px 10px 0 rgba(0,0,0,.1);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;user-select:none;-webkit-box-sizing:content-box;box-sizing:content-box}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content::after,.el-time-panel__content::before{content:'';top:50%;position:absolute;margin-top:-15px;height:28px;z-index:-1;left:0;right:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:6px;text-align:left;border-top:1px solid #d6d9e0;border-bottom:1px solid #d6d9e0}.el-time-panel__content::after{left:50%;margin-left:12%;margin-right:12%}.el-time-panel__content::before{padding-left:50%;margin-right:12%;margin-left:12%}.el-time-panel__content.has-seconds::after{left:calc(100% / 3 * 2)}.el-time-panel__content.has-seconds::before{padding-left:calc(100% / 3)}.el-time-panel__content.has-arrow::after,.el-time-panel__content.has-arrow::before{margin-top:-19px}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:8px;height:40px;line-height:25px;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.el-input,.el-textarea{display:inline-block;width:100%}.el-textarea{position:relative;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 12px;line-height:1.5;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;font-size:inherit;color:#323335;background-color:#fff;background-image:none;border:1px solid #c9cdd4;border-radius:4px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#c9cdd4}.el-textarea__inner::-moz-placeholder{color:#c9cdd4}.el-textarea__inner:-ms-input-placeholder{color:#c9cdd4}.el-textarea__inner::-ms-input-placeholder{color:#c9cdd4}.el-textarea__inner::placeholder{color:#c9cdd4}.el-textarea__inner:hover{border-color:#c9cdd4}.el-textarea__inner:focus{outline:0;border-color:#00bf8a;-webkit-box-shadow:0 0 0 2px rgba(0,191,138,.1);box-shadow:0 0 0 2px rgba(0,191,138,.1)}.el-textarea .el-input__count{color:#86909c;background:#fff;position:absolute;font-size:12px;bottom:5px;right:10px}.el-textarea.is-disabled .el-textarea__inner{background-color:#f2f3f5;border-color:#d6d9e0;color:#c9cdd4;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#c9cdd4}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#c9cdd4}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#c9cdd4}.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#c9cdd4}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#c9cdd4}.el-textarea.is-exceed .el-textarea__inner{border-color:#f53f3f}.el-textarea.is-exceed .el-input__count{color:#f53f3f}.el-input{position:relative;font-size:14px}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner{background:#fff}.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#86909c;font-size:16px;cursor:pointer;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#86909c}.el-input .el-input__count{height:100%;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#86909c;font-size:12px}.el-input .el-input__count .el-input__count-inner{background:#fff;line-height:initial;display:inline-block;padding:0 5px}.el-input__inner{-webkit-appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #c9cdd4;-webkit-box-sizing:border-box;box-sizing:border-box;color:#323335;display:inline-block;font-size:inherit;height:36px;line-height:36px;outline:0;padding:0 12px;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::-ms-reveal{display:none}.el-input__inner::-webkit-input-placeholder{color:#c9cdd4}.el-input__inner::-moz-placeholder{color:#c9cdd4}.el-input__inner:-ms-input-placeholder{color:#c9cdd4}.el-input__inner::-ms-input-placeholder{color:#c9cdd4}.el-input__inner::placeholder{color:#c9cdd4}.el-input__prefix,.el-input__suffix{position:absolute;font-size:16px;top:0;color:#86909c;text-align:center;height:100%}.el-input__inner:hover{border-color:#c9cdd4}.el-input__inner:focus{outline:0;border-color:#00bf8a;-webkit-box-shadow:0 0 0 2px rgba(0,191,138,.1);box-shadow:0 0 0 2px rgba(0,191,138,.1)}.el-input__suffix{right:5px;-webkit-transition:all .3s;transition:all .3s;pointer-events:none}.el-input__suffix-inner{pointer-events:all;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:100%}.el-input__prefix{left:5px;-webkit-transition:all .3s;transition:all .3s}.el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:36px}.el-input__icon:after{content:'';height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-active .el-input__inner{outline:0;border-color:#00bf8a;-webkit-box-shadow:0 0 0 2px rgba(0,191,138,.1);box-shadow:0 0 0 2px rgba(0,191,138,.1)}.el-input.is-disabled .el-input__inner{background-color:#f2f3f5;border-color:#d6d9e0;color:#c9cdd4;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#c9cdd4}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#c9cdd4}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#c9cdd4}.el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#c9cdd4}.el-input.is-disabled .el-input__inner::placeholder{color:#c9cdd4}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input.is-exceed .el-input__inner{border-color:#f53f3f}.el-input.is-exceed .el-input__suffix .el-input__count{color:#f53f3f}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:24px;line-height:24px}.el-input--mini .el-input__icon{line-height:24px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#f6f8f9;color:#86909c;vertical-align:middle;display:table-cell;position:relative;border:1px solid #c9cdd4;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner,.el-input-group__prepend{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:0}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append .el-select .el-input.is-focus .el-input__inner,.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend .el-select .el-input.is-focus .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;-webkit-box-shadow:none;box-shadow:none;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0}.el-input-group__append{border-left:0}.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input-group--append .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active>.el-scrollbar__bar,.el-scrollbar:focus>.el-scrollbar__bar,.el-scrollbar:hover>.el-scrollbar__bar{opacity:1;-webkit-transition:opacity 340ms ease-out;transition:opacity 340ms ease-out}.el-scrollbar__wrap{overflow:scroll;height:100%}.el-scrollbar__wrap--hidden-default{scrollbar-width:none}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(134,144,156,.3);-webkit-transition:.3s background-color;transition:.3s background-color}.el-scrollbar__thumb:hover{background-color:rgba(134,144,156,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;-webkit-transition:opacity 120ms ease-out;transition:opacity 120ms ease-out}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-popper .popper__arrow,.el-popper .popper__arrow::after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popper .popper__arrow{border-width:0;-webkit-filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03));filter:drop-shadow(0 2px 12px rgba(0, 0, 0, .03))}.el-popper .popper__arrow::after{content:' ';border-width:0}.el-popper[x-placement^=top]{margin-bottom:6px}.el-popper[x-placement^=top] .popper__arrow{bottom:0;left:50%;margin-right:3px;border-top-color:#e5e6eb;border-bottom-width:0}.el-popper[x-placement^=top] .popper__arrow::after{bottom:2px;margin-left:0;border-top-color:#fff;border-bottom-width:0}.el-popper[x-placement^=bottom]{margin-top:2px}.el-popper[x-placement^=bottom] .popper__arrow{top:0;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#e5e6eb}.el-popper[x-placement^=bottom] .popper__arrow::after{top:2px;margin-left:0;border-top-width:0;border-bottom-color:#fff}.el-popper[x-placement^=right]{margin-left:6px}.el-popper[x-placement^=right] .popper__arrow{top:50%;left:0;margin-bottom:3px;border-right-color:#e5e6eb;border-left-width:0}.el-popper[x-placement^=right] .popper__arrow::after{bottom:0;left:2px;border-right-color:#fff;border-left-width:0}.el-popper[x-placement^=left]{margin-right:6px}.el-popper[x-placement^=left] .popper__arrow{top:50%;right:0;margin-bottom:3px;border-right-width:0;border-left-color:#e5e6eb}.el-popper[x-placement^=left] .popper__arrow::after{right:2px;bottom:0;margin-left:0;border-right-width:0;border-left-color:#fff}

package/packages/theme-chalk/src/index.scss

@@ -23,6 +23,7 @@
 @import "./button-group.scss";
 @import "./table.scss";
 @import "./table-column.scss";
+@import "./super-date.scss";
 @import "./date-picker.scss";
 @import "./time-select.scss";
 @import "./time-picker.scss";

package/packages/theme-chalk/src/super-date/date-picker.scss

@@ -0,0 +1,106 @@
+@import '../common/var';
+@import '../mixins/mixins';
+@import './picker-panel.scss';
+
+@include b(date-picker) {
+  width: 322px;
+
+  &.has-sidebar.has-time {
+    width: 434px;
+  }
+
+  &.has-sidebar {
+    width: 438px;
+  }
+
+  &.has-time .el-picker-panel__body-wrapper {
+    position: relative;
+  }
+
+  .el-picker-panel__content {
+    width: 292px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  @include e(editor-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid $--datepicker-inner-border-color;
+    font-size: 12px;
+    padding: 8px 5px 5px 5px;
+    display: table;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(header) {
+    padding: 8px 12px;
+    box-sizing: content-box;
+    height: 24px;
+    text-align: center;
+    border-bottom: solid 1px $--border-color-lighter;
+    display: flex;
+
+    @include m(bordered) {
+      margin-bottom: 0;
+      padding-bottom: 8px;
+      border-bottom: solid 1px $--border-color-lighter;
+
+      // & + .el-picker-panel__content {
+      //   margin-top: 0;
+      // }
+    }
+  }
+
+  @include e(header-label-warp) {
+    display: flex;
+    justify-content: center;
+    flex: 1;
+  }
+  @include e(header-label) {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 0 5px;
+    line-height: 22px;
+    text-align: center;
+    cursor: pointer;
+    color: $--color-text-regular;
+
+    &:hover {
+      color: $--datepicker-hover-font-color;
+    }
+
+    &.active {
+      color: $--datepicker-active-color;
+    }
+  }
+
+  @include e(prev-btn) {
+    float: left;
+  }
+
+  @include e(next-btn) {
+    float: right;
+  }
+
+  @include e(time-wrap) {
+    padding: 10px;
+    text-align: center;
+  }
+
+  @include e(time-label) {
+    float: left;
+    cursor: pointer;
+    line-height: 30px;
+    margin-left: 10px;
+  }
+}

package/packages/theme-chalk/src/super-date/date-range-picker.scss

@@ -0,0 +1,138 @@
+@import '../common/var';
+
+@include b(super-date-range-picker) {
+  width: 646px;
+
+  &.has-sidebar {
+    width: 756px;
+  }
+
+  table {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  .el-picker-panel__body {
+    min-width: 513px;
+    position: relative;
+
+    .rang-text {
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 1;
+      padding: 0 10px;
+      line-height: 36px;
+      font-size: 12px;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+  .el-picker-panel__content {
+    margin: 0;
+  }
+  .dynamic-content {
+    padding: 10px 10px 0;
+    .el-date-table {
+      padding-bottom: 5px;
+    }
+  }
+
+  @include e(header) {
+    position: relative;
+    text-align: center;
+    height: 24px;
+    line-height: 24px;
+    padding: 8px 18px;
+    box-sizing: content-box;
+    border-bottom: 1px solid $--datepicker-inner-border-color;
+
+    [class*='icon-left'] {
+      float: left;
+    }
+
+    [class*='icon-right'] {
+      float: right;
+    }
+
+    div {
+      font-size: 16px;
+      font-weight: 500;
+      margin-right: 50px;
+    }
+  }
+
+  @include e(content) {
+    float: left;
+    width: 50%;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+
+    @include when(left) {
+      // border-right: 1px solid $--datepicker-inner-border-color;
+    }
+    .el-date-range-picker__header {
+      div {
+        margin-left: 50px;
+        margin-right: 50px;
+      }
+    }
+  }
+
+  .el-date-table {
+    padding: 16px;
+  }
+  @include e(editors-wrap) {
+    box-sizing: border-box;
+    display: flex;
+    width: 50%;
+    justify-content: center;
+    @include when(right) {
+      text-align: right;
+    }
+  }
+
+  @include e(time-header) {
+    position: relative;
+    border-bottom: 1px solid $--datepicker-inner-border-color;
+    font-size: 12px;
+    padding: 0px 5px 5px 5px;
+    display: flex;
+    width: 100%;
+    box-sizing: border-box;
+
+    > .el-icon-right {
+      font-size: 20px;
+      vertical-align: middle;
+      display: table-cell;
+      color: $--datepicker-icon-color;
+    }
+  }
+
+  @include e(time-picker-wrap) {
+    position: relative;
+    display: table-cell;
+    padding: 0 5px;
+
+    .el-picker-panel {
+      position: absolute;
+      top: 13px;
+      right: 0;
+      z-index: 1;
+      background: $--color-white;
+    }
+  }
+  @include e(editor) {
+    .el-input__inner {
+      text-align: center;
+    }
+  }
+
+  .dynamic-header {
+    padding-bottom: 10px;
+  }
+}

package/packages/theme-chalk/src/super-date/date-table.scss

@@ -0,0 +1,154 @@
+@import '../common/var';
+@import '../mixins/mixins';
+
+@include b(date-table) {
+  font-size: 12px;
+  user-select: none;
+
+  @include when(week-mode) {
+    .el-date-table__row {
+      &:hover {
+        div {
+          background-color: $--datepicker-inrange-background-color;
+        }
+        td.available:hover {
+          color: $--datepicker-font-color;
+        }
+        td:first-child div {
+          margin-left: 5px;
+          border-top-left-radius: 15px;
+          border-bottom-left-radius: 15px;
+        }
+        td:last-child div {
+          margin-right: 5px;
+          border-top-right-radius: 15px;
+          border-bottom-right-radius: 15px;
+        }
+      }
+
+      &.current div {
+        background-color: $--background-color-acitve;
+      }
+    }
+  }
+
+  td {
+    width: 32px;
+    height: 30px;
+    padding: 4px 0;
+    box-sizing: border-box;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+
+    & div {
+      height: 30px;
+      padding: 3px 0;
+      box-sizing: border-box;
+    }
+
+    & span {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 0 auto;
+      line-height: 24px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      &:hover {
+        background-color: $--background-color-hover;
+      }
+    }
+
+    &.next-month,
+    &.prev-month {
+      color: $--datepicker-off-font-color;
+    }
+
+    &.today {
+      position: relative;
+      span {
+        color: $--color-primary;
+        font-weight: bold;
+      }
+      &.start-date span,
+      &.end-date span {
+        color: $--color-white;
+      }
+    }
+
+    &.available:hover {
+      color: $--datepicker-hover-font-color;
+    }
+
+    &.in-range div {
+      background-color: $--background-color-acitve;
+      &:hover {
+        background-color: $--background-color-acitve;
+      }
+    }
+
+    &.current:not(.disabled) span {
+      color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date span,
+    &.end-date span {
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      margin-left: 5px;
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+
+    &.end-date div {
+      margin-right: 5px;
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
+    }
+
+    &.disabled div {
+      background-color: $--background-color-base;
+      opacity: 1;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+    }
+
+    &.selected div {
+      margin-left: 5px;
+      margin-right: 5px;
+      background-color: $--datepicker-inrange-background-color;
+      border-radius: 15px;
+      &:hover {
+        background-color: $--datepicker-inrange-hover-background-color;
+      }
+    }
+
+    &.selected span {
+      background-color: $--datepicker-active-color;
+      color: $--color-white;
+      border-radius: 15px;
+    }
+
+    &.week {
+      font-size: 80%;
+      color: $--datepicker-header-font-color;
+    }
+  }
+
+  th {
+    padding: 5px;
+    color: $--datepicker-header-font-color;
+    font-weight: 500;
+    // border-bottom: solid 1px $--border-color-lighter;
+  }
+}

package/packages/theme-chalk/src/super-date/month-table.scss

@@ -0,0 +1,96 @@
+@import '../common/var';
+
+@include b(month-table) {
+  font-size: 12px;
+  margin: -1px;
+  border-collapse: collapse;
+
+  td {
+    text-align: center;
+    padding: 7px 0px;
+    cursor: pointer;
+    & div {
+      padding: 4px 0;
+      box-sizing: border-box;
+    }
+    &.today {
+      .cell {
+        color: $--color-primary;
+        font-weight: bold;
+        position: relative;
+        &::after {
+          content: ' ';
+          width: 4px;
+          height: 4px;
+          position: absolute;
+          bottom: -4px;
+          left: 50%;
+          margin-left: -2px;
+          background-color: $--color-primary;
+          border-radius: 2px;
+        }
+      }
+      &.start-date .cell,
+      &.end-date .cell {
+        color: $--color-white;
+      }
+    }
+
+    &.disabled .cell {
+      background-color: $--background-color-base;
+      cursor: not-allowed;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        color: $--color-text-placeholder;
+      }
+    }
+
+    .cell {
+      width: 56px;
+      height: 24px;
+      display: block;
+      line-height: 24px;
+      color: $--datepicker-font-color;
+      margin: 0 auto;
+      border-radius: 4px;
+      &:hover {
+        // color: $--datepicker-hover-font-color;
+        background-color: $--background-color-hover;
+      }
+    }
+
+    &.in-range div {
+      background-color: $--background-color-acitve;
+      &:hover {
+        background-color: $--background-color-acitve;
+      }
+    }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date .cell,
+    &.end-date .cell {
+      color: $--color-white;
+      border-radius: 20px;
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      border-top-left-radius: 24px;
+      border-bottom-left-radius: 24px;
+    }
+
+    &.end-date div {
+      border-top-right-radius: 24px;
+      border-bottom-right-radius: 24px;
+    }
+
+    &.current:not(.disabled) .cell {
+      color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+  }
+}

package/packages/theme-chalk/src/super-date/picker-panel.scss

@@ -0,0 +1,130 @@
+@import '../common/var';
+
+@include b(picker-panel) {
+  color: $--color-text-regular;
+  border: 1px solid $--datepicker-border-color;
+  box-shadow: $--box-shadow-light;
+  background: $--color-white;
+  border-radius: $--border-radius-base;
+  line-height: 30px;
+  margin: 5px 0;
+
+  @include e((body, body-wrapper)) {
+    &::after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+
+  @include e(content) {
+    position: relative;
+    margin: 15px;
+  }
+
+  @include e(footer) {
+    border-top: 1px solid $--datepicker-inner-border-color;
+    padding: 4px;
+    text-align: right;
+    background-color: $--color-white;
+    position: relative;
+    font-size: 0;
+  }
+
+  @include e(shortcut) {
+    display: block;
+    width: 100%;
+    border: 0;
+    background-color: transparent;
+    height: 24px;
+    line-height: 24px;
+    font-size: 12px;
+    padding: 0;
+    color: $--datepicker-font-color;
+    // padding-left: 12px;
+    text-align: center;
+    outline: none;
+    cursor: pointer;
+    border-radius: 4px;
+    margin-bottom: 10px;
+    &:hover {
+      color: $--datepicker-hover-font-color;
+      background-color: $--background-color-hover;
+    }
+
+    &.active {
+      background-color: #e6f1fe;
+      color: $--datepicker-active-color;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(btn) {
+    border: 1px solid #dcdcdc;
+    color: #333;
+    line-height: 24px;
+    border-radius: 2px;
+    padding: 0 20px;
+    cursor: pointer;
+    background-color: transparent;
+    outline: none;
+    font-size: 12px;
+
+    &[disabled] {
+      color: #cccccc;
+      cursor: not-allowed;
+    }
+  }
+
+  @include e(icon-btn) {
+    font-size: 16px;
+    color: $--datepicker-icon-color;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    outline: none;
+    line-height: 24px;
+    height: 24px;
+    width: 24px;
+    flex: 0 0 auto;
+    padding: 0;
+    border-radius: 4px;
+
+    &:hover {
+      color: $--datepicker-hover-font-color;
+      background-color: $--background-color-hover;
+    }
+
+    @include when(disabled) {
+      color: $--font-color-disabled-base;
+
+      &:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  @include e(link-btn) {
+    vertical-align: middle;
+  }
+}
+
+.el-picker-panel *[slot='sidebar'],
+.el-picker-panel__sidebar {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 110px;
+  border-right: 1px solid $--datepicker-inner-border-color;
+  box-sizing: border-box;
+  padding: 12px 8px;
+  background-color: $--color-white;
+  overflow: auto;
+}
+
+.el-picker-panel *[slot='sidebar'] + .el-picker-panel__body,
+.el-picker-panel__sidebar + .el-picker-panel__body {
+  margin-left: 110px;
+}