ten-design-vue
Version:
ten-vue
76 lines (72 loc) • 1.35 kB
text/less
/* 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;
}
}