cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix 156

Browse Source
This commit is contained in:
piensaenpixel 2017-01-10 17:23:36 +01:00
parent b631fd6509
commit b95da864bc
2 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/scss/cdb-components/forms/checkbox.scss
View File

@ -14,7 +14,7 @@
<span class="u-iBlock CDB-Checkbox-face"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
</div> </div>
<div class="u-iBlock"> <div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled> <input class="CDB-Checkbox" type="checkbox" name="vehicle2" value="Car" disabled>
<span class="u-iBlock CDB-Checkbox-face"></span> <span class="u-iBlock CDB-Checkbox-face"></span>
</div> </div>
``` ```
@ -43,6 +43,8 @@
background: $cWhite; background: $cWhite;
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
z-index: 2;
pointer-events: none;
&::before, &::before,
&::after { &::after {
@ -53,6 +55,7 @@
border-radius: 1px; border-radius: 1px;
background: $cSecondaryLine; background: $cSecondaryLine;
content: ''; content: '';
opacity: 0;
} }
&::before { &::before {
@ -76,21 +79,28 @@
&::before, &::before,
&::after { &::after {
background: $cWhite; background: $cWhite;
opacity: 1;
} }
} }
.CDB-Checkbox:disabled + .CDB-Checkbox-face { .CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before, &::before,
&::after { &::after {
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Checkbox:disabled + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
}
.CDB-Checkbox:disabled:hover + .CDB-Checkbox-face { .CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine; border: 1px solid $cSecondaryLine;
&::before,
&::after {
opacity: 0;
}
} }
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face, .CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
@ -98,6 +108,19 @@
border: 1px solid $cBlue; border: 1px solid $cBlue;
} }
.CDB-Checkbox:focus + .CDB-Checkbox-face {
&::before,
&::after {
background: $cBlue;
opacity: 1;
}
}
.CDB-Checkbox:hover + .CDB-Checkbox-face { .CDB-Checkbox:hover + .CDB-Checkbox-face {
border: 1px solid $cHoverLine; border: 1px solid $cHoverLine;
&::before,
&::after {
background: $cHoverLine;
opacity: 1;
}
} }

23
src/scss/cdb-components/forms/radio.scss
View File

@ -55,7 +55,7 @@
margin-top: -3px; margin-top: -3px;
margin-left: -3px; margin-left: -3px;
border-radius: 50%; border-radius: 50%;
background: $cSecondaryLine; background: $cWhite;
content: ''; content: '';
} }
} }
@ -75,7 +75,7 @@
background: $cThirdBackground; background: $cThirdBackground;
&::before { &::before {
background: $cWhite; opacity: 0;
} }
} }
@ -85,9 +85,28 @@
.CDB-Radio:hover + .CDB-Radio-face { .CDB-Radio:hover + .CDB-Radio-face {
border: 1px solid $cHoverLine; border: 1px solid $cHoverLine;
&::before {
background: $cHoverLine;
}
} }
.CDB-Radio:focus + .CDB-Radio-face, .CDB-Radio:focus + .CDB-Radio-face,
.CDB-Radio:checked:hover + .CDB-Radio-face { .CDB-Radio:checked:hover + .CDB-Radio-face {
border: 1px solid $cBlue; border: 1px solid $cBlue;
} }
.CDB-Radio:checked:hover + .CDB-Radio-face {
&::before {
background: $cWhite;
}
}
.CDB-Radio:active + .CDB-Radio-face {
&::before {
background: $cBlue;
}
}