111 lines
1.8 KiB
SCSS
111 lines
1.8 KiB
SCSS
@mixin toggle-tablet(
|
|
//$navclass:nav,
|
|
$size:100px,
|
|
$background-color:#cccccc,
|
|
$bar-color:#999999,
|
|
$selector:ul
|
|
) {
|
|
display: none;
|
|
|
|
+ .navbar {
|
|
display: none;
|
|
}
|
|
|
|
@include tablet($DOWNWARDS-OPEN) {
|
|
// Tablet Mode
|
|
+ .navbar {
|
|
position: fixed;
|
|
z-index: 10000;
|
|
display: block;
|
|
padding: $size/7;
|
|
background-color: $background-color;
|
|
box-sizing: border-box;
|
|
|
|
span {
|
|
display: block;
|
|
margin-bottom: $size/7;
|
|
width: ($size/7)*5;
|
|
height: $size/7;
|
|
background-color: $bar-color;
|
|
box-sizing: border-box;
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Navigation List
|
|
// TODO Add Selector Support
|
|
+ #{$selector} {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Enabled Menu
|
|
&:checked {
|
|
|
|
+ .navbar {
|
|
|
|
+ #{$selector} {
|
|
@content
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin toggle-phone(
|
|
//$navclass:nav,
|
|
$size:100px,
|
|
$background-color:#cccccc,
|
|
$bar-color:#999999,
|
|
$selector:ul
|
|
) {
|
|
display: none;
|
|
|
|
+ .navbar {
|
|
display: none;
|
|
}
|
|
|
|
@include phone($DOWNWARDS-OPEN) {
|
|
// Tablet Mode
|
|
+ .navbar {
|
|
position: fixed;
|
|
z-index: 10000;
|
|
display: block;
|
|
padding: $size/7;
|
|
background-color: $background-color;
|
|
box-sizing: border-box;
|
|
|
|
span {
|
|
display: block;
|
|
margin-bottom: $size/7;
|
|
width: ($size/7)*5;
|
|
height: $size/7;
|
|
background-color: $bar-color;
|
|
box-sizing: border-box;
|
|
&:last-of-type {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Navigation List
|
|
// TODO Add Selector Support
|
|
+ #{$selector} {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Enabled Menu
|
|
&:checked {
|
|
|
|
+ .navbar {
|
|
|
|
+ #{$selector} {
|
|
@content
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|