ant-design/components/badge/style/index.less
2021-01-28 18:16:05 +08:00

239 lines
4.8 KiB
Plaintext

@import '../../style/themes/index';
@import '../../style/mixins/index';
@badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';
.@{badge-prefix-cls} {
.reset-component();
position: relative;
display: inline-block;
line-height: 1;
&-count {
z-index: @zindex-badge;
min-width: @badge-height;
height: @badge-height;
padding: 0 6px;
color: @badge-text-color;
font-weight: @badge-font-weight;
font-size: @badge-font-size;
line-height: @badge-height;
white-space: nowrap;
text-align: center;
background: @badge-color;
border-radius: (@badge-height / 2);
box-shadow: 0 0 0 1px @shadow-color-inverse;
a,
a:hover {
color: @badge-text-color;
}
}
&-count-sm {
min-width: @badge-height-sm;
height: @badge-height-sm;
padding: 0;
font-size: @badge-font-size-sm;
line-height: @badge-height-sm;
border-radius: (@badge-height-sm / 2);
}
&-multiple-words {
padding: 0 8px;
}
&-dot {
z-index: @zindex-badge;
width: @badge-dot-size;
min-width: @badge-dot-size;
height: @badge-dot-size;
background: @highlight-color;
border-radius: 100%;
box-shadow: 0 0 0 1px @shadow-color-inverse;
}
&-count,
&-dot,
.@{number-prefix-cls}-custom-component {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
transform-origin: 100% 0%;
}
&-status {
line-height: inherit;
vertical-align: baseline;
&-dot {
position: relative;
top: -1px;
display: inline-block;
width: @badge-status-size;
height: @badge-status-size;
vertical-align: middle;
border-radius: 50%;
}
&-success {
background-color: @success-color;
}
&-processing {
position: relative;
background-color: @processing-color;
&::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid @processing-color;
border-radius: 50%;
animation: antStatusProcessing 1.2s infinite ease-in-out;
content: '';
}
}
&-default {
background-color: @normal-color;
}
&-error {
background-color: @error-color;
}
&-warning {
background-color: @warning-color;
}
// mixin to iterate over colors and create CSS class for each one
.make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@preset-colors, @i);
@darkColor: '@{color}-6';
&-@{color} {
background: @@darkColor;
}
}
.make-color-classes();
&-text {
margin-left: 8px;
color: @text-color;
font-size: @font-size-base;
}
}
&-zoom-appear,
&-zoom-enter {
animation: antZoomBadgeIn @animation-duration-slow @ease-out-back;
animation-fill-mode: both;
}
&-zoom-leave {
animation: antZoomBadgeOut @animation-duration-slow @ease-in-back;
animation-fill-mode: both;
}
&-not-a-wrapper {
.@{badge-prefix-cls}-zoom-appear,
.@{badge-prefix-cls}-zoom-enter {
animation: antNoWrapperZoomBadgeIn @animation-duration-slow @ease-out-back;
}
.@{badge-prefix-cls}-zoom-leave {
animation: antNoWrapperZoomBadgeOut @animation-duration-slow @ease-in-back;
}
&:not(.@{badge-prefix-cls}-status) {
vertical-align: middle;
}
.@{number-prefix-cls}-custom-component {
transform: none;
}
.@{number-prefix-cls}-custom-component,
.@{ant-prefix}-scroll-number {
position: relative;
top: auto;
display: block;
transform-origin: 50% 50%;
}
.@{badge-prefix-cls}-count {
transform: none;
}
}
}
@keyframes antStatusProcessing {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
.@{number-prefix-cls} {
overflow: hidden;
&-only {
display: inline-block;
height: @badge-height;
transition: all @animation-duration-slow @ease-in-out;
> p.@{number-prefix-cls}-only-unit {
height: @badge-height;
margin: 0;
}
}
&-symbol {
vertical-align: top;
}
}
@keyframes antZoomBadgeIn {
0% {
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
100% {
transform: scale(1) translate(50%, -50%);
}
}
@keyframes antZoomBadgeOut {
0% {
transform: scale(1) translate(50%, -50%);
}
100% {
transform: scale(0) translate(50%, -50%);
opacity: 0;
}
}
@keyframes antNoWrapperZoomBadgeIn {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
}
}
@keyframes antNoWrapperZoomBadgeOut {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
opacity: 0;
}
}
@import './ribbon';
@import './rtl';