feat(v14): button adaptation

jdf2e · Nov 12, 2024 · e74ac16 · e74ac16
1 parent f085b67
commit e74ac16
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git a/src/packages/button/button.scss b/src/packages/button/button.scss
@@ -1,7 +1,6 @@
 .nut-button {
   position: relative;
   display: flex;
-  display: inline-block;
   /* #ifdef rn harmony*/
   width: 80px;
   /* #endif */
@@ -21,9 +20,9 @@
   text-align: center;
   cursor: pointer;
   transition: $button-transition;
-  -webkit-appearance: none;
   user-select: none;
   touch-action: manipulation;
+  -webkit-appearance: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   color: $button-default-color;
   background: $button-default-background-color;
@@ -99,6 +98,23 @@
     padding: 0;
   }
 
+  &-round {
+    border-radius: $button-border-radius;
+
+    &-xlarge,
+    &-large {
+      border-radius: $button-large-border-radius;
+    }
+
+    &-small {
+      border-radius: $button-small-border-radius;
+    }
+
+    &-mini {
+      border-radius: $button-mini-border-radius;
+    }
+  }
+
   &-default {
     padding: $button-default-padding;
     border-style: solid;
@@ -136,6 +152,14 @@
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
     font-weight: $button-large-font-weight;
+    border-radius: $radius-base;
+
+    .nut-button-text {
+      margin-left: $button-xlarge-text-icon-margin;
+      &-right {
+        margin-right: $button-xlarge-text-icon-margin;
+      }
+    }
 
     .nut-icon {
       font-size: $button-xlarge-font-size;
@@ -153,6 +177,14 @@
     padding: $button-large-padding;
     font-size: $button-large-font-size;
     font-weight: $button-large-font-weight;
+    border-radius: $radius-base;
+
+    .nut-button-text {
+      margin-left: $button-xlarge-text-icon-margin;
+      &-right {
+        margin-right: $button-xlarge-text-icon-margin;
+      }
+    }
 
     .nut-icon {
       font-size: $button-large-font-size;
@@ -170,6 +202,7 @@
     height: $button-small-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+    border-radius: $radius-s;
 
     .nut-icon {
       font-size: $button-small-font-size;
@@ -186,6 +219,7 @@
     height: $button-mini-height;
     padding: $button-mini-padding;
     font-size: $button-mini-font-size;
+    border-radius: $radius-s;
 
     .nut-icon {
       font-size: $button-mini-font-size;
@@ -412,23 +446,6 @@
     opacity: 0.9;
   }
 
-  &-round {
-    border-radius: $button-border-radius;
-
-    &-xlarge,
-    &-large {
-      border-radius: $button-large-border-radius;
-    }
-
-    &-small {
-      border-radius: $button-small-border-radius;
-    }
-
-    &-mini {
-      border-radius: $button-mini-border-radius;
-    }
-  }
-
   &-square {
     border-radius: $button-square-border-radius;
   }

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -229,7 +229,7 @@ $button-default-disabled-color: var(
 $button-default-padding: var(--nutui-button-default-padding, 0px 12px) !default;
 $button-default-font-size: var(
   --nutui-button-default-font-size,
-  $font-size-base
+  $font-size-s
 ) !default;
 $button-default-font-weight: var(
   --nutui-button-default-font-weight,
@@ -240,14 +240,14 @@ $button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default;
 $button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default;
 $button-xlarge-font-size: var(
   --nutui-button-xlarge-font-size,
-  $font-size-xxl
+  $font-size-xl
 ) !default;
 
 $button-large-height: var(--nutui-button-large-height, 40px) !default;
 $button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default;
 $button-large-font-size: var(
   --nutui-button-large-font-size,
-  $font-size-l
+  $font-size-base
 ) !default;
 $button-large-font-weight: var(
   --nutui-button-large-font-weight,
@@ -273,7 +273,7 @@ $button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default;
 $button-mini-height: var(--nutui-button-mini-height, 24px) !default;
 $button-mini-font-size: var(
   --nutui-button-mini-font-size,
-  $font-size-s
+  $font-size-xs
 ) !default;
 $button-mini-border-radius: var(
   --nutui-button-mini-border-radius,
@@ -288,13 +288,12 @@ $button-primary-border-color: var(
   --nutui-button-primary-border-color,
   $color-primary
 ) !default;
-$button-primary-background-color: $color-primary;
+$button-primary-background-color: linear-gradient(
+  90deg,
+  $color-primary-stop-1 0%,
+  $color-primary-stop-2 100%
+) !default;
 
-// linear-gradient(
-//   135deg,
-//   $color-primary-stop-1 0%,
-//   $color-primary-stop-2 100%
-// ) !default;
 $button-primary-disabled: var(
   --nutui-button-primary-disabled,
   $color-primary-disabled-special
@@ -368,6 +367,10 @@ $button-danger-disabled: var(
   $color-danger-disabled
 ) !default;
 
+$button-xlarge-text-icon-margin: var(
+  --nutui-button-text-icon-margin,
+  6px
+) !default;
 $button-text-icon-margin: var(--nutui-button-text-icon-margin, 4px) !default;
 
 // cell（✅）