@bi-digital/css 0.11.11 → 0.12.1
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.
- package/dist/components/alert.css +7 -67
- package/dist/components/avatar.css +2 -48
- package/dist/components/badge.css +8 -75
- package/dist/components/button.css +31 -54
- package/dist/components/card.css +30 -90
- package/dist/components/checkbox-subsection.css +1 -5
- package/dist/components/chip.css +10 -154
- package/dist/components/details.css +9 -24
- package/dist/components/dialog.css +3 -10
- package/dist/components/dropdown.css +2 -11
- package/dist/components/field.css +14 -32
- package/dist/components/fieldset.css +2 -8
- package/dist/components/filter-group.css +8 -26
- package/dist/components/footer.css +18 -24
- package/dist/components/input.css +26 -42
- package/dist/components/label.css +2 -8
- package/dist/components/link.css +13 -33
- package/dist/components/logo.css +18 -12
- package/dist/components/navbar.css +8 -7
- package/dist/components/pagination.css +2 -7
- package/dist/components/popover.css +3 -12
- package/dist/components/search.css +1 -1
- package/dist/components/sub-navbar.css +11 -9
- package/dist/components/tabs.css +8 -20
- package/dist/components/tooltip.css +2 -2
- package/dist/components/validation-message.css +2 -2
- package/dist/components.css +239 -781
- package/dist/index.css +505 -8
- package/dist/salesforce.css +744 -789
- package/dist/tokens.css +505 -8
- package/package.json +2 -2
package/dist/components/chip.css
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
.bi-chip {
|
|
2
|
-
--bic-chip-background: var(--bi-
|
|
3
|
-
--bic-chip-
|
|
4
|
-
--bic-chip-
|
|
5
|
-
--bic-chip-
|
|
6
|
-
--bic-chip-background-press: var(--bi-states-press-dark);
|
|
7
|
-
--bic-chip-text-color: var(--bi-neutral-90);
|
|
2
|
+
--bic-chip-background: var(--bi-color-surface);
|
|
3
|
+
--bic-chip-background-selected: var(--bi-color-fill);
|
|
4
|
+
--bic-chip-text-color: var(--bi-color-text-subtle);
|
|
5
|
+
--bic-chip-text-color-selected: var(--bi-color-on-fill);
|
|
8
6
|
--bic-chip-padding: var(--bi-scale-1x) var(--bi-scale-2x);
|
|
9
7
|
--bic-chip-icon-size: var(--bi-scale-6x);
|
|
10
8
|
--bic-chip-font: var(--bi-font-body-medium);
|
|
@@ -31,149 +29,9 @@
|
|
|
31
29
|
--bic-chip-font: var(--bi-font-body-large);
|
|
32
30
|
}
|
|
33
31
|
|
|
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
|
-
}
|
|
40
|
-
|
|
41
32
|
&[data-selected="true"] {
|
|
42
|
-
--bic-chip-background
|
|
43
|
-
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
&[data-color="white"] {
|
|
47
|
-
--bic-chip-background: var(--bi-basic-white);
|
|
48
|
-
|
|
49
|
-
&[data-selected="true"] {
|
|
50
|
-
--bic-chip-background: var(--bi-neutral-60);
|
|
51
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
&[data-dark="true"] {
|
|
55
|
-
--bic-chip-background: var(--bi-neutral-100);
|
|
56
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
57
|
-
}
|
|
58
|
-
|
|
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
|
-
}
|
|
64
|
-
|
|
65
|
-
&[data-color="neutral"] {
|
|
66
|
-
--bic-chip-background: var(--bi-neutral-5);
|
|
67
|
-
|
|
68
|
-
&[data-selected="true"] {
|
|
69
|
-
--bic-chip-background: var(--bi-neutral-60);
|
|
70
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
&[data-dark="true"] {
|
|
74
|
-
--bic-chip-background: var(--bi-neutral-95);
|
|
75
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
76
|
-
}
|
|
77
|
-
|
|
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
|
-
}
|
|
83
|
-
|
|
84
|
-
&[data-color="primary"] {
|
|
85
|
-
--bic-chip-background: var(--bi-primary-5);
|
|
86
|
-
|
|
87
|
-
&[data-selected="true"] {
|
|
88
|
-
--bic-chip-background: var(--bi-primary-50);
|
|
89
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
&[data-dark="true"] {
|
|
93
|
-
--bic-chip-background: var(--bi-primary-85);
|
|
94
|
-
--bic-chip-text-color: var(--bi-primary-10);
|
|
95
|
-
}
|
|
96
|
-
|
|
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
|
-
}
|
|
102
|
-
|
|
103
|
-
&[data-color="info"] {
|
|
104
|
-
--bic-chip-background: var(--bi-info-5);
|
|
105
|
-
|
|
106
|
-
&[data-selected="true"] {
|
|
107
|
-
--bic-chip-background: var(--bi-info-50);
|
|
108
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
&[data-dark="true"] {
|
|
112
|
-
--bic-chip-background: var(--bi-info-95);
|
|
113
|
-
--bic-chip-text-color: var(--bi-info-15);
|
|
114
|
-
}
|
|
115
|
-
|
|
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
|
-
}
|
|
121
|
-
|
|
122
|
-
&[data-color="alert"] {
|
|
123
|
-
--bic-chip-background: var(--bi-alert-10);
|
|
124
|
-
|
|
125
|
-
&[data-selected="true"] {
|
|
126
|
-
--bic-chip-background: var(--bi-alert-60);
|
|
127
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
&[data-dark="true"] {
|
|
131
|
-
--bic-chip-background: var(--bi-alert-95);
|
|
132
|
-
--bic-chip-text-color: var(--bi-alert-15);
|
|
133
|
-
}
|
|
134
|
-
|
|
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
|
-
}
|
|
140
|
-
|
|
141
|
-
&[data-color="warning"] {
|
|
142
|
-
--bic-chip-background: var(--bi-warning-10);
|
|
143
|
-
|
|
144
|
-
&[data-selected="true"] {
|
|
145
|
-
--bic-chip-background: var(--bi-warning-75);
|
|
146
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
&[data-dark="true"] {
|
|
150
|
-
--bic-chip-background: var(--bi-warning-90);
|
|
151
|
-
--bic-chip-text-color: var(--bi-warning-15);
|
|
152
|
-
}
|
|
153
|
-
|
|
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
|
-
}
|
|
159
|
-
|
|
160
|
-
&[data-color="success"] {
|
|
161
|
-
--bic-chip-background: var(--bi-success-5);
|
|
162
|
-
|
|
163
|
-
&[data-selected="true"] {
|
|
164
|
-
--bic-chip-background: var(--bi-success-70);
|
|
165
|
-
--bic-chip-text-color: var(--bi-basic-white);
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
&[data-dark="true"] {
|
|
169
|
-
--bic-chip-background: var(--bi-success-90);
|
|
170
|
-
--bic-chip-text-color: var(--bi-success-10);
|
|
171
|
-
}
|
|
172
|
-
|
|
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
|
-
}
|
|
33
|
+
--bic-chip-background: var(--bic-chip-background-selected);
|
|
34
|
+
color: var(--bic-chip-text-color-selected);
|
|
177
35
|
}
|
|
178
36
|
|
|
179
37
|
&:is(button), &:is(a) {
|
|
@@ -182,21 +40,19 @@
|
|
|
182
40
|
text-decoration: none;
|
|
183
41
|
|
|
184
42
|
&:focus-visible {
|
|
185
|
-
box-shadow: var(--
|
|
186
|
-
outline: var(--_bi--focus, 3px solid var(--
|
|
43
|
+
box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
|
|
44
|
+
outline: var(--_bi--focus, 3px solid var(--bi-states-focus));
|
|
187
45
|
outline-offset: var(--_bi--focus, 2px);
|
|
188
46
|
}
|
|
189
47
|
|
|
190
48
|
@media (hover: hover) and (pointer: fine) {
|
|
191
49
|
&:hover {
|
|
192
|
-
background: linear-gradient(0deg, var(--
|
|
193
|
-
var(--bic-chip-background);
|
|
50
|
+
background: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-chip-background);
|
|
194
51
|
}
|
|
195
52
|
}
|
|
196
53
|
|
|
197
54
|
&:active {
|
|
198
|
-
background: linear-gradient(0deg, var(--
|
|
199
|
-
var(--bic-chip-background);
|
|
55
|
+
background: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-chip-background);
|
|
200
56
|
}
|
|
201
57
|
}
|
|
202
58
|
|
|
@@ -1,27 +1,11 @@
|
|
|
1
1
|
details.bi-details {
|
|
2
|
-
--bic-details-background:
|
|
3
|
-
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover
|
|
4
|
-
|
|
5
|
-
--bic-details-
|
|
6
|
-
|
|
7
|
-
--bic-details-color: var(--bi-
|
|
8
|
-
--bic-details-border-color: var(--bi-neutral-15);
|
|
2
|
+
--bic-details-background: transparent;
|
|
3
|
+
--bic-details-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-details-background);
|
|
4
|
+
--bic-details-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-details-background);
|
|
5
|
+
--bic-details-color: var(--bi-color-text-secondary);
|
|
6
|
+
--bic-details-summary-color: var(--bi-color-text);
|
|
7
|
+
--bic-details-border-color: var(--bi-color-stroke);
|
|
9
8
|
--bic-details-padding: var(--bi-scale-4x);
|
|
10
|
-
--bic-details-focus-shadow-color: var(--bi-basic-white);
|
|
11
|
-
--bic-details-focus-outline-color: var(--bi-primary-50);
|
|
12
|
-
|
|
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%),
|
|
16
|
-
var(--bic-details-background);
|
|
17
|
-
--bic-details-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
|
|
18
|
-
var(--bic-details-background);
|
|
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
|
-
}
|
|
24
|
-
|
|
25
9
|
font: var(--bi-font-body-large);
|
|
26
10
|
background-color: var(--bic-details-background);
|
|
27
11
|
color: var(--bic-details-color);
|
|
@@ -37,6 +21,7 @@ details.bi-details {
|
|
|
37
21
|
|
|
38
22
|
& summary {
|
|
39
23
|
padding: var(--bic-details-padding);
|
|
24
|
+
color: var(--bic-details-summary-color);
|
|
40
25
|
cursor: pointer;
|
|
41
26
|
justify-content: space-between;
|
|
42
27
|
align-items: center;
|
|
@@ -60,8 +45,8 @@ details.bi-details {
|
|
|
60
45
|
}
|
|
61
46
|
|
|
62
47
|
&:focus-visible {
|
|
63
|
-
box-shadow: var(--_bi--focus, 0 0 0 4.5px
|
|
64
|
-
outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--
|
|
48
|
+
box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bi-states-focus-background));
|
|
49
|
+
outline: var(--_bi--focus, var(--bi-stroke-thick) solid var(--bi-states-focus));
|
|
65
50
|
outline-offset: var(--_bi--focus, -2px);
|
|
66
51
|
border-radius: var(--bi-radius-medium);
|
|
67
52
|
|
|
@@ -6,21 +6,14 @@
|
|
|
6
6
|
--bic-dialog-anchor-closed-translate: 0, var(--bi-scale-12x);
|
|
7
7
|
--bic-dialog-animation-duration: .2s;
|
|
8
8
|
--bic-dialog-backdrop-background: #00000080;
|
|
9
|
-
--bic-dialog-background: var(--bi-
|
|
9
|
+
--bic-dialog-background: var(--bi-color-background);
|
|
10
10
|
--bic-dialog-border-radius: var(--bi-radius-large);
|
|
11
|
-
--bic-dialog-border-color: var(--bi-
|
|
11
|
+
--bic-dialog-border-color: var(--bi-color-stroke);
|
|
12
12
|
--bic-dialog-icon-spacing: .625rem;
|
|
13
|
-
--bic-dialog-color: var(--bi-
|
|
13
|
+
--bic-dialog-color: var(--bi-color-text);
|
|
14
14
|
--bic-dialog-max-height: 80vh;
|
|
15
15
|
--bic-dialog-max-width: 40rem;
|
|
16
16
|
--bic-dialog-padding: var(--bi-scale-4x);
|
|
17
|
-
|
|
18
|
-
&[data-dark="true"] {
|
|
19
|
-
--bic-dialog-background: var(--bi-primary-95);
|
|
20
|
-
--bic-dialog-border-color: var(--bi-neutral-70);
|
|
21
|
-
--bic-dialog-color: var(--bi-basic-white);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
17
|
animation: bi-dialog-fade-in-animation var(--bic-dialog-animation-duration) forwards;
|
|
25
18
|
background: var(--bic-dialog-background);
|
|
26
19
|
border-radius: var(--bic-dialog-border-radius);
|
|
@@ -2,22 +2,13 @@
|
|
|
2
2
|
--bic-dropdown-padding: var(--bi-scale-1x);
|
|
3
3
|
--bic-dropdown-item-padding: var(--bi-scale-2x) var(--bi-scale-3x);
|
|
4
4
|
--bic-dropdown-item-size: var(--bi-scale-11x);
|
|
5
|
-
--bic-dropdown-background: var(--bi-
|
|
5
|
+
--bic-dropdown-background: var(--bi-color-surface-subtle);
|
|
6
6
|
--bic-dropdown-border-width: var(--bi-stroke-thin);
|
|
7
7
|
--bic-dropdown-border-style: solid;
|
|
8
|
-
--bic-dropdown-border-color: var(--bi-
|
|
8
|
+
--bic-dropdown-border-color: var(--bi-color-stroke);
|
|
9
9
|
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
10
10
|
0px 2px 2px -1px #26333f0a;
|
|
11
11
|
--bic-dropdown-min-width: var(--bi-scale-64x);
|
|
12
|
-
|
|
13
|
-
&[data-dark="true"] {
|
|
14
|
-
--bic-dropdown-background: var(--bi-neutral-100);
|
|
15
|
-
--bic-dropdown-border-color: var(--bi-neutral-90);
|
|
16
|
-
--bic-dropdown-color: var(--bi-neutral-5);
|
|
17
|
-
--bic-dropdown-box-shadow: 0px 8px 16px -4px #26333f14, 4px 4px 6px -2px #26333f08,
|
|
18
|
-
0px 2px 2px -1px #26333f0a;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
12
|
background: var(--bic-dropdown-background);
|
|
22
13
|
border-radius: var(--bi-radius-medium);
|
|
23
14
|
border-width: var(--bic-dropdown-border-width);
|
|
@@ -1,38 +1,19 @@
|
|
|
1
1
|
.bi-field {
|
|
2
|
-
--bic-field-border-color-invalid: var(--bi-alert-50);
|
|
3
2
|
--bic-field-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-field-border-color);
|
|
4
|
-
--bic-field-box-shadow-hover: 0 0 0 var(--bi-stroke-thick) var(--bic-field-border-color-hover);
|
|
5
3
|
--bic-field-content-spacing: var(--bi-scale-0-50x);
|
|
6
4
|
--bic-field-padding-inline: var(--bi-scale-3x);
|
|
7
|
-
--bic-field-affix-color: var(--bi-
|
|
8
|
-
--bic-field-background: var(--bi-
|
|
9
|
-
--bic-field-background-hover: var(--bi-states-hover
|
|
10
|
-
--bic-field-background-press: var(--bi-states-press
|
|
11
|
-
--bic-field-
|
|
12
|
-
--bic-field-border-color: var(--bi-
|
|
13
|
-
--bic-field-
|
|
14
|
-
--bic-field-
|
|
15
|
-
--bic-field-
|
|
16
|
-
--bic-field-
|
|
17
|
-
--bic-field-
|
|
18
|
-
--bic-field-
|
|
19
|
-
--bic-field-focus-outline-color: var(--bi-primary-50);
|
|
20
|
-
--bic-field-focus-shadow-color: var(--bi-basic-white);
|
|
21
|
-
|
|
22
|
-
&[data-dark="true"] {
|
|
23
|
-
--bic-field-affix-color: var(--bi-neutral-30);
|
|
24
|
-
--bic-field-background: var(--bi-neutral-95);
|
|
25
|
-
--bic-field-background-hover: var(--bi-states-hover-light);
|
|
26
|
-
--bic-field-background-press: var(--bi-states-press-light);
|
|
27
|
-
--bic-field-background-readonly: var(--bi-neutral-50);
|
|
28
|
-
--bic-field-border-color-hover: var(--bi-neutral-25);
|
|
29
|
-
--bic-field-disabled-color: var(--bi-neutral-40);
|
|
30
|
-
--bic-field-description-color: var(--bi-neutral-15);
|
|
31
|
-
--bic-field-label-color: var(--bi-basic-white);
|
|
32
|
-
--bic-field-label-required-color: var(--bi-secondary-50);
|
|
33
|
-
--bic-field-focus-outline-color: var(--bi-primary-30);
|
|
34
|
-
--bic-field-focus-shadow-color: var(--bi-neutral-95);
|
|
35
|
-
}
|
|
5
|
+
--bic-field-affix-color: var(--bi-color-text);
|
|
6
|
+
--bic-field-background: var(--bi-color-surface-subtle);
|
|
7
|
+
--bic-field-background-hover: var(--bi-states-hover);
|
|
8
|
+
--bic-field-background-press: var(--bi-states-press);
|
|
9
|
+
--bic-field-border-color: var(--bi-color-stroke-contrast);
|
|
10
|
+
--bic-field-border-color-invalid: var(--bi-color-alert-stroke-contrast);
|
|
11
|
+
--bic-field-disabled-color: var(--bi-color-text-subtle);
|
|
12
|
+
--bic-field-description-color: var(--bi-color-text-secondary);
|
|
13
|
+
--bic-field-label-color: var(--bi-color-text);
|
|
14
|
+
--bic-field-label-required-color: var(--bi-states-required);
|
|
15
|
+
--bic-field-focus-outline-color: var(--bi-states-focus);
|
|
16
|
+
--bic-field-focus-shadow-color: var(--bi-states-focus-background);
|
|
36
17
|
|
|
37
18
|
& > * {
|
|
38
19
|
margin-block: 0;
|
|
@@ -54,6 +35,7 @@
|
|
|
54
35
|
|
|
55
36
|
&:has(.bi-input[aria-invalid="true"]) {
|
|
56
37
|
--bic-field-border-color: var(--bic-field-border-color-invalid);
|
|
38
|
+
--bic-field-focus-outline-color: var(--bic-field-border-color-invalid);
|
|
57
39
|
}
|
|
58
40
|
|
|
59
41
|
&:has([aria-disabled="true"]:not([role="option"][aria-disabled="true"]), :disabled:not(option)) > * {
|
|
@@ -182,7 +164,7 @@
|
|
|
182
164
|
}
|
|
183
165
|
|
|
184
166
|
&:hover {
|
|
185
|
-
|
|
167
|
+
background: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-field-background);
|
|
186
168
|
|
|
187
169
|
& * {
|
|
188
170
|
--_bi--hover: ;
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
.bi-fieldset {
|
|
2
|
-
--bic-fieldset-color: var(--bi-
|
|
3
|
-
--bic-fieldset-description-color: var(--bi-
|
|
4
|
-
|
|
5
|
-
&[data-dark="true"] {
|
|
6
|
-
--bic-fieldset-color: var(--bi-basic-white);
|
|
7
|
-
--bic-fieldset-description-color: var(--bi-neutral-15);
|
|
8
|
-
}
|
|
9
|
-
|
|
2
|
+
--bic-fieldset-color: var(--bi-color-text);
|
|
3
|
+
--bic-fieldset-description-color: var(--bi-color-text-subtle);
|
|
10
4
|
border: 0;
|
|
11
5
|
min-width: 0;
|
|
12
6
|
margin: 0;
|
|
@@ -1,28 +1,10 @@
|
|
|
1
1
|
.bi-filter-group {
|
|
2
|
-
--bic-filter-group-background: var(--bi-
|
|
3
|
-
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover
|
|
4
|
-
|
|
5
|
-
--bic-filter-group-background-
|
|
6
|
-
|
|
7
|
-
--bic-filter-group-
|
|
8
|
-
--bic-filter-group-border-color: var(--bi-neutral-15);
|
|
9
|
-
--bic-filter-group-text-color: var(--bi-neutral-90);
|
|
10
|
-
--bic-filter-focus-shadow-color: var(--bi-basic-white);
|
|
11
|
-
--bic-filter-focus-outline-color: var(--bi-primary-50);
|
|
12
|
-
|
|
13
|
-
&[data-dark="true"] {
|
|
14
|
-
--bic-filter-group-background: var(--bi-neutral-90);
|
|
15
|
-
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover-light) 0%, var(--bi-states-hover-light) 100%),
|
|
16
|
-
var(--bic-filter-group-background);
|
|
17
|
-
--bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press-light) 0%, var(--bi-states-press-light) 100%),
|
|
18
|
-
var(--bic-filter-group-background);
|
|
19
|
-
--bic-filter-group-background-expanded: var(--bi-neutral-80);
|
|
20
|
-
--bic-filter-group-border-color: var(--bi-neutral-70);
|
|
21
|
-
--bic-filter-group-text-color: var(--bi-basic-white);
|
|
22
|
-
--bic-filter-focus-shadow-color: var(--bi-neutral-95);
|
|
23
|
-
--bic-filter-focus-outline-color: var(--bi-primary-30);
|
|
24
|
-
}
|
|
25
|
-
|
|
2
|
+
--bic-filter-group-background: var(--bi-color-surface-subtle);
|
|
3
|
+
--bic-filter-group-background-hover: linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%), var(--bic-filter-group-background);
|
|
4
|
+
--bic-filter-group-background-press: linear-gradient(0deg, var(--bi-states-press) 0%, var(--bi-states-press) 100%), var(--bic-filter-group-background);
|
|
5
|
+
--bic-filter-group-background-expanded: var(--bi-color-surface-active);
|
|
6
|
+
--bic-filter-group-border-color: var(--bi-color-stroke);
|
|
7
|
+
--bic-filter-group-text-color: var(--bi-color-text);
|
|
26
8
|
flex-direction: column;
|
|
27
9
|
display: flex;
|
|
28
10
|
|
|
@@ -54,8 +36,8 @@
|
|
|
54
36
|
}
|
|
55
37
|
|
|
56
38
|
&:focus-visible {
|
|
57
|
-
box-shadow: 0 0 0 4.5px var(--
|
|
58
|
-
outline: 3px solid var(--
|
|
39
|
+
box-shadow: 0 0 0 4.5px var(--bi-states-focus-background);
|
|
40
|
+
outline: 3px solid var(--bi-states-focus);
|
|
59
41
|
outline-offset: 3px;
|
|
60
42
|
border-radius: var(--bi-radius-small);
|
|
61
43
|
}
|
|
@@ -1,12 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
--
|
|
3
|
-
--
|
|
1
|
+
:root, [data-color-scheme="light"] {
|
|
2
|
+
--_bic-footer-aacsb-logo: url("./assets/accreditations/aacsb.svg");
|
|
3
|
+
--_bic-footer-amba-logo: url("./assets/accreditations/amba.svg");
|
|
4
|
+
--_bic-footer-equis-logo: url("./assets/accreditations/equis.svg");
|
|
5
|
+
}
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
[data-color-scheme="dark"] {
|
|
8
|
+
--_bic-footer-aacsb-logo: url("./assets/accreditations/aacsb-neg.svg");
|
|
9
|
+
--_bic-footer-amba-logo: url("./assets/accreditations/amba-neg.svg");
|
|
10
|
+
--_bic-footer-equis-logo: url("./assets/accreditations/equis-neg.svg");
|
|
11
|
+
}
|
|
9
12
|
|
|
13
|
+
.bi-footer {
|
|
14
|
+
--bic-footer-color: var(--bi-color-neutral-text);
|
|
15
|
+
--bic-footer-background: var(--bi-color-neutral-surface-subtle);
|
|
10
16
|
width: 100%;
|
|
11
17
|
color: var(--bic-footer-color);
|
|
12
18
|
background-color: var(--bic-footer-background);
|
|
@@ -77,7 +83,7 @@
|
|
|
77
83
|
min-height: 58px;
|
|
78
84
|
display: flex;
|
|
79
85
|
|
|
80
|
-
@media (width <
|
|
86
|
+
@media (width < 768px) {
|
|
81
87
|
gap: var(--bi-scale-2x) var(--bi-scale-1x);
|
|
82
88
|
}
|
|
83
89
|
|
|
@@ -90,30 +96,18 @@
|
|
|
90
96
|
}
|
|
91
97
|
|
|
92
98
|
& .bi-footer--aacsb {
|
|
93
|
-
background-image:
|
|
99
|
+
background-image: var(--_bic-footer-aacsb-logo);
|
|
94
100
|
width: 127px;
|
|
95
|
-
|
|
96
|
-
&:is([data-dark="true"] .bi-footer--aacsb) {
|
|
97
|
-
background-image: url("./assets/accreditations/aacsb-neg.svg");
|
|
98
|
-
}
|
|
99
101
|
}
|
|
100
102
|
|
|
101
103
|
& .bi-footer--amba {
|
|
102
|
-
background-image:
|
|
104
|
+
background-image: var(--_bic-footer-amba-logo);
|
|
103
105
|
width: 122px;
|
|
104
|
-
|
|
105
|
-
&:is([data-dark="true"] .bi-footer--amba) {
|
|
106
|
-
background-image: url("./assets/accreditations/amba-neg.svg");
|
|
107
|
-
}
|
|
108
106
|
}
|
|
109
107
|
|
|
110
108
|
& .bi-footer--equis {
|
|
111
|
-
background-image:
|
|
109
|
+
background-image: var(--_bic-footer-equis-logo);
|
|
112
110
|
width: 104px;
|
|
113
|
-
|
|
114
|
-
&:is([data-dark="true"] .bi-footer--equis) {
|
|
115
|
-
background-image: url("./assets/accreditations/equis-neg.svg");
|
|
116
|
-
}
|
|
117
111
|
}
|
|
118
112
|
}
|
|
119
113
|
|
|
@@ -124,7 +118,7 @@
|
|
|
124
118
|
flex-wrap: wrap;
|
|
125
119
|
display: flex;
|
|
126
120
|
|
|
127
|
-
@media (width <
|
|
121
|
+
@media (width < 768px) {
|
|
128
122
|
gap: var(--bi-scale-2x);
|
|
129
123
|
}
|
|
130
124
|
}
|
|
@@ -1,44 +1,34 @@
|
|
|
1
|
+
:root, [data-color-scheme="light"] {
|
|
2
|
+
--_bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
[data-color-scheme="dark"] {
|
|
6
|
+
--_bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
|
|
7
|
+
}
|
|
8
|
+
|
|
1
9
|
:where(.bi-input) {
|
|
2
10
|
margin: 0;
|
|
3
11
|
}
|
|
4
12
|
|
|
5
13
|
.bi-input {
|
|
6
|
-
--bic-input-border-color-invalid: var(--bi-alert-50);
|
|
7
14
|
--bic-input-box-shadow: 0 0 0 var(--bi-stroke-thin) var(--bic-input-border-color);
|
|
8
|
-
--bic-input-
|
|
9
|
-
--bic-input-caret-color: var(--bi-primary-50);
|
|
15
|
+
--bic-input-caret-color: var(--bi-color-primary-fill);
|
|
10
16
|
--bic-input-font-size: 1rem;
|
|
11
17
|
--bic-input-padding: var(--bi-scale-3x);
|
|
12
18
|
--bic-input-size: var(--bi-scale-11x);
|
|
13
|
-
--bic-input-toggle-background: var(--bi-primary-
|
|
14
|
-
--bic-input-toggle-color: var(--bi-
|
|
19
|
+
--bic-input-toggle-background: var(--bi-color-primary-fill);
|
|
20
|
+
--bic-input-toggle-color: var(--bi-color-primary-on-fill);
|
|
15
21
|
--bic-input-toggle-size: 1.125rem;
|
|
16
|
-
--bic-input-background: var(--bi-
|
|
17
|
-
--bic-input-background-readonly: var(--bi-
|
|
18
|
-
--bic-input-border-color: var(--bi-
|
|
19
|
-
--bic-input-border-color-
|
|
20
|
-
--bic-input-
|
|
21
|
-
--bic-input-color
|
|
22
|
-
--bic-input-color: var(--bi-
|
|
23
|
-
--bic-input-
|
|
24
|
-
--bic-input-
|
|
25
|
-
--bic-input-focus-
|
|
26
|
-
--bic-input-focus-shadow-color: var(--bi-basic-white);
|
|
27
|
-
--bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"%23222d38\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
|
|
28
|
-
|
|
29
|
-
&[data-dark="true"] {
|
|
30
|
-
--bic-input-background: var(--bi-neutral-95);
|
|
31
|
-
--bic-input-background-readonly: var(--bi-neutral-50);
|
|
32
|
-
--bic-input-border-color-hover: var(--bi-neutral-25);
|
|
33
|
-
--bic-input-color-readonly: var(--bi-basic-white);
|
|
34
|
-
--bic-input-color: var(--bi-basic-white);
|
|
35
|
-
--bic-input-disabled-color: var(--bi-neutral-40);
|
|
36
|
-
--bic-input-placeholder-color: var(--bi-neutral-30);
|
|
37
|
-
--bic-input-focus-outline-color: var(--bi-primary-30);
|
|
38
|
-
--bic-input-focus-shadow-color: var(--bi-neutral-95);
|
|
39
|
-
--bic-input-select-chevron: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"1em\" height=\"1em\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"white\" fill-rule=\"evenodd\" d=\"M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06\" clip-rule=\"evenodd\"></path></svg>");
|
|
40
|
-
}
|
|
41
|
-
|
|
22
|
+
--bic-input-background: var(--bi-color-surface-subtle);
|
|
23
|
+
--bic-input-background-readonly: var(--bi-color-surface);
|
|
24
|
+
--bic-input-border-color: var(--bi-color-stroke-contrast);
|
|
25
|
+
--bic-input-border-color-invalid: var(--bi-color-alert-stroke-contrast);
|
|
26
|
+
--bic-input-color-readonly: var(--bi-color-text-subtle);
|
|
27
|
+
--bic-input-color: var(--bi-color-text);
|
|
28
|
+
--bic-input-disabled-color: var(--bi-color-text-subtle);
|
|
29
|
+
--bic-input-placeholder-color: var(--bi-color-text-secondary);
|
|
30
|
+
--bic-input-focus-outline-color: var(--bi-states-focus);
|
|
31
|
+
--bic-input-focus-shadow-color: var(--bi-states-focus-background);
|
|
42
32
|
appearance: none;
|
|
43
33
|
background: var(--bic-input-background);
|
|
44
34
|
border-radius: var(--bi-radius-medium);
|
|
@@ -64,11 +54,13 @@
|
|
|
64
54
|
|
|
65
55
|
&:where(:not([type="checkbox"], [type="radio"])) {
|
|
66
56
|
&:hover {
|
|
67
|
-
|
|
57
|
+
background: var(--_bi--hover, linear-gradient(0deg, var(--bi-states-hover) 0%, var(--bi-states-hover) 100%),
|
|
58
|
+
var(--bic-input-background));
|
|
68
59
|
}
|
|
69
60
|
|
|
70
61
|
&:focus-visible {
|
|
71
62
|
--bic-input-border-color: var(--bic-input-focus-outline-color);
|
|
63
|
+
background: var(--_bi--focus, var(--bic-input-background));
|
|
72
64
|
}
|
|
73
65
|
}
|
|
74
66
|
|
|
@@ -77,10 +69,6 @@
|
|
|
77
69
|
outline-offset: 0;
|
|
78
70
|
box-shadow: var(--_bi--focus, 0px 0px 20px var(--bi-scale-1-5x) #0000000d,
|
|
79
71
|
0px 0px 10px 0px #0000000d);
|
|
80
|
-
|
|
81
|
-
& * {
|
|
82
|
-
--_bi--focus: ;
|
|
83
|
-
}
|
|
84
72
|
}
|
|
85
73
|
|
|
86
74
|
&::placeholder {
|
|
@@ -97,11 +85,11 @@
|
|
|
97
85
|
|
|
98
86
|
&[aria-invalid="true"] {
|
|
99
87
|
--bic-input-border-color: var(--bic-input-border-color-invalid);
|
|
88
|
+
--bic-input-focus-outline-color: var(--bic-input-border-color-invalid);
|
|
100
89
|
}
|
|
101
90
|
|
|
102
91
|
&[readonly], &:disabled, &[aria-disabled="true"] {
|
|
103
92
|
background: var(--bic-input-background-readonly);
|
|
104
|
-
--bic-input-border-color: var(--bic-input-border-color-readonly);
|
|
105
93
|
color: var(--bic-input-color-readonly);
|
|
106
94
|
}
|
|
107
95
|
|
|
@@ -120,7 +108,7 @@
|
|
|
120
108
|
cursor: pointer;
|
|
121
109
|
}
|
|
122
110
|
|
|
123
|
-
background-image: var(--
|
|
111
|
+
background-image: var(--_bic-input-select-chevron);
|
|
124
112
|
background-position: calc(100% - .5em);
|
|
125
113
|
background-repeat: no-repeat;
|
|
126
114
|
background-size: 1.5em;
|
|
@@ -142,10 +130,6 @@
|
|
|
142
130
|
box-shadow: var(--_bi--focus, 0 0 0 4.5px var(--bic-input-focus-shadow-color));
|
|
143
131
|
outline: var(--_bi--focus, 3px solid var(--bic-input-focus-outline-color));
|
|
144
132
|
outline-offset: var(--_bi--focus, 3px);
|
|
145
|
-
|
|
146
|
-
& * {
|
|
147
|
-
--_bi--focus: ;
|
|
148
|
-
}
|
|
149
133
|
}
|
|
150
134
|
|
|
151
135
|
&:read-only:not([readonly], [aria-disabled="true"], :disabled) {
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
.bi-label {
|
|
2
|
-
--bic-label-color: var(--bic-field-label-color, var(--bi-
|
|
3
|
-
--bic-label-required-color: var(--bic-field-label-required-color, var(--bi-
|
|
4
|
-
|
|
5
|
-
&[data-dark="true"] {
|
|
6
|
-
--bic-label-color: var(--bic-field-label-color, var(--bi-basic-white));
|
|
7
|
-
--bic-label-required-color: var(--bic-field-label-required-color, var(--bi-secondary-50));
|
|
8
|
-
}
|
|
9
|
-
|
|
2
|
+
--bic-label-color: var(--bic-field-label-color, var(--bi-color-text));
|
|
3
|
+
--bic-label-required-color: var(--bic-field-label-required-color, var(--bi-states-required));
|
|
10
4
|
color: var(--bic-label-color);
|
|
11
5
|
font: var(--bi-font-label-medium);
|
|
12
6
|
|