kopia lustrzana https://github.com/shoelace-style/shoelace
Fix tooltip custom properties
rodzic
c54ef43534
commit
9d194a17f4
|
@ -6,8 +6,9 @@
|
||||||
- Add `sl-format-bytes` utility component
|
- Add `sl-format-bytes` utility component
|
||||||
- Add `clearable` and `required` props to `sl-select`
|
- Add `clearable` and `required` props to `sl-select`
|
||||||
- Add `slClear` event to `sl-input`
|
- Add `slClear` event to `sl-input`
|
||||||
|
- Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
|
||||||
|
- Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
|
||||||
- Refactored `sl-dropdown` and `sl-tooltip` to use positioner elements so panels/tooltips can be customized easier
|
- Refactored `sl-dropdown` and `sl-tooltip` to use positioner elements so panels/tooltips can be customized easier
|
||||||
- Fix incorrect `aria-selected` state in `sl-menu-item`
|
|
||||||
|
|
||||||
## 2.0.0-beta.15
|
## 2.0.0-beta.15
|
||||||
|
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
.tooltip-positioner {
|
.tooltip-positioner {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: var(--sl-z-index-tooltip);
|
z-index: var(--sl-z-index-tooltip);
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tooltip {
|
.tooltip {
|
||||||
|
@ -36,11 +37,13 @@
|
||||||
line-height: var(--sl-tooltip-line-height);
|
line-height: var(--sl-tooltip-line-height);
|
||||||
color: var(--sl-tooltip-color);
|
color: var(--sl-tooltip-color);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: scale(0.9);
|
|
||||||
transform-origin: bottom;
|
|
||||||
transition: var(--sl-transition-fast) opacity, var(--sl-transition-fast) transform;
|
|
||||||
padding: var(--sl-tooltip-padding);
|
padding: var(--sl-tooltip-padding);
|
||||||
pointer-events: none;
|
transform: scale(0.8);
|
||||||
|
transform-origin: bottom;
|
||||||
|
transition-property: opacity, transform;
|
||||||
|
transition-delay: var(--hide-delay);
|
||||||
|
transition-duration: var(--hide-duration);
|
||||||
|
transition-timing-function: var(--hide-timing-function);
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
|
@ -50,9 +53,30 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.popover-visible .tooltip {
|
.tooltip-positioner {
|
||||||
|
&[data-popper-placement^='top'] .tooltip {
|
||||||
|
transform-origin: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-popper-placement^='bottom'] .tooltip {
|
||||||
|
transform-origin: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-popper-placement^='left'] .tooltip {
|
||||||
|
transform-origin: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-popper-placement^='right'] .tooltip {
|
||||||
|
transform-origin: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.popover-visible .tooltip {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
|
transition-delay: var(--show-delay);
|
||||||
|
transition-duration: var(--show-duration);
|
||||||
|
transition-timing-function: var(--show-timing-function);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Arrow + bottom
|
// Arrow + bottom
|
||||||
|
|
Ładowanie…
Reference in New Issue