pageflow-outline-navigation-bar 0.1.0

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/menu_items.scss

@@ -0,0 +1,33 @@
+/// Display social share menu
+$outline-navigation-bar-display-share-button: $navigation-display-share-button !default;
+
+/// Display hide text menu button
+$outline-navigation-bar-display-hide-text-button: $navigation-display-hide-text-button !default;
+
+.menu_items {
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 20px;
+  bottom: 0;
+  right: 0;
+  width: 65px;
+
+  .volume {
+    height: 25%;
+    min-height: 100px;
+    max-height: 200px;
+  }
+}
+
+@if not $outline-navigation-bar-display-share-button {
+  .menu_item.share {
+    display: none;
+  }
+}
+
+@if not $outline-navigation-bar-display-hide-text-button {
+  .menu_item.hide_text {
+    display: none;
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/mixins.scss

@@ -0,0 +1,5 @@
+@mixin small-height {
+  @media screen and (max-height: 600px) {
+    @content;
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/mobile_images.scss

@@ -0,0 +1,54 @@
+/// Images to use to for icons in mobile navigation.
+///
+/// Possible values:
+///
+/// - `"default"`: Use images from default theme.
+/// - `"custom"`: Use images from current theme directory.
+///
+/// Custom images have to placed in a `mobile_navigation` directory
+/// inside the theme's image directory.  See images in
+/// `pageflow/themes/default/mobile_navigation` for samples of the
+/// required images.
+$outline-navigation-bar-mobile-images: $mobile-navigation-images !default;
+
+$image-dir: "pageflow/themes/default/mobile_navigation";
+
+@if $outline-navigation-bar-mobile-images == "custom" {
+  $image-dir: "pageflow/themes/#{$theme-name}/mobile_navigation";
+}
+
+.toggle {
+  a {
+    background-position: -45px 0;
+    background-size: auto 100%;
+    display: block;
+    width: 45px;
+    height: 45px;
+
+    &.active {
+      background-position: 0 0;
+    }
+  }
+
+  &.chapters a {
+    background-image: image-url("#{$image-dir}/index_sprite.png");
+  }
+
+  &.credits a {
+    background-image: image-url("#{$image-dir}/imprint_sprite.png");
+  }
+
+  &.share a {
+    @if $navigation-display-share-button {
+      background-image: image-url("#{$image-dir}/sharing_sprite.png");
+    } @else {
+      display: none;
+    }
+  }
+}
+
+.mobile_sharing a {
+  &::before {
+    background-image: image-url("#{$image-dir}/sharing_icons_sprite.png");
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/mobile_panel.scss

@@ -0,0 +1,61 @@
+.mobile_panel {
+  position: absolute;
+
+  .wrapper {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  ul {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    position: absolute;
+    list-style: none;
+  }
+
+  li {
+    position: relative;
+
+    &.touched {
+      &:after {
+        background-position: -38px 0;
+      }
+
+      &:before {
+        content: " ";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background-color: #fff;
+        opacity: 0.2;
+        z-index: 1;
+        pointer-events: none;
+      }
+    }
+  }
+
+  .credits {
+    font-family: "sourcesanspro";
+    padding: 15px;
+    color: #fff;
+
+    a {
+      margin-top: 1em;
+      color: $main-color;
+
+      &:hover {
+        color: white;
+      }
+    }
+
+    > a {
+      display: block;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/mobile_sharing.scss

@@ -0,0 +1,57 @@
+.mobile_sharing {
+  li {
+    > a {
+      display: block;
+      margin-left: 78px;
+      color: white;
+      text-decoration: none;
+      font-size: 24px;
+      padding-top: 12px;
+      border: 0;
+      height: 80px;
+
+      &:before {
+        content: "";
+        position: absolute;
+        width: 42px;
+        height: 37px;
+        background-size: 100% auto;
+        left: 20px;
+        top: 30px;
+      }
+
+      &.facebook:before {
+        background-position: center top;
+      }
+
+      &.twitter:before {
+        background-position: center 122px;
+      }
+
+      &.google:before {
+        background-position: center bottom;
+      }
+    }
+  }
+
+  .sub_share a {
+    color: white;
+    font-family: SourceSansPro;
+    font-size: 13px;
+    text-align: center;
+    background-color: rgba(0, 0, 0, 0.3);
+    text-decoration: none;
+    width: auto;
+    display: block;
+    margin: 0 1em 1em 1em;
+    padding: 1em 0;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.6);
+    }
+  }
+}
+
+.sub_share {
+  display: none;
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/panel.scss

@@ -0,0 +1,19 @@
+.panel {
+  opacity: 0;
+  visibility: hidden;
+  position: absolute;
+  right: 0;
+  width: 100%;
+  bottom: 0;
+  top: 5px;
+  @include transition(opacity 0.2s ease, visibility 0.2s ease);
+
+  @include desktop {
+    top: 60px;
+  }
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/parent_page_button.scss

@@ -0,0 +1,46 @@
+.parent_page {
+  @include background-icon-center($color: #ddd);
+  @include fa-arrow-left-icon;
+  cursor: pointer;
+  pointer-events: all;
+  position: absolute;
+  top: 0;
+  left: -105px;
+  width: 45px;
+  height: 45px;
+  visibility: hidden;
+  display: none;
+  @include transform(translate3d(0, -100px, 0));
+  @include transition(transform 0.4s ease, visibility 0.4s, right 250ms);
+
+  &.is_visible {
+    visibility: visible;
+    @include transform(translate3d(0, 0, 0));
+  }
+
+  @include phone {
+    display: block;
+  }
+
+  @include pad_portrait {
+    display: block;
+  }
+
+  &:before {
+    z-index: 2;
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 6px;
+    left: 6px;
+    width: 34px;
+    height: 34px;
+    border-radius: 17px;
+    background-color: rgba(53, 53, 53, 0.9);
+    @include box-shadow(0 0 7px #ccc);
+    z-index: 1;
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/prevent_focus_rect_on_pointer_down.scss

@@ -0,0 +1,4 @@
+[tabindex]:active,
+a:active {
+  outline: none;
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/scroller.scss

@@ -0,0 +1,93 @@
+.chapters_panel {
+  overflow: hidden;
+
+  .scroller {
+    position: absolute;
+    overflow: hidden;
+    top: 0;
+    bottom: 5px;
+    width: 100%;
+
+    &.animated {
+      @include transition(top 0.5s ease);
+    }
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: absolute;
+
+    @include mobile {
+      width: 100%;
+    }
+  }
+
+  li {
+    margin-left: 6px;
+    padding-bottom: 2px;
+  }
+
+  a {
+    display: block;
+    padding: 0 12px 0 6px;
+
+    text-decoration: none;
+    color: $basic-text-color;
+    font-weight: normal;
+    font-size: 17px;
+    line-height: 20px;
+    border-left: solid 6px rgba(255, 255, 255, 0.3);
+    white-space: nowrap;
+
+    height: 10px;
+    @include transition(height 0.5s ease);
+  }
+
+  span {
+    padding: 10px 0;
+    display: block;
+  }
+
+  a.in_active_chapter {
+    color: $outline-navigation-bar-active-chapter-color;
+    border-left: solid 6px $outline-navigation-bar-active-chapter-color;
+  }
+}
+
+&.fixed {
+  .chapters_panel {
+    li {
+      margin-left: 3px;
+    }
+
+    a {
+      border-left-width: 2px;
+      padding: 0 10px 0 6px;
+    }
+  }
+}
+
+&.expandable {
+  .chapters_panel {
+    span {
+      opacity: 0;
+    }
+  }
+}
+
+&.fixed,
+&.expanded {
+  .chapters_panel {
+    a {
+      height: 40px !important;
+    }
+
+    span {
+      opacity: 1;
+      @include transition(opacity 0.5s ease);
+      @include transition-delay(0.3s);
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/share_box.scss

@@ -0,0 +1,20 @@
+.share_box {
+  top: 0;
+  width: 210px;
+
+  a {
+    float: left;
+    text-decoration: none;
+    width: 70px;
+  }
+
+  p {
+    font-size: 9px;
+    margin: 0;
+  }
+
+  .menu_item {
+    padding: 0 10px;
+    min-height: 0;
+  }
+}

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default/toggle.scss

@@ -0,0 +1,73 @@
+.toggle {
+  height: 45px;
+  position: absolute;
+
+  &.share,
+  &.credits {
+    opacity: 0;
+    visibility: hidden;
+    @include transition(opacity 0.5s ease, visibility 0.5s ease);
+  }
+
+  &.share {
+    top: 80px;
+  }
+
+  &.credits {
+    bottom: 10px;
+  }
+
+  &.mobile_only {
+    display: none;
+    left: -55px;
+
+    .has_mobile_platform & {
+      display: block;
+    }
+
+    @include mobile {
+      display: block;
+    }
+  }
+
+  &.desktop_only {
+    right: 15px;
+
+    .has_mobile_platform & {
+      display: none;
+    }
+
+    @include mobile {
+      display: none;
+    }
+  }
+
+  .button {
+    position: relative;
+  }
+}
+
+&.fixed .toggle,
+&.buttons_active .toggle {
+  &.buttons {
+    right: 10px;
+  }
+}
+
+&.expanded .toggle {
+  &.share,
+  &.credits {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+&.expandable {
+  .toggle.desktop_only {
+    @include menu-item-shadow;
+  }
+
+  &.expanded .toggle.desktop_only {
+    @include menu-item-shadow-off;
+  }
+}