pageflow 13.6.0 → 14.0.0.beta1

data/app/assets/stylesheets/pageflow/page_types/video/content_hiding.scss

@@ -1,5 +1,5 @@
-.js .audioPage.has_text_tracks,
-.js .videoPage {
+.js .audio_page.has_text_tracks,
+.js .video_page {
   .scroller {
     @include transition(opacity 0.2s linear);
   }

data/app/assets/stylesheets/pageflow/page_types/video/mobile_poster.scss

@@ -1,15 +1,15 @@
-.videoPage .background_image {
+.video_page .background_image {
   display: none;
 }
 
 .has_phone_platform {
   // Show mobile poster only on phone platform
-  .videoPage .background_image {
+  .video_page .background_image {
     display: block;
   }
 
   // But not while playing inline (e.g. on Android)
-  &.has_no_native_video_player .videoPage.should_play .background_image {
+  &.has_no_native_video_player .video_page.should_play .background_image {
     display: none;
   }
 }

data/app/assets/stylesheets/pageflow/print_view.scss

@@ -71,11 +71,14 @@ body {
       page-break-inside: avoid !important;
     }
 
-    .contentText, .videoPage .contentText, .audioPage .contentText {
+    .page_text,
+    .video_page .page_text,
+    .audio_page .page_text {
       margin-bottom: 20px;
     }
 
-    .videoPage .vjs-control-bar, .audioPage .-vjs-control-bar {
+    .video_page .vjs-control-bar,
+    .audio_page .vjs-control-bar {
       display: none !important;
     }
 
@@ -116,7 +119,7 @@ body {
     }
 
 
-    .backgroundArea {
+    .page_background {
       width: initial;
       height: initial;
       position: absolute;
@@ -147,7 +150,7 @@ body {
     }
   }
 
-  .blackLayer {
+  .black_layer {
     display: none !important;
   }
 
@@ -182,4 +185,4 @@ body {
     display: none !important;
   }
 
-}
+}

data/app/assets/stylesheets/pageflow/slideshow.scss

@@ -8,8 +8,8 @@
   z-index: 0;
 
 
-  .blackLayer,
-  .backgroundArea {
+  .black_layer,
+  .page_background {
     -webkit-backface-visibility: hidden;
     position: relative;
   }
@@ -36,16 +36,17 @@
   section.active {
     display: block;
     -webkit-backface-visibility: hidden;
-    .backgroundArea {
+
+    .page_background {
       opacity: 1;
     }
   }
 
-  section .videoPage .video-js {
+  section .video_page .video-js {
     background-color: black;
   }
 
-  section.invert .videoPage .video-js {
+  section.invert .video_page .video-js {
     background-color: white;
   }
 

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

@@ -28,7 +28,7 @@
 @import "./overview";
 @import "./player_controls";
 @import "./video_player";
-@import "./video_wrapper";
+@import "./uncropped_media_wrapper";
 @import "./text_track_cues";
 @import "./slideshow";
 @import "./probes";

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

@@ -5,39 +5,6 @@
 /// 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 tagline in phone layout.
-$page-header-tagline-phone-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 title on first page of chapter.
-$page-header-chapter-beginning-title-typography: () !default;
-
-/// Typography for title on first page of chapter in phone layout.
-$page-header-chapter-beginning-title-phone-typography: () !default;
-
-/// Typography for header subtitle.
-$page-header-subtitle-typography: () !default;
-
-/// Typography for header subtitle in phone layout.
-$page-header-subtitle-phone-typography: () !default;
-
 /// Typography for content text.
 $page-content-text-typography: () !default;
 
@@ -71,31 +38,12 @@ $page-inverted-background-color: #fff !default;
 
 $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";
+@import "./page/header";
 @import "./page/hyphenate";
 @import "./page/paddings";
 @import "./page/content_text_margin";
@@ -120,7 +68,7 @@ $page-content-text-line-height: 1.5em !default;
     color: $page-inverted-text-color;
     background-color: $page-inverted-background-color;
 
-    h2 .title {
+    .page_header-title {
       color: $page-inverted-title-color;
     }
   }
@@ -133,84 +81,7 @@ $page-content-text-line-height: 1.5em !default;
     }
   }
 
-  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
-        )
-      );
-
-      @include phone {
-        @include typography(
-          $page-header-tagline-phone-typography
-        );
-      }
-    }
-
-    .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-bottom,
-          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
-        )
-      );
-
-      @include phone {
-        @include typography(
-          $page-header-subtitle-phone-typography
-        );
-      }
-    }
-  }
-
-  .contentText > * {
+  .page_text > * {
     @include typography(
       $page-content-text-typography,
       (
@@ -225,39 +96,3 @@ $page-content-text-line-height: 1.5em !default;
     margin-top: 0;
   }
 }
-
-.page:first-child {
-  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
-        )
-      );
-    }
-  }
-}
-
-.emphasize_chapter_beginning .page.chapter_beginning:nth-of-type(n+2) {
-  h2 .title {
-    @include typography(
-      $page-header-chapter-beginning-title-typography
-    );
-
-    @include phone {
-      @include typography(
-        $page-header-chapter-beginning-title-phone-typography
-      );
-    }
-  }
-}

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

@@ -11,13 +11,13 @@ $page-anchor-inverted-color: #000 !default;
 /// Typography settings of links in page content text
 $page-anchor-typography: () !default;
 
-.contentText a {
+.page_text a {
   @extend %anchor;
   color: $page-anchor-color;
   pointer-events: all;
   @include typography($page-anchor-typography)
 }
 
-.invert .contentText a {
+.invert .page_text a {
   color: $page-anchor-inverted-color;
 }

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

@@ -1,4 +1,4 @@
-.contentText {
+.page_text {
   // This has to be the default behavior since all non-React pages
   // still do not apply additional modifier classes to the content
   // text

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

@@ -0,0 +1,172 @@
+////
+/// @group page-typography
+////
+
+/// Typography for header.
+$page-header-typography: () !default;
+
+/// Typography for header tagline.
+$page-header-tagline-typography: () !default;
+
+/// Typography for header tagline in phone layout.
+$page-header-tagline-phone-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 title on first page of chapter.
+$page-header-chapter-beginning-title-typography: () !default;
+
+/// Typography for title on first page of chapter in phone layout.
+$page-header-chapter-beginning-title-phone-typography: () !default;
+
+/// Typography for header subtitle.
+$page-header-subtitle-typography: () !default;
+
+/// Typography for header subtitle in phone layout.
+$page-header-subtitle-phone-typography: () !default;
+
+// Deprecated. Use typography variables above.
+
+$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_header {
+  @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
+      )
+    );
+
+    @include phone {
+      @include typography(
+        $page-header-tagline-phone-typography
+      );
+    }
+  }
+
+  &-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-bottom,
+          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
+      )
+    );
+
+    @include phone {
+      @include typography(
+        $page-header-subtitle-phone-typography
+      );
+    }
+  }
+}
+
+.page:first-child {
+  .page_header-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
+        )
+      );
+    }
+  }
+}
+
+.emphasize_chapter_beginning .page.chapter_beginning:nth-of-type(n+2) {
+  .page_header-title {
+    @include typography(
+      $page-header-chapter-beginning-title-typography
+    );
+
+    @include phone {
+      @include typography(
+        $page-header-chapter-beginning-title-phone-typography
+      );
+    }
+  }
+}