Commit f4e25069055c5dd2ff804e32f61ca8dcabef2d3f
1 parent
99bb9f3d
Use z-index to show shadow
Other ideas are to use :before or :after to create shadow
Showing
2 changed files
with
7 additions
and
5 deletions
Show diff stats
src/components/radio/radio-group.vue
src/styles/components/radio.less
| ... | ... | @@ -32,6 +32,7 @@ |
| 32 | 32 | &:focus { |
| 33 | 33 | & .@{radio-inner-prefix-cls} { |
| 34 | 34 | box-shadow: 0 0 0 2px fade(@primary-color, 20%); |
| 35 | + z-index: 1; | |
| 35 | 36 | } |
| 36 | 37 | } |
| 37 | 38 | } |
| ... | ... | @@ -183,7 +184,7 @@ span.@{radio-prefix-cls} + * { |
| 183 | 184 | transition: all @transition-time ease-in-out; |
| 184 | 185 | cursor: pointer; |
| 185 | 186 | border: 1px solid @border-color-base; |
| 186 | - border-left: 0; | |
| 187 | + //border-left: 0; | |
| 187 | 188 | background: #fff; |
| 188 | 189 | |
| 189 | 190 | > span { |
| ... | ... | @@ -227,6 +228,7 @@ span.@{radio-prefix-cls} + * { |
| 227 | 228 | |
| 228 | 229 | &:focus { |
| 229 | 230 | box-shadow: 0 0 0 2px fade(@primary-color, 20%); |
| 231 | + z-index: 1; | |
| 230 | 232 | } |
| 231 | 233 | |
| 232 | 234 | .@{radio-prefix-cls}-inner, |
| ... | ... | @@ -240,7 +242,7 @@ span.@{radio-prefix-cls} + * { |
| 240 | 242 | background: #fff; |
| 241 | 243 | border-color: @primary-color; |
| 242 | 244 | color: @primary-color; |
| 243 | - box-shadow: -1px 0 0 0 @primary-color; | |
| 245 | + //box-shadow: -1px 0 0 0 @primary-color; | |
| 244 | 246 | |
| 245 | 247 | &:first-child { |
| 246 | 248 | border-color: @primary-color; |
| ... | ... | @@ -249,7 +251,7 @@ span.@{radio-prefix-cls} + * { |
| 249 | 251 | |
| 250 | 252 | &:hover { |
| 251 | 253 | border-color: tint(@primary-color, 20%); |
| 252 | - box-shadow: -1px 0 0 0 tint(@primary-color, 20%); | |
| 254 | + //box-shadow: -1px 0 0 0 tint(@primary-color, 20%); | |
| 253 | 255 | color: tint(@primary-color, 20%); |
| 254 | 256 | } |
| 255 | 257 | |
| ... | ... | @@ -259,7 +261,7 @@ span.@{radio-prefix-cls} + * { |
| 259 | 261 | |
| 260 | 262 | &:active { |
| 261 | 263 | border-color: shade(@primary-color, 5%); |
| 262 | - box-shadow: -1px 0 0 0 shade(@primary-color, 5%); | |
| 264 | + //box-shadow: -1px 0 0 0 shade(@primary-color, 5%); | |
| 263 | 265 | color: shade(@primary-color, 5%); |
| 264 | 266 | } |
| 265 | 267 | } | ... | ... |