Browse Source

Button: circle button supports size (#11275)

让circle button也支持size属性控制,padding的大小根据size属性的```button-padding-vertical```确定
douxc 7 years ago
parent
commit
bc75c14dac
1 changed files with 10 additions and 1 deletions
  1. 10 1
      packages/theme-chalk/src/button.scss

+ 10 - 1
packages/theme-chalk/src/button.scss

@@ -119,7 +119,7 @@
   }
   @include when(circle) {
     border-radius: 50%;
-    padding: 12px;
+    padding: $--button-padding-vertical;
   }
   @include m(primary) {
     @include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
@@ -138,12 +138,21 @@
   }
   @include m(medium) {
     @include button-size($--button-medium-padding-vertical, $--button-medium-padding-horizontal, $--button-medium-font-size, $--button-medium-border-radius);
+    @include when(circle) {
+      padding: $--button-medium-padding-vertical;
+    }
   }
   @include m(small) {
     @include button-size($--button-small-padding-vertical, $--button-small-padding-horizontal, $--button-small-font-size, $--button-small-border-radius);
+    @include when(circle) {
+      padding: $--button-small-padding-vertical;
+    }
   }
   @include m(mini) {
     @include button-size($--button-mini-padding-vertical, $--button-mini-padding-horizontal, $--button-mini-font-size, $--button-mini-border-radius);
+    @include when(circle) {
+      padding: $--button-mini-padding-vertical;
+    }
   }
   @include m(text) {
     border-color: transparent;