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

touch up badge styles

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-11 22:50:21 -04:00
parent 670a581d12
commit 0c297196ad
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/badge/badge.styles.ts
View File

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--border-color: var(--wa-color-surface-default);
--border-color: var(--background-color);
--border-radius: var(--wa-border-radius-xs);
--border-style: var(--wa-border-style);
--border-width: var(--wa-border-width-s);
@@ -11,27 +11,27 @@ export default css`
}
:host([variant='brand']) {
--background: var(--wa-color-brand-fill-loud);
--background-color: var(--wa-color-brand-fill-loud);
--content-color: var(--wa-color-brand-on-loud);
}
:host([variant='success']) {
--background: var(--wa-color-success-fill-loud);
--background-color: var(--wa-color-success-fill-loud);
--content-color: var(--wa-color-success-on-loud);
}
:host([variant='warning']) {
--background: var(--wa-color-warning-fill-loud);
--background-color: var(--wa-color-warning-fill-loud);
--content-color: var(--wa-color-warning-on-loud);
}
:host([variant='neutral']) {
--background: var(--wa-color-neutral-fill-loud);
--background-color: var(--wa-color-neutral-fill-loud);
--content-color: var(--wa-color-neutral-on-loud);
}
:host([variant='danger']) {
--background: var(--wa-color-danger-fill-loud);
--background-color: var(--wa-color-danger-fill-loud);
--content-color: var(--wa-color-danger-on-loud);
}
@@ -42,14 +42,14 @@ export default css`
font-size: max(12px, 0.75em);
font-weight: var(--wa-font-weight-semibold);
line-height: 1;
background: var(--background);
background: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
color: var(--content-color);
white-space: nowrap;
padding: 0.35em 0.6em;
padding: 0.375em 0.625em;
user-select: none;
-webkit-user-select: none;
cursor: inherit;
@@ -62,7 +62,7 @@ export default css`
/* Pulse modifier */
.badge--pulse {
--pulse-color: var(--background);
--pulse-color: var(--background-color);
animation: pulse 1.5s infinite;
}

1
src/components/button/button.styles.ts
View File

@@ -336,6 +336,7 @@ export default css`
*/
.button ::slotted(wa-badge) {
--border-color: var(--wa-color-surface-default);
position: absolute;
top: 0;
right: 0;