furatto 0.0.1 → 0.0.2

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

@@ -8,37 +8,20 @@
  */
 
 .footer {
-  background: $footer-bg;
   color: $footer-text-color;
   font-size: $base-font-size;
   font-weight: lighter;
   line-height: $base-line-height;
-  margin-top: 50px;
-  height: $footer-height;
+  margin-top: 60px;
+  text-align: center;
 
-  .copyright {
-    margin: 0;
-    padding: (($footer-height - $base-line-height) / 2) 20px (($footer-height - $base-line-height) / 2);
-  }
-
-  a {
-    color: $footer-text-color;
-  }
-
-  .footer-wrapper {
-    width: 80%;
-    margin: 0 auto; 
-
-    .hrz-nav {
-      margin: 0;
-
-      li {
-        display: inline-block;
-        padding: (($footer-height - $base-line-height) / 2) 10px (($footer-height - $base-line-height) / 2);
-        a {
-          color: $footer-text-color;
-        }
+  ul.inline {
+    li {
+      a {
+        color: $footer-anchor-color;
+        font-size: $footer-anchor-size;
       }
     }
   }
+
 }

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

@@ -37,7 +37,8 @@ input[type="color"],
 .uneditable-input {
   display: inline-block;
   height: $base-line-height;
-  padding: 4px 6px;
+  padding-left: 8px;
+  height: 30px;
   margin-bottom: $base-line-height / 2;
   font-size: $base-font-size;
   line-height: $base-line-height;
@@ -82,27 +83,27 @@ input[type="color"],
 
 //Input sizes
 .input-mini { 
-  width: 60px; 
+  width: 16.667%; 
 }
 
 .input-small { 
-  width: 90px; 
+  width: 33.34%; 
 }
 
 .input-medium { 
-  width: 150px; 
+  width: 50%; 
 }
 
 .input-large { 
-  width: 210px; 
+  width: 66.668%; 
 }
 
 .input-xlarge {
-  width: 270px; 
+  width: 83.335%; 
 }
 
-.input-xxlarge { 
-  width: 350px; 
+.input-block {
+  width: 100%;
 }
 
 /* Inline Forms */
@@ -111,12 +112,18 @@ input[type="color"],
 .horizontal-form {
   input,
   textarea,
-  select {
+  select,
+  .form-fields,
+  .checkbox-fields {
     display: inline-block;
     margin-bottom: 0;
     vertical-align: middle;
   }
 
+  .form-fields {
+    margin-top: 4px;
+  }
+
   label {
     display: inline-block;
   }
@@ -130,7 +137,7 @@ input[type="color"],
 /* Horizontal form */
 /* --------------- */
 .horizontal-form {
-  .furatto-controls {
+  .form-fields {
     display: block;
     margin-bottom: 10px;
 
@@ -141,54 +148,31 @@ input[type="color"],
     }
   }
 
-  .furatto-actions {
+  .form-actions {
     margin-left: 184px;
   }
 }
 
-/* Login Form */
-/* ------------ */
-.login-form {
-  width: 30%;
-  text-align: center;
-
-  input[type="text"],
-  input[type="password"],
-  input[type="email"] {
-    display: block;
-    width: 96%;
-    height: 35px;
-    padding: 0px 0px 0px 10px;
-    height: 42px;
-    background: #fcfcfc;
-  }
-
-  .furatto-login-icon {
-    margin-bottom: 20px;
-  }
-
-  .login-header {
-    font-size: $base-font-size + 10;
-    margin: 0;
-    color: $dark-gray;
-  }
-}
-
 /* Centered forms */
 /* -------------- */
 .centered-form {
-  margin: 0 auto;
+  @include center-block;
 }
 
 /* Level up the label on for checkboxes */
 /* ------------------------------------ */
-label.checkbox {
+label.checkbox-label {
+  display: inline-block;
   position: relative;
   top: -4px;
   margin-left: 5px;
   margin-right: 5px;
 }
 
+label.radiobutton-label {
+  @extend .checkbox-label;
+}
+
 label {
   @include touch-callout;
 }
@@ -207,27 +191,12 @@ textarea[disabled] {
 
 /* Input states */
 /* ------------ */
-.info {
-  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"] {
-    color: $dark-blue;
-    border: 1px solid $dark-blue;
+.form-fields-success{
+
+  .form-fields {
+    color: $dark-green;
   }
-}
-.success{
+
   textarea,
   input[type="text"],
   input[type="password"],
@@ -247,7 +216,10 @@ textarea[disabled] {
     border: 1px solid $dark-green;
   }
 }
-.warning{
+.form-fields-warning{
+  .form-fields {
+    color: $dark-orange;
+  }
   textarea,
   input[type="text"],
   input[type="password"],
@@ -267,7 +239,11 @@ textarea[disabled] {
     border: 1px solid $dark-orange;
   }
 }
-.error{
+.form-fields-error{
+  .form-fields {
+    color: $dark-red;
+  }
+  
    textarea,
   input[type="text"],
   input[type="password"],
@@ -288,3 +264,44 @@ textarea[disabled] {
   }
 }
 
+/* Form controls */
+/* ------------- */
+
+.form-fields {
+  margin: 8px 0;
+
+  .help-hint {
+    display: inline-block;
+  }
+
+
+  label {
+    font-weight: bold;
+  }
+}
+
+.checkbox-fields {
+  vertical-align: middle;
+  margin: 8px 0 15px 0;
+
+
+  input[type="checkbox"] {
+    margin-right: 5px;
+  }
+}
+
+
+@media only screen and (max-width: 768px) {
+  .horizontal-form {
+    .form-fields {
+      label {
+        display: block;
+        text-align: left;
+      }
+    }
+
+    .form-actions {
+      margin-left: 0;
+    }
+  }
+}

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

@@ -9,48 +9,52 @@
  */
 
 
-// Fixed (940px)
-@include grid-core($gridColumnWidth, $gridGutterWidth);
-
-// Fluid (940px)
-@include grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth);
-
 // Reset utility classes due to specificity
-[class*="span"].hide,
-.row-fluid [class*="span"].hide {
+[class*="col-"].hide,
+.row [class*="col-"].hide {
   display: none;
 }
 
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
+[class*="col-"].pull-right,
+.row [class*="col-"].pull-right {
   float: right;
 }
 
-//Adds a background to the columns for demo purposes
-.grid-demo {
-  margin-bottom: 10px;
+.row {
+  text-rendering: optimizespeed;
+  @include clearfix();
 
-  [class*="span"] {
-    background: $light-gray;
-    @include border-radius(3px);
-    text-align: center;
-    line-height: $base-line-height;
+  [class*="col-"]:first-child {
+    margin-left: 0px;
   }
 }
 
-.nested-grid-demo {
-  background: $light-gray;
-  [class*="span"] {
-    padding-bottom: 10px;
-    text-align: center;
+.row + .row {
+  margin-top: 2px;
+}
+
+//Borders and paddings are applied inside the div element
+//This prevents the columns to stack by a border or padding
+[class*="col-"] {
+  zoom: 1;
+  letter-spacing: normal;
+  word-spacing: normal;
+  vertical-align: top;
+  text-rendering: auto;
+  float: left;
+  padding: 8px;
+}
+
+@include build-column-grids;
+
+@media (max-width: 767px) {
+  .row > [class *= "col-"] {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 2px;
   }
 
-  .row-fluid {
-    .row-fluid {
-      [class*="span"] {
-        background: darken($light-gray, 15%);
-        @include border-radius(3px);
-      }
-    }
+  .container-center {
+    width: 95%;
   }
 }

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

@@ -9,12 +9,13 @@
 
 
 .img {
-  width: auto;
   max-width: 100%;
   height: auto;
   vertical-align: middle;
-  @include box-sizing(border-box);
-  margin: 10px;
+}
+
+.img-block {
+  width: 100%;
 }
 
 .img-hover {
@@ -32,13 +33,32 @@
   @include border-radius(2%);
 }
 
-.img-selected {
-  border: 3px solid rgba($img-border, 0.8);
-  opacity: .9;  
-}
-
 .img-polaroid {
   padding: 4px;
   border: 1px solid rgba(#000, 0.2);
   background: #FFF;
 }
+
+.img-frame {
+  display: inline-block;
+  border: 1px solid #ccc;
+
+  img {
+    @extend .img;
+    margin: 5px;
+  }
+
+  &.img-circular {
+    img {
+      @extend .img-circular;
+    }
+  }
+
+  &.img-selected {
+    @extend .img-selected;
+    img {
+      margin: 0;
+    }
+  }
+
+}

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

@@ -8,7 +8,7 @@
  */
 
 .label, .badge {
-  display: inline-block;
+  @include inline-block;
   padding: 2px 4px;
   font-size: $base-font-size * .846;
   font-weight: bold;
@@ -16,8 +16,9 @@
   color: #FFF;
   vertical-align: baseline;
   white-space: nowrap;
-  text-shadow: 0 -1px 0 rgba(0,0,0,.20);
+  /*text-shadow: 0 -1px 0 rgba(0,0,0,.20);*/
   background: $gray;
+  @include border-radius(2px);
 }
 
 //Badges border radius

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

@@ -9,8 +9,6 @@
 
 //Clears the float from any element
 @mixin clearfix {
-  *zoom: 1;
-
   &:before, &:after {
     display: table;
     content: "";
@@ -27,6 +25,59 @@
   *display: inline;
 }
 
+@mixin center-block {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin hyphens($mode: auto) {
+  word-wrap: break-word;
+  -webkit-hyphens: $mode;
+  -moz-hyphens: $mode;
+  -ms-hyphens: $mode; // IE10+
+  -o-hyphens: $mode;
+  hyphens: $mode;
+}
+
+//Credits to bootstrap
+@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 opacity ( $opacity ) {
+  opacity: $opacity;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=" $opacity * 100 ")";
+  filter: alpha(opacity= $opacity* 100 );
+  zoom: 1;
+}
+
+
+@mixin img-responsive {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
 // FORMS
 // --------------------------------------------------
 
@@ -34,7 +85,7 @@
 @mixin input-block-level {
   display: block;
   width: 100%;
-  min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  min-height: $input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
   @include box-sizing(border-box); // Makes inputs behave like true block-level elements
 }
 
@@ -69,167 +120,6 @@
   border-bottom: 1px solid $bottom;
 }
 
-// Grid System
-// -----------
-
-// Centered container element
-@mixin container-fixed() {
-  margin-right: auto;
-  margin-left: auto;
-  @include clearfix();
-}
-
-// Table columns
-@mixin tableColumns($columnSpan: 1) {
-  float: none; // undo default grid column styles
-  width: (($gridColumnWidth) * $columnSpan) + ($gridGutterWidth * ($columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
-  margin-left: 0; // undo default grid column styles
-}
-
-// Make a Grid
-// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
-@mixin makeRow() {
-  margin-left: $gridGutterWidth * -1;
-  @include clearfix();
-}
-@mixin makeColumn($columns: 1, $offset: 0) {
-  float: left;
-  margin-left: ($gridColumnWidth * $offset) + ($gridGutterWidth * ($offset - 1)) + ($gridGutterWidth * 2);
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-// The Grid
-@mixin grid-core($gridColumnWidth, $gridGutterWidth) {
-  .row {
-    margin-left: $gridGutterWidth * -1;
-    @include clearfix();
-  }
-
-  [class*="span"] {
-    float: left;
-    min-height: 1px; // prevent collapsing columns
-    margin-left: $gridGutterWidth;
-  }
-
-  // generate .spanX and .offsetX
-  @include grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-  @include grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-core-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .span#{$i} { @include grid-core-span($i, $gridColumnWidth, $gridGutterWidth); }
-  }
-}
-
-@mixin grid-core-offset-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .offset#{$i} { @include grid-core-offset($i, $gridColumnWidth, $gridGutterWidth); }
-  }
-}
-
-@mixin grid-core-span($columns, $gridColumnWidth, $gridGutterWidth) {
-  width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
-}
-
-@mixin grid-core-offset($columns, $gridColumnWidth, $gridGutterWidth) {
-  margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns + 1));
-}
-
-@mixin grid-fluid($fluidGridColumnWidth, $fluidGridGutterWidth) {
-  .row-fluid {
-    width: 100%;
-    @include clearfix();
-    [class*="span"] {
-      @include input-block-level();
-      float: left;
-      margin-left: $fluidGridGutterWidth;
-      *margin-left: $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
-    }
-
-    [class*="span"]:nth-of-type(1) {
-      margin-left: 0px;
-    }
-
-    [class*="span"]:first-child {
-      margin-left: 0px;
-    }
-
-    // Space grid-sized controls properly if multiple per line
-    .controls-row [class*="span"] + [class*="span"] {
-      margin-left: $fluidGridGutterWidth;
-    }
-
-    // generate .spanX and .offsetX
-    @include grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
-    @include grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth);
-  }
-}
-
-@mixin grid-fluid-span-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .span#{$i} { @include grid-fluid-span($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
-  }
-}
-
-@mixin grid-fluid-offset-x($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    .offset#{$i} { @include grid-fluid-offset($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
-    .offset#{$i}:first-child { @include grid-fluid-offset-first-child($i, $fluidGridColumnWidth, $fluidGridGutterWidth); }
-  }
-}
-
-@mixin grid-fluid-span($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
-  *width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth * 2);
-  *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + ($fluidGridGutterWidth * 2) - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-fluid-offset-first-child($columns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
-  margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) + ($fluidGridGutterWidth);
-  *margin-left: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1)) - (.5 / $gridRowWidth * 100px * 1%) + $fluidGridGutterWidth - (.5 / $gridRowWidth * 100px * 1%);
-}
-
-@mixin grid-input($gridColumnWidth, $gridGutterWidth) {
-  input,
-  textarea,
-  .uneditable-input {
-    margin-left: 0; // override margin-left from core grid system
-  }
-
-  // Space grid-sized controls properly if multiple per line
-  .controls-row [class*="span"] + [class*="span"] {
-    margin-left: $gridGutterWidth;
-  }
-
-  // generate .spanX
-  @include grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth);
-}
-
-@mixin grid-input-span-x($gridColumns, $gridColumnWidth, $gridGutterWidth) {
-  @for $i from 1 through $gridColumns {
-    input.span#{$i},
-    textarea.span#{$i},
-    .uneditable-input.span#{$i} {
-      @include grid-input-span($i, $gridColumnWidth, $gridGutterWidth);
-    }
-  }
-}
-
-@mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
-  width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
-}
-
-@mixin active-navbar-link-arrow($navbar-height: 40px) {
-    $default-position: -6px;
-    $default-navbar-height: 40px;
-    top: ((($navbar-height - $default-navbar-height) / 5) * -3) + $default-position;
-}
-
 @mixin touch-callout {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
@@ -281,3 +171,30 @@
     }
   }
 }
+
+@mixin build-column-grids($columns: 12) {
+  $unit-width: (100 / $columns);  
+  $column-factor: 0.1833;
+
+
+  @for $i from 1 through $columns {
+    .col-#{$i} {
+      $current-width: ($unit-width * $i) - $column-factor;
+      width: percentage($current-width / 100);
+      margin-left: percentage($column-factor / 100);
+    }
+  }
+
+}
+
+@mixin backface-visibility($property: hidden) {
+	-webkit-backface-visibility: $property;
+	-moz-backface-visibility: $property;
+	backface-visibility: $property;
+}
+
+@mixin perspective($value: 1300px) {
+	-webkit-perspective: $value;
+	-moz-perspective: $value;
+	perspective: $value;
+}