Switch from list to map for responsive embeds (#28678)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index f4fbddee977718d62fcd471f2331f1d85a8809f9..8255d107ae1a9bab2b2bb424b0331525f49877eb 100644 (file)
--- 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 4497ac0400fbfacc098868f93fb1d55bf3d2ac77..89d22aa6c453d892868e144f547db4d327704719 100644 (file)
--- 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 7fdb6b943d0e753e7f670f81d7f63c28d8f7b13e..e744f27c0f2bf415dfa3cd3b78a3e125d3a70510 100644 (file)
--- 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 >}}