@zohodesk/dot/es/NewStar/NewStar.module.css

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

.star {
  position: absolute;
  height: var(--zd_size20) ;
  width: var(--zd_size21) ;
  pointer-events: none;
}
.topLeft {
  top: 0 ;
}
[dir=ltr] .topLeft {
  transform: translate(-45%, -45%);
  left: 0 ;
}
[dir=rtl] .topLeft {
  transform: translate(45%, -45%);
  right: 0 ;
}
.topRight {
  top: 0 ;
}
[dir=ltr] .topRight {
  transform: translate(45%, -45%);
  right: 0 ;
}
[dir=rtl] .topRight {
  transform: translate(-45%, -45%);
  left: 0 ;
}
.bottomLeft {
  bottom: 0 ;
}
[dir=ltr] .bottomLeft {
  transform: translate(-45%, 45%);
  left: 0 ;
}
[dir=rtl] .bottomLeft {
  transform: translate(45%, 45%);
  right: 0 ;
}
.bottomRight {
  bottom: 0 ;
}
[dir=ltr] .bottomRight {
  transform: translate(45%, 45%);
  right: 0 ;
}
[dir=rtl] .bottomRight {
  transform: translate(-45%, 45%);
  left: 0 ;
}

.stars {
  position: absolute;
}

[dir=ltr] .stars {
  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
}

[dir=rtl] .stars {
  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
}
.green::before {
  color: var(--zdt_newstar_green_text);
}
.yellow::before {
  color: var(--zdt_newstar_yellow_text);
}
.blue::before {
  color: var(--zdt_newstar_blue_text);
}
.starOne {
  composes: stars;
}
.starTwo {
  composes: stars;
}
[dir=ltr] .starTwo {
  animation-delay: 0.5s;
}
[dir=rtl] .starTwo {
  animation-delay: 0.5s;
}
.starThree {
  composes: stars;
}
[dir=ltr] .starThree {
  animation-delay: 1s;
}
[dir=rtl] .starThree {
  animation-delay: 1s;
}

.topLeft .starOne {
  top: 0 ;
}

[dir=ltr] .topLeft .starOne {
  left: 0 ;
}

[dir=rtl] .topLeft .starOne {
  right: 0 ;
}
.topLeft .starTwo {
  top: 0 ;
  /*  Variable:Ignore  */
}
[dir=ltr] .topLeft .starTwo {
  left: var(--zd_size10) ;
}
[dir=rtl] .topLeft .starTwo {
  right: var(--zd_size10) ;
}
.topLeft .starThree {
  /*  Variable:Ignore  */
  top: 10px;
}
[dir=ltr] .topLeft .starThree {
  left: 0 ;
}
[dir=rtl] .topLeft .starThree {
  right: 0 ;
}

.topRight .starOne {
  top: 0 ;
}

[dir=ltr] .topRight .starOne {
  right: 0 ;
}

[dir=rtl] .topRight .starOne {
  left: 0 ;
}
.topRight .starTwo {
  top: 0 ;
  /*  Variable:Ignore  */
}
[dir=ltr] .topRight .starTwo {
  right: var(--zd_size10) ;
}
[dir=rtl] .topRight .starTwo {
  left: var(--zd_size10) ;
}
.topRight .starThree {
  /*  Variable:Ignore  */
  top: 10px;
}
[dir=ltr] .topRight .starThree {
  right: 0 ;
}
[dir=rtl] .topRight .starThree {
  left: 0 ;
}

.bottomLeft .starOne {
  bottom: 0 ;
}

[dir=ltr] .bottomLeft .starOne {
  left: 0 ;
}

[dir=rtl] .bottomLeft .starOne {
  right: 0 ;
}
.bottomLeft .starTwo {
  bottom: 0 ;
  /*  Variable:Ignore  */
}
[dir=ltr] .bottomLeft .starTwo {
  left: var(--zd_size10) ;
}
[dir=rtl] .bottomLeft .starTwo {
  right: var(--zd_size10) ;
}
.bottomLeft .starThree {
  /*  Variable:Ignore  */
  bottom: 10px;
}
[dir=ltr] .bottomLeft .starThree {
  left: 0 ;
}
[dir=rtl] .bottomLeft .starThree {
  right: 0 ;
}

.bottomRight .starOne {
  bottom: 0 ;
}

[dir=ltr] .bottomRight .starOne {
  right: 0 ;
}

[dir=rtl] .bottomRight .starOne {
  left: 0 ;
}
.bottomRight .starTwo {
  bottom: 0 ;
  /*  Variable:Ignore  */
}
[dir=ltr] .bottomRight .starTwo {
  right: var(--zd_size10) ;
}
[dir=rtl] .bottomRight .starTwo {
  left: var(--zd_size10) ;
}
.bottomRight .starThree {
  /*  Variable:Ignore  */
  bottom: 10px;
}
[dir=ltr] .bottomRight .starThree {
  right: 0 ;
}
[dir=rtl] .bottomRight .starThree {
  left: 0 ;
}

@keyframes twinkle {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.6;
  }
}

@keyframes star-scale {
  0% {
    transform: perspective(1px) scale(0.7);
  }
  50% {
    transform: perspective(1px) scale(1, 1);
  }
  100% {
    transform: perspective(1px) scale(0.7);
  }
}