page: txp5
form: txp5_scss
_messagepane.scss
➔
modified 55 days ago
@use "../2-atoms/beam";
.messagepane {
// &:empty {
// display: none;
// }
}
.messageflash {
@extend %beam !optional;
padding: var(--base-unit--s) var(--base-unit);
font-family: var(--serif);
overflow: auto;
strong {
font-family: var(--sans);
}
&.success {
background-color: var(--clr-success);
color: var(--white);
}
&.warning {
background-color: var(--clr-warning);
}
&.error {
background-color: var(--clr-error);
color: var(--white);
}
}
Source html
<div class="messagepane" id="messagepane">
<span class="messageflash success" role="alert" aria-live="assertive">
<span class="ui-icon ui-icon-check"></span>
Aestheticism jugendstil <strong>russian</strong> futurism.
<button class="close txp-reduced-ui-button" title="Close">
<span class="ui-icon ui-icon-close">Close</span>
</button>
</span>
</div>
<div class="messagepane" id="messagepane">
<span class="messageflash warning" role="alert" aria-live="assertive">
<span class="ui-icon ui-icon-info"></span>
Neo-expressionism abstract expressionism, superstroke aestheticism postmodern art avant-garde photorealism, secularism caravaggisti. land art tonalism caravaggisti.
<button class="close txp-reduced-ui-button" title="Close">
<span class="ui-icon ui-icon-close">Close</span>
</button>
</span>
</div>
<div class="messagepane" id="messagepane">
<span class="messageflash error" role="alert" aria-live="assertive">
<span class="ui-icon ui-icon-alert"></span>
Orphism synthetism conceptual art structuralism minimalism.
<button class="close txp-reduced-ui-button" title="Close">
<span class="ui-icon ui-icon-close">Close</span>
</button>
</span>
</div>