@bpmn-io/form-js-carbon-styles 1.8.3 → 1.8.4

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