@bi-digital/css 0.11.10 → 0.11.11

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 (35) hide show
  1. package/dist/baseline.css +4 -2
  2. package/dist/components/alert.css +109 -111
  3. package/dist/components/avatar.css +45 -47
  4. package/dist/components/badge.css +88 -88
  5. package/dist/components/button.css +117 -117
  6. package/dist/components/card.css +268 -282
  7. package/dist/components/checkbox-subsection.css +15 -15
  8. package/dist/components/chip.css +146 -146
  9. package/dist/components/details.css +88 -92
  10. package/dist/components/dialog.css +99 -97
  11. package/dist/components/dropdown.css +23 -25
  12. package/dist/components/field.css +204 -202
  13. package/dist/components/fieldset.css +20 -22
  14. package/dist/components/filter-group.css +80 -80
  15. package/dist/components/footer.css +110 -124
  16. package/dist/components/icons.css +30 -30
  17. package/dist/components/input.css +184 -186
  18. package/dist/components/label.css +17 -17
  19. package/dist/components/link.css +47 -47
  20. package/dist/components/logo.css +32 -34
  21. package/dist/components/navbar.css +46 -50
  22. package/dist/components/pagination.css +29 -27
  23. package/dist/components/popover.css +40 -40
  24. package/dist/components/search.css +12 -8
  25. package/dist/components/skip-link.css +8 -10
  26. package/dist/components/spinner.css +22 -25
  27. package/dist/components/sticky-header.css +1 -3
  28. package/dist/components/sub-navbar.css +23 -25
  29. package/dist/components/tabs.css +109 -113
  30. package/dist/components/tooltip.css +30 -30
  31. package/dist/components/validation-message.css +9 -9
  32. package/dist/components.css +1996 -2037
  33. package/dist/index.css +4 -2
  34. package/dist/salesforce.css +1996 -2037
  35. package/package.json +2 -2
package/dist/components/chip.css CHANGED
@@ -19,189 +19,189 @@
19
19
  align-items: center;
20
20
  display: inline-flex;
21
21
  overflow: hidden;
22
- }
23
22
 
24
- .bi-chip[data-size="small"] {
25
- --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
26
- --bic-chip-font: var(--bi-font-body-small);
27
- --bic-chip-icon-size: var(--bi-scale-5x);
28
- }
23
+ &[data-size="small"] {
24
+ --bic-chip-padding: var(--bi-scale-0-50x) var(--bi-scale-2x);
25
+ --bic-chip-font: var(--bi-font-body-small);
26
+ --bic-chip-icon-size: var(--bi-scale-5x);
27
+ }
29
28
 
30
- .bi-chip[data-size="large"] {
31
- --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
32
- --bic-chip-font: var(--bi-font-body-large);
33
- }
29
+ &[data-size="large"] {
30
+ --bic-chip-padding: var(--bi-scale-2x) var(--bi-scale-4x);
31
+ --bic-chip-font: var(--bi-font-body-large);
32
+ }
34
33
 
35
- .bi-chip[data-dark="true"] {
36
- --bic-chip-focus-inner: var(--bi-neutral-95);
37
- --bic-chip-focus-outer: var(--bi-primary-30);
38
- --bic-chip-background-hover: var(--bi-states-hover-light);
39
- --bic-chip-background-press: var(--bi-states-press-light);
40
- }
34
+ &[data-dark="true"] {
35
+ --bic-chip-focus-inner: var(--bi-neutral-95);
36
+ --bic-chip-focus-outer: var(--bi-primary-30);
37
+ --bic-chip-background-hover: var(--bi-states-hover-light);
38
+ --bic-chip-background-press: var(--bi-states-press-light);
39
+ }
41
40
 
42
- .bi-chip[data-selected="true"] {
43
- --bic-chip-background-hover: var(--bi-states-hover-light);
44
- --bic-chip-background-press: var(--bi-states-press-light);
45
- }
41
+ &[data-selected="true"] {
42
+ --bic-chip-background-hover: var(--bi-states-hover-light);
43
+ --bic-chip-background-press: var(--bi-states-press-light);
44
+ }
46
45
 
47
- .bi-chip[data-color="white"] {
48
- --bic-chip-background: var(--bi-basic-white);
49
- }
46
+ &[data-color="white"] {
47
+ --bic-chip-background: var(--bi-basic-white);
50
48
 
51
- .bi-chip[data-color="white"][data-selected="true"] {
52
- --bic-chip-background: var(--bi-neutral-60);
53
- --bic-chip-text-color: var(--bi-basic-white);
54
- }
49
+ &[data-selected="true"] {
50
+ --bic-chip-background: var(--bi-neutral-60);
51
+ --bic-chip-text-color: var(--bi-basic-white);
52
+ }
55
53
 
56
- .bi-chip[data-color="white"][data-dark="true"] {
57
- --bic-chip-background: var(--bi-neutral-100);
58
- --bic-chip-text-color: var(--bi-basic-white);
59
- }
54
+ &[data-dark="true"] {
55
+ --bic-chip-background: var(--bi-neutral-100);
56
+ --bic-chip-text-color: var(--bi-basic-white);
57
+ }
60
58
 
61
- .bi-chip[data-color="white"][data-dark="true"][data-selected="true"] {
62
- --bic-chip-background: var(--bi-neutral-50);
63
- --bic-chip-text-color: var(--bi-basic-white);
64
- }
59
+ &[data-dark="true"][data-selected="true"] {
60
+ --bic-chip-background: var(--bi-neutral-50);
61
+ --bic-chip-text-color: var(--bi-basic-white);
62
+ }
63
+ }
65
64
 
66
- .bi-chip[data-color="neutral"] {
67
- --bic-chip-background: var(--bi-neutral-5);
68
- }
65
+ &[data-color="neutral"] {
66
+ --bic-chip-background: var(--bi-neutral-5);
69
67
 
70
- .bi-chip[data-color="neutral"][data-selected="true"] {
71
- --bic-chip-background: var(--bi-neutral-60);
72
- --bic-chip-text-color: var(--bi-basic-white);
73
- }
68
+ &[data-selected="true"] {
69
+ --bic-chip-background: var(--bi-neutral-60);
70
+ --bic-chip-text-color: var(--bi-basic-white);
71
+ }
74
72
 
75
- .bi-chip[data-color="neutral"][data-dark="true"] {
76
- --bic-chip-background: var(--bi-neutral-95);
77
- --bic-chip-text-color: var(--bi-basic-white);
78
- }
73
+ &[data-dark="true"] {
74
+ --bic-chip-background: var(--bi-neutral-95);
75
+ --bic-chip-text-color: var(--bi-basic-white);
76
+ }
79
77
 
80
- .bi-chip[data-color="neutral"][data-dark="true"][data-selected="true"] {
81
- --bic-chip-background: var(--bi-neutral-50);
82
- --bic-chip-text-color: var(--bi-basic-white);
83
- }
78
+ &[data-dark="true"][data-selected="true"] {
79
+ --bic-chip-background: var(--bi-neutral-50);
80
+ --bic-chip-text-color: var(--bi-basic-white);
81
+ }
82
+ }
84
83
 
85
- .bi-chip[data-color="primary"] {
86
- --bic-chip-background: var(--bi-primary-5);
87
- }
84
+ &[data-color="primary"] {
85
+ --bic-chip-background: var(--bi-primary-5);
88
86
 
89
- .bi-chip[data-color="primary"][data-selected="true"] {
90
- --bic-chip-background: var(--bi-primary-50);
91
- --bic-chip-text-color: var(--bi-basic-white);
92
- }
87
+ &[data-selected="true"] {
88
+ --bic-chip-background: var(--bi-primary-50);
89
+ --bic-chip-text-color: var(--bi-basic-white);
90
+ }
93
91
 
94
- .bi-chip[data-color="primary"][data-dark="true"] {
95
- --bic-chip-background: var(--bi-primary-85);
96
- --bic-chip-text-color: var(--bi-primary-10);
97
- }
92
+ &[data-dark="true"] {
93
+ --bic-chip-background: var(--bi-primary-85);
94
+ --bic-chip-text-color: var(--bi-primary-10);
95
+ }
98
96
 
99
- .bi-chip[data-color="primary"][data-dark="true"][data-selected="true"] {
100
- --bic-chip-background: var(--bi-primary-50);
101
- --bic-chip-text-color: var(--bi-basic-white);
102
- }
97
+ &[data-dark="true"][data-selected="true"] {
98
+ --bic-chip-background: var(--bi-primary-50);
99
+ --bic-chip-text-color: var(--bi-basic-white);
100
+ }
101
+ }
103
102
 
104
- .bi-chip[data-color="info"] {
105
- --bic-chip-background: var(--bi-info-5);
106
- }
103
+ &[data-color="info"] {
104
+ --bic-chip-background: var(--bi-info-5);
107
105
 
108
- .bi-chip[data-color="info"][data-selected="true"] {
109
- --bic-chip-background: var(--bi-info-50);
110
- --bic-chip-text-color: var(--bi-basic-white);
111
- }
106
+ &[data-selected="true"] {
107
+ --bic-chip-background: var(--bi-info-50);
108
+ --bic-chip-text-color: var(--bi-basic-white);
109
+ }
112
110
 
113
- .bi-chip[data-color="info"][data-dark="true"] {
114
- --bic-chip-background: var(--bi-info-95);
115
- --bic-chip-text-color: var(--bi-info-15);
116
- }
111
+ &[data-dark="true"] {
112
+ --bic-chip-background: var(--bi-info-95);
113
+ --bic-chip-text-color: var(--bi-info-15);
114
+ }
117
115
 
118
- .bi-chip[data-color="info"][data-dark="true"][data-selected="true"] {
119
- --bic-chip-background: var(--bi-info-50);
120
- --bic-chip-text-color: var(--bi-basic-white);
121
- }
116
+ &[data-dark="true"][data-selected="true"] {
117
+ --bic-chip-background: var(--bi-info-50);
118
+ --bic-chip-text-color: var(--bi-basic-white);
119
+ }
120
+ }
122
121
 
123
- .bi-chip[data-color="alert"] {
124
- --bic-chip-background: var(--bi-alert-10);
125
- }
122
+ &[data-color="alert"] {
123
+ --bic-chip-background: var(--bi-alert-10);
126
124
 
127
- .bi-chip[data-color="alert"][data-selected="true"] {
128
- --bic-chip-background: var(--bi-alert-60);
129
- --bic-chip-text-color: var(--bi-basic-white);
130
- }
125
+ &[data-selected="true"] {
126
+ --bic-chip-background: var(--bi-alert-60);
127
+ --bic-chip-text-color: var(--bi-basic-white);
128
+ }
131
129
 
132
- .bi-chip[data-color="alert"][data-dark="true"] {
133
- --bic-chip-background: var(--bi-alert-95);
134
- --bic-chip-text-color: var(--bi-alert-15);
135
- }
130
+ &[data-dark="true"] {
131
+ --bic-chip-background: var(--bi-alert-95);
132
+ --bic-chip-text-color: var(--bi-alert-15);
133
+ }
136
134
 
137
- .bi-chip[data-color="alert"][data-dark="true"][data-selected="true"] {
138
- --bic-chip-background: var(--bi-alert-60);
139
- --bic-chip-text-color: var(--bi-basic-white);
140
- }
135
+ &[data-dark="true"][data-selected="true"] {
136
+ --bic-chip-background: var(--bi-alert-60);
137
+ --bic-chip-text-color: var(--bi-basic-white);
138
+ }
139
+ }
141
140
 
142
- .bi-chip[data-color="warning"] {
143
- --bic-chip-background: var(--bi-warning-10);
144
- }
141
+ &[data-color="warning"] {
142
+ --bic-chip-background: var(--bi-warning-10);
145
143
 
146
- .bi-chip[data-color="warning"][data-selected="true"] {
147
- --bic-chip-background: var(--bi-warning-75);
148
- --bic-chip-text-color: var(--bi-basic-white);
149
- }
144
+ &[data-selected="true"] {
145
+ --bic-chip-background: var(--bi-warning-75);
146
+ --bic-chip-text-color: var(--bi-basic-white);
147
+ }
150
148
 
151
- .bi-chip[data-color="warning"][data-dark="true"] {
152
- --bic-chip-background: var(--bi-warning-90);
153
- --bic-chip-text-color: var(--bi-warning-15);
154
- }
149
+ &[data-dark="true"] {
150
+ --bic-chip-background: var(--bi-warning-90);
151
+ --bic-chip-text-color: var(--bi-warning-15);
152
+ }
155
153
 
156
- .bi-chip[data-color="warning"][data-dark="true"][data-selected="true"] {
157
- --bic-chip-background: var(--bi-warning-70);
158
- --bic-chip-text-color: var(--bi-basic-white);
159
- }
154
+ &[data-dark="true"][data-selected="true"] {
155
+ --bic-chip-background: var(--bi-warning-70);
156
+ --bic-chip-text-color: var(--bi-basic-white);
157
+ }
158
+ }
160
159
 
161
- .bi-chip[data-color="success"] {
162
- --bic-chip-background: var(--bi-success-5);
163
- }
160
+ &[data-color="success"] {
161
+ --bic-chip-background: var(--bi-success-5);
164
162
 
165
- .bi-chip[data-color="success"][data-selected="true"] {
166
- --bic-chip-background: var(--bi-success-70);
167
- --bic-chip-text-color: var(--bi-basic-white);
168
- }
163
+ &[data-selected="true"] {
164
+ --bic-chip-background: var(--bi-success-70);
165
+ --bic-chip-text-color: var(--bi-basic-white);
166
+ }
169
167
 
170
- .bi-chip[data-color="success"][data-dark="true"] {
171
- --bic-chip-background: var(--bi-success-90);
172
- --bic-chip-text-color: var(--bi-success-10);
173
- }
168
+ &[data-dark="true"] {
169
+ --bic-chip-background: var(--bi-success-90);
170
+ --bic-chip-text-color: var(--bi-success-10);
171
+ }
174
172
 
175
- .bi-chip[data-color="success"][data-dark="true"][data-selected="true"] {
176
- --bic-chip-background: var(--bi-success-70);
177
- --bic-chip-text-color: var(--bi-basic-white);
178
- }
173
+ &[data-dark="true"][data-selected="true"] {
174
+ --bic-chip-background: var(--bi-success-70);
175
+ --bic-chip-text-color: var(--bi-basic-white);
176
+ }
177
+ }
179
178
 
180
- .bi-chip:is(button), .bi-chip:is(a) {
181
- cursor: pointer;
182
- border: none;
183
- text-decoration: none;
184
- }
179
+ &:is(button), &:is(a) {
180
+ cursor: pointer;
181
+ border: none;
182
+ text-decoration: none;
185
183
 
186
- :is(.bi-chip:is(button), .bi-chip:is(a)):focus-visible {
187
- box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
188
- outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
189
- outline-offset: var(--_bi--focus, 2px);
190
- }
184
+ &:focus-visible {
185
+ box-shadow: var(--bic-chip-focus-outer), var(--_bi--focus, 0 0 0 4.5px var(--bic-chip-focus-inner));
186
+ outline: var(--_bi--focus, 3px solid var(--bic-chip-focus-outer));
187
+ outline-offset: var(--_bi--focus, 2px);
188
+ }
191
189
 
192
- @media (hover: hover) and (pointer: fine) {
193
- :is(.bi-chip:is(button), .bi-chip:is(a)):hover {
194
- background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
190
+ @media (hover: hover) and (pointer: fine) {
191
+ &:hover {
192
+ background: linear-gradient(0deg, var(--bic-chip-background-hover) 0%, var(--bic-chip-background-hover) 100%),
195
193
  var(--bic-chip-background);
196
- }
197
- }
194
+ }
195
+ }
198
196
 
199
- :is(.bi-chip:is(button), .bi-chip:is(a)):active {
200
- background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
197
+ &:active {
198
+ background: linear-gradient(0deg, var(--bic-chip-background-press) 0%, var(--bic-chip-background-press) 100%),
201
199
  var(--bic-chip-background);
202
- }
200
+ }
201
+ }
203
202
 
204
- .bi-chip > svg {
205
- display: inherit;
206
- font-size: var(--bic-chip-icon-size);
203
+ & > svg {
204
+ display: inherit;
205
+ font-size: var(--bic-chip-icon-size);
206
+ }
207
207
  }
package/dist/components/details.css CHANGED
@@ -9,21 +9,19 @@ details.bi-details {
9
9
  --bic-details-padding: var(--bi-scale-4x);
10
10
  --bic-details-focus-shadow-color: var(--bi-basic-white);
11
11
  --bic-details-focus-outline-color: var(--bi-primary-50);
12
- }
13
12
 
14
- details.bi-details[data-dark="true"] {
15
- --bic-details-background: var(--bi-neutral-90);
16
- --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
13
+ &[data-dark="true"] {
14
+ --bic-details-background: var(--bi-neutral-90);
15
+ --bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
17
16
  var(--bic-details-background);
18
- --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
17
+ --bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
19
18
  var(--bic-details-background);
20
- --bic-details-border-color: var(--bi-neutral-70);
21
- --bic-details-color: var(--bi-basic-white);
22
- --bic-details-focus-shadow-color: var(--bi-neutral-95);
23
- --bic-details-focus-outline-color: var(--bi-primary-30);
24
- }
19
+ --bic-details-border-color: var(--bi-neutral-70);
20
+ --bic-details-color: var(--bi-basic-white);
21
+ --bic-details-focus-shadow-color: var(--bi-neutral-95);
22
+ --bic-details-focus-outline-color: var(--bi-primary-30);
23
+ }
25
24
 
26
- details.bi-details {
27
25
  font: var(--bi-font-body-large);
28
26
  background-color: var(--bic-details-background);
29
27
  color: var(--bic-details-color);
@@ -32,111 +30,109 @@ details.bi-details {
32
30
  border-style: solid;
33
31
  border-top-width: var(--bi-stroke-thin);
34
32
  border-bottom-width: var(--bi-stroke-thin);
35
- }
36
33
 
37
- details.bi-details + :is(details.bi-details) {
38
- border-top: 0;
39
- }
40
-
41
- details.bi-details summary {
42
- padding: var(--bic-details-padding);
43
- cursor: pointer;
44
- justify-content: space-between;
45
- align-items: center;
46
- gap: var(--bi-scale-2x);
47
- -webkit-user-select: none;
48
- user-select: none;
49
- font-weight: var(--bi-font-weight-bold);
50
- flex-direction: row;
51
- list-style: none;
52
- display: flex;
53
- position: relative;
54
- }
55
-
56
- @media (hover: hover) and (pointer: fine) {
57
- details.bi-details summary:hover {
58
- background: var(--bic-details-background-hover);
34
+ & + & {
35
+ border-top: 0;
59
36
  }
60
- }
61
37
 
62
- details.bi-details summary:active {
63
- background: var(--bic-details-background-press);
64
- }
38
+ & summary {
39
+ padding: var(--bic-details-padding);
40
+ cursor: pointer;
41
+ justify-content: space-between;
42
+ align-items: center;
43
+ gap: var(--bi-scale-2x);
44
+ -webkit-user-select: none;
45
+ user-select: none;
46
+ font-weight: var(--bi-font-weight-bold);
47
+ flex-direction: row;
48
+ list-style: none;
49
+ display: flex;
50
+ position: relative;
51
+
52
+ @media (hover: hover) and (pointer: fine) {
53
+ &:hover {
54
+ background: var(--bic-details-background-hover);
55
+ }
56
+ }
65
57
 
66
- details.bi-details summary:focus-visible {
67
- box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
68
- outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
69
- outline-offset: var(--_bi--focus, -2px);
70
- border-radius: var(--bi-radius-medium);
71
- }
58
+ &:active {
59
+ background: var(--bic-details-background-press);
60
+ }
72
61
 
73
- details.bi-details summary:focus-visible * {
74
- --_bi--focus: ;
75
- }
62
+ &:focus-visible {
63
+ box-shadow: var(--_bi--focus, 0 0 0 4.5px inset var(--bic-details-focus-shadow-color));
64
+ outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bic-details-focus-outline-color));
65
+ outline-offset: var(--_bi--focus, -2px);
66
+ border-radius: var(--bi-radius-medium);
76
67
 
77
- details.bi-details summary::marker {
78
- display: none;
79
- }
68
+ & * {
69
+ --_bi--focus: ;
70
+ }
71
+ }
80
72
 
81
- details.bi-details summary::-webkit-details-marker {
82
- display: none;
83
- }
73
+ &::marker {
74
+ display: none;
75
+ }
84
76
 
85
- details.bi-details summary > svg {
86
- font-size: var(--bi-icon-medium);
87
- width: var(--bi-scale-6x);
88
- height: var(--bi-scale-6x);
89
- flex-shrink: 0;
90
- margin-left: auto;
91
- }
77
+ &::-webkit-details-marker {
78
+ display: none;
79
+ }
92
80
 
93
- @media (prefers-reduced-motion: no-preference) {
94
- details.bi-details summary > svg {
95
- transition: transform .2s ease-in-out;
81
+ & > svg {
82
+ font-size: var(--bi-icon-medium);
83
+ width: var(--bi-scale-6x);
84
+ height: var(--bi-scale-6x);
85
+ flex-shrink: 0;
86
+ margin-left: auto;
87
+
88
+ @media (prefers-reduced-motion: no-preference) {
89
+ transition: transform .2s ease-in-out;
90
+ }
91
+ }
96
92
  }
97
- }
98
93
 
99
- details.bi-details[open] summary > svg {
100
- transform: rotate(180deg);
101
- }
94
+ &[open] summary > svg {
95
+ transform: rotate(180deg);
96
+ }
102
97
 
103
- @supports (interpolate-size: allow-keywords) and selector(::details-content) {
104
- @media (prefers-reduced-motion: no-preference) {
105
- details.bi-details {
98
+ @supports (interpolate-size: allow-keywords) and selector(::details-content) {
99
+ @media (prefers-reduced-motion: no-preference) {
106
100
  interpolate-size: allow-keywords;
107
101
  }
108
- }
109
102
 
110
- details.bi-details::details-content {
111
- transition: height .2s ease-in-out,
103
+ &::details-content {
104
+ transition: height .2s ease-in-out,
112
105
  content-visibility .2s ease-in-out allow-discrete;
113
- height: 0;
114
- overflow: clip;
115
- }
106
+ height: 0;
107
+ overflow: clip;
108
+ }
116
109
 
117
- details.bi-details[open]::details-content {
118
- height: auto;
110
+ &[open]::details-content {
111
+ height: auto;
112
+ }
119
113
  }
120
- }
121
114
 
122
- details.bi-details > * {
123
- padding: var(--bic-details-padding);
124
- margin: 0;
125
- overflow: clip;
126
- }
115
+ & > * {
116
+ padding: var(--bic-details-padding);
117
+ margin: 0;
118
+ overflow: clip;
127
119
 
128
- details.bi-details > *:not(summary) + * {
129
- padding-top: 0;
120
+ &:not(summary) + * {
121
+ padding-top: 0;
122
+ }
123
+ }
130
124
  }
131
125
 
132
126
  .bi-card:has( > .bi-details) {
133
127
  overflow: clip;
134
- }
135
128
 
136
- .bi-card:has( > .bi-details) > .bi-details:first-child {
137
- border-top: 0;
138
- }
129
+ & > .bi-details {
130
+ &:first-child {
131
+ border-top: 0;
132
+ }
139
133
 
140
- .bi-card:has( > .bi-details) > .bi-details:last-child {
141
- border-bottom: 0;
134
+ &:last-child {
135
+ border-bottom: 0;
136
+ }
137
+ }
142
138
  }