spina-template 0.2.4

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

@@ -0,0 +1,473 @@
+#{$all-text-inputs}, textarea
+  border: 1px solid #c3c3c3
+  border-radius: 3px
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+  color: #333
+  font-size: 14px
+  padding: 10px
+  width: 100%
+  @include transition(border .2s ease)
+
+  &.input-mini
+    width: 75px
+
+  &.input-small
+    width: 100px
+
+  &.input-medium
+    width: 200px
+
+  &.input-large
+    width: 300px
+
+  &.input-rounded
+    border-radius: 20px
+
+  &:after
+    content: " "
+    display: block
+    height: 10px
+    position: absolute
+    top: 0px
+    right: 0px
+    width: 10px
+
+  &.input-search:after
+    content: " "
+    display: block
+    height: 10px
+    width: 10px
+
+#{$all-text-inputs-focus}, textarea:focus
+  border-color: $primary-color
+  outline: none
+
+textarea
+  min-height: 120px
+  resize: vertical
+
+fieldset
+  border: none
+  padding: 0
+
+// Errors
+
+.field_with_errors 
+  #{$all-text-inputs}, textarea
+    border: 1px solid $error-color
+
+  #{$all-text-inputs-focus}, textarea:focus
+    border: 1px solid $danger-color
+
+// Restaurant menu form
+
+.restaurant-menu-form
+  border: 1px solid #c3c3c3
+  border-radius: 3px
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+  margin-bottom: 12px
+  padding: 10px
+
+  .restaurant-menu-name:after
+    clear: left
+    content: " "
+    display: block
+
+  .restaurant-menu-name input
+    font-size: 18px
+    padding: 10px
+
+  .restaurant-menu-name .remove_fields
+    color: #999
+
+  input
+    border: none
+    box-shadow: none
+    font-family: $font-family-serif
+    font-weight: 600
+    padding: 5px 10px
+
+  small input
+    color: #666
+    font-style: italic
+    font-weight: normal
+    padding-top: 0
+
+  .restaurant-dish-fields
+    margin-bottom: 10px
+
+    &:after
+      clear: left
+      content: " "
+      display: block
+
+    .restaurant-dish-price
+      text-align: right
+
+      .remove_fields
+        color: #999
+        margin-right: 0px
+        opacity: 0
+        @include transition(none)
+
+      input
+        color: #333
+        font-size: 16px
+        font-weight: 600
+        text-align: right
+
+        @include placeholder
+          font-size: 14px
+
+    &:hover .restaurant-dish-price .remove_fields
+      opacity: 1
+  
+  .add_fields.button
+    background: #f5f5f5
+    font-size: 13px
+    font-weight: 600
+    text-align: center
+    width: 100%
+
+    &:hover
+      background: #f1f1f1
+
+    i:before
+      font-size: 11px
+      line-height: 13px
+      margin-right: 2px
+
+// Search input
+
+.search-input
+  display: inline-block
+  position: relative
+
+  input
+    padding-left: 28px
+    padding-right: 28px
+
+.search-input:before, .clear-input
+  color: #999
+  content: "k"
+  display: block
+  font-family: $icon-font
+  font-size: 14px
+  font-weight: 400
+  left: 9px
+  position: absolute
+  top: 10px
+
+.clear-input
+  color: #ccc
+  content: "m"
+  display: none
+  left: auto
+  padding: 10px 9px
+  right: 0
+  top: 0
+
+.clear-input:hover
+  color: #999
+
+input.datepicker
+  background: url(asset_path("spina/datepicker.png", "image")) no-repeat center right
+
+// Switch
+
+.switch
+  background: #e9e9e9
+  border-radius: 23px
+  display: block
+  height: 29px
+  margin-bottom: 0
+  padding: 3px
+  position: relative
+  width: 46px
+  @include transition(background .4s ease)
+
+  .knob
+    background: #fff
+    border-radius: 23px
+    box-shadow: 0 2px 5px rgba(0, 0, 0, .3)
+    display: inline-block
+    height: 23px
+    position: absolute
+    width: 23px
+
+  &.activated, &.active
+    background: $success-color
+
+  &.active .knob
+    @include transform(translate3d(17px, 0, 0))
+
+// Checkboxes
+
+.checkbox, .radio
+  display: inline-block
+  
+  input[type="checkbox"], input[type="radio"]
+    display: none
+
+  label
+    color: #333
+    cursor: pointer
+    display: inline-block
+    font-size: 14px
+    font-weight: 600
+    height: 16px
+    padding-left: 24px
+    position: relative
+    white-space: nowrap
+    width: 16px
+
+  label:before
+    background: #fff
+    border: 1px solid #c3c3c3
+    border-radius: 4px
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+    content: ""
+    display: inline-block
+    height: 14px
+    left: 0
+    margin-right: 10px
+    position: absolute
+    top: 0
+    width: 14px
+
+  label:after
+    content: "j"
+    color: #666
+    font-family: $icon-font
+    font-size: 16px
+    font-weight: normal
+    left: 2px
+    line-height: 18px
+    text-align: center
+    top: -2px
+    opacity: 0
+    position: absolute
+    @include transition(opacity .1s ease)
+
+  input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after
+    opacity: 1
+
+.radio
+  margin: 6px 0
+
+  label:before
+    border-radius: 8px
+
+// Select boxes
+
+.select-dropdown
+  background: #fff
+  border: 1px solid #c3c3c3
+  border-radius: 3px
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+  display: inline-block
+  line-height: 28px
+  margin: 0
+  overflow: hidden
+  padding: 0
+  position: relative
+  @include transition(border .2s ease)
+
+  &:hover
+    // background: #f5f5f5
+    border: 1px solid $primary-color
+
+  &:after
+    color: #666
+    content: "T"
+    font-family: $icon-font
+    font-size: 14px
+    font-weight: normal
+    line-height: 28px
+    position: absolute
+    right: 8px
+    top: 2px
+    z-index: 1
+
+  select
+    background-color: transparent
+    background-image: none
+    border: none
+    box-shadow: none
+    color: #666
+    cursor: pointer
+    display: inline-block
+    font-size: 14px
+    font-weight: 600
+    line-height: 16px
+    margin: 0
+    outline: none
+    padding: 8px 36px 8px 10px
+    position: relative
+    width: 115%
+    z-index: 2
+    @include appearance(none)
+
+// Custom file input
+
+.gallery .item
+  .customfile
+    border: 1px dashed #bbb
+    border-radius: 3px
+    cursor: pointer
+    height: 100%
+    overflow: hidden
+    position: relative
+    text-align: center
+    width: 100%
+
+    &:before
+      color: #bbb
+      content: "O"
+      display: block
+      font-family: $icon-font
+      font-size: 42px
+      font-weight: normal
+      @include transition(color .2s ease)
+
+    &:after
+      color: #bbb
+      content: "R"
+      display: none
+      font-family: $icon-font
+      font-size: 42px
+      font-weight: normal
+      @include animation("rotate" 2s linear infinite)
+
+  .customfile.loading
+    &:before
+      display: none
+
+    &:after
+      display: block
+
+  .customfile:hover:before
+    color: #333
+
+  .customfile-feedback
+    display: none
+
+  .customfile-input
+    background: transparent
+    border: 0
+    cursor: pointer !important
+    display: block
+    height: 100%
+    left: -100% !important
+    opacity: 0
+    position: absolute
+    top: 0 !important
+    width: 200%
+    z-index: 9
+
+  .customfile-button
+    display: none
+
+.new_document
+  line-height: 52px
+
+  .customfile
+    cursor: pointer
+    height: 100%
+    overflow: hidden
+    position: relative
+    text-align: left
+    width: 100%
+
+    &:before
+      color: #bbb
+      content: "O"
+      display: block
+      font-family: $icon-font
+      font-weight: 400
+      font-size: 36px
+      @include transition(color .2s ease)
+
+    &:after
+      color: #bbb
+      content: "R"
+      display: none
+      font-family: $icon-font
+      font-size: 36px
+      @include animation("rotate" 2s linear infinite)
+
+  .customfile.loading
+    &:before
+      display: none
+    
+    &:after
+      display: block
+
+  .customfile:hover:before
+    color: #333
+
+  .customfile-feedback
+    display: none
+
+  .customfile-input
+    background: transparent
+    border: 0
+    cursor: pointer !important
+    display: block
+    height: 100%
+    left: -100% !important
+    opacity: 0
+    position: absolute
+    top: 0 !important
+    width: 200%
+    z-index: 9
+
+  .customfile-button
+    display: none
+
+.media_picker
+  border-radius: 3px
+  color: #333
+  display: block
+  height: 100%
+  margin-top: 2px
+  position: relative
+  
+  &:before
+    background: rgba(255, 255, 255, .5)
+    content: ""
+    height: 100%
+    left: 0
+    opacity: 0
+    position: absolute
+    text-align: center
+    top: 0
+    width: 100%
+    @include transition(opacity .2s ease)
+
+  .placeholder
+    color: #666
+    font-size: 13px
+    font-weight: 600
+    line-height: 36px
+    margin-bottom: 2px
+
+    span:before
+      display: inline-block
+      margin-right: 6px
+      vertical-align: middle
+
+ul.sortable-grid 
+  .image, .sortable-placeholder
+    border-radius: 3px
+    display: inline-block
+    height: 85px
+    margin-right: 4px
+    overflow: hidden
+    width: 152px
+
+  .sortable-placeholder
+    background: #f5f5f5
+
+.media_picker:hover .image
+  opacity: .75

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

@@ -0,0 +1,121 @@
+// Gallery
+
+.gallery
+  margin: 20px 0
+
+  .item
+    border-radius: 3px
+    float: left
+    height: 100px
+    line-height: 100px
+    margin: 0 10px 10px 0
+    overflow: hidden
+    position: relative
+    width: 189px
+    z-index: 3
+
+    .title
+      color: #fff
+      font-size: 12px
+      font-weight: bold
+      margin: 5px
+      position: absolute
+      text-shadow: 0 1px 0 rgba(0, 0, 0, .25)
+      text-transform: uppercase
+      z-index: 2
+
+    img
+      position: relative
+      width: 100%
+      z-index: 1
+      @include transition(all .2s ease)
+
+    .overlay
+      border-top: 1px solid rgba(255, 255, 255, .5)
+      height: 100%
+      position: absolute
+      text-align: center
+      width: 100%
+      z-index: 2
+      @include transition(background-color .2s ease, opacity .2s ease)
+
+      input
+        display: none
+
+      a
+        color: #333
+        font-size: 26px
+        line-height: 100px
+        opacity: 0
+        padding: 16px
+        @include transition(opacity .2s ease)
+
+    &:hover .overlay
+      background-color: rgba(255, 255, 255, .75)
+
+      a
+        opacity: .75
+
+      a:hover
+        opacity: 1
+
+    form
+      height: 100%
+
+.gallery form .item .overlay a
+  display: none
+
+.gallery:after
+  clear: both
+  content: ""
+  display: block
+
+.gallery-select
+  margin: 0
+  
+  .item
+    border-radius: 3px
+    cursor: pointer
+    display: inline
+    height: 85px
+    line-height: 85px
+    margin: 0 6px 6px 0
+    position: relative
+    width: 152px
+
+    .overlay
+      background: #fff
+      opacity: 0
+
+    &:hover .overlay
+      background: #fff
+      opacity: .5
+
+    &.selected .overlay
+      background: $primary-color
+      opacity: .7
+
+    input
+      display: none
+
+    img
+      display: block
+
+  .item.attachment
+    height: 60px
+    line-height: 60px
+    font-size: 13px
+    padding: 0 20px 0 20px
+    width: auto
+
+    &:before
+      content: "S"
+      font-family: $icon-font
+      font-size: 28px
+      margin-right: 10px
+      vertical-align: middle
+
+    &.selected
+      background: $primary-color
+      color: #fff
+      opacity: .7

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

@@ -0,0 +1,12 @@
+.row
+  margin: 20px 0
+  @include row
+
+.column-half
+  @include span-columns(6)
+
+.column-nine
+  @include span-columns(9)
+
+.column-three
+  @include span-columns(3)

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

@@ -0,0 +1,28 @@
+// Labels
+
+.label
+  background: #bbb
+  border-radius: 3px
+  color: #fff
+  display: inline-block
+  font-size: 11px
+  font-weight: bold
+  padding: 4px 8px
+
+  &.label-primary
+    background: $primary-color
+
+  &.label-error
+    background: $error-color
+
+  &.label-danger
+    background: $danger-color
+
+  &.label-info
+    background: $info-color
+
+  &.label-alert
+    background: $alert-color
+
+  &.label-success
+    background: $success-color

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

@@ -0,0 +1,32 @@
+#login_container
+  background: url(asset_path('spina/bg.jpg'))
+  background-size: cover
+  background-position: center
+  display: block
+  height: 100%
+  position: fixed
+  width: 100%
+
+#login_wrapper
+  border-radius: 3px
+  margin: 50px auto
+  max-width: 280px
+
+  input, button
+    box-shadow: none
+    border: none
+    box-sizing: border-box
+    font-size: 18px
+    line-height: normal
+    margin-bottom: 16px
+    padding: 12px 14px
+    width: 100%
+
+
+  button
+    padding: 9px 14px
+    
+    &:before
+      font-size: 26px
+      margin-right: 8px
+      vertical-align: middle

data/app/assets/stylesheets/spina/_mixins.css.scss

@@ -0,0 +1,13 @@
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+  @font-face {
+    font-family: $font-family;
+    font-weight: $weight;
+    font-style: $style;
+
+    src: url(font-path('#{$file-path}.eot'));
+    src: url(font-path('#{$file-path}.eot?#iefix'))          format('embedded-opentype'),
+         url(font-path('#{$file-path}.woff'))                format('woff'),
+         url(font-path('#{$file-path}.ttf'))                 format('truetype'),
+         url(font-path('#{$file-path}.svg##{$font-family}')) format('svg');
+  }
+}