pageflow 0.10.0 → 0.11.0

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

@@ -0,0 +1,99 @@
+////
+/// @group default-navigation-bar
+////
+
+/// Background color of page detail and menu boxes
+$navigation-menu-box-background-color: $navigation-background-color !default;
+
+/// Text color of page detail and menu boxes
+$navigation-menu-box-text-color: #fff !default;
+
+/// Transparency of page detail and menu boxes
+$navigation-menu-box-opacity: $navigation-opacity !default;
+
+/// Style of navigation menu boxes.
+///
+/// - `"triangle"`: Box without border and small triangle arrow at the right side
+///
+/// - `"border"`: Box with a border
+$navigation-menu-box-style: "triangle" !default;
+
+/// Width of border if `$navigation-menu-box-style` is `"border"`.
+$navigation-menu-box-border-width: 2px !default;
+
+/// Color of border if `$navigation-menu-box-style` is `"border"`.
+$navigation-menu-box-border-color: #9c9c9c !default;
+
+// Pictogram visibility.
+$navigation-menu-box-pictogram-visibility: $standard-page-pictogram-visibility !default;
+
+.navigation_site_detail,
+.navigation_menu_box {
+  color: $navigation-menu-box-text-color;
+  background-color: $navigation-menu-box-background-color;
+  background-image: $navigation-background-image;
+
+  @if $navigation-menu-box-style == "border" {
+    right: 90px;
+    border: $navigation-menu-box-border-width solid $navigation-menu-box-border-color;
+  } @else {
+    right: 94px;
+
+    &:before {
+      content: "";
+      display: block;
+      position: absolute;
+      left: 100%;
+      @include triangle(16px, $navigation-menu-box-background-color, right);
+    }
+  }
+
+  // Ensure element remains hovered even when cursor moves between
+  // navigation bar and menu box.
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 100%;
+    width: 10px;
+    height: 40px;
+  }
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid $navigation-menu-box-text-color;
+  }
+}
+
+.navigation_site_detail {
+  .thumbnail {
+    @if $navigation-menu-box-pictogram-visibility == visible {
+      @extend %pageflow_page_type_thumbnail;
+    }
+
+    position: relative;
+    width: 170px;
+    height: 95px;
+    margin-top: 12px;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 28px;
+      left: 66px;
+      width: 38px;
+      height: 38px;
+      background-size: 76px 38px;
+      background-repeat: no-repeat;
+    }
+  }
+
+  &:before {
+    top: 18px;
+  }
+}
+
+.navigation_menu_box:before {
+  bottom: 8px;
+}

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

@@ -0,0 +1,21 @@
+////
+/// @group default-navigation-bar
+////
+
+/// Width of the line drawn between navigation bar buttons
+$navigation-separator-line-width: 0 !default;
+
+/// Color of line drawn between navigation bar buttons
+$navigation-separator-line-color: #9c9c9c !default;
+
+.navigation_bg,
+.navigation_bullet .button {
+  border-bottom: $navigation-separator-line-width solid $navigation-separator-line-color;
+}
+
+.navigation_bar_top,
+.navigation_bar_bottom {
+  li:last-child .button {
+    border-bottom: none;
+  }
+}

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

@@ -0,0 +1,28 @@
+.navigation_share_box {
+  width: 210px;
+  padding: 7px 15px 15px 15px;
+
+  a {
+    float: left;
+    position: relative;
+    text-decoration: none;
+    padding: 0 15px 0 15px;
+    width: 39px;
+  }
+
+  p {
+    position: absolute;
+    left: 0;
+    bottom: -10px;
+    width: 100%;
+    font-size: 13px;
+    text-align: center;
+  }
+
+  .button {
+    display: block;
+    width: 28px;
+    height: 42px;
+    margin: auto;
+  }
+}

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

@@ -0,0 +1,40 @@
+$navigation-page-title-typography: () !default;
+
+$navigation-share-box-typography: () !default;
+
+$navigation-credits-box-typography: () !default;
+
+$navigation-credits-box-text-typography: () !default;
+
+.navigation_site_detail {
+  @include standard-typography(
+    $navigation-page-title-typography,
+    (
+      font-size: 1em,
+      line-height: 1.1em
+    )
+  );
+}
+
+.navigation_share_box {
+  @include standard-typography(
+    $navigation-share-box-typography,
+    ()
+  );
+}
+
+.navigation_credits_box {
+  @include standard-typography(
+    $navigation-credits-box-typography,
+    (
+      line-height: 1.5em
+    )
+  );
+
+  p {
+    @include standard-typography(
+      $navigation-credits-box-text-typography,
+      ()
+    );
+  }
+}

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

@@ -0,0 +1,17 @@
+////
+/// @group default-navigation-bar
+////
+
+/// Background color of the volume control.
+$navigation-volume-control-color: #aaa !default;
+
+/// Background color of the level in the volume control.
+$navigation-volume-level-color: $main-color !default;
+
+.volume-control {
+  background-color: $navigation-volume-control-color;
+}
+
+.volume-level {
+  background-color: $navigation-volume-level-color;
+}

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

@@ -0,0 +1,19 @@
+@include pageflow-widget-margin("default_navigation", "right") {
+  @include desktop {
+    margin-right: 85px;
+  }
+
+  @include pad_portrait {
+    margin-right: 0;
+  }
+}
+
+@include pageflow-widget-margin("default_navigation", "right_max") {
+  @include desktop {
+    margin-right: 85px;
+  }
+
+  @include pad_portrait {
+    margin-right: 0;
+  }
+}

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

@@ -0,0 +1,43 @@
+////
+/// @group overview
+////
+
+/// Type of icons to use:
+///
+/// - `"icon-font"`: Circular buttons with font awesome icons.
+///
+/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
+///   directory.
+$overview-icons: $standard-icons !default;
+
+/// @see $default-widget-icon-font-options
+$overview-icon-font-options: () !default;
+
+.overview {
+  @import "./overview/icons/icon_font";
+  @import "./overview/icons/sprite";
+  @import "./overview/chapter_border_images";
+  @import "./overview/typography";
+  @import "./overview/colors";
+  @import "./overview/chapter_numbers";
+
+  @if $overview-icons == "sprite" {
+    @include overview-icons-sprite;
+  } @else {
+    @include overview-icons-icon-font(
+      widget-icon-font-options($overview-icon-font-options)...
+    );
+  }
+
+  .button {
+    display: block;
+  }
+
+  .close .label {
+    position: absolute;
+    margin-right: 130%;
+    text-align: right;
+    width: 500%;
+    right: 0;
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/overview/chapter_border_images.scss

@@ -0,0 +1,70 @@
+////
+/// @group overview
+////
+
+/// Images to use to draw outline of chapter columns.
+///
+/// Possible values:
+///
+/// - `"default"`: Use images from default theme.
+/// - `"none"`: Do not use background images.
+/// - `"custom"`: Use images from current theme directory.
+///
+/// Custom border images have to placed in a
+/// `overview_chapter_borders` directory inside the theme's image
+/// directory. Five images have to be supplied:
+///
+/// - `top.png` (width: 265pxm height: 10px): Used as the upper border
+///   of each column.
+///
+/// - `bottom.png` (width: 265px, height 10px): Used as the lower
+///   border of each column.
+///
+/// - `start.png` (width: 265px, height: 10px): Used as the upper
+///   border of the first column.
+///
+/// - `end.png` (width: 265px, height: 10px): Used as the lower border
+///   of the last column.
+///
+/// - `tile.png` (width: 265px): Repeated in the background of each
+///    column to draw the left and right borders.
+///
+/// @see $overview-chapter-background-color
+$overview-chapter-border-images: "default" !default;
+
+/// Opacity of the border images.
+$overview-chapter-border-opacity: 1 !default;
+
+@if $overview-chapter-border-images != "none" {
+  .ov_chapter {
+    $dir: "pageflow/themes/default/overview_chapter_borders";
+
+    @if $overview-chapter-border-images == "custom" {
+      $dir: "pageflow/themes/#{$theme-name}/overview_chapter_borders";
+    }
+
+    background-image: image-url("#{$dir}/tile.png");
+    background-repeat: repeat-y;
+
+    &:before,
+    &:after {
+      opacity: $overview-chapter-border-opacity;
+    }
+
+    &:before {
+      background-image: image-url("#{$dir}/top.png");
+    }
+
+    &:after {
+      background-image: image-url("#{$dir}/bottom.png");
+    }
+
+    &:first-of-type:before {
+      background-image: image-url("#{$dir}/start.png");
+    }
+
+    &:last-of-type:after {
+      background-image: image-url("#{$dir}/end.png");
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/overview/chapter_numbers.scss

@@ -0,0 +1,14 @@
+$overview-hide-chapter-numbers: false !default;
+
+@if $overview-hide-chapter-numbers {
+  .content .ov_chapter {
+    .heading-5 {
+      display: none;
+    }
+
+    .heading-4 {
+      margin-top: 20px;
+      margin-bottom: 15px;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/overview/colors.scss

@@ -0,0 +1,100 @@
+////
+/// @group overview
+////
+
+/// Color of the backdrop used to fade out the current page.
+$overview-backdrop-color: rgba(0, 0, 0, 0.4) !default;
+
+/// Default text color for overview elements.
+$overview-text-color: #fff !default;
+
+/// Color of the overview's main header.
+$overview-header-text-color: $overview-text-color !default;
+
+/// Color of the chapter tagline containing the chapter number.
+$overview-chapter-number-text-color: $overview-text-color !default;
+
+/// Background color of the chapter columns.
+$overview-chapter-background-color: transparent !default;
+
+/// Color of the borders around the page thumbnails.
+$overview-page-border-color: #505050 !default;
+
+/// Color of the border around the thumbnail of the current page.
+$overview-current-page-border-color: $main-color-dark !default;
+
+/// Background color of the panel which slides above the page
+/// thumbnail to reveal a page description.
+$overview-page-description-background-color: $main-color-dark !default;
+
+/// Text color of the panel which slides above the page thumbnail to
+/// reveal a page description.
+$overview-page-description-text-color: $overview-text-color !default;
+
+/// Text color of the close button label.
+$overview-close-button-text-color: #fffefe !default;
+
+/// Text color of the hovered close button label.
+$overview-active-close-button-text-color: $overview-close-button-text-color !default;
+
+/// Text shadow color of the close button label.
+$overview-close-button-text-shadow-color: #2b2b2b !default;
+
+/// Text shadow color of the hovered close button label.
+$overview-active-close-button-text-shadow-color: $overview-close-button-text-shadow-color !default;
+
+/// Pictogram visiblity.
+$overview-pictogram-visibility: $standard-page-pictogram-visibility !default;
+
+&.active:after {
+  background-color: $overview-backdrop-color;
+}
+
+.content {
+  color: $overview-text-color;
+}
+
+h2 {
+  color: $overview-header-text-color;
+}
+
+.button {
+  display: block;
+}
+
+.close {
+  .label {
+    text-shadow: 1px 1px 4px $overview-close-button-text-shadow-color;
+    color: $overview-close-button-text-color;
+  }
+
+  &:hover .label {
+    text-shadow: 1px 1px 4px $overview-active-close-button-text-shadow-color;
+    color: $overview-active-close-button-text-color;
+  }
+}
+
+.ov_chapter {
+  background-color: $overview-chapter-background-color;
+}
+
+.heading-5 {
+  color: $overview-chapter-number-text-color;
+}
+
+.ov_page {
+  border: solid 1px $overview-page-border-color;
+
+  &.active {
+    border: solid 1px $overview-current-page-border-color;
+  }
+
+  .pictogram {
+    visibility: $overview-pictogram-visibility;
+  }
+}
+
+.ov_page_description {
+  background-color: $overview-page-description-background-color;
+  color: $overview-page-description-text-color;
+}