Fix badge position when it's children is display:block

https://codepen.io/afc163/pen/MBMjqG?editors=0110
ant-design · Aug 16, 2018 · 84119d8959d55edf535a9cac5ff532e61b6ee698 · 84119d8
1 parent b126b23
commit 84119d8959d55edf535a9cac5ff532e61b6ee698
Unified Split

Showing with 7 additions and 5 deletions.

+7 −5 components/badge/style/index.less
diff --git a/components/badge/style/index.less b/components/badge/style/index.less
@@ -14,8 +14,9 @@
  &-count {
    position: absolute;
-  
-    transform: translateX(-50%);
-  
-    top: -@badge-height / 2;
+  
+    transform: translate(50%, -50%);
+  
+    top: 0;
+  
+    right: 0;
    height: @badge-height;
    border-radius: @badge-height / 2;
    min-width: @badge-height;
@@ -27,7 +28,7 @@
    font-size: @badge-font-size;
    font-weight: @badge-font-weight;
    white-space: nowrap;
-  
-    transform-origin: -10% center;
+  
+    transform-origin: 0 center;
    box-shadow: 0 0 0 1px #fff;
    a,
    a:hover {
@@ -41,9 +42,10 @@
  &-dot {
    position: absolute;
-  
-    transform: translateX(-50%);
+  
+    transform: translate(50%, -50%);
    transform-origin: 0 center;
-  
-    top: -@badge-dot-size / 2;
+  
+    top: 0;
+  
+    right: 0;
    height: @badge-dot-size;
    width: @badge-dot-size;
    border-radius: 100%;