_gallery.sass in spina-1.1.0

- old
+ new

@@ -6,10 +6,42 @@
   .gallery
     .item
       input[type="radio"], input[type="checkbox"]
         display: none
 
+.gallery-select-container
+  display: flex
+  width: 100%
+
+  .gallery-select
+    flex: 1
+    max-height: 100%
+    overflow: scroll
+
+  .gallery-select-sidebar
+    border-left: 1px solid #ddd
+    box-shadow: 0 0 15px rgba(0, 0, 0, .15)
+    margin: -20px -20px -20px 0
+    padding: 20px
+    width: 300px
+
+.gallery-select-sidebar form
+  display: flex
+  flex-direction: column
+  height: 100%
+  justify-content: space-between
+
+.gallery-select-action-bar
+  align-items: center
+  display: flex
+
+  .button
+    margin-bottom: 0
+
+  button
+    margin-right: 0
+
 .gallery
   margin: 20px 0
 
   .item
     border-radius: 5px
@@ -79,11 +111,11 @@
         font-weight: bold
         left: 0
         line-height: 15px
         text-align: left
         transition: all 0.2s ease
-        transform: translateY(-100%)
+        opacity: 0
         padding: 10px
         position: absolute
         word-break: break-word
         z-index: 3
 
@@ -97,31 +129,31 @@
         a
           opacity: 1
           transform: translateY(0%)
 
         .photo-name
-          transform: translateY(0%)
+          opacity: 1
 
     &.dropping:not(.media-folder)
       transform: scale(0.8)
 
     &.dropped:not(.media-folder)
       transform: scale(0)
 
     form
       height: 100%
 
-.gallery form .item .overlay a
+.gallery-select .item .overlay a
   display: none
 
 .gallery:after
   clear: both
   content: ""
   display: block
 
 .gallery-select
-  margin: -8px
+  margin: 0
 
   &.gallery-select-multiple
     padding-bottom: 70px
 
   form
@@ -185,20 +217,21 @@
       background: $primary-color
       color: #fff
       opacity: .7
 
   .gallery-select-action-bar
+    align-items: center
     background: #fff
     border-top: 1px solid #e5e5e5
-    bottom: 0px
-    clear: both
-    margin: 0 -12px
-    padding: 12px
-    position: absolute
-    width: 100%
-    z-index: 3
+    display: flex
+    justify-content: flex-end
+    margin-top: 12px
+    padding: 12px 12px 0
 
+    .button
+      margin: 0 0 0 4px
+
 // Customfile
 
 .gallery .item
   .customfile
     border: 1px solid #e5e5e5
@@ -349,6 +382,6 @@
   font-size: 14px
   font-weight: 600
   height: 16px
   line-height: 16px
   margin-top: 6px
-  text-align: center
\ No newline at end of file
+  text-align: center