spina 0.11.1 → 0.12.0

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

@@ -2,9 +2,9 @@
 .horizontal-form
   .horizontal-form-group
     border-bottom: 1px solid #eee
+    display: flex
     margin: 0 -20px
     padding: 20px 20px
-    @include display(flex)
 
     &:first-child
       margin-top: -20px
@@ -15,14 +15,14 @@
 
   .horizontal-form-label
     color: #333
+    display: flex
+    flex-direction: column
     font-size: 13px
     font-weight: 600
+    justify-content: center
     line-height: 18px
     padding-right: 20px
     width: 240px
-    @include justify-content(center)
-    @include display(flex)
-    @include flex-direction(column)
 
     small
       color: #666
@@ -31,8 +31,8 @@
       font-weight: normal
 
   .horizontal-form-content
-    @include flex(1)
-    @include align-self(flex-start)
+    align-self: flex-start
+    flex: 1
 
   .image
     border-radius: 5px
@@ -48,12 +48,12 @@
 
 // Sidebar form
 .sidebar-form
+  display: flex
   margin: 0 auto
   max-width: 960px
-  @include display(flex)
 
 .sidebar-form-content
-  @include flex(1)
+  flex: 1
 
   .well
     margin-right: 20px
@@ -65,9 +65,9 @@
 
 .sidebar-form-group
   border-bottom: 1px solid #eee
+  display: flex
   margin: 0 -20px
   padding: 0 20px
-  @include display(flex)
 
   &:last-child
     border-bottom: none
@@ -80,9 +80,9 @@
   width: 180px
 
 .sidebar-form-control
+  flex: 1
   margin-right: -20px
   position: relative
-  @include flex(1)
 
   .switch
     margin: 10px
@@ -96,6 +96,18 @@
     &:disabled
       background: none
 
+  &[data-form-prepend]
+    padding-left: 14px
+
+  &[data-form-prepend]:before
+    content: attr(data-form-prepend)
+    font-size: 14px
+    font-weight: 600
+    left: 10px
+    line-height: 50px
+    position: absolute
+    top: 0
+
   &[data-form-append]:after
     content: attr(data-form-append)
     font-size: 14px
@@ -147,8 +159,8 @@
     opacity: 0
     position: absolute
     top: 75%
+    transition: opacity .2s ease
     width: 100%
-    @include transition(opacity .2s ease)
 
   &:hover .sidebar-form-image-overlay
     opacity: 1
@@ -164,7 +176,7 @@
     padding: 6px
     position: relative
     z-index: 1
-    @include transition(opacity .2s ease)
+    transition: opacity .2s ease
 
   a img:first-child
     display: block
@@ -257,6 +269,7 @@
 
 .form-checkbox
   label
+    cursor: pointer
     display: block
     font-size: 13px
     font-weight: 600
@@ -274,9 +287,9 @@
     display: inline-block
     height: 20px
     margin-right: 10px
+    transition: all .2s ease
     vertical-align: middle
     width: 20px
-    @include transition(all .2s ease)
 
   input[type="checkbox"]:checked + label:before
     background: tint($primary-color, 10%)
@@ -291,21 +304,21 @@
     position: absolute
     text-align: center
     top: 0px
+    transform: scale(0)
+    transition: all .2s ease
     vertical-align: middle
     width: 20px
     @extend .icon, .icon-large-check:before
-    @include transform(scale(0))
-    @include transition(all .2s ease)
 
   input[type="checkbox"]:checked + label:after
-    @include transform(scale(1))
+    transform: scale(1)
 
 // Input groups
 .input-group
-  @include display(flex)
+  display: flex
 
   #{$all-text-inputs}, .text-input, .select-dropdown
-    @include flex(1)
+    flex: 1
 
     &:not(:first-child)
       border-bottom-left-radius: 0
@@ -325,8 +338,8 @@
   color: #333
   font-size: 14px
   padding: 10px
+  transition: border .2s ease
   width: 100%
-  @include transition(border .2s ease)
 
   &.input-mini
     width: 75px
@@ -429,8 +442,8 @@ input.datepicker
   margin-bottom: 0
   padding: 3px
   position: relative
+  transition: background .4s ease
   width: 46px
-  @include transition(background .4s ease)
 
   .knob
     background: #fff
@@ -445,7 +458,7 @@ input.datepicker
     background: $success-color
 
   &.active .knob
-    @include transform(translate3d(17px, 0, 0))
+    transform: translate3d(17px, 0, 0)
 
 // Checkboxes
 
@@ -491,9 +504,9 @@ input.datepicker
     line-height: 18px
     text-align: center
     top: -2px
+    transition: opacity .1s ease
     opacity: 0
     position: absolute
-    @include transition(opacity .1s ease)
 
   input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after
     opacity: 1
@@ -518,11 +531,27 @@ input.datepicker
   overflow: hidden
   padding: 0
   position: relative
+  transition: border .2s ease
   @extend .icon, .icon-caret-down
-  @include transition(border .2s ease)
+
+  label
+    background: #f5f5f5
+    border-right: 1px solid #ddd
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+    color: #999
+    display: inline-block
+    height: 38px
+    line-height: 38px
+    font-family: $font-family
+    font-size: 13px
+    font-weight: 600
+    margin-right: -4px
+    padding: 0 11px
+
+    &:after
+      content: ":"
 
   &:hover
-    // background: #f5f5f5
     border: 1px solid $primary-color
 
   &:before
@@ -553,14 +582,14 @@ input.datepicker
     position: relative
     width: 115%
     z-index: 2
-    @include appearance(none)
+    -webkit-appearance: none
 
 // Structure form
 
 .structure-form
+  display: flex
   margin-left: -20px
   position: relative
-  @include display(flex)
 
   .structure-form-menu
     box-sizing: content-box
@@ -577,18 +606,18 @@ input.datepicker
       position: relative
 
     ul:before, ul:after
+      background: linear-gradient(rgba(255, 255, 255, 0), #ddd)
       content: " "
       height: 40px
       position: absolute
       right: -1px
       top: -40px
       width: 1px
-      @include linear-gradient(rgba(255, 255, 255, 0), #ddd)
 
     ul:after
+      background: linear-gradient(bottom, rgba(255, 255, 255, 0), #ddd)
       bottom: -40px
       top: auto
-      @include linear-gradient(bottom, rgba(255, 255, 255, 0), #ddd)
 
     ul li
       overflow: hidden
@@ -671,6 +700,10 @@ input.datepicker
   .structure-form-part
     padding: 5px 0
 
+    .select-dropdown
+      select
+        width: auto
+
 // Custom file input
 
 .new_document
@@ -691,15 +724,15 @@ input.datepicker
       padding: 6px 0
       @extend .icon, .icon-upload-outline:before
       font-size: 28px
+      transition: color .2s ease
       vertical-align: middle
-      @include transition(color .2s ease)
 
     &:after
+      animation: "rotate" 2s linear infinite
       color: #bbb
       @extend .icon, .icon-refresh:before
       display: none
       font-size: 36px
-      @include animation("rotate" 2s linear infinite)
 
   .customfile.loading
     &:before
@@ -743,7 +776,7 @@ input.datepicker
   position: relative
 
   .image
-    @include transition(all .3s ease)
+    transition: all .3s ease
 
   &:hover .button
     background: tint(#efefef, 20%)
@@ -760,8 +793,8 @@ input.datepicker
     position: absolute
     text-align: center
     top: 0
+    transition: opacity .2s ease
     width: 100%
-    @include transition(opacity .2s ease)
 
   .placeholder
     color: #666
@@ -796,8 +829,8 @@ ul.sortable-grid
     height: 120px
     margin: 8px
     overflow: hidden
+    transition: box-shadow .3s ease
     width: 120px
-    @include transition(box-shadow .3s ease)
 
     &:hover
       box-shadow: 0 0 20px rgba(0, 0, 0, .2)

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

@@ -36,17 +36,15 @@
       position: relative
       width: 100%
       z-index: 1
-      @include transition(all .2s ease)
+      transition: all .2s ease
 
     .overlay
       height: 100%
       position: absolute
       text-align: center
+      transition: all .2s ease
       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
@@ -60,25 +58,44 @@
         letter-spacing: 2px
         line-height: 26px
         text-transform: uppercase
+        transition: all .2s ease
+        transform: translateY(100%)
         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
 
+      .photo-name
+        top: 0
+        color: #fff
+        display: block
+        font-size: 12px
+        font-weight: bold
+        left: 0
+        line-height: 15px
+        text-align: left
+        transition: all 0.2s ease
+        transform: translateY(-100%)
+        padding: 10px
+        position: absolute
+        word-break: break-word
+        z-index: 3
+
     &:hover
       .overlay
-        background-size: 100%
+        background: rgba(0, 0, 0, 0.5)
 
         a
           opacity: 1
-          @include transform(translateY(0%))
+          transform: translateY(0%)
+
+        .photo-name
+          transform: translateY(0%)
 
     form
       height: 100%
@@ -99,7 +116,7 @@
 
   form
     margin: 0
-  
+
   .item
     border-radius: 5px
     cursor: pointer
@@ -108,8 +125,8 @@
     line-height: 150px
     margin: 8px
     position: relative
+    transition: all .3s ease
     width: 150px
-    @include transition(all .3s ease)
 
     input
       display: none
@@ -121,13 +138,13 @@
     box-shadow: 0 0 20px rgba(0, 0, 0, .4)
 
   .item.selected:before
+    background: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))
     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
@@ -188,12 +205,13 @@
       display: block
       font-weight: normal
       line-height: 130px
+      transition: color .2s ease
       vertical-align: middle
       @extend .icon, .icon-upload-outline
       font-size: 42px
-      @include transition(color .2s ease)
 
     &:after
+      animation: "rotate" 2s linear infinite
       color: #bbb
       display: block
       font-weight: normal
@@ -202,7 +220,6 @@
       @extend .icon, .icon-refresh:before
       display: none
       font-size: 42px
-      @include animation("rotate" 2s linear infinite)
 
   .customfile.loading
     &:before
@@ -245,5 +262,5 @@
     position: absolute
     text-align: center
     text-transform: lowercase
+    transition: color .2s ease
     width: 100%
-    @include transition(color .2s ease)

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

@@ -37,6 +37,7 @@
 .icon-large-check:before { content: "\f120"; }
 .icon-link:before { content: "\f121"; }
 .icon-list-ul:before { content: "\f122"; }
+.icon-lock:before { content: "\f138"; }
 .icon-mail:before { content: "\f123"; }
 .icon-mail-outline:before { content: "\f124"; }
 .icon-media-library:before { content: "\f125"; }

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

@@ -10,17 +10,23 @@
   max-width: 280px
 
   .failed-to-login
+    animation-delay: .1s
     color: $danger-color
     margin-bottom: 20px
     text-align: center
-    @include animation-delay(.1s)
 
   .login-fields input
     &:first-child
-      @include animation-delay(.2s)
+      animation-delay: .2s
 
     &:last-child
-      @include animation-delay(.4s)
+      animation-delay: .4s
+
+  .login-extra-links
+    animation-delay: .8s
+
+    .button
+      margin-right: 0
 
   img
     display: block
@@ -37,8 +43,8 @@
     width: 100%
 
   button
+    animation-delay: .6s
     padding: 12px 14px
-    @include animation-delay(.6s)
     
     &:before
       font-size: 26px

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

@@ -0,0 +1,5 @@
+@function shade($color, $percent)
+  @return mix(#000, $color, $percent)
+
+@function tint($color, $percent)
+  @return mix(#fff, $color, $percent)

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

@@ -1,4 +1,5 @@
 #overlay
+  background: radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .6))
   display: none
   height: 100%
   left: 0
@@ -6,9 +7,9 @@
   top: 0
   width: 100%
   z-index: 999
-  @include background-image(radial-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .6)))
 
 .modal
+  animation-duration: .4s
   background: #fff
   border-radius: 3px
   display: none
@@ -17,7 +18,6 @@
   min-height: 100px
   overflow: hidden
   position: relative
-  @include animation-duration(.4s)
 
   @media screen and (max-width: 480px)
     margin: 0 10px
@@ -81,7 +81,7 @@
     font-size: 12px
     padding: 6px 10px
     text-decoration: none
-    @include transition(color .2s ease-out)
+    transition: color .2s ease-out
 
     i.icon
       font-size: 8px
@@ -152,8 +152,8 @@
     font-weight: 600
     padding: 12px 0
     text-align: center
+    transition: color .2s ease-out
     width: 49%
-    @include transition(color .2s ease-out)
 
   footer a.primary, footer a:hover, footer button.primary, footer button:hover
     color: #000

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

@@ -8,22 +8,22 @@ aside#notifications
   z-index: 100
 
 .notification
+  animation-duration: .4s
+  align-items: center
   background: $primary-color
   border-radius: 3px
   color: #fff
+  display: flex
   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
+    flex: 1
     overflow: hidden
-    @include flex(1)
 
   .icon
     text-align: center
@@ -49,7 +49,7 @@ aside#notifications
     display: block
     font-size: 13px
     font-weight: normal
-    margin-top: -4px
+    line-height: 20px
     opacity: .6
 
   &.notification-error

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

@@ -12,11 +12,11 @@
   cursor: move
 
 .dd-item-inner .sortable-link
-  @include transform(translateX(-26px))
-  @include transition(all .2s ease)
+  transform: translateX(-26px)
+  transition: all .2s ease
 
 .dd-item-inner.dd-handle .sortable-link
-  @include transform(translateX(0))
+  transform: translateX(0)
 
 .dd-item-inner:before
   @extend .icon, .icon-bars
@@ -24,14 +24,14 @@
   display: inline-block
   height: 18px
   opacity: 0
+  transform: translateX(-26px)
+  transition: all .2s ease
   vertical-align: middle
   width: 26px
-  @include transform(translateX(-26px))
-  @include transition(all .2s ease)
 
 .dd-item-inner.dd-handle:before
   opacity: 1
-  @include transform(translateX(0))
+  transform: translateX(0)
 
 .dd-list
   list-style: none
@@ -122,12 +122,12 @@
 
   .pull-right a
     opacity: 0
-    @include transform(translateX(50px))
-    @include transition(all .4s ease)
+    transform: translateX(50px)
+    transition: all .4s ease
 
   &:hover .pull-right a
     opacity: 1
-    @include transform(translateX(10px))
+    transform: translateX(10px)
 
 .dd-dragel
   pointer-events: none

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

@@ -142,18 +142,18 @@ table.table.table-form
 .progress-bar
   border: 1px solid #9f9f9f
   border-radius: 6px
+  display: flex
   height: 12px
   overflow: hidden
   position: relative
-  @include display(flex)
-  @include transition(all .2s ease)
+  transition: all .2s ease
 
 .progress-bar-divider
   border-left: 1px solid #9f9f9f
+  flex: 1
   height: 10px
   opacity: .5
   position: relative
-  @include flex(1)
 
   &:first-child  
     border: none
@@ -178,16 +178,16 @@ table.table.table-form
   text-align: center
   text-transform: uppercase
   top: 2px
+  transition: all .2s ease
   width: 100%
-  @include transition(all .2s ease)
 
 tr:hover .progress
   .progress-bar
-    @include transform(translateY(-6px))
+    transform: translateY(-6px)
 
   .progress-label
     opacity: 1
-    @include transform(translateY(9px))
+    transform: translateY(9px)
 
 .progress-bar-primary
   & .progress-bar
@@ -232,7 +232,7 @@ tr:hover .progress
 
 .table-clickable
   tbody tr
-    @include transition(background .1s ease)
+    transition: background .1s ease
 
   tbody tr:hover
     background: #f5f5fa
@@ -283,10 +283,10 @@ tr:hover .progress
 
 // Information tables
 .information-tables
-  @include display(flex)
+  display: flex
 
   .information-table
-    @include flex(1)
+    flex: 1
 
     th, td
       color: #333