button-group update

update button-groups to work with 'div > button' layout in addition to 'ul > li > button'

added $button-round variable and set to 100%

diff --git a/scss/foundation/components/_button-groups.scss b/scss/foundation/components/_button-groups.scss
index d8d66fb3c2c33e7f69f4f7edc1d0d2ef20f71f68..8e33af9bd2809fb1d039553872653397083cc91a 100644 (file)
--- a/scss/foundation/components/_button-groups.scss
+++ b/scss/foundation/components/_button-groups.scss
@@ -34,12 +34,12 @@ $button-bar-margin-right: emCalc(10px) !default;
 
   // We use these to control left and right radius on first/last buttons in the group.
   @if $radius == true {
-    &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
-    &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $button-radius); }
+    &:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
+    &:last-child, &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $button-radius); }
   }
   @else if $radius {
-    &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
-    &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $radius); }
+    &:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
+    &:last-child, &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $radius); }
   }
 
   // We use this to make the buttons even width across their container
@@ -56,10 +56,10 @@ $button-bar-margin-right: emCalc(10px) !default;
   /* Button Groups */
   .button-group { @include button-group-container;
 
-    li { @include button-group-style(); }
+    &> * { @include button-group-style(); }
 
-    &.radius li { @include button-group-style($radius:$button-radius, $float:null); }
-    &.round li { @include button-group-style($radius:1000px, $float:null); }
+    &.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
+    &.round > * { @include button-group-style($radius:$button-round, $float:null); }
 
     @for $i from 2 through 8 {
       &.even#{-$i} li { @include button-group-style($even:$i, $float:null); }

diff --git a/scss/foundation/components/_buttons.scss b/scss/foundation/components/_buttons.scss
index d76780f972e0891273e8a6eec5d156b16850ec59..ca9d8d464249c408419785bc1654f28abcf682a3 100644 (file)
--- a/scss/foundation/components/_buttons.scss
+++ b/scss/foundation/components/_buttons.scss
@@ -33,6 +33,7 @@ $button-border-color:     darken($primary-color, $button-function-factor) !defau
 
 // We use this to set the default radius used throughout the core.
 $button-radius:           $global-radius !default;
+$button-round:            100% !default;
 
 // We use this to set default opacity for disabled buttons.
 $button-disabled-opacity: 0.6 !default;
@@ -157,7 +158,7 @@ $button-disabled-opacity: 0.6 !default;
 @if $include-html-button-classes {
 
   // Default styles applied outside of media query
-  .button {
+  button, .button {
     @include button-base;
     @include button-size;
     @include button-style;
@@ -202,7 +203,7 @@ $button-disabled-opacity: 0.6 !default;
       &.tiny   { @include button-size($padding:false, $full-width:false); }
 
       &.radius { @include button-style($bg:false, $radius:true); }
-      &.round  { @include button-style($bg:false, $radius:1000px); }
+      &.round  { @include button-style($bg:false, $radius:$button-round); }
     }
 
   }

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index 0d66b5b6c11e156d9d26a8eef1ddf89bf0adb6f4..5cbb7f00455a4e01fa7819e1943f99cb1a468e9d 100644 (file)
--- a/scss/foundation/components/_forms.scss
+++ b/scss/foundation/components/_forms.scss
@@ -288,10 +288,10 @@ $input-error-message-font-color-alt: #333 !default;
     }
     &.round {
       &>*:first-child,  &>*:first-child * {
-        @include side-radius(left, 1000px);
+        @include side-radius(left, $button-round);
       }
       &>*:last-child, &>*:last-child * {
-        @include side-radius(right, 1000px);
+        @include side-radius(right, $button-round);
       }
     }
   }