From: RafiBomb <rafi@zurb.com>
Date: Fri, 19 May 2017 23:48:39 +0000 (-0700)
Subject: updates video links for pagination switch closebutton
X-Git-Tag: v6.4.0-rc1~26^2~3
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=ad3f81a3ccc4823942291376dab4d26bbedaf94e;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

updates video links for pagination switch closebutton
---

diff --git a/docs/pages/close-button.md b/docs/pages/close-button.md
index 60a9f98b7..87a0510a9 100644
--- a/docs/pages/close-button.md
+++ b/docs/pages/close-button.md
@@ -1,7 +1,7 @@
 ---
 title: Close Button
 description: The humble close button can be used anywhere you need something to go away on click.
-video: '8CDk9lUAbUM'
+video: '0cvJbo7ItpU'
 sass: scss/components/_close-button.scss
 ---
 
@@ -10,7 +10,7 @@ A close button is a `<button>` element with the class `.close-button`. We use th
 The button is also labeled with `aria-label` to clarify what the button's purpose is.
 
 <p>
-  <a class="" data-open-video="1: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="1:07"><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">
@@ -34,13 +34,14 @@ The button is also labeled with `aria-label` to clarify what the button's purpos
   <p>The close button on its own doesn't close elements, but you can use it with <a href="toggler.html">Toggler</a>, <a href="reveal.html">Reveal</a>, <a href="off-canvas.html">Off-canvas</a>, and other plugins that have open and close behaviors.</p>
 </div>
 
-<a class="" data-open-video="1: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>
 <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>
 </div>
 
 The below example pairs the callout with the close button component and `data-closable` attribute to create a dismissible alert box.
 
+<a class="" data-open-video="4: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>
+
 <div class="docs-codepen-container">
   <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/JNvEox?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
 </div>
diff --git a/docs/pages/pagination.md b/docs/pages/pagination.md
index 69429cd3e..10d3e1b70 100644
--- a/docs/pages/pagination.md
+++ b/docs/pages/pagination.md
@@ -1,7 +1,7 @@
 ---
 title: Pagination
 description: Pagination is a type of navigation that lets users click through pages of search results, products, or other related items.
-video: 'zyk8c6-SpLU'
+video: '9gcGADHzz9o'
 sass: scss/components/_pagination.scss
 ---
 
@@ -14,7 +14,7 @@ Note that the container has the attributes `role="navigation"` and `aria-label="
 Extra screen reader-only text should also be added to a pagination element. In the below example, users reading the page will just see "Next" and "Previous", but screen readers will read it as "Next page" and "Previous page". Additionally, the text for the current page will read as "You're on page one".
 
 <p>
-  <a class="" data-open-video="1: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>
+  <a class="" data-open-video="0: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>
 </p>
 
 <div class="docs-codepen-container">
@@ -41,6 +41,9 @@ Extra screen reader-only text should also be added to a pagination element. In t
 
 The items in a pagination list are `display: inline-block`, which makes centering them easy. Use our built-in `.text-center` class, or add `text-align: center` in your CSS.
 
+<p>
+  <a class="" data-open-video="7:20"><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/dWKYZb?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
diff --git a/docs/pages/switch.md b/docs/pages/switch.md
index 2b473a680..0a18d325e 100644
--- a/docs/pages/switch.md
+++ b/docs/pages/switch.md
@@ -1,7 +1,7 @@
 ---
 title: Switch
-description: Now you can tell your users to flip the switch or switch off.
-video: '25NIiOhwGNQ'
+description: Create pure CSS3 On/Off switches with animated transitions. Now you can tell your users to flip the switch or switch off.
+video: 'AEL2Mj0DT3o'
 sass: scss/components/_switch.scss
 ---
 
@@ -24,7 +24,7 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
 </div>
 
 <p>
-  <a class="" data-open-video="0:18"><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: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>
 </p>
 
 <div class="docs-codepen-container">
@@ -47,7 +47,7 @@ Give the `<input>` a unique ID and point the `<label>` to it with the `for` attr
 You can also use `<input type="radio">` instead of `checkbox` to create a series of options.
 
 <p>
-  <a class="" data-open-video="1:48"><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:17"><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">
@@ -84,7 +84,7 @@ You can also use `<input type="radio">` instead of `checkbox` to create a series
 Use the classes `.tiny`, `.small`, or `.large` to change the switch size.
 
 <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="6: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>
 </p>
 
 <div class="docs-codepen-container">
@@ -126,7 +126,7 @@ Active/inactive text goes inside of the switch's `<label>`.
   <p>Depending on the length of the words you place inside the switch, you may need to fine-tune the <code>left</code> or <code>right</code> CSS properties of the text to get it positioned right.</p>
 </div>
 
-<a class="" data-open-video="2: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="8:07"><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 <code>aria-hidden="true"</code> to these labels to prevent AT from reading them.</p>