mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
81 lines
2.3 KiB
CSS
81 lines
2.3 KiB
CSS
/* #region Alerts */
|
|
wa-alert {
|
|
--background: var(--wa-color-surface-default);
|
|
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
|
|
--content-color: var(--wa-color-text-normal);
|
|
--padding: var(--wa-space-l);
|
|
|
|
font-size: var(--wa-font-size-s);
|
|
|
|
&[variant='brand'] {
|
|
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-neutral-border-quiet)
|
|
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
|
--icon-color: var(--wa-color-brand-fill-loud);
|
|
}
|
|
|
|
&[variant='success'] {
|
|
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-neutral-border-quiet)
|
|
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
|
--icon-color: var(--wa-color-success-fill-loud);
|
|
}
|
|
|
|
&[variant='neutral'] {
|
|
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-neutral-border-quiet)
|
|
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
|
--icon-color: var(--wa-color-neutral-fill-loud);
|
|
}
|
|
|
|
&[variant='warning'] {
|
|
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-neutral-border-quiet)
|
|
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
|
--icon-color: var(--wa-color-warning-fill-loud);
|
|
}
|
|
|
|
&[variant='danger'] {
|
|
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-neutral-border-quiet)
|
|
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
|
|
--icon-color: var(--wa-color-danger-fill-loud);
|
|
}
|
|
}
|
|
/* #endregion */
|
|
|
|
/* #region Breadcrumbs */
|
|
wa-breadcrumb {
|
|
font-size: var(--wa-font-size-s);
|
|
}
|
|
|
|
/* #region Buttons */
|
|
wa-button {
|
|
&[size='small'] {
|
|
font-size: var(--wa-font-size-xs);
|
|
}
|
|
|
|
&[size='medium'] {
|
|
font-size: var(--wa-font-size-s);
|
|
}
|
|
|
|
&[size='large'] {
|
|
font-size: var(--wa-font-size-m);
|
|
}
|
|
}
|
|
/* #endregion */
|
|
|
|
/* #region Inputs */
|
|
wa-input:not([filled]) {
|
|
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
|
|
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
|
|
--wa-focus-ring-offset: 0;
|
|
}
|
|
|
|
wa-switch {
|
|
--thumb-size: calc(var(--height) + 4px);
|
|
|
|
&::part(thumb) {
|
|
border-color: var(--background);
|
|
}
|
|
&[checked]::part(thumb) {
|
|
border-color: var(--background-checked);
|
|
}
|
|
}
|
|
/* #endregion */
|