pageflow-progress-navigation-bar 0.4.0 → 0.5.0

data/app/assets/stylesheets/pageflow/{progress_navigation_bar.css.scss → progress_navigation_bar.scss}

@@ -15,53 +15,12 @@ $nav-active-chapter: #6D772E;
 
 $progressbar-mobile-width: 14px;
 
-@import "cross_dependant_styles";
+@import "./progress_navigation_bar/cross_dependant_styles";
+@import "./progress_navigation_bar/mixins";
 @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%;
-    top: 0;
-    position: absolute;
-    z-index: -1;
-    content: "";
-  }
-}
-
-@mixin pageflow-progress-navigation-bar-box($margin-top, $right) {
-  visibility: hidden;
-  margin-top: $margin-top;
-  background-color: $bg-color;
-  border: 2px solid $nav-color;
-  position: absolute;
-  right: $right;
-  padding: 15px;
-  height: auto;
-  left: initial;
-
-  hr {
-    border:0;
-    border-bottom: 1px solid $nav-color;
-  }
-}
+@import "./progress_navigation_bar/animations2";
+@import "./progress_navigation_bar/horizontal";
+@import "./progress_navigation_bar/vertical";
 
 .progress_navigation_bar {
   @include unselectable;
@@ -82,31 +41,21 @@ $progressbar-mobile-width: 14px;
   .navi_hint {
     text-align: center;
     color: $nav-hint-color;
-    font-family: "SourceSansPro";
-    font-size: 11px;
     top: 50%;
     position: absolute;
     width: 86%;
     margin-top: 16px;
-    padding: 0px 7%;
-    @include pageflow-progress-navigation-bar-small-height {
-      display: none !important;
-    }
+    padding: 0 7%;
   }
 
   @include pageflow-progress-mobile-variant {
+    opacity: 0;
     width: $progressbar-mobile-width;
     @include transition(opacity 0.4s ease 0.5s);
-    opacity: 0;
     @include transform(translateZ(0));
     -webkit-backface-visibility: hidden;
   }
 
-  &.show_on_mobile {
-    opacity: 1;
-    @include transition(opacity 0.4s ease);
-  }
-
   position: absolute;
   right: 0;
   top: 0;
@@ -120,7 +69,6 @@ $progressbar-mobile-width: 14px;
     background-image: image-url('pageflow/progress_navigation_bar/indicator.png');
     position: absolute;
     right: 60px;
-    top: 4.05%;
     @include transition(opacity 0.3s linear);
     opacity: 1;
     top: 35px;
@@ -134,6 +82,11 @@ $progressbar-mobile-width: 14px;
       display: none;
     }
   }
+
+  .header_button {
+    display: none;
+  }
+
   .navigation_button_area {
     width: 0;
     right: 30px;
@@ -147,10 +100,9 @@ $progressbar-mobile-width: 14px;
       overflow: visible;
     }
 
-
     .navigation_bar_buttons {
       @include transition(opacity 0.15s ease, right 0.3s ease);
-      left:0;
+      left: 0;
       opacity: 0;
       width: 87px;
       position: absolute;
@@ -162,7 +114,7 @@ $progressbar-mobile-width: 14px;
         border-bottom: 1px solid $nav-button-hr;
 
         &:last-child {
-          border-bottom: 0px solid $nav-button-hr;
+          border-bottom: 0 solid $nav-button-hr;
         }
         position: relative;
         @include box-sizing(border-box);
@@ -172,7 +124,7 @@ $progressbar-mobile-width: 14px;
         }
 
         > a {
-          height:100%;
+          height: 100%;
           width: 100%;
 
           span.button {
@@ -185,10 +137,6 @@ $progressbar-mobile-width: 14px;
               margin: -20px auto 0 23px;
             }
           }
-
-          &:hover .navi_hint, &.active .navi_hint {
-            color: $nav-hint-hover-color;
-          }
         }
       }
     }
@@ -200,7 +148,7 @@ $progressbar-mobile-width: 14px;
       height: 10%;
 
       &.mute {
-        height :20%;
+        height: 20%;
       }
     }
   }
@@ -214,7 +162,7 @@ $progressbar-mobile-width: 14px;
     width: 122px;
 
     @include pageflow-progress-mobile-variant {
-      width: 14px;
+      width: $progressbar-mobile-width;
     }
 
     .navigation_button_area {
@@ -239,8 +187,8 @@ $progressbar-mobile-width: 14px;
     &:before {
       opacity: 0;
       main & {
-          @include transition(opacity 0.7s linear);
-        }
+        @include transition(opacity 0.7s linear);
+      }
     }
   }
 
@@ -320,17 +268,8 @@ $progressbar-mobile-width: 14px;
   }
 
   .navigation_site_detail {
-
     color: white;
-    font-size: 1em;
-    line-height: 1.1em;
-    font-family: sourcesanspro;
-
     @include pageflow-progress-navigation-bar-box(-40px, 30px);
-
-    img {
-      margin-top: 12px;
-    }
   }
 
   .navigation_bar_buttons, .navigation_bar_bottom {
@@ -372,7 +311,6 @@ $progressbar-mobile-width: 14px;
       width: 39px;
 
       p {
-        font-size: 9px;
         color: $nav-color;
         margin-bottom: 0;
         text-align: center;
@@ -387,14 +325,11 @@ $progressbar-mobile-width: 14px;
   }
 
   .navigation_credits_box {
-    font-size: 1em;
     min-width: 230px;
     min-height: 4px;
-    font-family: "sourcesanspro";
-    bottom: 0;
 
     a {
-      color: #b4c552;
+      color: $nav-hint-hover-color;
     }
 
     a.legal, a.copy {
@@ -475,6 +410,10 @@ $progressbar-mobile-width: 14px;
       }
     }
 
+    .navigation_top.deactivated {
+      pointer-events: none;
+    }
+
     .scroller {
       top: 0;
       bottom: 0;
@@ -491,11 +430,6 @@ $progressbar-mobile-width: 14px;
 
       ul {
         position: absolute;
-        right: 8px;
-        width: 14px;
-        top: 50%;
-        max-height: 100%;
-        @include transform(translate(0, -50%) !important);
 
         @include pageflow-progress-mobile-variant {
           right: 3px;
@@ -513,47 +447,6 @@ $progressbar-mobile-width: 14px;
           &.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 {
@@ -574,40 +467,18 @@ $progressbar-mobile-width: 14px;
             cursor: default;
             background-color: $nav-active-page;
 
-
             img {
               border-left: 5px solid #A6D513;
             }
           }
-
-          /* &:visited {
-            background-color: #9EA95C;
-          } */
         }
 
-/*        li.chapter_odd a {
-          background-color: $nav-dot-odd;
+        li.chapter_beginning a {
+          background-color: $nav-color;
 
           &.in_active_chapter {
-            background-color: $nav-active-chapter;
+            background-color: $nav-active-chapter-beginning;
           }
-
-          &.active {
-            background-color: $nav-active-page;
-          }
-        } */
-
-        li.chapter_beginning a {
-          background-color: #949494;
-
-            &.in_active_chapter {
-              background-color: $nav-active-chapter-beginning;
-            }
-
-        /*  &:visited {
-            background-color: #9EA95C;
-            opacity: 0;
-          } */
         }
 
         img {
@@ -644,7 +515,7 @@ $progressbar-mobile-width: 14px;
       .volume-control {
         height: 100%;
 
-        &:before, &:after, .volume-level:before {
+        .volume-level:before {
           background-image: image-url('pageflow/progress_navigation_bar/volume_control_sprite.png');
           position: absolute;
           width: 28px;
@@ -653,28 +524,12 @@ $progressbar-mobile-width: 14px;
           background-repeat: no-repeat;
           top: 8px;
         }
-
-        &:before {
-          background-position: -34px top;
-          left: 32px;
-          bottom: 6%;
-          top: initial;
-        }
-        &:after {
-          background-position: -3px top;
-          left: 32px;
-          top: 6%;
-        }
-        &:after, &:before {
-          @include pageflow-progress-navigation-bar-small-height {
-            display: none;
-          }
-        }
       }
     }
 
     .volume-control {
-      margin: 0px 20px;
+      position: relative;
+      margin: 0 20px;
 
       .volume-slider {
         width: 5px;
@@ -682,7 +537,7 @@ $progressbar-mobile-width: 14px;
         background-color: gray;
         top: 20%;
         position: absolute;
-        left: 40px;
+        left: 20px;
 
         @include pageflow-progress-navigation-bar-small-height {
           top: 10%;
@@ -691,19 +546,9 @@ $progressbar-mobile-width: 14px;
       }
       .volume-level {
         height: 100%;
-        background-color: #b4c552;
+        background-color: $nav-hint-hover-color;
         bottom: 0;
         position: absolute;
-
-        &:before {
-          display: block;
-          content: "";
-          background-position: -66px top;
-          top: -9px !important;
-          width: 18px !important;
-          height: 16px !important;
-          left: -6px !important;
-        }
       }
     }
   }
@@ -716,14 +561,7 @@ $progressbar-mobile-width: 14px;
 }
 
 .navigation_site_detail.progress_navigation h2 {
-  font-size: 1em;
-  line-height: 1.2em;
-  margin: 0;
-
   > span {
     display: block;
   }
-  .chapter_number {
-    font-weight: normal;
-  }
-}
+}

data/app/assets/stylesheets/pageflow/progress_navigation_bar/animations2.scss

@@ -0,0 +1,82 @@
+$pageflow-progress-navigation-bar-v-translation: 100px;
+$pageflow-progress-navigation-bar-h-translation: 50px;
+
+@include keyframes(pageflow-progress-navigation-bar-slide-in-from-top2) {
+  0% {
+    @include transform(translate3d(-$pageflow-progress-navigation-bar-v-translation, 0, 0));
+    opacity: 0;
+  }
+  100% {
+    @include transform(translate3d(0, 0, 0));
+    opacity: 1;
+  }
+}
+
+@include keyframes(pageflow-progress-navigation-bar-slide-in-from-bottom2) {
+  0% {
+    @include transform(translate3d($pageflow-progress-navigation-bar-v-translation, 0, 0));
+    opacity: 0;
+  }
+  100% {
+    @include transform(translate3d(0, 0, 0));
+    opacity: 1;
+  }
+}
+
+@include keyframes(pageflow-progress-navigation-bar-slide-out-to-top2) {
+  0% {
+    @include transform(translate3d(0, 0, 0));
+    opacity: 1;
+  }
+  100% {
+    @include transform(translate3d(-$pageflow-progress-navigation-bar-v-translation, 0, 0));
+    opacity: 0;
+  }
+}
+
+@include keyframes(pageflow-progress-navigation-bar-slide-out-to-bottom2) {
+  0% {
+    @include transform(translate3d(0, 0, 0));
+    opacity: 1;
+  }
+  100% {
+    @include transform(translate3d($pageflow-progress-navigation-bar-v-translation, 0, 0));
+    opacity: 0;
+  }
+}
+
+@include keyframes(pageflow-progress-navigation-bar-slide-in-from-right2) {
+  0% {
+    @include transform(translate3d(0, $pageflow-progress-navigation-bar-h-translation, 0));
+  }
+  100% {
+    @include transform(translate3d(0, 0, 0));
+  }
+}
+
+@include keyframes(pageflow-progress-navigation-bar-slide-in-from-left2) {
+  0% {
+    @include transform(translate3d(0, -$pageflow-progress-navigation-bar-h-translation, 0));
+  }
+  100% {
+    @include transform(translate3d(0, 0, 0));
+  }
+}
+
+@include keyframes(pageflow-progress-navigation-bar-slide-out-to-right2) {
+  0% {
+    @include transform(translate3d(0, 0, 0));
+  }
+  100% {
+    @include transform(translate3d(0, $pageflow-progress-navigation-bar-h-translation, 0));
+  }
+}
+
+@include keyframes(pageflow-progress-navigation-bar-slide-out-to-left2) {
+  0% {
+    @include transform(translate3d(0, 0, 0));
+  }
+  100% {
+    @include transform(translate3d(0, -$pageflow-progress-navigation-bar-h-translation, 0));
+  }
+}