_buttons.scss in magic_stylez-0.0.0.27

- old
+ new

@@ -108,58 +108,48 @@
 $paypal-nice-top:         #52b9f4;
 $paypal-nice-bottom:      darken(#1784cb, 5%);
 
 
 
-// Flat Buttons
+// Alternate buttons .. again with important color (to stay btn in navbar)
+// --------------------------------------------------
+.btn-default {
+  @include btn-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+}
+.btn-primary {
+  @include btn-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+}
+// Success appears as green
+.btn-success {
+  @include btn-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+}
+// Info appears as blue-green
+.btn-info {
+  @include btn-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+}
+// Warning appears as orange
+.btn-warning {
+  @include btn-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+}
+// Danger and error appear as red
+.btn-danger {
+  @include btn-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+}
+
+
+// Socials
 .btn-facebook {
-	background: $facebook-color;
-	text-shadow: 0 1px 0 darken($facebook-color, 20%);
-	border-color: darken($facebook-color, 10%);
-	&:active {
-		background: darken($facebook-color, 10%);
-	}
-	&:hover {
-		background: darken($facebook-color, 5%);
-		border-color: darken($facebook-color, 15%);
-	}
+  @include btn-variant($btn-facebook-color, $btn-facebook-bg, $btn-facebook-border);
 }
 .btn-google {
-	background: $google-color;
-	text-shadow: 0 1px 0 darken($google-color, 20%);
-	border-color: darken($google-color, 10%);
-	&:active {
-		background: darken($google-color, 10%);
-	}
-	&:hover {
-		background: darken($google-color, 5%);
-		border-color: darken($google-color, 15%);
-	}
+  @include btn-variant($btn-google-color, $btn-google-bg, $btn-google-border);
 }
 .btn-twitter {
-	background: $twitter-color;
-	text-shadow: 0 1px 0 darken($twitter-color, 20%);
-	border-color: darken($twitter-color, 10%);
-	&:active {
-		background: darken($twitter-color, 10%);
-	}
-	&:hover {
-		background: darken($twitter-color, 5%);
-		border-color: darken($twitter-color, 15%);
-	}
+  @include btn-variant($btn-twitter-color, $btn-twitter-bg, $btn-twitter-border);
 }
 .btn-paypal {
-	background: $paypal-color;
-	text-shadow: 0 1px 0 darken($paypal-color, 20%);
-	border-color: darken($paypal-color, 10%);
-	&:active {
-		background: darken($paypal-color, 10%);
-	}
-	&:hover {
-		background: darken($paypal-color, 5%);
-		border-color: darken($paypal-color, 15%);
-	}
+  @include btn-variant($btn-paypal-color, $btn-paypal-bg, $btn-paypal-border);
 }
 
 
 // Nice Buttons
 .btn-facebook-nice, .btn-google-nice, .btn-twitter-nice, .btn-paypal-nice {
@@ -169,56 +159,21 @@
 		@include box-shadow( inset 0 1px 0 0 rgba(255,255,255,.42), 0 1px 1px 0 rgba(0,0,0,.42), inset -1px 0 1px 0 rgba(255,255,255,.32) );
 	}
 	&:hover { color: #fff; }
 }
 
-.btn-facebook-nice, .btn-facebook-nice > .btn {
-	@include linear-gradient($facebook-nice-top, $facebook-nice-bottom);
-	text-shadow: 0 1px 0 darken($facebook-nice-bottom, 20%);
-	border-color: darken($facebook-nice-top, 10%);
-	&:active {
-		@include linear-gradient( darken($facebook-nice-top, 10%), darken($facebook-nice-bottom, 10%));
-	}
-	&:hover {
-		@include linear-gradient( darken($facebook-nice-top, 5%), darken($facebook-nice-bottom, 5%));
-	}
+.btn-facebook-nice {
+  @include btn-with-gradient($btn-facebook-color, $facebook-gradient-top, $facebook-gradient-bottom, $btn-facebook-border);
 }
-.btn-google-nice, .btn-google-nice > .btn {
-	@include linear-gradient($google-nice-top, $google-nice-bottom);
-	text-shadow: 0 1px 0 darken($google-nice-bottom, 20%);
-	border-color: darken($google-nice-top, 10%);
-	border-bottom-color: darken($google-nice-bottom, 5%);
-	&:active {
-		@include linear-gradient( darken($google-nice-top, 10%), darken($google-nice-bottom, 10%));
-	}
-	&:hover {
-		@include linear-gradient( darken($google-nice-top, 5%), darken($google-nice-bottom, 5%));
-	}
+.btn-google-nice {
+  @include btn-with-gradient($btn-google-color, $google-gradient-top, $google-gradient-bottom, $btn-google-border);
 }
-.btn-twitter-nice, .btn-twitter-nice > .btn {
-	@include linear-gradient($twitter-nice-top, $twitter-nice-bottom);
-	text-shadow: 0 1px 0 darken($twitter-nice-bottom, 20%);
-	border-color: darken($twitter-nice-top, 10%);
-	&:active {
-		@include linear-gradient( darken($twitter-nice-top, 10%), darken($twitter-nice-bottom, 10%));
-	}
-	&:hover {
-		@include linear-gradient( darken($twitter-nice-top, 5%), darken($twitter-nice-bottom, 5%));
-	}
+.btn-twitter-nice {
+  @include btn-with-gradient($btn-twitter-color, $twitter-gradient-top, $twitter-gradient-bottom, $btn-twitter-border);
 }
-.btn-paypal-nice, .btn-paypal-nice > .btn {
-	@include linear-gradient($paypal-nice-top, $paypal-nice-bottom);
-	text-shadow: 0 1px 0 darken($paypal-nice-bottom, 20%);
-	border-color: darken($paypal-nice-top, 20%);
-	&:active {
-		@include linear-gradient( darken($paypal-nice-top, 10%), darken($paypal-nice-bottom, 10%));
-	}
-	&:hover {
-		@include linear-gradient( darken($paypal-nice-top, 5%), darken($paypal-nice-bottom, 5%));
-	}
+.btn-paypal-nice {
+  @include btn-with-gradient($btn-paypal-color, $paypal-gradient-top, $paypal-gradient-bottom, $btn-paypal-border);
 }
-
-
 
 
 
 
 
\ No newline at end of file