@bi-digital/css 0.6.5 → 0.6.6

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 +3 -3
  2. package/dist/components/popover.css +32 -0
  3. package/dist/components.css +35 -3
  4. package/dist/salesforce.css +35 -3
  5. package/package.json +2 -2
package/dist/components/button.css CHANGED
@@ -1,6 +1,6 @@
1
1
  .bi-button {
2
2
  --bic-button-box-shadow: none;
3
- --bic-button-icon-size: var(--bi-scale-6x);
3
+ --bic-button-icon-size: var(--bi-icon-medium);
4
4
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
5
5
  --bic-button-size: var(--bi-scale-11x);
6
6
  --bic-button-font-size: 1rem;
@@ -68,13 +68,13 @@
68
68
  --bic-button-font-size: .875rem;
69
69
  --bic-button-line-height: 1.25rem;
70
70
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
71
- --bic-button-icon-size: var(--bi-scale-4x);
71
+ --bic-button-icon-size: var(--bi-icon-small);
72
72
  --bic-button-size: var(--bi-scale-8x);
73
73
  }
74
74
 
75
75
  .bi-button[data-size="large"] {
76
76
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
77
- --bic-button-icon-size: var(--bi-scale-8x);
77
+ --bic-button-icon-size: var(--bi-icon-large);
78
78
  --bic-button-size: var(--bi-scale-14x);
79
79
  }
80
80
 
package/dist/components/popover.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .bi-popover {
2
+ --bic-popover-arrow-size: var(--bi-scale-3x);
2
3
  --bic-popover-background: var(--bi-basic-white);
3
4
  --bic-popover-border-width: var(--bi-stroke-thin);
4
5
  --bic-popover-border-style: solid;
@@ -42,6 +43,37 @@
42
43
  display: block;
43
44
  }
44
45
 
46
+ .bi-popover[data-arrow="true"]:before {
47
+ background: var(--bic-popover-background);
48
+ border: inherit;
49
+ box-sizing: border-box;
50
+ content: "";
51
+ height: var(--bic-popover-arrow-size);
52
+ left: var(--bic-popover-arrow-x);
53
+ top: var(--bic-popover-arrow-y);
54
+ width: var(--bic-popover-arrow-size);
55
+ border-top-color: #0000;
56
+ border-left-color: #0000;
57
+ position: absolute;
58
+ translate: -50% -50%;
59
+ }
60
+
61
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
62
+ rotate: 45deg;
63
+ }
64
+
65
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
66
+ rotate: -45deg;
67
+ }
68
+
69
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
70
+ rotate: 135deg;
71
+ }
72
+
73
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
74
+ rotate: -135deg;
75
+ }
76
+
45
77
  [data-popover="inline"] {
46
78
  all: unset;
47
79
  cursor: pointer;
package/dist/components.css CHANGED
@@ -341,7 +341,7 @@
341
341
 
342
342
  .bi-button {
343
343
  --bic-button-box-shadow: none;
344
- --bic-button-icon-size: var(--bi-scale-6x);
344
+ --bic-button-icon-size: var(--bi-icon-medium);
345
345
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
346
346
  --bic-button-size: var(--bi-scale-11x);
347
347
  --bic-button-font-size: 1rem;
@@ -409,13 +409,13 @@
409
409
  --bic-button-font-size: .875rem;
410
410
  --bic-button-line-height: 1.25rem;
411
411
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
412
- --bic-button-icon-size: var(--bi-scale-4x);
412
+ --bic-button-icon-size: var(--bi-icon-small);
413
413
  --bic-button-size: var(--bi-scale-8x);
414
414
  }
415
415
 
416
416
  .bi-button[data-size="large"] {
417
417
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
418
- --bic-button-icon-size: var(--bi-scale-8x);
418
+ --bic-button-icon-size: var(--bi-icon-large);
419
419
  --bic-button-size: var(--bi-scale-14x);
420
420
  }
421
421
 
@@ -3109,6 +3109,7 @@ svg[data-color="white"] {
3109
3109
  }
3110
3110
 
3111
3111
  .bi-popover {
3112
+ --bic-popover-arrow-size: var(--bi-scale-3x);
3112
3113
  --bic-popover-background: var(--bi-basic-white);
3113
3114
  --bic-popover-border-width: var(--bi-stroke-thin);
3114
3115
  --bic-popover-border-style: solid;
@@ -3152,6 +3153,37 @@ svg[data-color="white"] {
3152
3153
  display: block;
3153
3154
  }
3154
3155
 
3156
+ .bi-popover[data-arrow="true"]:before {
3157
+ background: var(--bic-popover-background);
3158
+ border: inherit;
3159
+ box-sizing: border-box;
3160
+ content: "";
3161
+ height: var(--bic-popover-arrow-size);
3162
+ left: var(--bic-popover-arrow-x);
3163
+ top: var(--bic-popover-arrow-y);
3164
+ width: var(--bic-popover-arrow-size);
3165
+ border-top-color: #0000;
3166
+ border-left-color: #0000;
3167
+ position: absolute;
3168
+ translate: -50% -50%;
3169
+ }
3170
+
3171
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
3172
+ rotate: 45deg;
3173
+ }
3174
+
3175
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
3176
+ rotate: -45deg;
3177
+ }
3178
+
3179
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
3180
+ rotate: 135deg;
3181
+ }
3182
+
3183
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3184
+ rotate: -135deg;
3185
+ }
3186
+
3155
3187
  [data-popover="inline"] {
3156
3188
  all: unset;
3157
3189
  cursor: pointer;
package/dist/salesforce.css CHANGED
@@ -567,7 +567,7 @@
567
567
 
568
568
  .bi-button {
569
569
  --bic-button-box-shadow: none;
570
- --bic-button-icon-size: var(--bi-scale-6x);
570
+ --bic-button-icon-size: var(--bi-icon-medium);
571
571
  --bic-button-padding: .625rem calc(var(--bi-scale-6x) + var(--bi-scale-0-50x));
572
572
  --bic-button-size: var(--bi-scale-11x);
573
573
  --bic-button-font-size: 1rem;
@@ -635,13 +635,13 @@
635
635
  --bic-button-font-size: .875rem;
636
636
  --bic-button-line-height: 1.25rem;
637
637
  --bic-button-padding: var(--bi-scale-1-5x) calc(var(--bi-scale-3x) + var(--bi-scale-0-50x));
638
- --bic-button-icon-size: var(--bi-scale-4x);
638
+ --bic-button-icon-size: var(--bi-icon-small);
639
639
  --bic-button-size: var(--bi-scale-8x);
640
640
  }
641
641
 
642
642
  .bi-button[data-size="large"] {
643
643
  --bic-button-padding: var(--bi-scale-2x) calc(var(--bi-scale-9x) + var(--bi-scale-0-50x));
644
- --bic-button-icon-size: var(--bi-scale-8x);
644
+ --bic-button-icon-size: var(--bi-icon-large);
645
645
  --bic-button-size: var(--bi-scale-14x);
646
646
  }
647
647
 
@@ -3335,6 +3335,7 @@ svg[data-color="white"] {
3335
3335
  }
3336
3336
 
3337
3337
  .bi-popover {
3338
+ --bic-popover-arrow-size: var(--bi-scale-3x);
3338
3339
  --bic-popover-background: var(--bi-basic-white);
3339
3340
  --bic-popover-border-width: var(--bi-stroke-thin);
3340
3341
  --bic-popover-border-style: solid;
@@ -3378,6 +3379,37 @@ svg[data-color="white"] {
3378
3379
  display: block;
3379
3380
  }
3380
3381
 
3382
+ .bi-popover[data-arrow="true"]:before {
3383
+ background: var(--bic-popover-background);
3384
+ border: inherit;
3385
+ box-sizing: border-box;
3386
+ content: "";
3387
+ height: var(--bic-popover-arrow-size);
3388
+ left: var(--bic-popover-arrow-x);
3389
+ top: var(--bic-popover-arrow-y);
3390
+ width: var(--bic-popover-arrow-size);
3391
+ border-top-color: #0000;
3392
+ border-left-color: #0000;
3393
+ position: absolute;
3394
+ translate: -50% -50%;
3395
+ }
3396
+
3397
+ .bi-popover[data-arrow="true"][data-placement="top"]:before {
3398
+ rotate: 45deg;
3399
+ }
3400
+
3401
+ .bi-popover[data-arrow="true"][data-placement="left"]:before {
3402
+ rotate: -45deg;
3403
+ }
3404
+
3405
+ .bi-popover[data-arrow="true"][data-placement="right"]:before {
3406
+ rotate: 135deg;
3407
+ }
3408
+
3409
+ .bi-popover[data-arrow="true"][data-placement="bottom"]:before {
3410
+ rotate: -135deg;
3411
+ }
3412
+
3381
3413
  [data-popover="inline"] {
3382
3414
  all: unset;
3383
3415
  cursor: pointer;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.6.5",
4
+ "version": "0.6.6",
5
5
  "engines": {
6
6
  "node": "^20.19.0 || >=22.12.0"
7
7
  },
@@ -35,7 +35,7 @@
35
35
  "lightningcss": "^1.30.2",
36
36
  "modern-normalize": "^3.0.1",
37
37
  "rimraf": "^6.1.0",
38
- "@bi-digital/tokens": "0.6.5"
38
+ "@bi-digital/tokens": "0.6.6"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf dist && node config.js",