element/packages/theme-default/src/badge.css

41 lines
908 B
CSS

@charset "UTF-8";
@import "./common/var.css";
@component-namespace el {
@b badge {
position: relative;
vertical-align: middle;
display: inline-block;
@e content {
background-color: var(--badge-fill);
border-radius: var(--badge-radius);
color: var(--color-white);
display: inline-block;
font-size: var(--badge-font-size);
height: var(--badge-size);
line-height: var(--badge-size);
padding: 0 var(--badge-padding);
text-align: center;
white-space: nowrap;
border: 1px solid var(--color-white);
@when fixed {
position: absolute 0 calc(var(--badge-size) / 2 + 1) * *;
transform: translateY(-50%) translateX(100%);
@when dot {
right: 5px;
}
}
@when dot {
size: 8px 8px;
padding: 0;
right: 0;
border-radius: 50%;
}
}
}
}