formir
Version:
Pure CSS / HTML Framework
105 lines (101 loc) • 2.28 kB
text/less
input.@{toggle} {
position: fixed;
left: -1000000px;
&:checked {
~ .@{toggle-block}, ~ .@{toggle-show} {
display: block;
}
~ .@{toggle-flex} {
.display-flex;
}
~ .@{toggle-inline} {
display: inline;
}
~ .@{toggle-inline-block} {
display: inline-block;
}
~ .@{toggle-hide}, ~ .@{toggle-none} {
display: none;
}
~ .@{toggle-label} {
.@{toggle-block}, .@{toggle-show} {
display: block;
}
.@{toggle-flex} {
.display-flex;
}
.@{toggle-inline} {
display: inline;
}
.@{toggle-inline-block} {
display: inline-block;
}
.@{toggle-hide}, .@{toggle-none} {
display: none;
}
}
}
&:not(:checked) {
~ .@{toggle-block}, ~ .@{toggle-show}, ~ .@{toggle-flex}, ~ .@{toggle-inline}, ~ .@{toggle-inline-block} {
display: none;
}
~ .@{toggle-hide}, ~ .@{toggle-none} {
display: block;
}
~ .@{toggle-label} {
.@{toggle-block}, .@{toggle-show}, .@{toggle-flex}, .@{toggle-inline}, .@{toggle-inline-block} {
display: none;
}
.@{toggle-hide}, .@{toggle-none} {
display: block;
}
}
}
}
input.@{mobile-toggle} {
position: fixed;
left: -1000000px;
}
@media (max-width: @mobile-menu-max-width) {
input.@{mobile-toggle} {
position: fixed;
left: -1000000px;
&:checked {
~ .@{mobile-toggle-show} {
display: block;
}
~ .@{mobile-toggle-hide} {
display: none;
}
~ .@{mobile-toggle-label} {
.@{toggle-show} {
display: block;
}
.@{toggle-hide} {
display: none;
}
}
}
&:not(:checked) {
~ .@{mobile-toggle-show} {
display: none;
}
~ .@{mobile-toggle-hide} {
display: block;
}
~ .@{mobile-toggle-label} {
.@{toggle-show} {
display: none;
}
.@{toggle-hide} {
display: block;
}
}
}
}
}
@media (min-width: @mobile-menu-max-width) {
input.@{mobile-toggle}, .@{mobile-toggle-label} {
display: none;
}
}