Replaces old videos with new videos on 5 docs pages

diff --git a/docs/pages/accordion-menu.md b/docs/pages/accordion-menu.md
index efd52c85c782f65ccd1f2e2086cf3845945fb2d1..1d099d86b73271b37ccff59ffd4980f52c0435ed 100644 (file)
--- a/docs/pages/accordion-menu.md
+++ b/docs/pages/accordion-menu.md
@@ -3,7 +3,7 @@ title: Accordion Menu
 sass: scss/components/_accordion-menu.scss
 js: js/foundation.accordionMenu.js
 description: Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.
-video: yPGdaMRx60w
+video: FXZIZ9N4aeI
 ---
 
 ## Basics
@@ -12,7 +12,7 @@ Accordion menus follow the basic [Menu](menu.html) syntax of `<ul>`, `<li>`, and
 
 Any `<a>` will behave like a standard link. However, any `<a>` paired with a nested `<ul>` menu will then slide that sub-menu up and down when clicked on.
 
-<a class="" data-open-video="0:29"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="1:03"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
 <div class="primary callout">
   <p>You can use the built-in <code>.nested</code> class to add an indent to a nested menu.</p>

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 049fb14180ea01daa323696f605960999d16a31a..e603736e048a53dcf61236d240c78511f45895ce 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -1,7 +1,7 @@
 ---
 title: Button
 description: Buttons are convenient tools when you need more traditional actions. To that end, Foundation has many easy to use button styles that you can customize or override to fit your needs.
-video: Qe8KHC2ZtMM
+video: iEAtuFk4-LQ
 sass: scss/components/_button.scss
 tags:
   - dropdown button
@@ -14,7 +14,7 @@ A basic button can be created with minimal markup. Because buttons can be used f
 - Use the `<a>` tag if the button is a link to another page, or a link to an anchor within a page. Generally anchors don't require JavaScript to work.
 - Use the `<button>` tag if the button performs an action that changes something on the current page. `<button>` elements almost always require JavaScript to function.
 
-<a class="" data-open-video="0:51"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="0:34"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 <div class="primary callout">
   <p>Add the attribute <code>type="button"</code> to <code>&lt;button&gt;</code> elements, unless the button submits a form, in which case you use <code>type="submit"</code></p>
 </div>
@@ -40,7 +40,7 @@ A basic button can be created with minimal markup. Because buttons can be used f
 Additional classes can be added to your button to change its size and shape.
 
 <p>
-  <a class="" data-open-video="2:08"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="3:23"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -63,7 +63,7 @@ Additional classes can be added to your button to change its size and shape.
 Add color classes to give buttons additional meaning.
 
 <p>
-  <a class="" data-open-video="2:52"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="5:41"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 
@@ -129,7 +129,7 @@ The text color for each button class is determined by either `$button-color` or
 The `.disabled` class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For `<button>` elements, you can add the `disabled` attribute to both disable and style it. If you want to disable a link, you should add the `aria-disabled` attribute to mark it as disabled for assistive technology.
 
 <p>
-  <a class="" data-open-video="3:19"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="8:32"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-video-codepen-container">
@@ -152,7 +152,7 @@ The `.disabled` class will give buttons a faded appearance. The class is a purel
 Add the `.hollow` class to a button to give it a hollow style. Change the `$button-fill` variable in your settings file to `hollow` to make this the default style. Changing this setting will remove the `.hollow` class from your CSS.
 
 <p>
-  <a class="" data-open-video="4:04"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="7:37"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 

diff --git a/docs/pages/callout.md b/docs/pages/callout.md
index e2692b6a70842d8647e262d4682d0868b97ecacb..b32c71ff514fba21f88af4267355642f76a3d2ce 100644 (file)
--- a/docs/pages/callout.md
+++ b/docs/pages/callout.md
@@ -1,7 +1,7 @@
 ---
 title: Callout
 description: Callouts combine panels and alerts from Foundation 5 into one generic container component.
-video: nUrs8Z8sTBg
+video: yQdu0oSuaCo
 sass: scss/components/_callout.scss
 tags:
   - panel
@@ -13,7 +13,7 @@ tags:
 A callout is just an element with a `.callout` class applied. You can put any kind of content inside.
 
 <p>
-  <a class="" data-open-video="0:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="0:33"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -35,7 +35,7 @@ A callout is just an element with a `.callout` class applied. You can put any ki
 Callouts can be colored using the `.secondary`, `.primary`, `.success`, `.warning`, or `.alert` classes. Links inside the callout will be tinted to match the color of the callout.
 
 <p>
-  <a class="" data-open-video="1:25"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="2:02"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -110,7 +110,7 @@ Callouts can be sized using the `.small` and `.large` classes. These will affect
 
 Pair the callout with the [close button](close-button.html) component and `data-closable` attribute to create a dismissable alert box.
 
-<a class="" data-open-video="2:24"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="4:47"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 <div class="primary callout">
   <p>Any element can be used as a close trigger, not just close button. Adding the attribute <code>data-close</code> to any element within the callout will turn it into a close trigger.</p>
   <p>When using the <code>data-closable</code> attribute, you can optionally add <a href="http://foundation.zurb.com/sites/docs/motion-ui.html">Motion UI</a> classes to the attribute to change the closing animation. If no class is added, the plugin defaults to jQuery's <code>.fadeOut()</code> function.</p>

diff --git a/docs/pages/drilldown-menu.md b/docs/pages/drilldown-menu.md
index 70816c6db3f167a9e250b1bc82a497278e1bf992..5de233703324506561b0f68bc60d7d84af2128fa 100644 (file)
--- a/docs/pages/drilldown-menu.md
+++ b/docs/pages/drilldown-menu.md
@@ -1,7 +1,7 @@
 ---
 title: Drilldown Menu
 description: Drilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.
-video: risWADXGMYs
+video: 8qPQRXl52hI
 scss: scss/components/_drilldown.scss
 js: js/foundation.drilldown.js
 ---
@@ -15,7 +15,7 @@ To create sub-menus, place a `<ul>` *next to* an `<a>`. Clicking that `<a>` will
 Any `<a>` without a submenu will function like a normal link.
 
 <p>
-  <a class="" data-open-video="0:30"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+  <a class="" data-open-video="0:54"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
@@ -90,14 +90,14 @@ Any `<a>` without a submenu will function like a normal link.
 </div>
 
 <p>
-<a class="" data-open-video="3:27"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="4:39"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 </p>
 
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/mmKyrw?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
-```html 
+```html
 <ul class="menu" data-drilldown data-auto-height="true" data-animate-height="true">
   <!--  -->
 </ul>
@@ -175,7 +175,7 @@ Any `<a>` without a submenu will function like a normal link.
   <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/jmKEwX?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
 
-```html 
+```html
 <ul class="menu" data-drilldown data-scroll-top="true">
   <!--  -->
 </ul>

diff --git a/docs/pages/dropdown-menu.md b/docs/pages/dropdown-menu.md
index 199af69ed579d37b482fcb0200469e682a7ea7fd..7ad1ce99f71c4429d19235d08d31467b59cc77e6 100644 (file)
--- a/docs/pages/dropdown-menu.md
+++ b/docs/pages/dropdown-menu.md
@@ -1,7 +1,7 @@
 ---
 title: Dropdown Menu
 description: Change a basic Menu into an expandable dropdown menu with the Dropdown Menu plugin.
-video: 'qDybCaxK3bA'
+video: 'KfnRuKBKrbw'
 sass: scss/components/_dropdown-menu.scss
 js: js/foundation.dropdownMenu.js
 ---
@@ -21,7 +21,7 @@ Dropdown menus build on the [Menu](menu.html) component's syntax. Add the class
 
 To create dropdown menus, nest a new `<ul>` inside an `<li>`. You can nest further to create more levels of dropdowns.
 
-<a class="" data-open-video="0:33"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
+<a class="" data-open-video="0:53"><img src="{{root}}assets/img/icons/watch-video-icon.svg" class="video-icon" height="30" width="30" alt=""> Watch this part in video</a>
 
 <div class="primary callout">
   <p>Note that the <code>&lt;ul&gt;</code> goes <em>after</em> the <code>&lt;a&gt;</code>, and not inside of it.</p>