103 lines
2.4 KiB
SCSS
103 lines
2.4 KiB
SCSS
.c__alert {
|
|
padding: 0.75rem 1rem;
|
|
background-color: var(--c--components--alert--background-color);
|
|
border-radius: var(--c--components--alert--border-radius);
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
border-left-width: 3px;
|
|
font-weight: var(--c--components--alert--font-weight);
|
|
color: var(--c--components--alert--color);
|
|
box-sizing: border-box;
|
|
border-color: var(--c--theme--colors--greyscale-300);
|
|
border-left-color: var(--c--theme--colors--greyscale-600);
|
|
|
|
&__icon {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
justify-content: center;
|
|
|
|
span {
|
|
font-size: var(--c--components--alert--icon-size);
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// We want to maintain the same height as when a button is present.
|
|
min-height: 2.25rem;
|
|
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
// For accessibility reasons, we want to make sure that the text is the first thing that is read.
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
&-additional {
|
|
|
|
&__buttons {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.c__alert__additional {
|
|
font-weight: var(--c--components--alert--additional-font-weight);
|
|
color: var(--c--components--alert--additional-color);
|
|
}
|
|
|
|
&:not(.c__alert--neutral), &.c__alert--expandable {
|
|
.c__alert__additional {
|
|
padding-left: 2rem;
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&--info {
|
|
border-color: var(--c--theme--colors--info-300);
|
|
border-left-color: var(--c--theme--colors--info-600);
|
|
|
|
.c__alert__icon {
|
|
color: var(--c--theme--colors--info-600);
|
|
}
|
|
}
|
|
|
|
&--success {
|
|
border-color: var(--c--theme--colors--success-300);
|
|
border-left-color: var(--c--theme--colors--success-600);
|
|
|
|
.c__alert__icon {
|
|
color: var(--c--theme--colors--success-600);
|
|
}
|
|
}
|
|
|
|
&--warning {
|
|
border-color: var(--c--theme--colors--warning-300);
|
|
border-left-color: var(--c--theme--colors--warning-600);
|
|
|
|
.c__alert__icon {
|
|
color: var(--c--theme--colors--warning-600);
|
|
}
|
|
}
|
|
|
|
&--error {
|
|
border-color: var(--c--theme--colors--danger-300);
|
|
border-left-color: var(--c--theme--colors--danger-600);
|
|
|
|
.c__alert__icon {
|
|
color: var(--c--theme--colors--danger-600);
|
|
}
|
|
}
|
|
}
|