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

Merge pull request #157 from CartoDB/116-style-checks

Browse Source 
fix 156
This commit is contained in:
piensaenpixel 2017-01-11 08:03:53 +01:00 committed by GitHub
commit 0155c67d3a
2 changed files with 48 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
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 {
@ -51,7 +53,7 @@
bottom: 3px; bottom: 3px;
width: 2px; width: 2px;
border-radius: 1px; border-radius: 1px;
background: $cSecondaryLine; background: $cWhite;
content: ''; content: '';
} }
@ -79,25 +81,35 @@
} }
} }
.CDB-Checkbox:disabled + .CDB-Checkbox-face { .CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine; border: 1px solid $cBlue;
background: $cThirdBackground;
&::before, &::before,
&::after { &::after {
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine;
}
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
.CDB-Checkbox:focus + .CDB-Checkbox-face {
border: 1px solid $cBlue;
}
.CDB-Checkbox:hover + .CDB-Checkbox-face { .CDB-Checkbox:hover + .CDB-Checkbox-face {
border: 1px solid $cHoverLine; border: 1px solid $cHoverLine;
&::before,
&::after {
background: $cHoverLine;
}
} }
.CDB-Checkbox:active + .CDB-Checkbox-face {
border: 1px solid $cBlue;
&::before,
&::after {
background: $cBlue;
}
}
.CDB-Checkbox:disabled + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before,
&::after {
opacity: 0;
}
}

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