diff --git a/HISTORY.md b/HISTORY.md
index a373b45ad..a72148e8e 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -4,8 +4,11 @@ Pure Change History
NEXT
----
+ * Added horizontal button groups: They can be created by wrapping a collection of
+ `.pure-button` elements within a `.pure-button-group` element. ([#126][])
+[#126](https://github.com/yui/pure/issues/126)
0.2.1 (2013-07-17)
------------------
diff --git a/src/buttons/css/buttons-core.css b/src/buttons/css/buttons-core.css
index 940e2e8ed..66416c08a 100644
--- a/src/buttons/css/buttons-core.css
+++ b/src/buttons/css/buttons-core.css
@@ -20,3 +20,23 @@
padding: 0;
border: 0;
}
+
+/* Inherit .pure-g styles */
+.pure-button-group {
+ letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
+ *letter-spacing: normal; /* reset IE < 8 */
+ *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
+ text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
+}
+
+.opera-only :-o-prefocus,
+.pure-button-group {
+ word-spacing: -0.43em;
+}
+
+.pure-button-group .pure-button {
+ letter-spacing: normal;
+ word-spacing: normal;
+ vertical-align: top;
+ text-rendering: auto;
+}
diff --git a/src/buttons/css/buttons.css b/src/buttons/css/buttons.css
index a7355e844..ac70754c8 100644
--- a/src/buttons/css/buttons.css
+++ b/src/buttons/css/buttons.css
@@ -38,7 +38,8 @@
}
.pure-button-active,
.pure-button:active {
- box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) inset;
+ box-shadow: 0 0 10px 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;
+ *font-weight: bold; /* since box-shadow wont show in IE < 8, make the font bold instead to denote active. */
}
.pure-button[disabled],
@@ -74,3 +75,22 @@ a.pure-button-selected {
background-color: rgb(0, 120, 231);
color: #fff;
}
+
+/* Button Groups */
+.pure-button-group .pure-button {
+ margin: 0;
+ border-radius: 0;
+ border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+
+}
+
+.pure-button-group .pure-button:first-child {
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+.pure-button-group .pure-button:last-child {
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+ border-right: none;
+}
diff --git a/src/buttons/tests/manual/button.html b/src/buttons/tests/manual/button.html
index c9766f6fa..aa8938845 100644
--- a/src/buttons/tests/manual/button.html
+++ b/src/buttons/tests/manual/button.html
@@ -108,5 +108,54 @@
Primary Form Buttons
+
+
Button Groups
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+