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