mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
cfc3f181a3
Fixes several issues for components using the `display: contents` technique: - Introduce `--display` CSS property to make it possible to override internal display value of base part. - Ensure `display: contents` is always applied with `!important` to avoid rendering glitches like the one here - Ensure non-inherited custom properties are also inherited - Ensure the `hidden` attribute still works.
78 lines
1.8 KiB
CSS
78 lines
1.8 KiB
CSS
:host {
|
|
--display: inline-flex;
|
|
}
|
|
|
|
.prefix,
|
|
.suffix,
|
|
.label {
|
|
display: inline-flex;
|
|
position: relative;
|
|
align-items: center;
|
|
}
|
|
|
|
/* We use a hidden input so constraint validation errors work, since they don't appear to show when used with buttons.
|
|
We can't actually hide it, though, otherwise the messages will be suppressed by the browser. */
|
|
.hidden-input {
|
|
all: unset;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
outline: dotted 1px red;
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
|
|
/*
|
|
* Checked buttons
|
|
*/
|
|
:host([checked]) {
|
|
--indicator-color: var(--wa-form-control-activated-color);
|
|
--indicator-width: var(--wa-border-width-s);
|
|
|
|
box-shadow: inset 0 0 0 var(--indicator-width) var(--indicator-color);
|
|
|
|
& button {
|
|
--border-color: var(--indicator-color);
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Active buttons
|
|
*/
|
|
button:active {
|
|
--text-color-active: var(--wa-form-control-activated-color);
|
|
--border-color-active: var(--wa-form-control-activated-color);
|
|
}
|
|
|
|
/* Horizontal radio pill buttons */
|
|
:host([data-wa-radio-horizontal][data-wa-radio-first]:not([data-wa-radio-last])) .wa-pill {
|
|
border-start-end-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
|
|
:host([data-wa-radio-horizontal][data-wa-radio-inner]) .wa-pill {
|
|
border-radius: 0;
|
|
}
|
|
|
|
:host([data-wa-radio-horizontal][data-wa-radio-last]:not([data-wa-radio-first])) .wa-pill {
|
|
border-start-start-radius: 0;
|
|
border-end-start-radius: 0;
|
|
}
|
|
|
|
/* Vertical radio pill buttons */
|
|
:host([data-wa-radio-vertical][data-wa-radio-first]:not([data-wa-radio-last])) .wa-pill {
|
|
border-end-start-radius: 0;
|
|
border-end-end-radius: 0;
|
|
}
|
|
|
|
:host([data-wa-radio-vertical][data-wa-radio-inner]) .wa-pill {
|
|
border-radius: 0;
|
|
}
|
|
|
|
:host([data-wa-radio-vertical][data-wa-radio-last]:not([data-wa-radio-first])) .wa-pill {
|
|
border-start-start-radius: 0;
|
|
border-start-end-radius: 0;
|
|
}
|