@zohodesk/dot/es/list/GridStencils/GridStencils.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.stenLoading {
  position: relative;
  background-color: var(--zdt_gridstencils_default_bg);
  border-bottom: 1px solid var(--zdt_gridstencils_default_border);
  padding: var(--zd_size13) var(--zd_size15) var(--zd_size11) var(--zd_size15) ;
  margin-bottom: var(--zd_size10) ;
  border-radius: var(--zd_size5);
}
[dir=ltr] .stenLoadbody {
  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
}
[dir=rtl] .stenLoadbody {
  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
}
.stenLoadbody::after {
  content: '';
  height: var(--zd_size22) ;
  width: var(--zd_size22) ;
  top: var(--zd_size15) ;
  position: absolute;
  border-radius: 50%;
  background-color: var(--zdt_gridstencils_after_bg);
}
[dir=ltr] .stenLoadbody::after {
  right: var(--zd_size20) ;
}
[dir=rtl] .stenLoadbody::after {
  left: var(--zd_size20) ;
}
.lineBar {
  width: 90% ;
}
.lineBar2 {
  width: 70% ;
  margin: var(--zd_size22) 0 ;
}
.lineBar3 {
  width: 50% ;
}
.lineBar,
.lineBar2,
.lineBar3 {
  height: var(--zd_size5) ;
}
.lineBar, .lineBar2, .lineBar3 {
  border-radius: var(--zd_size5);
}
.stenListBAr {
  position: relative;
  background: var(--zdt_gridstencils_listbar_bg);
  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
  background-repeat: no-repeat;
}
[dir=ltr] .stenListBAr {
  -webkit-animation-duration: var(--zd_transition10);
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
}
[dir=rtl] .stenListBAr {
  -webkit-animation-duration: var(--zd_transition10);
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
}
.stenListBAr {
  background: var(--zdt_gridstencils_listbar_bg);
  background-image: var(--zdt_gridstencils_listbar_gradient_bg);
  background-repeat: no-repeat;
}
[dir=ltr] .stenListBAr {
  -webkit-animation-duration: var(--zd_transition10);
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
}
[dir=rtl] .stenListBAr {
  -webkit-animation-duration: var(--zd_transition10);
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: placeHolderShimmer;
  -webkit-animation-timing-function: linear;
}
@keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}
.threeLayout .stenLoadbody::before {
  transform: scale(0.8);
}
[dir=ltr] .threeLayout .stenLoadbody::before {
  left: var(--zd_size16) ;
}
[dir=rtl] .threeLayout .stenLoadbody::before {
  right: var(--zd_size16) ;
}
[dir=ltr] .threeLayout .stenLoadbody {
  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) 0 ;
}
[dir=rtl] .threeLayout .stenLoadbody {
  margin: var(--zd_size8) 0 var(--zd_size8) var(--zd_size20) ;
}
.threeLayout .stenLoadbody::after {
  top: var(--zd_size15) ;
  transform: scale(0.8);
}
[dir=ltr] .threeLayout .stenLoadbody::after {
  right: var(--zd_size20) ;
}
[dir=rtl] .threeLayout .stenLoadbody::after {
  left: var(--zd_size20) ;
}
[dir=ltr] .leftCont .stenLoadbody::before {
  left: var(--zd_size33) ;
}
[dir=rtl] .leftCont .stenLoadbody::before {
  right: var(--zd_size33) ;
}
[dir=ltr] .leftCont .stenLoadbody {
  margin: var(--zd_size8) var(--zd_size20) var(--zd_size8) var(--zd_size46) ;
}
[dir=rtl] .leftCont .stenLoadbody {
  margin: var(--zd_size8) var(--zd_size46) var(--zd_size8) var(--zd_size20) ;
}
[dir=ltr] .leftCont .stenLoadbody::after {
  right: var(--zd_size40) ;
}
[dir=rtl] .leftCont .stenLoadbody::after {
  left: var(--zd_size40) ;
}
.leftCont .lineBar {
  width: 80% ;
}
.leftCont .lineBar2 {
  width: 60% ;
}
.leftCont .lineBar3 {
  width: 40% ;
}