spina 0.10.0 → 0.11.0

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

@@ -0,0 +1,249 @@
+// Gallery
+
+.gallery-container
+  margin: -8px
+
+  .gallery
+    .item
+      input[type="radio"], input[type="checkbox"]
+        display: none
+
+.gallery
+  margin: 20px 0
+
+  .item
+    border-radius: 5px
+    float: left
+    height: 150px
+    line-height: 100px
+    margin: 8px
+    overflow: hidden
+    position: relative
+    width: 150px
+    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
+      height: 100%
+      position: absolute
+      text-align: center
+      width: 100%
+      z-index: 2
+      @include linear-gradient(top, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .75))
+      background-size: 200%
+      @include transition(all .2s ease)
+
+      input
+        display: none
+
+      a
+        bottom: 0px
+        color: #fff
+        display: inline-block
+        font-size: 11px
+        font-weight: bold
+        letter-spacing: 2px
+        line-height: 26px
+        text-transform: uppercase
+        padding: 0 12px
+        position: absolute
+        z-index: 3
+        @include transition(all .2s ease)
+        @include transform(translateY(100%))
+      
+      a.edit-photo-link
+        left: 0px
+
+      a.delete-photo-link
+        right: 0px
+
+    &:hover
+      .overlay
+        background-size: 100%
+
+        a
+          opacity: 1
+          @include transform(translateY(0%))
+
+    form
+      height: 100%
+
+.gallery form .item .overlay a
+  display: none
+
+.gallery:after
+  clear: both
+  content: ""
+  display: block
+
+.gallery-select
+  margin: -8px
+
+  &.gallery-select-multiple
+    padding-bottom: 70px
+
+  form
+    margin: 0
+  
+  .item
+    border-radius: 5px
+    cursor: pointer
+    display: inline
+    height: 150px
+    line-height: 150px
+    margin: 8px
+    position: relative
+    width: 150px
+    @include transition(all .3s ease)
+
+    input
+      display: none
+
+    img
+      display: block
+
+  .item:not(.item-uploader):hover
+    box-shadow: 0 0 20px rgba(0, 0, 0, .4)
+
+  .item.selected:before
+    content: " "
+    height: 100%
+    position: absolute
+    top: 0px
+    width: 100%
+    z-index: 2
+    @include linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))
+
+  .item.selected:after
+    color: #95e995
+    font-size: 36px
+    position: absolute
+    text-align: center
+    text-shadow: 0 2px 20px rgba(0, 0, 0, .75)
+    top: 0
+    width: 100%
+    z-index: 3
+    @extend .icon, .icon-large-check:before
+
+  .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
+
+  .gallery-select-action-bar
+    background: #fff
+    border-top: 1px solid #e5e5e5
+    bottom: 0px
+    clear: both
+    margin: 0 -12px
+    padding: 12px
+    position: absolute
+    width: 100%
+    z-index: 3
+
+// Customfile
+
+.gallery .item
+  .customfile
+    border: 1px solid #e5e5e5
+    border-radius: 5px
+    cursor: pointer
+    height: 100%
+    overflow: hidden
+    position: relative
+    text-align: center
+    width: 100%
+
+    &:before
+      color: #bbb
+      display: block
+      font-weight: normal
+      line-height: 130px
+      vertical-align: middle
+      @extend .icon, .icon-upload-outline
+      font-size: 42px
+      @include transition(color .2s ease)
+
+    &:after
+      color: #bbb
+      display: block
+      font-weight: normal
+      line-height: 130px
+      vertical-align: middle
+      @extend .icon, .icon-refresh:before
+      display: none
+      font-size: 42px
+      @include animation("rotate" 2s linear infinite)
+
+  .customfile.loading
+    &:before
+      display: none
+
+    &:after
+      display: block
+
+  &:hover .customfile:before
+    color: #333
+
+  &:hover .new_photo label
+    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_photo label
+    color: #999
+    font-size: 13px
+    font-weight: 600
+    line-height: 130px
+    padding-top: 32px
+    position: absolute
+    text-align: center
+    text-transform: lowercase
+    width: 100%
+    @include transition(color .2s ease)

data/app/assets/stylesheets/spina/_ics_spina.scss

@@ -0,0 +1,60 @@
+// 
+// Icon Font: ics_spina
+// 
+
+.icon-barchart:before { content: "\f100"; }
+.icon-bars:before { content: "\f101"; }
+.icon-bold:before { content: "\f102"; }
+.icon-brush:before { content: "\f103"; }
+.icon-camera:before { content: "\f104"; }
+.icon-caret-down:before { content: "\f105"; }
+.icon-caret-left:before { content: "\f106"; }
+.icon-caret-right:before { content: "\f107"; }
+.icon-caret-up:before { content: "\f108"; }
+.icon-cart:before { content: "\f109"; }
+.icon-chart-outline:before { content: "\f10a"; }
+.icon-check:before { content: "\f10b"; }
+.icon-chevron-down:before { content: "\f10c"; }
+.icon-chevron-left:before { content: "\f10d"; }
+.icon-chevron-right:before { content: "\f10e"; }
+.icon-chevron-up:before { content: "\f10f"; }
+.icon-code:before { content: "\f110"; }
+.icon-cog:before { content: "\f111"; }
+.icon-cog-outline:before { content: "\f112"; }
+.icon-comment:before { content: "\f113"; }
+.icon-cross:before { content: "\f114"; }
+.icon-customer-outline:before { content: "\f115"; }
+.icon-document:before { content: "\f116"; }
+.icon-dots:before { content: "\f117"; }
+.icon-exclamation:before { content: "\f118"; }
+.icon-eye:before { content: "\f119"; }
+.icon-filter:before { content: "\f11a"; }
+.icon-home:before { content: "\f11b"; }
+.icon-image:before { content: "\f11c"; }
+.icon-inbox-outline:before { content: "\f11d"; }
+.icon-info:before { content: "\f11e"; }
+.icon-italic:before { content: "\f11f"; }
+.icon-large-check:before { content: "\f120"; }
+.icon-link:before { content: "\f121"; }
+.icon-list-ul:before { content: "\f122"; }
+.icon-mail:before { content: "\f123"; }
+.icon-mail-outline:before { content: "\f124"; }
+.icon-media-library:before { content: "\f125"; }
+.icon-megaphone:before { content: "\f126"; }
+.icon-min:before { content: "\f127"; }
+.icon-pages:before { content: "\f128"; }
+.icon-pencil:before { content: "\f129"; }
+.icon-pencil-outline:before { content: "\f12a"; }
+.icon-picture-o:before { content: "\f12b"; }
+.icon-plus:before { content: "\f12c"; }
+.icon-power-off:before { content: "\f12d"; }
+.icon-preview:before { content: "\f12e"; }
+.icon-product-outline:before { content: "\f12f"; }
+.icon-random:before { content: "\f130"; }
+.icon-refresh:before { content: "\f131"; }
+.icon-search:before { content: "\f132"; }
+.icon-shop:before { content: "\f133"; }
+.icon-social-outline:before { content: "\f134"; }
+.icon-trash:before { content: "\f135"; }
+.icon-upload-outline:before { content: "\f136"; }
+.icon-users-outline:before { content: "\f137"; }

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

@@ -0,0 +1,30 @@
+// Labels
+
+.label
+  background: #bbb
+  border-radius: 3px
+  color: #fff
+  display: inline-block
+  font-size: 10px
+  font-weight: bold
+  letter-spacing: 1px
+  line-height: 10px
+  padding: 8px 12px
+
+  &.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.sass

@@ -0,0 +1,46 @@
+#login_container
+  background: tint($primary-color, 90%)
+  display: block
+  height: 100%
+  position: fixed
+  width: 100%
+
+#login_wrapper
+  margin: 50px auto
+  max-width: 280px
+
+  .failed-to-login
+    color: $danger-color
+    margin-bottom: 20px
+    text-align: center
+    @include animation-delay(.1s)
+
+  .login-fields input
+    &:first-child
+      @include animation-delay(.2s)
+
+    &:last-child
+      @include animation-delay(.4s)
+
+  img
+    display: block
+    margin: 0 auto 25px auto
+
+  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: 12px 14px
+    @include animation-delay(.6s)
+    
+    &:before
+      font-size: 26px
+      margin-right: 8px
+      vertical-align: middle

data/app/assets/stylesheets/spina/_modal.sass

@@ -0,0 +1,162 @@
+#overlay
+  display: none
+  height: 100%
+  left: 0
+  position: fixed
+  top: 0
+  width: 100%
+  z-index: 999
+  @include background-image(radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .6)))
+
+.modal
+  background: #fff
+  border-radius: 3px
+  display: none
+  margin: 0 auto
+  max-width: 480px
+  min-height: 100px
+  overflow: hidden
+  position: relative
+  @include animation-duration(.4s)
+
+  @media screen and (max-width: 480px)
+    margin: 0 10px
+
+  &.modal-small
+    width: 320px
+
+  &.modal-medium
+    max-width: 640px
+
+  &.modal-large
+    max-width: none
+    width: 80%
+
+    footer a
+      padding: 18px 0
+
+  header h3
+    border-radius: 2px 2px 0 0
+    color: #232323
+    font-size: 18px
+    font-weight: 500
+    margin: 0
+    padding: 20px
+
+  header.big-header h2
+    color: #333
+    font-size: 36px
+    font-weight: 400
+    margin: 0
+    padding-top: 48px
+    text-align: center
+
+  header.big-header h3
+    line-height: 24px
+    padding: 46px
+    text-align: center
+
+    @media screen and (max-width: 480px)
+      padding: 30px 20px
+
+  header.big-header p
+    color: #333
+    font-size: 18px
+    font-weight: 400
+    margin: 0
+    margin-top: 9px
+    padding-bottom: 48px
+    text-align: center
+
+    strong
+      font-weight: 600
+
+  header h3 strong
+    color: #000
+    font-weight: 600
+
+  header a[data-dismiss="modal"]
+    color: #d6d6d6
+    float: right
+    font-size: 12px
+    padding: 6px 10px
+    text-decoration: none
+    @include transition(color .2s ease-out)
+
+    i.icon
+      font-size: 8px
+
+  header a[data-dismiss="modal"]:hover
+    color: #999
+
+  section
+    overflow: scroll
+    padding: 20px
+    background: white
+
+    .col
+      float: left
+      width: 33%
+      padding: 10px
+
+      h3
+        font-size: 16px
+        font-weight: bold
+        line-height: 26px
+
+      p
+        line-height: 22px
+
+      pre
+        font-size: 12px
+        background: #ddd
+        border: 1px solid #bbb
+        padding: 10px
+        border-radius: 5px
+        margin-bottom: 20px
+        color: #444
+        line-height: 20px
+        font-family: Consolas, Courier, monospace
+
+    &.section-divided
+      border-top: 1px solid #eee
+
+    footer
+      clear: both
+      margin: -20px
+
+    table
+      color: #333
+      font-size: 15px
+      line-height: 24px
+
+      th
+        font-weight: 600
+        padding-right: 24px
+        text-align: left
+
+      td
+        font-weight: 400
+
+    table.table-centered
+      margin: 0 auto
+
+  footer
+    border-top: 1px solid #eee
+
+  footer a, footer button
+    background: none
+    color: #999
+    display: inline-block
+    font-size: 13px
+    font-weight: 600
+    padding: 12px 0
+    text-align: center
+    width: 49%
+    @include transition(color .2s ease-out)
+
+  footer a.primary, footer a:hover, footer button.primary, footer button:hover
+    color: #000
+
+  footer a.primary:hover, footer button.primary:hover
+    color: $primary-color

data/app/assets/stylesheets/spina/_notifications.sass

@@ -0,0 +1,62 @@
+// Notifications
+
+aside#notifications
+  bottom: 0
+  padding: 16px
+  position: fixed
+  right: 0
+  z-index: 100
+
+.notification
+  background: $primary-color
+  border-radius: 3px
+  color: #fff
+  font-size: 16px
+  line-height: 24px
+  margin-top: 16px
+  padding: 16px 0
+  position: relative
+  width: 400px
+  @include animation-duration(.4s)
+  @include align-items(center)
+  @include display(flex)
+
+  .notification-message
+    overflow: hidden
+    @include flex(1)
+
+  .icon
+    text-align: center
+    min-width: 50px
+    width: 50px
+
+  a
+    color: #000
+    display: block
+    font-size: 11px
+    opacity: .2
+    text-align: center
+    width: 50px
+
+    &:hover
+      color: #000
+      opacity: .4
+
+  strong
+    font-weight: 600
+
+  small
+    display: block
+    font-size: 13px
+    font-weight: normal
+    margin-top: -4px
+    opacity: .6
+
+  &.notification-error
+    background: $error-color
+
+  &.notification-danger
+    background: $danger-color
+
+  &.notification-success
+    background: $success-color