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 # Forms/Checkbox
``` ```
<div class="u-iBlock CDB-CheckboxContainer"> <div class="u-iBlock CDB-CheckboxContainer">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
<label class="CDB-CheckboxLabel"></label> <label class="CDB-CheckboxLabel"></label>

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

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