@zohodesk/components/lib/Stencils/Stencils.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.varClass {
  /* stencils default variables */
  --stencil_height: var(--zd_size9);
  --stencil_width: 100%;
  --stencil_border_radius: 5px;
}

.container {
  composes: varClass;
  height: var(--stencil_height);
  width: var(--stencil_width);
  border-radius: var(--stencil_border_radius);
}

.stencil {
  background-size: 800px 1px;
}

[dir=ltr] .animate {
  animation-name:  placeHolderShimmer-ltr ;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-duration: var(--zd_transition10);
  animation-timing-function: linear;
}

[dir=rtl] .animate {
  animation-name:  placeHolderShimmer-rtl ;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-duration: var(--zd_transition10);
  animation-timing-function: linear;
}

@keyframes placeHolderShimmer-ltr {
  0% {
    background-position: calc(var(--zd_size468) * -1) 0;
  }

  100% {
    background-position: var(--zd_size468) 0;
  }
}

@keyframes placeHolderShimmer-rtl {
  0% {
    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
  }

  100% {
    background-position: var(--zd_size468) 100%;
  }
}

.rect {
  composes: stencil;
  --stencil_height: var(--zd_size9);
  --stencil_border_radius: 5px;
}

.primary {
  background-color: var(--zdt_stencil_primary_bg);
  background-image: var(--zdt_stencil_primary_gradient_bg);
}

.secondary {
  background-color: var(--zdt_stencil_secondary_bg);
  background-image: var(--zdt_stencil_secondary_gradient_bg);
}

.dark {
  background-color: var(--zdt_stencil_dark_bg);
  background-image: var(--zdt_stencil_dark_gradient_bg);
}

.small {
  --stencil_width: var(--zd_size110);
}

.default {
  --stencil_width: 100%;
}

.medium {
  --stencil_width: var(--zd_size170);
}

.large {
  --stencil_width: var(--zd_size220);
}

.circle {
  composes: stencil;
  --stencil_border_radius: 50%;
}

.square {
  composes: stencil;
  --stencil_border_radius: 4px;
}

.size_large {
  --stencil_width: var(--zd_size42);
  --stencil_height: var(--zd_size42);
}

.size_medium,
.size_default {
  --stencil_width: var(--zd_size30);
  --stencil_height: var(--zd_size30);
}

.size_small {
  --stencil_width: var(--zd_size20);
  --stencil_height: var(--zd_size20);
}