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

Radios adapted for Firefox

Browse Source
This commit is contained in:
María Checa 2016-01-29 12:17:36 +01:00
parent e356aee9fe
commit 13fcad7f7c
2 changed files with 73 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,6 @@
# Forms/Checkbox
```
<div class="u-iBlock CDB-CheckboxContainer">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
<label class="CDB-CheckboxLabel"></label>

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

@ -1,26 +1,87 @@
// Radio Button styles
// Radios styles
// ----------------------------------------------
/* SG
# Forms/Radio
```
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
<input class="CDB-Radio" type="radio" name="Gender" value="02">
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
<div class="u-iBlock CDB-RadioContainer">
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
<label class="CDB-RadioLabel"></label>
</div>
<div class="u-iBlock CDB-RadioContainer">
<input class="CDB-Radio" type="radio" name="Gender" value="02">
<label class="CDB-RadioLabel"></label>
</div>
<div class="u-iBlock CDB-RadioContainer">
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
<label class="CDB-RadioLabel"></label>
</div>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Radio {
.CDB-RadioContainer {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
.CDB-Radio {
width: $baseSize * 2;
height: $baseSize * 2;
opacity: 0;
position: absolute;
z-index: 1;
&:checked {
~ .CDB-RadioLabel {
border: 1px solid $cBlue;
background: $cBlue;
&::before {
background: $cWhite;
}
}
&:hover ~ .CDB-RadioLabel {
border: 1px solid $cBlue;
}
}
&:focus ~ .CDB-RadioLabel {
border: 1px solid $cBlue;
}
&:hover ~ .CDB-RadioLabel {
border: 1px solid $cHoverLine;
}
&:disabled {
~ .CDB-RadioLabel {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before {
background: $cWhite;
}
}
&:hover ~ .CDB-RadioLabel {
border: 1px solid $cSecondaryLine;
}
}
}
.CDB-RadioLabel {
position: absolute;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
&::before {
display: block;
@ -35,38 +96,5 @@
background: $cSecondaryLine;
content: '';
}
&:checked {
border: 1px solid $cBlue;
background: $cBlue;
&:hover {
border: 1px solid $cBlue;
}
&::before {
background: $cWhite;
}
}
&:focus {
border: 1px solid $cBlue;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:disabled {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&::before {
background: $cWhite;
}
}
}