use map for responsive embed ratios

diff --git a/docs/pages/responsive-embed.md b/docs/pages/responsive-embed.md
index 5e109d633d9f835e0bbd976191211e77827b4d7c..34fcf772ad9415547f68c471a5fb6d9b9c0663b9 100644 (file)
--- a/docs/pages/responsive-embed.md
+++ b/docs/pages/responsive-embed.md
@@ -15,7 +15,9 @@ To make sure embedded content maintains its aspect ratio as the width of the scr
 
 ---
 
-The default ratio is 4:3. Add the `.widescreen` class to change it to 16:9.
+## Aspect Ratios
+
+Add ratio classes to change the aspect ratio of responsive embeds. The default ratio is 4:3. The `.widescreen` class will change the container's aspect ratio to 16:9.
 
 ```html_example
 <div class="responsive-embed widescreen">
@@ -23,18 +25,19 @@ The default ratio is 4:3. Add the `.widescreen` class to change it to 16:9.
 </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.
+The ratio classes are generated by the keys in the `$responsive-embed-ratios` map in your settings file. Only the `default` key is required. You can, for example, make your default ratio 16:9, remove widescreen, and add other aspect ratios.
 
 ```scss
-.panorama {
-  @include responsive-embed(256 by 81);
-}
+$responsive-embed-ratios: (
+  default: 16 by 9,
+  vertical: 9 by 16,
+  panorama: 256 by 81,
+  square: 1 by 1,
+);
 ```
 
 ```html_example
-<div class="panorama">
+<div class="responsive-embed panorama">
   <iframe width="1024" height="315" src="https://www.youtube.com/embed/bnD9I24EL_4" frameborder="0" allowfullscreen></iframe>
 </div>
 ```

diff --git a/scss/components/_responsive-embed.scss b/scss/components/_responsive-embed.scss
index a476c149596851f7dfcf7fad944bb9179a492500..f235968388eda1e2fe0395c0b9f995c29f169c46 100644 (file)
--- a/scss/components/_responsive-embed.scss
+++ b/scss/components/_responsive-embed.scss
@@ -10,13 +10,12 @@
 /// @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;
+/// Aspect ratios used to determine padding-bottom of responsive embed containers.
+/// @type Map
+$responsive-embed-ratios: (
+  default: 4 by 3,
+  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`.
@@ -29,7 +28,7 @@ $responsive-embed-ratio-widescreen: 16 by 9 !default;
 
 /// 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) {
+@mixin responsive-embed($ratio: 4 by 3) {
   position: relative;
   height: 0;
   margin-bottom: $responsive-embed-margin-bottom;
@@ -50,10 +49,14 @@ $responsive-embed-ratio-widescreen: 16 by 9 !default;
 
 @mixin foundation-responsive-embed {
   .responsive-embed, .flex-video {
-    @include responsive-embed;
+    @include responsive-embed( map-get($responsive-embed-ratios,default) );
 
-    &.widescreen {
-      padding-bottom: responsive-embed($responsive-embed-ratio-widescreen);
+    @each $name, $ratio in $responsive-embed-ratios {
+      @if $name != default {
+        &.#{$name} {
+          padding-bottom: responsive-embed($ratio);
+        }
+      }
     }
   }
 }
@@ -65,20 +68,5 @@ $responsive-embed-ratio-widescreen: 16 by 9 !default;
 
 @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;
-  margin-bottom: $responsive-embed-margin-bottom;
-  padding-bottom: responsive-embed($ratio);
-  overflow: hidden;
-
-  iframe,
-  object,
-  embed,
-  video {
-    position: absolute;
-    top: 0;
-    #{$global-left}: 0;
-    width: 100%;
-    height: 100%;
-  }
+  @include responsive-embed;
 }