From: Andy Cochran <acochran@council.nyc.gov>
Date: Tue, 10 May 2016 20:59:34 +0000 (-0400)
Subject: change flex-video to responsive-embed
X-Git-Tag: v6.3-rc1~61^2~1^2~1
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=7ff94922d70f6bae4a95e8d9ef689a45dedf92ee;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

change flex-video to responsive-embed
---

diff --git a/customizer/complete.json b/customizer/complete.json
index 9244c5619..b5976414f 100644
--- a/customizer/complete.json
+++ b/customizer/complete.json
@@ -18,7 +18,7 @@
     "dropdown",
     "dropdown_menu",
     "equalizer",
-    "flex_video",
+    "responsive_embed",
     "interchange",
     "label",
     "magellan",
diff --git a/customizer/config.yml b/customizer/config.yml
index 9f4bd899d..380db5666 100644
--- a/customizer/config.yml
+++ b/customizer/config.yml
@@ -86,9 +86,6 @@ dropdown_menu:
 equalizer:
   js: equalizer
 
-flex_video:
-  sass: flex-video
-
 interchange:
   js: interchange
   js_utils:
@@ -134,6 +131,9 @@ progress_bar:
 progress_element:
   sass: progress-element
 
+responsive_embed:
+  sass: responsive-embed
+
 responsive_menu:
   js: responsiveMenu
   js_utils:
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 228a3c975..a02740d7b 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -23,5 +23,6 @@
 @import 'examples/motion-ui';
 @import 'examples/off-canvas';
 @import 'examples/orbit';
+@import 'examples/responsive-embed';
 @import 'examples/reveal';
 @import 'examples/top-bar';
diff --git a/docs/assets/scss/examples/_responsive-embed.scss b/docs/assets/scss/examples/_responsive-embed.scss
new file mode 100644
index 000000000..60df6cd2b
--- /dev/null
+++ b/docs/assets/scss/examples/_responsive-embed.scss
@@ -0,0 +1,5 @@
+// Responsive Embed
+
+.panorama {
+  @include responsive-embed(256 by 81);
+}
diff --git a/docs/pages/flex-video.md b/docs/pages/flex-video.md
deleted file mode 100644
index 68fd1fb7a..000000000
--- a/docs/pages/flex-video.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: Flex Video
-description: Wrap embedded videos from YouTube, Vimeo, and others in a flex video container to ensure they maintain the correct aspect ratio regardless of screen size.
-sass: scss/components/_flex-video.scss
----
-
-Embedded videos won't maintain their aspect ratio as the width of the screen changes. To avoid squished videos, wrap them in a container with the class `.flex-video`.
-
-```html_example
-<div class="flex-video">
-  <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
-</div>
-```
-
----
-
-The default ratio is 4:3. Add the `.widescreen` class to change it to 16:9.
-
-```html_example
-<div class="flex-video widescreen">
-  <iframe width="420" height="315" src="https://www.youtube.com/embed/aiBt44rrslw" frameborder="0" allowfullscreen></iframe>
-</div>
-```
-
----
-
-Embedded Vimeo videos are special snowflakes of their own. Add the `.vimeo` class to a flex video container that wraps a Vimeo embed.
-
-```html_example
-<div class="flex-video widescreen vimeo">
-  <iframe src="http://player.vimeo.com/video/60122989" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
-</div>
-```
diff --git a/docs/pages/index.md b/docs/pages/index.md
index a0d6a8a5b..21d0c5dfa 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -149,7 +149,7 @@ Get to know the pieces of Foundation.
       <h4>Media</h4>
       <ul>
         <li><a href="badge.html">Badge</a></li>
-        <li><a href="flex-video.html">Flex Video</a></li>
+        <li><a href="responsive-embed.html">Responsive Embed</a></li>
         <li><a href="label.html">Label</a></li>
         <li><a href="orbit.html">Orbit</a></li>
         <li><a href="progress-bar.html">Progress Bar</a></li>
diff --git a/docs/pages/kitchen-sink.md b/docs/pages/kitchen-sink.md
index 0b9d17376..11067ccce 100644
--- a/docs/pages/kitchen-sink.md
+++ b/docs/pages/kitchen-sink.md
@@ -416,10 +416,10 @@ description: Everything but.
 
 ---
 
-## Flex Video
+## Responsive Embed
 
 ```html_example
-<div class="flex-video">
+<div class="responsive-embed">
   <iframe width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws" frameborder="0" allowfullscreen></iframe>
 </div>
 ```
diff --git a/docs/pages/responsive-embed.md b/docs/pages/responsive-embed.md
new file mode 100644
index 000000000..1ea429666
--- /dev/null
+++ b/docs/pages/responsive-embed.md
@@ -0,0 +1,39 @@
+---
+title: Responsive Embed
+description: Wrap embedded content like videos, maps, and calendars in a responsive embed container to maintain the correct aspect ratio regardless of screen size.
+sass: scss/components/_responsive-embed.scss
+---
+
+To make sure embedded content maintains its aspect ratio as the width of the screen changes, wrap the `iframe`, `object`, `embed`, or `video` in a container with the `.responsive-embed` class.
+
+```html_example
+<div class="responsive-embed">
+  <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
+</div>
+```
+
+---
+
+The default ratio is 4:3. Add the `.widescreen` class to change it to 16:9.
+
+```html_example
+<div class="responsive-embed widescreen">
+  <iframe width="560" height="315" src="https://www.youtube.com/embed/WUgvvPRH7Oc" frameborder="0" allowfullscreen></iframe>
+</div>
+```
+
+---
+
+If you need to embed content with other aspect ratios, such as 256:81, the `responsive-embed()` mixin makes it easy to add your own custom classes.
+
+```scss
+.panorama {
+  @include responsive-embed(256 by 81);
+}
+```
+
+```html_example
+<div class="panorama">
+  <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe>
+</div>
+```
diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html
index c2ecb8445..f6c79c556 100644
--- a/docs/partials/component-list.html
+++ b/docs/partials/component-list.html
@@ -62,7 +62,7 @@
 
   <li class="docs-nav-title">Media</li>
   <li{{#ifpage 'badge'}} class="current"{{/ifpage}}><a href="badge.html">Badge</a></li>
-  <li{{#ifpage 'flex-video'}} class="current"{{/ifpage}}><a href="flex-video.html">Flex Video</a></li>
+  <li{{#ifpage 'responsive-embed'}} class="current"{{/ifpage}}><a href="responsive-embed.html">Responsive Embed</a></li>
   <li{{#ifpage 'label'}} class="current"{{/ifpage}}><a href="label.html">Label</a></li>
   <li{{#ifpage 'orbit'}} class="current"{{/ifpage}}><a href="orbit.html">Orbit <span class="label">JS</span> <small>Carousel</small></a></li>
   <li{{#ifpage 'progress-bar'}} class="current"{{/ifpage}}><a href="progress-bar.html">Progress Bar</a></li>
diff --git a/meteor-README.md b/meteor-README.md
index 199bd5d47..61f0c1a90 100644
--- a/meteor-README.md
+++ b/meteor-README.md
@@ -50,7 +50,7 @@ Or you can comment out the components you don't need:
 @include foundation-drilldown-menu;
 @include foundation-dropdown;
 @include foundation-dropdown-menu;
-@include foundation-flex-video;
+@include foundation-responsive-embed;
 @include foundation-label;
 @include foundation-media-object;
 @include foundation-menu;
@@ -70,7 +70,7 @@ Or you can comment out the components you don't need:
 @include foundation-top-bar;
 ```
 
-Note: For now there is a Motion-UI library added in the package (css, js files). It is needed for some Foundation plugins. Maybe in the future it will be separated package. 
+Note: For now there is a Motion-UI library added in the package (css, js files). It is needed for some Foundation plugins. Maybe in the future it will be separated package.
 
 ### 3. Overwrite Foundation settings
 
@@ -145,6 +145,5 @@ You will find more info about particular plugins on its docs page here: [http://
 
 #### Known problems
 
-1. **Conflicts with Meteor events**. 
+1. **Conflicts with Meteor events**.
 Solution: Try to always wrap Foundation's DOM nodes into another ones in your Meteor templates. This applies only to nodes on which are initialized Foundation's JS plugins and which are the first nodes in the Meteor templates with attached custom Meteor events. For more details read the last comments here: [#7248](https://github.com/zurb/foundation-sites/issues/7248)
-
diff --git a/package.js b/package.js
index b660aae19..7540d0128 100644
--- a/package.js
+++ b/package.js
@@ -28,7 +28,6 @@ Package.onUse(function(api) {
     'scss/components/_drilldown.scss',
     'scss/components/_dropdown-menu.scss',
     'scss/components/_dropdown.scss',
-    'scss/components/_flex-video.scss',
     'scss/components/_flex.scss',
     'scss/components/_float.scss',
     'scss/components/_label.scss',
@@ -39,6 +38,7 @@ Package.onUse(function(api) {
     'scss/components/_orbit.scss',
     'scss/components/_pagination.scss',
     'scss/components/_progress-bar.scss',
+    'scss/components/_responsive-embed.scss',
     'scss/components/_reveal.scss',
     'scss/components/_slider.scss',
     'scss/components/_sticky.scss',
diff --git a/scss/components/_flex-video.scss b/scss/components/_flex-video.scss
deleted file mode 100644
index 71cce1258..000000000
--- a/scss/components/_flex-video.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-// Foundation for Sites by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-////
-/// @group flex-video
-////
-
-/// Margin below a flex video container.
-/// @type Number
-$flexvideo-margin-bottom: rem-calc(16) !default;
-
-/// Padding used to create a 4:3 aspect ratio.
-/// @type Number
-$flexvideo-ratio: 4 by 3 !default;
-
-/// Padding used to create a 16:9 aspect ratio.
-/// @type Number
-$flexvideo-ratio-widescreen: 16 by 9 !default;
-
-/// Creates a percentage height that can be used as padding in a flex video container.
-/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
-/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container.
-@function flex-video($ratio) {
-  $w: nth($ratio, 1);
-  $h: nth($ratio, 3);
-  @return $h / $w * 100%;
-}
-
-/// Creates a flex video container.
-/// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`.
-@mixin flex-video($ratio: $flexvideo-ratio) {
-  position: relative;
-  height: 0;
-  padding-bottom: flex-video($ratio);
-  margin-bottom: $flexvideo-margin-bottom;
-  overflow: hidden;
-
-  iframe,
-  object,
-  embed,
-  video {
-    position: absolute;
-    top: 0;
-    #{$global-left}: 0;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-@mixin foundation-flex-video {
-  .flex-video {
-    @include flex-video;
-
-    &.widescreen {
-      padding-bottom: flex-video($flexvideo-ratio-widescreen);
-    }
-
-    &.vimeo {
-      padding-top: 0;
-    }
-  }
-}
diff --git a/scss/components/_responsive-embed.scss b/scss/components/_responsive-embed.scss
new file mode 100644
index 000000000..3f84e5538
--- /dev/null
+++ b/scss/components/_responsive-embed.scss
@@ -0,0 +1,79 @@
+// Foundation for Sites by ZURB
+// foundation.zurb.com
+// Licensed under MIT Open Source
+
+////
+/// @group responsive-embed
+////
+
+/// Margin below a responsive embed container.
+/// @type Number
+$responsive-embed-margin-bottom: rem-calc(16) !default;
+
+/// Padding used to create a 4:3 aspect ratio.
+/// @type Number
+$responsive-embed-ratio: 4 by 3 !default;
+
+/// Padding used to create a 16:9 aspect ratio.
+/// @type Number
+$responsive-embed-ratio-widescreen: 16 by 9 !default;
+
+/// Creates a percentage height that can be used as padding in a responsive embed container.
+/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.
+/// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a responsive embed container.
+@function responsive-embed($ratio) {
+  $w: nth($ratio, 1);
+  $h: nth($ratio, 3);
+  @return $h / $w * 100%;
+}
+
+/// Creates a responsive embed container.
+/// @param {List} $ratio [$responsive-embed-ratio] - Ratio to use for the container, formatted as `x by y`.
+@mixin responsive-embed($ratio: $responsive-embed-ratio) {
+  position: relative;
+  height: 0;
+  padding-bottom: responsive-embed($ratio);
+  margin-bottom: $responsive-embed-margin-bottom;
+  overflow: hidden;
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@mixin foundation-responsive-embed {
+  .responsive-embed, .flex-video {
+    @include responsive-embed;
+
+    &.widescreen {
+      padding-bottom: responsive-embed($responsive-embed-ratio-widescreen);
+    }
+  }
+}
+
+@mixin flex-video($ratio: $responsive-embed-ratio) {
+  @warn 'This mixin is being replaced by responsive-embed(). flex-video() will be removed in Foundation 6.4.';
+  position: relative;
+  height: 0;
+  padding-bottom: responsive-embed($ratio);
+  margin-bottom: $responsive-embed-margin-bottom;
+  overflow: hidden;
+
+  iframe,
+  object,
+  embed,
+  video {
+    position: absolute;
+    top: 0;
+    #{$global-left}: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/scss/foundation.scss b/scss/foundation.scss
index 79b1b133a..a27252bf3 100644
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -29,7 +29,7 @@
 @import 'components/dropdown-menu';
 @import 'components/dropdown';
 @import 'components/flex';
-@import 'components/flex-video';
+@import 'components/responsive-embed';
 @import 'components/label';
 @import 'components/media-object';
 @import 'components/menu';
@@ -76,7 +76,7 @@
   @include foundation-drilldown-menu;
   @include foundation-dropdown;
   @include foundation-dropdown-menu;
-  @include foundation-flex-video;
+  @include foundation-responsive-embed;
   @include foundation-label;
   @include foundation-media-object;
   @include foundation-off-canvas;
diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index c28cdfe3f..f8180ad35 100644
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -20,16 +20,16 @@
 //  15. Drilldown
 //  16. Dropdown
 //  17. Dropdown Menu
-//  18. Flex Video
-//  19. Forms
-//  20. Label
-//  21. Media Object
-//  22. Menu
-//  23. Meter
-//  24. Off-canvas
-//  25. Orbit
-//  26. Pagination
-//  27. Progress Bar
+//  18. Forms
+//  19. Label
+//  20. Media Object
+//  21. Menu
+//  22. Meter
+//  23. Off-canvas
+//  24. Orbit
+//  25. Pagination
+//  26. Progress Bar
+//  27. Responsive Embed
 //  28. Reveal
 //  29. Slider
 //  30. Switch
@@ -313,14 +313,7 @@ $dropdownmenu-min-width: 200px;
 $dropdownmenu-background: $white;
 $dropdownmenu-border: 1px solid $medium-gray;
 
-// 18. Flex Video
-// --------------
-
-$flexvideo-margin-bottom: rem-calc(16);
-$flexvideo-ratio: 4 by 3;
-$flexvideo-ratio-widescreen: 16 by 9;
-
-// 19. Forms
+// 18. Forms
 // ---------
 
 $fieldset-border: 1px solid $medium-gray;
@@ -358,7 +351,7 @@ $input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
 $input-number-spinners: true;
 $input-radius: $global-radius;
 
-// 20. Label
+// 19. Label
 // ---------
 
 $label-background: $primary-color;
@@ -367,7 +360,7 @@ $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
 $label-radius: $global-radius;
 
-// 21. Media Object
+// 20. Media Object
 // ----------------
 
 $mediaobject-margin-bottom: $global-margin;
@@ -384,7 +377,7 @@ $menu-item-color-active: $white;
 $menu-item-background-active: map-get($foundation-palette, primary);
 $menu-icon-spacing: 0.25rem;
 
-// 23. Meter
+// 22. Meter
 // ---------
 
 $meter-height: 1rem;
@@ -394,7 +387,7 @@ $meter-fill-good: $success-color;
 $meter-fill-medium: $warning-color;
 $meter-fill-bad: $alert-color;
 
-// 24. Off-canvas
+// 23. Off-canvas
 // --------------
 
 $offcanvas-size: 250px;
@@ -408,7 +401,7 @@ $offcanvas-vertical-size: 250px;
 $maincontent-class: 'off-canvas-content';
 $maincontent-shadow: 0 0 10px rgba($black, 0.5);
 
-// 25. Orbit
+// 24. Orbit
 // ---------
 
 $orbit-bullet-background: $medium-gray;
@@ -423,7 +416,7 @@ $orbit-control-background-hover: rgba($black, 0.5);
 $orbit-control-padding: 1rem;
 $orbit-control-zindex: 10;
 
-// 26. Pagination
+// 25. Pagination
 // --------------
 
 $pagination-font-size: rem-calc(14);
@@ -440,7 +433,7 @@ $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
 $pagination-arrows: true;
 
-// 27. Progress Bar
+// 26. Progress Bar
 // ----------------
 
 $progress-height: 1rem;
@@ -449,6 +442,13 @@ $progress-margin-bottom: $global-margin;
 $progress-meter-background: $primary-color;
 $progress-radius: $global-radius;
 
+// 27. Responsive Embed
+// --------------
+
+$responsive-embed-margin-bottom: rem-calc(16);
+$responsive-embed-ratio: 4 by 3;
+$responsive-embed-ratio-widescreen: 16 by 9;
+
 // 28. Reveal
 // ----------
 
diff --git a/test/sass/_components.scss b/test/sass/_components.scss
index 9d93d5a27..90d284865 100644
--- a/test/sass/_components.scss
+++ b/test/sass/_components.scss
@@ -1,13 +1,13 @@
 @import "true";
 
 @import '../../scss/global';
-@import '../../scss/components/flex-video';
+@import '../../scss/components/responsive-embed';
 @import '../../scss/grid/grid';
 
 @include test-module('Components') {
-  
-  @include test('Flex Video [function]') {
-    $test: flex-video(3 by 4);
+
+  @include test('Responsive Embed [function]') {
+    $test: responsive-embed(3 by 4);
     $expect: 4 / 3 * 100%;
 
     @include assert-equal($test, $expect,