Added Menu Mixins:

Desktop vertical Desktop vertical Tablet/Phone Fullscreen Toggle Button
2017-03-29 12:14:21 +02:00
parent 5cafe3670b
commit 9cd926a1e5
25 changed files with 2269 additions and 1 deletions
@@ -0,0 +1,133 @@
+@mixin menu-vertical-open(
+  $padding:15px,
+  $width:200px,
+  $bg-color:#cccccc,
+  $bg-color-hover:#999999,
+  $font-color:#666666,
+  $font-color-hover:#ffffff
+) {
+  // First
+  position: relative;
+  list-style: none;
+  display: block;
+  width: $width;
+  background-color: $bg-color;
+
+  // First
+  li {
+    position: relative;
+    display: block;
+    background-color: $bg-color;
+    color: $font-color;
+    width: auto;
+
+    a {
+      display: block;
+      padding: $padding;
+      width: 100%;
+      text-decoration: none;
+      color: $font-color;
+      box-sizing: border-box;
+    }
+
+    // Second
+    ul {
+      //display: none;
+      //position: absolute;
+      width: 100%;
+      //left: 100%;
+      //top: 0;
+
+      // Second
+      li {
+        color: $font-color;
+        a {
+          color: $font-color;
+        }
+
+        // Third
+        ul {
+          //position: absolute;
+          //display: none;
+          //left: 100%;
+          //top: 0;
+
+          // Third
+          li {
+            position: relative;
+            color: $font-color;
+
+            a {
+              color: $font-color;
+            }
+          }
+        }
+      }
+    }
+
+    // First
+    &:hover {
+      background-color: $bg-color-hover;
+      color: $font-color-hover;
+
+      a {
+        color: $font-color-hover;
+      }
+
+      // Second
+      ul {
+        //display: block;
+
+        // Second
+        li {
+          //display: block;
+          color: $font-color;
+
+          a {
+            color: $font-color;
+          }
+          // Third
+          ul {
+            //display: none;
+
+            // Third
+            li {
+
+            }
+          }
+
+          // Second
+          &:hover {
+            color: $font-color-hover;
+
+            a {
+              color: $font-color-hover;
+            }
+
+            // Third
+            ul {
+              display: block;
+
+              // Third
+              li {
+                color: $font-color;
+
+                a {
+                  color: $font-color;
+                }
+
+                &:hover {
+                  color: $font-color-hover;
+
+                  a {
+                    color: $font-color-hover;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}