test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 11.3 kB
CSS
.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-gray-7, rgba(0, 0, 0, .65)))}.nut-overlay-fade-enter-active{animation:nut-fade-in}.nut-overlay-fade-enter-active .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-6, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-1, #595959))}.nut-overlay-fade-leave-active{animation:nut-fade-out}.nut-overlay-first-render,.nut-overlay-hidden-render{display:none}@keyframes nut-fade-in{0%{opacity:0}1%{opacity:0}to{opacity:1}}@keyframes nut-fade-out{0%{opacity:1}1%{opacity:1}to{opacity:0}}.nut-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);padding:var(--nutui-popup-title-padding, 16px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 8px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0 0}.nut-popup-right{top:0;right:0;width:80%;height:100%}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 8px) 0 0 var(--nutui-popup-border-radius, 8px)}.nut-popup-left{top:0;left:0;width:80%;height:100%}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px)}@keyframes popup-scale-fade-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes popup-scale-fade-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.nut-popup-slide-default-enter-active{animation-fill-mode:both;animation-name:popup-scale-fade-in;animation-duration:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:.3s}@keyframes popup-fade-in{0%{opacity:0}to{opacity:1}}@keyframes popup-fade-out{0%{opacity:1}to{opacity:0}}.nut-popup-slide-center-enter-active{animation-fill-mode:both;animation-name:popup-fade-in;animation-duration:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}}@keyframes popup-slide-top-exit{to{transform:translate3d(0,-100%,0)}}.nut-popup-slide-top-enter-active,.nut-popup-slide-top-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-top-enter;animation-duration:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}}@keyframes popup-slide-right-exit{to{transform:translate3d(100%,0,0)}}.nut-popup-slide-right-enter-active,.nut-popup-slide-right-appear-active{transform:translateZ(0);animation-fill-mode:both;animation-name:popup-slide-right-enter;animation-duration:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}}@keyframes slide-bottom-exit{to{transform:translate3d(0,100%,0)}}.nut-popup-slide-bottom-enter-active,.nut-popup-slide-bottom-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-bottom-enter;animation-duration:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}}@keyframes popup-slide-left-exit{to{transform:translate3d(-100%,0,0)}}.nut-popup-slide-left-enter-active,.nut-popup-slide-left-appear-active{transform:translate(0);animation-fill-mode:both;animation-name:popup-slide-left-enter;animation-duration:.3s}.nut-popup-slide-left-exit-active,.nut-popup-slide-left-exit-done{animation-fill-mode:both;animation-name:popup-slide-left-exit;animation-duration:.3s}.nut-overflow-hidden{overflow:hidden}.nut-calendar{position:relative;display:flex;flex-direction:column;flex:1;font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-3, 16px));background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);overflow:hidden;height:100%}.nut-calendar.nut-calendar-title .nut-calendar-header .calendar-title{font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-3, 16px))}.nut-calendar .nut-calendar-taro{height:60vh}.nut-calendar .popup-box{height:100%}.nut-calendar ::-webkit-scrollbar{display:none}.nut-calendar-header{display:flex;flex-direction:column;text-align:center}.nut-calendar-title{font-size:var(--nutui-calendar-title-font-size, var(--nsui-font-size-5, 16px));font-weight:var(--nutui-calendar-title-font-weight, 500);line-height:var(--nutui-calendar-title-line-height, 44px);color:var(--nutui-calendar-title-color, #323233)}.nut-calendar-sub-title{height:var(--nutui-calendar-sub-title-height, 44px);line-height:var(--nutui-calendar-sub-title-line-height, 44px);background:var(--nutui-calendar-sub-title-background, var(--nsui-gray-color-2, #F5F5F5));font-size:var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-2, 14px));font-weight:var(--nutui-calendar-sub-title-font-weight, 500);color:var(--nutui-calendar-sub-title-color, var(--nsui-gray-color-9, #262626));display:flex;align-items:center;justify-content:center}.nut-calendar-sub-title span{display:flex;align-items:center;margin:0 16px}.nut-calendar-header-buttons{height:var(--nutui-calendar-header-height, 24px)}.nut-calendar-weeks{display:flex;align-items:center;justify-content:space-around;height:32px}.nut-calendar-week-item{font-size:var(--nutui-calendar-week-item-font-size, var(--nsui-font-size-2, 12px));font-weight:var(--nutui-calendar-week-item-font-weight, 400);color:var(--nutui-calendar-week-item-color, var(--nsui-gray-color-9, #262626))}.nut-calendar-content{flex:1;width:100%;display:block;overflow-y:auto}.nut-calendar-pannel{position:relative;width:100%;height:auto;display:block;box-sizing:border-box}.nut-calendar-pannel .calendar-loading-tip{height:50px;line-height:50px;text-align:center;position:absolute;top:-50px;left:0;right:0;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-gray-2, #757575)}.nut-calendar-month{display:flex;flex-direction:column;text-align:center}.nut-calendar-month-title{height:var(--nutui-calendar-month-title-height, 44px);line-height:var(--nutui-calendar-month-title-line-height, 44px);background:var(--nutui-calendar-month-title-background, var(--nsui-gray-color-2, #F5F5F5));font-size:var(--nutui-calendar-month-title-font-size, var(--nsui-font-size-4, 14px));font-weight:var(--nutui-calendar-month-title-font-weight, 500);color:var(--nutui-calendar-month-title-color, var(--nsui-gray-color-9, #262626))}.nut-calendar-days{overflow:hidden;position:relative}.nut-calendar-days:after{content:"";font-size:160px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:0;color:#f5f5f5;font-weight:500}.nut-calendar-days-month1:after{content:"1"}.nut-calendar-days-month2:after{content:"2"}.nut-calendar-days-month3:after{content:"3"}.nut-calendar-days-month4:after{content:"4"}.nut-calendar-days-month5:after{content:"5"}.nut-calendar-days-month6:after{content:"6"}.nut-calendar-days-month7:after{content:"7"}.nut-calendar-days-month8:after{content:"8"}.nut-calendar-days-month9:after{content:"9"}.nut-calendar-days-month10:after{content:"10"}.nut-calendar-days-month11:after{content:"11"}.nut-calendar-days-month12:after{content:"12"}.nut-calendar-day{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;float:left;width:var(--nutui-calendar-day-width, 14.28%);height:var(--nutui-calendar-day-height, 60px);font-weight:var(--nutui-calendar-day-font-weight, 500);font-size:var(--nutui-calendar-day-font-size, var(--nsui-font-size-5, 16px));color:var(--nutui-calendar-day-color, var(--nsui-gray-color-9, #262626));margin-bottom:4px;z-index:1}.nut-calendar-day:nth-child(7n+0),.nut-calendar-day:nth-child(7n+1){color:var(--nutui-calendar-day67-color, #FF2C33)}.nut-calendar-day:nth-child(7n+0) .info,.nut-calendar-day:nth-child(7n+1) .info{color:var(--nutui-calendar-day67-color, #FF2C33)}.nut-calendar-day-info-curr,.nut-calendar-day-info{position:absolute;bottom:5px;width:100%;font-size:12px;line-height:14px}.nut-calendar-day-info-top{position:absolute;width:100%;top:5px}.nut-calendar-day-info-bottom{position:absolute;width:100%;bottom:5px}.nut-calendar-day-active{background-color:var(--nutui-calendar-active-background-color, var(--nutui-brand-color, #2C68FF));color:var(--nutui-brand-text-color, #ffffff);border-radius:var(--nutui-calendar-day-active-border-radius, 8px)}.nut-calendar-day-active .nut-calendar-day-info{color:var(--nutui-brand-text-color, #ffffff);position:unset}.nut-calendar-day-active .nut-calendar-day-info-curr{position:unset}.nut-calendar-day-disabled,.nut-calendar-day-disabled .info{color:var(--nutui-calendar-disable-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-calendar-day-choose{background-color:var(--nutui-calendar-choose-background-color, #f6f8fd);color:var(--nutui-calendar-choose-color, var(--nutui-brand-color, #2C68FF))}.nut-calendar-footer{display:flex;height:52px;width:100%;background-color:var(--nutui-gray-6, #ffffff)}.nut-calendar-footer .calendar-confirm-btn{height:44px;width:100%;margin:4px 16px;border-radius:22px;background:var(--nutui-button-primary-background-color, var(--nutui-brand-color, #2C68FF));color:var(--nutui-brand-text-color, #ffffff);text-align:center;line-height:44px}.nut-calendar-footer .calendar-confirm-btn-disabled{background:var(--nutui-button-primary-disabled-background-color, #A3C6FF)}.nut-popup__close-icon{top:7px}