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,
$size:100px,
$background-color:#cccccc,
$bar-color:#999999
$bar-color:#999999,
$selector:ul
) {
display: none;
@@ -34,7 +35,7 @@
// Navigation List
// TODO Add Selector Support
+ ul {
+ #{$selector} {
display: none;
}
}
@@ -44,7 +45,62 @@
+ .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
}
}