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

In this Package, we Provide Some Basic Components to Build Web App

.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] .stencil {
  animation-name:  placeHolderShimmer-ltr ;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-duration: var(--zd_transition10);
  animation-timing-function: linear;
}
[dir=rtl] .stencil {
  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%;
  }
}

.rectangular {
  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%;
}
.clarge {
  --stencil_width: var(--zd_size42);
  --stencil_height: var(--zd_size42);
}
.cmedium,
.cdefault {
  --stencil_width: var(--zd_size30);
  --stencil_height: var(--zd_size30);
}
.csmall {
  --stencil_width: var(--zd_size20);
  --stencil_height: var(--zd_size20);
}