@zohodesk/dot/lib/Onboarding/css/Onboarding.module.css

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

.mainContainer {
  width: var(--zd_size360) ;
}


.positon_absolute{
  position: absolute;
}

.positon_fixed{
  position: fixed;
}

[dir=ltr] .mainContainerAnimation{
  transform-origin: 100% 100%;
  animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
}

[dir=rtl] .mainContainerAnimation{
  transform-origin: 0% 100%;
  animation: scaleBounce var(--zd_transition4) cubic-bezier(0.5, 0.11, 0.15, 1.5) forwards;
}

@keyframes scaleBounce {
  0% {
    transform: scale(0.4);
    opacity: 0;
    visibility: hidden;
  }

  100% {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
  }
}

.header {
  position: relative;
  height: var(--zd_size200) ;
  padding: var(--zd_size10) ;
  background-color: var(--zdt_onboarding_header_bg);
}

[dir=ltr] .header {
  border-top-left-radius: inherit;
}

[dir=rtl] .header {
  border-top-right-radius: inherit;
}


.mediaElement {
  width: 100% ;
  height: 100% ;
  object-fit: cover;
  min-height: var(--zd_size182) ;
  border-radius: 10px;
  border: 1px solid var(--zdt_onboarding_header_border);
}

.image {
  user-drag: none;
  -webkit-user-drag: none;
  background-repeat: no-repeat;
  background-size: cover; 
}

/* image filter layer */
.dvLayer {
  position: relative;
}

.innerHead{
  width: 100% ;
  height: 100% ;
}


.dvLayer::after {
  content: "";
  position: absolute;
  top: calc( var(--zd_size1) * -1 ) ;
  bottom: calc( var(--zd_size1) * -1 ) ;
  opacity: 0.2;
  background-color: var(--zdt_onboarding_primary_bg);
  border-radius: 11px;
}


[dir=ltr] .dvLayer::after {
  left: calc( var(--zd_size1) * -1 ) ;
  right: calc( var(--zd_size1) * -1 ) ;
}


[dir=rtl] .dvLayer::after {
  right: calc( var(--zd_size1) * -1 ) ;
  left: calc( var(--zd_size1) * -1 ) ;
}



.playIcon {
  width: var(--zd_size44) ;
  height: var(--zd_size44) ;
  z-index: 1;
  color: var(--zdt_onboarding_play_icon_text);
  border-radius: 50%;
  background-color: var(--zdt_onboarding_play_icon_bg);
  cursor: pointer;
  border: 2px solid var(--zdt_onboarding_play_icon_border);
}



[dir=ltr] .playIcon {
  padding-left: var(--zd_size3) ;
}



[dir=rtl] .playIcon {
  padding-right: var(--zd_size3) ;
}
.playIconInner{
    /*  Variable:Ignore  */
  font-size: 60px;
}

/* play icon animation  */
.playIconWrapper {
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  composes: navigate transZ from '~@zohodesk/components/es/common/animation.module.css';
}
[dir=ltr] .playIconWrapper {
  left: 0 ;
  right: 0 ;
}
[dir=rtl] .playIconWrapper {
  right: 0 ;
  left: 0 ;
}
.playIconWrapper::before {
  bottom: 0 ;
  content: '';
  position: absolute;
  top: 0 ;
  width: var(--zd_size12) ;
  height: var(--zd_size12) ;
  /* css:validation:ignore */
  margin: auto ;
  box-shadow: 0 0 0 2px var(--zdt_onboarding_collision_unread_shadow);
  border-radius: 100px;
}
[dir=ltr] .playIconWrapper::before {
  left: 0 ;
  right: 0 ;
  animation-duration: var(--zd_transition10);
}
[dir=rtl] .playIconWrapper::before {
  right: 0 ;
  left: 0 ;
  animation-duration: var(--zd_transition10);
}



.content {
  padding: var(--zd_size6) var(--zd_size30) ;
  margin: var(--zd_size16) 0 ;
}

.heading{
  /*  */
}

.description {
  color: var(--zdt_onboarding_description_text); 
  margin-top: var(--zd_size8) ;
}

.footer {
  gap: var(--zd_size10) ;
  padding: 0 var(--zd_size30) var(--zd_size30) ;
  margin-top: var(--zd_size7) ;
}

.btnWrapper{
  gap: var(--zd_size10) ;
  width: 100% ;
}

.footerButton {
  min-width: var(--zd_size70) ;
  font-size: var(--zd_font_size14) ;
  padding: var(--zd_size12) ;
}

.secondaryButttonLink {
  letter-spacing:  0.2px;
  text-transform: capitalize;
  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
  border-radius: 4px;
  cursor: pointer;
  text-align:center;
}
.secondaryButtton{
  color: var(--zdt_onboarding_learnmore_text);
  background-color: var(--zdt_onboarding_learnmore_bg);
  border:1px solid var(--zdt_onboarding_learnmore_border);
}

.secondaryButtton:hover {
  color: var(--zdt_onboarding_learnmore_hover_text);
  border-color: var(--zdt_onboarding_learnmore_hover_border);
}

.primaryButton {
  --button_box_shadow: var(--zd_bs_onboarding_primary_button);
}

/* close icon */
.closeIcon{
  z-index: 1;
  /*  Variable:Ignore  */
  font-size: 9px; 
}

.closeIconContainer {
  position: absolute;
  height: var(--zd_size32) ;
  width: var(--zd_size32) ;
  top: calc( var(--zd_size14) * -1 ) ;
  border-radius: 8px;
  cursor: pointer;
}

[dir=ltr] .closeIconContainer {
  right: calc( var(--zd_size14) * -1 ) ;
}

[dir=rtl] .closeIconContainer {
  left: calc( var(--zd_size14) * -1 ) ;
}

.closeIconContainer::before {
  content: "";
  position: absolute;
  top: calc( var(--zd_size1) * -1 ) ;
  bottom: calc( var(--zd_size1) * -1 ) ;
  border-radius: inherit;
}

[dir=ltr] .closeIconContainer::before {
  left: calc( var(--zd_size1) * -1 ) ;
  right: calc( var(--zd_size1) * -1 ) ;
  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
}

[dir=rtl] .closeIconContainer::before {
  right: calc( var(--zd_size1) * -1 ) ;
  left: calc( var(--zd_size1) * -1 ) ;
  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(-141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
}

.closeIconContainer::after {
  content: "";
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  color: var(--zdt_onboarding_close_icon_text);
  border-radius: inherit; 
  background-color: var(--zdt_onboarding_close_icon_bg);
  box-shadow: var(--zd_bs_onboarding_close_icon);
}

[dir=ltr] .closeIconContainer::after {
  left: 0 ;
  right: 0 ;
}

[dir=rtl] .closeIconContainer::after {
  right: 0 ;
  left: 0 ;
}

.closeIconContainer:hover::after {
  background-color: var(--zdt_onboarding_close_icon_hover_bg);
}

/* ribbon txt */
.newRibbon {
  position: absolute;
  top: var(--zd_size20) ;
  text-transform: capitalize;
  overflow: visible;
  --ribbon_bg_color: var(--zdt_onboarding_ribbon_bg);
  --ribbon_text_color:var(--zdt_onboarding_ribbon_text);
}
[dir=ltr] .newRibbon {
  left: calc( var(--zd_size6) * -1 ) ;
  --ribbon_padding:2px 10px 2px 10px 
    /*rtl:2px 10px 2px 10px */;
}
[dir=rtl] .newRibbon {
  right: calc( var(--zd_size6) * -1 ) ;
  --ribbon_padding:2px 10px 2px 10px;
}

.newRibbon::before {
  content: '';
  position: absolute;
  top: 100% ;
  bottom: 0 ;
  width: var(--zd_size6) ;
  border-style: solid;
  border-color: var(--zdt_onboarding_ribbon_secondary_border) transparent transparent;
}

[dir=ltr] .newRibbon::before {
  left: 0 ;
  border-width: 6px 0px 0px 6px;
}

[dir=rtl] .newRibbon::before {
  right: 0 ;
  border-width: 6px 6px 0px 0px;
}
.newRibbon::after{
  top: 0 ;
  bottom:0 ;
  border-width: 12px;
}
[dir=ltr] .newRibbon::after{
  right: calc( var(--zd_size12) * -1 ) ;
  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border)
  /*rtl:var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border) */;
}
[dir=rtl] .newRibbon::after{
  left: calc( var(--zd_size12) * -1 ) ;
  border-color: var(--zdt_onboarding_ribbon_primary_border) transparent var(--zdt_onboarding_ribbon_primary_border);
}

/* for gradient border */
.mainWrapper {
  width: 100% ;
  position: relative;
  border-radius: 20px;
  box-shadow: var(--zd_bs_onboarding_gradient);
}
[dir=ltr] .mainWrapper {
  background: linear-gradient(214deg, var(--zdt_onboarding_light_gradient_bg) 46.39%, var(--zdt_onboarding_gradient_bg) 95.25%);
}
[dir=rtl] .mainWrapper {
  background: linear-gradient(-214deg, var(--zdt_onboarding_light_gradient_bg) 46.39%, var(--zdt_onboarding_gradient_bg) 95.25%);
}

.mainWrapper::before {
  z-index: -1;
}

[dir=ltr] .mainWrapper::before {
  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
}

[dir=rtl] .mainWrapper::before {
  background:linear-gradient(0deg, var(--zdt_onboarding_primary_gradient_border), var(--zdt_onboarding_primary_gradient_border)), linear-gradient(-141.66deg, var(--zdt_cta_primary_bg) -2.06%, var(--zdt_onboarding_secondary_gradient_border) 17.27%, var(--zdt_onboarding_gradient_border) 37.54%);
}

.mainWrapper::before {
  content: "";
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  margin: calc( var(--zd_size1) * -1 ) ;
  border-radius: 20px;
}

[dir=ltr] .mainWrapper::before {
  left: 0 ;
  right: 0 ;
}

[dir=rtl] .mainWrapper::before {
  right: 0 ;
  left: 0 ;
}

/* for backgrouns graident */
.gradientLayer {
  overflow: hidden;
  /* z-index: 2;  */
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  pointer-events: none;
  border-radius: 20px;
  border-radius: 20px;
}
[dir=ltr] .gradientLayer {
  left: 0 ;
  right: 0 ;
}
[dir=rtl] .gradientLayer {
  right: 0 ;
  left: 0 ;
}

.circleBlur {
  width: var(--zd_size267) ;
  height: var(--zd_size227) ;
  opacity: 0.3;
  filter: blur(64px);
  position: absolute;
  border-radius: 267px;
  background-color: var(--zdt_onboarding_primary_bg);
}

.circleBlurOne {
  top: calc( var(--zd_size30) * -1 ) ;
}

[dir=ltr] .circleBlurOne {
  transform: rotate(-33.877deg);
  left: var(--zd_size98) ;
}

[dir=rtl] .circleBlurOne {
  transform: rotate(33.877deg);
  right: var(--zd_size98) ;
}

.circleBlurTwo {
  top: 0 ;
}

[dir=ltr] .circleBlurTwo {
  transform: rotate(-33.877deg);
  right: var(--zd_size315) ;
}

[dir=rtl] .circleBlurTwo {
  transform: rotate(33.877deg);
  left: var(--zd_size315) ;
}

.expandedButton  {
  width: 100% ;
}

/* carousel */
.carousel {
  overflow: hidden;
  width: 100% ;
  position: relative;
  border-radius: 20px 20px 0 0;
}
.carouselInner {
  transition: transform var(--zd_transition3) cubic-bezier(0.5, 0.11, 0.15, 1);
  width: 100% ;
}
[dir=ltr] .carouselInner {
  transform: translateX(var(--local_translate_movement))
  /*rtl:translateX(calc(var(--local_translate_movement) * -1))*/;
}
[dir=rtl] .carouselInner {
  transform: translateX(calc(var(--local_translate_movement) * -1));
}
.carouselItem {
  width: 100% 
}