@zohodesk/dot/lib/version2/GlobalNotification/GlobalNotification.module.css

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

.varClass {
  /* globalnotfication default variables */
  --commonalert_border_color: var(--zdt_commonalert_default_border);
  --globalnotification_bg_color: var(--zdt_globalnotification_default_bg);
  --globalnotification_text_color: var(--zdt_globalnotification_default_text);
}

.message {
  composes: varClass;
  position: absolute;
  top: 0 ;
  z-index: 1000;
  width: var(--zd_size420) ;
  text-align: center;
  margin: auto ;
}

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

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

.stackShadowOne::after,
.stackShadowTwo::before {
  content: '';
  position: absolute;
  height: var(--zd_size20) ;
}

.stackShadowOne::after, .stackShadowTwo::before {
  background-color: var(--globalnotification_bg_color);
  border-radius: 0 0 6px 6px;
  box-shadow: var(--zd_bs_globalnotification_container);
}

[dir=ltr] .stackShadowOne::after, [dir=ltr] .stackShadowTwo::before {
  left: 50% ;
  right: 50% ;
  transform: translate(-50%);
  animation: behindInfo 0.8s forwards;
}

[dir=rtl] .stackShadowOne::after, [dir=rtl] .stackShadowTwo::before {
  right: 50% ;
  left: 50% ;
  transform: translate(50%);
  animation: behindInfo 0.8s forwards;
}

.stackShadowTwo::before {
  width: 90% ;
  bottom: calc( var(--zd_size10) * -1 ) ;
}

.stackShadowOne::after {
  width: 95% ;
  bottom: calc( var(--zd_size5) * -1 ) ;
}

@keyframes behindInfo {

  0%,
  40% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.container {
  position: relative;
  pointer-events: initial;
  color: var(--globalnotification_text_color);
  z-index: 1;
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
  width: 100% ;
  box-shadow: var(--zd_bs_globalnotification_container);
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
  background-color: var(--globalnotification_bg_color);
  border-style: solid;
  border-color: var(--commonalert_border_color);
  border-width: 2px 1px 1px 1px;
}

[dir=ltr] .container {
  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
}

[dir=rtl] .container {
  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
}

.icon {
  width: var(--zd_size44) ;
  height: var(--zd_size44) ;
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  margin: auto 0 ;
}

[dir=ltr] .icon {
  left: var(--zd_size18) ;
}

[dir=rtl] .icon {
  right: var(--zd_size18) ;
}

.success {
  --commonalert_border_color: var(--zdt_commonalert_success_border);
  --globalnotification_bg_color: var(--zdt_globalnotification_success_bg);
  --globalnotification_text_color: var(--zdt_globalnotification_success_text);
}

.info {
  --commonalert_border_color: var(--zdt_commonalert_info_border);
  --globalnotification_bg_color: var(--zdt_globalnotification_info_bg);
  --globalnotification_text_color: var(--zdt_globalnotification_info_text);
}

.danger,.error {
  --commonalert_border_color: var(--zdt_commonalert_danger_border);
  --globalnotification_bg_color: var(--zdt_globalnotification_danger_bg);
  --globalnotification_text_color: var(--zdt_globalnotification_danger_text);
}


.warning {
  --commonalert_border_color: var(--zdt_commonalert_warning_border);
  --globalnotification_bg_color: var(--zdt_globalnotification_warning_bg);
  --globalnotification_text_color: var(--zdt_globalnotification_warning_text);
}

.primary {
  --commonalert_border_color: var(--zdt_commonalert_primary_border);
  --globalnotification_bg_color: var(--zdt_globalnotification_primary_bg);
  --globalnotification_text_color: var(--zdt_globalnotification_primary_text);
}


.text {
  font-size: var(--zd_font_size14) ;
  font-family: var(--zd_semibold);
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
  line-height: 1.4286;
  overflow: hidden;
}


[dir=ltr] .text {
  text-align: left;
}


[dir=rtl] .text {
  text-align: right;
}

.close {
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  height: var(--zd_size25) ;
}

[dir=ltr] .close {
  right: var(--zd_size12) ;
  margin: auto 0 auto var(--zd_size25) ;
}

[dir=rtl] .close {
  left: var(--zd_size12) ;
  margin: auto var(--zd_size25) auto 0 ;
}