kopia lustrzana https://github.com/shoelace-style/shoelace
remove --focus-ring
rodzic
719d62b670
commit
f4c472e7de
|
@ -186,8 +186,8 @@ The `invalid` attribute reflects the form control's validity, so you can style i
|
|||
border-color: rgb(var(--sl-color-danger-500));
|
||||
}
|
||||
|
||||
.custom-input[invalid] {
|
||||
--focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
|
||||
.custom-input[invalid]:focus-within::part(base) {
|
||||
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
|
@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
- 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
|
||||
- 🚨 BREAKING: removed the `no-fieldset` property from `sl-radio-group` (fieldsets are now hidden by default; use `fieldset` to show them)
|
||||
- 🚨 BREAKING: removed `--focus-ring` custom property from `sl-input`, `sl-select`, `sl-tab` for consistency with other form controls
|
||||
- Added `--swatch-size` custom property to `sl-color-picker`
|
||||
- Added `date` to `sl-input` as a supported `type`
|
||||
- Added the `--sl-focus-ring` design token for a more convenient way to apply focus ring styles
|
||||
|
|
|
@ -7,7 +7,6 @@ export default css`
|
|||
${formControlStyles}
|
||||
|
||||
:host {
|
||||
--focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
@ -41,7 +40,7 @@ export default css`
|
|||
.input.input--focused:not(.input--disabled) {
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
box-shadow: var(--focus-ring);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
}
|
||||
|
||||
.input.input--focused:not(.input--disabled) .input__control {
|
||||
|
|
|
@ -42,8 +42,6 @@ let id = 0;
|
|||
* @csspart password-toggle-button - The password toggle button.
|
||||
* @csspart suffix - The input suffix container.
|
||||
* @csspart help-text - The input help text.
|
||||
*
|
||||
* @cssproperty --focus-ring - The focus ring style to use when the control receives focus, a `box-shadow` property.
|
||||
*/
|
||||
@customElement('sl-input')
|
||||
export default class SlInput extends LitElement {
|
||||
|
|
|
@ -7,8 +7,6 @@ export default css`
|
|||
${formControlStyles}
|
||||
|
||||
:host {
|
||||
--focus-ring: var(--sl-focus-ring);
|
||||
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
@ -42,7 +40,7 @@ export default css`
|
|||
.select.select--focused:not(.select--disabled) .select__box {
|
||||
background-color: rgb(var(--sl-input-background-color-focus));
|
||||
border-color: rgb(var(--sl-input-border-color-focus));
|
||||
box-shadow: var(--focus-ring);
|
||||
box-shadow: var(--sl-focus-ring);
|
||||
outline: none;
|
||||
color: rgb(var(--sl-input-color-focus));
|
||||
}
|
||||
|
|
|
@ -53,8 +53,6 @@ let id = 0;
|
|||
* @csspart menu - The select menu, a <sl-menu> element.
|
||||
* @csspart tag - The multiselect option, a <sl-tag> element.
|
||||
* @csspart tags - The container in which multiselect options are rendered.
|
||||
*
|
||||
* @cssproperty --focus-ring - The focus ring style to use when the control receives focus, a `box-shadow` property.
|
||||
*/
|
||||
@customElement('sl-select')
|
||||
export default class SlSelect extends LitElement {
|
||||
|
|
|
@ -20,8 +20,6 @@ let id = 0;
|
|||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart close-button - The close button, which is the icon button's base wrapper.
|
||||
*
|
||||
* @cssproperty --focus-ring - The focus ring's box shadow.
|
||||
*/
|
||||
@customElement('sl-tab')
|
||||
export default class SlTab extends LitElement {
|
||||
|
|
Ładowanie…
Reference in New Issue