mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
f30801ab66
* Adjust label styles for button and checkbox components to not crush space of nested tags * Adjust label styles for button and checkbox components to not crush space of nested tags * Update packages/webawesome/src/components/checkbox/checkbox.css --------- Co-authored-by: Tobias Bannwart <tobias.bannwart@bison-group.com> Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
335 lines
8.2 KiB
CSS
335 lines
8.2 KiB
CSS
@layer wa-component {
|
|
:host {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
transition-property: background, border, box-shadow, color;
|
|
transition-duration: var(--wa-transition-fast);
|
|
transition-timing-function: var(--wa-transition-easing);
|
|
cursor: pointer;
|
|
padding: 0 var(--wa-form-control-padding-inline);
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
font-weight: var(--wa-font-weight-action);
|
|
line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
|
|
height: var(--wa-form-control-height);
|
|
width: 100%;
|
|
|
|
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
|
|
border-color: transparent;
|
|
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
|
|
border-radius: var(--wa-form-control-border-radius);
|
|
border-style: var(--wa-border-style);
|
|
border-width: var(--wa-border-width-s);
|
|
}
|
|
|
|
/* Appearance modifiers */
|
|
:host([appearance~='plain']) {
|
|
.button {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: transparent;
|
|
border-color: transparent;
|
|
}
|
|
@media (hover: hover) {
|
|
.button:not(.disabled):not(.loading):hover {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
|
}
|
|
}
|
|
.button:not(.disabled):not(.loading):active {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
|
|
var(--wa-color-mix-active)
|
|
);
|
|
}
|
|
}
|
|
|
|
:host([appearance~='outlined']) {
|
|
.button {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: transparent;
|
|
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
|
|
}
|
|
@media (hover: hover) {
|
|
.button:not(.disabled):not(.loading):hover {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
|
}
|
|
}
|
|
.button:not(.disabled):not(.loading):active {
|
|
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet)),
|
|
var(--wa-color-mix-active)
|
|
);
|
|
}
|
|
}
|
|
|
|
:host([appearance~='filled']) {
|
|
.button {
|
|
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
|
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
|
|
border-color: transparent;
|
|
}
|
|
@media (hover: hover) {
|
|
.button:not(.disabled):not(.loading):hover {
|
|
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
|
var(--wa-color-mix-hover)
|
|
);
|
|
}
|
|
}
|
|
.button:not(.disabled):not(.loading):active {
|
|
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
|
|
var(--wa-color-mix-active)
|
|
);
|
|
}
|
|
}
|
|
|
|
:host([appearance~='filled'][appearance~='outlined']) .button {
|
|
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
|
}
|
|
|
|
:host([appearance~='accent']) {
|
|
.button {
|
|
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
|
|
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
|
|
border-color: transparent;
|
|
}
|
|
@media (hover: hover) {
|
|
.button:not(.disabled):not(.loading):hover {
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
|
|
var(--wa-color-mix-hover)
|
|
);
|
|
}
|
|
}
|
|
.button:not(.disabled):not(.loading):active {
|
|
background-color: color-mix(
|
|
in oklab,
|
|
var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)),
|
|
var(--wa-color-mix-active)
|
|
);
|
|
}
|
|
}
|
|
|
|
/* Focus states */
|
|
.button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.button:focus-visible {
|
|
outline: var(--wa-focus-ring);
|
|
outline-offset: var(--wa-focus-ring-offset);
|
|
}
|
|
|
|
/* Disabled state */
|
|
.button.disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* When disabled, prevent mouse events from bubbling up from children */
|
|
.button.disabled * {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Keep it last so Safari doesn't stop parsing this block */
|
|
.button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
/* Icon buttons */
|
|
.button.is-icon-button {
|
|
outline-offset: 2px;
|
|
width: var(--wa-form-control-height);
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
/* Pill modifier */
|
|
:host([pill]) .button {
|
|
border-radius: var(--wa-border-radius-pill);
|
|
}
|
|
|
|
/*
|
|
* Label
|
|
*/
|
|
|
|
.start,
|
|
.end {
|
|
flex: 0 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.is-icon-button .label {
|
|
display: flex;
|
|
}
|
|
|
|
.label::slotted(wa-icon) {
|
|
align-self: center;
|
|
}
|
|
|
|
/*
|
|
* Caret modifier
|
|
*/
|
|
|
|
wa-icon[part~='caret'] {
|
|
display: flex;
|
|
align-self: center;
|
|
align-items: center;
|
|
|
|
&::part(svg) {
|
|
width: 0.875em;
|
|
height: 0.875em;
|
|
}
|
|
|
|
.button:has(&) .end {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Loading modifier
|
|
*/
|
|
|
|
.loading {
|
|
position: relative;
|
|
cursor: wait;
|
|
|
|
.start,
|
|
.label,
|
|
.end,
|
|
.caret {
|
|
visibility: hidden;
|
|
}
|
|
|
|
wa-spinner {
|
|
--indicator-color: currentColor;
|
|
--track-color: color-mix(in oklab, currentColor, transparent 90%);
|
|
|
|
position: absolute;
|
|
font-size: 1em;
|
|
height: 1em;
|
|
width: 1em;
|
|
top: calc(50% - 0.5em);
|
|
left: calc(50% - 0.5em);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Badges
|
|
*/
|
|
|
|
button ::slotted(wa-badge) {
|
|
border-color: var(--wa-color-surface-default);
|
|
position: absolute;
|
|
inset-block-start: 0;
|
|
inset-inline-end: 0;
|
|
translate: 50% -50%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
:host(:dir(rtl)) ::slotted(wa-badge) {
|
|
translate: -50% -50%;
|
|
}
|
|
|
|
/*
|
|
* Button spacing
|
|
*/
|
|
|
|
slot[name='start']::slotted(*) {
|
|
margin-inline-end: 0.75em;
|
|
}
|
|
|
|
slot[name='end']::slotted(*),
|
|
.button:not(.visually-hidden-label) [part~='caret'] {
|
|
margin-inline-start: 0.75em;
|
|
}
|
|
|
|
/*
|
|
* Button group border radius modifications
|
|
*/
|
|
|
|
/* Remove border radius from all grouped buttons by default */
|
|
:host(.wa-button-group__button) .button {
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Horizontal orientation */
|
|
:host(.wa-button-group__horizontal.wa-button-group__button-first) .button {
|
|
border-start-start-radius: var(--wa-form-control-border-radius);
|
|
border-end-start-radius: var(--wa-form-control-border-radius);
|
|
}
|
|
|
|
:host(.wa-button-group__horizontal.wa-button-group__button-last) .button {
|
|
border-start-end-radius: var(--wa-form-control-border-radius);
|
|
border-end-end-radius: var(--wa-form-control-border-radius);
|
|
}
|
|
|
|
/* Vertical orientation */
|
|
:host(.wa-button-group__vertical) {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
:host(.wa-button-group__vertical) .button {
|
|
width: 100%;
|
|
justify-content: start;
|
|
}
|
|
|
|
:host(.wa-button-group__vertical.wa-button-group__button-first) .button {
|
|
border-start-start-radius: var(--wa-form-control-border-radius);
|
|
border-start-end-radius: var(--wa-form-control-border-radius);
|
|
}
|
|
|
|
:host(.wa-button-group__vertical.wa-button-group__button-last) .button {
|
|
border-end-start-radius: var(--wa-form-control-border-radius);
|
|
border-end-end-radius: var(--wa-form-control-border-radius);
|
|
}
|
|
|
|
/* Handle pill modifier for button groups */
|
|
:host([pill].wa-button-group__horizontal.wa-button-group__button-first) .button {
|
|
border-start-start-radius: var(--wa-border-radius-pill);
|
|
border-end-start-radius: var(--wa-border-radius-pill);
|
|
}
|
|
|
|
:host([pill].wa-button-group__horizontal.wa-button-group__button-last) .button {
|
|
border-start-end-radius: var(--wa-border-radius-pill);
|
|
border-end-end-radius: var(--wa-border-radius-pill);
|
|
}
|
|
|
|
:host([pill].wa-button-group__vertical.wa-button-group__button-first) .button {
|
|
border-start-start-radius: var(--wa-border-radius-pill);
|
|
border-start-end-radius: var(--wa-border-radius-pill);
|
|
}
|
|
|
|
:host([pill].wa-button-group__vertical.wa-button-group__button-last) .button {
|
|
border-end-start-radius: var(--wa-border-radius-pill);
|
|
border-end-end-radius: var(--wa-border-radius-pill);
|
|
}
|