@bi-digital/css 0.11.2 → 0.11.4

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 (5) hide show
  1. package/dist/components/button.css +18 -4
  2. package/dist/components/dialog.css +2 -2
  3. package/dist/components.css +20 -6
  4. package/dist/salesforce.css +20 -6
  5. package/package.json +2 -2
package/dist/components/button.css CHANGED
@@ -1,7 +1,8 @@
1
1
  .bi-button {
2
2
  --bic-button-box-shadow: none;
3
3
  --bic-button-icon-size: var(--bi-icon-medium);
4
- --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
4
+ --bic-button-padding-block: .625rem;
5
+ --bic-button-padding-inline: calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
5
6
  --bic-button-size: var(--bi-scale-11x);
6
7
  --bic-button-font-size: 1rem;
7
8
  --bic-button-line-height: 1.5;
@@ -29,7 +30,8 @@
29
30
  min-height: var(--bic-button-size);
30
31
  min-width: var(--bic-button-size);
31
32
  width: fit-content;
32
- padding: var(--bic-button-padding);
33
+ padding-block: var(--bic-button-padding-block);
34
+ padding-inline: var(--bic-button-padding-inline);
33
35
  -webkit-text-decoration: unset;
34
36
  text-decoration: unset;
35
37
  text-align: inherit;
@@ -67,13 +69,15 @@
67
69
  .bi-button[data-size="small"] {
68
70
  --bic-button-font-size: .875rem;
69
71
  --bic-button-line-height: 1.25rem;
70
- --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
72
+ --bic-button-padding-block: var(--bi-scale-1-5x);
73
+ --bic-button-padding-inline: calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
71
74
  --bic-button-icon-size: var(--bi-icon-small);
72
75
  --bic-button-size: var(--bi-scale-8x);
73
76
  }
74
77
 
75
78
  .bi-button[data-size="large"] {
76
- --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
79
+ --bic-button-padding-block: var(--bi-scale-2x);
80
+ --bic-button-padding-inline: calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
77
81
  --bic-button-icon-size: var(--bi-icon-large);
78
82
  --bic-button-size: var(--bi-scale-14x);
79
83
  }
@@ -85,6 +89,16 @@
85
89
  padding: 0;
86
90
  }
87
91
 
92
+ .bi-button[data-skewed="start"]:has(.bi-button--start-icon) {
93
+ --bic-button-padding-inline: var(--bi-scale-1x) var(--bi-scale-2x);
94
+ margin-left: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
95
+ }
96
+
97
+ .bi-button[data-skewed="end"]:has(.bi-button--end-icon) {
98
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-1x);
99
+ margin-right: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
100
+ }
101
+
88
102
  .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
89
103
  --bic-button-color: var(--bi-basic-white);
90
104
  --bic-button-background: var(--bi-primary-50);
package/dist/components/dialog.css CHANGED
@@ -112,7 +112,7 @@
112
112
  }
113
113
  }
114
114
 
115
- .bi-dialog > button[command="close"]:first-child {
115
+ .bi-dialog > button.bi-dialog--close {
116
116
  top: var(--bic-dialog-icon-spacing);
117
117
  right: var(--bic-dialog-icon-spacing);
118
118
  position: absolute;
@@ -127,7 +127,7 @@
127
127
  display: flex;
128
128
  }
129
129
 
130
- .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
130
+ .bi-dialog:has( > button.bi-dialog--close) .bi-dialog--header {
131
131
  padding-right: var(--bi-scale-14x);
132
132
  }
133
133
 
package/dist/components.css CHANGED
@@ -333,7 +333,8 @@
333
333
  .bi-button {
334
334
  --bic-button-box-shadow: none;
335
335
  --bic-button-icon-size: var(--bi-icon-medium);
336
- --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
336
+ --bic-button-padding-block: .625rem;
337
+ --bic-button-padding-inline: calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
337
338
  --bic-button-size: var(--bi-scale-11x);
338
339
  --bic-button-font-size: 1rem;
339
340
  --bic-button-line-height: 1.5;
@@ -361,7 +362,8 @@
361
362
  min-height: var(--bic-button-size);
362
363
  min-width: var(--bic-button-size);
363
364
  width: fit-content;
364
- padding: var(--bic-button-padding);
365
+ padding-block: var(--bic-button-padding-block);
366
+ padding-inline: var(--bic-button-padding-inline);
365
367
  -webkit-text-decoration: unset;
366
368
  text-decoration: unset;
367
369
  text-align: inherit;
@@ -399,13 +401,15 @@
399
401
  .bi-button[data-size="small"] {
400
402
  --bic-button-font-size: .875rem;
401
403
  --bic-button-line-height: 1.25rem;
402
- --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
404
+ --bic-button-padding-block: var(--bi-scale-1-5x);
405
+ --bic-button-padding-inline: calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
403
406
  --bic-button-icon-size: var(--bi-icon-small);
404
407
  --bic-button-size: var(--bi-scale-8x);
405
408
  }
406
409
 
407
410
  .bi-button[data-size="large"] {
408
- --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
411
+ --bic-button-padding-block: var(--bi-scale-2x);
412
+ --bic-button-padding-inline: calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
409
413
  --bic-button-icon-size: var(--bi-icon-large);
410
414
  --bic-button-size: var(--bi-scale-14x);
411
415
  }
@@ -417,6 +421,16 @@
417
421
  padding: 0;
418
422
  }
419
423
 
424
+ .bi-button[data-skewed="start"]:has(.bi-button--start-icon) {
425
+ --bic-button-padding-inline: var(--bi-scale-1x) var(--bi-scale-2x);
426
+ margin-left: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
427
+ }
428
+
429
+ .bi-button[data-skewed="end"]:has(.bi-button--end-icon) {
430
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-1x);
431
+ margin-right: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
432
+ }
433
+
420
434
  .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
421
435
  --bic-button-color: var(--bi-basic-white);
422
436
  --bic-button-background: var(--bi-primary-50);
@@ -1341,7 +1355,7 @@ details.bi-details > *:not(summary) + * {
1341
1355
  }
1342
1356
  }
1343
1357
 
1344
- .bi-dialog > button[command="close"]:first-child {
1358
+ .bi-dialog > button.bi-dialog--close {
1345
1359
  top: var(--bic-dialog-icon-spacing);
1346
1360
  right: var(--bic-dialog-icon-spacing);
1347
1361
  position: absolute;
@@ -1356,7 +1370,7 @@ details.bi-details > *:not(summary) + * {
1356
1370
  display: flex;
1357
1371
  }
1358
1372
 
1359
- .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
1373
+ .bi-dialog:has( > button.bi-dialog--close) .bi-dialog--header {
1360
1374
  padding-right: var(--bi-scale-14x);
1361
1375
  }
1362
1376
 
package/dist/salesforce.css CHANGED
@@ -559,7 +559,8 @@
559
559
  .bi-button {
560
560
  --bic-button-box-shadow: none;
561
561
  --bic-button-icon-size: var(--bi-icon-medium);
562
- --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
562
+ --bic-button-padding-block: .625rem;
563
+ --bic-button-padding-inline: calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
563
564
  --bic-button-size: var(--bi-scale-11x);
564
565
  --bic-button-font-size: 1rem;
565
566
  --bic-button-line-height: 1.5;
@@ -587,7 +588,8 @@
587
588
  min-height: var(--bic-button-size);
588
589
  min-width: var(--bic-button-size);
589
590
  width: fit-content;
590
- padding: var(--bic-button-padding);
591
+ padding-block: var(--bic-button-padding-block);
592
+ padding-inline: var(--bic-button-padding-inline);
591
593
  -webkit-text-decoration: unset;
592
594
  text-decoration: unset;
593
595
  text-align: inherit;
@@ -625,13 +627,15 @@
625
627
  .bi-button[data-size="small"] {
626
628
  --bic-button-font-size: .875rem;
627
629
  --bic-button-line-height: 1.25rem;
628
- --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
630
+ --bic-button-padding-block: var(--bi-scale-1-5x);
631
+ --bic-button-padding-inline: calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
629
632
  --bic-button-icon-size: var(--bi-icon-small);
630
633
  --bic-button-size: var(--bi-scale-8x);
631
634
  }
632
635
 
633
636
  .bi-button[data-size="large"] {
634
- --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
637
+ --bic-button-padding-block: var(--bi-scale-2x);
638
+ --bic-button-padding-inline: calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
635
639
  --bic-button-icon-size: var(--bi-icon-large);
636
640
  --bic-button-size: var(--bi-scale-14x);
637
641
  }
@@ -643,6 +647,16 @@
643
647
  padding: 0;
644
648
  }
645
649
 
650
+ .bi-button[data-skewed="start"]:has(.bi-button--start-icon) {
651
+ --bic-button-padding-inline: var(--bi-scale-1x) var(--bi-scale-2x);
652
+ margin-left: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
653
+ }
654
+
655
+ .bi-button[data-skewed="end"]:has(.bi-button--end-icon) {
656
+ --bic-button-padding-inline: var(--bi-scale-2x) var(--bi-scale-1x);
657
+ margin-right: calc((var(--bi-scale-1x) + (var(--bic-button-icon-size) * .25)) * -1);
658
+ }
659
+
646
660
  .bi-button:not([data-variant]), .bi-button[data-variant="filled"] {
647
661
  --bic-button-color: var(--bi-basic-white);
648
662
  --bic-button-background: var(--bi-primary-50);
@@ -1567,7 +1581,7 @@ details.bi-details > *:not(summary) + * {
1567
1581
  }
1568
1582
  }
1569
1583
 
1570
- .bi-dialog > button[command="close"]:first-child {
1584
+ .bi-dialog > button.bi-dialog--close {
1571
1585
  top: var(--bic-dialog-icon-spacing);
1572
1586
  right: var(--bic-dialog-icon-spacing);
1573
1587
  position: absolute;
@@ -1582,7 +1596,7 @@ details.bi-details > *:not(summary) + * {
1582
1596
  display: flex;
1583
1597
  }
1584
1598
 
1585
- .bi-dialog:has( > button[command="close"]:first-child) .bi-dialog--header {
1599
+ .bi-dialog:has( > button.bi-dialog--close) .bi-dialog--header {
1586
1600
  padding-right: var(--bi-scale-14x);
1587
1601
  }
1588
1602
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.11.2",
4
+ "version": "0.11.4",
5
5
  "description": "CSS for the BI Design System",
6
6
  "author": "BI Digital",
7
7
  "homepage": "https://designsystem.bi.no/",
@@ -30,7 +30,7 @@
30
30
  "browserslist": "^4.28.1",
31
31
  "lightningcss": "^1.32.0",
32
32
  "modern-normalize": "^3.0.1",
33
- "@bi-digital/tokens": "0.11.2"
33
+ "@bi-digital/tokens": "0.11.4"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",