bertui 0.1.6 → 0.1.8

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.
@@ -1,210 +1,210 @@
1
- /* BertUI Built-in Utilities v0.1.0 */
2
-
3
- /* Split Text Animation */
4
- .split {
5
- display: inline-block;
6
- position: relative;
7
- overflow: hidden;
8
- }
9
-
10
- .split::before {
11
- content: attr(data-text);
12
- position: absolute;
13
- top: 0;
14
- left: 0;
15
- width: 50%;
16
- overflow: hidden;
17
- animation: split-left 0.6s ease-out;
18
- }
19
-
20
- .split::after {
21
- content: attr(data-text);
22
- position: absolute;
23
- top: 0;
24
- right: 0;
25
- width: 50%;
26
- overflow: hidden;
27
- animation: split-right 0.6s ease-out;
28
- }
29
-
30
- @keyframes split-left {
31
- from {
32
- transform: translateX(-100%);
33
- opacity: 0;
34
- }
35
- to {
36
- transform: translateX(0);
37
- opacity: 1;
38
- }
39
- }
40
-
41
- @keyframes split-right {
42
- from {
43
- transform: translateX(100%);
44
- opacity: 0;
45
- }
46
- to {
47
- transform: translateX(0);
48
- opacity: 1;
49
- }
50
- }
51
-
52
- /* Move Right Animation */
53
- .moveright {
54
- animation: moveright 0.5s ease-out;
55
- }
56
-
57
- @keyframes moveright {
58
- from {
59
- transform: translateX(-20px);
60
- opacity: 0;
61
- }
62
- to {
63
- transform: translateX(0);
64
- opacity: 1;
65
- }
66
- }
67
-
68
- /* Move Left Animation */
69
- .moveleft {
70
- animation: moveleft 0.5s ease-out;
71
- }
72
-
73
- @keyframes moveleft {
74
- from {
75
- transform: translateX(20px);
76
- opacity: 0;
77
- }
78
- to {
79
- transform: translateX(0);
80
- opacity: 1;
81
- }
82
- }
83
-
84
- /* Fade In */
85
- .fadein {
86
- animation: fadein 0.5s ease-out;
87
- }
88
-
89
- @keyframes fadein {
90
- from {
91
- opacity: 0;
92
- }
93
- to {
94
- opacity: 1;
95
- }
96
- }
97
-
98
- /* Scale In */
99
- .scalein {
100
- animation: scalein 0.4s ease-out;
101
- }
102
-
103
- @keyframes scalein {
104
- from {
105
- transform: scale(0.8);
106
- opacity: 0;
107
- }
108
- to {
109
- transform: scale(1);
110
- opacity: 1;
111
- }
112
- }
113
-
114
- /* Bounce In */
115
- .bouncein {
116
- animation: bouncein 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
117
- }
118
-
119
- @keyframes bouncein {
120
- 0% {
121
- transform: scale(0);
122
- opacity: 0;
123
- }
124
- 50% {
125
- transform: scale(1.1);
126
- }
127
- 100% {
128
- transform: scale(1);
129
- opacity: 1;
130
- }
131
- }
132
-
133
- /* Slide Up */
134
- .slideup {
135
- animation: slideup 0.5s ease-out;
136
- }
137
-
138
- @keyframes slideup {
139
- from {
140
- transform: translateY(20px);
141
- opacity: 0;
142
- }
143
- to {
144
- transform: translateY(0);
145
- opacity: 1;
146
- }
147
- }
148
-
149
- /* Slide Down */
150
- .slidedown {
151
- animation: slidedown 0.5s ease-out;
152
- }
153
-
154
- @keyframes slidedown {
155
- from {
156
- transform: translateY(-20px);
157
- opacity: 0;
158
- }
159
- to {
160
- transform: translateY(0);
161
- opacity: 1;
162
- }
163
- }
164
-
165
- /* Rotate In */
166
- .rotatein {
167
- animation: rotatein 0.6s ease-out;
168
- }
169
-
170
- @keyframes rotatein {
171
- from {
172
- transform: rotate(-180deg) scale(0);
173
- opacity: 0;
174
- }
175
- to {
176
- transform: rotate(0) scale(1);
177
- opacity: 1;
178
- }
179
- }
180
-
181
- /* Pulse */
182
- .pulse {
183
- animation: pulse 1.5s ease-in-out infinite;
184
- }
185
-
186
- @keyframes pulse {
187
- 0%, 100% {
188
- transform: scale(1);
189
- }
190
- 50% {
191
- transform: scale(1.05);
192
- }
193
- }
194
-
195
- /* Shake */
196
- .shake {
197
- animation: shake 0.5s ease-in-out;
198
- }
199
-
200
- @keyframes shake {
201
- 0%, 100% {
202
- transform: translateX(0);
203
- }
204
- 10%, 30%, 50%, 70%, 90% {
205
- transform: translateX(-5px);
206
- }
207
- 20%, 40%, 60%, 80% {
208
- transform: translateX(5px);
209
- }
1
+ /* BertUI Built-in Utilities v0.1.0 */
2
+
3
+ /* Split Text Animation */
4
+ .split {
5
+ display: inline-block;
6
+ position: relative;
7
+ overflow: hidden;
8
+ }
9
+
10
+ .split::before {
11
+ content: attr(data-text);
12
+ position: absolute;
13
+ top: 0;
14
+ left: 0;
15
+ width: 50%;
16
+ overflow: hidden;
17
+ animation: split-left 0.6s ease-out;
18
+ }
19
+
20
+ .split::after {
21
+ content: attr(data-text);
22
+ position: absolute;
23
+ top: 0;
24
+ right: 0;
25
+ width: 50%;
26
+ overflow: hidden;
27
+ animation: split-right 0.6s ease-out;
28
+ }
29
+
30
+ @keyframes split-left {
31
+ from {
32
+ transform: translateX(-100%);
33
+ opacity: 0;
34
+ }
35
+ to {
36
+ transform: translateX(0);
37
+ opacity: 1;
38
+ }
39
+ }
40
+
41
+ @keyframes split-right {
42
+ from {
43
+ transform: translateX(100%);
44
+ opacity: 0;
45
+ }
46
+ to {
47
+ transform: translateX(0);
48
+ opacity: 1;
49
+ }
50
+ }
51
+
52
+ /* Move Right Animation */
53
+ .moveright {
54
+ animation: moveright 0.5s ease-out;
55
+ }
56
+
57
+ @keyframes moveright {
58
+ from {
59
+ transform: translateX(-20px);
60
+ opacity: 0;
61
+ }
62
+ to {
63
+ transform: translateX(0);
64
+ opacity: 1;
65
+ }
66
+ }
67
+
68
+ /* Move Left Animation */
69
+ .moveleft {
70
+ animation: moveleft 0.5s ease-out;
71
+ }
72
+
73
+ @keyframes moveleft {
74
+ from {
75
+ transform: translateX(20px);
76
+ opacity: 0;
77
+ }
78
+ to {
79
+ transform: translateX(0);
80
+ opacity: 1;
81
+ }
82
+ }
83
+
84
+ /* Fade In */
85
+ .fadein {
86
+ animation: fadein 0.5s ease-out;
87
+ }
88
+
89
+ @keyframes fadein {
90
+ from {
91
+ opacity: 0;
92
+ }
93
+ to {
94
+ opacity: 1;
95
+ }
96
+ }
97
+
98
+ /* Scale In */
99
+ .scalein {
100
+ animation: scalein 0.4s ease-out;
101
+ }
102
+
103
+ @keyframes scalein {
104
+ from {
105
+ transform: scale(0.8);
106
+ opacity: 0;
107
+ }
108
+ to {
109
+ transform: scale(1);
110
+ opacity: 1;
111
+ }
112
+ }
113
+
114
+ /* Bounce In */
115
+ .bouncein {
116
+ animation: bouncein 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
117
+ }
118
+
119
+ @keyframes bouncein {
120
+ 0% {
121
+ transform: scale(0);
122
+ opacity: 0;
123
+ }
124
+ 50% {
125
+ transform: scale(1.1);
126
+ }
127
+ 100% {
128
+ transform: scale(1);
129
+ opacity: 1;
130
+ }
131
+ }
132
+
133
+ /* Slide Up */
134
+ .slideup {
135
+ animation: slideup 0.5s ease-out;
136
+ }
137
+
138
+ @keyframes slideup {
139
+ from {
140
+ transform: translateY(20px);
141
+ opacity: 0;
142
+ }
143
+ to {
144
+ transform: translateY(0);
145
+ opacity: 1;
146
+ }
147
+ }
148
+
149
+ /* Slide Down */
150
+ .slidedown {
151
+ animation: slidedown 0.5s ease-out;
152
+ }
153
+
154
+ @keyframes slidedown {
155
+ from {
156
+ transform: translateY(-20px);
157
+ opacity: 0;
158
+ }
159
+ to {
160
+ transform: translateY(0);
161
+ opacity: 1;
162
+ }
163
+ }
164
+
165
+ /* Rotate In */
166
+ .rotatein {
167
+ animation: rotatein 0.6s ease-out;
168
+ }
169
+
170
+ @keyframes rotatein {
171
+ from {
172
+ transform: rotate(-180deg) scale(0);
173
+ opacity: 0;
174
+ }
175
+ to {
176
+ transform: rotate(0) scale(1);
177
+ opacity: 1;
178
+ }
179
+ }
180
+
181
+ /* Pulse */
182
+ .pulse {
183
+ animation: pulse 1.5s ease-in-out infinite;
184
+ }
185
+
186
+ @keyframes pulse {
187
+ 0%, 100% {
188
+ transform: scale(1);
189
+ }
190
+ 50% {
191
+ transform: scale(1.05);
192
+ }
193
+ }
194
+
195
+ /* Shake */
196
+ .shake {
197
+ animation: shake 0.5s ease-in-out;
198
+ }
199
+
200
+ @keyframes shake {
201
+ 0%, 100% {
202
+ transform: translateX(0);
203
+ }
204
+ 10%, 30%, 50%, 70%, 90% {
205
+ transform: translateX(-5px);
206
+ }
207
+ 20%, 40%, 60%, 80% {
208
+ transform: translateX(5px);
209
+ }
210
210
  }