]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
projects / thirdparty / foundation / foundation-sites.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 9658311)
fixes flebox button group bug and adds tests
authorRafiBomb <rafi@zurb.com>
Thu, 2 Feb 2017 23:08:00 +0000 (15:08 -0800)
committerRafiBomb <rafi@zurb.com>
Thu, 2 Feb 2017 23:08:00 +0000 (15:08 -0800)
scss/components/_button-group.scss patch | blob | blame | history
test/visual/flex-grid/button-group.html [new file with mode: 0644] patch | blob

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
index c1404b5d5124a68edde35c9b111d1214c911daa7..0ebcedeb5b6cae89dc4adce7facbc4782737c0be 100644 (file)
--- a/scss/components/_button-group.scss
+++ b/scss/components/_button-group.scss
@@ -36,8 +36,13 @@ $buttongroup-radius-on-each: true !default;
 
   @if $global-flexbox {
     display: flex;
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
     align-items: stretch;
+    flex-grow: 1;
+    &::before,
+    &::after {
+      display: none;
+    }
   }
   @else {
     font-size: 0;
diff --git a/test/visual/flex-grid/button-group.html b/test/visual/flex-grid/button-group.html
new file mode 100644 (file)
index 0000000..f32d40f
--- /dev/null
+++ b/test/visual/flex-grid/button-group.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
+<html class="no-js" lang="en" dir="ltr">
+
+  <head>
+    <link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="../assets/css/foundation-flex.css" rel="stylesheet" />
+
+    <style>
+      .button-group {
+        max-width: 1170px;
+        margin: 0 auto;
+      }
+
+    </style>
+  </head>
+
+  <body>
+    <h2>Flex Button Group</h2>
+
+    <hr>
+
+    <p>This button-group wrapped in the grid should be left aligned and auto button size</p>
+
+    <div class="row column">
+      <div class="button-group">
+        <a class="button">One</a>
+        <a class="button">Two</a>
+        <a class="button">Three</a>
+      </div>
+    </div>
+
+    <p>Should be same as:</p>
+
+
+    <div class="button-group">
+      <a class="button">One</a>
+      <a class="button">Two</a>
+      <a class="button">Three</a>
+    </div>
+
+    <hr>
+
+    <p class="text-right">This button-group wrapped in the grid should be right aligned and auto button size</p>
+
+    <div class="row column">
+      <div class="button-group align-right">
+        <a class="button">One</a>
+        <a class="button">Two</a>
+        <a class="button">Three</a>
+      </div>
+    </div>
+
+    <p class="text-right">Should be same as:</p>
+
+
+    <div class="button-group align-right">
+      <a class="button">One</a>
+      <a class="button">Two</a>
+      <a class="button">Three</a>
+    </div>
+
+    <hr>
+
+    <p>This button-group wrapped in the grid should be expanded</p>
+
+    <div class="row column">
+      <div class="button-group expanded">
+        <a class="button">One</a>
+        <a class="button">Two</a>
+        <a class="button">Three</a>
+      </div>
+    </div>
+
+    <p>Should be same as:</p>
+
+
+    <div class="button-group expanded">
+      <a class="button">One</a>
+      <a class="button">Two</a>
+      <a class="button">Three</a>
+    </div>
+
+    <hr>
+
+    <p>This button-group wrapped in the grid should be align-justify</p>
+
+    <div class="row column">
+      <div class="button-group align-justify">
+        <a class="button">One</a>
+        <a class="button">Two</a>
+        <a class="button">Three</a>
+      </div>
+    </div>
+
+    <p>Should be same as:</p>
+
+    <div class="button-group align-justify">
+      <a class="button">One</a>
+      <a class="button">Two</a>
+      <a class="button">Three</a>
+    </div>
+
+    <hr>
+
+    <p>This button-group wrapped in the grid should be align-spaced</p>
+
+    <div class="row column">
+      <div class="button-group align-spaced">
+        <a class="button">One</a>
+        <a class="button">Two</a>
+        <a class="button">Three</a>
+      </div>
+    </div>
+
+    <p>Should be same as:</p>
+
+    <div class="button-group align-spaced">
+      <a class="button">One</a>
+      <a class="button">Two</a>
+      <a class="button">Three</a>
+    </div>
+
+    <hr>
+
+    <p>This button-group wrapped in the grid should be align-center</p>
+
+    <div class="row column">
+      <div class="button-group align-center">
+        <a class="button">One</a>
+        <a class="button">Two</a>
+        <a class="button">Three</a>
+      </div>
+    </div>
+
+    <p>Should be same as:</p>
+
+    <div class="button-group align-center">
+      <a class="button">One</a>
+      <a class="button">Two</a>
+      <a class="button">Three</a>
+    </div>
+
+    <script src="../assets/js/vendor.js"></script>
+    <script src="../assets/js/foundation.js"></script>
+    <script>
+      $(document).foundation();
+    </script>
+  </body>
+</html>
Mirror of https://github.com/foundation/foundation-sites.git