Commit dd3889e7cd837ae18c369c95565b684b7111153d
1 parent
6eaa2728
Exists in
master
调整按钮边框
Showing
1 changed file
with
45 additions
and
8 deletions
Show diff stats
components/button/index.scss
| 1 | .zui-button { | 1 | .zui-button { |
| 2 | color: #323233; | 2 | color: #323233; |
| 3 | background-color: #fff; | 3 | background-color: #fff; |
| 4 | - border: 1upx solid $color-border; | ||
| 5 | padding: $h-gap-md $v-gap-md; | 4 | padding: $h-gap-md $v-gap-md; |
| 6 | font-size: $font-md; | 5 | font-size: $font-md; |
| 7 | cursor: pointer; | 6 | cursor: pointer; |
| @@ -10,6 +9,24 @@ | @@ -10,6 +9,24 @@ | ||
| 10 | align-items: center; | 9 | align-items: center; |
| 11 | justify-content: center; | 10 | justify-content: center; |
| 12 | border-radius: 10upx; | 11 | border-radius: 10upx; |
| 12 | + position: relative; | ||
| 13 | + &::after { | ||
| 14 | + padding: 0; | ||
| 15 | + margin: 0; | ||
| 16 | + border: none; | ||
| 17 | + content: ""; | ||
| 18 | + pointer-events: none; /* 防止点击触发 */ | ||
| 19 | + box-sizing: border-box; | ||
| 20 | + position: absolute; | ||
| 21 | + width: 200%; | ||
| 22 | + height: 200%; | ||
| 23 | + left: 0; | ||
| 24 | + top: 0; | ||
| 25 | + border: 1upx solid $color-border; | ||
| 26 | + border-radius: 20upx; | ||
| 27 | + transform: scale(0.5); | ||
| 28 | + transform-origin: 0 0; | ||
| 29 | + } | ||
| 13 | &.sm { | 30 | &.sm { |
| 14 | padding: $h-gap-sm $v-gap-sm; | 31 | padding: $h-gap-sm $v-gap-sm; |
| 15 | font-size: $font-sm; | 32 | font-size: $font-sm; |
| @@ -20,25 +37,35 @@ | @@ -20,25 +37,35 @@ | ||
| 20 | } | 37 | } |
| 21 | &.active { | 38 | &.active { |
| 22 | background-color: $bg-active; | 39 | background-color: $bg-active; |
| 23 | - border-color: $bg-active; | 40 | + &, &::after { |
| 41 | + border-color: $bg-active; | ||
| 42 | + } | ||
| 24 | } | 43 | } |
| 25 | &.primary { | 44 | &.primary { |
| 26 | background-color: $color-primary; | 45 | background-color: $color-primary; |
| 27 | - border-color: $color-primary; | ||
| 28 | color: #FFF; | 46 | color: #FFF; |
| 29 | &.active { | 47 | &.active { |
| 30 | background-color: darken($color-primary, 3%); | 48 | background-color: darken($color-primary, 3%); |
| 31 | - border-color: darken($color-primary, 3%); | 49 | + &, &::after { |
| 50 | + border-color: darken($color-primary, 3%); | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | + &, &::after { | ||
| 54 | + border-color: $color-primary; | ||
| 32 | } | 55 | } |
| 33 | } | 56 | } |
| 34 | &.secondary { | 57 | &.secondary { |
| 35 | background-color: lighten($color-primary, 40%); | 58 | background-color: lighten($color-primary, 40%); |
| 36 | - border-color: lighten($color-primary, 40%); | ||
| 37 | color: $color-primary; | 59 | color: $color-primary; |
| 38 | &.active { | 60 | &.active { |
| 39 | background-color: lighten($color-primary, 30%); | 61 | background-color: lighten($color-primary, 30%); |
| 40 | - border-color: lighten($color-primary, 30%); | ||
| 41 | color: darken($color-primary, 3%); | 62 | color: darken($color-primary, 3%); |
| 63 | + &, &::after { | ||
| 64 | + border-color: lighten($color-primary, 30%); | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + &, &::after { | ||
| 68 | + border-color: lighten($color-primary, 40%); | ||
| 42 | } | 69 | } |
| 43 | } | 70 | } |
| 44 | &.link { | 71 | &.link { |
| @@ -51,19 +78,29 @@ | @@ -51,19 +78,29 @@ | ||
| 51 | } | 78 | } |
| 52 | } | 79 | } |
| 53 | &.disabled { | 80 | &.disabled { |
| 54 | - border-color: $bg-disabled; | ||
| 55 | background-color: $bg-disabled; | 81 | background-color: $bg-disabled; |
| 56 | color: $color-disabled; | 82 | color: $color-disabled; |
| 57 | cursor: not-allowed; | 83 | cursor: not-allowed; |
| 58 | &.active { | 84 | &.active { |
| 59 | - border-color: $bg-disabled; | ||
| 60 | background-color: $bg-disabled; | 85 | background-color: $bg-disabled; |
| 86 | + &, &::after { | ||
| 87 | + border-color: $bg-disabled; | ||
| 88 | + } | ||
| 89 | + } | ||
| 90 | + &, &::after { | ||
| 91 | + border-color: $bg-disabled; | ||
| 61 | } | 92 | } |
| 62 | } | 93 | } |
| 63 | &.round { | 94 | &.round { |
| 64 | border-radius: 48upx; | 95 | border-radius: 48upx; |
| 96 | + &::after { | ||
| 97 | + border-radius: 96upx; | ||
| 98 | + } | ||
| 65 | } | 99 | } |
| 66 | &.square { | 100 | &.square { |
| 67 | border-radius: 0upx; | 101 | border-radius: 0upx; |
| 102 | + &::after { | ||
| 103 | + border-radius: 0; | ||
| 104 | + } | ||
| 68 | } | 105 | } |
| 69 | } | 106 | } |
| 70 | \ No newline at end of file | 107 | \ No newline at end of file |