You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

26 lines
399 B

8 months ago
  1. // Credit: Nicolas Gallagher and SUIT CSS.
  2. .ratio {
  3. position: relative;
  4. width: 100%;
  5. &::before {
  6. display: block;
  7. padding-top: var(--#{$prefix}aspect-ratio);
  8. content: "";
  9. }
  10. > * {
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 100%;
  15. height: 100%;
  16. }
  17. }
  18. @each $key, $ratio in $aspect-ratios {
  19. .ratio-#{$key} {
  20. --#{$prefix}aspect-ratio: #{$ratio};
  21. }
  22. }