59 lines
1.4 KiB
SCSS
59 lines
1.4 KiB
SCSS
////////////////////////////////////////////////////////////
|
|
// .c-pill /////////////////////////////////////////////////
|
|
////////////////////////////////////////////////////////////
|
|
|
|
.c-pill {
|
|
--border: var(--pill-border);
|
|
--bg: var(--pill-bg);
|
|
--color: var(--pill-color);
|
|
--action-icon-color: var(--color-secondary);
|
|
|
|
position: relative;
|
|
display: inline-flex;
|
|
text-align: left;
|
|
align-items: center;
|
|
border-radius: var(--radius);
|
|
font: inherit;
|
|
outline: 0;
|
|
text-decoration: none;
|
|
padding: calc(var(--su-2) - 1px) var(--su-3);
|
|
color: var(--color);
|
|
border: 1px solid var(--border);
|
|
background: var(--bg);
|
|
|
|
&:hover,
|
|
.js-focus-visible &.focus-visible:focus {
|
|
&:not([aria-disabled='true']) {
|
|
--color: var(--pill-color-hover);
|
|
--border: var(--pill-border-hover);
|
|
--bg: var(--pill-bg-hover);
|
|
--action-icon-color: var(--pill-color-hover);
|
|
z-index: var(--z-elevate);
|
|
|
|
&:is(.c-pill--action-icon--destructive) {
|
|
--action-icon-color: var(--accent-danger);
|
|
}
|
|
}
|
|
}
|
|
|
|
.js-focus-visible &.focus-visible:focus {
|
|
box-shadow: var(--focus-ring);
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
.c-pill--description-icon {
|
|
.c-pill__description-icon {
|
|
color: var(--description-icon-color);
|
|
flex-shrink: 0;
|
|
margin-right: var(--su-2);
|
|
}
|
|
}
|
|
|
|
.c-pill--action-icon {
|
|
.c-pill__action-icon {
|
|
color: var(--action-icon-color);
|
|
flex-shrink: 0;
|
|
margin-left: var(--su-2);
|
|
}
|
|
}
|