vertical.scss in pageflow-progress-navigation-bar-1.1.0

- old
+ new

@@ -1,9 +1,12 @@
 .js.progress_navigation_bar.vertical {
-  &.show_on_mobile {
-    opacity: 1;
-    @include transition(opacity 0.4s ease);
+  &.hover, &:hover, &:focus, &.focus {
+    width: 122px;
+
+    @include pageflow-progress-mobile-variant {
+      width: $progressbar-mobile-width;
+    }
   }
 
   .header_button  {
     display: none;
   }
@@ -44,54 +47,60 @@
     @include pageflow-progress-navigation-bar-small-height {
       display: none;
     }
   }
 
-  .scroller ul {
+  .scroller {
+    width: 30px;
+
     @include pageflow-progress-mobile-variant {
-      right: 3px;
-      width: 8px;
-    }
-  }
+      width: $progressbar-mobile-width;
 
-  .scroller li {
-    &.animate_in {
-      &.moving_forwards {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-bottom 0.4s ease-out);
+      ul {
+        right: 3px;
+        width: 8px;
       }
+    }
 
-      &.moving_backwards {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-top 0.4s ease-out);
-      }
+    li {
+      &.animate_in {
+        &.moving_forwards {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-bottom 0.4s ease-out);
+        }
 
-      &.moving_down {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-right 0.4s ease-out);
-      }
+        &.moving_backwards {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-top 0.4s ease-out);
+        }
 
-      &.moving_up {
-        @include animation(pageflow-progress-navigation-bar-slide-in-from-left 0.4s ease-out);
-      }
-    }
+        &.moving_down {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-right 0.4s ease-out);
+        }
 
-    &.animate_out {
-      &.moving_forwards {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-top 0.4s ease-in);
-        opacity: 0;
+        &.moving_up {
+          @include animation(pageflow-progress-navigation-bar-slide-in-from-left 0.4s ease-out);
+        }
       }
 
-      &.moving_backwards {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-bottom 0.4s ease-in);
-        opacity: 0;
-      }
+      &.animate_out {
+        &.moving_forwards {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-top 0.4s ease-in);
+          opacity: 0;
+        }
 
-      &.moving_down {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-left 0.4s ease-in);
-        @include transform(translate3d(-50px, 0, 0));
-      }
+        &.moving_backwards {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-bottom 0.4s ease-in);
+          opacity: 0;
+        }
 
-      &.moving_up {
-        @include animation(pageflow-progress-navigation-bar-slide-out-to-right 0.4s ease-in);
-        @include transform(translate3d(50px, 0, 0));
+        &.moving_down {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-left 0.4s ease-in);
+          @include transform(translate3d(-50px, 0, 0));
+        }
+
+        &.moving_up {
+          @include animation(pageflow-progress-navigation-bar-slide-out-to-right 0.4s ease-in);
+          @include transform(translate3d(50px, 0, 0));
+        }
       }
     }
   }
 }