From a776cc473d17f53d8136537c2f2aa31d29ce0d12 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Sun, 5 May 2019 09:41:27 +0200
Subject: [PATCH] Switch from list to map for responsive embeds (#28678)

---
 scss/_variables.scss                     | 22 +++++++++++++++++-----
 scss/utilities/_embed.scss               |  9 +++------
 site/content/docs/4.3/utilities/embed.md | 24 ++++++++++++++++++------
 3 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index f4fbddee97..8255d107ae 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -255,12 +255,24 @@ $transition-collapse:         height .35s ease !default;
 
 $embed-responsive-aspect-ratios: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
-$embed-responsive-aspect-ratios: join(
+$embed-responsive-aspect-ratios: map-merge(
   (
-    (21 9),
-    (16 9),
-    (4 3),
-    (1 1),
+    "21by9": (
+      x: 21,
+      y: 9
+    ),
+    "16by9": (
+      x: 16,
+      y: 9
+    ),
+    "4by3": (
+      x: 4,
+      y: 3
+    ),
+    "1by1": (
+      x: 1,
+      y: 1
+    )
   ),
   $embed-responsive-aspect-ratios
 );
diff --git a/scss/utilities/_embed.scss b/scss/utilities/_embed.scss
index 4497ac0400..89d22aa6c4 100644
--- a/scss/utilities/_embed.scss
+++ b/scss/utilities/_embed.scss
@@ -27,13 +27,10 @@
   }
 }
 
-@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
-  $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
-  $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
-
-  .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
+@each $key, $ratio in $embed-responsive-aspect-ratios {
+  .embed-responsive-#{$key} {
     &::before {
-      padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
+      padding-top: percentage(map-get($ratio, y) / map-get($ratio, x));
     }
   }
 }
diff --git a/site/content/docs/4.3/utilities/embed.md b/site/content/docs/4.3/utilities/embed.md
index 7fdb6b943d..e744f27c0f 100644
--- a/site/content/docs/4.3/utilities/embed.md
+++ b/site/content/docs/4.3/utilities/embed.md
@@ -48,13 +48,25 @@ Aspect ratios can be customized with modifier classes. By default the following
 </div>
 {{< /highlight >}}
 
-Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` list:
+Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` map:
 
 {{< highlight scss >}}
 $embed-responsive-aspect-ratios: (
-  (21 9),
-  (16 9),
-  (4 3),
-  (1 1)
-) !default;
+  "21by9": (
+    x: 21,
+    y: 9
+  ),
+  "16by9": (
+    x: 16,
+    y: 9
+  ),
+  "4by3": (
+    x: 4,
+    y: 3
+  ),
+  "1by1": (
+    x: 1,
+    y: 1
+  )
+);
 {{< /highlight >}}