mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
126 lines
3.2 KiB
SCSS
126 lines
3.2 KiB
SCSS
@use '../config' as *;
|
|
|
|
.alert {
|
|
// scss-docs-start alert-css-vars
|
|
--alert-variant-color: var(--body-color);
|
|
--alert-color: var(--alert-variant-color);
|
|
--alert-bg: #{color-transparent(var(--alert-variant-color), 0.16, var(--bg-surface))};
|
|
--alert-padding-x: #{$alert-padding-x};
|
|
--alert-padding-y: #{$alert-padding-y};
|
|
--alert-margin-bottom: #{$alert-margin-bottom};
|
|
--alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))};
|
|
--alert-border: var(--border-width) solid var(--alert-border-color);
|
|
--alert-border-radius: var(--border-radius);
|
|
--alert-link-color: inherit;
|
|
--alert-heading-font-weight: var(--font-weight-medium);
|
|
--alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
|
|
--alert-icon-size: #{$alert-icon-size};
|
|
--alert-padding-inline-end: #{$alert-padding-inline-end};
|
|
--alert-gap: #{$alert-gap};
|
|
// scss-docs-end alert-css-vars
|
|
|
|
position: relative;
|
|
padding: var(--alert-padding-y) var(--alert-padding-x);
|
|
margin-bottom: var(--alert-margin-bottom);
|
|
color: var(--alert-color);
|
|
background-color: color-mix(in oklab, var(--alert-bg), var(--bg-surface));
|
|
border: var(--border-width) var(--border-style) var(--alert-border-color);
|
|
@include border-radius(var(--alert-border-radius));
|
|
|
|
&:has(> .alert-icon) {
|
|
padding-inline-start: calc(var(--alert-padding-x) + var(--alert-icon-size) + var(--alert-gap));
|
|
}
|
|
}
|
|
|
|
.alert-heading {
|
|
margin-bottom: var(--alert-heading-margin-bottom);
|
|
font-weight: var(--alert-heading-font-weight);
|
|
color: inherit;
|
|
}
|
|
|
|
.alert-description {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.alert-icon {
|
|
width: var(--alert-icon-size) !important;
|
|
height: var(--alert-icon-size) !important;
|
|
margin-inline-end: var(--alert-gap);
|
|
color: var(--alert-color);
|
|
}
|
|
|
|
.alert > .alert-icon {
|
|
position: absolute;
|
|
inset-inline-start: var(--alert-padding-x);
|
|
top: var(--alert-padding-y);
|
|
margin-inline-end: 0;
|
|
}
|
|
|
|
.alert-action,
|
|
.alert-link {
|
|
margin-inline-start: 0.25rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.alert-action {
|
|
color: var(--alert-color);
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.alert-list {
|
|
margin: 0;
|
|
}
|
|
|
|
.alert > .alert-heading + div:has(+ .alert-action),
|
|
.alert > .alert-heading + div:has(+ .alert-link) {
|
|
display: inline;
|
|
}
|
|
|
|
.alert-link {
|
|
font-weight: $alert-link-font-weight;
|
|
color: var(--alert-link-color);
|
|
|
|
&:hover {
|
|
color: var(--alert-link-color);
|
|
}
|
|
}
|
|
|
|
.alert-dismissible {
|
|
padding-inline-end: var(--alert-padding-inline-end);
|
|
|
|
.btn-close {
|
|
position: absolute;
|
|
inset-inline-end: calc(var(--alert-padding-x) / 2 - 1px);
|
|
top: calc(var(--alert-padding-y) / 2 - 1px);
|
|
z-index: 1;
|
|
padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x);
|
|
}
|
|
}
|
|
|
|
.alert-important {
|
|
// Set the shared color token so every child that reads it - text, icon,
|
|
// `.alert-action`, `.alert-link` - flips to white instead of the variant
|
|
// color, which is the background here.
|
|
--alert-color: var(--white);
|
|
background-color: var(--alert-variant-color);
|
|
|
|
.alert-description {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.alert-minor {
|
|
background: transparent;
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
@each $name, $color in $theme-colors {
|
|
.alert-#{$name} {
|
|
--alert-variant-color: var(--#{$name});
|
|
}
|
|
}
|