Added menu > toggle-phone
This commit is contained in:
@@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user