diff --git a/components/badge/style/index.less b/components/badge/style/index.less index e69de29bb2d..d638e0a15b1 100644 --- a/components/badge/style/index.less +++ b/components/badge/style/index.less @@ -0,0 +1,191 @@ +@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: @highlight-color; + border-radius: @badge-height / 2; + box-shadow: 0 0 0 1px @shadow-color-inverse; + a, + a:hover { + color: @badge-text-color; + } + } + + &-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 { + 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; + } +} diff --git a/components/layout/demo/side.ts b/components/layout/demo/side.ts index 6baceac3e5e..05887d15ded 100644 --- a/components/layout/demo/side.ts +++ b/components/layout/demo/side.ts @@ -22,7 +22,7 @@ import { Component } from '@angular/core';
  • - File + File
    • diff --git a/components/menu/demo/horizontal.ts b/components/menu/demo/horizontal.ts index 5211f027b81..285aaa5c7ee 100755 --- a/components/menu/demo/horizontal.ts +++ b/components/menu/demo/horizontal.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; selector: 'nz-demo-menu-horizontal', template: `