@transferwise/neptune-css 14.28.2 → 14.29.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.
Files changed (44) hide show
  1. package/dist/css/accordion.css +24 -46
  2. package/dist/css/alerts.css +56 -124
  3. package/dist/css/badge.css +20 -30
  4. package/dist/css/breadcrumbs.css +6 -4
  5. package/dist/css/button-groups.css +116 -254
  6. package/dist/css/buttons.css +51 -90
  7. package/dist/css/circles.css +38 -76
  8. package/dist/css/close.css +1 -4
  9. package/dist/css/column-layout.css +38 -60
  10. package/dist/css/currency-flags.css +4 -17
  11. package/dist/css/decision.css +14 -12
  12. package/dist/css/dropdowns.css +59 -210
  13. package/dist/css/droppable.css +43 -38
  14. package/dist/css/flex.css +40 -136
  15. package/dist/css/footer.css +15 -14
  16. package/dist/css/grid.css +383 -1430
  17. package/dist/css/input-groups.css +254 -542
  18. package/dist/css/link-callout.css +2 -8
  19. package/dist/css/list-group.css +57 -92
  20. package/dist/css/loaders.css +11 -11
  21. package/dist/css/media.css +10 -34
  22. package/dist/css/modals.css +49 -59
  23. package/dist/css/navbar.css +372 -812
  24. package/dist/css/navs.css +59 -124
  25. package/dist/css/neptune-addons.css +687 -1234
  26. package/dist/css/neptune-core.css +123 -229
  27. package/dist/css/neptune-social-media.css +9 -33
  28. package/dist/css/neptune.css +3039 -6483
  29. package/dist/css/panels.css +143 -243
  30. package/dist/css/popovers.css +114 -295
  31. package/dist/css/process.css +64 -77
  32. package/dist/css/progress-bars.css +13 -19
  33. package/dist/css/select.css +21 -53
  34. package/dist/css/sequences.css +99 -219
  35. package/dist/css/table.css +48 -43
  36. package/dist/css/tick.css +10 -10
  37. package/dist/css/tooltip.css +49 -82
  38. package/dist/css/utilities.css +12 -40
  39. package/dist/css/wells.css +16 -16
  40. package/package.json +2 -2
  41. package/src/less/addons/_spacing-utilities.less +4 -4
  42. package/src/less/mixins/_logical-properties-IE-friendly.less +1 -0
  43. package/src/less/mixins/_logical-properties-modern-browsers.less +80 -41
  44. package/src/less/mixins/_logical-properties.less +3 -3
@@ -1,24 +1,24 @@
1
1
  .btn-sm {
2
- height: 32px;
2
+ block-size: 32px;
3
3
  }
4
4
  form {
5
- margin-bottom: 0;
5
+ margin-block-end: 0;
6
6
  }
7
7
  fieldset {
8
8
  padding: 0;
9
9
  margin: 0;
10
10
  border: 0;
11
- min-width: 0;
11
+ min-inline-size: 0;
12
12
  }
13
13
  legend {
14
14
  display: block;
15
- width: 100%;
15
+ inline-size: 100%;
16
16
  }
17
17
  label {
18
18
  display: inline-block;
19
- max-width: 100%;
20
- margin-bottom: 4px;
21
- margin-bottom: var(--size-4);
19
+ max-inline-size: 100%;
20
+ margin-block-end: 4px;
21
+ margin-block-end: var(--size-4);
22
22
  }
23
23
  label,
24
24
  .secondary {
@@ -45,8 +45,9 @@ input[type='number']::-webkit-inner-spin-button {
45
45
  }
46
46
  input[type='radio'],
47
47
  input[type='checkbox'] {
48
- margin: 4px 0 0;
49
- margin-top: 1px;
48
+ margin-block: 4px 0;
49
+ margin-inline: 0;
50
+ margin-block-start: 1px;
50
51
  line-height: normal;
51
52
  }
52
53
  input[type='file'] {
@@ -54,11 +55,11 @@ input[type='file'] {
54
55
  }
55
56
  input[type='range'] {
56
57
  display: block;
57
- width: 100%;
58
+ inline-size: 100%;
58
59
  }
59
60
  select[multiple],
60
61
  select[size] {
61
- height: auto;
62
+ block-size: auto;
62
63
  }
63
64
  input[type='file']:focus,
64
65
  input[type='radio']:focus,
@@ -68,7 +69,7 @@ input[type='checkbox']:focus {
68
69
  }
69
70
  output {
70
71
  display: block;
71
- padding-top: 9px;
72
+ padding-block-start: 9px;
72
73
  font-size: 1rem;
73
74
  font-size: var(--font-size-16);
74
75
  line-height: 1.2;
@@ -78,7 +79,7 @@ output {
78
79
  }
79
80
  .form-control {
80
81
  display: block;
81
- width: 100%;
82
+ inline-size: 100%;
82
83
  color: #37517e;
83
84
  color: var(--color-content-primary);
84
85
  background-color: #ffffff;
@@ -87,7 +88,7 @@ output {
87
88
  border: 1px solid #c9cbce;
88
89
  border: 1px solid var(--color-interactive-secondary);
89
90
  transition: border-color ease-in-out 0.15s;
90
- min-height: var(--input-height-base);
91
+ min-block-size: var(--input-height-base);
91
92
  padding: var(--input-padding);
92
93
  border-radius: 3px;
93
94
  font-weight: 400;
@@ -99,11 +100,11 @@ output {
99
100
  background-clip: padding-box;
100
101
  }
101
102
  select.form-control {
102
- min-height: var(--input-height-base);
103
+ min-block-size: var(--input-height-base);
103
104
  }
104
105
  textarea.form-control,
105
106
  select[multiple].form-control {
106
- height: auto;
107
+ block-size: auto;
107
108
  }
108
109
  .form-control:not(.disabled):not(:disabled):focus {
109
110
  border-color: #0081ba;
@@ -119,7 +120,7 @@ select[multiple].form-control {
119
120
  color: var(--color-content-tertiary);
120
121
  }
121
122
  textarea.form-control {
122
- height: 144px;
123
+ block-size: 144px;
123
124
  }
124
125
  .form-control + .text-muted,
125
126
  .form-control + .text-primary,
@@ -129,7 +130,7 @@ textarea.form-control {
129
130
  .form-control + .text-warning,
130
131
  .form-control + .text-negative,
131
132
  .form-control + .text-danger {
132
- margin-top: 8px;
133
+ margin-block-start: 8px;
133
134
  }
134
135
  .form-control:focus {
135
136
  border-color: #0081ba;
@@ -181,10 +182,10 @@ input[type='search'] {
181
182
  }
182
183
  }
183
184
  .form-group {
184
- margin-bottom: 24px;
185
+ margin-block-end: 24px;
185
186
  }
186
187
  .form-group label {
187
- margin-bottom: 2px;
188
+ margin-block-end: 2px;
188
189
  }
189
190
  .form-group:focus-within .control-label,
190
191
  .form-group:focus-within > label {
@@ -192,56 +193,42 @@ input[type='search'] {
192
193
  color: var(--color-content-primary);
193
194
  }
194
195
  .row-equal-height > [class*='col-'] > .form-group {
195
- width: 100%;
196
+ inline-size: 100%;
196
197
  }
197
198
  .radio,
198
199
  .checkbox {
199
200
  position: relative;
200
201
  display: block;
201
- margin-top: 0;
202
+ margin-block-start: 0;
202
203
  }
203
204
  .radio label,
204
205
  .checkbox label {
205
- min-height: var(--input-height-base);
206
- margin-bottom: 0;
206
+ min-block-size: var(--input-height-base);
207
+ margin-block-end: 0;
207
208
  cursor: pointer;
208
209
  }
209
210
  .radio + .radio,
210
211
  .checkbox + .checkbox {
211
- margin-top: 12px;
212
+ margin-block-start: 12px;
212
213
  }
213
214
  .radio input[type='radio'],
214
215
  .radio-inline input[type='radio'],
215
216
  .checkbox input[type='checkbox'],
216
217
  .checkbox-inline input[type='checkbox'] {
217
218
  position: absolute;
218
- margin-left: -20px;
219
- margin-top: 4px \9;
220
- }
221
- [dir="rtl"] .radio input[type='radio'],
222
- [dir="rtl"] .radio-inline input[type='radio'],
223
- [dir="rtl"] .checkbox input[type='checkbox'],
224
- [dir="rtl"] .checkbox-inline input[type='checkbox'] {
225
- margin-right: -20px;
226
- margin-left: 0;
227
- margin-left: initial;
219
+ margin-inline-start: -20px;
220
+ margin-block-start: 4px \9;
228
221
  }
229
222
  .radio-inline,
230
223
  .checkbox-inline {
231
224
  position: relative;
232
225
  display: inline-block;
233
- padding-left: 20px;
234
- margin-bottom: 0;
226
+ padding-inline-start: 20px;
227
+ margin-block-end: 0;
235
228
  vertical-align: middle;
236
229
  font-weight: normal;
237
230
  cursor: pointer;
238
231
  }
239
- [dir="rtl"] .radio-inline,
240
- [dir="rtl"] .checkbox-inline {
241
- padding-right: 20px;
242
- padding-left: 0;
243
- padding-left: initial;
244
- }
245
232
  .radio-inline.disabled,
246
233
  .checkbox-inline.disabled,
247
234
  fieldset[disabled] .radio-inline,
@@ -250,14 +237,8 @@ fieldset[disabled] .checkbox-inline {
250
237
  }
251
238
  .radio-inline + .radio-inline,
252
239
  .checkbox-inline + .checkbox-inline {
253
- margin-top: 0;
254
- margin-left: 10px;
255
- }
256
- [dir="rtl"] .radio-inline + .radio-inline,
257
- [dir="rtl"] .checkbox-inline + .checkbox-inline {
258
- margin-right: 10px;
259
- margin-left: 0;
260
- margin-left: initial;
240
+ margin-block-start: 0;
241
+ margin-inline-start: 10px;
261
242
  }
262
243
  input[type='radio'][disabled],
263
244
  input[type='checkbox'][disabled],
@@ -277,9 +258,9 @@ fieldset[disabled] .checkbox label {
277
258
  cursor: not-allowed;
278
259
  }
279
260
  .form-control-static {
280
- margin-bottom: 0;
281
- min-height: calc(1.2 * 2);
282
- min-height: calc(var(--line-height-control) * 2);
261
+ margin-block-end: 0;
262
+ min-block-size: calc(1.2 * 2);
263
+ min-block-size: calc(var(--line-height-control) * 2);
283
264
  color: #5d7079;
284
265
  color: var(--color-content-secondary);
285
266
  background-color: rgba(134,167,189,0.10196);
@@ -291,23 +272,11 @@ fieldset[disabled] .checkbox label {
291
272
  }
292
273
  .form-control-static.input-lg,
293
274
  .form-control-static.input-sm {
294
- padding-left: 0;
295
- padding-right: 0;
296
- }
297
- [dir="rtl"] .form-control-static.input-lg,
298
- [dir="rtl"] .form-control-static.input-sm {
299
- padding-right: 0;
300
- padding-left: 0;
301
- padding-left: initial;
302
- }
303
- [dir="rtl"] .form-control-static.input-lg,
304
- [dir="rtl"] .form-control-static.input-sm {
305
- padding-left: 0;
306
- padding-right: 0;
307
- padding-right: initial;
275
+ padding-inline-start: 0;
276
+ padding-inline-end: 0;
308
277
  }
309
278
  .input-sm {
310
- min-height: 32px;
279
+ min-block-size: 32px;
311
280
  padding: var(--input-padding-small);
312
281
  border-radius: 3px;
313
282
  font-size: 14px;
@@ -320,15 +289,15 @@ fieldset[disabled] .checkbox label {
320
289
  font-weight: var(--font-weight-regular);
321
290
  }
322
291
  select.input-sm {
323
- min-height: 32px;
292
+ min-block-size: 32px;
324
293
  }
325
294
  textarea.input-sm,
326
295
  select[multiple].input-sm {
327
- height: auto;
296
+ block-size: auto;
328
297
  }
329
298
  .form-group-sm .form-control,
330
299
  .navbar .form-control {
331
- height: 32px;
300
+ block-size: 32px;
332
301
  padding: var(--input-padding-small);
333
302
  font-size: 0.875rem;
334
303
  font-size: var(--font-size-14);
@@ -337,27 +306,27 @@ select[multiple].input-sm {
337
306
  }
338
307
  .form-group-sm select.form-control,
339
308
  .navbar select.form-control {
340
- height: 32px;
309
+ block-size: 32px;
341
310
  line-height: 32px;
342
311
  }
343
312
  .form-group-sm textarea.form-control,
344
313
  .navbar textarea.form-control,
345
314
  .form-group-sm select[multiple].form-control,
346
315
  .navbar select[multiple].form-control {
347
- height: auto;
316
+ block-size: auto;
348
317
  }
349
318
  .form-group-sm .form-control-static,
350
319
  .navbar .form-control-static {
351
- height: 32px;
352
- min-height: calc(1.2 + 14px);
353
- min-height: calc(var(--line-height-control) + 14px);
320
+ block-size: 32px;
321
+ min-block-size: calc(1.2 + 14px);
322
+ min-block-size: calc(var(--line-height-control) + 14px);
354
323
  padding: var(--input-padding-small);
355
324
  font-size: 0.875rem;
356
325
  font-size: var(--font-size-14);
357
326
  line-height: 24px;
358
327
  }
359
328
  .input-lg {
360
- min-height: var(--input-height-large);
329
+ min-block-size: var(--input-height-large);
361
330
  padding: var(--input-padding-large);
362
331
  border-radius: 3px;
363
332
  font-weight: 400;
@@ -368,11 +337,11 @@ select[multiple].input-sm {
368
337
  letter-spacing: -0.011em;
369
338
  }
370
339
  select.input-lg {
371
- min-height: var(--input-height-large);
340
+ min-block-size: var(--input-height-large);
372
341
  }
373
342
  textarea.input-lg,
374
343
  select[multiple].input-lg {
375
- height: auto;
344
+ block-size: auto;
376
345
  }
377
346
  .form-group-lg {
378
347
  position: relative;
@@ -380,9 +349,10 @@ select[multiple].input-lg {
380
349
  .form-group-lg .input-lg,
381
350
  .form-group-lg .input-group-lg > .form-control,
382
351
  .form-group-lg .input-group-lg > .input-group-addon {
383
- height: var(--input-height-large);
384
- padding: calc(4px + 24px) 12px 4px;
385
- padding: calc(4px + var(--size-24)) 12px 4px;
352
+ block-size: var(--input-height-large);
353
+ padding-block: calc(4px + 24px) 4px;
354
+ padding-block: calc(4px + var(--size-24)) 4px;
355
+ padding-inline: 12px;
386
356
  font-size: 22px;
387
357
  line-height: 32px;
388
358
  }
@@ -391,66 +361,51 @@ select[multiple].input-lg {
391
361
  }
392
362
  .form-group-lg textarea.form-control,
393
363
  .form-group-lg select[multiple].form-control {
394
- height: auto;
364
+ block-size: auto;
395
365
  }
396
366
  .form-group-lg .form-control-static {
397
- height: var(--input-height-large);
398
- min-height: calc(1.2 + 22px);
399
- min-height: calc(var(--line-height-control) + 22px);
367
+ block-size: var(--input-height-large);
368
+ min-block-size: calc(1.2 + 22px);
369
+ min-block-size: calc(var(--line-height-control) + 22px);
400
370
  padding: var(--input-padding-large);
401
371
  font-size: 22px;
402
372
  line-height: 32px;
403
373
  }
404
374
  .form-group-lg .control-label {
405
375
  position: absolute;
406
- top: 12px;
407
- left: 14px;
408
- margin-bottom: 0;
376
+ inset-block-start: 12px;
377
+ inset-inline-start: 14px;
378
+ margin-block-end: 0;
409
379
  z-index: 1;
410
380
  }
411
- [dir="rtl"] .form-group-lg .control-label {
412
- right: 14px;
413
- left: auto;
414
- left: initial;
415
- }
416
381
  .has-feedback {
417
382
  position: relative;
418
383
  }
419
384
  .has-feedback .form-control {
420
- padding-right: var(--input-height-base);
421
- }
422
- [dir="rtl"] .has-feedback .form-control {
423
- padding-left: var(--input-height-base);
424
- padding-right: 0;
425
- padding-right: initial;
385
+ padding-inline-end: var(--input-height-base);
426
386
  }
427
387
  .form-control-feedback {
428
388
  position: absolute;
429
- top: 0;
430
- right: 0;
389
+ inset-block-start: 0;
390
+ inset-inline-end: 0;
431
391
  z-index: 2;
432
392
  display: block;
433
- width: 48px;
434
- height: 48px;
393
+ inline-size: 48px;
394
+ block-size: 48px;
435
395
  text-align: center;
436
396
  pointer-events: none;
437
397
  }
438
- [dir="rtl"] .form-control-feedback {
439
- left: 0;
440
- right: auto;
441
- right: initial;
442
- }
443
398
  .input-lg + .form-control-feedback,
444
399
  .input-group-lg + .form-control-feedback,
445
400
  .form-group-lg .form-control + .form-control-feedback {
446
- width: var(--input-height-large);
447
- height: var(--input-height-large);
401
+ inline-size: var(--input-height-large);
402
+ block-size: var(--input-height-large);
448
403
  }
449
404
  .input-sm + .form-control-feedback,
450
405
  .input-group-sm + .form-control-feedback,
451
406
  .form-group-sm .form-control + .form-control-feedback {
452
- width: 32px;
453
- height: 32px;
407
+ inline-size: 32px;
408
+ block-size: 32px;
454
409
  }
455
410
  .focus .control-label,
456
411
  .has-focus .control-label {
@@ -469,13 +424,14 @@ select[multiple].input-lg {
469
424
  }
470
425
  .help-block,
471
426
  .error-messages {
472
- margin-top: 12px;
473
- margin-bottom: 4px;
427
+ margin-block-start: 12px;
428
+ margin-block-end: 4px;
474
429
  border-width: 0;
475
430
  border-style: solid;
476
431
  border-radius: 10px;
477
432
  border-radius: var(--radius-small);
478
- padding: 4px 16px 3px;
433
+ padding-block: 4px 3px;
434
+ padding-inline: 16px;
479
435
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
480
436
  }
481
437
  .help-block a,
@@ -496,67 +452,32 @@ select[multiple].input-lg {
496
452
  content: " ";
497
453
  position: absolute;
498
454
  display: block;
499
- width: 10px;
500
- height: 10px;
501
- left: 20px;
502
- top: -5px;
455
+ inline-size: 10px;
456
+ block-size: 10px;
457
+ inset-inline-start: 20px;
458
+ inset-block-start: -5px;
503
459
  transform: rotate(45deg);
504
460
  background-color: inherit;
505
461
  }
506
- [dir="rtl"] .help-block::before {
507
- right: 20px;
508
- left: auto;
509
- left: initial;
510
- }
511
462
  .help-block.arrow-center::before {
512
- left: 50%;
513
- margin-left: -5px;
514
- }
515
- [dir="rtl"] .help-block.arrow-center::before {
516
- right: 50%;
517
- left: auto;
518
- left: initial;
519
- }
520
- [dir="rtl"] .help-block.arrow-center::before {
521
- margin-right: -5px;
522
- margin-left: 0;
523
- margin-left: initial;
463
+ inset-inline-start: 50%;
464
+ margin-inline-start: -5px;
524
465
  }
525
466
  .help-block.arrow-top::before {
526
- top: -5px;
527
- bottom: auto;
467
+ inset-block-start: -5px;
468
+ inset-block-end: auto;
528
469
  }
529
470
  .help-block.arrow-left::before {
530
- left: 20px;
531
- right: auto;
532
- }
533
- [dir="rtl"] .help-block.arrow-left::before {
534
- right: 20px;
535
- left: auto;
536
- left: initial;
537
- }
538
- [dir="rtl"] .help-block.arrow-left::before {
539
- left: auto;
540
- right: auto;
541
- right: initial;
471
+ inset-inline-start: 20px;
472
+ inset-inline-end: auto;
542
473
  }
543
474
  .help-block.arrow-right::before {
544
- left: auto;
545
- right: 20px;
546
- }
547
- [dir="rtl"] .help-block.arrow-right::before {
548
- right: auto;
549
- left: auto;
550
- left: initial;
551
- }
552
- [dir="rtl"] .help-block.arrow-right::before {
553
- left: 20px;
554
- right: auto;
555
- right: initial;
475
+ inset-inline-start: auto;
476
+ inset-inline-end: 20px;
556
477
  }
557
478
  .help-block.arrow-bottom::before {
558
- top: auto;
559
- bottom: -5px;
479
+ inset-block-start: auto;
480
+ inset-block-end: -5px;
560
481
  }
561
482
  .focus .alert,
562
483
  .has-focus .alert {
@@ -1320,21 +1241,21 @@ select[multiple].input-lg {
1320
1241
  border-color: var(--color-sentiment-negative);
1321
1242
  }
1322
1243
  .has-feedback label ~ .form-control-feedback {
1323
- top: 1.2;
1324
- top: var(--line-height-control);
1244
+ inset-block-start: 1.2;
1245
+ inset-block-start: var(--line-height-control);
1325
1246
  }
1326
1247
  .has-feedback label.sr-only ~ .form-control-feedback {
1327
- top: 0;
1248
+ inset-block-start: 0;
1328
1249
  }
1329
1250
  @media (min-width: 600px) {
1330
1251
  .form-inline .form-group {
1331
1252
  display: inline-block;
1332
- margin-bottom: 0;
1253
+ margin-block-end: 0;
1333
1254
  vertical-align: middle;
1334
1255
  }
1335
1256
  .form-inline .form-control {
1336
1257
  display: inline-block;
1337
- width: auto;
1258
+ inline-size: auto;
1338
1259
  vertical-align: middle;
1339
1260
  }
1340
1261
  .form-inline .form-control-static {
@@ -1347,100 +1268,78 @@ select[multiple].input-lg {
1347
1268
  .form-inline .input-group .input-group-addon,
1348
1269
  .form-inline .input-group .input-group-btn,
1349
1270
  .form-inline .input-group .form-control {
1350
- width: auto;
1271
+ inline-size: auto;
1351
1272
  }
1352
1273
  .form-inline .input-group > .form-control {
1353
- width: 100%;
1274
+ inline-size: 100%;
1354
1275
  }
1355
1276
  .form-inline .control-label {
1356
- margin-bottom: 0;
1277
+ margin-block-end: 0;
1357
1278
  vertical-align: calc(-2px);
1358
1279
  }
1359
1280
  .form-inline .radio,
1360
1281
  .form-inline .checkbox {
1361
1282
  display: inline-block;
1362
- margin-top: 0;
1363
- margin-bottom: 0;
1283
+ margin-block-start: 0;
1284
+ margin-block-end: 0;
1364
1285
  vertical-align: middle;
1365
1286
  }
1366
1287
  .form-inline .radio label,
1367
1288
  .form-inline .checkbox label {
1368
- padding-left: 0;
1369
- }
1370
- [dir="rtl"] .form-inline .radio label,
1371
- [dir="rtl"] .form-inline .checkbox label {
1372
- padding-right: 0;
1373
- padding-left: 0;
1374
- padding-left: initial;
1289
+ padding-inline-start: 0;
1375
1290
  }
1376
1291
  .form-inline .radio input[type='radio'],
1377
1292
  .form-inline .checkbox input[type='checkbox'] {
1378
1293
  position: relative;
1379
- margin-left: 0;
1380
- }
1381
- [dir="rtl"] .form-inline .radio input[type='radio'],
1382
- [dir="rtl"] .form-inline .checkbox input[type='checkbox'] {
1383
- margin-right: 0;
1384
- margin-left: 0;
1385
- margin-left: initial;
1294
+ margin-inline-start: 0;
1386
1295
  }
1387
1296
  .form-inline .has-feedback .form-control-feedback {
1388
- top: 0;
1297
+ inset-block-start: 0;
1389
1298
  }
1390
1299
  }
1391
1300
  .form-horizontal .radio,
1392
1301
  .form-horizontal .checkbox,
1393
1302
  .form-horizontal .radio-inline,
1394
1303
  .form-horizontal .checkbox-inline {
1395
- margin-top: 0;
1396
- margin-bottom: 0;
1397
- padding-top: 9px;
1304
+ margin-block-start: 0;
1305
+ margin-block-end: 0;
1306
+ padding-block-start: 9px;
1398
1307
  }
1399
1308
  .form-horizontal .radio,
1400
1309
  .form-horizontal .checkbox {
1401
- min-height: calc(1.2 + (8px + 1));
1402
- min-height: calc(var(--line-height-control) + (8px + 1));
1310
+ min-block-size: calc(1.2 + (8px + 1));
1311
+ min-block-size: calc(var(--line-height-control) + (8px + 1));
1403
1312
  }
1404
1313
  .form-horizontal .form-group {
1405
- margin-left: -12px;
1406
- margin-right: -12px;
1314
+ margin-inline-start: -12px;
1315
+ margin-inline-end: -12px;
1407
1316
  }
1408
1317
  [dir="rtl"] .form-horizontal .form-group {
1409
- margin-right: -12px;
1410
- margin-left: -12px;
1318
+ margin-inline-end: -12px;
1411
1319
  }
1412
1320
  [dir="rtl"] .form-horizontal .form-group {
1413
- margin-left: -12px;
1414
- margin-right: -12px;
1321
+ margin-inline-start: -12px;
1415
1322
  }
1416
1323
  @media (min-width: 600px) {
1417
1324
  .form-horizontal .control-label {
1418
- text-align: right;
1419
- margin-bottom: 0;
1420
- padding-top: 14px;
1421
- }
1422
- [dir="rtl"] .form-horizontal .control-label {
1423
- text-align: left;
1325
+ text-align: end;
1326
+ margin-block-end: 0;
1327
+ padding-block-start: 14px;
1424
1328
  }
1425
1329
  }
1426
1330
  .form-horizontal .has-feedback .form-control-feedback {
1427
- right: 12px;
1428
- }
1429
- [dir="rtl"] .form-horizontal .has-feedback .form-control-feedback {
1430
- left: 12px;
1431
- right: auto;
1432
- right: initial;
1331
+ inset-inline-end: 12px;
1433
1332
  }
1434
1333
  @media (min-width: 600px) {
1435
1334
  .form-horizontal .form-group-lg .control-label {
1436
- padding-top: 17px;
1335
+ padding-block-start: 17px;
1437
1336
  font-size: 1.25rem;
1438
1337
  font-size: var(--font-size-20);
1439
1338
  }
1440
1339
  }
1441
1340
  @media (min-width: 600px) {
1442
1341
  .form-horizontal .form-group-sm .control-label {
1443
- padding-top: 8px;
1342
+ padding-block-start: 8px;
1444
1343
  font-size: 0.875rem;
1445
1344
  font-size: var(--font-size-14);
1446
1345
  }
@@ -1453,13 +1352,7 @@ select[multiple].input-lg {
1453
1352
  .radio > label,
1454
1353
  .checkbox > label {
1455
1354
  position: relative;
1456
- padding-left: 48px;
1457
- }
1458
- [dir="rtl"] .radio > label,
1459
- [dir="rtl"] .checkbox > label {
1460
- padding-right: 48px;
1461
- padding-left: 0;
1462
- padding-left: initial;
1355
+ padding-inline-start: 48px;
1463
1356
  }
1464
1357
  .radio > label input[type="radio"],
1465
1358
  .checkbox > label input[type="radio"],
@@ -1467,24 +1360,16 @@ select[multiple].input-lg {
1467
1360
  .checkbox > label input[type="checkbox"] {
1468
1361
  display: block;
1469
1362
  position: absolute;
1470
- top: 13px;
1471
- left: 40px;
1472
- }
1473
- [dir="rtl"] .radio > label input[type="radio"],
1474
- [dir="rtl"] .checkbox > label input[type="radio"],
1475
- [dir="rtl"] .radio > label input[type="checkbox"],
1476
- [dir="rtl"] .checkbox > label input[type="checkbox"] {
1477
- right: 40px;
1478
- left: auto;
1479
- left: initial;
1363
+ inset-block-start: 13px;
1364
+ inset-inline-start: 40px;
1480
1365
  }
1481
1366
  .tw-checkbox-button {
1482
1367
  border: 1px solid #c9cbce;
1483
1368
  border: 1px solid var(--color-interactive-secondary);
1484
1369
  background: #ffffff;
1485
1370
  background: var(--color-background-screen);
1486
- width: 22px;
1487
- height: 22px;
1371
+ inline-size: 22px;
1372
+ block-size: 22px;
1488
1373
  border-radius: 3px;
1489
1374
  display: inline-block;
1490
1375
  padding: 0;
@@ -1499,8 +1384,8 @@ select[multiple].input-lg {
1499
1384
  }
1500
1385
  .tw-checkbox-button .tw-checkbox-check,
1501
1386
  .tw-checkbox-button .np-tw-checkbox-indeterminate {
1502
- width: 20px;
1503
- height: 20px;
1387
+ inline-size: 20px;
1388
+ block-size: 20px;
1504
1389
  margin: 0;
1505
1390
  display: none;
1506
1391
  color: #ffffff;
@@ -1629,8 +1514,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1629
1514
  background-color: var(--color-interactive-negative-active);
1630
1515
  }
1631
1516
  .tw-radio-button {
1632
- width: 24px;
1633
- height: 24px;
1517
+ inline-size: 24px;
1518
+ block-size: 24px;
1634
1519
  border-radius: 50%;
1635
1520
  border: 1px solid #c9cbce;
1636
1521
  border: 1px solid var(--color-interactive-secondary);
@@ -1647,14 +1532,14 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1647
1532
  box-shadow: inset 0 0 0 1px #c9cbce;
1648
1533
  box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
1649
1534
  position: relative;
1650
- top: 0;
1651
- left: 0;
1535
+ inset-block-start: 0;
1536
+ inset-inline-start: 0;
1652
1537
  }
1653
1538
  .tw-radio-button .tw-radio-check {
1654
1539
  border-radius: 50%;
1655
1540
  text-align: center;
1656
- width: 12px;
1657
- height: 12px;
1541
+ inline-size: 12px;
1542
+ block-size: 12px;
1658
1543
  display: block;
1659
1544
  opacity: 0;
1660
1545
  transition: all 0.15s ease-in-out;
@@ -1709,8 +1594,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1709
1594
  .np-theme-personal .tw-radio-button:checked .tw-radio-check,
1710
1595
  .np-theme-personal .tw-radio-button.checked .tw-radio-check {
1711
1596
  background-color: var(--color-interactive-primary);
1712
- max-height: 12px;
1713
- max-width: 12px;
1597
+ max-block-size: 12px;
1598
+ max-inline-size: 12px;
1714
1599
  }
1715
1600
  .radio.has-error .tw-radio-button,
1716
1601
  .tw-radio-button.has-error {
@@ -1726,23 +1611,13 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1726
1611
  }
1727
1612
  .radio .tw-radio-button {
1728
1613
  position: absolute;
1729
- left: 13px;
1730
- top: 11px;
1731
- }
1732
- [dir="rtl"] .radio .tw-radio-button {
1733
- right: 13px;
1734
- left: auto;
1735
- left: initial;
1614
+ inset-inline-start: 13px;
1615
+ inset-block-start: 11px;
1736
1616
  }
1737
1617
  .checkbox .tw-checkbox-button {
1738
1618
  position: absolute;
1739
- left: 14px;
1740
- top: 12px;
1741
- }
1742
- [dir="rtl"] .checkbox .tw-checkbox-button {
1743
- right: 14px;
1744
- left: auto;
1745
- left: initial;
1619
+ inset-inline-start: 14px;
1620
+ inset-block-start: 12px;
1746
1621
  }
1747
1622
  .form-inline .tw-checkbox-button,
1748
1623
  .form-inline .tw-radio-button {
@@ -1750,16 +1625,16 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1750
1625
  }
1751
1626
  .form-horizontal .checkbox,
1752
1627
  .form-horizontal .radio {
1753
- padding-top: 0;
1628
+ padding-block-start: 0;
1754
1629
  }
1755
1630
  .form-horizontal .checkbox > label,
1756
1631
  .form-horizontal .radio > label {
1757
- margin-bottom: 0;
1632
+ margin-block-end: 0;
1758
1633
  }
1759
1634
  .np-radio.radio,
1760
1635
  .np-checkbox.checkbox {
1761
- min-width: -moz-fit-content;
1762
- min-width: fit-content;
1636
+ min-inline-size: -moz-fit-content;
1637
+ min-inline-size: fit-content;
1763
1638
  }
1764
1639
  .np-radio.radio .np-radio-button,
1765
1640
  .np-checkbox.checkbox .np-radio-button,
@@ -1778,20 +1653,17 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1778
1653
  .np-checkbox.checkbox > label {
1779
1654
  display: flex;
1780
1655
  align-items: center;
1781
- padding: 8px 16px ;
1782
- padding: var(--size-8) var(--size-16) ;
1783
- }
1784
- [dir="rtl"] .np-radio.radio > label,
1785
- [dir="rtl"] .np-checkbox.checkbox > label {
1786
- padding: 8px 16px ;
1787
- padding: var(--size-8) var(--size-16) ;
1656
+ padding-block: 8px;
1657
+ padding-block: var(--size-8);
1658
+ padding-inline: 16px;
1659
+ padding-inline: var(--size-16);
1788
1660
  }
1789
1661
  .np-radio.radio > label .np-checkbox__text,
1790
1662
  .np-checkbox.checkbox > label .np-checkbox__text,
1791
1663
  .np-radio.radio > label .np-radio__text,
1792
1664
  .np-checkbox.checkbox > label .np-radio__text {
1793
1665
  display: block;
1794
- padding-top: 1px;
1666
+ padding-block-start: 1px;
1795
1667
  }
1796
1668
  :not(.np-theme-personal) .np-radio.radio > label .np-checkbox__text,
1797
1669
  :not(.np-theme-personal) .np-checkbox.checkbox > label .np-checkbox__text,
@@ -1803,7 +1675,7 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1803
1675
  font-size: var(--font-size-16);
1804
1676
  line-height: 1.25rem;
1805
1677
  line-height: var(--line-height-20);
1806
- padding-top: 3px;
1678
+ padding-block-start: 3px;
1807
1679
  }
1808
1680
  .np-theme-personal .np-radio.radio > label,
1809
1681
  .np-theme-personal .np-checkbox.checkbox > label {
@@ -1812,11 +1684,8 @@ input[type="checkbox"]:not(.disabled):not(:disabled):indeterminate:active + .tw-
1812
1684
  .np-radio .np-radio__avatar {
1813
1685
  pointer-events: none;
1814
1686
  }
1815
- [dir="rtl"] .input-group .input-group-btn + input {
1816
- border-right: 0 solid transparent;
1817
- }
1818
- html:not([dir="rtl"]) .input-group .input-group-btn + input {
1819
- border-left: 0 solid transparent;
1687
+ .input-group .input-group-btn + input {
1688
+ border-inline-start: 0 solid transparent;
1820
1689
  }
1821
1690
  .input-group-addon {
1822
1691
  color: #5d7079;
@@ -1829,9 +1698,9 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1829
1698
  line-height: 48px;
1830
1699
  }
1831
1700
  .label {
1832
- padding-top: 0.25em;
1701
+ padding-block-start: 0.25em;
1833
1702
  position: relative;
1834
- top: -3px;
1703
+ inset-block-start: -3px;
1835
1704
  }
1836
1705
  .label .label-default {
1837
1706
  color: #5d7079;
@@ -1845,83 +1714,60 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1845
1714
  font-size: var(--font-size-14);
1846
1715
  }
1847
1716
  .form-group .row {
1848
- margin-left: -6px;
1849
- margin-right: -6px;
1850
- }
1851
- [dir="rtl"] .form-group .row {
1852
- margin-right: -6px;
1853
- margin-left: 0;
1854
- margin-left: initial;
1855
- }
1856
- [dir="rtl"] .form-group .row {
1857
- margin-left: -6px;
1858
- margin-right: 0;
1859
- margin-right: initial;
1717
+ margin-inline-start: -6px;
1718
+ margin-inline-end: -6px;
1860
1719
  }
1861
1720
  .form-group .row [class*='col-'] {
1862
- padding-left: 6px;
1863
- padding-right: 6px;
1864
- }
1865
- [dir="rtl"] .form-group .row [class*='col-'] {
1866
- padding-right: 6px;
1867
- padding-left: 0;
1868
- padding-left: initial;
1869
- }
1870
- [dir="rtl"] .form-group .row [class*='col-'] {
1871
- padding-left: 6px;
1872
- padding-right: 0;
1873
- padding-right: initial;
1721
+ padding-inline-start: 6px;
1722
+ padding-inline-end: 6px;
1874
1723
  }
1875
1724
  @media (max-width: 599.98px) {
1876
1725
  .form-group .row [class*='col-sm-'] {
1877
- margin-bottom: 0;
1726
+ margin-block-end: 0;
1878
1727
  }
1879
1728
  .form-group .row [class*='col-sm-'] .btn-input {
1880
- margin-bottom: 12px;
1729
+ margin-block-end: 12px;
1881
1730
  }
1882
1731
  }
1883
1732
  @media (max-width: 839.98px) {
1884
1733
  .form-group .row [class*='col-md-'] {
1885
- margin-bottom: 0;
1734
+ margin-block-end: 0;
1886
1735
  }
1887
1736
  .form-group .row [class*='col-md-'] .form-control,
1888
1737
  .form-group .row [class*='col-md-'] .btn-input {
1889
- margin-bottom: 12px;
1738
+ margin-block-end: 12px;
1890
1739
  }
1891
1740
  }
1892
1741
  @media (max-width: 1159.98px) {
1893
1742
  .form-group .row [class*='col-lg-'] {
1894
- margin-bottom: 0;
1743
+ margin-block-end: 0;
1895
1744
  }
1896
1745
  .form-group .row [class*='col-lg-'] .form-control,
1897
1746
  .form-group .row [class*='col-lg-'] .btn-input {
1898
- margin-bottom: 12px;
1747
+ margin-block-end: 12px;
1899
1748
  }
1900
1749
  }
1901
1750
  @media (max-width: 1159.98px) {
1902
1751
  .form-group .row [class*='col-xl-'] {
1903
- margin-bottom: 0;
1752
+ margin-block-end: 0;
1904
1753
  }
1905
1754
  .form-group .row [class*='col-xl-'] .form-control,
1906
1755
  .form-group .row [class*='col-xl-'] .btn-input {
1907
- margin-bottom: 12px;
1756
+ margin-block-end: 12px;
1908
1757
  }
1909
1758
  }
1910
1759
  @media (min-width: 600px) {
1911
1760
  fieldset .form-group:nth-of-type(odd) {
1912
- clear: left;
1913
- }
1914
- [dir="rtl"] fieldset .form-group:nth-of-type(odd) {
1915
- clear: right;
1761
+ clear: inline-start;
1916
1762
  }
1917
1763
  }
1918
1764
  .checkbox > label,
1919
1765
  .radio > label {
1920
1766
  display: block;
1921
1767
  cursor: pointer;
1922
- padding-top: 12px;
1923
- padding-bottom: 10px;
1924
- padding-right: 16px;
1768
+ padding-block-start: 12px;
1769
+ padding-block-end: 10px;
1770
+ padding-inline-end: 16px;
1925
1771
  color: #37517e;
1926
1772
  color: var(--color-content-primary);
1927
1773
  background-color: #ffffff;
@@ -1931,12 +1777,6 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1931
1777
  border-radius: 3px;
1932
1778
  transition: border 0.15s ease-in-out, background-color 0.15s ease-in-out;
1933
1779
  }
1934
- [dir="rtl"] .checkbox > label,
1935
- [dir="rtl"] .radio > label {
1936
- padding-left: 16px;
1937
- padding-right: 0;
1938
- padding-right: initial;
1939
- }
1940
1780
  .np-theme-personal .checkbox > label,
1941
1781
  .np-theme-personal .radio > label {
1942
1782
  border-radius: 10px;
@@ -1977,8 +1817,8 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
1977
1817
  .radio.checkbox-lg > label,
1978
1818
  .checkbox.radio-lg > label,
1979
1819
  .radio.radio-lg > label {
1980
- min-height: 72px;
1981
- min-height: var(--size-72);
1820
+ min-block-size: 72px;
1821
+ min-block-size: var(--size-72);
1982
1822
  }
1983
1823
  .checkbox.checkbox-lg > label small,
1984
1824
  .radio.checkbox-lg > label small,
@@ -2012,22 +1852,17 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2012
1852
  content: " ";
2013
1853
  position: absolute;
2014
1854
  display: block;
2015
- width: 10px;
2016
- height: 10px;
2017
- left: 20px;
2018
- top: -5px;
1855
+ inline-size: 10px;
1856
+ block-size: 10px;
1857
+ inset-inline-start: 20px;
1858
+ inset-block-start: -5px;
2019
1859
  transform: rotate(45deg);
2020
1860
  background-color: inherit;
2021
1861
  }
2022
- [dir="rtl"] .error-messages::before {
2023
- right: 20px;
2024
- left: auto;
2025
- left: initial;
2026
- }
2027
1862
  .form-group .error-messages {
2028
1863
  border-radius: 3px;
2029
1864
  border-width: 0;
2030
- margin-top: 12px;
1865
+ margin-block-start: 12px;
2031
1866
  }
2032
1867
  .has-error .error-messages {
2033
1868
  display: block;
@@ -2104,7 +1939,7 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2104
1939
  line-height: 150%;
2105
1940
  letter-spacing: -0.011em;
2106
1941
  display: block;
2107
- width: 100%;
1942
+ inline-size: 100%;
2108
1943
  color: #768e9c;
2109
1944
  color: var(--color-content-tertiary);
2110
1945
  }
@@ -2236,11 +2071,11 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2236
2071
  background-color: initial !important;
2237
2072
  }
2238
2073
  .np-theme-personal .form-group label {
2239
- margin-bottom: 8px;
2240
- margin-bottom: var(--padding-x-small);
2074
+ margin-block-end: 8px;
2075
+ margin-block-end: var(--padding-x-small);
2241
2076
  }
2242
2077
  .np-theme-personal .form-group .np-upload-input label {
2243
- margin-bottom: 0;
2078
+ margin-block-end: 0;
2244
2079
  }
2245
2080
  .np-theme-personal .form-group .alert:before,
2246
2081
  .np-theme-personal .error-messages:before {
@@ -2250,16 +2085,17 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2250
2085
  .np-theme-personal .alert-detach {
2251
2086
  color: #5d7079;
2252
2087
  color: var(--color-content-secondary);
2253
- margin: 8px 0;
2254
- margin: var(--padding-x-small) 0;
2088
+ margin-block: 8px;
2089
+ margin-block: var(--padding-x-small);
2090
+ margin-inline: 0;
2255
2091
  padding: 0;
2256
2092
  background-color: transparent;
2257
2093
  background-color: initial;
2258
2094
  }
2259
2095
  .np-theme-personal .alert-detach .status-circle {
2260
- margin-top: 2px;
2261
- margin-right: 4px;
2262
- margin-right: var(--size-4);
2096
+ margin-block-start: 2px;
2097
+ margin-inline-end: 4px;
2098
+ margin-inline-end: var(--size-4);
2263
2099
  }
2264
2100
  .np-theme-personal .has-error .error-messages,
2265
2101
  .np-theme-personal .has-error .alert-detach.alert-danger {
@@ -2282,64 +2118,40 @@ html:not([dir="rtl"]) .input-group .input-group-btn + input {
2282
2118
  position: relative;
2283
2119
  display: table;
2284
2120
  border-collapse: separate;
2285
- width: 100%;
2121
+ inline-size: 100%;
2286
2122
  }
2287
2123
  .input-group[class*="col-"] {
2288
2124
  float: none;
2289
- padding-left: 0;
2290
- }
2291
- [dir="rtl"] .input-group[class*="col-"] {
2292
- padding-right: 0;
2293
- padding-left: 0;
2294
- padding-left: initial;
2125
+ padding-inline-start: 0;
2295
2126
  }
2296
2127
  .input-group .form-control {
2297
- float: left;
2298
- width: 100%;
2299
- margin-bottom: 0;
2128
+ float: inline-start;
2129
+ inline-size: 100%;
2130
+ margin-block-end: 0;
2300
2131
  border-color: #c9cbce;
2301
2132
  border-color: var(--color-interactive-secondary);
2302
2133
  }
2303
- [dir="rtl"] .input-group .form-control {
2304
- float: right;
2305
- }
2306
- [dir="rtl"] .input-group .form-control:not(:first-child) {
2307
- border-right: 0 ;
2308
- }
2309
- html:not([dir="rtl"]) .input-group .form-control:not(:first-child) {
2310
- border-left: 0 ;
2134
+ .input-group .form-control:not(:first-child) {
2135
+ border-inline-start: 0 ;
2311
2136
  }
2312
- [dir="rtl"] .input-group .form-control:not(:last-child) {
2313
- border-left: 0 ;
2314
- }
2315
- html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
2316
- border-right: 0 ;
2137
+ .input-group .form-control:not(:last-child) {
2138
+ border-inline-end: 0 ;
2317
2139
  }
2318
2140
  .input-group .input-group-addon button.np-btn {
2319
2141
  padding: 0;
2320
- min-height: 16px;
2142
+ min-block-size: 16px;
2321
2143
  border-radius: 50%;
2322
2144
  }
2323
2145
  .input-group .input-group-addon + .form-control {
2324
- padding-left: 0;
2325
- }
2326
- [dir="rtl"] .input-group .input-group-addon + .form-control {
2327
- padding-right: 0;
2328
- padding-left: 0;
2329
- padding-left: initial;
2146
+ padding-inline-start: 0;
2330
2147
  }
2331
2148
  .input-group .form-control + .input-group-addon {
2332
- padding-left: 0;
2333
- }
2334
- [dir="rtl"] .input-group .form-control + .input-group-addon {
2335
- padding-right: 0;
2336
- padding-left: 0;
2337
- padding-left: initial;
2149
+ padding-inline-start: 0;
2338
2150
  }
2339
2151
  .input-group-lg > .form-control,
2340
2152
  .input-group-lg > .input-group-addon,
2341
2153
  .input-group-lg > .input-group-btn .btn {
2342
- min-height: var(--input-height-large);
2154
+ min-block-size: var(--input-height-large);
2343
2155
  padding: var(--input-padding-large);
2344
2156
  border-radius: 3px;
2345
2157
  font-weight: 400;
@@ -2354,20 +2166,19 @@ html:not([dir="rtl"]) .input-group .form-control:not(:last-child) {
2354
2166
  line-height: 1.2;
2355
2167
  line-height: var(--line-height-title);
2356
2168
  letter-spacing: 0;
2357
- margin-bottom: 0;
2358
- margin-bottom: initial;
2169
+ margin-block-end: initial;
2359
2170
  font-size: 1.375rem;
2360
2171
  font-size: var(--font-size-22);
2361
2172
  font-weight: 600;
2362
2173
  font-weight: var(--font-weight-semi-bold);
2363
2174
  letter-spacing: -0.018em;
2364
2175
  line-height: 125%;
2365
- margin-bottom: 0;
2176
+ margin-block-end: 0;
2366
2177
  }
2367
2178
  select.input-group-lg > .form-control,
2368
2179
  select.input-group-lg > .input-group-addon,
2369
2180
  select.input-group-lg > .input-group-btn .btn {
2370
- min-height: var(--input-height-large);
2181
+ min-block-size: var(--input-height-large);
2371
2182
  }
2372
2183
  textarea.input-group-lg > .form-control,
2373
2184
  textarea.input-group-lg > .input-group-addon,
@@ -2375,7 +2186,7 @@ textarea.input-group-lg > .input-group-btn .btn,
2375
2186
  select[multiple].input-group-lg > .form-control,
2376
2187
  select[multiple].input-group-lg > .input-group-addon,
2377
2188
  select[multiple].input-group-lg > .input-group-btn .btn {
2378
- height: auto;
2189
+ block-size: auto;
2379
2190
  }
2380
2191
  @supports (hyphenate-limit-chars: 1) {
2381
2192
  .input-group-lg > .form-control,
@@ -2424,12 +2235,12 @@ select[multiple].input-group-lg > .input-group-btn .btn {
2424
2235
  .input-group-lg > .form-control + ol:not(.list-unstyled),
2425
2236
  .input-group-lg > .input-group-addon + ol:not(.list-unstyled),
2426
2237
  .input-group-lg > .input-group-btn .btn + ol:not(.list-unstyled) {
2427
- margin-top: 8px;
2428
- margin-top: var(--size-8);
2238
+ margin-block-start: 8px;
2239
+ margin-block-start: var(--size-8);
2429
2240
  }
2430
2241
  .input-group-sm > .form-control,
2431
2242
  .input-group-sm > .input-group-addon {
2432
- min-height: 32px;
2243
+ min-block-size: 32px;
2433
2244
  padding: var(--input-padding-small);
2434
2245
  border-radius: 3px;
2435
2246
  font-size: 14px;
@@ -2443,13 +2254,13 @@ select[multiple].input-group-lg > .input-group-btn .btn {
2443
2254
  }
2444
2255
  select.input-group-sm > .form-control,
2445
2256
  select.input-group-sm > .input-group-addon {
2446
- min-height: 32px;
2257
+ min-block-size: 32px;
2447
2258
  }
2448
2259
  textarea.input-group-sm > .form-control,
2449
2260
  textarea.input-group-sm > .input-group-addon,
2450
2261
  select[multiple].input-group-sm > .form-control,
2451
2262
  select[multiple].input-group-sm > .input-group-addon {
2452
- height: auto;
2263
+ block-size: auto;
2453
2264
  }
2454
2265
  .input-group-sm > .form-control .icon,
2455
2266
  .input-group-sm > .input-group-addon .icon {
@@ -2457,7 +2268,7 @@ select[multiple].input-group-sm > .input-group-addon {
2457
2268
  font-size: var(--font-size-20);
2458
2269
  }
2459
2270
  .input-group-sm > .input-group-btn > .btn {
2460
- height: 32px;
2271
+ block-size: 32px;
2461
2272
  }
2462
2273
  .input-group-sm > .input-group-addon {
2463
2274
  line-height: 22px;
@@ -2469,7 +2280,7 @@ select[multiple].input-group-sm > .input-group-addon {
2469
2280
  }
2470
2281
  .input-group-addon,
2471
2282
  .input-group-btn {
2472
- width: 1%;
2283
+ inline-size: 1%;
2473
2284
  white-space: nowrap;
2474
2285
  vertical-align: middle;
2475
2286
  }
@@ -2494,29 +2305,19 @@ select[multiple].input-group-sm > .input-group-addon {
2494
2305
  padding: var(--input-group-addon-lg-padding) !important;
2495
2306
  }
2496
2307
  .input-group-addon--search {
2497
- padding-right: calc(16px / 2);
2308
+ padding-inline-end: calc(16px / 2);
2498
2309
  }
2499
2310
  .input-group-addon input[type="radio"],
2500
2311
  .input-group-addon input[type="checkbox"] {
2501
- margin-top: 0;
2312
+ margin-block-start: 0;
2502
2313
  }
2503
2314
  .input-group-addon .icon {
2504
2315
  font-size: 24px;
2505
2316
  vertical-align: middle;
2506
2317
  display: inline-block;
2507
- margin-top: -2px;
2508
- margin-left: -4px;
2509
- margin-right: -5px;
2510
- }
2511
- [dir="rtl"] .input-group-addon .icon {
2512
- margin-right: -4px;
2513
- margin-left: 0;
2514
- margin-left: initial;
2515
- }
2516
- [dir="rtl"] .input-group-addon .icon {
2517
- margin-left: -5px;
2518
- margin-right: 0;
2519
- margin-right: initial;
2318
+ margin-block-start: -2px;
2319
+ margin-inline-start: -4px;
2320
+ margin-inline-end: -5px;
2520
2321
  }
2521
2322
  .input-group-addon a {
2522
2323
  -webkit-text-decoration: none;
@@ -2524,142 +2325,64 @@ select[multiple].input-group-sm > .input-group-addon {
2524
2325
  }
2525
2326
  .input-group-addon:empty {
2526
2327
  padding: 0 !important;
2527
- width: 3px;
2328
+ inline-size: 3px;
2528
2329
  }
2529
2330
  .form-group-lg .input-lg,
2530
2331
  .form-group-lg .input-group {
2531
- margin-bottom: 0;
2332
+ margin-block-end: 0;
2532
2333
  }
2533
2334
  .input-group .input-group-addon,
2534
2335
  .input-group .btn-input,
2535
2336
  .input-group .form-control {
2337
+ border-inline-start-width: 0;
2338
+ border-inline-end-width: 0;
2536
2339
  border-radius: 0;
2537
2340
  }
2538
- [dir="rtl"] .input-group .input-group-addon,
2539
- [dir="rtl"] .input-group .btn-input,
2540
- [dir="rtl"] .input-group .form-control {
2541
- border-right-width: 0;
2542
- }
2543
- html:not([dir="rtl"]) .input-group .input-group-addon,
2544
- html:not([dir="rtl"]) .input-group .btn-input,
2545
- html:not([dir="rtl"]) .input-group .form-control {
2546
- border-left-width: 0;
2547
- }
2548
- [dir="rtl"] .input-group .input-group-addon,
2549
- [dir="rtl"] .input-group .btn-input,
2550
- [dir="rtl"] .input-group .form-control {
2551
- border-left-width: 0;
2552
- }
2553
- html:not([dir="rtl"]) .input-group .input-group-addon,
2554
- html:not([dir="rtl"]) .input-group .btn-input,
2555
- html:not([dir="rtl"]) .input-group .form-control {
2556
- border-right-width: 0;
2557
- }
2558
2341
  .np-theme-personal .input-group .input-group-addon,
2559
2342
  .np-theme-personal .input-group .btn-input,
2560
2343
  .np-theme-personal .input-group .form-control {
2561
2344
  border-radius: 0;
2562
2345
  }
2563
- [dir="rtl"] .input-group .input-group-btn:first-child,
2564
- [dir="rtl"] .input-group .input-group-addon:first-child,
2565
- [dir="rtl"] .input-group .btn-input:first-child,
2566
- [dir="rtl"] .input-group .form-control:first-child {
2567
- border-right-width: 1px;
2568
- }
2569
- html:not([dir="rtl"]) .input-group .input-group-btn:first-child,
2570
- html:not([dir="rtl"]) .input-group .input-group-addon:first-child,
2571
- html:not([dir="rtl"]) .input-group .btn-input:first-child,
2572
- html:not([dir="rtl"]) .input-group .form-control:first-child {
2573
- border-left-width: 1px;
2574
- }
2575
- [dir="rtl"] .input-group .input-group-btn:first-child,
2576
- [dir="rtl"] .input-group .input-group-addon:first-child,
2577
- [dir="rtl"] .input-group .btn-input:first-child,
2578
- [dir="rtl"] .input-group .form-control:first-child {
2579
- border-bottom-right-radius: 3px;
2580
- border-top-right-radius: 3px;
2581
- }
2582
- html:not([dir="rtl"]) .input-group .input-group-btn:first-child,
2583
- html:not([dir="rtl"]) .input-group .input-group-addon:first-child,
2584
- html:not([dir="rtl"]) .input-group .btn-input:first-child,
2585
- html:not([dir="rtl"]) .input-group .form-control:first-child {
2586
- border-bottom-left-radius: 3px;
2587
- border-top-left-radius: 3px;
2588
- }
2589
- [dir="rtl"] .input-group .input-group-btn:last-child,
2590
- [dir="rtl"] .input-group .input-group-addon:last-child,
2591
- [dir="rtl"] .input-group .btn-input:last-child,
2592
- [dir="rtl"] .input-group .form-control:last-child {
2593
- border-left-width: 1px;
2594
- }
2595
- html:not([dir="rtl"]) .input-group .input-group-btn:last-child,
2596
- html:not([dir="rtl"]) .input-group .input-group-addon:last-child,
2597
- html:not([dir="rtl"]) .input-group .btn-input:last-child,
2598
- html:not([dir="rtl"]) .input-group .form-control:last-child {
2599
- border-right-width: 1px;
2600
- }
2601
- [dir="rtl"] .input-group .input-group-btn:last-child,
2602
- [dir="rtl"] .input-group .input-group-addon:last-child,
2603
- [dir="rtl"] .input-group .btn-input:last-child,
2604
- [dir="rtl"] .input-group .form-control:last-child {
2605
- border-bottom-left-radius: 3px;
2606
- border-top-left-radius: 3px;
2607
- }
2608
- html:not([dir="rtl"]) .input-group .input-group-btn:last-child,
2609
- html:not([dir="rtl"]) .input-group .input-group-addon:last-child,
2610
- html:not([dir="rtl"]) .input-group .btn-input:last-child,
2611
- html:not([dir="rtl"]) .input-group .form-control:last-child {
2612
- border-bottom-right-radius: 3px;
2613
- border-top-right-radius: 3px;
2346
+ .input-group .input-group-btn:first-child,
2347
+ .input-group .input-group-addon:first-child,
2348
+ .input-group .btn-input:first-child,
2349
+ .input-group .form-control:first-child {
2350
+ border-inline-start-width: 1px;
2351
+ border-start-start-radius: 3px;
2352
+ border-end-start-radius: 3px;
2353
+ }
2354
+ .input-group .input-group-btn:last-child,
2355
+ .input-group .input-group-addon:last-child,
2356
+ .input-group .btn-input:last-child,
2357
+ .input-group .form-control:last-child {
2358
+ border-inline-end-width: 1px;
2359
+ border-start-end-radius: 3px;
2360
+ border-end-end-radius: 3px;
2614
2361
  }
2615
2362
  /* TODO: Remove this rule group once the brand refresh is out */
2616
- [dir="rtl"] .input-group > :first-child .btn,
2617
- [dir="rtl"] .input-group > :first-child .btn-group {
2618
- border-bottom-left-radius: 0;
2619
- border-top-left-radius: 0;
2620
- }
2621
- html:not([dir="rtl"]) .input-group > :first-child .btn,
2622
- html:not([dir="rtl"]) .input-group > :first-child .btn-group {
2623
- border-bottom-right-radius: 0;
2624
- border-top-right-radius: 0;
2625
- }
2626
- [dir="rtl"] .np-theme-personal .input-group > :first-child .btn,
2627
- [dir="rtl"] .np-theme-personal .input-group > :first-child .btn-group {
2628
- border-bottom-right-radius: 10px;
2629
- border-bottom-right-radius: var(--radius-small);
2630
- border-top-right-radius: 10px;
2631
- border-top-right-radius: var(--radius-small);
2632
- }
2633
- html:not([dir="rtl"]) .np-theme-personal .input-group > :first-child .btn,
2634
- html:not([dir="rtl"]) .np-theme-personal .input-group > :first-child .btn-group {
2635
- border-bottom-left-radius: 10px;
2636
- border-bottom-left-radius: var(--radius-small);
2637
- border-top-left-radius: 10px;
2638
- border-top-left-radius: var(--radius-small);
2639
- }
2640
- [dir="rtl"] .input-group > :last-child .btn,
2641
- [dir="rtl"] .input-group > :last-child .btn-group {
2642
- border-bottom-right-radius: 0;
2643
- border-top-right-radius: 0;
2644
- }
2645
- html:not([dir="rtl"]) .input-group > :last-child .btn,
2646
- html:not([dir="rtl"]) .input-group > :last-child .btn-group {
2647
- border-bottom-left-radius: 0;
2648
- border-top-left-radius: 0;
2649
- }
2650
- [dir="rtl"] .np-theme-personal .input-group > :last-child .btn,
2651
- [dir="rtl"] .np-theme-personal .input-group > :last-child .btn-group {
2652
- border-bottom-right-radius: 10px;
2653
- border-bottom-right-radius: var(--radius-small);
2654
- border-top-right-radius: 10px;
2655
- border-top-right-radius: var(--radius-small);
2656
- }
2657
- html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn,
2658
- html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
2659
- border-bottom-left-radius: 10px;
2660
- border-bottom-left-radius: var(--radius-small);
2661
- border-top-left-radius: 10px;
2662
- border-top-left-radius: var(--radius-small);
2363
+ .input-group > :first-child .btn,
2364
+ .input-group > :first-child .btn-group {
2365
+ border-start-end-radius: 0;
2366
+ border-end-end-radius: 0;
2367
+ }
2368
+ .np-theme-personal .input-group > :first-child .btn,
2369
+ .np-theme-personal .input-group > :first-child .btn-group {
2370
+ border-start-start-radius: 10px;
2371
+ border-start-start-radius: var(--radius-small);
2372
+ border-end-start-radius: 10px;
2373
+ border-end-start-radius: var(--radius-small);
2374
+ }
2375
+ .input-group > :last-child .btn,
2376
+ .input-group > :last-child .btn-group {
2377
+ border-start-start-radius: 0;
2378
+ border-end-start-radius: 0;
2379
+ }
2380
+ .np-theme-personal .input-group > :last-child .btn,
2381
+ .np-theme-personal .input-group > :last-child .btn-group {
2382
+ border-start-start-radius: 10px;
2383
+ border-start-start-radius: var(--radius-small);
2384
+ border-end-start-radius: 10px;
2385
+ border-end-start-radius: var(--radius-small);
2663
2386
  }
2664
2387
  .input-group-btn {
2665
2388
  position: relative;
@@ -2670,12 +2393,7 @@ html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
2670
2393
  position: relative;
2671
2394
  }
2672
2395
  .input-group-btn > .btn + .btn {
2673
- margin-left: -1px;
2674
- }
2675
- [dir="rtl"] .input-group-btn > .btn + .btn {
2676
- margin-right: -1px;
2677
- margin-left: 0;
2678
- margin-left: initial;
2396
+ margin-inline-start: -1px;
2679
2397
  }
2680
2398
  .input-group-btn > .btn:hover,
2681
2399
  .input-group-btn > .btn:focus,
@@ -2684,13 +2402,7 @@ html:not([dir="rtl"]) .np-theme-personal .input-group > :last-child .btn-group {
2684
2402
  }
2685
2403
  .input-group-btn:first-child > .btn,
2686
2404
  .input-group-btn:first-child > .btn-group {
2687
- margin-right: -1px;
2688
- }
2689
- [dir="rtl"] .input-group-btn:first-child > .btn,
2690
- [dir="rtl"] .input-group-btn:first-child > .btn-group {
2691
- margin-left: -1px;
2692
- margin-right: 0;
2693
- margin-right: initial;
2405
+ margin-inline-end: -1px;
2694
2406
  }
2695
2407
  .input-group:hover:not(.disabled):not(:disabled) .form-control,
2696
2408
  .input-group:hover:not(.disabled):not(:disabled) .input-group-addon,