pageflow 0.10.0 → 0.11.0

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

@@ -0,0 +1,50 @@
+@mixin overview-icons-icon-font(
+  $button-background-color,
+  $active-button-background-color,
+
+  $button-icon-color,
+  $active-button-icon-color,
+  $deactivated-button-icon-color
+) {
+
+  .button {
+    @include background-icon-center($color: $button-icon-color, $font-size: 22px);
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    background-color: $button-background-color;
+    border-radius: 20px;
+
+    &:hover {
+      background-color: $active-button-background-color;
+      @include background-icon-color($active-button-icon-color);
+    }
+  }
+
+  .close {
+    @include fa-times-icon;
+
+    .label {
+      margin-top: 0.4em;
+    }
+  }
+
+  .scroll_indicator {
+    &:before {
+      font-weight: bold;
+      font-size: 29px;
+    }
+
+    &.left {
+      @include fa-angle-left-icon;
+
+      &:before {
+        margin-left: -2px;
+      }
+    }
+
+    &.right {
+      @include fa-angle-right-icon;
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+@mixin overview-icons-sprite {
+  .button {
+    @extend %pageflow_sprite_icon;
+    width: 42px;
+    height: 42px;
+  }
+
+  .close {
+    @include pageflow-sprite-icon-close;
+
+    .label {
+      margin-top: 0.8em;
+    }
+  }
+
+  .scroll_indicator {
+    &.left {
+      @include pageflow-sprite-icon-arrow-left;
+    }
+
+    &.right {
+      @include pageflow-sprite-icon-arrow-right;
+    }
+  }
+}

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

@@ -0,0 +1,61 @@
+////
+/// @group overview
+////
+
+/// Base typography for widget.
+$overview-typography: () !default;
+
+/// Typography for overview header.
+$overview-header-typography: () !default;
+
+/// Typography for chapter number tagline.
+$overview-chapter-number-typography: () !default;
+
+/// Typography for chapter title.
+$overview-chapter-title-typography: () !default;
+
+/// Typography for close button label.
+$overview-close-button-typography: () !default;
+
+@include standard-typography($overview-typography, ());
+
+h2 {
+  @include typography(
+    $overview-header-typography,
+    (
+      font-size: 3em,
+    )
+  );
+}
+
+.heading-5 {
+  @include typography(
+    $overview-chapter-number-typography,
+    (
+      font-size: 1em,
+      font-weight: normal,
+      text-transform: uppercase,
+    )
+  );
+}
+
+.heading-4 {
+  @include typography(
+    $overview-chapter-title-typography,
+    (
+      font-size: 1.1em,
+      font-weight: bold,
+    )
+  );
+}
+
+.close .label {
+  @include typography(
+    $overview-close-button-typography,
+    (
+      text-transform: uppercase,
+      font-size: 1em,
+      letter-spacing: 0.1em,
+    )
+  );
+}

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

@@ -0,0 +1,237 @@
+////
+/// @group page-typography
+////
+
+/// Base typography for page.
+$page-typography: () !default;
+
+/// Typography for header.
+$page-header-typography: () !default;
+
+/// Typography for header tagline.
+$page-header-tagline-typography: () !default;
+
+/// Typography for header title.
+$page-header-title-typography: () !default;
+
+/// Typography for header title in phone layout.
+$page-header-title-phone-typography: () !default;
+
+/// Typography for title on first page.
+$page-header-first-page-title-typography: () !default;
+
+/// Typography for title on first page in phone layout.
+$page-header-first-page-title-phone-typography: () !default;
+
+/// Typography for header subtitle.
+$page-header-subtitle-typography: () !default;
+
+/// Typography for content text.
+$page-content-text-typography: () !default;
+
+/// Base font size for page content
+$page-content-font-size: 1em !default;
+
+/// Base font size for page content in phone layout
+$page-content-phone-font-size: 0.7em !default;
+
+/// Color of text
+/// @group page-colors
+$page-text-color: #fff !default;
+
+/// Color of text on inverted pages
+/// @group page-colors
+$page-inverted-text-color: #000 !default;
+
+/// Background-color of pages
+/// @group page-colors
+$page-background-color: #000 !default;
+
+/// Background-color of inverted pages
+/// @group page-colors
+$page-inverted-background-color: #fff !default;
+
+/// Color of the gradient
+/// @group page-colors
+$page-shadow-color: #000 !default;
+
+/// Color of the gradient on inverted pages
+/// @group page-colors
+$page-shadow-inverted-color: #fff !default;
+
+// Deprecated. Use typography variables above.
+
+$page-font-family: $standard-font !default;
+$page-font-size: 16px !default;
+$page-header-font-family: $page-font-family !default;
+$page-header-font-size: 1.375em !default;
+$page-header-font-weight: normal !default;
+$page-header-tagline-font-size: 1em !default;
+$page-header-tagline-font-weight: $page-header-font-weight !default;
+$page-header-tagline-line-height: normal !default;
+$page-header-tagline-margin-top: 0 !default;
+$page-header-title-font-size: 2.3em !default;
+$page-header-title-phone-font-size: 1.8em !default;
+$page-header-first-page-title-font-size: 2.5em !default;
+$page-header-first-page-title-phone-font-size: 2em !default;
+$page-header-title-font-weight: $page-header-font-weight !default;
+$page-header-title-line-height: 1em !default;
+$page-header-first-page-title-line-height: 1em !default;
+$page-header-title-margin-top: 0.4em !default;
+$page-header-title-margin-bottom: 0.4em !default;
+$page-header-subtitle-font-size: 1em !default;
+$page-header-subtitle-font-weight: $page-header-font-weight !default;
+$page-header-subtitle-line-height: normal !default;
+$page-header-subtitle-margin-bottom: 1.875em !default;
+$page-content-text-font-family: $page-font-family !default;
+$page-content-text-font-size: 1.2em !default;
+$page-content-text-line-height: 1.5em !default;
+
+@import "./page/anchors";
+
+.page {
+  @include typography(
+    $page-typography,
+    (
+      font-family: $page-font-family,
+      font-size: $page-font-size
+    )
+  );
+  color: $page-text-color;
+  background-color: $page-background-color;
+
+  .content {
+    font-size: $page-content-font-size;
+
+    @include phone {
+      font-size: $page-content-phone-font-size;
+    }
+  }
+
+  .shadow {
+    @include shadow($page-shadow-color);
+  }
+
+  &.invert {
+    color: $page-inverted-text-color;
+    background-color: $page-inverted-background-color;
+
+    .shadow {
+      @include shadow($page-shadow-inverted-color);
+    }
+  }
+
+  h2 {
+    @include typography(
+      $page-header-typography,
+      (
+        font-family: $page-header-font-family,
+        font-size: $page-header-font-size
+      )
+    );
+
+    .tagline {
+      display: block;
+
+      @include typography(
+        $page-header-tagline-typography,
+        (
+          font-size: $page-header-tagline-font-size,
+          font-weight: $page-header-tagline-font-weight,
+          line-height: $page-header-tagline-line-height,
+          margin-top: $page-header-tagline-margin-top,
+          letter-spacing: 0
+        )
+      );
+    }
+
+    .title {
+      display: block;
+
+      @include typography(
+        $page-header-title-typography,
+        (
+          font-size: $page-header-title-font-size,
+          font-weight: $page-header-title-font-weight,
+          line-height: $page-header-title-line-height,
+          margin-top: $page-header-title-margin-top,
+          margin-bottom: $page-header-title-margin-top,
+          letter-spacing: 0
+        )
+      );
+
+      @include phone {
+        @include typography(
+          $page-header-title-phone-typography,
+          (
+            font-size: $page-header-title-phone-font-size
+          )
+        );
+      }
+    }
+
+    .subtitle {
+      display: block;
+
+      @include typography(
+        $page-header-subtitle-typography,
+        (
+          font-size: $page-header-subtitle-font-size,
+          font-weight: $page-header-subtitle-font-weight,
+          line-height: $page-header-subtitle-line-height,
+          margin-top: 0,
+          margin-bottom: $page-header-subtitle-margin-bottom
+        )
+      );
+    }
+  }
+
+  .contentText > * {
+    @include typography(
+      $page-content-text-typography,
+      (
+        font-family: $page-content-text-font-family,
+        font-size: $page-content-text-font-size,
+        line-height: $page-content-text-line-height
+      )
+    );
+  }
+
+  p {
+    margin-top: 0;
+  }
+}
+
+.js .page:first-child {
+  .scroller > div,
+  .content_and_background > .page_header {
+    @include mobile {
+      padding: 110px 12% 5% 8%;
+      width: 100%;
+
+      @media (orientation: landscape) {
+        padding: 100px 12% 5% 8%;
+      }
+    }
+  }
+
+  h2 .title {
+    @include typography(
+      $page-header-first-page-title-typography,
+      (
+        font-size: $page-header-first-page-title-font-size,
+        line-height: $page-header-first-page-title-line-height,
+        letter-spacing: 0
+      )
+    );
+
+    @include phone {
+      @include typography(
+        $page-header-first-page-title-phone-typography,
+        (
+          font-size: $page-header-first-page-title-phone-font-size
+        )
+      );
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/themes/default/page/anchors.scss

@@ -0,0 +1,19 @@
+////
+/// @group page-colors
+////
+
+/// Color of links inside the text
+$page-anchor-color: #fff !default;
+
+/// Color of links inside the text on inverted pages
+$page-anchor-inverted-color: #000 !default;
+
+.contentText a {
+  @extend %anchor;
+  color: $page-anchor-color;
+  pointer-events: all;
+}
+
+.invert .contentText a {
+  color: $page-anchor-inverted-color;
+}

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

@@ -0,0 +1,30 @@
+$player-controls-typography: () !default;
+
+// Prevent unstyled player controls from being displayed inside editor
+// while widget presence css classes have not yet been set:
+
+%player_controls-container {
+  display: none;
+}
+
+.widget_slim_player_controls_present,
+.widget_classic_player_controls_present {
+  %player_controls-container {
+    display: block;
+  }
+}
+
+// Define placeholders scoped by widget presence css class:
+
+.widget_classic_player_controls_present {
+  @import "./player_controls/classic";
+}
+
+.widget_slim_player_controls_present {
+  @import "./player_controls/slim";
+}
+
+// Extend vjs specific css classes with placeholders:
+
+@import "./player_controls/vjs_mapping";
+@import "./player_controls/widget_margins";

data/app/assets/stylesheets/pageflow/themes/default/player_controls/classic.scss

@@ -0,0 +1,36 @@
+////
+/// @group classic-player-controls
+////
+
+/// Type of icons to use:
+///
+/// - `"icon-font"`: Circular buttons with font awesome icons.
+///
+/// - `"sprite"`: Use sprite image for play controls.
+$classic-player-controls-icons: "icon-font" !default;
+
+$classic-player-controls-icon-font-option: () !default;
+
+/// Image to use if `$classic-player-controls-icons` is `"sprite"`:
+///
+/// - `"default"`: Use sprite from default image.
+///
+/// - `"custom"`: Custom sprite from `player_controls_sprite.png` in
+///   theme directory.
+$classic-player-controls-images: "default" !default;
+
+@import "./classic/container";
+@import "./classic/control_bar";
+@import "./classic/info_box";
+@import "./classic/close_button";
+
+@import "./classic/icons/icon_font";
+@import "./classic/icons/sprite";
+
+@if $classic-player-controls-icons == "sprite" {
+  @include player-controls-classic-icons-sprite;
+} @else {
+  @include player-controls-classic-icons-icon-font(
+    $classic-player-controls-icon-font-option...
+  );
+}