@zohodesk/dot/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css

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

.varClass {
  --commonalert_border_color: var(--zdt_commonalert_default_border);
}

.container {
  composes: varClass;
  min-height: var(--zd_size54) ;
  position: relative;
  /*css:theme-validation:ignore*/
  color: var(--zdt_desktopnotification_text);
  background-color: var(--alert_lookup_bg_color);
  border-style: solid;
  border-color: var(--commonalert_border_color);
  border-width: 2px 0 0 0;
}

.title {
  margin-inline: var(--zd_size10) var(--zd_size5) ;
  margin-block:0 ;
  composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
}

.infoText {
  max-width: 100% ;
}

/* Palette */

.success {
  --commonalert_border_color: var(--zdt_commonalert_success_border);
}

.info,
.notification,
.alarm {
  --commonalert_border_color: var(--zdt_commonalert_info_border);
}

.danger,
.error {
  --commonalert_border_color: var(--zdt_commonalert_danger_border);
}



.warning {
  --commonalert_border_color: var(--zdt_commonalert_warning_border);
}

.primary {
  --commonalert_border_color: var(--zdt_commonalert_primary_border);
}



/* Primary Header */
.primary_header {
  padding-block: var(--zd_size15) 0 ;
  padding-inline: var(--zd_size20) var(--zd_size45) ;
}

.primary_header .iconContainer {
  height: var(--zd_size51) ;
  width: var(--zd_size51) ;
}

.primary_header .infoText {
  line-height: 1;
}

.primary_header .close {
  position: absolute;
  top: var(--zd_size12) ;
}

[dir=ltr] .primary_header .close {
  right: var(--zd_size12) ;
}

[dir=rtl] .primary_header .close {
  left: var(--zd_size12) ;
}

/* Secondary Header */
.secondary_header {
  padding-block: var(--zd_size18) var(--zd_size19) ;
  padding-inline: var(--zd_size75) var(--zd_size70) ;
  composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
  border-radius: 0 0 10px 10px;
}

.secondary_header .infoText {
  line-height: 1.4286;
}

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

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

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

.secondary_header .close {
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  margin-block: auto ;
  margin-inline:var(--zd_size25) 0 ;
  height: var(--zd_size25) ;
}

[dir=ltr] .secondary_header .close {
  right: var(--zd_size12) ;
}

[dir=rtl] .secondary_header .close {
  left: var(--zd_size12) ;
}