@commercetools-frontend/experimental-components 5.0.3 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.css CHANGED
@@ -1,265 +1,205 @@
1
- /* imported from required-indicator.module.css */
2
-
3
- .required-indicator-module__colored____YUFm {
4
- color: var(--color-warning);
5
- }
6
-
7
- .required-indicator-module__indicatorAsterisk___3lEdX {
8
- font-style: normal;
9
- margin-left: 2px;
10
- }
11
- /* imported from throttled-field.module.css */
12
-
13
- .throttled-field-module__size___324jx {
14
- width: 100%;
15
- }
1
+ /* imported from button.module.css */
16
2
 
17
- .throttled-field-module__size___324jx {
18
- min-height: var(--height-for-input);
19
- }
3
+ /* Generic button */
20
4
 
21
- .throttled-field-module__input-text___3zFFp {
22
- transition: 0.2s ease;
5
+ .button-module__button___1OzVf {
6
+ background: var(--color-neutral);
7
+ border: none;
23
8
  border-radius: 6px;
24
- border-style: solid;
25
- border-width: 1px;
26
9
  color: var(--color-solid);
27
- font-weight: 500;
10
+ cursor: pointer;
11
+ display: inline-block;
12
+ font-family: 'Open Sans', sans-serif;
28
13
  font-size: 1rem;
29
- font-family: 'Open Sans', sans-serif !important;
30
- padding: 7.5px 10px;
31
- outline: none;
32
- box-shadow: none;
33
- appearance: none;
14
+ padding: 7px 15px;
15
+ transition: background-color var(--transition-linear-80ms);
16
+ vertical-align: middle;
17
+ min-height: 32px;
34
18
  }
35
19
 
36
- .throttled-field-module__input-secondary___cFo9e {
37
- background-color: var(--color-neutral-95);
38
- border-color: var(--color-surface);
39
- width: 100%;
40
- }
20
+ /* Specific types of buttons */
41
21
 
42
- .throttled-field-module__input-primary___26G3R {
43
- border-color: var(--color-neutral);
44
- background-color: var(--color-surface);
22
+ .button-module__cancel___1-jYL {
23
+ background: var(--color-surface);
24
+ border: 1px solid var(--color-neutral);
45
25
  }
46
26
 
47
- .throttled-field-module__textarea___3ZNEs {
48
- width: 100%;
49
- min-height: 36px;
50
- resize: vertical;
27
+ .button-module__confirm___-W92x {
28
+ background: var(--color-primary);
29
+ color: var(--color-surface);
51
30
  }
52
31
 
53
- .throttled-field-module__textarea-primary___24Wwt {
54
- border-color: var(--color-neutral);
55
- background-color: var(--color-surface);
32
+ .button-module__save___1-KXp {
33
+ color: var(--color-surface) !important;
56
34
  }
57
35
 
58
- .throttled-field-module__textarea-secondary___2rmFG {
59
- background-color: var(--color-neutral-95);
60
- border-color: var(--color-surface);
61
- width: 100%;
36
+ .button-module__add___1fbPS {
37
+ background: var(--color-surface);
38
+ border: 1px solid var(--color-neutral);
39
+ color: var(--color-solid);
40
+ padding: 5.5px 15px 5.5px 10px;
62
41
  }
63
42
 
64
- .throttled-field-module__invalid___1yZLW {
65
- /* this needs !important because react-select has a :focus style that
66
- stops the border colour being set unless the element is blurred */
67
- border-color: var(--color-error) !important;
68
- border: 1px solid;
43
+ .button-module__add-url___1e6xE {
69
44
  }
70
45
 
71
- .throttled-field-module__disabled___qVj79 {
72
- cursor: not-allowed;
73
- background-color: var(--color-accent-98);
74
- color: var(--color-solid);
75
- opacity: 1; /* fix for mobile safari */
46
+ .button-module__icon-add___2X7fc {
47
+ color: var(--color-neutral-60);
48
+ float: left;
49
+ font-size: 1rem;
50
+ margin: 3px 10px 0 0;
76
51
  }
77
52
 
78
- .throttled-field-module__granular___2LXJf {
79
- border-top-left-radius: 0;
80
- border-bottom-left-radius: 0;
81
- margin-left: 0;
53
+ .button-module__icon-chain___1pvWT {
54
+ color: var(--color-neutral-60);
55
+ float: left;
56
+ font-size: 1.4rem;
57
+ margin: 0 10px 0 0;
82
58
  }
83
- /* imported from search-input.module.css */
84
59
 
85
- .search-input-module__block___1uM-y {
86
- display: inline-flex;
87
- flex-direction: row;
88
- align-items: flex-start;
89
- width: 100%;
90
- max-width: 800px;
60
+ .button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
61
+ .button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
62
+ color: var(--color-surface);
91
63
  }
92
64
 
93
- .search-input-module__container___9u6if {
65
+ /* Base of switch buttons */
66
+
67
+ .button-module__switch___2bt5z {
68
+ background: var(--color-surface);
69
+ border: 1px var(--color-neutral) solid;
70
+ color: var(--color-solid);
71
+ font-weight: 100;
94
72
  position: relative;
95
- flex-grow: 1;
96
73
  }
97
74
 
98
- .search-input-module__input-container___mJnyZ {
99
- border-color: var(--border-color-for-input);
100
- height: var(--height-for-input);
75
+ .button-module__switch___2bt5z .button-module__icon___wuw4Z {
76
+ color: var(--color-neutral-60);
101
77
  }
102
78
 
103
- .search-input-module__input-container___mJnyZ > input::placeholder {
104
- font-weight: var(--font-weight-400);
105
- font-size: var(--font-size-for-input);
106
- font-family: var(--font-family);
79
+ .button-module__switch___2bt5z:disabled {
107
80
  color: var(--color-neutral-60);
81
+ border-color: var(--color-neutral);
108
82
  }
109
83
 
110
- .search-input-module__input-container___mJnyZ > input {
111
- padding-right: calc(var(--spacing-xl) * 2);
84
+ .button-module__switch___2bt5z:hover {
85
+ color: var(--color-surface);
86
+ border-color: var(--color-info);
87
+ background: var(--color-info);
112
88
  }
113
89
 
114
- .search-input-module__input-container-disabled___23jR8 > input {
115
- border-color: var(--color-neutral);
90
+ .button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
91
+ color: var(--color-surface);
116
92
  }
117
93
 
118
- .search-input-module__input-container-hoverable___1xjqn > input:hover {
119
- border: var(--border-width-for-input) solid var(--border-color-for-input);
120
- background-color: var(--background-color-for-input-when-hovered);
121
- }
122
- .search-input-module__input-container-hoverable___1xjqn > input:focus {
123
- box-shadow: var(
124
- --shadow-for-input-when-focused,
125
- inset 0 0 0 1px var(--color-primary)
126
- );
127
- border-color: var(--border-color-for-input-when-focused);
94
+ .button-module__switch--active___1s4ZM {
128
95
  }
129
96
 
130
- .search-input-module__input-container-granular___33Pm- {
131
- border-color: var(--color-primary);
132
- position: relative;
133
- right: 3px;
97
+ .button-module__switch___2bt5z:disabled {
98
+ background: transparent;
99
+ color: var(--color-neutral-60);
134
100
  }
135
101
 
136
- .search-input-module__search-icon-container___cbHQY {
137
- background-color: transparent;
138
- border-color: transparent;
139
- position: absolute;
140
- right: 9px;
141
- top: 8px;
102
+ .button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
103
+ color: var(--color-neutral-60);
142
104
  }
143
105
 
144
- .search-input-module__clear-icon-container___3RQvu {
145
- background-color: transparent;
146
- border-color: transparent;
147
- position: absolute;
148
- right: 36px;
149
- top: 11px;
150
- z-index: 2;
106
+ .button-module__switch___2bt5z:disabled,
107
+ .button-module__switch--active___1s4ZM:disabled {
108
+ opacity: 1; /* exception for disabled switch button */
109
+ user-select: none;
110
+ cursor: default;
151
111
  }
152
112
 
153
- .search-input-module__clear-icon-container-granular___1mbin {
154
- right: 41px;
113
+ .button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
114
+ .button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
115
+ color: var(--color-info);
155
116
  }
156
117
 
157
- .search-input-module__search-icon-container-hoverable___1kTwJ {
158
- cursor: pointer;
118
+ .button-module__switch--active___1s4ZM:disabled {
119
+ color: var(--color-info);
120
+ border-color: var(--color-info);
159
121
  }
160
122
 
161
- .search-input-module__search-icon-container-granular___3fAsR {
162
- right: 15px;
163
- }
123
+ /* Switch type squared */
164
124
 
165
- .search-input-module__hidden___z07GX {
166
- display: none !important;
125
+ .button-module__switch-squared___QnrOG {
126
+ padding: 4.5px 15px 4.5px 40px;
167
127
  }
168
128
 
169
- .search-input-module__action___1GqGT {
170
- flex-shrink: 1;
171
- margin-left: var(--spacing-s);
129
+ .button-module__switch-squared--active___2ZbEC {
172
130
  }
173
- /* imported from selectable-field-search-input.module.css */
174
131
 
175
- .selectable-field-search-input-module__container___z2ltR {
176
- width: 100%;
177
- position: relative;
178
- display: flex;
179
- z-index: 3;
180
- max-width: var(--constraint-15);
181
- }
132
+ /* Switch type rounded */
182
133
 
183
- .selectable-field-search-input-module__search-mode-menu___Od6Le {
184
- border-radius: var(--border-radius-6);
185
- border: 1px solid var(--color-primary);
186
- margin-top: 2px;
187
- position: absolute;
188
- }
189
- /* imported from validated-input.module.css */
134
+ /* When the button has no text but icon */
190
135
 
191
- .validated-input-module__invalid___380EL {
192
- /* this needs !important because react-select has a :focus style that
193
- stops the border colour being set unless the element is blurred */
194
- border-color: var(--color-error) !important;
136
+ .button-module__switch-rounded___1CBs_ {
137
+ padding: 0;
138
+ border-width: 1px;
139
+ width: 36px;
140
+ height: 36px;
141
+ border-radius: 36px;
195
142
  }
196
143
 
197
- .validated-input-module__container___3L2KB {
198
- display: inline;
144
+ .button-module__switch-rounded--active___2Ckga {
199
145
  }
200
- /* imported from label-range.module.css */
201
146
 
202
- .label-range-module__label___3Tb0p {
203
- font-size: 0.9rem;
204
- font-weight: bold;
147
+ .button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
148
+ display: none;
205
149
  }
206
- /* imported from multi-value-search-input.module.css */
207
150
 
208
- .multi-value-search-input-module__container___2u64d {
209
- position: relative;
210
- }
151
+ /* States */
211
152
 
212
- .multi-value-search-input-module__searchInput___363nj input {
213
- border-color: var(--border-color-for-input);
153
+ .button-module__cancel___1-jYL:hover {
154
+ border-color: var(--color-primary);
155
+ color: var(--color-primary);
214
156
  }
215
157
 
216
- .multi-value-search-input-module__searchInput___363nj input::placeholder {
217
- color: var(--font-color-for-input-when-disabled);
158
+ .button-module__confirm___-W92x:hover {
159
+ background: var(--color-primary-25);
218
160
  }
219
161
 
220
- .multi-value-search-input-module__submittingTip___2339U {
221
- margin-top: var(--spacing-xs);
222
- background: var(--background-color-for-input);
223
- border: solid 1px var(--border-color-for-input-when-focused);
224
- border-radius: var(--border-radius-for-input);
225
- position: relative;
226
- cursor: default;
162
+ .button-module__add___1fbPS:hover {
163
+ background: var(--color-primary);
164
+ border-color: var(--color-primary);
165
+ color: var(--color-surface);
227
166
  }
228
167
 
229
- .multi-value-search-input-module__submitting-tip-single___1LcNy {
230
- padding: var(--spacing-s);
231
- color: var(--font-color-for-input-when-disabled);
168
+ /* Variations */
169
+
170
+ .button-module__disabled___2Azpu {
171
+ pointer-events: none;
172
+ opacity: 0.5;
232
173
  }
233
174
 
234
- .multi-value-search-input-module__submitting-tip-content___IyuVb {
235
- padding: var(--spacing-s);
175
+ .button-module__full___264Zw {
176
+ width: 100%;
236
177
  }
237
178
 
238
- .multi-value-search-input-module__submitting-tip-content-separate___3Y_CI {
239
- padding-top: var(--spacing-s);
179
+ .button-module__alt___Z6PWx {
180
+ color: var(--color-surface);
181
+ border-radius: 20px;
182
+ border: 2px var(--color-surface) solid;
183
+ padding-left: 30px;
184
+ padding-right: 30px;
240
185
  }
241
186
 
242
- .multi-value-search-input-module__submitting-tip-content-hoverable___2TK6S:hover {
243
- background-color: var(--color-neutral-95);
244
- border-radius: var(--border-radius-for-input);
187
+ .button-module__confirm-alt___2Zcqz {
188
+ border-color: transparent;
245
189
  }
246
190
 
247
- .multi-value-search-input-module__submitting-tip-content-separate-hoverable___3VUnV:hover {
248
- background-color: var(--color-neutral-95);
249
- border-bottom-left-radius: var(--border-radius-for-input);
250
- border-bottom-right-radius: var(--border-radius-for-input);
191
+ .button-module__cancel-alt___u5EAw {
192
+ background: none;
251
193
  }
252
- /* imported from numeric-format-input.module.css */
253
194
 
254
- .numeric-format-input-module__invalid___3LcyE {
255
- /* this needs !important because react-select has a :focus style that
256
- stops the border colour being set unless the element is blurred */
257
- border-color: var(--color-error) !important;
258
- border: 1px solid;
195
+ .button-module__save-alt___6iHMF {
196
+ border-color: transparent;
259
197
  }
260
198
 
261
- .numeric-format-input-module__disabled___hb6h4 {
262
- cursor: not-allowed;
199
+ /* Add Button */
200
+
201
+ .button-module__add-button___1f093 {
202
+ min-height: 32px;
263
203
  }
264
204
  /* imported from file-input.module.css */
265
205
 
@@ -297,208 +237,277 @@
297
237
  width: 1px;
298
238
  height: 1px;
299
239
  }
300
- /* imported from button.module.css */
240
+ /* imported from search-input.module.css */
301
241
 
302
- /* Generic button */
242
+ .search-input-module__block___1uM-y {
243
+ display: inline-flex;
244
+ flex-direction: row;
245
+ align-items: flex-start;
246
+ width: 100%;
247
+ max-width: 800px;
248
+ }
303
249
 
304
- .button-module__button___1OzVf {
305
- background: var(--color-neutral);
306
- border: none;
307
- border-radius: 6px;
308
- color: var(--color-solid);
309
- cursor: pointer;
310
- display: inline-block;
311
- font-family: 'Open Sans', sans-serif;
312
- font-size: 1rem;
313
- padding: 7px 15px;
314
- transition: background-color var(--transition-linear-80ms);
315
- vertical-align: middle;
316
- min-height: 32px;
250
+ .search-input-module__container___9u6if {
251
+ position: relative;
252
+ flex-grow: 1;
317
253
  }
318
254
 
319
- /* Specific types of buttons */
255
+ .search-input-module__input-container___mJnyZ {
256
+ border-color: var(--border-color-for-input);
257
+ height: var(--height-for-input);
258
+ }
320
259
 
321
- .button-module__cancel___1-jYL {
322
- background: var(--color-surface);
323
- border: 1px solid var(--color-neutral);
260
+ .search-input-module__input-container___mJnyZ > input::placeholder {
261
+ font-weight: var(--font-weight-400);
262
+ font-size: var(--font-size-for-input);
263
+ font-family: var(--font-family);
264
+ color: var(--color-neutral-60);
324
265
  }
325
266
 
326
- .button-module__confirm___-W92x {
327
- background: var(--color-primary);
328
- color: var(--color-surface);
267
+ .search-input-module__input-container___mJnyZ > input {
268
+ padding-right: calc(var(--spacing-xl) * 2);
269
+ }
270
+
271
+ .search-input-module__input-container-disabled___23jR8 > input {
272
+ border-color: var(--color-neutral);
273
+ }
274
+
275
+ .search-input-module__input-container-hoverable___1xjqn > input:hover {
276
+ border: var(--border-width-for-input) solid var(--border-color-for-input);
277
+ background-color: var(--background-color-for-input-when-hovered);
278
+ }
279
+ .search-input-module__input-container-hoverable___1xjqn > input:focus {
280
+ box-shadow: var(
281
+ --shadow-for-input-when-focused,
282
+ inset 0 0 0 1px var(--color-primary)
283
+ );
284
+ border-color: var(--border-color-for-input-when-focused);
285
+ }
286
+
287
+ .search-input-module__input-container-granular___33Pm- {
288
+ border-color: var(--color-primary);
289
+ position: relative;
290
+ right: 3px;
291
+ }
292
+
293
+ .search-input-module__search-icon-container___cbHQY {
294
+ background-color: transparent;
295
+ border-color: transparent;
296
+ position: absolute;
297
+ right: 9px;
298
+ top: 8px;
329
299
  }
330
300
 
331
- .button-module__save___1-KXp {
332
- color: var(--color-surface) !important;
301
+ .search-input-module__clear-icon-container___3RQvu {
302
+ background-color: transparent;
303
+ border-color: transparent;
304
+ position: absolute;
305
+ right: 36px;
306
+ top: 11px;
307
+ z-index: 2;
333
308
  }
334
309
 
335
- .button-module__add___1fbPS {
336
- background: var(--color-surface);
337
- border: 1px solid var(--color-neutral);
338
- color: var(--color-solid);
339
- padding: 5.5px 15px 5.5px 10px;
310
+ .search-input-module__clear-icon-container-granular___1mbin {
311
+ right: 41px;
340
312
  }
341
313
 
342
- .button-module__add-url___1e6xE {
314
+ .search-input-module__search-icon-container-hoverable___1kTwJ {
315
+ cursor: pointer;
343
316
  }
344
317
 
345
- .button-module__icon-add___2X7fc {
346
- color: var(--color-neutral-60);
347
- float: left;
348
- font-size: 1rem;
349
- margin: 3px 10px 0 0;
318
+ .search-input-module__search-icon-container-granular___3fAsR {
319
+ right: 15px;
350
320
  }
351
321
 
352
- .button-module__icon-chain___1pvWT {
353
- color: var(--color-neutral-60);
354
- float: left;
355
- font-size: 1.4rem;
356
- margin: 0 10px 0 0;
322
+ .search-input-module__hidden___z07GX {
323
+ display: none !important;
357
324
  }
358
325
 
359
- .button-module__add___1fbPS:hover .button-module__icon-add___2X7fc,
360
- .button-module__add-url___1e6xE:hover .button-module__icon-chain___1pvWT {
361
- color: var(--color-surface);
326
+ .search-input-module__action___1GqGT {
327
+ flex-shrink: 1;
328
+ margin-left: var(--spacing-s);
362
329
  }
330
+ /* imported from required-indicator.module.css */
363
331
 
364
- /* Base of switch buttons */
332
+ .required-indicator-module__colored____YUFm {
333
+ color: var(--color-warning);
334
+ }
365
335
 
366
- .button-module__switch___2bt5z {
367
- background: var(--color-surface);
368
- border: 1px var(--color-neutral) solid;
369
- color: var(--color-solid);
370
- font-weight: 100;
371
- position: relative;
336
+ .required-indicator-module__indicatorAsterisk___3lEdX {
337
+ font-style: normal;
338
+ margin-left: 2px;
372
339
  }
340
+ /* imported from selectable-field-search-input.module.css */
373
341
 
374
- .button-module__switch___2bt5z .button-module__icon___wuw4Z {
375
- color: var(--color-neutral-60);
342
+ .selectable-field-search-input-module__container___z2ltR {
343
+ width: 100%;
344
+ position: relative;
345
+ display: flex;
346
+ z-index: 3;
347
+ max-width: var(--constraint-15);
376
348
  }
377
349
 
378
- .button-module__switch___2bt5z:disabled {
379
- color: var(--color-neutral-60);
380
- border-color: var(--color-neutral);
350
+ .selectable-field-search-input-module__search-mode-menu___Od6Le {
351
+ border-radius: var(--border-radius-6);
352
+ border: 1px solid var(--color-primary);
353
+ margin-top: 2px;
354
+ position: absolute;
381
355
  }
356
+ /* imported from validated-input.module.css */
382
357
 
383
- .button-module__switch___2bt5z:hover {
384
- color: var(--color-surface);
385
- border-color: var(--color-info);
386
- background: var(--color-info);
358
+ .validated-input-module__invalid___380EL {
359
+ /* this needs !important because react-select has a :focus style that
360
+ stops the border colour being set unless the element is blurred */
361
+ border-color: var(--color-error) !important;
387
362
  }
388
363
 
389
- .button-module__switch___2bt5z:hover .button-module__icon___wuw4Z {
390
- color: var(--color-surface);
364
+ .validated-input-module__container___3L2KB {
365
+ display: inline;
391
366
  }
367
+ /* imported from multi-value-search-input.module.css */
392
368
 
393
- .button-module__switch--active___1s4ZM {
369
+ .multi-value-search-input-module__container___2u64d {
370
+ position: relative;
394
371
  }
395
372
 
396
- .button-module__switch___2bt5z:disabled {
397
- background: transparent;
398
- color: var(--color-neutral-60);
373
+ .multi-value-search-input-module__searchInput___363nj input {
374
+ border-color: var(--border-color-for-input);
399
375
  }
400
376
 
401
- .button-module__switch___2bt5z:disabled .button-module__icon___wuw4Z {
402
- color: var(--color-neutral-60);
377
+ .multi-value-search-input-module__searchInput___363nj input::placeholder {
378
+ color: var(--font-color-for-input-when-disabled);
403
379
  }
404
380
 
405
- .button-module__switch___2bt5z:disabled,
406
- .button-module__switch--active___1s4ZM:disabled {
407
- opacity: 1; /* exception for disabled switch button */
408
- user-select: none;
381
+ .multi-value-search-input-module__submittingTip___2339U {
382
+ margin-top: var(--spacing-xs);
383
+ background: var(--background-color-for-input);
384
+ border: solid 1px var(--border-color-for-input-when-focused);
385
+ border-radius: var(--border-radius-for-input);
386
+ position: relative;
409
387
  cursor: default;
410
388
  }
411
389
 
412
- .button-module__switch--active___1s4ZM:disabled .button-module__icon___wuw4Z,
413
- .button-module__switch--active___1s4ZM .button-module__icon___wuw4Z {
414
- color: var(--color-info);
390
+ .multi-value-search-input-module__submitting-tip-single___1LcNy {
391
+ padding: var(--spacing-s);
392
+ color: var(--font-color-for-input-when-disabled);
415
393
  }
416
394
 
417
- .button-module__switch--active___1s4ZM:disabled {
418
- color: var(--color-info);
419
- border-color: var(--color-info);
395
+ .multi-value-search-input-module__submitting-tip-content___IyuVb {
396
+ padding: var(--spacing-s);
420
397
  }
421
398
 
422
- /* Switch type squared */
423
-
424
- .button-module__switch-squared___QnrOG {
425
- padding: 4.5px 15px 4.5px 40px;
399
+ .multi-value-search-input-module__submitting-tip-content-separate___3Y_CI {
400
+ padding-top: var(--spacing-s);
426
401
  }
427
402
 
428
- .button-module__switch-squared--active___2ZbEC {
403
+ .multi-value-search-input-module__submitting-tip-content-hoverable___2TK6S:hover {
404
+ background-color: var(--color-neutral-95);
405
+ border-radius: var(--border-radius-for-input);
429
406
  }
430
407
 
431
- /* Switch type rounded */
432
-
433
- /* When the button has no text but icon */
408
+ .multi-value-search-input-module__submitting-tip-content-separate-hoverable___3VUnV:hover {
409
+ background-color: var(--color-neutral-95);
410
+ border-bottom-left-radius: var(--border-radius-for-input);
411
+ border-bottom-right-radius: var(--border-radius-for-input);
412
+ }
413
+ /* imported from numeric-format-input.module.css */
434
414
 
435
- .button-module__switch-rounded___1CBs_ {
436
- padding: 0;
437
- border-width: 1px;
438
- width: 36px;
439
- height: 36px;
440
- border-radius: 36px;
415
+ .numeric-format-input-module__invalid___3LcyE {
416
+ /* this needs !important because react-select has a :focus style that
417
+ stops the border colour being set unless the element is blurred */
418
+ border-color: var(--color-error) !important;
419
+ border: 1px solid;
441
420
  }
442
421
 
443
- .button-module__switch-rounded--active___2Ckga {
422
+ .numeric-format-input-module__disabled___hb6h4 {
423
+ cursor: not-allowed;
444
424
  }
425
+ /* imported from throttled-field.module.css */
445
426
 
446
- .button-module__switch-rounded___1CBs_ .button-module__switch-label___2FAdy {
447
- display: none;
427
+ .throttled-field-module__size___324jx {
428
+ width: 100%;
448
429
  }
449
430
 
450
- /* States */
431
+ .throttled-field-module__size___324jx {
432
+ min-height: var(--height-for-input);
433
+ }
451
434
 
452
- .button-module__cancel___1-jYL:hover {
453
- border-color: var(--color-primary);
454
- color: var(--color-primary);
435
+ .throttled-field-module__input-text___3zFFp {
436
+ transition: 0.2s ease;
437
+ border-radius: 6px;
438
+ border-style: solid;
439
+ border-width: 1px;
440
+ color: var(--color-solid);
441
+ font-weight: 500;
442
+ font-size: 1rem;
443
+ font-family: 'Open Sans', sans-serif !important;
444
+ padding: 7.5px 10px;
445
+ outline: none;
446
+ box-shadow: none;
447
+ appearance: none;
455
448
  }
456
449
 
457
- .button-module__confirm___-W92x:hover {
458
- background: var(--color-primary-25);
450
+ .throttled-field-module__input-secondary___cFo9e {
451
+ background-color: var(--color-neutral-95);
452
+ border-color: var(--color-surface);
453
+ width: 100%;
459
454
  }
460
455
 
461
- .button-module__add___1fbPS:hover {
462
- background: var(--color-primary);
463
- border-color: var(--color-primary);
464
- color: var(--color-surface);
456
+ .throttled-field-module__input-primary___26G3R {
457
+ border-color: var(--color-neutral);
458
+ background-color: var(--color-surface);
465
459
  }
466
460
 
467
- /* Variations */
461
+ .throttled-field-module__textarea___3ZNEs {
462
+ width: 100%;
463
+ min-height: 36px;
464
+ resize: vertical;
465
+ }
468
466
 
469
- .button-module__disabled___2Azpu {
470
- pointer-events: none;
471
- opacity: 0.5;
467
+ .throttled-field-module__textarea-primary___24Wwt {
468
+ border-color: var(--color-neutral);
469
+ background-color: var(--color-surface);
472
470
  }
473
471
 
474
- .button-module__full___264Zw {
472
+ .throttled-field-module__textarea-secondary___2rmFG {
473
+ background-color: var(--color-neutral-95);
474
+ border-color: var(--color-surface);
475
475
  width: 100%;
476
476
  }
477
477
 
478
- .button-module__alt___Z6PWx {
479
- color: var(--color-surface);
480
- border-radius: 20px;
481
- border: 2px var(--color-surface) solid;
482
- padding-left: 30px;
483
- padding-right: 30px;
478
+ .throttled-field-module__invalid___1yZLW {
479
+ /* this needs !important because react-select has a :focus style that
480
+ stops the border colour being set unless the element is blurred */
481
+ border-color: var(--color-error) !important;
482
+ border: 1px solid;
484
483
  }
485
484
 
486
- .button-module__confirm-alt___2Zcqz {
487
- border-color: transparent;
485
+ .throttled-field-module__disabled___qVj79 {
486
+ cursor: not-allowed;
487
+ background-color: var(--color-accent-98);
488
+ color: var(--color-solid);
489
+ opacity: 1; /* fix for mobile safari */
488
490
  }
489
491
 
490
- .button-module__cancel-alt___u5EAw {
491
- background: none;
492
+ .throttled-field-module__granular___2LXJf {
493
+ border-top-left-radius: 0;
494
+ border-bottom-left-radius: 0;
495
+ margin-left: 0;
492
496
  }
497
+ /* imported from label-range.module.css */
493
498
 
494
- .button-module__save-alt___6iHMF {
495
- border-color: transparent;
499
+ .label-range-module__label___3Tb0p {
500
+ font-size: 0.9rem;
501
+ font-weight: bold;
496
502
  }
503
+ /* imported from centered-loading-spinner.module.css */
497
504
 
498
- /* Add Button */
499
-
500
- .button-module__add-button___1f093 {
501
- min-height: 32px;
505
+ .centered-loading-spinner-module__loading-container___3_9-h {
506
+ height: 100%;
507
+ display: flex;
508
+ flex-grow: 1;
509
+ align-items: center;
510
+ justify-content: center;
502
511
  }
503
512
  /* imported from divider.module.css */
504
513
 
@@ -518,15 +527,6 @@
518
527
  .divider-module__divider-dashed___2Em8A {
519
528
  border-style: dashed;
520
529
  }
521
- /* imported from centered-loading-spinner.module.css */
522
-
523
- .centered-loading-spinner-module__loading-container___3_9-h {
524
- height: 100%;
525
- display: flex;
526
- flex-grow: 1;
527
- align-items: center;
528
- justify-content: center;
529
- }
530
530
  /* imported from reference-search.module.css */
531
531
 
532
532
  .reference-search-module__container___3-iK3 {