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) • 5.64 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-menu-item__content{max-height:var(--nutui-menu-item-content-max-height, 65vh);overflow-y:auto;display:flex;flex-wrap:wrap;background:var(--nutui-menu-item-content-bg-color, var(--nutui-gray-6, #ffffff));border-radius:var(--nutui-menu-item-content-down-border-radius, 0 0 8px 8px)}.nut-menu-item__content.content-up{border-radius:var(--nutui-menu-item-content-up-border-radius, 8px 8px 0 0)}.nut-menu-item__content--multi{max-height:var(--nutui-menu-item-content-multi-max-height, 286px);position:sticky;bottom:0;padding:var(--nutui-menu-item-content-multi-padding, 16px 16px 12px 16px);display:flex;width:100%;justify-content:space-between;background:var(--nutui-menu-item-content-bg-color, var(--nutui-gray-6, #ffffff))}.nut-menu-item__content--multi:after{content:"";position:absolute;top:0;left:0;width:100%;transform:scaleY(.5);border-top:1px solid var(--nsui-gray-color-4, #E5E5E5)}.nut-menu-item__content--multi-all{display:flex;flex-direction:column;align-items:center;font-weight:400;font-size:12px;color:#595959;justify-content:center;margin-right:24px;white-space:nowrap}.nut-menu-item__content_fixed{width:100%;opacity:0;position:fixed}.nut-menu-item__option{color:var(--nutui-menu-item-option-color, var(--nsui-gray-color-8, #595959));font-size:var(--nutui-font-size-2, 14px);padding:var(--nutui-menu-item-option-padding, 14px 16px);display:flex;box-sizing:border-box;align-items:center;justify-content:space-between;line-height:var(--nutui-menu-item-option-line-height, 22px);font-weight:400}.nut-menu-item__option.active{font-weight:500;color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #2C68FF))}.nut-menu-item__option--description{font-weight:400;font-size:var(--nutui-menu-item-description-font-size, var(--nsui-font-size-2, 12px));color:var(--nutui-menu-item-description-color, var(--nsui-gray-color-7, #8C8C8C))}.nut-menu-item__option.disabled{color:var(--nutui-menu-item-disabled-text-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-menu-item__option.disabled .nut-menu-item__option--description{color:var(--nutui-picker-item-disabled-text-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-menu-item__wrap,.nut-menu-item__wrap-up{position:absolute;width:100%;z-index:2052;overflow:hidden}.nut-menu-item__wrap-up{bottom:var(--nutui-menu-item-wrap-up-bottom, 47px)}.overlay-fade-enter-active.nut-menu__overlay{top:auto;z-index:2052}.nut-menu__pop.nut-popup{transition:all 0s ease 0s;transform:none}.placeholder-element{position:absolute;top:-var(--nutui-menu-bar-line-height,48px);left:0;right:0;z-index:var(--nutui-menu-bar-opened-z-index, 2001);background-color:transparent}.placeholder-element.up{bottom:-var(--nutui-menu-bar-line-height,48px)}.menu-item-enter{opacity:0;transform:translateY(-30px)}.menu-item-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-exit{opacity:1;transition:all .1s}.menu-item-exit-done{opacity:0;transition:all .1s}.menu-item-up-enter{opacity:0;transform:translateY(30px)}.menu-item-up-enter-done{opacity:1;transform:translate(0);transition:all .1s}.menu-item-up-exit{opacity:1;transition:all .1s}.menu-item-up-exit-done{opacity:0;transition:all .1s}.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-relative{position:relative}.nut-menu__bar{position:relative;display:flex;line-height:var(--nutui-menu-bar-line-height, 48px);background-color:var(--nutui-gray-6, #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, 2001)}.nut-menu__bar.scrollX{overflow-x:auto}.nut-menu__item{flex:1;text-align:center;font-size:var(--nutui-menu-item-font-size, var(--nutui-font-size-2, 14px));color:var(--nutui-menu-item-text-color, var(--nutui-gray-1, #595959));min-width:0}.nut-menu__item.active{color:var(--nutui-menu-item-active-text-color, var(--nutui-brand-color, #2C68FF))}.nut-menu__item.disabled{color:var(--nutui-menu-item-disabled-color, var(--nsui-gray-color-6, #BFBFBF))}.nut-menu__title-icon{transition:all .2s linear}.nut-menu__title{display:flex;align-items:center;justify-content:center;max-width:100%;padding:var(--nutui-menu-title-padding, 0 16px)}.nut-menu__title.active .nut-menu__title-icon{transform:rotate(180deg)}.nut-menu__title-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;padding-right:var(--nutui-menu-title-text-padding-right, 4px)}.group-name{font-weight:500;font-size:14px;color:#262626;line-height:22px;margin-bottom:12px}.group-name:nth-child(n+1){margin-top:12px}.group-input{height:36px;background:#F5F5F5;border-radius:25px}.group-input .nut-input-native{background:#F5F5F5;text-align:center}.group-divider{font-weight:400;font-size:14px;color:#bfbfbf;line-height:22px;margin:0 8px;line-height:36px}.demo-class1{font-weight:500;font-size:14px;color:#262626;line-height:22px}