kopia lustrzana https://github.com/shoelace-style/shoelace
use data attributes
rodzic
0b7e70bccf
commit
f10282f1e6
|
@ -30,22 +30,22 @@ export default class SlButtonGroup extends ShoelaceElement {
|
||||||
|
|
||||||
private handleFocus(event: Event) {
|
private handleFocus(event: Event) {
|
||||||
const button = findButton(event.target as HTMLElement);
|
const button = findButton(event.target as HTMLElement);
|
||||||
button?.classList.add('sl-button-group__button--focus');
|
button?.toggleAttribute('data-sl-button-group__button--focus', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleBlur(event: Event) {
|
private handleBlur(event: Event) {
|
||||||
const button = findButton(event.target as HTMLElement);
|
const button = findButton(event.target as HTMLElement);
|
||||||
button?.classList.remove('sl-button-group__button--focus');
|
button?.toggleAttribute('data-sl-button-group__button--focus', false);
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleMouseOver(event: Event) {
|
private handleMouseOver(event: Event) {
|
||||||
const button = findButton(event.target as HTMLElement);
|
const button = findButton(event.target as HTMLElement);
|
||||||
button?.classList.add('sl-button-group__button--hover');
|
button?.toggleAttribute('data-sl-button-group__button--hover', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleMouseOut(event: Event) {
|
private handleMouseOut(event: Event) {
|
||||||
const button = findButton(event.target as HTMLElement);
|
const button = findButton(event.target as HTMLElement);
|
||||||
button?.classList.remove('sl-button-group__button--hover');
|
button?.toggleAttribute('data-sl-button-group__button--hover', true);
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleSlotChange() {
|
private handleSlotChange() {
|
||||||
|
@ -56,11 +56,11 @@ export default class SlButtonGroup extends ShoelaceElement {
|
||||||
const button = findButton(el);
|
const button = findButton(el);
|
||||||
|
|
||||||
if (button) {
|
if (button) {
|
||||||
button.classList.add('sl-button-group__button');
|
button.toggleAttribute('data-sl-button-group__button', true);
|
||||||
button.classList.toggle('sl-button-group__button--first', index === 0);
|
button.toggleAttribute('data-sl-button-group__button--first', index === 0);
|
||||||
button.classList.toggle('sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
|
button.toggleAttribute('data-sl-button-group__button--inner', index > 0 && index < slottedElements.length - 1);
|
||||||
button.classList.toggle('sl-button-group__button--last', index === slottedElements.length - 1);
|
button.toggleAttribute('data-sl-button-group__button--last', index === slottedElements.length - 1);
|
||||||
button.classList.toggle('sl-button-group__button--radio', button.tagName.toLowerCase() === 'sl-radio-button');
|
button.toggleAttribute('data-sl-button-group__button--radio', button.tagName.toLowerCase() === 'sl-radio-button');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -546,30 +546,30 @@ export default css`
|
||||||
* buttons and we style them here instead.
|
* buttons and we style them here instead.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:host(.sl-button-group__button--first:not(.sl-button-group__button--last)) .button {
|
:host([data-sl-button-group__button--first]:not([data-sl-button-group__button--last])) .button {
|
||||||
border-start-end-radius: 0;
|
border-start-end-radius: 0;
|
||||||
border-end-end-radius: 0;
|
border-end-end-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.sl-button-group__button--inner) .button {
|
:host([data-sl-button-group__button--inner]) .button {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:host(.sl-button-group__button--last:not(.sl-button-group__button--first)) .button {
|
:host([data-sl-button-group__button--last]:not([data-sl-button-group__button--first])) .button {
|
||||||
border-start-start-radius: 0;
|
border-start-start-radius: 0;
|
||||||
border-end-start-radius: 0;
|
border-end-start-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* All except the first */
|
/* All except the first */
|
||||||
:host(.sl-button-group__button:not(.sl-button-group__button--first)) {
|
:host([data-sl-button-group__button]:not([data-sl-button-group__button--first])) {
|
||||||
margin-inline-start: calc(-1 * var(--sl-input-border-width));
|
margin-inline-start: calc(-1 * var(--sl-input-border-width));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Add a visual separator between solid buttons */
|
/* Add a visual separator between solid buttons */
|
||||||
:host(
|
:host(
|
||||||
.sl-button-group__button:not(
|
[data-sl-button-group__button]:not(
|
||||||
.sl-button-group__button--first,
|
[data-sl-button-group__button--first],
|
||||||
.sl-button-group__button--radio,
|
[data-sl-button-group__button--radio],
|
||||||
[variant='default']
|
[variant='default']
|
||||||
):not(:hover)
|
):not(:hover)
|
||||||
)
|
)
|
||||||
|
@ -584,13 +584,13 @@ export default css`
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
|
/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
|
||||||
:host(.sl-button-group__button--hover) {
|
:host([data-sl-button-group__button--hover]) {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Focus and checked are always on top */
|
/* Focus and checked are always on top */
|
||||||
:host(.sl-button-group__button--focus),
|
:host([data-sl-button-group__button--focus]),
|
||||||
:host(.sl-button-group__button[checked]) {
|
:host([data-sl-button-group__button[checked]]) {
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
Ładowanie…
Reference in New Issue