js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix range tooltip positioning

Browse Source
This commit is contained in:
lindsaym-fa
2024-07-05 17:52:05 -04:00
parent 7ae82d722d
commit 9fddb4eb01
2 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/range/range.styles.ts
View File

@@ -6,7 +6,7 @@ export default css`
--thumb-gap: calc(var(--thumb-size) * 0.125);
--thumb-shadow: initial;
--thumb-size: calc(1rem * var(--wa-form-control-value-line-height));
--tooltip-offset: var(--wa-tooltip-arrow-size);
--tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 1.375);
--track-color-active: var(--wa-color-neutral-fill-normal);
--track-color-inactive: var(--wa-color-neutral-fill-normal);
--track-active-offset: 0%;
@@ -179,8 +179,7 @@ export default css`
/* Tooltip on top */
.range--tooltip-top .range__tooltip {
/*top: calc(-1 * var(--thumb-size) - (var(--wa-tooltip-arrow-size) * 1.5) - var(--tooltip-offset));*/
top: calc(-1 * (var(--thumb-size) * 0.5) - var(--tooltip-offset));
bottom: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
}
.range--tooltip-top .range__tooltip:after {
@@ -192,7 +191,7 @@ export default css`
/* Tooltip on bottom */
.range--tooltip-bottom .range__tooltip {
bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset));
top: calc(50% + (var(--thumb-size) / 2) + var(--tooltip-offset));
}
.range--tooltip-bottom .range__tooltip:after {

2
src/components/range/range.ts
View File

@@ -44,7 +44,7 @@ import type { CSSResultGroup } from 'lit';
* @cssproperty --thumb-gap - The visual gap between the edges of the thumb and the track.
* @cssproperty --thumb-shadow - The shadow effects around the edges of the thumb.
* @cssproperty --thumb-size - The size of the thumb.
* @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the track.
* @cssproperty --tooltip-offset - The vertical distance the tooltip is offset from the thumb.
* @cssproperty --track-color-active - The color of the portion of the track that represents the current value.
* @cssproperty --track-color-inactive - The of the portion of the track that represents the remaining value.
* @cssproperty --track-height - The height of the track.