mirror of
https://github.com/twbs/bootstrap.git
synced 2025-12-28 05:33:57 +00:00
52 lines
1.7 KiB
SCSS
52 lines
1.7 KiB
SCSS
@use "sass:map";
|
|
@use "config" as *;
|
|
@use "theme" as *;
|
|
@use "variables" as *;
|
|
@use "mixins/border-radius" as *;
|
|
|
|
// scss-docs-start alert-variables
|
|
$alert-gap: $spacer * .75 !default;
|
|
$alert-padding-y: $spacer !default;
|
|
$alert-padding-x: $spacer !default;
|
|
$alert-border-radius: var(--border-radius) !default;
|
|
$alert-link-font-weight: $font-weight-semibold !default;
|
|
$alert-border-width: var(--border-width) !default;
|
|
// scss-docs-end alert-variables
|
|
|
|
@layer components {
|
|
.alert {
|
|
// scss-docs-start alert-css-vars
|
|
--alert-gap: #{$alert-gap};
|
|
--alert-bg: var(--theme-bg-subtle, var(--bg-1));
|
|
--alert-padding-x: #{$alert-padding-x};
|
|
--alert-padding-y: #{$alert-padding-y};
|
|
--alert-color: var(--theme-text, inherit);
|
|
--alert-border-color: var(--theme-border, var(--border-color));
|
|
--alert-border: #{$alert-border-width} solid var(--alert-border-color);
|
|
--alert-border-radius: #{$alert-border-radius};
|
|
--alert-link-color: inherit;
|
|
--hr-border-color: var(--theme-border, var(--border-color));
|
|
// scss-docs-end alert-css-vars
|
|
|
|
display: flex;
|
|
gap: var(--alert-gap);
|
|
align-items: start;
|
|
padding: var(--alert-padding-y) var(--alert-padding-x);
|
|
color: var(--alert-color);
|
|
background-color: var(--alert-bg);
|
|
border: var(--alert-border);
|
|
@include border-radius(var(--alert-border-radius));
|
|
}
|
|
|
|
.alert-heading {
|
|
// Specified to prevent conflicts of changing $headings-color
|
|
color: inherit;
|
|
}
|
|
|
|
// Provide class for links that match alerts
|
|
.alert-link {
|
|
font-weight: $alert-link-font-weight;
|
|
color: var(--alert-link-color);
|
|
}
|
|
}
|