123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- @import (reference) './variable.less';
- @badgePrefix: ant-badge;
- .@{badgePrefix} {
- display: inline-block;
- position: relative;
- &-content {
- position: absolute;
- display: flex;
- height: 28 * @rpx;
- align-self: center;
- align-items: center;
- font-size: 18 * @rpx;
- padding: 4 * @rpx 8 * @rpx;
- box-sizing: border-box;
- word-break: keep-all;
- justify-content: center;
- top: 0;
- left: 100%;
- transform: translate(-50%, -50%);
- &-stroke {
- border: 2 * @rpx solid @COLOR_WHITE;
- }
- &-text {
- padding-left: 4 * @rpx;
- &:empty {
- display: none;
- }
- .ant-badge-icon-container:empty ~ & {
- padding-left: 0;
- }
- }
- .ant-icon {
- font-size: 18 * @rpx;
- color: @COLOR_WHITE;
- }
- &-not-dot {
- min-width: 28 * @rpx;
- height: 28 * @rpx;
- border-radius: 28 * @rpx;
- display: flex;
- background-color: @badge-background-color;
- }
- }
- &-dot {
- width: 20 * @rpx;
- height: 20 * @rpx;
- border-radius: 50%;
- background-color: @badge-background-color;
- &-stroke {
- border: 2 * @rpx solid @COLOR_WHITE;
- }
- }
- &-number,
- &-text,
- &-bubble {
- color: @COLOR_WHITE;
- }
- }
|