_forms.sass in spina-2.0.0.alpha

- old
+ new

@@ -1,12 +1,12 @@
 // Horizontal form
 .horizontal-form
   .horizontal-form-group
-    border-bottom: 1px solid #eee
+    border-bottom: 1px solid #e5e5e5
     display: flex
-    margin: 0 -20px
-    padding: 20px 20px
+    margin: 0 -40px
+    padding: 20px 40px
 
     &:first-child
       margin-top: -20px
 
     &:last-child
@@ -464,32 +464,40 @@
   background: url(asset-path('spina/datepicker.svg')) no-repeat center right
 
 // Switch
 
 .switch
-  background: #e9e9e9
+  background: #d9d9ec
   border-radius: 23px
   display: block
   height: 29px
   margin-bottom: 0
   padding: 3px
   position: relative
   transition: background .4s ease
   width: 46px
 
   .knob
-    background: #fff
+    background: #f5f5f5
     border-radius: 23px
-    box-shadow: 0 2px 5px rgba(0, 0, 0, .3)
+    box-shadow: 0 3px 10px rgba(0, 0, 0, .1)
     display: inline-block
     height: 23px
     position: absolute
+    transition: all .2s ease
     width: 23px
 
+  &:hover .knob
+    background: #fff
+    box-shadow: 0 3px 10px rgba(0, 0, 0, .2)
+
   &.activated, &.active
     background: $success-color
 
+    .knob
+      background: #fff
+
   &.active .knob
     transform: translate3d(17px, 0, 0)
 
 // Checkboxes
 
@@ -512,11 +520,11 @@
     width: 16px
 
   label:before
     background: #fff
     border: 1px solid #c3c3c3
-    border-radius: 4px
+    border-radius: 6px
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
     content: ""
     display: inline-block
     height: 14px
     left: 0
@@ -550,21 +558,21 @@
 
 // Select boxes
 
 .select-dropdown
   background: #fff
-  border: 1px solid #c3c3c3
-  border-radius: 3px
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+  border: 1px solid #e2e2e2
+  border-radius: 6px
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
   display: inline-block
   font-family: $font-family
-  line-height: 28px
+  line-height: 32px
   margin: 0
   overflow: hidden
   padding: 0
   position: relative
-  transition: border .2s ease
+  transition: all .2s ease
   white-space: nowrap
   @extend .icon, .icon-caret-down
 
   .field_with_errors
     display: inline-block
@@ -581,21 +589,25 @@
     font-size: 13px
     font-weight: 600
     margin-right: -4px
     padding: 0 11px
 
-    &:after
-      content: ":"
-
   &:hover
-    border: 1px solid $primary-color
+    background: #f5f5f5
+    border: 1px solid #ccc
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1)
 
+  &:active
+    background: #eee
+    border: 1px solid #c9c9c9
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1)
+
   &:before
     color: #666
     font-size: 14px
     font-weight: normal
-    line-height: 28px
+    line-height: 32px
     position: absolute
     right: 8px
     top: 5px
     z-index: 1
 
@@ -604,73 +616,74 @@
     background-image: none
     border: none
     box-shadow: none
     color: #666
     cursor: pointer
-    display: inline-block
+    display: block
     font-family: $font-family
-    font-size: 13px
-    font-weight: 600
-    line-height: 16px
+    font-size: 14px
+    font-weight: 500
+    height: 42px
     margin: 0
     outline: none
-    padding: 11px 36px 11px 10px
+    padding: 13px 36px 13px 15px
     position: relative
     width: 115%
     z-index: 2
     -webkit-appearance: none
 
 // Structure form
 
 .structure-form
   display: flex
-  margin-left: -20px
   position: relative
 
   .structure-form-menu
     box-sizing: content-box
     min-width: 260px
+    width: 260px
 
     label
       display: block
       font-size: 13px
       padding: 12px 20px
       text-transform: none
 
     ul
-      border-right: 1px solid #ddd
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
       position: relative
 
-    ul:before, ul:after
-      background: linear-gradient(rgba(255, 255, 255, 0), #ddd)
-      content: " "
-      height: 40px
-      position: absolute
-      right: -1px
-      top: -40px
-      width: 1px
-
-    ul:after
-      background: linear-gradient(#ddd, rgba(255, 255, 255, 0))
-      bottom: -40px
-      top: auto
-
     ul li
       overflow: hidden
 
     ul li .structure-item-remove
       color: #999
       float: right
 
+    ul li a
+      background: rgba(255, 255, 255, .4)
+      border: 1px solid #e6e6e6
+
+    ul li:not(:last-child) a
+      border-bottom: none
+
+    ul li:first-child a
+      border-top-left-radius: 4px
+      border-top-right-radius: 4px
+
+    ul li:last-child a
+      border-bottom-left-radius: 4px
+      border-bottom-right-radius: 4px
+
     ul li a, ul li.sortable-placeholder
-      color: #333
+      color: #444
       cursor: pointer
       display: block
       font-weight: 600
       font-size: 13px
-      height: 50px
-      line-height: 50px
+      height: 44px
+      line-height: 44px
       outline: none
       padding-left: 20px
 
       &:hover
         background: #f9f9f9
@@ -683,44 +696,17 @@
 
     ul li.sortable-placeholder
       background: #f9f9f9
 
     ul li.active a
+      background: white
       color: $primary-color
 
-    ul li.active
-      margin-right: -1px
-      position: relative
-
-      a
-        background: #fff
-
-      &:before
-        border-bottom: 1px solid #ddd
-        border-bottom-right-radius: 3px
-        border-right: 1px solid #ddd
-        content: " "
-        height: 10px
-        position: absolute
-        right: 0px
-        top: -10px
-        width: 100%
-
-      &:after
-        bottom: -10px
-        border-right: 1px solid #ddd
-        border-top: 1px solid #d5d5d5
-        border-top-right-radius: 3px
-        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075)
-        content: " "
-        height: 10px
-        right: 0px
-        position: absolute
-        width: 100%
-
   .structure-form-content
-    padding-left: 12px
+    box-sizing: border-box
+    margin-top: -29px
+    padding-left: 15px
     width: 100%
 
     .structure-form-pane
       display: none
 
@@ -839,10 +825,10 @@
 
 .media_picker
   background: #f9f9f9
   border: 1px solid #d5d5d5
   border-radius: 3px
-  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .1)
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .1)
   color: #333
   display: block
   margin-top: 2px
   min-height: 70px
   padding: 15px