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 `clearable` and `required` props to `sl-select`
|
||||
- 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
|
||||
- Fix incorrect `aria-selected` state in `sl-menu-item`
|
||||
|
||||
## 2.0.0-beta.15
|
||||
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
.tooltip-positioner {
|
||||
position: absolute;
|
||||
z-index: var(--sl-z-index-tooltip);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
|
@ -36,11 +37,13 @@
|
|||
line-height: var(--sl-tooltip-line-height);
|
||||
color: var(--sl-tooltip-color);
|
||||
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);
|
||||
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 {
|
||||
content: '';
|
||||
|
@ -50,9 +53,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.popover-visible .tooltip {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
.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;
|
||||
transform: scale(1);
|
||||
transition-delay: var(--show-delay);
|
||||
transition-duration: var(--show-duration);
|
||||
transition-timing-function: var(--show-timing-function);
|
||||
}
|
||||
}
|
||||
|
||||
// Arrow + bottom
|
||||
|
|
Ładowanie…
Reference in New Issue