Idem

diff --git a/css/app.css b/css/app.css
index 793c15c..76db214 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6178,6 +6178,7 @@ span.wpcf7-list-item {
  * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
  *
  */
+/*
 .top-bar-menu > li > .sub-menu {
   position: absolute;
   left: 0;
@@ -6185,182 +6186,195 @@ span.wpcf7-list-item {
   z-index: 0;
   overflow: hidden;
   max-height: 0;
-  /* The transition-delay prevents the menu to disappear before the transition is run backward
-   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) */
+   The transition-delay prevents the menu to disappear before the transition is run backward
+   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) 
   -webkit-transition: max-height 1ms linear 1s;
-  -moz-transition: max-height 1ms linear 1s;
-  /* A .submenu should be only revealed when hovering the .menu */
-  pointer-events: none; }
-
+     -moz-transition: max-height 1ms linear 1s;
+   A .submenu should be only revealed when hovering the .menu 
+  pointer-events: none;
+}
+ 
 .top-bar-menu > li:hover .sub-menu, .top-bar-menu > li:focus .sub-menu {
   pointer-events: auto;
   z-index: 10;
   max-height: 2000px;
   -webkit-transition: none;
-  -moz-transition: none; }
-
-.has-dropdown.not-click .dropdown {
-  display: block;
-  visibility: hidden;
-  opacity: 0; }
-.has-dropdown.not-click:hover > .dropdown {
-  visibility: visible;
-  opacity: 1; }
-
-/* Progressive Anim
+     -moz-transition: none;
+}
+&.has-dropdown.not-click {
+    .dropdown {
+        @extend %anim-button;
+        display:block;
+        visibility: hidden;
+        opacity: 0;
+    }
+    &:hover > .dropdown {
+        visibility: visible;
+        opacity: 1;
+    }
+}
+ Progressive Anim
  * ==================================================================
  * This is a lot of redundant code but the result is worth it
  * This should be edited for menus with more or much less than 8 items 
- */
-/* forward */
-.top-bar-menu > li:hover .sub-menu li:nth-child(1), .menu > li:hover .sub-menu li:nth-child(1), .sub-menu li:nth-child(8) {
-  -webkit-transition-delay: 0;
-  -moz-transition-delay: 0;
-  -ms-transition-delay: 0;
-  -o-transition-delay: 0;
-  transition-delay: 0; }
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(2), .sub-menu li:nth-child(7) {
-  -webkit-transition-delay: 66;
-  -moz-transition-delay: 66;
-  -ms-transition-delay: 66;
-  -o-transition-delay: 66;
-  transition-delay: 66; }
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(3), .sub-menu li:nth-child(6) {
-  -webkit-transition-delay: 132;
-  -moz-transition-delay: 132;
-  -ms-transition-delay: 132;
-  -o-transition-delay: 132;
-  transition-delay: 132; }
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(4), .sub-menu li:nth-child(5) {
-  -webkit-transition-delay: 198;
-  -moz-transition-delay: 198;
-  -ms-transition-delay: 198;
-  -o-transition-delay: 198;
-  transition-delay: 198; }
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(5), .sub-menu li:nth-child(4) {
-  -webkit-transition-delay: 264;
-  -moz-transition-delay: 264;
-  -ms-transition-delay: 264;
-  -o-transition-delay: 264;
-  transition-delay: 264; }
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(6), .sub-menu li:nth-child(3) {
-  -webkit-transition-delay: 330;
-  -moz-transition-delay: 330;
-  -ms-transition-delay: 330;
-  -o-transition-delay: 330;
-  transition-delay: 330; }
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(7), .sub-menu li:nth-child(2) {
-  -webkit-transition-delay: 396;
-  -moz-transition-delay: 396;
-  -ms-transition-delay: 396;
-  -o-transition-delay: 396;
-  transition-delay: 396; }
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(8), .sub-menu li:nth-child(1) {
-  -webkit-transition-delay: 462;
-  -moz-transition-delay: 462;
-  -ms-transition-delay: 462;
-  -o-transition-delay: 462;
-  transition-delay: 462; }
-
-/* Default
- ================================================================= */
+ 
+$baseTime: 66;
+@mixin transition-delay($transitionTime) {
+    $newTime: $transitionTime * $baseTime;
+      -webkit-transition-delay: $newTime;
+     -moz-transition-delay: $newTime;
+      -ms-transition-delay: $newTime;
+       -o-transition-delay: $newTime;
+          transition-delay: $newTime;
+}
+  forward 
+.top-bar-menu > li:hover .sub-menu li:nth-child(1),
+.menu > li:hover .sub-menu li:nth-child(1),
+.sub-menu li:nth-child(8) {
+    @include transition-delay(0);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(2),
+.sub-menu li:nth-child(7)  {
+    @include transition-delay(1);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(3),
+.sub-menu li:nth-child(6)  {
+    @include transition-delay(2);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(4),
+.sub-menu li:nth-child(5)  {
+    @include transition-delay(3);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(5),
+.sub-menu li:nth-child(4)  {
+    @include transition-delay(4);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(6),
+.sub-menu li:nth-child(3)  {
+    @include transition-delay(5);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(7),
+.sub-menu li:nth-child(2) {
+    @include transition-delay(6);
+}
+
+.top-bar-menu > li:hover .sub-menu li:nth-child(8),
+.sub-menu li:nth-child(1)  {
+    @include transition-delay(7);
+}
+
+ Default
+ ================================================================= 
 .sub-menu li {
   opacity: 0;
-  -webkit-transition: opacity 0.4s, -webkit-transform 0.6s, max-height 0.6s;
-  -moz-transition: opacity 0.4s, -moz-transform 0.6s, max-height 0.6s;
-  -ms-transition: opacity 0.4s, -ms-transform 0.6s, max-height 0.6s;
-  -o-transition: opacity 0.4s, -o-transform 0.6s, max-height 0.6s;
-  transition: opacity 0.4s, transform 0.6s, max-height 0.6s; }
+
+  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
+     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
+      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
+       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
+          transition: opacity .4s,         transform .6s, max-height .6s;
+}
 
 .top-bar-menu > li:hover .sub-menu li, .top-bar-menu > li:focus .sub-menu li {
   opacity: 1;
-  -webkit-transform: none;
-  -moz-transform: none;
-  -ms-transform: none;
-  -o-transform: none;
-  transform: none; }
 
-/* Helix
- ================================================================= */
+  -webkit-transform: none;
+     -moz-transform: none;
+      -ms-transform: none;
+       -o-transform: none;
+          transform: none;
+}
+
+ Helix
+ ================================================================= 
 .helix {
   -webkit-perspective: 400px;
-  -moz-perspective: 400px;
-  -ms-perspective: 400px;
-  -o-perspective: 400px;
-  perspective: 400px; }
+     -moz-perspective: 400px;
+      -ms-perspective: 400px;
+       -o-perspective: 400px;
+          perspective: 400px;
+}
 
 .helix li {
   -webkit-transform: rotateY(90deg);
-  -moz-transform: rotateY(90deg);
-  -ms-transform: rotateY(90deg);
-  -o-transform: rotateY(90deg);
-  transform: rotateY(90deg); }
-
-/* Wave
- ================================================================= */
+     -moz-transform: rotateY(90deg);
+      -ms-transform: rotateY(90deg);
+       -o-transform: rotateY(90deg);
+          transform: rotateY(90deg);
+}
+
+ Wave
+ ================================================================= 
 .wave li {
   -webkit-transform-origin: 0% 0%;
-  -moz-transform-origin: 0% 0%;
-  -ms-transform-origin: 0% 0%;
-  -o-transform-origin: 0% 0%;
-  transform-origin: 0% 0%;
-  -webkit-transform: skewY(-90deg);
-  -moz-transform: skewY(-90deg);
-  -ms-transform: skewY(-90deg);
-  -o-transform: skewY(-90deg);
-  transform: skewY(-90deg); }
+     -moz-transform-origin: 0% 0%;
+      -ms-transform-origin: 0% 0%;
+       -o-transform-origin: 0% 0%;
+          transform-origin: 0% 0%;
 
-/* Fly
- ================================================================= */
+  -webkit-transform: skewY(-90deg);
+     -moz-transform: skewY(-90deg);
+      -ms-transform: skewY(-90deg);
+       -o-transform: skewY(-90deg);
+          transform: skewY(-90deg);
+}
+
+ Fly
+ ================================================================= 
 .fly {
   -webkit-perspective: 400px;
-  -moz-perspective: 400px;
-  -ms-perspective: 400px;
-  -o-perspective: 400px;
-  perspective: 400px; }
+     -moz-perspective: 400px;
+      -ms-perspective: 400px;
+       -o-perspective: 400px;
+          perspective: 400px;
+}
 
 .fly li {
   -webkit-transform-origin: 50% 50% -50px;
-  -moz-transform-origin: 50% 50% -50px;
-  -ms-transform-origin: 50% 50% -50px;
-  -o-transform-origin: 50% 50% -50px;
-  transform-origin: 50% 50% -50px;
-  -webkit-transform: rotateX(-180deg);
-  -moz-transform: rotateX(-180deg);
-  -ms-transform: rotateX(-180deg);
-  -o-transform: rotateX(-180deg);
-  transform: rotateX(-180deg); }
-
-/* Blind
- ================================================================= */
+     -moz-transform-origin: 50% 50% -50px;
+      -ms-transform-origin: 50% 50% -50px;
+       -o-transform-origin: 50% 50% -50px;
+          transform-origin: 50% 50% -50px;
+
+  -webkit-transform: rotateX( -180deg );
+     -moz-transform: rotateX( -180deg );
+      -ms-transform: rotateX( -180deg );
+       -o-transform: rotateX( -180deg );
+          transform: rotateX( -180deg );
+}
+
+ Blind
+ ================================================================= 
 .blind li {
-  max-height: 0; }
+  max-height: 0;
+}
 
 .top-bar-menu > li:hover .blind li, .top-bar-menu > li:focus .blind li {
-  /* This should be changed to the normal height of list-items */
-  max-height: 55px; }
+   This should be changed to the normal height of list-items 
+  max-height: 55px;
+}
 
-/* Venitian
- ================================================================= */
+ Venitian
+ ================================================================= 
 .venitian li {
   -webkit-transform-origin: 50% 0;
-  -moz-transform-origin: 50% 0;
-  -ms-transform-origin: 50% 0;
-  -o-transform-origin: 50% 0;
-  transform-origin: 50% 0;
-  -webkit-transform: scale(1, 0);
-  -moz-transform: scale(1, 0);
-  -ms-transform: scale(1, 0);
-  -o-transform: scale(1, 0);
-  transform: scale(1, 0); }
-
+     -moz-transform-origin: 50% 0;
+      -ms-transform-origin: 50% 0;
+       -o-transform-origin: 50% 0;
+          transform-origin: 50% 0;
+
+  -webkit-transform: scale(1,0);
+     -moz-transform: scale(1,0);
+      -ms-transform: scale(1,0);
+       -o-transform: scale(1,0);
+          transform: scale(1,0);
+}*/
 /* Assets */
 /* 
  * Foundation Icons v 3.0

diff --git a/scss/site/_structure.scss b/scss/site/_structure.scss
index 85476b5..d4a4e22 100644 (file)
--- a/scss/site/_structure.scss
+++ b/scss/site/_structure.scss
@@ -705,7 +705,7 @@ article h2 {
  * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
  *
  */
-
+/*
 .top-bar-menu > li > .sub-menu {
   position: absolute;
   left: 0;
@@ -713,11 +713,11 @@ article h2 {
   z-index: 0;
   overflow: hidden;
   max-height: 0;
-  /* The transition-delay prevents the menu to disappear before the transition is run backward
-   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) */
+   The transition-delay prevents the menu to disappear before the transition is run backward
+   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) 
   -webkit-transition: max-height 1ms linear 1s;
      -moz-transition: max-height 1ms linear 1s;
-  /* A .submenu should be only revealed when hovering the .menu */
+   A .submenu should be only revealed when hovering the .menu 
   pointer-events: none;
 }
  
@@ -740,11 +740,11 @@ article h2 {
         opacity: 1;
     }
 }
-/* Progressive Anim
+ Progressive Anim
  * ==================================================================
  * This is a lot of redundant code but the result is worth it
  * This should be edited for menus with more or much less than 8 items 
- */
+ 
 $baseTime: 66;
 @mixin transition-delay($transitionTime) {
     $newTime: $transitionTime * $baseTime;
@@ -754,7 +754,7 @@ $baseTime: 66;
        -o-transition-delay: $newTime;
           transition-delay: $newTime;
 }
- /* forward */
+  forward 
 .top-bar-menu > li:hover .sub-menu li:nth-child(1),
 .menu > li:hover .sub-menu li:nth-child(1),
 .sub-menu li:nth-child(8) {
@@ -796,8 +796,8 @@ $baseTime: 66;
     @include transition-delay(7);
 }
 
-/* Default
- ================================================================= */
+ Default
+ ================================================================= 
 .sub-menu li {
   opacity: 0;
 
@@ -818,8 +818,8 @@ $baseTime: 66;
           transform: none;
 }
 
-/* Helix
- ================================================================= */
+ Helix
+ ================================================================= 
 .helix {
   -webkit-perspective: 400px;
      -moz-perspective: 400px;
@@ -836,8 +836,8 @@ $baseTime: 66;
           transform: rotateY(90deg);
 }
 
-/* Wave
- ================================================================= */
+ Wave
+ ================================================================= 
 .wave li {
   -webkit-transform-origin: 0% 0%;
      -moz-transform-origin: 0% 0%;
@@ -852,8 +852,8 @@ $baseTime: 66;
           transform: skewY(-90deg);
 }
 
-/* Fly
- ================================================================= */
+ Fly
+ ================================================================= 
 .fly {
   -webkit-perspective: 400px;
      -moz-perspective: 400px;
@@ -876,19 +876,19 @@ $baseTime: 66;
           transform: rotateX( -180deg );
 }
 
-/* Blind
- ================================================================= */
+ Blind
+ ================================================================= 
 .blind li {
   max-height: 0;
 }
 
 .top-bar-menu > li:hover .blind li, .top-bar-menu > li:focus .blind li {
-  /* This should be changed to the normal height of list-items */
+   This should be changed to the normal height of list-items 
   max-height: 55px;
 }
 
-/* Venitian
- ================================================================= */
+ Venitian
+ ================================================================= 
 .venitian li {
   -webkit-transform-origin: 50% 0;
      -moz-transform-origin: 50% 0;
@@ -901,4 +901,4 @@ $baseTime: 66;
       -ms-transform: scale(1,0);
        -o-transform: scale(1,0);
           transform: scale(1,0);
-}
+}*/