@rhds/elements/elements/rh-skeleton/rh-skeleton-lightdom.css

Red Hat Design System Elements

rh-skeleton {
  background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
  block-size: calc(var(--rh-font-size-body-text-md, 1rem) * var(--rh-line-height-body-text, 1.5));
  border-radius: var(--rh-border-radius-default, 3px);
  display: block;
  inline-size: 100%;
  margin-block-end: var(--rh-space-xs, 4px);
  overflow: hidden;
  position: relative;

  &:after {
    --_placeholder-color:
      light-dark(var(--rh-color-black, #000000),
        var(--rh-color-white, #ffffff));

    animation: shimmer 2s infinite;
    background:
      linear-gradient(to right,
        hsla(from var(--_placeholder-color) h s l / 0) var(--rh-opacity-0, 0%),
        hsla(from var(--_placeholder-color) h s l / 0.05) calc(var(--rh-opacity-20, 20%) + 5%),
        hsla(from var(--_placeholder-color) h s l / 0.1) var(--rh-opacity-50, 50%),
        hsla(from var(--_placeholder-color) h s l / 0.05) calc(var(--rh-opacity-70, 70%) + 5%),
        hsla(from var(--_placeholder-color) h s l / 0) var(--rh-opacity-100, 100%));
    content: '';
    inset: 0;
    position: absolute;
    transform: translateX(-100%);
  }
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/**
 * Body Copy Skeletons:
*/
rh-skeleton[size='xs'][type='body-copy']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size:
    calc(
        var(--rh-font-size-body-text-xs, 0.75rem) * var(--rh-line-height-body-text, 1.5)
      );
}

rh-skeleton[size='sm'][type='body-copy']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size:
    calc(
        var(--rh-font-size-body-text-sm, 0.875rem) * var(--rh-line-height-body-text, 1.5)
      );
}

/* Medium = default skeleton, handled above */

rh-skeleton[size='lg'][type='body-copy']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size:
    calc(
        var(--rh-font-size-body-text-lg, 1.125rem) * var(--rh-line-height-body-text, 1.5)
      );
}

rh-skeleton[size='xl'][type='body-copy']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size:
    calc(
        var(--rh-font-size-body-text-xl, 1.25rem) * var(--rh-line-height-body-text, 1.5)
      );
}

/* stylelint-disable-next-line @stylistic/max-line-length */
rh-skeleton[size='2xl'][type='body-copy']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size:
    calc(
        var(--rh-font-size-body-text-2xl, 1.5rem) * var(--rh-line-height-body-text, 1.5)
      );
}

/**
 * Heading Skeletons:
*/
rh-skeleton[size='xs'][type='heading']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size: calc(var(--rh-font-size-heading-xs, 1.25rem) * var(--rh-line-height-heading, 1.3));
}

rh-skeleton[size='sm'][type='heading']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size: calc(var(--rh-font-size-heading-sm, 1.5rem) * var(--rh-line-height-heading, 1.3));
}

rh-skeleton[type='heading']:not([type='circle'], [type='square'], [type='rectangle']),
rh-skeleton[size='md'][type='heading']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size: calc(var(--rh-font-size-heading-md, 1.75rem) * var(--rh-line-height-heading, 1.3));
}

rh-skeleton[size='lg'][type='heading']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size: calc(var(--rh-font-size-heading-lg, 2.25rem) * var(--rh-line-height-heading, 1.3));
}

rh-skeleton[size='xl'][type='heading']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size: calc(var(--rh-font-size-heading-xl, 2.5rem) * var(--rh-line-height-heading, 1.3));
}

rh-skeleton[size='2xl'][type='heading']:not([type='circle'], [type='square'], [type='rectangle']) {
  block-size: calc(var(--rh-font-size-heading-2xl, 3rem) * var(--rh-line-height-heading, 1.3));
}

/**
 * Shape Skeletons:
*/
rh-skeleton:is([type='circle'], [type='square'], [type='rectangle']) {
  block-size: var(--rh-length-4xl, 64px);
}

rh-skeleton:is([type='circle'], [type='square']) {
  inline-size: var(--rh-length-4xl, 64px);
}

rh-skeleton[type='circle'] {
  border-radius: 50%;
}

rh-skeleton[type='square'] {
  border-radius: var(--rh-border-radius-default, 3px);
}

rh-skeleton[type='rectangle'] {
  inline-size: var(--rh-length-7xl, 128px);
}