From 566989c3de27e3dba0b5b53c227820c5f893f862 Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Thu, 5 Oct 2017 14:46:54 -0700 Subject: [PATCH] adds use case for medium down and adds a visual test --- scss/components/_button-group.scss | 11 +++++++ test/visual/button/button-group.html | 45 ++++++++++++++++++++++++++++ 2 files changed, 56 insertions(+) create mode 100644 test/visual/button/button-group.html diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss index 97150e33b..18298d76d 100644 --- a/scss/components/_button-group.scss +++ b/scss/components/_button-group.scss @@ -255,5 +255,16 @@ $buttongroup-radius-on-each: true !default; } } } + + &.stacked-for-medium.expanded { // sass-lint:disable-line force-element-nesting + @include breakpoint(medium down) { + display: block; + + #{$buttongroup-child-selector} { + display: block; + margin-#{$global-right}: 0; + } + } + } } } diff --git a/test/visual/button/button-group.html b/test/visual/button/button-group.html new file mode 100644 index 000000000..5b02a3586 --- /dev/null +++ b/test/visual/button/button-group.html @@ -0,0 +1,45 @@ + + + + + + + + Foundation for Sites Testing + + + +
+ + Buttons should be stacked full-width here +
+ One + Two + Three +
+ + Buttons should be auto width here and stack for small +
+ One + Two + Three +
+ + Buttons should be expanded here and stack for medium and small +
+ One + Two + Three + Four + Five +
+ +
+ + + + + + -- 2.47.2