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

add toogle

Browse Source
This commit is contained in:
piensaenpixel 2016-01-26 17:28:48 +01:00
parent 6d41387a97
commit 0e3e65387f
2 changed files with 51 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/scss/cdb-components/forms/sliders.scss
View File

@ -51,9 +51,8 @@
.CDB-Range::-webkit-slider-thumb::after {
position: absolute;
top: -5px;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;

50
src/scss/cdb-components/forms/toogle.scss Normal file
View File

@ -0,0 +1,50 @@
// Radio Button styles
// ----------------------------------------------
/* SG
# Forms/Toogle
```
<label class="Text 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;
}