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) • 4.06 kB
CSS
.nut-tag{padding:var(--nutui-tag-padding, 0 6px);display:inline-flex;justify-content:center;align-items:center;font-size:var(--nutui-tag-font-size, 12px);border-radius:var(--nutui-tag-border-radius, 2px);height:var(--nutui-tag-height, 20px);color:var(--nutui-tag-color, var(--nsui-gray-color-1, #ffffff));border:var(--nutui-tag-border-width, 1px) solid transparent;max-width:var(--nutui-tag-max-width, 108px)}.nut-tag .nut-tag-text{width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nut-tag.nut-tag--large{padding:var(--nutui-tag-padding-large, 0 8px);height:var(--nutui-tag-height-large, 24px)}.nut-tag.nut-tag--small{padding:var(--nutui-tag-padding-small, 0 4px);height:var(--nutui-tag-height-small, 18px)}.nut-tag .nut-icon{vertical-align:middle;margin-left:4px}.nut-tag--default{color:var(--nutui-tag-default-color, var(--nsui-gray-color-9, #262626));background:var(--nutui-tag-default-background-color, var(--nsui-gray-color-3, #F0F0F0));border:var(--nutui-tag-border-width, 1px) solid var(--nutui-tag-default-border-color, transparent)}.nut-tag--default.nut-tag--disabled{color:var(--nutui-tag-disabled-color, var(--nsui-gray-color-6, #BFBFBF));background:var(--nutui-tag-disabled-background-color, var(--nsui-gray-color-2, #F5F5F5))}.nut-tag--default.nut-tag--outline{background:transparent;border:var(--nutui-tag-border-width, 1px) solid var(--nutui-tag-default-outline-border-color, var(--nsui-gray-color-5, #D9D9D9))}.nut-tag--default.nut-tag--outline.nut-tag--disabled{border:var(--nutui-tag-border-width, 1px) solid var(--nutui-tag-disabled-outline-border-color, var(--nsui-gray-color-3, #F0F0F0))}.nut-tag--primary{background:var(--nutui-tag-primary-background-color, var(--nutui-brand-color, #2C68FF))}.nut-tag--primary.nut-tag--outline{color:var(--nutui-tag-primary-background-color, var(--nutui-brand-color, #2C68FF));background:transparent;border:var(--nutui-tag-border-width, 1px) solid var(--nutui-tag-primary-background-color, var(--nutui-brand-color, #2C68FF))}.nut-tag--primary.nut-tag--plain{color:var(--nutui-tag-primary-background-color, var(--nutui-brand-color, #2C68FF));background:var(--nutui-tag-primary-plain-background-color, #F6F8FD);border:var(--nutui-tag-border-width, 1px) solid transparent}.nut-tag--success{background:var(--nutui-tag-success-background-color, #0ED57D)}.nut-tag--success.nut-tag--outline{color:var(--nutui-tag-success-background-color, #0ED57D);background:transparent;border:var(--nutui-tag-border-width, 1px) solid var(--nutui-tag-success-background-color, #0ED57D)}.nut-tag--success.nut-tag--plain{color:var(--nutui-tag-success-background-color, #0ED57D);background:var(--nutui-tag-success-plain-background-color, #F2FCF8);border:var(--nutui-tag-border-width, 1px) solid transparent}.nut-tag--danger{background:var(--nutui-tag-danger-background-color, #FF2C33)}.nut-tag--danger.nut-tag--outline{color:var(--nutui-tag-danger-background-color, #FF2C33);background:transparent;border:var(--nutui-tag-border-width, 1px) solid var(--nutui-tag-danger-background-color, #FF2C33)}.nut-tag--danger.nut-tag--plain{color:var(--nutui-tag-danger-background-color, #FF2C33);background:var(--nutui-tag-danger-plain-background-color, #FFF4F4);border:var(--nutui-tag-border-width, 1px) solid transparent}.nut-tag--warning{background:var(--nutui-tag-warning-background-color, #FFA02C)}.nut-tag--warning.nut-tag--outline{color:var(--nutui-tag-warning-background-color, #FFA02C);background:transparent;border:var(--nutui-tag-border-width, 1px) solid var(--nutui-tag-warning-background-color, #FFA02C)}.nut-tag--warning.nut-tag--plain{color:var(--nutui-tag-warning-background-color, #FFA02C);background:var(--nutui-tag-warning-plain-background-color, #FFFAF4);border:var(--nutui-tag-border-width, 1px) solid transparent}.nut-tag--round{border-radius:var(--nutui-tag-round-border-radius, 20px)}.nut-tag--mark{border-radius:var(--nutui-tag-mark-border-radius, 0 12px 12px 0)}.nut-tag--close{cursor:pointer}.nut-tag-custom-icon{display:inline-flex;align-items:center;justify-content:center}