Added Menu Mixins:

Desktop vertical Desktop vertical Tablet/Phone Fullscreen Toggle Button
2017-02-22 01:21:17 +01:00
parent 6d9ce3dacc
commit 5cafe3670b
24 changed files with 946 additions and 54 deletions
@@ -0,0 +1,54 @@
+@mixin toggle-tablet(
+  //$navclass:nav,
+  $size:100px,
+  $background-color:#cccccc,
+  $bar-color:#999999
+) {
+  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
+      + ul {
+        display: none;
+      }
+    }
+
+    // Enabled Menu
+    &:checked {
+
+      + .navbar {
+
+        + ul {
+          @content
+        }
+      }
+    }
+  }
+}
+