Refactored only-child .button-group rules

wet-boew · Feb 14, 2013 · 9bfa57c · 9bfa57c
1 parent 0973127
commit 9bfa57c
Showing 1 changed file with 47 additions and 11 deletions.
diff --git a/src/grids/sass/includes/_button.scss b/src/grids/sass/includes/_button.scss
@@ -111,9 +111,15 @@
 				z-index: 2;
 			}
 		}
-		> .button {
-			&:first-child { @include border-left-radius(4px); }
-			&:last-child { @include border-right-radius(4px); }
+		> {
+			.button {
+				&:first-child {
+					@include border-left-radius(4px);
+				}
+				&:last-child {
+					@include border-right-radius(4px);
+				}
+			}
 		}
 		li {
 			list-style: none;
@@ -131,15 +137,32 @@
 		}
 	}
 
+	%button-only-child {
+		@include border-radius(4px);
+		margin-right: 4px;
+	}
+
 	ul {
 		&.button-group {
 			margin: $margin-medium;
+			li {
+				&:nth-child(1):nth-last-child(1) {
+					.button {
+						@extend %button-only-child;
+					}
+				}
+			}
 		}
 	}
 
 	p {
 		&.button-group {
 			margin-top: 0;
+			.button {
+				&:nth-child(1):nth-last-child(1) {
+					@extend %button-only-child;
+				}
+			}
 		}
 	}
 
@@ -152,11 +175,6 @@
 		}
 	}
 
-	p.button-group .button:nth-child(1):nth-last-child(1), ul.button-group li:nth-child(1):nth-last-child(1) .button {
-		@include border-radius(4px);
-		margin-right: 4px;
-	}
-
 	.button-toolbar {
 		margin-bottom: $spacing-medium;
 		margin-top: $spacing-medium;
@@ -204,16 +222,34 @@
 			}
 		}
 
+		%button-only-child-rtl {
+			margin-right: auto;
+			margin-left: 4px;
+		}
+
 		ul {
 			&.button-group {
 				margin: 0 10px 10px;
+				li {
+					&:nth-child(1):nth-last-child(1) {
+						.button {
+							@extend %button-only-child-rtl;
+						}
+					}
+				}
 			}
 		}
 
-		p.button-group .button:nth-child(1):nth-last-child(1), ul.button-group li:nth-child(1):nth-last-child(1) .button{
-			margin-right: auto;
-			margin-left: 4px;
+		p {
+			&.button-group {
+				.button {
+					&:nth-child(1):nth-last-child(1) {
+						@extend %button-only-child-rtl;
+					}
+				}
+			}
 		}
+
 		[class*="span-"] {
 			 ul {
 				 &.button-group, &.menu-horizontal {