@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
2 lines (1 loc) • 3.29 kB
CSS
.nut-avatar-group{display:flex;flex-direction:row;flex:0 0 auto}.nut-avatar-group-avatar,.nut-avatar-group .nut-avatar{border:1px solid #fff;margin-left:-8px}.nut-avatar-group-avatar:not(:first-of-type),.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-default{display:block;width:100%;height:100%}.nut-image.nut-image-round{border-radius:50%;overflow:hidden}.nut-image-basic{width:100%;height:100%}.nut-image-loading,.nut-image-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-color-background, #f8f8f8);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{position:relative;flex:0 0 auto;display:flex;justify-content:center;align-items:center;width:var(--nutui-avatar-normal-width, 40px);height:var(--nutui-avatar-normal-height, 40px)}.nut-avatar-round{border-radius:999px;overflow:hidden}.nut-avatar-square{border-radius:var(--nutui-avatar-square, 5px)}.nut-avatar-first-child{margin-left:0;margin-right:0}.nut-avatar-img{width:100%;height:100%;flex-shrink:0;background-size:100% 100%;background-repeat:no-repeat;background-position:center center}.nut-avatar-icon{background-size:100% 100%}.nut-avatar-text{display:flex;justify-content:center;align-items:center}.nut-avatar-large,.nut-avatar-large-img,.nut-avatar-large-icon,.nut-avatar-large-text{width:var(--nutui-avatar-large-width, 60px);height:var(--nutui-avatar-large-height, 60px)}.nut-avatar-small,.nut-avatar-small-text{width:var(--nutui-avatar-small-width, 32px);height:var(--nutui-avatar-small-height, 32px)}.nut-skeleton{line-height:0px;font-size:0px}.nut-skeleton-content{position:relative;display:inline-flex;width:var(--nutui-skeleton-line-width, 100%);background:var(--nutui-skeleton-background, var(--nutui-color-background-sunken, var(--nutui-color-background, #f8f8f8)));border-radius:var(--nutui-skeleton-line-border-radius, var(--nutui-radius-1, 8px));overflow:hidden}.nut-skeleton-content-normal{height:var(--nutui-skeleton-line-normal-height, 24px)}.nut-skeleton-content-large{height:var(--nutui-skeleton-line-large-height, 32px)}.nut-skeleton-content-small{height:var(--nutui-skeleton-line-small-height, 16px);margin-top:8px}.nut-skeleton-content-small-0{margin-top:0}.nut-skeleton-animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(90deg,#0000,#00000005,#0000);animation-name:nut-skeleton;animation-delay:0s;animation-duration:.6s;animation-direction:normal;animation-fill-mode:both;animation-play-state:running;animation-iteration-count:1;animation-timing-function:linear}@keyframes nut-skeleton{0%{transform:translate(-100%)}to{transform:translate(100%)}}[dir=rtl] .nut-skeleton-animation,.nut-rtl .nut-skeleton-animation{left:auto;right:0;animation:nut-skeleton-rtl 2s linear 0s infinite}@keyframes nut-skeleton-rtl{0%{transform:translate(100%)}to{transform:translate(-100%)}}