@itwin/itwinui-css 0.58.0 → 0.59.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 (18) hide show
  1. package/CHANGELOG.md +924 -0
  2. package/LICENSE.md +9 -0
  3. package/README.md +1 -1
  4. package/css/all.css +129 -56
  5. package/css/code.css +0 -3
  6. package/css/information-panel.css +2 -2
  7. package/css/side-navigation.css +1 -1
  8. package/css/table.css +126 -50
  9. package/package.json +24 -55
  10. package/scss/code/codeblock.scss +0 -4
  11. package/scss/information-panel/information-panel.scss +2 -2
  12. package/scss/side-navigation/side-navigation.scss +2 -2
  13. package/scss/style/elevation.scss +6 -5
  14. package/scss/table/classes.scss +12 -0
  15. package/scss/table/condensed.scss +4 -1
  16. package/scss/table/extra-condensed.scss +8 -1
  17. package/scss/table/table.scss +131 -38
  18. package/src/index.scss +45 -0
package/css/table.css CHANGED
@@ -10,6 +10,7 @@
10
10
  vertical-align:baseline;
11
11
  display:flex;
12
12
  flex-direction:column;
13
+ isolation:isolate;
13
14
  }
14
15
  .iui-table *{
15
16
  box-sizing:border-box;
@@ -37,41 +38,57 @@
37
38
  margin-left:auto;
38
39
  }
39
40
  .iui-table.iui-condensed .iui-table-header .iui-cell,
40
- .iui-table.iui-condensed .iui-row .iui-cell,
41
41
  .iui-table.iui-condensed .iui-paginator{
42
42
  min-height:44px;
43
43
  }
44
+ .iui-table.iui-condensed .iui-row .iui-cell{
45
+ min-height:46px;
46
+ }
44
47
  .iui-table.iui-extra-condensed .iui-table-header .iui-cell,
45
- .iui-table.iui-extra-condensed .iui-row .iui-cell,
46
48
  .iui-table.iui-extra-condensed .iui-paginator{
47
49
  min-height:33px;
48
50
  }
51
+ .iui-table.iui-extra-condensed .iui-row .iui-cell{
52
+ min-height:35px;
53
+ }
54
+ .iui-table.iui-extra-condensed .iui-table-header .iui-cell{
55
+ padding-block:2.75px;
56
+ }
49
57
 
50
- .iui-table-header{
51
- -webkit-user-select:none;
52
- -moz-user-select:none;
53
- -ms-user-select:none;
54
- user-select:none;
58
+ .iui-table-header-wrapper{
55
59
  overflow:hidden;
60
+ display:flex;
56
61
  flex-shrink:0;
57
- background-color:#edeff2;
58
- background-color:var(--iui-color-background-3);
59
62
  }
60
63
  @supports not (overflow: overlay){
61
- .iui-table-header{
64
+ .iui-table-header-wrapper{
62
65
  overflow-y:scroll;
63
66
  }
64
67
  }
68
+
69
+ .iui-table-header{
70
+ display:flex;
71
+ -webkit-user-select:none;
72
+ -moz-user-select:none;
73
+ -ms-user-select:none;
74
+ user-select:none;
75
+ min-width:100%;
76
+ flex-shrink:0;
77
+ }
65
78
  .iui-table-header .iui-row{
66
79
  display:flex;
67
80
  flex-grow:1;
68
- border-left:solid 1px transparent;
69
- border-right:solid 1px transparent;
81
+ min-width:100%;
82
+ }
83
+ .iui-table-header .iui-cell{
84
+ min-height:55px;
85
+ background-color:#edeff2;
86
+ background-color:var(--iui-color-background-3);
70
87
  }
71
88
  .iui-table-header .iui-cell:not(.iui-slot){
72
- flex-wrap:wrap;
73
89
  -moz-column-gap:4px;
74
90
  column-gap:4px;
91
+ padding-block:5.5px;
75
92
  }
76
93
  .iui-table-header .iui-cell:not(.iui-slot):focus-visible{
77
94
  outline:1px solid var(--iui-color-foreground-primary);
@@ -90,9 +107,6 @@
90
107
  cursor:-webkit-grabbing;
91
108
  cursor:grabbing;
92
109
  }
93
- .iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button{
94
- margin-right:8px;
95
- }
96
110
  .iui-table-header .iui-cell:not(.iui-slot) .iui-filter-button:not(.iui-active){
97
111
  visibility:hidden;
98
112
  }
@@ -173,6 +187,15 @@
173
187
  display:flex;
174
188
  flex-grow:1;
175
189
  align-items:center;
190
+ flex-wrap:wrap;
191
+ justify-content:flex-end;
192
+ margin-right:12px;
193
+ }
194
+ .iui-table-header-actions-container .iui-cell-end-icon{
195
+ width:28px;
196
+ height:28px;
197
+ margin-right:initial;
198
+ margin-left:auto;
176
199
  }
177
200
 
178
201
  .iui-table-body{
@@ -192,28 +215,33 @@
192
215
  .iui-table-body.iui-scroll-snapping .iui-row{
193
216
  scroll-snap-align:start none;
194
217
  }
195
- .iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected){
218
+ .iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell{
196
219
  background-color:rgba(0, 0, 0, 0.02);
197
220
  background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
198
221
  }
199
222
  .iui-table-body .iui-row{
200
223
  min-width:100%;
201
224
  display:flex;
202
- border:solid 1px transparent;
225
+ }
226
+ .iui-table-body .iui-row .iui-cell{
227
+ border-top:solid 1px transparent;
228
+ border-bottom:solid 1px transparent;
203
229
  border-bottom-color:#c7ccd1;
204
230
  border-bottom-color:var(--iui-color-background-border);
231
+ background-color:white;
232
+ background-color:var(--iui-color-background-1);
205
233
  }
206
234
  @media (prefers-reduced-motion: no-preference){
207
- .iui-table-body .iui-row{
235
+ .iui-table-body .iui-row .iui-cell{
208
236
  transition:border 0.2s ease-out;
209
237
  }
210
238
  }
211
239
  .iui-table-body .iui-row > .iui-slot > .iui-more-options{
212
240
  visibility:hidden;
213
241
  }
214
- .iui-table-body .iui-row:hover:not(.iui-disabled):not(.iui-expanded-content){
215
- background-color:rgba(0, 138, 224, 0.1);
216
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
242
+ .iui-table-body .iui-row:hover:not(.iui-disabled) .iui-cell{
243
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
244
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
217
245
  }
218
246
  .iui-table-body .iui-row:hover:not(.iui-disabled) > .iui-slot:not(.iui-disabled) > .iui-more-options{
219
247
  visibility:visible;
@@ -228,9 +256,10 @@
228
256
  }
229
257
  .iui-table-body .iui-row.iui-row-expanded{
230
258
  overflow:hidden;
259
+ }
260
+ .iui-table-body .iui-row.iui-row-expanded .iui-cell{
231
261
  border-left-color:#dde1e4;
232
262
  border-right-color:#dde1e4;
233
- border-bottom-color:transparent;
234
263
  border-left-color:var(--iui-color-background-4);
235
264
  border-right-color:var(--iui-color-background-4);
236
265
  border-bottom-color:transparent;
@@ -246,6 +275,10 @@
246
275
  }
247
276
  .iui-table-body .iui-row.iui-expanded-content{
248
277
  overflow:hidden;
278
+ border-left:1px solid transparent;
279
+ border-right:1px solid transparent;
280
+ border-bottom:1px solid #c7ccd1;
281
+ border-bottom:1px solid var(--iui-color-background-border);
249
282
  }
250
283
  .iui-table-body .iui-row.iui-expanded-content.iui-enter{
251
284
  opacity:0;
@@ -269,26 +302,26 @@
269
302
  transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
270
303
  }
271
304
  }
272
- .iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
305
+ .iui-table-body .iui-row:not(.iui-selected) + .iui-selected .iui-cell, .iui-table-body .iui-row.iui-selected:first-child .iui-cell{
273
306
  border-bottom-color:transparent;
274
307
  }
275
- .iui-table-body .iui-row.iui-selected{
308
+ .iui-table-body .iui-row.iui-selected .iui-cell{
276
309
  border-color:#008ae0;
277
- background:rgba(0, 138, 224, 0.1);
310
+ background:linear-gradient(rgba(0, 138, 224, 0.1), rgba(0, 138, 224, 0.1)), linear-gradient(white, white);
278
311
  border-color:var(--iui-color-foreground-primary);
279
- background:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
312
+ background:linear-gradient(rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
280
313
  }
281
- .iui-table-body .iui-row.iui-selected + .iui-selected{
314
+ .iui-table-body .iui-row.iui-selected + .iui-selected .iui-cell{
282
315
  border-bottom-color:transparent;
283
316
  border-top-color:rgba(0, 138, 224, 0.4);
284
317
  border-top-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
285
318
  }
286
- .iui-table-body .iui-row.iui-selected:last-child{
319
+ .iui-table-body .iui-row.iui-selected:last-child .iui-cell{
287
320
  border-bottom-color:#008ae0;
288
321
  border-bottom-color:var(--iui-color-foreground-primary);
289
322
  }
290
- .iui-table-body .iui-row.iui-selected + :not(.iui-selected),
291
- .iui-table-body .iui-row.iui-selected + .iui-expanded-content + :not(.iui-selected){
323
+ .iui-table-body .iui-row.iui-selected + :not(.iui-selected) .iui-cell,
324
+ .iui-table-body .iui-row.iui-selected + .iui-expanded-content + .iui-row:not(.iui-selected) .iui-cell{
292
325
  border-top-color:#008ae0;
293
326
  border-top-color:var(--iui-color-foreground-primary);
294
327
  }
@@ -329,17 +362,17 @@
329
362
  .iui-table-body .iui-row.iui-expanded-content.iui-disabled .iui-user-icon{
330
363
  filter:grayscale(100%);
331
364
  }
332
- .iui-table-body .iui-row.iui-positive,
365
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type,
333
366
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content{
334
367
  box-shadow:inset 2px 0 0 0 #53a21a;
335
368
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-positive);
336
369
  }
337
- .iui-table-body .iui-row.iui-positive::-moz-selection, .iui-table-body .iui-row.iui-positive *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
370
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::-moz-selection{
338
371
  background-color:rgba(83, 162, 26, 0.2);
339
372
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
340
373
  }
341
- .iui-table-body .iui-row.iui-positive::selection,
342
- .iui-table-body .iui-row.iui-positive *::selection,
374
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type::selection,
375
+ .iui-table-body .iui-row.iui-positive .iui-cell:first-of-type *::selection,
343
376
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content::selection,
344
377
  .iui-table-body .iui-row.iui-positive + .iui-expanded-content *::selection{
345
378
  background-color:rgba(83, 162, 26, 0.2);
@@ -349,17 +382,17 @@
349
382
  fill:#53a21a;
350
383
  fill:var(--iui-icons-color-positive);
351
384
  }
352
- .iui-table-body .iui-row.iui-warning,
385
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type,
353
386
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content{
354
387
  box-shadow:inset 2px 0 0 0 #f18d13;
355
388
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-warning);
356
389
  }
357
- .iui-table-body .iui-row.iui-warning::-moz-selection, .iui-table-body .iui-row.iui-warning *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
390
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::-moz-selection{
358
391
  background-color:rgba(241, 141, 19, 0.2);
359
392
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
360
393
  }
361
- .iui-table-body .iui-row.iui-warning::selection,
362
- .iui-table-body .iui-row.iui-warning *::selection,
394
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type::selection,
395
+ .iui-table-body .iui-row.iui-warning .iui-cell:first-of-type *::selection,
363
396
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content::selection,
364
397
  .iui-table-body .iui-row.iui-warning + .iui-expanded-content *::selection{
365
398
  background-color:rgba(241, 141, 19, 0.2);
@@ -369,17 +402,17 @@
369
402
  fill:#f18d13;
370
403
  fill:var(--iui-icons-color-warning);
371
404
  }
372
- .iui-table-body .iui-row.iui-negative,
405
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type,
373
406
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content{
374
407
  box-shadow:inset 2px 0 0 0 #d10a0a;
375
408
  box-shadow:inset 2px 0 0 0 var(--iui-icons-color-negative);
376
409
  }
377
- .iui-table-body .iui-row.iui-negative::-moz-selection, .iui-table-body .iui-row.iui-negative *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
410
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::-moz-selection, .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content::-moz-selection, .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::-moz-selection{
378
411
  background-color:rgba(209, 10, 10, 0.2);
379
412
  background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-5));
380
413
  }
381
- .iui-table-body .iui-row.iui-negative::selection,
382
- .iui-table-body .iui-row.iui-negative *::selection,
414
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type::selection,
415
+ .iui-table-body .iui-row.iui-negative .iui-cell:first-of-type *::selection,
383
416
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content::selection,
384
417
  .iui-table-body .iui-row.iui-negative + .iui-expanded-content *::selection{
385
418
  background-color:rgba(209, 10, 10, 0.2);
@@ -410,12 +443,18 @@
410
443
  display:flex;
411
444
  flex-grow:1;
412
445
  min-width:64px;
413
- min-height:55px;
446
+ min-height:57px;
414
447
  padding-left:16px;
415
448
  flex-basis:64px;
416
449
  position:relative;
417
450
  word-break:break-word;
418
451
  }
452
+ .iui-cell:first-of-type{
453
+ border-left:solid 1px transparent;
454
+ }
455
+ .iui-cell:last-of-type{
456
+ border-right:solid 1px transparent;
457
+ }
419
458
  .iui-cell.iui-slot{
420
459
  width:48px;
421
460
  padding:0;
@@ -426,12 +465,19 @@
426
465
  align-items:center;
427
466
  flex-basis:48px;
428
467
  }
468
+ .iui-cell.iui-cell-sticky{
469
+ position:-webkit-sticky;
470
+ position:sticky;
471
+ z-index:1;
472
+ left:var(--iui-table-sticky-left, initial);
473
+ right:var(--iui-table-sticky-right, initial);
474
+ }
429
475
  .iui-cell:not(.iui-slot):last-child{
430
476
  padding-right:16px;
431
477
  }
432
478
  .iui-cell.iui-positive{
433
- background-color:rgba(83, 162, 26, 0.1);
434
- background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6));
479
+ background:linear-gradient(rgba(83, 162, 26, 0.1), rgba(83, 162, 26, 0.1)), linear-gradient(white, white);
480
+ background:linear-gradient(rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
435
481
  }
436
482
  .iui-cell.iui-positive::-moz-selection, .iui-cell.iui-positive *::-moz-selection{
437
483
  background-color:rgba(83, 162, 26, 0.2);
@@ -443,8 +489,8 @@
443
489
  background-color:rgba(var(--iui-color-foreground-positive-rgb), var(--iui-opacity-5));
444
490
  }
445
491
  .iui-cell.iui-warning{
446
- background-color:rgba(241, 141, 19, 0.1);
447
- background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6));
492
+ background:linear-gradient(rgba(241, 141, 19, 0.1), rgba(241, 141, 19, 0.1)), linear-gradient(white, white);
493
+ background:linear-gradient(rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
448
494
  }
449
495
  .iui-cell.iui-warning::-moz-selection, .iui-cell.iui-warning *::-moz-selection{
450
496
  background-color:rgba(241, 141, 19, 0.2);
@@ -456,8 +502,8 @@
456
502
  background-color:rgba(var(--iui-color-foreground-warning-rgb), var(--iui-opacity-5));
457
503
  }
458
504
  .iui-cell.iui-negative{
459
- background-color:rgba(209, 10, 10, 0.1);
460
- background-color:rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6));
505
+ background:linear-gradient(rgba(209, 10, 10, 0.1), rgba(209, 10, 10, 0.1)), linear-gradient(white, white);
506
+ background:linear-gradient(rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6)), rgba(var(--iui-color-foreground-negative-rgb), var(--iui-opacity-6))), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
461
507
  }
462
508
  .iui-cell.iui-negative::-moz-selection, .iui-cell.iui-negative *::-moz-selection{
463
509
  background-color:rgba(209, 10, 10, 0.2);
@@ -480,6 +526,36 @@
480
526
  background-color:var(--iui-color-background-1);
481
527
  }
482
528
 
529
+ .iui-cell-shadow-left{
530
+ position:absolute;
531
+ top:-1px;
532
+ bottom:-1px;
533
+ width:24px;
534
+ pointer-events:none;
535
+ left:0;
536
+ transform:translate(-100%);
537
+ box-shadow:inset -10px 0 5px -10px rgba(0, 0, 0, 0.25);
538
+ }
539
+ .iui-table-header .iui-cell-shadow-left{
540
+ top:0;
541
+ bottom:0;
542
+ }
543
+
544
+ .iui-cell-shadow-right{
545
+ position:absolute;
546
+ top:-1px;
547
+ bottom:-1px;
548
+ width:24px;
549
+ pointer-events:none;
550
+ right:0;
551
+ transform:translate(100%);
552
+ box-shadow:inset 10px 0 5px -10px rgba(0, 0, 0, 0.25);
553
+ }
554
+ .iui-table-header .iui-cell-shadow-right{
555
+ top:0;
556
+ bottom:0;
557
+ }
558
+
483
559
  .iui-paginator{
484
560
  margin:0;
485
561
  padding:0;
package/package.json CHANGED
@@ -1,9 +1,15 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.58.0",
3
+ "version": "0.59.2",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
7
+ "files": [
8
+ "css",
9
+ "scss",
10
+ "CHANGELOG.md",
11
+ "LICENSE.md"
12
+ ],
7
13
  "description": "CSS (Sass/SCSS) library for building beautiful and well working web UI components within Bentley Systems & iTwin.js applications.",
8
14
  "homepage": "https://github.com/iTwin/iTwinUI",
9
15
  "keywords": [
@@ -21,72 +27,35 @@
21
27
  "bentley systems",
22
28
  "itwin"
23
29
  ],
24
- "husky": {
25
- "hooks": {
26
- "pre-commit": "lint-staged"
27
- }
28
- },
29
- "lint-staged": {
30
- "*.{scss}": [
31
- "prettier --write"
32
- ],
33
- "*.{scss,html}": [
34
- "stylelint --fix"
35
- ],
36
- "*.{scss,html,js}": [
37
- "yarn lint:copyright --fix"
38
- ]
30
+ "dependencies": {},
31
+ "devDependencies": {
32
+ "autoprefixer": "^10.4.1",
33
+ "backstopjs": "~6.0.4",
34
+ "html-minifier": "^4.0.0",
35
+ "postcss": "^8.4.5",
36
+ "postcss-discard-comments": "^5.0.1",
37
+ "postcss-scss": "^4.0.3",
38
+ "sass-embedded": "^1.49.9",
39
+ "stylelint": "^14.2.0",
40
+ "stylelint-config-sass-guidelines": "^9.0.1"
39
41
  },
40
42
  "scripts": {
41
- "build": "yarn clean && yarn build:scss && yarn build:css && yarn lint:copyright --fix lib/css/* && yarn build:html && yarn copy-files",
42
- "build:scss": "cpx \"./src/**/*.scss\" ./lib/scss",
43
- "build:css": "node ./scripts/generateCss.js src lib/css",
43
+ "build": "yarn clean && yarn build:scss && yarn build:css && node ../shared/copyrightLinter.js --fix css/* && yarn build:html",
44
+ "build:scss": "cpx \"./src/**/*.scss\" ./scss",
45
+ "build:css": "node ./scripts/generateCss.js src css",
44
46
  "build:html": "node ./scripts/generateHtml.js backstop/tests backstop/minified",
45
47
  "build:watch": "yarn build && concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn build:watch:html\"",
46
48
  "build:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
47
49
  "build:watch:html": "chokidar \"backstop/tests/**/*\" -c \"yarn build:html\"",
48
- "copy-files": "cpx package.json lib && cpx README.md lib",
49
50
  "createComponent": "node ./scripts/createComponent.js",
50
- "clean": "rimraf ./lib ./backstop/results/bitmaps_test",
51
+ "clean": "rimraf ./css ./scss ./backstop/results/bitmaps_test",
52
+ "dev": "yarn build:watch",
51
53
  "lint": "stylelint \"src/**/*.scss\"",
52
- "lint:copyright": "node scripts/copyrightLinter.js",
53
54
  "approve": "backstop --config=./backstop/backstop.js approve",
54
- "test": "yarn build && yarn test:ci",
55
- "test:ci": "backstop --config=./backstop/backstop.js test --docker",
55
+ "test": "backstop --config=./backstop/backstop.js test --docker",
56
56
  "clean:images": "node scripts/removeOldTestImages.js",
57
57
  "print": "node scripts/print.js",
58
58
  "audit:ci": "audit-ci --moderate --report-type=full",
59
59
  "build-docker": "node scripts/buildDocker.js"
60
- },
61
- "devDependencies": {
62
- "audit-ci": "^4.0.0",
63
- "autoprefixer": "^10.4.1",
64
- "backstopjs": "~6.0.4",
65
- "chokidar-cli": "^2.1.0",
66
- "concurrently": "^6.0.0",
67
- "cpx": "^1.5.0",
68
- "html-minifier": "^4.0.0",
69
- "husky": "=4",
70
- "lint-staged": "^11.2.6",
71
- "postcss": "^8.4.5",
72
- "postcss-discard-comments": "^5.0.1",
73
- "postcss-scss": "^4.0.3",
74
- "prettier": "^2.4.1",
75
- "rimraf": "^3.0.2",
76
- "sass-embedded": "^1.49.9",
77
- "stylelint": "^14.2.0",
78
- "stylelint-config-sass-guidelines": "^9.0.1"
79
- },
80
- "resolutions": {
81
- "braces": "^2.3.1",
82
- "hosted-git-info": ">=3.0.8",
83
- "jimp": ">=0.16.1",
84
- "trim-newlines": "^3.0.1",
85
- "glob-parent": "^5.1.2",
86
- "jpeg-js": "^0.4.3",
87
- "set-value": "^4.1.0",
88
- "ansi-regex": "^5.0.1",
89
- "node-fetch": "^2.6.7",
90
- "async": "^3.2.2"
91
60
  }
92
61
  }
package/scss/code/codeblock.scss CHANGED
@@ -26,10 +26,6 @@
26
26
  }
27
27
  }
28
28
 
29
- .iui-button {
30
- gap: 0;
31
- }
32
-
33
29
  > .iui-codeblock-content {
34
30
  margin: 0;
35
31
  overflow-x: auto;
package/scss/information-panel/information-panel.scss CHANGED
@@ -181,7 +181,7 @@
181
181
  @mixin iui-information-panel-right {
182
182
  @include iui-information-panel-vertical;
183
183
  transform: translateX(100%); // hide off screen
184
- box-shadow: -1px 0 14px rgba(0, 0, 0, 0.25);
184
+ box-shadow: -1px 0 10px $iui-elevation-color;
185
185
  clip-path: inset(0 0 0 -15px); // show box-shadow only on the left
186
186
 
187
187
  > .iui-resizer {
@@ -192,7 +192,7 @@
192
192
  @mixin iui-information-panel-bottom {
193
193
  @include iui-information-panel-horizontal;
194
194
  transform: translateY(100%); // hide off screen
195
- box-shadow: 0 -1px 14px rgba(0, 0, 0, 0.25);
195
+ box-shadow: 0 -1px 10px $iui-elevation-color;
196
196
  clip-path: inset(-15px 0 0 0); // show box-shadow only on top
197
197
 
198
198
  > .iui-resizer {
package/scss/side-navigation/side-navigation.scss CHANGED
@@ -84,8 +84,8 @@
84
84
  overflow: hidden;
85
85
  justify-content: flex-start;
86
86
 
87
- // Adds stripe to the left of active button
88
- --_iui-button-active-stripe-inset: 0 calc(100% - #{$iui-xxs}) 0 0;
87
+ // Adds stripe to the right of active button
88
+ --_iui-button-active-stripe-inset: 0 0 0 calc(100% - #{$iui-xxs});
89
89
 
90
90
  &:not(.iui-expand) {
91
91
  height: $iui-baseline * 5;
package/scss/style/elevation.scss CHANGED
@@ -1,10 +1,11 @@
1
1
  // Copyright (c) Bentley Systems, Incorporated. All rights reserved.
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  /// Elevations:
4
+ $iui-elevation-color: hsla(200, 12%, 0%, 0.25);
4
5
 
5
6
  $iui-elevation-0: 0;
6
- $iui-elevation-2: 0 1px 5px hsla(200, 12%, 0%, 0.25);
7
- $iui-elevation-4: 0 1px 10px hsla(200, 12%, 0%, 0.25);
8
- $iui-elevation-8: 0 3px 14px hsla(200, 12%, 0%, 0.25);
9
- $iui-elevation-16: 0 6px 30px hsla(200, 12%, 0%, 0.25);
10
- $iui-elevation-24: 0 9px 46px hsla(200, 12%, 0%, 0.25);
7
+ $iui-elevation-2: 0 1px 5px $iui-elevation-color;
8
+ $iui-elevation-4: 0 1px 10px $iui-elevation-color;
9
+ $iui-elevation-8: 0 3px 14px $iui-elevation-color;
10
+ $iui-elevation-16: 0 6px 30px $iui-elevation-color;
11
+ $iui-elevation-24: 0 9px 46px $iui-elevation-color;
package/scss/table/classes.scss CHANGED
@@ -14,6 +14,10 @@
14
14
  }
15
15
  }
16
16
 
17
+ .iui-table-header-wrapper {
18
+ @include iui-table-header-wrapper;
19
+ }
20
+
17
21
  .iui-table-header {
18
22
  @include iui-table-header;
19
23
  }
@@ -30,6 +34,14 @@
30
34
  @include iui-table-cell;
31
35
  }
32
36
 
37
+ .iui-cell-shadow-left {
38
+ @include iui-table-cell-shadow-left;
39
+ }
40
+
41
+ .iui-cell-shadow-right {
42
+ @include iui-table-cell-shadow-right;
43
+ }
44
+
33
45
  .iui-paginator {
34
46
  @include iui-paginator;
35
47
  }
package/scss/table/condensed.scss CHANGED
@@ -5,8 +5,11 @@
5
5
 
6
6
  @mixin iui-table-condensed {
7
7
  .iui-table-header .iui-cell,
8
- .iui-row .iui-cell,
9
8
  .iui-paginator {
10
9
  min-height: $iui-baseline * 4;
11
10
  }
11
+
12
+ .iui-row .iui-cell {
13
+ min-height: $iui-baseline * 4 + 2px;
14
+ }
12
15
  }
package/scss/table/extra-condensed.scss CHANGED
@@ -5,8 +5,15 @@
5
5
 
6
6
  @mixin iui-table-extra-condensed {
7
7
  .iui-table-header .iui-cell,
8
- .iui-row .iui-cell,
9
8
  .iui-paginator {
10
9
  min-height: $iui-baseline * 3;
11
10
  }
11
+
12
+ .iui-row .iui-cell {
13
+ min-height: $iui-baseline * 3 + 2px;
14
+ }
15
+
16
+ .iui-table-header .iui-cell {
17
+ padding-block: $iui-baseline * 0.25;
18
+ }
12
19
  }