updated various mixins

removed bootstrap color stuff
adjusted alert mixing
made names of mixing easier to use
added transition mixing
removed duplicate box-shadow mixing
made button mixing use bones-pink
added another button color for example

library/scss/mixins.scss

@@ -4,7 +4,7 @@ Author:
 
 Stylesheet: Mixins & Constants Stylesheet
 
-This is where you can take advantage of LESS' great features: 
+This is where you can take advantage of Sass' great features: 
 Mixins & Constants. I won't go in-depth on how they work exactly,
 there are a few articles below that will help do that. What I will
 tell you is that this will help speed up simple changes like
@@ -14,7 +14,6 @@ border-radius.
 A WORD OF WARNING: It's very easy to overdo it here. Be careful and
 remember less is more. 
 
-
 ******************************************************************/
 
 /*********************
@@ -57,23 +56,10 @@ $green:             #e6efc2;
 $blue:              #d5edf8;
 
 $black:             #000;
-$grayDark:          lighten($black, 25%);
-$gray:              lighten($black, 50%);
-$grayLight:         lighten($black, 75%);
-$grayLighter:       lighten($black, 90%);
 $white:             #fff;
 
-/* this is pulled from Bootstrap */
-$baseColor:         $black;                  // Set a base color
-$complement:        spin($baseColor, 180);   // Determine a complementary color
-$split1:            spin($baseColor, 158);   // Split complements
-$split2:            spin($baseColor, -158);
-$triad1:            spin($baseColor, 135);   // Triads colors
-$triad2:            spin($baseColor, -135);
-$tetra1:            spin($baseColor, 90);    // Tetra colors
-$tetra2:            spin($baseColor, -90);
-$analog1:           spin($baseColor, 22);    // Analogs colors
-$analog2:           spin($baseColor, -22);
+$bones-pink:        #f01d4f;
+$bones-blue:        #1990db;
 	
 /*********************
 TYPOGRAPHY
@@ -108,18 +94,18 @@ use the best ampersand
 http://simplebits.com/notebook/2008/08/14/ampersands-2/
 */
 span.amp {
-  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif;
+  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
   font-style: italic;
 }
 
 /* text alignment */
-.text-left { text-align: left; }
+.text-left   { text-align: left; }
 .text-center { text-align: center; }
-.text-right { text-align: right; }
+.text-right  { text-align: right; }
 
 
 /* alerts & notices */
-.help, .info, .error, .success { 
+.alert { 
 	margin: 10px; 
 	padding: 5px 18px; 
 	border: 1px solid; 
@@ -149,8 +135,8 @@ span.amp {
 BORDER RADIUS
 *********************/
 
-/* @include borderRadius(4px); */
-@mixin borderRadius($radius: 4px) {
+/* @include rounded(4px); */
+@mixin rounded($radius: 4px) {
 	-webkit-border-radius: $radius;
 	   -moz-border-radius: $radius;
 	    -ms-border-radius: $radius;
@@ -158,8 +144,8 @@ BORDER RADIUS
 	        border-radius: $radius;
 }
 
-/* @include borderTopRadius(4px); */
-@mixin borderTopRadius($radius: 4px) {
+/* @include rounded-top(4px); */
+@mixin rounded-top($radius: 4px) {
 	-webkit-border-top-right-radius: $radius;
 	-webkit-border-top-left-radius: $radius;
 	-moz-border-radius-topright: $radius;
@@ -168,8 +154,8 @@ BORDER RADIUS
 	border-top-left-radius: $radius;
 }
 
-/* @include borderRightRadius(4px); */
-@mixin borderRightRadius($radius: 4px) {
+/* @include rounded-right(4px); */
+@mixin rounded-right($radius: 4px) {
 	-webkit-border-top-right-radius: $radius;
 	-webkit-border-bottom-right-radius: $radius;
 	-moz-border-radius-topright: $radius;
@@ -178,8 +164,8 @@ BORDER RADIUS
 	border-bottom-right-radius: $radius;
 }
 
-/* @include borderBottomRadius(4px); */
-@mixin borderBottomRadius($radius: 4px) {
+/* @include rounded-bottom(4px); */
+@mixin rounded-bottom($radius: 4px) {
 	-webkit-border-bottom-right-radius: $radius;
 	-webkit-border-bottom-left-radius: $radius;
 	-moz-border-radius-bottomright: $radius;
@@ -188,8 +174,8 @@ BORDER RADIUS
 	border-bottom-left-radius: $radius;
 }
 
-/* @include borderLeftRadius(4px); */
-@mixin borderLeftRadius($radius: 4px) {
+/* @include rounded-left(4px); */
+@mixin rounded-left($radius: 4px) {
 	-webkit-border-top-left-radius: $radius;
 	-webkit-border-bottom-left-radius: $radius;
 	-moz-border-radius-topleft: $radius;
@@ -198,19 +184,30 @@ BORDER RADIUS
 	border-bottom-left-radius: $radius;
 }
 
+/*********************
+TRANISTION
+*********************/
+
+/* @include transition(all,2s,ease-out); */
+@mixin css-transition($what: all, $time: 0.2s, $how: ease-out) {
+	-webkit-transition: $what $time $how;
+	   -moz-transition: $what $time $how;
+ 	    -ms-transition: $what $time $how;
+	     -o-transition: $what $time $how;
+	        transition: $what $time $how;
+}
+
 /*********************
 BOX SHADOWS
 *********************/
 
 /* @include box-shadow(5px, 5px, 10px, #000); */
-@mixin box-shadow ($shadow-1,
+@mixin box-shadow($shadow-1,
   $shadow-2: false, $shadow-3: false,
   $shadow-4: false, $shadow-5: false,
   $shadow-6: false, $shadow-7: false,
-  $shadow-8: false, $shadow-9: false)
-  {
-    $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4,
-                   $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
+  $shadow-8: false, $shadow-9: false) {
+  $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9);
 
   -webkit-box-shadow: $full;
      -moz-box-shadow: $full;
@@ -240,8 +237,8 @@ really slow down your CSS. Don't overdue it.
 BOX SIZING
 *********************/
 
-/* @include boxSizing(border-box); */
-@mixin boxSizing($type: border-box) {
+/* @include box-sizing(border-box); */
+@mixin box-sizing($type: border-box) {
 	-webkit-box-sizing: $type;
 	   -moz-box-sizing: $type;
 		-ms-box-sizing: $type;
@@ -249,27 +246,16 @@ BOX SIZING
 			box-sizing: $type; 
 }
 
-/*********************
-BOX SHADOW
-*********************/
-
-/* @include boxShadow(0 0 4px #444); */
-@mixin boxShadow($x: 0, $y: 0, $radius: 4px, $spread: 0, $color: rgba(0,0,0,0.5)) {
-	-webkit-box-shadow: $x $y $radius $spread $color;
-	   -moz-box-shadow: $x $y $radius $spread $color;
-		-ms-box-shadow: $x $y $radius $spread $color;
-	     -o-box-shadow: $x $y $radius $spread $color; 
-			box-shadow: $x $y $radius $spread $color; 
-}
-
+ 
 /*********************
 BUTTONS
 *********************/
 
 .button, .button:visited {
-	border: 1px solid darken($blue, 13%);
-	border-top-color: darken($blue, 7%);
-	border-left-color: darken($blue, 7%);
+	font-family: $sans-serif;
+	border: 1px solid darken($bones-pink, 13%);
+	border-top-color: darken($bones-pink, 7%);
+	border-left-color: darken($bones-pink, 7%);
 	padding: 4px 12px;
 	color: $white;
 	display: inline-block;
@@ -280,20 +266,35 @@ BUTTONS
 	cursor: pointer;
 	margin-bottom: 20px;
 	line-height: 21px;
-	@include borderRadius(4px);
-	@include css-gradient($blue,darken($blue, 5%));
+	@include rounded(4px);
+	@include css-gradient($bones-pink, darken($bones-pink, 5%));
 
 
 	&:hover, &:focus {
 		color: $white;
-	  	border: 1px solid darken($blue, 13%);
-	  	border-top-color: darken($blue, 20%);
-	 	border-left-color: darken($blue, 20%);
-		@include css-gradient(darken($blue, 5%),darken($blue, 10%));
+	  	border: 1px solid darken($bones-pink, 13%);
+	  	border-top-color: darken($bones-pink, 20%);
+	 	border-left-color: darken($bones-pink, 20%);
+		@include css-gradient(darken($bones-pink, 5%), darken($bones-pink, 10%));
 	}
 	
 	&:active {
-		@include css-gradient(darken($blue, 5%),$blue);
+		@include css-gradient(darken($bones-pink, 5%), $bones-pink);
+	}	
+}
+
+.blue-button, .blue-button:visited {
+	border-color: darken($bones-blue, 10%);
+	text-shadow: 0 1px 1px darken($bones-blue, 10%);
+	@include css-gradient( $bones-blue, darken($bones-blue, 5%) );
+	-webkit-box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
+       -moz-box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
+   	        box-shadow: inset 0 0 3px lighten($bones-blue, 16%);
+	&:hover, &:focus {
+		border-color: darken($bones-blue, 15%);
+		@include css-gradient( darken($bones-blue, 4%), darken($bones-blue, 10%) );
+	}
+	&:active {
+		@include css-gradient( darken($bones-blue, 5%), $bones-blue );
 	}
-		
 }