</head>
<body>
-
- <h1>Dropdown Menu: RTL</h1>
-
- <p>First-level dropdowns should anchor to the bottom-right of the parent item.</p>
-
- <p>Second-level dropdowns should anchor to the top-left of the parent item.</p>
-
- <ul class="dropdown menu" data-dropdown-menu>
- <li>
- <a href="#">Item 1</a>
- <ul class="menu">
- <li><a href="#">Item 1A</a></li>
- <!-- ... -->
- </ul>
- </li>
- <li><a href="#">Item 2</a></li>
- <li><a href="#">Item 3</a></li>
- <li><a href="#">Item 4</a>
- <ul class="menu">
- <li><a href="#">Item 4A</a></li>
- <li><a href="#">Item 4B</a>
- <ul class="menu">
- <li><a href="#">Item 4BA</a></li>
- </ul>
- </li>
- <li><a href="#">Item 4C</a></li>
- </ul>
- </li>
- </ul>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown Menu: RTL</h1>
+
+ <p>First-level dropdowns should anchor to the bottom-right of the parent item.</p>
+
+ <p>Second-level dropdowns should anchor to the top-left of the parent item.</p>
+
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li>
+ <a href="#">Item 1</a>
+ <ul class="menu">
+ <li><a href="#">Item 1A</a></li>
+ <!-- ... -->
+ </ul>
+ </li>
+ <li><a href="#">Item 2</a></li>
+ <li><a href="#">Item 3</a></li>
+ <li><a href="#">Item 4</a>
+ <ul class="menu">
+ <li><a href="#">Item 4A</a></li>
+ <li><a href="#">Item 4B</a>
+ <ul class="menu">
+ <li><a href="#">Item 4BA</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item 4C</a></li>
+ </ul>
+ </li>
+ </ul>
+ </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>
- <div class="row column">
- <ul class="dropdown menu" data-dropdown-menu>
- <li>
- <a href="#">Item 1</a>
- <ul class="menu vertical">
- <li><a href="#">Content</a></li>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li>
+ <a href="#">Item 1</a>
+ <ul class="menu vertical">
+ <li><a href="#">Content</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Item 2</a>
+ <ul class="menu vertical">
+ <li><a href="#">Content</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Item 3</a>
+ <ul class="menu vertical">
+ <li><a href="#">Content</a></li>
+ </ul>
+ </li>
</ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu vertical">
- <li><a href="#">Content</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 3</a>
- <ul class="menu vertical">
- <li><a href="#">Content</a></li>
- </ul>
- </li>
- </ul>
- <div class="callout">
- <p>Move the Mouse on Item 1 to open it, then quicly leave the window though the Item 2 (in a 45 degree angel). Panels should close.</p>
+ <div class="callout">
+ <p>Move the Mouse on Item 1 to open it, then quicly leave the window though the Item 2 (in a 45 degree angel). Panels should close.</p>
- <p>
- Checked bug: <a href="https://github.com/zurb/foundation-sites/issues/9427">https://github.com/zurb/foundation-sites/issues/9427</a><br/>
- <img src="https://cloud.githubusercontent.com/assets/9939075/20866285/0a24819c-ba2a-11e6-93d8-1a69363f2c57.gif"/>
- </p>
+ <p>
+ Checked bug: <a href="https://github.com/zurb/foundation-sites/issues/9427">https://github.com/zurb/foundation-sites/issues/9427</a><br/>
+ <img src="https://cloud.githubusercontent.com/assets/9939075/20866285/0a24819c-ba2a-11e6-93d8-1a69363f2c57.gif"/>
+ </p>
+ </div>
+ </div>
</div>
</div>
</head>
<body>
+
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown Menu: Left aligned</h1>
+ <p>This dropdown menu is aligned left using data-alignment="left" overriding the effect of the <code>.top-bar-right</code> class.</p>
+ <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>
- <h1>Dropdown Menu: Left aligned</h1>
- <p>This dropdown menu is aligned left using data-alignment="left" overriding the effect of the <code>.top-bar-right</code> class.</p>
- <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="dropdown menu" data-dropdown-menu>
- <li class="menu-text"><strong>Site Title</strong></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-alignment="left">
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#Item-1A">Item 1A</a></li>
+ <div class="top-bar" id="main-menu">
+ <div class="top-bar-left">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text"><strong>Site Title</strong></li>
+ </ul>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-alignment="left">
<li>
- <a href="#Item-1B">Item 1B</a>
+ <a>Item 1</a>
<ul class="menu">
- <li><a href="#Item-1Bi">Item 1B i</a></li>
- <li><a href="#Item-1Bii">Item 1B ii</a></li>
- <li>
- <a href="#Item-1Biii">Item 1B iii</a>
- <ul class="menu">
- <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
- <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
- </ul>
- </li>
+ <li><a href="#Item-1A">Item 1A</a></li>
<li>
- <a href="#Item-1Biv">Item 1B iv</a>
+ <a href="#Item-1B">Item 1B</a>
<ul class="menu">
- <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
+ <li>
+ <a href="#Item-1Biii">Item 1B iii</a>
+ <ul class="menu">
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-1Biv">Item 1B iv</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
- <li><a href="#Item-1C">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-2">Item 2</a>
- <ul class="menu">
- <li><a href="#Item-2A">Item 2A</a></li>
- <li><a href="#Item-2B">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#Item-3">Item 3</a></li>
- <li><a href="#Item-4">Item 4</a></li>
+ <li>
+ <a href="#Item-2">Item 2</a>
+ <ul class="menu">
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
+ </ul>
+ </li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
- </ul>
- </div>
- </div>
+ </ul>
+ </div>
+ </div>
- <p>This dropdown menu is positioned left regardless of the content before it.</p>
- <div class="title-bar" data-responsive-toggle="second-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
- </div>
+
<p>This dropdown menu is positioned left regardless of the content before it.</p>
+
<div class="title-bar" data-responsive-toggle="second-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="second-menu">
- <div class="top-bar-left hide-for-small-only">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text"><strong>Site Title</strong></li>
- <li class="menu-text">Some long text to push the menu.</li>
- <li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
- </ul>
- </div>
- <div class="">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-alignment="left">
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#Item-1A">Item 1A</a></li>
+ <div class="top-bar" id="second-menu">
+ <div class="top-bar-left hide-for-small-only">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text"><strong>Site Title</strong></li>
+ <li class="menu-text">Some long text to push the menu.</li>
+ <li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
+ </ul>
+ </div>
+ <div class="">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown" data-alignment="left">
<li>
- <a href="#Item-1B">Item 1B</a>
+ <a>Item 1</a>
<ul class="menu">
- <li><a href="#Item-1Bi">Item 1B i</a></li>
- <li><a href="#Item-1Bii">Item 1B ii</a></li>
- <li>
- <a href="#Item-1Biii">Item 1B iii</a>
- <ul class="menu">
- <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
- <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
- </ul>
- </li>
+ <li><a href="#Item-1A">Item 1A</a></li>
<li>
- <a href="#Item-1Biv">Item 1B iv</a>
+ <a href="#Item-1B">Item 1B</a>
<ul class="menu">
- <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
+ <li>
+ <a href="#Item-1Biii">Item 1B iii</a>
+ <ul class="menu">
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-1Biv">Item 1B iv</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
- <li><a href="#Item-1C">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-2">Item 2</a>
- <ul class="menu">
- <li><a href="#Item-2A">Item 2A</a></li>
- <li><a href="#Item-2B">Item 2B</a></li>
+ <li>
+ <a href="#Item-2">Item 2</a>
+ <ul class="menu">
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
+ </ul>
+ </li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
</ul>
- </li>
- <li><a href="#Item-3">Item 3</a></li>
- <li><a href="#Item-4">Item 4</a></li>
- </ul>
+ </div>
+ </div>
</div>
</div>
</head>
<body>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Dropdown Menu: Right aligned</h1>
+ <p>This dropdown menu is aligned right using <code>.top-bar-right</code> class.</p>
+ <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>
- <h1>Dropdown Menu: Right aligned</h1>
- <p>This dropdown menu is aligned right using <code>.top-bar-right</code> class.</p>
- <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="dropdown menu" data-dropdown-menu>
- <li class="menu-text"><strong>Site Title</strong></li>
- </ul>
- </div>
- <div class="top-bar-right">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#Item-1A">Item 1A</a></li>
+ <div class="top-bar" id="main-menu">
+ <div class="top-bar-left">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text"><strong>Site Title</strong></li>
+ </ul>
+ </div>
+ <div class="top-bar-right">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li>
- <a href="#Item-1B">Item 1B</a>
+ <a>Item 1</a>
<ul class="menu">
- <li><a href="#Item-1Bi">Item 1B i</a></li>
- <li><a href="#Item-1Bii">Item 1B ii</a></li>
- <li>
- <a href="#Item-1Biii">Item 1B iii</a>
- <ul class="menu">
- <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
- <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
- </ul>
- </li>
+ <li><a href="#Item-1A">Item 1A</a></li>
<li>
- <a href="#Item-1Biv">Item 1B iv</a>
+ <a href="#Item-1B">Item 1B</a>
<ul class="menu">
- <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
+ <li>
+ <a href="#Item-1Biii">Item 1B iii</a>
+ <ul class="menu">
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-1Biv">Item 1B iv</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
- <li><a href="#Item-1C">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-2">Item 2</a>
- <ul class="menu">
- <li><a href="#Item-2A">Item 2A</a></li>
- <li><a href="#Item-2B">Item 2B</a></li>
- </ul>
- </li>
- <li><a href="#Item-3">Item 3</a></li>
- <li><a href="#Item-4">Item 4</a></li>
+ <li>
+ <a href="#Item-2">Item 2</a>
+ <ul class="menu">
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
+ </ul>
+ </li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
- </ul>
- </div>
- </div>
+ </ul>
+ </div>
+ </div>
- <p>This dropdown menu is positioned right just by the content before it.</p>
- <div class="title-bar" data-responsive-toggle="second-menu" data-hide-for="medium">
- <button class="menu-icon" type="button" data-toggle></button>
- <div class="title-bar-title">Menu</div>
- </div>
+
<p>This dropdown menu is positioned right just by the content before it.</p>
+
<div class="title-bar" data-responsive-toggle="second-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="second-menu">
- <div class="top-bar-left hide-for-small-only">
- <ul class="dropdown menu" data-dropdown-menu>
- <li class="menu-text"><strong>Site Title</strong></li>
- <li class="menu-text">Some long text to push the menu.</li>
- <li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
- </ul>
- </div>
- <div class="">
- <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#Item-1A">Item 1A</a></li>
+ <div class="top-bar" id="second-menu">
+ <div class="top-bar-left hide-for-small-only">
+ <ul class="dropdown menu" data-dropdown-menu>
+ <li class="menu-text"><strong>Site Title</strong></li>
+ <li class="menu-text">Some long text to push the menu.</li>
+ <li class="menu-text">You might need to resize the window so that the menu just fits in this line...</li>
+ </ul>
+ </div>
+ <div class="">
+ <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li>
- <a href="#Item-1B">Item 1B</a>
+ <a>Item 1</a>
<ul class="menu">
- <li><a href="#Item-1Bi">Item 1B i</a></li>
- <li><a href="#Item-1Bii">Item 1B ii</a></li>
- <li>
- <a href="#Item-1Biii">Item 1B iii</a>
- <ul class="menu">
- <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
- <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
- </ul>
- </li>
+ <li><a href="#Item-1A">Item 1A</a></li>
<li>
- <a href="#Item-1Biv">Item 1B iv</a>
+ <a href="#Item-1B">Item 1B</a>
<ul class="menu">
- <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ <li><a href="#Item-1Bi">Item 1B i</a></li>
+ <li><a href="#Item-1Bii">Item 1B ii</a></li>
+ <li>
+ <a href="#Item-1Biii">Item 1B iii</a>
+ <ul class="menu">
+ <li><a href="#Item-1Biiialpha">Item 1B iii alpha</a></li>
+ <li><a href="#Item-1Biiiomega">Item 1B iii omega</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#Item-1Biv">Item 1B iv</a>
+ <ul class="menu">
+ <li><a href="#Item-1Bivalpha">Item 1B iv alpha</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#Item-1C">Item 1C</a></li>
</ul>
</li>
- <li><a href="#Item-1C">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#Item-2">Item 2</a>
- <ul class="menu">
- <li><a href="#Item-2A">Item 2A</a></li>
- <li><a href="#Item-2B">Item 2B</a></li>
+ <li>
+ <a href="#Item-2">Item 2</a>
+ <ul class="menu">
+ <li><a href="#Item-2A">Item 2A</a></li>
+ <li><a href="#Item-2B">Item 2B</a></li>
+ </ul>
+ </li>
+ <li><a href="#Item-3">Item 3</a></li>
+ <li><a href="#Item-4">Item 4</a></li>
</ul>
- </li>
- <li><a href="#Item-3">Item 3</a></li>
- <li><a href="#Item-4">Item 4</a></li>
- </ul>
+ </div>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <div class="callout">Move the Mouse on Item 1 -> Item 1B -> Item 1B iii -> Submenu, then leave the Pane and quick reenter it before it close. Pane should stay open</div>
- <ul class="dropdown menu" data-dropdown-menu>
- <li>
- <a>Item 1</a>
- <ul class="menu">
- <li><a href="#">Item 1A</a></li>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div class="callout">Move the Mouse on Item 1 -> Item 1B -> Item 1B iii -> Submenu, then leave the Pane and quick reenter it before it close. Pane should stay open</div>
+ <ul class="dropdown menu" data-dropdown-menu>
<li>
- <a href="#">Item 1B</a>
+ <a>Item 1</a>
<ul class="menu">
- <li><a href="#">Item 1B i</a></li>
- <li><a href="#">Item 1B ii</a></li>
+ <li><a href="#">Item 1A</a></li>
<li>
- <a href="#">Item 1B iii</a>
+ <a href="#">Item 1B</a>
<ul class="menu">
- <li><a href="#">Item 1B iii alpha</a></li>
- <li><a href="#">Item 1B iii omega</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 1B iv</a>
- <ul class="menu">
- <li><a href="#">Item 1B iv alpha</a></li>
+ <li><a href="#">Item 1B i</a></li>
+ <li><a href="#">Item 1B ii</a></li>
+ <li>
+ <a href="#">Item 1B iii</a>
+ <ul class="menu">
+ <li><a href="#">Item 1B iii alpha</a></li>
+ <li><a href="#">Item 1B iii omega</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#">Item 1B iv</a>
+ <ul class="menu">
+ <li><a href="#">Item 1B iv alpha</a></li>
+ </ul>
+ </li>
</ul>
</li>
+ <li><a href="#">Item 1C</a></li>
</ul>
</li>
- <li><a href="#">Item 1C</a></li>
- </ul>
- </li>
- <li>
- <a href="#">Item 2</a>
- <ul class="menu">
- <li><a href="#">Item 2A</a></li>
- <li><a href="#">Item 2B</a></li>
+ <li>
+ <a href="#">Item 2</a>
+ <ul class="menu">
+ <li><a href="#">Item 2A</a></li>
+ <li><a href="#">Item 2B</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Item 3</a></li>
+ <li><a href="#">Item 4</a></li>
</ul>
- </li>
- <li><a href="#">Item 3</a></li>
- <li><a href="#">Item 4</a></li>
- </ul>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h4>I Fire preequalized and postequalized on medium-up and also after _pauseEvents</h4>
- </div>
- <div class="row" data-equalizer data-equalize-on-stack="false" data-equalize-on="medium" id="equalizer1">
- <div class="small-12 medium-3 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Test</div>
- </div>
- </div>
- <div class="small-12 medium-3 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Test</div>
- </div>
- </div>
- <div class="small-12 medium-3 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Test</div>
- </div>
- </div>
- <div class="small-12 medium-3 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga officia iste ut distinctio magni accusantium, optio ipsa at cupiditate sequi!</div>
- </div>
- </div>
- </div>
- <div class="row column">
- <h4>I Fire preequalized, preequalizedrow, postequalizedrow, postequalized, resizeme</h4>
- </div>
- <div class="row" data-equalizer data-equalize-by-row="true" id="equalizer2">
- <div class="small-12 medium-6 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Test</div>
- </div>
- </div>
- <div class="small-12 medium-6 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Test</div>
- </div>
- </div>
- <div class="small-12 medium-6 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Test</div>
- </div>
- </div>
- <div class="small-12 medium-6 columns">
- <div class="callout">
- <div class="callout" data-equalizer-watch>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolore inventore quibusdam deleniti a ipsa laborum, illo, soluta quas velit?</div>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h4>I Fire preequalized and postequalized on medium-up and also after _pauseEvents</h4>
+ <div class="grid-x grid-padding-x" data-equalizer data-equalize-on-stack="false" data-equalize-on="medium" id="equalizer1">
+ <div class="small-12 medium-3 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Test</div>
+ </div>
+ </div>
+ <div class="small-12 medium-3 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Test</div>
+ </div>
+ </div>
+ <div class="small-12 medium-3 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Test</div>
+ </div>
+ </div>
+ <div class="small-12 medium-3 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga officia iste ut distinctio magni accusantium, optio ipsa at cupiditate sequi!</div>
+ </div>
+ </div>
+ </div>
+ <h4>I Fire preequalized, preequalizedrow, postequalizedrow, postequalized, resizeme</h4>
+ <div class="grid-x grid-padding-x" data-equalizer data-equalize-by-row="true" id="equalizer2">
+ <div class="small-12 medium-6 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Test</div>
+ </div>
+ </div>
+ <div class="small-12 medium-6 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Test</div>
+ </div>
+ </div>
+ <div class="small-12 medium-6 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Test</div>
+ </div>
+ </div>
+ <div class="small-12 medium-6 cell">
+ <div class="callout">
+ <div class="callout" data-equalizer-watch>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero dolore inventore quibusdam deleniti a ipsa laborum, illo, soluta quas velit?</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h3>Select Icon</h3>
- </div>
-
- <div class="row">
- <div class="small-4 column">
- <select>
- <option>ZURB</option>
- <option>Foundation</option>
- </select>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="medium-12 cell">
+ <h3>Select Icon</h3>
+ </div>
+ <div class="medium-4 cell">
+ <select>
+ <option>ZURB</option>
+ <option>Foundation</option>
+ </select>
+ </div>
</div>
</div>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
- <div class="row column">
- <h1>Trap and release focus from elements</h1>
- <p>
- Use the buttons to trap or release the focus for the Callout.
- <br>You can then use the Tab key to focus the links in the Callout. If the focus is trapped, you shouldn't be able to focus any element outside of the Callout using Tab or Shift+Tab.
- <br>
- <br>The following box binds to a regular keydown-event to check if the trapping and releasing does not interfere with other events.
- </p>
- <p><strong id="state"></strong></p>
- <p><span id="current"></span></p>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <h1>Trap and release focus from elements</h1>
+ <p>
+ Use the buttons to trap or release the focus for the Callout.
+ <br>You can then use the Tab key to focus the links in the Callout. If the focus is trapped, you shouldn't be able to focus any element outside of the Callout using Tab or Shift+Tab.
+ <br>
+ <br>The following box binds to a regular keydown-event to check if the trapping and releasing does not interfere with other events.
+ </p>
+ <p><strong id="state"></strong></p>
+ <p><span id="current"></span></p>
- <a href="#Link0">Link 0 outside</a>
- <div id="container" class="callout">
- <a href="#Link1">Link 1</a>
- <br><a href="#Link2">Link 2</a>
- <br><a href="#Link3">Link 3</a>
- </div>
-
+
<a href="#Link0">Link 0 outside</a>
+
<div id="container" class="callout">
+
<a href="#Link1">Link 1</a>
+
<br><a href="#Link2">Link 2</a>
+
<br><a href="#Link3">Link 3</a>
+ </div>
+
- <button id="trap-btn" class="button">Trap focus</button>
- <button id="release-btn" class="button">Release focus</button>
+ <button id="trap-btn" class="button">Trap focus</button>
+ <button id="release-btn" class="button">Release focus</button>
+ </div>
+ </div>
</div>
<script src="../assets/js/vendor.js"></script>
</style>
</head>
<body>
- <ul class="vertical menu" data-magellan>
- <li><a href="#one">Section One</a></li>
- <li><a href="#three">Section Three</a></li>
- <li><a href="#two">Section Two</a></li>
- <li><a href="#four">Section Four</a></li>
- <li><a href="#five">Section Five</a></li>
- <li><a href="#three">Section Three</a></li>
- </ul>
- <div class="row">
- <div class="column small-10 medium-6 large-4">
- <section id="one" data-magellan-target="one">
- <h1>Section One</h1>
- <p>
- <strong>This test checks if the correct link gets the active class when scrolling.</strong> This section is in the same place as the corresponding link. All should go well.
- </p>
- <p>
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies porttitor lorem. Fusce condimentum in erat id pellentesque. Ut id lacus non nulla sodales suscipit. Donec dictum ante lacus, id fermentum ex dictum id. Pellentesque vel ullamcorper nisi. In hac habitasse platea dictumst. Morbi vehicula egestas tellus, non pulvinar leo viverra in. Maecenas eget est ut nisi scelerisque semper a sed quam. Suspendisse viverra ornare lacus, vehicula sagittis est condimentum a. Aliquam erat volutpat. Nullam consequat aliquam eros quis dictum. Suspendisse dapibus massa eget felis convallis dapibus. Nam vestibulum ligula velit, egestas faucibus justo pellentesque a.
- </p>
- </section>
- <section id="two" data-magellan-target="two">
- <h1>Section Two</h1>
- <p>
- This section is not in the same place as the corresponding link. Notice that the corresponding link comes third in the menu, but the section comes second in the page.
- </p>
- <p>
- Mauris non metus porttitor, iaculis arcu in, ultrices metus. Maecenas et est lacus. Ut a diam rutrum, iaculis leo vitae, commodo felis. Donec molestie, elit in mollis consequat, mauris arcu auctor tortor, non feugiat felis mauris eu tellus. In hac habitasse platea dictumst. Phasellus condimentum nulla a orci varius placerat. Integer vitae orci tristique, convallis ligula ac, sodales dui. Morbi pharetra eros ut semper egestas. Donec ornare velit vel felis tempor tempor. Nullam egestas rhoncus elit et rhoncus.
- </p>
- </section>
- <section id="three" data-magellan-target="three">
- <h1>Section Three</h1>
- <p>
- This section has two corresponding links in the menu. Both should get the active class.
- </p>
- <p>
- Cras in nunc ultricies, eleifend nisl ut, volutpat ipsum. In a neque nulla. Donec varius tempus fringilla. Nunc massa tellus, lobortis a imperdiet vel, placerat quis leo. Pellentesque vel accumsan lacus, aliquam tristique eros. Proin bibendum purus quis feugiat egestas. Vivamus facilisis libero tortor, ut finibus eros lobortis sed. Donec a blandit erat. Morbi et purus urna. Ut orci libero, sodales dapibus molestie id, pretium quis mi. Nam et lacinia quam.
- </p>
- </section>
- <section id="five" data-magellan-target="five">
- <h1>Section Five</h1>
- <p>
- This section comes fourth in the page because Section Four is missing. The Section Four link should not get the active class. Instead, the corresponding Section Five link should.
- </p>
- <p>
- Donec aliquet dictum mauris nec volutpat. Nunc id mauris neque. Aenean venenatis, massa laoreet fermentum convallis, purus tellus luctus tellus, nec pharetra quam nisi non dolor. Aliquam quam mi, aliquam non leo eu, tincidunt aliquam nibh. Sed malesuada, ligula at maximus imperdiet, risus arcu hendrerit dolor, ac rutrum elit leo nec dolor. Nulla eu dolor eget sapien eleifend pulvinar finibus ac nisl. Nulla augue lorem, ullamcorper id felis sit amet, pretium viverra lectus. Praesent ullamcorper orci sed convallis pulvinar. Sed accumsan orci vel blandit sodales. Duis lobortis sem at fermentum scelerisque. Cras sed turpis at est sollicitudin sollicitudin dignissim vel libero. Maecenas sit amet mauris elementum, tincidunt sem vitae, pharetra ex. Curabitur viverra erat ut ipsum cursus mattis. Vestibulum consectetur, ligula id gravida tristique, nisi lorem gravida ex, in imperdiet risus turpis eget neque.
- </p>
- </section>
+ <div class="grid-container">
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <ul class="vertical menu" data-magellan>
+ <li><a href="#one">Section One</a></li>
+ <li><a href="#three">Section Three</a></li>
+ <li><a href="#two">Section Two</a></li>
+ <li><a href="#four">Section Four</a></li>
+ <li><a href="#five">Section Five</a></li>
+ <li><a href="#three">Section Three</a></li>
+ </ul>
+ <div class="grid-x grid-padding-x">
+ <div class="cell small-10 medium-6 large-4">
+ <section id="one" data-magellan-target="one">
+ <h1>Section One</h1>
+ <p>
+ <strong>This test checks if the correct link gets the active class when scrolling.</strong> This section is in the same place as the corresponding link. All should go well.
+ </p>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies porttitor lorem. Fusce condimentum in erat id pellentesque. Ut id lacus non nulla sodales suscipit. Donec dictum ante lacus, id fermentum ex dictum id. Pellentesque vel ullamcorper nisi. In hac habitasse platea dictumst. Morbi vehicula egestas tellus, non pulvinar leo viverra in. Maecenas eget est ut nisi scelerisque semper a sed quam. Suspendisse viverra ornare lacus, vehicula sagittis est condimentum a. Aliquam erat volutpat. Nullam consequat aliquam eros quis dictum. Suspendisse dapibus massa eget felis convallis dapibus. Nam vestibulum ligula velit, egestas faucibus justo pellentesque a.
+ </p>
+ </section>
+ <section id="two" data-magellan-target="two">
+ <h1>Section Two</h1>
+ <p>
+ This section is not in the same place as the corresponding link. Notice that the corresponding link comes third in the menu, but the section comes second in the page.
+ </p>
+ <p>
+ Mauris non metus porttitor, iaculis arcu in, ultrices metus. Maecenas et est lacus. Ut a diam rutrum, iaculis leo vitae, commodo felis. Donec molestie, elit in mollis consequat, mauris arcu auctor tortor, non feugiat felis mauris eu tellus. In hac habitasse platea dictumst. Phasellus condimentum nulla a orci varius placerat. Integer vitae orci tristique, convallis ligula ac, sodales dui. Morbi pharetra eros ut semper egestas. Donec ornare velit vel felis tempor tempor. Nullam egestas rhoncus elit et rhoncus.
+ </p>
+ </section>
+ <section id="three" data-magellan-target="three">
+ <h1>Section Three</h1>
+ <p>
+ This section has two corresponding links in the menu. Both should get the active class.
+ </p>
+ <p>
+ Cras in nunc ultricies, eleifend nisl ut, volutpat ipsum. In a neque nulla. Donec varius tempus fringilla. Nunc massa tellus, lobortis a imperdiet vel, placerat quis leo. Pellentesque vel accumsan lacus, aliquam tristique eros. Proin bibendum purus quis feugiat egestas. Vivamus facilisis libero tortor, ut finibus eros lobortis sed. Donec a blandit erat. Morbi et purus urna. Ut orci libero, sodales dapibus molestie id, pretium quis mi. Nam et lacinia quam.
+ </p>
+ </section>
+ <section id="five" data-magellan-target="five">
+ <h1>Section Five</h1>
+ <p>
+ This section comes fourth in the page because Section Four is missing. The Section Four link should not get the active class. Instead, the corresponding Section Five link should.
+ </p>
+ <p>
+ Donec aliquet dictum mauris nec volutpat. Nunc id mauris neque. Aenean venenatis, massa laoreet fermentum convallis, purus tellus luctus tellus, nec pharetra quam nisi non dolor. Aliquam quam mi, aliquam non leo eu, tincidunt aliquam nibh. Sed malesuada, ligula at maximus imperdiet, risus arcu hendrerit dolor, ac rutrum elit leo nec dolor. Nulla eu dolor eget sapien eleifend pulvinar finibus ac nisl. Nulla augue lorem, ullamcorper id felis sit amet, pretium viverra lectus. Praesent ullamcorper orci sed convallis pulvinar. Sed accumsan orci vel blandit sodales. Duis lobortis sem at fermentum scelerisque. Cras sed turpis at est sollicitudin sollicitudin dignissim vel libero. Maecenas sit amet mauris elementum, tincidunt sem vitae, pharetra ex. Curabitur viverra erat ut ipsum cursus mattis. Vestibulum consectetur, ligula id gravida tristique, nisi lorem gravida ex, in imperdiet risus turpis eget neque.
+ </p>
+ </section>
+ </div>
+ </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="grid-x grid-padding-x">
+ <div class="cell">
- <div class="row">
+ <div class="off-canvas-wrapper medium-6 columns">
- <div class="off-canvas-wrapper medium-6 columns">
+ <div class="off-canvas-absolute position-left" id="offCanvasLeft" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-left" id="offCanvasLeft" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-absolute position-right" id="offCanvasRight" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-right" id="offCanvasRight" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-absolute position-top" id="offCanvasTop" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-top" id="offCanvasTop" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-absolute position-bottom" id="offCanvasBottom" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-bottom" id="offCanvasBottom" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-content" data-off-canvas-content>
+ <div class="row column">
- <div class="off-canvas-content" data-off-canvas-content>
- <div class="row column">
+ <div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+ <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+ <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
+ <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
- <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
- <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
- <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
- </div>
+ <h3>This test demonstrates the `off-canvas-absolute` class.</h3>
- <h3>This test demonstrates the `off-canvas-absolute` class.</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ </div>
+ </div>
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- </div>
</div>
- </div>
+ <div class="off-canvas-wrapper medium-6 columns">
- <div class="off-canvas-wrapper medium-6 columns">
+ <div class="off-canvas-absolute position-left" id="offCanvasLeftTwo" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-left" id="offCanvasLeftTwo" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-absolute position-right" id="offCanvasRightTwo" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-right" id="offCanvasRightTwo" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-absolute position-top" id="offCanvasTopTwo" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-top" id="offCanvasTopTwo" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-absolute position-bottom" id="offCanvasBottomTwo" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel and absolute positioned.</h3>
+ </div>
- <div class="off-canvas-absolute position-bottom" id="offCanvasBottomTwo" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel and absolute positioned.</h3>
- </div>
+ <div class="off-canvas-content" data-off-canvas-content>
+ <div class="row column">
- <div class="off-canvas-content" data-off-canvas-content>
- <div class="row column">
+ <div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeftTwo">Left Push</button>
+ <button type="button" class="button" data-toggle="offCanvasRightTwo">Right Push</button>
+ <button type="button" class="button" data-toggle="offCanvasTopTwo">Top Push</button>
+ <button type="button" class="button" data-toggle="offCanvasBottomTwo">Bottom Push</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeftTwo">Left Push</button>
- <button type="button" class="button" data-toggle="offCanvasRightTwo">Right Push</button>
- <button type="button" class="button" data-toggle="offCanvasTopTwo">Top Push</button>
- <button type="button" class="button" data-toggle="offCanvasBottomTwo">Bottom Push</button>
- </div>
+ <h3>This test demonstrates the `off-canvas-absolute` class.</h3>
- <h3>This test demonstrates the `off-canvas-absolute` class.</h3>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ </div>
+ </div>
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
</div>
- </div>
-
</div>
-
</div>
<script src="../assets/js/vendor.js"></script>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div class="off-canvas-wrapper">
+
+ <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel</h3>
+ </div>
- <div class="off-canvas-wrapper">
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel</h3>
- </div>
-
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel.</h3>
- </div>
+ <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel.</h3>
+ </div>
- <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel</h3>
- </div>
+
<div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel</h3>
+ </div>
- <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel.</h3>
- </div>
+
<div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel.</h3>
+ </div>
- <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-force-to="top">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel with force-to set to top</h3>
- </div>
+
<div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-force-to="top">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel with force-to set to top</h3>
+ </div>
- <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-force-to="bottom">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
- </div>
+
<div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-force-to="bottom">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
+ </div>
- <div class="off-canvas position-left" id="noScroll" data-off-canvas data-content-scroll="false">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel with content scroll disabled.</h3>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- <p>The content <b>Inside</b> the panel should still be scrollable.</p>
- </div>
+
<div class="off-canvas position-left" id="noScroll" data-off-canvas data-content-scroll="false">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel with content scroll disabled.</h3>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+
<p>The content <b>Inside</b> the panel should still be scrollable.</p>
+ </div>
- <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
- </div>
+
<div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
+ </div>
- <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-close-on-click="false">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
- </div>
+
<div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-close-on-click="false">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
+ </div>
- <div class="off-canvas-content" data-off-canvas-content>
- <div class="row column">
+
<div class="off-canvas-content" data-off-canvas-content>
+
<div class="row column">
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
- <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
- <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
- <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+ <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+ <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
+ <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
- <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
+ <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="noScroll">No scroll</button>
- <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
- <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="noScroll">No scroll</button>
+ <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
+ <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
+ </div>
- <h1>This test should show all off canvas options working together.</h1>
+ <h1>This test should show all off canvas options working together.</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
- <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
- <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
- <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+ <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+ <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
+ <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
- <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasForceTop">Force to top</button>
+ <button type="button" class="button" data-toggle="offCanvasForceBottom">Force to bottom</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="noScroll">No scroll</button>
- <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
- <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="noScroll">No scroll</button>
+ <button type="button" class="button" data-toggle="noOverlay">No overlay</button>
+ <button type="button" class="button" data-toggle="noCloseOnClick">No close on click</button>
+ </div>
+ </div>
+ </div>
</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>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div class="off-canvas-wrapper">
- <div class="off-canvas-wrapper">
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel.</h3>
- <p><a data-open="exampleModal1">Click me for a modal</a></p>
- </div>
+ <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel.</h3>
+ <p><a data-open="exampleModal1">Click me for a modal</a></p>
+ </div>
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel.</h3>
- <p><a data-open="exampleModal1">Click me for a modal</a></p>
- </div>
+
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel.</h3>
+
<p><a data-open="exampleModal1">Click me for a modal</a></p>
+ </div>
- <div class="off-canvas-content" data-off-canvas-content>
- <div class="row column">
+
<div class="off-canvas-content" data-off-canvas-content>
+
<div class="row column">
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
- <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
- </div>
+
<div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+ <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+ </div>
- <h1>This test demonstrates the compatibility of off canvas with a reveal modal.</h1>
+ <h1>This test demonstrates the compatibility of off canvas with a reveal modal.</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <div class="reveal" id="exampleModal1" data-reveal>
- <h1>This is a modal.</h1>
- <p>I shouldn't close off canvas or break it in any way when opened or closed.</p>
- <button class="close-button" data-close aria-label="Close modal" type="button">
- <span aria-hidden="true">×</span>
- </button>
- </div>
- </div>
+ <div class="reveal" id="exampleModal1" data-reveal>
+ <h1>This is a modal.</h1>
+ <p>I shouldn't close off canvas or break it in any way when opened or closed.</p>
+ <button class="close-button" data-close aria-label="Close modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ </div>
+ </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>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div class="off-canvas-wrapper">
+
+ <div class="off-canvas position-left reveal-for-large" id="offCanvasLeft" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel. It should reveal on large and up screens.</h3>
+ </div>
- <div class="off-canvas-wrapper">
-
- <div class="off-canvas position-left reveal-for-large" id="offCanvasLeft" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel. It should reveal on large and up screens.</h3>
- </div>
+ <div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel. It should reveal on medium and up screens.</h3>
+ </div>
- <div class="off-canvas position-right reveal-for-medium" id="offCanvasRight" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel. It should reveal on medium and up screens.</h3>
- </div>
+ <div class="off-canvas-content" data-off-canvas-content>
+ <div class="row column">
- <div class="off-canvas-content" data-off-canvas-content>
- <div class="row column">
+ <div class="button-group expanded">
+ <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+ <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
- <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
- </div>
+ <h1>This test demonstrates the reveal-for-x classes.</h1>
- <h1>This test demonstrates the reveal-for-x classes.</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ </div>
+ </div>
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
</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>
- <div id="page" class="off-canvas-wrapper">
-
- <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel</h3>
- </div>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div id="page" class="off-canvas-wrapper">
+
+ <div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel</h3>
+ </div>
- <div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel</h3>
- </div>
+
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel</h3>
+ </div>
- <div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel</h3>
- </div>
+
<div class="off-canvas position-top" id="offCanvasTop" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel</h3>
+ </div>
- <div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel</h3>
- </div>
+
<div class="off-canvas position-bottom" id="offCanvasBottom" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel</h3>
+ </div>
- <div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-left" id="offCanvasLeftOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-right" id="offCanvasRightOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-top" id="offCanvasTopOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-transition="overlap">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
- </div>
+
<div class="off-canvas position-bottom" id="offCanvasBottomOverlap" data-off-canvas data-transition="overlap">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel with 'overlap' transition</h3>
+ </div>
- <div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-force-to="top">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a top off-canvas panel with force-to set to top</h3>
- </div>
+
<div class="off-canvas position-top" id="offCanvasForceTop" data-off-canvas data-force-to="top">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a top off-canvas panel with force-to set to top</h3>
+ </div>
- <div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-force-to="bottom">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
- </div>
+
<div class="off-canvas position-bottom" id="offCanvasForceBottom" data-off-canvas data-force-to="bottom">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a bottom off-canvas panel with force-to set to bottom</h3>
+ </div>
- <div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
- </div>
+
<div class="off-canvas position-left" id="noOverlay" data-off-canvas data-content-overlay="false">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a left off-canvas panel with no content overlay. You can still click the content to close me.</h3>
+ </div>
- <div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-close-on-click="false">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
- </div>
+
<div class="off-canvas position-right" id="noCloseOnClick" data-off-canvas data-close-on-click="false">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This is a right off-canvas panel with no close on click. You need to manually close me (or use Escape)</h3>
+ </div>
- <div id="content" class="off-canvas-content" data-off-canvas-content>
-
- <div class="top-bar-container" data-sticky-container>
- <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width: 100%;">
- <div class="top-bar">
- <div class="row column">
- <div class="top-bar-left">
- <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
- <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
- <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
- <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
- </div>
- <div class="top-bar-right">
- <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
- <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+ <div id="content" class="off-canvas-content" data-off-canvas-content>
+
+ <div class="top-bar-container" data-sticky-container>
+ <div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width: 100%;">
+ <div class="top-bar">
+ <div class="row column">
+ <div class="top-bar-left">
+ <button type="button" class="button" data-toggle="offCanvasLeft">Left Push</button>
+ <button type="button" class="button" data-toggle="offCanvasRight">Right Push</button>
+ <button type="button" class="button" data-toggle="offCanvasTop">Top Push</button>
+ <button type="button" class="button" data-toggle="offCanvasBottom">Bottom Push</button>
+ </div>
+ <div class="top-bar-right">
+ <button type="button" class="button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
+ <button type="button" class="button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
+ </div>
+ </div>
</div>
</div>
</div>
- </div>
- </div>
- <div class="row column">
+
<div class="row column">
- <h1>This test is designed to show how off canvas works with the sticky plugin.</h1>
+ <h1>This test is designed to show how off canvas works with the sticky plugin.</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- </div>
- </div>
+ </div>
+ </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>
+ <div class="grid-x grid-padding-x">
+ <div class="cell">
+ <div class="off-canvas-wrapper">
- <div class="off-canvas-wrapper">
+ <div class="off-canvas position-left" id="defaultTransition" data-off-canvas>
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This off canvas should open/close using the default CSS transition duration time.</h3>
+ </div>
- <div class="off-canvas position-left" id="defaultTransition" data-off-canvas>
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This off canvas should open/close using the default CSS transition duration time.</h3>
- </div>
+ <div class="off-canvas position-left" id="fastTransition" data-off-canvas data-transition-time="0.15s">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This off canvas should open/close with a 0.15s transition duration.</h3>
+ </div>
- <div class="off-canvas position-left" id="fastTransition" data-off-canvas data-transition-time="0.15s">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This off canvas should open/close with a 0.15s transition duration.</h3>
- </div>
+ <div class="off-canvas position-left" id="slowTransition" data-off-canvas data-transition-time="1s">
+ <button class="close-button" aria-label="Close panel" type="button" data-close>
+ <span aria-hidden="true">×</span>
+ </button>
+ <h3>This off canvas should open/close with a 1s transition duration.</h3>
+ </div>
- <div class="off-canvas position-left" id="slowTransition" data-off-canvas data-transition-time="1s">
- <button class="close-button" aria-label="Close panel" type="button" data-close>
- <span aria-hidden="true">×</span>
- </button>
- <h3>This off canvas should open/close with a 1s transition duration.</h3>
- </div>
+ <div class="off-canvas-content" data-off-canvas-content>
+ <div class="row column">
- <div class="off-canvas-content" data-off-canvas-content>
- <div class="row column">
+ <div class="button-group expanded">
+ <button type="button" class="button" data-toggle="defaultTransition">Default</button>
+ <button type="button" class="button" data-toggle="fastTransition">Fast</button>
+ <button type="button" class="button" data-toggle="slowTransition">Slow</button>
+ </div>
- <div class="button-group expanded">
- <button type="button" class="button" data-toggle="defaultTransition">Default</button>
- <button type="button" class="button" data-toggle="fastTransition">Fast</button>
- <button type="button" class="button" data-toggle="slowTransition">Slow</button>
- </div>
+ <h1>This test should show the transition-time attribute.</h1>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
+ Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
+ Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
+ Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
+ </div>
+ </div>
- <h1>This test should show the transition-time attribute.</h1>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eros massa, lacinia sed rutrum non, sodales quis urna. In hac habitasse platea dictumst. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in rutrum magna, a varius lorem. Suspendisse nec nisi massa. Sed id lacus feugiat, commodo risus id, vulputate odio. Quisque aliquam lacus id mi euismod, ut sodales odio porttitor. Donec finibus dui vitae odio ultricies, sit amet volutpat risus bibendum. Nulla sagittis rhoncus fermentum. Nulla nisi mi, cursus posuere mollis in, faucibus ut lacus.
- Nulla quis erat ut ex rhoncus vulputate quis sit amet tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis turpis enim, luctus a quam sed, ornare commodo risus. Praesent vestibulum, leo ut posuere aliquam, ante arcu imperdiet dui, in suscipit lacus massa quis tortor. Sed scelerisque lacus justo. Pellentesque condimentum odio vitae quam tempus ultrices. Fusce euismod egestas ante quis interdum. Curabitur id ligula vel mauris ullamcorper vestibulum. Quisque non aliquet metus, a bibendum sapien.
- Sed sem libero, tempor sit amet sodales in, pharetra vestibulum elit. Quisque venenatis, libero id mattis vulputate, ligula diam luctus justo, quis pharetra quam sapien quis urna. Proin ligula velit, porttitor pellentesque molestie non, pulvinar at nisi. Nullam ullamcorper, nisi eget iaculis bibendum, augue neque placerat sem, at efficitur lectus mauris eget enim. Integer vulputate eros at blandit posuere. Pellentesque ac odio quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus massa nunc, blandit a vestibulum vitae, volutpat in felis. Curabitur porttitor diam ac lorem malesuada, sit amet ultricies risus pharetra. Praesent nunc odio, tempus quis lacus sit amet, malesuada pulvinar sem.
- Morbi ultrices enim nec molestie luctus. Vestibulum nec leo id leo elementum tincidunt in ut velit. Sed sit amet ante egestas, hendrerit est nec, euismod tortor. Donec semper erat orci, id posuere mauris rutrum at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer a orci luctus, pellentesque arcu sit amet, porta lacus. Mauris non blandit eros, ut euismod felis. Sed maximus dolor a finibus consequat. Integer nisl odio, interdum sed tempus et, ultrices vel augue. Vivamus at tincidunt purus, sit amet interdum magna. Nam sit amet efficitur leo. Nullam ac varius diam, pellentesque laoreet diam.</p>
</div>
- </div>
-
</div>
+ </div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
projects / thirdparty / foundation / foundation-sites.git / commitdiff
