@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 4.44 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-fixednav{position:fixed;z-index:var(--nutui-fixednav-index, 900);display:inline-block;height:50px;right:0}.nut-fixednav.active .nut-fixednav-btn .nut-icon{transform:rotate(180deg)}.nut-fixednav.active .nut-fixednav-list{transform:translate(0)}.nut-fixednav.active.left .nut-icon{transform:rotate(0)}.nut-fixednav-btn{box-sizing:border-box;position:absolute;right:0;z-index:var(--nutui-fixednav-index, 900);width:70px;height:100%;background:var(--nutui-fixednav-button-background, var(--nutui-color-primary, #fa2c19));border-radius:45px 0 0 45px;box-shadow:0 2px 4px #0003;display:flex;align-items:center;justify-content:center}.nut-fixednav-btn .text{width:24px;line-height:13px;font-size:var(--nutui-font-size-2, 12px);color:#fff;flex-shrink:0}.nut-fixednav-btn .nut-icon{margin-right:5px;transform:rotate(0);transition:all .3s}.nut-fixednav-list{position:absolute;right:0;transform:translate(100%);transition:all .5s;z-index:var(--nutui-fixednav-index, 900);flex-shrink:0;height:100%;background:var(--nutui-fixednav-background-color, #ffffff);display:flex;justify-content:space-between;border-radius:25px 0 0 25px;box-shadow:2px 2px 8px #0003;padding-left:20px;padding-right:80px}.nut-fixednav-list-item{position:relative;flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:50px;flex-shrink:0;color:var(--nutui-fixednav-color, #1a1a1a)}.nut-fixednav-list-item img{width:20px;height:20px;margin-bottom:2px}.nut-fixednav-list-item .nut-fixednav-list-text{font-size:10px}.nut-fixednav-list-item .b{position:absolute;right:0;top:1px;height:14px;line-height:14px;font-size:10px;padding:0 3px;color:#fff;background:var(--nutui-color-primary, #fa2c19);border-radius:7px;text-align:center;min-width:12px}.nut-fixednav.left{right:auto;left:0}.nut-fixednav.left .nut-fixednav-btn{flex-direction:row-reverse;right:auto;left:0;border-radius:0 45px 45px 0}.nut-fixednav.left .nut-fixednav-btn .nut-icon{transform:rotate(180deg);margin-right:0;margin-left:5px}.nut-fixednav.left .nut-fixednav-list{transform:translate(-100%);right:auto;border-radius:0 25px 25px 0;padding-left:80px;padding-right:20px;margin:0}[dir=rtl] .nut-fixednav,.nut-rtl .nut-fixednav{right:auto;left:0}[dir=rtl] .nut-fixednav.active .nut-icon,.nut-rtl .nut-fixednav.active .nut-icon{transform:rotate(-180deg)}[dir=rtl] .nut-fixednav-btn,.nut-rtl .nut-fixednav-btn{right:auto;left:0;border-radius:0 45px 45px 0}[dir=rtl] .nut-fixednav-btn .nut-icon,.nut-rtl .nut-fixednav-btn .nut-icon{margin-right:0;margin-left:5px;transform:rotate(180deg)}[dir=rtl] .nut-fixednav-list,.nut-rtl .nut-fixednav-list{right:auto;left:0;transform:translate(-100%);border-radius:0 25px 25px 0;box-shadow:-2px 2px 8px #0003;padding-right:20px;padding-left:80px}[dir=rtl] .nut-fixednav-list-item .b,.nut-rtl .nut-fixednav-list-item .b{right:auto;left:0}[dir=rtl] .nut-fixednav.left,.nut-rtl .nut-fixednav.left{left:auto;right:0}[dir=rtl] .nut-fixednav.left .nut-fixednav-btn,.nut-rtl .nut-fixednav.left .nut-fixednav-btn{left:auto;right:0;border-radius:45px 0 0 45px}[dir=rtl] .nut-fixednav.left .nut-fixednav-btn .nut-icon,.nut-rtl .nut-fixednav.left .nut-fixednav-btn .nut-icon{transform:rotate(0);margin-right:5px;margin-left:0}[dir=rtl] .nut-fixednav.left .nut-fixednav-list,.nut-rtl .nut-fixednav.left .nut-fixednav-list{transform:translate(100%);right:auto;left:auto;border-radius:25px 0 0 25px;padding-right:80px;padding-left:20px}.nut-drag .nut-fixednav{position:relative}