pageflow 12.1.0 → 12.2.0

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

@@ -63,7 +63,6 @@
 
     z-index: 2;
     overflow: hidden;
-    @include transition(0.5s ease);
   }
 
   .page.hidden_by_overlay .content {
@@ -75,7 +74,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    right: 0;
     bottom: 0;
     z-index: 1;
 

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

@@ -1,5 +1,10 @@
 %anchor {
   @include fa-caret-right-icon;
+
+  [dir=rtl] & {
+    @include fa-caret-left-icon;
+  }
+
   text-decoration: none;
   pointer-events: all;
   position: relative;

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

@@ -22,6 +22,7 @@
 @import "./indicators";
 @import "./navigation";
 @import "./mobile_navigation";
+@import "./multimedia_alert";
 @import "./overview";
 @import "./player_controls";
 @import "./video_player";

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

@@ -40,6 +40,12 @@ $loading-spinner-glow-color: rgba(117, 149, 160, 0.8) !default;
 /// Apply opacity animation to glow or background image.
 $loading-spinner-animate-background: true !default;
 
+/// Size of the actual glowing area
+$loading-spinner-glow-size: 140px !default;
+
+/// File extension of background and logo
+$loading-spinner-image-file-extension: "png" !default;
+
 @if not $custom-loading-spinner {
   .loading_spinner {
     // scss-lint:disable ImportantRule
@@ -59,11 +65,11 @@ $loading-spinner-animate-background: true !default;
         content: "";
         @include radial-gradient(circle,
                                  $loading-spinner-glow-color 0%,
-                                 $loading-spinner-background-color 140px);
+                                 $loading-spinner-background-color $loading-spinner-glow-size);
         background-size: 100% 100%;
       } @else if $loading-spinner-background == "custom" {
         content: "";
-        background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/background.png");
+        background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/background.#{$loading-spinner-image-file-extension}");
 
         @if $loading-spinner-background-size == "logo" {
           background-size: $loading-spinner-logo-width $loading-spinner-logo-height;
@@ -110,7 +116,7 @@ $loading-spinner-animate-background: true !default;
         position: absolute;
 
         @if $loading-spinner-logo == "custom" {
-          background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/logo.png");
+          background-image: image-url("pageflow/themes/#{$theme-name}/loading_spinner/logo.#{$loading-spinner-image-file-extension}");
         } @else {
           background-image: image-url("pageflow/themes/default/loading_spinner/logo.png");
         }

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

@@ -15,7 +15,7 @@ $logo-variant: "first-page" !default;
 $logo-top: 30px !default;
 
 /// Height of the logo. (Non-watermark variants only)
-$logo-phone-top: nil !default;
+$logo-phone-top: null !default;
 
 /// Width of the logo. (Watermark variant only)
 $logo-width: 100px !default;
@@ -35,13 +35,18 @@ $logo-height: 50px !default;
 /// Height of the logo. (Non-watermark variants only)
 $logo-mobile-height: 35px !default;
 
-/// Height of the logo in phone layout. (Watermark variant only)
-$logo-phone-height: 24px !default;
+/// Height of the logo in phone layout. (Defaults to 24px for watermark variant)
+$logo-phone-height: null !default;
+
+/// File extension of logo_header and logo_header_invert image files
+$logo-image-file-extension: "png" !default;
 
 @import "./logo/variant/background_image";
 @import "./logo/variant/watermark";
 
 @if $logo-variant == "watermark" {
+  $logo-phone-height: 24px !default;
+
   @include logo-variant-watermark(
     $top: $logo-top,
     $width: $logo-width,
@@ -57,6 +62,7 @@ $logo-phone-height: 24px !default;
     $width: $logo-relative-width,
     $height: $logo-height,
     $mobile-height: $logo-mobile-height,
+    $phone-height: $logo-phone-height,
     $phone-top: $logo-phone-top
   );
 }

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

@@ -15,9 +15,9 @@ $logo-right: 14% !default;
 @mixin logo-alignment {
   @include desktop {
     @if $logo-alignment == "left" {
-      left: $logo-left;
+      @include position-start($logo-left);
     } @else {
-      right: $logo-right;
+      @include position-end($logo-right);
     }
   }
 

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

@@ -6,6 +6,19 @@ $logo-background-image-variant-opacity: null !default;
 /// Opacity of the logo on the first page
 $logo-background-image-variant-first-page-opacity: null !default;
 
+/// For some reason there has always been a default padding top for
+/// logo in mobile layout.
+$logo-background-image-variant-mobile-padding-top: 1% !default;
+
+/// Display logo_banner.svg behind logo
+$logo-background-image-variant-banner: false !default;
+
+$logo-background-image-variant-banner-height: 100px !default;
+
+$logo-background-image-variant-banner-mobile-height: null !default;
+
+$logo-background-image-variant-banner-phone-height: null !default;
+
 @mixin logo-variant-background-image(
   $first-page-only,
   $top,
@@ -14,11 +27,12 @@ $logo-background-image-variant-first-page-opacity: null !default;
   $width,
   $height,
   $mobile-height,
+  $phone-height,
   $phone-top
 ) {
   $page-selector: if($first-page-only, ":first-child", "");
 
-  .js .page#{$page-selector} {
+  .page#{$page-selector} {
     .content_and_background .scroller > div:after {
       content: "";
       position: absolute;
@@ -28,18 +42,26 @@ $logo-background-image-variant-first-page-opacity: null !default;
       max-width: $max-width;
       width: $width;
       height: $height;
-      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.png");
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.#{$logo-image-file-extension}");
       background-repeat: no-repeat;
       background-size: contain;
-      background-position: #{$logo-alignment} top;
+
+      @include dir-ltr {
+        background-position: #{$logo-alignment} top;
+      }
+
+      @include dir-rtl {
+        background-position: #{if($logo-alignment == "left", "right", "left")} top;
+      }
 
       @include mobile {
         background-position: left top;
-        padding-top: 1%;
+        padding-top: $logo-background-image-variant-mobile-padding-top;
         height: $mobile-height;
       }
 
       @include phone {
+        height: $phone-height;
         top: $phone-top;
       }
 
@@ -47,7 +69,32 @@ $logo-background-image-variant-first-page-opacity: null !default;
     }
 
     &.invert .content_and_background .scroller > div:after {
-      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.png");
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.#{$logo-image-file-extension}");
+    }
+
+    @if $logo-background-image-variant-banner {
+      .content_and_background .scroller > div:before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 200;
+        width: 100%;
+        height: $logo-background-image-variant-banner-height;
+        padding-right: 100px;
+        background-image: image-url("pageflow/themes/#{$theme-name}/logo_banner.svg");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+
+        @include mobile {
+          height: $logo-background-image-variant-banner-mobile-height;
+        }
+
+        @include phone {
+          height: $logo-background-image-variant-banner-phone-height;
+        }
+
+      }
     }
   }
 

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

@@ -12,6 +12,9 @@ $logo-watermark-variant-fade-in-near-top: "first-page" !default;
 /// is displayed while the header is active.
 $logo-watermark-variant-fade-in-with-header: false !default;
 
+/// Set opacity value of watermark logos
+$logo-watermark-variant-opacity: 0.3 !default;
+
 @mixin logo-variant-watermark(
   $top,
   $width,
@@ -30,7 +33,7 @@ $logo-watermark-variant-fade-in-with-header: false !default;
     z-index: 1;
 
     pointer-events: none;
-    opacity: 0.3;
+    opacity: $logo-watermark-variant-opacity;
     @include transition(opacity 500ms);
 
     @include phone {
@@ -61,12 +64,12 @@ $logo-watermark-variant-fade-in-with-header: false !default;
 
     &:before {
       opacity: 1;
-      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.png");
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header.#{$logo-image-file-extension}");
     }
 
     &:after {
       opacity: 0;
-      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.png");
+      background-image: image-url("pageflow/themes/#{$theme-name}/logo_header_invert.#{$logo-image-file-extension}");
     }
   }
 

data/app/assets/stylesheets/pageflow/{multimedia_alert.scss → themes/default/multimedia_alert.scss}

@@ -1,3 +1,9 @@
+$multimedia-alert-typography: () !default;
+
+$multimedia-alert-headline-typography: () !default;
+
+$multimedia-alert-close-button-typography: () !default;
+
 .multimedia_alert {
   display: none;
   position: absolute;
@@ -11,7 +17,6 @@
   z-index: 90;
   color: white;
   text-align: center;
-  font-family: "SourceSansPro";
   overflow: hidden;
 
   .multimedia_alert_box {
@@ -23,7 +28,13 @@
     width: 500px;
     height: 580px;
     max-width: 500px;
-    font-size: 1.4em;
+    @include standard-typography(
+      $multimedia-alert-typography,
+      (
+        font-family: "SourceSansPro",
+        font-size: 1.4em
+      )
+    );
 
     @media (max-width: 500px) {
       margin-left: -155px;
@@ -33,22 +44,32 @@
       height: 350px;
     }
 
-    .alert_headline, .close {
-      font-family: "SourceSansProLight";
-      text-transform: uppercase;
-      font-weight: normal;
-    }
-
     .alert_headline {
-      font-size: 2.2em;
+      @include standard-typography(
+        $multimedia-alert-headline-typography,
+        (
+          font-family: "SourceSansProLight",
+          font-size: 2.2em,
+          text-transform: uppercase,
+          font-weight: normal
+        )
+      );
     }
     .close {
-      font-size: 1.4em;
       border: 1px solid white;
       border-radius: 7px;
       padding: 16px 32px;
       color: white;
       text-decoration: none;
+      @include standard-typography(
+        $multimedia-alert-close-button-typography,
+        (
+          font-family: "SourceSansProLight",
+          font-size: 1.4em,
+          text-transform: uppercase,
+          font-weight: normal
+        )
+      );
 
       &:hover {
         text-decoration: underline;
@@ -149,4 +170,4 @@
       }
     }
   }
-}
+}

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

@@ -35,9 +35,13 @@ $overview-icon-font-options: () !default;
 
   .close .label {
     position: absolute;
-    margin-right: 130%;
-    text-align: right;
+    @include margin-end(130%);
+    @include text-align-end;
     width: 500%;
-    right: 0;
+    @include position-end(0);
+  }
+
+  .content {
+    @extend %pageflow_widget_margin_right !optional;
   }
 }

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

@@ -36,15 +36,31 @@
     }
 
     &.left {
-      @include fa-angle-left-icon;
+      @include dir-ltr {
+        @include fa-angle-left-icon;
 
-      &:before {
-        margin-left: -2px;
+        &:before {
+          margin-left: -2px;
+        }
+      }
+
+      @include dir-rtl {
+        @include fa-angle-right-icon;
       }
     }
 
     &.right {
-      @include fa-angle-right-icon;
+      @include dir-ltr {
+        @include fa-angle-right-icon;
+      }
+
+      @include dir-rtl {
+        @include fa-angle-left-icon;
+
+        &:before {
+          margin-left: -2px;
+        }
+      }
     }
   }
 }

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

@@ -5,18 +5,6 @@
 /// Base typography for page.
 $page-typography: () !default;
 
-/// Space for logo on first page.
-$page-scroller-first-page-padding-top: nil !default;
-
-/// Space for logo on first page in mobile layout.
-$page-scroller-first-page-mobile-padding-top: 110px !default;
-
-/// Space for logo on first page in mobile landscape layout.
-$page-scroller-first-page-mobile-landscape-padding-top: 100px !default;
-
-/// Space for logo on first page in phone layout.
-$page-scroller-first-page-phone-padding-top: nil !default;
-
 /// Typography for header.
 $page-header-typography: () !default;
 
@@ -55,6 +43,10 @@ $page-text-color: #fff !default;
 /// @group page-colors
 $page-inverted-text-color: #000 !default;
 
+/// Color of title on inverted pages
+/// @group page-colors
+$page-inverted-title-color: null !default;
+
 /// Background-color of pages
 /// @group page-colors
 $page-background-color: #000 !default;
@@ -63,14 +55,6 @@ $page-background-color: #000 !default;
 /// @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;
@@ -100,6 +84,10 @@ $page-content-text-font-size: 1.2em !default;
 $page-content-text-line-height: 1.5em !default;
 
 @import "./page/anchors";
+@import "./page/paddings";
+@import "./page/scroller";
+@import "./page/shadow";
+
 @import "./page/line_lengths";
 
 .page {
@@ -110,27 +98,24 @@ $page-content-text-line-height: 1.5em !default;
       font-size: $page-font-size
     )
   );
+
   color: $page-text-color;
   background-color: $page-background-color;
 
-  .content {
-    font-size: $page-content-font-size;
+  &.invert {
+    color: $page-inverted-text-color;
+    background-color: $page-inverted-background-color;
 
-    @include phone {
-      font-size: $page-content-phone-font-size;
+    h2 .title {
+      color: $page-inverted-title-color;
     }
   }
 
-  .shadow {
-    @include shadow($page-shadow-color);
-  }
-
-  &.invert {
-    color: $page-inverted-text-color;
-    background-color: $page-inverted-background-color;
+  .content {
+    font-size: $page-content-font-size;
 
-    .shadow {
-      @include shadow($page-shadow-inverted-color);
+    @include phone {
+      font-size: $page-content-phone-font-size;
     }
   }
 
@@ -168,7 +153,7 @@ $page-content-text-line-height: 1.5em !default;
           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,
+          margin-bottom: $page-header-title-margin-bottom,
           letter-spacing: 0
         )
       );
@@ -215,25 +200,7 @@ $page-content-text-line-height: 1.5em !default;
   }
 }
 
-.js .page:first-child {
-  .scroller > div,
-  .content_and_background > .page_header {
-    padding-top: $page-scroller-first-page-padding-top;
-
-    @include mobile {
-      padding-top: $page-scroller-first-page-mobile-padding-top;
-      width: 100%;
-
-      @media (orientation: landscape) {
-        padding-top: $page-scroller-first-page-mobile-landscape-padding-top;
-      }
-    }
-
-    @include phone {
-      padding-top: $page-scroller-first-page-phone-padding-top;
-    }
-  }
-
+.page:first-child {
   h2 .title {
     @include typography(
       $page-header-first-page-title-typography,