Alerts

Basic dismissable and non-dismissable alerts container style utilities.

Examples (anchor)

Please note. The alerts will inherit whatever normalize/reset styles are present requiring only minor adjustments to suit base font property values, but as demonstrated they've been designed to work seamlessly with the StyleMods content styles.

Default (anchor)

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>

Fixed light and dark (anchor)

Basic alert!

Example HTML

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

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

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

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

Using the module (anchor)

Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.

custom.scss

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

See the using modules page for more information including how to compile the modules in cascade layers and include and reuse them in multiple source files.

Using the framework (anchor)

Using the recommended custom setup enable the styles in an overrides document:

overrides.scss

@use "stylemods/scss/configuration" as *;
$enable-alerts: true;

Include the overrides and the framework styles with your custom document for compiling the framework:

custom.scss

@use "overrides";
@use "stylemods/scss/stylemods";

See using the framework for more information including how the styles can also be compiled within cascade layers.

Source code (anchor)

The modules and the framework follow the same methods for customizing the default values and using the CSS variables to create custom theme documents. See the customizing page for more information.

alerts.scss

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

// Icon options
$alert-close-icon:            url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2.47 3.53 1.06-1.06 4.47 4.47 4.47-4.47 1.06 1.06-4.47 4.47 4.47 4.47-1.06 1.06-4.47-4.47-4.47 4.47-1.06-1.06 4.47-4.47z'/></svg>") !default;
$alert-close-box-icon:        url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m4.82 5.53s-0.354-0.354 0-0.707 0.707 0 0.707 0l2.47 2.47 2.47-2.47s0.354-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.354 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.354 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47zm-3.31-5.51c-0.911-0.0389-1.61 0.85-1.5 1.73 0.00311 4.3-0.00623 8.6 0.00467 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>") !default;
$alert-close-box-fill-icon:   url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm3.08 4.67c0.249-0.0497 0.447 0.15 0.447 0.15l2.47 2.47 2.47-2.47s0.353-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.353 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.353 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47-2.47-2.47s-0.354-0.353 0-0.707c0.0884-0.0884 0.177-0.134 0.26-0.15z'/></svg>") !default;

// Close icon
$close-alert:                 $alert-close-icon !default;

@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 :last-of-type:is(p, ol, ul, dl, figure, address),
.alert :last-of-type:is(p, ol, ul, dl, figure, address):has(+ [method="dialog"]) {
  margin-block-end: 0;
}

.alert[open] {
  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: 3rem;
  transition: none;
}

.alert [method="dialog"] {
  position: absolute;
  inset-block-start: 0.375rem;
  inset-inline-end: 0.375rem; 
}

.alert [method="dialog"] button {
  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: #{$close-alert};
  mask-repeat: no-repeat;
}

.alert [method="dialog"] button span {
  position: absolute;
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.alert-light {
  color-scheme: light;
}

.alert-dark {
  color-scheme: dark;
}

} // End alerts-css