@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; color: unset; 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-count-background; 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; 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 0.3s @ease-out-back; animation-fill-mode: both; } &-zoom-leave { animation: antZoomBadgeOut 0.3s @ease-in-back; animation-fill-mode: both; } &-not-a-wrapper { &:not(.@{badge-prefix-cls}-status) { vertical-align: middle; } .@{ant-prefix}-scroll-number { position: relative; top: auto; display: block; } .@{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 0.3s @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; } } @import './ribbon'; @import './rtl';