@esportsplus/ui 0.38.0 → 0.38.1
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/checkbox/scss/index.scss +1 -1
- package/build/components/radio/scss/index.scss +1 -1
- package/build/components/switch/scss/index.scss +1 -1
- package/package.json +2 -2
- package/src/components/checkbox/scss/variables.scss +3 -2
- package/src/components/radio/scss/variables.scss +3 -2
- package/src/components/switch/scss/variables.scss +3 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:5px;--box-shadow:1px 1px 0 #00000029;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .checkbox:before{--translateY:100%}.checkbox label:not(.--active):not(.--active):hover,.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--
|
|
1
|
+
@layer components {.checkbox{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-300);--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:45deg;--scale:var(--scale-default);--scale-active:1;--scale-default:0;--scale-hover:1.08;--scale-pressed:.98;--size:var(--size-600);--width:var(--height);--width-switch:40px}.checkbox:before{--border-width:5px;--box-shadow:1px 1px 0 #00000029;--height:110%;--translateX:108%;--translateY:8%;--width:50%}.field:not(.--active):not(:hover) .checkbox:before{--translateY:100%}.checkbox label:not(.--active):not(.--active):hover,.checkbox:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.checkbox label:not(.--active):not(.--active):active,.checkbox:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.checkbox.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.checkbox{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.checkbox:invalid,.checkbox:required{box-shadow:none}.checkbox:before{border-bottom:var(--border-width)solid var(--accent);border-right:var(--border-width)solid var(--accent);box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:bottom;width:var(--width);position:absolute;bottom:50%;right:92%}.checkbox-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.radio{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:100%;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:1;--opacity-default:.4;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7;--size:var(--size-600);--width:var(--height);--width-switch:40px}.radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--box-shadow:0 1px 0 #00000029;--translateX:50%;--translateY:50%;--width:var(--height)}.radio label:not(.--active):not(.--active):hover,.radio:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--
|
|
1
|
+
@layer components {.radio{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:100%;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--margin-horizontal:calc(var(--width-switch) - var(--width));--opacity:var(--opacity-default);--opacity-active:1;--opacity-default:.4;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--rotate:0deg;--scale:var(--scale-default);--scale-active:.9;--scale-default:0;--scale-hover:.8;--scale-pressed:.7;--size:var(--size-600);--width:var(--height);--width-switch:40px}.radio:before{--height:calc((var(--size)/2) - (var(--border-width)*2));--box-shadow:0 1px 0 #00000029;--translateX:50%;--translateY:50%;--width:var(--height)}.radio label:not(.--active):not(.--active):hover,.radio:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.radio label:not(.--active):not(.--active):active,.radio:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.radio.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.radio{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.radio:invalid,.radio:required{box-shadow:none}.radio:before{background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute;bottom:50%;right:50%}.radio-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.switch{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:240px;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width:var(--width-switch);--width-switch:40px}.switch:before{--box-shadow:0 1px 0 #00000029;--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--translateX:0px;--translateY:0px;--width:var(--height)}.field.--active .switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.switch label:not(.--active):not(.--active):hover,.switch:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.switch label:not(.--active):not(.--active):active,.switch:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.switch.--active{--opacity:var(--opacity-active);--scale:var(--scale-active)}.switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.switch:invalid,.switch:required{box-shadow:none}.switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute}.switch-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
1
|
+
@layer components {.switch{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:240px;--border-style:solid;--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--height:var(--size);--opacity:var(--opacity-default);--opacity-active:var(--opacity-default);--opacity-default:1;--opacity-hover:var(--opacity-default);--opacity-pressed:var(--opacity-default);--padding-horizontal:var(--border-width-400);--padding-vertical:var(--border-width-400);--rotate:0deg;--scale:var(--scale-default);--scale-active:var(--scale-default);--scale-default:1;--scale-hover:var(--scale-default);--scale-pressed:var(--scale-default);--size:var(--size-600);--width:var(--width-switch);--width-switch:40px}.switch:before{--box-shadow:0 1px 0 #00000029;--height:calc(var(--size) - (var(--border-width)*2) - (var(--padding-vertical)*2));--translateX:0px;--translateY:0px;--width:var(--height)}.field.--active .switch:before{--translateX:calc(var(--width-switch) - (var(--border-width)*2) - var(--height) - (var(--padding-horizontal)*2))}.switch label:not(.--active):not(.--active):hover,.switch:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover);--opacity:var(--opacity-hover);--scale:var(--scale-hover)}.switch label:not(.--active):not(.--active):active,.switch:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed);--opacity:var(--opacity-pressed);--scale:var(--scale-pressed)}.switch.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--opacity:var(--opacity-active);--scale:var(--scale-active)}.switch{background:var(--background);border-color:var(--border-color);border-radius:var(--border-radius);border-style:var(--border-style);border-width:var(--border-width);flex:0 0 var(--width);height:var(--height);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;width:var(--width);position:relative}.switch:invalid,.switch:required{box-shadow:none}.switch:before{top:var(--padding-vertical);left:var(--padding-horizontal);background:var(--accent);border-radius:inherit;box-shadow:var(--box-shadow);content:"";height:var(--height);opacity:var(--opacity);transform:translate(var(--translateX),var(--translateY))rotate(var(--rotate))scale(var(--scale));transform-origin:50%;width:var(--width);position:absolute}.switch-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|
|
12
12
|
"@esportsplus/typescript": "^0.9.2",
|
|
13
|
-
"@types/node": "^24.
|
|
13
|
+
"@types/node": "^24.7.0",
|
|
14
14
|
"autoprefixer": "^10.4.21",
|
|
15
15
|
"glob": "^11.0.3",
|
|
16
16
|
"lightningcss": "^1.30.2",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"private": false,
|
|
43
43
|
"sideEffects": false,
|
|
44
44
|
"type": "module",
|
|
45
|
-
"version": "0.38.
|
|
45
|
+
"version": "0.38.1",
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build": "run-s build:vite build:ts",
|
|
48
48
|
"build:ts": "tsc && tsc-alias",
|
|
@@ -50,7 +50,6 @@
|
|
|
50
50
|
--background: var(--background-hover);
|
|
51
51
|
--border-color: var(--border-color-hover);
|
|
52
52
|
--box-shadow: var(--box-shadow-hover);
|
|
53
|
-
--color: var(--color-hover);
|
|
54
53
|
--opacity: var(--opacity-hover);
|
|
55
54
|
--scale: var(--scale-hover);
|
|
56
55
|
}
|
|
@@ -59,13 +58,15 @@
|
|
|
59
58
|
--background: var(--background-pressed);
|
|
60
59
|
--border-color: var(--border-color-pressed);
|
|
61
60
|
--box-shadow: var(--box-shadow-pressed);
|
|
62
|
-
--color: var(--color-pressed);
|
|
63
61
|
--opacity: var(--opacity-pressed);
|
|
64
62
|
--scale: var(--scale-pressed);
|
|
65
63
|
}
|
|
66
64
|
}
|
|
67
65
|
|
|
68
66
|
#{tokens.state(active)} {
|
|
67
|
+
--background: var(--background-active);
|
|
68
|
+
--border-color: var(--border-color-active);
|
|
69
|
+
--box-shadow: var(--box-shadow-active);
|
|
69
70
|
--opacity: var(--opacity-active);
|
|
70
71
|
--scale: var(--scale-active);
|
|
71
72
|
}
|
|
@@ -44,7 +44,6 @@
|
|
|
44
44
|
--background: var(--background-hover);
|
|
45
45
|
--border-color: var(--border-color-hover);
|
|
46
46
|
--box-shadow: var(--box-shadow-hover);
|
|
47
|
-
--color: var(--color-hover);
|
|
48
47
|
--opacity: var(--opacity-hover);
|
|
49
48
|
--scale: var(--scale-hover);
|
|
50
49
|
}
|
|
@@ -53,13 +52,15 @@
|
|
|
53
52
|
--background: var(--background-pressed);
|
|
54
53
|
--border-color: var(--border-color-pressed);
|
|
55
54
|
--box-shadow: var(--box-shadow-pressed);
|
|
56
|
-
--color: var(--color-pressed);
|
|
57
55
|
--opacity: var(--opacity-pressed);
|
|
58
56
|
--scale: var(--scale-pressed);
|
|
59
57
|
}
|
|
60
58
|
}
|
|
61
59
|
|
|
62
60
|
#{tokens.state(active)} {
|
|
61
|
+
--background: var(--background-active);
|
|
62
|
+
--border-color: var(--border-color-active);
|
|
63
|
+
--box-shadow: var(--box-shadow-active);
|
|
63
64
|
--opacity: var(--opacity-active);
|
|
64
65
|
--scale: var(--scale-active);
|
|
65
66
|
}
|