@itcase/ui 1.8.134 → 1.8.136

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 (27) hide show
  1. package/dist/cjs/components/Modal.js +2 -2
  2. package/dist/cjs/components/Pagination.js +8 -5
  3. package/dist/components/Modal.js +2 -2
  4. package/dist/components/Pagination.js +8 -5
  5. package/dist/css/components/Checkbox/Checkbox.css +137 -310
  6. package/dist/css/components/Icon/Icon.css +76 -139
  7. package/dist/css/components/Modal/Modal.css +11 -1
  8. package/dist/css/components/Radio/Radio.css +141 -312
  9. package/dist/css/styles/blur/blur.css +3 -3
  10. package/dist/css/styles/border-color/border-color.css +92 -0
  11. package/dist/css/styles/bundle.css +268 -592
  12. package/dist/css/styles/fill/fill.css +156 -36
  13. package/dist/css/styles/text-color/text-color.css +55 -0
  14. package/dist/css/styles/text-gradient/text-gradient.css +1 -2
  15. package/dist/types/components/Accordion/Accordion.interface.d.ts +1 -1
  16. package/package.json +2 -2
  17. package/dist/css/styles/border-color/border-color_active.css +0 -45
  18. package/dist/css/styles/border-color/border-color_active_hover.css +0 -49
  19. package/dist/css/styles/border-color/border-color_focus.css +0 -51
  20. package/dist/css/styles/border-color/border-color_hover.css +0 -63
  21. package/dist/css/styles/fill/fill_active.css +0 -50
  22. package/dist/css/styles/fill/fill_active_hover.css +0 -119
  23. package/dist/css/styles/fill/fill_hover.css +0 -89
  24. package/dist/css/styles/text-color/text-color_active.css +0 -38
  25. package/dist/css/styles/text-color/text-color_active_hover.css +0 -45
  26. package/dist/css/styles/text-color/text-color_disabled.css +0 -13
  27. package/dist/css/styles/text-color/text-color_hover.css +0 -28
package/dist/css/components/Checkbox/Checkbox.css CHANGED
@@ -110,207 +110,98 @@
110
110
  }
111
111
  }
112
112
  .checkbox_fill {
113
- &_active {
114
- &_hover {
115
- &_none {
116
- background-color: transparent;
113
+ &_active_none,
114
+ &_active_hover_none,
115
+ &_hover_none,
116
+ &_none {
117
+ background-color: transparent;
118
+ }
119
+ @each $type in accent, primary, secondary, surface, error, warning, success,
120
+ danger, info, disabled {
121
+ @each $color in primary, secondary, tertiary, quaternary {
122
+ &_active_$(type) {
123
+ &-$(color) {
124
+ & .checkbox__state {
125
+ background: var(--color-$(type)-fill-$(color));
126
+ }
127
+ }
128
+ &-$(color)-active {
129
+ & .checkbox__state {
130
+ background: var(--color-$(type)-fill-active-$(color));
131
+ }
132
+ }
117
133
  }
118
- @each $type in accent, primary, secondary, surface, error, warning,
119
- success, danger, info, disabled {
120
- @each $color in primary, secondary, tertiary, quaternary {
121
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
122
- &_$(type) {
123
- &-$(color) {
134
+ &_active_hover_$(type) {
135
+ &-$(color) {
136
+ &:hover {
137
+ & .checkbox__state {
138
+ background: var(--color-$(type)-fill-$(color));
139
+ }
140
+ }
141
+ &-hover {
142
+ &:hover {
143
+ & .checkbox__state {
144
+ background: var(--color-$(type)-fill-$(color)-hover);
145
+ }
146
+ }
147
+ &-active {
124
148
  &:hover {
125
149
  & .checkbox__state {
126
- background: var(--color-$(type)-fill-$(color));
127
- }
128
- }
129
- &-hover {
130
- &:hover {
131
- & .checkbox__state {
132
- background: var(--color-$(type)-fill-$(color)-hover);
133
- }
134
- }
135
- &-active {
136
- &:hover {
137
- & .checkbox__state {
138
- background: var(
139
- --color-$(type)-fill-$(color)-active-hover
140
- );
141
- }
142
- }
143
- }
144
- }
145
- &-active {
146
- &:hover {
147
- & .checkbox__state {
148
- background: var(--color-$(type)-fill-$(color)-active);
149
- }
150
+ background: var(--color-$(type)-fill-$(color)-active-hover);
150
151
  }
151
152
  }
152
153
  }
153
- &-hover {
154
- &-$(color) {
155
- &:hover {
156
- & .checkbox__state {
157
- background: var(--color-$(type)-fill-hover-$(color));
158
- }
159
- }
154
+ }
155
+ &-active {
156
+ &:hover {
157
+ & .checkbox__state {
158
+ background: var(--color-$(type)-fill-$(color)-active);
160
159
  }
161
160
  }
162
161
  }
163
-
164
- /* } */
165
162
  }
166
- }
167
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
168
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
169
- orange, clementine, apricot, papaya, kumquat, light-orange, peach,
170
- flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
171
- mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
172
- dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
173
- light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
174
- blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
175
- ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
176
- lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,
177
- northern-blue, azure, alaskan-blue, khaki, dark-olive, soft-white,
178
- antique-white, yellow-gold, gold, camel, walnut, stone, pebble, cocoa,
179
- coastal-gray, white, black, alto, athens-gray, sonic-silver {
180
- &_$(palette) {
181
- &:hover {
182
- & .checkbox__state {
183
- background: var(--color-palette-$(palette));
163
+ &-hover {
164
+ &-$(color) {
165
+ &:hover {
166
+ & .checkbox__state {
167
+ background: var(--color-$(type)-fill-hover-$(color));
168
+ }
184
169
  }
185
170
  }
186
171
  }
187
172
  }
188
- }
189
- }
190
- }
191
- .checkbox_fill {
192
- &_active {
193
- &_none {
194
- background-color: transparent;
195
- }
196
- @each $type in accent, primary, secondary, surface, error, warning, success,
197
- danger, info, disabled {
198
- @each $color in primary, secondary, tertiary, quaternary {
199
- &_$(type) {
200
- &-$(color) {
173
+ &_hover_$(type) {
174
+ &-$(color) {
175
+ &:hover {
201
176
  & .checkbox__state {
202
177
  background: var(--color-$(type)-fill-$(color));
203
178
  }
204
179
  }
205
- &-$(color)-active {
206
- & .checkbox__state {
207
- background: var(--color-$(type)-fill-active-$(color));
180
+ &-hover {
181
+ &:hover {
182
+ & .checkbox__state {
183
+ background: var(--color-$(type)-fill-$(color)-hover);
184
+ }
208
185
  }
209
186
  }
210
187
  }
211
- }
212
- }
213
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
214
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
215
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
216
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
217
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
218
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
219
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
220
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
221
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
222
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
223
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
224
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
225
- alto, athens-gray, sonic-silver {
226
- &_$(palette) {
227
- & .checkbox__state {
228
- background: var(--color-palette-$(palette));
229
- }
230
- }
231
- }
232
- }
233
- }
234
- .checkbox_fill {
235
- &_hover {
236
- &_none {
237
- background-color: transparent;
238
- }
239
- @each $type in accent, primary, secondary, surface, error, warning, success,
240
- danger, info, disabled {
241
- @each $color in primary, secondary, tertiary, quaternary {
242
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
243
- &_$(type) {
188
+ &-hover {
244
189
  &-$(color) {
245
190
  &:hover {
246
191
  & .checkbox__state {
247
- background: var(--color-$(type)-fill-$(color));
248
- }
249
- }
250
- &-hover {
251
- &:hover {
252
- & .checkbox__state {
253
- background: var(--color-$(type)-fill-$(color)-hover);
254
- }
255
- }
256
- }
257
- }
258
- &-hover {
259
- &-$(color) {
260
- &:hover {
261
- & .checkbox__state {
262
- background: var(--color-$(type)-fill-hover-$(color));
263
- }
192
+ background: var(--color-$(type)-fill-hover-$(color));
264
193
  }
265
194
  }
266
195
  }
267
196
  }
268
-
269
- /* } */
270
197
  }
271
- }
272
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
273
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
274
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
275
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
276
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
277
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
278
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
279
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
280
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
281
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
282
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
283
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
284
- alto, athens-gray, sonic-silver {
285
- &_$(palette) {
286
- &:hover {
287
- & .checkbox__state {
288
- background: var(--color-palette-$(palette));
289
- }
290
- }
291
- }
292
- }
293
- }
294
- }
295
- .checkbox_fill {
296
- &_none {
297
- background-color: transparent;
298
- }
299
- @each $type in accent, primary, secondary, surface, error, warning, success,
300
- danger, info, disabled {
301
- @each $color in primary, secondary, tertiary, quaternary {
302
- /* @each $alpha in 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 { */
303
198
  &_$(type) {
304
199
  &-$(color) {
305
200
  & .checkbox__state {
306
201
  background: var(--color-$(type)-fill-$(color));
307
202
  }
308
- /* &$(alpha) {
309
- background: var(--color-$(type)-$(color)-$(alpha));
310
- } */
311
203
  }
312
204
  }
313
- /* } */
314
205
  }
315
206
  }
316
207
  @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
@@ -326,76 +217,48 @@
326
217
  dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
327
218
  stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
328
219
  sonic-silver {
329
- &_$(palette) {
220
+ &_active_$(palette) {
330
221
  & .checkbox__state {
331
222
  background: var(--color-palette-$(palette));
332
223
  }
333
224
  }
334
- }
335
- }
336
- .checkbox_border-color {
337
- &_active {
338
- &_none {
339
- border-width: 1px;
340
- border-color: transparent;
341
- border-style: solid;
342
- }
343
- @each $type in accent, primary, secondary, surface, error, warning, success,
344
- danger, info, disabled {
345
- @each $color in primary, secondary, tertiary, quaternary {
346
- &_$(type) {
347
- &-border {
348
- &-$(color) {
349
- &:hover {
350
- & .checkbox__state {
351
- border-width: 1px;
352
- border-color: var(--color-$(type)-border-$(color));
353
- border-style: solid;
354
- }
355
- }
356
- }
357
- }
225
+ &_active_hover_$(palette) {
226
+ &:hover {
227
+ & .checkbox__state {
228
+ background: var(--color-palette-$(palette));
358
229
  }
359
230
  }
360
231
  }
361
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
362
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
363
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
364
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
365
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
366
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
367
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
368
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
369
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
370
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
371
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
372
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
373
- alto, athens-gray, sonic-silver {
374
- &_$(palette) {
375
- &:hover {
376
- & .checkbox__state {
377
- border-width: 1px;
378
- border-color: var(--color-palette-$(palette));
379
- border-style: solid;
380
- }
232
+ &_hover_$(palette) {
233
+ &:hover {
234
+ & .checkbox__state {
235
+ background: var(--color-palette-$(palette));
381
236
  }
382
237
  }
383
238
  }
239
+ &_$(palette) {
240
+ & .checkbox__state {
241
+ background: var(--color-palette-$(palette));
242
+ }
243
+ }
384
244
  }
385
245
  }
386
246
  .checkbox_border-color {
387
- &_active {
388
- &_none {
389
- border-width: 1px;
390
- border-color: transparent;
391
- border-style: solid;
392
- }
393
- @each $type in accent, primary, secondary, surface, error, warning, success,
394
- danger, info, disabled {
395
- @each $color in primary, secondary, tertiary, quaternary {
396
- &_$(type) {
397
- &-border {
398
- &-$(color) {
247
+ &_active_none,
248
+ &_active_hover_none,
249
+ &_hover_none,
250
+ &_none {
251
+ border-width: 1px;
252
+ border-color: transparent;
253
+ border-style: solid;
254
+ }
255
+ @each $type in accent, primary, secondary, surface, error, warning, success,
256
+ danger, info, disabled {
257
+ @each $color in primary, secondary, tertiary, quaternary {
258
+ &_active_hover_$(type) {
259
+ &-border {
260
+ &-$(color) {
261
+ &:hover {
399
262
  & .checkbox__state {
400
263
  border-width: 1px;
401
264
  border-color: var(--color-$(type)-border-$(color));
@@ -405,43 +268,28 @@
405
268
  }
406
269
  }
407
270
  }
408
- }
409
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
410
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
411
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
412
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
413
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
414
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
415
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
416
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
417
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
418
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
419
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
420
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
421
- alto, athens-gray, sonic-silver {
422
- &_$(palette) {
423
- & .checkbox__state {
424
- border-width: 1px;
425
- border-color: var(--color-palette-$(palette));
426
- border-style: solid;
271
+ &_active_$(type) {
272
+ &-border {
273
+ &-$(color) {
274
+ & .checkbox__state {
275
+ border-width: 1px;
276
+ border-color: var(--color-$(type)-border-$(color));
277
+ border-style: solid;
278
+ }
279
+ }
427
280
  }
428
281
  }
429
- }
430
- }
431
- }
432
- .checkboxborder-color {
433
- &_hover {
434
- &_none {
435
- border-width: 1px;
436
- border-color: transparent;
437
- border-style: solid;
438
- }
439
- @each $type in accent, primary, secondary, surface, error, warning, success,
440
- danger, info, disabled {
441
- @each $color in primary, secondary, tertiary, quaternary {
442
- &_$(type) {
443
- &-border {
444
- &-$(color) {
282
+ &_hover {
283
+ &-border {
284
+ &-$(color) {
285
+ &:hover {
286
+ & .checkbox_state {
287
+ border-width: 1px;
288
+ border-color: var(--color-$(type)-border-$(color));
289
+ border-style: solid;
290
+ }
291
+ }
292
+ &-hover {
445
293
  &:hover {
446
294
  & .checkbox_state {
447
295
  border-width: 1px;
@@ -449,63 +297,10 @@
449
297
  border-style: solid;
450
298
  }
451
299
  }
452
- &-hover {
453
- &:hover {
454
- & .checkbox_state {
455
- border-width: 1px;
456
- border-color: var(--color-$(type)-border-$(color));
457
- border-style: solid;
458
- }
459
- }
460
- }
461
- }
462
- }
463
- }
464
- }
465
- }
466
- @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
467
- pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
468
- clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
469
- rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
470
- canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
471
- spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
472
- surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
473
- denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
474
- lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,
475
- storm-gray, cactus, pine-green, cyprus-green, northern-blue, azure,
476
- alaskan-blue, khaki, dark-olive, soft-white, antique-white, yellow-gold,
477
- gold, camel, walnut, stone, pebble, cocoa, coastal-gray, white, black,
478
- alto, athens-gray, sonic-silver {
479
- &_$(palette) {
480
- &:hover {
481
- & .checkbox_state {
482
- border-width: 1px;
483
- border-color: var(--color-palette-$(palette));
484
- border-style: solid;
485
- }
486
- }
487
- &-hover {
488
- &:hover {
489
- & .checkbox_state {
490
- border-width: 1px;
491
- border-color: var(--color-palette-$(palette));
492
- border-style: solid;
493
300
  }
494
301
  }
495
302
  }
496
303
  }
497
- }
498
- }
499
- }
500
- .checkbox_border-color {
501
- &_none {
502
- border-width: 1px;
503
- border-color: transparent;
504
- border-style: solid;
505
- }
506
- @each $type in accent, primary, secondary, surface, error, warning, success,
507
- danger, info, disabled {
508
- @each $color in primary, secondary, tertiary, quaternary {
509
304
  &_$(type) {
510
305
  &-border {
511
306
  &-$(color) {
@@ -532,6 +327,38 @@
532
327
  dark-olive, soft-white, antique-white, yellow-gold, gold, camel, walnut,
533
328
  stone, pebble, cocoa, coastal-gray, white, black, alto, athens-gray,
534
329
  sonic-silver {
330
+ &_active_$(palette) {
331
+ & .checkbox__state {
332
+ border-width: 1px;
333
+ border-color: var(--color-palette-$(palette));
334
+ border-style: solid;
335
+ }
336
+ }
337
+ &_active_$(palette) {
338
+ & .checkbox__state {
339
+ border-width: 1px;
340
+ border-color: var(--color-palette-$(palette));
341
+ border-style: solid;
342
+ }
343
+ }
344
+ &_hover_$(palette) {
345
+ &:hover {
346
+ & .checkbox_state {
347
+ border-width: 1px;
348
+ border-color: var(--color-palette-$(palette));
349
+ border-style: solid;
350
+ }
351
+ }
352
+ &-hover {
353
+ &:hover {
354
+ & .checkbox_state {
355
+ border-width: 1px;
356
+ border-color: var(--color-palette-$(palette));
357
+ border-style: solid;
358
+ }
359
+ }
360
+ }
361
+ }
535
362
  &_$(palette) {
536
363
  & .checkbox__state {
537
364
  border-width: 1px;