@finqu/cool 1.3.0 → 2.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.
Files changed (74) hide show
  1. package/README.md +23 -9
  2. package/dist/css/cool.css +13391 -7742
  3. package/dist/css/cool.css.map +1 -1
  4. package/dist/css/cool.min.css +2 -93
  5. package/dist/css/cool.min.css.map +1 -1
  6. package/dist/js/cool.bundle.js +16051 -17050
  7. package/dist/js/cool.bundle.js.map +1 -1
  8. package/dist/js/cool.bundle.min.js +11 -18
  9. package/dist/js/cool.bundle.min.js.map +1 -1
  10. package/dist/js/cool.esm.js +3469 -4468
  11. package/dist/js/cool.esm.js.map +1 -1
  12. package/dist/js/cool.esm.min.js +2 -8
  13. package/dist/js/cool.esm.min.js.map +1 -1
  14. package/dist/js/cool.js +5083 -6089
  15. package/dist/js/cool.js.map +1 -1
  16. package/dist/js/cool.min.js +2 -8
  17. package/dist/js/cool.min.js.map +1 -1
  18. package/package.json +48 -16
  19. package/scss/LISENCE +15 -0
  20. package/scss/_badge.scss +134 -0
  21. package/scss/_button-group.scss +80 -0
  22. package/scss/_buttons.scss +304 -0
  23. package/scss/_dark.scss +637 -0
  24. package/scss/_dialog.scss +351 -0
  25. package/scss/_dropdown.scss +165 -0
  26. package/scss/_forms.scss +613 -0
  27. package/scss/_frame.scss +948 -0
  28. package/scss/_grid.scss +215 -0
  29. package/scss/_input-group.scss +326 -0
  30. package/scss/_list-group.scss +127 -0
  31. package/scss/_media.scss +439 -0
  32. package/scss/_navbar.scss +122 -0
  33. package/scss/_notification.scss +115 -0
  34. package/scss/_pagination.scss +82 -0
  35. package/scss/_popover.scss +61 -0
  36. package/scss/_reboot.scss +306 -0
  37. package/scss/_root.scss +848 -0
  38. package/scss/_section.scss +735 -0
  39. package/scss/_select.scss +559 -0
  40. package/scss/_tables.scss +611 -0
  41. package/scss/_tabs.scss +50 -0
  42. package/scss/_toast.scss +277 -0
  43. package/scss/_tooltip.scss +130 -0
  44. package/scss/_typography.scss +166 -0
  45. package/scss/_variables.scss +1229 -0
  46. package/scss/cool.scss +69 -0
  47. package/scss/utilities/_align.scss +51 -0
  48. package/scss/utilities/_animation.scss +165 -0
  49. package/scss/utilities/_background.scss +72 -0
  50. package/scss/utilities/_borders.scss +205 -0
  51. package/scss/utilities/_collapse.scss +28 -0
  52. package/scss/utilities/_cursor.scss +160 -0
  53. package/scss/utilities/_display.scss +116 -0
  54. package/scss/utilities/_embed.scss +89 -0
  55. package/scss/utilities/_fill.scss +79 -0
  56. package/scss/utilities/_filters.scss +233 -0
  57. package/scss/utilities/_flex.scss +216 -0
  58. package/scss/utilities/_grid.scss +136 -0
  59. package/scss/utilities/_opacity.scss +131 -0
  60. package/scss/utilities/_overflow.scss +242 -0
  61. package/scss/utilities/_perfect-scrollbar.scss +147 -0
  62. package/scss/utilities/_pointer-events.scss +125 -0
  63. package/scss/utilities/_position.scss +130 -0
  64. package/scss/utilities/_screen-readers.scss +95 -0
  65. package/scss/utilities/_shadows.scss +195 -0
  66. package/scss/utilities/_sizing.scss +288 -0
  67. package/scss/utilities/_spacing.scss +168 -0
  68. package/scss/utilities/_stroke.scss +124 -0
  69. package/scss/utilities/_text.scss +420 -0
  70. package/scss/utilities/_transform.scss +232 -0
  71. package/scss/utilities/_transitions.scss +147 -0
  72. package/scss/utilities/_user-select.scss +93 -0
  73. package/scss/utilities/_visibility.scss +66 -0
  74. package/scss/utilities/_z-index.scss +169 -0
package/scss/_select.scss ADDED
@@ -0,0 +1,559 @@
1
+ @use "variables" as *;
2
+ /* Select ========================================================================== */
3
+
4
+ @mixin cool-select {
5
+ .select-container {
6
+ display: inline-flex;
7
+ flex-direction: column;
8
+ flex-basis: 100%;
9
+ width: 100%;
10
+ max-width: 100%;
11
+ position: relative;
12
+ vertical-align: top;
13
+ border-radius: var(--cool-select-border-radius);
14
+ font-family: var(--cool-font-family-base);
15
+
16
+ &.form-control {
17
+ border: 0;
18
+ padding: 0;
19
+ height: fit-content;
20
+ }
21
+
22
+ &.select-auto-height {
23
+ height: fit-content;
24
+ }
25
+
26
+ svg,
27
+ .icon {
28
+ pointer-events: none;
29
+ }
30
+
31
+ .select {
32
+ font-size: var(--cool-input-font-size);
33
+ text-align: left;
34
+ background-color: var(--cool-select-bg);
35
+ transition:
36
+ box-shadow 0.1s ease-in-out,
37
+ max-height 0.3s var(--cool-select-animation-timing);
38
+ border: var(--cool-select-border-width) solid var(--cool-select-border-color);
39
+ border-radius: var(--cool-select-border-radius);
40
+
41
+ .select-header {
42
+ display: flex;
43
+ justify-content: space-between;
44
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
45
+ color: var(--cool-select-header-color);
46
+ white-space: nowrap;
47
+ box-sizing: border-box;
48
+ cursor: pointer;
49
+ user-select: none;
50
+ min-height: calc(var(--cool-input-height) - var(--cool-input-border-width) * 2);
51
+ font-size: var(--cool-input-font-size);
52
+ line-height: var(--cool-line-height-base);
53
+ height: min-content;
54
+ align-items: center;
55
+
56
+ .select-title {
57
+ overflow: hidden;
58
+ text-overflow: ellipsis;
59
+ flex: 1;
60
+
61
+ input {
62
+ background-color: transparent;
63
+ }
64
+
65
+ & + .select-icon {
66
+ padding-left: var(--cool-select-item-padding-x);
67
+ pointer-events: none;
68
+ }
69
+
70
+ &:has(.chip) {
71
+ display: flex;
72
+ flex-wrap: wrap;
73
+ gap: 5px;
74
+ align-items: center;
75
+ max-width: 100%;
76
+ }
77
+
78
+ > span:not(.chip) {
79
+ white-space: normal;
80
+ display: inline-flex;
81
+ min-width: 0;
82
+ overflow: hidden;
83
+ text-overflow: ellipsis;
84
+ line-height: var(--cool-line-height-base);
85
+ }
86
+
87
+ .chip {
88
+ background-color: var(--cool-select-chip-bg);
89
+ border-radius: var(--cool-select-chip-border-radius);
90
+ padding: var(--cool-select-chip-padding);
91
+ font-size: var(--cool-select-chip-font-size);
92
+ display: flex;
93
+ align-items: center;
94
+
95
+ &:not(.chip-truncated) {
96
+ span.chip-title {
97
+ text-wrap: balance;
98
+ }
99
+ }
100
+
101
+ &.chip-truncated {
102
+ max-width: var(--cool-select-chip-max-width);
103
+
104
+ span.chip-title {
105
+ text-overflow: ellipsis;
106
+ }
107
+ }
108
+
109
+ span.chip-title {
110
+ display: inline-block;
111
+ min-width: 0;
112
+ overflow: hidden;
113
+ }
114
+ }
115
+ }
116
+
117
+ &.select-placeholder {
118
+ color: var(--cool-select-placeholder-color);
119
+ font-style: var(--cool-select-placeholder-font-style);
120
+ cursor: default;
121
+ }
122
+ }
123
+
124
+ .select-content {
125
+ display: none;
126
+ pointer-events: none;
127
+ opacity: 0;
128
+ margin: var(--cool-select-spacer) 0;
129
+ overflow: hidden;
130
+ position: absolute;
131
+ background: var(--cool-select-bg, #fff);
132
+ opacity: 0;
133
+ width: var(--cool-select-content-width, auto);
134
+ height: 100%;
135
+ border: var(--cool-select-border-width) solid var(--cool-select-border-color);
136
+ margin-top: 5px;
137
+ border-radius: var(--cool-select-border-radius);
138
+ left: 0;
139
+ box-shadow: var(--cool-select-box-shadow);
140
+
141
+ &:has(.select-footer) .select-scrollable-content {
142
+ padding-bottom: 0;
143
+ }
144
+
145
+ .select-search {
146
+ display: flex;
147
+ justify-content: space-between;
148
+ border-bottom: var(--cool-select-border-width) solid var(--cool-select-border-color);
149
+ margin: var(--cool-select-spacer) var(--cool-select-item-padding-x) 0
150
+ var(--cool-select-item-padding-x);
151
+ box-sizing: border-box;
152
+ color: var(--cool-select-item-color);
153
+
154
+ .select-search-input {
155
+ flex: 1 auto;
156
+
157
+ input[name="select-search"] {
158
+ width: 100%;
159
+ border: 0;
160
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
161
+ box-sizing: border-box;
162
+ background-color: transparent;
163
+
164
+ &:focus {
165
+ outline: 0;
166
+
167
+ &::placeholder {
168
+ color: transparent;
169
+ }
170
+ }
171
+ }
172
+ }
173
+
174
+ .select-search-icon {
175
+ color: var(--cool-select-search-icon-color);
176
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
177
+
178
+ &[data-clear-search="true"] {
179
+ cursor: pointer;
180
+ }
181
+ }
182
+ }
183
+
184
+ .select-scrollable-content {
185
+ position: relative;
186
+ padding: var(--cool-select-spacer) 0;
187
+ overflow-y: auto;
188
+ overflow-x: hidden;
189
+ }
190
+
191
+ .select-footer {
192
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
193
+ box-sizing: border-box;
194
+
195
+ .btn,
196
+ button {
197
+ margin: 0;
198
+ }
199
+ }
200
+
201
+ .select-item {
202
+ width: 100%;
203
+ color: var(--cool-select-item-color);
204
+ text-align: inherit;
205
+ white-space: nowrap;
206
+ background-color: transparent;
207
+ box-sizing: border-box;
208
+
209
+ &:hover,
210
+ &:focus {
211
+ color: var(--cool-select-item-hover-color);
212
+ text-decoration: none;
213
+ background-color: var(--cool-select-item-hover-bg);
214
+ }
215
+
216
+ &.disabled,
217
+ &:disabled {
218
+ color: var(--cool-select-item-disabled-color);
219
+ background-color: transparent;
220
+ }
221
+
222
+ label {
223
+ display: flex;
224
+ align-items: center;
225
+ width: 100%;
226
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
227
+ font-weight: var(--cool-font-weight-normal);
228
+ box-sizing: border-box;
229
+ }
230
+
231
+ .select-item-checkbox,
232
+ .select-item-radio {
233
+ padding: 0;
234
+ }
235
+
236
+ .form-check {
237
+ display: flex;
238
+
239
+ .form-check-label {
240
+ white-space: nowrap;
241
+ }
242
+ }
243
+ }
244
+
245
+ .select-divider {
246
+ height: 0;
247
+ margin: var(--cool-nav-divider-margin-y) 0;
248
+ overflow: hidden;
249
+ border-top: 1px solid var(--cool-select-divider-bg);
250
+ }
251
+ }
252
+
253
+ .select-content-expander {
254
+ display: grid;
255
+ grid-template-rows: 0fr;
256
+ overflow: hidden;
257
+ position: absolute;
258
+ background: white;
259
+ opacity: 0;
260
+ width: 100%;
261
+ margin: 5px 0;
262
+ border-radius: var(--cool-select-border-radius);
263
+ left: 0;
264
+ opacity: 0;
265
+
266
+ .select-content {
267
+ position: relative;
268
+ margin: 0;
269
+ min-height: 0;
270
+ }
271
+ }
272
+
273
+ &.show {
274
+ z-index: var(--cool-zindex-select);
275
+ box-shadow: var(--cool-select-box-shadow);
276
+
277
+ .select-content-expander {
278
+ grid-template-rows: 1fr;
279
+ }
280
+
281
+ .select-content-expander,
282
+ .select-content {
283
+ pointer-events: all;
284
+ opacity: 1;
285
+ visibility: visible;
286
+ transition:
287
+ visibility var(--animation-length),
288
+ opacity 10ms var(--cool-select-animation-timing);
289
+ }
290
+
291
+ .select-content {
292
+ display: block;
293
+ }
294
+ }
295
+
296
+ &.select-dropup {
297
+ .select-content {
298
+ bottom: 100%;
299
+ top: auto;
300
+ margin-bottom: 5px;
301
+ margin-top: 0;
302
+ }
303
+ }
304
+ }
305
+
306
+ &.select-inline {
307
+ width: auto;
308
+
309
+ .select {
310
+ position: relative;
311
+ overflow: hidden;
312
+
313
+ .select-header {
314
+ position: relative;
315
+ z-index: 2;
316
+ background-color: var(--cool-select-bg);
317
+ border-radius: var(--cool-select-border-radius) var(--cool-select-border-radius) 0 0;
318
+ }
319
+
320
+ .select-content {
321
+ top: calc(100% - var(--cool-select-border-radius));
322
+ z-index: 1;
323
+ position: absolute;
324
+ left: calc(var(--cool-select-border-width) * -1);
325
+ width: calc(var(--cool-select-content-width, 100%) + var(--cool-select-border-width) * 2);
326
+ background-color: var(--cool-select-bg);
327
+ margin: 0;
328
+ border-left: var(--cool-select-border-width) solid var(--cool-select-border-color);
329
+ border-right: var(--cool-select-border-width) solid var(--cool-select-border-color);
330
+ border-bottom: var(--cool-select-border-width) solid var(--cool-select-border-color);
331
+ transition: box-shadow 0.1s ease-in-out;
332
+ border-radius: 0 0 var(--cool-select-border-radius) var(--cool-select-border-radius);
333
+ }
334
+
335
+ &.show {
336
+ overflow: visible;
337
+ z-index: var(--cool-zindex-select);
338
+ box-shadow: none;
339
+
340
+ .select-content {
341
+ opacity: 1;
342
+ box-shadow: var(--cool-select-box-shadow);
343
+ }
344
+ }
345
+ }
346
+ }
347
+
348
+ &.form-control-sm {
349
+ .select {
350
+ font-size: var(--cool-font-size-sm);
351
+ border-radius: var(--cool-input-border-radius-sm);
352
+
353
+ .select-header {
354
+ min-height: calc(var(--cool-input-height-sm) - var(--cool-input-border-width) * 2);
355
+ padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
356
+ }
357
+
358
+ .select-content {
359
+ .select-search {
360
+ margin: var(--cool-select-spacer-sm) var(--cool-select-item-padding-x-sm);
361
+
362
+ .select-search-input input[name="select-search"] {
363
+ padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
364
+ }
365
+
366
+ .select-search-icon {
367
+ padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
368
+ }
369
+ }
370
+
371
+ .select-scrollable-content {
372
+ padding: var(--cool-select-spacer-sm) 0;
373
+ }
374
+
375
+ .select-item label {
376
+ padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
377
+ }
378
+
379
+ .select-footer {
380
+ padding: var(--cool-select-item-padding-y-sm) var(--cool-select-item-padding-x-sm);
381
+ }
382
+ }
383
+ }
384
+ }
385
+ }
386
+
387
+ body {
388
+ > .select-fixed-container {
389
+ font-size: var(--cool-font-size-base);
390
+ text-align: left;
391
+ background-color: var(--cool-select-bg);
392
+ transition:
393
+ box-shadow 0.1s ease-in-out,
394
+ max-height 0.3s var(--cool-select-animation-timing);
395
+ z-index: 1;
396
+ border: var(--cool-select-border-width) solid var(--cool-select-border-color);
397
+ border-radius: var(--cool-select-border-radius);
398
+
399
+ .select-content {
400
+ pointer-events: none;
401
+ opacity: 0;
402
+ margin: var(--cool-select-spacer) 0;
403
+ overflow: hidden;
404
+ position: absolute;
405
+ background: var(--cool-select-bg);
406
+ opacity: 0;
407
+ width: var(--cool-select-content-width, auto);
408
+ border: var(--cool-select-border-width) solid var(--cool-select-border-color);
409
+ margin-top: 5px;
410
+ border-radius: var(--cool-select-border-radius);
411
+ left: 0;
412
+ box-shadow: var(--cool-select-box-shadow);
413
+
414
+ .select-search {
415
+ display: flex;
416
+ justify-content: space-between;
417
+ border-bottom: var(--cool-select-border-width) solid var(--cool-select-border-color);
418
+ margin: var(--cool-select-spacer) var(--cool-select-item-padding-x);
419
+ box-sizing: border-box;
420
+ color: var(--cool-select-item-color);
421
+
422
+ .select-search-input {
423
+ flex: 1 auto;
424
+
425
+ input[name="select-search"] {
426
+ width: 100%;
427
+ border: 0;
428
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
429
+ box-sizing: border-box;
430
+ background-color: transparent;
431
+
432
+ &:focus {
433
+ outline: 0;
434
+
435
+ &::placeholder {
436
+ color: transparent;
437
+ }
438
+ }
439
+ }
440
+ }
441
+
442
+ .select-search-icon {
443
+ color: var(--cool-select-search-icon-color);
444
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
445
+
446
+ &[data-clear-search="true"] {
447
+ cursor: pointer;
448
+ }
449
+ }
450
+ }
451
+
452
+ .select-scrollable-content {
453
+ position: relative;
454
+ padding: var(--cool-select-spacer) 0;
455
+ }
456
+
457
+ .select-footer {
458
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
459
+ box-sizing: border-box;
460
+
461
+ .btn,
462
+ button {
463
+ margin: 0;
464
+ }
465
+ }
466
+
467
+ .select-item {
468
+ width: 100%;
469
+ color: var(--cool-select-item-color);
470
+ text-align: inherit;
471
+ white-space: nowrap;
472
+ background-color: transparent;
473
+ box-sizing: border-box;
474
+
475
+ &:hover,
476
+ &:focus {
477
+ color: var(--cool-select-item-hover-color);
478
+ text-decoration: none;
479
+ background-color: var(--cool-select-item-hover-bg);
480
+ }
481
+
482
+ &.disabled,
483
+ &:disabled {
484
+ color: var(--cool-select-item-disabled-color);
485
+ background-color: transparent;
486
+ }
487
+
488
+ label {
489
+ display: flex;
490
+ align-items: center;
491
+ width: 100%;
492
+ padding: var(--cool-select-item-padding-y) var(--cool-select-item-padding-x);
493
+ font-weight: var(--cool-font-weight-normal);
494
+ box-sizing: border-box;
495
+ }
496
+
497
+ .select-item-checkbox,
498
+ .select-item-radio {
499
+ padding: 0;
500
+ }
501
+ }
502
+
503
+ .select-divider {
504
+ height: 0;
505
+ margin: var(--cool-nav-divider-margin-y) 0;
506
+ overflow: hidden;
507
+ border-top: 1px solid var(--cool-select-divider-bg);
508
+ }
509
+ }
510
+
511
+ .select-content-expander {
512
+ display: grid;
513
+ grid-template-rows: 0fr;
514
+ overflow: hidden;
515
+ position: absolute;
516
+ background: white;
517
+ opacity: 0;
518
+ width: 100%;
519
+ margin: 5px 0;
520
+ border-radius: var(--cool-select-border-radius);
521
+ left: 0;
522
+ opacity: 0;
523
+
524
+ .select-content {
525
+ position: relative;
526
+ transition: opacity 10ms var(--cool-select-animation-timing) var(--animation-length);
527
+ margin: 0;
528
+ min-height: 0;
529
+ }
530
+ }
531
+
532
+ &.show {
533
+ .select-content-expander {
534
+ grid-template-rows: 1fr;
535
+ z-index: var(--cool-zindex-select);
536
+ box-shadow: var(--cool-select-box-shadow);
537
+ }
538
+
539
+ .select-content-expander,
540
+ .select-content {
541
+ pointer-events: all;
542
+ opacity: 1;
543
+ visibility: visible;
544
+ transition:
545
+ visibility var(--animation-length),
546
+ opacity 10ms var(--cool-select-animation-timing);
547
+ }
548
+ }
549
+ }
550
+ }
551
+ }
552
+
553
+ @if $cool-use-component-layer {
554
+ @layer components {
555
+ @include cool-select;
556
+ }
557
+ } @else {
558
+ @include cool-select;
559
+ }