lupine.components 1.0.0 → 1.0.2
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/README.md +1 -1
- package/package.json +2 -2
- package/src/components/button-push-animation.tsx +138 -138
- package/src/components/button.tsx +55 -55
- package/src/components/toggle-base.tsx +260 -260
- package/src/styles/dark-themes.ts +1 -1
- package/src/styles/shared-themes.ts +15 -11
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "lupine.components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "uuware.com",
|
|
6
6
|
"homepage": "https://uuware.com/",
|
|
7
|
-
"description": "lupine.components is a
|
|
7
|
+
"description": "lupine.components is a components collection for lupine.web.",
|
|
8
8
|
"main": "src/index.ts",
|
|
9
9
|
"source": "src/index.ts",
|
|
10
10
|
"types": "src/index.ts",
|
|
@@ -1,138 +1,138 @@
|
|
|
1
|
-
import { CssProps, RefProps } from 'lupine.web';
|
|
2
|
-
|
|
3
|
-
export enum ButtonPushAnimationSize {
|
|
4
|
-
SmallSmall = 'button-ss',
|
|
5
|
-
Small = 'button-s',
|
|
6
|
-
Medium = 'button-m',
|
|
7
|
-
Large = 'button-l',
|
|
8
|
-
LargeLarge = 'button-ll',
|
|
9
|
-
}
|
|
10
|
-
export type ButtonPushAnimationHookProps = {
|
|
11
|
-
setEnabled?: (enabled: boolean) => void;
|
|
12
|
-
getEnabled?: () => boolean;
|
|
13
|
-
};
|
|
14
|
-
export type ButtonPushAnimationProps = {
|
|
15
|
-
text: string;
|
|
16
|
-
size: ButtonPushAnimationSize;
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
onClick?: () => void;
|
|
19
|
-
hook?: ButtonPushAnimationHookProps;
|
|
20
|
-
class?: string;
|
|
21
|
-
css?: CssProps;
|
|
22
|
-
};
|
|
23
|
-
export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
|
|
24
|
-
let disabled = props.disabled || false;
|
|
25
|
-
const onClick = () => {
|
|
26
|
-
if (disabled) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
if (props.onClick) {
|
|
30
|
-
props.onClick();
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
if (props.hook) {
|
|
34
|
-
props.hook.setEnabled = (enabled: boolean) => {
|
|
35
|
-
disabled = !enabled;
|
|
36
|
-
ref.current.disabled = disabled;
|
|
37
|
-
};
|
|
38
|
-
props.hook.getEnabled = () => {
|
|
39
|
-
return !disabled;
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const ref: RefProps = {};
|
|
44
|
-
const css: CssProps = {
|
|
45
|
-
all: 'unset',
|
|
46
|
-
cursor: 'pointer',
|
|
47
|
-
'-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
|
|
48
|
-
position: 'relative',
|
|
49
|
-
borderRadius: 'var(--border-radius-m)',
|
|
50
|
-
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
|
51
|
-
boxShadow: '-0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1)',
|
|
52
|
-
'.button-outer': {
|
|
53
|
-
position: 'relative',
|
|
54
|
-
zIndex: 1,
|
|
55
|
-
borderRadius: 'inherit',
|
|
56
|
-
transition: 'box-shadow 300ms ease',
|
|
57
|
-
willChange: 'box-shadow',
|
|
58
|
-
boxShadow: '0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25)',
|
|
59
|
-
},
|
|
60
|
-
'.button-inner': {
|
|
61
|
-
position: 'relative',
|
|
62
|
-
zIndex: 2,
|
|
63
|
-
borderRadius: 'inherit',
|
|
64
|
-
padding: 'var(--button-padding)',
|
|
65
|
-
background: 'linear-gradient(135deg, #ffffff, #eeeeee)',
|
|
66
|
-
transition: 'box-shadow 300ms ease, background-image 250ms ease, transform 250ms ease;',
|
|
67
|
-
willChange: 'box-shadow, background-image, transform',
|
|
68
|
-
overflow: 'clip',
|
|
69
|
-
// clipPath: 'inset(0 0 0 0 round 999vw)',
|
|
70
|
-
boxShadow: '0 0 0 0 inset rgba(5, 5, 5, 0.1), -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), 0 0 0 0 inset rgba(5, 5, 5, 0.1), 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25)',
|
|
71
|
-
},
|
|
72
|
-
'.button-inner span': {
|
|
73
|
-
position: 'relative',
|
|
74
|
-
zIndex: 4,
|
|
75
|
-
// fontFamily: 'Inter, sans-serif',
|
|
76
|
-
letterSpacing: '-0.05em',
|
|
77
|
-
// fontWeight: 500,
|
|
78
|
-
color: 'rgba(0, 0, 0, 0);',
|
|
79
|
-
backgroundImage: 'linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1))',
|
|
80
|
-
backgroundClip: 'text',
|
|
81
|
-
transition: 'transform 250ms ease',
|
|
82
|
-
display: 'block',
|
|
83
|
-
willChange: 'transform',
|
|
84
|
-
textShadow: 'rgba(0, 0, 0, 0.1) 0 0 0.1em',
|
|
85
|
-
userSelect: 'none',
|
|
86
|
-
},
|
|
87
|
-
'&.button-ss': {
|
|
88
|
-
borderRadius: '2px',
|
|
89
|
-
},
|
|
90
|
-
'&.button-s': {
|
|
91
|
-
borderRadius: '3px',
|
|
92
|
-
},
|
|
93
|
-
'&.button-l': {
|
|
94
|
-
borderRadius: '6px',
|
|
95
|
-
},
|
|
96
|
-
'&.button-ll': {
|
|
97
|
-
borderRadius: '10px',
|
|
98
|
-
},
|
|
99
|
-
'&.button-ss .button-inner': {
|
|
100
|
-
padding: '0.1rem 0.3rem',
|
|
101
|
-
fontSize: '0.65rem',
|
|
102
|
-
},
|
|
103
|
-
'&.button-s .button-inner': {
|
|
104
|
-
padding: '0.2rem 0.5rem',
|
|
105
|
-
fontSize: '0.85rem',
|
|
106
|
-
},
|
|
107
|
-
'&.button-l .button-inner': {
|
|
108
|
-
padding: '0.4rem 1.2rem',
|
|
109
|
-
fontSize: '1.5rem',
|
|
110
|
-
},
|
|
111
|
-
'&.button-ll .button-inner': {
|
|
112
|
-
padding: '0.5rem 1.5rem',
|
|
113
|
-
fontSize: '2rem',
|
|
114
|
-
},
|
|
115
|
-
'&:active .button-outer': {
|
|
116
|
-
boxShadow: '0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25)',
|
|
117
|
-
},
|
|
118
|
-
'&:active .button-inner': {
|
|
119
|
-
boxShadow: '0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), 0 0 0 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)',
|
|
120
|
-
},
|
|
121
|
-
'&:hover .button-inner': {
|
|
122
|
-
transform: 'scale(0.99)',
|
|
123
|
-
},
|
|
124
|
-
'&:hover .button-inner span': {
|
|
125
|
-
transform: 'scale(0.975)',
|
|
126
|
-
},
|
|
127
|
-
...props.css,
|
|
128
|
-
};
|
|
129
|
-
return (
|
|
130
|
-
<button ref={ref} css={css} class={['button-push-animation', props.size, props.class].join(' ')} disabled={disabled} onClick={onClick}>
|
|
131
|
-
<div class="button-outer">
|
|
132
|
-
<div class="button-inner">
|
|
133
|
-
<span>{props.text}</span>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
</button>
|
|
137
|
-
);
|
|
138
|
-
};
|
|
1
|
+
import { CssProps, RefProps } from 'lupine.web';
|
|
2
|
+
|
|
3
|
+
export enum ButtonPushAnimationSize {
|
|
4
|
+
SmallSmall = 'button-ss',
|
|
5
|
+
Small = 'button-s',
|
|
6
|
+
Medium = 'button-m',
|
|
7
|
+
Large = 'button-l',
|
|
8
|
+
LargeLarge = 'button-ll',
|
|
9
|
+
}
|
|
10
|
+
export type ButtonPushAnimationHookProps = {
|
|
11
|
+
setEnabled?: (enabled: boolean) => void;
|
|
12
|
+
getEnabled?: () => boolean;
|
|
13
|
+
};
|
|
14
|
+
export type ButtonPushAnimationProps = {
|
|
15
|
+
text: string;
|
|
16
|
+
size: ButtonPushAnimationSize;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
onClick?: () => void;
|
|
19
|
+
hook?: ButtonPushAnimationHookProps;
|
|
20
|
+
class?: string;
|
|
21
|
+
css?: CssProps;
|
|
22
|
+
};
|
|
23
|
+
export const ButtonPushAnimation = (props: ButtonPushAnimationProps) => {
|
|
24
|
+
let disabled = props.disabled || false;
|
|
25
|
+
const onClick = () => {
|
|
26
|
+
if (disabled) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (props.onClick) {
|
|
30
|
+
props.onClick();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
if (props.hook) {
|
|
34
|
+
props.hook.setEnabled = (enabled: boolean) => {
|
|
35
|
+
disabled = !enabled;
|
|
36
|
+
ref.current.disabled = disabled;
|
|
37
|
+
};
|
|
38
|
+
props.hook.getEnabled = () => {
|
|
39
|
+
return !disabled;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const ref: RefProps = {};
|
|
44
|
+
const css: CssProps = {
|
|
45
|
+
all: 'unset',
|
|
46
|
+
cursor: 'pointer',
|
|
47
|
+
'-webkit-tap-highlight-color': 'rgba(0, 0, 0, 0)',
|
|
48
|
+
position: 'relative',
|
|
49
|
+
borderRadius: 'var(--border-radius-m)',
|
|
50
|
+
backgroundColor: 'rgba(0, 0, 0, 0.75)',
|
|
51
|
+
boxShadow: '-0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25), 0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1)',
|
|
52
|
+
'.button-outer': {
|
|
53
|
+
position: 'relative',
|
|
54
|
+
zIndex: 1,
|
|
55
|
+
borderRadius: 'inherit',
|
|
56
|
+
transition: 'box-shadow 300ms ease',
|
|
57
|
+
willChange: 'box-shadow',
|
|
58
|
+
boxShadow: '0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1), 0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5), 0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25)',
|
|
59
|
+
},
|
|
60
|
+
'.button-inner': {
|
|
61
|
+
position: 'relative',
|
|
62
|
+
zIndex: 2,
|
|
63
|
+
borderRadius: 'inherit',
|
|
64
|
+
padding: 'var(--button-padding)',
|
|
65
|
+
background: 'linear-gradient(135deg, #ffffff, #eeeeee)',
|
|
66
|
+
transition: 'box-shadow 300ms ease, background-image 250ms ease, transform 250ms ease;',
|
|
67
|
+
willChange: 'box-shadow, background-image, transform',
|
|
68
|
+
overflow: 'clip',
|
|
69
|
+
// clipPath: 'inset(0 0 0 0 round 999vw)',
|
|
70
|
+
boxShadow: '0 0 0 0 inset rgba(5, 5, 5, 0.1), -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25), 0 0 0 0 inset rgba(5, 5, 5, 0.1), 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25), 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25)',
|
|
71
|
+
},
|
|
72
|
+
'.button-inner span': {
|
|
73
|
+
position: 'relative',
|
|
74
|
+
zIndex: 4,
|
|
75
|
+
// fontFamily: 'Inter, sans-serif',
|
|
76
|
+
letterSpacing: '-0.05em',
|
|
77
|
+
// fontWeight: 500,
|
|
78
|
+
color: 'rgba(0, 0, 0, 0);',
|
|
79
|
+
backgroundImage: 'linear-gradient(135deg, rgba(25, 25, 25, 1), rgba(75, 75, 75, 1))',
|
|
80
|
+
backgroundClip: 'text',
|
|
81
|
+
transition: 'transform 250ms ease',
|
|
82
|
+
display: 'block',
|
|
83
|
+
willChange: 'transform',
|
|
84
|
+
textShadow: 'rgba(0, 0, 0, 0.1) 0 0 0.1em',
|
|
85
|
+
userSelect: 'none',
|
|
86
|
+
},
|
|
87
|
+
'&.button-ss': {
|
|
88
|
+
borderRadius: '2px',
|
|
89
|
+
},
|
|
90
|
+
'&.button-s': {
|
|
91
|
+
borderRadius: '3px',
|
|
92
|
+
},
|
|
93
|
+
'&.button-l': {
|
|
94
|
+
borderRadius: '6px',
|
|
95
|
+
},
|
|
96
|
+
'&.button-ll': {
|
|
97
|
+
borderRadius: '10px',
|
|
98
|
+
},
|
|
99
|
+
'&.button-ss .button-inner': {
|
|
100
|
+
padding: '0.1rem 0.3rem',
|
|
101
|
+
fontSize: '0.65rem',
|
|
102
|
+
},
|
|
103
|
+
'&.button-s .button-inner': {
|
|
104
|
+
padding: '0.2rem 0.5rem',
|
|
105
|
+
fontSize: '0.85rem',
|
|
106
|
+
},
|
|
107
|
+
'&.button-l .button-inner': {
|
|
108
|
+
padding: '0.4rem 1.2rem',
|
|
109
|
+
fontSize: '1.5rem',
|
|
110
|
+
},
|
|
111
|
+
'&.button-ll .button-inner': {
|
|
112
|
+
padding: '0.5rem 1.5rem',
|
|
113
|
+
fontSize: '2rem',
|
|
114
|
+
},
|
|
115
|
+
'&:active .button-outer': {
|
|
116
|
+
boxShadow: '0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5), 0 0 0 0 rgba(5, 5, 5, 0.25)',
|
|
117
|
+
},
|
|
118
|
+
'&:active .button-inner': {
|
|
119
|
+
boxShadow: '0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75), -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5), 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5), 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15), 0 0 0 0 inset rgba(255, 255, 255, 1), 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25), -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)',
|
|
120
|
+
},
|
|
121
|
+
'&:hover .button-inner': {
|
|
122
|
+
transform: 'scale(0.99)',
|
|
123
|
+
},
|
|
124
|
+
'&:hover .button-inner span': {
|
|
125
|
+
transform: 'scale(0.975)',
|
|
126
|
+
},
|
|
127
|
+
...props.css,
|
|
128
|
+
};
|
|
129
|
+
return (
|
|
130
|
+
<button ref={ref} css={css} class={['button-push-animation', props.size, props.class].join(' ')} disabled={disabled} onClick={onClick}>
|
|
131
|
+
<div class="button-outer">
|
|
132
|
+
<div class="button-inner">
|
|
133
|
+
<span>{props.text}</span>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</button>
|
|
137
|
+
);
|
|
138
|
+
};
|
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
import { CssProps, RefProps } from 'lupine.web';
|
|
2
|
-
|
|
3
|
-
export enum ButtonSize {
|
|
4
|
-
SmallLarge = 'button-ss',
|
|
5
|
-
Small = 'button-s',
|
|
6
|
-
Medium = 'button-m',
|
|
7
|
-
Large = 'button-l',
|
|
8
|
-
LargeLarge = 'button-ll',
|
|
9
|
-
}
|
|
10
|
-
export type ButtonHookProps = {
|
|
11
|
-
setEnabled?: (enabled: boolean) => void;
|
|
12
|
-
getEnabled?: () => boolean;
|
|
13
|
-
};
|
|
14
|
-
export type ButtonProps = {
|
|
15
|
-
text: string;
|
|
16
|
-
size: ButtonSize;
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
onClick?: () => void;
|
|
19
|
-
hook?: ButtonHookProps;
|
|
20
|
-
class?: string;
|
|
21
|
-
css?: CssProps;
|
|
22
|
-
};
|
|
23
|
-
export const Button = (props: ButtonProps) => {
|
|
24
|
-
let disabled = props.disabled || false;
|
|
25
|
-
const onClick = () => {
|
|
26
|
-
if (disabled) {
|
|
27
|
-
return;
|
|
28
|
-
}
|
|
29
|
-
if (props.onClick) {
|
|
30
|
-
props.onClick();
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
if (props.hook) {
|
|
34
|
-
props.hook.setEnabled = (enabled: boolean) => {
|
|
35
|
-
disabled = !enabled;
|
|
36
|
-
ref.current.disabled = disabled;
|
|
37
|
-
};
|
|
38
|
-
props.hook.getEnabled = () => {
|
|
39
|
-
return !disabled;
|
|
40
|
-
};
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
const ref: RefProps = {};
|
|
44
|
-
return (
|
|
45
|
-
<button
|
|
46
|
-
ref={ref}
|
|
47
|
-
class={['button-base', props.size, props.class].join(' ')}
|
|
48
|
-
css={props.css}
|
|
49
|
-
disabled={disabled}
|
|
50
|
-
onClick={onClick}
|
|
51
|
-
>
|
|
52
|
-
{props.text}
|
|
53
|
-
</button>
|
|
54
|
-
);
|
|
55
|
-
};
|
|
1
|
+
import { CssProps, RefProps } from 'lupine.web';
|
|
2
|
+
|
|
3
|
+
export enum ButtonSize {
|
|
4
|
+
SmallLarge = 'button-ss',
|
|
5
|
+
Small = 'button-s',
|
|
6
|
+
Medium = 'button-m',
|
|
7
|
+
Large = 'button-l',
|
|
8
|
+
LargeLarge = 'button-ll',
|
|
9
|
+
}
|
|
10
|
+
export type ButtonHookProps = {
|
|
11
|
+
setEnabled?: (enabled: boolean) => void;
|
|
12
|
+
getEnabled?: () => boolean;
|
|
13
|
+
};
|
|
14
|
+
export type ButtonProps = {
|
|
15
|
+
text: string;
|
|
16
|
+
size: ButtonSize;
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
onClick?: () => void;
|
|
19
|
+
hook?: ButtonHookProps;
|
|
20
|
+
class?: string;
|
|
21
|
+
css?: CssProps;
|
|
22
|
+
};
|
|
23
|
+
export const Button = (props: ButtonProps) => {
|
|
24
|
+
let disabled = props.disabled || false;
|
|
25
|
+
const onClick = () => {
|
|
26
|
+
if (disabled) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
if (props.onClick) {
|
|
30
|
+
props.onClick();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
if (props.hook) {
|
|
34
|
+
props.hook.setEnabled = (enabled: boolean) => {
|
|
35
|
+
disabled = !enabled;
|
|
36
|
+
ref.current.disabled = disabled;
|
|
37
|
+
};
|
|
38
|
+
props.hook.getEnabled = () => {
|
|
39
|
+
return !disabled;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
const ref: RefProps = {};
|
|
44
|
+
return (
|
|
45
|
+
<button
|
|
46
|
+
ref={ref}
|
|
47
|
+
class={['button-base', props.size, props.class].join(' ')}
|
|
48
|
+
css={props.css}
|
|
49
|
+
disabled={disabled}
|
|
50
|
+
onClick={onClick}
|
|
51
|
+
>
|
|
52
|
+
{props.text}
|
|
53
|
+
</button>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
@@ -1,260 +1,260 @@
|
|
|
1
|
-
import { CssProps, RefProps, VNode } from 'lupine.web';
|
|
2
|
-
|
|
3
|
-
export const PlayButtonSize = {
|
|
4
|
-
Small: { w: 50, h: 50 },
|
|
5
|
-
Medium: { w: 70, h: 70 },
|
|
6
|
-
Large: { w: 90, h: 90 },
|
|
7
|
-
};
|
|
8
|
-
export type PlayButtonSizeProps = {
|
|
9
|
-
w: number;
|
|
10
|
-
h: number;
|
|
11
|
-
};
|
|
12
|
-
export type PlayButtonProps = {
|
|
13
|
-
size: PlayButtonSizeProps;
|
|
14
|
-
disabled?: boolean;
|
|
15
|
-
checked?: boolean;
|
|
16
|
-
onClick?: (checked: boolean) => void;
|
|
17
|
-
hook?: ToggleBaseHookProps;
|
|
18
|
-
};
|
|
19
|
-
export const PlayButton = (props: PlayButtonProps) => {
|
|
20
|
-
const css: CssProps = {
|
|
21
|
-
width: `100%`,
|
|
22
|
-
height: `100%`,
|
|
23
|
-
borderRadius: '50%',
|
|
24
|
-
backgroundColor: '#3b29cc',
|
|
25
|
-
display: 'flex',
|
|
26
|
-
alignItems: 'center',
|
|
27
|
-
justifyContent: 'center',
|
|
28
|
-
'.play-icon': {
|
|
29
|
-
width: '50%',
|
|
30
|
-
height: '50%',
|
|
31
|
-
transition: 'all 0.2s ease-in-out',
|
|
32
|
-
backgroundColor: '#fff',
|
|
33
|
-
cursor: 'pointer',
|
|
34
|
-
},
|
|
35
|
-
'&.toggle-off .play-icon': {
|
|
36
|
-
clipPath: 'polygon(20% 0, 20% 100%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%)',
|
|
37
|
-
translate: '6% 0',
|
|
38
|
-
},
|
|
39
|
-
'&.toggle-on .play-icon': {
|
|
40
|
-
clipPath: 'polygon(0 0, 0 100%, 33.33% 100%, 33.33% 0, 66.66% 0, 100% 0, 100% 100%, 66.66% 100%, 66.66% 0)',
|
|
41
|
-
translate: '0 0',
|
|
42
|
-
},
|
|
43
|
-
'&.disabled': {
|
|
44
|
-
cursor: 'not-allowed',
|
|
45
|
-
backgroundColor: '#5d578b',
|
|
46
|
-
},
|
|
47
|
-
};
|
|
48
|
-
return (
|
|
49
|
-
<ToggleBase {...props}>
|
|
50
|
-
<ToggleWaveFrame>
|
|
51
|
-
<div
|
|
52
|
-
css={css}
|
|
53
|
-
class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
|
|
54
|
-
props.disabled ? ' disabled' : ''
|
|
55
|
-
}`}
|
|
56
|
-
>
|
|
57
|
-
<div class='play-icon'></div>
|
|
58
|
-
</div>
|
|
59
|
-
</ToggleWaveFrame>
|
|
60
|
-
</ToggleBase>
|
|
61
|
-
);
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
export type ToggleButtonProps = {
|
|
65
|
-
size: ToggleBaseSizeProps;
|
|
66
|
-
onText: string;
|
|
67
|
-
offText: string;
|
|
68
|
-
disabled?: boolean;
|
|
69
|
-
checked?: boolean;
|
|
70
|
-
onClick?: (checked: boolean) => void;
|
|
71
|
-
hook?: ToggleBaseHookProps;
|
|
72
|
-
};
|
|
73
|
-
export const ToggleButton = (props: ToggleButtonProps) => {
|
|
74
|
-
const css: CssProps = {
|
|
75
|
-
// width: `${props.size + 5}px`,
|
|
76
|
-
// height: `${props.size + 5}px`,
|
|
77
|
-
'&.disabled': {
|
|
78
|
-
cursor: 'not-allowed',
|
|
79
|
-
},
|
|
80
|
-
'&.toggle-on .on, &.toggle-off .off': {
|
|
81
|
-
display: 'block',
|
|
82
|
-
},
|
|
83
|
-
'&.toggle-on .off, &.toggle-off .on': {
|
|
84
|
-
display: 'none',
|
|
85
|
-
},
|
|
86
|
-
};
|
|
87
|
-
return (
|
|
88
|
-
<ToggleBase {...props}>
|
|
89
|
-
<div
|
|
90
|
-
css={css}
|
|
91
|
-
class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
|
|
92
|
-
props.disabled ? ' disabled' : ''
|
|
93
|
-
}`}
|
|
94
|
-
>
|
|
95
|
-
<div class='on'>{props.onText}</div>
|
|
96
|
-
<div class='off'>{props.offText}</div>
|
|
97
|
-
</div>
|
|
98
|
-
</ToggleBase>
|
|
99
|
-
);
|
|
100
|
-
};
|
|
101
|
-
|
|
102
|
-
export type ToggleWaveFrameProps = {
|
|
103
|
-
children: VNode<any>;
|
|
104
|
-
};
|
|
105
|
-
export const ToggleWaveFrame = (props: ToggleWaveFrameProps) => {
|
|
106
|
-
const css: CssProps = {
|
|
107
|
-
width: `100%`,
|
|
108
|
-
height: `100%`,
|
|
109
|
-
'@keyframes pulse-border': {
|
|
110
|
-
'0%': {
|
|
111
|
-
transform: 'scale(0.6)',
|
|
112
|
-
opacity: 1,
|
|
113
|
-
},
|
|
114
|
-
'100%': {
|
|
115
|
-
transform: 'scale(1)',
|
|
116
|
-
opacity: 0,
|
|
117
|
-
},
|
|
118
|
-
},
|
|
119
|
-
'.toggle-waves': {
|
|
120
|
-
position: 'absolute',
|
|
121
|
-
width: `100%`,
|
|
122
|
-
height: `100%`,
|
|
123
|
-
top: '-0',
|
|
124
|
-
left: '0',
|
|
125
|
-
borderRadius: '50%',
|
|
126
|
-
backgroundColor: '#eb205580',
|
|
127
|
-
opacity: 0,
|
|
128
|
-
zIndex: -1,
|
|
129
|
-
animation: 'pulse-border 3s ease-in-out infinite',
|
|
130
|
-
},
|
|
131
|
-
'.toggle-waves-1': {
|
|
132
|
-
'-webkit-animation-delay': '0s',
|
|
133
|
-
'animation-delay': '0s',
|
|
134
|
-
},
|
|
135
|
-
|
|
136
|
-
'.toggle-waves-2': {
|
|
137
|
-
'-webkit-animation-delay': '1s',
|
|
138
|
-
'animation-delay': '1s',
|
|
139
|
-
},
|
|
140
|
-
|
|
141
|
-
'.toggle-waves-3': {
|
|
142
|
-
'-webkit-animation-delay': '2s',
|
|
143
|
-
'animation-delay': '2s',
|
|
144
|
-
},
|
|
145
|
-
'.toggle-waves-box': {
|
|
146
|
-
width: `100%`,
|
|
147
|
-
height: `100%`,
|
|
148
|
-
padding: `18%`,
|
|
149
|
-
},
|
|
150
|
-
'&.disabled .toggle-waves': {
|
|
151
|
-
backgroundColor: '#5d578b',
|
|
152
|
-
},
|
|
153
|
-
};
|
|
154
|
-
return (
|
|
155
|
-
<div css={css} class='toggle-waves-box toggle-placeholder'>
|
|
156
|
-
<div class='toggle-waves toggle-waves-1'></div>
|
|
157
|
-
<div class='toggle-waves toggle-waves-2'></div>
|
|
158
|
-
<div class='toggle-waves toggle-waves-3'></div>
|
|
159
|
-
<div class='toggle-waves-box'>{props.children}</div>
|
|
160
|
-
</div>
|
|
161
|
-
);
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
export const ToggleBaseSize = {
|
|
165
|
-
Small: { w: 30, h: 30 },
|
|
166
|
-
Medium: { w: 50, h: 50 },
|
|
167
|
-
Large: { w: 70, h: 70 },
|
|
168
|
-
};
|
|
169
|
-
export type ToggleBaseSizeProps = {
|
|
170
|
-
w: number | string;
|
|
171
|
-
h: number | string;
|
|
172
|
-
};
|
|
173
|
-
export type ToggleBaseHookProps = {
|
|
174
|
-
setChecked?: (checked: boolean) => void;
|
|
175
|
-
getChecked?: () => boolean;
|
|
176
|
-
setEnabled?: (enabled: boolean) => void;
|
|
177
|
-
getEnabled?: () => boolean;
|
|
178
|
-
};
|
|
179
|
-
export type ToggleBaseProps = {
|
|
180
|
-
size: ToggleBaseSizeProps;
|
|
181
|
-
disabled?: boolean;
|
|
182
|
-
checked?: boolean;
|
|
183
|
-
onClick?: (checked: boolean) => void;
|
|
184
|
-
hook?: ToggleBaseHookProps;
|
|
185
|
-
children: VNode<any>;
|
|
186
|
-
};
|
|
187
|
-
export const ToggleBase = (props: ToggleBaseProps) => {
|
|
188
|
-
const applyToggle = (checked: boolean, disabled: boolean) => {
|
|
189
|
-
const childDom = ref.$all('.toggle-base-container .toggle-placeholder');
|
|
190
|
-
childDom.forEach((dom: HTMLElement) => {
|
|
191
|
-
dom.classList.toggle('toggle-on', checked);
|
|
192
|
-
dom.classList.toggle('toggle-off', !checked);
|
|
193
|
-
dom.classList.toggle('disabled', disabled);
|
|
194
|
-
});
|
|
195
|
-
};
|
|
196
|
-
let disabled = props.disabled || false;
|
|
197
|
-
const ref: RefProps = {
|
|
198
|
-
onLoad: async (el: Element) => {
|
|
199
|
-
applyToggle(props.checked || false, disabled);
|
|
200
|
-
},
|
|
201
|
-
};
|
|
202
|
-
const onClick = (e: MouseEvent) => {
|
|
203
|
-
if (disabled) {
|
|
204
|
-
return;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
const checked = (e.target as HTMLInputElement).checked;
|
|
208
|
-
applyToggle(checked, disabled);
|
|
209
|
-
if (props.onClick) {
|
|
210
|
-
props.onClick(checked);
|
|
211
|
-
}
|
|
212
|
-
};
|
|
213
|
-
if (props.hook) {
|
|
214
|
-
props.hook.setChecked = (checked: boolean) => {
|
|
215
|
-
(ref.$('input.toggle-base-checkbox') as HTMLInputElement).checked = checked;
|
|
216
|
-
applyToggle(checked, disabled);
|
|
217
|
-
};
|
|
218
|
-
props.hook.getChecked = () => {
|
|
219
|
-
return (ref.$('input.toggle-base-checkbox') as HTMLInputElement).checked;
|
|
220
|
-
};
|
|
221
|
-
props.hook.setEnabled = (enabled: boolean) => {
|
|
222
|
-
disabled = !enabled;
|
|
223
|
-
const dom = ref.$('input.toggle-base-checkbox') as HTMLInputElement;
|
|
224
|
-
dom.disabled = disabled;
|
|
225
|
-
applyToggle(dom.checked, disabled);
|
|
226
|
-
};
|
|
227
|
-
props.hook.getEnabled = () => {
|
|
228
|
-
return !disabled;
|
|
229
|
-
};
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
const css: CssProps = {
|
|
233
|
-
width: `${typeof props.size.w === 'number' ? props.size.w + 'px' : props.size.w}`,
|
|
234
|
-
height: `${typeof props.size.h === 'number' ? props.size.h + 'px' : props.size.h}`,
|
|
235
|
-
'.toggle-base-box, .toggle-base-container': {
|
|
236
|
-
position: 'relative',
|
|
237
|
-
width: `100%`,
|
|
238
|
-
height: `100%`,
|
|
239
|
-
},
|
|
240
|
-
'.toggle-base-checkbox': {
|
|
241
|
-
opacity: 0,
|
|
242
|
-
position: 'absolute',
|
|
243
|
-
pointerEvents: 'none',
|
|
244
|
-
},
|
|
245
|
-
};
|
|
246
|
-
return (
|
|
247
|
-
<div ref={ref} css={css} class='toggle-base-component'>
|
|
248
|
-
<label class='toggle-base-box'>
|
|
249
|
-
<div class='toggle-base-container'>{props.children}</div>
|
|
250
|
-
<input
|
|
251
|
-
type='checkbox'
|
|
252
|
-
class='toggle-base-checkbox'
|
|
253
|
-
checked={props.checked || false}
|
|
254
|
-
disabled={disabled}
|
|
255
|
-
onClick={onClick}
|
|
256
|
-
/>
|
|
257
|
-
</label>
|
|
258
|
-
</div>
|
|
259
|
-
);
|
|
260
|
-
};
|
|
1
|
+
import { CssProps, RefProps, VNode } from 'lupine.web';
|
|
2
|
+
|
|
3
|
+
export const PlayButtonSize = {
|
|
4
|
+
Small: { w: 50, h: 50 },
|
|
5
|
+
Medium: { w: 70, h: 70 },
|
|
6
|
+
Large: { w: 90, h: 90 },
|
|
7
|
+
};
|
|
8
|
+
export type PlayButtonSizeProps = {
|
|
9
|
+
w: number;
|
|
10
|
+
h: number;
|
|
11
|
+
};
|
|
12
|
+
export type PlayButtonProps = {
|
|
13
|
+
size: PlayButtonSizeProps;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
checked?: boolean;
|
|
16
|
+
onClick?: (checked: boolean) => void;
|
|
17
|
+
hook?: ToggleBaseHookProps;
|
|
18
|
+
};
|
|
19
|
+
export const PlayButton = (props: PlayButtonProps) => {
|
|
20
|
+
const css: CssProps = {
|
|
21
|
+
width: `100%`,
|
|
22
|
+
height: `100%`,
|
|
23
|
+
borderRadius: '50%',
|
|
24
|
+
backgroundColor: '#3b29cc',
|
|
25
|
+
display: 'flex',
|
|
26
|
+
alignItems: 'center',
|
|
27
|
+
justifyContent: 'center',
|
|
28
|
+
'.play-icon': {
|
|
29
|
+
width: '50%',
|
|
30
|
+
height: '50%',
|
|
31
|
+
transition: 'all 0.2s ease-in-out',
|
|
32
|
+
backgroundColor: '#fff',
|
|
33
|
+
cursor: 'pointer',
|
|
34
|
+
},
|
|
35
|
+
'&.toggle-off .play-icon': {
|
|
36
|
+
clipPath: 'polygon(20% 0, 20% 100%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%)',
|
|
37
|
+
translate: '6% 0',
|
|
38
|
+
},
|
|
39
|
+
'&.toggle-on .play-icon': {
|
|
40
|
+
clipPath: 'polygon(0 0, 0 100%, 33.33% 100%, 33.33% 0, 66.66% 0, 100% 0, 100% 100%, 66.66% 100%, 66.66% 0)',
|
|
41
|
+
translate: '0 0',
|
|
42
|
+
},
|
|
43
|
+
'&.disabled': {
|
|
44
|
+
cursor: 'not-allowed',
|
|
45
|
+
backgroundColor: '#5d578b',
|
|
46
|
+
},
|
|
47
|
+
};
|
|
48
|
+
return (
|
|
49
|
+
<ToggleBase {...props}>
|
|
50
|
+
<ToggleWaveFrame>
|
|
51
|
+
<div
|
|
52
|
+
css={css}
|
|
53
|
+
class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
|
|
54
|
+
props.disabled ? ' disabled' : ''
|
|
55
|
+
}`}
|
|
56
|
+
>
|
|
57
|
+
<div class='play-icon'></div>
|
|
58
|
+
</div>
|
|
59
|
+
</ToggleWaveFrame>
|
|
60
|
+
</ToggleBase>
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
export type ToggleButtonProps = {
|
|
65
|
+
size: ToggleBaseSizeProps;
|
|
66
|
+
onText: string;
|
|
67
|
+
offText: string;
|
|
68
|
+
disabled?: boolean;
|
|
69
|
+
checked?: boolean;
|
|
70
|
+
onClick?: (checked: boolean) => void;
|
|
71
|
+
hook?: ToggleBaseHookProps;
|
|
72
|
+
};
|
|
73
|
+
export const ToggleButton = (props: ToggleButtonProps) => {
|
|
74
|
+
const css: CssProps = {
|
|
75
|
+
// width: `${props.size + 5}px`,
|
|
76
|
+
// height: `${props.size + 5}px`,
|
|
77
|
+
'&.disabled': {
|
|
78
|
+
cursor: 'not-allowed',
|
|
79
|
+
},
|
|
80
|
+
'&.toggle-on .on, &.toggle-off .off': {
|
|
81
|
+
display: 'block',
|
|
82
|
+
},
|
|
83
|
+
'&.toggle-on .off, &.toggle-off .on': {
|
|
84
|
+
display: 'none',
|
|
85
|
+
},
|
|
86
|
+
};
|
|
87
|
+
return (
|
|
88
|
+
<ToggleBase {...props}>
|
|
89
|
+
<div
|
|
90
|
+
css={css}
|
|
91
|
+
class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
|
|
92
|
+
props.disabled ? ' disabled' : ''
|
|
93
|
+
}`}
|
|
94
|
+
>
|
|
95
|
+
<div class='on'>{props.onText}</div>
|
|
96
|
+
<div class='off'>{props.offText}</div>
|
|
97
|
+
</div>
|
|
98
|
+
</ToggleBase>
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
export type ToggleWaveFrameProps = {
|
|
103
|
+
children: VNode<any>;
|
|
104
|
+
};
|
|
105
|
+
export const ToggleWaveFrame = (props: ToggleWaveFrameProps) => {
|
|
106
|
+
const css: CssProps = {
|
|
107
|
+
width: `100%`,
|
|
108
|
+
height: `100%`,
|
|
109
|
+
'@keyframes pulse-border': {
|
|
110
|
+
'0%': {
|
|
111
|
+
transform: 'scale(0.6)',
|
|
112
|
+
opacity: 1,
|
|
113
|
+
},
|
|
114
|
+
'100%': {
|
|
115
|
+
transform: 'scale(1)',
|
|
116
|
+
opacity: 0,
|
|
117
|
+
},
|
|
118
|
+
},
|
|
119
|
+
'.toggle-waves': {
|
|
120
|
+
position: 'absolute',
|
|
121
|
+
width: `100%`,
|
|
122
|
+
height: `100%`,
|
|
123
|
+
top: '-0',
|
|
124
|
+
left: '0',
|
|
125
|
+
borderRadius: '50%',
|
|
126
|
+
backgroundColor: '#eb205580',
|
|
127
|
+
opacity: 0,
|
|
128
|
+
zIndex: -1,
|
|
129
|
+
animation: 'pulse-border 3s ease-in-out infinite',
|
|
130
|
+
},
|
|
131
|
+
'.toggle-waves-1': {
|
|
132
|
+
'-webkit-animation-delay': '0s',
|
|
133
|
+
'animation-delay': '0s',
|
|
134
|
+
},
|
|
135
|
+
|
|
136
|
+
'.toggle-waves-2': {
|
|
137
|
+
'-webkit-animation-delay': '1s',
|
|
138
|
+
'animation-delay': '1s',
|
|
139
|
+
},
|
|
140
|
+
|
|
141
|
+
'.toggle-waves-3': {
|
|
142
|
+
'-webkit-animation-delay': '2s',
|
|
143
|
+
'animation-delay': '2s',
|
|
144
|
+
},
|
|
145
|
+
'.toggle-waves-box': {
|
|
146
|
+
width: `100%`,
|
|
147
|
+
height: `100%`,
|
|
148
|
+
padding: `18%`,
|
|
149
|
+
},
|
|
150
|
+
'&.disabled .toggle-waves': {
|
|
151
|
+
backgroundColor: '#5d578b',
|
|
152
|
+
},
|
|
153
|
+
};
|
|
154
|
+
return (
|
|
155
|
+
<div css={css} class='toggle-waves-box toggle-placeholder'>
|
|
156
|
+
<div class='toggle-waves toggle-waves-1'></div>
|
|
157
|
+
<div class='toggle-waves toggle-waves-2'></div>
|
|
158
|
+
<div class='toggle-waves toggle-waves-3'></div>
|
|
159
|
+
<div class='toggle-waves-box'>{props.children}</div>
|
|
160
|
+
</div>
|
|
161
|
+
);
|
|
162
|
+
};
|
|
163
|
+
|
|
164
|
+
export const ToggleBaseSize = {
|
|
165
|
+
Small: { w: 30, h: 30 },
|
|
166
|
+
Medium: { w: 50, h: 50 },
|
|
167
|
+
Large: { w: 70, h: 70 },
|
|
168
|
+
};
|
|
169
|
+
export type ToggleBaseSizeProps = {
|
|
170
|
+
w: number | string;
|
|
171
|
+
h: number | string;
|
|
172
|
+
};
|
|
173
|
+
export type ToggleBaseHookProps = {
|
|
174
|
+
setChecked?: (checked: boolean) => void;
|
|
175
|
+
getChecked?: () => boolean;
|
|
176
|
+
setEnabled?: (enabled: boolean) => void;
|
|
177
|
+
getEnabled?: () => boolean;
|
|
178
|
+
};
|
|
179
|
+
export type ToggleBaseProps = {
|
|
180
|
+
size: ToggleBaseSizeProps;
|
|
181
|
+
disabled?: boolean;
|
|
182
|
+
checked?: boolean;
|
|
183
|
+
onClick?: (checked: boolean) => void;
|
|
184
|
+
hook?: ToggleBaseHookProps;
|
|
185
|
+
children: VNode<any>;
|
|
186
|
+
};
|
|
187
|
+
export const ToggleBase = (props: ToggleBaseProps) => {
|
|
188
|
+
const applyToggle = (checked: boolean, disabled: boolean) => {
|
|
189
|
+
const childDom = ref.$all('.toggle-base-container .toggle-placeholder');
|
|
190
|
+
childDom.forEach((dom: HTMLElement) => {
|
|
191
|
+
dom.classList.toggle('toggle-on', checked);
|
|
192
|
+
dom.classList.toggle('toggle-off', !checked);
|
|
193
|
+
dom.classList.toggle('disabled', disabled);
|
|
194
|
+
});
|
|
195
|
+
};
|
|
196
|
+
let disabled = props.disabled || false;
|
|
197
|
+
const ref: RefProps = {
|
|
198
|
+
onLoad: async (el: Element) => {
|
|
199
|
+
applyToggle(props.checked || false, disabled);
|
|
200
|
+
},
|
|
201
|
+
};
|
|
202
|
+
const onClick = (e: MouseEvent) => {
|
|
203
|
+
if (disabled) {
|
|
204
|
+
return;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
const checked = (e.target as HTMLInputElement).checked;
|
|
208
|
+
applyToggle(checked, disabled);
|
|
209
|
+
if (props.onClick) {
|
|
210
|
+
props.onClick(checked);
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
if (props.hook) {
|
|
214
|
+
props.hook.setChecked = (checked: boolean) => {
|
|
215
|
+
(ref.$('input.toggle-base-checkbox') as HTMLInputElement).checked = checked;
|
|
216
|
+
applyToggle(checked, disabled);
|
|
217
|
+
};
|
|
218
|
+
props.hook.getChecked = () => {
|
|
219
|
+
return (ref.$('input.toggle-base-checkbox') as HTMLInputElement).checked;
|
|
220
|
+
};
|
|
221
|
+
props.hook.setEnabled = (enabled: boolean) => {
|
|
222
|
+
disabled = !enabled;
|
|
223
|
+
const dom = ref.$('input.toggle-base-checkbox') as HTMLInputElement;
|
|
224
|
+
dom.disabled = disabled;
|
|
225
|
+
applyToggle(dom.checked, disabled);
|
|
226
|
+
};
|
|
227
|
+
props.hook.getEnabled = () => {
|
|
228
|
+
return !disabled;
|
|
229
|
+
};
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
const css: CssProps = {
|
|
233
|
+
width: `${typeof props.size.w === 'number' ? props.size.w + 'px' : props.size.w}`,
|
|
234
|
+
height: `${typeof props.size.h === 'number' ? props.size.h + 'px' : props.size.h}`,
|
|
235
|
+
'.toggle-base-box, .toggle-base-container': {
|
|
236
|
+
position: 'relative',
|
|
237
|
+
width: `100%`,
|
|
238
|
+
height: `100%`,
|
|
239
|
+
},
|
|
240
|
+
'.toggle-base-checkbox': {
|
|
241
|
+
opacity: 0,
|
|
242
|
+
position: 'absolute',
|
|
243
|
+
pointerEvents: 'none',
|
|
244
|
+
},
|
|
245
|
+
};
|
|
246
|
+
return (
|
|
247
|
+
<div ref={ref} css={css} class='toggle-base-component'>
|
|
248
|
+
<label class='toggle-base-box'>
|
|
249
|
+
<div class='toggle-base-container'>{props.children}</div>
|
|
250
|
+
<input
|
|
251
|
+
type='checkbox'
|
|
252
|
+
class='toggle-base-checkbox'
|
|
253
|
+
checked={props.checked || false}
|
|
254
|
+
disabled={disabled}
|
|
255
|
+
onClick={onClick}
|
|
256
|
+
/>
|
|
257
|
+
</label>
|
|
258
|
+
</div>
|
|
259
|
+
);
|
|
260
|
+
};
|
|
@@ -19,7 +19,7 @@ export const darkThemes: ThemeProps = {
|
|
|
19
19
|
// '--secondary-border': '1px solid #303030',
|
|
20
20
|
'--primary-opacity': '0.5', // used for dark theme
|
|
21
21
|
'--primary-disabled-opacity': '0.7', // used for dark theme
|
|
22
|
-
'--primary-accent-color': '#
|
|
22
|
+
'--primary-accent-color': '#1a588a', // used for radio and checkbox's background color
|
|
23
23
|
|
|
24
24
|
// including menus, tabs
|
|
25
25
|
'--activatable-color-normal': 'var(--primary-color)',
|
|
@@ -2,17 +2,21 @@ import { ThemeProps } from "lupine.web";
|
|
|
2
2
|
|
|
3
3
|
export const sharedThemes: ThemeProps = {
|
|
4
4
|
// z-index
|
|
5
|
-
'--layer-
|
|
6
|
-
'--layer-
|
|
7
|
-
'--layer-
|
|
8
|
-
'--layer-
|
|
9
|
-
'--layer-
|
|
10
|
-
'--layer-
|
|
11
|
-
'--layer-
|
|
12
|
-
'--layer-
|
|
13
|
-
'--layer-
|
|
14
|
-
'--layer-
|
|
15
|
-
'--layer-
|
|
5
|
+
'--layer-inside': '100', // for inside orders
|
|
6
|
+
'--layer-cover': '200',
|
|
7
|
+
'--layer-header-footer': '300',
|
|
8
|
+
'--layer-sidebar': '400',
|
|
9
|
+
'--layer-sidebar-sub': '410',
|
|
10
|
+
'--layer-float-window': '500',
|
|
11
|
+
'--layer-slider': '600', // screen slider
|
|
12
|
+
'--layer-modal': '700',
|
|
13
|
+
'--layer-modal-over': '710',
|
|
14
|
+
'--layer-menu': '800', // popup menu
|
|
15
|
+
'--layer-menu-sub': '810',
|
|
16
|
+
'--layer-notice': '900', // notice, loading, toast
|
|
17
|
+
'--layer-tooltip': '2000',
|
|
18
|
+
'--layer-dragged-item': '2100',
|
|
19
|
+
'--layer-guide': '2500', // learning guide
|
|
16
20
|
|
|
17
21
|
'--font-size-base': '16px',
|
|
18
22
|
'--font-weight-base': '', //'400',
|