fustrate-rails 0.3.3 → 0.4.0

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

@@ -1,51 +1,36 @@
+$modal-bg-color: #fff !default
+$modal-title-color: #fff !default
+$modal-border-color: #666 !default
+$modal-overlay-color: rgba(0, 0, 0, .45) !default
+
 =modal-width($width: 80%)
   margin-left: -($width / 2)
   width: $width
 
 =fustrate-modals
   .modal-overlay
-    position: fixed
+    background: $modal-overlay-color
+    display: none
     height: 120%
+    left: 0
+    position: fixed
+    top: 0
     width: 100%
-    background: #000
-    background: rgba(#000, .45)
     z-index: 9500
-    display: none
-    top: 0
-    left: 0
 
   .modal
-    visibility: hidden
+    background-color: $modal-bg-color
+    border: 0
+    box-shadow: 0 0 10px $modal-overlay-color
     display: none
-    position: absolute
-    z-index: 9501
-    width: 100vw
-    top: 0
     left: 0
-    background-color: #fff
-    padding: rem-calc(12)
-    border: 1px solid #666
-    box-shadow: 0 0 10px rgba(#000, .4)
     margin-bottom: 1rem
-
-    @media #{$small-only}
-      min-height: 100vh
-
-    @media #{$medium-up}
-      +modal-width
-      top: rem-calc(100)
-      left: 50%
-
-      &.tiny
-        +modal-width(30%)
-      &.small
-        +modal-width(40%)
-      &.medium
-        +modal-width(60%)
-      &.large
-        +modal-width(70%)
-      &.xlarge
-        +modal-width(95%)
+    padding: 0
+    position: absolute
+    top: 0
+    visibility: hidden
+    width: 100vw
+    z-index: 9501
 
     .column,
     .columns
@@ -53,30 +38,70 @@
 
     & > :first-child
       margin-top: 0
+
     & > :last-child,
     .modal-content form
       margin-bottom: 0
 
     .modal-title
-      padding: 0 rem-calc(4) rem-calc(4)
-      margin: 0 0 rem-calc(8)
-      border-bottom: 1px solid #ddd
+      background: scale-color($blue, $lightness: -15%)
+      border: 1px solid scale-color($blue, $lightness: -40%)
+      color: $modal-title-color
       font-weight: bold
+      margin: 0
+      padding: rem-calc(6) rem-calc(12)
+      text-shadow: 0 1px 1px $black
 
     .modal-close
+      color: $modal-title-color
+      cursor: pointer
       font-size: rem-calc(24)
+      font-weight: bold
       line-height: 1
       position: absolute
-      top: rem-calc(8)
       right: rem-calc(16)
-      color: #aaa
-      font-weight: bold
-      cursor: pointer
+      top: rem-calc(5)
+
+    .modal-content
+      border: 1px solid $modal-border-color
+      border-width: 0 1px
+      margin: 0
+      padding: rem-calc(12)
+
+    .modal-buttons
+      background: scale-color($modal-bg-color, $lightness: -7%)
+      border: 1px solid $modal-border-color
+      border-top-color: scale-color($modal-border-color, $lightness: 70%)
+      padding: rem-calc(12)
+      text-align: right
+
+      &:empty
+        border-width: 0 0 1px
+        padding: 0
+
+      // The normal cancel button color is too light on a light grey background
+      .cancel
+        +button-style(#dadada)
+
+    &.success
+      .modal-title
+        background: scale-color($green, $lightness: -5%)
+        border: 1px solid scale-color($green, $lightness: -35%)
+
+    &.failure
+      .modal-title
+        background: $red
+        border: 1px solid scale-color($red, $lightness: -30%)
+
+    &.withdraw
+      .modal-title
+        background: #444
+        border: 1px solid scale-color(#444, $lightness: -30%)
 
     .picker
+      background: #fafafa
       height: 300px
       overflow-y: scroll
-      background: #fafafa
       position: relative
 
       .section
@@ -85,35 +110,58 @@
 
       .title
         background: #e3e3e3
-        padding: 2px rem-calc(8)
         border: 1px solid #ccc
         cursor: pointer
+        padding: 2px rem-calc(8)
 
         .count
           float: right
           font-size: rem-calc(12)
 
       .option
-        cursor: pointer
         border: 1px solid #ccc
+        cursor: pointer
         margin-top: -1px
         padding: .5rem
 
         &:hover
           background: $info-color
-          color: scale_color($info-color, $lightness: -65%)
-          border-color: scale_color($info-color, $lightness: -20%)
-          z-index: 9999
+          border-color: scale-color($info-color, $lightness: -20%)
+          color: scale-color($info-color, $lightness: -65%)
           position: relative
+          z-index: 9999
 
         .description
-          font-size: .8rem
           color: #555
+          font-size: .8rem
           padding-left: .5rem
 
+    @media #{$small-only}
+      min-height: 100vh
+
+    @media #{$medium-up}
+      +modal-width
+      left: 50%
+      top: rem-calc(100)
+
+      &.tiny
+        +modal-width(30%)
+
+      &.small
+        +modal-width(40%)
+
+      &.medium
+        +modal-width(60%)
+
+      &.large
+        +modal-width(70%)
+
+      &.xlarge
+        +modal-width(95%)
 
   @media print
     .modal-overlay
       display: none !important
+
     .modal
-      background: #fff !important
+      background: $white !important

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

@@ -1,57 +1,69 @@
-$pagination-active-color: $primary-color !default
+$pagination-color: #222 !default
+$pagination-link-color: #999 !default
+$pagination-active-bg-color: $primary-color !default
+$pagination-disabled-color: #999 !default
+$pagination-active-color: #fff !default
+$pagination-hover-bg-color: rgba(0, 0, 0, .08) !default
 
 =fustrate-pagination
-  ul.pagination
+  .pagination
     display: block
-    min-height: rem-calc(24)
     margin-left: rem-calc(-5)
+    min-height: rem-calc(24)
     text-align: center
 
     &:empty
       display: none
 
     li
-      height: rem-calc(24)
-      color: #222
+      color: $pagination-color
+      display: inline-block
       font-size: rem-calc(14)
+      height: rem-calc(24)
       margin-left: rem-calc(1)
-      display: inline-block
 
-      a, span
-        display: block
-        padding: rem-calc(1 10 1)
-        color: #999
+      a,
+      span
         background: none
         border-radius: 4px
-        font-weight: normal
+        color: $pagination-link-color
+        display: block
         font-size: 1em
+        font-weight: normal
         line-height: inherit
-        +transition(background-color .3s ease-out)
+        padding: rem-calc(1 10 1)
+        transition: background-color .3s ease-out
+
+        &:focus
+          background: $pagination-hover-bg-color
 
-      &:hover a,
-      a:focus,
-      &:hover span,
-      span:focus
-        background: scale-color(#fff, $lightness: -10%)
+      &:hover
+        a,
+        span
+          background: $pagination-hover-bg-color
 
       &.unavailable
-        a, span
+        a,
+        span
+          color: $pagination-disabled-color
           cursor: default
-          color: #999
 
-        &:hover a,
-        & a:focus,
-        &:hover button,
-        & button:focus
-          background: transparent
+          &:focus
+            background: transparent
+
+        &:hover
+          a,
+          button
+            background: transparent
 
       &.current
-        a, span
-          background: $pagination-active-color
-          color: #fff
-          font-weight: bold
+        a,
+        span
+          background: $pagination-active-bg-color
+          color: $pagination-active-color
           cursor: default
+          font-weight: bold
 
           &:hover,
           &:focus
-            background: $pagination-active-color
+            background: $pagination-active-bg-color

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

@@ -1,37 +1,53 @@
-$panel-bg: darken(#fff, 5%)
+$panel-bg: #f2f2f2 !default
 
-$panel-margin-bottom: rem-calc(20)
-$panel-padding: rem-calc(16 20)
+$panel-margin-bottom: rem-calc(20) !default
+$panel-padding: rem-calc(16 20) !default
 
-$panel-font-color: #333
-$panel-font-color-alt: #fff
+$panel-font-color: #333 !default
+$panel-font-color-alt: #fff !default
 
 =panel-color($bg: $panel-bg)
-  border: 1px solid darken($bg, 11%)
   background: $bg
+  border: 1px solid darken($bg, 11%)
 
   // We set the font color based on the darkness of the bg.
-  h1, h2, h3, h4, h5, h6, p, li, dl
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  li,
+  dl
     color: if(lightness($bg) >= 50%, $panel-font-color, $panel-font-color-alt)
 
 =fustrate-panels
   .panel
+    +panel-color
+    font-size: rem-calc(14)
     margin-bottom: $panel-margin-bottom
     padding: $panel-padding
-    font-size: rem-calc(14)
-    +panel-color
 
     // reset header line-heights for panels
-    h1, h2, h3, h4, h5, h6
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6
       line-height: 1
       margin-bottom: rem-calc(20) / 2
 
-    ul, ol, dl
+    ul,
+    ol,
+    dl
       font-size: inherit
 
     // Respect the padding, fool.
     & > :first-child
       margin-top: 0
+
     & > :last-child
       margin-bottom: 0
 
@@ -40,10 +56,12 @@ $panel-font-color-alt: #fff
 
     &.info
       +panel-color(lighten($info-color, 5%))
+
     &.success
       +panel-color(lighten($success-color, 20%))
+
     &.danger
-      +panel-color(scale_color($danger-color, $lightness: 70%, $saturation: -20%))
+      +panel-color(scale-color($danger-color, $lightness: 70%, $saturation: -20%))
 
     &.small
       padding: $panel-padding / 2

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

@@ -1,15 +1,19 @@
+$popover-bg-color: #f2f2f2 !default
+$popover-border-color: #e0e0e0 !default
+
 =fustrate-popovers
   .popover
-    background: scale_color(#fff, $lightness: -5%)
-    border: 1px solid scale_color(#fff, $lightness: -12%)
+    background: $popover-bg-color
+    border: 1px solid $popover-border-color
+    box-shadow: 0 0 12px scale-color($grey, $lightness: 80%)
     display: inline-block
-    z-index: 9001
-    position: absolute
-    box-shadow: 0 0 12px scale_color($grey, $lightness: 80%)
-    padding: rem-calc(12 16)
     opacity: .9
+    padding: rem-calc(12 16)
+    position: absolute
+    z-index: 9001
 
     & > :first-child
       margin-top: 0
+
     & > :last-child
       margin-bottom: 0

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

@@ -1,5 +1,5 @@
-$table-border-color: #ccc
-$table-padding: .5em
+$table-border-color: #ccc !default
+$table-padding: .5em !default
 
 =fustrate-tables
   table
@@ -12,7 +12,7 @@ $table-padding: .5em
         border-left: 1px solid darken($table-border-color, 25%)
 
         &:first-child
-          border-left: none
+          border-left: 0
 
   th
     border-bottom: 1px solid darken($table-border-color, 25%)
@@ -27,32 +27,36 @@ $table-padding: .5em
     .thumbnail
       max-width: initial
 
-  tr, td, th
+  tr,
+  td,
+  th
     vertical-align: middle
 
   table table
     margin: 0
 
     td
-      border-top: none
+      border-top: 0
       padding: $table-padding * .5
 
   .responsive-table
     overflow: visible
 
   tr.no-records
-    text-align: center
     display: none
+    text-align: center
 
   tr.loading td
     text-align: center
-    &:before
-      +font-awesome("\f110", $spin: true)
+
+    &::before
+      +font-awesome('\f110', $spin: true)
 
   @media #{$small-only}
     .responsive-table
       table
         margin: 0 0 $table-padding
 
-    th, td
+    th,
+    td
       padding: $table-padding * .5