drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use z-index to show shadow

Browse source 
Other ideas are to use :before or :after to create shadow
This commit is contained in:
Graham Fairweather 2018-01-19 12:00:13 +01:00
parent 99bb9f3d7e
commit f4e2506905
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/radio/radio-group.vue
View file

@ -61,7 +61,7 @@
if (this.childrens) { if (this.childrens) {
this.childrens.forEach(child => { this.childrens.forEach(child => {
child.currentValue = value == child.label; child.currentValue = value === child.label;
child.group = true; child.group = true;
}); });
} }

10
src/styles/components/radio.less
View file

@ -32,6 +32,7 @@
&:focus { &:focus {
& .@{radio-inner-prefix-cls} { & .@{radio-inner-prefix-cls} {
box-shadow: 0 0 0 2px fade(@primary-color, 20%); box-shadow: 0 0 0 2px fade(@primary-color, 20%);
z-index: 1;
} }
} }
} }
@ -183,7 +184,7 @@ span.@{radio-prefix-cls} + * {
transition: all @transition-time ease-in-out; transition: all @transition-time ease-in-out;
cursor: pointer; cursor: pointer;
border: 1px solid @border-color-base; border: 1px solid @border-color-base;
border-left: 0; //border-left: 0;
background: #fff; background: #fff;
> span { > span {
@ -227,6 +228,7 @@ span.@{radio-prefix-cls} + * {
&:focus { &:focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%); box-shadow: 0 0 0 2px fade(@primary-color, 20%);
z-index: 1;
} }
.@{radio-prefix-cls}-inner, .@{radio-prefix-cls}-inner,
@ -240,7 +242,7 @@ span.@{radio-prefix-cls} + * {
background: #fff; background: #fff;
border-color: @primary-color; border-color: @primary-color;
color: @primary-color; color: @primary-color;
box-shadow: -1px 0 0 0 @primary-color; //box-shadow: -1px 0 0 0 @primary-color;
&:first-child { &:first-child {
border-color: @primary-color; border-color: @primary-color;
@ -249,7 +251,7 @@ span.@{radio-prefix-cls} + * {
&:hover { &:hover {
border-color: tint(@primary-color, 20%); border-color: tint(@primary-color, 20%);
box-shadow: -1px 0 0 0 tint(@primary-color, 20%); //box-shadow: -1px 0 0 0 tint(@primary-color, 20%);
color: tint(@primary-color, 20%); color: tint(@primary-color, 20%);
} }
@ -259,7 +261,7 @@ span.@{radio-prefix-cls} + * {
&:active { &:active {
border-color: shade(@primary-color, 5%); border-color: shade(@primary-color, 5%);
box-shadow: -1px 0 0 0 shade(@primary-color, 5%); //box-shadow: -1px 0 0 0 shade(@primary-color, 5%);
color: shade(@primary-color, 5%); color: shade(@primary-color, 5%);
} }
} }