From dd3889e7cd837ae18c369c95565b684b7111153d Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Fri, 10 Apr 2020 11:38:52 +0800
Subject: [PATCH] 调整按钮边框

---
 components/button/index.scss | 53 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 45 insertions(+), 8 deletions(-)

diff --git a/components/button/index.scss b/components/button/index.scss
index dd5a2e7..a0ff660 100644
--- a/components/button/index.scss
+++ b/components/button/index.scss
@@ -1,7 +1,6 @@
 .zui-button {
   color: #323233;
   background-color: #fff;
-  border: 1upx solid $color-border;
   padding: $h-gap-md $v-gap-md;
   font-size: $font-md;
   cursor: pointer;
@@ -10,6 +9,24 @@
   align-items: center;
   justify-content: center;
 	border-radius: 10upx;
+	position: relative;
+	&::after {
+		padding: 0;
+		margin: 0;
+		border: none;
+		content: "";
+		pointer-events: none; /* 防止点击触发 */
+		box-sizing: border-box;
+		position: absolute;
+		width: 200%;
+		height: 200%;
+		left: 0;
+		top: 0;
+		border: 1upx solid $color-border;
+		border-radius: 20upx;
+		transform: scale(0.5);
+		transform-origin: 0 0;
+	}
 	&.sm {
 		padding: $h-gap-sm $v-gap-sm;
 		font-size: $font-sm;
@@ -20,25 +37,35 @@
 	}
 	&.active {
 		background-color: $bg-active;
-		border-color: $bg-active;
+		&, &::after {
+			border-color: $bg-active;
+		}
 	}
 	&.primary {
 		background-color: $color-primary;
-		border-color: $color-primary;
 		color: #FFF;
 		&.active {
 			background-color: darken($color-primary, 3%);
-			border-color: darken($color-primary, 3%);
+			&, &::after {
+				border-color: darken($color-primary, 3%);
+			}
+		}
+		&, &::after {
+			border-color: $color-primary;
 		}
 	}
 	&.secondary {
 		background-color: lighten($color-primary, 40%);
-		border-color: lighten($color-primary, 40%);
 		color: $color-primary;
 		&.active {
 			background-color: lighten($color-primary, 30%);
-			border-color: lighten($color-primary, 30%);
 			color: darken($color-primary, 3%);
+			&, &::after {
+				border-color: lighten($color-primary, 30%);
+			}
+		}
+		&, &::after {
+			border-color: lighten($color-primary, 40%);
 		}
 	}
 	&.link {
@@ -51,19 +78,29 @@
 		}
 	}
 	&.disabled {
-		border-color: $bg-disabled;
 		background-color: $bg-disabled;
 		color: $color-disabled;
 		cursor: not-allowed;
 		&.active {
-			border-color: $bg-disabled;
 			background-color: $bg-disabled;
+			&, &::after {
+				border-color: $bg-disabled;
+			}
+		}
+		&, &::after {
+			border-color: $bg-disabled;
 		}
 	}
 	&.round {
 		border-radius: 48upx;
+		&::after {
+			border-radius: 96upx;
+		}
 	}
 	&.square {
 		border-radius: 0upx;
+		&::after {
+			border-radius: 0;
+		}
 	}
 }
\ No newline at end of file
--
libgit2 0.21.0