Commit f4e25069055c5dd2ff804e32f61ca8dcabef2d3f

Authored by Graham Fairweather
1 parent 99bb9f3d

Use z-index to show shadow

Other ideas are to use :before or :after to create shadow
src/components/radio/radio-group.vue
... ... @@ -61,7 +61,7 @@
61 61  
62 62 if (this.childrens) {
63 63 this.childrens.forEach(child => {
64   - child.currentValue = value == child.label;
  64 + child.currentValue = value === child.label;
65 65 child.group = true;
66 66 });
67 67 }
... ...
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 }
... ...