deer-ui/es/date-picker/style.css

React.js UI components for PC Web

@-webkit-keyframes a{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}to{opacity:1;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}@keyframes a{0%{opacity:0;-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}to{opacity:1;-webkit-transform:scale(1) translateZ(0);transform:scale(1) translateZ(0)}}@-webkit-keyframes b{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}}@keyframes b{0%{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}to{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}}.deer-ui-date-picker{position:relative;display:inline-block;width:300px}.deer-ui-date-picker-inner{position:relative;display:inline-block;width:100%}.deer-ui-date-picker-inner svg{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.deer-ui-date-picker-active .deer-ui-date-picker-arrow,.deer-ui-date-picker-inner svg{-webkit-transition:.5s cubic-bezier(.165,.84,.44,1);transition:.5s cubic-bezier(.165,.84,.44,1)}.deer-ui-date-picker-active .deer-ui-date-picker-arrow{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.deer-ui-date-picker-content{position:absolute;width:300px;z-index:1;height:auto;left:0;top:0;background:#fff;border:1px solid #e8e8e8;box-shadow:0 4px 22px 0 rgba(15,35,95,.12);border-radius:4px;-webkit-transform:scale(0);transform:scale(0);overflow-x:hidden;overflow-y:auto;margin-top:8px}.deer-ui-date-picker-open{-webkit-animation:a .5s cubic-bezier(.165,.84,.44,1) forwards;animation:a .5s cubic-bezier(.165,.84,.44,1) forwards}.deer-ui-date-picker-close{-webkit-animation:b .5s cubic-bezier(.165,.84,.44,1) forwards;animation:b .5s cubic-bezier(.165,.84,.44,1) forwards;pointer-events:none}.deer-ui-date-picker-header{padding:15px 20px;color:#31c27c;font-weight:700}.deer-ui-date-picker-date{font-size:16px;letter-spacing:1px;margin-right:10px}.deer-ui-date-picker-switch{float:right}.deer-ui-date-picker-switch>.deer-ui-date-picker-switch-group{cursor:pointer;margin:0 5px;border:1px solid #e8e8e8;border-radius:50%;background-color:#fafafa;text-align:center;width:25px;height:25px;line-height:25px;display:inline-block;-webkit-transition:all .5s cubic-bezier(.165,.84,.44,1);transition:all .5s cubic-bezier(.165,.84,.44,1)}.deer-ui-date-picker-switch>.deer-ui-date-picker-switch-group:hover{background-color:#31c27c;border-color:#31c27c;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.1)}.deer-ui-date-picker-items{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.deer-ui-date-picker-items .deer-ui-date-picker-item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;display:inline-block;width:36px;height:36px;line-height:36px;border-radius:50%;margin:0 4px 4px 0;cursor:pointer;border:1px solid transparent;-webkit-transition:all .5s cubic-bezier(.165,.84,.44,1);transition:all .5s cubic-bezier(.165,.84,.44,1)}.deer-ui-date-picker-items .deer-ui-date-picker-item:not(.deer-ui-date-picker-day-title):not(.deer-ui-date-picker-last-month):not(.deer-ui-date-picker-next-month):not(.deer-ui-date-picker-disabled-date):hover{border:1px solid #31c27c}.deer-ui-date-picker-button{width:22px;height:22px;line-height:22px;border-radius:50%;background-color:#f5f5f5;display:inline-block;text-align:center;cursor:pointer}.deer-ui-date-picker-button-icon{color:#31c27c}.deer-ui-date-picker-disabled-date{background-color:#f5f5f5;color:rgba(0,0,0,.2)}.deer-ui-date-picker-disabled-date.deer-ui-date-picker-item{cursor:not-allowed;border-radius:4px;-webkit-transition:none!important;transition:none!important}.deer-ui-date-picker-last-month,.deer-ui-date-picker-next-month{color:rgba(0,0,0,.2)}.deer-ui-date-picker-current-month{border:1px solid transparent;border-radius:4px}.deer-ui-date-picker-selected-date{border-color:#31c27c;background-color:#31c27c;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.1)}.deer-ui-date-picker-footer{margin-right:20px;padding:10px 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.deer-ui-date-picker-footer-clear,.deer-ui-date-picker-footer-today{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.deer-ui-date-picker-footer-today{color:#31c27c;-webkit-transition:color .5s cubic-bezier(.165,.84,.44,1);transition:color .5s cubic-bezier(.165,.84,.44,1)}.deer-ui-date-picker-footer-today:hover{color:#53d395}.deer-ui-date-picker-footer-clear{color:#31c27c;-webkit-transition:color .5s cubic-bezier(.165,.84,.44,1);transition:color .5s cubic-bezier(.165,.84,.44,1);margin-left:10px}.deer-ui-date-picker-footer-clear:hover{color:#53d395}.deer-ui-date-picker-footer-extra{margin-top:10px}.deer-ui-date-picker-footer.deer-ui-date-picker-has-border{border-top:1px solid #e8e8e8}