@bpmn-io/form-js-carbon-styles 1.6.0 → 1.6.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/LICENSE +22 -22
  2. package/package.json +3 -3
  3. package/src/carbon-styles.js +1179 -1179
  4. package/src/carbon-styles.scss +1372 -1372
  5. package/src/types/carbon-styles.d.ts +10 -10
package/src/carbon-styles.scss CHANGED
@@ -1,1373 +1,1373 @@
1
- @use "sass:math";
2
-
3
- @function rem($value) {
4
- $remValue: math.div($value, 16) + rem;
5
- @return $remValue;
6
- }
7
-
8
- @mixin getBaseInputStyles($height) {
9
- color: var(--cds-text-primary);
10
- border-radius: 0;
11
- border: none;
12
- border-bottom: 1px solid var(--cds-border-strong);
13
- height: $height;
14
- font-size: var(--cds-body-short-01-font-size);
15
- font-weight: var(--cds-body-short-01-font-weight);
16
- line-height: var(--cds-body-short-01-line-height);
17
- letter-spacing: var(--cds-body-short-01-letter-spacing);
18
-
19
- &:focus {
20
- outline: 2px solid var(--cds-focus);
21
- outline-offset: -2px;
22
- }
23
-
24
- &::placeholder {
25
- color: var(--cds-text-placeholder);
26
- }
27
- }
28
-
29
- @mixin getSelectArrowStyles($arrowRightPosition) {
30
- color: var(--cds-text-primary);
31
- background-color: var(--cds-field);
32
- cursor: pointer;
33
- appearance: none;
34
- background-repeat: no-repeat;
35
- background-position: right $arrowRightPosition bottom 50%;
36
- }
37
-
38
- // Global styles /////////////
39
-
40
- .fjs-container {
41
- width: 100%;
42
- height: min-content;
43
-
44
- .cds--grid {
45
- padding: 0;
46
- }
47
-
48
- .fjs-form {
49
- background-color: transparent;
50
- color: var(--cds-text-primary);
51
- padding: 0;
52
- }
53
-
54
- @media (width < 66rem) {
55
- // Carbon lg width breakpoint
56
- .fjs-layout-column .fjs-form-field {
57
- margin-left: 0;
58
- margin-right: 0;
59
- }
60
- }
61
-
62
- .fjs-input-group {
63
- margin: 0;
64
- }
65
- }
66
-
67
- // Themed icons /////////////
68
-
69
- .cds--g10 {
70
- .fjs-container {
71
-
72
- .fjs-form-field-number .fjs-input-group {
73
- .fjs-number-arrow-container {
74
- .fjs-number-arrow-down {
75
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+") }
76
-
77
- .fjs-number-arrow-up {
78
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
79
- }
80
-
81
- &.fjs-disabled .fjs-number-arrow-up {
82
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
83
- }
84
-
85
- &.fjs-disabled .fjs-number-arrow-down {
86
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+");
87
- }
88
- }
89
- }
90
-
91
- .fjs-form-field-select {
92
- .fjs-input-group {
93
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
94
- }
95
-
96
- &.fjs-readonly {
97
- .fjs-input-group {
98
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
99
- }
100
- }
101
-
102
- &.fjs-disabled {
103
- .fjs-input-group {
104
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
105
- }
106
- }
107
- }
108
-
109
- .fjs-form-field-datetime {
110
- select {
111
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
112
- }
113
- }
114
- }
115
- }
116
-
117
- .cds--g100 {
118
- .fjs-container {
119
-
120
- .fjs-form-field-number .fjs-input-group {
121
- .fjs-number-arrow-container {
122
- .fjs-number-arrow-down {
123
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+");
124
- }
125
-
126
- .fjs-number-arrow-up {
127
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
128
- }
129
-
130
- &.fjs-disabled .fjs-number-arrow-up {
131
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
132
- }
133
-
134
- &.fjs-disabled .fjs-number-arrow-down {
135
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+")
136
- }
137
- }
138
- }
139
-
140
- .fjs-form-field-select {
141
- .fjs-input-group {
142
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
143
- }
144
-
145
- &.fjs-readonly {
146
- .fjs-input-group {
147
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
148
- }
149
- }
150
-
151
- &.fjs-disabled {
152
- .fjs-input-group {
153
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
154
- }
155
- }
156
- }
157
-
158
- .fjs-form-field-datetime {
159
- select {
160
- background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
161
- }
162
- }
163
- }
164
- }
165
-
166
- // Markdown styles /////////////
167
-
168
- .fjs-container .fjs-form-field.fjs-form-field-text .markup {
169
- font-size: var(--cds-body-long-01-font-size);
170
- font-weight: var(--cds-body-long-01-font-weight);
171
- line-height: var(--cds-body-long-01-line-height);
172
- letter-spacing: var(--cds-body-long-01-letter-spacing);
173
-
174
- h1 {
175
- font-size: var(--cds-productive-heading-06-font-size);
176
- font-weight: var(--cds-productive-heading-06-font-weight);
177
- line-height: var(--cds-productive-heading-06-line-height);
178
- letter-spacing: var(--cds-productive-heading-06-letter-spacing);
179
- }
180
-
181
- h2 {
182
- font-size: var(--cds-productive-heading-05-font-size);
183
- font-weight: var(--cds-productive-heading-05-font-weight);
184
- line-height: var(--cds-productive-heading-05-line-height);
185
- letter-spacing: var(--cds-productive-heading-05-letter-spacing);
186
- }
187
-
188
- h3 {
189
- font-size: var(--cds-productive-heading-04-font-size);
190
- font-weight: var(--cds-productive-heading-04-font-weight);
191
- line-height: var(--cds-productive-heading-04-line-height);
192
- letter-spacing: var(--cds-productive-heading-04-letter-spacing);
193
- }
194
-
195
- h4 {
196
- font-size: var(--cds-productive-heading-03-font-size);
197
- font-weight: var(--cds-productive-heading-03-font-weight);
198
- line-height: var(--cds-productive-heading-03-line-height);
199
- letter-spacing: var(--cds-productive-heading-03-letter-spacing);
200
- }
201
-
202
- h5 {
203
- font-size: var(--cds-productive-heading-02-font-size);
204
- font-weight: var(--cds-productive-heading-02-font-weight);
205
- line-height: var(--cds-productive-heading-02-line-height);
206
- letter-spacing: var(--cds-productive-heading-02-letter-spacing);
207
- }
208
-
209
- h6 {
210
- font-size: var(--cds-productive-heading-01-font-size);
211
- font-weight: var(--cds-productive-heading-01-font-weight);
212
- line-height: var(--cds-productive-heading-01-line-height);
213
- letter-spacing: var(--cds-productive-heading-01-letter-spacing);
214
- }
215
-
216
- code {
217
- font-family: var(--cds-code-02-font-family);
218
- font-size: var(--cds-code-02-font-size);
219
- font-weight: var(--cds-code-02-font-weight);
220
- line-height: var(--cds-code-02-line-height);
221
- letter-spacing: var(--cds-code-02-letter-spacing);
222
- white-space: pre-wrap;
223
- }
224
-
225
- blockquote {
226
- font-family: var(--cds-quotation-02-font-family);
227
- font-size: var(--cds-quotation-02-font-size);
228
- font-weight: var(--cds-quotation-02-font-weight);
229
- line-height: var(--cds-quotation-02-line-height);
230
- letter-spacing: var(--cds-quotation-02-letter-spacing);
231
- }
232
-
233
- ul,
234
- ol {
235
- box-sizing: border-box;
236
- padding: 0;
237
- border: 0;
238
- margin: 0;
239
- list-style: none;
240
- }
241
-
242
- ul {
243
- margin-left: var(--cds-spacing-05);
244
-
245
- li {
246
- position: relative;
247
-
248
- &:before {
249
- position: absolute;
250
- left: calc(-1 * var(--cds-spacing-05));
251
- content: '–';
252
- }
253
- }
254
- }
255
-
256
- ol {
257
- margin-left: var(--cds-spacing-05);
258
-
259
- li {
260
- position: relative;
261
- counter-increment: item;
262
-
263
- &:before {
264
- position: absolute;
265
- left: calc(-1 * var(--cds-spacing-05));
266
- content: counter(item) '.';
267
- }
268
- }
269
- }
270
- }
271
-
272
- // Anchor styles /////////////
273
-
274
- .fjs-container .fjs-form-field-text a {
275
- color: var(--cds-link-primary);
276
- outline: none;
277
- text-decoration: underline;
278
- font-size: inherit;
279
- font-weight: inherit;
280
- line-height: var(--cds-body-compact-01-line-height);
281
- letter-spacing: var(--cds-body-compact-01-letter-spacing);
282
-
283
- &:hover {
284
- color: var(--cds-link-primary-hover);
285
- }
286
-
287
- &:focus {
288
- outline: 1px solid var(--cds-focus);
289
- }
290
-
291
- &:active, &:active:visited, &:active:visited:hover {
292
- color: var(--cds-text-primary);
293
- }
294
-
295
- &:visited {
296
- color: var(--cds-link-primary);
297
- }
298
-
299
- &:visited:hover {
300
- color: var(--cds-link-primary-hover);
301
- }
302
- }
303
-
304
- // Read-only styles /////////////
305
-
306
- .fjs-container {
307
- .fjs-readonly {
308
- .fjs-input:read-only:not(:disabled),
309
- .fjs-textarea:read-only:not(:disabled),
310
- .fjs-select:read-only:not(:disabled),
311
- &.fjs-taglist,
312
- .fjs-input-group {
313
- background-color: transparent;
314
- }
315
-
316
- &.fjs-form-field {
317
- .fjs-input-group {
318
- border-bottom: 1px solid var(--cds-border-subtle);
319
- }
320
- }
321
-
322
- &.fjs-form-field-number {
323
- .fjs-input-group .fjs-number-arrow-container {
324
- background-color: transparent;
325
-
326
- .fjs-number-arrow-up,
327
- .fjs-number-arrow-down {
328
- background-color: transparent;
329
- pointer-events: none;
330
- }
331
- }
332
- }
333
-
334
- &.fjs-form-field:not(.fjs-form-field-datetime) {
335
- .fjs-input-group .fjs-input-adornment {
336
- background: transparent;
337
- }
338
- }
339
-
340
- &.fjs-form-field-select {
341
- .fjs-input-group {
342
- cursor: unset;
343
- background-color: transparent;
344
-
345
- .fjs-input:read-only:not(:disabled) {
346
- border-color: transparent;
347
- }
348
-
349
- .fjs-select-display {
350
- color: var(--cds-text-primary);
351
- }
352
- }
353
- }
354
-
355
- &.fjs-form-field-datetime {
356
- .fjs-input-group {
357
- cursor: unset;
358
-
359
- .fjs-input-adornment {
360
- background-color: transparent;
361
- }
362
-
363
- .flatpickr-input {
364
- cursor: unset;
365
- }
366
-
367
- .fjs-input-adornment svg {
368
- cursor: unset;
369
- }
370
- }
371
- }
372
-
373
- &.fjs-form-field-checkbox,
374
- &.fjs-form-field-radio,
375
- &.fjs-form-field-checklist {
376
- .fjs-input:read-only {
377
- opacity: 1;
378
- background-color: transparent;
379
-
380
- &:before {
381
- border-color: var(--cds-icon-disabled);
382
- }
383
- }
384
-
385
- &.fjs-checked .fjs-input[type='checkbox'],
386
- .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
387
- &:before {
388
- border: 1px solid var(--cds-icon-disabled);
389
- background: transparent;
390
- }
391
-
392
- &:after {
393
- border-bottom: 2px solid var(--cds-icon-primary);
394
- border-left: 2px solid var(--cds-icon-primary);
395
- }
396
- }
397
- }
398
-
399
- &.fjs-taglist .fjs-taglist-tag {
400
- .fjs-taglist-tag-label {
401
- padding: 2px 0px;
402
- }
403
- }
404
-
405
- &.fjs-form-field-dynamiclist button.fjs-repeat-render-add,
406
- &.fjs-form-field-dynamiclist button .fjs-repeat-row-remove-icon-container {
407
- color: var(--cds-text-on-color-disabled);
408
-
409
- &:hover {
410
- color: var(--cds-text-on-color-disabled);
411
- background-color: transparent;
412
- cursor: not-allowed;
413
- }
414
- }
415
- }
416
- }
417
-
418
- // Disabled styles /////////////
419
-
420
- .fjs-container {
421
- .fjs-disabled {
422
- &.fjs-form-field-textfield .fjs-input,
423
- &.fjs-form-field-datetime .fjs-input,
424
- & .fjs-textarea:disabled,
425
- & .fjs-taglist.fjs-disabled,
426
- & .fjs-taglist.fjs-disabled .fjs-taglist-input,
427
- &.fjs-form-field-select .fjs-input-group.disabled,
428
- &.fjs-form-field-select .fjs-input-group.disabled .fjs-select-display,
429
- &.fjs-form-field-select .fjs-input-group.disabled .fjs-input,
430
- &.fjs-form-field .fjs-form-field-label,
431
- &.fjs-form-field.fjs-form-field-radio .fjs-form-field-label,
432
- &.fjs-form-field.fjs-form-field-checklist .fjs-form-field-label,
433
- & .fjs-form-field-description {
434
- color: var(--cds-text-disabled);
435
- cursor: var(--cursor-disabled, not-allowed);
436
- }
437
-
438
- &.fjs-form-field-textfield .fjs-input-group,
439
- &.fjs-form-field-datetime .fjs-input-group,
440
- & .fjs-textarea:disabled,
441
- & .fjs-taglist.fjs-disabled,
442
- & .fjs-taglist.fjs-disabled .fjs-taglist-input,
443
- &.fjs-form-field-select .fjs-input-group.disabled,
444
- &.fjs-form-field-select .fjs-input-group.disabled .fjs-select-display,
445
- &.fjs-form-field-select .fjs-input-group.disabled .fjs-input {
446
- border: none;
447
- }
448
- }
449
-
450
- .fjs-disabled.fjs-form-field-number .fjs-input-group {
451
- border: none;
452
- cursor: var(--cursor-disabled, not-allowed);
453
- }
454
-
455
- .fjs-disabled.fjs-form-field-number .fjs-input-group .fjs-input {
456
- cursor: var(--cursor-disabled, not-allowed);
457
- }
458
-
459
- .fjs-form-field.fjs-disabled.fjs-checked .fjs-input[type='checkbox'] {
460
- cursor: var(--cursor-disabled, not-allowed);
461
- &:before {
462
- border-color: var(--cds-icon-disabled);
463
- background-color: var(--cds-icon-disabled);
464
- cursor: var(--cursor-disabled, not-allowed);
465
- }
466
-
467
- &:after {
468
- cursor: var(--cursor-disabled, not-allowed);
469
- }
470
- }
471
-
472
- .fjs-form-field.fjs-disabled .fjs-input[type='checkbox'] {
473
- cursor: var(--cursor-disabled, not-allowed);
474
- &:before {
475
- border-color: var(--cds-icon-disabled);
476
- cursor: var(--cursor-disabled, not-allowed);
477
- }
478
- }
479
-
480
- .fjs-form-field-datetime.fjs-disabled .fjs-input-group .fjs-input-adornment svg {
481
- color: var(--cds-icon-disabled);
482
- cursor: var(--cursor-disabled, not-allowed);
483
- }
484
-
485
- .fjs-taglist.fjs-disabled .fjs-taglist-tag {
486
- background-color: var(--cds-layer-01);
487
-
488
- .fjs-taglist-tag-label {
489
- padding: 2px 0px;
490
- opacity: 0.7;
491
- color: var(--cds-text-on-color-disabled);
492
- }
493
- }
494
- }
495
-
496
- // Label, Description & Error styles /////////////
497
-
498
- .fjs-container {
499
- .fjs-form-field-label {
500
- font-size: var(--cds-label-01-font-size);
501
- font-weight: var(--cds-label-01-font-weight);
502
- line-height: var(--cds-label-01-line-height);
503
- letter-spacing: var(--cds-label-01-letter-spacing);
504
- }
505
-
506
- .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-grouplike, .fjs-form-field-table) .fjs-form-field-label:first-child {
507
- margin: 0;
508
- margin-bottom: var(--cds-spacing-03);
509
- }
510
-
511
- .fjs-form-field.fjs-form-field-radio
512
- .fjs-form-field-label:not(:first-of-type),
513
- .fjs-form-field.fjs-form-field-checklist
514
- .fjs-form-field-label:not(:first-of-type) {
515
- margin: 0;
516
- margin-bottom: 0.1875rem;
517
- }
518
-
519
- .fjs-form-field.fjs-form-field-radio
520
- .fjs-form-field-label:not(:first-of-type) {
521
- min-height: #{rem(27)};
522
- }
523
-
524
- .fjs-form-field-description {
525
- margin: 0;
526
- margin-top: var(--cds-spacing-02);
527
- font-size: var(--cds-helper-text-01-font-size);
528
- font-weight: var(--cds-helper-text-01-font-weight);
529
- line-height: var(--cds-helper-text-01-line-height);
530
- letter-spacing: var(--cds-helper-text-01-letter-spacing);
531
- }
532
-
533
- .fjs-form-field-error {
534
- margin: 0;
535
- margin-top: var(--cds-spacing-02);
536
- font-size: var(--cds-label-01-font-size);
537
- font-weight: var(--cds-label-01-font-weight);
538
- line-height: var(--cds-label-01-line-height);
539
- letter-spacing: var(--cds-label-01-letter-spacing);
540
- }
541
-
542
- .fjs-has-errors .fjs-form-field-description {
543
- display: none;
544
- }
545
- }
546
-
547
- // Checkbox styles /////////////
548
-
549
- .fjs-container {
550
- .fjs-input[type='checkbox'],
551
- .fjs-input[type='checkbox']:focus {
552
- all: unset;
553
- width: rem(6);
554
- }
555
-
556
- .fjs-form-field .fjs-input[type='checkbox'] {
557
- position: relative;
558
- display: flex;
559
- min-height: rem(24);
560
- padding-top: rem(3);
561
- padding-left: rem(20);
562
- cursor: pointer;
563
- user-select: none;
564
- font-size: var(--cds-body-short-01-font-size);
565
- font-weight: var(--cds-body-short-01-font-weight);
566
- line-height: var(--cds-body-short-01-line-height);
567
- letter-spacing: var(--cds-body-short-01-letter-spacing);
568
-
569
- &:before,
570
- &:after {
571
- box-sizing: border-box;
572
- }
573
-
574
- &:before {
575
- position: absolute;
576
- top: rem(3);
577
- left: 0;
578
- width: rem(16);
579
- height: rem(16);
580
- border: 1px solid var(--cds-icon-primary);
581
- margin: rem(2) rem(2) rem(2) rem(3);
582
- background-color: transparent;
583
- border-radius: rem(1);
584
- content: '';
585
- }
586
-
587
- &:after {
588
- position: absolute;
589
- top: rem(9);
590
- left: rem(7);
591
- width: rem(9);
592
- height: rem(5);
593
- border-bottom: 2px solid var(--cds-icon-inverse);
594
- border-left: 2px solid var(--cds-icon-inverse);
595
- margin-top: rem(-3);
596
- background: 0 0;
597
- content: '';
598
- transform: scale(0) rotate(-45deg);
599
- transform-origin: bottom right;
600
- }
601
- }
602
-
603
- .fjs-form-field .fjs-input[type='checkbox']:focus {
604
- &:before {
605
- outline: 2px solid var(--cds-focus);
606
- outline-offset: rem(1);
607
- }
608
- }
609
-
610
- .fjs-form-field.fjs-checked .fjs-input[type='checkbox'],
611
- .fjs-form-field
612
- .fjs-form-field-label.fjs-checked
613
- .fjs-input[type='checkbox'] {
614
- &:before {
615
- border: none;
616
- border-width: 1px;
617
- background-color: var(--cds-icon-primary);
618
- }
619
-
620
- &:after {
621
- transform: scale(1) rotate(-45deg);
622
- }
623
- }
624
-
625
- .fjs-form-field-checklist .fjs-form-field-label:not(:first-of-type) {
626
- font-size: var(--cds-body-short-01-font-size);
627
- font-weight: var(--cds-body-short-01-font-weight);
628
- line-height: var(--cds-body-short-01-line-height);
629
- letter-spacing: var(--cds-body-short-01-letter-spacing);
630
- color: var(--cds-text-primary);
631
- }
632
-
633
- .fjs-form-field-checkbox .fjs-form-field-label {
634
- font-size: var(--cds-body-short-01-font-size);
635
- font-weight: var(--cds-body-short-01-font-weight);
636
- line-height: var(--cds-body-short-01-line-height);
637
- letter-spacing: var(--cds-body-short-01-letter-spacing);
638
- color: var(--cds-text-primary);
639
- }
640
- }
641
-
642
- // Taglist styles /////////////
643
-
644
- .fjs-container {
645
- .fjs-taglist {
646
- display: flex;
647
- align-items: center;
648
- min-height: 2.5rem;
649
- height: unset !important;
650
- }
651
-
652
- .fjs-taglist:focus-within {
653
- outline: 2px solid var(--cds-focus);
654
- outline-offset: -2px;
655
- }
656
-
657
- .fjs-taglist .fjs-taglist-input {
658
- &,
659
- &::placeholder {
660
- color: var(--cds-text-primary);
661
- }
662
- }
663
-
664
- .fjs-taglist .fjs-taglist-tag {
665
- font-size: var(--cds-label-01-font-size);
666
- font-weight: var(--cds-label-01-font-weight);
667
- line-height: var(--cds-label-01-line-height);
668
- letter-spacing: var(--cds-label-01-letter-spacing);
669
- max-width: 100%;
670
- padding: 0 0.5rem;
671
- border-radius: 0.9375rem;
672
- word-break: break-word;
673
- min-width: auto;
674
- display: inline-flex;
675
- align-items: center;
676
- justify-content: center;
677
-
678
- & .fjs-taglist-tag-label {
679
- padding: 0;
680
- max-width: 100%;
681
- text-overflow: ellipsis;
682
- white-space: nowrap;
683
- }
684
-
685
- & .fjs-taglist-tag-remove {
686
- all: unset;
687
- width: 1.5rem;
688
- height: 1.5rem;
689
- border-radius: 50%;
690
- display: flex;
691
- flex-shrink: 0;
692
- align-items: center;
693
- justify-content: center;
694
- padding: 0;
695
- border: 0;
696
- margin: 0 rem(-8) 0 0.125rem;
697
- cursor: pointer;
698
-
699
- & svg {
700
- all: unset;
701
- color: var(--cds-icon-inverse);
702
- }
703
-
704
- &:focus {
705
- background-color: transparent;
706
- outline: 1px solid var(--cds-focus-inverse);
707
- }
708
- }
709
- }
710
- }
711
-
712
- // Radio styles /////////////
713
-
714
- .fjs-container {
715
- .fjs-form-field-radio {
716
- .fjs-input {
717
- appearance: none;
718
- width: 0;
719
- margin: 0;
720
- margin-right: calc(#{rem(18)} + var(--cds-spacing-03));
721
- position: relative;
722
- height: #{rem(18)};
723
- outline: none;
724
-
725
- &:focus:before {
726
- outline: 2px solid var(--cds-focus);
727
- outline-offset: 1.5px;
728
- }
729
-
730
- &:before {
731
- position: absolute;
732
- top: 0;
733
- left: 0;
734
- width: #{rem(18)};
735
- height: #{rem(18)};
736
- border: 1px solid var(--cds-icon-primary);
737
- background-color: transparent;
738
- border-radius: 50%;
739
- content: '';
740
- }
741
- }
742
-
743
- .fjs-checked .fjs-input:after {
744
- position: relative;
745
- top: 0;
746
- left: 0;
747
- display: inline-block;
748
- width: #{rem(18)};
749
- height: #{rem(18)};
750
- background-color: var(--cds-icon-primary);
751
- border-radius: 50%;
752
- content: '';
753
- transform: scale(0.5);
754
- }
755
-
756
- &.fjs-disabled .fjs-input:before {
757
- border-color: var(--cds-icon-disabled);
758
- }
759
-
760
- &.fjs-disabled .fjs-checked .fjs-input:after {
761
- background-color: var(--cds-icon-disabled);
762
- }
763
-
764
- .fjs-form-field-label:not(:first-of-type) {
765
- font-size: var(--cds-body-short-01-font-size);
766
- font-weight: var(--cds-body-short-01-font-weight);
767
- line-height: var(--cds-body-short-01-line-height);
768
- letter-spacing: var(--cds-body-short-01-letter-spacing);
769
- color: var(--cds-text-primary);
770
- }
771
- }
772
- }
773
-
774
- // Button styles /////////////
775
-
776
- .fjs-container {
777
- .fjs-form-field.fjs-form-field-button .fjs-button {
778
- font-size: var(--cds-body-short-01-font-size);
779
- font-weight: var(--cds-body-short-01-font-weight);
780
- line-height: var(--cds-body-short-01-line-height);
781
- letter-spacing: var(--cds-body-short-01-letter-spacing);
782
- min-height: #{rem(32)};
783
- padding: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px;
784
- text-align: left;
785
- color: var(--cds-button-tertiary);
786
- border: 1px solid var(--cds-button-tertiary);
787
- border-radius: 0;
788
- background-color: transparent;
789
- cursor: pointer;
790
-
791
- &:hover {
792
- color: var(--cds-text-inverse);
793
- background-color: var(--cds-button-tertiary-hover);
794
- }
795
-
796
- &:focus {
797
- border-color: var(--cds-focus);
798
- box-shadow: inset 0 0 0 1px var(--cds-focus),
799
- inset 0 0 0 2px var(--cds-background);
800
- color: var(--cds-text-inverse);
801
- background-color: var(--cds-button-tertiary);
802
- }
803
-
804
- &:active {
805
- border-color: transparent;
806
- background-color: var(--cds-button-tertiary-active);
807
- color: var(--cds-text-inverse);
808
- }
809
-
810
- &:disabled {
811
- border: 1px solid var(--cds-button-disabled);
812
- background: transparent;
813
- box-shadow: none;
814
- color: var(--cds-text-on-color-disabled);
815
- cursor: var(--cursor-disabled, not-allowed);
816
- outline: none;
817
- }
818
-
819
- &[type='submit'] {
820
- background-color: var(--cds-button-primary);
821
- border: 1px solid transparent;
822
- color: var(--cds-text-on-color);
823
-
824
- &:disabled {
825
- background: var(--cds-button-disabled);
826
- }
827
- }
828
- }
829
- }
830
-
831
- // Number styles /////////////
832
-
833
- .fjs-container {
834
- .fjs-form-field-number .fjs-input-group {
835
- border-radius: 0;
836
- border: none;
837
- border-bottom: 1px solid var(--cds-border-strong);
838
- height: 2.5rem;
839
- box-sizing: border-box;
840
-
841
- &:focus-within {
842
- outline: 2px solid var(--cds-focus);
843
- outline-offset: -2px;
844
- }
845
-
846
- .fjs-input {
847
- border-radius: 0;
848
- border: none;
849
- font-size: var(--cds-body-short-01-font-size);
850
- font-weight: var(--cds-body-short-01-font-weight);
851
- line-height: var(--cds-body-short-01-line-height);
852
- letter-spacing: var(--cds-body-short-01-letter-spacing);
853
- }
854
-
855
- .fjs-number-arrow-container {
856
- all: unset;
857
- border: none;
858
- border-radius: 0;
859
- display: flex;
860
- flex-direction: row-reverse;
861
- align-items: center;
862
- background-color: var(--cds-field);
863
-
864
- .fjs-number-arrow-up,
865
- .fjs-number-arrow-down {
866
- width: 40px;
867
- height: calc(40px - 1px);
868
- background-color: var(--cds-field);
869
- color: transparent;
870
-
871
- &:hover {
872
- background-color: var(--cds-field-hover);
873
- cursor: pointer;
874
- }
875
- }
876
-
877
- &.fjs-disabled .fjs-number-arrow-up:hover,
878
- &.fjs-disabled .fjs-number-arrow-down:hover {
879
- background-color: var(--cds-field);
880
- cursor: not-allowed;
881
- }
882
-
883
- .fjs-number-arrow-separator {
884
- width: 0.0625rem;
885
- height: 1rem;
886
- background-color: var(--cds-border-subtle);
887
- }
888
-
889
- .fjs-number-arrow-down {
890
- background-repeat: no-repeat;
891
- background-position: right 50% bottom 50%;
892
- }
893
-
894
- .fjs-number-arrow-up {
895
- background-repeat: no-repeat;
896
- background-position: right 50% bottom 50%;
897
- }
898
- }
899
- }
900
- }
901
-
902
- // Datetime styles /////////////
903
-
904
- .fjs-container {
905
- .fjs-form-field-datetime {
906
- .fjs-input.flatpickr-input {
907
- width: 100%;
908
- height: 100%;
909
- border: none;
910
- border-radius: 0;
911
-
912
- &,
913
- &::placeholder {
914
- color: var(--cds-text-primary);
915
- }
916
- }
917
-
918
- .fjs-input.flatpickr-input:disabled {
919
- color: var(--cds-text-disabled);
920
- }
921
-
922
- .fjs-input.flatpickr-input:disabled::placeholder {
923
- color: var(--cds-text-disabled);
924
- }
925
-
926
- select {
927
- @include getBaseInputStyles(1.5rem);
928
- @include getSelectArrowStyles(var(--cds-spacing-03));
929
- border-bottom: none;
930
- padding-right: 2rem;
931
- }
932
-
933
- .fjs-input-group {
934
- display: flex;
935
- flex-direction: row-reverse;
936
- position: relative;
937
- }
938
-
939
- .fjs-input-group .fjs-input-adornment {
940
- border: none;
941
- border-radius: 0;
942
- background-color: var(--cds-field);
943
- display: flex;
944
- padding-right: var(--cds-spacing-05);
945
- }
946
-
947
- .fjs-input-group .fjs-input-adornment svg {
948
- color: var(--cds-icon-primary);
949
- cursor: pointer;
950
- }
951
-
952
- .flatpickr-wrapper {
953
- height: 100%;
954
- position: initial;
955
- }
956
-
957
- .fjs-timepicker.fjs-timepicker-anchor {
958
- position: unset;
959
- }
960
-
961
- .flatpickr-calendar.static {
962
- top: calc(100% + 3px);
963
- }
964
-
965
- .flatpickr-calendar .flatpickr-prev-month svg,
966
- .flatpickr-calendar .flatpickr-next-month svg {
967
- height: 16px;
968
- }
969
-
970
- .flatpickr-day.today {
971
- position: relative;
972
- color: var(--cds-link-primary);
973
- font-weight: 600;
974
- border-color: transparent;
975
- }
976
-
977
- .flatpickr-day.selected,
978
- .flatpickr-day.today.selected,
979
- .flatpickr-day.selected:hover,
980
- .flatpickr-day.today.selected:hover {
981
- background-color: var(--cds-button-primary);
982
- color: var(--cds-text-on-color);
983
- }
984
-
985
- .flatpickr-day:focus {
986
- outline: 2px solid var(--cds-focus);
987
- outline-offset: -2px;
988
- }
989
-
990
- .flatpickr-day.selected:focus {
991
- outline: 0.0625rem solid var(--cds-focus);
992
- outline-offset: -0.1875rem;
993
- }
994
-
995
- .flatpickr-day:hover {
996
- background: var(--cds-layer-hover);
997
- }
998
-
999
- .flatpickr-days,
1000
- .flatpickr-weekdays {
1001
- padding: unset;
1002
- width: unset;
1003
- }
1004
- }
1005
- }
1006
-
1007
- // Select styles /////////////
1008
-
1009
- .fjs-container {
1010
- .fjs-form-field-select .fjs-input-group {
1011
- @include getBaseInputStyles(2.5rem);
1012
- @include getSelectArrowStyles(var(--cds-spacing-05));
1013
-
1014
- .fjs-select-display {
1015
- display: flex;
1016
- align-items: center;
1017
- }
1018
-
1019
- .fjs-select-arrow {
1020
- color: transparent;
1021
- }
1022
-
1023
- .fjs-select-cross {
1024
- display: flex;
1025
- align-items: center;
1026
- justify-content: center;
1027
- margin-right: var(--cds-spacing-04);
1028
- width: 2.5rem;
1029
- height: calc(2.5rem - 1px);
1030
-
1031
- &:hover {
1032
- background-color: var(--cds-layer-hover);
1033
- }
1034
-
1035
- svg {
1036
- color: var(--cds-icon-primary);
1037
- }
1038
- }
1039
-
1040
- .fjs-input {
1041
- color: var(--cds-text-primary);
1042
- background-color: var(--cds-field);
1043
- border-radius: 0;
1044
- border: none;
1045
- border-bottom: 1px solid var(--cds-border-strong);
1046
- height: 2.5rem;
1047
- font-size: var(--cds-body-short-01-font-size);
1048
- font-weight: var(--cds-body-short-01-font-weight);
1049
- line-height: var(--cds-body-short-01-line-height);
1050
- letter-spacing: var(--cds-body-short-01-letter-spacing);
1051
- }
1052
- }
1053
-
1054
- .fjs-form-field-select .fjs-select-anchor .fjs-dropdownlist {
1055
- position: absolute;
1056
- top: -4px;
1057
- }
1058
-
1059
- .fjs-form-field-select .fjs-input-group:focus-within {
1060
- outline: 2px solid var(--cds-focus);
1061
- outline-offset: -2px;
1062
- }
1063
-
1064
- .fjs-form-field-select.fjs-disabled .fjs-input-group {
1065
- @include getSelectArrowStyles(var(--cds-spacing-05));
1066
- }
1067
-
1068
- .fjs-has-errors.fjs-form-field-select .fjs-input-group:focus-within {
1069
- outline: 2px solid var(--cds-focus);
1070
- outline-offset: -2px;
1071
- }
1072
-
1073
- .fjs-has-errors.fjs-form-field-select .fjs-input-group {
1074
- outline: 2px solid var(--cds-text-error);
1075
- outline-offset: -2px;
1076
- }
1077
- }
1078
-
1079
- // Remaining input styles /////////////
1080
-
1081
- .fjs-container {
1082
- .fjs-form-field-textfield .fjs-input-group,
1083
- .fjs-form-field-datetime .fjs-input-group,
1084
- .fjs-textarea,
1085
- .fjs-taglist,
1086
- .fjs-form-field-select.fjs-disabled .fjs-input-group {
1087
- @include getBaseInputStyles(2.5rem);
1088
- }
1089
-
1090
- .fjs-form-field-textfield .fjs-input-group,
1091
- .fjs-form-field-datetime .fjs-input-group {
1092
- &:focus-within {
1093
- outline: 2px solid var(--cds-focus);
1094
- outline-offset: -2px;
1095
- }
1096
- }
1097
- .fjs-form-field-textfield .fjs-input,
1098
- .fjs-form-field-datetime .fjs-input {
1099
- background-color: var(--cds-field);
1100
- color: var(--cds-text-primary);
1101
- border-radius: 0;
1102
- }
1103
-
1104
- .fjs-has-errors.fjs-form-field-number .fjs-input-group:focus-within,
1105
- .fjs-has-errors.fjs-form-field-textarea .fjs-textarea:focus,
1106
- .fjs-form-field-textfield.fjs-has-errors .fjs-input-group:focus-within,
1107
- .fjs-form-field-textfield.fjs-has-errors .fjs-input-group:focus,
1108
- .fjs-form-field-datetime.fjs-has-errors .fjs-input-group:focus-within,
1109
- .fjs-form-field-datetime.fjs-has-errors .fjs-input-group:focus {
1110
- outline: 2px solid var(--cds-focus);
1111
- outline-offset: -2px;
1112
- }
1113
-
1114
- .fjs-has-errors.fjs-form-field-number .fjs-input-group,
1115
- .fjs-has-errors.fjs-form-field-textarea .fjs-textarea,
1116
- .fjs-form-field-textfield.fjs-has-errors .fjs-input-group,
1117
- .fjs-form-field-textfield.fjs-has-errors .fjs-input-group,
1118
- .fjs-form-field-datetime.fjs-has-errors .fjs-input-group,
1119
- .fjs-form-field-datetime.fjs-has-errors .fjs-input-group {
1120
- outline: 2px solid var(--cds-text-error);
1121
- outline-offset: -2px;
1122
- }
1123
- }
1124
-
1125
- // Dropdown styles /////////////
1126
-
1127
- .fjs-container {
1128
- .fjs-form-field-taglist .fjs-taglist-anchor .fjs-dropdownlist,
1129
- .fjs-form-field-datetime .fjs-timepicker-anchor .fjs-dropdownlist,
1130
- .fjs-form-field-select .fjs-select-anchor .fjs-dropdownlist {
1131
- margin: 0;
1132
- max-height: rem(264);
1133
- border: none;
1134
- background-color: var(--cds-layer);
1135
- overflow-y: auto;
1136
- cursor: pointer;
1137
- border-radius: 0;
1138
- box-shadow: 0 2px 6px var(--cds-shadow);
1139
-
1140
- & .fjs-dropdownlist-item {
1141
- border: none;
1142
- box-sizing: border-box;
1143
- padding: 0;
1144
- margin: 0 var(--cds-spacing-05);
1145
- }
1146
-
1147
- & .fjs-dropdownlist-item:not(:first-of-type):not(:hover) {
1148
- border-top: 1px solid var(--cds-border-subtle);
1149
- }
1150
-
1151
- & .fjs-dropdownlist-item,
1152
- & .fjs-dropdownlist-empty {
1153
- font-size: var(--cds-body-short-01-font-size);
1154
- font-weight: var(--cds-body-short-01-font-weight);
1155
- line-height: var(--cds-body-short-01-line-height);
1156
- letter-spacing: var(--cds-body-short-01-letter-spacing);
1157
- height: #{rem(40)};
1158
- color: var(--cds-text-secondary);
1159
- cursor: pointer;
1160
- user-select: none;
1161
- display: flex;
1162
- align-items: center;
1163
- background-color: transparent;
1164
- }
1165
-
1166
- & .fjs-dropdownlist-empty {
1167
- color: var(--cds-text-disabled);
1168
- cursor: default;
1169
- }
1170
-
1171
- & .fjs-dropdownlist-item:hover,
1172
- & .fjs-dropdownlist-item.focused {
1173
- background-color: var(--cds-layer-hover);
1174
- color: var(--cds-text-primary);
1175
- margin: 0;
1176
- padding: 0 var(--cds-spacing-05);
1177
- }
1178
-
1179
- & .fjs-dropdownlist-item:not(:first-of-type):hover {
1180
- padding-top: 1px;
1181
- }
1182
-
1183
- & .fjs-dropdownlist-item.focused + .fjs-dropdownlist-item {
1184
- border: none;
1185
- padding-top: 1px;
1186
- }
1187
- }
1188
- }
1189
-
1190
- // Adornment styles /////////////
1191
-
1192
- .fjs-container .fjs-form-field:not(.fjs-form-field-datetime) {
1193
- .fjs-input-group .fjs-input-adornment {
1194
- all: unset;
1195
- display: flex;
1196
- align-items: center;
1197
- background-color: var(--cds-field);
1198
- color: var(--cds-text-secondary);
1199
- padding: 0 var(--cds-spacing-04);
1200
- cursor: default;
1201
-
1202
- &.border-right {
1203
- padding-right: 0;
1204
- }
1205
-
1206
- &.border-left {
1207
- padding-left: 0;
1208
- }
1209
- }
1210
-
1211
- &.fjs-disabled .fjs-input-group .fjs-input-adornment {
1212
- color: var(--cds-text-disabled);
1213
- }
1214
- }
1215
-
1216
- // iFrame styles ////////////
1217
-
1218
- .fjs-container {
1219
- .fjs-iframe-placeholder {
1220
- background-color: var(--cds-layer);
1221
- border-color: var(--cds-border-subtle);
1222
- color: var(--cds-text-helper);
1223
- }
1224
-
1225
- .fjs-iframe {
1226
- border-color: var(--cds-border-subtle);
1227
- }
1228
- }
1229
-
1230
- // Table styles ////////////
1231
-
1232
- .fjs-container {
1233
- .fjs-form-field-table {
1234
- row-gap: var(--cds-spacing-04);
1235
- }
1236
-
1237
- .fjs-form-field.fjs-form-field-table .fjs-form-field-label {
1238
- color: var(--cds-text-secondary);
1239
- font-size: var(--cds-label-02-font-size);
1240
- font-weight: var(--cds-label-02-font-weight);
1241
- line-height: var(--cds-label-02-line-height);
1242
- letter-spacing: var(--cds-label-02-letter-spacing);
1243
- margin-bottom: 0;
1244
- }
1245
-
1246
- .fjs-table-th {
1247
- color: var(--cds-color-primary);
1248
- font-size: var(--cds-heading-compact-01-font-size);
1249
- font-weight: var(--cds-heading-compact-01-font-weight);
1250
- line-height: var(--cds-heading-compact-01-line-height);
1251
- letter-spacing: var(--cds-heading-compact-01-letter-spacing);
1252
-
1253
- &:focus {
1254
- outline: 2px solid var(--cds-focus);
1255
- outline-offset: -2px;
1256
- }
1257
- }
1258
-
1259
- .fjs-table-tr,
1260
- .fjs-table-nav {
1261
- block-size: rem(24px);
1262
- }
1263
-
1264
- .fjs-table-td,
1265
- .fjs-table-th {
1266
- vertical-align: middle;
1267
- }
1268
-
1269
- .fjs-table-middle-container.fjs-table-empty {
1270
- background-color: transparent;
1271
- color: var(--cds-text-secondary);
1272
- padding-left: var(--cds-spacing-05);
1273
- font-size: var(--cds-heading-compact-01-font-size);
1274
- font-weight: var(--cds-heading-compact-01-font-weight);
1275
- line-height: var(--cds-heading-compact-01-line-height);
1276
- letter-spacing: var(--cds-heading-compact-01-letter-spacing);
1277
- }
1278
-
1279
- .fjs-table-middle-container {
1280
- border-radius: 0;
1281
- background-color: var(--cds-layer);
1282
- }
1283
-
1284
- .fjs-table-body .fjs-table-tr:hover {
1285
- background-color: var(--cds-layer-hover);
1286
- }
1287
-
1288
- .fjs-table-nav {
1289
- color: var(--cds-text-primary);
1290
- font-size: var(--cds-label-01-font-size);
1291
- font-weight: var(--cds-label-01-font-weight);
1292
- line-height: var(--cds-label-01-line-height);
1293
- letter-spacing: var(--cds-label-01-letter-spacing);
1294
- }
1295
-
1296
- .fjs-table-nav-button {
1297
- color: var(--cds-text-primary);
1298
-
1299
- &:disabled {
1300
- color: var(--cds-text-disabled);
1301
- }
1302
-
1303
- &:focus {
1304
- outline: 2px solid var(--cds-focus);
1305
- outline-offset: -2px;
1306
- }
1307
- }
1308
-
1309
- // To be removed when this issue is fixed upstream: https://github.com/carbon-design-system/carbon/issues/14597
1310
-
1311
- .fjs-table-body .fjs-table-tr:not(:last-child) {
1312
- border-bottom: 1px solid var(--cds-border-subtle-02);
1313
- }
1314
-
1315
- .fjs-table-middle-container {
1316
- border: 1px solid var(--cds-border-subtle-02);
1317
- }
1318
-
1319
- .fjs-table-nav {
1320
- border-top: 1px solid var(--cds-border-subtle-02);
1321
- }
1322
-
1323
- .fjs-table-nav-button {
1324
- border-left: 1px solid var(--cds-border-subtle-02);
1325
- }
1326
- }
1327
-
1328
- // Dynamic lists ////////////
1329
-
1330
-
1331
- .fjs-container .fjs-form-field-dynamiclist {
1332
- .fjs-repeat-row-container .fjs-repeat-row-remove-icon-container {
1333
- border-radius: 0;
1334
- color: var(--cds-button-danger-secondary);
1335
- min-width: rem(40);
1336
- min-height: rem(40);
1337
-
1338
- &:hover {
1339
- color: var(--cds-text-on-color);
1340
- background-color: var(--cds-button-danger-hover);
1341
- }
1342
- }
1343
-
1344
- .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible .fjs-repeat-row-remove-icon-container {
1345
- outline: 2px solid var(--cds-focus);
1346
- outline-offset: 1px;
1347
- border-radius: 0;
1348
- }
1349
-
1350
- .fjs-repeat-render-footer {
1351
- padding-left: 8px;
1352
- padding-right: 8px;
1353
- margin-right: 0;
1354
- }
1355
-
1356
- .fjs-repeat-render-add,
1357
- .fjs-repeat-render-collapse {
1358
- min-height: rem(40);
1359
- padding-inline-end: rem(15);
1360
-
1361
- &:focus {
1362
- outline: 2px solid var(--cds-focus);
1363
- outline-offset: 1px;
1364
- border: none;
1365
- border-radius: 0;
1366
- }
1367
-
1368
- &:hover {
1369
- color: var(--cds-link-primary-hover);
1370
- background-color: var(--cds-background-hover);
1371
- }
1372
- }
1
+ @use "sass:math";
2
+
3
+ @function rem($value) {
4
+ $remValue: math.div($value, 16) + rem;
5
+ @return $remValue;
6
+ }
7
+
8
+ @mixin getBaseInputStyles($height) {
9
+ color: var(--cds-text-primary);
10
+ border-radius: 0;
11
+ border: none;
12
+ border-bottom: 1px solid var(--cds-border-strong);
13
+ height: $height;
14
+ font-size: var(--cds-body-short-01-font-size);
15
+ font-weight: var(--cds-body-short-01-font-weight);
16
+ line-height: var(--cds-body-short-01-line-height);
17
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
18
+
19
+ &:focus {
20
+ outline: 2px solid var(--cds-focus);
21
+ outline-offset: -2px;
22
+ }
23
+
24
+ &::placeholder {
25
+ color: var(--cds-text-placeholder);
26
+ }
27
+ }
28
+
29
+ @mixin getSelectArrowStyles($arrowRightPosition) {
30
+ color: var(--cds-text-primary);
31
+ background-color: var(--cds-field);
32
+ cursor: pointer;
33
+ appearance: none;
34
+ background-repeat: no-repeat;
35
+ background-position: right $arrowRightPosition bottom 50%;
36
+ }
37
+
38
+ // Global styles /////////////
39
+
40
+ .fjs-container {
41
+ width: 100%;
42
+ height: min-content;
43
+
44
+ .cds--grid {
45
+ padding: 0;
46
+ }
47
+
48
+ .fjs-form {
49
+ background-color: transparent;
50
+ color: var(--cds-text-primary);
51
+ padding: 0;
52
+ }
53
+
54
+ @media (width < 66rem) {
55
+ // Carbon lg width breakpoint
56
+ .fjs-layout-column .fjs-form-field {
57
+ margin-left: 0;
58
+ margin-right: 0;
59
+ }
60
+ }
61
+
62
+ .fjs-input-group {
63
+ margin: 0;
64
+ }
65
+ }
66
+
67
+ // Themed icons /////////////
68
+
69
+ .cds--g10 {
70
+ .fjs-container {
71
+
72
+ .fjs-form-field-number .fjs-input-group {
73
+ .fjs-number-arrow-container {
74
+ .fjs-number-arrow-down {
75
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+") }
76
+
77
+ .fjs-number-arrow-up {
78
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
79
+ }
80
+
81
+ &.fjs-disabled .fjs-number-arrow-up {
82
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
83
+ }
84
+
85
+ &.fjs-disabled .fjs-number-arrow-down {
86
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+");
87
+ }
88
+ }
89
+ }
90
+
91
+ .fjs-form-field-select {
92
+ .fjs-input-group {
93
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
94
+ }
95
+
96
+ &.fjs-readonly {
97
+ .fjs-input-group {
98
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
99
+ }
100
+ }
101
+
102
+ &.fjs-disabled {
103
+ .fjs-input-group {
104
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjIsIDIyLCAyMiwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
105
+ }
106
+ }
107
+ }
108
+
109
+ .fjs-form-field-datetime {
110
+ select {
111
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMxNjE2MTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
112
+ }
113
+ }
114
+ }
115
+ }
116
+
117
+ .cds--g100 {
118
+ .fjs-container {
119
+
120
+ .fjs-form-field-number .fjs-input-group {
121
+ .fjs-number-arrow-container {
122
+ .fjs-number-arrow-down {
123
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+");
124
+ }
125
+
126
+ .fjs-number-arrow-up {
127
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
128
+ }
129
+
130
+ &.fjs-disabled .fjs-number-arrow-up {
131
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTE3IDE1TDE3IDggMTUgOCAxNSAxNSA4IDE1IDggMTcgMTUgMTcgMTUgMjQgMTcgMjQgMTcgMTcgMjQgMTcgMjQgMTV6IiAvPjwvc3ZnPg==");
132
+ }
133
+
134
+ &.fjs-disabled .fjs-number-arrow-down {
135
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDMyIDMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTVIMjRWMTdIOHoiIC8+PC9zdmc+")
136
+ }
137
+ }
138
+ }
139
+
140
+ .fjs-form-field-select {
141
+ .fjs-input-group {
142
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
143
+ }
144
+
145
+ &.fjs-readonly {
146
+ .fjs-input-group {
147
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
148
+ }
149
+ }
150
+
151
+ &.fjs-disabled {
152
+ .fjs-input-group {
153
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjQ0LCAyNDQsIDI0NCwgMC4yNSkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
154
+ }
155
+ }
156
+ }
157
+
158
+ .fjs-form-field-datetime {
159
+ select {
160
+ background-image: url("data:image/svg+xml;base64,PHN2ZyBmb2N1c2FibGU9ImZhbHNlIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmNGY0ZjQiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBhcmlhLWhpZGRlbj0idHJ1ZSI+PHBhdGggZD0iTTggMTFMMyA2IDMuNyA1LjMgOCA5LjYgMTIuMyA1LjMgMTMgNnoiPjwvcGF0aD48L3N2Zz4=");
161
+ }
162
+ }
163
+ }
164
+ }
165
+
166
+ // Markdown styles /////////////
167
+
168
+ .fjs-container .fjs-form-field.fjs-form-field-text .markup {
169
+ font-size: var(--cds-body-long-01-font-size);
170
+ font-weight: var(--cds-body-long-01-font-weight);
171
+ line-height: var(--cds-body-long-01-line-height);
172
+ letter-spacing: var(--cds-body-long-01-letter-spacing);
173
+
174
+ h1 {
175
+ font-size: var(--cds-productive-heading-06-font-size);
176
+ font-weight: var(--cds-productive-heading-06-font-weight);
177
+ line-height: var(--cds-productive-heading-06-line-height);
178
+ letter-spacing: var(--cds-productive-heading-06-letter-spacing);
179
+ }
180
+
181
+ h2 {
182
+ font-size: var(--cds-productive-heading-05-font-size);
183
+ font-weight: var(--cds-productive-heading-05-font-weight);
184
+ line-height: var(--cds-productive-heading-05-line-height);
185
+ letter-spacing: var(--cds-productive-heading-05-letter-spacing);
186
+ }
187
+
188
+ h3 {
189
+ font-size: var(--cds-productive-heading-04-font-size);
190
+ font-weight: var(--cds-productive-heading-04-font-weight);
191
+ line-height: var(--cds-productive-heading-04-line-height);
192
+ letter-spacing: var(--cds-productive-heading-04-letter-spacing);
193
+ }
194
+
195
+ h4 {
196
+ font-size: var(--cds-productive-heading-03-font-size);
197
+ font-weight: var(--cds-productive-heading-03-font-weight);
198
+ line-height: var(--cds-productive-heading-03-line-height);
199
+ letter-spacing: var(--cds-productive-heading-03-letter-spacing);
200
+ }
201
+
202
+ h5 {
203
+ font-size: var(--cds-productive-heading-02-font-size);
204
+ font-weight: var(--cds-productive-heading-02-font-weight);
205
+ line-height: var(--cds-productive-heading-02-line-height);
206
+ letter-spacing: var(--cds-productive-heading-02-letter-spacing);
207
+ }
208
+
209
+ h6 {
210
+ font-size: var(--cds-productive-heading-01-font-size);
211
+ font-weight: var(--cds-productive-heading-01-font-weight);
212
+ line-height: var(--cds-productive-heading-01-line-height);
213
+ letter-spacing: var(--cds-productive-heading-01-letter-spacing);
214
+ }
215
+
216
+ code {
217
+ font-family: var(--cds-code-02-font-family);
218
+ font-size: var(--cds-code-02-font-size);
219
+ font-weight: var(--cds-code-02-font-weight);
220
+ line-height: var(--cds-code-02-line-height);
221
+ letter-spacing: var(--cds-code-02-letter-spacing);
222
+ white-space: pre-wrap;
223
+ }
224
+
225
+ blockquote {
226
+ font-family: var(--cds-quotation-02-font-family);
227
+ font-size: var(--cds-quotation-02-font-size);
228
+ font-weight: var(--cds-quotation-02-font-weight);
229
+ line-height: var(--cds-quotation-02-line-height);
230
+ letter-spacing: var(--cds-quotation-02-letter-spacing);
231
+ }
232
+
233
+ ul,
234
+ ol {
235
+ box-sizing: border-box;
236
+ padding: 0;
237
+ border: 0;
238
+ margin: 0;
239
+ list-style: none;
240
+ }
241
+
242
+ ul {
243
+ margin-left: var(--cds-spacing-05);
244
+
245
+ li {
246
+ position: relative;
247
+
248
+ &:before {
249
+ position: absolute;
250
+ left: calc(-1 * var(--cds-spacing-05));
251
+ content: '–';
252
+ }
253
+ }
254
+ }
255
+
256
+ ol {
257
+ margin-left: var(--cds-spacing-05);
258
+
259
+ li {
260
+ position: relative;
261
+ counter-increment: item;
262
+
263
+ &:before {
264
+ position: absolute;
265
+ left: calc(-1 * var(--cds-spacing-05));
266
+ content: counter(item) '.';
267
+ }
268
+ }
269
+ }
270
+ }
271
+
272
+ // Anchor styles /////////////
273
+
274
+ .fjs-container .fjs-form-field-text a {
275
+ color: var(--cds-link-primary);
276
+ outline: none;
277
+ text-decoration: underline;
278
+ font-size: inherit;
279
+ font-weight: inherit;
280
+ line-height: var(--cds-body-compact-01-line-height);
281
+ letter-spacing: var(--cds-body-compact-01-letter-spacing);
282
+
283
+ &:hover {
284
+ color: var(--cds-link-primary-hover);
285
+ }
286
+
287
+ &:focus {
288
+ outline: 1px solid var(--cds-focus);
289
+ }
290
+
291
+ &:active, &:active:visited, &:active:visited:hover {
292
+ color: var(--cds-text-primary);
293
+ }
294
+
295
+ &:visited {
296
+ color: var(--cds-link-primary);
297
+ }
298
+
299
+ &:visited:hover {
300
+ color: var(--cds-link-primary-hover);
301
+ }
302
+ }
303
+
304
+ // Read-only styles /////////////
305
+
306
+ .fjs-container {
307
+ .fjs-readonly {
308
+ .fjs-input:read-only:not(:disabled),
309
+ .fjs-textarea:read-only:not(:disabled),
310
+ .fjs-select:read-only:not(:disabled),
311
+ &.fjs-taglist,
312
+ .fjs-input-group {
313
+ background-color: transparent;
314
+ }
315
+
316
+ &.fjs-form-field {
317
+ .fjs-input-group {
318
+ border-bottom: 1px solid var(--cds-border-subtle);
319
+ }
320
+ }
321
+
322
+ &.fjs-form-field-number {
323
+ .fjs-input-group .fjs-number-arrow-container {
324
+ background-color: transparent;
325
+
326
+ .fjs-number-arrow-up,
327
+ .fjs-number-arrow-down {
328
+ background-color: transparent;
329
+ pointer-events: none;
330
+ }
331
+ }
332
+ }
333
+
334
+ &.fjs-form-field:not(.fjs-form-field-datetime) {
335
+ .fjs-input-group .fjs-input-adornment {
336
+ background: transparent;
337
+ }
338
+ }
339
+
340
+ &.fjs-form-field-select {
341
+ .fjs-input-group {
342
+ cursor: unset;
343
+ background-color: transparent;
344
+
345
+ .fjs-input:read-only:not(:disabled) {
346
+ border-color: transparent;
347
+ }
348
+
349
+ .fjs-select-display {
350
+ color: var(--cds-text-primary);
351
+ }
352
+ }
353
+ }
354
+
355
+ &.fjs-form-field-datetime {
356
+ .fjs-input-group {
357
+ cursor: unset;
358
+
359
+ .fjs-input-adornment {
360
+ background-color: transparent;
361
+ }
362
+
363
+ .flatpickr-input {
364
+ cursor: unset;
365
+ }
366
+
367
+ .fjs-input-adornment svg {
368
+ cursor: unset;
369
+ }
370
+ }
371
+ }
372
+
373
+ &.fjs-form-field-checkbox,
374
+ &.fjs-form-field-radio,
375
+ &.fjs-form-field-checklist {
376
+ .fjs-input:read-only {
377
+ opacity: 1;
378
+ background-color: transparent;
379
+
380
+ &:before {
381
+ border-color: var(--cds-icon-disabled);
382
+ }
383
+ }
384
+
385
+ &.fjs-checked .fjs-input[type='checkbox'],
386
+ .fjs-form-field-label.fjs-checked .fjs-input[type='checkbox'] {
387
+ &:before {
388
+ border: 1px solid var(--cds-icon-disabled);
389
+ background: transparent;
390
+ }
391
+
392
+ &:after {
393
+ border-bottom: 2px solid var(--cds-icon-primary);
394
+ border-left: 2px solid var(--cds-icon-primary);
395
+ }
396
+ }
397
+ }
398
+
399
+ &.fjs-taglist .fjs-taglist-tag {
400
+ .fjs-taglist-tag-label {
401
+ padding: 2px 0px;
402
+ }
403
+ }
404
+
405
+ &.fjs-form-field-dynamiclist button.fjs-repeat-render-add,
406
+ &.fjs-form-field-dynamiclist button .fjs-repeat-row-remove-icon-container {
407
+ color: var(--cds-text-on-color-disabled);
408
+
409
+ &:hover {
410
+ color: var(--cds-text-on-color-disabled);
411
+ background-color: transparent;
412
+ cursor: not-allowed;
413
+ }
414
+ }
415
+ }
416
+ }
417
+
418
+ // Disabled styles /////////////
419
+
420
+ .fjs-container {
421
+ .fjs-disabled {
422
+ &.fjs-form-field-textfield .fjs-input,
423
+ &.fjs-form-field-datetime .fjs-input,
424
+ & .fjs-textarea:disabled,
425
+ & .fjs-taglist.fjs-disabled,
426
+ & .fjs-taglist.fjs-disabled .fjs-taglist-input,
427
+ &.fjs-form-field-select .fjs-input-group.disabled,
428
+ &.fjs-form-field-select .fjs-input-group.disabled .fjs-select-display,
429
+ &.fjs-form-field-select .fjs-input-group.disabled .fjs-input,
430
+ &.fjs-form-field .fjs-form-field-label,
431
+ &.fjs-form-field.fjs-form-field-radio .fjs-form-field-label,
432
+ &.fjs-form-field.fjs-form-field-checklist .fjs-form-field-label,
433
+ & .fjs-form-field-description {
434
+ color: var(--cds-text-disabled);
435
+ cursor: var(--cursor-disabled, not-allowed);
436
+ }
437
+
438
+ &.fjs-form-field-textfield .fjs-input-group,
439
+ &.fjs-form-field-datetime .fjs-input-group,
440
+ & .fjs-textarea:disabled,
441
+ & .fjs-taglist.fjs-disabled,
442
+ & .fjs-taglist.fjs-disabled .fjs-taglist-input,
443
+ &.fjs-form-field-select .fjs-input-group.disabled,
444
+ &.fjs-form-field-select .fjs-input-group.disabled .fjs-select-display,
445
+ &.fjs-form-field-select .fjs-input-group.disabled .fjs-input {
446
+ border: none;
447
+ }
448
+ }
449
+
450
+ .fjs-disabled.fjs-form-field-number .fjs-input-group {
451
+ border: none;
452
+ cursor: var(--cursor-disabled, not-allowed);
453
+ }
454
+
455
+ .fjs-disabled.fjs-form-field-number .fjs-input-group .fjs-input {
456
+ cursor: var(--cursor-disabled, not-allowed);
457
+ }
458
+
459
+ .fjs-form-field.fjs-disabled.fjs-checked .fjs-input[type='checkbox'] {
460
+ cursor: var(--cursor-disabled, not-allowed);
461
+ &:before {
462
+ border-color: var(--cds-icon-disabled);
463
+ background-color: var(--cds-icon-disabled);
464
+ cursor: var(--cursor-disabled, not-allowed);
465
+ }
466
+
467
+ &:after {
468
+ cursor: var(--cursor-disabled, not-allowed);
469
+ }
470
+ }
471
+
472
+ .fjs-form-field.fjs-disabled .fjs-input[type='checkbox'] {
473
+ cursor: var(--cursor-disabled, not-allowed);
474
+ &:before {
475
+ border-color: var(--cds-icon-disabled);
476
+ cursor: var(--cursor-disabled, not-allowed);
477
+ }
478
+ }
479
+
480
+ .fjs-form-field-datetime.fjs-disabled .fjs-input-group .fjs-input-adornment svg {
481
+ color: var(--cds-icon-disabled);
482
+ cursor: var(--cursor-disabled, not-allowed);
483
+ }
484
+
485
+ .fjs-taglist.fjs-disabled .fjs-taglist-tag {
486
+ background-color: var(--cds-layer-01);
487
+
488
+ .fjs-taglist-tag-label {
489
+ padding: 2px 0px;
490
+ opacity: 0.7;
491
+ color: var(--cds-text-on-color-disabled);
492
+ }
493
+ }
494
+ }
495
+
496
+ // Label, Description & Error styles /////////////
497
+
498
+ .fjs-container {
499
+ .fjs-form-field-label {
500
+ font-size: var(--cds-label-01-font-size);
501
+ font-weight: var(--cds-label-01-font-weight);
502
+ line-height: var(--cds-label-01-line-height);
503
+ letter-spacing: var(--cds-label-01-letter-spacing);
504
+ }
505
+
506
+ .fjs-form-field:not(.fjs-form-field-checkbox, .fjs-form-field-grouplike, .fjs-form-field-table) .fjs-form-field-label:first-child {
507
+ margin: 0;
508
+ margin-bottom: var(--cds-spacing-03);
509
+ }
510
+
511
+ .fjs-form-field.fjs-form-field-radio
512
+ .fjs-form-field-label:not(:first-of-type),
513
+ .fjs-form-field.fjs-form-field-checklist
514
+ .fjs-form-field-label:not(:first-of-type) {
515
+ margin: 0;
516
+ margin-bottom: 0.1875rem;
517
+ }
518
+
519
+ .fjs-form-field.fjs-form-field-radio
520
+ .fjs-form-field-label:not(:first-of-type) {
521
+ min-height: #{rem(27)};
522
+ }
523
+
524
+ .fjs-form-field-description {
525
+ margin: 0;
526
+ margin-top: var(--cds-spacing-02);
527
+ font-size: var(--cds-helper-text-01-font-size);
528
+ font-weight: var(--cds-helper-text-01-font-weight);
529
+ line-height: var(--cds-helper-text-01-line-height);
530
+ letter-spacing: var(--cds-helper-text-01-letter-spacing);
531
+ }
532
+
533
+ .fjs-form-field-error {
534
+ margin: 0;
535
+ margin-top: var(--cds-spacing-02);
536
+ font-size: var(--cds-label-01-font-size);
537
+ font-weight: var(--cds-label-01-font-weight);
538
+ line-height: var(--cds-label-01-line-height);
539
+ letter-spacing: var(--cds-label-01-letter-spacing);
540
+ }
541
+
542
+ .fjs-has-errors .fjs-form-field-description {
543
+ display: none;
544
+ }
545
+ }
546
+
547
+ // Checkbox styles /////////////
548
+
549
+ .fjs-container {
550
+ .fjs-input[type='checkbox'],
551
+ .fjs-input[type='checkbox']:focus {
552
+ all: unset;
553
+ width: rem(6);
554
+ }
555
+
556
+ .fjs-form-field .fjs-input[type='checkbox'] {
557
+ position: relative;
558
+ display: flex;
559
+ min-height: rem(24);
560
+ padding-top: rem(3);
561
+ padding-left: rem(20);
562
+ cursor: pointer;
563
+ user-select: none;
564
+ font-size: var(--cds-body-short-01-font-size);
565
+ font-weight: var(--cds-body-short-01-font-weight);
566
+ line-height: var(--cds-body-short-01-line-height);
567
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
568
+
569
+ &:before,
570
+ &:after {
571
+ box-sizing: border-box;
572
+ }
573
+
574
+ &:before {
575
+ position: absolute;
576
+ top: rem(3);
577
+ left: 0;
578
+ width: rem(16);
579
+ height: rem(16);
580
+ border: 1px solid var(--cds-icon-primary);
581
+ margin: rem(2) rem(2) rem(2) rem(3);
582
+ background-color: transparent;
583
+ border-radius: rem(1);
584
+ content: '';
585
+ }
586
+
587
+ &:after {
588
+ position: absolute;
589
+ top: rem(9);
590
+ left: rem(7);
591
+ width: rem(9);
592
+ height: rem(5);
593
+ border-bottom: 2px solid var(--cds-icon-inverse);
594
+ border-left: 2px solid var(--cds-icon-inverse);
595
+ margin-top: rem(-3);
596
+ background: 0 0;
597
+ content: '';
598
+ transform: scale(0) rotate(-45deg);
599
+ transform-origin: bottom right;
600
+ }
601
+ }
602
+
603
+ .fjs-form-field .fjs-input[type='checkbox']:focus {
604
+ &:before {
605
+ outline: 2px solid var(--cds-focus);
606
+ outline-offset: rem(1);
607
+ }
608
+ }
609
+
610
+ .fjs-form-field.fjs-checked .fjs-input[type='checkbox'],
611
+ .fjs-form-field
612
+ .fjs-form-field-label.fjs-checked
613
+ .fjs-input[type='checkbox'] {
614
+ &:before {
615
+ border: none;
616
+ border-width: 1px;
617
+ background-color: var(--cds-icon-primary);
618
+ }
619
+
620
+ &:after {
621
+ transform: scale(1) rotate(-45deg);
622
+ }
623
+ }
624
+
625
+ .fjs-form-field-checklist .fjs-form-field-label:not(:first-of-type) {
626
+ font-size: var(--cds-body-short-01-font-size);
627
+ font-weight: var(--cds-body-short-01-font-weight);
628
+ line-height: var(--cds-body-short-01-line-height);
629
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
630
+ color: var(--cds-text-primary);
631
+ }
632
+
633
+ .fjs-form-field-checkbox .fjs-form-field-label {
634
+ font-size: var(--cds-body-short-01-font-size);
635
+ font-weight: var(--cds-body-short-01-font-weight);
636
+ line-height: var(--cds-body-short-01-line-height);
637
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
638
+ color: var(--cds-text-primary);
639
+ }
640
+ }
641
+
642
+ // Taglist styles /////////////
643
+
644
+ .fjs-container {
645
+ .fjs-taglist {
646
+ display: flex;
647
+ align-items: center;
648
+ min-height: 2.5rem;
649
+ height: unset !important;
650
+ }
651
+
652
+ .fjs-taglist:focus-within {
653
+ outline: 2px solid var(--cds-focus);
654
+ outline-offset: -2px;
655
+ }
656
+
657
+ .fjs-taglist .fjs-taglist-input {
658
+ &,
659
+ &::placeholder {
660
+ color: var(--cds-text-primary);
661
+ }
662
+ }
663
+
664
+ .fjs-taglist .fjs-taglist-tag {
665
+ font-size: var(--cds-label-01-font-size);
666
+ font-weight: var(--cds-label-01-font-weight);
667
+ line-height: var(--cds-label-01-line-height);
668
+ letter-spacing: var(--cds-label-01-letter-spacing);
669
+ max-width: 100%;
670
+ padding: 0 0.5rem;
671
+ border-radius: 0.9375rem;
672
+ word-break: break-word;
673
+ min-width: auto;
674
+ display: inline-flex;
675
+ align-items: center;
676
+ justify-content: center;
677
+
678
+ & .fjs-taglist-tag-label {
679
+ padding: 0;
680
+ max-width: 100%;
681
+ text-overflow: ellipsis;
682
+ white-space: nowrap;
683
+ }
684
+
685
+ & .fjs-taglist-tag-remove {
686
+ all: unset;
687
+ width: 1.5rem;
688
+ height: 1.5rem;
689
+ border-radius: 50%;
690
+ display: flex;
691
+ flex-shrink: 0;
692
+ align-items: center;
693
+ justify-content: center;
694
+ padding: 0;
695
+ border: 0;
696
+ margin: 0 rem(-8) 0 0.125rem;
697
+ cursor: pointer;
698
+
699
+ & svg {
700
+ all: unset;
701
+ color: var(--cds-icon-inverse);
702
+ }
703
+
704
+ &:focus {
705
+ background-color: transparent;
706
+ outline: 1px solid var(--cds-focus-inverse);
707
+ }
708
+ }
709
+ }
710
+ }
711
+
712
+ // Radio styles /////////////
713
+
714
+ .fjs-container {
715
+ .fjs-form-field-radio {
716
+ .fjs-input {
717
+ appearance: none;
718
+ width: 0;
719
+ margin: 0;
720
+ margin-right: calc(#{rem(18)} + var(--cds-spacing-03));
721
+ position: relative;
722
+ height: #{rem(18)};
723
+ outline: none;
724
+
725
+ &:focus:before {
726
+ outline: 2px solid var(--cds-focus);
727
+ outline-offset: 1.5px;
728
+ }
729
+
730
+ &:before {
731
+ position: absolute;
732
+ top: 0;
733
+ left: 0;
734
+ width: #{rem(18)};
735
+ height: #{rem(18)};
736
+ border: 1px solid var(--cds-icon-primary);
737
+ background-color: transparent;
738
+ border-radius: 50%;
739
+ content: '';
740
+ }
741
+ }
742
+
743
+ .fjs-checked .fjs-input:after {
744
+ position: relative;
745
+ top: 0;
746
+ left: 0;
747
+ display: inline-block;
748
+ width: #{rem(18)};
749
+ height: #{rem(18)};
750
+ background-color: var(--cds-icon-primary);
751
+ border-radius: 50%;
752
+ content: '';
753
+ transform: scale(0.5);
754
+ }
755
+
756
+ &.fjs-disabled .fjs-input:before {
757
+ border-color: var(--cds-icon-disabled);
758
+ }
759
+
760
+ &.fjs-disabled .fjs-checked .fjs-input:after {
761
+ background-color: var(--cds-icon-disabled);
762
+ }
763
+
764
+ .fjs-form-field-label:not(:first-of-type) {
765
+ font-size: var(--cds-body-short-01-font-size);
766
+ font-weight: var(--cds-body-short-01-font-weight);
767
+ line-height: var(--cds-body-short-01-line-height);
768
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
769
+ color: var(--cds-text-primary);
770
+ }
771
+ }
772
+ }
773
+
774
+ // Button styles /////////////
775
+
776
+ .fjs-container {
777
+ .fjs-form-field.fjs-form-field-button .fjs-button {
778
+ font-size: var(--cds-body-short-01-font-size);
779
+ font-weight: var(--cds-body-short-01-font-weight);
780
+ line-height: var(--cds-body-short-01-line-height);
781
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
782
+ min-height: #{rem(32)};
783
+ padding: calc(0.375rem - 3px) 60px calc(0.375rem - 3px) 12px;
784
+ text-align: left;
785
+ color: var(--cds-button-tertiary);
786
+ border: 1px solid var(--cds-button-tertiary);
787
+ border-radius: 0;
788
+ background-color: transparent;
789
+ cursor: pointer;
790
+
791
+ &:hover {
792
+ color: var(--cds-text-inverse);
793
+ background-color: var(--cds-button-tertiary-hover);
794
+ }
795
+
796
+ &:focus {
797
+ border-color: var(--cds-focus);
798
+ box-shadow: inset 0 0 0 1px var(--cds-focus),
799
+ inset 0 0 0 2px var(--cds-background);
800
+ color: var(--cds-text-inverse);
801
+ background-color: var(--cds-button-tertiary);
802
+ }
803
+
804
+ &:active {
805
+ border-color: transparent;
806
+ background-color: var(--cds-button-tertiary-active);
807
+ color: var(--cds-text-inverse);
808
+ }
809
+
810
+ &:disabled {
811
+ border: 1px solid var(--cds-button-disabled);
812
+ background: transparent;
813
+ box-shadow: none;
814
+ color: var(--cds-text-on-color-disabled);
815
+ cursor: var(--cursor-disabled, not-allowed);
816
+ outline: none;
817
+ }
818
+
819
+ &[type='submit'] {
820
+ background-color: var(--cds-button-primary);
821
+ border: 1px solid transparent;
822
+ color: var(--cds-text-on-color);
823
+
824
+ &:disabled {
825
+ background: var(--cds-button-disabled);
826
+ }
827
+ }
828
+ }
829
+ }
830
+
831
+ // Number styles /////////////
832
+
833
+ .fjs-container {
834
+ .fjs-form-field-number .fjs-input-group {
835
+ border-radius: 0;
836
+ border: none;
837
+ border-bottom: 1px solid var(--cds-border-strong);
838
+ height: 2.5rem;
839
+ box-sizing: border-box;
840
+
841
+ &:focus-within {
842
+ outline: 2px solid var(--cds-focus);
843
+ outline-offset: -2px;
844
+ }
845
+
846
+ .fjs-input {
847
+ border-radius: 0;
848
+ border: none;
849
+ font-size: var(--cds-body-short-01-font-size);
850
+ font-weight: var(--cds-body-short-01-font-weight);
851
+ line-height: var(--cds-body-short-01-line-height);
852
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
853
+ }
854
+
855
+ .fjs-number-arrow-container {
856
+ all: unset;
857
+ border: none;
858
+ border-radius: 0;
859
+ display: flex;
860
+ flex-direction: row-reverse;
861
+ align-items: center;
862
+ background-color: var(--cds-field);
863
+
864
+ .fjs-number-arrow-up,
865
+ .fjs-number-arrow-down {
866
+ width: 40px;
867
+ height: calc(40px - 1px);
868
+ background-color: var(--cds-field);
869
+ color: transparent;
870
+
871
+ &:hover {
872
+ background-color: var(--cds-field-hover);
873
+ cursor: pointer;
874
+ }
875
+ }
876
+
877
+ &.fjs-disabled .fjs-number-arrow-up:hover,
878
+ &.fjs-disabled .fjs-number-arrow-down:hover {
879
+ background-color: var(--cds-field);
880
+ cursor: not-allowed;
881
+ }
882
+
883
+ .fjs-number-arrow-separator {
884
+ width: 0.0625rem;
885
+ height: 1rem;
886
+ background-color: var(--cds-border-subtle);
887
+ }
888
+
889
+ .fjs-number-arrow-down {
890
+ background-repeat: no-repeat;
891
+ background-position: right 50% bottom 50%;
892
+ }
893
+
894
+ .fjs-number-arrow-up {
895
+ background-repeat: no-repeat;
896
+ background-position: right 50% bottom 50%;
897
+ }
898
+ }
899
+ }
900
+ }
901
+
902
+ // Datetime styles /////////////
903
+
904
+ .fjs-container {
905
+ .fjs-form-field-datetime {
906
+ .fjs-input.flatpickr-input {
907
+ width: 100%;
908
+ height: 100%;
909
+ border: none;
910
+ border-radius: 0;
911
+
912
+ &,
913
+ &::placeholder {
914
+ color: var(--cds-text-primary);
915
+ }
916
+ }
917
+
918
+ .fjs-input.flatpickr-input:disabled {
919
+ color: var(--cds-text-disabled);
920
+ }
921
+
922
+ .fjs-input.flatpickr-input:disabled::placeholder {
923
+ color: var(--cds-text-disabled);
924
+ }
925
+
926
+ select {
927
+ @include getBaseInputStyles(1.5rem);
928
+ @include getSelectArrowStyles(var(--cds-spacing-03));
929
+ border-bottom: none;
930
+ padding-right: 2rem;
931
+ }
932
+
933
+ .fjs-input-group {
934
+ display: flex;
935
+ flex-direction: row-reverse;
936
+ position: relative;
937
+ }
938
+
939
+ .fjs-input-group .fjs-input-adornment {
940
+ border: none;
941
+ border-radius: 0;
942
+ background-color: var(--cds-field);
943
+ display: flex;
944
+ padding-right: var(--cds-spacing-05);
945
+ }
946
+
947
+ .fjs-input-group .fjs-input-adornment svg {
948
+ color: var(--cds-icon-primary);
949
+ cursor: pointer;
950
+ }
951
+
952
+ .flatpickr-wrapper {
953
+ height: 100%;
954
+ position: initial;
955
+ }
956
+
957
+ .fjs-timepicker.fjs-timepicker-anchor {
958
+ position: unset;
959
+ }
960
+
961
+ .flatpickr-calendar.static {
962
+ top: calc(100% + 3px);
963
+ }
964
+
965
+ .flatpickr-calendar .flatpickr-prev-month svg,
966
+ .flatpickr-calendar .flatpickr-next-month svg {
967
+ height: 16px;
968
+ }
969
+
970
+ .flatpickr-day.today {
971
+ position: relative;
972
+ color: var(--cds-link-primary);
973
+ font-weight: 600;
974
+ border-color: transparent;
975
+ }
976
+
977
+ .flatpickr-day.selected,
978
+ .flatpickr-day.today.selected,
979
+ .flatpickr-day.selected:hover,
980
+ .flatpickr-day.today.selected:hover {
981
+ background-color: var(--cds-button-primary);
982
+ color: var(--cds-text-on-color);
983
+ }
984
+
985
+ .flatpickr-day:focus {
986
+ outline: 2px solid var(--cds-focus);
987
+ outline-offset: -2px;
988
+ }
989
+
990
+ .flatpickr-day.selected:focus {
991
+ outline: 0.0625rem solid var(--cds-focus);
992
+ outline-offset: -0.1875rem;
993
+ }
994
+
995
+ .flatpickr-day:hover {
996
+ background: var(--cds-layer-hover);
997
+ }
998
+
999
+ .flatpickr-days,
1000
+ .flatpickr-weekdays {
1001
+ padding: unset;
1002
+ width: unset;
1003
+ }
1004
+ }
1005
+ }
1006
+
1007
+ // Select styles /////////////
1008
+
1009
+ .fjs-container {
1010
+ .fjs-form-field-select .fjs-input-group {
1011
+ @include getBaseInputStyles(2.5rem);
1012
+ @include getSelectArrowStyles(var(--cds-spacing-05));
1013
+
1014
+ .fjs-select-display {
1015
+ display: flex;
1016
+ align-items: center;
1017
+ }
1018
+
1019
+ .fjs-select-arrow {
1020
+ color: transparent;
1021
+ }
1022
+
1023
+ .fjs-select-cross {
1024
+ display: flex;
1025
+ align-items: center;
1026
+ justify-content: center;
1027
+ margin-right: var(--cds-spacing-04);
1028
+ width: 2.5rem;
1029
+ height: calc(2.5rem - 1px);
1030
+
1031
+ &:hover {
1032
+ background-color: var(--cds-layer-hover);
1033
+ }
1034
+
1035
+ svg {
1036
+ color: var(--cds-icon-primary);
1037
+ }
1038
+ }
1039
+
1040
+ .fjs-input {
1041
+ color: var(--cds-text-primary);
1042
+ background-color: var(--cds-field);
1043
+ border-radius: 0;
1044
+ border: none;
1045
+ border-bottom: 1px solid var(--cds-border-strong);
1046
+ height: 2.5rem;
1047
+ font-size: var(--cds-body-short-01-font-size);
1048
+ font-weight: var(--cds-body-short-01-font-weight);
1049
+ line-height: var(--cds-body-short-01-line-height);
1050
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
1051
+ }
1052
+ }
1053
+
1054
+ .fjs-form-field-select .fjs-select-anchor .fjs-dropdownlist {
1055
+ position: absolute;
1056
+ top: -4px;
1057
+ }
1058
+
1059
+ .fjs-form-field-select .fjs-input-group:focus-within {
1060
+ outline: 2px solid var(--cds-focus);
1061
+ outline-offset: -2px;
1062
+ }
1063
+
1064
+ .fjs-form-field-select.fjs-disabled .fjs-input-group {
1065
+ @include getSelectArrowStyles(var(--cds-spacing-05));
1066
+ }
1067
+
1068
+ .fjs-has-errors.fjs-form-field-select .fjs-input-group:focus-within {
1069
+ outline: 2px solid var(--cds-focus);
1070
+ outline-offset: -2px;
1071
+ }
1072
+
1073
+ .fjs-has-errors.fjs-form-field-select .fjs-input-group {
1074
+ outline: 2px solid var(--cds-text-error);
1075
+ outline-offset: -2px;
1076
+ }
1077
+ }
1078
+
1079
+ // Remaining input styles /////////////
1080
+
1081
+ .fjs-container {
1082
+ .fjs-form-field-textfield .fjs-input-group,
1083
+ .fjs-form-field-datetime .fjs-input-group,
1084
+ .fjs-textarea,
1085
+ .fjs-taglist,
1086
+ .fjs-form-field-select.fjs-disabled .fjs-input-group {
1087
+ @include getBaseInputStyles(2.5rem);
1088
+ }
1089
+
1090
+ .fjs-form-field-textfield .fjs-input-group,
1091
+ .fjs-form-field-datetime .fjs-input-group {
1092
+ &:focus-within {
1093
+ outline: 2px solid var(--cds-focus);
1094
+ outline-offset: -2px;
1095
+ }
1096
+ }
1097
+ .fjs-form-field-textfield .fjs-input,
1098
+ .fjs-form-field-datetime .fjs-input {
1099
+ background-color: var(--cds-field);
1100
+ color: var(--cds-text-primary);
1101
+ border-radius: 0;
1102
+ }
1103
+
1104
+ .fjs-has-errors.fjs-form-field-number .fjs-input-group:focus-within,
1105
+ .fjs-has-errors.fjs-form-field-textarea .fjs-textarea:focus,
1106
+ .fjs-form-field-textfield.fjs-has-errors .fjs-input-group:focus-within,
1107
+ .fjs-form-field-textfield.fjs-has-errors .fjs-input-group:focus,
1108
+ .fjs-form-field-datetime.fjs-has-errors .fjs-input-group:focus-within,
1109
+ .fjs-form-field-datetime.fjs-has-errors .fjs-input-group:focus {
1110
+ outline: 2px solid var(--cds-focus);
1111
+ outline-offset: -2px;
1112
+ }
1113
+
1114
+ .fjs-has-errors.fjs-form-field-number .fjs-input-group,
1115
+ .fjs-has-errors.fjs-form-field-textarea .fjs-textarea,
1116
+ .fjs-form-field-textfield.fjs-has-errors .fjs-input-group,
1117
+ .fjs-form-field-textfield.fjs-has-errors .fjs-input-group,
1118
+ .fjs-form-field-datetime.fjs-has-errors .fjs-input-group,
1119
+ .fjs-form-field-datetime.fjs-has-errors .fjs-input-group {
1120
+ outline: 2px solid var(--cds-text-error);
1121
+ outline-offset: -2px;
1122
+ }
1123
+ }
1124
+
1125
+ // Dropdown styles /////////////
1126
+
1127
+ .fjs-container {
1128
+ .fjs-form-field-taglist .fjs-taglist-anchor .fjs-dropdownlist,
1129
+ .fjs-form-field-datetime .fjs-timepicker-anchor .fjs-dropdownlist,
1130
+ .fjs-form-field-select .fjs-select-anchor .fjs-dropdownlist {
1131
+ margin: 0;
1132
+ max-height: rem(264);
1133
+ border: none;
1134
+ background-color: var(--cds-layer);
1135
+ overflow-y: auto;
1136
+ cursor: pointer;
1137
+ border-radius: 0;
1138
+ box-shadow: 0 2px 6px var(--cds-shadow);
1139
+
1140
+ & .fjs-dropdownlist-item {
1141
+ border: none;
1142
+ box-sizing: border-box;
1143
+ padding: 0;
1144
+ margin: 0 var(--cds-spacing-05);
1145
+ }
1146
+
1147
+ & .fjs-dropdownlist-item:not(:first-of-type):not(:hover) {
1148
+ border-top: 1px solid var(--cds-border-subtle);
1149
+ }
1150
+
1151
+ & .fjs-dropdownlist-item,
1152
+ & .fjs-dropdownlist-empty {
1153
+ font-size: var(--cds-body-short-01-font-size);
1154
+ font-weight: var(--cds-body-short-01-font-weight);
1155
+ line-height: var(--cds-body-short-01-line-height);
1156
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
1157
+ height: #{rem(40)};
1158
+ color: var(--cds-text-secondary);
1159
+ cursor: pointer;
1160
+ user-select: none;
1161
+ display: flex;
1162
+ align-items: center;
1163
+ background-color: transparent;
1164
+ }
1165
+
1166
+ & .fjs-dropdownlist-empty {
1167
+ color: var(--cds-text-disabled);
1168
+ cursor: default;
1169
+ }
1170
+
1171
+ & .fjs-dropdownlist-item:hover,
1172
+ & .fjs-dropdownlist-item.focused {
1173
+ background-color: var(--cds-layer-hover);
1174
+ color: var(--cds-text-primary);
1175
+ margin: 0;
1176
+ padding: 0 var(--cds-spacing-05);
1177
+ }
1178
+
1179
+ & .fjs-dropdownlist-item:not(:first-of-type):hover {
1180
+ padding-top: 1px;
1181
+ }
1182
+
1183
+ & .fjs-dropdownlist-item.focused + .fjs-dropdownlist-item {
1184
+ border: none;
1185
+ padding-top: 1px;
1186
+ }
1187
+ }
1188
+ }
1189
+
1190
+ // Adornment styles /////////////
1191
+
1192
+ .fjs-container .fjs-form-field:not(.fjs-form-field-datetime) {
1193
+ .fjs-input-group .fjs-input-adornment {
1194
+ all: unset;
1195
+ display: flex;
1196
+ align-items: center;
1197
+ background-color: var(--cds-field);
1198
+ color: var(--cds-text-secondary);
1199
+ padding: 0 var(--cds-spacing-04);
1200
+ cursor: default;
1201
+
1202
+ &.border-right {
1203
+ padding-right: 0;
1204
+ }
1205
+
1206
+ &.border-left {
1207
+ padding-left: 0;
1208
+ }
1209
+ }
1210
+
1211
+ &.fjs-disabled .fjs-input-group .fjs-input-adornment {
1212
+ color: var(--cds-text-disabled);
1213
+ }
1214
+ }
1215
+
1216
+ // iFrame styles ////////////
1217
+
1218
+ .fjs-container {
1219
+ .fjs-iframe-placeholder {
1220
+ background-color: var(--cds-layer);
1221
+ border-color: var(--cds-border-subtle);
1222
+ color: var(--cds-text-helper);
1223
+ }
1224
+
1225
+ .fjs-iframe {
1226
+ border-color: var(--cds-border-subtle);
1227
+ }
1228
+ }
1229
+
1230
+ // Table styles ////////////
1231
+
1232
+ .fjs-container {
1233
+ .fjs-form-field-table {
1234
+ row-gap: var(--cds-spacing-04);
1235
+ }
1236
+
1237
+ .fjs-form-field.fjs-form-field-table .fjs-form-field-label {
1238
+ color: var(--cds-text-secondary);
1239
+ font-size: var(--cds-label-02-font-size);
1240
+ font-weight: var(--cds-label-02-font-weight);
1241
+ line-height: var(--cds-label-02-line-height);
1242
+ letter-spacing: var(--cds-label-02-letter-spacing);
1243
+ margin-bottom: 0;
1244
+ }
1245
+
1246
+ .fjs-table-th {
1247
+ color: var(--cds-color-primary);
1248
+ font-size: var(--cds-heading-compact-01-font-size);
1249
+ font-weight: var(--cds-heading-compact-01-font-weight);
1250
+ line-height: var(--cds-heading-compact-01-line-height);
1251
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing);
1252
+
1253
+ &:focus {
1254
+ outline: 2px solid var(--cds-focus);
1255
+ outline-offset: -2px;
1256
+ }
1257
+ }
1258
+
1259
+ .fjs-table-tr,
1260
+ .fjs-table-nav {
1261
+ block-size: rem(24px);
1262
+ }
1263
+
1264
+ .fjs-table-td,
1265
+ .fjs-table-th {
1266
+ vertical-align: middle;
1267
+ }
1268
+
1269
+ .fjs-table-middle-container.fjs-table-empty {
1270
+ background-color: transparent;
1271
+ color: var(--cds-text-secondary);
1272
+ padding-left: var(--cds-spacing-05);
1273
+ font-size: var(--cds-heading-compact-01-font-size);
1274
+ font-weight: var(--cds-heading-compact-01-font-weight);
1275
+ line-height: var(--cds-heading-compact-01-line-height);
1276
+ letter-spacing: var(--cds-heading-compact-01-letter-spacing);
1277
+ }
1278
+
1279
+ .fjs-table-middle-container {
1280
+ border-radius: 0;
1281
+ background-color: var(--cds-layer);
1282
+ }
1283
+
1284
+ .fjs-table-body .fjs-table-tr:hover {
1285
+ background-color: var(--cds-layer-hover);
1286
+ }
1287
+
1288
+ .fjs-table-nav {
1289
+ color: var(--cds-text-primary);
1290
+ font-size: var(--cds-label-01-font-size);
1291
+ font-weight: var(--cds-label-01-font-weight);
1292
+ line-height: var(--cds-label-01-line-height);
1293
+ letter-spacing: var(--cds-label-01-letter-spacing);
1294
+ }
1295
+
1296
+ .fjs-table-nav-button {
1297
+ color: var(--cds-text-primary);
1298
+
1299
+ &:disabled {
1300
+ color: var(--cds-text-disabled);
1301
+ }
1302
+
1303
+ &:focus {
1304
+ outline: 2px solid var(--cds-focus);
1305
+ outline-offset: -2px;
1306
+ }
1307
+ }
1308
+
1309
+ // To be removed when this issue is fixed upstream: https://github.com/carbon-design-system/carbon/issues/14597
1310
+
1311
+ .fjs-table-body .fjs-table-tr:not(:last-child) {
1312
+ border-bottom: 1px solid var(--cds-border-subtle-02);
1313
+ }
1314
+
1315
+ .fjs-table-middle-container {
1316
+ border: 1px solid var(--cds-border-subtle-02);
1317
+ }
1318
+
1319
+ .fjs-table-nav {
1320
+ border-top: 1px solid var(--cds-border-subtle-02);
1321
+ }
1322
+
1323
+ .fjs-table-nav-button {
1324
+ border-left: 1px solid var(--cds-border-subtle-02);
1325
+ }
1326
+ }
1327
+
1328
+ // Dynamic lists ////////////
1329
+
1330
+
1331
+ .fjs-container .fjs-form-field-dynamiclist {
1332
+ .fjs-repeat-row-container .fjs-repeat-row-remove-icon-container {
1333
+ border-radius: 0;
1334
+ color: var(--cds-button-danger-secondary);
1335
+ min-width: rem(40);
1336
+ min-height: rem(40);
1337
+
1338
+ &:hover {
1339
+ color: var(--cds-text-on-color);
1340
+ background-color: var(--cds-button-danger-hover);
1341
+ }
1342
+ }
1343
+
1344
+ .fjs-repeat-row-container .fjs-repeat-row-remove:focus-visible .fjs-repeat-row-remove-icon-container {
1345
+ outline: 2px solid var(--cds-focus);
1346
+ outline-offset: 1px;
1347
+ border-radius: 0;
1348
+ }
1349
+
1350
+ .fjs-repeat-render-footer {
1351
+ padding-left: 8px;
1352
+ padding-right: 8px;
1353
+ margin-right: 0;
1354
+ }
1355
+
1356
+ .fjs-repeat-render-add,
1357
+ .fjs-repeat-render-collapse {
1358
+ min-height: rem(40);
1359
+ padding-inline-end: rem(15);
1360
+
1361
+ &:focus {
1362
+ outline: 2px solid var(--cds-focus);
1363
+ outline-offset: 1px;
1364
+ border: none;
1365
+ border-radius: 0;
1366
+ }
1367
+
1368
+ &:hover {
1369
+ color: var(--cds-link-primary-hover);
1370
+ background-color: var(--cds-background-hover);
1371
+ }
1372
+ }
1373
1373
  }