lCalendar.min.css

.date_ctrl,.gearDate{left:0;overflow:hidden;width:100%}.date_btn,.tooth{text-align:center}.gearDate{font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-size:10px;background-color:rgba(0, 0, 0, .2);display:block;position:fixed;top:0;height:100%;z-index:9900;-webkit-animation-fill-mode:both;animation-fill-mode:both}.date_ctrl{vertical-align:middle;background-color:#d5d8df;color:#000;margin:0;height:auto;position:absolute;bottom:0;z-index:9901;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.slideInUp{-webkit-animation:slideInUp 0.3s;animation:slideInUp 0.3s}@-webkit-keyframes slideInUp{from{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}@keyframes slideInUp{from{-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0)}to{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}.date_roll,.datetime_roll,.time_roll,.ym_roll{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:auto;overflow:hidden;background-color:transparent;-webkit-mask:-webkit-gradient(linear, 0 50%, 0 100%, from(#debb47), to(rgba(36, 142, 36, 0)));-webkit-mask:-webkit-linear-gradient(top, #debb47 50%, rgba(36, 142, 36, 0))}.date_roll > div,.datetime_roll > div,.time_roll > div,.ym_roll > div{font-size:0.37rem;height:6rem;float:left;background-color:transparent;position:relative;overflow:hidden;-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.date_roll > div .gear,.datetime_roll > div .gear,.time_roll > div .gear,.ym_roll > div .gear{width:100%;float:left;position:absolute;z-index:9902;margin-top:0.5rem}.date_roll_mask{-webkit-mask:-webkit-gradient(linear, 0 40%, 0 0, from(#debb47), to(rgba(36, 142, 36, 0)));-webkit-mask:-webkit-linear-gradient(bottom, #debb47 50%, rgba(36, 142, 36, 0));padding:0}.date_roll > div:nth-child(2){-webkit-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2}.date_roll > div:nth-child(1),.datetime_roll > div:nth-child(1){-webkit-box-flex:4;-webkit-flex:4;-ms-flex:4;flex:4}.datetime_roll > div:first-child,.datetime_roll > div:last-child{-webkit-box-flex:6;-webkit-flex:6;-ms-flex:6;flex:6}.date_grid{position:relative;width:100%;top:2.5rem;height:1rem;margin:0;box-sizing:border-box;z-index:0;border-top:1px solid #abaeb5;border-bottom:1px solid #abaeb5}.date_grid > div{color:#000;position:absolute;right:0;top:0;font-size:0.37rem;line-height:1rem}.date_roll > div:nth-child(3) .date_grid > div{left:42%}.datetime_roll > div .date_grid > div{right:0}.datetime_roll > div:first-child .date_grid > div{left:auto;right:0}.datetime_roll > div:last-child .date_grid > div{left:50%}.time_roll > div:nth-child(1) .date_grid > div{right:1em}.ym_roll > div:nth-child(1) .date_grid > div{right:0.1em}.time_roll > div .date_grid > div,.ym_roll > div .date_grid > div{right:5em}.date_btn{color:#0575f2;font-size:0.37rem;line-height:1rem;padding:0 0.4rem}.date_btn_box:after,.date_btn_box:before{content:'';position:absolute;height:1px;width:100%;display:block;background-color:#96979b;z-index:15;-webkit-transform:scaleY(.33);transform:scaleY(.33)}.date_btn_box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;background-color:#f1f2f4;position:relative}.date_btn_box:before{left:0;top:0;-webkit-transform-origin:50% 20%;transform-origin:50% 20%}.date_btn_box:after{left:0;bottom:0;-webkit-transform-origin:50% 70%;transform-origin:50% 70%}.date_roll > div:nth-child(1) .gear{text-indent:20%}.date_roll > div:nth-child(2) .gear{text-indent:-20%}.date_roll > div:nth-child(3) .gear{text-indent:-55%}.datetime_roll > div .gear{width:100%;text-indent:-25%}.datetime_roll > div:first-child .gear{text-indent:-10%}.datetime_roll > div:last-child .gear{text-indent:-50%}.time_roll > div .gear,.ym_roll > div .gear{width:100%;text-indent:-70%}.time_roll > div:nth-child(1) .gear,.ym_roll > div:nth-child(1) .gear{width:100%;text-indent:10%}.tooth{height:1rem;line-height:1rem}