UNPKG

@nutui/nutui-react-taro

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

2 lines (1 loc) 4.42 kB
.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!important}@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-menu-container-content{padding:var(--nutui-menu-content-padding, 12px 24px);max-height:var(--nutui-menu-content-max-height, 214px);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-menu-content-background-color, var(--nutui-gray-1, #ffffff))}.nut-menu-container-content_fixed{width:100%;opacity:0;position:fixed}.nut-menu-container-item{display:flex;align-items:center;color:var(--nutui-gray-7, #1a1a1a);font-size:var(--nutui-font-size-3, 14px);padding:var(--nutui-menu-item-padding, 12px 0)}.nut-menu-container-item.active{font-weight:var(--nutui-menu-item-active-font-weight, var(--nutui-font-weight-bold, 500));color:var(--nutui-menu-item-active-color, var(--nutui-color-primary, #fa2c19))}.nut-menu-container-item .nut-icon{display:inline-flex;align-items:center;margin-right:var(--nutui-menu-item-icon-margin, 8px);flex-shrink:0}.nut-menu-container-wrap,.nut-menu-container-wrap-up{position:absolute;width:100%;z-index:var(--nutui-menu-container-z-index, 1000);overflow:hidden}.nut-menu-container-wrap-up{bottom:var(--nutui-menu-bar-line-height, 48px)}.overlay-fade-enter-active.nut-menu-container-overlay{top:auto;z-index:var(--nutui-menu-container-z-index, 1000)}.nut-menu-placeholder-element{position:fixed;top:-var(--nutui-menu-bar-line-height,48px);left:0;right:0;z-index:var(--nutui-menu-bar-opened-z-index, 1000);background-color:transparent}.nut-menu-placeholder-element.up{bottom:-var(--nutui-menu-bar-line-height,48px)}.nut-menu-container-down-enter{opacity:0;transform:translateY(-30px)}.nut-menu-container-down-enter-done{opacity:1;transform:translate(0);transition:all .1s}.nut-menu-container-down-exit{opacity:1;transition:all .1s}.nut-menu-container-down-exit-done{opacity:0;transition:all .1s}.nut-menu-container-up-enter{opacity:0;transform:translateY(30px)}.nut-menu-container-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.nut-menu-container-up-exit{opacity:1;transition:all .1s}.nut-menu-container-up-exit-done{opacity:0;transition:all .1s}[dir=rtl] .nut-menu-container-item .nut-icon,.nut-rtl .nut-menu-container-item .nut-icon{margin-right:0;margin-left:var(--nutui-menu-item-icon-margin, 8px)}[dir=rtl] .nut-menu-container .nut-icon,.nut-rtl .nut-menu-container .nut-icon{transform:rotateY(180deg)}.nut-menu{position:relative}.nut-menu.scroll-fixed{position:fixed;top:var(--nutui-menu-scroll-fixed-top, 0);z-index:var(--nutui-menu-scroll-fixed-z-index, 1000);width:100%}.nut-menu-bar{position:relative;display:flex;line-height:var(--nutui-menu-bar-line-height, 48px);background-color:var(--nutui-gray-1, #ffffff);box-shadow:var(--nutui-menu-bar-box-shadow, 0 2px 12px rgba(89, 89, 89, .12))}.nut-menu-bar.opened{z-index:var(--nutui-menu-bar-opened-z-index, 1000)}.nut-menu-title{flex:1;text-align:center;font-size:var(--nutui-menu-title-font-size, var(--nutui-font-size-3, 14px));color:var(--nutui-menu-title-color, var(--nutui-gray-7, #1a1a1a));min-width:0;display:flex;align-items:center;justify-content:center;max-width:100%}.nut-menu-title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding:var(--nutui-menu-title-padding, 0 8px)}.nut-menu-title-icon{flex-shrink:0;transition:all .2s linear}.nut-menu-title.active{color:var(--nutui-menu-item-active-color, var(--nutui-color-primary, #fa2c19))}.nut-menu-title.disabled{color:var(--nutui-menu-item-disabled-color, var(--nutui-color-text-disabled, #bfbfbf))}.nut-menu-title.active .nut-menu-title-icon{transform:rotate(180deg)}