Alerts

Simple dismissable alerts using HTML <dialog> elements and non-dismissable alerts container styles.

Examples

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>Close</span></button>
</form>
</dialog>

Using the module

Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.

custom.scss

@use "sassmods/scss/sassmods" as *;
@include alerts-css;

See customizing for information about using the Sass and CSS variables in the source code (see below) to customize the styles, and Sass variables (on the using SassMods page) for other ways to use the variables to create custom styles.

Source

_alerts.scss

// ---------------------------------------------------------- 
// Alerts
// ----------------------------------------------------------
$alert-text-color:        var(--alert-text, inherit);
$alert-margin-bottom:     var(--alert-mb, 1rem);
$alert-padding-block:     var(--alert-py, 0.66rem);
$alert-padding-inline:    var(--alert-px, 1rem);
$alert-border-color:      var(--alert-bd-color, color-mix(in srgb, CanvasText 12%, Canvas));
$alert-radius:            var(--alert-radius, 0.188rem); 
$alert-background-color:  var(--alert-bg, color-mix(in srgb, CanvasText 3%, Canvas));

@mixin alerts-css {

.alert {
  color: $alert-text-color;
  margin-block-end: $alert-margin-bottom;
  padding-block: $alert-padding-block;
  padding-inline: $alert-padding-inline;
  border: 1px solid $alert-border-color;
  border-radius: $alert-radius; 
  background-color: $alert-background-color;
}

.alert * {
  margin-block-end: 0;
}

.alert[open] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  inline-size: 100%;
  max-inline-size: 100%;  
  margin: initial;
  margin-block-end: $alert-margin-bottom;
  padding-block: $alert-padding-block;
  padding-inline-end: $alert-padding-inline;
  transition: none;
}

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

.alert [method="dialog"] button {
  background-color: transparent;
  border: none;
  padding-block: 0.1rem;
  padding-inline: 0.5rem;
  margin-inline-start: auto;
}

.alert [method="dialog"] button:is(:hover, :focus, :active) {
  background-color: transparent;
  border: none;
}

.alert [method="dialog"] button:before {
  --ico: var(--alert-text, CanvasText);
  display: inline-block;
  content: "";
  block-size: 1em;
  inline-size: 1em;  
  vertical-align: -.115em;
  background-color: var(--ico);
  mask-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13 3-10 10zm-10 0 10 10z' fill='none' stroke='currentColor' stroke-width='1.5'/></svg>");
  mask-repeat: no-repeat;
}

.alert [method="dialog"] button span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

} // End alerts-css