arman_mohtadji/Ceras
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
armansansd
2023-07-12 16:31:19 +01:00
commit 3424b1927b
23306 changed files with 2217776 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/ceras/node_modules/foundation-sites/test/visual/_template.html
Generated Vendored Executable
+28
View File
@@ -0,0 +1,28 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<p>Use this template to create a new test page.</p>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/abide-radio.html
Generated Vendored Executable
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide Radio Buttons</h1>
<p>This form has required radio buttons. If you try to submit without picking one, it
should show an error. When you then pick one, the error should clear and let you submit.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input required type="radio" name="example1" value="yes" id="example1Yes" />
<label for="example1Yes">Yes</label>
<input required type="radio" name="example1" value="no" id="example1No" />
<label for="example1No">No</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
<p>This form has <strong>one</strong> required radio button. If you try to submit without picking one, it
should show an error. When you then pick one, the error should clear and let you submit.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input type="radio" name="example3" value="yes" id="example3Yes" />
<label for="example3Yes">Yes</label>
<input required type="radio" name="example3" value="no" id="example3No" />
<label for="example3No">No</label>
<input type="radio" name="example3" value="maybe" id="example3Maybe" />
<label for="example3Maybe">Maybe</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
<p>This form has optional radio buttons. It should let you submit with or without picking one.</p>
<form id="form" data-abide novalidate>
<div class="alert callout hide" data-abide-error>
<p>This form has errors.</p>
</div>
<fieldset>
<legend>Fieldset Label</legend>
<input type="radio" name="example2" value="yes" id="example2Yes" />
<label for="example2Yes">Yes</label>
<input type="radio" name="example2" value="no" id="example2No" />
<label for="example2No">No</label>
</fieldset>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
<hr>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/accessibility.html
Generated Vendored Executable
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide a11y</h1>
<p>This has a global error and errors for each fields.
<ul>
<li>When the form is submit with invalid fields, the global error <strong>should be spelt</strong>.</li>
<li>When invalid fields are focused, the field should be <strong>described as "invalid"</strong> and the field error <strong>should be spelt</strong>.</li>
</ul>
</p>
<form id="form" data-abide novalidate>
<div class="alert callout" data-abide-error style="display: none;">
<p>This form has errors.</p>
</div>
<label>
This field is not required
<input type="text" placeholder="Not required">
</label>
<label>
This field is required
<input type="text" placeholder="Required" required>
</label>
<label>
This field is required and has an error message
<input type="text" placeholder="Required" required>
<span class="form-error">I am the error message and I should be spelt</span>
</label>
<button class="button" type="submit">Submit</button>
<button class="button" type="reset">Reset</button>
</form>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/hidden_and_ignored_fields.html
Generated Vendored Executable
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide: Hidden and Ignored Fields</h1>
<div class="callout">
<p>This form has a hidden field and a required text field.</p>
<p>Errors should be displayed properly.</p>
<form data-abide novalidate>
<input required type="text" placeholder="Required - try submitting without a value">
<span class="form-error">This field is required</span>
<input type="hidden" value="foo">
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
</div>
<div class="callout">
<p>This form has a required text field and an ignored field that is ignored after page load.</p>
<p>The ignored field should be ignored.</p>
<form data-abide novalidate>
<div class="row column">
<input required type="text" placeholder="Required">
<span class="form-error">This field is required</span>
</div>
<div class="row column">
<input required id="ignoreAfter" type="text" placeholder="Ignored">
<span class="form-error">You should never see this error!</span>
</div>
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
Foundation.Abide.defaults.patterns['customPattern'] = /^\w{4,16}$/;
$(document).foundation();
$("#ignoreAfter").attr("data-abide-ignore", true);
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/abide/text.html
Generated Vendored Executable
+120
View File
@@ -0,0 +1,120 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Abide: Text Fields</h1>
<p>This form has one required text field and one optional text field.</p>
<form data-abide novalidate>
<input required type="text" placeholder="Required">
<input type="text" placeholder="Not required">
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
<hr>
<p>This form has valid and invalid inputs for other text input types. (In browsers that support color pickers, you won't see a text field, but a color selection button instead.)</p>
<form data-abide novalidate>
<fieldset>
<legend>color</legend>
<input type="color" required value="#ffffff">
<input type="color" required value="wefwf89">
</fieldset>
<fieldset>
<legend>date</legend>
<input type="date" required value="1970-01-31">
<input type="date" required value="dwepdw9449tbv">
</fieldset>
<fieldset>
<legend>datetime</legend>
<input type="datetime" required value="1970-01-31T05:30:00Z">
<input type="datetime" required>
</fieldset>
<fieldset>
<legend>email</legend>
<input type="email" required value="foundation@zurb.com">
<input type="email" required value="notanemail.lol">
</fieldset>
<fieldset>
<legend>month</legend>
<input type="month" required value="2016-01">
<input type="month" required value="10293">
</fieldset>
<fieldset>
<legend>number</legend>
<input type="number" required value="1">
<input type="number" required value="lol">
</fieldset>
<fieldset>
<legend>search</legend>
<input type="search" required>
</fieldset>
<fieldset>
<legend>tel</legend>
<input type="tel" required value="3175554848">
<input type="tel" required value="lol">
</fieldset>
<fieldset>
<legend>time</legend>
<input type="time" required value="05:30:00">
<input type="time" required value="x:du:dwef">
</fieldset>
<fieldset>
<legend>url</legend>
<input type="url" required value="http://foundation.zurb.com">
<input type="url" required value="foundation@zurb.com">
</fieldset>
<fieldset>
<legend>week</legend>
<input type="week" required value="2016-W01">
<input type="week" required value="101223">
</fieldset>
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
<hr>
<p>This field uses a custom pattern. The field is valid if the input is between 4 and 16 characters long.</p>
<form data-abide novalidate>
<input required type="text" pattern="customPattern">
<button type="submit" class="button">Submit</button>
<button type="reset" class="button">Reset</button>
</form>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
Foundation.Abide.defaults.patterns['customPattern'] = /^\w{4,16}$/;
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/accordionmenu.html
Generated Vendored Executable
+70
View File
@@ -0,0 +1,70 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu</h1>
<div class="example" style="max-width: 250px">
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/keyboard.html
Generated Vendored Executable
+44
View File
@@ -0,0 +1,44 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu: Keyboard Control</h1>
<ul>
<li>The Tab and down arrow keys should navigate down the menu, including open sub-menus.</li>
<li>Shift-tab and up arrow keys should navigate up the menu, including open sub-menus.</li>
<li>When focused on a parent menu, the space bar and Enter key should open or close the menu.</li>
<li>When focused on a link item, the space bar and Center key should navigate to the link.</li>
</ul>
<ul class="vertical menu" data-accordion-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li><a href="google.com">External link</a></li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/parent-link.html
Generated Vendored Executable
+73
View File
@@ -0,0 +1,73 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Accordion Menu Parent Link</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu</h1>
<p>With parent link, parent should be reproduced in child, so expanding 'Two (Parent)' should
show Two (Parent) inside</p>
<div class="example" style="max-width: 250px">
<ul class="vertical menu accordion-menu" data-accordion-menu data-parent-link="true">
<li><a href="#">One</a></li>
<li>
<a href="#">Two (Parent)</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion-menu/submenu-toggle.html
Generated Vendored Executable
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion Menu: Submenu Toggle</h1>
<ul>
<li>Any link with a submenu should contain a .submenu-toggle button.</li>
<li>This button should toggle the submenu.</li>
<li>The parent link (if it has a link) should work as a link.</li>
</ul>
<ul class="accordion-menu vertical menu" data-accordion-menu data-submenu-toggle="true">
<li>
<a href="http://www.github.com">Item 1 (external)</a>
<ul class="menu vertical">
<li><a href="google.com">Item 1A (external)</a></li>
<li>
<a href="#">Item 1B</a>
</li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical">
<li><a href="#">Item 2A</a></li>
<li>
<a href="#">Item 2B</a>
<ul class="menu vertical">
<li><a href="google.com">Item 2BA (external)</a></li>
<li>
<a href="#">Item 2BB</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion/focus.html
Generated Vendored Executable
+78
View File
@@ -0,0 +1,78 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion: Focus Management</h1>
<p>This is a stock accordion. The tab key will cycle through accordion panes without opening/closing. The up/down arrow keys will cycle through accordion panes, opening the one you move to, and closing the one you move away from.</p>
<ul class="accordion" data-accordion role="tablist">
<li class="accordion-item is-active" data-accordion-item>
<a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
<div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
<p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
<div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
<p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
<div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
<p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
</ul>
<hr>
<p>This is an accordion with multiExpand set to "true". Using the up/down arrow keys will cycle between accordion titles <em>without opening/closing them</em>, and pressing space will open or close a pane.</p>
<ul class="accordion" data-accordion role="tablist" data-multi-expand="true">
<li class="accordion-item is-active" data-accordion-item>
<a href="#panel-1-1" role="tab" class="accordion-title" id="panel-1-1-heading" aria-controls="panel-1-1">Accordion Panel One</a>
<div id="panel-1-1" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-1-heading">
<p>Panel one content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-2" role="tab" class="accordion-title" id="panel-1-2-heading" aria-controls="panel-1-2">Accordion Panel Two</a>
<div id="panel-1-2" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-2-heading">
<p>Panele two content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#panel-1-3" role="tab" class="accordion-title" id="panel-1-3-heading" aria-controls="panel-1-3">Accordion Panel Three</a>
<div id="panel-1-3" class="accordion-content" role="tabpanel" data-tab-content aria-labelledby="panel-1-3-heading">
<p>Panel three content goes here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra sodales nulla, eu consequat quam fringilla sed. Suspendisse potenti. Nam ac condimentum mi. Quisque enim arcu, dapibus nec congue nec, luctus non est.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/accordion/nested.html
Generated Vendored Executable
+73
View File
@@ -0,0 +1,73 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.accordion-title[aria-expanded="true"] {
border-top: 1px solid dodgerblue;
}
.accordion-title[aria-selected="true"] {
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Accordion: Nesting</h1>
<p>These are nested accordions.</p>
<ul>
<li>A title with <code>aria-expanded="true"</code> has a blue border.</li>
<li>A title with <code>aria-selected="true"</code> has a red border.</li>
<li>An open item should have <strong>both borders</strong>.</li>
<li>Manipulating one accordion shouldn't affect the other.</li>
</ul>
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>Base Accordion</p>
<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
<li class="accordion-item is-active" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
Nested Accordion
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
Nested Accordion
</div>
</li>
</ul>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#" class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>Base Accordion</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/breadcrumbs/breadcrumbs.html
Generated Vendored Executable
+37
View File
@@ -0,0 +1,37 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell small-12">
<h2>Breadcrumbs</h2>
<nav aria-label="You are here:" role="navigation">
<ul class="breadcrumbs">
<li><a href="#0">Home</a></li>
<li><a href="#0">Features</a></li>
<li class="disabled">Gene Splicing</li>
<li>
<span class="show-for-sr">Current: </span> Cloning
</li>
</ul>
</nav>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/button/button-group.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
Buttons should be stacked full-width here
<div class="button-group stacked">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
Buttons should be auto width here and stack for small
<div class="button-group stacked-for-small">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
</div>
Buttons should be expanded here and stack for medium and small
<div class="button-group stacked-for-medium expanded">
<a class="button">One</a>
<a class="button">Two</a>
<a class="button">Three</a>
<a class="button">Four</a>
<a class="button">Five</a>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/button/button.html
Generated Vendored Executable
+31
View File
@@ -0,0 +1,31 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>These hollow buttons should have arrow color that matches border.</h4>
<button class="dropdown hollow button tiny ">Dropdown Button</button>
<button class="dropdown hollow secondary button small ">Dropdown Button</button>
<button class="dropdown hollow alert button">Dropdown Button</button>
<button class="dropdown hollow success button large ">Dropdown Button</button>
<button class="dropdown hollow warning button expanded ">Dropdown Button</button>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/button/cursor.html
Generated Vendored Executable
+29
View File
@@ -0,0 +1,29 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h2>Buttons</h2>
<button>Default Button</button>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/card/card.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
</head>
<body>
<div class="row small-up-2 medium-up-3">
<div class="column flex-container">
<div class="card">
<img src="http://placehold.it/300x100">
<div class="card-section">
<h4>Making sure</h4>
<p>card doesnt shrink</p>
</div>
</div>
</div>
<div class="column flex-container">
<div class="card">
<img src="http://placehold.it/300x100">
<div class="card-section">
<h4>Making sure</h4>
<p>images below are spread apart and vertically centered</p>
</div>
<div class="card-divider align-justify align-middle">
<img src="http://placehold.it/15">
<img src="http://placehold.it/15">
<img src="http://placehold.it/15">
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/controls/close-button.html
Generated Vendored Executable
+41
View File
@@ -0,0 +1,41 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Close Button</h1>
<div class="callout" data-closable>
<p>You can so totally close this!</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="success callout" data-closable="slide-out-right">
<p>You can close me too, and I close using a Motion UI animation.</p>
<button class="close-button" aria-label="Dismiss alert" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-menu-auto-height.html
Generated Vendored Executable
+272
View File
@@ -0,0 +1,272 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-12" style="margin-top: 20px;margin-bottom: 20px;">
<p>Drilldown should auto adjust height even if in Responsive Menu</p>
<div class="title-bar" data-responsive-toggle="example-autoheight" data-hide-for="">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="callout" id="example-autoheight">
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="cell medium-4">
<p>Drilldown should auto adjust height and animate height</p>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="cell medium-4">
<p>Drilldown should auto adjust height</p>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-close-on-click="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
<div class="cell medium-4">
<p>Drilldown should auto adjust height and change behavior</p>
<div class="callout">
<ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-auto-height="true" data-animate-height="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-menu-parent-link.html
Generated Vendored Executable
+71
View File
@@ -0,0 +1,71 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.is-submenu-parent-item {
background: #eee;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-6 cell">
<p style="margin-top: 20px;margin-bottom: 20px;">Parent links should be added to the top of their sub-menu as a link.</p>
<ul class="vertical menu drilldown" data-drilldown data-parent-link="true">
<li>
<a href="http://foundation.zurb.com/develop/getting-started.html">Develop</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
<li><a href="http://foundation.zurb.com/templates.html">HTML Templates</a></li>
<li><a href="http://foundation.zurb.com/sites/resources.html">Resources</a></li>
<li><a href="http://foundation.zurb.com/develop/building-blocks.html">Building Blocks</a></li>
<li><a href="http://foundation.zurb.com/develop/yeti-launch.html">Yeti Launch</a></li>
<li><a href="http://foundation.zurb.com/develop/contribute.html">Contribute</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li>
<a href="http://foundation.zurb.com/develop/getting-started.html">Top level Item</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
<li>
<a href="http://foundation.zurb.com/support/support.html">2nd level Item</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
<li>
<a href="http://foundation.zurb.com/support/premium-support.html">3rd level Item</a>
<ul class="vertical menu nested">
<li><a href="http://foundation.zurb.com/sites.html">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/emails.html">Foundation for Email</a></li>
<li><a href="http://foundation.zurb.com/apps.html">Foundation for Apps</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-menu-scroll-top.html
Generated Vendored Executable
+209
View File
@@ -0,0 +1,209 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<h4>I scroll to top Position of drilldown element</h4>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="0" data-scroll-top-element="">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<h4>I scroll to top Position of drilldown element with a -30px offset also have a close on click</h4>
<div class="callout">
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true" data-scroll-top-offset="-30" data-scroll-top-element="" data-close-on-click="true">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<h4>I am responsive and scroll to top Position of drilldown element with a -30px offset</h4>
<div class="callout">
<ul id="mainMenuLeft" class="vertical drilldown menu" data-responsive-menu="drilldown medium-dropdown" data-scroll-top="true" data-scroll-top-offset="-30">
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li> <a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/drilldown-show-menu.html
Generated Vendored Executable
+111
View File
@@ -0,0 +1,111 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet">
<style>
#menu-a a { background: rgb(255,230,230); }
#menu-b a { background: rgb(230,255,230); }
#menu-c a { background: rgb(230,230,255); }
#menu-x a { background: rgb(255,115,0); }
label { display: inline-block; margin-right: 20px; cursor: pointer; }
label > input[type="radio"] { margin-right: 5px; }
.is-drilldown { margin-bottom: 10px; }
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="auto cell"></div>
<div class="medium-6 cell">
<div class="callout">
<p>should be possible to open any drilldown (sub)menu via JS</p>
<div class="expanded button-group">
<button type="button" class="button" data-show-menu="menu-a">Show A</button>
<button type="button" class="button" data-show-menu="menu-b">Show B</button>
<button type="button" class="button" data-show-menu="menu-c">Show C</button>
<button type="button" class="button" data-show-menu="menu-x">Show X</button>
</div>
<div>
<form>
<label><input type="radio" name="comparison-switch" value="new" checked> Use new showMenu</label>
<label><input type="radio" name="comparison-switch" value="old"> Use current show</label>
</form>
</div>
</div>
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" id="menu-a">
<li>
<a href="#">Item A1</a>
<ul class="vertical menu nested" id="menu-b">
<li><a href="#">Item B1</a></li>
<li><a href="#">Item B2</a></li>
<li><a href="#">Item B3</a></li>
<li>
<a href="#">Item B4</a>
<ul class="vertical menu nested" id="menu-c">
<li><a href="#">Item C1</a></li>
<li><a href="#">Item C2</a></li>
<li><a href="#">Item C3</a></li>
</ul>
</li>
<li><a href="#">Item B5</a></li>
</ul>
</li>
<li><a href="#">Item A2</a></li>
<li>
<a href="#">Item A3</a>
<ul class="vertical menu nested" id="menu-x">
<li><a href="#">Item X1</a></li>
<li><a href="#">Item X2</a></li>
</ul>
</li>
<li><a href="#">Item A4</a></li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione id accusantium dolore sequi architecto at soluta, nulla nam? Nemo magnam repellendus iure, ut recusandae voluptatibus, dolores pariatur facere illo! Sapiente.
</p>
</div>
<div class="auto cell"></div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
var demoType;
$(document).on('click', '[data-show-menu]', function(e){
e.preventDefault();
var $menu = $('#'+$(this).data('showMenu'));
if (demoType == 'old') {
if ($menu.is('[data-drilldown]')) {
// No possibility to show root except of hide all
$('[data-drilldown]').foundation('_hideAll');
} else {
$('[data-drilldown]').foundation('_show', $menu.parent('li'));
}
} else {
$('[data-drilldown]').foundation('_showMenu', $menu);
}
});
$(document).on('change', 'input[name="comparison-switch"]', function(){
demoType = $('input[name="comparison-switch"]:checked').val();
console.log('swtiched to ['+demoType+']');
});
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/drilldown/long-titles.html
Generated Vendored Executable
+78
View File
@@ -0,0 +1,78 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.test-drilldown-wrapper {
width: 300px;
}
.is-drilldown-submenu {
background: #eee;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-6">
<p>Submenus should not be cut off at the bottom.</p>
<div class="test-drilldown-wrapper">
<ul class="vertical menu drilldown" data-drilldown>
<li>
<a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li>
<a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li>
<a href="#">Item</a>
<ul class="vertical menu nested">
<li><a href="#">Item</a></li>
<li><a href="#">Item With the Longest Title You've Probably Ever Seen</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/basic-dropdown-menu-rtl.html
Generated Vendored Executable
+59
View File
@@ -0,0 +1,59 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation-rtl.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<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>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/dropdown-menu-cross-leave.html
Generated Vendored Executable
+53
View File
@@ -0,0 +1,53 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<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>
<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>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/left-aligned-dropdown-menu-inside-top-bar-right.html
Generated Vendored Executable
+141
View File
@@ -0,0 +1,141 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en"> <![endif]-->
<html class="no-js" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</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>
<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>
<li>
<a href="#Item-1B">Item 1B</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-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-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>
<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>
<li>
<a href="#Item-1B">Item 1B</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-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-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>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/right-aligned-dropdown-menu.html
Generated Vendored Executable
+140
View File
@@ -0,0 +1,140 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
</style>
</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>
<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>
<li>
<a href="#Item-1B">Item 1B</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-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-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>
<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>
<li>
<a href="#Item-1B">Item 1B</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-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-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>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown-menu/submenu-mouse-reenter.html
Generated Vendored Executable
+64
View File
@@ -0,0 +1,64 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<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>Item 1</a>
<ul class="menu">
<li><a href="#">Item 1A</a></li>
<li>
<a href="#">Item 1B</a>
<ul class="menu">
<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 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>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/basic-dropdown-rtl.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="rtl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<link href="../assets/css/foundation-rtl.css" rel="stylesheet" />
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: RTL</h1>
<p>Bottom aligned:</p>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
</div>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
<p>This is a dropdown.</p>
</div>
<p>Top aligned:</p>
<button class="button" type="button" data-toggle="example-dropdown-2">Toggle Dropdown</button>
<div class="dropdown-pane top" id="example-dropdown-2" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
</div>
<button class="button" type="button" data-toggle="example-dropdown-3">Hoverable Dropdown</button>
<div class="dropdown-pane top" id="example-dropdown-3" data-dropdown data-hover="true" data-hover-pane="true">
<p>This is a dropdown.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/close-on-click.html
Generated Vendored Executable
+42
View File
@@ -0,0 +1,42 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: closeOnClick option</h1>
<p>This dropdown will only close if you click the button again.</p>
<button class="dropdown button" type="button" data-toggle="dropdown1">Toggle Dropdown</button>
<div id="dropdown1" class="dropdown-pane" data-dropdown>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
</div>
<hr>
<p>This dropdown will close if you click anywhere outside of it.</p>
<button class="dropdown button" type="button" data-toggle="dropdown2">Toggle Dropdown</button>
<div id="dropdown2" class="dropdown-pane" data-dropdown data-close-on-click="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita mollitia veritatis dicta aspernatur vel reiciendis, fugit. Similique delectus laboriosam aperiam, unde debitis at minus hic rerum repudiandae, officiis iusto deleniti!</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/dropdown-on-input.html
Generated Vendored Executable
+38
View File
@@ -0,0 +1,38 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Attached to an input</h1>
<p>When the Dropdown is attached to an input element, it should not receive focus when a space is entered into the input..</p>
<div class="row">
<div class="column">
<input type="text" data-toggle="dropdown" aria-describedby="dropdown" placeholder="Click to open Dropdown">
<div class="dropdown-pane" id="dropdown" data-dropdown data-close-on-click="true">
<p>Now press space to see if I receive focus. This should not be the case.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/explicit-positioning.html
Generated Vendored Executable
+135
View File
@@ -0,0 +1,135 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Explicit Positioning Content - no offsets</h1>
<p>These dropdowns test various positioning and alignments. Valid
positions are left/right/top/bottom. Valid alignments are
left/right/top/bottom/center. Left align means left sides should line up.
Right align means right sides should line up. Center align means centers should line up.
</p>
<h4>Top and Bottom positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Bottom Left</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>This dropdown has position bottom and alignment left should align with its top left corner at the bottom left of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Center</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position bottom and alignment center should align below the button with its center aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Right</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>This dropdown has position bottom and alignment right should align with its top right corner at the bottom right of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Left</p>
<button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
<p>This dropdown has position top and alignment left should align with its bottom left corner at the top left of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Center</p>
<button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position top and alignment center should align above with its center aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Right</p>
<button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
<p>This dropdown has position top and alignment right should align with its bottom right corner at the top right of the button</p>
</div>
</div>
</div>
<h4>Left and Right Positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Right Top</p>
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
<p>This dropdown has position right and alignment top should align with its top left corner at the top right of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Top</p>
<button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
<p>This dropdown has position left and alignment top should align with its top right corner at the top left of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Center</p>
<button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position right and alignment center should align to the right of the button with the center of the dropdown vertically aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Center</p>
<button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
<p>This dropdown has position left and alignment center should align to the left of the button with the center of the dropdown vertically aligned with the center of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown has position right and alignment bottom should align with its bottom left corner at the bottom right of the button</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown has position left and alignment bottom should align with its bottom right corner at the bottom left of the button</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/in-top-bar.html
Generated Vendored Executable
+60
View File
@@ -0,0 +1,60 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Inside Top Bar</h1>
<p>Text fields inside of a top bar should not be super long.</p>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
Example form in a dropdown.
<form>
<div class="row">
<div class="medium-6 columns">
<label>Name
<input type="text" placeholder="Kirk, James T.">
</label>
</div>
<div class="medium-6 columns">
<label>Rank
<input type="text" placeholder="Captain">
</label>
</div>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/long.html
Generated Vendored Executable
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Long Content</h1>
<p>This dropdown should not go full-width, even if its contents are higher than the width of the window.</p>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
<p>This is a dropdown.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/mouse-on-browser-ui.html
Generated Vendored Executable
+50
View File
@@ -0,0 +1,50 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown with UI elements</h1>
<ul>
<li>1. Dropdown should stay open when the mouse goes on the input's autocomplete pane.</li>
<li>2. Dropdown should stay open when the mouse reenter in the dropdown from the autocomplete pane.</li>
<li>3. Dropdown should close when the nouse leave the dropdown from the autocomplete pane.</li>
</ul>
<button class="button" type="button" data-toggle="example-dropdown">Dropdown opening on hover</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-hover="true" data-hover-pane="true">
<form action="#" method="post">
<div class="row">
<div>
In order to test [3], there should be enough autocomplete suggestions for the autocomplete pane to overflow from the dropdown.
<input type="email" placeholder="Double-click to show autocomplete" autocomplete="email"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/offsets.html
Generated Vendored Executable
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Explicit Positioning Content - with offsets</h1>
<p>These dropdowns test various positioning and alignments WITH OFFSETS.
Valid positions are left/right/top/bottom. Valid alignments are
left/right/top/bottom/center. Left align means left sides should line up.
Right align means right sides should line up. Center align means centers should line up.
Positive Offsets should always be applied in a direction to create
space between the anchor and the dropdown.
</p>
<h4>Top and Bottom positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Bottom Left</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>This offset should push right and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Center</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="center" id="example-dropdown-bottom-center" data-dropdown data-auto-focus="true">
<p>This offset should push down and to the global right (right)</p>
</div>
</div>
<div class="cell medium-4">
<p>Bottom Right</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>This offset should push left and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Left</p>
<button class="button" type="button" data-toggle="example-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="left" id="example-dropdown-top-left" data-dropdown data-auto-focus="true">
<p>This offset should push right and up.</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Center</p>
<button class="button" type="button" data-toggle="example-dropdown-top-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="center" id="example-dropdown-top-center" data-dropdown data-auto-focus="true">
<p>This offset should push up and to the global right (right)</p>
</div>
</div>
<div class="cell medium-4">
<p>Top Right</p>
<button class="button" type="button" data-toggle="example-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="top" data-alignment="right" id="example-dropdown-top-right" data-dropdown data-auto-focus="true">
<p>This offset should push left and up.</p>
</div>
</div>
</div>
<h4>Left and Right Positioned</h4>
<div class="grid-x grid-padding-x">
<div class="cell medium-4">
<p>Right Top</p>
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
<p>This offset should push right and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Top</p>
<button class="button" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
<p>This offset should push left and down.</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Center</p>
<button class="button" type="button" data-toggle="example-dropdown-right-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="center" id="example-dropdown-right-center" data-dropdown data-auto-focus="true">
<p>This offset should push right and down</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Center</p>
<button class="button" type="button" data-toggle="example-dropdown-left-center">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="center" id="example-dropdown-left-center" data-dropdown data-auto-focus="true">
<p>This offset should push left and down</p>
</div>
</div>
<div class="cell medium-4">
<p>Right Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
<p>This offset should push right and up.</p>
</div>
</div>
<div class="cell medium-4">
<p>Left Bottom</p>
<button class="button" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-h-offset="50" data-v-offset="50" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
<p>This offset should push left and up.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/open-the-same-dropdown.html
Generated Vendored Executable
+43
View File
@@ -0,0 +1,43 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" dir="rtl"> <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="../assets/css/foundation.css" rel="stylesheet" />
<title>Foundation for Sites Testing</title>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Open The Same</h1>
<p>Clickable:</p>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<button class="button" type="button" data-toggle="example-dropdown">Toggle Dropdown</button>
<div class="dropdown-pane" id="example-dropdown" data-dropdown data-auto-focus="true">
<p>This is a dropdown.</p>
</div>
<p>Hoverable:</p>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<button class="button" type="button" data-toggle="example-dropdown-1">Hoverable Dropdown</button>
<div class="dropdown-pane" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
Just some junk that needs to be said. Or not. Your choice.
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/overflow-right-left-allowed.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>Right and Left Overflow Allowed</h4>
<div class="grid-x grid-padding-x" style="background-color:#ddd;">
<div class="cell medium-6">
<p>Top Right Default Behavior Overflow Allowed</p>
<button class="button" type="button" data-toggle="example2-dropdown-top-right-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
</div>
</div>
<div class="cell medium-6">
<p>Top Left Default Behavior Overflow Allowed</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-top-left-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Right Default Behavior Overflow Allowed</p>
<button class="button" type="button" data-toggle="example2-dropdown-bottom-right-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Left Default Behavior Overflow Allowed</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left-allowed">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left-allowed" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/overflow-right-left.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>Right and Left (no overflow)</h4>
<div class="grid-x grid-padding-x" style="background-color:#ddd;">
<div class="cell medium-6">
<p>Top Right Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example2-dropdown-top-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="right" id="example2-dropdown-top-right" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, molestias libero autem expedita placeat sequi.</p>
</div>
</div>
<div class="cell medium-6">
<p>Top Left Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-top-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="top" data-alignment="left" id="example2-dropdown-top-left" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium iure dolorem, earum maiores eos?</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Right Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example2-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example2-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime tempora officiis quam, libero quo cumque!</p>
</div>
</div>
<div class="cell medium-6">
<p>Bottom Left Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example2-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example2-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt nostrum tempora harum dolore consectetur reiciendis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/dropdown/overflow.html
Generated Vendored Executable
+97
View File
@@ -0,0 +1,97 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Dropdown: Overflow Handling</h1>
<p>These dropdowns test various overflow situations.</p>
<h4>Right and Left Overflow</h4>
<div class="row small-up-1 medium-up-2" style="background-color:#ddd; padding: 20px 0;">
<div class="column">
<p>Bottom Right Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the left, all inside the container</p>
</div>
</div>
<div class="column">
<p>Bottom Left Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the right, all inside the container</p>
</div>
</div>
<div class="column">
<p>Bottom Right Overflow Allowed</p>
<button class="button" type="button" data-toggle="example-dropdown-bottom-right-overflow">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="right" id="example-dropdown-bottom-right-overflow" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the right, breaking out of the container</p>
</div>
</div>
<div class="column">
<p>Bottom Left Overflow Allowed</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-bottom-left-overflow">Toggle Dropdown</button>
<div class="dropdown-pane" data-allow-overlap="true" data-parent-class="row" data-position="bottom" data-alignment="left" id="example-dropdown-bottom-left-overflow" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the bottom aligned with the left, breaking out of the container</p>
</div>
</div>
</div>
<h4>Bottom and Top Overflow</h4>
<div class="row small-up-2" style="background-color:#ddd;">
<div class="column">
<p>Right Bottom Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example-dropdown-right-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="bottom" id="example-dropdown-right-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the right aligned with the top of the button after realigning</p>
</div>
</div>
<div class="column">
<p>Left Bottom Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-left-bottom">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="bottom" id="example-dropdown-left-bottom" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the left aligned with the top of the button after realigning</p>
</div>
</div>
<div class="column">
<p>Right Top Default Behavior (no overflow)</p>
<button class="button" type="button" data-toggle="example-dropdown-right-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="right" data-alignment="top" id="example-dropdown-right-top" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the right aligned with the bottom of the button after realigning</p>
</div>
</div>
<div class="column">
<p>Left Top Default Behavior (no overflow)</p>
<button class="button float-right" type="button" data-toggle="example-dropdown-left-top">Toggle Dropdown</button>
<div class="dropdown-pane" data-parent-class="row" data-position="left" data-alignment="top" id="example-dropdown-left-top" data-dropdown data-auto-focus="true">
<p>This dropdown should be on the left aligned with the bottom of the button after realigning</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/equalizer/equalizer-events.html
Generated Vendored Executable
+91
View File
@@ -0,0 +1,91 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<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>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$('[data-equalizer]').on('preequalized.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('preequalizedrow.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('postequalizedrow.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('postequalized.zf.equalizer',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$('[data-equalizer]').on('resizeme.zf.trigger',function(e){
console.log($(this).attr('id')+' '+e.type);
});
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/column-row.html
Generated Vendored Executable
+27
View File
@@ -0,0 +1,27 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<style>.row.column {border: 1px solid #333;}</style>
<h1>Flex Grid: Column Row</h1>
<p>This text is inside a combined column/row.</p>
<p>An element with the classes <code>.row</code> and <code>.column</code> should have <code>display: block</code> and not <code>display: flex</code>, so the elements inside flow normally.</p>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/nesting.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
<style>
.test-1 {
border: 1px solid #333;
}
.test-2 {
background: #ccc;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Flex Grid: Nesting</h1>
<p>These are two nested grids. They should both fill the width of the window.</p>
</div>
</div>
<div class="row expanded test-1">
<div class="column">
<div class="row test-2">
<div class="column">
<p>This is a grid.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/top-bar.html
Generated Vendored Executable
+50
View File
@@ -0,0 +1,50 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
</head>
<body>
<div class="top-bar">
<div class="top-bar-title">
This should be left aligned as a title
</div>
<div class="top-bar-left">
This should be left aligned next to title
</div>
<div class="top-bar-right">
This should be right aligned
</div>
</div>
<hr/>
<div class="top-bar">
<div class="top-bar-title">
This should be left aligned as a title
</div>
<div class="top-bar-right">
This should be right aligned
</div>
</div>
<hr/>
<div class="top-bar">
<div class="top-bar-left">
This should be left aligned
</div>
<div class="top-bar-right">
This should be right aligned
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/flex-grid/unstack-block-grid.html
Generated Vendored Executable
+50
View File
@@ -0,0 +1,50 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
<style>
.column .column {
background: #eee;
}
.column .column .column {
background: #ddd;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Flex Grid: Unstack and Block Grid</h1>
<p>The top-level row has the class <code>.medium-unstack</code>, which means child columns stack on small, and sit side-by-side on medium screens and up.</p>
<p>The nested row has the class <code>.up-3</code>, which means its columns are 33% width no matter the screen size.</p>
<p>These two features should not interact. The two top-level columns always stack on small, and the three nested columns always stay the exact same percentage width.</p>
<div class="row medium-unstack">
<div class="column">
<strong>Column One</strong>
<div class="row up-3">
<div class="column">Block Grid Column One</div>
<div class="column">Block Grid Column Two</div>
<div class="column">Block Grid Column Three</div>
</div>
</div>
<div class="column"><strong>Column Two</strong></div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/form/input-group-float.html
Generated Vendored Executable
+35
View File
@@ -0,0 +1,35 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<h3>FLOAT Control Group: input-group height &amp; vertical alignment.</h3>
<p>Assure that all controls are flush at the top and bottom. Pay special
attention to the Submit button.</p>
</div>
<div class="medium-4 column">
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="number">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/form/input-group-xygrid.html
Generated Vendored Executable
+40
View File
@@ -0,0 +1,40 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="medium-12 cell">
<h3>XY Grid-Control Group: input-group height &amp; vertical alignment.</h3>
<p>Assure that all controls are flush at the top and bottom. Pay special
attention to the Submit button.</p>
</div>
<div class="medium-4 cell">
<div class="input-group">
<span class="input-group-label">$</span>
<input class="input-group-field" type="number">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/form/select-icon.html
Generated Vendored Executable
+33
View File
@@ -0,0 +1,33 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<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>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/centered-columns.html
Generated Vendored Executable
+62
View File
@@ -0,0 +1,62 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<h1>Centered Columns</h1>
</div>
<div class="row">
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
</div>
<div class="row">
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#eee;">All these grey columns should be centered, even the last one.</p>
</div>
</div>
<div class="row column"><hr></div>
<div class="row">
<div class="medium-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
<div class="medium-7 medium-centered columns">
<p style="background-color:#fbb;">This pink column should be centered and clear the blue column.</p>
</div>
<div class="medium-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
<div class="medium-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/collapse-nesting.html
Generated Vendored Executable
+78
View File
@@ -0,0 +1,78 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation-flex.css" rel="stylesheet" />
<style>
.bred {
border: 3px solid red;
}
.bgreen {
border: 3px solid green;
}
.byellow {
border: 3px solid orange;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Grid and Flex Grid: Nesting in collapsed row</h1>
<p>These are nested standard and collapsed rows. All rows should be aligned on the right and left.</p>
</div>
</div>
<div class="row collapse" >
<div class="column small-12" >
<div class="bred" >Single column in a Collapsed Row
<div class="row" >
<div class="column small-12" >
<div class="bgreen" >Single column in a Row
<div class="row" >
<div class="column small-6" >
<div class="bred" >Two columns in a Row
</div>
</div>
<div class="column small-6" >
<div class="bred" >Two columns in a Row
</div>
</div>
</div>
<div class="row collapse" >
<div class="column small-6" >
<div class="byellow" >Two columns in a Collapsed Row
</div>
</div>
<div class="column small-6" >
<div class="byellow" >Two columns in a Collapsed Row
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/nesting.html
Generated Vendored Executable
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.test-1 {
background: red;
}
.test-2 {
background: #ccc;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Flex Grid: Nesting</h1>
<p>These are two nested grids. They should both fill the width of the window.</p>
</div>
</div>
<div class="row expanded test-1">
<div class="column">
<div class="row expanded test-2">
<div class="column">
<p>This is a grid.</p>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/grid/uncentered-columns.html
Generated Vendored Executable
+58
View File
@@ -0,0 +1,58 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="row column">
<h1>Uncentered Columns</h1>
</div>
<div class="row">
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
</div>
<div class="row">
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#eee;">I must be centered on medium only, on the right otherwise</p>
</div>
</div>
<div class="row column"><hr></div>
<div class="row">
<div class="small-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
<div class="small-7 medium-centered large-uncentered columns">
<p style="background-color:#fbb;">This pink column should be centered and clear the blue column on medium only.</p>
</div>
<div class="small-5 columns">
<p style="background-color:#aee;">This blue column is not centered.</p>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/keyboard/trap-release-focus.html
Generated Vendored Executable
+73
View File
@@ -0,0 +1,73 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<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>
<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>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
$(document).ready(function() {
var $container = $('#container'),
$state = $('#state'),
$current = $('#current');
// Trap focus
$('#trap-btn').click(function() {
Foundation.Keyboard.trapFocus($container);
$state.text('Focus currently trapped!');
});
// Release focus (and initialize this state)
$('#release-btn').click(function() {
Foundation.Keyboard.releaseFocus($container);
$state.text('Focus currently NOT trapped!');
$(this).attr();
}).trigger('click');
// Handle 'interference proof'
var count = 0;
$container.find('a').keydown(function(e) {
$current.text('#' + (++count) + ': Pressed: ' + Foundation.Keyboard.parseKey(e));
});
});
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/magellan/active-item.html
Generated Vendored Executable
+98
View File
@@ -0,0 +1,98 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Magellan:Active Item</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style type="text/css">
section{height:60em;}
nav{height:4em!important;}
.sticky{width: 100%;}
.highlight{background:#A1D4E9;}
.top-bar, .top-bar ul, .dark{background:#3a3a3a; color:#A1D4E9 }
.top-bar a{color: #A1D4E9;}
.is-active{background:#A1D4E9;color:white!important;}
.well{padding:3rem;}
</style>
</head>
<body>
<header>
<nav data-sticky-container>
<div class="sticky is-stuck is-at-top" data-sticky data-sticky-on="small" data-margin-top="0" data-margin-bottom="0" data-top-anchor="top">
<div class="top-bar">
<ul data-magellan data-bar-offset="25" data-deep-linking="true" class="small-horizontal menu">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
<li><a href="#four">four</a></li>
<li><a href="#five">five</a></li>
<li><a href="#six">six</a></li>
</ul>
</div>
</div>
</nav>
<section id="heading">
<h1 class="text-center well">Pre-anchor Section</h1>
<div class="well">
<p>Incorrect: Navigation item one is active before first anchor point at section One.</p>
Correct:
<ul>
<li>Navigation items should be inactive until first anchor point.</li>
<li>URL should contain no hash</li>
</ul>
</div>
</section>
</header>
<main>
<section id="one" class="highlight" data-magellan-target="one">
<h1 class="text-center well">Section One</h1>
<div class="well">
<p>First anchor point. Navigation item one should be active only in this section.</p>
<p>Location hash should be #one with deep linking set to true</p>
</div>
</section>
<section id="two" data-magellan-target="two">
<h1 class="text-center well">Section Two</h1>
<div class="well">
<p>Second anchor point. Navigation item two should be active only in this section.</p>
<p>Location hash should be #two with deep linking set to true</p>
</div>
</section>
<section id="three" class="highlight" data-magellan-target="three">
<h1 class="text-center well">Section Three</h1>
<div class="well">
<p>Third anchor point. Navigation item three should be active only in this section.</p>
<p>Location hash should be #three with deep linking set to true</p>
</div>
</section>
<section id="four" data-magellan-target="four">
<h1 class="text-center well">Section Four</h1>
</section>
<section id="five" class="highlight" data-magellan-target="five">
<h1 class="text-center well">Section Five</h1>
</section>
</section>
<section id="six" class="dark" data-magellan-target="six">
<h1 class="text-center well">Section Six</h1>
</section>
</main>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/magellan/unordered-links.html
Generated Vendored Executable
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style type="text/css">
[data-magellan] {
position: fixed;
top: 0;
right: 0;
}
[data-magellan] a.is-active {
font-weight: bold;
color: #000;
}
</style>
</head>
<body>
<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>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/media-object/media-object-mixins-flex-mode.html
Generated Vendored Executable
+56
View File
@@ -0,0 +1,56 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Media Object: Mixins In Flex Mode</h1>
<p>Media Object created using <code>media-object-container</code> and <code>media-object-section</code> mixins with <code>$global-flexbox: true</code> should behave the same as Media Object created using <code>foundation-media-object</code> mixin with <code>$global-flexbox: true</code>.</p>
<h3>Default</h3>
<div class="media-object">
<div class="media-object-section">
<div class="thumbnail">
<img src= "http://via.placeholder.com/100x100">
</div>
</div>
<div class="media-object-section">
<h4>Dreams feel real while we're in them.</h4>
<p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or destroy you.</p>
</div>
</div>
<h3>Stack on Small</h3>
<div class="media-object stack-for-small">
<div class="media-object-section">
<div class="thumbnail">
<img src= "http://via.placeholder.com/600x300">
</div>
</div>
<div class="media-object-section">
<h4>I Can Stack.</h4>
<p>Shrink the browser width to see me stack. I do tricks for dog treats, but I'm not a dog.</p>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/active-menu-flex.html
Generated Vendored Executable
+75
View File
@@ -0,0 +1,75 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Active Menu (is-active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="is-active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h1>Active Menu (active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/active-menu-float.html
Generated Vendored Executable
+72
View File
@@ -0,0 +1,72 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Active Menu (is-active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="is-active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h1>Active Menu (active)</h1>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li class="active"><a href="#">Two (.active)</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/advanced-nested-menu-flex.html
Generated Vendored Executable
+149
View File
@@ -0,0 +1,149 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style type="text/css">
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Advanced Nested Menu's</h1>
<h3>Nested Form within Accordion Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Dropdown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Drilldown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/advanced-nested-menu-float.html
Generated Vendored Executable
+139
View File
@@ -0,0 +1,139 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Foundation for Sites Testing</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row column">
<h1>Advanced Nested Menu's</h1>
<h3>Nested Form within Accordion Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Dropdown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Form within Drilldown Menu</h3>
<div class="example" style="max-width: 450px">
<ul class="menu vertical drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li>
<a href="#">Form</a>
<ul class="menu nested vertical">
<li>
<div class="card">
<div class="card-section">
<label> Your Name
<input type="text" placeholder="Enter your Cool Name">
</label>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
<button class="button">Submit</button>
<p><a href="#">Learn More</a>
</div>
</div>
</li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/basic-menu-flex.html
Generated Vendored Executable
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Basic Menus</h1>
<h3>Default Menu</h3>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Horizontal Menu</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Vertical Menu</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/basic-menu-float.html
Generated Vendored Executable
+82
View File
@@ -0,0 +1,82 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Basic Menus</h1>
<h3>Default Menu</h3>
<div class="example">
<ul class="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Horizontal Menu</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Vertical Menu</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/expanded-menu-flex.html
Generated Vendored Executable
+63
View File
@@ -0,0 +1,63 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Expanded Menu</h1>
<div class="example">
<ul class="menu expanded">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/expanded-menu-float.html
Generated Vendored Executable
+61
View File
@@ -0,0 +1,61 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Expanded Menu</h1>
<div class="example">
<ul class="menu expanded">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-dropdownmenu-alignment-flex.html
Generated Vendored Executable
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Horizontal Dropdown Menu Alignment</h1>
<h3>Left Aligned Dropdown Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="horizontal menu dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Dropdown Menu - Horizontal</h3>
<div class="example float-right">
<ul class="horizontal menu dropdown align-right" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-dropdownmenu-alignment-float.html
Generated Vendored Executable
+88
View File
@@ -0,0 +1,88 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Horizontal Dropdown Menu Alignment</h1>
<h3>Left Aligned Dropdown Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="horizontal menu dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Dropdown Menu - Horizontal</h3>
<div class="example float-right">
<ul class="horizontal menu dropdown align-right" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu horizontal nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-menu-alignment-flex.html
Generated Vendored Executable
+88
View File
@@ -0,0 +1,88 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Horizontal Menu Alignment</h1>
<div class="primary callout">
<p>This example test case also works without adding <code>horizontal</code> class as horizontal is the default. But we have added <code>horizontal</code> in the below examples.</p>
</div>
<h3>Left Aligned Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/horizontal-menu-alignment-float.html
Generated Vendored Executable
+86
View File
@@ -0,0 +1,86 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Horizontal Menu Alignment</h1>
<div class="primary callout">
<p>This example test case also works without adding <code>horizontal</code> class as horizontal is the default. But we have added <code>horizontal</code> in the below examples.</p>
</div>
<h3>Left Aligned Menu (Default) - Horizontal</h3>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu - Horizontal</h3>
<div class="example">
<ul class="menu horizontal align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-centered-flex.html
Generated Vendored Executable
+76
View File
@@ -0,0 +1,76 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Menu Centered</h1>
<h3>Centered Menu (Align Center)</h3>
<div class="example">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu (Menu Centered)</h3>
<div class="example">
<div class="menu-centered">
<ul class="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-centered-float.html
Generated Vendored Executable
+74
View File
@@ -0,0 +1,74 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Menu Centered</h1>
<h3>Centered Menu (Align Center)</h3>
<div class="example">
<ul class="menu align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu (Menu Centered)</h3>
<div class="example">
<div class="menu-centered">
<ul class="menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-form-flex.html
Generated Vendored Executable
+74
View File
@@ -0,0 +1,74 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Menu with Form(input, select and buttons)</h1>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</li>
<li><input type="text" placeholder="Text input"></li>
<li><button class="button">button (native)</button></li>
<li><a class="button" href="#">button</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-form-float.html
Generated Vendored Executable
+72
View File
@@ -0,0 +1,72 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Menu with Form(input, select and buttons)</h1>
<div class="example">
<ul class="menu horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
<li>
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</li>
<li><input type="text" placeholder="Text input"></li>
<li><button class="button">button (native)</button></li>
<li><a class="button" href="#">button</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-icons-flex.html
Generated Vendored Executable
+139
View File
@@ -0,0 +1,139 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Menu with Icons (with icons class)</h1>
<h3>Menu with Icons left</h3>
<div class="example">
<ul class="menu icons icon-left">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icons Right</h3>
<div class="example">
<ul class="menu icons icon-right">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
<h3>Menu with Icon Top</h3>
<div class="example">
<ul class="menu icons icon-top">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icon Bottom</h3>
<div class="example">
<ul class="menu icons icon-bottom">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
<hr>
<h1>Menu with Icons (without icons class)</h1>
<h3>Menu with Icons left</h3>
<div class="example">
<ul class="menu icon-left">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icons Right</h3>
<div class="example">
<ul class="menu icon-right">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
<h3>Menu with Icon Top</h3>
<div class="example">
<ul class="menu icon-top">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icon Bottom</h3>
<div class="example">
<ul class="menu icon-bottom">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-icons-float.html
Generated Vendored Executable
+137
View File
@@ -0,0 +1,137 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" rel="stylesheet">
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Menu with Icons (with icons class)</h1>
<h3>Menu with Icons left</h3>
<div class="example">
<ul class="menu icons icon-left">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icons Right</h3>
<div class="example">
<ul class="menu icons icon-right">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
<h3>Menu with Icon Top</h3>
<div class="example">
<ul class="menu icons icon-top">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icon Bottom</h3>
<div class="example">
<ul class="menu icons icon-bottom">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
<hr>
<h1>Menu with Icons (without icons class)</h1>
<h3>Menu with Icons left</h3>
<div class="example">
<ul class="menu icon-left">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icons Right</h3>
<div class="example">
<ul class="menu icon-right">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
<h3>Menu with Icon Top</h3>
<div class="example">
<ul class="menu icon-top">
<li><a href="#"><i class="fi-list"></i>One</a></li>
<li><a href="#"><i class="fi-list"></i>Two</a></li>
<li><a href="#"><i class="fi-list"></i>Three</a></li>
<li><a href="#"><i class="fi-list"></i>Four</a></li>
</ul>
</div>
<h3>Menu with Icon Bottom</h3>
<div class="example">
<ul class="menu icon-bottom">
<li><a href="#">One<i class="fi-list"></i></a></li>
<li><a href="#">Two<i class="fi-list"></i></a></li>
<li><a href="#">Three<i class="fi-list"></i></a></li>
<li><a href="#">Four<i class="fi-list"></i></a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-text-flex.html
Generated Vendored Executable
+63
View File
@@ -0,0 +1,63 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Menu Text</h1>
<div class="example">
<ul class="menu simple">
<li class="menu-text">Site Title</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/menu-text-float.html
Generated Vendored Executable
+61
View File
@@ -0,0 +1,61 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Menu Text</h1>
<div class="example">
<ul class="menu simple">
<li class="menu-text">Site Title</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/nested-menu-flex.html
Generated Vendored Executable
+89
View File
@@ -0,0 +1,89 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Nested Menu</h1>
<h3>Nested Menu - Align Left (Default)</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Menu - Align Right</h3>
<div class="example">
<ul class="menu vertical align-right">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/nested-menu-float.html
Generated Vendored Executable
+87
View File
@@ -0,0 +1,87 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Nested Menu</h1>
<h3>Nested Menu - Align Left (Default)</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Nested Menu - Align Right</h3>
<div class="example">
<ul class="menu vertical align-right">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/responsive-menu-flex.html
Generated Vendored Executable
+128
View File
@@ -0,0 +1,128 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Responsive Menus</h1>
<h3>Vertical, Horizontal, Vertical Menu</h3>
<div class="example">
<ul class="menu vertical medium-horizontal large-vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Horizontal, Vertical, Horizontal Menu</h3>
<div class="example">
<ul class="menu horizontal medium-vertical large-horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Accordion to Dropdown Menu</h3>
<div class="example">
<ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu nested vertical">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Drilldown to Dropdown Menu</h3>
<div class="example">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu nested vertical">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Drilldown to Accordion to Dropdown Menu</h3>
<div class="example">
<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu nested vertical">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/responsive-menu-float.html
Generated Vendored Executable
+126
View File
@@ -0,0 +1,126 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Responsive Menus</h1>
<h3>Vertical, Horizontal, Vertical Menu</h3>
<div class="example">
<ul class="menu vertical medium-horizontal large-vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Horizontal, Vertical, Horizontal Menu</h3>
<div class="example">
<ul class="menu horizontal medium-vertical large-horizontal">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Accordion to Dropdown Menu</h3>
<div class="example">
<ul class="menu vertical medium-horizontal" data-responsive-menu="accordion medium-dropdown">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Drilldown to Dropdown Menu</h3>
<div class="example">
<ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Drilldown to Accordion to Dropdown Menu</h3>
<div class="example">
<ul class="menu vertical large-horizontal" data-responsive-menu="drilldown medium-accordion large-dropdown">
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/simple-menu-flex.html
Generated Vendored Executable
+63
View File
@@ -0,0 +1,63 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Simple Menu</h1>
<div class="example">
<ul class="menu simple">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/simple-menu-float.html
Generated Vendored Executable
+61
View File
@@ -0,0 +1,61 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Simple Menu</h1>
<div class="example">
<ul class="menu simple">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-accordionmenu-alignment-flex.html
Generated Vendored Executable
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Vertical Accordion Menu Alignment</h1>
<h3>Left Aligned Accordion Menu (Default) - Vertical</h3>
<div class="example" style="max-width: 250px">
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Accordion Menu - Vertical</h3>
<div class="example float-right" style="max-width: 250px">
<ul class="vertical menu accordion-menu align-right" data-accordion-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-accordionmenu-alignment-float.html
Generated Vendored Executable
+88
View File
@@ -0,0 +1,88 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Vertical Accordion Menu Alignment</h1>
<h3>Left Aligned Accordion Menu (Default) - Vertical</h3>
<div class="example" style="max-width: 250px">
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Accordion Menu - Vertical</h3>
<div class="example float-right" style="max-width: 250px">
<ul class="vertical menu accordion-menu align-right" data-accordion-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-drilldownmenu-alignment-flex.html
Generated Vendored Executable
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Vertical Accordion Menu Alignment</h1>
<h3>Left Aligned Drilldown Menu (Default) - Vertical</h3>
<div class="example" style="max-width: 250px">
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Drilldown Menu - Vertical</h3>
<div class="example float-right" style="max-width: 250px">
<ul class="vertical menu drilldown align-right" data-drilldown>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-drilldownmenu-alignment-float.html
Generated Vendored Executable
+88
View File
@@ -0,0 +1,88 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Vertical Drillodwn</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Vertical Drilldown Menu Alignment</h1>
<h3>Left Aligned Drilldown Menu (Default) - Vertical</h3>
<div class="example" style="max-width: 250px">
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Drilldown Menu - Vertical</h3>
<div class="example float-right" style="max-width: 250px">
<ul class="vertical menu drilldown align-right" data-drilldown>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-dropdownmenu-alignment-flex.html
Generated Vendored Executable
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Vertical Dropdown Menu Alignment</h1>
<h3>Left Aligned Dropdown Menu (Default) - Vertical</h3>
<div class="example" style="max-width: 250px">
<ul class="vertical menu dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Dropdown Menu - Vertical</h3>
<div class="example float-right" style="max-width: 250px">
<ul class="vertical menu dropdown align-right" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-dropdownmenu-alignment-float.html
Generated Vendored Executable
+88
View File
@@ -0,0 +1,88 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Vertical Dropdown Menu Alignment</h1>
<h3>Left Aligned Dropdown Menu (Default) - Vertical</h3>
<div class="example" style="max-width: 250px">
<ul class="vertical menu dropdown" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Dropdown Menu - Vertical</h3>
<div class="example float-right" style="max-width: 250px">
<ul class="vertical menu dropdown align-right" data-dropdown-menu>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-menu-alignment-flex.html
Generated Vendored Executable
+84
View File
@@ -0,0 +1,84 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Vertical Menu Alignment</h1>
<h3>Left Aligned Menu (Default) - Vertical</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Menu - Vertical</h3>
<div class="example">
<ul class="menu vertical align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu - Vertical</h3>
<div class="example">
<ul class="menu vertical align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/menu/vertical-menu-alignment-float.html
Generated Vendored Executable
+82
View File
@@ -0,0 +1,82 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>All Foundation Menu Options - Flexbox</title>
<link href="../motion-ui/dist/motion-ui.css" rel="stylesheet" />
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
<style>
h1 {
border-bottom: 1px solid #ddd;
margin-bottom: 2rem;
width: 100%;
}
h3 {
width: 100%;
}
.example {
padding: 2rem;
border: 1px solid #ddd;
width: 100%;
}
.example + h1 {
margin-top: 5rem;
}
.example + h3 {
margin-top: 3rem;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<h1>Vertical Menu Alignment</h1>
<h3>Left Aligned Menu (Default) - Vertical</h3>
<div class="example">
<ul class="menu vertical">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Right Aligned Menu - Vertical</h3>
<div class="example">
<ul class="menu vertical align-right">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
<h3>Centered Menu - Vertical</h3>
<div class="example">
<ul class="menu vertical align-center">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/absolute.html
Generated Vendored Executable
+123
View File
@@ -0,0 +1,123 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas absolute test</title>
<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 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">&times;</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">&times;</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">&times;</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">&times;</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="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>
<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>
</div>
<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">&times;</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">&times;</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">&times;</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">&times;</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="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>
<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>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/all-options.html
Generated Vendored Executable
+222
View File
@@ -0,0 +1,222 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas all options</title>
<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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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="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="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>
<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.
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 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="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>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/nested.html
Generated Vendored Executable
+254
View File
@@ -0,0 +1,254 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas nested</title>
<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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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="">
<div class="button-group expanded">
<button type="button" class="secondary button" data-toggle="offCanvasLeft">Left Push</button>
<button type="button" class="secondary button" data-toggle="offCanvasRight">Right Push</button>
<button type="button" class="secondary button" data-toggle="offCanvasTop">Top Push</button>
<button type="button" class="secondary button" data-toggle="offCanvasBottom">Bottom Push</button>
</div>
<div class="button-group expanded">
<button type="button" class="secondary button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
<button type="button" class="secondary button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
<button type="button" class="secondary button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
<button type="button" class="secondary button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
</div>
<div class="button-group expanded">
<button type="button" class="secondary button" data-toggle="offCanvasForceTop">Force to top</button>
<button type="button" class="secondary button" data-toggle="offCanvasForceBottom">Force to bottom</button>
</div>
<div class="button-group expanded">
<button type="button" class="secondary button" data-toggle="noScroll">No scroll</button>
<button type="button" class="secondary button" data-toggle="noOverlay">No overlay</button>
<button type="button" class="secondary button" data-toggle="noCloseOnClick">No close on click</button>
</div>
<h1>This test is showing the nested off-canvas feature.</h1>
<p>The buttons above are taken over from all-options to test backwards compatibility since the nested feature is supposed to enable upgrading without any issues.</p>
<div class="off-canvas position-left in-canvas-for-large" id="offCanvasNestedLeftPush" data-off-canvas data-transition="push">
<button class="close-button" aria-label="Close panel" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<h3>This is a nested left off-canvas panel</h3>
<p>In this example it is used as regular page content for large and move into off-canvas for medium down.</p>
</div>
<div class="off-canvas position-left in-canvas-for-large" id="offCanvasNestedLeftPushSharing" data-off-canvas data-transition="push">
<button class="close-button" aria-label="Close panel" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<p>I'm a nested off-canvas, sharing the same position and content container of my sibling.</p>
</div>
<div class="off-canvas position-right" id="offCanvasNestedRightOverlap" data-off-canvas data-transition="overlap">
<button class="close-button" aria-label="Close panel" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<h3>This is a nested right off-canvas panel</h3>
<p>Just a test to see if overlap is also working without problems.</p>
</div>
<div class="button-group expanded">
<button type="button" class="button hide-for-large" data-toggle="offCanvasNestedLeftPush">Nested Left Push</button>
<button type="button" class="button hide-for-large" data-toggle="offCanvasNestedLeftPushSharing">Nested Left Push Sharing</button>
<button type="button" class="button" data-toggle="offCanvasNestedRightOverlap">Nested Right Overlap</button>
</div>
<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 class="button-group expanded">
<button type="button" class="secondary button" data-toggle="offCanvasLeft">Left Push</button>
<button type="button" class="secondary button" data-toggle="offCanvasRight">Right Push</button>
<button type="button" class="secondary button" data-toggle="offCanvasTop">Top Push</button>
<button type="button" class="secondary button" data-toggle="offCanvasBottom">Bottom Push</button>
</div>
<div class="button-group expanded">
<button type="button" class="secondary button" data-toggle="offCanvasLeftOverlap">Left Overlap</button>
<button type="button" class="secondary button" data-toggle="offCanvasRightOverlap">Right Overlap</button>
<button type="button" class="secondary button" data-toggle="offCanvasTopOverlap">Top Overlap</button>
<button type="button" class="secondary button" data-toggle="offCanvasBottomOverlap">Bottom Overlap</button>
</div>
<div class="button-group expanded">
<button type="button" class="secondary button" data-toggle="offCanvasForceTop">Force to top</button>
<button type="button" class="secondary button" data-toggle="offCanvasForceBottom">Force to bottom</button>
</div>
<div class="button-group expanded">
<button type="button" class="secondary button" data-toggle="noScroll">No scroll</button>
<button type="button" class="secondary button" data-toggle="noOverlay">No overlay</button>
<button type="button" class="secondary button" data-toggle="noCloseOnClick">No close on click</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/offcanvas-reveal-modal-large.html
Generated Vendored Executable
+85
View File
@@ -0,0 +1,85 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas with reveal modal</title>
<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">&times;</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 reveal-for-large" id="offCanvasRight" data-off-canvas>
<button class="close-button" aria-label="Close panel" type="button" data-close>
<span aria-hidden="true">&times;</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="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>
<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 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">&times;</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/offcanvas-reveal-modal.html
Generated Vendored Executable
+85
View File
@@ -0,0 +1,85 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas with reveal modal</title>
<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">&times;</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">&times;</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="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>
<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 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">&times;</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/reveal-on-option.html
Generated Vendored Executable
+76
View File
@@ -0,0 +1,76 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas revealOn option</title>
<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 data-is-revealed="true" data-reveal-on="large">
<button class="close-button" aria-label="Close panel" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<h3>This is a left off-canvas panel with <code>[data-reveal-on="large"]</code>. It should reveal on large and up screens.</h3>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas data-is-revealed="true" data-reveal-on="medium">
<button class="close-button" aria-label="Close panel" type="button" data-close>
<span aria-hidden="true">&times;</span>
</button>
<h3>This is a right off-canvas panel with a <code>[data-reveal-on="medium"]</code> class. 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="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-on] option.</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>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/reveal.html
Generated Vendored Executable
+76
View File
@@ -0,0 +1,76 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas reveal classes</title>
<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">&times;</span>
</button>
<h3>This is a left off-canvas panel with a <code>reveal-for-large</code> class. 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">&times;</span>
</button>
<h3>This is a right off-canvas panel with a <code>reveal-for-medium</code> class. 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="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>
<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>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/sticky.html
Generated Vendored Executable
+164
View File
@@ -0,0 +1,164 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas with a sticky menu</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
</head>
<body>
<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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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">&times;</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="">
<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 class="">
<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.
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>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/offcanvas/transition-time.html
Generated Vendored Executable
+72
View File
@@ -0,0 +1,72 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Off canvas transition duration test</title>
<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="defaultTransition" data-off-canvas>
<button class="close-button" aria-label="Close panel" type="button" data-close>
<span aria-hidden="true">&times;</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">&times;</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">&times;</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="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>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/orbit/orbit.html
Generated Vendored Executable
+71
View File
@@ -0,0 +1,71 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-ui@1.2.3/dist/motion-ui.min.css">
<style>
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h4>Testing that generic div's work throught the Orbit markup</h4>
<section class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
<div class="orbit-wrapper">
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
</div>
<div class="orbit-container">
<div class="is-active orbit-slide">
<div class="orbit-figure">
<img class="orbit-image" src="http://placehold.it/1200x600/999?text=Slide-1" alt="Space">
<div class="orbit-caption">Space, the final frontier.</div>
</div>
</div>
<div class="orbit-slide">
<div class="orbit-figure">
<img class="orbit-image" src="http://placehold.it/1200x600/888?text=Slide-2" alt="Space">
<div class="orbit-caption">Lets Rocket!</div>
</div>
</div>
<div class="orbit-slide">
<div class="orbit-figure">
<img class="orbit-image" src="http://placehold.it/1200x600/777?text=Slide-3" alt="Space">
<div class="orbit-caption">Encapsulating</div>
</div>
</div>
<div class="orbit-slide">
<div class="orbit-figure">
<img class="orbit-image" src="http://placehold.it/1200x600/666&text=Slide-4" alt="Space">
<div class="orbit-caption">Outta This World</div>
</div>
</div>
</div>
</div>
<div class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</div>
</section>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
themes/ceras/node_modules/foundation-sites/test/visual/orbit/touch.html
Generated Vendored Executable
+66
View File
@@ -0,0 +1,66 @@
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Foundation for Sites Testing</title>
<link href="../assets/css/foundation.css" rel="stylesheet" />
<style>
.orbit-slide {
padding: 1rem;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell">
<h1>Orbit: Touch Support</h1>
<p>Swiping left and right should change the current slide. Swiping up and down to scroll the page should not be disrupted.</p>
<p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-use-m-u-i="false">
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
<li class="is-active orbit-slide" style="background: #eee;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
</li>
<li class="orbit-slide" style="background: #ddd;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
</li>
<li class="orbit-slide" style="background: #ccc;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
</li>
<li class="orbit-slide" style="background: #999;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam minima amet cupiditate pariatur doloribus, quo repudiandae facere odio ipsam laborum nihil, voluptate itaque perspiciatis dolorem aut nostrum! Autem, exercitationem, nesciunt!</p>
</li>
</ul>
<nav class="orbit-bullets">
<button class="is-active" data-slide="0"><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
<button data-slide="1"><span class="show-for-sr">Second slide details.</span></button>
<button data-slide="2"><span class="show-for-sr">Third slide details.</span></button>
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
<p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
<p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
<p>This content is here to make the page longer. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid facere architecto fugit voluptates, inventore est cum nihil vel dicta assumenda, illum. Ipsum non saepe similique repellat, enim blanditiis fuga eveniet.</p>
</div>
</div>
</div>
<script src="../assets/js/vendor.js"></script>
<script src="../assets/js/foundation.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More