_forms.sass in spina-0.12.0

- old
+ new

@@ -1,40 +1,40 @@
 // Horizontal form
 .horizontal-form
   .horizontal-form-group
     border-bottom: 1px solid #eee
+    display: flex
     margin: 0 -20px
     padding: 20px 20px
-    @include display(flex)
 
     &:first-child
       margin-top: -20px
 
     &:last-child
       border-bottom: none
       margin-bottom: -20px
 
   .horizontal-form-label
     color: #333
+    display: flex
+    flex-direction: column
     font-size: 13px
     font-weight: 600
+    justify-content: center
     line-height: 18px
     padding-right: 20px
     width: 240px
-    @include justify-content(center)
-    @include display(flex)
-    @include flex-direction(column)
 
     small
       color: #666
       display: block
       font-size: 13px
       font-weight: normal
 
   .horizontal-form-content
-    @include flex(1)
-    @include align-self(flex-start)
+    align-self: flex-start
+    flex: 1
 
   .image
     border-radius: 5px
     display: inline-block
     height: 120px
@@ -46,16 +46,16 @@
       height: 100%
       width: 100%
 
 // Sidebar form
 .sidebar-form
+  display: flex
   margin: 0 auto
   max-width: 960px
-  @include display(flex)
 
 .sidebar-form-content
-  @include flex(1)
+  flex: 1
 
   .well
     margin-right: 20px
     padding-bottom: 0
     padding-top: 0
@@ -63,13 +63,13 @@
 .sidebar-form-sidebar
   width: 320px
 
 .sidebar-form-group
   border-bottom: 1px solid #eee
+  display: flex
   margin: 0 -20px
   padding: 0 20px
-  @include display(flex)
 
   &:last-child
     border-bottom: none
 
 .sidebar-form-label
@@ -78,13 +78,13 @@
   font-weight: 600
   line-height: 50px
   width: 180px
 
 .sidebar-form-control
+  flex: 1
   margin-right: -20px
   position: relative
-  @include flex(1)
 
   .switch
     margin: 10px
 
   #{$all-text-inputs}, textarea, .text-input
@@ -94,10 +94,22 @@
     box-shadow: none
 
     &:disabled
       background: none
 
+  &[data-form-prepend]
+    padding-left: 14px
+
+  &[data-form-prepend]:before
+    content: attr(data-form-prepend)
+    font-size: 14px
+    font-weight: 600
+    left: 10px
+    line-height: 50px
+    position: absolute
+    top: 0
+
   &[data-form-append]:after
     content: attr(data-form-append)
     font-size: 14px
     font-weight: 600
     line-height: 50px
@@ -145,12 +157,12 @@
     height: 25%
     left: 0
     opacity: 0
     position: absolute
     top: 75%
+    transition: opacity .2s ease
     width: 100%
-    @include transition(opacity .2s ease)
 
   &:hover .sidebar-form-image-overlay
     opacity: 1
 
   &:first-child
@@ -162,11 +174,11 @@
   a
     opacity: .5
     padding: 6px
     position: relative
     z-index: 1
-    @include transition(opacity .2s ease)
+    transition: opacity .2s ease
 
   a img:first-child
     display: block
 
   a img:last-child
@@ -255,10 +267,11 @@
 
 // Form checkbox
 
 .form-checkbox
   label
+    cursor: pointer
     display: block
     font-size: 13px
     font-weight: 600
     line-height: 20px
     position: relative
@@ -272,13 +285,13 @@
     border-radius: 3px
     content: " "
     display: inline-block
     height: 20px
     margin-right: 10px
+    transition: all .2s ease
     vertical-align: middle
     width: 20px
-    @include transition(all .2s ease)
 
   input[type="checkbox"]:checked + label:before
     background: tint($primary-color, 10%)
     border-color: transparent
 
@@ -289,25 +302,25 @@
     left: 0px
     line-height: 20px
     position: absolute
     text-align: center
     top: 0px
+    transform: scale(0)
+    transition: all .2s ease
     vertical-align: middle
     width: 20px
     @extend .icon, .icon-large-check:before
-    @include transform(scale(0))
-    @include transition(all .2s ease)
 
   input[type="checkbox"]:checked + label:after
-    @include transform(scale(1))
+    transform: scale(1)
 
 // Input groups
 .input-group
-  @include display(flex)
+  display: flex
 
   #{$all-text-inputs}, .text-input, .select-dropdown
-    @include flex(1)
+    flex: 1
 
     &:not(:first-child)
       border-bottom-left-radius: 0
       border-top-left-radius: 0
 
@@ -323,12 +336,12 @@
   border-radius: 3px
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
   color: #333
   font-size: 14px
   padding: 10px
+  transition: border .2s ease
   width: 100%
-  @include transition(border .2s ease)
 
   &.input-mini
     width: 75px
 
   &.input-small
@@ -427,12 +440,12 @@
   display: block
   height: 29px
   margin-bottom: 0
   padding: 3px
   position: relative
+  transition: background .4s ease
   width: 46px
-  @include transition(background .4s ease)
 
   .knob
     background: #fff
     border-radius: 23px
     box-shadow: 0 2px 5px rgba(0, 0, 0, .3)
@@ -443,11 +456,11 @@
 
   &.activated, &.active
     background: $success-color
 
   &.active .knob
-    @include transform(translate3d(17px, 0, 0))
+    transform: translate3d(17px, 0, 0)
 
 // Checkboxes
 
 .checkbox, .radio
   display: inline-block
@@ -489,13 +502,13 @@
     font-weight: normal
     left: 2px
     line-height: 18px
     text-align: center
     top: -2px
+    transition: opacity .1s ease
     opacity: 0
     position: absolute
-    @include transition(opacity .1s ease)
 
   input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after
     opacity: 1
 
 .radio
@@ -516,15 +529,31 @@
   line-height: 28px
   margin: 0
   overflow: hidden
   padding: 0
   position: relative
+  transition: border .2s ease
   @extend .icon, .icon-caret-down
-  @include transition(border .2s ease)
 
+  label
+    background: #f5f5f5
+    border-right: 1px solid #ddd
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .16)
+    color: #999
+    display: inline-block
+    height: 38px
+    line-height: 38px
+    font-family: $font-family
+    font-size: 13px
+    font-weight: 600
+    margin-right: -4px
+    padding: 0 11px
+
+    &:after
+      content: ":"
+
   &:hover
-    // background: #f5f5f5
     border: 1px solid $primary-color
 
   &:before
     color: #666
     font-size: 14px
@@ -551,18 +580,18 @@
     outline: none
     padding: 11px 36px 11px 10px
     position: relative
     width: 115%
     z-index: 2
-    @include appearance(none)
+    -webkit-appearance: none
 
 // Structure form
 
 .structure-form
+  display: flex
   margin-left: -20px
   position: relative
-  @include display(flex)
 
   .structure-form-menu
     box-sizing: content-box
     min-width: 260px
 
@@ -575,22 +604,22 @@
     ul
       border-right: 1px solid #ddd
       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
-      @include linear-gradient(rgba(255, 255, 255, 0), #ddd)
 
     ul:after
+      background: linear-gradient(bottom, rgba(255, 255, 255, 0), #ddd)
       bottom: -40px
       top: auto
-      @include linear-gradient(bottom, rgba(255, 255, 255, 0), #ddd)
 
     ul li
       overflow: hidden
 
     ul li .structure-item-remove
@@ -669,10 +698,14 @@
     outline: none
 
   .structure-form-part
     padding: 5px 0
 
+    .select-dropdown
+      select
+        width: auto
+
 // Custom file input
 
 .new_document
   line-height: 52px
 
@@ -689,19 +722,19 @@
       display: block
       font-weight: 400
       padding: 6px 0
       @extend .icon, .icon-upload-outline:before
       font-size: 28px
+      transition: color .2s ease
       vertical-align: middle
-      @include transition(color .2s ease)
 
     &:after
+      animation: "rotate" 2s linear infinite
       color: #bbb
       @extend .icon, .icon-refresh:before
       display: none
       font-size: 36px
-      @include animation("rotate" 2s linear infinite)
 
   .customfile.loading
     &:before
       display: none
 
@@ -741,11 +774,11 @@
   min-height: 70px
   padding: 15px
   position: relative
 
   .image
-    @include transition(all .3s ease)
+    transition: all .3s ease
 
   &:hover .button
     background: tint(#efefef, 20%)
 
   &:active .button
@@ -758,12 +791,12 @@
     left: 0
     opacity: 0
     position: absolute
     text-align: center
     top: 0
+    transition: opacity .2s ease
     width: 100%
-    @include transition(opacity .2s ease)
 
   .placeholder
     color: #666
     font-size: 13px
     font-weight: 600
@@ -794,11 +827,11 @@
     display: block
     float: left
     height: 120px
     margin: 8px
     overflow: hidden
+    transition: box-shadow .3s ease
     width: 120px
-    @include transition(box-shadow .3s ease)
 
     &:hover
       box-shadow: 0 0 20px rgba(0, 0, 0, .2)
 
   .sortable-placeholder