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) • 14.8 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-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-popup{position:fixed;max-height:100%;overflow-y:auto;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);-webkit-overflow-scrolling:touch}.nut-popup-title{display:flex;align-items:center;justify-content:center;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #595959);padding:var(--nutui-popup-title-padding, 16px);font-weight:var(--nutui-font-weight-bold, 400);line-height:var(--nutui-popup-title-line-height, 18px);font-size:var(--nutui-popup-title-font-size, 18px);border-bottom:var(--nutui-popup-title-border-bottom, 0)}.nut-popup-left-icon{position:absolute;top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon{position:absolute;z-index:1;color:var(--nutui-popup-close-icon-color, #969799);cursor:pointer;width:30px;height:30px;display:flex;justify-content:center;align-items:center}.nut-popup__close-icon:active{opacity:.7}.nut-popup__close-icon--top-left{top:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--top-right{top:var(--nutui-popup-close-icon-margin, 16px);right:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-left{bottom:var(--nutui-popup-close-icon-margin, 16px);left:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup__close-icon--bottom-right{right:var(--nutui-popup-close-icon-margin, 16px);bottom:var(--nutui-popup-close-icon-margin, 16px)}.nut-popup-center{top:50%;left:50%;transform:translate(-50%,-50%)}.nut-popup-center.round{border-radius:var(--nutui-popup-border-radius, 8px)}.nut-popup-bottom{bottom:0;left:0;width:100%}.nut-popup-bottom.round{border-radius:var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0 0}.nut-popup-right{top:0;right:0;width:80%;height:100%}.nut-popup-right.round{border-radius:var(--nutui-popup-border-radius, 8px) 0 0 var(--nutui-popup-border-radius, 8px)}.nut-popup-left{top:0;left:0;width:80%;height:100%}.nut-popup-left.round{border-radius:0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px) 0}.nut-popup-top{top:0;left:0;width:100%}.nut-popup-top.round{border-radius:0 0 var(--nutui-popup-border-radius, 8px) var(--nutui-popup-border-radius, 8px)}@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:.3s}.nut-popup-slide-default-exit-active{animation-fill-mode:both;animation-name:popup-scale-fade-out;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:.3s}.nut-popup-slide-center-exit-active{animation-fill-mode:both;animation-name:popup-fade-out;animation-duration:.3s}@keyframes popup-slide-top-enter{0%{transform:translate3d(0,-100%,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:.3s}.nut-popup-slide-top-exit-active{animation-fill-mode:both;animation-name:popup-slide-top-exit;animation-duration:.3s}@keyframes popup-slide-right-enter{0%{transform:translate3d(100%,0,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:.3s}.nut-popup-slide-right-exit{animation-fill-mode:both;animation-name:popup-slide-right-exit;animation-duration:.3s}@keyframes popup-slide-bottom-enter{0%{transform:translate3d(0,100%,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:.3s}.nut-popup-slide-bottom-exit{animation-fill-mode:both;animation-name:slide-bottom-exit;animation-duration:.3s}@keyframes popup-slide-left-enter{0%{transform:translate3d(-100%,0,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:.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:.3s}.nut-overflow-hidden{overflow:hidden}.nut-popover{position:absolute;display:inline-block;word-break:normal}.nut-popover-arrow{position:absolute;width:0;height:0;border:7px solid transparent}.nut-popover-arrow-top{bottom:0;border-top-color:var(--nutui-popover-white-background-color, var(--nsui-gray-percent-color-1, #ffffff));border-bottom-width:0;margin-bottom:-6px}.nut-popover-arrow-bottom{top:0px;border-bottom-color:var(--nutui-popover-white-background-color, var(--nsui-gray-percent-color-1, #ffffff));border-top-width:0;margin-top:-6px}.nut-popover-arrow-bottom.nut-popover-arrow--bottom{left:50%;transform:translate(-50%)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-start{left:var(--nutui-popover-arrow-position, 22px);transform:translate(0)}.nut-popover-arrow-bottom.nut-popover-arrow--bottom-end{right:var(--nutui-popover-arrow-position, 22px);transform:translate(0)}.nut-popover-arrow-left{right:0px;border-left-color:var(--nutui-popover-white-background-color, var(--nsui-gray-percent-color-1, #ffffff));border-right-width:0;margin-right:-6px}.nut-popover-arrow-left.nut-popover-arrow--left{top:50%;transform:translateY(-50%)}.nut-popover-arrow-left.nut-popover-arrow--left-start{top:var(--nutui-popover-arrow-position, 22px);transform:translateY(0)}.nut-popover-arrow-left.nut-popover-arrow--left-end{bottom:var(--nutui-popover-arrow-position, 22px);transform:translateY(0)}.nut-popover-arrow-right{left:0px;border-right-color:var(--nutui-popover-white-background-color, var(--nsui-gray-percent-color-1, #ffffff));border-left-width:0;margin-left:-6px}.nut-popover-arrow-right.nut-popover-arrow--right{top:50%;transform:translateY(-50%)}.nut-popover-arrow-right.nut-popover-arrow--right-start{top:var(--nutui-popover-arrow-position, 22px);transform:translateY(0)}.nut-popover-arrow-right.nut-popover-arrow--right-end{bottom:var(--nutui-popover-arrow-position, 22px);transform:translateY(0)}.nut-popover-arrow--center{left:50%;transform:translate(-50%)}.nut-popover .nut-popover-content{position:relative;max-width:var(--nutui-popover-content-max-width, 300px);max-height:var(--nutui-popover-content-max-height, 300px);border-radius:var(--nutui-popover-border-radius, 4px);font-size:var(--nutui-popover-font-size, var(--nsui-font-size-4, 14px));font-family:PingFangSC;font-weight:400;color:var(--nutui-popover-primary-text-color, var(--nsui-gray-color-9, #262626));background-color:var(--nutui-popover-content-background-color, var(--nsui-gray-percent-color-1, #ffffff));box-shadow:var(--nsui-shadow-small-bottom, 0px 4px 8px 3px rgba(0, 0, 0, .04));overflow-y:initial}.nut-popover .nut-popover-content-group{display:block;height:100%;width:100%}.nut-popover .nut-popover-content .nut-popover-menu-item{position:relative;display:flex;align-items:center;min-width:var(--nutui-popover-menu-item-min-width, 88px);padding:var(--nutui-popover-menu-item-padding, 12px 16px);overflow:hidden}.nut-popover .nut-popover-content .nut-popover-menu-item:after{content:"";position:absolute;bottom:0;left:16px;right:16px;height:1px;transform:scaleY(.5);background-color:var(--nutui-popover-menu-item-divider-color, var(--nsui-gray-percent-color-2, rgba(0, 0, 0, .04)))}.nut-popover .nut-popover-content .nut-popover-menu-item:first-child{border-radius:var(--nutui-popover-border-radius, 4px) var(--nutui-popover-border-radius, 4px) 0 0}.nut-popover .nut-popover-content .nut-popover-menu-item:last-child{border-radius:0 0 var(--nutui-popover-border-radius, 4px) var(--nutui-popover-border-radius, 4px)}.nut-popover .nut-popover-content .nut-popover-menu-item:not(.nut-popover-menu-disabled):active{background-color:var(--nutui-popover-menu-item-active-background-color, var(--nsui-gray-color-2, #F5F5F5))}.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-icon{display:flex;justify-content:center;align-items:center;margin-right:12px}.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-icon.right-icon{margin-left:12px;margin-right:0}.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-name{width:100%;word-break:keep-all;line-height:var(--nutui-popover-menu-name-line-height, 22px);text-align:var(--nutui-popover-menu-name-text-align, center)}.nut-popover .nut-popover-content .nut-popover-menu-item .nut-popover-menu-item-name.has-icon{text-align:left}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled{color:var(--nutui-popover-disable-color, var(--nsui-gray-color-6, #BFBFBF));cursor:not-allowed}.nut-popover .nut-popover-content .nut-popover-menu-item.nut-popover-menu-taroitem{display:flex}.nut-popover .nut-popover-content--top .nut-popover-arrow--top{left:50%;transform:translate(-50%)}.nut-popover .nut-popover-content--top-end .nut-popover-arrow--top-end{right:var(--nutui-popover-arrow-position, 22px);transform:translate(0)}.nut-popover .nut-popover-content--top-start .nut-popover-arrow--top-start{left:var(--nutui-popover-arrow-position, 22px);transform:translate(0)}.nut-popover .nut-popover-content--left-end{bottom:0}.nut-popover .nut-popover-content--left-start{top:0}.nut-popover .nut-popover-content--right-end{bottom:0}.nut-popover .nut-popover-content--right-start{top:0}.nut-popover__container{max-height:var(--nutui-popover-container-max-height, 276px);overflow-y:auto;padding-right:var(--nutui-popover-container-padding-right, 0px)}.nut-popover__container::-webkit-scrollbar{width:4px}.nut-popover__container::-webkit-scrollbar-thumb{background-color:#00000026;border-radius:2px}.nut-popover__container::-webkit-scrollbar-track{background-color:transparent;border-radius:2px}.nut-popover__container--button-right.has-custom__node{display:flex}.nut-popover__container--button-right.has-custom__node .nut-popover__text{flex:1;margin:var(--nutui-popover-text-margin, 0px 16px 0px 0px)}.nut-popover__container--button-bottom{flex-direction:column}.nut-popover__container--button-bottom .nut-popover__button{display:flex;justify-content:flex-end;margin:var(--nutui-popover-button-margin, 12px 0px 0px 0px)}.nut-popover__title{font-size:var(--nutui-popover-title-font-size, 14px);font-weight:var(--nutui-popover-title-font-weight, 500);color:var(--nutui-popover-primary-text-color, var(--nsui-gray-color-9, #262626));line-height:var(--nutui-popover-title-line-height, 22px);margin:var(--nutui-popover-title-margin, 0px 0px 8px)}.nut-popover__text{font-weight:var(--nutui-popover-text-font-weight, 400);line-height:var(--nutui-popover-text-line-height, 22px)}.nut-popover__close--icon{display:flex;justify-content:flex-end;width:16px;height:16px;line-height:var(--nutui-popover-title-line-height, 22px);transform:translateY(3px);overflow:hidden}.nut-popover__close--icon .nut-icon{width:16px;height:16px}.nut-popover__button{overflow:hidden}.nut-popover__text.has-title{font-size:var(--nutui-popover-text-font-size-title, 12px);color:var(--nutui-popover-text-color-title, var(--nsui-gray-color-8, #595959));line-height:var(--nutui-popover-text-line-height-title, 18px)}.nut-popover__has--text .nut-popover-content-group{padding:var(--nutui-popover-content-padding, 12px 16px);box-sizing:border-box}.nut-popover__dark .nut-popover-content{color:var(--nutui-popover-dark-color, var(--nsui-white-color-1, #FFFFFF));background-color:var(--nutui-popover-dark-background-color, #434343)}.nut-popover__dark .nut-popover-content .nut-popover-menu-item:after{background-color:var(--nutui-popover-menu-item-divider-color-dark, var(--nsui-white-color-5, rgba(255, 255, 255, .1)))}.nut-popover__dark .nut-popover-content .nut-popover-menu-item:not(.nut-popover-menu-disabled):active{background-color:var(--nutui-popover-menu-item-active-background-color-dark, var(--nsui-gray-color-10, #000000))}.nut-popover__dark .nut-popover-content .nut-popover-menu-item.nut-popover-menu-disabled{color:var(--nutui-popover-disable-color-dark, var(--nsui-white-color-4, rgba(255, 255, 255, .45)))}.nut-popover__dark .nut-popover-arrow-top{border-top-color:var(--nutui-popover-dark-arrow-background-color, #434343)}.nut-popover__dark .nut-popover-arrow-left{border-left-color:var(--nutui-popover-white-background-color, var(--nsui-gray-percent-color-1, #ffffff))}.nut-popover__dark .nut-popover-arrow-right{border-right-color:var(--nutui-popover-dark-arrow-background-color, #434343)}.nut-popover__dark .nut-popover-arrow-bottom{border-bottom-color:var(--nutui-popover-dark-arrow-background-color, #434343)}.nut-popover__dark .nut-popover__container::-webkit-scrollbar-thumb{background-color:#ffffffa6}.nut-popover__dark .nut-popover__title{color:var(--nutui-popover-title-color-dark, var(--nsui-white-color-1, #FFFFFF))}.nut-popover__dark .nut-popover__text.has-title{color:var(--nutui-popover-text-color-title-dark, var(--nsui-white-color-2, rgba(255, 255, 255, .85)))}.nut-popover__light .nut-popover__close--icon{color:#8c8c8c}.nut-popover-enter-from,.nut-popover-leave-active{transform:scale(.8);opacity:0}.nut-popover-enter-active{transition-timing-function:ease-out}.nut-popover-leave-active{transition-timing-function:ease-in}.nut-popover-content-bg{position:fixed;height:100%;width:100%;top:0;left:0;background:transparent;z-index:1999}.nut-popover-wrapper{display:inline-block}.nut-popover-content-copy{position:absolute;top:-99999px}