@bi-digital/css 0.0.0-experimental-7ec9539 → 0.0.0-experimental-160e3ca

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 (6) hide show
  1. package/dist/components/card.css +10 -9
  2. package/dist/components/chip.css +2 -1
  3. package/dist/components/filter-group.css +8 -4
  4. package/dist/components/tabs.css +2 -0
  5. package/dist/components.css +22 -14
  6. package/package.json +2 -2
package/dist/components/card.css CHANGED
@@ -49,18 +49,18 @@
49
49
  }
50
50
 
51
51
  .bi-card[data-orientation="horizontal"] {
52
- --bic-card-media-width: 252px;
52
+ --bic-card-media-width: 15.75rem;
53
53
  }
54
54
 
55
55
  @media not (min-width: 1024px) {
56
56
  .bi-card[data-orientation="horizontal"] {
57
- --bic-card-media-width: 220px;
57
+ --bic-card-media-width: 14.5rem;
58
58
  }
59
59
  }
60
60
 
61
- @media not (min-width: 768px) {
61
+ @media not (min-width: 600px) {
62
62
  .bi-card[data-orientation="horizontal"] {
63
- --bic-card-media-width: 135px;
63
+ --bic-card-media-width: 8.4375rem;
64
64
  }
65
65
  }
66
66
 
@@ -115,6 +115,7 @@
115
115
  flex-direction: column;
116
116
  flex: auto;
117
117
  display: flex;
118
+ overflow: hidden;
118
119
  }
119
120
 
120
121
  .bi-card .bi-card--content > p {
@@ -132,7 +133,7 @@
132
133
  overflow: hidden;
133
134
  }
134
135
 
135
- @media not (min-width: 768px) {
136
+ @media not (min-width: 600px) {
136
137
  .bi-card .bi-card--content {
137
138
  --bic-card-content-padding: var(--bi-scale-3x);
138
139
  gap: var(--bi-scale-3x);
@@ -260,7 +261,7 @@
260
261
  display: flex;
261
262
  }
262
263
 
263
- @media not (min-width: 768px) {
264
+ @media not (min-width: 600px) {
264
265
  .bi-card .bi-card--actions {
265
266
  width: var(--bi-scale-11x);
266
267
  }
@@ -273,7 +274,7 @@
273
274
  flex: 1;
274
275
  }
275
276
 
276
- @media not (min-width: 768px) {
277
+ @media not (min-width: 600px) {
277
278
  .bi-card .bi-card--actions .bi-card--action {
278
279
  --bic-button-size: var(--bi-scale-11x);
279
280
  }
@@ -296,7 +297,7 @@
296
297
  font-size: .875rem;
297
298
  }
298
299
 
299
- @media not (min-width: 768px) {
300
+ @media not (min-width: 600px) {
300
301
  .bi-card .bi-card--header .bi-card--header-label {
301
302
  font-size: .8125rem;
302
303
  }
@@ -331,7 +332,7 @@
331
332
  overflow: hidden;
332
333
  }
333
334
 
334
- @media not (min-width: 768px) {
335
+ @media not (min-width: 600px) {
335
336
  .bi-card .bi-card--header .bi-card--header-title {
336
337
  font-size: 1rem;
337
338
  }
package/dist/components/chip.css CHANGED
@@ -17,9 +17,10 @@
17
17
  font-family: museo-sans, Arial, sans-serif;
18
18
  font-size: var(--bic-chip-font-size);
19
19
  line-height: var(--bic-chip-line-height);
20
- justify-content: center;
20
+ justify-content: flex-start;
21
21
  align-items: center;
22
22
  display: inline-flex;
23
+ overflow: hidden;
23
24
  }
24
25
 
25
26
  .bi-chip:-webkit-any(button) {
package/dist/components/filter-group.css CHANGED
@@ -20,7 +20,8 @@
20
20
  }
21
21
 
22
22
  .bi-filter-group > button {
23
- box-shadow: 0 var(--bi-scale-0-25x) 0 0 var(--bic-filter-group-border-color);
23
+ border: none;
24
+ border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
24
25
  height: var(--bi-scale-12x);
25
26
  color: var(--bic-filter-group-text-color);
26
27
  align-items: center;
@@ -30,9 +31,7 @@
30
31
  background: var(--bic-filter-group-background-color);
31
32
  cursor: pointer;
32
33
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
33
- border: none;
34
34
  flex-direction: row;
35
- font-size: 1rem;
36
35
  display: flex;
37
36
  }
38
37
 
@@ -58,6 +57,7 @@
58
57
  flex: 1;
59
58
  margin: 0;
60
59
  font-family: museo-sans, Arial, sans-serif;
60
+ font-size: 1rem;
61
61
  font-weight: 700;
62
62
  line-height: 1.5;
63
63
  }
@@ -69,10 +69,14 @@
69
69
  display: none;
70
70
  }
71
71
 
72
+ .bi-filter-group > div > .bi-field:has(.bi-input[type="checkbox"]) {
73
+ width: 100%;
74
+ }
75
+
72
76
  .bi-filter-group[data-expanded="true"] > button {
73
- box-shadow: none;
74
77
  --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
75
78
  border-radius: var(--bi-radius-small);
79
+ border-bottom: none;
76
80
  }
77
81
 
78
82
  .bi-filter-group[data-expanded="true"] > div {
package/dist/components/tabs.css CHANGED
@@ -25,6 +25,8 @@
25
25
  overflow-y: auto;
26
26
  overflow-x: unset;
27
27
  flex-direction: column;
28
+ width: -webkit-fit-content;
29
+ width: fit-content;
28
30
  }
29
31
 
30
32
  .bi-tabs .bi-tabs--list .bi-tabs--tab {
package/dist/components.css CHANGED
@@ -507,18 +507,18 @@
507
507
  }
508
508
 
509
509
  .bi-card[data-orientation="horizontal"] {
510
- --bic-card-media-width: 252px;
510
+ --bic-card-media-width: 15.75rem;
511
511
  }
512
512
 
513
513
  @media not (min-width: 1024px) {
514
514
  .bi-card[data-orientation="horizontal"] {
515
- --bic-card-media-width: 220px;
515
+ --bic-card-media-width: 14.5rem;
516
516
  }
517
517
  }
518
518
 
519
- @media not (min-width: 768px) {
519
+ @media not (min-width: 600px) {
520
520
  .bi-card[data-orientation="horizontal"] {
521
- --bic-card-media-width: 135px;
521
+ --bic-card-media-width: 8.4375rem;
522
522
  }
523
523
  }
524
524
 
@@ -573,6 +573,7 @@
573
573
  flex-direction: column;
574
574
  flex: auto;
575
575
  display: flex;
576
+ overflow: hidden;
576
577
  }
577
578
 
578
579
  .bi-card .bi-card--content > p {
@@ -590,7 +591,7 @@
590
591
  overflow: hidden;
591
592
  }
592
593
 
593
- @media not (min-width: 768px) {
594
+ @media not (min-width: 600px) {
594
595
  .bi-card .bi-card--content {
595
596
  --bic-card-content-padding: var(--bi-scale-3x);
596
597
  gap: var(--bi-scale-3x);
@@ -718,7 +719,7 @@
718
719
  display: flex;
719
720
  }
720
721
 
721
- @media not (min-width: 768px) {
722
+ @media not (min-width: 600px) {
722
723
  .bi-card .bi-card--actions {
723
724
  width: var(--bi-scale-11x);
724
725
  }
@@ -731,7 +732,7 @@
731
732
  flex: 1;
732
733
  }
733
734
 
734
- @media not (min-width: 768px) {
735
+ @media not (min-width: 600px) {
735
736
  .bi-card .bi-card--actions .bi-card--action {
736
737
  --bic-button-size: var(--bi-scale-11x);
737
738
  }
@@ -754,7 +755,7 @@
754
755
  font-size: .875rem;
755
756
  }
756
757
 
757
- @media not (min-width: 768px) {
758
+ @media not (min-width: 600px) {
758
759
  .bi-card .bi-card--header .bi-card--header-label {
759
760
  font-size: .8125rem;
760
761
  }
@@ -789,7 +790,7 @@
789
790
  overflow: hidden;
790
791
  }
791
792
 
792
- @media not (min-width: 768px) {
793
+ @media not (min-width: 600px) {
793
794
  .bi-card .bi-card--header .bi-card--header-title {
794
795
  font-size: 1rem;
795
796
  }
@@ -897,9 +898,10 @@
897
898
  font-family: museo-sans, Arial, sans-serif;
898
899
  font-size: var(--bic-chip-font-size);
899
900
  line-height: var(--bic-chip-line-height);
900
- justify-content: center;
901
+ justify-content: flex-start;
901
902
  align-items: center;
902
903
  display: inline-flex;
904
+ overflow: hidden;
903
905
  }
904
906
 
905
907
  .bi-chip:-webkit-any(button) {
@@ -1739,7 +1741,8 @@ body:has(.bi-dialog:modal) {
1739
1741
  }
1740
1742
 
1741
1743
  .bi-filter-group > button {
1742
- box-shadow: 0 var(--bi-scale-0-25x) 0 0 var(--bic-filter-group-border-color);
1744
+ border: none;
1745
+ border-bottom: var(--bi-scale-0-25x) solid var(--bic-filter-group-border-color);
1743
1746
  height: var(--bi-scale-12x);
1744
1747
  color: var(--bic-filter-group-text-color);
1745
1748
  align-items: center;
@@ -1749,9 +1752,7 @@ body:has(.bi-dialog:modal) {
1749
1752
  background: var(--bic-filter-group-background-color);
1750
1753
  cursor: pointer;
1751
1754
  border-radius: var(--bi-radius-small) var(--bi-radius-small) 0 0;
1752
- border: none;
1753
1755
  flex-direction: row;
1754
- font-size: 1rem;
1755
1756
  display: flex;
1756
1757
  }
1757
1758
 
@@ -1777,6 +1778,7 @@ body:has(.bi-dialog:modal) {
1777
1778
  flex: 1;
1778
1779
  margin: 0;
1779
1780
  font-family: museo-sans, Arial, sans-serif;
1781
+ font-size: 1rem;
1780
1782
  font-weight: 700;
1781
1783
  line-height: 1.5;
1782
1784
  }
@@ -1788,10 +1790,14 @@ body:has(.bi-dialog:modal) {
1788
1790
  display: none;
1789
1791
  }
1790
1792
 
1793
+ .bi-filter-group > div > .bi-field:has(.bi-input[type="checkbox"]) {
1794
+ width: 100%;
1795
+ }
1796
+
1791
1797
  .bi-filter-group[data-expanded="true"] > button {
1792
- box-shadow: none;
1793
1798
  --bic-filter-group-background-color: var(--bic-filter-group-background-color-expanded);
1794
1799
  border-radius: var(--bi-radius-small);
1800
+ border-bottom: none;
1795
1801
  }
1796
1802
 
1797
1803
  .bi-filter-group[data-expanded="true"] > div {
@@ -2808,6 +2814,8 @@ body:has(.bi-dialog:modal) {
2808
2814
  overflow-y: auto;
2809
2815
  overflow-x: unset;
2810
2816
  flex-direction: column;
2817
+ width: -webkit-fit-content;
2818
+ width: fit-content;
2811
2819
  }
2812
2820
 
2813
2821
  .bi-tabs .bi-tabs--list .bi-tabs--tab {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bi-digital/css",
3
- "version": "0.0.0-experimental-7ec9539",
3
+ "version": "0.0.0-experimental-160e3ca",
4
4
  "description": "CSS for the BI Design System",
5
5
  "author": "BI Digital",
6
6
  "license": "ISC",
@@ -23,7 +23,7 @@
23
23
  "lightningcss": "^1.30.1",
24
24
  "modern-normalize": "^3.0.1",
25
25
  "rimraf": "^6.0.1",
26
- "@bi-digital/tokens": "0.0.0-experimental-7ec9539"
26
+ "@bi-digital/tokens": "0.0.0-experimental-160e3ca"
27
27
  },
28
28
  "scripts": {
29
29
  "build": "rimraf dist && node config.js",