Add touch events

2014-12-16 22:14:47 +01:00
parent 9b72ff173f
commit 6a8d517727
14 changed files with 2140 additions and 53 deletions
@@ -1,14 +1,23 @@
-aside.side-menu
+$side-menu-width: 222px
+.side-menu
  background-color: #444
  position: fixed
-  display: none
-  left: -222px
+  //display: none
+  left: -$side-menu-width
  top: 0
-  width: 222px
+  width: $side-menu-width
  height: 100%
  z-index: 157
  opacity: 0.9
  border-right: 2px solid black
+  &.active
+    left: 0
+    +animation(sideMenuActive 0.5s)
+    .toggle-side-menu
+      right: 5px
+  &.closed
+    &.clicked
+      +animation(sideMenuClosed 0.3s)
  > ul
    list-style: none
    a
@@ -42,18 +51,27 @@ aside.side-menu
  a.active
    color: $current-color

-.toggle-side-menu
-  position: absolute
-  width: 28px
-  height: 28px
-  color: white
-  left: 0
-  cursor: pointer
-  z-index: 100
-  font-size: 1.6em
-  &.open
+  .toggle-side-menu
+    position: absolute
+    width: 28px
+    height: 28px
    color: white
-  span
-    @extend .fa
-    @extend .fa-lg
-    @extend .fa-bars
+    right: -30px
+    cursor: pointer
+    //z-index: 158
+    font-size: 1.6em
+    span
+      @extend .fa
+      @extend .fa-lg
+      @extend .fa-bars
+
+keyframes(sideMenuActive)
+  from
+    left: -$side-menu-width
+  to
+    left: 0
+keyframes(sideMenuClosed)
+  from
+    left: 0
+  to
+    left: -$side-menu-width