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

Checkbox, radio & legends fully optimized for Firefox

Browse Source
This commit is contained in:
María Checa
2016-01-29 16:52:58 +01:00
parent 13fcad7f7c
commit e365455833
3 changed files with 141 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/forms/checkbox.scss
+55 -57
View File
@@ -5,16 +5,19 @@
# Forms/Checkbox # Forms/Checkbox
``` ```
<div class="u-iBlock CDB-CheckboxContainer"> <div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
<span class="u-iBlock CDB-CheckboxFace"></span>
<label class="CDB-CheckboxLabel"></label> <label class="CDB-CheckboxLabel"></label>
</div> </div>
<div class="u-iBlock CDB-CheckboxContainer"> <div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus"> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
<span class="u-iBlock CDB-CheckboxFace"></span>
<label class="CDB-CheckboxLabel"></label> <label class="CDB-CheckboxLabel"></label>
</div> </div>
<div class="u-iBlock CDB-CheckboxContainer"> <div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
<span class="u-iBlock CDB-CheckboxFace"></span>
<label class="CDB-CheckboxLabel"></label> <label class="CDB-CheckboxLabel"></label>
</div> </div>
``` ```
@@ -23,64 +26,19 @@
@import '../../cdb-variables/sizes'; @import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-CheckboxContainer { .CDB-Checkbox {
width: $baseSize * 2;
height: $baseSize * 2;
opacity: 0;
position: absolute;
z-index: 1;
~ .CDB-CheckboxFace {
position: relative; position: relative;
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
.CDB-Checkbox {
width: $baseSize * 2;
height: $baseSize * 2;
opacity: 0;
position: absolute;
z-index: 1;
&:checked {
~ .CDB-CheckboxLabel {
border: 1px solid $cBlue;
background: $cBlue;
&::before,
&::after {
background: $cWhite;
}
}
&:hover ~ .CDB-CheckboxLabel {
border: 1px solid $cBlue;
}
}
&:focus ~ .CDB-CheckboxLabel {
border: 1px solid $cBlue;
}
&:hover ~ .CDB-CheckboxLabel {
border: 1px solid $cHoverLine;
}
&:disabled {
~ .CDB-CheckboxLabel {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before,
&::after {
background: $cWhite;
}
}
&:hover ~ .CDB-CheckboxLabel {
border: 1px solid $cSecondaryLine;
}
}
}
.CDB-CheckboxLabel {
position: absolute;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
background: $cWhite;
border-radius: 3px; border-radius: 3px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
@@ -108,4 +66,44 @@
transform: rotate(-45deg); transform: rotate(-45deg);
} }
} }
&:checked {
~ .CDB-CheckboxFace {
border: 1px solid $cBlue;
background: $cBlue;
&::before,
&::after {
background: $cWhite;
}
}
&:hover ~ .CDB-CheckboxFace {
border: 1px solid $cBlue;
}
}
&:focus ~ .CDB-CheckboxFace {
border: 1px solid $cBlue;
}
&:hover ~ .CDB-CheckboxFace {
border: 1px solid $cHoverLine;
}
&:disabled {
~ .CDB-CheckboxFace {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before,
&::after {
background: $cWhite;
}
}
&:hover ~ .CDB-CheckboxFace {
border: 1px solid $cSecondaryLine;
}
}
} }
src/scss/cdb-components/forms/legends.scss
+28 -22
View File
@@ -5,26 +5,30 @@
# Forms/Labels # Forms/Labels
``` ```
<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="01" checked> <input class="CDB-Radio" type="radio" name="veritas" value="01">
<span class="u-iBlock">True</span> <span class="u-iBlock CDB-RadioFace"></span>
</label> <label class="u-iBlock">True</label>
<label class="u-iblock CDB-Text CDB-Size-medium"> </div>
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked> <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<span class="u-iBlock">False</span> <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
</label> <span class="u-iBlock CDB-RadioFace"></span>
<label class="u-iBlock">False</label>
</div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Sport" > <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock">Sport</span> <span class="u-iBlock CDB-CheckboxFace"></span>
</label> <label class="u-iBlock">Sport</label>
</div>
<label class="u-iblock CDB-Text CDB-Size-medium"> <label class="u-iblock CDB-Text CDB-Size-medium">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock">Travel</span> <span class="u-iBlock CDB-CheckboxFace"></span>
<label class="u-iBlock">Travel</label>
</label> </label>
<br/> <br/>
@@ -35,16 +39,18 @@
<p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p> <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
<ul class="CDB-Text CDB-Size-medium u-iBlock"> <ul class="CDB-Text CDB-Size-medium u-iBlock">
<li class="u-iBlock u-rSpace--xl"> <li class="u-iBlock u-rSpace--xl">
<label> <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock">Travel</span> <span class="u-iBlock CDB-CheckboxFace"></span>
</label> <label class="u-iBlock">Sport</label>
</div>
</li> </li>
<li class="u-iblock"> <li class="u-iblock">
<label> <label class="u-iblock CDB-Text CDB-Size-medium">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock">Travel</span> <span class="u-iBlock CDB-CheckboxFace"></span>
</label> <label class="u-iBlock">Travel</label>
</label>
</li> </li>
</ul> </ul>
</fieldset> </fieldset>
src/scss/cdb-components/forms/radio.scss
+58 -62
View File
@@ -1,3 +1,4 @@
// Radios styles // Radios styles
// ---------------------------------------------- // ----------------------------------------------
@@ -5,17 +6,17 @@
# Forms/Radio # Forms/Radio
``` ```
<div class="u-iBlock CDB-RadioContainer"> <div class="u-iBlock">
<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> <span class="u-iBlock CDB-RadioFace"></span>
</div> </div>
<div class="u-iBlock CDB-RadioContainer"> <div class="u-iBlock">
<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> <span class="u-iBlock CDB-RadioFace"></span>
</div> </div>
<div class="u-iBlock CDB-RadioContainer"> <div class="u-iBlock">
<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> <span class="u-iBlock CDB-RadioFace"></span>
</div> </div>
``` ```
*/ */
@@ -23,68 +24,25 @@
@import '../../cdb-variables/sizes'; @import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-RadioContainer { .CDB-Radio {
width: $baseSize * 2;
height: $baseSize * 2;
opacity: 0;
position: absolute;
z-index: 1;
~ .CDB-RadioFace {
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; box-sizing: border-box;
cursor: pointer; cursor: pointer;
text-indent: 20px;
background: $cWhite;
&::before { &::before {
display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@@ -97,4 +55,42 @@
content: ''; content: '';
} }
} }
&:checked {
~ .CDB-RadioFace {
border: 1px solid $cBlue;
background: $cBlue;
&::before {
background: $cWhite;
}
}
&:hover ~ .CDB-RadioFace {
border: 1px solid $cBlue;
}
}
&:focus ~ .CDB-RadioFace {
border: 1px solid $cBlue;
}
&:hover ~ .CDB-RadioFace {
border: 1px solid $cHoverLine;
}
&:disabled {
~ .CDB-RadioFace {
border: 1px solid $cSecondaryLine;
background: $cThirdBackground;
&::before {
background: $cWhite;
}
}
&:hover ~ .CDB-RadioFace {
border: 1px solid $cSecondaryLine;
}
}
} }