furatto 0.0.3 → 1.0.0

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

@@ -0,0 +1,122 @@
+//Images
+
+//
+//@variables
+//
+
+@import "functions";
+
+//Images variations
+$img-radius: px-to-rems(3) !default;
+$img-round: 50rem !default;
+
+//Image general settings
+$img-polaroid-padding: 0.28571429rem !default;
+$img-polaroid-background: #FFF !default;
+$img-polaroid-border-width: 0.07142857rem !default;
+$img-polaroid-border-style: solid !default;
+$img-polaroid-border-color: rgba(#000, 0.2) !default;
+$img-display: inline-block !default;
+$img-frame-margin: 5px !default;
+
+//Experimental
+$include-img-experimental: true !default;
+$include-img-flexible-ratios: true !default;
+
+//
+//@mixin
+//
+@mixin img-responsive($display: $img-display) {
+  max-width: 100%;
+  height: auto;
+  display: $display;
+}
+
+//General img styling
+//Deprecated on IE9+
+img {
+  -ms-interpolation-mode: bicubic;
+  vertical-align: middle;
+
+  //Images responsive styling
+  &.responsive {
+    @include img-responsive;
+  }
+
+  //Circular images
+  &.circular {
+    @include border-radius($img-round);
+  }
+
+  //Well images
+  &.radius {
+    @include border-radius($img-radius);
+  }
+
+  //Images with borders
+  &.polaroid {
+    padding: $img-polaroid-padding;
+    border: $img-polaroid-border-width $img-polaroid-border-style $img-polaroid-border-color;
+    background: $img-polaroid-background;
+  }
+
+}
+
+//iOS fix for rounded and polaroid images
+.img-frame {
+  display: $img-display;
+  border: $img-polaroid-border-width $img-polaroid-border-style $img-polaroid-border-color;
+
+  img {
+    margin: $img-frame-margin;
+  }
+
+  &.circular {
+    @include border-radius($img-round);
+    img {
+      @extend .circular;
+    }
+  }
+}
+
+//Experimental
+// Kudos to Nicolas Gallagher
+@if($include-img-experimental) {
+  .cover-image {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin: 0 auto 1em;
+    max-height: 300px;
+    max-width: 100%;
+
+    @if($include-img-flexible-ratios == false) {
+      padding-bottom: 50%;
+    }
+
+    &:before {
+      content: '';
+      display: block;
+      width:100%;
+    }
+
+    @if($include-img-flexible-ratios) {
+      &.ratio-2by1:before {
+        padding-bottom: 50%;
+      }
+      &.ratio-3by1:before {
+        padding-bottom: 33.33%;
+      }
+      &.ratio-4by1:before {
+        padding-bottom: 25%;
+      }
+      &.ratio-4by3:before {
+        padding-bottom: 75%;
+      }
+    }
+
+  }
+}

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

@@ -0,0 +1,97 @@
+//Labels
+
+//
+//@variables
+//
+@import "functions";
+
+//Label general settings
+$label-padding: px-to-rems(3) px-to-rems(6) !default;
+$label-font-size: px-to-rems(11) !default;
+$label-font-weight: normal !default;
+$label-font-color: #FFF !default;
+$label-font-shadow-alpha: 0.20 !default;
+$label-font-shadow-x: 0 !default;
+$label-font-shadow-y: -1px !default;
+$label-hover-decoration: none !default;
+$label-default-background:  #95A5A6 !default;
+
+//Label variations
+$label-radius: px-to-rems(3) !default;
+$label-round: px-to-rems(1000) !default;
+
+//Label background variations
+$label-primary-background: #3498db !default;
+$label-success-background: #2ecc71 !default;
+$label-danger-background: #e74c3c !default;
+$label-warning-background: #e67e22 !default;
+
+//
+//@mixin
+// We use this mixin to build the general settings for labels
+//
+@mixin label-base {
+  display: inline-block;
+  *display: inline-block;
+  padding: $label-padding;
+  font-size: $label-font-size;
+  font-weight: $label-font-weight;
+  color: $label-font-color;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-shadow: $label-font-shadow-x $label-font-shadow-y 0 rgba(0,0,0, $label-font-shadow-alpha);
+
+  &:hover {
+    text-decoration: $label-hover-decoration;
+  }
+}
+
+//
+//@mixin
+// We use this mixin to add styling to the labels
+//
+// $background-color - Is the background for the labels. Default: $label-default-background
+
+@mixin label-style($background-color: $label-default-background) {
+  background: $background-color;
+}
+
+
+//
+//@mixin
+//
+// We use this mixin to let the user create custom buttons
+// $background-color - Is the background color for the button to create. Default: $label-default-background
+// $include-round - Wheter or not to add the round style on the custom button
+// $include-radius - Wheter or not to add the radius size style on the custom button
+// Example .custom-label { @include label($background-color: #1abc9c); }
+//
+
+@mixin label($background-color: $label-default-background, $include-round: true, $include-radius: true) {
+  @include label-base;
+  @include label-style($background-color);
+
+  @if $include-round {
+    &.round { @include border-radius($label-round); }
+  }
+
+  @if $include-radius {
+    &.radius { @include border-radius($label-radius); }
+  }
+}
+
+//Label style definition
+.label {
+  @include label-base;
+  @include label-style;
+
+  &.round { @include border-radius($label-round); }
+  &.radius { @include border-radius($label-radius); }
+
+
+  //Label styles
+  &.primary { @include label-style($label-primary-background); }
+  &.success { @include label-style($label-success-background); }
+  &.danger { @include label-style($label-danger-background); }
+  &.warning { @include label-style($label-warning-background); }
+}

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

@@ -0,0 +1,200 @@
+//Media queries
+// Based on Rafal Bromirski Sass example - http://twitter.com/paranoida
+
+//
+//@variables
+//
+
+@mixin screen($resMin, $resMax)
+{
+  @media #{$media-display} and (min-width: $resMin) and (max-width: $resMax)
+  {
+    @content;
+  }
+}
+
+@mixin max-screen($res)
+{
+  @media #{$media-display} and (max-width: $res)
+  {
+    @content;
+  }
+}
+
+@mixin min-screen($res)
+{
+  @media #{$media-display} and (min-width: $res)
+  {
+    @content;
+  }
+}
+
+@mixin screen-height($resMin, $resMax)
+{
+  @media #{$media-display} and (min-height: $resMin) and (max-height: $resMax)
+  {
+    @content;
+  }
+}
+
+@mixin max-screen-height($res)
+{
+  @media #{$media-display} and (max-height: $res)
+  {
+    @content;
+  }
+}
+
+@mixin min-screen-height($res)
+{
+  @media #{$media-display} and (min-height: $res)
+  {
+    @content;
+  }
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- hdpi ------------------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)
+// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
+
+@mixin hdpi($ratio: 1.3)
+{
+  @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
+  only screen and (min--moz-device-pixel-ratio: $ratio),
+  only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
+  only screen and (min-resolution: #{round($ratio*96)}dpi),
+  only screen and (min-resolution: #{$ratio}dppx)
+  {
+    @content;
+  }
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- iphone ----------------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+@mixin phone
+{
+  $deviceMinWidth: 320px;
+  $deviceMaxWidth: 480px;
+
+  @media #{$media-display} and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) {
+    @content;
+  }
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- iphone-retina ---------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+@mixin iphone4($orientation: all)
+{
+  $deviceMinWidth: 320px;
+  $deviceMaxWidth: 480px;
+  $devicePixelRatio: 2;
+  $deviceAspectRatio: '2/3';
+
+  @if $orientation == all
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
+    {
+      @content;
+    }
+  }
+  @else
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: 2/3) and (orientation:#{$orientation})
+    {
+      @content;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- iphone-5 --------------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+@mixin iphone5($orientation: all)
+{
+  $deviceMinWidth: 320px;
+  $deviceMaxWidth: 568px;
+  $devicePixelRatio: 2;
+  $deviceAspectRatio: '40/71';
+
+  @if $orientation == all
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio)
+    {
+      @content;
+    }
+  }
+  @else
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation:#{$orientation})
+    {
+      @content;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- ipads (all) -----------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+@mixin ipad($orientation: all)
+{
+  $deviceMinWidth: 768px;
+  $deviceMaxWidth: 1024px;
+
+  @if $orientation == all
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    {
+      @content;
+    }
+  }
+  @else
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    and (orientation:#{$orientation})
+    {
+      @content;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+// --- ipad-retina -----------------------------------------------------------------------------------------------------
+// ---------------------------------------------------------------------------------------------------------------------
+
+@mixin ipad-retina($orientation: all)
+{
+  $deviceMinWidth: 768px;
+  $deviceMaxWidth: 1024px;
+  $devicePixelRatio: 2;
+
+  @if $orientation == all
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    and (-webkit-device-pixel-ratio: $devicePixelRatio)
+    {
+      @content;
+    }
+  }
+  @else
+  {
+    @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
+    and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation})
+    {
+      @content;
+    }
+  }
+}
+

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

@@ -0,0 +1,143 @@
+//Mixins
+
+//Hyphens mixin
+@mixin hyphens($mode: auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: $mode;
+  -moz-hyphens: $mode;
+  -ms-hyphens: $mode; // IE10+
+  -o-hyphens: $mode;
+  hyphens: $mode;
+}
+
+//Mixins to define the visibility media queries support
+@mixin responsive-invisibility {
+  display: none !important;
+
+  tr, th, td {
+    display: none !important;
+  }
+}
+
+@mixin responsive-visibility {
+  display: block !important;
+
+  &.btn {
+    display: inline-block !important;
+  }
+
+  tr {
+    display: table-row !important;
+  }
+
+  th, td {
+    display: table-cell !important;
+  }
+}
+
+
+// Mixin to set the touch callout actions for different vendors
+@mixin touch-callout($value: none) {
+  -webkit-touch-callout: $value;
+  -webkit-user-select: $value;
+  -khtml-user-select: $value;
+  -moz-user-select: moz-#{$value};
+  -ms-user-select: $value;
+  user-select: $value;
+}
+
+// Mixin to add support for retina display on images
+@mixin retina-image($image, $width, $height) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+         (-o-min-device-pixel-ratio: 2.6/2),
+         (-webkit-min-device-pixel-ratio: 1.3),
+         (min-device-pixel-ratio: 1.3),
+         (min-resolution: 1.3dppx) {
+    /* on retina, use image that's scaled by 2 */
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}
+
+// Mixin that will truncate text
+@mixin truncate-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Mixin to set the abs position of any element
+@mixin absPosition($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+// Hidden text - by Nicolas Gallagher
+@mixin hidden-text {
+  font: 0/0 a;
+  text-shadow: none;
+  color: transparent;
+}
+
+// Font-size mixin, with IE7 & IE8 support, CSS tricks courtesy
+@mixin font-size($size: 1.6, $line: $size * 1.25) {
+  font-size: ($size * 10) + px;
+  line-height: ($line * 10) + px;
+  font-size: $size + rem;
+  line-height: $line + rem;
+}
+
+// Animation keyframes
+@mixin keyframes($name) {
+  @-webkit-keyframes #{$name} {
+    @content
+  }
+  @-moz-keyframes #{$name} {
+    @content
+  }
+  @-ms-keyframes #{$name} {
+    @content
+  }
+  @-o-keyframes #{$name} {
+    @content
+  }
+  @keyframes #{$name} {
+    @content
+  }
+}
+
+// Animation mixin
+@mixin animation($value) {
+  -webkit-animation: $value;
+  -moz-animation: $value;
+  -ms-animation: $value;
+  -o-animation: $value;
+  animation: $value;
+}
+
+
+// Embossing and letterpress effect
+@mixin box-emboss($outerOpacity, $innerOpacity) {
+  @include box-shadow(rgba(white, $outerOpacity) 0 1p 0,
+                      rgba(black, $innerOpacity) 0 1px 0 inset);
+}
+
+// Flexbox
+
+@mixin flexbox-display {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+@mixin flex($value: 1) {
+  -webkit-flex: $value;
+  -moz-flex: $value;
+  -ms-flex: $value;
+  flex: $value;
+}