UNPKG

ten-design-vue

Version:

ten-vue

76 lines (72 loc) 1.35 kB
/* dependencies icon */ @import '../vars.less'; .ten-badge { display: inline-block; .ten-badge__badge { padding: 0px 5px; line-height: 20px; min-width: 20px; font-size: @smalltext-level-1-size; border-radius: @badge-border-radius-default; height: 20px; user-select: none; color: #fff; white-space: nowrap; text-align: center; &--dot { padding: 0; width: 6px; height: 6px; min-width: auto; border-radius: 100%; font-size: 0; } &--round { border-radius: 10px; } } } .ten-badge--pos-corner { position: relative; .ten-badge__badge { position: absolute; left: 100%; top: 0; transform: translate(-8px, -50%); &--dot { transform: translate(-50%, -50%); } } } .ten-badge--pos-normal { display: inline-flex; align-items: center; .ten-badge__badge { margin-left: 16px; } } .ten-badge--theme-error { .ten-badge__badge { background: @error-color; } } .ten-badge--theme-info { .ten-badge__badge { background: @primary-color; } } .ten-badge--theme-success { .ten-badge__badge { background: @success-color; } } .ten-badge--theme-warning { .ten-badge__badge { background: @warning-color; } } .ten-badge--theme-disabled { .ten-badge__badge { background: @disabled-color; } }