• No results

Skeleton

Installation

  yarn add @chewy/kib-foundations

Import

  @use '~@chewy/kib-foundations/src/skeleton';

Mixins

aspect-ratio

@mixin aspect-ratio($width, $height) { ... }@mixin aspect-ratio($width, $height) { 
  aspect-ratio: list.slash($width, $height);

  $do-math: meta.type-of($width) == 'number' and meta.type-of($height) == 'number';

  @supports not (aspect-ratio: auto) {
    position: relative;

    &::before {
      display: block;
      content: '';
      @if $do-math {
        padding-top: math.percentage(math.div($height, $width));
      } @else {
        padding-top: calc((#{$height} / #{$width}) * 100%);
      }
    }
  }
 }
Description

Skeleton aspect-ratio

Parameters
Parameters
NameDescriptionTypeDefault value
$width

width ratio

Number—
$height

height ratio

Number—
Example

skeleton with 16:9 aspect ratio

.video {
  @include skeleton.base-styles;
  @include skeleton.aspect-ratio(16, 9);
}
Requires

base-styles

@mixin base-styles($animation: true) { ... }@mixin base-styles($animation: true) { 
  display: block;
  width: 100%;
  max-width: 100%;
  margin-bottom: spacing.get('s2');
  background-color: settings.$background-color-light-bg;

  @if $animation {
    /// @param {Boolean} $animation [true] - animation
    position: relative;
    overflow: hidden;

    @at-root {
      @keyframes wave {
        0% {
          transform: translateX(-100%);
        }

        60% {
          transform: translateX(100%);
        }

        100% {
          transform: translateX(100%);
        }
      }
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: settings.$shimmer-gradient-light-bg;
      animation: wave settings.$speed linear settings.$delay infinite;
      content: '';

      @media screen and (prefers-reduced-motion: reduce) {
        animation: none;
      }
    }
  }
 }
Description

Skeleton style generator

Parameters
Parameters
NameDescriptionTypeDefault value
$animation

animation

Booleantrue
Example

Basic styles with customized width and height

.selector {
  @include skeleton.base-styles;
  width: unit.rem(250px);
  height: unit.rem(250px);
}
Requires

text-skeleton

@mixin text-skeleton($size: 'sm', $animation: true) { ... }@mixin text-skeleton($size: 'sm', $animation: true) { 
  @include base-styles($animation);

  height: map.get(settings.$heights, $size);
  border-radius: settings.$border-radius;
 }
Description

Skeleton height for text

Parameters
Parameters
NameDescriptionTypeDefault value
$size

size preset alias

String'sm'
$animation

animation

Booleantrue
Example

skeleton with preset medium(md) text height

.title {
  @include skeleton.text-skeleton(md);
}
Requires

circular-skeleton

@mixin circular-skeleton($animation: true) { ... }@mixin circular-skeleton($animation: true) { 
  @include base-styles($animation);

  border-radius: 50%;
 }
Description

Circular skeleton

Parameters
Parameters
NameDescriptionTypeDefault value
$animation

animation

Booleantrue
Example

circular skeleton with user defined width and height

.avatar {
  @include skeleton.circular-skeleton;
  width: unit.rem(20px);
  height: unit.rem(20px);
}
Requires

Css

position: relative; overflow: hidden; @at-root

position: relative;
    overflow: hidden;

    @at-root { ... }position: relative;
    overflow: hidden;

    @at-root { @keyframes wave {
        0% {
          transform: translateX(-100%);
        }

        60% {
          transform: translateX(100%);
        }

        100% {
          transform: translateX(100%);
        }
      } }

Variables

heights

$heights: (
  sm: unit.rem(20px),
  md: unit.rem(30px),
  lg: unit.rem(50px)
) !default;
Description

Skeleton text heights

Type

List

Used by

speed

$speed: 1.6s !default;
Description

Skeleton animation duration

Type

Number

Used by

delay

$delay: 0.5s !default;
Description

Skeleton animation delay time

Type

Number

Used by

border-radius

$border-radius: unit.rem(4px) !default;
Description

Skeleton border radius

Type

Number

background-color-light-bg

$background-color-light-bg: color.get('ui-elements', 'skeleton', 'primary') !default;
Description

Skeleton background color on light background

Type

Color

Used by

background-color-dark-bg

Deprecated!

not in use

$background-color-dark-bg: color.get('ui-elements', 'skeleton', 'primary') !default;
Description

Skeleton background color on dark background

Type

Color

shimmer-gradient-light-bg

$shimmer-gradient-light-bg: linear-gradient(
  90deg,
  rgba(255, 255, 255, 0) 0,
  #{color.get('ui-elements', 'skeleton', '02')} 20%,
  #{color.get('ui-elements', 'skeleton', '03')} 60%,
  rgba(255, 255, 255, 0)
) !default;
Description

Skeleton shimmer gradient

Type

Color

Used by