_gallery.sass in spina-0.12.0

- old
+ new

@@ -34,21 +34,19 @@
 
     img
       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
 
       a
@@ -58,30 +56,49 @@
         font-size: 11px
         font-weight: bold
         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%
 
 .gallery form .item .overlay a
   display: none
@@ -97,21 +114,21 @@
   &.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
+    transition: all .3s ease
     width: 150px
-    @include transition(all .3s ease)
 
     input
       display: none
 
     img
@@ -119,17 +136,17 @@
 
   .item:not(.item-uploader):hover
     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
     font-size: 36px
     position: absolute
@@ -186,25 +203,25 @@
     &:before
       color: #bbb
       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
       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
 
@@ -243,7 +260,7 @@
     line-height: 130px
     padding-top: 32px
     position: absolute
     text-align: center
     text-transform: lowercase
+    transition: color .2s ease
     width: 100%
-    @include transition(color .2s ease)