From: RafiBomb Date: Thu, 5 Oct 2017 21:46:54 +0000 (-0700) Subject: adds use case for medium down and adds a visual test X-Git-Tag: v6.6.0~3^2~339^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10703%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git adds use case for medium down and adds a visual test --- 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 +
+ +
+ + + + + +