patterns aspect-ratio.mjs

23.68% Statements 9/38

100% Branches 0/0

0% Functions 0/3

23.68% Lines 9/38

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38 1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
1x
1x
1x import { getPatternStyles, patternFns } from '../helpers.mjs';
import { css } from '../css/index.mjs';
 
const aspectRatioConfig = {
transform(props, { map }) {
  const { ratio = 4 / 3, ...rest } = props;
  return {
    position: "relative",
    _before: {
      content: `""`,
      display: "block",
      height: "0",
      paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)
    },
    "&>*": {
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      overflow: "hidden",
      position: "absolute",
      inset: "0",
      width: "100%",
      height: "100%"
    },
    "&>img, &>video": {
      objectFit: "cover"
    },
    ...rest
  };
}}
 
export const getAspectRatioStyle = (styles = {}) => {
  const _styles = getPatternStyles(aspectRatioConfig, styles)
  return aspectRatioConfig.transform(_styles, patternFns)
}
 
export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
aspectRatio.raw = getAspectRatioStyle