pageflow-progress-navigation-bar 0.1.0

data/app/assets/stylesheets/pageflow/cross_dependant_styles.css.scss

@@ -0,0 +1,29 @@
+body .widget_progress_navigation_bar_present .navigation_mobile {
+  .menu.index {
+    right: 20px;
+  }
+  &.active .menu.index {
+    right: 200px;
+  }
+}
+
+.navigation_mobile, .navigation_mobile > * {
+  body.has_mobile_platform .widget_progress_navigation_bar_present & {
+    display: block;
+  }
+
+  body.has_no_mobile_platform .widget_progress_navigation_bar_present & {
+    display: none;
+  }
+}
+.js .widget_progress_navigation_bar_present .page .close_button {
+  @include desktop {
+    right: 125px;
+  }
+}
+
+.js .widget_progress_navigation_bar_present .videoWrapper {
+  @include desktop {
+    margin-right: 30px;
+  }
+}

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

@@ -0,0 +1,676 @@
+$bg-color: #353535;
+$nav-color: #9c9c9c;
+
+$nav-hint-color: #A9A9A9;
+$nav-hint-hover-color: #b4c552;
+
+$nav-dot-even: #afafaf;
+$nav-dot-odd: #afafaf;
+
+$nav-button-hr: #6f6f6f;
+
+$nav-active-page: #b4c552;
+$nav-active-chapter-beginning: #879438;
+$nav-active-chapter: #6D772E;
+
+$progressbar-mobile-width: 14px;
+
+@import "cross_dependant_styles";
+
+@mixin pageflow-progress-navigation-bar-small-height {
+  @media screen and (max-height: 870px) {
+    @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;
+  }
+}
+
+.progress_navigation_bar {
+  @include unselectable;
+  color: $nav-color;
+  width: 30px;
+
+  .hint {
+    position: absolute;
+    top: -1000em;
+    left: -1000em;
+    line-height: 0;
+    height: 0;
+    font-size: 0;
+    color: transparent;
+    border: 0 none;
+  }
+
+  .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;
+    }
+  }
+
+  .has_mobile_platform & {
+    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;
+  z-index: 3;
+
+  &:before {
+    content: "";
+    display: block;
+    width: 28px;
+    height: 28px;
+    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;
+    background-position: left top;
+
+    .has_mobile_platform & {
+      display: none;
+    }
+
+    .bigScreen &, .hideText & {
+      display: none;
+    }
+  }
+  .navigation_button_area {
+    width: 0;
+    right: 30px;
+    border-right: 1px solid transparent;
+    position: absolute;
+    height: 100%;
+    @include transition(0.3s ease, overflow 0s);
+    overflow: hidden;
+
+    &:hover {
+      overflow: visible;
+    }
+
+
+    .navigation_bar_buttons {
+      @include transition(opacity 0.15s ease, right 0.3s ease);
+      left:0;
+      opacity: 0;
+      width: 87px;
+      position: absolute;
+
+      @include pageflow-progress-navigation-bar-transparent-background;
+
+      li {
+        height: 11.11%;
+        border-bottom: 1px solid $nav-button-hr;
+
+        &:last-child {
+          border-bottom: 0px solid $nav-button-hr;
+        }
+        position: relative;
+        box-sizing: border-box;
+
+        &.mute {
+          height: 22.22%;
+        }
+
+        > a {
+          height:100%;
+          width: 100%;
+
+          span.button {
+            display: block;
+            margin: -25px auto 0 23px;
+            top: 50%;
+            position: absolute;
+
+            @include pageflow-progress-navigation-bar-small-height {
+              margin: -20px auto 0 23px;
+            }
+          }
+
+          &:hover .navi_hint, &.active .navi_hint {
+            color: $nav-hint-hover-color;
+          }
+        }
+      }
+    }
+  }
+
+  &.with_home_button .navigation_button_area .navigation_bar_buttons {
+
+    li {
+      height: 10%;
+
+      &.mute {
+        height :20%;
+      }
+    }
+  }
+
+  &.focus .navigation_button_area {
+    overflow: visible;
+  }
+
+  &.hover, &:hover, &:focus, &.focus {
+    overflow: visible;
+    width: 122px;
+
+    .has_mobile_platform & {
+      width: 14px;
+    }
+
+    .navigation_button_area {
+      width: 87px;
+
+      .has_mobile_platform & {
+        display: none;
+      }
+
+      .navigation_bar_buttons {
+        overflow: visible;
+        left: 0;
+        opacity: 1;
+        @include transition(opacity 0.2s ease 0.1s);
+
+        main & {
+          @include transition(opacity 0.2s ease 0.5s);
+        }
+      }
+    }
+
+    &:before {
+      opacity: 0;
+      main & {
+          @include transition(opacity 0.7s linear);
+        }
+    }
+  }
+
+  img {
+    border: none;
+  }
+
+  a.navigation_main, a.navigation_top, a.navigation_index {
+    display: none;
+  }
+
+  .navigation_bar_bottom {
+    display: none;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  .scroller:after {
+    content: " ";
+    display: block;
+    height: 150px;
+    @include background-image(linear-gradient(rgba(53, 53, 53, 1) 0, transparent 100%));
+  }
+
+  li {
+    list-style-type: none;
+
+    &[tabindex] {
+      outline: -webkit-focus-ring-color none 0;
+    }
+  }
+
+  a {
+    display: block;
+
+    span {
+      display: block;
+
+      &.hidden {
+        display: inline;
+      }
+    }
+
+    &:active {
+      outline: none;
+    }
+  }
+
+  a {
+    @include hover {
+      + div {
+        visibility: visible;
+      }
+    }
+  }
+
+  a:focus + div, .navigation_menu.focused div {
+    visibility: visible;
+  }
+
+  .navigation_dots a {
+    position: relative;
+    outline: none;
+
+    &:focus:after {
+      content: " ";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: solid 3px #eee;
+    }
+  }
+
+  .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 {
+    opacity: 0.9;
+
+    li:last-child a .button {
+      border-bottom: none;
+    }
+  }
+
+  .navigation_menu {
+    a {
+      -webkit-mask-position-y: -4px !important;
+    }
+  }
+
+  .navigation_menu_box {
+    @include pageflow-progress-navigation-bar-box(0, 87px);
+
+    a {
+      @include hover {
+        -webkit-mask-image: none;
+      }
+    }
+
+    p {
+      margin: 0 0 0.5em;
+    }
+  }
+
+  .navigation_share_box {
+    $size: 28px;
+    width: 210px;
+
+    a {
+      float: left;
+      text-decoration: none;
+      padding: 0 15px 0 15px;
+      width: 39px;
+
+      p {
+        font-size: 9px;
+        color: $nav-color;
+        margin-bottom: 0;
+        text-align: center;
+      }
+
+      .button {
+        width: $size;
+        height: $size;
+        margin: auto;
+      }
+    }
+  }
+
+  .navigation_credits_box {
+    font-size: 1em;
+    min-width: 230px;
+    min-height: 4px;
+    font-family: "sourcesanspro";
+    bottom: 0;
+
+    a {
+      color: #b4c552;
+    }
+
+    a.legal, a.copy {
+      float: left;
+    }
+  }
+
+  .navigation_menu {
+    @include hover {
+      .navigation_menu_box {
+        visibility: visible;
+      }
+    }
+
+    &:focus, &.open {
+      .navigation_menu_box {
+        visibility: visible;
+      }
+    }
+  }
+
+  &.js {
+    position: absolute;
+    bottom: 0;
+
+    & > .navigation_site_detail {
+      margin-top: 0;
+      width: auto;
+    }
+
+    a.scroll_indicator {
+      height: 30px;
+      width: 35px;
+      right: 25px;
+      background-repeat: no-repeat;
+      background-image: image-url('pageflow/scroll_indicator_sprite.png');
+      background-color: transparent;
+      -webkit-mask-image: none;
+      $normal-offset: -14px;
+      $hover-offset: -115px;
+      $pressed-offset: -64px;
+
+      &.top {
+        top: 145px;
+        $top-offset: -13px;
+        background-position: $top-offset $normal-offset;
+
+        @include hover {
+          background-position: $top-offset $hover-offset;
+        }
+
+        @include pressed {
+          background-position: $top-offset $pressed-offset;
+        }
+      }
+
+      &.bottom {
+        z-index: 1;
+        bottom: 234px;
+        $bottom-offset: -161px;
+        background-position: $bottom-offset $normal-offset;
+
+        @include hover {
+          background-position: $bottom-offset $hover-offset;
+        }
+        @include pressed {
+          background-position: $bottom-offset $pressed-offset;
+        }
+      }
+    }
+
+    .navigation_bar_buttons {
+      top: 0;
+      height: 100%;
+
+      a.navigation_main, a.navigation_top, a.navigation_index {
+        display: block;
+      }
+    }
+
+    .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;
+
+
+
+      ul {
+        position: absolute;
+        right: 8px;
+        width: 14px;
+
+        .has_mobile_platform & {
+          right: 3px;
+          width: 8px;
+
+
+        }
+        top: 50%;
+        max-height: 100%;
+        @include transform(translate(0, -50%) !important);
+
+        li {
+          position: relative;
+          box-sizing: border-box;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+
+        a {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
+          background-color: $nav-dot-even;
+          border-bottom: 1px solid $bg-color;
+          box-sizing: border-box;
+
+          &.in_active_chapter {
+            background-color: $nav-active-chapter;
+          }
+
+          &.active {
+            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;
+
+          &.in_active_chapter {
+            background-color: $nav-active-chapter;
+          }
+
+          &.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 {
+          display: block;
+        }
+      }
+    }
+    .no_chapters li.chapter_beginning a, .no_chapters li a.in_active_chapter, .scroller ul.no_chapters li.chapter_beginning a.in_active_chapter {
+      background-color: $nav-dot-even;
+
+      &.active {
+        background-color: $nav-active-page;
+      }
+    }
+
+    .navigation_menu_box {
+      &:before {
+        top: auto;
+        bottom: -2px;
+      }
+    }
+
+    .visible {
+      visibility: visible;
+    }
+
+    .hidden {
+      visibility: hidden;
+    }
+
+    .navigation_volume_box {
+      height: 100%;
+
+      .volume-control {
+        height: 100%;
+
+        &:before, &:after, .volume-level:before {
+          background-image: image-url('pageflow/progress_navigation_bar/volume_control_sprite.png');
+          position: absolute;
+          width: 28px;
+          height: 19px;
+          content: " ";
+          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;
+
+      .volume-slider {
+        width: 5px;
+        height: 60%;
+        background-color: gray;
+        top: 20%;
+        position: absolute;
+        left: 40px;
+
+        @include pageflow-progress-navigation-bar-small-height {
+          top: 10%;
+          height: 80%;
+        }
+      }
+      .volume-level {
+        height: 100%;
+        background-color: #b4c552;
+        bottom: 0;
+        position: absolute;
+
+        &:before {
+          display: block;
+          content: "";
+          background-position: -66px top;
+          top: -9px !important;
+          width: 18px !important;
+          height: 16px !important;
+          left: -6px !important;
+        }
+      }
+    }
+  }
+}
+
+.progress_navigation_bar.header_active {
+  &:before {
+    background-position: right top;
+  }
+}
+
+.navigation_site_detail.progress_navigation h2 {
+  font-size: 1em;
+  line-height: 1.2em;
+  margin: 0;
+
+  > span {
+    display: block;
+  }
+  .chapter_number {
+    font-weight: normal;
+  }
+}