No notes defined.
<!-- Default -->
<div class="sds-alertBanner sds-staticInlineMd ">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-lightbulb"></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">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<!-- Success -->
<div class="sds-alertBanner sds-staticInlineMd -alertSuccess">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-check"></span>
</span>
<div class="sds-alertBanner__text sds-staticStackXxs">
<h4 class="h4 sds-colorInherit">
{Heading}
</h4>
<p class="sds-textHelper">{uehhsshkjfhs jkhfjksh fkjhskjfh kjs hfkjh skjfhksjhfk jshdkjfhkjsdhf kjshdkjf hsdjhfkjsdhf jhsdjkf hsdkjhjkfdh}</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">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<!-- Warning -->
<div class="sds-alertBanner sds-staticInlineMd -alertWarning">
<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">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<!-- Info -->
<div class="sds-alertBanner sds-staticInlineMd -alertInfo">
<span class="sds-iconBlock -iconBlockInverse" aria-hidden="true">
<span class="sds-iconBlock__icon sds-icon sds-icon-infocircleborder"></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">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<!-- Danger -->
<div class="sds-alertBanner sds-staticInlineMd -alertDanger">
<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">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="{{ namespace }}alertBanner {{ namespace }}staticInlineMd {% 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 }}</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"
},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;
padding: map-deep-get($design-tokens, "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;
}
/* modifiers */
// alertBanner -alertSuccess
&.-alertSuccess {
// 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");
}
// alertBanner -alertWarning
&.-alertWarning {
// 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");
}
// alertBanner -alertInfo
&.-alertInfo {
// 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");
}
// alertBanner -alertDanger
&.-alertDanger {
// 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");
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}