@esportsplus/ui 0.29.2 → 0.31.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/button/index.d.ts +101 -0
- package/build/components/button/index.js +34 -0
- package/build/components/button/scss/index.scss +1 -1
- package/build/components/index.d.ts +1 -1
- package/build/components/index.js +1 -1
- package/build/components/text/scss/index.scss +1 -1
- package/build/css-utilities/error/scss/index.scss +2 -0
- package/build/css-utilities/index.d.ts +1 -0
- package/build/css-utilities/index.js +1 -0
- package/package.json +1 -1
- package/src/components/button/index.ts +42 -1
- package/src/components/button/scss/index.scss +46 -0
- package/src/components/button/scss/variables.scss +5 -0
- package/src/components/index.ts +1 -1
- package/src/components/text/scss/index.scss +0 -31
- package/src/css-utilities/error/scss/index.scss +24 -0
- package/src/css-utilities/error/scss/variables.scss +3 -0
- package/src/css-utilities/index.ts +1 -0
|
@@ -1 +1,102 @@
|
|
|
1
|
+
import { Renderable } from '@esportsplus/template';
|
|
1
2
|
import './scss/index.scss';
|
|
3
|
+
declare const hold: {
|
|
4
|
+
(): ReturnType<(this: {
|
|
5
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
6
|
+
content?: ((state: {
|
|
7
|
+
holding: boolean;
|
|
8
|
+
complete: boolean;
|
|
9
|
+
}) => Renderable<any>) | undefined;
|
|
10
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
11
|
+
holding: boolean;
|
|
12
|
+
complete: boolean;
|
|
13
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
14
|
+
<T extends import("@esportsplus/template").Attributes>(attributes: T): ReturnType<(this: {
|
|
15
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
16
|
+
content?: ((state: {
|
|
17
|
+
holding: boolean;
|
|
18
|
+
complete: boolean;
|
|
19
|
+
}) => Renderable<any>) | undefined;
|
|
20
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
21
|
+
holding: boolean;
|
|
22
|
+
complete: boolean;
|
|
23
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
24
|
+
<T extends (state: {
|
|
25
|
+
holding: boolean;
|
|
26
|
+
complete: boolean;
|
|
27
|
+
}) => Renderable<any>>(content: T): ReturnType<(this: {
|
|
28
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
29
|
+
content?: ((state: {
|
|
30
|
+
holding: boolean;
|
|
31
|
+
complete: boolean;
|
|
32
|
+
}) => Renderable<any>) | undefined;
|
|
33
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
34
|
+
holding: boolean;
|
|
35
|
+
complete: boolean;
|
|
36
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
37
|
+
(attributes: import("@esportsplus/template").Attributes, content: (state: {
|
|
38
|
+
holding: boolean;
|
|
39
|
+
complete: boolean;
|
|
40
|
+
}) => Renderable<any>): ReturnType<(this: {
|
|
41
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
42
|
+
content?: ((state: {
|
|
43
|
+
holding: boolean;
|
|
44
|
+
complete: boolean;
|
|
45
|
+
}) => Renderable<any>) | undefined;
|
|
46
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
47
|
+
holding: boolean;
|
|
48
|
+
complete: boolean;
|
|
49
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
50
|
+
};
|
|
51
|
+
declare const _default: {
|
|
52
|
+
hold: {
|
|
53
|
+
(): ReturnType<(this: {
|
|
54
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
55
|
+
content?: ((state: {
|
|
56
|
+
holding: boolean;
|
|
57
|
+
complete: boolean;
|
|
58
|
+
}) => Renderable<any>) | undefined;
|
|
59
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
60
|
+
holding: boolean;
|
|
61
|
+
complete: boolean;
|
|
62
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
63
|
+
<T extends import("@esportsplus/template").Attributes>(attributes: T): ReturnType<(this: {
|
|
64
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
65
|
+
content?: ((state: {
|
|
66
|
+
holding: boolean;
|
|
67
|
+
complete: boolean;
|
|
68
|
+
}) => Renderable<any>) | undefined;
|
|
69
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
70
|
+
holding: boolean;
|
|
71
|
+
complete: boolean;
|
|
72
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
73
|
+
<T extends (state: {
|
|
74
|
+
holding: boolean;
|
|
75
|
+
complete: boolean;
|
|
76
|
+
}) => Renderable<any>>(content: T): ReturnType<(this: {
|
|
77
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
78
|
+
content?: ((state: {
|
|
79
|
+
holding: boolean;
|
|
80
|
+
complete: boolean;
|
|
81
|
+
}) => Renderable<any>) | undefined;
|
|
82
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
83
|
+
holding: boolean;
|
|
84
|
+
complete: boolean;
|
|
85
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
86
|
+
(attributes: import("@esportsplus/template").Attributes, content: (state: {
|
|
87
|
+
holding: boolean;
|
|
88
|
+
complete: boolean;
|
|
89
|
+
}) => Renderable<any>): ReturnType<(this: {
|
|
90
|
+
attributes?: import("@esportsplus/template").Attributes | undefined;
|
|
91
|
+
content?: ((state: {
|
|
92
|
+
holding: boolean;
|
|
93
|
+
complete: boolean;
|
|
94
|
+
}) => Renderable<any>) | undefined;
|
|
95
|
+
}, attributes: Readonly<import("@esportsplus/template").Attributes>, content: (state: {
|
|
96
|
+
holding: boolean;
|
|
97
|
+
complete: boolean;
|
|
98
|
+
}) => Renderable<any>) => Renderable<any>>;
|
|
99
|
+
};
|
|
100
|
+
};
|
|
101
|
+
export default _default;
|
|
102
|
+
export { hold };
|
|
@@ -1 +1,35 @@
|
|
|
1
|
+
import { reactive } from '@esportsplus/reactivity';
|
|
2
|
+
import { html } from '@esportsplus/template';
|
|
3
|
+
import template from '../template/index.js';
|
|
1
4
|
import './scss/index.scss';
|
|
5
|
+
const hold = template.factory(function (attributes, content) {
|
|
6
|
+
let state = reactive({
|
|
7
|
+
complete: false,
|
|
8
|
+
holding: false
|
|
9
|
+
});
|
|
10
|
+
return html `
|
|
11
|
+
<div
|
|
12
|
+
class='button button--hold ${() => state.holding && '--active'}'
|
|
13
|
+
onanimationend='${(e) => {
|
|
14
|
+
if (e.animationName === 'buttonHold') {
|
|
15
|
+
state.complete = true;
|
|
16
|
+
}
|
|
17
|
+
}}'
|
|
18
|
+
onclick='${() => { }}'
|
|
19
|
+
onmousedown='${(e) => {
|
|
20
|
+
e.preventDefault();
|
|
21
|
+
state.holding = true;
|
|
22
|
+
}}'
|
|
23
|
+
onmouseup='${() => {
|
|
24
|
+
if (!state.complete) {
|
|
25
|
+
state.holding = false;
|
|
26
|
+
}
|
|
27
|
+
}}'
|
|
28
|
+
${attributes}
|
|
29
|
+
>
|
|
30
|
+
${content(state)}
|
|
31
|
+
</div>
|
|
32
|
+
`;
|
|
33
|
+
});
|
|
34
|
+
export default { hold };
|
|
35
|
+
export { hold };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.button{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
|
|
1
|
+
@layer components {.button{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--hold{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--hold{overflow:hidden}.button--hold:after{box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-150%,50%)}.button--hold.--active:after{animation:buttonHold var(--animation-duration)ease-in-out forwards}.button--hold.--active>*{animation:buttonContentPulse calc(var(--animation-duration)/3)infinite ease-in-out}@keyframes buttonHold{to{transform:translate(50%,50%)}}@keyframes buttonContentPulse{0%,to{opacity:1}50%{opacity:.4}}.button--hold>*{z-index:2}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -3,7 +3,7 @@ export * as anchor from './anchor/index.js';
|
|
|
3
3
|
export * as banner from './banner/index.js';
|
|
4
4
|
export * as border from './border/index.js';
|
|
5
5
|
export * as bubble from './bubble/index.js';
|
|
6
|
-
export
|
|
6
|
+
export { default as button } from './button/index.js';
|
|
7
7
|
export * as card from './card/index.js';
|
|
8
8
|
export { default as checkbox } from './checkbox/index.js';
|
|
9
9
|
export { default as clipboard } from './clipboard/index.js';
|
|
@@ -3,7 +3,7 @@ export * as anchor from './anchor/index.js';
|
|
|
3
3
|
export * as banner from './banner/index.js';
|
|
4
4
|
export * as border from './border/index.js';
|
|
5
5
|
export * as bubble from './bubble/index.js';
|
|
6
|
-
export
|
|
6
|
+
export { default as button } from './button/index.js';
|
|
7
7
|
export * as card from './card/index.js';
|
|
8
8
|
export { default as checkbox } from './checkbox/index.js';
|
|
9
9
|
export { default as clipboard } from './clipboard/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.text{--color:var(--color-default,inherit);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);transition:color var(--transition-duration)ease-in-out;width:var(--width);position:relative}
|
|
1
|
+
@layer components {.text{--color:var(--color-default,inherit);--font-size:var(--font-size-400);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);transition:color var(--transition-duration)ease-in-out;width:var(--width);position:relative}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer css-utilities {.--error{animation:error var(--animation-duration)1 linear}@keyframes error{0%{transform:translate(8px)}20%{transform:translate(-8px)}40%{transform:translate(4px)}60%{transform:translate(-4px)}80%{transform:translate(2px)}to{transform:translate(0)}}}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -4,6 +4,7 @@ import './background/scss/index.scss';
|
|
|
4
4
|
import './border/scss/index.scss';
|
|
5
5
|
import './color/scss/index.scss';
|
|
6
6
|
import './disabled/scss/index.scss';
|
|
7
|
+
import './error/scss/index.scss';
|
|
7
8
|
import './flex/scss/index.scss';
|
|
8
9
|
import './flicker/scss/index.scss';
|
|
9
10
|
import './focus/scss/index.scss';
|
|
@@ -4,6 +4,7 @@ import './background/scss/index.scss';
|
|
|
4
4
|
import './border/scss/index.scss';
|
|
5
5
|
import './color/scss/index.scss';
|
|
6
6
|
import './disabled/scss/index.scss';
|
|
7
|
+
import './error/scss/index.scss';
|
|
7
8
|
import './flex/scss/index.scss';
|
|
8
9
|
import './flicker/scss/index.scss';
|
|
9
10
|
import './focus/scss/index.scss';
|
package/package.json
CHANGED
|
@@ -1 +1,42 @@
|
|
|
1
|
-
import '
|
|
1
|
+
import { reactive } from '@esportsplus/reactivity';
|
|
2
|
+
import { html, Renderable } from '@esportsplus/template';
|
|
3
|
+
import template from '../template';
|
|
4
|
+
import './scss/index.scss';
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const hold = template.factory(
|
|
8
|
+
function(attributes, content: (state: { holding: boolean, complete: boolean }) => Renderable<any>) {
|
|
9
|
+
let state = reactive({
|
|
10
|
+
complete: false,
|
|
11
|
+
holding: false
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
return html`
|
|
15
|
+
<div
|
|
16
|
+
class='button button--hold ${() => state.holding && '--active'}'
|
|
17
|
+
onanimationend='${(e: AnimationEvent) => {
|
|
18
|
+
if (e.animationName === 'buttonHold') {
|
|
19
|
+
state.complete = true;
|
|
20
|
+
}
|
|
21
|
+
}}'
|
|
22
|
+
onclick='${() => {}}'
|
|
23
|
+
onmousedown='${(e: MouseEvent) => {
|
|
24
|
+
e.preventDefault();
|
|
25
|
+
state.holding = true;
|
|
26
|
+
}}'
|
|
27
|
+
onmouseup='${() => {
|
|
28
|
+
if (!state.complete) {
|
|
29
|
+
state.holding = false;
|
|
30
|
+
}
|
|
31
|
+
}}'
|
|
32
|
+
${attributes}
|
|
33
|
+
>
|
|
34
|
+
${content(state)}
|
|
35
|
+
</div>
|
|
36
|
+
`;
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
export default { hold };
|
|
42
|
+
export { hold };
|
|
@@ -41,6 +41,52 @@
|
|
|
41
41
|
}
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
+
&--hold {
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
|
|
47
|
+
&::after {
|
|
48
|
+
border-radius: 0;
|
|
49
|
+
box-shadow: unset;
|
|
50
|
+
display: block;
|
|
51
|
+
width: 110%;
|
|
52
|
+
height: 100%;
|
|
53
|
+
background: var(--background-hold);
|
|
54
|
+
transform: translate(-150%, 50%);
|
|
55
|
+
z-index: 1;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@include tokens.state(active) {
|
|
59
|
+
&::after {
|
|
60
|
+
animation: buttonHold var(--animation-duration) ease-in-out forwards;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
> * {
|
|
64
|
+
animation: buttonContentPulse calc(var(--animation-duration) / 3) infinite ease-in-out;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
@keyframes buttonHold {
|
|
69
|
+
100% {
|
|
70
|
+
transform: translate(50%, 50%);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@keyframes buttonContentPulse {
|
|
75
|
+
0%,
|
|
76
|
+
100% {
|
|
77
|
+
opacity: 1;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
50% {
|
|
81
|
+
opacity: 0.4;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
> * {
|
|
86
|
+
z-index: 2;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
44
90
|
&--processing {
|
|
45
91
|
color: transparent;
|
|
46
92
|
pointer-events: none;
|
package/src/components/index.ts
CHANGED
|
@@ -3,7 +3,7 @@ export * as anchor from './anchor';
|
|
|
3
3
|
export * as banner from './banner';
|
|
4
4
|
export * as border from './border';
|
|
5
5
|
export * as bubble from './bubble';
|
|
6
|
-
export
|
|
6
|
+
export { default as button } from './button';
|
|
7
7
|
export * as card from './card';
|
|
8
8
|
export { default as checkbox } from './checkbox';
|
|
9
9
|
export { default as clipboard } from './clipboard';
|
|
@@ -8,35 +8,4 @@
|
|
|
8
8
|
position: relative;
|
|
9
9
|
transition: color var(--transition-duration) ease-in-out;
|
|
10
10
|
width: var(--width);
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
&--error {
|
|
14
|
-
animation: textError 0.32s 1 linear;
|
|
15
|
-
|
|
16
|
-
@keyframes textError {
|
|
17
|
-
0% {
|
|
18
|
-
transform: translate(8px);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
20% {
|
|
22
|
-
transform: translate(-8px);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
40% {
|
|
26
|
-
transform: translate(4px);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
60% {
|
|
30
|
-
transform: translate(-4px);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
80% {
|
|
34
|
-
transform: translate(2px);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
100% {
|
|
38
|
-
transform: translate(0px);
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
11
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
.--error {
|
|
2
|
+
animation: error var(--animation-duration) 1 linear;
|
|
3
|
+
|
|
4
|
+
@keyframes error {
|
|
5
|
+
0% {
|
|
6
|
+
transform: translate(8px);
|
|
7
|
+
}
|
|
8
|
+
20% {
|
|
9
|
+
transform: translate(-8px);
|
|
10
|
+
}
|
|
11
|
+
40% {
|
|
12
|
+
transform: translate(4px);
|
|
13
|
+
}
|
|
14
|
+
60% {
|
|
15
|
+
transform: translate(-4px);
|
|
16
|
+
}
|
|
17
|
+
80% {
|
|
18
|
+
transform: translate(2px);
|
|
19
|
+
}
|
|
20
|
+
100% {
|
|
21
|
+
transform: translate(0px);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -4,6 +4,7 @@ import './background/scss/index.scss';
|
|
|
4
4
|
import './border/scss/index.scss';
|
|
5
5
|
import './color/scss/index.scss';
|
|
6
6
|
import './disabled/scss/index.scss';
|
|
7
|
+
import './error/scss/index.scss';
|
|
7
8
|
import './flex/scss/index.scss';
|
|
8
9
|
import './flicker/scss/index.scss';
|
|
9
10
|
import './focus/scss/index.scss';
|