js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update callout.css

Browse Source
This commit is contained in:
Lea Verou
2024-12-11 17:35:01 -05:00
parent 5a683300b2
commit 4a7fd7964f
1 changed files with 60 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/components/callout/callout.css
View File

@@ -1,68 +1,64 @@
import { css } from 'lit';
:host {
--icon-color: currentColor;
--icon-size: var(--wa-font-size-l);
--spacing: var(--wa-space-m);
export default css`
:host {
--icon-color: currentColor;
--icon-size: var(--wa-font-size-l);
--spacing: var(--wa-space-m);
position: relative;
display: flex;
align-items: stretch;
border-radius: var(--wa-panel-border-radius);
background-color: var(--background-color);
border-color: var(--border-color);
border-style: var(--wa-panel-border-style);
border-width: var(--wa-panel-border-width);
color: var(--content-color);
padding: var(--spacing);
}
position: relative;
display: flex;
align-items: stretch;
border-radius: var(--wa-panel-border-radius);
background-color: var(--background-color);
border-color: var(--border-color);
border-style: var(--wa-panel-border-style);
border-width: var(--wa-panel-border-width);
color: var(--content-color);
padding: var(--spacing);
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-quiet);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-quiet);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-quiet);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-quiet);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='danger']) {
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-quiet);
--content-color: var(--wa-color-danger-on-normal);
}
[part~='icon'] {
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--icon-color);
font-size: var(--icon-size);
::slotted(*) {
margin-inline-end: var(--spacing);
}
}
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-quiet);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-quiet);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-quiet);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-quiet);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='danger']) {
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-quiet);
--content-color: var(--wa-color-danger-on-normal);
}
[part~='icon'] {
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--icon-color);
font-size: var(--icon-size);
::slotted(*) {
margin-inline-end: var(--spacing);
}
}
[part~='message'] {
flex: 1 1 auto;
display: block;
overflow: hidden;
}
`;
[part~='message'] {
flex: 1 1 auto;
display: block;
overflow: hidden;
}