@scania/tegel/dist/collection/components/banner/banner.css

Tegel Design System

:host(.hide) {
  display: none;
  visibility: hidden;
}

:host(.error) {
  background-color: var(--tds-banner-background-error);
}

:host(.information) {
  background-color: var(--tds-banner-background-info);
}

:host {
  display: flex;
  background-color: var(--tds-banner-background-default);
  z-index: 400;
  padding-left: 16px;
}
:host .banner-icon {
  padding-left: 4px;
  padding-top: 14px;
  padding-right: 12px;
  color: var(--tds-banner-prefix-default-color);
}
:host .banner-icon.error {
  color: var(--tds-banner-prefix-error-color);
}
:host .banner-icon.information {
  color: var(--tds-banner-prefix-info-color);
}
:host .content {
  color: var(--tds-banner-text-color);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 16px 0;
}
:host .content.no-icon {
  padding-left: 16px;
}
:host .header-subheader {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:host .header,
:host slot[name=header] {
  font: var(--tds-headline-06);
  letter-spacing: var(--tds-headline-06-ls);
}
:host .subheader,
:host slot[name=subheader] {
  display: block;
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);
}
:host slot[name=actions]::slotted(*) {
  display: block;
  width: fit-content;
  padding-top: 12px;
}
:host .banner-close {
  color: var(--tds-banner-x-color);
}
:host .banner-close button {
  padding-right: 16px;
  padding-top: 14px;
  background-color: transparent;
  border: none;
  color: var(--tds-banner-x-color);
}
:host .banner-close button:hover {
  cursor: pointer;
}
:host .banner-close button:focus-visible {
  outline: none;
}
:host .banner-close button:focus-visible tds-icon {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: 0 0 0 1px var(--tds-white);
  outline-offset: 1px;
  z-index: 1;
}