@esportsplus/ui 0.25.1 → 0.25.4
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/loader/index.js +4 -7
- package/build/components/range/scss/index.scss +1 -1
- package/package.json +1 -1
- package/src/components/loader/index.ts +4 -7
- package/src/components/radio/scss/variables.scss +0 -1
- package/src/components/range/scss/index.scss +5 -1
- package/src/components/range/scss/variables.scss +21 -0
- package/vite.config.ts +3 -3
|
@@ -5,9 +5,7 @@ import template from '../../components/template/index.js';
|
|
|
5
5
|
import './scss/index.scss';
|
|
6
6
|
const OMIT = ['loader-content', 'loader-logo'];
|
|
7
7
|
export default template.factory((attributes, content) => {
|
|
8
|
-
let a = {
|
|
9
|
-
class: () => state.load && 'loader--load'
|
|
10
|
-
}, state = reactive({
|
|
8
|
+
let a = omit(attributes, OMIT), state = reactive({
|
|
11
9
|
load: false,
|
|
12
10
|
remove: false,
|
|
13
11
|
scale: false
|
|
@@ -19,7 +17,7 @@ export default template.factory((attributes, content) => {
|
|
|
19
17
|
let i = 0;
|
|
20
18
|
return html `
|
|
21
19
|
<div
|
|
22
|
-
class='loader'
|
|
20
|
+
class='loader ${() => state.load && 'loader--load'}'
|
|
23
21
|
onanimationend=${(e) => {
|
|
24
22
|
i++;
|
|
25
23
|
if (e.animationName === 'move' && i > 1) {
|
|
@@ -27,16 +25,15 @@ export default template.factory((attributes, content) => {
|
|
|
27
25
|
}
|
|
28
26
|
}}
|
|
29
27
|
${a}
|
|
30
|
-
${omit(attributes, OMIT)}
|
|
31
28
|
>
|
|
32
29
|
<div
|
|
33
|
-
class='loader'
|
|
34
|
-
${a}
|
|
30
|
+
class='loader ${() => state.load && 'loader--load'}'
|
|
35
31
|
${!content && {
|
|
36
32
|
onconnect: () => {
|
|
37
33
|
state.load = true;
|
|
38
34
|
}
|
|
39
35
|
}}
|
|
36
|
+
${a}
|
|
40
37
|
>
|
|
41
38
|
${content && html `
|
|
42
39
|
<div class='loader-content' ${attributes['loader-content']}>
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.range{--background-default:var(--color-black-300);--border-width:var(--border-width-700);--height:var(--size-200);--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100
|
|
1
|
+
@layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{margin:calc((var(--height) - var(--thumb-size))/2)0}.range,.range-tag{width:var(--width)}.range-tag{background:var(--background);height:var(--height);border:0;border-radius:240px;transition:opacity .2s}.range-tag::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range-tag::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range-tag{appearance:none;outline:none}.range-tag::-moz-range-thumb{appearance:none;outline:none}.range-tag::-webkit-slider-thumb{appearance:none;outline:none}}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -16,9 +16,7 @@ const OMIT = ['loader-content', 'loader-logo'];
|
|
|
16
16
|
|
|
17
17
|
export default template.factory(
|
|
18
18
|
(attributes: A, content) => {
|
|
19
|
-
let a =
|
|
20
|
-
class: () => state.load && 'loader--load'
|
|
21
|
-
},
|
|
19
|
+
let a = omit(attributes, OMIT),
|
|
22
20
|
state = reactive({
|
|
23
21
|
load: false,
|
|
24
22
|
remove: false,
|
|
@@ -34,7 +32,7 @@ export default template.factory(
|
|
|
34
32
|
|
|
35
33
|
return html`
|
|
36
34
|
<div
|
|
37
|
-
class='loader'
|
|
35
|
+
class='loader ${() => state.load && 'loader--load'}'
|
|
38
36
|
onanimationend=${(e: AnimationEvent) => {
|
|
39
37
|
i++;
|
|
40
38
|
|
|
@@ -43,16 +41,15 @@ export default template.factory(
|
|
|
43
41
|
}
|
|
44
42
|
}}
|
|
45
43
|
${a}
|
|
46
|
-
${omit(attributes, OMIT)}
|
|
47
44
|
>
|
|
48
45
|
<div
|
|
49
|
-
class='loader'
|
|
50
|
-
${a}
|
|
46
|
+
class='loader ${() => state.load && 'loader--load'}'
|
|
51
47
|
${!content && {
|
|
52
48
|
onconnect: () => {
|
|
53
49
|
state.load = true;
|
|
54
50
|
}
|
|
55
51
|
}}
|
|
52
|
+
${a}
|
|
56
53
|
>
|
|
57
54
|
${content && html`
|
|
58
55
|
<div class='loader-content' ${attributes['loader-content']}>
|
|
@@ -3,13 +3,17 @@
|
|
|
3
3
|
.range {
|
|
4
4
|
margin: calc((var(--height) - var(--thumb-size)) / 2) 0;
|
|
5
5
|
|
|
6
|
+
&,
|
|
7
|
+
&-tag {
|
|
8
|
+
width: var(--width);
|
|
9
|
+
}
|
|
10
|
+
|
|
6
11
|
&-tag {
|
|
7
12
|
background: var(--background);
|
|
8
13
|
border-radius: 240px;
|
|
9
14
|
border: 0px;
|
|
10
15
|
height: var(--height);
|
|
11
16
|
transition: opacity .2s;
|
|
12
|
-
width: var(--width);
|
|
13
17
|
|
|
14
18
|
&::-moz-range-thumb,
|
|
15
19
|
&::-webkit-slider-thumb {
|
|
@@ -1,8 +1,29 @@
|
|
|
1
|
+
@use '/tokens';
|
|
2
|
+
|
|
1
3
|
.range {
|
|
4
|
+
--background: var(--background-default);
|
|
5
|
+
--background-active: var(--background-default);
|
|
2
6
|
--background-default: var(--color-black-300);
|
|
7
|
+
--background-hover: var(--background-default);
|
|
8
|
+
--background-pressed: var(--background-default);
|
|
3
9
|
--border-width: var(--border-width-700);
|
|
4
10
|
--height: var(--size-200);
|
|
5
11
|
--thumb-background: var(--color-white-400);
|
|
6
12
|
--thumb-size: var(--size-400);
|
|
7
13
|
--width: 100%;
|
|
14
|
+
|
|
15
|
+
#{tokens.state(inactive, 'label')},
|
|
16
|
+
#{tokens.state(inactive)} {
|
|
17
|
+
@include tokens.state(hover) {
|
|
18
|
+
--background: var(--background-hover);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@include tokens.state(pressed) {
|
|
22
|
+
--background: var(--background-pressed);
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
#{tokens.state(active)} {
|
|
27
|
+
--background: var(--background-active);
|
|
28
|
+
}
|
|
8
29
|
}
|
package/vite.config.ts
CHANGED
|
@@ -9,8 +9,8 @@ export default defineConfig({
|
|
|
9
9
|
outDir: 'build',
|
|
10
10
|
rollupOptions: {
|
|
11
11
|
input: [
|
|
12
|
-
...glob.sync('./src/
|
|
13
|
-
...glob.sync('./src/
|
|
12
|
+
...glob.sync('./src/normalize/scss/index.scss'),
|
|
13
|
+
...glob.sync('./src/{components,css-utilities,fonts}/*/scss/index.scss')
|
|
14
14
|
],
|
|
15
15
|
output: {
|
|
16
16
|
assetFileNames: ({ originalFileNames: [filename] }) => {
|
|
@@ -38,7 +38,7 @@ export default defineConfig({
|
|
|
38
38
|
continue;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
let layer,
|
|
41
|
+
let layer: string,
|
|
42
42
|
parts = file.source.split('\n', 2);
|
|
43
43
|
|
|
44
44
|
if (filename.startsWith('css-utilities')) {
|