text_page.scss in pageflow-text-page-1.1.0

- old
+ new

@@ -53,11 +53,11 @@
         }
       }
     }
   }
 
-  .scroller, .scroller {
+  .scroller {
     > div {
       padding: 0;
       position: relative;
 
       width: auto;
@@ -88,13 +88,18 @@
           h2 {
             text-align: center;
             padding: 2em 0;
             margin: 0;
             span {
-              margin: 0 auto;
+              margin-right: auto;
+              margin-left: auto;
             }
 
+            .subtitle {
+              margin-bottom: 0em;
+            }
+
             padding-right: $nav-bar-margin;
 
             @include pad_portrait {
               padding-right: 0;
             }
@@ -121,30 +126,26 @@
             margin: 0;
           }
         }
 
         .contentText {
-          font-size: 0.8em;
           max-width: 500px;
           margin: auto;
           min-height: 300px;
           padding: 6em 0 12em 0;
           box-sizing: border-box;
 
           @include phone {
             max-width: 84%;
-            font-size: 1em;
           }
 
           @include pad_portrait {
             padding-right: 0;
           }
 
           h3 {
             width: 100%;
-            padding-bottom: 2em;
-            font-size: 1.5em;
           }
 
           @include pad_portrait {
             padding-right: 0;
           }
@@ -192,18 +193,11 @@
               display: block;
               border: 0;
               outline: 0;
             }
             div {
-              background-color: black;
               width: auto;
-              color: white;
-
-              span {
-                padding: 10px;
-                display: block;
-              }
             }
 
             &:before, &:after {
               display: none;
             }
@@ -212,14 +206,12 @@
               height: 31px;
               background-image: image-url('pageflow/text_page/fs_close_sprite.png');
               background-position: 0 0;
               background-repeat: no-repeat;
               position: absolute;
-              background-color: transparent;
               top: 18px;
               right: 18px;
-              color: transparent;
               text-indent: -4000px;
               opacity: 0;
               cursor: pointer;
               display: none;
 
@@ -465,12 +457,12 @@
 
   &.invert .backgroundArea {
     background-color: white;
   }
 
-  .content_and_background {
-    @include transition(1s ease);
+  &.active .content_and_background {
+    @include transition (opacity 1s ease);
   }
 
   &.active.animate-in-forwards .content_and_background {
     opacity: 1;
   }
@@ -554,17 +546,17 @@
     }
   }
 }
 
 .slideshow {
-  .text_page p, h3 span, .inline_image_text span, .fixed_header_area .page_header_wrapper {
+  .text_page p, h3 span, .inline_image_text, .fixed_header_area .page_header_wrapper {
     @include transition(0.5s ease);
   }
-  .hiddenByOverlay .text_page {
+  .hidden_by_overlay .text_page {
     .content {
       opacity: 1;
-      p, h3 span, .inline_image_text span {
+      p, h3 span, .inline_image_text {
         opacity: 0;
       }
     }
     .fixed_header_area .page_header_wrapper {
       opacity: 0;
@@ -645,14 +637,12 @@
     }
 
     .inline_image_text {
       position: absolute;
       bottom: 0;
-      background-color: black;
-      color: white;
-      padding: 15px 2%;
       text-align: left;
-      width: 96%;
+      width: 100%;
+      box-sizing: border-box;
     }
   }
   .invert_text & {
     background-color: black;
     background-color: rgba(0, 0, 0, 0.95);