furatto 0.0.3 → 1.0.0

data/vendor/assets/stylesheets/furatto/_off_screen.scss

@@ -0,0 +1,269 @@
+//Off screen
+
+//
+//@variables
+//
+
+//General
+$off-screen-navigation-color: #EFEFEF !default;
+$off-screen-navigation-width: 80% !default;
+$off-screen-navigation-font-weight: 100 !default;
+$off-screen-navigation-background-color: #333 !default;
+$off-screen-z-index: 1 !default;
+$off-screen-left-padding: 1rem !default;
+$off-screen-vertical-padding: 0.7rem !default;
+$off-screen-text-shadow-color: $off-screen-navigation-color !default;
+$off-screen-text-shadow-alpha: 0.1 !default;
+
+//Links
+$off-screen-font-size: 1.2rem !default;
+$off-screen-include-link-hover-transition: true !default;
+$off-screen-link-padding: 1rem !default;
+$include-separator-to-links: true !default;
+
+//List Header
+$off-screen-list-header-transform: uppercase !default;
+$off-screen-list-header-font-weight: bold !default;
+$off-screen-list-header-font-size: 0.7rem !default;
+
+//Divider
+$off-screen-divider-color: lighten($off-screen-navigation-background-color, 10%) !default;
+$off-screen-divider-margin: 0.21428571rem !default;
+
+//Back link
+$off-screen-back-link-padding: 0.5rem 1rem !default;
+$off-screen-back-link-font-weight: 300 !default;
+$off-screen-back-link-letter-spacing: 1px !default;
+$off-screen-back-link-font-size: 0.9rem !default;
+$off-screen-back-link-background: rgba(#000, 0.1) !default;
+$off-screen-back-link-text-transform: uppercase !default;
+$off-screen-back-link-border-color: #000 !default;
+$off-screen-back-link-border-alpha: 0.2 !default;
+
+//Header
+$off-screen-header-padding: 1rem !default;
+$off-screen-header-font-weight: 200 !default;
+
+$off-screen-toggle-menu-left-position: 0.71428571rem !default;
+$off-screen-toggle-menu-brand-name-padding-left: $off-screen-toggle-menu-left-position + 1.42857143rem !default;
+$off-screen-toggle-color: #FFF !default;
+
+//Menu toggle
+$off-screen-toggle-padding-left: px-to-rems(34) !default;
+
+.off-screen {
+  .navigation-bar {
+    .brand-section {
+      .brand-name {
+        a {
+          padding-left: $off-screen-toggle-padding-left;
+          &:before {
+            content: '';
+            width: 16px;
+            height: 0;
+            position: absolute;
+            left: $off-screen-toggle-menu-left-position;
+            top: $navigation-bar-toggle-icon-top-position;
+            @include box-shadow(0 10px 0 1px $off-screen-toggle-color,
+                                0 16px 0 1px $off-screen-toggle-color,
+                                0 22px 0 1px $off-screen-toggle-color);
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.off-screen {
+  position: relative;
+  left: 0;
+  @include backface-visibility(hidden);
+
+
+  .off-screen-navigation {
+    position: absolute; /* we can't use fixed here :( */
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: $off-screen-z-index;
+    width: $off-screen-navigation-width;
+    height: 100%;
+    min-height: 100%;
+    @include transform( translate3d(-100%, 0, 0));
+    color: darken($off-screen-navigation-color, 10%);
+
+    a {
+      text-decoration: none;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      background: $off-screen-navigation-background-color;
+      li {
+
+        & > a {
+          display: block;
+          padding: $off-screen-vertical-padding 0 $off-screen-vertical-padding $off-screen-left-padding;
+          outline: none;
+          font-size: $off-screen-font-size;
+          text-shadow: 0 0 1px rgba($off-screen-text-shadow-color, $off-screen-text-shadow-alpha);
+          @if($off-screen-include-link-hover-transition){
+            @include transition(background 0.3s, box-shadow 0.3s);
+          }
+        }
+
+        &.off-screen-list-header {
+          text-transform: $off-screen-list-header-transform;
+          padding-left: $off-screen-left-padding;
+          padding-top:  $off-screen-left-padding;
+          padding-bottom:  $off-screen-left-padding / 2;
+          font-weight: $off-screen-list-header-font-weight;
+          font-size: $off-screen-list-header-font-size;
+        }
+
+        &.off-screen-divider {
+          border-bottom: 1px solid $off-screen-divider-color;
+          margin: $off-screen-divider-margin auto;
+        }
+
+        a {
+          color: $off-screen-navigation-color; 
+          padding: $off-screen-link-padding;
+        }
+      }
+    }
+
+    a {
+      font-weight: $off-screen-navigation-font-weight;
+      @if($include-separator-to-links) {
+        border-bottom: 1px solid rgba($off-screen-navigation-color, 0.1);
+      }
+
+      &.navigation-back {
+        padding: $off-screen-back-link-padding;
+        background: $off-screen-back-link-background;
+        outline: none;
+        color: $off-screen-navigation-color;
+        text-transform: $off-screen-back-link-text-transform;
+        letter-spacing: $off-screen-back-link-letter-spacing;
+        font-weight: $off-screen-back-link-font-weight;
+        display: block;
+        font-size: $off-screen-back-link-font-size;
+        position: relative;
+        @include transition(none);
+        border-top: 1px solid rgba($off-screen-back-link-border-color, $off-screen-back-link-border-alpha);
+        border-bottom: 1px solid rgba($off-screen-back-link-border-color, $off-screen-back-link-border-alpha);
+
+        &:hover {
+          background: rgba($off-screen-back-link-border-color,0.1);
+        }
+      }
+
+      &:hover {
+        color: darken($off-screen-navigation-color, 10%);
+        background: rgba($off-screen-navigation-background-color, $off-screen-back-link-border-alpha);
+      }
+    }
+  }
+
+}
+
+
+.off-screen-level {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: $off-screen-navigation-background-color;
+  @include translate3d(-100%, 0, 0);
+
+  .off-screen-header {
+    padding: $off-screen-header-padding;
+    font-weight: $off-screen-header-font-weight;
+    text-align: center;
+
+    .header {
+      color: $off-screen-navigation-color;
+    }
+  }
+}
+
+/* overlays for pusher and for level that gets covered */
+.off-screen::after,
+.off-screen-level::after,
+.off-screen-level::before {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0;
+	height: 0;
+	content: '';
+	@include opacity(0);
+}
+
+.off-screen::after,
+.off-screen-level::after {
+  @include transition(opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s);
+}
+
+.off-screen-level::after {
+	z-index: -1;
+}
+
+.off-screen.off-screen-pushed::after,
+.off-screen-level.off-screen-level-overlay::after {
+	width: 100%;
+	height: 100%;
+	@include opacity(1);
+  @include transition(opacity 0.3s);
+}
+
+.off-screen,
+.off-screen-level {
+  @include transition(all 0.5s);
+}
+
+/* overlap */
+.off-screen-overlap .off-screen-level.off-screen-level-open {
+  @include translate3d(-40px, 0, 0);
+}
+
+/* First level */
+.off-screen-navigation > .off-screen-level,
+.off-screnn-navigation > .off-screen-level.off-screen-level-open,
+.off-screen-navigation.off-screen-overlap > .off-screen-level,
+.off-screen-navigation.off-screen-overlap > .off-screen-level.off-screen-level-open {
+  @include translate3d(0, 0, 0);
+	@include box-shadow(none);
+}
+
+/* cover */
+.off-screen-cover .off-screen-level.off-screen-level-open {
+  @include translate3d(0, 0, 0);
+}
+
+.off-screen-cover .off-screen-level.off-screen-level-open > ul > li > .off-screen-level:not(.off-screen-level-open) {
+  @include translate3d(-100%, 0, 0);
+}
+
+/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
+/* We'll show the first level only */
+.no-csstransforms3d .off-screen,
+.no-js .off-screen {
+	padding-left: 300px;
+}
+
+.no-csstransforms3d .off-screen-navigation .off-screen-level,
+.no-js .off-screen-navigation .off-screen-level {
+	display: none;
+}
+
+.no-csstransforms3d .off-screen-navigation > .off-screen-level,
+.no-js .off-screen-navigation > .off-screen-level {
+	display: block;
+}
+

data/vendor/assets/stylesheets/furatto/_pagination.scss

@@ -0,0 +1,78 @@
+//Pagination
+
+//
+//@variables
+//
+
+$pagination-bg-color: #2980b9 !default;
+$pagination-margin: 0 !default;
+$pagination-color: #08c !default;
+$pagination-font-size: px-to-rems(13) !default;
+$pagination-list-items-padding: px-to-rems(2) px-to-rems(9) !default;
+$pagination-border-radius: 0px !default;
+$pagination-active-items-bg-color: $pagination-bg-color !default;
+$pagination-active-items-color: #FFF !default;
+$pagination-disabled-color: #FFF !default;
+$pagination-disabled-cursor: not-allowed !default;
+
+$include-pagination-transition-list-items: true !default;
+
+//Pagination alignment
+$include-pagination-alignment-center: true !default;
+$include-pagination-alignment-right: true !default;
+
+
+ul.pagination {
+  margin: $pagination-margin;
+  font-size: $pagination-font-size;
+
+  display: block;
+  color: $pagination-color;
+
+  & > li {
+    display: inline-block;
+
+    & > a, 
+    & > span {
+      padding: $pagination-list-items-padding;
+      @if($include-pagination-transition-list-items) {
+        @include transition((background 0.3s ease-out, color 0.3s ease-out));
+      }
+      @include border-radius($pagination-border-radius);
+    }
+
+    & > a:hover, 
+    &.active > a,
+    &.active > span {
+      background: $pagination-active-items-bg-color;
+      @include border-radius($pagination-border-radius);
+      color: $pagination-active-items-color;
+      text-decoration: none;
+    }
+
+    &.disabled {
+      & > a, 
+      & > a:hover,
+      & > span {
+        background: lighten($pagination-bg-color, 35%);
+        color: $pagination-disabled-color;
+        cursor: $pagination-disabled-cursor;
+        @include border-radius($pagination-border-radius);
+      }
+    }
+  }
+
+  //Pagination Alignment
+  @if($include-pagination-alignment-center) {
+    &.center {
+      text-align: center;
+    }
+  }
+
+  @if($include-pagination-alignment-right) {
+    &.right {
+      text-align: right;
+    }
+  }
+}
+

data/vendor/assets/stylesheets/furatto/_responsive_utilities.scss

@@ -0,0 +1,244 @@
+//Responsive utilities
+
+//
+//@variables
+//
+
+// General settings
+
+$media-display: "only screen" !default;
+
+// Responsive screen sizes
+$extra-small-screen: 34.28571429rem !default;
+$extra-small-screen-max: 34.21428571rem !default;
+$extra-small-media: "(max-width: #{$extra-small-screen-max})" !default;
+
+$small-screen: 54.85714286rem !default;
+$small-screen-max: 54.78571429rem !default;
+$small-screen-media: "(max-width: #{$small-screen-max})" !default;
+$small-screen-range: "(min-width: #{$small-screen}) and (max-width: #{$small-screen-max})" !default;
+
+$medium-screen: 70.85714286rem !default;
+$medium-screen-max: 70.78571429rem !default;
+$medium-screen-range: "(min-width: #{$medium-screen}) and (max-width: #{$medium-screen-max})" !default;
+
+$large-screen: 85.71428571rem !default;
+$large-screen-range: "(min-width: #{$large-screen})" !default;
+
+// Responsive screen orientations
+$portrait-media: "#{$media-display} and (orientation: portrait)" !default;
+$landscape-media: "#{$media-display} and (orientation: landscape)" !default;
+
+
+//Visible on extra small style
+.visible-on-xsmall {
+  @include responsive-invisibility();
+  @media #{$extra-small-media} {
+    @include responsive-visibility();
+  }
+  &.visible-on-small {
+    @media #{$small-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+  &.visible-on-medium {
+    @media #{$medium-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+  &.visible-on-large {
+    @media  #{$large-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+}
+
+//Visible on small style
+.visible-on-small {
+  @include responsive-invisibility();
+  &.visible-on-xsmall {
+    @media #{$extra-small-media} {
+      @include responsive-visibility();
+    }
+  }
+  @media #{$small-screen-range} {
+    @include responsive-visibility();
+  }
+  &.visible-on-medium {
+    @media #{$medium-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+  &.visible-on-large {
+    @media  #{$large-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+}
+
+//Visible on medium style
+.visible-on-medium {
+  @include responsive-invisibility();
+
+  &.visible-xs {
+    @media #{$extra-small-media} {
+      @include responsive-visibility();
+    }
+  }
+  &.visible-sm {
+    @media #{$small-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+  @media #{$medium-screen-range} {
+    @include responsive-visibility();
+  }
+  &.visible-lg {
+    @media  #{$large-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+}
+
+//Visible on large style
+.visible-on-large {
+  @include responsive-invisibility();
+  &.visible-on-xsmall {
+    @media #{$extra-small-media} {
+      @include responsive-visibility();
+    }
+  }
+  &.visible-on-small {
+    @media #{$small-screen-range} {
+      @include responsive-visibility();
+    }
+  }
+  &.visible-on-medium {
+    @media #{$medium-screen-range} {      
+      @include responsive-visibility();
+    }
+  }
+  @media #{$large-screen-range} {
+    @include responsive-visibility();
+  }
+}
+
+//Hidden on extra small style
+.hidden-on-xsmall {
+  @include responsive-visibility();
+  @media #{$small-screen-media} {
+    @include responsive-invisibility();
+  }
+  &.hidden-on-small {
+    @media #{$small-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+  &.hidden-on-medium {
+    @media #{$medium-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+  &.hidden-on-large {
+    @media #{$large-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+}
+
+//Hidden on small style
+.hidden-on-small {
+  @include responsive-visibility();
+  &.hidden-on-xsmall {
+    @media #{$extra-small-media} {
+      @include responsive-invisibility();
+    }
+  }
+  @media #{$small-screen-range} {
+    @include responsive-invisibility();
+  }
+  &.hidden-on-medium {
+    @media #{$medium-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+  &.hidden-on-large {
+    @media #{$large-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+}
+
+//Hidden on medium style
+.hidden-on-medium {
+  @include responsive-visibility();
+  &.hidden-on-xsmall {
+    @media #{$extra-small-media} {
+      @include responsive-invisibility();
+    }
+  }
+  &.hidden-on-small {
+    @media #{$small-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+  @media #{$medium-screen-range} {
+    @include responsive-invisibility();
+  }
+  &.hidden-on-large {
+    @media #{$large-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+}
+
+//Hidden on large style
+.hidden-on-large {
+  @include responsive-visibility();
+  &.hidden-on-xsmall {
+    @media #{$extra-small-media} {
+      @include responsive-invisibility();
+    }
+  }
+  &.hidden-on-small {
+    @media #{$small-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+  &.hidden-on-medium {
+    @media #{$medium-screen-range} {
+      @include responsive-invisibility();
+    }
+  }
+  @media #{$large-screen-range} {
+    @include responsive-invisibility();
+  }
+}
+
+//Portrait media styling
+@media #{$portrait-media} {
+  .show-on-portrait,
+  .hide-on-landscape
+  {
+    @include responsive-visibility();
+  }
+  .hide-on-portrait,
+  .show-on-landscape
+  {
+    @include responsive-invisibility();
+  }
+}
+
+//Landscape media styling
+@media #{$landscape-media} {
+  .show-on-landscape,
+  .hide-on-portrait
+  {
+    @include responsive-visibility();
+  }
+  .hide-on-landscape,
+  .show-on-portrait
+  {
+    @include responsive-invisibility();
+  }
+}