fustrate-rails 0.3.3 → 0.4.0

data/vendor/assets/javascripts/fustrate/listenable.coffee

@@ -18,7 +18,7 @@ class Fustrate.Listenable
   trigger: =>
     [name, args...] = arguments
 
-    return unless name && @listeners[name]
+    return unless name and @listeners[name]
 
     event.apply(@, args) for event in @listeners[name]
 

data/vendor/assets/stylesheets/_fustrate.sass

@@ -1,7 +1,7 @@
-@import "bourbon"
-@import "font-awesome"
-@import "awesomplete"
+@import 'bourbon'
+@import 'font-awesome'
+@import 'awesomplete'
 
-@import "fustrate/colors"
-@import "fustrate/settings"
-@import "fustrate/components/components"
+@import 'fustrate/colors'
+@import 'fustrate/settings'
+@import 'fustrate/components/components'

data/vendor/assets/stylesheets/awesomplete.sass

@@ -1,4 +1,5 @@
-/* 1795543d988d0fd9ca6237a5ac176f8e88d63990 */
+// 1795543d988d0fd9ca6237a5ac176f8e88d63990
+// sass-lint:disable-all
 
 [hidden]
   display: none

data/vendor/assets/stylesheets/fustrate/_colors.sass

@@ -7,3 +7,6 @@ $purple: #7857db
 $pink:   #a933b1
 $brown:  #8b5e36
 $grey:   #606060
+
+$white: #fff
+$black: #000

data/vendor/assets/stylesheets/fustrate/_settings.sass

@@ -5,16 +5,16 @@ $small-limit: 40em
 // 64 is a bit too wide for half-screening on our monitors
 $medium-limit: 58em
 
-$screen: "only screen"
+$screen: 'only screen'
 
-$landscape: "#{$screen} and (orientation: landscape)"
-$portrait: "#{$screen} and (orientation: portrait)"
+$landscape: '#{$screen} and (orientation: landscape)'
+$portrait: '#{$screen} and (orientation: portrait)'
 
 $small-up: $screen
-$small-only: "#{$screen} and (max-width: #{$small-limit})"
+$small-only: '#{$screen} and (max-width: #{$small-limit})'
 
-$medium-up: "#{$screen} and (min-width:#{$small-limit + .063em})"
-$medium-only: "#{$screen} and (min-width:#{$small-limit + .063em}) and (max-width:#{$medium-limit})"
+$medium-up: '#{$screen} and (min-width:#{$small-limit + .063em})'
+$medium-only: '#{$screen} and (min-width:#{$small-limit + .063em}) and (max-width:#{$medium-limit})'
 
-$large-up: "#{$screen} and (min-width:#{$medium-limit + .063em})"
+$large-up: '#{$screen} and (min-width:#{$medium-limit + .063em})'
 $large-only: $large-up

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

@@ -1,22 +1,22 @@
-@import "functions"
+@import 'functions'
 
-@import "typography"
-@import "grid"
-@import "buttons"
-@import "forms"
+@import 'typography'
+@import 'grid'
+@import 'buttons'
+@import 'forms'
 
-@import "alerts"
-@import "disclosures"
-@import "dropdowns"
-@import "flash"
-@import "labels"
-@import "modals"
-@import "pagination"
-@import "panels"
-@import "popovers"
-@import "tables"
-@import "tabs"
-@import "tooltips"
+@import 'alerts'
+@import 'disclosures'
+@import 'dropdowns'
+@import 'flash'
+@import 'labels'
+@import 'modals'
+@import 'pagination'
+@import 'panels'
+@import 'popovers'
+@import 'tables'
+@import 'tabs'
+@import 'tooltips'
 
 +fustrate-typography
 +fustrate-grid

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

@@ -6,8 +6,8 @@ $rem-base: 16px !default
 @function convert-to-rem($value, $base-value: $rem-base)
   $value: strip-unit($value) / strip-unit($base-value) * 1rem
 
-  @if ($value == 0rem)
-    $value: 0
+  @if ($value == 0)
+    @return 0
 
   @return $value
 
@@ -17,24 +17,25 @@ $rem-base: 16px !default
   @if $max == 1
     @return convert-to-rem(nth($values, 1), $base-value)
 
-  $remValues: ()
+  $rem-values: ()
 
   @for $i from 1 through $max
-    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value))
+    $rem-values: append($rem-values, convert-to-rem(nth($values, $i), $base-value))
 
-  @return $remValues
+  @return $rem-values
 
 =font-awesome($unicode, $padding-right: 3px, $spin: false)
-  font-family: FontAwesome
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
   content: $unicode
+  font-family: FontAwesome
   font-weight: 100
   text-rendering: auto
-  -webkit-font-smoothing: antialiased
-  -moz-osx-font-smoothing: grayscale
 
   @if $spin
     -webkit-animation: fa-spin 2s infinite linear
     animation: fa-spin 2s infinite linear
+    display: inline-block
     margin-right: $padding-right
   @else
     padding-right: $padding-right

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

@@ -1,15 +1,15 @@
-$alert-padding: rem-calc(8) rem-calc(24) rem-calc(8) rem-calc(14)
-$alert-font-size: rem-calc(14)
+$alert-padding: rem-calc(8) rem-calc(24) rem-calc(8) rem-calc(14) !default
+$alert-font-size: rem-calc(14) !default
+$alert-dark-color: #333 !default
+$alert-light-color: #fff !default
 
 =alert-color($bg: #eaeaea)
+  $color: if(lightness($bg) > 70%, $alert-dark-color, $alert-light-color)
+
   background-color: $bg
   border-color: scale-color($bg, $lightness: -14%)
-
-  text-shadow: 0 1px 1px scale_color($bg, $lightness: if(lightness($bg) < 70%, -70%, 70%))
-
-  $color: if(lightness($bg) > 70%, #333, #fff)
-
   color: $color
+  text-shadow: 0 1px 1px scale-color($bg, $lightness: if(lightness($bg) < 70%, -70%, 70%))
 
   a,
   a:hover
@@ -18,61 +18,69 @@ $alert-font-size: rem-calc(14)
 
 =fustrate-alerts
   .alert-box
+    +alert-color
     border-style: solid
     border-width: 1px
     display: block
+    font-size: $alert-font-size
     font-weight: normal
     margin-bottom: rem-calc(20)
-    position: relative
     padding: $alert-padding
-    font-size: $alert-font-size
-    +transition(opacity 300ms ease-out)
-    +alert-color
+    position: relative
+    transition: opacity .3s ease-out
 
     .panel &:last-child
       margin-bottom: 0
 
-    li, p
+    li,
+    p
       font-size: $alert-font-size
 
     & > :last-child
       margin-bottom: 0
 
     a.close
+      color: $alert-dark-color
       font-size: rem-calc(22)
-      padding: 9px 6px 4px
       line-height: 0
-      position: absolute
-      top: 50%
       margin-top: -(rem-calc(22) / 2)
+      opacity: .6
+      padding: 9px 6px 4px
+      position: absolute
       right: rem-calc(4)
-      opacity: 0.6
-      color: #333
       text-decoration: none !important
+      top: 50%
 
       &:hover,
       &:focus
-        opacity: 0.8
+        opacity: .8
 
     &.radius
       border-radius: 3px
+
     &.round
       border-radius: 8px
 
     &.plain
       +alert-color(lighten($grey, 57%))
+
     &.success,
     &.good,
     &.birthday
       +alert-color($success-color)
+
     &.alert
       +alert-color($alert-color)
+
     &.secondary
       +alert-color($secondary-color)
+
     &.warning
       +alert-color($warning-color)
+
     &.danger,
     &.error
       +alert-color($danger-color)
+
     &.info
       +alert-color($info-color)

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

@@ -1,31 +1,25 @@
-$button-padding: rem-calc(12)
-$button-font-size: rem-calc(12)
-$button-color: #fff
-$button-alt-color: #333
+$button-padding: rem-calc(12) !default
+$button-font-size: rem-calc(12) !default
+$button-color: #fff !default
+$button-alt-color: #333 !default
 
 =button-base
-  display: inline-block
-  border: none
+  -webkit-appearance: none
+  border: 0
+  border-radius: 0
   cursor: pointer
-  margin: 0 0 rem-calc(5)
-
+  display: inline-block
   font-size: $button-font-size
   font-weight: normal
-
   line-height: normal
+  margin: 0 0 rem-calc(5)
   position: relative
-  text-decoration: none
   text-align: center
-  -webkit-appearance: none
-  -webkit-border-radius: 0
-
-  +transition(background .2s linear)
+  text-decoration: none
+  transition: background .2s linear
 
 =button-size($padding: $button-padding, $sides: $button-padding * 1.5)
-  padding-top: $padding
-  padding-right: $sides
-  padding-bottom: $padding + rem-calc(1)
-  padding-left: $sides
+  padding: $padding $sides ($padding + rem-calc(1))
 
 =button-style($bg: $primary-color, $hover: true)
   $color: if(lightness($bg) < 70%, $button-color, $button-alt-color)
@@ -33,7 +27,7 @@ $button-alt-color: #333
 
   background: $bg
   color: $color
-  text-shadow: 0 1px 1px scale_color($bg, $lightness: $shadow-lightness)
+  text-shadow: 0 1px 1px scale-color($bg, $lightness: $shadow-lightness)
 
   .alert-box &
     color: $color
@@ -42,7 +36,7 @@ $button-alt-color: #333
   @if $hover
     &:hover,
     &:active
-      background: if($hover == true, scale_color($bg, $lightness: -17%), $hover)
+      background: if($hover == true, scale-color($bg, $lightness: -17%), $hover)
       color: $color
 
     .alert-box &:hover,
@@ -76,8 +70,8 @@ $button-alt-color: #333
 
     &.tiny
       +button-size($button-padding * .4, $button-padding * .6)
-      font-size: $button-font-size * .4
       border-radius: 5px
+      font-size: $button-font-size * .4
 
     &.danger,
     &.logout,
@@ -85,6 +79,7 @@ $button-alt-color: #333
     &.deny,
     &.delete
       +button-style($red)
+
     &.save,
     &.submit,
     &.create,
@@ -92,6 +87,7 @@ $button-alt-color: #333
     &.success,
     &.close
       +button-style($green)
+
     &.plain,
     &.toggle-all,
     &.download,

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

@@ -7,17 +7,17 @@ $disclosure-title-font-size: rem-calc(12)
       cursor: pointer
       font-size: $disclosure-title-font-size
 
-      &:before
-        content: "\25b8"
-        width: 12px
+      &::before
+        content: '\25b8'
         display: inline-block
+        width: 12px
 
     .disclosure-content
       display: none
 
     &.open
-      .disclosure-title:before
-        content: "\25be"
+      .disclosure-title::before
+        content: '\25be'
 
       .disclosure-content
         display: inherit

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

@@ -1,31 +1,36 @@
+$dropdown-color: #000 !default
+$dropdown-bg-color: #fff !default
+$dropdown-border-color: #ccc !default
+$dropdown-hover-bg-color: #f4f4f4 !default
+
 =fustrate-dropdowns
   .has-dropdown
-    &:after
-      content: "\25BE"
+    &::after
+      content: '\25BE'
       padding-left: .5em
 
-    & + ul.dropdown
-      background: white
-      border: 1px solid #ccc
-      width: auto
-      display: inline-block
+    & + .dropdown
+      background: $dropdown-bg-color
+      border: 1px solid $dropdown-border-color
       border-radius: 4px
-      position: absolute
+      display: inline-block
       left: -9999px
+      position: absolute
+      width: auto
       z-index: 1
 
-      li
-        a, span
-          padding: 3px 10px
-          display: block
-          color: black
-          font-size: .9rem
-          cursor: pointer
+      a,
+      span
+        color: $dropdown-color
+        cursor: pointer
+        display: block
+        font-size: .9rem
+        padding: 3px 10px
 
-          &:hover
-            background: #f4f4f4
+        &:hover
+          background: scale-color($dropdown-bg-color, $lightness: -5%)
 
         &.divider
-          border-top: 1px solid #ccc
-          padding: 0
+          border-top: 1px solid $dropdown-border-color
           margin: 3px 0
+          padding: 0

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

@@ -1,33 +1,38 @@
+$flash-color: #fff !default
+$flash-shadow-color: rgba(255, 255, 255, .4) !default
+$flash-bg-color: $primary-color !default
+$flash-error-bg-color: $danger-color !default
+$flash-success-bg-color: $success-color !default
+
 =fustrate-flash
   #flashes
     bottom: 0
     left: 0
+    padding: .15rem .15rem 0
     position: fixed
     width: 100%
     z-index: 9900
-    padding: 0.15rem 0.15rem 0
 
     .flash
-      position: relative
-      margin: 0 0 0.15rem
-      opacity: 0.98
-      box-shadow: 0 0 8px rgba(255, 255, 255, 0.4)
-      color: white
+      +flash-color($flash-bg-color)
+      box-shadow: 0 0 8px $flash-shadow-color
+      color: $flash-color
       font-size: 1.25em
       line-height: 40px
+      margin: 0 0 .15rem
       min-height: 40px
-      padding: 0.2em 0
+      opacity: .98
+      padding: .2em 0
+      position: relative
       text-align: center
-      background: $primary-color
-      border: 1px solid scale_color($primary-color, $lightness: 20%)
-      text-shadow: 0 1px 3px scale_color($primary-color, $lightness: -50%)
 
       &.error
-        background: $danger-color
-        border: 1px solid scale_color($danger-color, $lightness: 20%)
-        text-shadow: 0 1px 3px scale_color($danger-color, $lightness: -50%)
+        +flash-color($flash-error-bg-color)
 
       &.success
-        background: $success-color
-        border: 1px solid scale_color($success-color, $lightness: 20%)
-        text-shadow: 0 1px 3px scale_color($success-color, $lightness: -50%)
+        +flash-color($flash-success-bg-color)
+
+=flash-color($bg)
+  background: $bg
+  border: 1px solid scale-color($bg, $lightness: 20%)
+  text-shadow: 0 1px 3px scale-color($bg, $lightness: -50%)