<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <p>Use this template to create a new test page.</p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <p>Use this template to create a new test page.</p>
+ </div>
+ </div>
</div>
+
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<link href="../assets/css/foundation-prototype.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
-
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Responsive Accordion Tabs</h1>
- <h4>Codebase Tabs</h4>
- <p class="callout small">I have the HTML Markup from Tabs and should be <code>tabs on small</code> <code>accordion on medium</code> <code>tabs on large</code> </p>
- <ul class="" id="example-tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs">
- <div class="tabs-panel is-active" id="panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- </div>
- </div>
- <br>
- <p class="callout small">I have the HTML Markup from Tabs and should be <code>accordion on small</code> <code>tabs on medium</code> <code>accordion on large</code> </p>
- <ul class="" id="example-tabs2" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="tabs-title is-active"><a href="#2-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#2-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs2">
- <div class="tabs-panel is-active" id="2-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="2-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- </div>
- </div>
-
- <h4>Codebase Accordion</h4>
- <p class="callout small">I have the HTML Markup from Accordion and should be <code>accordion on small</code> <code>tabs on medium</code> <code>accordion on large</code> </p>
- <ul class="" id="example-accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
- <br>
- <p class="callout small">I have the HTML Markup from Accordion and should be <code>tabs on small</code> <code>accordion on medium</code> <code>tabs on large</code> </p>
- <ul class="" id="example-accordion2" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem optio nihil natus incidunt. Esse, in nesciunt? Quo odit ipsam facilis, consequatur nesciunt aliquid ipsa accusantium repellendus totam doloremque officiis quia ad qui quibusdam neque deserunt saepe. Inventore amet sed cupiditate ipsam animi, quod est officiis ratione expedita vitae, facilis tenetur ex quaerat fugit mollitia vero, esse labore eos. Ullam minima nemo, dicta neque numquam cumque iusto, ratione quia blanditiis accusantium id adipisci obcaecati eum aliquid consequatur eveniet. Culpa nihil, dolore quasi eveniet est ipsa accusamus asperiores voluptates autem? Mollitia consequuntur iste maxime, est rerum, quod quam voluptatum id natus commodi? Maxime vel debitis optio blanditiis dolorem, eum minus reprehenderit. Mollitia natus similique amet adipisci quae, voluptatem doloribus asperiores cum, accusantium hic eveniet quis temporibus fugiat excepturi nemo harum non voluptatibus aliquid voluptatum enim provident? Nam deleniti impedit animi blanditiis itaque amet mollitia, aperiam alias, magni ex sit. Harum quibusdam cum fuga vitae nobis, saepe, cupiditate inventore reiciendis, aut similique voluptatibus consequatur soluta sunt repellat. Animi deserunt, reiciendis, sed labore maiores nobis reprehenderit debitis! Sequi dignissimos nam sint dolorum deleniti magnam aliquam et, tempore alias repellat, possimus quos doloremque illum accusantium quisquam sunt, nulla obcaecati ea omnis. Eaque cumque cum error.
- </div>
- </li>
- </ul>
- <h4>Nested Elements Tabs Markup</h4>
- <ul class="" id="example-tabs3" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#3-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#3-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs3">
- <div class="tabs-panel is-active" id="3-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="3-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- <ul class="" id="example-tabs4" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#4-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#4-panel2">Tab 2</a></li>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Responsive Accordion Tabs</h1>
+ <h4>Codebase Tabs</h4>
+ <p class="callout small">I have the HTML Markup from Tabs and should be <code>tabs on small</code> <code>accordion on medium</code> <code>tabs on large</code> </p>
+ <ul class="" id="example-tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>
- <div class="tabs-content" data-tabs-content="example-tabs4">
- <div class="tabs-panel is-active" id="4-panel1">
+ <div class="tabs-content" data-tabs-content="example-tabs">
+ <div class="tabs-panel is-active" id="panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
- <div class="tabs-panel" id="4-panel2">
+ <div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
- </div>
- </div>
- <br>
- <ul class="" id="example-tabs5" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="tabs-title is-active"><a href="#5-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#5-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs5">
- <div class="tabs-panel is-active" id="5-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="5-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- <ul class="" id="example-tabs6" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="tabs-title is-active"><a href="#6-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#6-panel2">Tab 2</a></li>
+ <br>
+ <p class="callout small">I have the HTML Markup from Tabs and should be <code>accordion on small</code> <code>tabs on medium</code> <code>accordion on large</code> </p>
+ <ul class="" id="example-tabs2" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="tabs-title is-active"><a href="#2-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#2-panel2">Tab 2</a></li>
</ul>
- <div class="tabs-content" data-tabs-content="example-tabs6">
- <div class="tabs-panel is-active" id="6-panel1">
+ <div class="tabs-content" data-tabs-content="example-tabs2">
+ <div class="tabs-panel is-active" id="2-panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
- <div class="tabs-panel" id="6-panel2">
+ <div class="tabs-panel" id="2-panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
- </div>
- </div>
- <h4>Nested Elements Accordion Markup</h4>
- <ul class="" id="example-accordion3" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- <ul class="" id="example-accordion4" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
- <ul class="" id="example-accordion5" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- <ul class="" id="example-accordion6" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
- <h4>Nested Elements Mixed Markup</h4>
- <ul class="" id="example-tabs7" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#7-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#7-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs7">
- <div class="tabs-panel is-active" id="7-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="7-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- <ul class="" id="example-accordion7" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+
+ <h4>Codebase Accordion</h4>
+ <p class="callout small">I have the HTML Markup from Accordion and should be <code>accordion on small</code> <code>tabs on medium</code> <code>accordion on large</code> </p>
+ <ul class="" id="example-accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
</div>
</li>
</ul>
- </div>
- </div>
- <br>
- <ul class="" id="example-accordion8" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- <ul class="" id="example-tabs8" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#8-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#8-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs8">
- <div class="tabs-panel is-active" id="8-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="8-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- </div>
- </div>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
- <br>
- <ul class="" id="example-tabs9" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="tabs-title is-active"><a href="#9-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#9-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs9">
- <div class="tabs-panel is-active" id="9-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="9-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- <ul class="" id="example-accordion9" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <br>
+ <p class="callout small">I have the HTML Markup from Accordion and should be <code>tabs on small</code> <code>accordion on medium</code> <code>tabs on large</code> </p>
+ <ul class="" id="example-accordion2" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem optio nihil natus incidunt. Esse, in nesciunt? Quo odit ipsam facilis, consequatur nesciunt aliquid ipsa accusantium repellendus totam doloremque officiis quia ad qui quibusdam neque deserunt saepe. Inventore amet sed cupiditate ipsam animi, quod est officiis ratione expedita vitae, facilis tenetur ex quaerat fugit mollitia vero, esse labore eos. Ullam minima nemo, dicta neque numquam cumque iusto, ratione quia blanditiis accusantium id adipisci obcaecati eum aliquid consequatur eveniet. Culpa nihil, dolore quasi eveniet est ipsa accusamus asperiores voluptates autem? Mollitia consequuntur iste maxime, est rerum, quod quam voluptatum id natus commodi? Maxime vel debitis optio blanditiis dolorem, eum minus reprehenderit. Mollitia natus similique amet adipisci quae, voluptatem doloribus asperiores cum, accusantium hic eveniet quis temporibus fugiat excepturi nemo harum non voluptatibus aliquid voluptatum enim provident? Nam deleniti impedit animi blanditiis itaque amet mollitia, aperiam alias, magni ex sit. Harum quibusdam cum fuga vitae nobis, saepe, cupiditate inventore reiciendis, aut similique voluptatibus consequatur soluta sunt repellat. Animi deserunt, reiciendis, sed labore maiores nobis reprehenderit debitis! Sequi dignissimos nam sint dolorum deleniti magnam aliquam et, tempore alias repellat, possimus quos doloremque illum accusantium quisquam sunt, nulla obcaecati ea omnis. Eaque cumque cum error.
</div>
</li>
</ul>
- </div>
- </div>
- <br>
- <ul class="" id="example-accordion10" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
+ <h4>Nested Elements Tabs Markup</h4>
+ <ul class="" id="example-tabs3" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#3-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#3-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs3">
+ <div class="tabs-panel is-active" id="3-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- <ul class="" id="example-tabs10" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="tabs-title is-active"><a href="#10-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#10-panel2">Tab 2</a></li>
+ <div class="tabs-panel" id="3-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <ul class="" id="example-tabs4" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#4-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#4-panel2">Tab 2</a></li>
</ul>
- <div class="tabs-content" data-tabs-content="example-tabs10">
- <div class="tabs-panel is-active" id="10-panel1">
+ <div class="tabs-content" data-tabs-content="example-tabs4">
+ <div class="tabs-panel is-active" id="4-panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
- <div class="tabs-panel" id="10-panel2">
+ <div class="tabs-panel" id="4-panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
</div>
- </li>
- </ul>
- <h4>Extreme Nesting</h4>
- <ul class="" id="example-accordion11" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- <ul class="" id="example-tabs11" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#11-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#11-panel2">Tab 2</a></li>
+ </div>
+ <br>
+ <ul class="" id="example-tabs5" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="tabs-title is-active"><a href="#5-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#5-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs5">
+ <div class="tabs-panel is-active" id="5-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="5-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <ul class="" id="example-tabs6" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="tabs-title is-active"><a href="#6-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#6-panel2">Tab 2</a></li>
</ul>
- <div class="tabs-content" data-tabs-content="example-tabs11">
- <div class="tabs-panel is-active" id="11-panel1">
+ <div class="tabs-content" data-tabs-content="example-tabs6">
+ <div class="tabs-panel is-active" id="6-panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
- <div class="tabs-panel" id="11-panel2">
+ <div class="tabs-panel" id="6-panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- <ul class="" id="example-accordion14" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ </div>
+ </div>
+ </div>
+ </div>
+ <h4>Nested Elements Accordion Markup</h4>
+ <ul class="" id="example-accordion3" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-accordion4" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
+ <ul class="" id="example-accordion5" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-accordion6" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ I would start in the open state, due to using the `is-active` state class.
</div>
</li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
</ul>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
</div>
- </div>
- I would start in the open state, due to using the `is-active` state class.
+ </li>
+ </ul>
+ <h4>Nested Elements Mixed Markup</h4>
+ <ul class="" id="example-tabs7" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#7-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#7-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs7">
+ <div class="tabs-panel is-active" id="7-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- <ul class="" id="example-accordion12" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <div class="tabs-panel" id="7-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <ul class="" id="example-accordion7" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
- <ul class="" id="example-tabs12" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#12-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#12-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs12">
- <div class="tabs-panel is-active" id="12-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="12-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- </div>
- </div>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <br>
+ <ul class="" id="example-accordion8" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-tabs8" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#8-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#8-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs8">
+ <div class="tabs-panel is-active" id="8-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="8-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
+ </div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
+ <br>
+ <ul class="" id="example-tabs9" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="tabs-title is-active"><a href="#9-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#9-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs9">
+ <div class="tabs-panel is-active" id="9-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="9-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <ul class="" id="example-accordion9" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
</div>
</li>
<li class="accordion-item" data-accordion-item>
-
<a href="#" class="accordion-title">Accordion 2</a>
+ <a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
- <ul class="" id="example-accordion13" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
+ </div>
+ </div>
+ <br>
+ <ul class="" id="example-accordion10" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-tabs10" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="tabs-title is-active"><a href="#10-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#10-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs10">
+ <div class="tabs-panel is-active" id="10-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="10-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
+ </div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
+ <h4>Extreme Nesting</h4>
+ <ul class="" id="example-accordion11" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-tabs11" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#11-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#11-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs11">
+ <div class="tabs-panel is-active" id="11-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="11-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ <ul class="" id="example-accordion14" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
</div>
</li>
<li class="accordion-item" data-accordion-item>
-
<a href="#" class="accordion-title">Accordion 2</a>
+ <a href="#" class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
- <ul class="" id="example-tabs13" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
- <li class="tabs-title is-active"><a href="#13-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#13-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs13">
- <div class="tabs-panel is-active" id="13-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="tabs-panel" id="13-panel2">
- <ul class="" id="example-accordion15" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- </div>
- </div>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
</div>
</li>
</ul>
</div>
- </li>
+ </div>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-accordion12" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-tabs12" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#12-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#12-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs12">
+ <div class="tabs-panel is-active" id="12-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="12-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
+ </div>
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-accordion13" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ <ul class="" id="example-tabs13" data-responsive-accordion-tabs="tabs medium-accordion large-tabs">
+ <li class="tabs-title is-active"><a href="#13-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#13-panel2">Tab 2</a></li>
+ </ul>
+ <div class="tabs-content" data-tabs-content="example-tabs13">
+ <div class="tabs-panel is-active" id="13-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="13-panel2">
+ <ul class="" id="example-accordion15" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+ </div>
+ </li>
+ </ul>
+ <h4>Vertical example only with codebase tabs on first level</h4>
+ <div class="grid-x">
+ <div class="medium-3 cell">
+ <ul class="vertical" id="example-tabs14" data-responsive-accordion-tabs="accordion medium-tabs large-tabs">
+ <li class="tabs-title is-active"><a href="#14-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="tabs-title"><a href="#14-panel2">Tab 2</a></li>
</ul>
</div>
- </li>
- </ul>
- <h4>Vertical example only with codebase tabs on first level</h4>
- <div class="row collapse">
- <div class="medium-3 columns">
- <ul class="vertical" id="example-tabs14" data-responsive-accordion-tabs="accordion medium-tabs large-tabs">
- <li class="tabs-title is-active"><a href="#14-panel1" aria-selected="true">Tab 1</a></li>
- <li class="tabs-title"><a href="#14-panel2">Tab 2</a></li>
+ <div class="medium-9 cell">
+ <div class="tabs-content vertical" data-tabs-content="example-tabs14">
+ <div class="tabs-panel is-active" id="14-panel1">
+ <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
+ </div>
+ <div class="tabs-panel" id="14-panel2">
+ <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <h4>Different data-link-class and data-panel-class</h4>
+ <style type="text/css">
+ .test-link {
+
+ }
+ .test-panel {
+ display: none;
+ }
+ .test-panel.is-active {
+ display: block;
+ }
+ </style>
+ <ul class="" id="example-tabs15" data-responsive-accordion-tabs="tabs medium-accordion large-tabs" data-link-class="test-link" data-panel-class="test-panel">
+ <li class="test-link is-active"><a href="#15-panel1" aria-selected="true">Tab 1</a></li>
+ <li class="test-link"><a href="#15-panel2">Tab 2</a></li>
</ul>
- </div>
- <div class="medium-9 columns">
- <div class="tabs-content vertical" data-tabs-content="example-tabs14">
- <div class="tabs-panel is-active" id="14-panel1">
+ <div class="tabs-content" data-tabs-content="example-tabs15">
+ <div class="test-panel is-active" id="15-panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
- <div class="tabs-panel" id="14-panel2">
+ <div class="test-panel" id="15-panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
+ <br>
+ <ul class="" id="example-accordion16" data-responsive-accordion-tabs="accordion medium-tabs large-accordion" data-link-class="test-link" data-panel-class="test-panel">
+ <li class="accordion-item is-active" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 1</a>
+ <div class="accordion-content" data-tab-content>
+ I would start in the open state, due to using the `is-active` state class.
+ </div>
+ </li>
+ <li class="accordion-item" data-accordion-item>
+ <a href="#" class="accordion-title">Accordion 2</a>
+ <div class="accordion-content" data-tab-content>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
+ </div>
+ </li>
+ </ul>
</div>
</div>
- <h4>Different data-link-class and data-panel-class</h4>
- <style type="text/css">
- .test-link {
-
- }
- .test-panel {
- display: none;
- }
- .test-panel.is-active {
- display: block;
- }
- </style>
- <ul class="" id="example-tabs15" data-responsive-accordion-tabs="tabs medium-accordion large-tabs" data-link-class="test-link" data-panel-class="test-panel">
- <li class="test-link is-active"><a href="#15-panel1" aria-selected="true">Tab 1</a></li>
- <li class="test-link"><a href="#15-panel2">Tab 2</a></li>
- </ul>
- <div class="tabs-content" data-tabs-content="example-tabs15">
- <div class="test-panel is-active" id="15-panel1">
- <p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
- </div>
- <div class="test-panel" id="15-panel2">
- <p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
- </div>
- </div>
- <br>
- <ul class="" id="example-accordion16" data-responsive-accordion-tabs="accordion medium-tabs large-accordion" data-link-class="test-link" data-panel-class="test-panel">
- <li class="accordion-item is-active" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 1</a>
- <div class="accordion-content" data-tab-content>
- I would start in the open state, due to using the `is-active` state class.
- </div>
- </li>
- <li class="accordion-item" data-accordion-item>
- <a href="#" class="accordion-title">Accordion 2</a>
- <div class="accordion-content" data-tab-content>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus expedita animi, ipsum nostrum tempore deserunt quae dolores ratione modi repudiandae dolor doloremque, non necessitatibus accusamus dignissimos facere magni corporis quasi laboriosam. Eum accusamus odio possimus iste itaque quidem, sapiente repellat placeat. Obcaecati odio consequatur debitis asperiores veritatis, impedit nulla accusantium sint ab ducimus neque sit non illum, accusamus, quibusdam possimus vero a distinctio repellat, ad quas voluptates adipisci. Explicabo voluptatem dolorem laborum deserunt fugiat praesentium totam aperiam, similique iure voluptas. Maxime, sequi vero velit praesentium earum suscipit facere cum quasi tenetur voluptatibus eos magni ipsum assumenda quibusdam ut dolorem voluptate debitis molestias, aliquid obcaecati! Consequuntur nisi repudiandae et in veniam vel, quod dolor doloribus eveniet atque ipsa eos odio, dignissimos laboriosam eius quidem distinctio non sunt maiores id dolore a similique. Quis exercitationem consequatur error, deleniti soluta harum. Est consequuntur aut, iusto. Vitae quam, neque velit ab ullam ex nobis laudantium exercitationem porro culpa necessitatibus provident, nulla similique pariatur dolorem iste perspiciatis ratione quaerat fugit, reiciendis ut ad reprehenderit totam, veritatis natus. Ut alias possimus perspiciatis veritatis, ratione laboriosam. Placeat hic nobis, deleniti aperiam dolore qui illum iusto alias explicabo sunt aliquid autem pariatur error saepe ad perferendis tempore adipisci.
- </div>
- </li>
- </ul>
</div>
+
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
</head>
<body>
- <div class="row">
- <div class="large-12 columns">
+ <div class="grid-x grid-padding-x">
+ <div class="large-12 cell">
<h2>Responsive Menu - Accordion (with submenu toggle) to Dropdown:</h2>
</ul>
</div>
- </div>
</div>
+ </div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
</head>
<body>
- <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
- </div>
+ <div class="grid-x grid-margin-x">
+ <div class="cell">
+ <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
+ <button class="menu-icon" type="button" data-toggle></button>
+ <div class="title-bar-title">Menu</div>
+ </div>
- <div class="top-bar" id="main-menu">
- <div class="top-bar-left">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
- <li class="has-submenu">
- <a href="#">One</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li>
- <a href="#">Three</a>
+ <div class="top-bar" id="main-menu">
+ <div class="top-bar-left">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+ <li class="has-submenu">
+ <a href="#">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
+ <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
</ul>
</li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
- <li class="has-submenu">
- <a href="#">One</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li>
- <a href="#">Three</a>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+ <li class="has-submenu">
+ <a href="#">One</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
+ <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
</ul>
</li>
- </ul>
- </li>
- <li class="has-submenu opens-left">
- <a href="#">Broken?</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li>
- <a href="#">Three</a>
+ <li class="has-submenu opens-left">
+ <a href="#">Broken?</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
+ <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
</ul>
</li>
- </ul>
- </li>
- <li class="has-submenu">
- <a href="#">Two</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li>
- <a href="#">Three</a>
+ <li class="has-submenu">
+ <a href="#">Two</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
+ <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#">Three</a></li>
</ul>
- </li>
- <li><a href="#">Three</a></li>
- </ul>
+ </div>
+ </div>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <p>Hover on Broken</p>
+ <p>Dropdown should open towards left and not off screen.</p>
+ <ul>
+ <li>The dropdowns should open underneath the parent element.</li>
+ <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li>
+ <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
+ <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
+ <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
+ <li>Dropdown parent element arrows should point down.</li>
+ <br>
+ <li>On mobile, the arrows to access submenu should be at the right of the dropdown.</li>
+ </ul>
+ </div>
+
+ </div>
</div>
</div>
- <p>Hover on Broken</p>
- <p>Dropdown should open towards left and not off screen.</p>
-
- <ul>
- <li>The dropdowns should open underneath the parent element.</li>
- <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li>
- <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
- <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
- <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
- <li>Dropdown parent element arrows should point down.</li>
- <br>
- <li>On mobile, the arrows to access submenu should be at the right of the dropdown.</li>
- </ul>
-
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Responsive Menu: reInit</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Responsive Menu: reInit</h1>
- <ul id="menu" class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
- <li>
- <a href="#">Item 1</a>
- <ul class="vertical menu">
+ <ul id="menu" class="vertical menu" data-responsive-menu="drilldown medium-dropdown" style="width: 300px;">
<li>
- <a href="#">Item 1A</a>
+ <a href="#">Item 1</a>
<ul class="vertical menu">
- <li><a href="#">Item 1A</a></li>
+ <li>
+ <a href="#">Item 1A</a>
+ <ul class="vertical menu">
+ <li><a href="#">Item 1A</a></li>
+ <li><a href="#">Item 1B</a></li>
+ <li><a href="#">Item 1C</a></li>
+ <li><a href="#">Item 1D</a></li>
+ <li><a href="#">Item 1E</a></li>
+ </ul>
+ </li>
<li><a href="#">Item 1B</a></li>
- <li><a href="#">Item 1C</a></li>
- <li><a href="#">Item 1D</a></li>
- <li><a href="#">Item 1E</a></li>
</ul>
</li>
- <li><a href="#">Item 1B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="vertical menu">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 3</a>
- <ul class="vertical menu">
- <li><a href="#">Item 3A</a></li>
- <li><a href="#">Item 3B</a></li>
+ <li>
+ <a href="#">Item 2</a>
+ <ul class="vertical menu">
+ <li><a href="#">Item 2A</a></li>
+ <li><a href="#">Item 2B</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Item 3</a>
+ <ul class="vertical menu">
+ <li><a href="#">Item 3A</a></li>
+ <li><a href="#">Item 3B</a></li>
+ </ul>
+ </li>
</ul>
- </li>
- </ul>
- <p>This test is verifying that if you init a responsive menu twice, it still works (there was a bug around that). This is done in the setup, so if the menu is working at all, this is a pass.
- </p>
+ <p>This test is verifying that if you init a responsive menu twice, it still works (there was a bug around that). This is done in the setup, so if the menu is working at all, this is a pass.
+ </p>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
</head>
<body>
- <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
- </div>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
+ <button class="menu-icon" type="button" data-toggle></button>
+ <div class="title-bar-title">Menu</div>
+ </div>
- <div class="top-bar" id="main-menu">
- <div class="top-bar-left">
+
<div class="top-bar" id="main-menu">
+
<div class="top-bar-left">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li class="has-submenu">
- <a href="#">Three</a>
- <ul class="submenu menu vertical" data-submenu>
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li>
+ <li class="has-submenu">
<a href="#">Three</a>
- <ul class="submenu menu vertical align-left" data-submenu>
+ <ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
-
<ul class="submenu menu vertical align-left" data-submenu>
-
<li><a href="#">One</a></li>
-
<li><a href="#">Two</a></li>
- <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical align-left" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li>
<a href="#">Three</a>
<ul class="submenu menu vertical align-left" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
+ <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical align-left" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
</ul>
</li>
</ul>
- </li>
- </ul>
+ </ul>
+ </li>
</ul>
</li>
</ul>
- </li>
- </ul>
- </div>
- <div class="top-bar-right">
+ </div>
+
<div class="top-bar-right">
- </div>
- </div>
+ </div>
+ </div>
- <p>Horizontal menu on medium and up. Multiple dropdowns on the far right and left of the viewport. Drilldowns on small screens.</p>
+
<p>Horizontal menu on medium and up. Multiple dropdowns on the far right and left of the viewport. Drilldowns on small screens.</p>
- <ul>
- <li>The dropdowns should open underneath the parent element.</li>
- <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li>
- <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
- <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
- <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
- <li>Dropdown parent element arrows should point down.</li>
- <br>
- <li>On mobile, the arrows to access submenu should be at the left of the dropdown.</li>
- </ul>
+ <ul>
+ <li>The dropdowns should open underneath the parent element.</li>
+ <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li>
+ <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
+ <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
+ <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
+ <li>Dropdown parent element arrows should point down.</li>
+ <br>
+ <li>On mobile, the arrows to access submenu should be at the left of the dropdown.</li>
+ </ul>
+ </div>
+ </div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
</head>
<body>
- <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
- </div>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
+ <button class="menu-icon" type="button" data-toggle></button>
+ <div class="title-bar-title">Menu</div>
+ </div>
- <div class="top-bar" id="main-menu">
- <div class="top-bar-left">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
- <li class="has-submenu">
- <a href="#">One</a>
- <ul class="submenu menu vertical" data-submenu>
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li>
- <a href="#">Three</a>
- <ul class="submenu menu vertical align-left" data-submenu>
+ <div class="top-bar" id="main-menu">
+ <div class="top-bar-left">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
+ <li class="has-submenu">
+ <a href="#">One</a>
+ <ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
+ <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical align-left" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
</ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li class="has-submenu">
- <a href="#">Three</a>
- <ul class="submenu menu vertical" data-submenu>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li>
+ <li class="has-submenu">
<a href="#">Three</a>
- <ul class="submenu menu vertical align-left" data-submenu>
+ <ul class="submenu menu vertical" data-submenu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
+ <li>
+ <a href="#">Three</a>
+ <ul class="submenu menu vertical align-left" data-submenu>
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
</ul>
</li>
</ul>
- </li>
+ </div>
+ </div>
+
+ <p>Horizontal menu on medium and up. Multiple dropdowns on the far right and left of the viewport. Drilldowns on small screens.</p>
+
+ <ul>
+ <li>The dropdowns should open underneath the parent element.</li>
+ <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li>
+ <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
+ <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
+ <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
+ <li>Dropdown parent element arrows should point down.</li>
+ <br>
+ <li>On mobile, the arrows to access submenu should be at the left of the dropdown.</li>
</ul>
</div>
</div>
- <p>Horizontal menu on medium and up. Multiple dropdowns on the far right and left of the viewport. Drilldowns on small screens.</p>
-
- <ul>
- <li>The dropdowns should open underneath the parent element.</li>
- <li>On the right side, the dropdown's right side should be aligned to the right of the parent element.</li>
- <li>On the left side, the dropdown's left side should be aligned to the left of the parent element.</li>
- <li>On the right side, submenu dropdowns should be aligned to left-top of the parent element and open toward the middle.</li>
- <li>On the left side, submenu dropdowns should be aligned to right-top of the parent element and open toward the middle.</li>
- <li>Dropdown parent element arrows should point down.</li>
- <br>
- <li>On mobile, the arrows to access submenu should be at the left of the dropdown.</li>
- </ul>
-
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
</ul>
</div>
</div>
- <p>
- Dropdown should show up right under the LI, even if the bar has a bunch of padding.
- </p>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <p>
+ Dropdown should show up right under the LI, even if the bar has a bunch of padding.
+ </p>
+ </div>
+ </div>
+
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
<div class="dropdown-pane bottom" id="example-dropdown2" data-dropdown>
<p>Just some junk that needs to be said. Or not. Your choice.</p>
</div>
- <button class="menu-icon" type="button" data-toggle></button>
-</div>
-
-<div class="top-bar" id="example-menu">
- <div class="top-bar-left">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text">Site Title</li>
- <li>
- <a href="#">One</a>
- <ul class="menu vertical">
- <li><a href="#">One</a></li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
- </li>
- <li><a href="#">Two</a></li>
- <li><a href="#">Three</a></li>
- </ul>
+ <button class="menu-icon" type="button" data-toggle></button>
</div>
- <div class="top-bar-right">
- <ul class="menu">
- <li><input type="search" placeholder="Search"></li>
- <li><button type="button" class="button">Search</button></li>
- </ul>
+
+ <div class="top-bar" id="example-menu">
+ <div class="top-bar-left">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text">Site Title</li>
+ <li>
+ <a href="#">One</a>
+ <ul class="menu vertical">
+ <li><a href="#">One</a></li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Two</a></li>
+ <li><a href="#">Three</a></li>
+ </ul>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu">
+ <li><input type="search" placeholder="Search"></li>
+ <li><button type="button" class="button">Search</button></li>
+ </ul>
+ </div>
</div>
-</div>
<p>Dropdown button should only show dropdown, menu buttons should only show menu</p>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Reveal</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Reveal</h1>
- <section>
- <h2>Basics</h2>
- <p>A modal should open in the center of the page when either of these links are clicked.</p>
- <p><button class="button" data-open="exampleModal1">Open Trigger</button></p>
- <p><button class="button" data-toggle="exampleModal1">Toggle Trigger</button></p>
+ <section>
+ <h2>Basics</h2>
+
<p>A modal should open in the center of the page when either of these links are clicked.</p>
+
<p><button class="button" data-open="exampleModal1">Open Trigger</button></p>
+
<p><button class="button" data-toggle="exampleModal1">Toggle Trigger</button></p>
- <div class="reveal" id="exampleModal1" data-reveal>
- <p>Clicking any of these triggers should close the modal.</p>
- <p>Clicking on the overlay should close the modal.</p>
- <p><button class="button" data-toggle="exampleModal1">Toggle Trigger</button></p>
- <p><button class="button" data-close>Implicit Close Trigger</button></p>
- <p><button class="button" data-close="exampleModal1">Explicit Close Trigger</button></p>
- </div>
- </section>
+
<div class="reveal" id="exampleModal1" data-reveal>
+
<p>Clicking any of these triggers should close the modal.</p>
+
<p>Clicking on the overlay should close the modal.</p>
+
<p><button class="button" data-toggle="exampleModal1">Toggle Trigger</button></p>
+
<p><button class="button" data-close>Implicit Close Trigger</button></p>
+
<p><button class="button" data-close="exampleModal1">Explicit Close Trigger</button></p>
+ </div>
+ </section>
- <section>
- <h2>Nested</h2>
- <p>Clicking this link should open the initial modal.</p>
- <p><button class="button" data-open="exampleModal2">Open first modal</button></p>
+ <section>
+ <h2>Nested</h2>
+
<p>Clicking this link should open the initial modal.</p>
+
<p><button class="button" data-open="exampleModal2">Open first modal</button></p>
- <div class="reveal" id="exampleModal2" data-reveal>
- <p>Clicking this link should replace this modal with a new one.</p>
- <p><button class="button" data-open="exampleModal3">Open second modal</button></p>
- </div>
+
<div class="reveal" id="exampleModal2" data-reveal>
+
<p>Clicking this link should replace this modal with a new one.</p>
+
<p><button class="button" data-open="exampleModal3">Open second modal</button></p>
+ </div>
- <div class="reveal" id="exampleModal3" data-reveal>
- <p>Clicking this link should close this modal, but not go back to the first one.</p>
- <p><button class="button" data-close>Close modal</button></p>
- </div>
- </section>
+
<div class="reveal" id="exampleModal3" data-reveal>
+
<p>Clicking this link should close this modal, but not go back to the first one.</p>
+
<p><button class="button" data-close>Close modal</button></p>
+ </div>
+ </section>
- <section>
- <h2>With Offsets</h2>
- <p>Clicking this link should open a reveal with offset 50, 50 from top/left</p>
- <p><button class="button" data-open="exampleModal4">Open offset modal</button></p>
- <div class="reveal" id="exampleModal4" data-reveal data-v-offset="50" data-h-offset="50">
- <p>Am I in the top left?</p>
- <p><button class="button" data-close>Close modal</button></p>
- </div>
- </section>
+ <section>
+ <h2>With Offsets</h2>
+
<p>Clicking this link should open a reveal with offset 50, 50 from top/left</p>
+
<p><button class="button" data-open="exampleModal4">Open offset modal</button></p>
+
<div class="reveal" id="exampleModal4" data-reveal data-v-offset="50" data-h-offset="50">
+
<p>Am I in the top left?</p>
+
<p><button class="button" data-close>Close modal</button></p>
+ </div>
+ </section>
- <section>
- <h2>Slower fade in</h2>
- <p>Clicking this link should open a reveal fading in slow</p>
- <p><button class="button" data-open="exampleModal5">Open offset modal</button></p>
- <div class="reveal slow" id="exampleModal5" data-reveal data-animation-in="fade-in">
- <p>Did I open slower? Did the overlay also open slow?</p>
- <p><button class="button" data-close>Close modal</button></p>
- </div>
- </section>
+ <section>
+ <h2>Slower fade in</h2>
+
<p>Clicking this link should open a reveal fading in slow</p>
+
<p><button class="button" data-open="exampleModal5">Open offset modal</button></p>
+
<div class="reveal slow" id="exampleModal5" data-reveal data-animation-in="fade-in">
+
<p>Did I open slower? Did the overlay also open slow?</p>
+
<p><button class="button" data-close>Close modal</button></p>
+ </div>
+ </section>
- <section>
- <h2>Faster fade in</h2>
- <p>Clicking this link should open a reveal fading in fast</p>
- <p><button class="button" data-open="exampleModal6">Open offset modal</button></p>
- <div class="reveal fast" id="exampleModal6" data-reveal data-animation-in="fade-in">
- <p>Did I open faster? Did the overlay also open fast?</p>
- <p><button class="button" data-close>Close modal</button></p>
- </div>
- </section>
+ <section>
+ <h2>Faster fade in</h2>
+
<p>Clicking this link should open a reveal fading in fast</p>
+
<p><button class="button" data-open="exampleModal6">Open offset modal</button></p>
+
<div class="reveal fast" id="exampleModal6" data-reveal data-animation-in="fade-in">
+
<p>Did I open faster? Did the overlay also open fast?</p>
+
<p><button class="button" data-close>Close modal</button></p>
+ </div>
+ </section>
- <section>
- <h2>Multiple opened</h2>
- <p>Each link should open a separate modal.</p>
- <p><button class="button" data-open="exampleModal7-1">Open modal 1</button></p>
- <p><button class="button" data-open="exampleModal7-2">Open modal 2</button></p>
- <div class="reveal" id="exampleModal7-1" data-reveal data-multiple-opened="true" data-v-offset="10" data-overlay="false" data-close-on-click="false">
- <p>Modal 1 - Now click the other one.</p>
- <p><button class="button" data-close>Close modal</button></p>
- </div>
- <div class="reveal" id="exampleModal7-2" data-reveal data-multiple-opened="true" data-v-offset="200" data-overlay="false" data-close-on-click="false">
- <p>Modal 2 - Now click the other one.</p>
- <p><button class="button" data-close>Close modal</button></p>
- </div>
- </section>
+ <section>
+ <h2>Multiple opened</h2>
+
<p>Each link should open a separate modal.</p>
+
<p><button class="button" data-open="exampleModal7-1">Open modal 1</button></p>
+
<p><button class="button" data-open="exampleModal7-2">Open modal 2</button></p>
+
<div class="reveal" id="exampleModal7-1" data-reveal data-multiple-opened="true" data-v-offset="10" data-overlay="false" data-close-on-click="false">
+
<p>Modal 1 - Now click the other one.</p>
+
<p><button class="button" data-close>Close modal</button></p>
+ </div>
+
<div class="reveal" id="exampleModal7-2" data-reveal data-multiple-opened="true" data-v-offset="200" data-overlay="false" data-close-on-click="false">
+
<p>Modal 2 - Now click the other one.</p>
+
<p><button class="button" data-close>Close modal</button></p>
+ </div>
+ </section>
- <section>
- <h2>Eventlistener for anchor</h2>
- <p>When triggering the modal with the keyboard (space or enter) it should change content.</p>
- <p><button class="button" data-open="exampleModal8" id="exampleAnchor18-1">Open modal</button></p>
- <p><a href="#" data-open="exampleModal8" id="exampleAnchor18-2">Open modal</a></p>
- <div class="reveal" id="exampleModal8" data-reveal>
- <p>Something went wrong</p>
- <p><button class="button" data-close>Close modal</button></p>
+ <section>
+ <h2>Eventlistener for anchor</h2>
+ <p>When triggering the modal with the keyboard (space or enter) it should change content.</p>
+ <p><button class="button" data-open="exampleModal8" id="exampleAnchor18-1">Open modal</button></p>
+ <p><a href="#" data-open="exampleModal8" id="exampleAnchor18-2">Open modal</a></p>
+ <div class="reveal" id="exampleModal8" data-reveal>
+ <p>Something went wrong</p>
+ <p><button class="button" data-close>Close modal</button></p>
+ </div>
+ </section>
</div>
- </section>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Reveal</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Reveal</h1>
- <section>
- <h2>Avoid reveal modal closing upon click of an element not in the DOM</h2>
- <p>When an element inside the modal is removed on click, the modal would close because then the clicked element is not within the modal anymore (because it has been removed from the DOM). This example removes the button inside the modal on click and the modal should remain open. See issue #9146.</p>
- <p><button data-open="exampleModal1" class="button">Open Trigger</button></p>
+ <section>
+ <h2>Avoid reveal modal closing upon click of an element not in the DOM</h2>
+
<p>When an element inside the modal is removed on click, the modal would close because then the clicked element is not within the modal anymore (because it has been removed from the DOM). This example removes the button inside the modal on click and the modal should remain open. See issue #9146.</p>
+
<p><button data-open="exampleModal1" class="button">Open Trigger</button></p>
- <div class="reveal" id="exampleModal1" data-reveal>
- <p>Clicking any of these triggers should close the modal.</p>
- <p><button class="button" onclick="$(this).remove();">Click to remove me without closing the reveal!</button>
+ <div class="reveal" id="exampleModal1" data-reveal>
+ <p>Clicking any of these triggers should close the modal.</p>
+ <p><button class="button" onclick="$(this).remove();">Click to remove me without closing the reveal!</button>
+ </div>
+ </section>
</div>
- </section>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
-
- <button class="button" data-toggle="contact-modal">Open testcase</button>
- <p>Testcase taken from http://foundation.zurb.com/forum/posts/38459-f6-reveal-modal-suggestions.</p>
- <p>When the reveal is open, it should scroll but body no</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <p>Scroll</p>
- <div class="full reveal" id="contact-modal" data-reveal>
- <p>OH I'M SO FUUUUL</p>
- <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <button class="button" data-toggle="contact-modal">Open testcase</button>
+ <p>Testcase taken from http://foundation.zurb.com/forum/posts/38459-f6-reveal-modal-suggestions.</p>
+ <p>When the reveal is open, it should scroll but body no</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <p>Scroll</p>
+ <div class="full reveal" id="contact-modal" data-reveal>
+ <p>OH I'M SO FUUUUL</p>
+ <img src="http://placekitten.com/1920/1280" alt="Intropsective Cage">
+ <button class="close-button" data-close aria-label="Close reveal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <h1>Page with Scrollbar</h1>
- <p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
- <p>Reveal modal should open in middle of browser window</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <div class="reveal" id="exampleModal1" data-reveal>
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Page with Scrollbar</h1>
+ <p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
+ <p>Reveal modal should open in middle of browser window</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <div class="reveal" id="exampleModal1" data-reveal>
+ <h1>Awesome. I Have It.</h1>
+ <p class="lead">Your couch. It is mine.</p>
+ <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+ <button class="close-button" data-close aria-label="Close modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <h1>Page with Scrollbar</h1>
- <p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
- <p>Reveal modal should open in middle of browser window</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
- <div class="reveal" id="exampleModal1" data-reveal>
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Page with Scrollbar</h1>
+ <p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
+ <p>Reveal modal should open in middle of browser window</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+ <div class="reveal" id="exampleModal1" data-reveal>
+ <h1>Awesome. I Have It.</h1>
+ <p class="lead">Your couch. It is mine.</p>
+ <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+ <button class="close-button" data-close aria-label="Close modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ </div>
</div>
+
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Reveal</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Reveal</h1>
- <section>
- <h2>Callout inside Reveal</h2>
- <p>Test if a callout inside a Reveal can be closed without closing the Reveal aswell.</p>
- <div class="reveal" id="exampleModal1" data-reveal>
- <h2>Closeable callout in reveal bug</h2>
- <p>When you close the callout, the reveal is closed too, which shouldn't!</p>
+ <section>
+ <h2>Callout inside Reveal</h2>
+
<p>Test if a callout inside a Reveal can be closed without closing the Reveal aswell.</p>
+
<div class="reveal" id="exampleModal1" data-reveal>
+ <h2>Closeable callout in reveal bug</h2>
+
<p>When you close the callout, the reveal is closed too, which shouldn't!</p>
- <div class="callout alert" data-closable>
- <p>Close me now!</p>
- <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- </div>
+
<div class="callout alert" data-closable>
+ <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
- <button class="close-button" data-close aria-label="Close reveal" type="button">
- <span aria-hidden="true">×</span>
- </button>
- </div>
+ <button class="close-button" data-close aria-label="Close reveal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
- <p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
- </section>
+
<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>
+ </section>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
-<p><button class="button" data-open="exampleModal1">Modal at the top of screen</button></p>
-<div class="reveal" id="exampleModal1" data-reveal data-v-offset="0">
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
+ <p><button class="button" data-open="exampleModal1">Modal at the top of screen</button></p>
-<p><button class="button" data-open="exampleModal2">Modal 600px from top</button></p>
+ <div class="reveal" id="exampleModal1" data-reveal data-v-offset="0">
+ <h1>Awesome. I Have It.</h1>
+ <p class="lead">Your couch. It is mine.</p>
+ <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+ <button class="close-button" data-close aria-label="Close modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
-<div class="reveal" id="exampleModal2" data-reveal data-v-offset="600">
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
+ <p><button class="button" data-open="exampleModal2">Modal 600px from top</button></p>
+ <div class="reveal" id="exampleModal2" data-reveal data-v-offset="600">
+ <h1>Awesome. I Have It.</h1>
+ <p class="lead">Your couch. It is mine.</p>
+ <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+ <button class="close-button" data-close aria-label="Close modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
-<p><button class="button" data-open="exampleModal3">Modal 600px from side</button></p>
-<div class="reveal" id="exampleModal3" data-reveal data-h-offset="600">
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
+ <p><button class="button" data-open="exampleModal3">Modal 600px from side</button></p>
-<p><button class="button" data-open="exampleModal4">Modal closes by hitting esc</button></p>
+ <div class="reveal" id="exampleModal3" data-reveal data-h-offset="600">
+ <h1>Awesome. I Have It.</h1>
+ <p class="lead">Your couch. It is mine.</p>
+ <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+ <button class="close-button" data-close aria-label="Close modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
-<div class="reveal" id="exampleModal4" data-reveal data-close-on-esc="true">
- <h1>Awesome. I Have It.</h1>
- <p class="lead">Your couch. It is mine.</p>
- <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
-</div>
+ <p><button class="button" data-open="exampleModal4">Modal closes by hitting esc</button></p>
+
+ <div class="reveal" id="exampleModal4" data-reveal data-close-on-esc="true">
+ <h1>Awesome. I Have It.</h1>
+ <p class="lead">Your couch. It is mine.</p>
+ <p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
+ <button class="close-button" data-close aria-label="Close modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
</style>
</head>
<body>
- <div class="row column">
- <h1>Reveal: Tall Modal</h1>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Reveal: Tall Modal</h1>
- <p>This tall modal scrolls within the the modal overlay.</p>
+
<p>This tall modal scrolls within the the modal overlay.</p>
- <p><button class="button" data-toggle="exampleModal1">Toggle Trigger</button></p>
+
<p><button class="button" data-toggle="exampleModal1">Toggle Trigger</button></p>
- <div class="reveal" id="exampleModal1" data-reveal>
- <button class="close-button" aria-label="Close alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
+
<div class="reveal" id="exampleModal1" data-reveal>
+ <button class="close-button" aria-label="Close alert" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
- </div>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+ </div>
- <p>This tall modal has a fixed-position close button, that sits over the overlay.</p>
+
<p>This tall modal has a fixed-position close button, that sits over the overlay.</p>
- <p><button class="button" data-toggle="exampleModal2">Toggle Trigger</button></p>
+
<p><button class="button" data-toggle="exampleModal2">Toggle Trigger</button></p>
- <div class="reveal" id="exampleModal2" data-reveal>
- <button class="close-button fixed" aria-label="Close alert" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
+
<div class="reveal" id="exampleModal2" data-reveal>
+ <button class="close-button fixed" aria-label="Close alert" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad alias commodi minus repellat atque optio sit soluta assumenda labore inventore corporis non laboriosam veniam nisi, ut, obcaecati dolorum. Incidunt, pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet reiciendis in maiores aliquid repellendus vero recusandae corporis ipsam, id placeat suscipit laboriosam, necessitatibus et neque ducimus. Harum quis sequi, expedita. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut quam perspiciatis harum, cum. Esse maxime repellendus illum voluptate, quae voluptates quibusdam rem ab quasi perspiciatis. Numquam porro alias cumque saepe!</p>
+ </div>
+ </div>
</div>
</div>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
