_gallery.sass in spina-template-0.3.1

- old
+ new

@@ -1,19 +1,22 @@
 // Gallery
 
+.gallery-container
+  margin: -8px
+
 .gallery
   margin: 20px 0
 
   .item
-    border-radius: 3px
+    border-radius: 5px
     float: left
-    height: 100px
+    height: 150px
     line-height: 100px
-    margin: 0 10px 10px 0
+    margin: 8px
     overflow: hidden
     position: relative
-    width: 189px
+    width: 150px
     z-index: 3
 
     .title
       color: #fff
       font-size: 12px
@@ -29,37 +32,50 @@
       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)
+      @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
-        color: #333
-        font-size: 26px
-        line-height: 100px
-        opacity: 0
-        padding: 16px
-        @include transition(opacity .2s ease)
+        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
 
-    &:hover .overlay
-      background-color: rgba(255, 255, 255, .75)
+      a.delete-photo-link
+        right: 0px
 
-      a
-        opacity: .75
+    &:hover
+      .overlay
+        background-size: 100%
 
-      a:hover
-        opacity: 1
+        a
+          opacity: 1
+          @include transform(translateY(0%))
 
     form
       height: 100%
 
 .gallery form .item .overlay a
@@ -69,43 +85,58 @@
   clear: both
   content: ""
   display: block
 
 .gallery-select
-  margin: 0
+  margin: -8px
 
+  &.gallery-select-multiple
+    padding-bottom: 70px
+
   form
     margin: 0
   
   .item
-    border-radius: 3px
+    border-radius: 5px
     cursor: pointer
     display: inline
-    height: 85px
-    line-height: 85px
-    margin: 0 6px 6px 0
+    height: 150px
+    line-height: 150px
+    margin: 8px
     position: relative
-    width: 152px
+    width: 150px
+    @include transition(all .3s ease)
 
-    .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:not(.item-uploader):hover
+    @include 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
@@ -119,6 +150,95 @@
       vertical-align: middle
 
     &.selected
       background: $primary-color
       color: #fff
-      opacity: .7
\ No newline at end of file
+      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)