@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 16.7 kB
CSS
.nut-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--nutui-overlay-bg-color, var(--nutui-black-10, rgba(0, 0, 0, .7)));z-index:var(--nutui-overlay-zIndex, 1000)}.nut-overlay .wrapper .content{background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-overlay-content-color, var(--nutui-gray-7, #1a1a1a))}[dir=rtl] .nut-overlay,.nut-rtl .nut-overlay{left:auto;right:0}.nut-overflow-hidden{overflow:hidden}@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-overlay-slide-enter-active,.nut-overlay-slide-appear-active{animation-fill-mode:both;animation-name:nut-fade-in;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-overlay-slide-exit-active{animation-fill-mode:both;animation-name:nut-fade-out;animation-duration:var(--nutui-overlay-animation-duration, .3s)}.nut-popup{position:fixed;min-height:26%;max-height:100%;overflow-y:auto;background-color:var(--nutui-overlay-content-bg-color, var(--nutui-gray-1, #ffffff));color:var(--nutui-gray-7, #1a1a1a);-webkit-overflow-scrolling:touch;font-size:var(--nutui-font-size-3, 14px)}.nut-popup-title{display:flex;align-items:center;justify-content:center;border-bottom:var(--nutui-popup-title-border-bottom, 0);padding:var(--nutui-popup-title-padding, 16px);position:relative}.nut-popup-title-left{position:absolute;left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-title{font-weight:var(--nutui-font-weight-bold, 500);font-size:var(--nutui-popup-title-font-size, var(--nutui-font-size-5, 18px))}.nut-popup-title-description{color:var(--nutui-gray-5, #8c8c8c);font-size:var(--nutui-popup-description-font-size, var(--nutui-font-size-1, 10px));font-weight:var(--nutui-font-weight, 400)}.nut-popup-title-right{position:absolute;z-index:1;cursor:pointer;width:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));height:var(--nutui-popup-icon-size, var(--nutui-font-size-5, 18px));display:flex;justify-content:center;align-items:center;top:var(--nutui-popup-title-padding, 16px);right:var(--nutui-popup-title-padding, 16px);color:var(--nutui-gray-5, #8c8c8c)}.nut-popup-title-right:active{opacity:.7}.nut-popup-title-right-top-left{top:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-left{bottom:var(--nutui-popup-title-padding, 16px);left:var(--nutui-popup-title-padding, 16px)}.nut-popup-title-right-bottom-right{right:var(--nutui-popup-title-padding, 16px);bottom:var(--nutui-popup-title-padding, 16px)}.nut-popup-center{top:50%;left:50%;min-height:10%;transform:translate(-50%,-50%)}.nut-popup-center.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px)}.nut-popup-bottom,.nut-popup-top{max-height:83%}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0 0}.nut-popup-right{top:0;right:0}.nut-popup-right.nut-popup-round{border-radius:var(--nutui-popup-border-radius, 24px) 0 0 var(--nutui-popup-border-radius, 24px)}.nut-popup-left{top:0;left:0}.nut-popup-left.nut-popup-round{border-radius:0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.nut-popup-round{border-radius:0 0 var(--nutui-popup-border-radius, 24px) var(--nutui-popup-border-radius, 24px)}@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:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;animation-duration:var(--nutui-popup-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:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,0)}to{transform:translateZ(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:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,0)}to{transform:translateZ(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:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,0)}to{transform:translateZ(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:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:var(--nutui-popup-animation-duration, .3s)}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,0)}to{transform:translateZ(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:var(--nutui-popup-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:var(--nutui-popup-animation-duration, .3s)}.nut-popup-slide-default-exit-done.nut-popup,.nut-popup-slide-center-exit-done.nut-popup,.nut-popup-slide-left-exit-done.nut-popup,.nut-popup-slide-right-exit-done.nut-popup,.nut-popup-slide-top-exit-done.nut-popup,.nut-popup-slide-bottom-exit-done.nut-popup{display:none}.nut-popup .nut-overflow-hidden{overflow:hidden}[dir=rtl] .nut-popup-title-left,.nut-rtl .nut-popup-title-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right,.nut-rtl .nut-popup-title-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-top-left,.nut-rtl .nut-popup-title-right-top-left,[dir=rtl] .nut-popup-title-right-bottom-left,.nut-rtl .nut-popup-title-right-bottom-left{left:auto;right:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title-right-bottom-right,.nut-rtl .nut-popup-title-right-bottom-right{right:auto;left:var(--nutui-popup-title-padding, 16px)}[dir=rtl] .nut-popup-title .nut-icon-ArrowLeft,.nut-rtl .nut-popup-title .nut-icon-ArrowLeft{transform:rotate(180deg)}[dir=rtl] .nut-popup-center,.nut-rtl .nut-popup-center{left:auto;right:50%;transform:translate(50%,-50%)}[dir=rtl] .nut-popup-bottom,.nut-rtl .nut-popup-bottom,[dir=rtl] .nut-popup-top,.nut-rtl .nut-popup-top{left:auto;right:0}.nut-calendar-viewmode{position:relative;display:flex;flex-direction:column;flex:1;font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px));background-color:var(--nutui-gray-1, #ffffff);color:var(--nutui-gray-7, #1a1a1a);overflow:hidden;height:100%}.nut-calendar-viewmode.nut-calendar-title .nut-calendar-header .calendar-title{font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px))}.nut-calendar-viewmode .nut-calendar-taro{height:60vh}.nut-calendar-viewmode .popup-box{height:100%}.nut-calendar-viewmode ::-webkit-scrollbar{display:none}.nut-calendar-viewmode-header{display:flex;flex-direction:column;text-align:center}.nut-calendar-viewmode-title{color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-calendar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold, 500));line-height:50px}.nut-calendar-viewmode-sub-title{padding:7px 0;line-height:22px;font-size:var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-3, 14px))}.nut-calendar-viewmode-content{flex:1;width:100%;display:block;overflow-y:auto}.nut-calendar-viewmode-pannel{position:relative;width:100%;height:auto;display:block;box-sizing:border-box}.nut-calendar-viewmode-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-2, 12px);color:var(--nutui-gray-6, #595959)}.nut-calendar-viewmode-panel{display:flex;flex-direction:column;text-align:center}.nut-calendar-viewmode-panel-title{height:23px;line-height:23px;margin:8px 0}.nut-calendar-viewmode-item{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;float:left;width:var(--nutui-calendar-panel-item-width, 24.85%);height:var(--nutui-calendar-day-height, 60px);font-weight:var(--nutui-calendar-day-font-weight, var(--nutui-font-weight-bold, 500));margin-bottom:4px}.nut-calendar-viewmode-item-info-curr,.nut-calendar-viewmode-item-info{position:absolute;bottom:5px;width:100%;font-size:var(--nutui-font-size-2, 12px);line-height:14px}.nut-calendar-viewmode-item.active{background-color:var(--nutui-calendar-active-background-color, var(--nutui-color-primary, #fa2c19));color:var(--nutui-color-primary-text, #ffffff);border-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-viewmode-item.active .nut-calendar-day-info{color:var(--nutui-color-primary-text, #ffffff)}.nut-calendar-viewmode-item-prev,.nut-calendar-viewmode-item-next{color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))}.nut-calendar-viewmode-item-prev .nut-calendar-day-info-curr,.nut-calendar-viewmode-item-next .nut-calendar-day-info-curr{display:none}.nut-calendar-viewmode-footer{display:flex;width:100%;flex-direction:column;background-color:#fff}.nut-calendar-viewmode-footer .calendar-confirm-btn{height:44px;margin:10px 18px;border-radius:22px;background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);color:var(--nutui-color-primary-text, #ffffff);text-align:center;line-height:44px}.nut-calendar{position:relative;display:flex;flex-direction:column;flex:1;font-size:var(--nutui-calendar-base-font-size, var(--nutui-font-size-4, 16px));background-color:var(--nutui-gray-1, #ffffff);color:var(--nutui-gray-7, #1a1a1a);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-4, 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{color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-calendar-title-font-size, var(--nutui-font-size-5, 18px));font-weight:var(--nutui-calendar-title-font-weight, var(--nutui-font-weight-bold, 500));line-height:50px}.nut-calendar-sub-title{padding:7px 0;line-height:22px;font-size:var(--nutui-calendar-sub-title-font-size, var(--nutui-font-size-3, 14px))}.nut-calendar-header-buttons{height:var(--nutui-calendar-header-height, 24px)}.nut-calendar-weeks{display:flex;align-items:center;justify-content:space-around;height:36px;border-radius:0 0 12px 12px;box-shadow:0 4px 10px #0000000f}.nut-calendar-weeks-shrink{padding-left:17%}.nut-calendar-week-item:first-of-type,.nut-calendar-week-item:last-of-type{color:var(--nutui-color-primary, #fa2c19)}.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-2, 12px);color:var(--nutui-gray-6, #595959)}.nut-calendar-month{display:flex;flex-direction:column;text-align:center}.nut-calendar-month-title{height:23px;line-height:23px;margin:8px 0}.nut-calendar-weeknumber{width:35%}.nut-calendar-weeknumber-index{display:flex;align-items:center;justify-content:center;flex-direction:column;position:relative;height:var(--nutui-calendar-day-height, 60px);font-weight:var(--nutui-font-weight, 400);font-size:var(--nutui-font-size-3, 14px);margin-bottom:4px;color:var(--nutui-gray-5, #8c8c8c)}.nut-calendar-days{overflow:hidden}.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, var(--nutui-font-weight-bold, 500));margin-bottom:4px}.nut-calendar-day:nth-child(7n),.nut-calendar-day:nth-child(7n+1){color:var(--nutui-color-primary, #fa2c19)}.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-color-primary, #fa2c19));color:var(--nutui-color-primary-text, #ffffff);border-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active.active-start{border-radius:0;border-top-left-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-left-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active.active-end{border-radius:0;border-top-right-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-right-radius:var(--nutui-calendar-day-active-border-radius, 4px)}.nut-calendar-day-active .nut-calendar-day-info{color:var(--nutui-color-primary-text, #ffffff)}.nut-calendar-day-disabled{color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))}.nut-calendar-day-disabled .nut-calendar-day-info-curr{display:none}.nut-calendar-day-choose{background-color:var(--nutui-calendar-choose-background-color, var(--nutui-color-primary-light, #ffeae8));color:var(--nutui-calendar-choose-color, var(--nutui-color-primary, #fa2c19))}.nut-calendar-day-choose-disabled{background-color:var(--nutui-calendar-choose-disable-background-color, rgba(191, 191, 191, .09));color:var(--nutui-calendar-disable-color, var(--nutui-color-text-disabled, #bfbfbf))}.nut-calendar-day-choose-disabled .nut-calendar-day-info-curr{display:none}.nut-calendar .shrink{display:flex}.nut-calendar-footer{display:flex;width:100%;flex-direction:column;background-color:#fff}.nut-calendar-footer .calendar-confirm-btn{height:44px;margin:10px 18px;border-radius:22px;background:linear-gradient(135deg,var(--nutui-color-primary-stop-1, #f53d4d) 0%,var(--nutui-color-primary-stop-2, #fa2c19) 100%);color:var(--nutui-color-primary-text, #ffffff);text-align:center;line-height:44px}.nut-calendar-popup .nut-popup-title-right{top:7px}[dir=rtl] .nut-calendar-day,.nut-rtl .nut-calendar-day{float:right}[dir=rtl] .nut-calendar-day-active.active-start,.nut-rtl .nut-calendar-day-active.active-start{border-top-left-radius:0;border-top-right-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-left-radius:0;border-bottom-right-radius:var(--nutui-calendar-day-active-border-radius, 4px)}[dir=rtl] .nut-calendar-day-active.active-end,.nut-rtl .nut-calendar-day-active.active-end{border-top-right-radius:0;border-top-left-radius:var(--nutui-calendar-day-active-border-radius, 4px);border-bottom-right-radius:0;border-bottom-left-radius:var(--nutui-calendar-day-active-border-radius, 4px)}