progress_navigation_bar.css.scss in pageflow-progress-navigation-bar-0.4.0

- old
+ new

@@ -14,17 +14,28 @@
 $nav-active-chapter: #6D772E;
 
 $progressbar-mobile-width: 14px;
 
 @import "cross_dependant_styles";
+@import "./progress_navigation_bar/animations";
 
 @mixin pageflow-progress-navigation-bar-small-height {
   @media screen and (max-height: 870px) {
     @content;
   }
 }
 
+@mixin pageflow-progress-mobile-variant {
+  .has_mobile_platform & {
+    @content;
+  }
+
+  @include phone {
+    @content;
+  }
+}
+
 @mixin pageflow-progress-navigation-bar-transparent-background {
   &:after {
     height: 100%;
     background-image: none;
     width: 100%;
@@ -81,11 +92,11 @@
     @include pageflow-progress-navigation-bar-small-height {
       display: none !important;
     }
   }
 
-  .has_mobile_platform & {
+  @include pageflow-progress-mobile-variant {
     width: $progressbar-mobile-width;
     @include transition(opacity 0.4s ease 0.5s);
     opacity: 0;
     @include transform(translateZ(0));
     -webkit-backface-visibility: hidden;
@@ -93,10 +104,11 @@
 
   &.show_on_mobile {
     opacity: 1;
     @include transition(opacity 0.4s ease);
   }
+
   position: absolute;
   right: 0;
   top: 0;
   z-index: 3;
 
@@ -112,11 +124,11 @@
     @include transition(opacity 0.3s linear);
     opacity: 1;
     top: 35px;
     background-position: left top;
 
-    .has_mobile_platform & {
+    @include pageflow-progress-mobile-variant {
       display: none;
     }
 
     .bigScreen &, .hideText & {
       display: none;
@@ -199,18 +211,18 @@
 
   &.hover, &:hover, &:focus, &.focus {
     overflow: visible;
     width: 122px;
 
-    .has_mobile_platform & {
+    @include pageflow-progress-mobile-variant {
       width: 14px;
     }
 
     .navigation_button_area {
       width: 87px;
 
-      .has_mobile_platform & {
+      @include pageflow-progress-mobile-variant {
         display: none;
       }
 
       .navigation_bar_buttons {
         overflow: visible;
@@ -466,42 +478,83 @@
     .scroller {
       top: 0;
       bottom: 0;
       right: 0;
       width: 30px;
-      .has_mobile_platform & {
-        width: $progressbar-mobile-width;
-      }
       max-height: 100%;
       overflow: hidden;
       position: absolute;
-
       @include pageflow-progress-navigation-bar-transparent-background;
 
+      @include pageflow-progress-mobile-variant {
+        width: $progressbar-mobile-width;
+      }
 
-
       ul {
         position: absolute;
         right: 8px;
         width: 14px;
+        top: 50%;
+        max-height: 100%;
+        @include transform(translate(0, -50%) !important);
 
-        .has_mobile_platform & {
+        @include pageflow-progress-mobile-variant {
           right: 3px;
           width: 8px;
-
-
         }
-        top: 50%;
-        max-height: 100%;
-        @include transform(translate(0, -50%) !important);
 
         li {
           position: relative;
           @include box-sizing(border-box);
 
           &:last-child {
             margin-bottom: 0;
           }
+
+          &.filtered {
+            display: none;
+          }
+
+          &.animate_in {
+            &.moving_forwards {
+              @include animation(pageflow-progress-navigation-bar-slide-in-from-bottom 0.4s ease-out);
+            }
+
+            &.moving_backwards {
+              @include animation(pageflow-progress-navigation-bar-slide-in-from-top 0.4s ease-out);
+            }
+
+            &.moving_down {
+              @include animation(pageflow-progress-navigation-bar-slide-in-from-right 0.4s ease-out);
+            }
+
+            &.moving_up {
+              @include animation(pageflow-progress-navigation-bar-slide-in-from-left 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_backwards {
+              @include animation(pageflow-progress-navigation-bar-slide-out-to-bottom 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_up {
+              @include animation(pageflow-progress-navigation-bar-slide-out-to-right 0.4s ease-in);
+              @include transform(translate3d(50px, 0, 0));
+            }
+          }
+
         }
 
         a {
           position: absolute;
           top: 0;
\ No newline at end of file