Skye Elliot
aa84b2e07c
* fix: Allow wrapping in `Banner` component. * chore: Remove translations from stories, update snapshot.
94 lines
2.0 KiB
CSS
94 lines
2.0 KiB
CSS
/*
|
|
* Copyright (c) 2025 Element Creations Ltd.
|
|
*
|
|
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
* Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
:root {
|
|
--cpd-color-gradient-critical-linear: linear-gradient(
|
|
180deg,
|
|
var(--cpd-color-alpha-red-500) 0%,
|
|
var(--cpd-color-alpha-red-400) 20%,
|
|
var(--cpd-color-alpha-red-300) 40%,
|
|
var(--cpd-color-alpha-red-200) 60%,
|
|
var(--cpd-color-alpha-red-100) 80%,
|
|
var(--cpd-color-transparent) 100%
|
|
);
|
|
}
|
|
|
|
.banner {
|
|
container-type: inline-size;
|
|
container-name: banner;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
gap: var(--cpd-space-3x);
|
|
padding: var(--cpd-space-4x);
|
|
|
|
border-top: 1px solid var(--cpd-color-gray-400);
|
|
}
|
|
|
|
.banner[data-type="success"] {
|
|
background: var(--cpd-color-gradient-subtle-linear);
|
|
border-color: var(--cpd-color-green-900);
|
|
}
|
|
|
|
.banner[data-type="critical"] {
|
|
background: var(--cpd-color-gradient-critical-linear);
|
|
border-color: var(--cpd-color-border-critical-primary);
|
|
}
|
|
|
|
.banner[data-type="info"] {
|
|
background: var(--cpd-color-gradient-info-linear);
|
|
border-color: var(--cpd-color-blue-900);
|
|
}
|
|
|
|
.banner[data-type="info"] :is(svg) {
|
|
color: var(--cpd-color-blue-900);
|
|
}
|
|
|
|
.banner[data-type="success"] :is(.content, svg) {
|
|
color: var(--cpd-color-green-900);
|
|
}
|
|
|
|
.banner[data-type="critical"] :is(.content, svg) {
|
|
color: var(--cpd-color-red-900);
|
|
}
|
|
|
|
.banner p {
|
|
margin: 0;
|
|
}
|
|
|
|
.icon {
|
|
/* lock icon dimensions */
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
max-width: 32px;
|
|
max-height: 32px;
|
|
|
|
margin: 4px;
|
|
|
|
/* centre svg icons, as they are not full width */
|
|
flex: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon img {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.actions {
|
|
margin-left: auto;
|
|
|
|
flex: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--cpd-space-1x);
|
|
align-self: center;
|
|
|
|
white-space: nowrap;
|
|
}
|