_forms.sass in spina-1.0.0

- old
+ new

@@ -121,14 +121,30 @@
   trix-toolbar
     margin-top: 20px
 
   trix-editor.text-input
     padding-left: 0
+    white-space: initial
 
   #{$all-text-inputs}
     height: 50px
 
+  a.media_picker
+    background: none
+    border: none
+    box-shadow: none
+    outline: none
+    padding-left: 0
+
+    .image
+      border-radius: 3px
+      display: inline-block
+      overflow: hidden
+
+      img
+        display: block
+
 .sidebar-form-images
   margin-top: 25px
 
   &:after
     clear: both
@@ -138,19 +154,26 @@
 .sidebar-form-image
   background: #ededf2
   border: 1px solid #e5e5ea
   border-radius: 2px
   display: inline-block
+  height: 100px
   margin-bottom: 10px
   margin-right: 10px
+  overflow: hidden
   position: relative
   width: 100px
 
   > img
     border-radius: 2px
     display: block
-    width: 100%
+    left: 50%
+    max-height: 100%
+    max-width: 100%
+    position: absolute
+    top: 50%
+    transform: translateY(-50%) translateX(-50%)
 
   .sidebar-form-image-overlay
     background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
     content: " "
     display: block
@@ -164,10 +187,11 @@
 
   &:hover .sidebar-form-image-overlay
     opacity: 1
 
   &:first-child
+    height: 240px
     width: 320px
 
   &:nth-child(3n + 1)
     margin-right: 0
 
@@ -315,21 +339,27 @@
 
 // Input groups
 .input-group
   display: flex
 
-  #{$all-text-inputs}, .text-input, .select-dropdown
+  div
+    #{$all-text-inputs}, .text-input, .select-dropdown
+      height: 100%
+
+  & > div, #{$all-text-inputs}, .text-input, .select-dropdown
     flex: 1
 
     &:not(:first-child)
-      border-bottom-left-radius: 0
-      border-top-left-radius: 0
+      &, #{$all-text-inputs}, .text-input, .select-dropdown
+        border-bottom-left-radius: 0
+        border-top-left-radius: 0
 
     &:not(:last-child)
-      border-bottom-right-radius: 0
-      border-top-right-radius: 0
-      border-right: none
+      &, #{$all-text-inputs}, .text-input, .select-dropdown
+        border-bottom-right-radius: 0
+        border-top-right-radius: 0
+        border-right: none
 
 // Inputs
 
 #{$all-text-inputs}, textarea, .text-input
   border: 1px solid #c3c3c3
@@ -530,12 +560,16 @@
   margin: 0
   overflow: hidden
   padding: 0
   position: relative
   transition: border .2s ease
+  white-space: nowrap
   @extend .icon, .icon-caret-down
 
+  .field_with_errors
+    display: inline-block
+
   label
     background: #f5f5f5
     border-right: 1px solid #ddd
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
     color: #999
@@ -613,11 +647,11 @@
       right: -1px
       top: -40px
       width: 1px
 
     ul:after
-      background: linear-gradient(bottom, rgba(255, 255, 255, 0), #ddd)
+      background: linear-gradient(#ddd, rgba(255, 255, 255, 0))
       bottom: -40px
       top: auto
 
     ul li
       overflow: hidden
@@ -708,13 +742,18 @@
 
 .new_document
   line-height: 52px
 
   .customfile
+    background: rgba(0, 0, 0, .015)
+    border: 1px dashed rgba(0, 0, 0, .1)
+    border-radius: 10px
     cursor: pointer
     height: 100%
+    margin: 20px 0
     overflow: hidden
+    padding-left: 20px
     position: relative
     text-align: left
     width: 100%
 
     &:before
@@ -731,12 +770,16 @@
       animation: "rotate" 2s linear infinite
       color: #bbb
       @extend .icon, .icon-refresh:before
       display: none
       font-size: 36px
+      height: 50px
+      width: 36px
 
   .customfile.loading
+    padding: 7px 20px
+
     &:before
       display: none
 
     &:after
       display: block
@@ -761,10 +804,38 @@
     z-index: 9
 
   .customfile-button
     display: none
 
+.document-select
+  ul
+    margin: -20px -20px 20px -20px
+
+  .item
+    border-top: 1px solid #efefef
+    cursor: pointer
+    line-height: 1
+    margin: 0
+    position: relative
+    width: 100%
+
+    label
+      display: block
+      font-size: 0.875rem
+      margin: 0
+      padding: 20px
+
+    input[type="checkbox"],
+    input[type="radio"]
+      left: 0
+      opacity: 0
+      position: absolute
+      top: 0
+
+      &:checked + label
+        background: #f5f5fa
+
 .media_picker
   background: #f9f9f9
   border: 1px solid #d5d5d5
   border-radius: 3px
   box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1)
@@ -781,21 +852,9 @@
   &:hover .button
     background: tint(#efefef, 20%)
 
   &:active .button
     background: shade(#efefef, 10%)
-
-  &:before
-    background: rgba(255, 255, 255, .5)
-    content: ""
-    height: 100%
-    left: 0
-    opacity: 0
-    position: absolute
-    text-align: center
-    top: 0
-    transition: opacity .2s ease
-    width: 100%
 
   .placeholder
     color: #666
     font-size: 13px
     font-weight: 600