MINOR: Added Member Profile Popup Styling

MINOR: Better button styles
MINOR: Now compass for button sprites

admin/scss/_forms.scss

@@ -11,19 +11,20 @@
  * ---------------------------------------------------- */	
 
 /* CMS action button sprite mix-in (used for all the buttons in the bottom row */
-@mixin actionButtonSprite($horizontalOffset, $verticalOffset) {
-    padding-left: 24px;
+@mixin actionButtonSprite($name) {
+  padding-left: 24px;
 	padding-right: 6px;
-	@include background($color-button-generic image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset);
-	@include background(image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset,
+
+	@include background($color-button-generic sprite($btn_icons, $name, 5px, 6px) no-repeat);
+	@include background(sprite($btn_icons, $name, 5px, 6px) no-repeat,
 		linear-gradient(color-stops(
 			lighten($color-button-generic, 10%),
 			darken($color-button-generic, 5%)
 		))
 	);
 	&.ui-state-hover {
-		@include background(lighten($color-button-generic, 10%) image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset);
-		@include background(image-url("btn_icons_sprite.png") no-repeat $horizontalOffset $verticalOffset,
+		@include background(lighten($color-button-generic, 10%) sprite($btn_icons, $name, 5px, 6px) no-repeat);
+		@include background(sprite($btn_icons, $name, 5px, 6px) no-repeat,
 			linear-gradient(color-stops(
 				lighten($color-button-generic, 20%),
 				$color-button-generic
@@ -32,38 +33,74 @@
 	}
 	&.ui-state-disabled {
 	    background-image: none;
-	    @include background(lighten($color-button-generic, 20%) image-url("btn_icons_sprite_disabled.png") no-repeat $horizontalOffset $verticalOffset);
-		@include background(image-url("btn_icons_sprite_disabled.png") no-repeat $horizontalOffset $verticalOffset,
+	    @include background(lighten($color-button-generic, 20%) sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat);
+		@include background(sprite($btn_icons, $name+_disabled, 5px, 6px) no-repeat,
 			linear-gradient(color-stops(
 				lighten($color-button-generic, 20%),
 				$color-button-generic
 			))
 		);
 	}
 }
-
+
+@mixin actionButtonSpriteConstructive($name) {
+  background-image: none;
+	padding-left: 25px;
+	padding-right: 7px;
+	font-weight: bold;
+	margin-left: $grid-horizontal;
+	color: $color-text-light;
+	border-color: $color-button-constructive-border;
+	border-bottom-color: darken($color-button-constructive-border, 10%);			
+	@include background($color-button-constructive sprite($btn_icons, $name, 6, 6) no-repeat);
+	@include background(sprite($btn_icons, $name
+	, 6, 6) no-repeat,
+		linear-gradient(color-stops(
+			lighten($color-button-constructive, 10%),
+			darken($color-button-constructive, 5%)
+		))
+	);
+
+	@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
+
+	&.ui-state-hover {
+		border-color: darken($color-button-constructive-border, 10%);
+		@include background(lighten($color-button-constructive, 10%) sprite($btn_icons, $name, 6, 6) no-repeat);
+		@include background(sprite($btn_icons, $name, 6, 6) no-repeat,
+			linear-gradient(color-stops(
+				lighten($color-button-constructive, 15%),
+				$color-button-constructive
+			))
+		);
+	}
+	&:active, &:focus {
+		padding: $grid-vertical 8px $grid_vertical 26px;
+		border: none;
+		@include background(darken($color-button-constructive, 2%) sprite($btn_icons, $name, 7, 7) no-repeat);
+		@include box-shadow(inset 0 1px 3px rgb(23, 24, 26), 0 1px 0 rgba(255, 255, 255, .6));
+	}
+}
+
 form.nostyle {
 	@include clear-form-field-styles();
 }
 
 .field {
 	display: block;
 	padding: 10px 0;
-	border-bottom-width: 2px;
-	border-bottom: 2px groove lighten($color-shadow-light, 95%);
-	-webkit-border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
-	border-image: url(../images/textures/bg_fieldset_elements_border.png) 2 stretch stretch;
+	border-bottom: 1px solid $color-shadow-light;
+    @include box-shadow(0 1px 0 lighten($color-shadow-light, 95%));
+
 	//TODO: use single border line with shadow instead:: http://daverupert.com/2011/06/two-tone-borders-with-css3/
-	//@include border-image(url(../images/textures/bg_fieldset_elements_border.png), 2, stretch); //not yet supported
 	//overflow: hidden;
 
 
 	// bottom padding accounts for the border and we have a negative
 	// margin with a postive padding to ensure the bottom border extends
 	// over the edges
-	padding: 0 $grid-horizontal $grid-vertical - 1 $grid-horizontal;
-	margin: 0 $grid-horizontal * -1 $grid-vertical $grid-horizontal * -1;
-	border-bottom: 1px solid $color-shadow-light;
+	padding: 0 0 $grid-vertical - 1 0;
+	margin: 0 0 $grid-vertical 0;
+
 
 	// using the legacy version as some of the more complex form fields
 	// need to use relative positioning and overflow hidden will not expand
@@ -84,12 +121,13 @@ form.nostyle {
 			width: $grid-horizontal * 21;
 			padding: $grid-vertical $grid-horizontal $grid-vertical 0;
 			line-height: $grid-vertical * 2;
-
+			font-weight: bold;
+			@include text-shadow(1px 1px 0 $color-text-shadow);
 			span {
 				display: block;
 				font-size: $font-base-size - 1;
 				color: lighten($color-text, 25%);
-			
+
 				@include hide-text-overflow();
 			}
 		}
@@ -126,14 +164,15 @@ form.nostyle {
 		line-height: $grid-vertical * 2;
 		margin: 0;
 		outline: none;
-
+		@include transition(0.2s box-shadow ease-in);
+		@include transition(0.2s border ease-in);
 		@include border-radius(4px);
 		@include background-image(linear-gradient(#efefef, #fff 10%, #fff 90%, #efefef));
 
 		&:focus {
-			border: 1px solid lighten($color-medium-separator, 20%);
-
-			@include box-shadow(0 0 5px rgba(0,0,0,0.2));
+			border: 1px solid lighten($color-medium-separator, 10%);
+			border-top-color: $color-medium-separator;
+			@include box-shadow(0 1px 3px rgba(0,0,0,0.2) inset);
 		}
 	}
 
@@ -240,7 +279,8 @@ form.nostyle {
 	text-decoration: none;
 }
 
-.cms {
+.cms, body.ArrayData {
+
 	input.loading,
 	input.ui-state-default.loading, .ui-widget-content input.ui-state-default.loading, 
 	.ui-widget-header input.ui-state-default.loading {
@@ -264,11 +304,11 @@ form.nostyle {
 		color: lighten($color-text-dark, 10%);
 		background-color: $color-button-generic;
 		border: 1px solid $color-button-generic-border;
+		border-bottom: 1px solid darken($color-button-generic-border, 10%);
 		@include text-shadow(lighten($color-button-generic, 20%) 0 1px 1px);
 
-		@include box-shadow(lighten($color-base, 10%) 0 1px 2px);
-		@include background($color-button-generic image-url("btn_icons_sprite.png") no-repeat 999px 999px);
-		@include background(image-url("btn_icons_sprite.png") no-repeat 999px 999px,
+		@include background($color-button-generic);
+		@include background(
 			linear-gradient(color-stops(
 				lighten($color-button-generic, 10%),
 				darken($color-button-generic, 5%)
@@ -277,10 +317,8 @@ form.nostyle {
 		&.ui-state-hover {
 			border: 1px solid darken($color-button-generic-border, 10%);
 			@include text-shadow(lighten($color-button-generic, 30%) 0 1px 1px);
-
-			@include box-shadow($color-base 0 1px 2px);
-			@include background(lighten($color-button-generic, 10%) image-url("btn_icons_sprite.png") no-repeat 999px 999px);
-			@include background(image-url("btn_icons_sprite.png") no-repeat 999px 999px,
+			@include background(lighten($color-button-generic, 10%));
+			@include background(
 				linear-gradient(color-stops(
 					lighten($color-button-generic, 20%),
 					darken($color-button-generic, 5%)
@@ -289,74 +327,49 @@ form.nostyle {
 		}
 		&:focus,
 		&:active {
-			border: 1px solid darken($color-button-generic-border, 5%);
-
-			@include box-shadow($color-base 0 1px 2px);
-			@include background(lighten($color-button-generic, 10%) image-url("btn_icons_sprite.png") no-repeat 999px 999px);
-			@include background(image-url("btn_icons_sprite.png") no-repeat 999px 999px,
+			border: 1px solid lighten($color-button-generic, 40%);
+			@include box-shadow(0 3px 3px darken($color-button-generic, 40%) inset);
+			@include background(darken($color-button-generic, 30%));
+			@include background(
 				linear-gradient(color-stops(
 					$color-button-generic,
-					lighten($color-button-generic, 20%)
+					darken($color-button-generic, 30%)
 				))
 			);			
 		}
 
 		/* constructive */
 		&.ss-ui-action-constructive {
-		    background-image: none;
-			padding-left: 24px;
-			padding-right: 6px;
-			font-weight: bold;
-			margin-left: $grid-horizontal;
-			color: $color-text-light;
-			border-color: $color-button-constructive-border;
-			@include background($color-button-constructive image-url("btn_icons_sprite.png") no-repeat 5px 5px);
-			@include background(image-url("btn_icons_sprite.png") no-repeat 5px 5px,
-				linear-gradient(color-stops(
-					lighten($color-button-constructive, 10%),
-					darken($color-button-constructive, 5%)
-				))
-			);
-
-			@include text-shadow(darken($color-button-constructive, 10%) 0 1px 1px);
-			@include box-shadow(darken($color-base, 20%) 1px 1px 2px);
+			@include actionButtonSpriteConstructive('accept');
+		}
 
-			&.ui-state-hover {
-				border-color: darken($color-button-constructive-border, 10%);
-				@include background(lighten($color-button-constructive, 10%) image-url("btn_icons_sprite.png") no-repeat 5px 5px);
-				@include background(image-url("btn_icons_sprite.png") no-repeat 5px 5px,
-					linear-gradient(color-stops(
-						lighten($color-button-constructive, 15%),
-						$color-button-constructive
-					))
-				);
-			}
+		&.cms-page-add-button {
+			@include actionButtonSpriteConstructive('add');
 		}
-
 		/* destructive */
 		&.ss-ui-action-destructive {
 			color: $color-button-destructive;
 			background-color: $color-button-generic;
 
 			&.delete {
-				@include actionButtonSprite(6px, -26px);
+				@include actionButtonSprite('decline');
 			}
 
 			&.unpublish {
-			    @include actionButtonSprite(6px, -58px);
+			    @include actionButtonSprite('unpublish');
 			}
 		}
 
 		/* generic action buttons */
 		&.save-draft {
-		    @include actionButtonSprite(6px, -90px);
+		    @include actionButtonSprite('addpage');
 		}
 
 		&.cms-preview-toggle-link {
 		    padding-left: 24px !important;
 			margin-left: 4px !important;
 			text-decoration: none;
-		    @include actionButtonSprite(6px, -122px);
+			@include actionButtonSprite('preview');
 		}
 
 		&.ss-ui-button-small {
@@ -481,4 +494,4 @@ form.nostyle {
 
 .action-hidden {
 	display:  none;
-}
+}

admin/scss/_menu.scss

@@ -288,4 +288,4 @@
 			display: none;
 		}
 	}
-}
+}

admin/scss/_sprites.scss

@@ -5,9 +5,10 @@
  */
 @import "compass/utilities/sprites/base";
 
-$icon24: sprite-map("icons/24x24/*.png");
-$icon16: sprite-map("icons/16x16/*.png");
+$icon24: sprite-map("menu_icons/24x24/*.png");
+$icon16: sprite-map("menu_icons/16x16/*.png");
 
+$btn_icons: sprite-map("btn_icons/*.png", $spacing: 10px);
 
 @mixin icons($sprite) {
 	background: $sprite;
@@ -38,7 +39,6 @@ $icon16: sprite-map("icons/16x16/*.png");
 	}
 }
 
-
 .icon {
 	text-indent: -9999px;
 	border: none;
@@ -57,4 +57,4 @@ $icon16: sprite-map("icons/16x16/*.png");
 
 		@include icons($icon16);
 	}
-}
+}