@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
2 lines (1 loc) • 9.07 kB
CSS
.nut-tag{padding:var(--nutui-tag-padding, 0 var(--nutui-spacing-1, 8px));display:flex;flex-direction:row;justify-content:center;align-items:center;font-size:var(--nutui-tag-font-size, var(--nutui-font-size-0, 11px));border-radius:var(--nutui-tag-border-radius, var(--nutui-radius-0, 4px));height:var(--nutui-tag-height, 20px);color:var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999));border:var(--nutui-tag-border-width, 1px) solid transparent}.nut-tag .nut-icon{vertical-align:middle;margin-left:4px;color:var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999))}.nut-tag-text{font-size:var(--nutui-tag-font-size, var(--nutui-font-size-0, 11px));color:var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999))}.nut-tag-text-plain{color:var(--nutui-color-title, #0d0d0d)}.nut-tag-default{background:var(--nutui-tag-background-color, var(--nutui-color-border, #e6e6e6))}.nut-tag-primary{background:#fa2c19}.nut-tag-info{background:var(--nutui-tag-info-background-color, var(--nutui-color-info, var(--nutui-color-primary, #006dfc)))}.nut-tag-success{background:var(--nutui-tag-success-background-color, var(--nutui-color-success-background, #e5f6ec))}.nut-tag-danger{background:var(--nutui-tag-danger-background-color, var(--nutui-color-error-background, #fff2f0))}.nut-tag-warning{background:var(--nutui-tag-warning-background-color, var(--nutui-color-warning-background, #fff2e6))}.nut-tag-round{border-radius:var(--nutui-tag-round-border-radius, 8px)}.nut-tag-mark{border-radius:var(--nutui-tag-mark-border-radius, 0 8px 8px 0)}.nut-tag-close{cursor:pointer}.nut-tag-custom-icon{display:inline-flex;align-items:center;justify-content:center;font-size:var(--nutui-tag-font-size, var(--nutui-font-size-0, 11px));color:var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999));margin-left:4px}.nut-tag-plain{background-color:#fff;border:var(--nutui-tag-border-width, 1px) solid var(--nutui-color-title, #0d0d0d)}[dir=rtl] .nut-tag .nut-icon,.nut-rtl .nut-tag .nut-icon{margin-left:0;margin-right:4px}.mj-tag{border:unset;padding:0 var(--nutui-spacing-1, 8px);font-size:var(--nutui-tag-large-font-size, var(--nutui-font-size-1, 13px));border-radius:var(--nutui-tag-large-border-radius, var(--nutui-radius-1, 8px));height:var(--nutui-tag-large-height, 24px);line-height:var(--nutui-tag-large-height, 24px);box-sizing:border-box;font-weight:var(--nutui-font-weight-bold, 700);display:inline-flex}.mj-tag:after{border-radius:calc(var(--nutui-tag-large-border-radius, var(--nutui-radius-1, 8px)) * 2)}.mj-tag-small{height:var(--nutui-tag-height, 20px);line-height:var(--nutui-tag-height, 20px);font-size:var(--nutui-tag-font-size, var(--nutui-font-size-0, 11px));border-radius:var(--nutui-tag-border-radius, var(--nutui-radius-0, 4px))}.mj-tag-small:after{border-radius:calc(var(--nutui-tag-border-radius, var(--nutui-radius-0, 4px)) * 2)}.mj-tag-round-default,.mj-tag-round-small{border-radius:var(--nutui-radius-circle, 999px)}.mj-tag-primary-default{color:var(--nutui-tag-primary-color, var(--nutui-color-primary, #006dfc));background-color:var(--nutui-tag-primary-background-color, var(--nutui-color-primary-background, #e6f0ff));position:relative}.mj-tag-primary-default:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-primary-fill{color:var(--nutui-color-white, #ffffff);background-color:var(--nutui-tag-primary-color, var(--nutui-color-primary, #006dfc));position:relative}.mj-tag-primary-fill:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-primary-plain{color:var(--nutui-tag-primary-color, var(--nutui-color-primary, #006dfc));background-color:var(--nutui-color-white, #ffffff);position:relative}.mj-tag-primary-plain:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid var(--nutui-tag-primary-color, var(--nutui-color-primary, #006dfc));transform:scale(.5);content:""}.mj-tag-warning-default{color:var(--nutui-tag-warning-color, var(--nutui-color-warning, #ff850c));background-color:var(--nutui-tag-warning-background-color, var(--nutui-color-warning-background, #fff2e6));position:relative}.mj-tag-warning-default:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-warning-fill{color:var(--nutui-color-white, #ffffff);background-color:var(--nutui-tag-warning-color, var(--nutui-color-warning, #ff850c));position:relative}.mj-tag-warning-fill:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-warning-plain{color:var(--nutui-tag-warning-color, var(--nutui-color-warning, #ff850c));background-color:var(--nutui-color-white, #ffffff);position:relative}.mj-tag-warning-plain:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid var(--nutui-tag-warning-color, var(--nutui-color-warning, #ff850c));transform:scale(.5);content:""}.mj-tag-danger-default{color:var(--nutui-tag-danger-color, var(--nutui-color-error, #ff4949));background-color:var(--nutui-tag-danger-background-color, var(--nutui-color-error-background, #fff2f0));position:relative}.mj-tag-danger-default:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-danger-fill{color:var(--nutui-color-white, #ffffff);background-color:var(--nutui-tag-danger-color, var(--nutui-color-error, #ff4949));position:relative}.mj-tag-danger-fill:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-danger-plain{color:var(--nutui-tag-danger-color, var(--nutui-color-error, #ff4949));background-color:var(--nutui-color-white, #ffffff);position:relative}.mj-tag-danger-plain:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid var(--nutui-tag-danger-color, var(--nutui-color-error, #ff4949));transform:scale(.5);content:""}.mj-tag-success-default{color:var(--nutui-tag-success-color, var(--nutui-color-success, #02ad4a));background-color:var(--nutui-tag-success-background-color, var(--nutui-color-success-background, #e5f6ec));position:relative}.mj-tag-success-default:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-success-fill{color:var(--nutui-color-white, #ffffff);background-color:var(--nutui-tag-success-color, var(--nutui-color-success, #02ad4a));position:relative}.mj-tag-success-fill:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-success-plain{color:var(--nutui-tag-success-color, var(--nutui-color-success, #02ad4a));background-color:var(--nutui-color-white, #ffffff);position:relative}.mj-tag-success-plain:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid var(--nutui-tag-success-color, var(--nutui-color-success, #02ad4a));transform:scale(.5);content:""}.mj-tag-default-default{color:var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999));background-color:var(--nutui-tag-background-color, var(--nutui-color-border, #e6e6e6));position:relative}.mj-tag-default-default:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-default-fill{color:var(--nutui-color-white, #ffffff);background-color:var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999));position:relative}.mj-tag-default-fill:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid transparent;transform:scale(.5);content:""}.mj-tag-default-plain{color:var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999));background-color:var(--nutui-color-white, #ffffff);position:relative}.mj-tag-default-plain:after{position:absolute;top:-50%;left:-50%;display:block;box-sizing:border-box;width:200%;height:200%;border:1px solid var(--nutui-tag-color, var(--nutui-color-text-disabled, #999999));transform:scale(.5);content:""}.mj-tag-close-icon{line-height:14px;margin-left:var(--nutui-spacing-0, 4px);font-size:14px}.mj-tag-close-icon-fill{color:var(--nutui-color-white, #ffffff)}.mj-tag-close-icon-plain,.mj-tag-close-icon-default{color:var(--nutui-color-text-disabled, #999999)}.nut-tag-text{all:unset;line-height:1.5;font-size:inherit;color:inherit}