furatto 0.0.3 → 1.0.0

data/{app → vendor}/assets/stylesheets/furatto/_date_picker.scss

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*------------------------------------*\
     $DATEPICKER BASE
 \*------------------------------------*/

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

@@ -0,0 +1,81 @@
+// Experimental - Use of edge and modern cases that may work or not on
+// certain browsers
+
+//
+//@variables
+//
+
+$input-addon-margin-bottom: 1rem !default;
+$addon-border-width: 1px !default;
+$addon-border-style: solid !default;
+$addon-border-color: rgba(147, 128, 108, 0.25) !default;
+$addon-padding: 0.5rem !default;
+$addon-background-color: rgba(147, 148, 108, 0.1) !default;
+$addon-font-color: #666 !default;
+$addon-font-weight: 400 !default;
+$addon-font-size: 14px !default;
+$include-addon-radius: false !default;
+$addon-radius: 2px !default;
+
+//Addon color variations
+$addon-warning-bg-color: rgba(211, 84, 0, 0.6);
+$addon-danger-bg-color: rgba(231, 76, 60, 0.6);
+$addon-primary-bg-color: rgba(52, 152, 219, 0.6);
+
+@mixin addon-variation($background-color, $color: #FFF) {
+  background-color: $background-color;
+  color: $color;
+}
+
+@if($include-flexible-addons) {
+  .input-addon {
+    @include flexbox-display;
+    margin-bottom: $input-addon-margin-bottom;
+  }
+
+  .addon-field {
+    @include flex;
+    margin-bottom: 0;
+
+    &:not(:first-child) {
+      border-left: 0;
+    }
+    &:not(:last-child) {
+      border-right: 0;
+    }
+  }
+
+  a.addon {
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .addon {
+    margin: 0;
+    border: $addon-border-width $addon-border-style $addon-border-color;
+    padding: $addon-padding;
+    background-color: $addon-background-color;
+    color: $addon-font-color;
+    font-weight: $addon-font-weight;
+    font-size: $addon-font-size;
+
+    &.warning { @include addon-variation($addon-warning-bg-color); } 
+    &.danger { @include addon-variation($addon-danger-bg-color); } 
+    &.primary { @include addon-variation($addon-primary-bg-color); }
+
+    &:first-child {
+      @if($include-addon-radius) {
+        @include border-radius($addon-radius 0 0 $addon-radius);
+      }
+    }
+
+    &:last-child {
+      @if($include-addon-radius) {
+        @include border-radius(0 $addon-radius $addon-radius 0); 
+      }
+    }
+  }
+}

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

@@ -0,0 +1,269 @@
+//Forms
+
+//
+//@variables
+//
+
+//Form Label
+$form-label-display: block !default;
+$form-label-cursor: pointer !default;
+$form-label-font-size: px-to-rems(13) !default;
+$form-label-color: scale-color(#000, $lightness: 30%) !default;
+$form-label-font-weight: 300 !default;
+$form-label-margin-bottom: px-to-rems(5) !default;
+$form-input-border-width: 1px !default;
+$form-input-border-style: solid !default;
+$form-inline-label-margin-left: px-to-rems(3) !default;
+
+//Form inputs
+$form-input-radius: 0 !default;
+$form-input-height: px-to-rems(32) !default;
+$form-input-color: rgba(0,0,0, 0.75) !default;
+$form-input-font-size: px-to-rems(13) !default;
+$form-input-padding: px-to-rems(5) !default;
+$form-input-margin-bottom: px-to-rems(11) !default;
+$form-input-box-shadow: inset 0 1px 2px rgba(#ccc,0.35) !default;
+$form-input-focus-box-shadow: 0 0 5px rgba(#ccc, 1) !default;
+$form-input-focus-border-color: #999 !default;
+$form-input-background-color: #FFF !default;
+$form-input-border-color: #CCC !default;
+$form-input-disabled-color: #ECF0F1 !default;
+$form-input-disabled-background-color: #EEE !default;
+$form-input-mini-width: 20% !default;
+$form-input-small-width: $form-input-mini-width * 2 !default; 
+$form-input-medium-width: $form-input-mini-width * 3 !default;
+$form-input-large-width: $form-input-mini-width * 4 !default;
+
+//Validation states
+$form-label-success-color: #27ae60 !default;
+$form-label-error-color: #e74c3c !default;
+$form-input-success-border-color: $form-label-success-color !default;
+$form-input-error-border-color: $form-label-error-color !default;
+
+//Help hints
+$form-help-hint-color: #FFF !default;
+$form-help-hint-font-size: px-to-rems(11) !default;
+$form-help-hint-font-style: italic !default;
+$form-help-hint-padding: px-to-rems(5) !default;
+
+//Selects
+$form-select-background-color: #FFF !default;
+$form-select-border-style: solid !default;
+$form-select-border-width: 1px !default;
+$form-select-border-color: #CCC !default;
+$form-select-color: #555 !default;
+$form-select-font-size: px-to-rems(14) !default;
+$form-select-hover-background: #F7F7F7 !default;
+$form-select-padding: px-to-rems(5) px-to-rems(7) !default;
+$form-select-radius: 2px !default;
+$form-select-transition-time: 2s !default;
+$form-select-transition-style: linear !default;
+$form-select-backgroun-x-position: 97% !default;
+
+$include-form-select-transition: true !default;
+
+$form-input-media-query: "#{$media-display} and (max-width: #{$screen-xs})" !default;
+
+form {
+  display: block;
+  width: 100%;
+}
+
+//Labels
+label {
+  display: $form-label-display;
+  margin-bottom: $form-label-margin-bottom;
+  cursor: $form-label-cursor;
+  font-size: $form-label-font-size;
+  font-weight: $form-label-font-weight;
+
+  &.error {
+    color: $form-label-error-color; 
+  }
+
+  &.success {
+    color: $form-label-success-color; 
+  }
+}
+
+//Help hints
+.help-hint {
+  display: block;
+  margin-bottom: $form-input-margin-bottom;
+  color: $form-help-hint-color;
+  font-size: $form-help-hint-font-size;
+  padding: $form-help-hint-padding;
+  font-style: $form-help-hint-font-style;
+
+  &.error {
+    background: lighten($form-label-error-color, 6%); 
+  }
+
+  &.success {
+    background: lighten($form-label-success-color, 6%); 
+  }
+}
+
+//Inputs and textarea definition
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+{
+  @include border-radius($form-input-radius);
+  @include box-shadow($form-input-box-shadow);
+  @include single-transition(all 0.1s ease-in-out);
+  @include appearance($ap: none);
+  display: block;
+  width: 100%;
+  height: $form-input-height;
+  color: $form-input-color;
+  font-size: $form-input-font-size;
+  padding: $form-input-padding;
+  margin-bottom: $form-input-margin-bottom;
+  background-color: $form-input-background-color;
+  border: $form-input-border-width $form-input-border-style $form-input-border-color;
+  outline: none;
+
+  @if($include-flexible-addons) {
+    &.addon-field {
+      margin-bottom: 0;
+    }
+  }
+
+  //Focus state
+  &:focus {
+    @include box-shadow($form-input-focus-box-shadow);
+    border-color: rgba($form-input-focus-border-color, 0.8);
+    outline: none;
+    background: darken($form-input-background-color, 2%);
+  }
+
+  //Disabled inputs
+  &[disabled] {
+    color: $form-input-disabled-color;
+    cursor: not-allowed;
+    overflow: hidden;
+    white-space: nowrap;
+    background: $form-input-disabled-background-color;
+  }
+
+  &.mini {
+    width: $form-input-mini-width; 
+  }
+
+  &.small { 
+    width: $form-input-small-width; 
+  }
+
+  &.medium { 
+    width: $form-input-medium-width; 
+  }
+
+  &.large { 
+    width: $form-input-large-width; 
+  }
+
+  &.block {
+    width: 100%;
+  }
+
+  &.success,
+  &.error {
+    margin-bottom: 0; 
+  }
+
+  &.success { 
+    border-color: $form-input-success-border-color; 
+    color: $form-label-success-color;
+  }
+  &.error { 
+    border-color: $form-input-error-border-color; 
+    color: $form-label-error-color;
+  }
+}
+
+textarea {
+  height: auto;
+}
+
+select {
+  @include border-radius(0);
+  width: 100%;
+  display: block;
+  background: $form-select-background-color
+  url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat $form-select-backgroun-x-position center;
+  ; 
+
+  //Firefox fix
+  text-indent: 0.01px;
+  text-overflow: "";
+  @include appearance($ap: none);
+
+  padding: $form-select-padding;
+  border: $form-select-border-width $form-select-border-style $form-select-border-color;
+  margin-bottom: $form-input-margin-bottom;
+  outline: none;
+  color: $form-select-color;
+  font-size: $form-select-font-size;
+
+  @if $include-form-select-transition {
+    @include single-transition(all $form-select-transition-time $form-select-transition-style);
+  }
+
+  &.radius { @include border-radius($form-select-radius); }
+
+  &:hover {
+    background: $form-select-hover-background
+    url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat $form-select-backgroun-x-position center; 
+  }
+}
+
+input[type="checkbox"],
+input[type="radio"],
+input[type="file"] {
+  margin-bottom: $form-input-margin-bottom; 
+}
+
+//Displays the label inline
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+  display: inline-block;
+  vertical-align: baseline;
+  margin-left: $form-inline-label-margin-left;
+}
+
+input[type="file"] {
+  width: 100%;
+}
+
+@media #{$form-input-media-query} {
+  textarea,
+  input[type="text"],
+  input[type="password"],
+  input[type="datetime"],
+  input[type="datetime-local"],
+  input[type="date"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"],
+  input[type="number"],
+  input[type="email"],
+  input[type="url"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="color"] {
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,18 @@
+$remBase: 16 !default;
+
+@function px-to-rems($size: 24) {
+  $value: ($size / $remBase) * 1rem;
+
+  @return $value;
+}
+
+//
+//We use this function to calculate the toolbars position 
+//and width for different positions
+//
+//$width - the width from which to set the arrow position
+@function calculate-toolbar-arrow-position($width: 7px) {
+
+  @return $width * 2 * -1;
+
+}

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

@@ -0,0 +1,51 @@
+// Global settings
+
+//
+//@imports
+//
+
+@import 'functions';
+
+//
+//@variables
+//
+
+$include-flexible-addons: true !default;
+
+//Inline navigation shared between: navigation ands tabs
+$navigation-inline-list-item-margin-left: px-to-rems(12) !default;
+
+// Navigation bar 
+$navigation-bar-height: 45px !default;
+$navigation-bar-toggle-icon-top-position: (($navigation-bar-height - 21) / 2) - 6 !default;
+
+$toolbar-bg-color: #232323 !default;
+
+// Media queries
+$media-display: "only screen" !default;
+
+// Extra small screen / phone
+$screen-xs:                  480px !default;
+$screen-xs-min:              $screen-xs !default;
+$screen-phone:               $screen-xs-min !default;
+
+// Small screen / tablet
+$screen-sm:                  768px !default;
+$screen-sm-min:              $screen-sm !default;
+$screen-tablet:              $screen-sm-min !default;
+
+// Medium screen / desktop
+$screen-md:                  992px !default;
+$screen-md-min:              $screen-md !default;
+$screen-desktop:             $screen-md-min !default;
+
+// Large screen / wide desktop
+// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
+$screen-lg:                  1200px !default;
+$screen-lg-min:              $screen-lg !default;
+$screen-lg-desktop:          $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max:              ($screen-sm-min - 1) !default;
+$screen-sm-max:              ($screen-md-min - 1) !default;
+$screen-md-max:              ($screen-lg-min - 1) !default;

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

@@ -0,0 +1,142 @@
+//Grid
+
+// @compass dependencies
+@import "compass/css3";
+
+//
+//@variables
+//
+
+//Grid settings
+$number-of-columns: 12 !default;
+$column-separation-factor: 0.1833 !default;
+
+//Row config
+$row-text-rendering: optimizespeed !default;
+$row-next-to-row-separation: 0.14285714rem !default;
+
+//Columns settings
+$col-padding: 0.57142857rem !default;
+$stack-column-separation: 2px !default;
+
+//Media
+$grid-max-width: 54.85714286rem !default;
+$grid-max-width-media: "(max-width: #{$grid-max-width})" !default;
+
+//Row variations
+$grid-primary-background-color: rgba(52, 152, 219, 0.8) !default;
+$grid-danger-background-color: rgba(231, 76, 60, 0.8) !default;
+$grid-warning-background-color: rgba(241, 196, 15, 0.8) !default;
+$grid-success-background-color: rgba(46, 204, 113, 0.8) !default;
+
+//columns border
+$col-border-color: #FFF !default;
+$col-border-alpha: 0.5 !default;
+
+//
+//@mixin
+//
+@mixin grid-columns($columns: $number-of-columns) {
+  $column-width: 100 / $columns;
+
+  @for $i from 1 through $columns {
+    .col-#{$i} {
+      $current-width: ($column-width * $i) - $column-separation-factor;
+      width: percentage($current-width / 100);
+      margin-left: percentage($column-separation-factor / 100);
+    }
+  }
+}
+
+.row {
+  @extend %clearfix;
+  display: block;
+  text-rendering: $row-text-rendering;
+
+  &.primary,
+  [class*="col-"].primary { 
+    background: $grid-primary-background-color; 
+  }
+
+  &.danger,
+  [class*="col-"].danger { 
+    background: $grid-danger-background-color; 
+  }
+
+  &.warning,
+  [class*="col-"].warning { 
+    background: $grid-warning-background-color; 
+  }
+
+  &.success,
+  [class*="col-"].success { 
+    background: $grid-success-background-color; 
+  }
+
+  //Columns
+  @include grid-columns;
+
+  [class*="col-"]:first-child {
+    margin-left: 0;
+  }
+}
+
+//Separation between rows
+.row + .row {
+  margin-top: $row-next-to-row-separation;
+}
+
+//Borders and paddings are applied inside the div element
+//This prevents the columns to stack by a border or padding
+[class*="col-"] {
+  padding: $col-padding;
+  float: left;
+
+  &.border {
+    border-width: 1px;
+    border-style: solid;
+    border-color: transparent;
+
+    &.left {
+     border-left-color: rgba($col-border-color, $col-border-alpha);
+    }
+
+    &.right {
+     border-right-color: rgba($col-border-color, $col-border-alpha);
+    }
+
+    &.top {
+     border-top-color: rgba($col-border-color, $col-border-alpha);
+    }
+
+    &.bottom {
+     border-bottom-color: rgba($col-border-color, $col-border-alpha);
+    }
+  }
+
+  [class*="col-"] {
+    padding-left: 0; 
+  }
+}
+
+@media #{$grid-max-width-media} {
+  [class*="col-"] {
+    &.border {
+
+      &.left {
+        border-top-color: rgba($col-border-color, $col-border-alpha);
+        border-left-color: transparent;
+      }
+
+      &.right {
+        border-bottom-color: rgba($col-border-color, $col-border-alpha);
+        border-right-color: transparent;
+      }
+    }
+  }
+  .row > [class *= "col-"] {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: $stack-column-separation;
+  }
+}