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) • 3.01 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-overflow-hidden{overflow:hidden}.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-fixednav{position:fixed;z-index:var(--nutui-fixednav-index, 201);display:inline-block;height:50px;right:0}.nut-fixednav.active .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, 201);width:80px;padding-left:12px;height:100%;background:linear-gradient(135deg,var(--nutui-brand-color, #2C68FF) 0%,var(--nutui-brand-color-end, #2C68FF) 100%);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:10px;color:var(--nutui-fixednav-bg-color, var(--nsui-white-color-1, #FFFFFF));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, 201);flex-shrink:0;height:100%;background:var(--nutui-fixednav-bg-color, var(--nsui-white-color-1, #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}.nut-fixednav__list-item img{width:20px;height:20px;margin-bottom:2px}.nut-fixednav__list-item .nut-fixednav__list-text{font-size:10px;color:var(--nutui-fixednav-font-color, var(--nsui-gray-color-10, #000000))}.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-brand-color, #2C68FF);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)}.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}.nut-drag .nut-fixednav{position:inherit}