@esportsplus/ui 0.11.1 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/tooltip/scss/index.scss +1 -1
- package/package.json +1 -1
- package/src/components/scrollbar/index.ts +2 -0
- package/src/components/tooltip/scss/_center.scss +2 -2
- package/src/components/tooltip/scss/_east.scss +2 -3
- package/src/components/tooltip/scss/_north.scss +1 -2
- package/src/components/tooltip/scss/_south.scss +2 -3
- package/src/components/tooltip/scss/_west.scss +1 -2
- package/src/components/tooltip/scss/index.scss +2 -2
- package/src/components/tooltip/scss/variables.scss +5 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-300);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - (var(--size-700)*2));--min-width:auto;--
|
|
1
|
+
@layer components {.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-300);--box-shadow:var(--box-shadow-400);--max-width:calc(90vw - (var(--size-700)*2));--min-width:auto;--spacer:var(--size-300);--width:auto}.tooltip-arrow{--rotate-from:0deg;--rotate-to:90deg}.tooltip-message{--background-default:var(--color-black-400);--color:var(--color-white-400);--font-size:var(--font-size-300);--font-weight:var(--font-weight-400);--padding-horizontal:var(--size-300);--padding-vertical:var(--size-300)}.tooltip{cursor:pointer;z-index:8;position:relative}.tooltip.--active{z-index:9}.tooltip.--active.tooltip--box:before{content:"";height:calc(100% + var(--spacer)*2.5);width:calc(100% + var(--spacer)*2.5);z-index:-1;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.tooltip.--active :not(.tooltip) .tooltip-arrow,.tooltip.--active>.tooltip-arrow{transform:rotate(var(--rotate-to))}.tooltip-arrow{transform:rotate(var(--rotate-from));margin:0 -1px}.tooltip-content,.tooltip-message{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:var(--max-width);min-width:var(--min-width);opacity:0;transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);z-index:9;overflow:hidden}.tooltip.--active>.tooltip-content,.tooltip.--active :not(.tooltip)>.tooltip-content,.tooltip.--active>.tooltip-message,.tooltip.--active :not(.tooltip)>.tooltip-message{opacity:1}.tooltip:not(.--active)>.tooltip-content,.tooltip:not(.--active)>.tooltip-content *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content,.tooltip:not(.--active) :not(.tooltip)>.tooltip-content *,.tooltip:not(.--active)>.tooltip-message,.tooltip:not(.--active)>.tooltip-message *,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message,.tooltip:not(.--active) :not(.tooltip)>.tooltip-message *{pointer-events:none}.tooltip-content--c,.tooltip-message--c{transform-origin:50%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.tooltip.--active>.tooltip-content--c,.tooltip.--active :not(.tooltip)>.tooltip-content--c,.tooltip.--active>.tooltip-message--c,.tooltip.--active :not(.tooltip)>.tooltip-message--c{transform:translate(50%,50%)}.tooltip-content--en,.tooltip-content--es,.tooltip-message--en,.tooltip-message--es{left:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--en,.tooltip.--active :not(.tooltip)>.tooltip-content--en,.tooltip.--active>.tooltip-content--es,.tooltip.--active :not(.tooltip)>.tooltip-content--es,.tooltip.--active>.tooltip-message--en,.tooltip.--active :not(.tooltip)>.tooltip-message--en,.tooltip.--active>.tooltip-message--es,.tooltip.--active :not(.tooltip)>.tooltip-message--es{transform:translateX(calc(var(--spacer)*2))}.tooltip-content--e,.tooltip-message--e{bottom:50%;left:calc(100% - var(--spacer));transform-origin:0;position:absolute;transform:translateY(50%)}.tooltip.--active>.tooltip-content--e,.tooltip.--active :not(.tooltip)>.tooltip-content--e,.tooltip.--active>.tooltip-message--e,.tooltip.--active :not(.tooltip)>.tooltip-message--e{transform:translate(calc(var(--spacer)*2),50%)}.tooltip-content--en,.tooltip-message--en{transform-origin:0 0;top:0}.tooltip-content--es,.tooltip-message--es{transform-origin:0 100%;bottom:0}.tooltip-content--ne,.tooltip-content--nw,.tooltip-message--ne,.tooltip-message--nw{bottom:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--ne,.tooltip.--active :not(.tooltip)>.tooltip-content--ne,.tooltip.--active>.tooltip-content--nw,.tooltip.--active :not(.tooltip)>.tooltip-content--nw,.tooltip.--active>.tooltip-message--ne,.tooltip.--active :not(.tooltip)>.tooltip-message--ne,.tooltip.--active>.tooltip-message--nw,.tooltip.--active :not(.tooltip)>.tooltip-message--nw{transform:translateY(calc(var(--spacer)*-2))}.tooltip-content--n,.tooltip-message--n{bottom:calc(100% - var(--spacer));transform-origin:bottom;position:absolute;right:50%;transform:translate(50%)}.tooltip.--active>.tooltip-content--n,.tooltip.--active :not(.tooltip)>.tooltip-content--n,.tooltip.--active>.tooltip-message--n,.tooltip.--active :not(.tooltip)>.tooltip-message--n{transform:translate(50%,calc(var(--spacer)*-2))scale(1)}.tooltip-content--ne,.tooltip-message--ne{transform-origin:100% 100%;right:0}.tooltip-content--nw,.tooltip-message--nw{transform-origin:0 100%;left:0}.tooltip-content--se,.tooltip-content--sw,.tooltip-message--se,.tooltip-message--sw{top:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--se,.tooltip.--active :not(.tooltip)>.tooltip-content--se,.tooltip.--active>.tooltip-content--sw,.tooltip.--active :not(.tooltip)>.tooltip-content--sw,.tooltip.--active>.tooltip-message--se,.tooltip.--active :not(.tooltip)>.tooltip-message--se,.tooltip.--active>.tooltip-message--sw,.tooltip.--active :not(.tooltip)>.tooltip-message--sw{transform:translateY(calc(var(--spacer)*2))}.tooltip-content--s,.tooltip-message--s{right:50%;top:calc(100% - var(--spacer));transform-origin:top;position:absolute;transform:translate(50%)}.tooltip.--active>.tooltip-content--s,.tooltip.--active :not(.tooltip)>.tooltip-content--s,.tooltip.--active>.tooltip-message--s,.tooltip.--active :not(.tooltip)>.tooltip-message--s{transform:translate(50%,calc(var(--spacer)*2))}.tooltip-content--se,.tooltip-message--se{transform-origin:100% 0;right:0}.tooltip-content--sw,.tooltip-message--sw{transform-origin:0 0;left:0}.tooltip-content--wn,.tooltip-content--ws,.tooltip-message--wn,.tooltip-message--ws{right:calc(100% - var(--spacer));position:absolute}.tooltip.--active>.tooltip-content--wn,.tooltip.--active :not(.tooltip)>.tooltip-content--wn,.tooltip.--active>.tooltip-content--ws,.tooltip.--active :not(.tooltip)>.tooltip-content--ws,.tooltip.--active>.tooltip-message--wn,.tooltip.--active :not(.tooltip)>.tooltip-message--wn,.tooltip.--active>.tooltip-message--ws,.tooltip.--active :not(.tooltip)>.tooltip-message--ws{transform:translateX(calc(var(--spacer)*-2))}.tooltip-content--w,.tooltip-message--w{bottom:50%;right:calc(100% - var(--spacer));transform-origin:100%;position:absolute;transform:translateY(50%)}.tooltip.--active>.tooltip-content--w,.tooltip.--active :not(.tooltip)>.tooltip-content--w,.tooltip.--active>.tooltip-message--w,.tooltip.--active :not(.tooltip)>.tooltip-message--w{transform:translate(calc(var(--spacer)*-2),50%)scale(1)}.tooltip-content--wn,.tooltip-message--wn{transform-origin:100% 0;top:0}.tooltip-content--ws,.tooltip-message--ws{transform-origin:100% 100%;bottom:0}.tooltip-message{background:var(--background);color:var(--color);cursor:auto;font-size:var(--font-size);font-weight:var(--font-weight);padding:var(--padding-vertical)var(--padding-horizontal);pointer-events:none;white-space:nowrap;line-height:normal}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -7,6 +7,8 @@ let root = document.body,
|
|
|
7
7
|
width: number | undefined;
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
// Convert to wrapper object/container instead of manually placing attributes and html
|
|
11
|
+
// Look into scrollbar customization options
|
|
10
12
|
export default ({ attributes, fixed }: { attributes?: Record<string, unknown>, fixed?: boolean } = {}) => {
|
|
11
13
|
let state = reactive({
|
|
12
14
|
height: 100,
|
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
bottom: 50%;
|
|
4
4
|
position: absolute;
|
|
5
5
|
right: 50%;
|
|
6
|
-
transform: translate(50%, 50%)
|
|
6
|
+
transform: translate(50%, 50%);
|
|
7
7
|
transform-origin: center center;
|
|
8
8
|
|
|
9
9
|
#{$active} {
|
|
10
|
-
transform: translate(50%, 50%)
|
|
10
|
+
transform: translate(50%, 50%);
|
|
11
11
|
}
|
|
12
12
|
}
|
|
13
13
|
}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
&--es {
|
|
4
4
|
left: calc(100% - var(--spacer));
|
|
5
5
|
position: absolute;
|
|
6
|
-
transform: scale(var(--scaleX), var(--scaleY));
|
|
7
6
|
|
|
8
7
|
#{$active} {
|
|
9
8
|
transform: translateX(calc(var(--spacer) * 2));
|
|
@@ -14,11 +13,11 @@
|
|
|
14
13
|
bottom: 50%;
|
|
15
14
|
left: calc(100% - var(--spacer));
|
|
16
15
|
position: absolute;
|
|
17
|
-
transform: translateY(50%)
|
|
16
|
+
transform: translateY(50%);
|
|
18
17
|
transform-origin: center left;
|
|
19
18
|
|
|
20
19
|
#{$active} {
|
|
21
|
-
transform: translate(calc(var(--spacer) * 2), 50%)
|
|
20
|
+
transform: translate(calc(var(--spacer) * 2), 50%);
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
&--nw {
|
|
4
4
|
bottom: calc(100% - var(--spacer));
|
|
5
5
|
position: absolute;
|
|
6
|
-
transform: scale(var(--scaleX), var(--scaleY));
|
|
7
6
|
|
|
8
7
|
#{$active} {
|
|
9
8
|
transform: translateY(calc(var(--spacer) * -2));
|
|
@@ -14,7 +13,7 @@
|
|
|
14
13
|
bottom: calc(100% - var(--spacer));
|
|
15
14
|
position: absolute;
|
|
16
15
|
right: 50%;
|
|
17
|
-
transform: translateX(50%)
|
|
16
|
+
transform: translateX(50%);
|
|
18
17
|
transform-origin: center bottom;
|
|
19
18
|
|
|
20
19
|
#{$active} {
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
&--sw {
|
|
4
4
|
position: absolute;
|
|
5
5
|
top: calc(100% - var(--spacer));
|
|
6
|
-
transform: scale(var(--scaleX), var(--scaleY));
|
|
7
6
|
|
|
8
7
|
#{$active} {
|
|
9
8
|
transform: translateY(calc(var(--spacer) * 2));
|
|
@@ -14,11 +13,11 @@
|
|
|
14
13
|
position: absolute;
|
|
15
14
|
right: 50%;
|
|
16
15
|
top: calc(100% - var(--spacer));
|
|
17
|
-
transform: translateX(50%)
|
|
16
|
+
transform: translateX(50%);
|
|
18
17
|
transform-origin: center top;
|
|
19
18
|
|
|
20
19
|
#{$active} {
|
|
21
|
-
transform: translate(50%, calc(var(--spacer) * 2))
|
|
20
|
+
transform: translate(50%, calc(var(--spacer) * 2));
|
|
22
21
|
}
|
|
23
22
|
}
|
|
24
23
|
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
&--ws {
|
|
4
4
|
position: absolute;
|
|
5
5
|
right: calc(100% - var(--spacer));
|
|
6
|
-
transform: scale(var(--scale));
|
|
7
6
|
|
|
8
7
|
#{$active} {
|
|
9
8
|
transform: translateX(calc(var(--spacer) * -2));
|
|
@@ -14,7 +13,7 @@
|
|
|
14
13
|
bottom: 50%;
|
|
15
14
|
position: absolute;
|
|
16
15
|
right: calc(100% - var(--spacer));
|
|
17
|
-
transform: translateY(50%)
|
|
16
|
+
transform: translateY(50%);
|
|
18
17
|
transform-origin: center right;
|
|
19
18
|
|
|
20
19
|
#{$active} {
|
|
@@ -31,14 +31,14 @@
|
|
|
31
31
|
// Rotate arrow only if parent tooltip is active
|
|
32
32
|
:not(.tooltip) .tooltip-arrow,
|
|
33
33
|
> .tooltip-arrow {
|
|
34
|
-
transform: rotate(-
|
|
34
|
+
transform: rotate(var(--rotate-to));
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
|
|
39
39
|
&-arrow {
|
|
40
40
|
margin: 0 -1px;
|
|
41
|
-
transform: rotate(
|
|
41
|
+
transform: rotate(var(--rotate-from));
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
|
|
@@ -7,12 +7,15 @@
|
|
|
7
7
|
--box-shadow: var(--box-shadow-400);
|
|
8
8
|
--max-width: calc(90vw - (var(--size-700) * 2));
|
|
9
9
|
--min-width: auto;
|
|
10
|
-
--scaleX: 0.64;
|
|
11
|
-
--scaleY: 0.64;
|
|
12
10
|
--spacer: var(--size-300);
|
|
13
11
|
--width: auto;
|
|
14
12
|
}
|
|
15
13
|
|
|
14
|
+
&-arrow {
|
|
15
|
+
--rotate-from: 0deg;
|
|
16
|
+
--rotate-to: 90deg;
|
|
17
|
+
}
|
|
18
|
+
|
|
16
19
|
&-message {
|
|
17
20
|
--background-default: var(--color-black-400);
|
|
18
21
|
--color: var(--color-white-400);
|