pageflow 0.10.0 → 0.11.0

data/app/assets/stylesheets/pageflow/themes/default/navigation/credits.scss

@@ -0,0 +1,7 @@
+/// Color of links in credits text.
+$navigation-credits-link-color: $main-color !default;
+
+.navigation_credits_box a {
+  @extend %anchor;
+  color: $navigation-credits-link-color;
+}

data/app/assets/stylesheets/pageflow/themes/default/navigation/dimensions.scss

@@ -0,0 +1,87 @@
+/// Vertical position of upper buttons.
+$navigation-bar-padding-top: null !default;
+
+$top-height: 44px;
+$item-height: 44px;
+$bottom-height: 268px;
+
+$scroll-indicator-height: 30px;
+$scroll-indicator-offset: 35px;
+
+@if $navigation-display-header-button {
+  $top-height: $top-height + $item-height;
+} @else {
+  .menu_li {
+    display: none;
+  }
+}
+
+@if not $navigation-display-share-button and
+    not $navigation-display-hide-text-button {
+  $bottom-height: 196px;
+} @elseif not $navigation-display-share-button or
+    not $navigation-display-hide-text-button{
+  $bottom-height: 232px;
+}
+
+@if not $navigation-display-share-button {
+  .navigation_menu.share {
+    display: none;
+  }
+}
+
+@if not $navigation-display-hide-text-button {
+  .hide_text {
+    display: none;
+  }
+}
+
+&.js {
+  .navigation_bar_top {
+    top: 0;
+    box-sizing: border-box;
+    padding-top: $navigation-bar-padding-top;
+  }
+
+  .navigation_bar_bottom {
+    bottom: 0;
+    height: $bottom-height;
+  }
+
+  .scroller {
+    bottom: $bottom-height;
+  }
+
+  .scroll_indicator {
+    height: $scroll-indicator-height;
+
+    &.bottom {
+      bottom: $bottom-height - $scroll-indicator-offset;
+    }
+  }
+
+  @mixin top_positions($top-height) {
+    .navigation_bar_top {
+      height: $top-height + $item-height;
+    }
+
+    .scroller {
+      top: $top-height + $item-height;
+    }
+
+    .scroll_indicator.top {
+      top: $top-height + $item-height - $scroll-indicator-offset;
+    }
+  }
+
+  @include top_positions($top-height);
+
+  &.with_home_button,
+  &.with_overview_button {
+    @include top_positions($top-height + $item-height);
+  }
+
+  &.with_home_button.with_overview_button {
+    @include top_positions($top-height + 2 * $item-height);
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/navigation/icons/icon_font.scss

@@ -0,0 +1,232 @@
+@mixin navigation-icons-icon-font(
+  $button-background-color,
+  $active-button-background-color,
+
+  $button-icon-color,
+  $active-button-icon-color,
+  $deactivated-button-icon-color,
+
+  $scroll-indicator-color: #888,
+
+  $share-icon-color: #fff,
+  $active-share-icon-color: $main-color
+) {
+
+  .navigation_bullet,
+  .navigation_menu > a {
+    font-size: 16px;
+    width: 28px;
+    height: 28px;
+    display: block;
+    background-color: $button-background-color !important;
+    color: $button-icon-color;
+    box-shadow: 1px 2px 1px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 18px;
+    cursor: pointer;
+    margin: 13px 28px;
+    position: relative;
+
+    &:hover,
+    &.active {
+      background-color: $active-button-background-color !important;
+      -webkit-mask-image: none;
+
+      .button,
+      .navigation_mute,
+      .navigation_share {
+        color: $active-button-icon-color;
+        text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2);
+      }
+    }
+
+    &:active {
+      box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
+      @include transform(translate(1px, 1px));
+    }
+
+    &.deactivated {
+      .button {
+        color: $deactivated-button-icon-color;
+      }
+    }
+  }
+
+  .button,
+  .navigation_mute,
+  .navigation_share {
+    font-family: "FontAwesome";
+    font-size: 1em;
+    text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.6);
+    margin: 1px auto 0 auto !important;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+    line-height: 28px;
+  }
+
+  .navigation_bullet.navigation_main {
+    padding-top: 0;
+
+    .button {
+      @include fa-bars-icon;
+    }
+  }
+
+  .navigation_bullet.navigation_top {
+    padding-top: 0;
+
+    .button {
+      font-weight: bold;
+      @include fa-arrow-circle-up-icon;
+    }
+  }
+
+  .navigation_bullet.navigation_home {
+    padding-top: 0;
+
+    .button {
+      font-weight: bold;
+      @include fa-home-icon;
+    }
+  }
+
+  .navigation_bullet.navigation_index {
+    .button {
+      @include fa-th-icon;
+    }
+  }
+
+  &.js {
+    .navigation_bar_bottom li.fullscreen {
+      height: auto;
+    }
+
+    .scroll_indicator {
+      @include background-icon-center($font-size: 25px, $color: $scroll-indicator-color);
+      font-weight: bold;
+      position: absolute;
+
+      &.top {
+        @include fa-angle-up-icon;
+      }
+
+      &.bottom {
+        @include fa-angle-down-icon;
+      }
+    }
+  }
+
+  .navigation_bullet.navigation_fullscreen {
+    .button {
+      font-weight: bold;
+      @include fa-expand-icon;
+    }
+  }
+
+  .navigation_bullet.navigation_hide_text {
+    .button {
+      font-weight: bold;
+      @include fa-photo-icon;
+    }
+  }
+
+  .navigation_menu {
+    .navigation_mute {
+      font-weight: bold;
+      @include fa-volume-up-icon;
+
+      &.muted {
+        @include fa-volume-off-icon;
+      }
+
+      &.muted:before {
+        margin-right: 2px;
+      }
+    }
+  }
+
+  .navigation_menu {
+    .navigation_share {
+      font-weight: bold;
+      @include fa-share-icon;
+
+      &:before {
+        margin-left: 1px;
+      }
+    }
+  }
+
+  .navigation_menu {
+    .navigation_credits {
+      font-weight: bold;
+      @include fa-info-icon;
+    }
+  }
+
+  .navigation_share_box {
+    a {
+      text-align: center;
+
+      p {
+        font-family: SourceSansPro;
+        font-size: 12px;
+      }
+    }
+
+    .share_google,
+    .share_facebook,
+    .share_twitter {
+      font-size: 1.5em;
+
+      &:before {
+        font-family: "FontAwesome";
+        color: $share-icon-color;
+        text-shadow: none;
+      }
+    }
+
+    a:hover {
+      p {
+        color: $active-share-icon-color;
+      }
+
+      .share_google,
+      .share_facebook,
+      .share_twitter {
+        &:before {
+          color: $active-share-icon-color;
+        }
+      }
+    }
+
+    .share_google {
+      @include fa-google-plus-icon;
+    }
+
+    .share_facebook {
+      @include fa-facebook-icon;
+    }
+
+    .share_twitter {
+      @include fa-twitter-icon;
+    }
+  }
+
+  .volume-control {
+    @include background-icon-left(
+      $left: -21px,
+      $top: 2px,
+      $color: $button-background-color
+    );
+    @include fa-volume-down-icon;
+  }
+
+  .volume-slider {
+    @include background-icon-right(
+      $right: -25px,
+      $top: -7px,
+      $color: $button-background-color
+    );
+    @include fa-volume-up-icon;
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/navigation/icons/sprite.scss

@@ -0,0 +1,124 @@
+@mixin navigation-icons-sprite($use-fullscreen-exit-icon: false) {
+  .button,
+  .navigation_mute {
+    @extend %pageflow_sprite_icon;
+    height: 42px;
+    width: 42px;
+  }
+
+  .navigation_share_box a .button {
+    height: 42px;
+  }
+
+  .scroll_indicator {
+    @extend %pageflow_sprite_icon;
+    width: 45px;
+    right: 20px;
+  }
+
+  .scroll_indicator.top {
+    @include pageflow-sprite-icon-arrow-up($offset: -5px);
+  }
+
+  .scroll_indicator.bottom {
+    @include pageflow-sprite-icon-arrow-down($offset: -5px);
+  }
+
+  .navigation_main .button {
+    @include pageflow-sprite-icon-menu;
+  }
+
+  .navigation_main.active .button {
+    @include pageflow-sprite-icon-close-header();
+  }
+
+  .navigation_home .button {
+    @include pageflow-sprite-icon-home;
+  }
+
+  .navigation_top .button {
+    @include pageflow-sprite-icon-top;
+  }
+
+  .navigation_top.deactivated .button {
+    @include pageflow-sprite-icon-top("disabled");
+  }
+
+  .navigation_index .button {
+    @include pageflow-sprite-icon-overview;
+  }
+
+  .navigation_index.active .button {
+    @include pageflow-sprite-icon-overview("active");
+  }
+
+  .navigation_fullscreen .button {
+    @include pageflow-sprite-icon-fullscreen;
+  }
+
+  .navigation_fullscreen.active .button {
+    @if ($use-fullscreen-exit-icon) {
+      @include pageflow-sprite-icon-fullscreen-exit;
+    } @else {
+      @include pageflow-sprite-icon-fullscreen("active");
+    }
+  }
+
+  .navigation_hide_text .button {
+    @include pageflow-sprite-icon-hide-text;
+  }
+
+  .navigation_hide_text.active .button {
+    @include pageflow-sprite-icon-hide-text("active");
+  }
+
+  .navigation_mute {
+    @include pageflow-sprite-icon-mute;
+  }
+
+  .navigation_mute.muted {
+    @include pageflow-sprite-icon-muted;
+  }
+
+  .navigation_share {
+    @include pageflow-sprite-icon-share;
+  }
+
+  .navigation_credits.button {
+    @include pageflow-sprite-icon-credits;
+  }
+
+  .share_google {
+    @include pageflow-sprite-icon-google($offset: -5px);
+  }
+
+  .share_twitter {
+    @include pageflow-sprite-icon-twitter($offset: -5px);
+  }
+
+  .share_facebook {
+    @include pageflow-sprite-icon-facebook($offset: -5px);
+  }
+
+  .volume-control {
+    &:before,
+    &:after {
+      @extend %pageflow_sprite_icon;
+      content: "";
+      position: absolute;
+      width: 27px;
+      height: 27px;
+      top: 3px;
+    }
+
+    &:before {
+      @include pageflow-sprite-icon-volume-down;
+      left: 5px;
+    }
+
+    &:after {
+      @include pageflow-sprite-icon-volume-up;
+      right: 5px;
+    }
+  }
+}