127 lines
2.8 KiB
SCSS
127 lines
2.8 KiB
SCSS
@use 'sass:map';
|
|
|
|
@use '../mixins/mixins.scss' as *;
|
|
@use '../var/size.scss' as *;
|
|
|
|
$tn-inner-sizes: 'lg', 'xl';
|
|
|
|
$badge-sizes: () !default;
|
|
$badge-sizes: map.merge(
|
|
(
|
|
'': (
|
|
font-size: 20rpx,
|
|
icon-size: 22rpx,
|
|
padding: 4rpx 8rpx,
|
|
size: 26rpx,
|
|
),
|
|
'lg': (
|
|
font-size: 26rpx,
|
|
icon-size: 28rpx,
|
|
padding: 4rpx 10rpx,
|
|
size: 32rpx,
|
|
),
|
|
'xl': (
|
|
font-size: 30rpx,
|
|
icon-size: 32rpx,
|
|
padding: 4rpx 12rpx,
|
|
size: 40rpx,
|
|
),
|
|
),
|
|
$badge-sizes
|
|
);
|
|
|
|
/* 绝对定位 */
|
|
@mixin absolute-style {
|
|
@at-root {
|
|
&__absolute {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
&--center {
|
|
transform: translate(50%, -50%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include b(badge) {
|
|
display: inline-block;
|
|
|
|
position: relative;
|
|
z-index: 1;
|
|
/* 绝对定位 start */
|
|
@include absolute-style;
|
|
/* 绝对定位 end */
|
|
}
|
|
|
|
/* 徽标内容 start */
|
|
@include b(badge-content) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
position: relative;
|
|
|
|
width: fit-content;
|
|
height: auto;
|
|
border-radius: 1000rpx;
|
|
transform-origin: center center;
|
|
|
|
font-size: map-get(map-get($badge-sizes, ''), font-size);
|
|
padding: map-get(map-get($badge-sizes, ''), padding);
|
|
|
|
/* 绝对定位 start */
|
|
@include absolute-style;
|
|
/* 绝对定位 end */
|
|
|
|
/* 数据内容 start */
|
|
@include e(data) {
|
|
line-height: 1;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
/* 数据内容 end */
|
|
|
|
/* 尺寸 start */
|
|
@each $size in $tn-inner-sizes {
|
|
@include m($size) {
|
|
font-size: map-get(map-get($badge-sizes, $size), font-size);
|
|
padding: map-get(map-get($badge-sizes, $size), padding);
|
|
}
|
|
}
|
|
/* 尺寸 end */
|
|
|
|
/* 点徽标 start */
|
|
@include m(dot) {
|
|
width: map-get(map-get($badge-sizes, ''), size);
|
|
height: map-get(map-get($badge-sizes, ''), size);
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
|
|
@each $size in $tn-inner-sizes {
|
|
@include spec-selector('', false, $size) {
|
|
width: map-get(map-get($badge-sizes, $size), size);
|
|
height: map-get(map-get($badge-sizes, $size), size);
|
|
}
|
|
}
|
|
}
|
|
/* 点徽标 end */
|
|
|
|
/* 图标徽标 start */
|
|
@include m(icon) {
|
|
font-size: map-get(map-get($badge-sizes, ''), icon-size);
|
|
width: calc(map-get(map-get($badge-sizes, ''), icon-size) + 8rpx);
|
|
height: calc(map-get(map-get($badge-sizes, ''), icon-size) + 8rpx);
|
|
padding: 0;
|
|
@each $size in $tn-inner-sizes {
|
|
@include spec-selector('', false, $size) {
|
|
font-size: map-get(map-get($badge-sizes, $size), icon-size);
|
|
width: calc(map-get(map-get($badge-sizes, $size), icon-size) + 8rpx);
|
|
height: calc(map-get(map-get($badge-sizes, $size), icon-size) + 8rpx);
|
|
}
|
|
}
|
|
}
|
|
/* 图标徽标 end */
|
|
}
|
|
/* 徽标内容 end */
|