@esportsplus/ui 0.44.2 → 0.45.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/build/themes/dark/index.d.ts +1 -0
- package/build/themes/dark/index.js +1 -0
- package/build/themes/dark/link.d.ts +11 -0
- package/build/themes/dark/link.js +9 -0
- package/package.json +5 -1
- package/src/components/tooltip/scss/variables.scss +1 -1
- package/src/themes/dark/index.ts +1 -0
- package/src/themes/dark/link.ts +12 -0
- package/vite.config.ts +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-
|
|
1
|
+
@layer components {.tooltip-content,.tooltip-message{--background:var(--background-default);--background-default:transparent;--border-radius:var(--border-radius-400);--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*/
|
|
@@ -2,5 +2,6 @@ export { default as alert } from './alert.js';
|
|
|
2
2
|
export { default as back } from './back.js';
|
|
3
3
|
export { default as button } from './button/index.js';
|
|
4
4
|
export { default as input } from './input.js';
|
|
5
|
+
export { default as link } from './link.js';
|
|
5
6
|
export { default as select } from './select.js';
|
|
6
7
|
export { default as textarea } from './textarea.js';
|
|
@@ -2,5 +2,6 @@ export { default as alert } from './alert.js';
|
|
|
2
2
|
export { default as back } from './back.js';
|
|
3
3
|
export { default as button } from './button/index.js';
|
|
4
4
|
export { default as input } from './input.js';
|
|
5
|
+
export { default as link } from './link.js';
|
|
5
6
|
export { default as select } from './select.js';
|
|
6
7
|
export { default as textarea } from './textarea.js';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const primary = {
|
|
2
|
+
class: 'link --color-white --flex-row --flex-vertical --text-bold',
|
|
3
|
+
style: '--color-default: var(--color-grey-500);'
|
|
4
|
+
};
|
|
5
|
+
const tooltip = {
|
|
6
|
+
class: `${primary.class} --background-black --padding-horizontal-600 --padding-vertical-500`,
|
|
7
|
+
style: `${primary.style} white-space: nowrap;`
|
|
8
|
+
};
|
|
9
|
+
export default { primary, tooltip };
|
package/package.json
CHANGED
|
@@ -34,6 +34,10 @@
|
|
|
34
34
|
"types": "./build/themes/dark/index.d.ts",
|
|
35
35
|
"default": "./build/themes/dark/index.js"
|
|
36
36
|
},
|
|
37
|
+
"./themes/light": {
|
|
38
|
+
"types": "./build/themes/light/index.d.ts",
|
|
39
|
+
"default": "./build/themes/light/index.js"
|
|
40
|
+
},
|
|
37
41
|
"./tokens.scss": "./tokens.scss",
|
|
38
42
|
"./*.scss": "./build/components/*/scss/index.scss",
|
|
39
43
|
"./*": {
|
|
@@ -49,7 +53,7 @@
|
|
|
49
53
|
"private": false,
|
|
50
54
|
"sideEffects": false,
|
|
51
55
|
"type": "module",
|
|
52
|
-
"version": "0.
|
|
56
|
+
"version": "0.45.0",
|
|
53
57
|
"scripts": {
|
|
54
58
|
"build": "run-s build:vite build:ts",
|
|
55
59
|
"build:ts": "tsc && tsc-alias",
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
&-message {
|
|
4
4
|
--background: var(--background-default);
|
|
5
5
|
--background-default: transparent;
|
|
6
|
-
--border-radius: var(--border-radius-
|
|
6
|
+
--border-radius: var(--border-radius-400);
|
|
7
7
|
--box-shadow: var(--box-shadow-400);
|
|
8
8
|
--max-width: calc(90vw - (var(--size-700) * 2));
|
|
9
9
|
--min-width: auto;
|
package/src/themes/dark/index.ts
CHANGED
|
@@ -2,5 +2,6 @@ export { default as alert } from './alert';
|
|
|
2
2
|
export { default as back } from './back';
|
|
3
3
|
export { default as button } from './button';
|
|
4
4
|
export { default as input } from './input';
|
|
5
|
+
export { default as link } from './link';
|
|
5
6
|
export { default as select } from './select';
|
|
6
7
|
export { default as textarea } from './textarea';
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const primary = {
|
|
2
|
+
class: 'link --color-white --flex-row --flex-vertical --text-bold',
|
|
3
|
+
style: '--color-default: var(--color-grey-500);'
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
const tooltip = {
|
|
7
|
+
class: `${primary.class} --background-black --padding-horizontal-600 --padding-vertical-500`,
|
|
8
|
+
style: `${primary.style} white-space: nowrap;`
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
export default { primary, tooltip };
|
package/vite.config.ts
CHANGED
|
@@ -12,7 +12,7 @@ export default defineConfig({
|
|
|
12
12
|
rollupOptions: {
|
|
13
13
|
input: [
|
|
14
14
|
...glob.sync('./src/normalize/scss/index.scss'),
|
|
15
|
-
...glob.sync('./src/{components,css-utilities,fonts,themes/dark}/*/scss/index.scss'),
|
|
15
|
+
...glob.sync('./src/{components,css-utilities,fonts,themes/dark,themes/light}/*/scss/index.scss'),
|
|
16
16
|
...glob.sync('./src/css-utilities/index.scss')
|
|
17
17
|
],
|
|
18
18
|
output: {
|