No notes defined.
<div class="sds-alertBanner sds-staticInlineMd alert -alertBannerWarning">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-alert"></span>
</span>
<div class="sds-alertBanner__text sds-staticStackXxs">
<h4 class="h4 sds-colorInherit">
{Heading}
</h4>
<p class="sds-textHelper">{description}</p>
</div>
<a href="" class="sds-alertBanner__link text-underline ml-auto text-right sds-staticExceptionInlineSm">{Link text}</a>
<button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-alertBanner__close" data-dismiss="alert">
<span class="sds-icon sds-icon-close"></span>
<div class="sr-only">Close alert</div>
</button>
</div>
<div class="{{ namespace }}alertBanner {{ namespace }}staticInlineMd alert{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if icon %}
{% render "@icon-block--inverse",{
icon: icon
},true %}
{% endif %}
<div class="{{ namespace }}alertBanner__text {{ namespace }}staticStackXxs">
{% if heading %}
{% render "@heading--h4",{
text: heading,
classes: [namespace + "colorInherit"]
},true %}
{% endif %}
{% if description %}
<p class="{{ namespace }}textHelper">{{ description | safe }}</p>
{% endif %}
{% if description2 %}
<p class="{{ namespace }}textHelper">{{ description2 | safe }}</p>
{% endif %}
</div>
{% if link %}
<a href="" class="{{ namespace }}alertBanner__link text-underline ml-auto text-right {{ namespace }}staticExceptionInlineSm">{{ link }}</a>
{% endif %}
{% if close %}
{% render "@icon-btn-secondary--ghost",{
icon: "icon-close",
classes: [namespace + "alertBanner__close"],
action: "Close alert",
attrs: {
"data-dismiss": "alert"
}
},true %}
{% endif %}
</div>
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}alertBanner {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
@include custom-prop-fallback("padding","comp-alert-banner-inset-v");
border-radius: map-deep-get($design-tokens, "comp-alert-banner-border-radius");
@include custom-prop-fallback("background-color","comp-alert-banner-primary-background-color");
@include custom-prop-fallback-override("color","comp-alert-banner-primary-heading-text-color");
@include custom-prop-fallback-override("comp-icon-block-primary-inverse-icon-background-color","comp-alert-banner-primary-heading-text-color");
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// alertBanner__text
&__text {
// follows same logic as parent
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
&__link {
align-self: stretch;
align-content: center;
max-height: map-deep-get($design-tokens, "comp-icon-block-height");
flex-shrink: 0;
}
&__close#{$self}__close {
@include custom-prop-fallback("color","comp-alert-banner-close-icon-text-color");
@media (hover: hover) {
&:hover {
@include custom-prop-fallback("background-color","comp-alert-banner-hovered-close-background-color");
}
&:active {
@include custom-prop-fallback("background-color","comp-alert-banner-active-close-background-color");
@include custom-prop-fallback("outline-color","comp-alert-banner-active-close-border-color");
}
&:focus-visible {
@include custom-prop-fallback("background-color","comp-alert-banner-pressed-close-background-color","true","true");
@include custom-prop-fallback("outline-color","comp-alert-banner-pressed-close-border-color","true","true");
}
}
}
/* modifiers */
// alertBanner -alertBannerSuccess
&.-alertBannerSuccess {
// follows same logic as base element
@include custom-prop-fallback("background-color","comp-alert-banner-success-background-color");
@include custom-prop-fallback("color","comp-alert-banner-success-heading-text-color");
@include custom-prop-fallback-override("comp-icon-block-primary-inverse-icon-background-color","comp-alert-banner-success-heading-text-color");
// close
@include custom-prop-fallback-override("comp-alert-banner-close-icon-text-color","comp-alert-banner-success-close-icon-text-color");
@include custom-prop-fallback-override("comp-alert-banner-hovered-close-background-color","comp-alert-banner-success-hovered-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-background-color","comp-alert-banner-success-active-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-border-color","comp-alert-banner-success-active-close-border-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-background-color","comp-alert-banner-success-pressed-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-border-color","comp-alert-banner-success-pressed-close-border-color");
}
// alertBanner -alertWarning
&.-alertBannerWarning {
// follows same logic as base element
@include custom-prop-fallback("background-color","comp-alert-banner-warning-background-color");
@include custom-prop-fallback("color","comp-alert-banner-warning-heading-text-color");
@include custom-prop-fallback-override("comp-icon-block-primary-inverse-icon-background-color","comp-alert-banner-warning-heading-text-color");
// close
@include custom-prop-fallback-override("comp-alert-banner-close-icon-text-color","comp-alert-banner-warning-close-icon-text-color");
@include custom-prop-fallback-override("comp-alert-banner-hovered-close-background-color","comp-alert-banner-warning-hovered-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-background-color","comp-alert-banner-warning-active-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-border-color","comp-alert-banner-warning-active-close-border-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-background-color","comp-alert-banner-warning-pressed-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-border-color","comp-alert-banner-warning-pressed-close-border-color");
}
// alertBanner -alertInfo
&.-alertBannerInfo {
// follows same logic as base element
@include custom-prop-fallback("background-color","comp-alert-banner-info-background-color");
@include custom-prop-fallback("color","comp-alert-banner-info-heading-text-color");
@include custom-prop-fallback-override("comp-icon-block-primary-inverse-icon-background-color","comp-alert-banner-info-heading-text-color");
// close
@include custom-prop-fallback-override("comp-alert-banner-close-icon-text-color","comp-alert-banner-info-close-icon-text-color");
@include custom-prop-fallback-override("comp-alert-banner-hovered-close-background-color","comp-alert-banner-info-hovered-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-background-color","comp-alert-banner-info-active-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-border-color","comp-alert-banner-info-active-close-border-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-background-color","comp-alert-banner-info-pressed-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-border-color","comp-alert-banner-info-pressed-close-border-color");
}
// alertBanner -alertDanger
&.-alertBannerDanger {
// follows same logic as base element
@include custom-prop-fallback("background-color","comp-alert-banner-danger-background-color");
@include custom-prop-fallback("color","comp-alert-banner-danger-heading-text-color");
@include custom-prop-fallback-override("comp-icon-block-primary-inverse-icon-background-color","comp-alert-banner-danger-heading-text-color");
// close
@include custom-prop-fallback-override("comp-alert-banner-close-icon-text-color","comp-alert-banner-danger-close-icon-text-color");
@include custom-prop-fallback-override("comp-alert-banner-hovered-close-background-color","comp-alert-banner-danger-hovered-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-background-color","comp-alert-banner-danger-active-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-active-close-border-color","comp-alert-banner-danger-active-close-border-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-background-color","comp-alert-banner-danger-pressed-close-background-color");
@include custom-prop-fallback-override("comp-alert-banner-pressed-close-border-color","comp-alert-banner-danger-pressed-close-border-color");
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}