<div class="alert alert--error">
<div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</div>
<button class="alert-btn" type="button">
<i class="icon icon-close"></i>
<span class="sr-only">Schließen</span>
</button>
</div>
<div class="alert alert--error">
<div class="alert-text"><strong>Das hat nicht geklappt!</strong> Bitte füllen Sie alle Felder aus.</div>
<button class="alert-btn" type="button">
<i class="icon icon-close"></i>
<span class="sr-only">Schließen</span>
</button>
</div>
/* No context defined. */
.alert {
@extend %heading-font-regular;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
padding: $spacer-xs;
margin-bottom: $spacer-sm;
color: $alert-color;
font-size: $font-size-base;
&--info {
background-color: $brand-info;
}
&--warn {
background-color: $brand-warn;
color: darken($brand-warn, 51%); // Use accessible dark yellow
}
&--error {
background-color: $brand-danger;
}
}
.alert-btn {
@extend %base-button;
color: inherit;
}
@media screen and (min-width: $grid-breakpoint-md) {
.alert {
padding: $spacer-sm;
margin-bottom: $spacer-md;
}
}
No notes defined.