diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css
index c17f442495..b67891042c 100644
--- a/dist/framework-with-theme.css
+++ b/dist/framework-with-theme.css
@@ -34,6 +34,9 @@ ul {
-webkit-transform: translateZ(0px);
transform: translateZ(0px); }
+.content-padded {
+ padding: 10px; }
+
.bar {
position: fixed;
right: 0;
@@ -100,6 +103,52 @@ ul {
cursor: pointer;
margin: 0; }
+.button-group {
+ position: relative;
+ display: inline-block;
+ vertical-align: middle; }
+ .button-group > .button {
+ position: relative;
+ float: left; }
+ .button-group > .button:hover, .button-group > .button:focus, .button-group > .button:active, .button-group > .button.active {
+ z-index: 2; }
+ .button-group > .button:focus {
+ outline: none; }
+
+.button-group .button + .button,
+.button-group .button + .button-group,
+.button-group .button-group + .button,
+.button-group .button-group + .button-group {
+ margin-left: -1px; }
+
+.button-group > .button:not(:first-child):not(:last-child) {
+ border-radius: 0; }
+
+.button-group > .button:first-child {
+ margin-left: 0; }
+ .button-group > .button:first-child:not(:last-child) {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0; }
+
+.button-group > .button:last-child:not(:first-child) {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0; }
+
+.button-group > .button-group {
+ float: left; }
+
+.button-group > .button-group:not(:first-child):not(:last-child) > .button {
+ border-radius: 0; }
+
+.button-group > .button-group:first-child > .button:last-child,
+.button-group > .button-group:first-child > .dropdown-toggle {
+ border-bottom-right-radius: 0;
+ border-top-right-radius: 0; }
+
+.button-group > .button-group:last-child > .button:first-child {
+ border-bottom-left-radius: 0;
+ border-top-left-radius: 0; }
+
.list {
margin-bottom: 20px;
padding-left: 0; }
diff --git a/example/buttons.html b/example/buttons.html
index 63a8ccc4bb..675fbcda2e 100644
--- a/example/buttons.html
+++ b/example/buttons.html
@@ -33,7 +33,7 @@
+
Default
Secondary
@@ -44,6 +44,14 @@
Danger
Dark
+
+
+
diff --git a/scss/framework/structure/_base.scss b/scss/framework/structure/_base.scss
index 5f71244745..10149b70ee 100644
--- a/scss/framework/structure/_base.scss
+++ b/scss/framework/structure/_base.scss
@@ -39,3 +39,7 @@ ul { margin: 0; padding: 0; }
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}
+
+.content-padded {
+ padding: $contentPadding;
+}
diff --git a/scss/framework/structure/_button-group.scss b/scss/framework/structure/_button-group.scss
index e69de29bb2..d2e72c1cff 100644
--- a/scss/framework/structure/_button-group.scss
+++ b/scss/framework/structure/_button-group.scss
@@ -0,0 +1,64 @@
+.button-group {
+ position: relative;
+ display: inline-block;
+ vertical-align: middle; // match .button alignment given font-size hack above
+
+ > .button {
+ position: relative;
+ float: left;
+ // Bring the "active" button to the front
+ &:hover,
+ &:focus,
+ &:active,
+ &.active {
+ z-index: 2;
+ }
+ &:focus {
+ // Remove focus outline when dropdown JS adds it after closing the menu
+ outline: none;
+ }
+ }
+}
+
+
+.button-group {
+ .button + .button,
+ .button + .button-group,
+ .button-group + .button,
+ .button-group + .button-group {
+ margin-left: -1px;
+ }
+}
+
+.button-group > .button:not(:first-child):not(:last-child) {
+ border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .button-group and we need :first-child and :last-child to both match
+.button-group > .button:first-child {
+ margin-left: 0;
+ &:not(:last-child) {
+ @include border-right-radius(0);
+ }
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.button-group > .button:last-child:not(:first-child) {
+ @include border-left-radius(0);
+}
+
+// Custom edits for including button-groups within button-groups (useful for including dropdown buttons within a button-group)
+.button-group > .button-group {
+ float: left;
+}
+.button-group > .button-group:not(:first-child):not(:last-child) > .button {
+ border-radius: 0;
+}
+.button-group > .button-group:first-child {
+ > .button:last-child,
+ > .dropdown-toggle {
+ @include border-right-radius(0);
+ }
+}
+.button-group > .button-group:last-child > .button:first-child {
+ @include border-left-radius(0);
+}
diff --git a/scss/framework/structure/_mixins.scss b/scss/framework/structure/_mixins.scss
index 2e5ebf5d50..8f947a7be2 100644
--- a/scss/framework/structure/_mixins.scss
+++ b/scss/framework/structure/_mixins.scss
@@ -18,3 +18,21 @@
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
}
}
+
+// Single side border-radius
+@mixin border-top-radius($radius) {
+ border-top-right-radius: $radius;
+ border-top-left-radius: $radius;
+}
+@mixin border-right-radius($radius) {
+ border-bottom-right-radius: $radius;
+ border-top-right-radius: $radius;
+}
+@mixin border-bottom-radius($radius) {
+ border-bottom-right-radius: $radius;
+ border-bottom-left-radius: $radius;
+}
+@mixin border-left-radius($radius) {
+ border-bottom-left-radius: $radius;
+ border-top-left-radius: $radius;
+}
diff --git a/scss/framework/structure/_variables.scss b/scss/framework/structure/_variables.scss
index d628dc9fff..5985de2265 100644
--- a/scss/framework/structure/_variables.scss
+++ b/scss/framework/structure/_variables.scss
@@ -10,6 +10,10 @@ $fontSizeLarge: ceil($baseFontSize * 1.25);
$baseLineHeight: 1.428571429; // 20/14
$baseLineHeightComputed: floor($baseFontSize * $baseLineHeight); // ~20px
+// Content stuff
+$contentPadding: 10px;
+
+// Bar stuff
$barHeight: 50px !default;
$barLineHeight: 50px !default;
$barTitleFontSize: $fontSizeLarge;
@@ -17,5 +21,7 @@ $barTitleLineHeightComputed: $baseLineHeightComputed;
$barPaddingVertical: (($barHeight - $baseLineHeightComputed) / 2);
+
// Lists
$listItemBorder: 1px solid #ddd;
+