This alert has a header, body, and a close button.
*
*
*
*
Success!
*
Your operation was successful.
*
*
*/
@use "../variables" as *;
@use "../mixins" as *;
.retro-alert, .retro-toast {
background: var(--retro-alert-bg);
border: 2px solid var(--retro-border-dark);
border-right: 2px solid var(--retro-border-light);
border-bottom: 2px solid var(--retro-border-light);
border-left: 2px solid var(--retro-border-medium);
border-top: 2px solid var(--retro-border-medium);
border-radius: var(--retro-border-radius);
font-family: var(--retro-font-heading);
box-shadow: none;
margin-bottom: 1.2em;
padding: 0.7em 1.2em;
color: var(--retro-alert-text);
text-align: start;
display: block;
}
.retro-alert-header {
width: 100%;
margin: 0 0 var(--retro-spacing-xs);
font-weight: var(--retro-font-weight-bold);
font-size: var(--retro-font-size-lg);
color: inherit;
text-align: start;
}
.retro-alert-body, .retro-toast-body {
padding: 0;
margin: 0;
font-size: 1em;
color: inherit;
text-align: start;
}
.retro-alert-footer {
width: 100%;
margin: 0;
padding: 0.3em 1em 0.2em 1em;
font-size: var(--retro-font-size-sm);
font-family: inherit;
border-radius: var(--retro-border-radius);
box-shadow: none;
// Deliberately --retro-black-rgb, which inverts: a hairline divider should be
// dark on a light surface and light on a dark one. Unlike a shadow or a
// scrim, this is a surface tint, not a light source.
border-top: 2px solid rgba(var(--retro-black-rgb), 0.12);
background: var(--retro-light);
color: var(--retro-text);
text-align: start;
}
// Footers previously hardcoded their background AND text colour while the
// alert body above them used var(--retro-*) -- so in dark mode a #4a90e2 alert
// got a #1976d2 footer. Both now derive from the same token.
@each $n in "primary", "success", "danger", "warning", "info" {
.retro-alert-#{$n} .retro-alert-footer {
background: var(--retro-#{$n}-active);
color: var(--retro-#{$n}-fg);
border-top: 2px solid var(--retro-#{$n}-active);
}
}
// Remove icon and close button styles
.retro-alert-icon, .retro-toast-icon { display: none !important; }
// The `color` here was hardcoded #fff/#222 over a themed background. In dark
// mode that put white on the light dark-palette fills -- #fff on the dark
// --retro-success (#2ecc71) is 2.10:1. -fg picks the readable one per theme.
@each $n in "primary", "success", "danger", "warning", "info" {
.retro-toast-#{$n}, .retro-toast.retro-alert-#{$n} {
background: var(--retro-#{$n});
color: var(--retro-#{$n}-fg);
border-inline-start: 6px solid var(--retro-#{$n}-active);
}
}
.retro-toast-body {
flex: 1 1 auto;
min-width: 0;
}
// .retro-alert-close carried none of this and so fell through to the UA
// button colour -- black on the navy alert in light (1.3:1), white on the
// lighter blue in dark (3.3:1). `color: inherit` picks up the alert's own
// --retro--fg, which is the token gated for exactly this pair.
.retro-alert-close, .retro-toast-close {
background: none;
border: none;
color: inherit;
font-size: var(--retro-font-size-xl);
font-weight: bold;
margin-inline-start: auto;
cursor: pointer;
// Was 0.7. A dismiss control is not decoration, and fading it multiplied
// straight through the contrast the -fg token was chosen to guarantee.
// Hover gets a tint instead of the opacity ramp.
opacity: 1;
line-height: 1;
// WCAG 2.5.8 asks for a 24px target. The glyph alone rendered 22x20, which
// is a fiddly thing to hit on a phone -- and unlike an inline text link, a
// dismiss control has no exemption.
min-width: 24px;
min-height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.25em;
transition: background-color 0.2s;
}
.retro-alert-close:hover, .retro-toast-close:hover,
.retro-alert-close:focus-visible, .retro-toast-close:focus-visible {
background-color: rgba(var(--retro-shadow-rgb), 0.18);
}
@each $n in "primary", "success", "danger", "warning", "info" {
.retro-alert-#{$n} {
background: var(--retro-#{$n});
color: var(--retro-#{$n}-fg);
border-inline-start: 6px solid var(--retro-#{$n}-active);
}
}
.retro-toast {
display: flex;
align-items: flex-start;
gap: var(--retro-spacing-sm);
box-shadow: 2px 4px 16px rgba(var(--retro-shadow-rgb), 0.18), 1px 1px 0 var(--retro-border-light), 2px 2px 0 var(--retro-border-medium);
border-width: 1.5px;
margin-bottom: 0.75em;
animation: retro-toast-fadein 0.3s;
min-width: 240px;
max-width: 400px;
// Carried over from the duplicate .retro-toast that used to live in
// _base.scss. pointer-events matters: #retro-toast-container sets
// pointer-events: none, so without this the close button is unclickable.
position: relative;
z-index: var(--retro-z-index-tooltip);
pointer-events: auto;
}
@keyframes retro-toast-fadein {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
// NOTE: a set of SVG data-URI toast icons used to live here, plus per-variant
// icon colours below. Both were already unreachable -- `.retro-alert-icon,
// .retro-toast-icon { display: none !important }` above and
// `.retro-alert::before, .retro-toast::before { display: none !important }`
// below kill them. Removed rather than tokenized. Reintroduce via mask-image
// + background-color: var(--retro--fg) if icons are wanted back.
.retro-alert-main, .retro-toast-main {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
padding-block: 0.7em 0.7em;
padding-inline: 0.9em 2.5em;
position: relative;
min-height: 36px;
background: inherit;
}
.retro-alert-icon, .retro-toast-icon {
width: 24px;
height: 24px;
margin-inline-end: 0.8em;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--retro-font-size-lg);
flex-shrink: 0;
}
.retro-alert-primary .retro-alert-icon::before, .retro-toast-primary .retro-toast-icon::before { content: '\2139'; /* ℹ */ }
.retro-alert-success .retro-alert-icon::before, .retro-toast-success .retro-toast-icon::before { content: '\2714'; /* ✔ */ }
.retro-alert-danger .retro-alert-icon::before, .retro-toast-danger .retro-toast-icon::before { content: '\2716'; /* ✖ */ }
.retro-alert-warning .retro-alert-icon::before, .retro-toast-warning .retro-toast-icon::before { content: '\26A0'; /* ⚠ */ }
.retro-alert-info .retro-alert-icon::before, .retro-toast-info .retro-toast-icon::before { content: '\2139'; /* ℹ */ }
.retro-alert-close, .retro-toast-close {
position: static;
margin-inline-start: 1em;
align-self: center;
}
.retro-alert::before, .retro-toast::before { display: none !important; }
.retro-alert {
margin-bottom: 1.25rem;
}