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 | } | ... | ... |