pageflow 0.10.0 → 0.11.0

data/app/assets/stylesheets/pageflow/themes/default/logo.scss

@@ -0,0 +1,54 @@
+////
+/// @group logo
+////
+
+/// Variant of logo to display:
+///
+/// - `"first-page"`: Background image on first page.
+///
+/// - `"all-pages"`: Background image on all pages.
+///
+/// - `"watermark"`: Use `.header_logo` element as logo.
+$logo-variant: "first-page" !default;
+
+/// Top position of logo.
+$logo-top: 30px !default;
+
+/// Width of the logo. (Watermark variant only)
+$logo-width: 100px !default;
+
+/// Width of the logo in percent. (Non-watermark variants only)
+$logo-relative-width: 13% !default;
+
+/// Min Width of the logo. (Non-watermark variants only)
+$logo-min-width: 100px !default;
+
+/// Max Width of the logo. (Non-watermark variants only)
+$logo-max-width: 221px !default;
+
+/// Height of the logo.
+$logo-height: 50px !default;
+
+/// Height of the logo in phone layout. (Watermark variant only)
+$logo-phone-height: 24px !default;
+
+@import "./logo/variant/background_image";
+@import "./logo/variant/watermark";
+
+@if $logo-variant == "watermark" {
+  @include logo-variant-watermark(
+    $top: $logo-top,
+    $width: $logo-width,
+    $height: $logo-height,
+    $phone-height: $logo-phone-height
+  );
+} @else {
+  @include logo-variant-background-image(
+    $first-page-only: ($logo-variant == "first-page"),
+    $top: $logo-top,
+    $min-width: $logo-min-width,
+    $max-width: $logo-max-width,
+    $width: $logo-relative-width,
+    $height: $logo-height
+  );
+}

data/app/assets/stylesheets/pageflow/themes/default/logo/variant/background_image.scss

@@ -0,0 +1,37 @@
+@mixin logo-variant-background-image(
+  $first-page-only,
+  $top,
+  $min-width,
+  $max-width,
+  $width,
+  $height
+) {
+  $page-selector: if($first-page-only, ":first-child", "");
+
+  .js .page#{$page-selector} {
+    .content_and_background .scroller > div:after {
+      content: "";
+      position: absolute;
+      left: 8%;
+      top: $top;
+      z-index: 200;
+      min-width: $min-width;
+      max-width: $max-width;
+      width: $width;
+      height: $height;
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.png");
+      background-repeat: no-repeat;
+      background-size: contain;
+      background-position: left top;
+
+      @include mobile {
+        padding-top: 1%;
+        height: 35px;
+      }
+    }
+
+    &.invert .content_and_background .scroller > div:after {
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.png");
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/logo/variant/watermark.scss

@@ -0,0 +1,90 @@
+/// Fade in logo when scroller is near top
+///
+/// - `"first-page"`: only on first page
+///
+/// - `"all-pages"`: on all pages
+$logo-watermark-variant-fade-in-near-top: "first-page" !default;
+
+@mixin logo-variant-watermark(
+  $top,
+  $width,
+  $height,
+  $phone-height
+) {
+  .header_logo {
+    @extend %pageflow_widget_margin_top !optional;
+    display: none;
+
+    @include hide-text;
+    position: absolute;
+    width: $width;
+    height: $height;
+    top: $top;
+    left: 8%;
+    z-index: 1;
+
+    pointer-events: none;
+    opacity: 0.3;
+    @include transition(opacity 500ms);
+
+    @include phone {
+      width: $phone-height * $width / $height;
+      height: $phone-height;
+      top: 21px;
+    }
+
+    .js & {
+      display: block;
+    }
+
+    &:after,
+    &:before {
+      background-repeat: no-repeat;
+      background-size: 100% auto;
+      content: "";
+      width: 100%;
+      height: 100%;
+      display: block;
+      position: absolute;
+      top: 0;
+      pointer-events: none;
+      @include transition(opacity 500ms);
+    }
+
+    &:before {
+      opacity: 1;
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.png");
+    }
+
+    &:after {
+      opacity: 0;
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.png");
+    }
+  }
+
+  .header.invert .header_logo:before {
+    opacity: 0;
+  }
+
+  .header.invert .header_logo:after {
+    opacity: 1;
+  }
+
+  .header.near_top .header_logo {
+    pointer-events: all;
+  }
+
+  @if $logo-watermark-variant-fade-in-near-top == "first-page" {
+    .header.near_top.first_page .header_logo {
+      opacity: 1;
+    }
+  } @else {
+    .header.near_top .header_logo {
+      opacity: 1;
+    }
+  }
+
+  .header.near_top .header_logo:hover {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,30 @@
+////
+/// @group indicators
+////
+
+/// Typography of indicators.
+$indicator-typography: () !default;
+
+/// Typography of indicators on phone.
+$indicator-phone-typography: () !default;
+
+@mixin indicator-typography {
+  @include standard-typography(
+    $indicator-typography,
+    (
+      font-size: 0.92em,
+      letter-spacing: 0.2em,
+      text-transform: uppercase,
+    )
+  );
+
+  @include phone {
+    @include standard-typography(
+      $indicator-phone-typography,
+      (
+        font-size: 0.8em,
+        letter-spacing: 0.1em,
+      )
+    );
+  }
+}

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

@@ -0,0 +1,87 @@
+/// Use pressed state instead of hover state as acitve state.
+$sprite-icon-active-as-pressed: false !default;
+
+%pageflow_sprite_icon {
+  background-image: image-url("pageflow/themes/#{$theme-name}/icon_sprite.png");
+}
+
+@mixin pageflow-sprite-icon($left, $mode: "normal", $offset: 0, $target: "&") {
+  $normal-top: $offset - 30px;
+  $hover-top: $offset - 85px;
+  $pressed-top: $offset - 140px;
+  $deactivated-top: $offset - 195px;
+
+  @if $mode == "active" {
+    $active-top: $hover-top;
+
+    @if $sprite-icon-active-as-pressed {
+      $active-top: $pressed-top;
+    }
+
+    #{$target} {
+      background-position: $left $active-top;
+    }
+
+    @include hover {
+      #{$target} {
+        background-position: $left $active-top;
+      }
+    }
+  } @else if $mode == "disabled" {
+    #{$target} {
+      background-position: $left $deactivated-top;
+    }
+
+    @include hover {
+      #{$target} {
+        background-position: $left $deactivated-top;
+      }
+    }
+  } @else {
+    #{$target} {
+      background-position: $left $normal-top;
+    }
+
+    @include hover {
+      #{$target} {
+        background-position: $left $hover-top;
+      }
+    }
+
+    @include pressed {
+      #{$target} {
+        background-position: $left $pressed-top;
+      }
+    }
+  }
+}
+
+@mixin pageflow-sprite-icon-menu($args...) { @include pageflow-sprite-icon(-22px, $args...); }
+@mixin pageflow-sprite-icon-close-header($args...) { @include pageflow-sprite-icon(-89px, $args...); }
+@mixin pageflow-sprite-icon-home($args...) { @include pageflow-sprite-icon(-155px, $args...); }
+@mixin pageflow-sprite-icon-top($args...) { @include pageflow-sprite-icon(-909px, $args...); }
+@mixin pageflow-sprite-icon-overview($args...) { @include pageflow-sprite-icon(-222px, $args...); }
+@mixin pageflow-sprite-icon-fullscreen($args...) { @include pageflow-sprite-icon(-289px, $args...); }
+@mixin pageflow-sprite-icon-fullscreen-exit($args...) { @include pageflow-sprite-icon(-1010px, $args...); }
+@mixin pageflow-sprite-icon-hide-text($args...) { @include pageflow-sprite-icon(-670px, $args...); }
+@mixin pageflow-sprite-icon-credits($args...) { @include pageflow-sprite-icon(-622px, $args...); }
+@mixin pageflow-sprite-icon-mute($args...) { @include pageflow-sprite-icon(-355px, $args...); }
+@mixin pageflow-sprite-icon-muted($args...) { @include pageflow-sprite-icon(-489px, $args...); }
+@mixin pageflow-sprite-icon-share($args...) { @include pageflow-sprite-icon(-555px, $args...); }
+@mixin pageflow-sprite-icon-twitter($args...) { @include pageflow-sprite-icon(-789px, $args...); }
+@mixin pageflow-sprite-icon-facebook($args...) { @include pageflow-sprite-icon(-718px, $args...); }
+@mixin pageflow-sprite-icon-google($args...) { @include pageflow-sprite-icon(-855px, $args...); }
+@mixin pageflow-sprite-icon-arrow-right($args...) { @include pageflow-sprite-icon(-1472px, $args...); }
+@mixin pageflow-sprite-icon-arrow-up($args...) { @include pageflow-sprite-icon(-1406px, $args...); }
+@mixin pageflow-sprite-icon-arrow-left($args...) { @include pageflow-sprite-icon(-1340px, $args...); }
+@mixin pageflow-sprite-icon-arrow-down($args...) { @include pageflow-sprite-icon(-1274px, $args...); }
+@mixin pageflow-sprite-icon-arrow-down-invert($args...) { @include pageflow-sprite-icon(-1208px, $args...); }
+@mixin pageflow-sprite-icon-close($args...) { @include pageflow-sprite-icon(-1538px, $args...); }
+
+@mixin pageflow-sprite-icon-volume-down {
+  background-position: -495px -200px;
+}
+
+@mixin pageflow-sprite-icon-volume-up {
+  background-position: -361px -200px;
+}

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

@@ -0,0 +1,7 @@
+@mixin standard-typography($overrides, $properties: ()) {
+  @include typography($overrides, map-merge($standard-typography, $properties));
+}
+
+@mixin typography($overrides, $properties: ()) {
+  @include map-to-css(map-merge($properties, $overrides));
+}

data/app/assets/stylesheets/pageflow/themes/default/mobile_navigation.scss

@@ -0,0 +1,104 @@
+////
+/// @group navigation_mobile
+////
+
+/// Base typography for widget.
+$mobile-navigation-typography: () !default;
+
+/// 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.
+$mobile-navigation-images: "default" !default;
+
+/// Background color of the panels.
+$mobile-navigation-background-color: #232323 !default;
+
+/// Color of the credits text.
+$mobile-navigation-credits-text-color: #808080 !default;
+
+/// Color of links in credits text.
+$mobile-navigation-credits-link-color: $main-color !default;
+
+/// Color of share links.
+$mobile-navigation-share-link-color: #fff !default;
+
+/// Color of the border that is displayed on the left side of the
+/// current page.
+$mobile-navigation-current-page-marker-color: $main-color !default;
+
+// Pictogram visibility.
+$mobile-navigation-pictogram-visibility: $standard-page-pictogram-visibility !default;
+
+.navigation_mobile {
+  $image-dir: "pageflow/themes/default/mobile_navigation";
+
+  @if $mobile-navigation-images == "custom" {
+    $image-dir: "pageflow/themes/#{$theme-name}/mobile_navigation";
+  }
+
+  @include standard-typography($mobile-navigation-typography);
+
+  .menu {
+    &.index {
+      background-image: image-url("#{$image-dir}/index_sprite.png");
+    }
+
+    &.imprint {
+      background-image: image-url("#{$image-dir}/imprint_sprite.png");
+    }
+
+    &.sharing {
+      @if $navigation-display-share-button {
+        background-image: image-url("#{$image-dir}/sharing_sprite.png");
+      } @else {
+        display: none;
+      }
+    }
+  }
+
+  .wrapper {
+    a.active {
+      border-left: solid 5px $mobile-navigation-current-page-marker-color;
+    }
+
+    .credits {
+      color: $mobile-navigation-credits-text-color;
+    }
+  }
+
+  .overview_mobile,
+  .imprint_mobile,
+  .sharing_mobile {
+    background-color: $mobile-navigation-background-color;
+
+    a {
+      color: $mobile-navigation-credits-link-color;
+    }
+  }
+
+  .overview_mobile {
+    li:after {
+      visibility: $mobile-navigation-pictogram-visibility;
+    }
+  }
+
+  .imprint_mobile a {
+    @extend %anchor;
+  }
+
+  .sharing_mobile a {
+    color: $mobile-navigation-share-link-color;
+
+    &::before {
+      background-image: image-url("#{$image-dir}/sharing_icons_sprite.png");
+    }
+  }
+}

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

@@ -0,0 +1,102 @@
+////
+/// @group default-navigation-bar
+////
+
+/// Type of icons to use:
+///
+/// - `"icon-font"`: Circular buttons with font awesome icons.
+///
+/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
+///   directory.
+$navigation-icons: $widget-icons !default;
+
+/// @see $default-widget-icon-font-options
+$navigation-icon-font-options: () !default;
+
+/// Possible options:
+///
+/// - `use-fullscreen-exit-icon`: Use fullscreen exit icon for active
+///   fullscreen button. By default the active state of the fullscreen
+///   icon is used.
+$navigation-sprite-options: () !default;
+
+/// Display button to toggle header
+$navigation-display-header-button: false !default;
+
+/// Display social share menu.
+$navigation-display-share-button: true !default;
+
+/// Display button to hide the content text.
+$navigation-display-hide-text-button: true !default;
+
+/// Default background color for widget.
+$navigation-background-color: $widget-background-color !default;
+
+/// Background tile image to display on bar and menu boxes.
+$navigation-background-image: null !default;
+
+/// Default text color for widget.
+$navigation-text-color: $widget-text-color !default;
+
+/// Background color of the navigation bar.
+$navigation-bar-background-color: $navigation-background-color !default;
+
+/// Transparency of navigation bar.
+$navigation-opacity: 0.9 !default;
+
+/// Color used to highlight the current page.
+$navigation-current-page-marker-color: $main-color !default;
+
+@import "./navigation/widget_margin";
+
+.navigation {
+  @import "./navigation/dimensions";
+  @import "./navigation/icons/icon_font";
+  @import "./navigation/icons/sprite";
+  @import "./navigation/menu_boxes";
+  @import "./navigation/share_box";
+  @import "./navigation/credits";
+  @import "./navigation/separator_lines";
+  @import "./navigation/volume_control";
+  @import "./navigation/typography";
+
+  @if $navigation-icons == "sprite" {
+    @include navigation-icons-sprite(
+      $navigation-sprite-options...
+    );
+  } @else {
+    @include navigation-icons-icon-font(
+      widget-icon-font-options($navigation-icon-font-options)...
+    );
+  }
+
+  a {
+    color: $navigation-text-color;
+  }
+
+  .navigation_top.deactivated {
+    pointer-events: none;
+  }
+}
+
+.navigation.js .scroller ul a.active img, .navigation_mobile .wrapper a.active {
+  border-left: 5px solid $navigation-current-page-marker-color;
+}
+
+.navigation .scroller a:after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.navigation .navigation_bar_top,
+.navigation.js .scroller:after,
+.navigation .navigation_bar_bottom,
+.navigation .scroller a:after {
+  background-color: $navigation-bar-background-color;
+  background-image: $navigation-background-image;
+}