mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

improve focus when clicking edge

pull/638/head
Cory LaViska 2021-12-31 10:53:06 -05:00
rodzic 5723ea3f8b
commit a9a5166da7
2 zmienionych plików z 13 dodań i 12 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
docs/resources/changelog.md
Wyświetl plik

@ -12,6 +12,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
- Fixed broken spinner animation in Safari [#633](https://github.com/shoelace-style/shoelace/issues/633)
- Fixed an a11y bug in `<sl-tooltip>` where `aria-describedby` referenced an id in the shadow root
- Fixed a bug in `<sl-radio>` where tabbing didn't work properly in Firefox [#596](https://github.com/shoelace-style/shoelace/issues/596)
- Fixed a bug in `<sl-input>` where clicking the left/right edge of the control wouldn't focus it
- Improved `<sl-spinner>` track color when used on various backgrounds
- Improved a11y in `<sl-radio>` so VoiceOver announces radios properly in a radio group
- Improved the API for the experimental `<sl-split-panel>` component by making `position` accept a percentage and adding the `position-in-pixels` attribute

24
src/components/input/input.styles.ts
Wyświetl plik

@ -155,20 +155,20 @@ export default css`
.input--small .input__control {
height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
margin: 0 var(--sl-input-spacing-small);
padding: 0 var(--sl-input-spacing-small);
}
.input--small .input__clear,
.input--small .input__password-toggle {
margin-right: var(--sl-input-spacing-small);
width: calc(1em + var(--sl-input-spacing-small) * 2);
}
.input--small .input__prefix ::slotted(*) {
margin-left: var(--sl-input-spacing-small);
padding-left: var(--sl-input-spacing-small);
}
.input--small .input__suffix ::slotted(*) {
margin-right: var(--sl-input-spacing-small);
padding-right: var(--sl-input-spacing-small);
}
.input--medium {
@ -179,20 +179,20 @@ export default css`
.input--medium .input__control {
height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
margin: 0 var(--sl-input-spacing-medium);
padding: 0 var(--sl-input-spacing-medium);
}
.input--medium .input__clear,
.input--medium .input__password-toggle {
margin-right: var(--sl-input-spacing-medium);
width: calc(1em + var(--sl-input-spacing-medium) * 2);
}
.input--medium .input__prefix ::slotted(*) {
margin-left: var(--sl-input-spacing-medium);
padding-left: var(--sl-input-spacing-medium);
}
.input--medium .input__suffix ::slotted(*) {
margin-right: var(--sl-input-spacing-medium);
padding-right: var(--sl-input-spacing-medium);
}
.input--large {
@ -203,20 +203,20 @@ export default css`
.input--large .input__control {
height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
margin: 0 var(--sl-input-spacing-large);
padding: 0 var(--sl-input-spacing-large);
}
.input--large .input__clear,
.input--large .input__password-toggle {
margin-right: var(--sl-input-spacing-large);
width: calc(1em + var(--sl-input-spacing-large) * 2);
}
.input--large .input__prefix ::slotted(*) {
margin-left: var(--sl-input-spacing-large);
padding-left: var(--sl-input-spacing-large);
}
.input--large .input__suffix ::slotted(*) {
margin-right: var(--sl-input-spacing-large);
padding-right: var(--sl-input-spacing-large);
}
/*