furatto 0.0.3 → 1.0.0

data/vendor/assets/stylesheets/furatto.scss

@@ -0,0 +1,76 @@
+//Make sure the charset is set correctly
+@charset "UTF-8";
+
+//Compass Utilities
+@import "compass/css3";
+
+// Global settings
+@import "furatto/global";
+
+//Helpers
+@import "furatto/mixins";
+@import "furatto/selectors";
+@import "furatto/media_queries";
+
+//General css for layout
+@import 'furatto/base';
+
+//Buttons
+@import 'furatto/buttons';
+
+//Button groups
+@import 'furatto/button-groups';
+
+//Labels
+@import 'furatto/labels';
+
+//Alerts
+@import 'furatto/alerts';
+
+//Navs
+@import 'furatto/navigation';
+
+//Forms
+@import 'furatto/forms';
+
+//Images
+@import 'furatto/images';
+
+//Off screen
+@import 'furatto/off_screen';
+
+//Navbar
+@import 'furatto/navigation_bar';
+
+//Base
+@import 'furatto/typography';
+
+//Grid
+@import 'furatto/grid';
+
+//Tables
+@import 'furatto/tables';
+
+//Responsive utilities
+@import 'furatto/responsive_utilities';
+
+//Modal
+@import 'furatto/modal';
+
+//Tooltips
+@import 'furatto/tooltips';
+
+//Pagination
+@import 'furatto/pagination';
+
+/*//Toolbar*/
+@import 'furatto/toolbars';
+
+//Slider
+@import 'furatto/suraido';
+
+//Tabs
+@import 'furatto/tabs';
+
+//Experimental
+@import 'furatto/experimental';

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

@@ -0,0 +1,130 @@
+//Alerts
+
+//
+//@variables
+//
+
+//General settings
+$alert-padding: px-to-rems(9) px-to-rems(40) px-to-rems(9) px-to-rems(16) !default;
+$alert-margin-bottom: px-to-rems(20) !default;
+$alert-font-size: px-to-rems(13) !default;
+$alert-font-weight: normal !default;
+$alert-default-background: #e67e22 !default;
+
+//Close settings
+$alert-close-font-size: px-to-rems(16) !default;
+$alert-close-opacity: 0.3 !default;
+$alert-close-hover-opacity: 0.5 !default;
+$alert-close-padding: px-to-rems(5) !default;
+$alert-close-color: #333 !default;
+
+//Variations
+$alert-radius: px-to-rems(3) !default;
+$alert-round: px-to-rems(1000) !default;
+
+//Alert styles
+$alert-border-width: px-to-rems(1) !default;
+$alert-border-style: solid !default;
+
+//Background variations
+$alert-primary-background: #3498db !default;
+$alert-success-background: #2ecc71 !default;
+$alert-danger-background: #e74c3c !default;
+
+//
+//@mixin
+// We use this mixin as to describe the alerts base
+//
+
+@mixin alert-base {
+  display: block;
+  padding: $alert-padding;
+  margin-bottom: $alert-margin-bottom;
+  font-size: $alert-font-size;
+  font-weight: $alert-font-weight;
+  position: relative;
+
+  &.radius {
+    @include border-radius($alert-radius);
+  }
+}
+
+
+//
+//@mixin
+// We use this to create the different styles of alerts
+// $background-color - The color for the alert background. Default: $alert-default-background
+//
+
+@mixin alert-style($background-color: $alert-default-background) {
+  background: lighten($background-color, 25%); 
+  color: darken($background-color, 10%);
+  border: $alert-border-width $alert-border-style lighten($background-color, 20%);
+
+  .close {
+    color: darken($background-color, 15%);
+  }
+}
+
+//
+//@mixin
+// We use this to create the close link of alerts
+//
+
+@mixin alert-close {
+  line-height: 0;
+  padding: $alert-close-padding;
+  border: none;
+  background: none;
+  font-size: $alert-close-font-size;
+  cursor: pointer;
+  color: $alert-close-color;
+  position: absolute;
+  top: 50%;
+  right: 0.2rem;
+  margin-top: -($alert-font-size / 2);
+  text-decoration: none;
+  @include opacity($alert-close-opacity);
+
+  &:hover, &:focus {
+    @include opacity($alert-close-hover-opacity);
+  }
+}
+
+
+//
+//@mixin
+// We use this to create custom alerts
+// $background-color - The color for the alert background. Default: $alert-default-background
+// $include-radius - Wheter or not to include radius variant. Default: true
+// $include-round - Wheter or not to include rounded variant. Default: true
+//
+
+@mixin alert($background-color: $alert-default-background, $include-radius: true, $include-round: true) {
+  @include alert-base;
+  @include alert-style($background-color);
+
+  .close { @include alert-close; }
+  @if $include-radius {
+    &.radius { @include border-radius($alert-radius); }
+  }
+
+  @if $include-round {
+  &.round { @include border-radius($alert-round) }
+  }
+}
+
+//Alert description
+.alert {
+  @include alert-base;
+  @include alert-style;
+
+  .close { @include alert-close; }
+
+  &.round { @include border-radius($alert-round) }
+  &.radius { @include border-radius($alert-radius); }
+
+  &.primary{ @include alert-style($alert-primary-background); }
+  &.success { @include alert-style($alert-success-background); }
+  &.danger { @include alert-style($alert-danger-background); }
+}

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

@@ -0,0 +1,138 @@
+//Base
+
+//
+//@variables
+//
+
+$body-background-color: #FFF !default;
+$base-font-color: #333 !default;
+$base-link-color: #0088cc !default;
+$base-font-weight: normal !default;
+$base-font-size: px-to-rems(16) !default;
+$base-font-family: 'Open Sans', 'Helvetica Neue' !default;
+$base-line-height: 1 !default;
+
+//Text variations
+$muted-text-color: #666666 !default;
+$error-text-color: #c0392b !default;
+$success-text-color: #27ae60 !default;
+
+//Reset settings
+*, 
+*:after, 
+*:before { 
+  @include box-sizing(border-box);
+}
+
+html, body, .off-screen {
+  -webkit-overflow-scrolling: touch;
+}
+
+html {
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+html, body {
+  overflow-x: hidden;
+  height: 100%;
+  font-size: $base-font-size;
+  font-weight: $base-font-weight;
+  @include hyphens(auto);
+}
+
+abbr,
+acronym,
+blockquote,
+code,
+dir,
+kbd,
+listing,
+plaintext,
+q,
+samp,
+tt,
+var,
+xmp {
+	@include hyphens(none);
+}
+
+body {
+  background: $body-background-color;
+  color: $base-font-color;
+  padding: 0;
+  margin: 0;
+  font-family: $base-font-family;
+  line-height: $base-line-height;
+}
+
+img,
+embed,
+object {
+  max-width: 100%;
+  height: auto;
+}
+
+img,
+object {
+  height: 100%;
+}
+
+
+//Helpful classes
+.clearfix {
+  @extend %clearfix;
+}
+
+.hidden {
+  display: none;
+}
+
+.pull-right {
+  float: right;
+}
+
+.pull-left {
+  float: left;
+}
+
+//Text color variations 
+.text-muted {
+  color: $muted-text-color;
+}
+
+.text-error {
+  color: $error-text-color;
+}
+
+.text-success {
+  color: $success-text-color;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+//Text variations
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+//Content alignment
+.vertical-align {
+  //The parent container must have height
+  @extend %vertical-alignment;
+}
+
+//Remove padding
+[class*="col-"].nopadding,
+.nopadding {
+  padding: 0;
+}

data/vendor/assets/stylesheets/furatto/_button-groups.scss

@@ -0,0 +1,85 @@
+//Button groups
+
+//
+//@variables
+//
+
+$sm-device-width: 480px !default;
+
+//Media queries
+$button-group-small-media-query: "#{$media-display} and (max-width: #{$sm-device-width})" !default;
+
+//Variations
+$button-radius: px-to-rems(3) !default;
+$button-pill-radius: px-to-rems(1000) !default;
+
+.button-group {
+  list-style: none;
+  margin: 0; 
+  @extend %clearfix;
+
+
+
+  li {
+    float: left;
+
+    .button,
+    button {
+      [class*="icon-"] {
+        margin-right: 0px;
+      }
+    }
+
+    &:first-child {
+      .button,
+      button {
+        border-right-width: 0;
+      }
+    }
+
+    &:last-child {
+      .button,
+      button {
+        border-left-width: 0;
+      }
+    }
+  }
+
+  &.pill {
+    li:first-child .button {
+      @include border-top-left-radius($button-pill-radius);
+      @include border-bottom-left-radius($button-pill-radius);
+    }
+
+    li:last-child .button {
+      @include border-top-right-radius($button-pill-radius);
+      @include border-bottom-right-radius($button-pill-radius);
+    }
+  }
+
+  &.radius {
+    li:first-child .button {
+      @include border-top-left-radius($button-radius);
+      @include border-bottom-left-radius($button-radius);
+    }
+
+    li:last-child .button {
+      @include border-top-right-radius($button-radius);
+      @include border-bottom-right-radius($button-radius);
+    }
+  }
+}
+
+@media #{$button-group-small-media-query} {
+  .button-group {
+    li {
+      float: none;
+      display: block;
+
+      .button,
+      button {
+        display: block;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,266 @@
+//Buttons
+
+//
+//@variables
+//
+@import "functions";
+
+//Padding sizes for buttons
+$button-default: px-to-rems(4) px-to-rems(13) !default;
+$button-mini: 0 px-to-rems(6) !default;
+$button-small: px-to-rems(2) px-to-rems(11) !default;
+$button-large:  px-to-rems(12) px-to-rems(21) !default;
+$button-xlarge: px-to-rems(22) px-to-rems(34) !default;
+$button-xxlarge: px-to-rems(22.72) px-to-rems(22) px-to-rems(57) !default;
+
+//Buttons style
+$button-display: inline-block !default;
+$button-border-width: 1px !default;
+$button-border-style: solid !default;
+$button-default-background-color: #2E323E !default;
+
+//Buttons general styles
+$button-font-family: $base-font-family !default;
+$button-font-color: #FFF !default;
+$button-font-weight: 300 !default;
+$button-font-default: px-to-rems(14) !default;
+$button-font-mini: px-to-rems(11) !default;
+$button-font-small: px-to-rems(12) !default;
+$button-font-large: px-to-rems(16) !default;
+$button-font-xlarge: px-to-rems(22) !default;
+$button-font-xxlarge: px-to-rems(22) !default;
+$button-vertical-separation: px-to-rems(5) !default;
+
+//Buttons variations
+$button-radius: px-to-rems(3) !default;
+$button-alpha-border: 1px solid #FFF !default;
+$button-alpha-color: #FFF !default;
+$button-3d-border-width: px-to-rems(3) !default;
+$button-pill-radius: px-to-rems(1000) !default;
+$button-disabled-opacity: 0.65 !default;
+
+//Icons
+$button-icon-separation: 5px !default;
+
+//Background variations
+$button-primary-background: #3498db !default;
+$button-success-background: #2ecc71 !default;
+$button-danger-background: #e74c3c !default;
+$button-warning-background: #e67e22 !default;
+
+//Media queries
+$button-block-media-query-width: px-to-rems(480) !default;
+
+//
+//@mixin
+//
+// We use this mixin to create a default button base style
+//
+
+@mixin button-base {
+  display: $button-display;
+  *display: inline;
+  line-height: normal;
+  font-weight: $button-font-weight;
+  text-align: center;
+  cursor: pointer;
+  text-decoration: none;
+  margin: 5px 0;
+  outline: none;
+  color: $button-font-color;
+  vertical-align: middle;
+  @include single-transition(all, 0.2s, ease-in-out);
+  position: relative;
+
+  .fa {
+    margin-right: $button-icon-separation;
+    margin-left: $button-icon-separation;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &.alpha {
+    color: $button-alpha-color;
+    border: $button-alpha-border;
+  }
+}
+
+//
+//@mixin
+//
+// We use this mixin to add style to buttons and their states
+//
+// $background-color - Is the background color for the button to create
+
+@mixin button-style($background-color: $button-default-background-color) {
+
+  background-color: $background-color;
+  border: $button-border-width $button-border-style darken($background-color, 5%);
+
+  &:hover, &:focus {
+    background: darken($background-color, 3%);
+  }
+
+  &.disabled, &[disabled] {
+    cursor: no-drop;
+    @include opacity($button-disabled-opacity);
+  }
+
+  &.active, &:active {
+    outline: 0;
+  }
+
+  &.alpha {
+    border: 1px solid $background-color;
+    background: rgba(0,0,0,0);
+    color: $background-color;
+
+    &:hover {
+      color: #FFF;
+      background: $background-color;
+    }
+  }
+
+  &.inverse {
+    background: #FFF;
+    color: $background-color;
+
+    &:hover {
+      background: $background-color;
+      color: #FFF;
+      border: 1px solid #FFF;
+    }
+  }
+
+  &.three-d {
+    border-bottom: $button-3d-border-width solid darken($background-color, 15%);
+    @include single-transition(all, 0.1s, ease-in-out);
+
+    &:hover {
+      border-bottom: ($button-3d-border-width - 0.1) solid darken($background-color, 10%);
+      top: 1px;
+    }
+  }
+}
+
+//
+//@mixin
+//
+// We use this mixin to set the button size
+// $padding - The padding to give to the button. Default: $button-default
+// $font-size - The font size for the button. Default: $button-font-default
+//
+
+@mixin button-size($padding: $button-default, $font-size: $button-font-default) {
+  padding: $padding;
+  font-size: $font-size;
+}
+
+//
+//@mixin
+//
+// We use this mixin to let the user create custom buttons
+// $background-color - Is the background color for the button to create. Default: $button-default-background-color
+// $padding - The padding to give to the button. Default: $button-default
+// $font-size - The font size for the button. Default: $button-font-default
+// $include-radius-style - Wheter or not to add the radius style on the custom button
+// $include-block-style - Wheter or not to add the block size style on the custom button
+// $include-pill-style - Wheter or not to add the pill style on the custom button
+// Example .custom-button { @include button($background-color: #1abc9c); }
+//
+
+@mixin button($background-color: $button-default-background-color, 
+           $padding: $button-default, 
+           $font-size: $button-font-default, 
+           $include-radius-style: true, 
+           $include-block-style: true,
+           $include-pill-style: true) {
+  @include button-base;
+  @include button-style($background-color);
+  @include button-size($padding, $font-size);
+  
+  @if $include-radius-style {
+    &.radius {
+      @include border-radius($button-radius);
+    }
+  }
+
+  @if $include-block-style {
+    &.block {
+      display: block;
+      width: 100%;
+      padding-left: 0px;
+      padding-right: 0px;
+    }
+  }
+
+  @if $include-pill-style {
+    &.pill {
+      @include border-radius($button-pill-radius);
+    }
+  }
+
+  @media (max-width: $button-block-media-query-width) {
+    & {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+
+//Button style definition
+button, .button {
+  @include button-base;
+  @include button-style;
+  @include button-size;
+
+  //Button sizes
+  //
+  //Default size
+  padding: $button-default;
+  font-size: $button-font-default;
+
+  //Custom sizes
+  &.large { @include button-size($padding: $button-large, $font-size: $button-font-large); }
+  &.xlarge { @include button-size($padding: $button-xlarge, $font-size: $button-font-xlarge); }
+  &.xxlarge { @include button-size($padding: $button-xxlarge, $font-size: $button-font-xxlarge); }
+  &.small { @include button-size($padding: $button-small, $font-size: $button-font-small); }
+  &.mini { @include button-size($padding: $button-mini, $font-size: $button-font-mini); }
+
+  &.block {
+    display: block;
+    width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
+  //Button styles
+  &.primary { @include button-style($button-primary-background); }
+  &.success { @include button-style($button-success-background); }
+  &.danger { @include button-style($button-danger-background); }
+  &.warning { @include button-style($button-warning-background); }
+
+  &.radius {
+    @include border-radius($button-radius);
+  }
+
+  &.pill {
+    @include border-radius($button-pill-radius);
+  }
+
+  /* Vertical separation */
+  /*----------------------*/
+  &.block + &.block {
+    margin-top: $button-vertical-separation;
+  }
+
+  @media (max-width: $button-block-media-query-width) {
+    & {
+      display: block;
+      width: 100%;
+    }
+  }
+}
+