소스 검색

fix: the light theme badge does not look as expected when used alone (#2930)

YannLynn 2 달 전
부모
커밋
9163f9f174
2개의 변경된 파일10개의 추가작업 그리고 26개의 파일을 삭제
  1. 0 25
      packages/semi-foundation/badge/badge.scss
  2. 10 1
      packages/semi-ui/badge/_story/badge.stories.jsx

+ 0 - 25
packages/semi-foundation/badge/badge.scss

@@ -72,31 +72,6 @@ $module: #{$prefix}-badge;
         display: inline-block;
     }
 
-    &-light::before {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: $color-badge_default_light-bg-default;
-        z-index: $z-badge_light-bg;
-    }
-
-    &-light::after {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 100%;
-        border-radius: inherit;
-        position: absolute;
-        top: 0;
-        left: 0;
-        background-color: inherit;
-        z-index: $z-badge_light-bg;
-    }
 
     &-primary {
         &.#{$module}-solid {

+ 10 - 1
packages/semi-ui/badge/_story/badge.stories.jsx

@@ -123,4 +123,13 @@ export const AvatarBadge = () => {
       </div>
   );  
 };
-AvatarBadge.storyName = '头像 badge';
+AvatarBadge.storyName = '头像 badge';
+
+export const SingleUsage = () => {
+  return (
+    <div>
+      <Badge count={5} theme='light' type='primary' countStyle={{ backgroundColor: 'lightPink' }}/>
+    </div>
+  );
+};
+SingleUsage.storyName = '单个使用';