furatto 0.0.3 → 1.0.0

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

@@ -0,0 +1,297 @@
+//Modal
+
+//
+//@variables
+//
+
+//General settings
+$modal-width: 80% !default;
+$modal-z-index: 1050 !default;
+$modal-color: #FFF !default;
+$modal-top-position: px-to-rems(80) !default;
+$modal-position: absolute !default;
+
+//Modal styles
+$modal-primary-background-color: #3498DB !default;
+$modal-default-background-color: #F0F0F0 !default;
+$modal-danger-background-color: #E74C3C !default;
+$modal-funky-background-color: #9b59b6 !default;
+$modal-warning-background-color: #e67e22 !default;
+$modal-success-background-color: #2ecc71 !default;
+$modal-info-background-color: #34495e !default;
+
+//Modal content
+$modal-content-padding: px-to-rems(15) px-to-rems(40) px-to-rems(30) !default;
+$modal-content-font-weight: 300 !default;
+$modal-content-font-size: px-to-rems(18) !default;
+$modal-content-ul-padding: 0 0 px-to-rems(30) px-to-rems(20) !default;
+$modal-content-list-item-padding: px-to-rems(5) 0 !default;
+
+//Overlay
+$modal-overlay-z-index: $modal-z-index - 10 !default;
+$modal-overlay-background: #000 !default;
+$modal-overlay-background-opacity: 0.8 !default;
+$modal-overlay-show-opacity: 1 !default;
+
+//Header
+$modal-header-padding: px-to-rems(6) !default;
+$modal-header-text-align: center !default;
+$modal-header-font-size: px-to-rems(38) !default;
+$modal-header-font-weight: $modal-content-font-weight !default;
+$modal-header-background-color: #000 !default;
+$modal-header-opacity: 0.8 !default;
+
+//Modal variations
+$modal-radius: px-to-rems(3) !default;
+
+//Modal footer
+$modal-footer-padding: px-to-rems(10) 0 !default;
+
+//Modal extra themes
+$include-modal-extra-themes: false !default;
+$include-fade-in-scale-up-effect: true !default;
+$include-slide-from-right-effect: true !default;
+$include-slide-from-bottom-effect: true !default;
+$include-fall-effect: true !default;
+$include-slide-stick-effect: true !default;
+$include-super-scaled-effect: true !default;
+
+//
+//@mixin
+//
+// We use this mixin to define the base modal styling
+//
+
+@mixin modal-base {
+  position: $modal-position;
+  height: auto;
+  z-index: $modal-z-index;
+  @include backface-visibility();
+  @include transform(translateX(-50%) translateY(-50%));
+  visibility: hidden;
+  color: $modal-color;
+  top: $modal-top-position;
+  width: $modal-width;
+  margin-left: -40%;
+  left: 50%;
+
+  &.modal-show {
+    visibility: visible;
+  }
+
+  &.radius {
+    .modal-content {
+      @include border-radius($modal-radius);
+    }
+  }
+}
+
+//
+//@mixin
+//
+// We us this mixin to define the overlay styling
+//
+
+@mixin modal-overlay {
+  overflow-x: hidden;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+  top: 0;
+  left: 0;
+  z-index: $modal-overlay-z-index;
+  opacity: 0;
+  background: rgba($modal-overlay-background, $modal-overlay-background-opacity);
+  @include transition(all 0.3s);
+}
+
+//
+//@mixin
+//
+// We use this mixin to define the modal themes
+//
+
+@mixin modal-theme($background) {
+  background: $background;
+}
+
+//
+//@mixin
+// We us this mixin to define the modal header 
+//
+
+@mixin modal-header {
+  margin: 0;
+  padding: $modal-header-padding;
+  text-align: $modal-header-text-align;
+  font-size: $modal-header-font-size;
+  font-weight: $modal-header-font-weight;
+  opacity: $modal-header-opacity;
+  background: rgba($modal-header-background-color ,0.1);
+  color: $modal-color;
+}
+
+//
+//@mixin
+// We use this mixin to define the model content styling
+//
+//
+@mixin model-content {
+  padding: $modal-content-padding;
+  font-weight: $modal-content-font-weight;
+  font-size: $modal-content-font-size;
+
+  & > ul {
+    padding: $modal-content-ul-padding;
+    margin: 0;
+
+    li {
+      padding: $modal-content-list-item-padding;
+    }
+  }
+}
+
+//
+//@mixin
+// We use this mixin to define de model footer styling
+//
+//
+@mixin modal-footer {
+  padding: $modal-footer-padding;
+}
+
+.modal {
+  @include modal-base;
+
+  //modal styles
+  .modal-content {
+    @include model-content;
+
+    .modal-footer {
+      @include modal-footer;
+    }
+  }
+  &.alpha { @include modal-theme(transparent) }
+  &.default { @include modal-theme($modal-default-background-color)}
+  &.primary { @include modal-theme($modal-primary-background-color)}
+  &.danger { @include modal-theme($modal-danger-background-color)}
+
+  @if($include-modal-extra-themes) {
+    &.funky { @include modal-theme($modal-funky-background-color)}
+    &.warning { @include modal-theme($modal-warning-background-color)}
+    &.success { @include modal-theme($modal-success-background-color)}
+    &.info { @include modal-theme($modal-info-background-color) }
+  }
+
+  .modal-header {
+    @include modal-header;
+  }
+}
+
+.modal-overlay {
+  @include modal-overlay;
+
+  &.modal-show-overlay {
+    @include opacity($modal-overlay-show-opacity);
+    visibility: visible;
+  }
+}
+
+//Animations
+
+@if($include-fade-in-scale-up-effect) {
+  // Effect 1: Fade in and scale up
+  .modal-effect-1 {
+    @include transform(scale(0.7));
+    @include opacity(0);
+    @include transition(all 0.3s);
+  }
+
+  .modal-show.modal-effect-1 {
+    @include transform(scale(1));
+    @include opacity(1);
+  }
+}
+
+@if($include-slide-from-right-effect) {
+  // Effect 2: Slide from the right
+  .modal-effect-2  {
+    @include transform(translateX(20%));
+    @include opacity(0);
+    @include transition(all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9));
+  }
+
+  .modal-show.modal-effect-2  {
+    @include transform(translateX(0));
+    @include opacity(1);
+  }
+}
+
+@if($include-slide-from-bottom-effect) {
+  /* Effect 3: Slide from the bottom */
+  .modal-effect-3 {
+    @include transform(translateY(20%));
+    @include opacity(0);
+    @include transition(all 0.3s);
+  }
+
+  .modal-show.modal-effect-3 {
+    @include transform(translateY(0));
+    @include opacity(1);
+  }
+}
+
+@if($include-fall-effect) {
+  /* Effect 4: fall */
+  .modal-effect-4.modal-modal {
+    @include perspective($p: 1300px);
+  }
+
+  .modal-effect-4  {
+    @include transform-style(preserve-3d);
+    @include transform(translateZ(600px) rotateX(20deg));
+    @include opacity(0);
+  }
+
+  .modal-show.modal-effect-4  {
+    @include transition(all 0.3s ease-in);
+    @include transform(translateZ(0px) rotatex(0deg));
+    @include opacity(1);
+  }
+}
+
+@if($include-slide-stick-effect) {
+  /* Effect 5:  slide and stick to top */
+  .modal-effect-5 {
+    top: 0;
+    @include transform(translateX(-50%));
+  }
+
+  .modal-effect-5 {
+    @include transform(translateY(-200%));
+    @include transition(all 0.3s);
+    @include opacity(0);
+  }
+
+  .modal-show.modal-effect-5 {
+    @include transform(translateY(0%));
+    @include border-radius(0 0 3px 3px);
+    border-radius: 0 0 3px 3px;
+    @include opacity(1);
+  }
+}
+
+@if($include-super-scaled-effect) {
+  /* Effect 6: Super scaled */
+  .modal-effect-6  {
+    @include transform(scale(2));
+    @include opacity(0);
+    @include transition(all 0.3s);
+  }
+
+  .modal-show.modal-effect-6 {
+    @include transform(scale(1));
+    @include opacity(1);
+  }
+}

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

@@ -0,0 +1,127 @@
+//Nav
+
+@import "compass/css3";
+
+//
+//@variables
+//
+
+//Navigation settings
+$navigation-style-type: none !default;
+$navigation-list-position: inside !default;
+$navigation-padding: 1rem 0 !default;
+$navigation-link-color: #777 !default;
+
+//Navigation list items
+$navigation-list-item-font-size: 0.9rem !default;
+$navigation-list-item-margin-bottom: 0.1 !default;
+$navigation-list-item-active-color: #08C !default;
+$navigation-list-link-hover-color: $navigation-list-item-active-color !default;
+$navigation-list-link-hover-text-decoration: none !default;
+$navigation-list-link-padding: 0.333rem 0 !default;
+$navigation-list-link-display: inline-block !default;
+
+//Navigation list header
+$navigation-header-text-transform: uppercase !default;
+$navigation-header-padding: 0.333rem 0 !default;
+$navigation-header-color: #333 !default;
+$navigation-header-font-size: 0.85714286rem !default;
+
+//Navigation divider
+$navigation-divider-border-width: 1px !default;
+$navigation-divider-border-color: #EFEFEF !default;
+$navigation-divider-margin: 8px 0 !default;
+
+//Navigation variations
+$navigation-inline-margin-bottom: 0.55rem !default;
+$navigation-inline-active-background: #1abc9c !default;
+$navigation-inline-active-radius: 0.14285714rem !default;
+$navigation-inline-active-color: #FFF !default;
+$navigation-inline-active-padding: 0.21428571rem !default;
+$navigation-inline-link-color: #999 !default;
+$navigation-inline-link-hover: #08C !default;
+
+.navigation {
+  margin: 0;
+  display: block;
+  list-style-type: $navigation-style-type;
+  list-style-position: $navigation-list-position;
+  padding: $navigation-padding;
+
+  li {
+    font-size: $navigation-list-item-font-size;
+    margin-bottom: $navigation-list-item-margin-bottom;
+
+    &.active,
+    &.active a {
+      color: $navigation-list-item-active-color;
+      cursor: text;
+    }
+
+    &.header {
+      text-transform: $navigation-header-text-transform;
+      padding: $navigation-header-padding;
+      color: $navigation-header-color;
+      font-size: $navigation-header-font-size;
+    }
+
+    &.divider {
+      border-bottom: $navigation-divider-border-width solid $navigation-divider-border-color;
+      margin: $navigation-divider-margin;
+      height: 0;
+    }
+    
+    a {
+      display: $navigation-list-link-display;
+      padding: $navigation-list-link-padding;
+      color: $navigation-link-color;
+
+      &:hover,
+      &:focus {
+        color: $navigation-list-link-hover-color;
+        text-decoration: $navigation-list-link-hover-text-decoration;
+      }
+    }
+  }
+
+  &.inline {
+    overflow: hidden;
+    margin-bottom: $navigation-inline-margin-bottom;
+
+    li {
+      float: left;
+      margin-left:$navigation-inline-list-item-margin-left;
+
+      &.divider {
+        display: none;
+      }
+
+      &.active,
+      &.active > a {
+        background: $navigation-inline-active-background;
+        @include border-radius($navigation-inline-active-radius); 
+        color: $navigation-inline-active-color;
+        padding: $navigation-inline-active-padding;
+
+        &:hover,
+        &:focus {
+          color: $navigation-inline-active-color;
+        }
+      }
+
+      &, & a {
+        color: $navigation-inline-link-color;
+        display: $navigation-list-link-display;
+      }
+
+      a {
+        &:hover,
+        &:focus {
+          color: $navigation-inline-link-hover;
+        }
+      }
+
+    }
+  }
+
+}

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

@@ -0,0 +1,338 @@
+/*------------------------------------*\
+    $NAVBAR
+\*------------------------------------*/
+/**
+ * Basic navbar structural styling based on bootstrap. 
+ * http://twitter.github.io/bootstrap/components.html#navbar
+ * 
+ * Designed and built @kurenn  
+ */
+
+//
+//@variables
+//
+
+//Navigation general settings
+$navigation-bar-background: #191818 !default;
+$navigation-margin-bottom: 10px !default;
+$navigation-bar-color: #FFF !default;
+$navigation-bar-font-weight: 300 !default;
+$navigation-font-size: px-to-rems(13) !default;
+$navigation-fixed-z-index: 1030 !default;
+$navigation-bar-border-bottom: transparent !default;
+$navigation-bar-divider-color: scale-color($navigation-bar-background, $lightness: 13%) !default;
+
+//Brand section
+$navigation-bar-brand-section-font-size: px-to-rems(18) !default;
+$navigation-bar-brand-section-font-weight: 400 !default;
+
+//Navigation links settings
+$navigation-bar-link-color: #FFF !default;
+$navigation-bar-link-hover-color: #999 !default;
+$navigation-bar-link-hover-decoration: none !default;
+$navigation-bar-hover-link-background-color: darken($navigation-bar-background, 5%) !default;
+
+//Buttons settings
+$navigation-bar-button-font-size: $navigation-font-size !default;
+$navigation-bar-button-height: 35px !default;
+$navigation-bar-button-margin-left: px-to-rems(8) !default;
+$navigation-bar-button-margin-right: px-to-rems(8) !default;
+$navigation-bar-menu-color: #FFF !default;
+
+//Icons settings
+$navigation-bar-icon-margin-right: 5px !default;
+
+//Text settings
+$navigation-bar-text-color: #CCC !default;
+
+//Active items
+$navigation-bar-active-color: #FFF !default;
+$navigation-bar-active-hover-color: darken($navigation-bar-active-color, 5%) !default;
+
+//Menu toggle
+$navigation-bar-menu-toggle-text-transform: uppercase !default;
+
+//Dropdown
+$navigation-bar-arrow-color: $navigation-bar-link-color !default;
+$navigation-bar-arrow-hover-color: $navigation-bar-link-hover-color !default;
+$navigation-bar-dropdown-z-index: $navigation-fixed-z-index + 10 !default;
+$navigation-bar-dropdown-header-text-transform: uppercase !default;
+$navigation-bar-dropdown-header-padding: px-to-rems(9) px-to-rems(17) px-to-rems(2) !default;
+$navigation-bar-dropdown-header-color: #777 !default;
+$navigation-bar-dropdown-header-font-weight: bold !default;
+$navigation-bar-dropdown-header-font-size: px-to-rems(8) !default;
+$navigation-bar-dropdown-divider-height: px-to-rems(1) !default; 
+$navigation-bar-dropdown-anchor-height: 45px !default;
+$navigation-bar-dropdown-anchor-line-height: $navigation-bar-dropdown-anchor-height !default;
+$navigation-bar-dropdown-right-position: 0px !default;
+
+
+//Media
+$media-collapse-width: 768px !default;
+$navigation-bar-collapse-query: "#{$media-display} and (max-width: #{$media-collapse-width})" !default;
+$navigation-bar-uncollapse-query: "#{$media-display} and (min-width: #{$media-collapse-width})" !default;
+
+.navigation-bar {
+  background: $navigation-bar-background;
+  height: $navigation-bar-height;
+  margin-bottom: $navigation-margin-bottom;
+  overflow: hidden;
+  font-weight: $navigation-bar-font-weight;
+  border-bottom: $navigation-bar-border-bottom;
+
+  a {
+    @include touch-callout;
+  }
+
+  &.opened {
+    height: auto;
+
+    .brand-section .menu-toggle a {
+      color: $navigation-bar-link-hover-color;
+    } 
+
+    ul:not(.brand-section) {
+      width: 100%;
+
+      li.with-dropdown {
+        .dropdown {
+          position: static;
+        }
+      }
+
+      li {
+        width: 100%;
+        display: block;
+
+        .button {
+          width: 96%;
+          margin-left: auto;
+          margin-right: auto;
+        }
+
+        &.divider {
+          height: auto;
+          border-bottom: 1px solid $navigation-bar-divider-color;
+        }
+      }
+    }
+
+  }
+
+  // Plain text in topbar
+  .navigation-bar-text {
+    margin: 0;
+    line-height: $navigation-bar-height;
+    color: $navigation-bar-text-color;
+    display: inline-block;
+    font-size: $navigation-font-size;
+    padding: 0 $navigation-bar-height / 3;
+  }
+
+  .button {
+    color: #FFF;
+    font-size: $navigation-bar-button-font-size;
+    height: $navigation-bar-button-height;
+    line-height: $navigation-bar-button-height;
+    margin-left: $navigation-bar-button-margin-left;
+    margin-right: $navigation-bar-button-margin-right;
+    margin-top: ($navigation-bar-height / 2) - ($navigation-bar-button-height / 2);
+
+    &:hover {
+      color: #FFF;
+    }
+  }
+
+  [class^="fa"], 
+  [class*=" fa"] {
+    margin-right: $navigation-bar-icon-margin-right;
+    margin-left: $navigation-bar-icon-margin-right;
+  }
+
+  ul.pull-right {
+    li.with-dropdown {
+      .dropdown { 
+        right: $navigation-bar-dropdown-right-position; 
+        left: auto;
+      }
+    }
+  }
+
+  ul {
+    margin: 0;
+    list-style: none;
+    font-size: $navigation-font-size;
+    float: left;
+    width: auto;
+
+    li {
+      float: left;
+
+      &.active > a {
+        color: $navigation-bar-active-color;
+        background: darken($navigation-bar-background, 10%);
+
+        &:hover {
+          color: $navigation-bar-active-hover-color;
+        }
+      }
+
+      a:hover:not(.button) {
+        background: $navigation-bar-hover-link-background-color; 
+      }
+
+      a {
+        display: block;
+        padding: 0 $navigation-bar-height / 3;
+        height: $navigation-bar-height;
+        line-height: $navigation-bar-height;
+        color: $navigation-bar-link-color;
+
+        &:hover { 
+          text-decoration: $navigation-bar-link-hover-decoration; 
+          color: $navigation-bar-link-hover-color;
+        }
+      }
+
+      &.divider {
+        height: $navigation-bar-height; 
+        border-left: 1px solid $navigation-bar-divider-color;
+      }
+    }
+
+    li.with-dropdown {
+      position: relative;
+
+      &.opened {
+        .dropdown {
+          display: block;
+        }
+      }
+
+      .dropdown {
+        display: none; //hides the first time
+        position: absolute;
+        float: left;
+        top: auto;
+        left: 0;
+        z-index: $navigation-bar-dropdown-z-index;
+        min-width: 100%;
+
+        li {
+          width: 100%;
+          height: auto;
+          background: $navigation-bar-background;
+          white-space: nowrap;
+
+          a {
+            height: $navigation-bar-dropdown-anchor-height;
+            line-height: $navigation-bar-dropdown-anchor-line-height;
+          }
+
+          &.dropdown-header {
+            text-transform: $navigation-bar-dropdown-header-text-transform;
+            padding: $navigation-bar-dropdown-header-padding;
+            margin-bottom: 0;
+            color: $navigation-bar-dropdown-header-color;
+            font-weight: $navigation-bar-dropdown-header-font-weight;
+            font-size: $navigation-bar-dropdown-header-font-size;
+          }
+
+          &.divider {
+            height: $navigation-bar-dropdown-divider-height; 
+            border-top: 1px solid $navigation-bar-divider-color;
+          }
+        }
+      }
+    }
+
+  }
+
+  ul.pull-right {
+    float: right;
+  }
+
+  .brand-section {
+    font-size: $navigation-bar-brand-section-font-size; 
+    position: relative;
+    font-weight: $navigation-bar-brand-section-font-weight;
+    li {
+      padding: 0;
+
+      &.menu-toggle {
+        display: none;
+        text-transform: $navigation-bar-menu-toggle-text-transform;
+        font-size: $navigation-font-size;
+        position: relative;
+        text-indent: -48px;
+        right: 20px;
+        width: 34px;
+
+        a:after {
+          content: '';
+          width: 16px;
+          height: 0;
+          position: absolute;
+          right: 0;
+          top: $navigation-bar-toggle-icon-top-position;
+          @include box-shadow(0 10px 0 1px $navigation-bar-menu-color,
+                              0 16px 0 1px $navigation-bar-menu-color,
+                              0 22px 0 1px $navigation-bar-menu-color);
+        }
+      }
+    }
+  }
+
+  &.fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: $navigation-fixed-z-index;
+  }
+
+}
+
+@media #{$navigation-bar-uncollapse-query} {
+  .navigation-bar { overflow: visible; }
+}
+
+//iPad fix
+@media only screen and (orientation: portrait) {
+  .navigation-bar { overflow: hidden; }
+}
+
+@media #{$navigation-bar-collapse-query} {
+  .off-screen {
+    .navigation-bar {
+      .brand-section {
+        .brand-name {
+          a {
+            &:before {
+              display: inline-block;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .navigation-bar {
+    .brand-section {
+      width: 100%;
+      font-size: $navigation-bar-brand-section-font-size - 0.15; 
+
+      li {
+
+        &.menu-toggle {
+          display: block;
+          float: right;
+
+          &.hidden {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+}