@esportsplus/ui 0.13.8 → 0.13.10
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-height:calc(100svh - (var(--margin-vertical)*2));--max-width:320px;max-height:var(--max-height);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%;width:min(var(--max-width),100svw - var(--margin-horizontal)*2);z-index:2;position:fixed;bottom:50%;right:50%;overflow:hidden;transform:translate(50%,50%)}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%,50%)scale(.8)}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%}.modal-frame:not(.--active){display:none}}
|
|
1
|
+
@layer components {.modal{--margin-horizontal:0px;--margin-vertical:0px;--max-height:calc(100svh - (var(--margin-vertical)*2));--max-width:320px;height:auto;max-height:var(--max-height);transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%;width:min(var(--max-width),100svw - var(--margin-horizontal)*2);z-index:2;position:fixed;bottom:50%;right:50%;overflow:hidden;transform:translate(50%,50%)}.modal:not(.--active){opacity:0;pointer-events:none;transform:translate(50%,50%)scale(.8)}.modal:not(.--active) input[type=password]{display:none}.modal-frame{transition:opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;transform-origin:50%}.modal-frame:not(.--active){display:none}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -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;--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:
|
|
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:0;position:relative}.tooltip.--active.tooltip--box:before{content:"";height:calc(100% + var(--spacer)*3);width:calc(100% + var(--spacer)*3);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.--active,.tooltip:not(.--active):hover{z-index:9}.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
|
@@ -10,14 +10,12 @@
|
|
|
10
10
|
.tooltip {
|
|
11
11
|
cursor: pointer;
|
|
12
12
|
position: relative;
|
|
13
|
-
z-index:
|
|
13
|
+
z-index: 0;
|
|
14
14
|
|
|
15
15
|
@include tokens.state(active) {
|
|
16
|
-
z-index: 9;
|
|
17
|
-
|
|
18
16
|
// Add invisible box to increase activation/hover area
|
|
19
17
|
&.tooltip--box {
|
|
20
|
-
$size: calc(100% + var(--spacer) *
|
|
18
|
+
$size: calc(100% + var(--spacer) * 3);
|
|
21
19
|
|
|
22
20
|
&::before {
|
|
23
21
|
@include lib.position(absolute, center);
|
|
@@ -35,6 +33,10 @@
|
|
|
35
33
|
}
|
|
36
34
|
}
|
|
37
35
|
|
|
36
|
+
@include tokens.state(active hover) {
|
|
37
|
+
z-index: 9;
|
|
38
|
+
}
|
|
39
|
+
|
|
38
40
|
|
|
39
41
|
&-arrow {
|
|
40
42
|
margin: 0 -1px;
|