@bpmn-io/form-js-carbon-styles 1.7.1 → 1.7.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 (4) hide show
  1. package/LICENSE +22 -22
  2. package/package.json +3 -3
  3. package/src/carbon-styles.scss +1397 -1397
  4. package/src/types/carbon-styles.d.ts +10 -10
package/src/carbon-styles.scss CHANGED
@@ -1,1398 +1,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
-
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
- }
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
1398
  }