fustrate-rails 0.3.3 → 0.4.0

data/vendor/assets/stylesheets/fustrate/components/forms.sass

@@ -1,126 +1,129 @@
 // We use this to set the base for lots of form spacing and positioning styles
-$form-spacing: rem-calc(16)
-$label-font-size: rem-calc(14)
-$input-font-size: rem-calc(14)
-$form-element-margin: 0 0 ($form-spacing / 2) 0
-$form-disabled-color: #777
+$form-spacing: rem-calc(16) !default
+$label-color: #4d4d4d !default
+$label-font-size: rem-calc(14) !default
+$input-font-size: rem-calc(14) !default
+$form-element-margin: 0 0 ($form-spacing / 2) 0 !default
+$form-disabled-color: #777 !default
+$form-disabled-bg-color: #ddd !default
 
 =fustrate-forms
   form
     margin: 0 0 $form-spacing
 
   label
-    font-size: $label-font-size
-    color: #4d4d4d
+    color: $label-color
     cursor: pointer
     display: block
+    font-size: $label-font-size
     font-weight: normal
     line-height: 1.5
     margin-bottom: 0
 
     &.inline
+      display: inline-block
+      float: none !important
       margin: $form-element-margin
       padding: $form-spacing / 2 + rem-calc(1px) rem-calc(5px)
-      float: none !important
       text-align: right
-      display: inline-block
 
   select::-ms-expand
     display: none
 
   .prefix,
   .postfix
+    background: scale-color($white, $lightness: -5%)
+    border: 1px solid scale-color($white, $lightness: -20%)
+    color: $label-color
     display: block
-    position: relative
-    z-index: 2
-    text-align: center
-    width: 100%
-    padding-top: 0
-    padding-bottom: 0
-    overflow: hidden
     font-size: $label-font-size
     height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
     line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
-    background: scale-color(#fff, $lightness: -5%)
-    border: 1px solid scale-color(#fff, $lightness: -20%)
-    color: #333
+    overflow: hidden
+    padding-bottom: 0
+    padding-top: 0
+    position: relative
+    text-align: center
+    width: 100%
+    z-index: 2
 
   .prefix
-    border-right: none
+    border-right: 0
 
   .postfix
-    border-left: none
-
-  /* We use this to get basic styling on all basic form elements */
-  input[type="text"],
-  input[type="password"],
-  input[type="date"],
-  input[type="datetime"],
-  input[type="datetime-local"],
-  input[type="month"],
-  input[type="week"],
-  input[type="email"],
-  input[type="number"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="time"],
-  input[type="url"],
+    border-left: 0
+
+  // We use this to get basic styling on all basic form elements
+  input[type='date'],
+  input[type='datetime-local'],
+  input[type='datetime'],
+  input[type='email'],
+  input[type='month'],
+  input[type='number'],
+  input[type='password'],
+  input[type='search'],
+  input[type='tel'],
+  input[type='text'],
+  input[type='time'],
+  input[type='url'],
+  input[type='week'],
   textarea
     -webkit-appearance: none
-    -webkit-border-radius: 0px
-    background-color: #fff
-    font-family: inherit
-    border: 1px solid scale-color(#fff, $lightness: -20%)
-    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
-    color: #000
+    -webkit-border-radius: 0
+    background-color: $white
+    border: 1px solid scale-color($white, $lightness: -20%)
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
+    box-sizing: border-box
+    color: $black
     display: block
+    font-family: inherit
     font-size: $input-font-size
+    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
     margin: $form-element-margin
     padding: $form-spacing / 2
-    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
-    width: 100%
-    box-sizing: border-box
     transition: box-shadow 450ms, border-color 450ms ease-in-out
+    width: 100%
 
     &.inline
-      width: auto
       display: inline-block
+      width: auto
 
     &:focus
-      background: #fff
-      border-color: scale-color(#fff, $lightness: -40%)
+      background: $white
+      border-color: scale-color($white, $lightness: -40%)
+      box-shadow: 0 0 5px scale-color($white, $lightness: -40%)
       outline: none
-      box-shadow: 0 0 5px scale_color(#fff, $lightness: -40%)
 
     &:disabled,
     &[disabled],
     &[readonly],
     fieldset[disabled] &
-      background-color: #ddd
-      cursor: disabled
+      background-color: $form-disabled-bg-color
       color: $form-disabled-color
+      cursor: disabled
 
     td &:only-child,
     th &:only-child
       margin: 0
 
-  input[type="submit"]
-    -webkit-appearance: none
-    -webkit-border-radius: 0px
+  input
+    &[type='submit']
+      -webkit-appearance: none
+      -webkit-border-radius: 0
 
   textarea
     height: auto
     min-height: 50px
+    white-space: pre-line
 
-  /* Respect enforced amount of rows for textarea */
-  textarea[rows]
-    height: auto
+    // Respect enforced amount of rows for textarea
+    &[rows]
+      height: auto
 
-  /* Add height value for select elements to match text input height */
   select
     -webkit-appearance: none !important
-    -webkit-border-radius: 0px
-    background-color: #fff
+    -webkit-border-radius: 0
+    background-color: $white
 
     // The custom arrow have some fake horizontal padding so we can align it
     // from the right side of the element without relying on CSS3
@@ -128,61 +131,65 @@ $form-disabled-color: #777
     background-position: 100% center
     background-repeat: no-repeat
 
-    border: 1px solid scale-color(#fff, $lightness: -20%)
-    padding: $form-spacing / 2
-    padding-right: 24px
+    border: 1px solid scale-color($white, $lightness: -20%)
+    border-radius: 0
+    color: $black
     font-size: $input-font-size
-    color: #000
+    // Add height value for select elements to match text input height
+    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
     line-height: normal
-    border-radius: 0
+    padding: $form-spacing / 2
+    padding-right: 24px
     width: 100%
 
     &.inline
-      width: auto
       display: inline-block
+      width: auto
 
     &:hover
-      background-color: #fff
-
-    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
+      background-color: $white
 
     &:disabled,
     &[disabled],
     &[disabled]:hover
-      background-color: #ddd
-      border-color: scale-color(#fff, $lightness: -20%)
-      cursor: disabled
+      background-color: $form-disabled-bg-color
+      border-color: scale-color($white, $lightness: -20%)
       color: $form-disabled-color
+      cursor: disabled
 
     &[multiple]
-      height: auto
       background-image: none
+      height: auto
 
-  /* Adjust margin for form elements below */
-  input[type="file"],
-  input[type="checkbox"],
-  input[type="radio"],
+  input[type='checkbox'],
+  input[type='file'],
+  input[type='radio'],
   select
+    // Adjust margin for form elements below
     margin: $form-element-margin
 
     td &:only-child,
     th &:only-child
       margin: 0
 
-  input[type="checkbox"] + label,
-  input[type="radio"] + label
-    display: inline-block
-    margin-left: $form-spacing * .5
-    margin-right: $form-spacing
-    margin-bottom: 0
-    vertical-align: baseline
+  input
+    &[type='checkbox'] + label,
+    &[type='radio'] + label
+      display: inline-block
+      margin-bottom: 0
+      margin-left: $form-spacing * .5
+      margin-right: $form-spacing
+      vertical-align: baseline
 
-  /* Normalize file input width */
-  input[type="file"]
-    width: 100%
+    // Normalize file input width
+    &[type='file']
+      width: 100%
 
-  input.error,
-  input.error:focus,
-  input.error:focus:hover
-    background: scale_color($red, $lightness: 90%)
-    border-color: scale_color($red, $lightness: 20%)
+  input,
+  select,
+  textarea
+    &.error,
+    &.error:focus,
+    &.error:focus:hover
+      background: scale-color($red, $lightness: 90%)
+      border-color: scale-color($red, $lightness: 20%)

data/vendor/assets/stylesheets/fustrate/components/grid.sass

@@ -2,8 +2,8 @@ $row-width: rem-calc(1000)
 $total-columns: 12
 $column-gutter: rem-calc(30)
 
-@function grid-calc($colNumber, $totalColumns)
-  @return percentage($colNumber / $totalColumns)
+@function grid-calc($col-number, $col-count)
+  @return percentage($col-number / $col-count)
 
 // Use +grid-row(nest) to include a nested row
 // Use +grid-row(collapse) to collapsed a container row margins
@@ -11,30 +11,27 @@ $column-gutter: rem-calc(30)
 // Use +grid-row to use a container row
 =grid-row($behavior: false)
   @if $behavior == nest
-    width: auto
-    margin-left: -($column-gutter / 2)
-    margin-right: -($column-gutter / 2)
-    margin-top: 0
-    margin-bottom: 0
+    margin: 0 (-($column-gutter / 2))
     max-width: none
+    width: auto
 
   @else if $behavior == collapse
-    width: 100%
     margin: 0
     max-width: $row-width
+    width: 100%
 
   @else if $behavior == nest-collapse
-    width: auto
     margin: 0
     max-width: none
+    width: auto
 
   @else
-    width: 100%
+    margin-bottom: 0
     margin-left: auto
     margin-right: auto
     margin-top: 0
-    margin-bottom: 0
     max-width: $row-width
+    width: 100%
 
   // Clearfix for all rows
   +clearfix
@@ -80,8 +77,8 @@ $column-gutter: rem-calc(30)
     left: grid-calc($push, $total-columns)
     right: auto
   @if $pull
-    right: grid-calc($pull, $total-columns)
     left: auto
+    right: grid-calc($pull, $total-columns)
 
   @if $float
     @if $float == left or $float == true
@@ -93,9 +90,9 @@ $column-gutter: rem-calc(30)
 
   // If centered, get rid of float and add appropriate margins
   @if $center
+    float: none
     margin-left: auto
     margin-right: auto
-    float: none
 
   // If offset, calculate appropriate margins
   @if $offset
@@ -116,7 +113,6 @@ $column-gutter: rem-calc(30)
   .columns
     +grid-column($columns: false, $position: true)
 
-
   @for $i from 1 through $total-columns
     .#{$size}-#{$i}
       +grid-column($columns: $i, $collapse: null, $float: false)
@@ -126,11 +122,11 @@ $column-gutter: rem-calc(30)
       +grid-column($offset: $i, $collapse: null, $float: false)
 
   .#{$size}-reset-order
+    float: left
+    left: auto
     margin-left: 0
     margin-right: 0
-    left: auto
     right: auto
-    float: left
 
   .column.#{$size}-centered,
   .columns.#{$size}-centered
@@ -138,9 +134,9 @@ $column-gutter: rem-calc(30)
 
   .column.#{$size}-uncentered,
   .columns.#{$size}-uncentered
+    float: left
     margin-left: 0
     margin-right: 0
-    float: left
 
   // Fighting [class*="column"] + [class*="column"]:last-child
   .column.#{$size}-centered:last-child,
@@ -161,8 +157,8 @@ $column-gutter: rem-calc(30)
     +grid-row
 
     &.fluid
-      width: 100%
       max-width: 100%
+      width: 100%
 
     &.collapse
       > .column,
@@ -187,11 +183,6 @@ $column-gutter: rem-calc(30)
     & + &.end
       float: left
 
-  [class*="column"] + [class*="column"]:last-child
-    float: right
-  [class*="column"] + [class*="column"].end
-    float: left
-
   @media #{$small-up}
     +grid-html-classes($size: small)
 
@@ -200,5 +191,6 @@ $column-gutter: rem-calc(30)
 
   @media #{$large-up}
     +grid-html-classes($size: large)
+
     .large-column-count-2
       +columns(2)

data/vendor/assets/stylesheets/fustrate/components/labels.sass

@@ -8,24 +8,24 @@ $label-font-color-alt: #fff
 
   @if lightness($bg) < 70%
     color: $label-font-color-alt
-    text-shadow: 0 1px 1px scale_color($bg, $lightness: -70%)
+    text-shadow: 0 1px 1px scale-color($bg, $lightness: -70%)
   @else
     color: $label-font-color
-    text-shadow: 0 1px 1px scale_color($bg, $lightness: 70%)
+    text-shadow: 0 1px 1px scale-color($bg, $lightness: 70%)
 
 =fustrate-labels
   .label
-    text-align: center
-    text-decoration: none
-    line-height: 1
-    white-space: nowrap
+    +label-color
+    border-radius: 3px
     display: inline-block
-    position: relative
+    font-size: $label-font-size
+    line-height: 1
     margin-bottom: inherit
     padding: $label-padding
-    font-size: $label-font-size
-    border-radius: 3px
-    +label-color
+    position: relative
+    text-align: center
+    text-decoration: none
+    white-space: nowrap
 
     td.status:last-child &:only-child,
     &.fw
@@ -33,6 +33,7 @@ $label-font-color-alt: #fff
 
     &.round
       border-radius: 1000px
+
     &.sharp
       border-radius: 0
 
@@ -56,8 +57,8 @@ $label-font-color-alt: #fff
 
     // Check Mark
     &.yes::before
-      +font-awesome("\f00c")
+      +font-awesome('\f00c')
 
     // X
     &.no::before
-      +font-awesome("\f00d")
+      +font-awesome('\f00d')