_buttons.sass in spina-2.0.0.alpha

- old
+ new

@@ -4,21 +4,21 @@
   background: none
   border: none
 
 .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%)
     color: inherit
 
@@ -29,43 +29,76 @@
     background: shade(#efefef, 10%)
 
   &: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
 
     &:active, &.button-active, &.button-shaded, &.button-shaded:active
       background: shade($primary-color, 20%)
 
   &.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
 
   &.button-block
     display: block
     text-align: center
 
+  &.button-white
+    background: white
+    border: 1px solid #ccc
+
   &.button-link
     background: none
     font-weight: 600
 
     &:hover
@@ -74,32 +107,31 @@
     &:active, &.button-active
       color: #111
 
   i.icon
     margin-right: 8px
-    margin-top: -2px
 
   &.icon-only
     &:before, i.icon
       margin-right: 0
 
   &.icon-mini:before
     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
     padding: 3px 10px
 
@@ -124,10 +156,16 @@
 
   &.button-saving:before
     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)
   to
     transform: rotate(360deg)
@@ -142,14 +180,17 @@
     border-radius: 0
     float: left
     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
     content: ""
     display: block
@@ -199,11 +240,11 @@
   position: relative
 
   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
     margin: 0
     margin-top: 6px
@@ -321,37 +362,22 @@
     display: block
 
   .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
 