pageflow 0.10.0 → 0.11.0

data/app/assets/stylesheets/pageflow/{entries.css.scss → entries.scss}

@@ -9,29 +9,15 @@
 
   .indicator {
     position: absolute;
-    bottom: 2%;
+    bottom: 0;
     width: 400px;
     max-width: 80%;
     height: 40px;
     z-index: 5;
-    color: #e6e6e6;
     pointer-events: none;
 
-    @include phone {
-      bottom: -11px;
-    }
-
     background-color: transparent;
     opacity: 0;
-
-    text-transform: uppercase;
-    text-shadow: 1px 1px 4px rgba(43, 43, 43, 1);
-    font-size: 0.92em;
-    letter-spacing: 0.2em;
-
-    padding-left: 40px;
-    font-family: sourcesanspro;
-    padding-top: 6px;
     @include transition(opacity 1s ease);
 
     &.visible {
@@ -50,50 +36,21 @@
       top: auto; /* collision with .hidden class from application.css.scss */
     }
 
-    &.faded {
-      opacity: 0;
-      @include transition(opacity 2s ease);
-    }
-
     &.animate {
       @include animation(bounce 0.5s ease);
     }
-
-    &:before {
-      background-size: auto auto;
-      background-position: top left;
-      background-repeat: no-repeat;
-      content: "";
-      width: 100%;
-      height: 100%;
-      left: 0;
-      top: 1px;
-      position: absolute;
-    }
-
-    @include phone {
-      text-shadow: 1px 1px 1px rgba(43, 43, 43, 1);
-      font-size: 0.8em;
-      letter-spacing: 0.1em;
-    }
-
   }
 
   .scroll_indicator {
-    left: 8%;
     cursor: pointer;
     visibility: hidden;
 
-    &:before {
-      background-image: image-url('pageflow/scroll_down_indicator.png');
+    @include desktop {
+      left: 8%;
     }
 
-    &.invert {
-      text-shadow: 1px 1px 4px #FDFDFD;
-      color: #0A0A0A;
-      &:before {
-        background-image: image-url('pageflow/scroll_down_indicator_invert.png');
-      }
+    @include phone {
+      right: 15px;
     }
 
     &.visible {
@@ -101,6 +58,17 @@
       visibility: visible;
     }
 
+    &.faded {
+      opacity: 0;
+      visibility: hidden;
+      @include transition(opacity 2s ease, visibility 2s);
+    }
+
+    &.hidden_for_page {
+      opacity: 0;
+      visibility: hidden;
+    }
+
     .bigScreen & {
       opacity: 0;
       visibility: 0;
@@ -112,16 +80,6 @@
   .hidden_text_indicator {
     display: none;
     left: 8%;
-
-    &:before {
-      background-image: image-url("pageflow/touch_indicator.png");
-    }
-
-    &.invert {
-      &:before {
-        background-image: image-url("pageflow/touch_indicator_invert.png");
-      }
-    }
   }
 }
 

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

@@ -0,0 +1,23 @@
+$focus-outline-color: #c1c1c1;
+$input-focus-outline-color: #065195;
+
+a:focus,
+[tabindex]:focus {
+  outline: 3px solid $focus-outline-color;
+}
+
+a:focus {
+  text-decoration: none;
+}
+
+input:focus {
+  outline: 3px solid $input-focus-outline-color;
+}
+
+.has_mobile_platform,
+.disable_focus_outline {
+  [tabindex]:focus,
+  a:focus {
+    outline: none;
+  }
+}

data/app/assets/stylesheets/pageflow/{hide_text.css.scss → hide_text.scss}

@@ -1,4 +1,4 @@
-.slideshow .content .contentWrapper, .shadow {
+.slideshow .content .contentWrapper {
   -webkit-transition: 0.8s ease !important;
   -moz-transition: 0.8s ease !important;
   -ms-transition: 0.8s ease !important;
@@ -12,10 +12,6 @@
 .hideText {
   .shadow {
     opacity: 0 !important;
-    -webkit-transition: 0.8s ease !important;
-    -moz-transition: 0.8s ease !important;
-    -ms-transition: 0.8s ease !important;
-    transition: 0.8s ease !important;
     visibility: hidden;
   }
 
@@ -24,7 +20,9 @@
   }
 
   .entry .scroll_indicator {
-    left: -100%;
+    opacity: 0;
+    visibility: hidden;
+    @include transition-delay(0s);
   }
 
   .hide_content_with_text .content {

data/app/assets/stylesheets/pageflow/{ie9.css.scss → ie9.scss}

@@ -7,13 +7,14 @@
 
 /* IE 9 does not trigger mouse events on div without a background - duh */
 
+.widget_slim_player_controls_present .vjs-control-bar,
 .page .scroller {
   background-image: url('.');
 }
 
 /* Make sure controls are centered, since translateX(-50%) does not work. */
 
-.vjs-control-bar {
+.widget_classic_player_controls_present .vjs-control-bar {
   -ms-transform: translate(-50%, 0);
 }
 

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

@@ -0,0 +1,26 @@
+@import "jquery-layout-default";
+
+// sass-rails ignores sprockets requires in imported files. We have to
+// mimic the require calls inside jquery-ui-rails with imports.
+//
+// See also:
+// https://github.com/rails/sass-rails/issues/297
+// https://github.com/rails/sass-rails/issues/306
+@import "jquery-ui/theme";
+@import "jquery-ui/core";
+@import "jquery-ui/slider";
+@import "jquery-ui/datepicker";
+@import "jquery-ui/menu";
+@import "jquery-ui/selectmenu";
+
+div.ui-datepicker{
+ font-size: 12px;
+}
+
+.ui-draggable-dragging {
+  z-index: 100;
+}
+
+.ui-state-disabled {
+  opacity: 1;
+}

data/app/assets/stylesheets/pageflow/{lt_ie9.css.scss → lt_ie9.scss}

@@ -147,7 +147,3 @@
 .hideText .slideshow .content .contentWrapper, .hidden_text_indicator {
   display: none;
 }
-
-.js .page .close_button {
-  background-image: image-url('pageflow/close_sprite_shadow_ie8.png') !important;
-}

data/app/assets/stylesheets/pageflow/{mixins.css.scss → mixins.scss}

@@ -10,3 +10,5 @@
 @import "mixins/unselectable";
 @import "mixins/shadow";
 @import "mixins/label";
+@import "mixins/map_to_css";
+@import "mixins/ie_fixes";

data/app/assets/stylesheets/pageflow/mixins/{background_icons.css.scss → background_icons.scss}

@@ -44,7 +44,19 @@
 
 @mixin background-icon-color($color) {
   &:before {
-    color: $color
+    color: $color;
+  }
+}
+
+@mixin background-icon-position($left: false, $top: false) {
+  &:before {
+    @if $left != false {
+      left: $left;
+    }
+
+    @if $top != false {
+      top: $top;
+    }
   }
 }
 

data/app/assets/stylesheets/pageflow/mixins/{icons.css.scss → icons.scss}

@@ -1,15 +1,15 @@
 @charset 'UTF-8';
 
 @mixin icon($char) {
-  &:before {
+  &::before {
     font-family: 'entypo';
     content: $char;
   }
 }
 
-@mixin fontawesome-icon($char) {
-  &:before {
-    font-family: 'FontAwesome';
+@mixin fontawesome-icon($char, $position: "before") {
+  &::#{$position} {
+    font-family: "FontAwesome";
     content: $char;
   }
 }

data/app/assets/stylesheets/pageflow/mixins/icons/{fontawesome.css.scss → fontawesome.scss}

@@ -274,7 +274,7 @@
 @mixin fa-angle-left-icon { @include fontawesome-icon("\f104"); }
 @mixin fa-angle-right-icon { @include fontawesome-icon("\f105"); }
 @mixin fa-angle-up-icon { @include fontawesome-icon("\f106"); }
-@mixin fa-angle-down-icon { @include fontawesome-icon("\f107"); }
+@mixin fa-angle-down-icon($args...) { @include fontawesome-icon("\f107", $args...); }
 @mixin fa-desktop-icon { @include fontawesome-icon("\f108"); }
 @mixin fa-laptop-icon { @include fontawesome-icon("\f109"); }
 @mixin fa-tablet-icon { @include fontawesome-icon("\f10a"); }

data/app/assets/stylesheets/pageflow/mixins/ie_fixes.scss

@@ -0,0 +1,4 @@
+// IE 9 and 10 do not handle z-index of transparent objects correctly.
+@mixin fix-ie-ensure-z-index-applies {
+  background: transparent 0 0 repeat scroll url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+}

data/app/assets/stylesheets/pageflow/mixins/map_to_css.scss

@@ -0,0 +1,5 @@
+@mixin map-to-css($properties) {
+  @each $property, $value in $properties {
+    #{$property}: #{$value};
+  }
+}

data/app/assets/stylesheets/pageflow/mixins/{pageflow.css.scss → pageflow.scss}

@@ -36,4 +36,12 @@
       @content;
     }
   }
-}
+}
+
+@mixin pageflow-widget-margin($widget-name, $position) {
+  .widget_#{$widget-name}_present {
+    %pageflow_widget_margin_#{$position} {
+      @content;
+    }
+  }
+}

data/app/assets/stylesheets/pageflow/mixins/{shadow.css.scss → shadow.scss}

@@ -53,4 +53,9 @@
     background: linear-gradient(to right, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 1))}', endColorstr='#{ie_hex_str(rgba($color, 0))}',GradientType=1 ); /* IE6-8 */
   }
-}
+}
+
+@mixin shadow-bottom {
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
+  @include linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent, $fallback: transparent);
+}

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

@@ -12,6 +12,7 @@
   color: white;
   text-align: center;
   font-family: "SourceSansPro";
+  overflow: hidden;
 
   .multimedia_alert_box {
     top: 50%;

data/app/assets/stylesheets/pageflow/{navigation_bar.css.scss → navigation_bar.scss}

@@ -1,25 +1,8 @@
-$bg-color: #353535;
-$nav-color: #9c9c9c;
-
 @mixin box($margin-top) {
   visibility: hidden;
   margin-top: $margin-top;
-  background-color: $bg-color;
-  border: 2px solid $nav-color;
   position: absolute;
-  right: 90px;
   padding: 15px;
-
-  &:before {
-    content: " ";
-    background-image: image-url("pageflow/menu-arrow-short.png");
-    display: block;
-    position: absolute;
-    width: 10px;
-    height: 38px;
-    left: 100%;
-    top: 4px;
-  }
 }
 
 .hint {
@@ -35,7 +18,6 @@ $nav-color: #9c9c9c;
 
 .navigation {
   @include unselectable;
-  color: $nav-color;
   width: 85px;
   position: absolute;
   right: 0;
@@ -133,11 +115,6 @@ $nav-color: #9c9c9c;
       }
     }
 
-    @include hover {
-      -webkit-mask-image: image-url("pageflow/page_thumbnail_mask.png");
-      -webkit-mask-position-y: 2px;
-    }
-
     &:active {
       outline: none;
     }
@@ -159,7 +136,7 @@ $nav-color: #9c9c9c;
     position: relative;
     outline: none;
 
-    &:focus:after {
+    &:focus:before {
       content: " ";
       position: absolute;
       top: 0;
@@ -167,6 +144,10 @@ $nav-color: #9c9c9c;
       bottom: 0;
       left: 0;
       border: solid 3px #eee;
+
+      .disable_focus_rect & {
+        display: none;
+      }
     }
   }
 
@@ -175,12 +156,6 @@ $nav-color: #9c9c9c;
   }
 
   .navigation_site_detail {
-
-    color: white;
-    font-size: 1em;
-    line-height: 1.1em;
-    font-family: sourcesanspro;
-
     @include box(-40px);
 
     img {
@@ -189,85 +164,26 @@ $nav-color: #9c9c9c;
   }
 
   .navigation_bg, .navigation_bullet .button {
-    background-repeat: no-repeat;
-    border-bottom: 2px solid $nav-color;
     margin: auto;
   }
 
-  .navigation_bar_top, .navigation_bar_bottom {
-    opacity: 0.9;
-
-    li:last-child a .button {
-      border-bottom: none;
-    }
-  }
-
-  .navigation_bullet {
-    background-color: $bg-color;
-
-    @include hover {
-      -webkit-mask-image: none;
-    }
-  }
-
-  .navigation_menu {
-    a {
-      -webkit-mask-position-y: -4px !important;
-    }
-  }
-
   .navigation_menu_box {
     @include box(0);
 
-    a {
-      @include hover {
-        -webkit-mask-image: none;
-      }
-    }
-
     p {
       margin: 0 0 0.5em;
     }
   }
 
   .navigation_share_box {
-    $size: 28px;
-    width: 210px;
-
-    a {
-      float: left;
-      text-decoration: none;
-      padding: 0 15px 0 15px;
-      width: 39px;
-
-      p {
-        font-size: 9px;
-        color: $nav-color;
-        margin-bottom: 0;
-        text-align: center;
-      }
-
-      .button {
-        width: $size;
-        height: $size;
-        margin: auto;
-      }
-    }
-
     .sub_share {
       display: none;
     }
   }
 
   .navigation_credits_box {
-    font-size: 1em;
     min-width: 230px;
     min-height: 4px;
-    font-family: "sourcesanspro";
-
-    a {
-      color: #b4c552;
-    }
 
     a.legal, a.copy {
       float: left;
@@ -303,16 +219,6 @@ $nav-color: #9c9c9c;
     }
 
     a.scroll_indicator {
-      height: 30px;
-      width: 35px;
-      right: 25px;
-      background-repeat: no-repeat;
-      background-image: image-url('pageflow/scroll_indicator_sprite.png');
-      background-color: transparent;
-      -webkit-mask-image: none;
-      $normal-offset: -14px;
-      $hover-offset: -115px;
-      $pressed-offset: -64px;
       opacity: 0;
       visibility: hidden;
       @include transition(opacity 0.2s linear, visibility 0.2s);
@@ -322,50 +228,15 @@ $nav-color: #9c9c9c;
         visibility: visible;
       }
 
-      &.top {
-        top: 145px;
-        $top-offset: -13px;
-        background-position: $top-offset $normal-offset;
-
-        @include hover {
-          background-position: $top-offset $hover-offset;
-        }
-
-        @include pressed {
-          background-position: $top-offset $pressed-offset;
-        }
-      }
-
       &.bottom {
         z-index: 1;
-        bottom: 234px;
-        $bottom-offset: -161px;
-        background-position: $bottom-offset $normal-offset;
-
-        @include hover {
-          background-position: $bottom-offset $hover-offset;
-        }
-        @include pressed {
-          background-position: $bottom-offset $pressed-offset;
-        }
       }
     }
 
     .navigation_bar_top {
-      top: 0;
-      height: 180px;
-
       a.navigation_main, a.navigation_top, a.navigation_index {
         display: block;
       }
-
-      &:after {
-        content: " ";
-        display: block;
-        background-color: $bg-color;
-        height: 50px;
-        width: 100%;
-      }
     }
 
     &.is_animating .scroller:after {
@@ -375,16 +246,12 @@ $nav-color: #9c9c9c;
 
     .scroller {
       overflow: hidden;
-      top: 180px;
-      bottom: 268px;
 
       &:after {
         height: 100%;
         width: 100%;
         z-index: 1;
-        background-color: $bg-color;
         background-image: none;
-        opacity: 0.9;
       }
 
       ul {
@@ -393,16 +260,10 @@ $nav-color: #9c9c9c;
 
         a {
           position: relative;
-          background-color: $bg-color;
-          background-color: rgba(53, 53, 53, 0.9);
           padding-bottom: 4px;
 
           &.active {
             cursor: default;
-
-            img {
-              border-left: 5px solid #A6D513;
-            }
           }
         }
 
@@ -412,44 +273,15 @@ $nav-color: #9c9c9c;
       }
     }
 
-    &.with_home_button {
-      .navigation_bar_top {
-        height: 224px;
-      }
-
-      .scroller {
-        top: 224px;
-      }
-
-      .scroll_indicator.top {
-        top: 189px;
-      }
-    }
-
     .navigation_bar_bottom {
       display: block;
-      height: 268px;
-      bottom: 0;
-
-      & > li > a {
-        background-color: $bg-color;
-      }
 
       .indicator {
         height: 50px;
-        background-color: $bg-color;
       }
 
       .fullscreen {
         height: 44px;
-        background-color: $bg-color;
-      }
-    }
-
-    .navigation_menu_box {
-      &:before {
-        top: auto;
-        bottom: -2px;
       }
     }
 
@@ -469,40 +301,16 @@ $nav-color: #9c9c9c;
       visibility: hidden;
     }
 
-    .navigation_menu_box.navigation_volume_box .volume-control {
-      &:before, &:after {
-        background-image: image-url('pageflow/volume_control_sprite.png');
-        position: absolute;
-        width: 19px;
-        height: 19px;
-        content: " ";
-        background-repeat: no-repeat;
-        top: 8px;
-      }
-
-      &:before {
-        background-position: left top;
-        left: 0;
-        left: 12px;
-      }
-      &:after {
-        right: 8px;
-        background-position: -21px top;
-        top: 8px;
-      }
-    }
-
     .volume-control {
-      margin: 0px 20px;
+      margin: 0 20px;
 
       .volume-slider {
         width: 100px;
         height: 4px;
-        background-color: gray;
       }
+
       .volume-level {
         height: 100%;
-        background-color: #b4c552;
       }
     }
   }