cleaning up mixins

library/less/mixins.less

@@ -20,25 +20,25 @@ remember less is more.
 CLEARFIXIN'
 *********************/
 
-/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
-.clearfix { 
-	&:before,
-	&:after {
-		content: "";
-    	display: table;
-	}
-	&:after {
-		clear: both;
-	}
-	/* for IE */
-	zoom: 1; 
+// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
+.clearfix {
+  zoom: 1;
+	&:before, &:after { content: ""; display: table; }
+	&:after { clear: both; }
 }
 
 /*********************
 TOOLS
 *********************/
 
-/* http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ */
+// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
+* { 
+	-webkit-box-sizing: border-box; 
+	-moz-box-sizing:    border-box; 
+	box-sizing:         border-box; 
+}
+
+// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ 
 .image-replacement {
 	text-indent: 100%;
 	white-space: nowrap;
@@ -62,6 +62,16 @@ http://0to255.com/
 @bones-pink:        #f01d4f;
 @bones-blue:        #1990db;
 
+@link-color:        $bones-pink;
+@link-hover:        darken($link-color, 9%);
+
+/*
+Here's a great tutorial on how to
+use color variables properly:
+http://sachagreif.com/sass-color-variables/
+*/
+
+
 /*********************
 TYPOGRAPHY
 *********************/
@@ -105,32 +115,36 @@ span.amp {
 .text-right  { text-align: right; }
 
 
-/* alerts & notices */
-.alert { 
-	margin: 10px; 
-	padding: 5px 18px; 
-	border: 1px solid; 
+// alerts and notices
+.alert {
+	margin: 10px;
+	padding: 5px 18px;
+	border: 1px solid;
 }
 
-.help { 
-	border-color: darken(@alert-yellow, 5%); 
-	background: @alert-yellow; 
+.alert-help {
+  .alert();
+	border-color: darken(@alert-yellow, 5%);
+	background: @alert-yellow;
 }
 
-.info { 
-	border-color: darken(@alert-blue, 5%); 
-	background: @alert-blue; 
+.alert-info {
+  .alert();
+	border-color: darken(@alert-blue, 5%);
+	background: @alert-blue;
 }
 
-.error { 
-	border-color: darken(@alert-red, 5%); 
-	background: @alert-red; 
+.alert-error {
+  .alert();
+	border-color: darken(@alert-red, 5%);
+	background: @alert-red;
 }
 
-.success { 
-	border-color: darken(@alert-green, 5%); 
-	background: @alert-green; 
-} 
+.alert-success {
+  .alert();
+	border-color: darken(@alert-green, 5%);
+	background: @alert-green;
+}
 
 /*********************
 BORDER RADIUS
@@ -140,40 +154,15 @@ BORDER RADIUS
 NOTE: For older browser support (and some mobile), 
 don't use the shorthand to define *different* corners. 
 
-USAGE: .rounded(4px); 
+USAGE: .border-radius(4px); 
 
 */
-.rounded(@radius: 4px) {
+.border-radius(@radius: 4px) {
   -webkit-border-radius: @radius;
      -moz-border-radius: @radius;
           border-radius: @radius;
 }
 
-/* 
-Instead of having a seperate mixin for the different
-borders, we're using the mixin from 320 & Up to make
-things easier to use.
-
-USAGE: .border-radius(4px,4px,0,0);
-
-*/
-.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
-	-webkit-border-top-right-radius:    @topright;
-	-webkit-border-bottom-right-radius: @bottomright;
-	-webkit-border-bottom-left-radius:  @bottomleft;
-	-webkit-border-top-left-radius:     @topleft;
-	-moz-border-radius-topright:        @topright;
-	-moz-border-radius-bottomright:     @bottomright;
-	-moz-border-radius-bottomleft:      @bottomleft;
-	-moz-border-radius-topleft:         @topleft;
-	border-top-right-radius:            @topright;
-	border-bottom-right-radius:         @bottomright;
-	border-bottom-left-radius:          @bottomleft;
-	border-top-left-radius:             @topleft;
-	-webkit-background-clip:            padding-box;
-	-moz-background-clip:               padding;  
-	background-clip:                    padding-box; 
-}
 
 /*********************
 TRANISTION
@@ -204,20 +193,6 @@ really slow down your CSS. Don't overdo it.
 	background-image: linear-gradient(to bottom, @from, @to);
 }
 
-/*********************
-BOX SIZING
-*********************/
-
-/* .boxSizing(border-box); */
-/* NOTE: value of "padding-box" is only supported in Gecko. So 
-probably best not to use it. I mean, were you going to anyway? */
-.boxSizing(@type: border-box) {
-	-webkit-box-sizing: @type;
-	-moz-box-sizing:    @type;
-	-ms-box-sizing:     @type;
-	box-sizing:         @type;
-}
-
 /*********************
 BOX SHADOW
 *********************/
@@ -248,13 +223,13 @@ BUTTONS
 	margin-bottom: 20px;
 	line-height: 21px;
 	.transition();
-	.rounded(4px);
+	.border-radius(4px);
 	.css-gradient(@bones-pink,darken(@bones-pink, 5%));
 
 	&:hover, &:focus {
 		color: @white;
-	  	border: 1px solid darken(@bones-pink, 13%);
-	  	border-top-color: darken(@bones-pink, 20%);
+	  border: 1px solid darken(@bones-pink, 13%);
+	  border-top-color: darken(@bones-pink, 20%);
 	 	border-left-color: darken(@bones-pink, 20%);
 		.css-gradient(darken(@bones-pink, 5%),darken(@bones-pink, 10%));
 	}