Alerts

Basic dismissable and non-dismissable alerts, disabled by default, enable with $enable-alerts: true; in the _configuration.scss document.

The non-dismissable alerts apply the styles to a <div> block element, the dismissable alerts use the <dialog> component with a form [method="dialog"] button for hiding the alert.

Basic alert

Example HTML

<div class="alert">
<p>Basic alert</p>
</div>

<dialog class="alert" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

<div class="alert alert-outline">
<p>Basic alert</p>
</div>

<dialog class="alert alert-outline" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

Colors (anchor)

With $enable-theme-colors: true;

Non-dismissable alert!

Example HTML

<div class="alert alert-light">
<p>Non-dismissable alert!</p>
</div>

<dialog class="alert alert-light" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

<div class="alert alert-dark">
<p>Non-dismissable alert!</p>
</div>

<dialog class="alert alert-dark" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

With $enable-primary-colors: true;

Non-dismissable alert!

Example HTML

<div class="alert alert-blue">
<p>Non-dismissable alert!</p>
</div>

<dialog class="alert alert-blue" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

<div class="alert alert-red">
<p>Non-dismissable alert!</p>
</div>

<dialog class="alert alert-red" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

<div class="alert alert-green">
<p>Non-dismissable alert!</p>
</div>

<dialog class="alert alert-green" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

<div class="alert alert-orange">
<p>Non-dismissable alert!</p>
</div>

<dialog class="alert alert-orange" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

<div class="alert alert-cyan">
<p>Non-dismissable alert!</p>
</div>

<dialog class="alert alert-cyan" open>
<p>Dismissable alert!</p>
<form method="dialog">
<button><span class="vis-hidden">Close</span></button>
</form>
</dialog>

Customize (anchor)

The default alerts property values can be customized in the _properties.scss document. The styles can be customized in the _alerts.scss document in the [styles/components] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.

Properties

$alert-txt:         var(--text) !default;
$alert-bg:          var(--surf-1) !default;
$alert-bd-color:    var(--surf-3) !default;
$alert-radius:      0.188rem !default;

Styles

// ---------------------------------------------------------- 
// Alerts
// ----------------------------------------------------------
@use "../../configuration" as *;
@use "../../properties" as *;
@use "icons" as *;

@if $enable-alerts {
  .alert {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: var(--alert-txt); 
  }
  color: var(--alert-txt);
  margin-block-end: 1rem;
  padding-block: .6rem;
  padding-inline: 1rem;
  border: 1px solid var(--alert-bd-color);
  border-radius: var(--alert-radius); 
  background-color: var(--alert-bg);
}

.alert * {
  --mb: 0;
}

.alert[open] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  width: 100%;
  max-inline-size: 100%;  
  margin: initial;
  margin-block-end: 1rem;
  padding-block: .325rem;
  padding-inline-end: .5rem;
}

.alert [method="dialog"] {
  margin-inline-start: auto;
}

// Fix button styles for use without forms-buttons enabled(?)
.alert [method="dialog"] button {
  @if $enable-icon-mixins or $enable-icon-styles {
    --ico: var(--alert-txt); 
  }
  --btn-bg: transparent;
  --btn-hover: transparent;
  --btn-bd-color: transparent;
  --btn-py: .25rem;
  --btn-px: .5rem;
  margin-inline-start: auto;
}

.alert [method="dialog"] button:before {
  --ico: var(--alert-txt);
  @if $enable-close-svg {
    --svg: var(--close);
  }
  @else {
    --svg: #{$close};
  }
  @if $enable-icon-mixins or $enable-icon-styles {
  }
  @else {
    --ico-va: -.115em;
  }
  @extend %icon-mask;
}

.alert-outline {
  --alert-bg: var(--body-bg);
}

.alert-light {
  --alert-txt: #000;
  --alert-bg: var(--surf-1-light);
  --alert-bd-color: var(--surf-3-light);
}

.alert-dark {
  --alert-txt: #fff;
  --alert-bg: var(--surf-1-dark);
  --alert-bd-color: var(--surf-3-dark);
}

@if $enable-primary-colors {

.alert-blue {
  --alert-txt: #fff;
  --alert-bg: var(--blue);
  --alert-bd-color: var(--blue-light);
}

.alert-red {
  --alert-txt: #fff;
  --alert-bg: var(--red);
  --alert-bd-color: var(--red-light);
}

.alert-green {
  --alert-txt: #fff;
  --alert-bg: var(--green);
  --alert-bd-color: var(--green-light);
}

.alert-orange {
  --alert-txt: #000;
  --alert-bg: var(--orange);
  --alert-bd-color: var(--orange-dark);
}

.alert-cyan {
  --alert-txt: #000;
  --alert-bg: var(--cyan);
  --alert-bd-color: var(--cyan-dark);
}
  
} // End primary-colors

} // End alerts