@bi-digital/css 0.11.3 → 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 (4) hide show
  1. package/dist/components/button.css +18 -4
  2. package/dist/components.css +18 -4
  3. package/dist/salesforce.css +18 -4
  4. 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.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);
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);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.11.3",
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.3"
33
+ "@bi-digital/tokens": "0.11.4"
34
34
  },
35
35
  "scripts": {
36
36
  "build": "node config.js",