@dodlhuat/basix 1.2.4 → 1.2.6

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/css/form.scss CHANGED
@@ -1,28 +1,82 @@
1
1
  @use "properties";
2
2
  @use "parameters" as *;
3
3
 
4
+ // ─────────────────────────────────────────────────────────────────────────────
5
+ // Keyframes
6
+ // ─────────────────────────────────────────────────────────────────────────────
7
+
8
+ @keyframes field-error-shake {
9
+ 0%, 100% { transform: translateX(0); }
10
+ 18% { transform: translateX(-5px); }
11
+ 36% { transform: translateX(4px); }
12
+ 54% { transform: translateX(-3px); }
13
+ 72% { transform: translateX(2px); }
14
+ }
15
+
16
+ @keyframes dropdown-in {
17
+ from {
18
+ opacity: 0;
19
+ transform: translateY(-6px) scale(0.975);
20
+ }
21
+ to {
22
+ opacity: 1;
23
+ transform: translateY(0) scale(1);
24
+ }
25
+ }
26
+
27
+ @keyframes hint-appear {
28
+ from {
29
+ opacity: 0;
30
+ transform: translateY(-3px);
31
+ }
32
+ to {
33
+ opacity: 1;
34
+ transform: translateY(0);
35
+ }
36
+ }
37
+
38
+ // ─────────────────────────────────────────────────────────────────────────────
39
+ // Base field styles
40
+ // ─────────────────────────────────────────────────────────────────────────────
41
+
4
42
  textarea, select, .select .dropdown, input {
5
43
  width: 100%;
6
- border: 1px solid var(--divider);
7
- border-radius: calc($border-radius / 2);
8
- padding: calc($spacing / 2);
44
+ border: 1.5px solid var(--divider);
45
+ border-radius: calc($border-radius * 1.5);
46
+ padding: 0 calc($spacing * 0.65);
9
47
  box-sizing: border-box;
10
48
  background-color: var(--background);
11
- min-height: $form-height;
49
+ min-height: calc($form-height * 1.3);
12
50
  font-size: $spacing;
13
51
  color: var(--primary-text);
14
- box-shadow: $shadow;
15
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
52
+ box-shadow:
53
+ inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
54
+ 0 1px 2px rgba(0, 0, 0, 0.04);
55
+ transition:
56
+ border-color 0.16s ease,
57
+ box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
58
+ background-color 0.16s ease;
16
59
  outline: none;
17
60
 
18
61
  &::placeholder {
19
62
  color: var(--secondary-text);
20
- opacity: 1;
63
+ opacity: 0.65;
64
+ font-weight: 400;
65
+ }
66
+
67
+ &:hover:not(:focus):not(:disabled):not([readonly]) {
68
+ border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
69
+ box-shadow:
70
+ inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
71
+ 0 2px 8px rgba(0, 0, 0, 0.07);
21
72
  }
22
73
 
23
74
  &:focus {
24
75
  border-color: var(--accent-color);
25
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
76
+ box-shadow:
77
+ inset 0 1px 3px rgba(0, 0, 0, 0.03),
78
+ 0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent),
79
+ 0 2px 12px rgba(0, 0, 0, 0.06);
26
80
  }
27
81
 
28
82
  &:disabled {
@@ -31,14 +85,24 @@ textarea, select, .select .dropdown, input {
31
85
  color: var(--secondary-text);
32
86
  cursor: not-allowed;
33
87
  box-shadow: none;
88
+ opacity: 0.58;
34
89
  }
35
90
  }
36
91
 
92
+ textarea {
93
+ padding-top: calc($spacing * 0.55);
94
+ padding-bottom: calc($spacing * 0.55);
95
+ }
96
+
37
97
  select {
38
- padding: calc($spacing / 2);
98
+ padding: 0 calc($spacing * 0.65);
39
99
  cursor: pointer;
40
100
  }
41
101
 
102
+ // ─────────────────────────────────────────────────────────────────────────────
103
+ // Custom select / dropdown
104
+ // ─────────────────────────────────────────────────────────────────────────────
105
+
42
106
  .select-group {
43
107
  .dropdown {
44
108
  position: relative;
@@ -46,21 +110,36 @@ select {
46
110
  }
47
111
 
48
112
  .dropdown-selected {
49
- border: 1px solid var(--divider);
50
- padding: 0 calc($spacing / 2);
51
- border-radius: calc($border-radius / 2);
113
+ border: 1.5px solid var(--divider);
114
+ padding: 0 calc($spacing * 0.65);
115
+ border-radius: calc($border-radius * 1.5);
52
116
  cursor: pointer;
53
117
  background: var(--background);
54
- height: $form-height;
55
- line-height: $form-height;
56
- box-shadow: $shadow;
57
- transition: border-color 0.15s ease, box-shadow 0.15s ease;
118
+ height: calc($form-height * 1.3);
119
+ line-height: calc($form-height * 1.3);
120
+ box-shadow:
121
+ inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
122
+ 0 1px 2px rgba(0, 0, 0, 0.04);
123
+ transition:
124
+ border-color 0.16s ease,
125
+ box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
126
+ user-select: none;
127
+
128
+ &:hover {
129
+ border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
130
+ box-shadow:
131
+ inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
132
+ 0 2px 8px rgba(0, 0, 0, 0.07);
133
+ }
58
134
 
59
135
  &:focus,
60
136
  &:focus-visible {
61
137
  outline: none;
62
138
  border-color: var(--accent-color);
63
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
139
+ box-shadow:
140
+ inset 0 1px 3px rgba(0, 0, 0, 0.03),
141
+ 0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent),
142
+ 0 2px 12px rgba(0, 0, 0, 0.06);
64
143
  }
65
144
 
66
145
  &::after {
@@ -68,48 +147,75 @@ select {
68
147
  content: "\e5cf";
69
148
  float: right;
70
149
  color: var(--secondary-text);
71
- transition: transform 0.2s ease;
150
+ transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
151
+ line-height: inherit;
72
152
  }
73
153
  }
74
154
 
75
- .dropdown.open .dropdown-selected::after {
76
- transform: rotate(180deg);
155
+ .dropdown.open .dropdown-selected {
156
+ border-color: var(--accent-color);
157
+ box-shadow:
158
+ inset 0 1px 3px rgba(0, 0, 0, 0.03),
159
+ 0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent);
160
+
161
+ &::after {
162
+ transform: rotate(180deg);
163
+ }
77
164
  }
78
165
 
79
166
  .dropdown-options {
80
167
  position: absolute;
81
- top: calc(100% + 5px);
168
+ top: calc(100% + 6px);
82
169
  left: 0;
83
170
  right: 0;
84
- border: 1px solid var(--divider);
85
- border-radius: calc($border-radius / 2);
171
+ border: 1.5px solid var(--divider);
172
+ border-radius: calc($border-radius * 1.5);
86
173
  display: none;
87
174
  flex-direction: column;
88
175
  z-index: 10;
89
- max-height: 250px;
176
+ max-height: 260px;
90
177
  overflow-y: auto;
91
178
  background-color: var(--background);
92
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
179
+ box-shadow:
180
+ 0 8px 32px rgba(0, 0, 0, 0.11),
181
+ 0 2px 8px rgba(0, 0, 0, 0.06);
182
+ padding: 0.25rem;
183
+ gap: 1px;
184
+ transform-origin: top center;
93
185
  }
94
186
 
95
187
  .dropdown-option {
96
- padding: 10px calc($spacing / 2);
188
+ padding: 0.6rem calc($spacing * 0.65);
97
189
  cursor: pointer;
190
+ border-radius: calc($border-radius * 1.1);
98
191
  transition: background 0.1s ease;
192
+ font-size: 0.9375rem;
193
+ position: relative;
99
194
  }
100
195
 
101
196
  .dropdown-option:hover {
102
- background: var(--secondary-background);
197
+ background: var(--hover);
103
198
  }
104
199
 
105
200
  .dropdown-option.selected {
106
201
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
107
202
  color: var(--accent-color);
108
203
  font-weight: 500;
204
+
205
+ &::after {
206
+ content: "✓";
207
+ position: absolute;
208
+ right: calc($spacing * 0.65);
209
+ top: 50%;
210
+ transform: translateY(-50%);
211
+ font-size: 0.8125rem;
212
+ line-height: 1;
213
+ }
109
214
  }
110
215
 
111
216
  .dropdown.open .dropdown-options {
112
217
  display: flex;
218
+ animation: dropdown-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
113
219
  }
114
220
 
115
221
  .hidden {
@@ -122,25 +228,29 @@ select {
122
228
  top: 0;
123
229
  left: 0;
124
230
  width: 100%;
125
- background: var(--secondary-background);
231
+ background: var(--background);
126
232
  color: var(--primary-text);
127
233
  text-align: center;
128
- padding: 15px;
129
- padding-top: calc(15px + env(safe-area-inset-top));
234
+ padding: 18px 15px;
235
+ padding-top: calc(18px + env(safe-area-inset-top));
130
236
  font-weight: 600;
131
237
  font-size: $spacing;
132
238
  border-bottom: 1px solid var(--divider);
133
- backdrop-filter: blur(12px);
134
- -webkit-backdrop-filter: blur(12px);
239
+ backdrop-filter: blur(16px);
240
+ -webkit-backdrop-filter: blur(16px);
135
241
  z-index: 11;
242
+ letter-spacing: 0.01em;
136
243
 
137
244
  .dropdown-options-icon {
138
245
  position: absolute;
139
- right: 45px;
246
+ right: 20px;
140
247
  top: 50%;
141
248
  transform: translateY(-50%);
142
249
  cursor: pointer;
143
250
  color: var(--accent-color);
251
+ font-size: 0.9375rem;
252
+ font-weight: 500;
253
+ letter-spacing: 0;
144
254
  }
145
255
  }
146
256
 
@@ -152,22 +262,34 @@ select {
152
262
  bottom: 0;
153
263
  border: none;
154
264
  border-radius: 0;
155
- padding-top: calc(56px + env(safe-area-inset-top));
265
+ padding: 0;
266
+ padding-top: calc(62px + env(safe-area-inset-top));
156
267
  padding-bottom: env(safe-area-inset-bottom);
157
- font-size: 1.1rem;
268
+ font-size: 1.0625rem;
158
269
  max-height: none;
159
270
  box-shadow: none;
160
271
  background-color: var(--background);
272
+ gap: 0;
161
273
  }
162
274
 
163
275
  .dropdown-option {
164
- padding: 14px calc($spacing / 2);
276
+ padding: 15px 20px;
165
277
  border-bottom: 1px solid var(--divider);
278
+ border-radius: 0;
279
+ font-size: 1.0625rem;
280
+
281
+ &.selected::after {
282
+ right: 20px;
283
+ font-size: 0.9375rem;
284
+ }
166
285
  }
167
286
  }
168
287
  }
169
288
 
170
- // Form group — label + input + hint layout
289
+ // ─────────────────────────────────────────────────────────────────────────────
290
+ // Form group — label + field + hint
291
+ // ─────────────────────────────────────────────────────────────────────────────
292
+
171
293
  .form-group {
172
294
  display: flex;
173
295
  flex-direction: column;
@@ -175,33 +297,61 @@ select {
175
297
 
176
298
  label {
177
299
  font-size: 0.8125rem;
178
- font-weight: 500;
300
+ font-weight: 600;
179
301
  color: var(--primary-text);
180
- letter-spacing: 0.01em;
302
+ letter-spacing: 0.025em;
181
303
  }
182
304
 
183
305
  .form-hint {
306
+ display: flex;
307
+ align-items: flex-start;
308
+ gap: 0.3rem;
184
309
  font-size: 0.75rem;
185
- line-height: 1.45;
310
+ line-height: 1.5;
186
311
  color: var(--secondary-text);
187
- margin-top: 0.125rem;
312
+ margin-top: 0.1rem;
313
+
314
+ &::before {
315
+ content: '';
316
+ display: none;
317
+ flex-shrink: 0;
318
+ width: 13px;
319
+ height: 13px;
320
+ border-radius: 50%;
321
+ margin-top: 0.1em;
322
+ font-size: 8.5px;
323
+ font-weight: 700;
324
+ line-height: 13px;
325
+ text-align: center;
326
+ color: #fff;
327
+ }
188
328
  }
189
329
 
190
330
  &.error {
191
331
  input, textarea, select {
192
332
  border-color: var(--error);
193
- background-color: color-mix(in srgb, var(--error) 4%, var(--background));
333
+ background-color: color-mix(in srgb, var(--error) 3%, var(--background));
334
+ box-shadow:
335
+ inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
336
+ 0 1px 2px rgba(0, 0, 0, 0.04);
337
+ animation: field-error-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
194
338
 
195
339
  &:focus {
196
340
  border-color: var(--error);
197
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--error) 15%, transparent);
341
+ box-shadow:
342
+ inset 0 1px 3px rgba(0, 0, 0, 0.03),
343
+ 0 0 0 3.5px color-mix(in srgb, var(--error) 13%, transparent);
198
344
  }
199
345
  }
200
346
 
201
347
  .form-hint {
202
348
  color: var(--error);
349
+ animation: hint-appear 0.2s ease both;
203
350
 
204
351
  &::before {
352
+ content: '!';
353
+ display: block;
354
+ background: var(--error);
205
355
  opacity: 1;
206
356
  }
207
357
  }
@@ -213,21 +363,30 @@ select {
213
363
 
214
364
  &:focus {
215
365
  border-color: var(--success);
216
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent);
366
+ box-shadow:
367
+ inset 0 1px 3px rgba(0, 0, 0, 0.03),
368
+ 0 0 0 3.5px color-mix(in srgb, var(--success) 13%, transparent);
217
369
  }
218
370
  }
219
371
 
220
372
  .form-hint {
221
373
  color: var(--success);
374
+ animation: hint-appear 0.2s ease both;
222
375
 
223
376
  &::before {
377
+ content: '✓';
378
+ display: block;
379
+ background: var(--success);
224
380
  opacity: 1;
225
381
  }
226
382
  }
227
383
  }
228
384
  }
229
385
 
386
+ // ─────────────────────────────────────────────────────────────────────────────
230
387
  // Input group — prefix / suffix addons
388
+ // ─────────────────────────────────────────────────────────────────────────────
389
+
231
390
  .input-group {
232
391
  display: flex;
233
392
 
@@ -239,17 +398,19 @@ select {
239
398
  .input-addon {
240
399
  display: flex;
241
400
  align-items: center;
242
- padding: 0 calc($spacing / 2);
401
+ padding: 0 calc($spacing * 0.65);
243
402
  background-color: var(--secondary-background);
244
- border: 1px solid var(--divider);
403
+ border: 1.5px solid var(--divider);
245
404
  color: var(--secondary-text);
246
405
  font-size: $spacing;
247
406
  white-space: nowrap;
248
- box-shadow: $shadow;
407
+ box-shadow: inset 0 1.5px 4px rgba(0, 0, 0, 0.04);
408
+ font-weight: 500;
409
+ letter-spacing: 0.01em;
249
410
 
250
411
  &:first-child {
251
412
  border-right: none;
252
- border-radius: calc($border-radius / 2) 0 0 calc($border-radius / 2);
413
+ border-radius: calc($border-radius * 1.5) 0 0 calc($border-radius * 1.5);
253
414
 
254
415
  & + input {
255
416
  border-top-left-radius: 0;
@@ -259,7 +420,7 @@ select {
259
420
 
260
421
  &:last-child {
261
422
  border-left: none;
262
- border-radius: 0 calc($border-radius / 2) calc($border-radius / 2) 0;
423
+ border-radius: 0 calc($border-radius * 1.5) calc($border-radius * 1.5) 0;
263
424
  }
264
425
  }
265
426
 
@@ -270,23 +431,32 @@ select {
270
431
  }
271
432
  }
272
433
 
273
- // Readonly state
434
+ // ─────────────────────────────────────────────────────────────────────────────
435
+ // Readonly
436
+ // ─────────────────────────────────────────────────────────────────────────────
437
+
274
438
  input[readonly], textarea[readonly] {
275
439
  background-color: var(--secondary-background);
276
440
  color: var(--secondary-text);
277
441
  cursor: default;
278
442
  box-shadow: none;
443
+ border-style: dashed;
279
444
  }
280
445
 
446
+ // ─────────────────────────────────────────────────────────────────────────────
281
447
  // Size variants
448
+ // ─────────────────────────────────────────────────────────────────────────────
449
+
282
450
  input.input-sm, textarea.input-sm {
283
- min-height: calc($form-height * 0.8);
451
+ min-height: calc($form-height * 0.85);
284
452
  font-size: 0.875rem;
285
- padding: calc($spacing / 4) calc($spacing / 2);
453
+ padding: 0 calc($spacing * 0.5);
454
+ border-radius: calc($border-radius * 1.1);
286
455
  }
287
456
 
288
457
  input.input-lg, textarea.input-lg {
289
- min-height: calc($form-height * 1.4);
458
+ min-height: calc($form-height * 1.65);
290
459
  font-size: 1.125rem;
291
- padding: calc($spacing * 0.6) calc($spacing / 2);
460
+ padding: 0 calc($spacing * 0.75);
461
+ border-radius: calc($border-radius * 1.75);
292
462
  }