feat(ratio); add ratio for portrait videos #775

Orange-OpenSource · Nov 15, 2021 · e4153bc · e4153bc
1 parent 07813d4
commit e4153bc
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -642,7 +642,8 @@ $aspect-ratios: (
   "1x1": 100%,
   "4x3": calc(3 / 4 * 100%),
   "16x9": calc(9 / 16 * 100%),
-  "21x9": calc(9 / 21 * 100%)
+  "21x9": calc(9 / 21 * 100%),
+  "9x16": calc(16 / 9 * 100%),
 ) !default;
 // scss-docs-end aspect-ratios
 // stylelint-enable function-disallowed-list

diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
@@ -185,7 +185,7 @@
 .bd-example-ratios {
   .ratio {
     display: inline-block;
-    width: 10rem;
+    width: 9rem;
     font-weight: $font-weight-bold; // Boosted mod
     color: $gray-800; // Boosted mod
     background-color: $gray-400; // Boosted mod

diff --git a/site/content/docs/5.1/helpers/ratio.md b/site/content/docs/5.1/helpers/ratio.md
@@ -31,6 +31,9 @@ Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an asp
 Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
 
 {{< example class="bd-example-ratios" >}}
+<div class="ratio ratio-9x16">
+  <div>9x16</div>
+</div>
 <div class="ratio ratio-1x1">
   <div>1x1</div>
 </div>