Commit 57d60bb48077104b2c0562a27aedad5d10c46a9e
1 parent
8a4b1023
switch 样式修改
Showing
1 changed file
with
10 additions
and
5 deletions
Show diff stats
src/styles/components/switch.less
| @@ -7,7 +7,7 @@ | @@ -7,7 +7,7 @@ | ||
| 7 | line-height: 20px; | 7 | line-height: 20px; |
| 8 | border-radius: 22px; | 8 | border-radius: 22px; |
| 9 | vertical-align: middle; | 9 | vertical-align: middle; |
| 10 | - border: 1px solid @mew-common-color; | 10 | + border: 1px solid tint(@mew-common-color, 20%); |
| 11 | background-color: #efefef; | 11 | background-color: #efefef; |
| 12 | position: relative; | 12 | position: relative; |
| 13 | cursor: pointer; | 13 | cursor: pointer; |
| @@ -19,7 +19,7 @@ | @@ -19,7 +19,7 @@ | ||
| 19 | } | 19 | } |
| 20 | 20 | ||
| 21 | &-inner { | 21 | &-inner { |
| 22 | - color: @mew-common-color; | 22 | + color: #999; |
| 23 | font-size: @font-size-small; | 23 | font-size: @font-size-small; |
| 24 | position: absolute; | 24 | position: absolute; |
| 25 | left: 23px; | 25 | left: 23px; |
| @@ -38,7 +38,7 @@ | @@ -38,7 +38,7 @@ | ||
| 38 | width: 18px; | 38 | width: 18px; |
| 39 | height: 18px; | 39 | height: 18px; |
| 40 | border-radius: 18px; | 40 | border-radius: 18px; |
| 41 | - background-color: @mew-common-color; | 41 | + background-color: tint(@mew-common-color, 50%); |
| 42 | position: absolute; | 42 | position: absolute; |
| 43 | left: 1px; | 43 | left: 1px; |
| 44 | top: 1px; | 44 | top: 1px; |
| @@ -62,7 +62,7 @@ | @@ -62,7 +62,7 @@ | ||
| 62 | top: 3px; | 62 | top: 3px; |
| 63 | z-index: 1; | 63 | z-index: 1; |
| 64 | border: 1px solid @mew-common-color; | 64 | border: 1px solid @mew-common-color; |
| 65 | - border-color: transparent transparent transparent #3fcdc0; | 65 | + border-color: transparent transparent transparent @mew-common-color; |
| 66 | animation: switch-loading 1s linear; | 66 | animation: switch-loading 1s linear; |
| 67 | animation-iteration-count: infinite; | 67 | animation-iteration-count: infinite; |
| 68 | } | 68 | } |
| @@ -71,7 +71,7 @@ | @@ -71,7 +71,7 @@ | ||
| 71 | } | 71 | } |
| 72 | 72 | ||
| 73 | &:focus { | 73 | &:focus { |
| 74 | - box-shadow: 0 0 0 2px fade(@mew-common-color, 20%); | 74 | + box-shadow: 0 0 0 2px fade(@mew-common-color, 5%); |
| 75 | outline: 0; | 75 | outline: 0; |
| 76 | } | 76 | } |
| 77 | 77 | ||
| @@ -140,6 +140,7 @@ | @@ -140,6 +140,7 @@ | ||
| 140 | } | 140 | } |
| 141 | 141 | ||
| 142 | &:after { | 142 | &:after { |
| 143 | + background-color: @mew-common-color; | ||
| 143 | left: 23px; | 144 | left: 23px; |
| 144 | } | 145 | } |
| 145 | &:before{ | 146 | &:before{ |
| @@ -149,6 +150,10 @@ | @@ -149,6 +150,10 @@ | ||
| 149 | &:active:after { | 150 | &:active:after { |
| 150 | left: 15px; | 151 | left: 15px; |
| 151 | } | 152 | } |
| 153 | + | ||
| 154 | + .@{switch-prefix-cls}-inner { | ||
| 155 | + color: @mew-common-color; | ||
| 156 | + } | ||
| 152 | } | 157 | } |
| 153 | 158 | ||
| 154 | &-disabled { | 159 | &-disabled { |