@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;
  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 {
  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
}

[dir=ltr] .title {
  margin: 0 var(--zd_size5) 0 var(--zd_size10) ;
}

[dir=rtl] .title {
  margin: 0 var(--zd_size10) 0 var(--zd_size5) ;
}

.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 */
[dir=ltr] .primary_header {
  padding: var(--zd_size15) var(--zd_size45) 0 var(--zd_size20) ;
}
[dir=rtl] .primary_header {
  padding: var(--zd_size15) var(--zd_size20) 0 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 {
  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
  border-radius: 0 0 var(--zd_size10) var(--zd_size10);
}
[dir=ltr] .secondary_header {
  padding: var(--zd_size18) var(--zd_size70) var(--zd_size19) var(--zd_size75) ;
}
[dir=rtl] .secondary_header {
  padding: var(--zd_size18) var(--zd_size75) var(--zd_size19) var(--zd_size70) ;
}

.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 ;
  height: var(--zd_size25) ;
}

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

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