@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 3.93 kB
CSS
.nut-avatar-group{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto}.nut-avatar-group .nut-avatar{border:1px solid #fff}.nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:-8px}[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:0;margin-right:-8px}.nut-image{display:block;position:relative}.nut-image .nut-img{display:block;width:100%;height:100%}.nut-image.nut-image-round{border-radius:50%;overflow:hidden}.nut-image .nut-img-loading,.nut-image .nut-img-error{width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--nutui-gray-3, #f6f6f6);background-size:100% 100%}[dir=rtl] .nut-image .nut-img-loading,.nut-rtl .nut-image .nut-img-loading,[dir=rtl] .nut-image .nut-img-error,.nut-rtl .nut-image .nut-img-error{left:auto;right:0}.nut-avatar{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto;text-align:center}.nut-avatar .avatar-img{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);flex-shrink:0}.nut-avatar .icon{background-size:100% 100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nut-avatar .nut-icon-img{width:100%;height:100%}.nut-avatar .text{display:inline-block;width:100%;height:100%;text-align:center;overflow:hidden}[dir=rtl] .nut-avatar .avatar-img,.nut-rtl .nut-avatar .avatar-img,[dir=rtl] .nut-avatar .icon,.nut-rtl .nut-avatar .icon{left:auto;right:50%;transform:translate(50%,-50%)}.nut-avatar-large{width:var(--nutui-avatar-large-width, 60px);height:var(--nutui-avatar-large-height, 60px);line-height:var(--nutui-avatar-large-height, 60px)}.nut-avatar-small{width:var(--nutui-avatar-small-width, 32px);height:var(--nutui-avatar-small-height, 32px);line-height:var(--nutui-avatar-small-height, 32px)}.nut-avatar-normal{width:var(--nutui-avatar-normal-width, 40px);height:var(--nutui-avatar-normal-height, 40px);line-height:var(--nutui-avatar-normal-height, 40px)}.nut-avatar-round{border-radius:50%;overflow:hidden}.nut-avatar-square{border-radius:var(--nutui-avatar-square, 5px)}.nut-skeleton{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;width:100%}.nut-skeleton-content{display:flex}.nut-skeleton-content .nut-avatar{margin-right:20px;background:var(--nutui-skeleton-background, var(--nutui-gray-3, #f6f6f6))}.nut-skeleton-content .nut-skeleton-block{width:var(--nutui-skeleton-line-width, 100%);height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, var(--nutui-gray-3, #f6f6f6));margin-top:10px;border-radius:var(--nutui-skeleton-line-border-radius, 0)}.nut-skeleton-content-line{width:100%;display:flex;flex-direction:column}.nut-skeleton-content-line .nut-skeleton-title{width:30%;height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, var(--nutui-gray-3, #f6f6f6))}.nut-skeleton-content-line .nut-skeleton-block:last-child{width:70%}.nut-skeleton-animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(90deg,#fff0,#ffffff80 50%,#fff0 80%);animation:nut-skeleton 2s ease-in-out 0s infinite}@keyframes nut-skeleton{0%{background-position-x:-500px}to{background-position-x:calc(500px + 100%)}}[dir=rtl] .nut-skeleton-content .nut-avatar,.nut-rtl .nut-skeleton-content .nut-avatar{margin-right:0;margin-left:20px}[dir=rtl] .nut-skeleton-animation,.nut-rtl .nut-skeleton-animation{left:auto;right:0;background:linear-gradient(-90deg,#fff0,#ffffff80 50%,#fff0 80%);animation:nut-skeleton-rtl 2s ease-in-out 0s infinite}@keyframes nut-skeleton-rtl{0%{background-position-x:calc(500px + 100%)}to{background-position-x:-500px}}