_buttons.scss in furatto-0.0.2

- old
+ new

@@ -11,30 +11,32 @@
   display: inline-block;
   *display: inline;
   padding: 4px 12px;
   line-height: 20px;
   font-size: $base-font-size;
-  color: #FFF;
-  background-color: $dark-gray;
+  color: $white;
+  background-color: $inverse;
   cursor: pointer;
   text-align: center;
   vertical-align: middle;
   border: none;
-  margin: 0;
-  @include single-transition(opacity, 0.2s, ease-in-out);
-  @include border-radius($base-radius);
-  margin-bottom: 5px;
+  outline: none;
+  @include single-transition(all, 0.3s, ease-in-out);
+  @include border-radius(3px);
+  font-weight: 300;
+  margin: 5px 0;
+  border: 1px solid darken($dark-inverse, 5%);
 
   &:hover, &:focus {
     zoom: 1;
     text-decoration: none;
-    background: $gray;
+    background: $dark-inverse;
   }
 
-  &.disabled, &[disabled] {
+  &.btn-disabled, &[disabled] {
     cursor: no-drop;
-    background-color: $dark-gray;
+    background-color: $dark-inverse;
     @include opacity(0.65);
   }
 
   &.active, &:active {
     outline: 0;
@@ -42,25 +44,44 @@
 
   [class^="icon-"], [class*=" icon-"] {
     margin-right: 5px;
   }
 
+  &.btn-alpha {
+    border: 1px solid $white;
+    background: rgba(0,0,0,0.0);
+
+    &:hover {
+      color: $inverse;
+      background: $white;
+    }
+  }
+
 }
 
 /* Button colors definition */
 /*---------------------------*/
 @each $color in $colors {
   .btn-#{nth($color, 1)} {
     background-color: nth($color, 2);
+    border: 1px solid darken(nth($color, 2), 5%);
 
     &:hover, &:focus {
       background-color: nth($color, 3);
     }
 
-    &.disabled, &[disabled] {
+    &.btn-disabled, &[disabled] {
       background-color: nth($color, 2);
     }
+
+    &.btn-alpha {
+      color: $white;
+      font-weight: 300;
+      &:hover {
+        color: nth($color, 3);
+      }
+    }
   }
 }
 
 /* Button sizes */
 /*-----------------------------*/
@@ -73,10 +94,15 @@
 .btn-xlarge {
   padding: $padding-xlarge;
   font-size: $font-size-xlarge;
 }
 
+.btn-xxlarge {
+  padding: $padding-xxlarge;
+  font-size: $font-size-xlarge;
+}
+
 .btn-small {
   padding: $padding-small;
   font-size: $font-size-small;
 }
 
@@ -95,6 +121,5 @@
 /* Vertical separation */
 /*----------------------*/
 .btn-block + .btn-block {
   margin-top: 5px;
 }
-