• No results

Product Media

Installation

  yarn add @chewy/kib-product-new-styles

Import

  @use '~@chewy/kib-product-new-styles/src/kib-product-media/styles' as kib-product-media;

Mixins

base

@mixin base() { ... }@mixin base() { 
  display: block;
  position: relative;
  height: 100%;
  width: auto;
  max-width: unit.rem(settings.$max-width);
  min-width: unit.rem(settings.$min-width);
  aspect-ratio: 3/4;
  border-radius: unit.rem(8px);
  overflow: hidden;
 }
Description

Base product-media styles Creates a container with a fixed 3:4 aspect ratio (taller than wide)

Parameters

None.

Requires

canvas

@mixin canvas() { ... }@mixin canvas() { 
  display: flex;
  position: absolute;
  inset: 0;
  padding: spacing.get('s3');
  align-items: center;
  justify-content: center;
 }
Description

Canvas element styles Creates a wrapper that centers the image content

Parameters

None.

Requires

image

@mixin image() { ... }@mixin image() { 
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
 }
Description

Image element styles Ensures the image fits within the container while maintaining aspect ratio

Parameters

None.

append

@mixin append() { ... }@mixin append() { 
  display: flex;
  justify-content: flex-end;
  position: absolute;
  bottom: spacing.get('s3');
  right: spacing.get('s3');
 }
Description

Container that holds appended content below image

Parameters

None.

Requires

Variables

min-width

$min-width: unit.rem(80px) !default;
Description

Max width of image

Type

Number

max-width

$max-width: unit.rem(300px) !default;
Description

Max width of image

Type

Number