diff --git a/mixins/layout/menus/_toggle.scss b/mixins/layout/menus/_toggle.scss index bb9a9ae..7133608 100644 --- a/mixins/layout/menus/_toggle.scss +++ b/mixins/layout/menus/_toggle.scss @@ -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 } }