141 lines
5.0 KiB
CSS
141 lines
5.0 KiB
CSS
.t-badge {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: start;
|
|
}
|
|
.t-badge--basic {
|
|
z-index: 100;
|
|
padding: 0 var(--td-badge-basic-padding, 8rpx);
|
|
font: var(--td-badge-font, var(--td-font-mark-extraSmall, 600 20rpx / 32rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
|
color: var(--td-badge-text-color, var(--td-text-color-anti, var(--td-font-white-1, #ffffff)));
|
|
background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
|
|
text-align: center;
|
|
height: var(--td-badge-basic-height, 32rpx);
|
|
border-radius: var(--td-badge-border-radius, 4rpx);
|
|
}
|
|
.t-badge--dot {
|
|
height: var(--td-badge-dot-size, 16rpx);
|
|
border-radius: 50%;
|
|
min-width: var(--td-badge-dot-size, 16rpx);
|
|
padding: 0;
|
|
}
|
|
.t-badge--count {
|
|
min-width: var(--td-badge-basic-width, 32rpx);
|
|
white-space: nowrap;
|
|
box-sizing: border-box;
|
|
}
|
|
.t-badge--circle {
|
|
border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
|
|
}
|
|
.t-badge__ribbon-outer,
|
|
.t-badge__ribbon-right-outer,
|
|
.t-badge__triangle-right-outer,
|
|
.t-badge__ribbon-left-outer,
|
|
.t-badge__triangle-left-outer {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.t-badge__ribbon-outer,
|
|
.t-badge__ribbon-right-outer,
|
|
.t-badge__triangle-right-outer {
|
|
right: 0;
|
|
}
|
|
.t-badge__ribbon-left-outer,
|
|
.t-badge__triangle-left-outer {
|
|
left: 0;
|
|
}
|
|
.t-badge--bubble {
|
|
border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
|
|
}
|
|
.t-badge--ribbon,
|
|
.t-badge--ribbon-right,
|
|
.t-badge--ribbon-left,
|
|
.t-badge--triangle-left,
|
|
.t-badge--triangle-right {
|
|
width: calc(var(--td-badge-basic-height, 32rpx) * 2);
|
|
height: calc(var(--td-badge-basic-height, 32rpx) * 2);
|
|
border-radius: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
.t-badge--ribbon,
|
|
.t-badge--ribbon-right {
|
|
background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
|
|
}
|
|
.t-badge--triangle-right {
|
|
background: linear-gradient(45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
|
|
}
|
|
.t-badge--ribbon,
|
|
.t-badge--ribbon-right,
|
|
.t-badge--triangle-right {
|
|
right: 0;
|
|
}
|
|
.t-badge--ribbon .t-badge__count,
|
|
.t-badge--ribbon-right .t-badge__count,
|
|
.t-badge--triangle-right .t-badge__count {
|
|
transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
|
|
}
|
|
.t-badge--ribbon-left {
|
|
background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 85%, transparent 85%);
|
|
}
|
|
.t-badge--triangle-left {
|
|
background: linear-gradient(-45deg, transparent 50%, var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941))) 50%);
|
|
}
|
|
.t-badge--ribbon-left,
|
|
.t-badge--triangle-left {
|
|
left: 0;
|
|
}
|
|
.t-badge--ribbon-left .t-badge__count,
|
|
.t-badge--triangle-left .t-badge__count {
|
|
transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
|
|
}
|
|
.t-badge--large {
|
|
font: var(--td-badge-large-font, var(--td-font-mark-small, 600 24rpx / 40rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular)));
|
|
height: var(--td-badge-large-height, 40rpx);
|
|
min-width: var(--td-badge-large-height, 40rpx);
|
|
padding: 0 var(--td-badge-large-padding, 10rpx);
|
|
}
|
|
.t-badge--large.t-badge--circle {
|
|
border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
|
|
}
|
|
.t-badge--large.t-badge--ribbon,
|
|
.t-badge--large.t-badge--ribbon-right,
|
|
.t-badge--large.t-badge--ribbon-left,
|
|
.t-badge--large.t-badge--triangle-right,
|
|
.t-badge--large.t-badge--triangle-left {
|
|
width: calc(var(--td-badge-large-height, 40rpx) * 2);
|
|
height: calc(var(--td-badge-large-height, 40rpx) * 2);
|
|
padding: 0;
|
|
}
|
|
.t-badge--large.t-badge--ribbon .t-badge__count,
|
|
.t-badge--large.t-badge--ribbon-right .t-badge__count,
|
|
.t-badge--large.t-badge--triangle-right .t-badge__count {
|
|
transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
|
|
}
|
|
.t-badge--large.t-badge--ribbon-left .t-badge__count,
|
|
.t-badge--large.t-badge--triangle-left .t-badge__count {
|
|
transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
|
|
}
|
|
.t-badge__content:not(:empty) + .t-badge--bubble.t-has-count,
|
|
.t-badge__content:not(:empty) + .t-badge--circle.t-has-count,
|
|
.t-badge__content:not(:empty) + .t-badge--square.t-has-count {
|
|
transform-origin: center center;
|
|
transform: translate(-50%, -50%);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
}
|
|
.t-badge__content-text {
|
|
display: block;
|
|
font: var(--td-font-body-large, 32rpx / 48rpx var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular));
|
|
color: var(--td-badge-content-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
|
|
}
|
|
.t-badge__count:empty {
|
|
display: none;
|
|
}
|