spina 1.2.0 → 2.0.0.alpha

data/app/assets/stylesheets/spina.sass

@@ -29,6 +29,8 @@
 @import spina/trix_custom
 @import spina/wizard
 @import spina/notifications
+@import spina/pages
+@import spina/media_picker
 
 
 html
@@ -267,12 +269,12 @@ nav#secondary
     small
       display: block
       font-size: 12px
-      font-weight: 400
+      font-weight: 500
 
   &.permanent-notice-info
-    background: #eef6fe
-    border-color: #def
-    color: #12659b
+    background: lighten($primary-color-light, 33%)
+    border-color: lighten($primary-color-light, 28%)
+    color: $primary-color
 
     p
       color: inherit
@@ -427,7 +429,7 @@ section#main
     margin-left: 12px
     vertical-align: middle
 
-  a
+  & > a:not(.button)
     color: #999
 
     &:hover
@@ -445,9 +447,9 @@ section#main
 
 .well
   background: #fff
-  border: 1px solid #eee
-  border-radius: 3px
-  margin: 24px -20px
+  border-radius: 6px
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+  margin: 24px -15px
   padding: 20px
 
   hr.divider

data/app/assets/stylesheets/spina/_buttons.sass

@@ -6,17 +6,17 @@ button, input[type="submit"], input[type="button"]
 
 .button
   background: #efefef
-  border-radius: 3px
+  border-radius: 6px
   color: #444
   display: inline-block
   font-size: 14px
   font-weight: 600
-  line-height: 20px
+  line-height: 18px
   margin: 0 4px 4px 0
   outline: none
   padding: 8px 16px
   text-decoration: none
-  transition: all .3s ease
+  transition: all .2s ease
 
   &:hover
     background: shade(#efefef, 5%)
@@ -31,12 +31,34 @@ button, input[type="submit"], input[type="button"]
   &:focus
     outline: none
 
+  &.button-default
+    background: white
+    border: 1px solid #ddd
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .05)
+
+    &:hover
+      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)
+
   &.button-primary
     background: $primary-color
+    border: 1px solid darken($primary-color, 5%)
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
     color: #fff
 
     &:hover
-      background: shade($primary-color, 10%)
+      background: shade($primary-color, 15%)
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .2)
+
+    &:active
+      background: shade($primary-color, 25%)
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4)
 
     &.button-shaded:hover
       background: $primary-color
@@ -46,16 +68,23 @@ button, input[type="submit"], input[type="button"]
 
   &.button-success
     background: $success-color
+    border-color: $success-color
+    box-shadow: 0 1px 1px rgba(0, 0, 0, .1)
     color: #fff
 
     &:hover
-      background: tint($success-color, 20%)
+      background: darken($success-color, 10%)
+      border-color: darken($success-color, 15%)
+      box-shadow: 0 1px 1px rgba(0, 0, 0, .2)
+
+    &:active
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4)
 
     &.button-shaded:hover
       background: $success-color
 
     &:active, &.button-active, &.button-shaded, &.button-shaded:active
-      background: shade($success-color, 10%)
+      background: darken($success-color, 10%)
 
   &.button-danger
     color: $danger-color
@@ -64,6 +93,10 @@ button, input[type="submit"], input[type="button"]
     display: block
     text-align: center
 
+  &.button-white
+    background: white
+    border: 1px solid #ccc
+
   &.button-link
     background: none
     font-weight: 600
@@ -76,7 +109,6 @@ button, input[type="submit"], input[type="button"]
 
   i.icon
     margin-right: 8px
-    margin-top: -2px
 
   &.icon-only
     &:before, i.icon
@@ -86,18 +118,18 @@ button, input[type="submit"], input[type="button"]
     margin-right: 4px
 
   &.button-large
-    border-radius: 4px
+    border-radius: 6px
     padding: 11px 18px
 
     &:before
       margin-right: 10px
 
   &.button-small
-    font-size: 13px
+    font-size: 12px
     padding: 6px 12px
 
     i.icon
-      margin-right: 4px
+      margin-right: 6px
 
   &.button-mini
     font-size: 12px
@@ -126,6 +158,12 @@ button, input[type="submit"], input[type="button"]
     animation: rotate 3.0s linear infinite
     display: inline-block
 
+// Aligning button content
+.button-content
+  align-items: center
+  display: flex
+  justify-content: center
+
 @keyframes rotate
   from
     transform: rotate(0deg)
@@ -144,10 +182,13 @@ button, input[type="submit"], input[type="button"]
     margin-right: 0
 
   .button:first-child
-    border-radius: 3px 0 0 3px
+    border-top-left-radius: 3px
+    border-bottom-left-radius: 3px
 
   .button:last-child
-    border-radius: 0 3px 3px 0
+    border-left: none
+    border-top-right-radius: 3px
+    border-bottom-right-radius: 3px
 
   &:after
     clear: both
@@ -201,7 +242,7 @@ button, input[type="submit"], input[type="button"]
   ul, .sliding-dropdown
     background: #fff
     border: 1px solid #ccc
-    border-radius: 3px
+    border-radius: 6px
     box-shadow: 0 5px 20px rgba(0, 0, 0, .15)
     display: none
     list-style: none
@@ -323,35 +364,20 @@ button, input[type="submit"], input[type="button"]
   .slide
     display: none
     text-align: center
+    padding-bottom: 15px
 
     &.active
       display: block
 
     p
       color: #333
-      font-size: 14px
-      font-weight: 400
+      font-size: 13px
+      font-weight: 500
       margin: 16px
 
     p.muted
       color: #999
 
-    .button
-      border-top-left-radius: 0
-      border-top-right-radius: 0
-      margin: -1px
-      width: 300px
-
-      &.button-primary
-        background: lighten($primary-color, 40%)
-        border: 1px solid lighten($primary-color, 30%)
-        color: $primary-color
-
-        &:hover
-          background: $primary-color
-          border: 1px solid $primary-color
-          color: #fff
-
   .slide-dots
     margin: 12px
     text-align: center

data/app/assets/stylesheets/spina/_forms.sass

@@ -1,10 +1,10 @@
 // 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
@@ -466,7 +466,7 @@ input.datepicker
 // Switch
 
 .switch
-  background: #e9e9e9
+  background: #d9d9ec
   border-radius: 23px
   display: block
   height: 29px
@@ -477,17 +477,25 @@ input.datepicker
   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)
 
@@ -514,7 +522,7 @@ input.datepicker
   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
@@ -552,17 +560,17 @@ input.datepicker
 
 .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
 
@@ -583,17 +591,21 @@ input.datepicker
     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
@@ -606,14 +618,14 @@ input.datepicker
     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
@@ -623,12 +635,12 @@ input.datepicker
 
 .structure-form
   display: flex
-  margin-left: -20px
   position: relative
 
   .structure-form-menu
     box-sizing: content-box
     min-width: 260px
+    width: 260px
 
     label
       display: block
@@ -637,23 +649,9 @@ input.datepicker
       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
 
@@ -661,14 +659,29 @@ input.datepicker
       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
 
@@ -685,40 +698,13 @@ input.datepicker
       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
@@ -841,7 +827,7 @@ input.datepicker
   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