igniteui-theming 3.0.6 → 3.1.0-beta.1

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 (25) hide show
  1. package/package.json +1 -1
  2. package/sass/themes/_functions.scss +1 -1
  3. package/sass/themes/schemas/components/light/_action-strip.scss +20 -12
  4. package/sass/themes/schemas/components/light/_button-group.scss +15 -9
  5. package/sass/themes/schemas/components/light/_button.scss +75 -45
  6. package/sass/themes/schemas/components/light/_calendar.scss +50 -30
  7. package/sass/themes/schemas/components/light/_card.scss +15 -9
  8. package/sass/themes/schemas/components/light/_carousel.scss +10 -6
  9. package/sass/themes/schemas/components/light/_checkbox.scss +40 -24
  10. package/sass/themes/schemas/components/light/_chip.scss +10 -6
  11. package/sass/themes/schemas/components/light/_dialog.scss +15 -9
  12. package/sass/themes/schemas/components/light/_drop-down.scss +25 -15
  13. package/sass/themes/schemas/components/light/_expansion-panel.scss +5 -3
  14. package/sass/themes/schemas/components/light/_grid.scss +15 -10
  15. package/sass/themes/schemas/components/light/_input-group.scss +45 -27
  16. package/sass/themes/schemas/components/light/_list.scss +20 -12
  17. package/sass/themes/schemas/components/light/_navdrawer.scss +15 -9
  18. package/sass/themes/schemas/components/light/_progress.scss +10 -6
  19. package/sass/themes/schemas/components/light/_snackbar.scss +15 -9
  20. package/sass/themes/schemas/components/light/_splitter.scss +5 -3
  21. package/sass/themes/schemas/components/light/_tabs.scss +10 -6
  22. package/sass/themes/schemas/components/light/_time-picker.scss +35 -21
  23. package/sass/themes/schemas/components/light/_toast.scss +20 -12
  24. package/sass/themes/schemas/components/light/_tooltip.scss +15 -9
  25. package/sass/themes/schemas/components/light/_watermark.scss +20 -12
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "3.0.6",
3
+ "version": "3.1.0-beta.1",
4
4
  "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/sass/themes/_functions.scss CHANGED
@@ -88,7 +88,7 @@
88
88
  }
89
89
 
90
90
  @if $self {
91
- @if $fn == 'sizable' {
91
+ @if $fn == 'sizable' or $fn == 'border-radius' {
92
92
  $func: meta.get-function($fn);
93
93
  $result: meta.call($func, $args...);
94
94
  }
package/sass/themes/schemas/components/light/_action-strip.scss CHANGED
@@ -40,9 +40,11 @@ $light-action-strip: extend(
40
40
  ),
41
41
 
42
42
  actions-border-radius: (
43
- rem(24px),
44
- rem(0),
45
- rem(24px),
43
+ border-radius: (
44
+ rem(24px),
45
+ rem(0),
46
+ rem(24px),
47
+ ),
46
48
  ),
47
49
  )
48
50
  );
@@ -55,9 +57,11 @@ $fluent-action-strip: extend(
55
57
  $light-action-strip,
56
58
  (
57
59
  actions-border-radius: (
58
- rem(0),
59
- rem(0),
60
- rem(24px),
60
+ border-radius: (
61
+ rem(0),
62
+ rem(0),
63
+ rem(24px),
64
+ ),
61
65
  ),
62
66
  )
63
67
  );
@@ -70,9 +74,11 @@ $bootstrap-action-strip: extend(
70
74
  $light-action-strip,
71
75
  (
72
76
  actions-border-radius: (
73
- rem(4px),
74
- rem(0),
75
- rem(24px),
77
+ border-radius: (
78
+ rem(4px),
79
+ rem(0),
80
+ rem(24px),
81
+ ),
76
82
  ),
77
83
  )
78
84
  );
@@ -97,9 +103,11 @@ $indigo-action-strip: extend(
97
103
  ),
98
104
 
99
105
  actions-border-radius: (
100
- rem(3px),
101
- rem(0),
102
- rem(24px),
106
+ border-radius: (
107
+ rem(3px),
108
+ rem(0),
109
+ rem(24px),
110
+ ),
103
111
  ),
104
112
  )
105
113
  );
package/sass/themes/schemas/components/light/_button-group.scss CHANGED
@@ -117,9 +117,11 @@ $light-button-group: extend(
117
117
  ),
118
118
 
119
119
  border-radius: (
120
- rem(4px),
121
- rem(0),
122
- rem(20px),
120
+ border-radius: (
121
+ rem(4px),
122
+ rem(0),
123
+ rem(20px),
124
+ ),
123
125
  ),
124
126
  )
125
127
  );
@@ -191,9 +193,11 @@ $fluent-button-group: extend(
191
193
  ),
192
194
 
193
195
  border-radius: (
194
- rem(2px),
195
- rem(0),
196
- rem(20px),
196
+ border-radius: (
197
+ rem(2px),
198
+ rem(0),
199
+ rem(20px),
200
+ ),
197
201
  ),
198
202
  )
199
203
  );
@@ -429,9 +433,11 @@ $indigo-button-group: extend(
429
433
  ),
430
434
 
431
435
  border-radius: (
432
- rem(8px),
433
- rem(0),
434
- rem(20px),
436
+ border-radius: (
437
+ rem(8px),
438
+ rem(0),
439
+ rem(20px),
440
+ ),
435
441
  ),
436
442
  )
437
443
  );
package/sass/themes/schemas/components/light/_button.scss CHANGED
@@ -131,9 +131,11 @@ $material-flat-button: extend(
131
131
  ),
132
132
  disabled-background: transparent,
133
133
  border-radius: (
134
- rem(4px),
135
- rem(0),
136
- rem(20px),
134
+ border-radius: (
135
+ rem(4px),
136
+ rem(0),
137
+ rem(20px),
138
+ ),
137
139
  ),
138
140
  )
139
141
  );
@@ -272,9 +274,11 @@ $material-raised-button: extend(
272
274
  ),
273
275
  ),
274
276
  border-radius: (
275
- rem(4px),
276
- rem(0),
277
- rem(20px),
277
+ border-radius: (
278
+ rem(4px),
279
+ rem(0),
280
+ rem(20px),
281
+ ),
278
282
  ),
279
283
  )
280
284
  );
@@ -293,9 +297,11 @@ $material-fab-button: extend(
293
297
  (
294
298
  selector: '[igxButton="fab"], .igx-button--fab',
295
299
  border-radius: (
296
- rem(28px),
297
- rem(12px),
298
- rem(28px),
300
+ border-radius: (
301
+ rem(28px),
302
+ rem(12px),
303
+ rem(28px),
304
+ ),
299
305
  ),
300
306
  size: (
301
307
  sizable: (
@@ -401,9 +407,11 @@ $material-icon-button: extend(
401
407
  ),
402
408
  ),
403
409
  border-radius: (
404
- rem(20px),
405
- rem(0),
406
- rem(20px),
410
+ border-radius: (
411
+ rem(20px),
412
+ rem(0),
413
+ rem(20px),
414
+ ),
407
415
  ),
408
416
  size: (
409
417
  sizable: (
@@ -515,9 +523,11 @@ $fluent-flat-button: extend(
515
523
  ),
516
524
  disabled-background: transparent,
517
525
  border-radius: (
518
- rem(0),
519
- rem(0),
520
- rem(20px),
526
+ border-radius: (
527
+ rem(0),
528
+ rem(0),
529
+ rem(20px),
530
+ ),
521
531
  ),
522
532
  )
523
533
  );
@@ -639,9 +649,11 @@ $fluent-outlined-button: extend(
639
649
  ),
640
650
  ),
641
651
  border-radius: (
642
- rem(2px),
643
- rem(0),
644
- rem(20px),
652
+ border-radius: (
653
+ rem(2px),
654
+ rem(0),
655
+ rem(20px),
656
+ ),
645
657
  ),
646
658
  )
647
659
  );
@@ -763,9 +775,11 @@ $fluent-raised-button: extend(
763
775
  ),
764
776
  ),
765
777
  border-radius: (
766
- rem(2px),
767
- rem(0),
768
- rem(20px),
778
+ border-radius: (
779
+ rem(2px),
780
+ rem(0),
781
+ rem(20px),
782
+ ),
769
783
  ),
770
784
  )
771
785
  );
@@ -818,9 +832,11 @@ $fluent-fab-button: extend(
818
832
  ),
819
833
  ),
820
834
  border-radius: (
821
- rem(14px),
822
- rem(12px),
823
- rem(28px),
835
+ border-radius: (
836
+ rem(14px),
837
+ rem(12px),
838
+ rem(28px),
839
+ ),
824
840
  ),
825
841
  )
826
842
  );
@@ -914,9 +930,11 @@ $fluent-icon-button: extend(
914
930
  ),
915
931
  ),
916
932
  border-radius: (
917
- rem(0),
918
- rem(0),
919
- rem(20px),
933
+ border-radius: (
934
+ rem(0),
935
+ rem(0),
936
+ rem(20px),
937
+ ),
920
938
  ),
921
939
  size: (
922
940
  sizable: (
@@ -1314,9 +1332,11 @@ $bootstrap-fab-button: extend(
1314
1332
  ),
1315
1333
  ),
1316
1334
  border-radius: (
1317
- rem(15px),
1318
- rem(12px),
1319
- rem(28px),
1335
+ border-radius: (
1336
+ rem(15px),
1337
+ rem(12px),
1338
+ rem(28px),
1339
+ ),
1320
1340
  ),
1321
1341
  )
1322
1342
  );
@@ -1400,9 +1420,11 @@ $bootstrap-icon-button: extend(
1400
1420
  ),
1401
1421
  ),
1402
1422
  border-radius: (
1403
- rem(4px),
1404
- rem(0),
1405
- rem(20px),
1423
+ border-radius: (
1424
+ rem(4px),
1425
+ rem(0),
1426
+ rem(20px),
1427
+ ),
1406
1428
  ),
1407
1429
  size: (
1408
1430
  sizable: (
@@ -1496,9 +1518,11 @@ $indigo-flat-button: extend(
1496
1518
  ),
1497
1519
  disabled-background: transparent,
1498
1520
  border-radius: (
1499
- rem(20px),
1500
- rem(0),
1501
- rem(20px),
1521
+ border-radius: (
1522
+ rem(20px),
1523
+ rem(0),
1524
+ rem(20px),
1525
+ ),
1502
1526
  ),
1503
1527
  size: (
1504
1528
  sizable: (
@@ -1598,9 +1622,11 @@ $indigo-outlined-button: extend(
1598
1622
  ),
1599
1623
  disabled-background: transparent,
1600
1624
  border-radius: (
1601
- rem(20px),
1602
- rem(0),
1603
- rem(20px),
1625
+ border-radius: (
1626
+ rem(20px),
1627
+ rem(0),
1628
+ rem(20px),
1629
+ ),
1604
1630
  ),
1605
1631
  )
1606
1632
  );
@@ -1677,9 +1703,11 @@ $indigo-raised-button: extend(
1677
1703
  ),
1678
1704
  ),
1679
1705
  border-radius: (
1680
- rem(20px),
1681
- rem(0),
1682
- rem(20px),
1706
+ border-radius: (
1707
+ rem(20px),
1708
+ rem(0),
1709
+ rem(20px),
1710
+ ),
1683
1711
  ),
1684
1712
  )
1685
1713
  );
@@ -1725,9 +1753,11 @@ $indigo-fab-button: extend(
1725
1753
  ),
1726
1754
  ),
1727
1755
  border-radius: (
1728
- rem(28px),
1729
- rem(12px),
1730
- rem(28px),
1756
+ border-radius: (
1757
+ rem(28px),
1758
+ rem(12px),
1759
+ rem(28px),
1760
+ ),
1731
1761
  ),
1732
1762
  size: (
1733
1763
  sizable: (
package/sass/themes/schemas/components/light/_calendar.scss CHANGED
@@ -361,19 +361,25 @@ $light-calendar: (
361
361
  ),
362
362
 
363
363
  border-radius: (
364
- rem(4px),
365
- rem(0),
366
- rem(20px),
364
+ border-radius: (
365
+ rem(4px),
366
+ rem(0),
367
+ rem(20px),
368
+ ),
367
369
  ),
368
370
  date-border-radius: (
369
- rem(20px),
370
- rem(0),
371
- rem(20px),
371
+ border-radius: (
372
+ rem(20px),
373
+ rem(0),
374
+ rem(20px),
375
+ ),
372
376
  ),
373
377
  month-border-radius: (
374
- rem(20px),
375
- rem(0),
376
- rem(20px),
378
+ border-radius: (
379
+ rem(20px),
380
+ rem(0),
381
+ rem(20px),
382
+ ),
377
383
  ),
378
384
  );
379
385
 
@@ -504,19 +510,25 @@ $fluent-calendar: extend(
504
510
  ),
505
511
 
506
512
  border-radius: (
507
- rem(0),
508
- rem(0),
509
- rem(20px),
513
+ border-radius: (
514
+ rem(0),
515
+ rem(0),
516
+ rem(20px),
517
+ ),
510
518
  ),
511
519
  date-border-radius: (
512
- rem(0),
513
- rem(0),
514
- rem(20px),
520
+ border-radius: (
521
+ rem(0),
522
+ rem(0),
523
+ rem(20px),
524
+ ),
515
525
  ),
516
526
  month-border-radius: (
517
- rem(0),
518
- rem(0),
519
- rem(20px),
527
+ border-radius: (
528
+ rem(0),
529
+ rem(0),
530
+ rem(20px),
531
+ ),
520
532
  ),
521
533
  )
522
534
  );
@@ -790,19 +802,25 @@ $bootstrap-calendar: extend(
790
802
  ),
791
803
 
792
804
  border-radius: (
793
- rem(4px),
794
- rem(0),
795
- rem(20px),
805
+ border-radius: (
806
+ rem(4px),
807
+ rem(0),
808
+ rem(20px),
809
+ ),
796
810
  ),
797
811
  date-border-radius: (
798
- rem(4px),
799
- rem(0),
800
- rem(20px),
812
+ border-radius: (
813
+ rem(4px),
814
+ rem(0),
815
+ rem(20px),
816
+ ),
801
817
  ),
802
818
  month-border-radius: (
803
- rem(4px),
804
- rem(0),
805
- rem(20px),
819
+ border-radius: (
820
+ rem(4px),
821
+ rem(0),
822
+ rem(20px),
823
+ ),
806
824
  ),
807
825
  )
808
826
  );
@@ -938,9 +956,11 @@ $indigo-calendar: extend(
938
956
  ),
939
957
 
940
958
  border-radius: (
941
- rem(3px),
942
- rem(0),
943
- rem(20px),
959
+ border-radius: (
960
+ rem(3px),
961
+ rem(0),
962
+ rem(20px),
963
+ ),
944
964
  ),
945
965
  )
946
966
  );
package/sass/themes/schemas/components/light/_card.scss CHANGED
@@ -64,9 +64,11 @@ $light-card: extend(
64
64
  ),
65
65
 
66
66
  border-radius: (
67
- rem(4px),
68
- rem(0),
69
- rem(24px),
67
+ border-radius: (
68
+ rem(4px),
69
+ rem(0),
70
+ rem(24px),
71
+ ),
70
72
  ),
71
73
  )
72
74
  );
@@ -91,9 +93,11 @@ $fluent-card: extend(
91
93
  ),
92
94
 
93
95
  border-radius: (
94
- rem(2px),
95
- rem(0),
96
- rem(24px),
96
+ border-radius: (
97
+ rem(2px),
98
+ rem(0),
99
+ rem(24px),
100
+ ),
97
101
  ),
98
102
  )
99
103
  );
@@ -210,9 +214,11 @@ $indigo-card: extend(
210
214
  ),
211
215
 
212
216
  border-radius: (
213
- rem(3px),
214
- rem(0),
215
- rem(24px),
217
+ border-radius: (
218
+ rem(3px),
219
+ rem(0),
220
+ rem(24px),
221
+ ),
216
222
  ),
217
223
  )
218
224
  );
package/sass/themes/schemas/components/light/_carousel.scss CHANGED
@@ -99,9 +99,11 @@ $light-carousel: extend(
99
99
  ),
100
100
 
101
101
  border-radius: (
102
- rem(0),
103
- rem(0),
104
- rem(36px),
102
+ border-radius: (
103
+ rem(0),
104
+ rem(0),
105
+ rem(36px),
106
+ ),
105
107
  ),
106
108
  )
107
109
  );
@@ -124,9 +126,11 @@ $bootstrap-carousel: extend(
124
126
  $bootstrap-elevation-carousel,
125
127
  (
126
128
  border-radius: (
127
- rem(4px),
128
- rem(0),
129
- rem(36px),
129
+ border-radius: (
130
+ rem(4px),
131
+ rem(0),
132
+ rem(36px),
133
+ ),
130
134
  ),
131
135
  )
132
136
  );
package/sass/themes/schemas/components/light/_checkbox.scss CHANGED
@@ -92,14 +92,18 @@ $light-checkbox: (
92
92
  ),
93
93
  ),
94
94
  border-radius: (
95
- rem(2px),
96
- rem(0),
97
- rem(10px),
95
+ border-radius: (
96
+ rem(2px),
97
+ rem(0),
98
+ rem(10px),
99
+ ),
98
100
  ),
99
101
  border-radius-ripple: (
100
- rem(24px),
101
- rem(0),
102
- rem(24px),
102
+ border-radius: (
103
+ rem(24px),
104
+ rem(0),
105
+ rem(24px),
106
+ ),
103
107
  ),
104
108
  );
105
109
 
@@ -161,14 +165,18 @@ $fluent-checkbox: extend(
161
165
  ),
162
166
  ),
163
167
  border-radius: (
164
- rem(2px),
165
- rem(0),
166
- rem(10px),
168
+ border-radius: (
169
+ rem(2px),
170
+ rem(0),
171
+ rem(10px),
172
+ ),
167
173
  ),
168
174
  border-radius-ripple: (
169
- rem(2px),
170
- rem(0),
171
- rem(24px),
175
+ border-radius: (
176
+ rem(2px),
177
+ rem(0),
178
+ rem(24px),
179
+ ),
172
180
  ),
173
181
  )
174
182
  );
@@ -231,14 +239,18 @@ $bootstrap-checkbox: extend(
231
239
  ),
232
240
  ),
233
241
  border-radius: (
234
- rem(4px),
235
- rem(0),
236
- rem(10px),
242
+ border-radius: (
243
+ rem(4px),
244
+ rem(0),
245
+ rem(10px),
246
+ ),
237
247
  ),
238
248
  border-radius-ripple: (
239
- rem(4px),
240
- rem(0),
241
- rem(24px),
249
+ border-radius: (
250
+ rem(4px),
251
+ rem(0),
252
+ rem(24px),
253
+ ),
242
254
  ),
243
255
  )
244
256
  );
@@ -323,14 +335,18 @@ $indigo-checkbox: extend(
323
335
  ),
324
336
  ),
325
337
  border-radius: (
326
- rem(3px),
327
- rem(0),
328
- rem(10px),
338
+ border-radius: (
339
+ rem(3px),
340
+ rem(0),
341
+ rem(10px),
342
+ ),
329
343
  ),
330
344
  border-radius-ripple: (
331
- rem(3px),
332
- rem(0),
333
- rem(24px),
345
+ border-radius: (
346
+ rem(3px),
347
+ rem(0),
348
+ rem(24px),
349
+ ),
334
350
  ),
335
351
  )
336
352
  );
package/sass/themes/schemas/components/light/_chip.scss CHANGED
@@ -153,9 +153,11 @@ $light-chip: extend(
153
153
  focus-selected-border-color: transparent,
154
154
 
155
155
  border-radius: (
156
- rem(16px),
157
- rem(0),
158
- rem(16px),
156
+ border-radius: (
157
+ rem(16px),
158
+ rem(0),
159
+ rem(16px),
160
+ ),
159
161
  ),
160
162
 
161
163
  disabled-text-color: (
@@ -395,9 +397,11 @@ $bootstrap-chip: extend(
395
397
  ),
396
398
 
397
399
  border-radius: (
398
- rem(4px),
399
- rem(0),
400
- rem(16px),
400
+ border-radius: (
401
+ rem(4px),
402
+ rem(0),
403
+ rem(16px),
404
+ ),
401
405
  ),
402
406
  )
403
407
  );