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 | 1 | .zui-button { |
| 2 | 2 | color: #323233; |
| 3 | 3 | background-color: #fff; |
| 4 | - border: 1upx solid $color-border; | |
| 5 | 4 | padding: $h-gap-md $v-gap-md; |
| 6 | 5 | font-size: $font-md; |
| 7 | 6 | cursor: pointer; |
| ... | ... | @@ -10,6 +9,24 @@ |
| 10 | 9 | align-items: center; |
| 11 | 10 | justify-content: center; |
| 12 | 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 | 30 | &.sm { |
| 14 | 31 | padding: $h-gap-sm $v-gap-sm; |
| 15 | 32 | font-size: $font-sm; |
| ... | ... | @@ -20,25 +37,35 @@ |
| 20 | 37 | } |
| 21 | 38 | &.active { |
| 22 | 39 | background-color: $bg-active; |
| 23 | - border-color: $bg-active; | |
| 40 | + &, &::after { | |
| 41 | + border-color: $bg-active; | |
| 42 | + } | |
| 24 | 43 | } |
| 25 | 44 | &.primary { |
| 26 | 45 | background-color: $color-primary; |
| 27 | - border-color: $color-primary; | |
| 28 | 46 | color: #FFF; |
| 29 | 47 | &.active { |
| 30 | 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 | 57 | &.secondary { |
| 35 | 58 | background-color: lighten($color-primary, 40%); |
| 36 | - border-color: lighten($color-primary, 40%); | |
| 37 | 59 | color: $color-primary; |
| 38 | 60 | &.active { |
| 39 | 61 | background-color: lighten($color-primary, 30%); |
| 40 | - border-color: lighten($color-primary, 30%); | |
| 41 | 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 | 71 | &.link { |
| ... | ... | @@ -51,19 +78,29 @@ |
| 51 | 78 | } |
| 52 | 79 | } |
| 53 | 80 | &.disabled { |
| 54 | - border-color: $bg-disabled; | |
| 55 | 81 | background-color: $bg-disabled; |
| 56 | 82 | color: $color-disabled; |
| 57 | 83 | cursor: not-allowed; |
| 58 | 84 | &.active { |
| 59 | - border-color: $bg-disabled; | |
| 60 | 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 | 94 | &.round { |
| 64 | 95 | border-radius: 48upx; |
| 96 | + &::after { | |
| 97 | + border-radius: 96upx; | |
| 98 | + } | |
| 65 | 99 | } |
| 66 | 100 | &.square { |
| 67 | 101 | border-radius: 0upx; |
| 102 | + &::after { | |
| 103 | + border-radius: 0; | |
| 104 | + } | |
| 68 | 105 | } |
| 69 | 106 | } |
| 70 | 107 | \ No newline at end of file | ... | ... |