@bi-digital/css 0.4.0 → 0.4.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 (5) hide show
  1. package/dist/components/card.css +14 -2
  2. package/dist/components/navbar.css +7 -1
  3. package/dist/components.css +21 -3
  4. package/dist/salesforce.css +21 -59
  5. package/package.json +2 -2
package/dist/components/card.css CHANGED
@@ -366,19 +366,31 @@
366
366
  .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
367
367
  border-radius: inherit;
368
368
  object-fit: cover;
369
- aspect-ratio: 3 / 2;
369
+ aspect-ratio: 4 / 3;
370
370
  width: 100%;
371
371
  display: block;
372
372
  }
373
373
 
374
+ @media not (min-width: 600px) {
375
+ .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
376
+ aspect-ratio: 3 / 2;
377
+ }
378
+ }
379
+
374
380
  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
375
381
  border-radius: inherit;
376
382
  object-fit: cover;
377
- aspect-ratio: 3 / 2;
383
+ aspect-ratio: 4 / 3;
378
384
  width: 100%;
379
385
  display: block;
380
386
  }
381
387
 
388
+ @media not (min-width: 600px) {
389
+ .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
390
+ aspect-ratio: 3 / 2;
391
+ }
392
+ }
393
+
382
394
  .bi-card .bi-card--media .bi-card--media-overlay {
383
395
  top: var(--bi-scale-4x);
384
396
  left: var(--bi-scale-4x);
package/dist/components/navbar.css CHANGED
@@ -18,12 +18,18 @@
18
18
  align-items: center;
19
19
  gap: var(--bi-scale-6x);
20
20
  width: 100%;
21
- padding: 0 var(--bi-scale-3x);
21
+ padding: 0 var(--bi-scale-6x);
22
22
  background-color: inherit;
23
23
  color: inherit;
24
24
  display: flex;
25
25
  }
26
26
 
27
+ @media not (min-width: 768px) {
28
+ .bi-navbar > header {
29
+ padding: 0 var(--bi-scale-4x);
30
+ }
31
+ }
32
+
27
33
  @media (prefers-reduced-motion: no-preference) {
28
34
  .bi-navbar > header {
29
35
  transition: transform .2s ease-in-out;
package/dist/components.css CHANGED
@@ -832,19 +832,31 @@
832
832
  .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
833
833
  border-radius: inherit;
834
834
  object-fit: cover;
835
- aspect-ratio: 3 / 2;
835
+ aspect-ratio: 4 / 3;
836
836
  width: 100%;
837
837
  display: block;
838
838
  }
839
839
 
840
+ @media not (min-width: 600px) {
841
+ .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
842
+ aspect-ratio: 3 / 2;
843
+ }
844
+ }
845
+
840
846
  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
841
847
  border-radius: inherit;
842
848
  object-fit: cover;
843
- aspect-ratio: 3 / 2;
849
+ aspect-ratio: 4 / 3;
844
850
  width: 100%;
845
851
  display: block;
846
852
  }
847
853
 
854
+ @media not (min-width: 600px) {
855
+ .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
856
+ aspect-ratio: 3 / 2;
857
+ }
858
+ }
859
+
848
860
  .bi-card .bi-card--media .bi-card--media-overlay {
849
861
  top: var(--bi-scale-4x);
850
862
  left: var(--bi-scale-4x);
@@ -2826,12 +2838,18 @@ svg[data-color="white"] {
2826
2838
  align-items: center;
2827
2839
  gap: var(--bi-scale-6x);
2828
2840
  width: 100%;
2829
- padding: 0 var(--bi-scale-3x);
2841
+ padding: 0 var(--bi-scale-6x);
2830
2842
  background-color: inherit;
2831
2843
  color: inherit;
2832
2844
  display: flex;
2833
2845
  }
2834
2846
 
2847
+ @media not (min-width: 768px) {
2848
+ .bi-navbar > header {
2849
+ padding: 0 var(--bi-scale-4x);
2850
+ }
2851
+ }
2852
+
2835
2853
  @media (prefers-reduced-motion: no-preference) {
2836
2854
  .bi-navbar > header {
2837
2855
  transition: transform .2s ease-in-out;
package/dist/salesforce.css CHANGED
@@ -370,62 +370,6 @@
370
370
  --bi-layout-navbar-height: var(--bi-scale-16x);
371
371
  }
372
372
 
373
- @font-face {
374
- font-family: museo-sans;
375
- font-weight: 300;
376
- font-display: swap;
377
- src: url("./fonts/MuseoSans300.woff2") format("woff2");
378
- }
379
-
380
- @font-face {
381
- font-family: museo-sans;
382
- font-weight: 500;
383
- font-display: swap;
384
- src: url("./fonts/MuseoSans500.woff2") format("woff2");
385
- }
386
-
387
- @font-face {
388
- font-family: museo-sans;
389
- font-weight: 700;
390
- font-display: swap;
391
- src: url("./fonts/MuseoSans700.woff2") format("woff2");
392
- }
393
-
394
- @font-face {
395
- font-family: museo-sans;
396
- font-weight: 900;
397
- font-display: swap;
398
- src: url("./fonts/MuseoSans900.woff2") format("woff2");
399
- }
400
-
401
- @font-face {
402
- font-family: museo-slab;
403
- font-weight: 300;
404
- font-display: swap;
405
- src: url("./fonts/MuseoSlab300.woff2") format("woff2");
406
- }
407
-
408
- @font-face {
409
- font-family: museo-slab;
410
- font-weight: 500;
411
- font-display: swap;
412
- src: url("./fonts/MuseoSlab500.woff2") format("woff2");
413
- }
414
-
415
- @font-face {
416
- font-family: museo-slab;
417
- font-weight: 700;
418
- font-display: swap;
419
- src: url("./fonts/MuseoSlab700.woff2") format("woff2");
420
- }
421
-
422
- @font-face {
423
- font-family: museo-slab;
424
- font-weight: 900;
425
- font-display: swap;
426
- src: url("./fonts/MuseoSlab900.woff2") format("woff2");
427
- }
428
-
429
373
  .bi-alert {
430
374
  --bic-alert-background: var(--bi-primary-5);
431
375
  --bic-alert-border-color: var(--bi-primary-10);
@@ -1260,19 +1204,31 @@
1260
1204
  .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
1261
1205
  border-radius: inherit;
1262
1206
  object-fit: cover;
1263
- aspect-ratio: 3 / 2;
1207
+ aspect-ratio: 4 / 3;
1264
1208
  width: 100%;
1265
1209
  display: block;
1266
1210
  }
1267
1211
 
1212
+ @media not (min-width: 600px) {
1213
+ .bi-card .bi-card--media > :-webkit-any(audio, figure, iframe, img, video) {
1214
+ aspect-ratio: 3 / 2;
1215
+ }
1216
+ }
1217
+
1268
1218
  .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
1269
1219
  border-radius: inherit;
1270
1220
  object-fit: cover;
1271
- aspect-ratio: 3 / 2;
1221
+ aspect-ratio: 4 / 3;
1272
1222
  width: 100%;
1273
1223
  display: block;
1274
1224
  }
1275
1225
 
1226
+ @media not (min-width: 600px) {
1227
+ .bi-card .bi-card--media > :is(audio, figure, iframe, img, video) {
1228
+ aspect-ratio: 3 / 2;
1229
+ }
1230
+ }
1231
+
1276
1232
  .bi-card .bi-card--media .bi-card--media-overlay {
1277
1233
  top: var(--bi-scale-4x);
1278
1234
  left: var(--bi-scale-4x);
@@ -3254,12 +3210,18 @@ svg[data-color="white"] {
3254
3210
  align-items: center;
3255
3211
  gap: var(--bi-scale-6x);
3256
3212
  width: 100%;
3257
- padding: 0 var(--bi-scale-3x);
3213
+ padding: 0 var(--bi-scale-6x);
3258
3214
  background-color: inherit;
3259
3215
  color: inherit;
3260
3216
  display: flex;
3261
3217
  }
3262
3218
 
3219
+ @media not (min-width: 768px) {
3220
+ .bi-navbar > header {
3221
+ padding: 0 var(--bi-scale-4x);
3222
+ }
3223
+ }
3224
+
3263
3225
  @media (prefers-reduced-motion: no-preference) {
3264
3226
  .bi-navbar > header {
3265
3227
  transition: transform .2s ease-in-out;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
3
  "type": "module",
4
- "version": "0.4.0",
4
+ "version": "0.4.2",
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.0.1",
38
- "@bi-digital/tokens": "0.4.0"
38
+ "@bi-digital/tokens": "0.4.2"
39
39
  },
40
40
  "scripts": {
41
41
  "build": "rimraf dist && node config.js",