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

Toggle optimized for Firefox

Browse Source
This commit is contained in:
María Checa
2016-01-29 16:54:52 +01:00
parent e365455833
commit 7a826d42f1
2 changed files with 92 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/forms/toggle.scss
+92
View File
@@ -0,0 +1,92 @@
// Radio Button styles
// ----------------------------------------------
/* SG
# Forms/Toggle
```
<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
<label class="u-iBlock">TOOLS</label>
<input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
<span class="u-iBlock CDB-ToggleFace"></span>
<label class="u-iBlock">SQL</label>
</div>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Toggle {
width: $baseSize * 4;
height: $baseSize * 2;
opacity: 0;
position: absolute;
z-index: 1;
~ .CDB-ToggleFace {
@include transition(background, 300ms);
position: relative;
width: $baseSize * 4;
height: $baseSize * 2;
margin: 0 2px;
border-radius: 50px;
background: $cTypo4;
&::before {
position: absolute;
top: 2px;
left: 2px;
width: $baseSize + 4;
height: $baseSize + 4;
border-radius: 50%;
background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
}
}
&:checked ~ .CDB-ToggleFace {
background: $cMainDark;
&::before {
right: 2px;
left: auto;
}
}
}
// .CDB-Toggle {
// @include transition(background, 300ms);
// position: relative;
// width: $baseSize * 4;
// height: $baseSize * 2;
// margin: 0 2px;
// border-radius: 50px;
// background: $cTypo4;
// }
// .CDB-Toggle:before {
// position: absolute;
// top: 2px;
// left: 2px;
// width: $baseSize + 4;
// height: $baseSize + 4;
// border-radius: 50%;
// background: $cWhite;
// box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
// content: '';
// }
// .CDB-Toggle:checked {
// background: $cMainDark;
// }
// .CDB-Toggle:checked:before {
// right: 2px;
// left: auto;
// }
src/scss/cdb-components/forms/toogle.scss
-50
View File
@@ -1,50 +0,0 @@
// Radio Button styles
// ----------------------------------------------
/* SG
# Forms/Toogle
```
<label class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
<span class="u-iBlock">TOOLS</span>
<input class="CDB-Toogle u-iBlock" type="checkbox" name="Analysis">
<span class="u-iBlock">SQL</span>
</label>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Toogle {
@include transition(background, 300ms);
position: relative;
width: $baseSize * 4;
height: $baseSize * 2;
margin: 0 2px;
border-radius: 50px;
background: $cTypo4;
}
.CDB-Toogle:before {
position: absolute;
top: 2px;
left: 2px;
width: $baseSize + 4;
height: $baseSize + 4;
border-radius: 50%;
background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
}
.CDB-Toogle:checked {
background: $cMainDark;
}
.CDB-Toogle:checked:before {
right: 2px;
left: auto;
}