fustrate-rails 0.3.3

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

@@ -0,0 +1,9 @@
+$red:    #914141
+$orange: #b26620
+$yellow: #b2a120
+$green:  #70a854
+$blue:   #3775a8
+$purple: #7857db
+$pink:   #a933b1
+$brown:  #8b5e36
+$grey:   #606060

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

@@ -0,0 +1,20 @@
+$rem-base: 16px
+$base-line-height: 150%
+
+$small-limit: 40em
+// 64 is a bit too wide for half-screening on our monitors
+$medium-limit: 58em
+
+$screen: "only screen"
+
+$landscape: "#{$screen} and (orientation: landscape)"
+$portrait: "#{$screen} and (orientation: portrait)"
+
+$small-up: $screen
+$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})"
+
+$large-up: "#{$screen} and (min-width:#{$medium-limit + .063em})"
+$large-only: $large-up

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

@@ -0,0 +1,36 @@
+@import "functions"
+
+@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"
+
++fustrate-typography
++fustrate-grid
++fustrate-buttons
++fustrate-forms
++fustrate-alerts
++fustrate-disclosures
++fustrate-dropdowns
++fustrate-flash
++fustrate-labels
++fustrate-modals
++fustrate-pagination
++fustrate-panels
++fustrate-popovers
++fustrate-tables
++fustrate-tabs
++fustrate-tooltips

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

@@ -0,0 +1,40 @@
+$rem-base: 16px !default
+
+@function strip-unit($num)
+  @return $num / ($num * 0 + 1)
+
+@function convert-to-rem($value, $base-value: $rem-base)
+  $value: strip-unit($value) / strip-unit($base-value) * 1rem
+
+  @if ($value == 0rem)
+    $value: 0
+
+  @return $value
+
+@function rem-calc($values, $base-value: $rem-base)
+  $max: length($values)
+
+  @if $max == 1
+    @return convert-to-rem(nth($values, 1), $base-value)
+
+  $remValues: ()
+
+  @for $i from 1 through $max
+    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value))
+
+  @return $remValues
+
+=font-awesome($unicode, $padding-right: 3px, $spin: false)
+  font-family: FontAwesome
+  content: $unicode
+  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
+    margin-right: $padding-right
+  @else
+    padding-right: $padding-right

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

@@ -0,0 +1,78 @@
+$alert-padding: rem-calc(8) rem-calc(24) rem-calc(8) rem-calc(14)
+$alert-font-size: rem-calc(14)
+
+=alert-color($bg: #eaeaea)
+  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
+
+  a,
+  a:hover
+    color: $color
+    text-decoration: underline
+
+=fustrate-alerts
+  .alert-box
+    border-style: solid
+    border-width: 1px
+    display: block
+    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
+
+    .panel &:last-child
+      margin-bottom: 0
+
+    li, p
+      font-size: $alert-font-size
+
+    & > :last-child
+      margin-bottom: 0
+
+    a.close
+      font-size: rem-calc(22)
+      padding: 9px 6px 4px
+      line-height: 0
+      position: absolute
+      top: 50%
+      margin-top: -(rem-calc(22) / 2)
+      right: rem-calc(4)
+      opacity: 0.6
+      color: #333
+      text-decoration: none !important
+
+      &:hover,
+      &:focus
+        opacity: 0.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

@@ -0,0 +1,103 @@
+$button-padding: rem-calc(12)
+$button-font-size: rem-calc(12)
+$button-color: #fff
+$button-alt-color: #333
+
+=button-base
+  display: inline-block
+  border: none
+  cursor: pointer
+  margin: 0 0 rem-calc(5)
+
+  font-size: $button-font-size
+  font-weight: normal
+
+  line-height: normal
+  position: relative
+  text-decoration: none
+  text-align: center
+  -webkit-appearance: none
+  -webkit-border-radius: 0
+
+  +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
+
+=button-style($bg: $primary-color, $hover: true)
+  $color: if(lightness($bg) < 70%, $button-color, $button-alt-color)
+  $shadow-lightness: if(lightness($bg) < 70%, -85%, 85%)
+
+  background: $bg
+  color: $color
+  text-shadow: 0 1px 1px scale_color($bg, $lightness: $shadow-lightness)
+
+  .alert-box &
+    color: $color
+    text-decoration: none
+
+  @if $hover
+    &:hover,
+    &:active
+      background: if($hover == true, scale_color($bg, $lightness: -17%), $hover)
+      color: $color
+
+    .alert-box &:hover,
+    .alert-box &:active
+      color: $color
+      text-decoration: none
+
+=fustrate-buttons
+  button,
+  .button
+    +button-base
+    +button-size
+    +button-style
+
+    &.expand
+      width: 100%
+
+    &.radius
+      border-radius: 5px
+
+    &.xlarge
+      +button-size($button-padding * 1.8, $button-padding * 1.2)
+      font-size: $button-font-size * 1.4
+
+    &.large
+      +button-size($button-padding * 1.3, $button-padding * 1.1)
+      font-size: $button-font-size * 1.15
+
+    &.small
+      +button-size($button-padding * .6, $button-padding)
+
+    &.tiny
+      +button-size($button-padding * .4, $button-padding * .6)
+      font-size: $button-font-size * .4
+      border-radius: 5px
+
+    &.danger,
+    &.logout,
+    &.destroy,
+    &.deny,
+    &.delete
+      +button-style($red)
+    &.save,
+    &.submit,
+    &.create,
+    &.approve,
+    &.success,
+    &.close
+      +button-style($green)
+    &.plain,
+    &.toggle-all,
+    &.download,
+    &.email,
+    &.cancel
+      +button-style(#eaeaea)
+
+    h4 &
+      vertical-align: middle

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

@@ -0,0 +1,23 @@
+$disclosure-title-font-size: rem-calc(12)
+
+=fustrate-disclosures
+  .disclosure
+    .disclosure-title
+      +user-select(none)
+      cursor: pointer
+      font-size: $disclosure-title-font-size
+
+      &:before
+        content: "\25b8"
+        width: 12px
+        display: inline-block
+
+    .disclosure-content
+      display: none
+
+    &.open
+      .disclosure-title:before
+        content: "\25be"
+
+      .disclosure-content
+        display: inherit

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

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

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

@@ -0,0 +1,33 @@
+=fustrate-flash
+  #flashes
+    bottom: 0
+    left: 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
+      font-size: 1.25em
+      line-height: 40px
+      min-height: 40px
+      padding: 0.2em 0
+      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%)
+
+      &.success
+        background: $success-color
+        border: 1px solid scale_color($success-color, $lightness: 20%)
+        text-shadow: 0 1px 3px scale_color($success-color, $lightness: -50%)

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

@@ -0,0 +1,188 @@
+// 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
+
+=fustrate-forms
+  form
+    margin: 0 0 $form-spacing
+
+  label
+    font-size: $label-font-size
+    color: #4d4d4d
+    cursor: pointer
+    display: block
+    font-weight: normal
+    line-height: 1.5
+    margin-bottom: 0
+
+    &.inline
+      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
+    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
+
+  .prefix
+    border-right: none
+
+  .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"],
+  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
+    display: block
+    font-size: $input-font-size
+    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
+
+    &.inline
+      width: auto
+      display: inline-block
+
+    &:focus
+      background: #fff
+      border-color: scale-color(#fff, $lightness: -40%)
+      outline: none
+      box-shadow: 0 0 5px scale_color(#fff, $lightness: -40%)
+
+    &:disabled,
+    &[disabled],
+    &[readonly],
+    fieldset[disabled] &
+      background-color: #ddd
+      cursor: disabled
+      color: $form-disabled-color
+
+    td &:only-child,
+    th &:only-child
+      margin: 0
+
+  input[type="submit"]
+    -webkit-appearance: none
+    -webkit-border-radius: 0px
+
+  textarea
+    height: auto
+    min-height: 50px
+
+  /* Respect enforced amount of rows for textarea */
+  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
+
+    // The custom arrow have some fake horizontal padding so we can align it
+    // from the right side of the element without relying on CSS3
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+)
+    background-position: 100% center
+    background-repeat: no-repeat
+
+    border: 1px solid scale-color(#fff, $lightness: -20%)
+    padding: $form-spacing / 2
+    padding-right: 24px
+    font-size: $input-font-size
+    color: #000
+    line-height: normal
+    border-radius: 0
+    width: 100%
+
+    &.inline
+      width: auto
+      display: inline-block
+
+    &:hover
+      background-color: #fff
+
+    height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
+
+    &:disabled,
+    &[disabled],
+    &[disabled]:hover
+      background-color: #ddd
+      border-color: scale-color(#fff, $lightness: -20%)
+      cursor: disabled
+      color: $form-disabled-color
+
+    &[multiple]
+      height: auto
+      background-image: none
+
+  /* Adjust margin for form elements below */
+  input[type="file"],
+  input[type="checkbox"],
+  input[type="radio"],
+  select
+    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
+
+  /* Normalize file input width */
+  input[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%)