Bootstrap/scss/helpers/_ratio.scss

// Credit: Nicolas Gallagher and SUIT CSS.

.ratio {
  position: relative;
  width: 100%;

  &::before {
    display: block;
    padding-top: var(--#{$prefix}aspect-ratio);
    content: "";
  }

  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@each $key, $ratio in $aspect-ratios {
  .ratio-#{$key} {
    --#{$prefix}aspect-ratio: #{$ratio};
  }
}
Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs 2014-03-07 08:18:13 +01:00			`// Credit: Nicolas Gallagher and SUIT CSS.`

Rename the classes and docs page, update everything accordingly 2020-09-23 01:30:00 +02:00			`.ratio {`
Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs 2014-03-07 08:18:13 +01:00			`position: relative;`
Fix responsive embed class in flex container 2016-04-15 10:40:51 +02:00			`width: 100%;`
Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs 2014-03-07 08:18:13 +01:00
Fix responsive embed class in flex container 2016-04-15 10:40:51 +02:00			`&::before {`
			`display: block;`
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch 2022-03-13 18:13:09 +01:00			`padding-top: var(--#{$prefix}aspect-ratio);`
Fix responsive embed class in flex container 2016-04-15 10:40:51 +02:00			`content: "";`
			`}`

Updates to .ratio selectors and docs - Remove group selector for ratio items - Drop the .ratio-item entirely - Update docs to explain updated approach - Update Migration guide to reflect the latest 2020-09-23 20:06:21 +02:00			`> * {`
Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs 2014-03-07 08:18:13 +01:00			`position: absolute;`
			`top: 0;`
fix all validation, turn off some settings, add sort order 2014-12-11 21:05:29 +01:00			`left: 0;`
Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs 2014-03-07 08:18:13 +01:00			`width: 100%;`
fix all validation, turn off some settings, add sort order 2014-12-11 21:05:29 +01:00			`height: 100%;`
Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs 2014-03-07 08:18:13 +01:00			`}`
Extract responsive embed nested classes I think this is the more common coding convention across Bootstrap. Extract nested classes as first-class citizens and assume HTML would use both. 2015-02-02 18:26:30 +01:00			`}`
Moving the embed to it's own CSS file, moving the docs to the Components page with an example, fixing a Glyhpicons list problem in the docs 2014-03-07 08:18:13 +01:00
Rename the classes and docs page, update everything accordingly 2020-09-23 01:30:00 +02:00			`@each $key, $ratio in $aspect-ratios {`
			`.ratio-#{$key} {`
Add additional root variables, rename `$variable-prefix` to `$prefix` (#35981) * Add additional root variables, rename $variable-prefix to $prefix - Adds new root CSS variables for border-radius, border-width, border-color, and border-style - Adds new root CSS variables for heading-color, link-colors, code color, and highlight color - Replaces most instances of Sass variables (for border-radius, border-color, border-style, and border-width) for CSS variables inside _variables.scss - Updates $mark-padding to be an even pixel number - Renames $variable-prefix to $prefix throughout * Bundlewatch 2022-03-13 18:13:09 +01:00			`--#{$prefix}aspect-ratio: #{$ratio};`
Fix responsive embed class in flex container 2016-04-15 10:40:51 +02:00			`}`
Add responsive embed class for 1:1 aspect ratio Closes #18141 2015-11-24 04:50:38 +01:00			`}`