mirror of
https://github.com/System-End/identity-vault.git
synced 2026-04-19 18:35:13 +00:00
88 lines
No EOL
2.1 KiB
SCSS
88 lines
No EOL
2.1 KiB
SCSS
@mixin banner-base {
|
|
display: flex;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
padding: .875rem 1.125rem;
|
|
margin-bottom: 1rem;
|
|
font-weight: 500;
|
|
box-shadow:
|
|
0 2px 6px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.3),
|
|
inset 0 -1px 1px rgba(0, 0, 0, 0.08);
|
|
|
|
& > svg {
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@mixin banner-theme($bg-color, $border-color, $fg-color, $list-fg-color) {
|
|
background: linear-gradient(145deg,
|
|
color-mix(in srgb, $bg-color 100%, white 5%),
|
|
$bg-color);
|
|
border: 1px solid $border-color;
|
|
color: $fg-color;
|
|
|
|
& > ul, p {
|
|
color: $list-fg-color;
|
|
& > li {
|
|
color: $list-fg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin banner-warning {
|
|
@include banner-theme(var(--warning-bg), var(--warning-border), var(--warning-fg-strong), var(--warning-fg));
|
|
}
|
|
|
|
@mixin banner-danger {
|
|
@include banner-theme(var(--error-bg), var(--error-border), var(--error-fg-strong), var(--error-fg));
|
|
}
|
|
|
|
@mixin banner-info {
|
|
@include banner-theme(var(--info-bg), var(--info-border), var(--info-fg-strong), var(--info-fg));
|
|
}
|
|
|
|
@mixin banner-success {
|
|
@include banner-theme(var(--success-bg), var(--success-border), var(--success-fg-strong), var(--success-fg));
|
|
}
|
|
|
|
@mixin banner-purple {
|
|
@include banner-theme(var(--purple-bg), var(--purple-border), var(--purple-fg-strong), var(--purple-fg));
|
|
}
|
|
|
|
@mixin alert-box($bg, $border, $fg-strong) {
|
|
background: $bg;
|
|
border: 1px solid $border;
|
|
border-radius: $radius-md;
|
|
padding: $space-3 $space-4;
|
|
margin-bottom: $space-5;
|
|
h3, h4 { margin: 0 0 $space-2; font-weight: 500; font-size: 1rem; color: $fg-strong; }
|
|
ul { margin: 0; padding-left: $space-4; }
|
|
}
|
|
|
|
.banner {
|
|
@include banner-base;
|
|
text-align: left;
|
|
|
|
&.warning {
|
|
@include banner-warning;
|
|
}
|
|
|
|
&.danger {
|
|
@include banner-danger;
|
|
}
|
|
|
|
&.info {
|
|
@include banner-info;
|
|
}
|
|
|
|
&.success {
|
|
@include banner-success;
|
|
}
|
|
|
|
&.purple {
|
|
@include banner-purple;
|
|
}
|
|
} |