Included in:
Not included in any file!
component
Toggle
Little badge multi-purpose labels.
<div class="toggle">
<input class="toggle__checkbox" id="YOURIDHERE-checkbox" type="checkbox">
<label class="toggle__button" for="YOURIDHERE-checkbox">
<span class="toggle__icon">Menu</span>
</label>
<div class="toggle__content" id="YOURIDHERE-content">
Showing content
</div><!--.toggle__content-->
</div><!-- /.toggle -->
Showing content
41
Total declarations
0
Important
declarations
declarations
0
Vendor
prefixes
prefixes
0
Floats
declared
declared
6
height
6
width
4
display
4
transform
2
background
2
border-radius
2
content
2
opacity
2
overflow
Component structure
.toggle {...}
&__checkbox {...}
&:checked {...}
& ~ [class$="__button"] {...}
& > [class$="__icon"] {...}
&:before {...}
&:after {...}
& ~ [class$="__content"] {...}
&__button {...}
&__icon {...}
&:before {...}
&:after {...}
&__content {...}