diff options
| author | Mark Otto <markdotto@gmail.com> | 2020-09-22 00:15:15 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2020-09-23 23:30:11 +0300 |
| commit | 18f8601d29ba4ccb11eb1d040eedb093ad48849b (patch) | |
| tree | 33e444606399d9d63c0f678ab7ceaf740bc76c21 /scss/helpers | |
| parent | 5280771883561065a1641f46f2ee56a4eaafae4f (diff) | |
Updates responsive embeds with new class names and CSS variables
- Renames .embed-responsive-XbyY classes to .embed-responsive-XxY
- Simplifies the Sass map to just be key and value, ratio and percentage
- Builds .embed-responsive-* modifiers with CSS variables
- Updates docs to show power of CSS variables
- Add notes to the Migration guide
Diffstat (limited to 'scss/helpers')
| -rw-r--r-- | scss/helpers/_embed.scss | 6 |
1 files changed, 3 insertions, 3 deletions
diff --git a/scss/helpers/_embed.scss b/scss/helpers/_embed.scss index 924fc0e6d0..8dbb7487d0 100644 --- a/scss/helpers/_embed.scss +++ b/scss/helpers/_embed.scss @@ -1,11 +1,13 @@ // Credit: Nicolas Gallagher and SUIT CSS. .embed-responsive { + position: relative; width: 100%; &::before { display: block; + padding-top: var(--aspect-ratio); content: ""; } @@ -24,8 +26,6 @@ @each $key, $ratio in $embed-responsive-aspect-ratios { .embed-responsive-#{$key} { - &::before { - padding-top: percentage(map-get($ratio, y) / map-get($ratio, x)); - } + --aspect-ratio: #{$ratio}; } } |