_gallery.sass in spina-1.0.0

- old
+ new

@@ -17,10 +17,11 @@
     height: 150px
     line-height: 100px
     margin: 8px
     overflow: hidden
     position: relative
+    transition: transform .3s ease
     width: 150px
     z-index: 3
 
     .title
       color: #fff
@@ -84,21 +85,30 @@
         padding: 10px
         position: absolute
         word-break: break-word
         z-index: 3
 
-    &:hover
+    &.ui-draggable:not(.ui-draggable-disabled):hover
+      cursor: move
+
+    &.ui-draggable-disabled:hover, &:not(.ui-draggable):hover
       .overlay
         background: rgba(0, 0, 0, 0.5)
 
         a
           opacity: 1
           transform: translateY(0%)
 
         .photo-name
           transform: translateY(0%)
 
+    &.dropping:not(.media-folder)
+      transform: scale(0.8)
+
+    &.dropped:not(.media-folder)
+      transform: scale(0)
+
     form
       height: 100%
 
 .gallery form .item .overlay a
   display: none
@@ -229,11 +239,11 @@
       display: block
 
   &:hover .customfile:before
     color: #333
 
-  &:hover .new_photo label
+  &:hover .new_photo label, &:hover .new_image label
     color: #333
 
   .customfile-feedback
     display: none
 
@@ -251,16 +261,94 @@
     z-index: 9
 
   .customfile-button
     display: none
 
-  .new_photo label
+  .new_photo label, .new_image label
     color: #999
     font-size: 13px
     font-weight: 600
     line-height: 130px
     padding-top: 32px
     position: absolute
     text-align: center
     text-transform: lowercase
     transition: color .2s ease
     width: 100%
+
+// Media folders
+
+.item.media-folder
+  align-items: center
+  background: #e5e5f0
+  border: 1px solid #d5d4e6
+  display: flex
+  flex-direction: column
+  justify-content: center
+  line-height: 20px
+
+  &:hover, &.dropping
+    .media-folder-thumbnail
+      transform: rotate(-4deg)
+    .media-folder-thumbnail:after
+      transform: translateY(-10px) translateX(30px)
+    .media-folder-shadow:before
+      transform: rotate(12deg)
+    .media-folder-shadow:after
+      transform: rotate(6deg)
+
+.media-folder-thumbnail
+  height: 70px
+  position: relative
+  transform-origin: center bottom
+  transition: transform .4s ease
+  width: 70px
+
+  &[data-badge]:after
+    background: #6b699f
+    border: 3px solid #e5e5f0
+    border-radius: 12px
+    color: #fff
+    content: attr(data-badge)
+    display: block
+    font-size: 10px
+    font-weight: bold
+    height: 24px
+    line-height: 18px
+    position: absolute
+    right: -8px
+    text-align: center
+    transition: transform .4s ease
+    top: -8px
+    width: 24px
+    z-index: 1
+
+  .media-folder-shadow:before, .media-folder-shadow:after
+    background: rgba(107, 105, 159, .25)
+    border-radius: 5px
+    content: " "
+    display: block
+    height: 70px
+    left: 0px
+    position: absolute
+    transform-origin: center bottom
+    transition: transform .4s ease
+    top: 0px
+    width: 70px
+    z-index: 0
+
+  .media-folder-shadow:after
+    background: rgba(107, 105, 159, .5)
+
+  img
+    border-radius: 5px
+    position: relative
+    width: 100%
+
+.media-folder-name
+  color: #4d4f81
+  font-size: 14px
+  font-weight: 600
+  height: 16px
+  line-height: 16px
+  margin-top: 6px
+  text-align: center
\ No newline at end of file