spina-template 0.2.4

data/app/assets/stylesheets/spina/_buttons.css.sass

@@ -0,0 +1,334 @@
+// Buttons
+
+button, input[type="submit"]
+  border: none
+
+.button
+  background: #efefef
+  border-radius: 3px
+  color: #444
+  display: inline-block
+  font-size: 14px
+  font-weight: bold
+  line-height: 36px
+  margin: 0 4px 4px 0
+  padding: 0 16px
+  text-decoration: none
+  @include transition(all .2s ease)
+
+  &:hover
+    background: tint(#efefef, 20%)
+
+  &.button-shaded:hover
+    background: #efefef
+
+  &:active, &.button-active, &.button-shaded, &.button-shaded:active
+    background: shade(#efefef, 10%)
+
+  &.button-primary
+    background: $primary-color
+    color: #fff
+
+    &:hover
+      background: tint($primary-color, 20%)
+
+    &.button-shaded:hover
+      background: $primary-color
+
+    &:active, &.button-active, &.button-shaded, &.button-shaded:active
+      background: shade($primary-color, 10%)
+
+  &.button-success
+    background: $success-color
+    color: #fff
+
+    &:hover
+      background: tint($success-color, 20%)
+
+    &.button-shaded:hover
+      background: $success-color
+
+    &:active, &.button-active, &.button-shaded, &.button-shaded:active
+      background: shade($success-color, 10%)
+
+  &.button-danger
+    color: $danger-color
+
+  &.button-link
+    background: none
+    font-weight: 600
+
+    &:hover
+      color: #333
+
+    &:active, &.button-active
+      color: #111
+
+  &:before
+    margin-right: 8px
+    vertical-align: text-top
+
+  &.icon-only:before
+    margin-right: 0
+
+  &.icon-mini:before
+    font-size: 8px
+    line-height: 12px
+    margin-right: 4px
+
+  &.button-large
+    border-radius: 4px
+    font-size: 15px
+    line-height: 42px
+    padding: 0 18px
+
+    &:before
+      margin-right: 10px
+
+  &.button-small
+    font-size: 13px
+    line-height: 32px
+    padding: 0 12px
+
+  &.button-mini
+    font-size: 12px
+    line-height: 26px
+    padding: 0 10px
+
+  &.button-hollow
+    background: none
+    border: 1px solid #ccc
+    color: #777
+
+    &:hover
+      border: 1px solid #bbb
+      color: #666
+
+    &:active, &.button-active
+      border: 1px solid #aaa
+      color: #444
+
+  &.button-round
+    border-radius: 21px
+
+.pull-right .button
+  margin: 0 0 4px 4px
+
+// Button groups
+
+.button-group
+  .button
+    border-radius: 0
+    float: left
+    margin-right: 0
+
+  .button:first-child
+    border-radius: 3px 0 0 3px
+
+  .button:last-child
+    border-radius: 0 3px 3px 0
+
+  &:after
+    clear: both
+    content: ""
+    display: block
+
+.button-group.button-group-round
+  .button
+    float: left
+    margin-left: 0
+
+  .button:first-child
+    border-radius: 21px 0 0 21px
+    border-right: none
+
+  .button:last-child
+    border-radius: 0 21px 21px 0
+
+// Pagination
+
+.pagination-container
+  background: #f9f9f9
+  border: 1px solid #eee
+  border-left: none
+  border-right: none
+  margin: 0 -40px
+  padding: 0 40px
+
+.pagination
+
+  .previous_page, .next_page, em.current, a
+    color: #999
+    display: inline-block
+    font-size: 14px
+    font-style: normal
+    font-weight: 600
+    line-height: 32px
+    padding: 0 8px
+
+    &:first-child
+      padding-left: 0
+
+  .disabled
+    display: none
+
+// Dropdowns
+
+[data-dropdown]
+  position: relative
+
+  ul, .sliding-dropdown
+    background: #fff
+    border: 1px solid #ccc
+    border-radius: 3px
+    display: none
+    list-style: none
+    margin: 0
+    margin-top: 6px
+    padding: 6px 0
+    position: absolute
+    width: 200px
+    z-index: 999
+
+  ul:before, .sliding-dropdown:before
+    content: ""
+    display: block
+    height: 0
+    position: absolute
+    left: 11px
+    top: -8px
+    width: 0
+    border-bottom: 8px solid #aaa
+    border-left: 8px solid transparent
+    border-right: 8px solid transparent          
+
+  ul:after, .sliding-dropdown:after
+    content: ""
+    display: block
+    height: 0
+    position: absolute
+    left: 12px
+    top: -7px
+    width: 0
+    border-bottom: 7px solid #fff
+    border-left: 7px solid transparent
+    border-right: 7px solid transparent
+
+  ul.align-right
+    right: 0px
+
+  ul.align-right:before
+    left: auto
+    right: 11px
+
+  ul.align-right:after
+    left: auto
+    right: 12px
+
+  ul.open
+    display: block
+
+  ul li.divider
+    border-top: 1px solid #e9e9e9
+    margin: 8px 0
+
+  ul li a
+    color: #333
+    display: block
+    font-size: 14px
+    padding: 8px 16px
+    text-decoration: none
+
+  ul li a:hover
+    background-color: $primary-color
+    color: #fff
+
+  ul li a:before
+    margin-right: 8px
+
+[data-dropdown] .sliding-dropdown
+  padding: 0
+  width: 300px
+
+  .slide-controls
+    border-bottom: 1px solid #eaeaea
+    color: #333
+    font-size: 14px
+    font-weight: 600
+    line-height: 44px
+    text-align: center
+
+    .slide-title
+      display: none
+
+    .slide-title.active
+      display: block
+
+    .previous, .next
+      color: #666
+      font-size: 12px
+      padding: 0 12px
+      position: absolute
+      top: 0px
+
+      &:hover
+        color: #333
+
+      &.muted
+        color: #ccc
+        cursor: default
+
+    .previous
+      left: 0px
+
+    .next
+      right: 0px
+
+  .slide-controls.open
+    display: block
+
+  .slide
+    display: none
+    text-align: center
+
+    &.active
+      display: block
+
+    p
+      color: #333
+      font-size: 14px
+      font-weight: 400
+      margin: 16px
+
+    p.muted
+      color: #999
+
+    .button
+      border-top-left-radius: 0
+      border-top-right-radius: 0
+      margin: -1px
+      width: 300px
+
+      &.button-primary
+        background: #f0f9fe
+        border: 1px solid #cee5f2
+        color: #0091e5
+
+        &:hover
+          background: #0091e5
+          border: 1px solid #0091e5
+          color: #fff
+
+  .slide-dots
+    margin: 12px
+    text-align: center
+
+    .slide-dot
+      background: #ccc
+      border-radius: 2px
+      display: inline-block
+      height: 4px
+      width: 4px
+
+      &.active
+        background: #333

data/app/assets/stylesheets/spina/_cards.css.sass

@@ -0,0 +1,57 @@
+.cards-grid
+  
+
+.card
+  background: #fff
+  border: 1px solid #e9e9e9
+  border-radius: 3px
+  display: inline-block
+  margin: 0 28px 30px 0
+  text-align: center
+  width: 225px
+
+  .card-heading
+    color: #333
+    font-size: 12px
+    font-weight: 600
+    line-height: 24px
+    padding: 12px
+    text-transform: uppercase
+
+  .card-content
+    padding: 12px 12px 24px 12px
+
+  .card-footer
+    border-top: 1px solid #e9e9e9
+    color: #999
+    font-size: 16px
+    font-weight: 400
+    line-height: 28px
+    padding: 4px 12px
+
+  .card-score
+    color: #666
+    font-size: 64px
+    font-weight: bold
+    margin: 12px 0
+
+    &.card-score-a
+      color: #00c309
+
+    &.card-score-b
+      color: #8dbe50
+
+    &.card-score-c
+      color: #f3e64c
+
+    &.card-score-d
+      color: #f0aa50
+
+    &.card-score-f
+      color: #e62f36
+
+    small
+      color: #666
+      display: block
+      font-size: 13px
+      font-weight: 400

data/app/assets/stylesheets/spina/_configuration.css.sass

@@ -0,0 +1,16 @@
+$primary-color: #00a2ff
+$success-color: #0fd2a2
+$danger-color: #da3939
+$info-color: #17577c
+$error-color: #6a1515
+$alert-color: orange
+
+$asset-pipeline: true
+$font-family: "Proxima Nova", $helvetica
+$font-family-serif: "Skolar", $georgia
+$icon-font: "Spina"
+$gutter: 5em
+
+$desktop: min-width 768px 8
+$tablet: max-width 768px 8
+$mobile: max-width 480px 4

data/app/assets/stylesheets/spina/_custom_animations.css.sass

@@ -0,0 +1,61 @@
+@include keyframes("flyIn")
+  0%
+    opacity: 0
+    @include transform(scale(.9))
+  100%
+    opacity: 1
+    @include transform(scale(1))
+
+.animated.flyIn
+  @include animation("flyIn" .4s ease)
+
+@include keyframes("flyOut")
+  0%
+    opacity: 1
+    @include transform(scale(1))
+  100%
+    opacity: 0
+    @include transform(scale(.9))
+
+.animated.flyOut
+  @include animation("flyOut" .4s ease)
+
+@include keyframes("small-shake")
+  0%, 100%
+    @include transform(translateX(0))
+  20%, 60%
+    @include transform(translateX(7px))
+  40%, 80%
+    @include transform(translateX(-7px))
+
+.animated.small-shake
+  @include animation("small-shake" .6s ease-in)
+
+@include keyframes("switchon")
+  0%
+    @include transform(translate3d(0, 0, 0))
+  50%
+    width: 32px
+    @include transform(translate3d(0, 0, 0))
+  100%
+    width: 23px
+    @include transform(translate3d(17px, 0, 0))
+
+@include keyframes("switchoff")
+  0%
+    @include transform(translate3d(17px, 0, 0))
+  100%
+    @include transform(translate3d(0, 0, 0))
+
+.deactivated .knob
+  @include animation("switchoff" .2s ease)
+
+.activated .knob
+  @include animation("switchon" .4s)
+  @include animation-fill-mode(forwards)
+
+@include keyframes("rotate")
+  0%
+    @include transform(rotate(0deg))
+  100%
+    @include transform(rotate(360deg))

data/app/assets/stylesheets/spina/_farbtastic.css.sass

@@ -0,0 +1,37 @@
+.farbtastic
+  background: #fff
+  border-radius: 100px
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
+  display: none
+  position: absolute
+  z-index: 3
+
+  *
+    cursor: crosshair
+    position: absolute
+
+  .color, .overlay
+    height: 101px
+    left: 47px
+    top: 47px
+    width: 101px
+
+  .wheel
+    background: url(asset_path('spina/wheel.png', 'image'))
+    height: 195px
+    width: 195px
+
+  .overlay
+    background: url(asset_path('spina/mask.png', 'image'))
+
+  .marker
+    background: url(asset_path('spina/marker.png', 'image'))
+    height: 17px
+    margin: -8px 0 0 -8px
+    overflow: hidden
+    width: 17px
+
+.farbtastic, .farbtastic .wheel
+  height: 195px
+  width: 195px
+

data/app/assets/stylesheets/spina/_fonts.css.sass

@@ -0,0 +1,14 @@
+// Icons
+
+[data-icon]:before
+  font-family: $icon-font
+  content: attr(data-icon)
+  font-style: normal
+  font-weight: normal !important
+  line-height: 1
+  speak: none
+  vertical-align: text-top
+  -webkit-font-smoothing: antialiased
+
+[data-icon].icon-dimmed:before
+  opacity: .25