Added menu > toggle-phone

This commit is contained in:
2017-04-05 09:11:40 +02:00
parent e0fe248a66
commit 4ae77bdc87
+59 -3
View File
@@ -2,7 +2,8 @@
//$navclass:nav, //$navclass:nav,
$size:100px, $size:100px,
$background-color:#cccccc, $background-color:#cccccc,
$bar-color:#999999 $bar-color:#999999,
$selector:ul
) { ) {
display: none; display: none;
@@ -34,7 +35,7 @@
// Navigation List // Navigation List
// TODO Add Selector Support // TODO Add Selector Support
+ ul { + #{$selector} {
display: none; display: none;
} }
} }
@@ -44,7 +45,62 @@
+ .navbar { + .navbar {
+ ul { + #{$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 @content
} }
} }