mirror of
https://github.com/hashicorp/vault.git
synced 2026-05-05 20:36:26 +02:00
112 lines
2.6 KiB
SCSS
112 lines
2.6 KiB
SCSS
@use '../utils/size_variables';
|
|
|
|
/**
|
|
* Copyright IBM Corp. 2016, 2025
|
|
* SPDX-License-Identifier: BUSL-1.1
|
|
*/
|
|
|
|
.alert-title {
|
|
font-size: size_variables.$size-5;
|
|
font-weight: var(--token-typography-font-weight-bold);
|
|
}
|
|
|
|
.message {
|
|
background: var(--token-color-palette-blue-50);
|
|
border: 1px solid var(--token-color-palette-blue-100);
|
|
margin-bottom: size_variables.$spacing-12;
|
|
padding: size_variables.$spacing-12 size_variables.$spacing-16 size_variables.$spacing-16
|
|
size_variables.$spacing-12;
|
|
position: relative;
|
|
|
|
&:not(:last-child) {
|
|
margin-bottom: size_variables.$spacing-20;
|
|
}
|
|
|
|
.message-icon {
|
|
color: var(--token-color-foreground-action);
|
|
margin-right: size_variables.$spacing-8;
|
|
}
|
|
|
|
.message-title {
|
|
color: var(--token-color-foreground-action);
|
|
font-size: var(--token-typography-body-300-font-size);
|
|
font-weight: var(--token-typography-font-weight-bold);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.message-body {
|
|
border: 0;
|
|
padding: 1em 1.25em;
|
|
margin-top: size_variables.$spacing-4;
|
|
}
|
|
|
|
// message types, see message-types.js
|
|
&.is-danger {
|
|
background: var(--token-color-surface-critical);
|
|
border: 1px solid var(--token-color-palette-red-50);
|
|
|
|
.message-body {
|
|
color: var(--token-color-foreground-critical-on-surface);
|
|
}
|
|
|
|
.message-icon {
|
|
color: var(--token-color-foreground-critical);
|
|
}
|
|
|
|
.message-title {
|
|
color: var(--token-color-foreground-critical-on-surface);
|
|
}
|
|
}
|
|
|
|
&.is-highlight {
|
|
background: var(--token-color-surface-warning);
|
|
border: 1px solid var(--token-color-border-warning);
|
|
|
|
.message-body {
|
|
color: var(--token-color-foreground-primary);
|
|
}
|
|
|
|
.message-icon {
|
|
color: var(--token-color-foreground-warning);
|
|
}
|
|
|
|
.message-title {
|
|
color: var(--token-color-foreground-warning-on-surface);
|
|
}
|
|
}
|
|
|
|
&.is-info {
|
|
background-color: var(--token-color-palette-blue-50);
|
|
|
|
.message-body {
|
|
color: var(--token-color-palette-blue-300);
|
|
}
|
|
|
|
.message-header {
|
|
background-color: var(--token-color-palette-blue-200);
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.message-title {
|
|
color: var(--token-color-palette-blue-300);
|
|
}
|
|
}
|
|
|
|
&.is-success {
|
|
background: var(--token-color-surface-success);
|
|
border: 1px solid var(--token-color-border-success);
|
|
|
|
.message-body {
|
|
color: var(--token-color-foreground-success-high-contrast);
|
|
}
|
|
|
|
.message-icon {
|
|
color: var(--token-color-foreground-success);
|
|
}
|
|
|
|
.message-title {
|
|
color: var(--token-color-foreground-success-on-surface);
|
|
}
|
|
}
|
|
}
|