fustrate-rails 0.3.3 → 0.4.0

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

@@ -1,10 +1,10 @@
-@import "buttons"
-@import "panels"
+@import 'buttons'
+@import 'panels'
 
-$tabs-padding: rem-calc(10)
-$tabs-font-size: rem-calc(12)
-$tabs-content-padding: 0 rem-calc(10)
-$tabs-active-color: $primary-color
+$tabs-padding: rem-calc(10) !default
+$tabs-font-size: rem-calc(12) !default
+$tabs-content-padding: 0 rem-calc(10) !default
+$tabs-active-color: $primary-color !default
 
 =fustrate-tabs
   ul.tabs

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

@@ -1,6 +1,6 @@
-$tooltip-bg-color: #222
-$tooltip-color: #eee
-$tooltip-opacity: .9
+$tooltip-bg-color: #222 !default
+$tooltip-color: #eee !default
+$tooltip-opacity: .9 !default
 
 =fustrate-tooltips
   [data-tooltip]
@@ -10,19 +10,19 @@ $tooltip-opacity: .9
     background: $tooltip-bg-color
     color: $tooltip-color
     font-size: .8rem
-    padding: 5px 7px
-    opacity: $tooltip-opacity
-    position: absolute
     line-height: 1.2
     max-width: 200px
+    opacity: $tooltip-opacity
+    padding: 5px 7px
+    position: absolute
 
-    &:before
-      display: block
-      width: 0px
-      height: 0px
+    &::before
       border: 4px solid transparent
       border-bottom-color: $tooltip-bg-color
+      bottom: 100%
       content: ' '
-      position: absolute
+      display: block
+      height: 0
       left: 8px
-      bottom: 100%
+      position: absolute
+      width: 0

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

@@ -1,88 +1,93 @@
-$font-color: #222
+$body-bg-color: #fafafa !default
+$font-color: #222 !default
 
-$h1-font-size: rem-calc(34)
-$h2-font-size: rem-calc(30)
-$h3-font-size: rem-calc(26)
-$h4-font-size: rem-calc(22)
-$h5-font-size: rem-calc(18)
-$h6-font-size: 1rem
+$h1-font-size: rem-calc(34) !default
+$h2-font-size: rem-calc(30) !default
+$h3-font-size: rem-calc(26) !default
+$h4-font-size: rem-calc(22) !default
+$h5-font-size: rem-calc(18) !default
+$h6-font-size: 1rem !default
 
-$h1-font-reduction: rem-calc(10)
-$h2-font-reduction: rem-calc(10)
-$h3-font-reduction: rem-calc(5)
-$h4-font-reduction: rem-calc(5)
+$h1-font-reduction: rem-calc(10) !default
+$h2-font-reduction: rem-calc(10) !default
+$h3-font-reduction: rem-calc(5) !default
+$h4-font-reduction: rem-calc(5) !default
+
+$print-color: #000 !default
+$print-border-color: #999 !default
 
 =fustrate-typography
   html,
   body
-    height: 100%
     font-size: 1em
+    height: 100%
 
-  *,
-  *:before,
-  *:after
-    box-sizing: border-box
+  *
+    &,
+    &::before,
+    &::after
+      box-sizing: border-box
 
   body
-    background: #fafafa
+    background: $body-bg-color
     color: $font-color
-    padding: 0
-    margin: 0
-    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif
-    font-weight: normal
+    cursor: default
+    font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif
     font-style: normal
+    font-weight: normal
     line-height: $base-line-height
+    margin: 0
+    padding: 0
     position: relative
-    cursor: default
-
-  a:hover
-    cursor: pointer
 
   img
-    max-width: 100%
-    height: auto
+    -ms-interpolation-mode: bicubic
     display: inline-block
+    height: auto
+    max-width: 100%
     vertical-align: middle
-    -ms-interpolation-mode: bicubic
 
+  blockquote,
+  dd,
   div,
   dl,
   dt,
-  dd,
-  ul,
-  ol,
-  li,
+  form,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
-  pre,
-  form,
+  li,
+  ol,
   p,
-  blockquote,
+  pre,
+  td,
   th,
-  td
+  ul
     margin: 0
     padding: 0
 
   a
     color: $primary-color
-    text-decoration: none
     line-height: inherit
+    text-decoration: none
 
     &:hover,
     &:active
       color: scale-color($primary-color, $lightness: -14%)
 
+    &:hover
+      cursor: pointer
+
     img
-      border: none
+      border: 0
 
   p
     font-family: inherit
-    font-weight: normal
     font-size: 1rem
+    font-weight: normal
     line-height: 1.6
     margin-bottom: rem-calc(20)
     text-rendering: optimizeLegibility
@@ -91,48 +96,58 @@ $h4-font-reduction: rem-calc(5)
       font-size: 1rem + rem-calc(3.5)
       line-height: 1.6
 
-  h1, h2, h3, h4, h5, h6
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    color: $font-color
     font-family: inherit
-    font-weight: normal
     font-style: normal
-    color: #222
-    text-rendering: optimizeLegibility
-    margin-top: .2rem
-    margin-bottom: .5rem
+    font-weight: normal
     line-height: 1.4
+    margin-bottom: .5rem
+    margin-top: .2rem
     padding: 0 rem-calc(20)
+    text-rendering: optimizeLegibility
 
     small
+      color: scale-color($font-color, $lightness: 35%)
       font-size: 60%
-      color: scale-color(#222, $lightness: 35%)
       line-height: 0
 
   h1
     font-size: $h1-font-size - $h1-font-reduction
+
   h2
     font-size: $h2-font-size - $h2-font-reduction
+
   h3
     font-size: $h3-font-size - $h3-font-reduction
+
   h4
     font-size: $h4-font-size - $h4-font-reduction
+
   h5
     font-size: $h5-font-size
+
   h6
     font-size: $h6-font-size
 
   .subheader
-    line-height: 1.4
-    color: scale-color(#222, $lightness: 35%)
+    color: scale-color($font-color, $lightness: 35%)
     font-weight: normal
-    margin-top: .2rem
+    line-height: 1.4
     margin-bottom: .5rem
+    margin-top: .2rem
 
   hr
-    border: solid #ccc
+    border: solid scale-color($font-color, $lightness: 75%)
     border-width: 1px 0 0
     clear: both
-    margin: rem-calc(20) 0 (rem-calc(20) - rem-calc(1px))
     height: 0
+    margin: rem-calc(20) 0 (rem-calc(20) - rem-calc(1px))
 
   em,
   i
@@ -151,61 +166,64 @@ $h4-font-reduction: rem-calc(5)
   ul,
   ol,
   dl
+    font-family: inherit
     font-size: 1rem
     line-height: 1.6
-    margin-bottom: rem-calc(20)
     list-style-position: outside
-    font-family: inherit
+    margin-bottom: rem-calc(20)
 
   ul
     list-style-type: none
     margin-left: 0
     padding-left: 0
+
     &.no-bullet
+      list-style: none
       margin-left: 0
-      li
-        ul,
-        ol
-          margin-left: rem-calc(20)
-          margin-bottom: 0
-          list-style: none
 
-  ul
-    li
       ul,
       ol
-        margin-left: rem-calc(20)
+        list-style: none
         margin-bottom: 0
+        margin-left: rem-calc(20)
+
+    ul,
+    ol
+      margin-bottom: 0
+      margin-left: rem-calc(20)
 
     &.square,
     &.circle,
     &.disc
       margin-left: 1.1rem
-      li ul
+
+      ul
         list-style: inherit
 
     &.square
       list-style-type: square
+
     &.circle
       list-style-type: circle
+
     &.disc
       list-style-type: disc
-    &.no-bullet
-      list-style: none
 
   ol
     margin-left: 1.4rem
+
     li
       ul,
       ol
-        margin-left: rem-calc(20)
         margin-bottom: 0
+        margin-left: rem-calc(20)
 
   dl
     dt
-      padding-left: 0
-      margin-bottom: .3rem
       font-weight: bold
+      margin-bottom: .3rem
+      padding-left: 0
+
     dd
       margin-bottom: rem-calc(12)
       padding-left: 10px
@@ -215,61 +233,48 @@ $h4-font-reduction: rem-calc(5)
 
   address
     font-style: normal
-    white-space: pre
+    white-space: pre-line
 
   abbr,
   acronym
-    text-transform: uppercase
-    font-size: 90%
+    border-bottom: 1px dotted scale-color($text-color, $lightness: 85%)
     color: $font-color
-    border-bottom: 1px dotted #ddd
     cursor: help
+    font-size: 90%
+    text-transform: uppercase
 
   abbr
     text-transform: none
 
   blockquote
+    border-left: 1px solid scale-color($text-color, $lightness: 85%)
     margin: 0 0 rem-calc(20)
     padding: rem-calc(9 20 9 19)
-    border-left: 1px solid #ddd
 
     // Respect the padding, fool.
     & > :first-child
       margin-top: 0
+
     & > :last-child
       margin-bottom: 0
 
-  blockquote,
-  blockquote p
-    line-height: 1.6
-    color: scale-color(#222, $lightness: 35%)
+    &,
+    & p
+      color: scale-color($text-color, $lightness: 35%)
+      line-height: 1.6
 
   iframe
     margin-bottom: rem-calc(20)
 
-  @media #{$medium-up}
-    h1,h2,h3,h4,h5,h6
-      line-height: 1.4
-
-    h1
-      font-size: $h1-font-size
-    h2
-      font-size: $h2-font-size
-    h3
-      font-size: $h3-font-size
-    h4
-      font-size: $h4-font-size
-    h5
-      font-size: $h5-font-size
-    h6
-      font-size: $h6-font-size
-
   .text-left
     text-align: left !important
+
   .text-right
     text-align: right !important
+
   .text-center
     text-align: center !important
+
   .text-justify
     text-align: justify !important
 
@@ -282,16 +287,19 @@ $h4-font-reduction: rem-calc(5)
 
   .left
     float: left !important
+
   .right
     float: right !important
+
   .clearfix
     +clearfix
+
   .hide
     display: none !important
 
   .antialiased
-    -webkit-font-smoothing: antialiased
     -moz-osx-font-smoothing: grayscale
+    -webkit-font-smoothing: antialiased
 
   .print-only
     display: none !important
@@ -301,9 +309,9 @@ $h4-font-reduction: rem-calc(5)
     vertical-align: middle
 
   .help
-    opacity: .7
-    font-size: 0.8rem
+    font-size: .8rem
     margin: 0
+    opacity: .7
 
   .dim
     opacity: .6
@@ -314,16 +322,43 @@ $h4-font-reduction: rem-calc(5)
   .nowrap
     white-space: nowrap
 
+  @media #{$medium-up}
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
+      line-height: 1.4
+
+    h1
+      font-size: $h1-font-size
+
+    h2
+      font-size: $h2-font-size
+
+    h3
+      font-size: $h3-font-size
+
+    h4
+      font-size: $h4-font-size
+
+    h5
+      font-size: $h5-font-size
+
+    h6
+      font-size: $h6-font-size
+
   @media print
     *
       background: transparent !important
-      color: #000 !important
       box-shadow: none !important
+      color: $print-color !important
       text-shadow: none !important
 
-    pre,
-    blockquote
-      border: 1px solid #999
+    blockquote,
+    pre
+      border: 1px solid $print-border-color
       page-break-inside: avoid
 
     thead
@@ -336,9 +371,6 @@ $h4-font-reduction: rem-calc(5)
     img
       max-width: 100% !important
 
-    @page
-      margin: 0.5cm
-
     p,
     h2,
     h3
@@ -351,5 +383,9 @@ $h4-font-reduction: rem-calc(5)
 
     .print-only
       display: inherit !important
+
     .no-print
       display: none !important
+
+    @page
+      margin: .5cm