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>

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

@ -1,72 +1,100 @@
// Radio Button styles // Radios styles
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Forms/Radio # Forms/Radio
``` ```
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked> <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="01" checked>
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled> <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/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;
border: 1px solid $cMainLine;
border-radius: 50%;
&::before { .CDB-Radio {
display: block; width: $baseSize * 2;
height: $baseSize * 2;
opacity: 0;
position: absolute; position: absolute;
top: 50%; z-index: 1;
left: 50%;
width: $baseSize - 2;
height: $baseSize - 2;
margin-top: -3px;
margin-left: -3px;
border-radius: 50%;
background: $cSecondaryLine;
content: '';
}
&:checked { &:checked {
border: 1px solid $cBlue; ~ .CDB-RadioLabel {
background: $cBlue; border: 1px solid $cBlue;
background: $cBlue;
&:hover { &::before {
background: $cWhite;
}
}
&:hover ~ .CDB-RadioLabel {
border: 1px solid $cBlue;
}
}
&:focus ~ .CDB-RadioLabel {
border: 1px solid $cBlue; border: 1px solid $cBlue;
} }
&::before { &:hover ~ .CDB-RadioLabel {
background: $cWhite; border: 1px solid $cHoverLine;
}
&:disabled {
~ .CDB-RadioLabel {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before {
background: $cWhite;
}
}
&:hover ~ .CDB-RadioLabel {
border: 1px solid $cSecondaryLine;
}
} }
} }
&:focus { .CDB-RadioLabel {
border: 1px solid $cBlue; position: absolute;
} width: $baseSize * 2;
height: $baseSize * 2;
&:hover { border: 1px solid $cMainLine;
border: 1px solid $cHoverLine; border-radius: 50%;
} box-sizing: border-box;
cursor: pointer;
&:disabled {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&::before { &::before {
background: $cWhite; display: block;
position: absolute;
top: 50%;
left: 50%;
width: $baseSize - 2;
height: $baseSize - 2;
margin-top: -3px;
margin-left: -3px;
border-radius: 50%;
background: $cSecondaryLine;
content: '';
} }
} }
} }