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

View File

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

View File

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