@italia/input 0.1.0-alpha.2 → 1.0.0-alpha.11
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/README.md +1 -1
- package/custom-elements.json +170 -26
- package/dist/src/it-input.d.ts.map +1 -1
- package/dist/src/it-input.js +611 -542
- package/dist/src/it-input.js.map +1 -1
- package/dist/src/types.d.ts.map +1 -1
- package/package.json +8 -6
- package/styles/globals.scss +4 -7
package/dist/src/it-input.js
CHANGED
|
@@ -116,7 +116,9 @@ function registerTranslation(...translation) {
|
|
|
116
116
|
});
|
|
117
117
|
update();
|
|
118
118
|
}
|
|
119
|
-
window
|
|
119
|
+
if (typeof window !== 'undefined') {
|
|
120
|
+
window.registerTranslation = registerTranslation;
|
|
121
|
+
}
|
|
120
122
|
/**
|
|
121
123
|
* Localize Reactive Controller for components built with Lit
|
|
122
124
|
*
|
|
@@ -439,6 +441,7 @@ const interactions = new WeakMap();
|
|
|
439
441
|
/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
|
|
440
442
|
class FormControlController {
|
|
441
443
|
constructor(host, options) {
|
|
444
|
+
this.submittedOnce = false;
|
|
442
445
|
this.handleFormData = (event) => {
|
|
443
446
|
// console.log('handleFormData');
|
|
444
447
|
const disabled = this.options.disabled(this.host);
|
|
@@ -460,6 +463,27 @@ class FormControlController {
|
|
|
460
463
|
event.formData.append(name, value);
|
|
461
464
|
}
|
|
462
465
|
break;
|
|
466
|
+
case 'it-checkbox':
|
|
467
|
+
case 'it-toggle':
|
|
468
|
+
if (this.host.checked) {
|
|
469
|
+
if (event.formData.getAll(name).indexOf(value) < 0) {
|
|
470
|
+
// handle group checkbox
|
|
471
|
+
event.formData.append(name, value);
|
|
472
|
+
}
|
|
473
|
+
}
|
|
474
|
+
break;
|
|
475
|
+
case 'it-checkbox-group':
|
|
476
|
+
case 'it-toggle-group':
|
|
477
|
+
// non settare valori in formData, perchè ogni singola checkbox setta il suo valore
|
|
478
|
+
break;
|
|
479
|
+
case 'it-upload':
|
|
480
|
+
// value is File[] — append each File object directly (not as string)
|
|
481
|
+
if (Array.isArray(value)) {
|
|
482
|
+
value.forEach((file) => {
|
|
483
|
+
event.formData.append(name, file);
|
|
484
|
+
});
|
|
485
|
+
}
|
|
486
|
+
break;
|
|
463
487
|
default:
|
|
464
488
|
if (Array.isArray(value)) {
|
|
465
489
|
value.forEach((val) => {
|
|
@@ -481,13 +505,30 @@ class FormControlController {
|
|
|
481
505
|
this.setUserInteracted(control, true);
|
|
482
506
|
});
|
|
483
507
|
}
|
|
484
|
-
|
|
508
|
+
const resReportValidity = reportValidity(this.host);
|
|
509
|
+
if (this.form && !this.form.noValidate && !disabled && !resReportValidity) {
|
|
485
510
|
event.preventDefault();
|
|
486
511
|
// event.stopImmediatePropagation(); // se lo attiviamo, valida un campo alla volta
|
|
512
|
+
// Scroll al primo controllo non valido
|
|
513
|
+
const formControls = formCollections.get(this.form);
|
|
514
|
+
if (formControls) {
|
|
515
|
+
for (const control of formControls) {
|
|
516
|
+
if (!control.validity?.valid) {
|
|
517
|
+
// Scroll smooth verso il controllo non valido
|
|
518
|
+
control.scrollIntoView({
|
|
519
|
+
behavior: 'smooth',
|
|
520
|
+
block: 'center',
|
|
521
|
+
});
|
|
522
|
+
break;
|
|
523
|
+
}
|
|
524
|
+
}
|
|
525
|
+
}
|
|
487
526
|
}
|
|
527
|
+
this.submittedOnce = true;
|
|
488
528
|
};
|
|
489
529
|
this.handleFormReset = () => {
|
|
490
530
|
this.options.setValue(this.host, '');
|
|
531
|
+
this.submittedOnce = false;
|
|
491
532
|
this.setUserInteracted(this.host, false);
|
|
492
533
|
interactions.set(this.host, []);
|
|
493
534
|
};
|
|
@@ -652,6 +693,7 @@ class FormControlController {
|
|
|
652
693
|
if (!formCollection) {
|
|
653
694
|
return;
|
|
654
695
|
}
|
|
696
|
+
this.submittedOnce = false;
|
|
655
697
|
// Remove this host from the form's collection
|
|
656
698
|
formCollection.delete(this.host);
|
|
657
699
|
// Check to make sure there's no other form controls in the collection. If we do this
|
|
@@ -748,6 +790,10 @@ class FormControlController {
|
|
|
748
790
|
host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);
|
|
749
791
|
host.toggleAttribute('data-user-valid', isValid && hasInteracted);
|
|
750
792
|
}
|
|
793
|
+
userInteracted() {
|
|
794
|
+
const hasInteracted = Boolean(userInteractedControls.has(this.host));
|
|
795
|
+
return hasInteracted;
|
|
796
|
+
}
|
|
751
797
|
/**
|
|
752
798
|
* Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
|
|
753
799
|
* that affects constraint validation changes so the component receives the correct validity states.
|
|
@@ -784,6 +830,7 @@ const translation$1 = {
|
|
|
784
830
|
$name: 'Italiano',
|
|
785
831
|
$dir: 'ltr',
|
|
786
832
|
validityRequired: 'Questo campo è obbligatorio.',
|
|
833
|
+
validityGroupRequired: "Scegli almeno un'opzione",
|
|
787
834
|
validityPattern: 'Il valore non corrisponde al formato richiesto.',
|
|
788
835
|
validityMinlength: 'Il valore deve essere lungo almeno {minlength} caratteri.',
|
|
789
836
|
validityMaxlength: 'Il valore deve essere lungo al massimo {maxlength} caratteri.',
|
|
@@ -828,24 +875,27 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
828
875
|
this.maxlength = -1;
|
|
829
876
|
/** If the input is required. */
|
|
830
877
|
this.required = false;
|
|
878
|
+
/* For grouped input, like checkbox-group */
|
|
879
|
+
this.isInGroup = false;
|
|
831
880
|
this.validationMessage = '';
|
|
832
881
|
}
|
|
833
882
|
/** Gets the validity state object */
|
|
834
883
|
get validity() {
|
|
835
884
|
return this.inputElement?.validity;
|
|
836
885
|
}
|
|
886
|
+
/** Gets the associated form, if one exists. */
|
|
887
|
+
getForm() {
|
|
888
|
+
return this.formControlController.getForm();
|
|
889
|
+
}
|
|
837
890
|
// Form validation methods
|
|
838
891
|
checkValidity() {
|
|
839
892
|
const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
|
|
840
893
|
return inputValid;
|
|
841
894
|
}
|
|
842
|
-
/** Gets the associated form, if one exists. */
|
|
843
|
-
getForm() {
|
|
844
|
-
return this.formControlController.getForm();
|
|
845
|
-
}
|
|
846
895
|
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
847
896
|
reportValidity() {
|
|
848
|
-
const ret = this.inputElement.checkValidity();
|
|
897
|
+
// const ret = this.inputElement.checkValidity();
|
|
898
|
+
const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
|
|
849
899
|
this.handleValidationMessages();
|
|
850
900
|
return ret; // this.inputElement.reportValidity();
|
|
851
901
|
}
|
|
@@ -890,7 +940,8 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
890
940
|
handleValidationMessages() {
|
|
891
941
|
if (!this.customValidation) {
|
|
892
942
|
const _v = this.inputElement.validity;
|
|
893
|
-
|
|
943
|
+
const isRequiredHandledByGroup = this.isInGroup === true;
|
|
944
|
+
if (_v.valueMissing && !isRequiredHandledByGroup) {
|
|
894
945
|
this.setCustomValidity(this.$t('validityRequired'));
|
|
895
946
|
}
|
|
896
947
|
else if (_v.patternMismatch) {
|
|
@@ -961,7 +1012,7 @@ class FormControl extends BaseLocalizedComponent {
|
|
|
961
1012
|
if (this.customValidation) {
|
|
962
1013
|
this.setCustomValidity(this.validationText ?? '');
|
|
963
1014
|
}
|
|
964
|
-
else {
|
|
1015
|
+
else if (this.formControlController.userInteracted()) {
|
|
965
1016
|
this.formControlController.updateValidity();
|
|
966
1017
|
}
|
|
967
1018
|
}
|
|
@@ -1029,11 +1080,23 @@ __decorate([
|
|
|
1029
1080
|
,
|
|
1030
1081
|
__metadata("design:type", Object)
|
|
1031
1082
|
], FormControl.prototype, "required", void 0);
|
|
1083
|
+
__decorate([
|
|
1084
|
+
property({ type: Boolean }),
|
|
1085
|
+
__metadata("design:type", Object)
|
|
1086
|
+
], FormControl.prototype, "isInGroup", void 0);
|
|
1032
1087
|
__decorate([
|
|
1033
1088
|
state(),
|
|
1034
1089
|
__metadata("design:type", Object)
|
|
1035
1090
|
], FormControl.prototype, "validationMessage", void 0);
|
|
1036
1091
|
|
|
1092
|
+
if (typeof window !== 'undefined') {
|
|
1093
|
+
window._itAnalytics = window._itAnalytics || {};
|
|
1094
|
+
window._itAnalytics = {
|
|
1095
|
+
...window._itAnalytics,
|
|
1096
|
+
version: '1.0.0-alpha.11',
|
|
1097
|
+
};
|
|
1098
|
+
}
|
|
1099
|
+
|
|
1037
1100
|
/**
|
|
1038
1101
|
* Checks for repetition of characters in
|
|
1039
1102
|
* a string
|
|
@@ -1228,7 +1291,7 @@ var styles = css`@charset "UTF-8";
|
|
|
1228
1291
|
.form-check [type=checkbox]:focus + label,
|
|
1229
1292
|
.form-check [type=radio]:focus + label {
|
|
1230
1293
|
border-color: hsl(0, 0%, 0%) !important;
|
|
1231
|
-
box-shadow: 0 0 0 2px var(--
|
|
1294
|
+
box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
|
|
1232
1295
|
outline: 3px solid transparent !important;
|
|
1233
1296
|
outline-offset: 3px !important;
|
|
1234
1297
|
}
|
|
@@ -1268,7 +1331,7 @@ hr {
|
|
|
1268
1331
|
|
|
1269
1332
|
p {
|
|
1270
1333
|
margin-top: 0;
|
|
1271
|
-
margin-bottom: var(--
|
|
1334
|
+
margin-bottom: var(--bsi-paragraph-spacing);
|
|
1272
1335
|
}
|
|
1273
1336
|
|
|
1274
1337
|
abbr[title] {
|
|
@@ -1278,21 +1341,21 @@ abbr[title] {
|
|
|
1278
1341
|
}
|
|
1279
1342
|
|
|
1280
1343
|
address {
|
|
1281
|
-
margin-bottom: var(--
|
|
1344
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
1282
1345
|
font-style: normal;
|
|
1283
1346
|
line-height: inherit;
|
|
1284
1347
|
}
|
|
1285
1348
|
|
|
1286
1349
|
ol,
|
|
1287
1350
|
ul {
|
|
1288
|
-
padding-left: var(--
|
|
1351
|
+
padding-left: var(--bsi-spacing-l);
|
|
1289
1352
|
}
|
|
1290
1353
|
|
|
1291
1354
|
ol,
|
|
1292
1355
|
ul,
|
|
1293
1356
|
dl {
|
|
1294
1357
|
margin-top: 0;
|
|
1295
|
-
margin-bottom: var(--
|
|
1358
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
1296
1359
|
}
|
|
1297
1360
|
|
|
1298
1361
|
ol ol,
|
|
@@ -1303,22 +1366,22 @@ ul ol {
|
|
|
1303
1366
|
}
|
|
1304
1367
|
|
|
1305
1368
|
dt {
|
|
1306
|
-
font-weight: var(--
|
|
1369
|
+
font-weight: var(--bsi-font-weight-strong);
|
|
1307
1370
|
}
|
|
1308
1371
|
|
|
1309
1372
|
dd {
|
|
1310
|
-
margin-bottom: var(--
|
|
1373
|
+
margin-bottom: var(--bsi-spacing-xxs);
|
|
1311
1374
|
margin-left: 0;
|
|
1312
1375
|
}
|
|
1313
1376
|
|
|
1314
1377
|
blockquote {
|
|
1315
|
-
margin: 0 0 var(--
|
|
1378
|
+
margin: 0 0 var(--bsi-spacing-s);
|
|
1316
1379
|
}
|
|
1317
1380
|
|
|
1318
1381
|
sub,
|
|
1319
1382
|
sup {
|
|
1320
1383
|
position: relative;
|
|
1321
|
-
font-size: var(--
|
|
1384
|
+
font-size: var(--bsi-font-size-1);
|
|
1322
1385
|
line-height: 0;
|
|
1323
1386
|
vertical-align: baseline;
|
|
1324
1387
|
}
|
|
@@ -1332,18 +1395,14 @@ sup {
|
|
|
1332
1395
|
}
|
|
1333
1396
|
|
|
1334
1397
|
a {
|
|
1335
|
-
color: var(--
|
|
1398
|
+
color: var(--bsi-color-link);
|
|
1336
1399
|
text-decoration: underline;
|
|
1337
1400
|
text-decoration-skip-ink: auto;
|
|
1338
1401
|
text-underline-offset: 2px;
|
|
1339
1402
|
}
|
|
1340
1403
|
a:hover {
|
|
1341
|
-
color: var(--
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
a:not([href]):not([class]), a:not([href]):not([class]):hover {
|
|
1345
|
-
color: inherit;
|
|
1346
|
-
text-decoration: none;
|
|
1404
|
+
color: var(--bsi-color-link-hover);
|
|
1405
|
+
cursor: pointer;
|
|
1347
1406
|
}
|
|
1348
1407
|
|
|
1349
1408
|
pre,
|
|
@@ -1356,7 +1415,7 @@ samp {
|
|
|
1356
1415
|
pre {
|
|
1357
1416
|
display: block;
|
|
1358
1417
|
margin-top: 0;
|
|
1359
|
-
margin-bottom: var(--
|
|
1418
|
+
margin-bottom: var(--bsi-paragraph-spacing);
|
|
1360
1419
|
overflow: auto;
|
|
1361
1420
|
}
|
|
1362
1421
|
pre code {
|
|
@@ -1551,78 +1610,82 @@ progress {
|
|
|
1551
1610
|
}
|
|
1552
1611
|
|
|
1553
1612
|
.btn {
|
|
1554
|
-
--
|
|
1555
|
-
--
|
|
1556
|
-
--
|
|
1557
|
-
--
|
|
1558
|
-
--
|
|
1559
|
-
--
|
|
1560
|
-
--
|
|
1561
|
-
--
|
|
1562
|
-
--
|
|
1563
|
-
--
|
|
1564
|
-
--
|
|
1565
|
-
--
|
|
1566
|
-
--
|
|
1567
|
-
--
|
|
1568
|
-
}
|
|
1569
|
-
|
|
1613
|
+
--bsi-btn-background: transparent;
|
|
1614
|
+
--bsi-btn-border-color: transparent;
|
|
1615
|
+
--bsi-btn-border-radius: var(--bsi-radius-smooth);
|
|
1616
|
+
--bsi-btn-border-size: 0;
|
|
1617
|
+
--bsi-btn-disabled-opacity: 0.5;
|
|
1618
|
+
--bsi-btn-font-family: var(--bsi-font-sans);
|
|
1619
|
+
--bsi-btn-font-size: var(--bsi-label-font-size);
|
|
1620
|
+
--bsi-btn-font-weight: var(--bsi-font-weight-solid);
|
|
1621
|
+
--bsi-btn-line-height: var(--bsi-font-leading-3);
|
|
1622
|
+
--bsi-btn-outline-border-color: transparent;
|
|
1623
|
+
--bsi-btn-outline-border-size: 2px;
|
|
1624
|
+
--bsi-btn-padding-x: var(--bsi-spacing-s);
|
|
1625
|
+
--bsi-btn-padding-y: var(--bsi-spacing-xs);
|
|
1626
|
+
--bsi-btn-text-color: var(--bsi-color-text-primary);
|
|
1627
|
+
}
|
|
1628
|
+
|
|
1629
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
1570
1630
|
.btn {
|
|
1571
1631
|
display: inline-block;
|
|
1572
|
-
padding: var(--
|
|
1573
|
-
border: var(--
|
|
1574
|
-
border-radius: var(--
|
|
1575
|
-
background: var(--
|
|
1576
|
-
box-shadow: var(--
|
|
1577
|
-
color: var(--
|
|
1578
|
-
font-family: var(--
|
|
1579
|
-
font-size: var(--
|
|
1580
|
-
font-weight: var(--
|
|
1581
|
-
line-height: var(--
|
|
1632
|
+
padding: var(--bsi-btn-padding-y) var(--bsi-btn-padding-x);
|
|
1633
|
+
border: var(--bsi-btn-border-width) solid var(--bsi-btn-border-color);
|
|
1634
|
+
border-radius: var(--bsi-btn-border-radius);
|
|
1635
|
+
background: var(--bsi-btn-background);
|
|
1636
|
+
box-shadow: var(--bsi-btn-box-shadow, none);
|
|
1637
|
+
color: var(--bsi-btn-text-color);
|
|
1638
|
+
font-family: var(--bsi-btn-font-family);
|
|
1639
|
+
font-size: var(--bsi-btn-font-size);
|
|
1640
|
+
font-weight: var(--bsi-btn-font-weight);
|
|
1641
|
+
line-height: var(--bsi-btn-line-height);
|
|
1582
1642
|
text-align: center;
|
|
1583
1643
|
text-decoration: none;
|
|
1584
1644
|
vertical-align: middle;
|
|
1585
1645
|
white-space: initial;
|
|
1586
1646
|
width: auto;
|
|
1587
|
-
transition: all var(--
|
|
1647
|
+
transition: all var(--bsi-transition-instant) ease-in-out;
|
|
1588
1648
|
user-select: none;
|
|
1589
1649
|
}
|
|
1650
|
+
.btn:hover {
|
|
1651
|
+
color: var(--bsi-btn-text-color);
|
|
1652
|
+
}
|
|
1590
1653
|
.btn:disabled, .btn.disabled {
|
|
1591
|
-
opacity: var(--
|
|
1654
|
+
opacity: var(--bsi-btn-disabled-opacity);
|
|
1592
1655
|
cursor: not-allowed;
|
|
1593
1656
|
pointer-events: none;
|
|
1594
1657
|
}
|
|
1595
1658
|
.btn:focus-visible {
|
|
1596
|
-
border-color: var(--
|
|
1659
|
+
border-color: var(--bsi-btn-hover-border-color);
|
|
1597
1660
|
outline: 0;
|
|
1598
1661
|
}
|
|
1599
1662
|
.btn-check:focus-visible + .btn {
|
|
1600
|
-
border-color: var(--
|
|
1663
|
+
border-color: var(--bsi-btn-hover-border-color);
|
|
1601
1664
|
outline: 0;
|
|
1602
1665
|
}
|
|
1603
1666
|
|
|
1604
1667
|
.btn-link {
|
|
1605
|
-
--
|
|
1606
|
-
--
|
|
1668
|
+
--bsi-btn-background: transparent;
|
|
1669
|
+
--bsi-btn-border-color: transparent;
|
|
1607
1670
|
text-decoration: underline;
|
|
1608
1671
|
}
|
|
1609
1672
|
.btn-link:hover {
|
|
1610
|
-
color: var(--
|
|
1673
|
+
color: var(--bsi-color-link-hover);
|
|
1611
1674
|
}
|
|
1612
1675
|
|
|
1613
1676
|
.btn-xs {
|
|
1614
|
-
--
|
|
1615
|
-
--
|
|
1616
|
-
--
|
|
1617
|
-
--
|
|
1618
|
-
--
|
|
1677
|
+
--bsi-btn-padding-x: var(--bsi-spacing-xs);
|
|
1678
|
+
--bsi-btn-padding-y: var(--bsi-spacing-xs);
|
|
1679
|
+
--bsi-btn-font-size: var(--bsi-label-font-size-s);
|
|
1680
|
+
--bsi-btn-line-height: var(--bsi-font-leading-1);
|
|
1681
|
+
--bsi-rounded-icon-size: 20px;
|
|
1619
1682
|
}
|
|
1620
1683
|
|
|
1621
1684
|
.btn-lg {
|
|
1622
|
-
--
|
|
1623
|
-
--
|
|
1624
|
-
--
|
|
1625
|
-
--
|
|
1685
|
+
--bsi-btn-padding-x: var(--bsi-spacing-m);
|
|
1686
|
+
--bsi-btn-padding-y: var(--bsi-spacing-s);
|
|
1687
|
+
--bsi-btn-font-size: var(--bsi-label-font-size-l);
|
|
1688
|
+
--bsi-btn-line-height: var(--bsi-font-leading-5);
|
|
1626
1689
|
}
|
|
1627
1690
|
|
|
1628
1691
|
.btn-progress {
|
|
@@ -1634,7 +1697,7 @@ progress {
|
|
|
1634
1697
|
flex-direction: row;
|
|
1635
1698
|
align-items: center;
|
|
1636
1699
|
justify-content: center;
|
|
1637
|
-
gap: var(--
|
|
1700
|
+
gap: var(--bsi-icon-spacing);
|
|
1638
1701
|
}
|
|
1639
1702
|
|
|
1640
1703
|
.btn-full {
|
|
@@ -1661,16 +1724,16 @@ progress {
|
|
|
1661
1724
|
|
|
1662
1725
|
.btn-primary,
|
|
1663
1726
|
a.btn-primary {
|
|
1664
|
-
--
|
|
1665
|
-
--
|
|
1727
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1728
|
+
--bsi-btn-background: var(--bsi-color-background-primary);
|
|
1666
1729
|
}
|
|
1667
1730
|
.btn-primary:hover,
|
|
1668
1731
|
a.btn-primary:hover {
|
|
1669
|
-
--
|
|
1732
|
+
--bsi-btn-background: var(--bsi-color-background-primary-hover);
|
|
1670
1733
|
}
|
|
1671
1734
|
.btn-primary:active,
|
|
1672
1735
|
a.btn-primary:active {
|
|
1673
|
-
--
|
|
1736
|
+
--bsi-btn-background: var(--bsi-color-background-primary-active);
|
|
1674
1737
|
}
|
|
1675
1738
|
.btn-primary.btn-progress,
|
|
1676
1739
|
a.btn-primary.btn-progress {
|
|
@@ -1681,16 +1744,16 @@ a.btn-primary.btn-progress {
|
|
|
1681
1744
|
|
|
1682
1745
|
.btn-secondary,
|
|
1683
1746
|
a.btn-secondary {
|
|
1684
|
-
--
|
|
1685
|
-
--
|
|
1747
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1748
|
+
--bsi-btn-background: var(--bsi-color-background-secondary);
|
|
1686
1749
|
}
|
|
1687
1750
|
.btn-secondary:hover,
|
|
1688
1751
|
a.btn-secondary:hover {
|
|
1689
|
-
--
|
|
1752
|
+
--bsi-btn-background: var(--bsi-color-background-secondary-hover);
|
|
1690
1753
|
}
|
|
1691
1754
|
.btn-secondary:active,
|
|
1692
1755
|
a.btn-secondary:active {
|
|
1693
|
-
--
|
|
1756
|
+
--bsi-btn-background: var(--bsi-color-background-secondary-active);
|
|
1694
1757
|
}
|
|
1695
1758
|
.btn-secondary:disabled.btn-progress, .btn-secondary.disabled.btn-progress,
|
|
1696
1759
|
a.btn-secondary:disabled.btn-progress,
|
|
@@ -1702,173 +1765,174 @@ a.btn-secondary.disabled.btn-progress {
|
|
|
1702
1765
|
|
|
1703
1766
|
.btn-success,
|
|
1704
1767
|
a.btn-success {
|
|
1705
|
-
--
|
|
1706
|
-
--
|
|
1768
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1769
|
+
--bsi-btn-background: var(--bsi-color-background-success);
|
|
1707
1770
|
}
|
|
1708
1771
|
.btn-success:hover,
|
|
1709
1772
|
a.btn-success:hover {
|
|
1710
|
-
--
|
|
1773
|
+
--bsi-btn-background: var(--bsi-color-background-success-hover);
|
|
1711
1774
|
}
|
|
1712
1775
|
.btn-success:active,
|
|
1713
1776
|
a.btn-success:active {
|
|
1714
|
-
--
|
|
1777
|
+
--bsi-btn-background: var(--bsi-color-background-success-active);
|
|
1715
1778
|
}
|
|
1716
1779
|
|
|
1717
1780
|
.btn-warning,
|
|
1718
1781
|
a.btn-warning {
|
|
1719
|
-
--
|
|
1720
|
-
--
|
|
1782
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1783
|
+
--bsi-btn-background: var(--bsi-color-background-warning);
|
|
1721
1784
|
}
|
|
1722
1785
|
.btn-warning:hover,
|
|
1723
1786
|
a.btn-warning:hover {
|
|
1724
|
-
--
|
|
1787
|
+
--bsi-btn-background: var(--bsi-color-background-warning-hover);
|
|
1725
1788
|
}
|
|
1726
1789
|
.btn-warning:active,
|
|
1727
1790
|
a.btn-warning:active {
|
|
1728
|
-
--
|
|
1791
|
+
--bsi-btn-background: var(--bsi-color-background-warning-active);
|
|
1729
1792
|
}
|
|
1730
1793
|
|
|
1731
1794
|
.btn-danger,
|
|
1732
1795
|
a.btn-danger {
|
|
1733
|
-
--
|
|
1734
|
-
--
|
|
1796
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1797
|
+
--bsi-btn-background: var(--bsi-color-background-danger);
|
|
1735
1798
|
}
|
|
1736
1799
|
.btn-danger:hover,
|
|
1737
1800
|
a.btn-danger:hover {
|
|
1738
|
-
--
|
|
1801
|
+
--bsi-btn-background: var(--bsi-color-background-danger-hover);
|
|
1739
1802
|
}
|
|
1740
1803
|
.btn-danger:active,
|
|
1741
1804
|
a.btn-danger:active {
|
|
1742
|
-
--
|
|
1805
|
+
--bsi-btn-background: var(--bsi-color-background-danger-active);
|
|
1743
1806
|
}
|
|
1744
1807
|
|
|
1745
1808
|
.btn[class*=btn-outline-] {
|
|
1746
|
-
--
|
|
1809
|
+
--bsi-btn-box-shadow: inset 0 0 0 var(--bsi-btn-outline-border-size) var(--bsi-btn-outline-border-color);
|
|
1747
1810
|
}
|
|
1748
1811
|
|
|
1749
1812
|
.btn-outline-primary,
|
|
1750
1813
|
a.btn-outline-primary {
|
|
1751
|
-
--
|
|
1752
|
-
--
|
|
1814
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-primary);
|
|
1815
|
+
--bsi-btn-text-color: var(--bsi-color-text-primary);
|
|
1753
1816
|
}
|
|
1754
1817
|
.btn-outline-primary:hover,
|
|
1755
1818
|
a.btn-outline-primary:hover {
|
|
1756
|
-
--
|
|
1757
|
-
--
|
|
1819
|
+
--bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-primary-hover) 70%, black);
|
|
1820
|
+
--bsi-btn-text-color: var(--bsi-color-link-hover);
|
|
1758
1821
|
}
|
|
1759
1822
|
.btn-outline-primary:active,
|
|
1760
1823
|
a.btn-outline-primary:active {
|
|
1761
|
-
--
|
|
1762
|
-
--
|
|
1824
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-primary-active);
|
|
1825
|
+
--bsi-btn-text-color: var(--bsi-color-link-active);
|
|
1763
1826
|
}
|
|
1764
1827
|
.btn-outline-secondary,
|
|
1765
1828
|
a.btn-outline-secondary {
|
|
1766
|
-
--
|
|
1767
|
-
--
|
|
1829
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-secondary);
|
|
1830
|
+
--bsi-btn-text-color: var(--bsi-color-text-secondary);
|
|
1768
1831
|
}
|
|
1769
1832
|
.btn-outline-secondary:hover,
|
|
1770
1833
|
a.btn-outline-secondary:hover {
|
|
1771
|
-
--
|
|
1772
|
-
--
|
|
1834
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-secondary-hover);
|
|
1835
|
+
--bsi-btn-text-color: var(--bsi-color-link-secondary-hover);
|
|
1773
1836
|
}
|
|
1774
1837
|
.btn-outline-secondary:active,
|
|
1775
1838
|
a.btn-outline-secondary:active {
|
|
1776
|
-
--
|
|
1777
|
-
--
|
|
1839
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-secondary-active);
|
|
1840
|
+
--bsi-btn-text-color: var(--bsi-color-link-secondary-active);
|
|
1778
1841
|
}
|
|
1779
1842
|
.btn-outline-success,
|
|
1780
1843
|
a.btn-outline-success {
|
|
1781
|
-
--
|
|
1782
|
-
--
|
|
1844
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-success);
|
|
1845
|
+
--bsi-btn-text-color: var(--bsi-color-text-success);
|
|
1783
1846
|
}
|
|
1784
1847
|
.btn-outline-success:hover,
|
|
1785
1848
|
a.btn-outline-success:hover {
|
|
1786
|
-
|
|
1787
|
-
--
|
|
1849
|
+
/* aumenta contrasto scurendo il bordo rispetto al token base */
|
|
1850
|
+
--bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-success-hover) 70%, black);
|
|
1851
|
+
--bsi-btn-text-color: var(--bsi-color-text-success-hover);
|
|
1788
1852
|
}
|
|
1789
1853
|
.btn-outline-success:active,
|
|
1790
1854
|
a.btn-outline-success:active {
|
|
1791
|
-
--
|
|
1792
|
-
--
|
|
1855
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-success-active);
|
|
1856
|
+
--bsi-btn-text-color: var(--bsi-color-text-success-active);
|
|
1793
1857
|
}
|
|
1794
1858
|
.btn-outline-warning,
|
|
1795
1859
|
a.btn-outline-warning {
|
|
1796
|
-
--
|
|
1797
|
-
--
|
|
1860
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-warning);
|
|
1861
|
+
--bsi-btn-text-color: var(--bsi-color-text-warning);
|
|
1798
1862
|
}
|
|
1799
1863
|
.btn-outline-warning:hover,
|
|
1800
1864
|
a.btn-outline-warning:hover {
|
|
1801
|
-
--
|
|
1802
|
-
--
|
|
1865
|
+
--bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-warning-hover) 70%, black);
|
|
1866
|
+
--bsi-btn-text-color: var(--bsi-color-text-warning-hover);
|
|
1803
1867
|
}
|
|
1804
1868
|
.btn-outline-warning:active,
|
|
1805
1869
|
a.btn-outline-warning:active {
|
|
1806
|
-
--
|
|
1807
|
-
--
|
|
1870
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-warning-active);
|
|
1871
|
+
--bsi-btn-text-color: var(--bsi-color-text-warning-active);
|
|
1808
1872
|
}
|
|
1809
1873
|
.btn-outline-danger,
|
|
1810
1874
|
a.btn-outline-danger {
|
|
1811
|
-
--
|
|
1812
|
-
--
|
|
1875
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-danger);
|
|
1876
|
+
--bsi-btn-text-color: var(--bsi-color-text-danger);
|
|
1813
1877
|
}
|
|
1814
1878
|
.btn-outline-danger:hover,
|
|
1815
1879
|
a.btn-outline-danger:hover {
|
|
1816
|
-
--
|
|
1817
|
-
--
|
|
1880
|
+
--bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-danger-hover) 70%, black);
|
|
1881
|
+
--bsi-btn-text-color: var(--bsi-color-text-danger-hover);
|
|
1818
1882
|
}
|
|
1819
1883
|
.btn-outline-danger:active,
|
|
1820
1884
|
a.btn-outline-danger:active {
|
|
1821
|
-
--
|
|
1822
|
-
--
|
|
1885
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-danger-active);
|
|
1886
|
+
--bsi-btn-text-color: var(--bsi-color-text-danger-active);
|
|
1823
1887
|
}
|
|
1824
1888
|
|
|
1825
1889
|
.bg-dark .btn-link {
|
|
1826
|
-
--
|
|
1890
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1827
1891
|
}
|
|
1828
1892
|
.bg-dark a.btn-primary,
|
|
1829
1893
|
.bg-dark .btn-primary {
|
|
1830
|
-
--
|
|
1831
|
-
--
|
|
1894
|
+
--bsi-btn-text-color: var(--bsi-color-text-primary);
|
|
1895
|
+
--bsi-btn-background: var(--bsi-color-background-inverse);
|
|
1832
1896
|
}
|
|
1833
1897
|
.bg-dark a.btn-primary:hover,
|
|
1834
1898
|
.bg-dark .btn-primary:hover {
|
|
1835
|
-
--
|
|
1899
|
+
--bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 85%, black);
|
|
1836
1900
|
}
|
|
1837
1901
|
.bg-dark a.btn-primary:active,
|
|
1838
1902
|
.bg-dark .btn-primary:active {
|
|
1839
|
-
--
|
|
1903
|
+
--bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 80%, black);
|
|
1840
1904
|
}
|
|
1841
1905
|
.bg-dark a.btn-secondary,
|
|
1842
1906
|
.bg-dark .btn-secondary {
|
|
1843
|
-
--
|
|
1844
|
-
--
|
|
1907
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1908
|
+
--bsi-btn-background: var(--bsi-color-background-secondary);
|
|
1845
1909
|
}
|
|
1846
1910
|
.bg-dark a.btn-secondary:hover, .bg-dark a.btn-secondary:active,
|
|
1847
1911
|
.bg-dark .btn-secondary:hover,
|
|
1848
1912
|
.bg-dark .btn-secondary:active {
|
|
1849
|
-
--
|
|
1913
|
+
--bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-secondary) 85%, black);
|
|
1850
1914
|
}
|
|
1851
1915
|
.bg-dark .btn-outline-primary,
|
|
1852
1916
|
.bg-dark a.btn-outline-primary {
|
|
1853
|
-
--
|
|
1854
|
-
--
|
|
1917
|
+
--bsi-btn-outline-border-color: var(--bsi-color-border-inverse);
|
|
1918
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1855
1919
|
}
|
|
1856
1920
|
.bg-dark .btn-outline-primary:hover,
|
|
1857
1921
|
.bg-dark a.btn-outline-primary:hover {
|
|
1858
|
-
--
|
|
1859
|
-
--
|
|
1860
|
-
--
|
|
1922
|
+
--bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-border-inverse) 80%, black);
|
|
1923
|
+
--bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
|
|
1924
|
+
--bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
|
|
1861
1925
|
}
|
|
1862
1926
|
.bg-dark .btn-outline-secondary,
|
|
1863
1927
|
.bg-dark a.btn-outline-secondary {
|
|
1864
|
-
--
|
|
1928
|
+
--bsi-btn-text-color: var(--bsi-color-text-inverse);
|
|
1865
1929
|
}
|
|
1866
1930
|
.bg-dark .btn-outline-secondary:hover, .bg-dark .btn-outline-secondary:active,
|
|
1867
1931
|
.bg-dark a.btn-outline-secondary:hover,
|
|
1868
1932
|
.bg-dark a.btn-outline-secondary:active {
|
|
1869
|
-
--
|
|
1870
|
-
--
|
|
1871
|
-
--
|
|
1933
|
+
--bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-background-secondary) 80%, black);
|
|
1934
|
+
--bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
|
|
1935
|
+
--bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
|
|
1872
1936
|
}
|
|
1873
1937
|
|
|
1874
1938
|
.btn-close {
|
|
@@ -1878,25 +1942,24 @@ a.btn-outline-danger:active {
|
|
|
1878
1942
|
height: 2.5rem;
|
|
1879
1943
|
padding: 0;
|
|
1880
1944
|
border: 0;
|
|
1881
|
-
opacity: 0.5;
|
|
1882
1945
|
background-color: transparent;
|
|
1883
|
-
color: var(--bs-color-text-base);
|
|
1884
1946
|
}
|
|
1885
1947
|
.btn-close .icon {
|
|
1886
1948
|
position: absolute;
|
|
1887
1949
|
top: 50%;
|
|
1888
1950
|
left: 50%;
|
|
1889
1951
|
transform: translate(-50%, -50%);
|
|
1952
|
+
fill: var(--bsi-icon-secondary);
|
|
1890
1953
|
}
|
|
1891
|
-
.btn-close:hover {
|
|
1892
|
-
|
|
1954
|
+
.btn-close .icon:hover {
|
|
1955
|
+
fill: var(--bsi-icon-default);
|
|
1893
1956
|
text-decoration: none;
|
|
1894
1957
|
}
|
|
1895
1958
|
.btn-close:focus {
|
|
1896
1959
|
opacity: 1;
|
|
1897
1960
|
}
|
|
1898
1961
|
.btn-close:disabled, .btn-close.disabled {
|
|
1899
|
-
opacity: var(--
|
|
1962
|
+
opacity: var(--bsi-btn-disabled-opacity);
|
|
1900
1963
|
pointer-events: none;
|
|
1901
1964
|
user-select: none;
|
|
1902
1965
|
}
|
|
@@ -1906,21 +1969,21 @@ a.btn-outline-danger:active {
|
|
|
1906
1969
|
}
|
|
1907
1970
|
|
|
1908
1971
|
.row {
|
|
1909
|
-
--
|
|
1910
|
-
--
|
|
1972
|
+
--bsi-gutter-x: 24px;
|
|
1973
|
+
--bsi-gutter-y: 0;
|
|
1911
1974
|
display: flex;
|
|
1912
1975
|
flex-wrap: wrap;
|
|
1913
|
-
margin-top: calc(-1 * var(--
|
|
1914
|
-
margin-right: calc(-0.5 * var(--
|
|
1915
|
-
margin-left: calc(-0.5 * var(--
|
|
1976
|
+
margin-top: calc(-1 * var(--bsi-gutter-y));
|
|
1977
|
+
margin-right: calc(-0.5 * var(--bsi-gutter-x));
|
|
1978
|
+
margin-left: calc(-0.5 * var(--bsi-gutter-x));
|
|
1916
1979
|
}
|
|
1917
1980
|
.row > * {
|
|
1918
1981
|
flex-shrink: 0;
|
|
1919
1982
|
width: 100%;
|
|
1920
1983
|
max-width: 100%;
|
|
1921
|
-
padding-right: calc(var(--
|
|
1922
|
-
padding-left: calc(var(--
|
|
1923
|
-
margin-top: var(--
|
|
1984
|
+
padding-right: calc(var(--bsi-gutter-x) * 0.5);
|
|
1985
|
+
padding-left: calc(var(--bsi-gutter-x) * 0.5);
|
|
1986
|
+
margin-top: var(--bsi-gutter-y);
|
|
1924
1987
|
}
|
|
1925
1988
|
|
|
1926
1989
|
.col {
|
|
@@ -2073,62 +2136,62 @@ a.btn-outline-danger:active {
|
|
|
2073
2136
|
|
|
2074
2137
|
.g-0,
|
|
2075
2138
|
.gx-0 {
|
|
2076
|
-
--
|
|
2139
|
+
--bsi-gutter-x: 0;
|
|
2077
2140
|
}
|
|
2078
2141
|
|
|
2079
2142
|
.g-0,
|
|
2080
2143
|
.gy-0 {
|
|
2081
|
-
--
|
|
2144
|
+
--bsi-gutter-y: 0;
|
|
2082
2145
|
}
|
|
2083
2146
|
|
|
2084
2147
|
.g-1,
|
|
2085
2148
|
.gx-1 {
|
|
2086
|
-
--
|
|
2149
|
+
--bsi-gutter-x: 0.25rem;
|
|
2087
2150
|
}
|
|
2088
2151
|
|
|
2089
2152
|
.g-1,
|
|
2090
2153
|
.gy-1 {
|
|
2091
|
-
--
|
|
2154
|
+
--bsi-gutter-y: 0.25rem;
|
|
2092
2155
|
}
|
|
2093
2156
|
|
|
2094
2157
|
.g-2,
|
|
2095
2158
|
.gx-2 {
|
|
2096
|
-
--
|
|
2159
|
+
--bsi-gutter-x: 0.5rem;
|
|
2097
2160
|
}
|
|
2098
2161
|
|
|
2099
2162
|
.g-2,
|
|
2100
2163
|
.gy-2 {
|
|
2101
|
-
--
|
|
2164
|
+
--bsi-gutter-y: 0.5rem;
|
|
2102
2165
|
}
|
|
2103
2166
|
|
|
2104
2167
|
.g-3,
|
|
2105
2168
|
.gx-3 {
|
|
2106
|
-
--
|
|
2169
|
+
--bsi-gutter-x: 1rem;
|
|
2107
2170
|
}
|
|
2108
2171
|
|
|
2109
2172
|
.g-3,
|
|
2110
2173
|
.gy-3 {
|
|
2111
|
-
--
|
|
2174
|
+
--bsi-gutter-y: 1rem;
|
|
2112
2175
|
}
|
|
2113
2176
|
|
|
2114
2177
|
.g-4,
|
|
2115
2178
|
.gx-4 {
|
|
2116
|
-
--
|
|
2179
|
+
--bsi-gutter-x: 1.5rem;
|
|
2117
2180
|
}
|
|
2118
2181
|
|
|
2119
2182
|
.g-4,
|
|
2120
2183
|
.gy-4 {
|
|
2121
|
-
--
|
|
2184
|
+
--bsi-gutter-y: 1.5rem;
|
|
2122
2185
|
}
|
|
2123
2186
|
|
|
2124
2187
|
.g-5,
|
|
2125
2188
|
.gx-5 {
|
|
2126
|
-
--
|
|
2189
|
+
--bsi-gutter-x: 3rem;
|
|
2127
2190
|
}
|
|
2128
2191
|
|
|
2129
2192
|
.g-5,
|
|
2130
2193
|
.gy-5 {
|
|
2131
|
-
--
|
|
2194
|
+
--bsi-gutter-y: 3rem;
|
|
2132
2195
|
}
|
|
2133
2196
|
|
|
2134
2197
|
@media (min-width: 576px) {
|
|
@@ -2253,51 +2316,51 @@ a.btn-outline-danger:active {
|
|
|
2253
2316
|
}
|
|
2254
2317
|
.g-sm-0,
|
|
2255
2318
|
.gx-sm-0 {
|
|
2256
|
-
--
|
|
2319
|
+
--bsi-gutter-x: 0;
|
|
2257
2320
|
}
|
|
2258
2321
|
.g-sm-0,
|
|
2259
2322
|
.gy-sm-0 {
|
|
2260
|
-
--
|
|
2323
|
+
--bsi-gutter-y: 0;
|
|
2261
2324
|
}
|
|
2262
2325
|
.g-sm-1,
|
|
2263
2326
|
.gx-sm-1 {
|
|
2264
|
-
--
|
|
2327
|
+
--bsi-gutter-x: 0.25rem;
|
|
2265
2328
|
}
|
|
2266
2329
|
.g-sm-1,
|
|
2267
2330
|
.gy-sm-1 {
|
|
2268
|
-
--
|
|
2331
|
+
--bsi-gutter-y: 0.25rem;
|
|
2269
2332
|
}
|
|
2270
2333
|
.g-sm-2,
|
|
2271
2334
|
.gx-sm-2 {
|
|
2272
|
-
--
|
|
2335
|
+
--bsi-gutter-x: 0.5rem;
|
|
2273
2336
|
}
|
|
2274
2337
|
.g-sm-2,
|
|
2275
2338
|
.gy-sm-2 {
|
|
2276
|
-
--
|
|
2339
|
+
--bsi-gutter-y: 0.5rem;
|
|
2277
2340
|
}
|
|
2278
2341
|
.g-sm-3,
|
|
2279
2342
|
.gx-sm-3 {
|
|
2280
|
-
--
|
|
2343
|
+
--bsi-gutter-x: 1rem;
|
|
2281
2344
|
}
|
|
2282
2345
|
.g-sm-3,
|
|
2283
2346
|
.gy-sm-3 {
|
|
2284
|
-
--
|
|
2347
|
+
--bsi-gutter-y: 1rem;
|
|
2285
2348
|
}
|
|
2286
2349
|
.g-sm-4,
|
|
2287
2350
|
.gx-sm-4 {
|
|
2288
|
-
--
|
|
2351
|
+
--bsi-gutter-x: 1.5rem;
|
|
2289
2352
|
}
|
|
2290
2353
|
.g-sm-4,
|
|
2291
2354
|
.gy-sm-4 {
|
|
2292
|
-
--
|
|
2355
|
+
--bsi-gutter-y: 1.5rem;
|
|
2293
2356
|
}
|
|
2294
2357
|
.g-sm-5,
|
|
2295
2358
|
.gx-sm-5 {
|
|
2296
|
-
--
|
|
2359
|
+
--bsi-gutter-x: 3rem;
|
|
2297
2360
|
}
|
|
2298
2361
|
.g-sm-5,
|
|
2299
2362
|
.gy-sm-5 {
|
|
2300
|
-
--
|
|
2363
|
+
--bsi-gutter-y: 3rem;
|
|
2301
2364
|
}
|
|
2302
2365
|
}
|
|
2303
2366
|
@media (min-width: 768px) {
|
|
@@ -2422,51 +2485,51 @@ a.btn-outline-danger:active {
|
|
|
2422
2485
|
}
|
|
2423
2486
|
.g-md-0,
|
|
2424
2487
|
.gx-md-0 {
|
|
2425
|
-
--
|
|
2488
|
+
--bsi-gutter-x: 0;
|
|
2426
2489
|
}
|
|
2427
2490
|
.g-md-0,
|
|
2428
2491
|
.gy-md-0 {
|
|
2429
|
-
--
|
|
2492
|
+
--bsi-gutter-y: 0;
|
|
2430
2493
|
}
|
|
2431
2494
|
.g-md-1,
|
|
2432
2495
|
.gx-md-1 {
|
|
2433
|
-
--
|
|
2496
|
+
--bsi-gutter-x: 0.25rem;
|
|
2434
2497
|
}
|
|
2435
2498
|
.g-md-1,
|
|
2436
2499
|
.gy-md-1 {
|
|
2437
|
-
--
|
|
2500
|
+
--bsi-gutter-y: 0.25rem;
|
|
2438
2501
|
}
|
|
2439
2502
|
.g-md-2,
|
|
2440
2503
|
.gx-md-2 {
|
|
2441
|
-
--
|
|
2504
|
+
--bsi-gutter-x: 0.5rem;
|
|
2442
2505
|
}
|
|
2443
2506
|
.g-md-2,
|
|
2444
2507
|
.gy-md-2 {
|
|
2445
|
-
--
|
|
2508
|
+
--bsi-gutter-y: 0.5rem;
|
|
2446
2509
|
}
|
|
2447
2510
|
.g-md-3,
|
|
2448
2511
|
.gx-md-3 {
|
|
2449
|
-
--
|
|
2512
|
+
--bsi-gutter-x: 1rem;
|
|
2450
2513
|
}
|
|
2451
2514
|
.g-md-3,
|
|
2452
2515
|
.gy-md-3 {
|
|
2453
|
-
--
|
|
2516
|
+
--bsi-gutter-y: 1rem;
|
|
2454
2517
|
}
|
|
2455
2518
|
.g-md-4,
|
|
2456
2519
|
.gx-md-4 {
|
|
2457
|
-
--
|
|
2520
|
+
--bsi-gutter-x: 1.5rem;
|
|
2458
2521
|
}
|
|
2459
2522
|
.g-md-4,
|
|
2460
2523
|
.gy-md-4 {
|
|
2461
|
-
--
|
|
2524
|
+
--bsi-gutter-y: 1.5rem;
|
|
2462
2525
|
}
|
|
2463
2526
|
.g-md-5,
|
|
2464
2527
|
.gx-md-5 {
|
|
2465
|
-
--
|
|
2528
|
+
--bsi-gutter-x: 3rem;
|
|
2466
2529
|
}
|
|
2467
2530
|
.g-md-5,
|
|
2468
2531
|
.gy-md-5 {
|
|
2469
|
-
--
|
|
2532
|
+
--bsi-gutter-y: 3rem;
|
|
2470
2533
|
}
|
|
2471
2534
|
}
|
|
2472
2535
|
@media (min-width: 992px) {
|
|
@@ -2591,51 +2654,51 @@ a.btn-outline-danger:active {
|
|
|
2591
2654
|
}
|
|
2592
2655
|
.g-lg-0,
|
|
2593
2656
|
.gx-lg-0 {
|
|
2594
|
-
--
|
|
2657
|
+
--bsi-gutter-x: 0;
|
|
2595
2658
|
}
|
|
2596
2659
|
.g-lg-0,
|
|
2597
2660
|
.gy-lg-0 {
|
|
2598
|
-
--
|
|
2661
|
+
--bsi-gutter-y: 0;
|
|
2599
2662
|
}
|
|
2600
2663
|
.g-lg-1,
|
|
2601
2664
|
.gx-lg-1 {
|
|
2602
|
-
--
|
|
2665
|
+
--bsi-gutter-x: 0.25rem;
|
|
2603
2666
|
}
|
|
2604
2667
|
.g-lg-1,
|
|
2605
2668
|
.gy-lg-1 {
|
|
2606
|
-
--
|
|
2669
|
+
--bsi-gutter-y: 0.25rem;
|
|
2607
2670
|
}
|
|
2608
2671
|
.g-lg-2,
|
|
2609
2672
|
.gx-lg-2 {
|
|
2610
|
-
--
|
|
2673
|
+
--bsi-gutter-x: 0.5rem;
|
|
2611
2674
|
}
|
|
2612
2675
|
.g-lg-2,
|
|
2613
2676
|
.gy-lg-2 {
|
|
2614
|
-
--
|
|
2677
|
+
--bsi-gutter-y: 0.5rem;
|
|
2615
2678
|
}
|
|
2616
2679
|
.g-lg-3,
|
|
2617
2680
|
.gx-lg-3 {
|
|
2618
|
-
--
|
|
2681
|
+
--bsi-gutter-x: 1rem;
|
|
2619
2682
|
}
|
|
2620
2683
|
.g-lg-3,
|
|
2621
2684
|
.gy-lg-3 {
|
|
2622
|
-
--
|
|
2685
|
+
--bsi-gutter-y: 1rem;
|
|
2623
2686
|
}
|
|
2624
2687
|
.g-lg-4,
|
|
2625
2688
|
.gx-lg-4 {
|
|
2626
|
-
--
|
|
2689
|
+
--bsi-gutter-x: 1.5rem;
|
|
2627
2690
|
}
|
|
2628
2691
|
.g-lg-4,
|
|
2629
2692
|
.gy-lg-4 {
|
|
2630
|
-
--
|
|
2693
|
+
--bsi-gutter-y: 1.5rem;
|
|
2631
2694
|
}
|
|
2632
2695
|
.g-lg-5,
|
|
2633
2696
|
.gx-lg-5 {
|
|
2634
|
-
--
|
|
2697
|
+
--bsi-gutter-x: 3rem;
|
|
2635
2698
|
}
|
|
2636
2699
|
.g-lg-5,
|
|
2637
2700
|
.gy-lg-5 {
|
|
2638
|
-
--
|
|
2701
|
+
--bsi-gutter-y: 3rem;
|
|
2639
2702
|
}
|
|
2640
2703
|
}
|
|
2641
2704
|
@media (min-width: 1200px) {
|
|
@@ -2760,51 +2823,51 @@ a.btn-outline-danger:active {
|
|
|
2760
2823
|
}
|
|
2761
2824
|
.g-xl-0,
|
|
2762
2825
|
.gx-xl-0 {
|
|
2763
|
-
--
|
|
2826
|
+
--bsi-gutter-x: 0;
|
|
2764
2827
|
}
|
|
2765
2828
|
.g-xl-0,
|
|
2766
2829
|
.gy-xl-0 {
|
|
2767
|
-
--
|
|
2830
|
+
--bsi-gutter-y: 0;
|
|
2768
2831
|
}
|
|
2769
2832
|
.g-xl-1,
|
|
2770
2833
|
.gx-xl-1 {
|
|
2771
|
-
--
|
|
2834
|
+
--bsi-gutter-x: 0.25rem;
|
|
2772
2835
|
}
|
|
2773
2836
|
.g-xl-1,
|
|
2774
2837
|
.gy-xl-1 {
|
|
2775
|
-
--
|
|
2838
|
+
--bsi-gutter-y: 0.25rem;
|
|
2776
2839
|
}
|
|
2777
2840
|
.g-xl-2,
|
|
2778
2841
|
.gx-xl-2 {
|
|
2779
|
-
--
|
|
2842
|
+
--bsi-gutter-x: 0.5rem;
|
|
2780
2843
|
}
|
|
2781
2844
|
.g-xl-2,
|
|
2782
2845
|
.gy-xl-2 {
|
|
2783
|
-
--
|
|
2846
|
+
--bsi-gutter-y: 0.5rem;
|
|
2784
2847
|
}
|
|
2785
2848
|
.g-xl-3,
|
|
2786
2849
|
.gx-xl-3 {
|
|
2787
|
-
--
|
|
2850
|
+
--bsi-gutter-x: 1rem;
|
|
2788
2851
|
}
|
|
2789
2852
|
.g-xl-3,
|
|
2790
2853
|
.gy-xl-3 {
|
|
2791
|
-
--
|
|
2854
|
+
--bsi-gutter-y: 1rem;
|
|
2792
2855
|
}
|
|
2793
2856
|
.g-xl-4,
|
|
2794
2857
|
.gx-xl-4 {
|
|
2795
|
-
--
|
|
2858
|
+
--bsi-gutter-x: 1.5rem;
|
|
2796
2859
|
}
|
|
2797
2860
|
.g-xl-4,
|
|
2798
2861
|
.gy-xl-4 {
|
|
2799
|
-
--
|
|
2862
|
+
--bsi-gutter-y: 1.5rem;
|
|
2800
2863
|
}
|
|
2801
2864
|
.g-xl-5,
|
|
2802
2865
|
.gx-xl-5 {
|
|
2803
|
-
--
|
|
2866
|
+
--bsi-gutter-x: 3rem;
|
|
2804
2867
|
}
|
|
2805
2868
|
.g-xl-5,
|
|
2806
2869
|
.gy-xl-5 {
|
|
2807
|
-
--
|
|
2870
|
+
--bsi-gutter-y: 3rem;
|
|
2808
2871
|
}
|
|
2809
2872
|
}
|
|
2810
2873
|
@media (min-width: 1400px) {
|
|
@@ -2929,64 +2992,66 @@ a.btn-outline-danger:active {
|
|
|
2929
2992
|
}
|
|
2930
2993
|
.g-xxl-0,
|
|
2931
2994
|
.gx-xxl-0 {
|
|
2932
|
-
--
|
|
2995
|
+
--bsi-gutter-x: 0;
|
|
2933
2996
|
}
|
|
2934
2997
|
.g-xxl-0,
|
|
2935
2998
|
.gy-xxl-0 {
|
|
2936
|
-
--
|
|
2999
|
+
--bsi-gutter-y: 0;
|
|
2937
3000
|
}
|
|
2938
3001
|
.g-xxl-1,
|
|
2939
3002
|
.gx-xxl-1 {
|
|
2940
|
-
--
|
|
3003
|
+
--bsi-gutter-x: 0.25rem;
|
|
2941
3004
|
}
|
|
2942
3005
|
.g-xxl-1,
|
|
2943
3006
|
.gy-xxl-1 {
|
|
2944
|
-
--
|
|
3007
|
+
--bsi-gutter-y: 0.25rem;
|
|
2945
3008
|
}
|
|
2946
3009
|
.g-xxl-2,
|
|
2947
3010
|
.gx-xxl-2 {
|
|
2948
|
-
--
|
|
3011
|
+
--bsi-gutter-x: 0.5rem;
|
|
2949
3012
|
}
|
|
2950
3013
|
.g-xxl-2,
|
|
2951
3014
|
.gy-xxl-2 {
|
|
2952
|
-
--
|
|
3015
|
+
--bsi-gutter-y: 0.5rem;
|
|
2953
3016
|
}
|
|
2954
3017
|
.g-xxl-3,
|
|
2955
3018
|
.gx-xxl-3 {
|
|
2956
|
-
--
|
|
3019
|
+
--bsi-gutter-x: 1rem;
|
|
2957
3020
|
}
|
|
2958
3021
|
.g-xxl-3,
|
|
2959
3022
|
.gy-xxl-3 {
|
|
2960
|
-
--
|
|
3023
|
+
--bsi-gutter-y: 1rem;
|
|
2961
3024
|
}
|
|
2962
3025
|
.g-xxl-4,
|
|
2963
3026
|
.gx-xxl-4 {
|
|
2964
|
-
--
|
|
3027
|
+
--bsi-gutter-x: 1.5rem;
|
|
2965
3028
|
}
|
|
2966
3029
|
.g-xxl-4,
|
|
2967
3030
|
.gy-xxl-4 {
|
|
2968
|
-
--
|
|
3031
|
+
--bsi-gutter-y: 1.5rem;
|
|
2969
3032
|
}
|
|
2970
3033
|
.g-xxl-5,
|
|
2971
3034
|
.gx-xxl-5 {
|
|
2972
|
-
--
|
|
3035
|
+
--bsi-gutter-x: 3rem;
|
|
2973
3036
|
}
|
|
2974
3037
|
.g-xxl-5,
|
|
2975
3038
|
.gy-xxl-5 {
|
|
2976
|
-
--
|
|
3039
|
+
--bsi-gutter-y: 3rem;
|
|
2977
3040
|
}
|
|
2978
3041
|
}
|
|
2979
3042
|
.row.variable-gutters {
|
|
2980
3043
|
margin-right: -12px;
|
|
2981
3044
|
margin-left: -12px;
|
|
2982
|
-
margin-right: -6px;
|
|
2983
|
-
margin-left: -6px;
|
|
2984
3045
|
}
|
|
2985
3046
|
.row.variable-gutters > .col,
|
|
2986
3047
|
.row.variable-gutters > [class*=col-] {
|
|
2987
3048
|
padding-right: 12px;
|
|
2988
3049
|
padding-left: 12px;
|
|
2989
3050
|
}
|
|
3051
|
+
.row.variable-gutters {
|
|
3052
|
+
margin-right: -6px;
|
|
3053
|
+
margin-left: -6px;
|
|
3054
|
+
}
|
|
2990
3055
|
.row.variable-gutters > .col,
|
|
2991
3056
|
.row.variable-gutters > [class*=col-] {
|
|
2992
3057
|
padding-right: 6px;
|
|
@@ -3049,9 +3114,9 @@ a.btn-outline-danger:active {
|
|
|
3049
3114
|
}
|
|
3050
3115
|
|
|
3051
3116
|
.row.row-column-border > [class^=col-] {
|
|
3052
|
-
padding-top: var(--
|
|
3053
|
-
padding-bottom: var(--
|
|
3054
|
-
border-top: var(--
|
|
3117
|
+
padding-top: var(--bsi-spacing-l);
|
|
3118
|
+
padding-bottom: var(--bsi-spacing-l);
|
|
3119
|
+
border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3055
3120
|
}
|
|
3056
3121
|
.row.row-column-border > [class^=col-]:first-child {
|
|
3057
3122
|
border: none;
|
|
@@ -3063,23 +3128,23 @@ a.btn-outline-danger:active {
|
|
|
3063
3128
|
padding-right: 0;
|
|
3064
3129
|
}
|
|
3065
3130
|
.row.row-column-menu-left > [class^=col-]:first-child {
|
|
3066
|
-
padding: var(--
|
|
3131
|
+
padding: var(--bsi-spacing-s) 0;
|
|
3067
3132
|
}
|
|
3068
3133
|
.row.row-column-menu-right > [class^=col-]:last-child {
|
|
3069
|
-
padding: var(--
|
|
3134
|
+
padding: var(--bsi-spacing-s) 0;
|
|
3070
3135
|
}
|
|
3071
3136
|
.row.row-card {
|
|
3072
|
-
background-color: var(--
|
|
3137
|
+
background-color: var(--bsi-color-background-inverse);
|
|
3073
3138
|
}
|
|
3074
3139
|
@media (min-width: 992px) {
|
|
3075
3140
|
.row.row-column-border {
|
|
3076
3141
|
margin-top: 1rem;
|
|
3077
|
-
border-top: var(--
|
|
3142
|
+
border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3078
3143
|
}
|
|
3079
3144
|
.row.row-column-border > [class^=col-] {
|
|
3080
3145
|
padding: 3rem 3rem;
|
|
3081
3146
|
border-top: none;
|
|
3082
|
-
border-left: var(--
|
|
3147
|
+
border-left: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3083
3148
|
}
|
|
3084
3149
|
.row.row-column-border > [class^=col-]:first-child {
|
|
3085
3150
|
border: none;
|
|
@@ -3125,40 +3190,40 @@ a.btn-outline-danger:active {
|
|
|
3125
3190
|
}
|
|
3126
3191
|
}
|
|
3127
3192
|
.row.row-border h1 {
|
|
3128
|
-
border-bottom: var(--
|
|
3129
|
-
padding-bottom: var(--
|
|
3130
|
-
margin-bottom: var(--
|
|
3193
|
+
border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3194
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3195
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3131
3196
|
}
|
|
3132
3197
|
.row.row-border h2 {
|
|
3133
|
-
border-bottom: var(--
|
|
3134
|
-
padding-bottom: var(--
|
|
3135
|
-
margin-bottom: var(--
|
|
3198
|
+
border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3199
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3200
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3136
3201
|
}
|
|
3137
3202
|
.row.row-border h3 {
|
|
3138
|
-
border-bottom: var(--
|
|
3139
|
-
padding-bottom: var(--
|
|
3140
|
-
margin-bottom: var(--
|
|
3203
|
+
border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3204
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3205
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3141
3206
|
}
|
|
3142
3207
|
.row.row-border h4 {
|
|
3143
|
-
border-bottom: var(--
|
|
3144
|
-
padding-bottom: var(--
|
|
3145
|
-
margin-bottom: var(--
|
|
3208
|
+
border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3209
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3210
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3146
3211
|
}
|
|
3147
3212
|
.row.row-border h5 {
|
|
3148
|
-
border-bottom: var(--
|
|
3149
|
-
padding-bottom: var(--
|
|
3150
|
-
margin-bottom: var(--
|
|
3213
|
+
border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3214
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3215
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3151
3216
|
}
|
|
3152
3217
|
.row.row-border h6 {
|
|
3153
|
-
border-bottom: var(--
|
|
3154
|
-
padding-bottom: var(--
|
|
3155
|
-
margin-bottom: var(--
|
|
3218
|
+
border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3219
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3220
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3156
3221
|
}
|
|
3157
3222
|
@media (min-width: 576px) {
|
|
3158
3223
|
.row.row-border {
|
|
3159
|
-
border-bottom: var(--
|
|
3160
|
-
padding-bottom: var(--
|
|
3161
|
-
margin-bottom: var(--
|
|
3224
|
+
border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3225
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3226
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3162
3227
|
}
|
|
3163
3228
|
.row.row-border h1 {
|
|
3164
3229
|
border: none;
|
|
@@ -3205,9 +3270,9 @@ a.btn-outline-danger:active {
|
|
|
3205
3270
|
width: auto;
|
|
3206
3271
|
}
|
|
3207
3272
|
.sticky-wrapper.is-sticky.navbar-wrapper .navbar {
|
|
3208
|
-
padding-top: var(--
|
|
3209
|
-
padding-bottom: var(--
|
|
3210
|
-
border-top: var(--
|
|
3273
|
+
padding-top: var(--bsi-spacing-s);
|
|
3274
|
+
padding-bottom: var(--bsi-spacing-s);
|
|
3275
|
+
border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3211
3276
|
}
|
|
3212
3277
|
.sticky-wrapper.is-sticky.navbar-wrapper.sticky-expanded {
|
|
3213
3278
|
z-index: auto;
|
|
@@ -3247,14 +3312,20 @@ a.btn-outline-danger:active {
|
|
|
3247
3312
|
bottom: auto;
|
|
3248
3313
|
}
|
|
3249
3314
|
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3315
|
+
.progress {
|
|
3316
|
+
--bsi-progress-bg: var(--bsi-color-background-secondary-lighter);
|
|
3317
|
+
--bsi-progress-border-radius: var(--bsi-radius-smooth);
|
|
3318
|
+
--bsi-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
3319
|
+
--bsi-progress-label-color: var(--bsi-color-text-secondary);
|
|
3320
|
+
--bsi-progress-label-font-size: var(--bsi-label-font-size-xs);
|
|
3321
|
+
--bsi-progress-bar-transition: width 0.5s ease;
|
|
3322
|
+
--bsi-progress-bar-bg: var(--bsi-color-background-secondary);
|
|
3323
|
+
--bsi-progress-height: 4px;
|
|
3254
3324
|
}
|
|
3325
|
+
|
|
3255
3326
|
.progress-bar-striped {
|
|
3256
3327
|
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
3257
|
-
background-size: var(--
|
|
3328
|
+
background-size: var(--bsi-progress-height) var(--bsi-progress-height);
|
|
3258
3329
|
}
|
|
3259
3330
|
|
|
3260
3331
|
.progress-bar-animated {
|
|
@@ -3266,6 +3337,11 @@ a.btn-outline-danger:active {
|
|
|
3266
3337
|
}
|
|
3267
3338
|
}
|
|
3268
3339
|
|
|
3340
|
+
@keyframes progress-bar-stripes {
|
|
3341
|
+
0% {
|
|
3342
|
+
background-position-x: 16px;
|
|
3343
|
+
}
|
|
3344
|
+
}
|
|
3269
3345
|
@keyframes progressBarIndeterminate {
|
|
3270
3346
|
0% {
|
|
3271
3347
|
left: -5%;
|
|
@@ -3279,25 +3355,13 @@ a.btn-outline-danger:active {
|
|
|
3279
3355
|
}
|
|
3280
3356
|
}
|
|
3281
3357
|
.progress {
|
|
3282
|
-
--bs-progress-height: 16px;
|
|
3283
|
-
--bs-progress-font-size: 0.75rem;
|
|
3284
|
-
--bs-progress-bg: hsl(0, 0%, 90%);
|
|
3285
|
-
--bs-progress-border-radius: 0;
|
|
3286
|
-
--bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
3287
|
-
--bs-progress-bar-color: hsl(0, 0%, 100%);
|
|
3288
|
-
--bs-progress-bar-bg: hsl(210, 100%, 40%);
|
|
3289
|
-
--bs-progress-bar-transition: width 0.6s ease;
|
|
3290
3358
|
display: flex;
|
|
3291
3359
|
overflow: hidden;
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
height: 4px;
|
|
3360
|
+
background-color: var(--bsi-progress-bg);
|
|
3361
|
+
border-radius: var(--bsi-progress-border-radius);
|
|
3362
|
+
height: var(--bsi-progress-height);
|
|
3296
3363
|
box-shadow: none;
|
|
3297
3364
|
}
|
|
3298
|
-
.progress.progress-color {
|
|
3299
|
-
background-color: hsl(210, 3%, 85%);
|
|
3300
|
-
}
|
|
3301
3365
|
.progress.progress-indeterminate {
|
|
3302
3366
|
position: relative;
|
|
3303
3367
|
}
|
|
@@ -3314,22 +3378,23 @@ a.btn-outline-danger:active {
|
|
|
3314
3378
|
flex-direction: column;
|
|
3315
3379
|
justify-content: center;
|
|
3316
3380
|
overflow: hidden;
|
|
3317
|
-
color: var(--bs-progress-bar-color);
|
|
3318
3381
|
text-align: center;
|
|
3319
3382
|
white-space: nowrap;
|
|
3320
|
-
transition: var(--
|
|
3321
|
-
background-color: hsl(210, 17%, 44%);
|
|
3383
|
+
transition: var(--bsi-progress-bar-transition);
|
|
3322
3384
|
}
|
|
3323
3385
|
@media (prefers-reduced-motion: reduce) {
|
|
3324
3386
|
.progress-bar {
|
|
3325
3387
|
transition: none;
|
|
3326
3388
|
}
|
|
3327
3389
|
}
|
|
3390
|
+
.progress-bar {
|
|
3391
|
+
background-color: var(--bsi-progress-bar-bg);
|
|
3392
|
+
}
|
|
3328
3393
|
|
|
3329
3394
|
.progress-bar-label {
|
|
3330
3395
|
text-align: right;
|
|
3331
|
-
font-size:
|
|
3332
|
-
color:
|
|
3396
|
+
font-size: var(--bsi-progress-label-font-size);
|
|
3397
|
+
color: var(--bsi-progress-label-color);
|
|
3333
3398
|
font-weight: 500;
|
|
3334
3399
|
}
|
|
3335
3400
|
|
|
@@ -3339,55 +3404,50 @@ a.btn-outline-danger:active {
|
|
|
3339
3404
|
bottom: 0;
|
|
3340
3405
|
width: 100%;
|
|
3341
3406
|
left: 0;
|
|
3342
|
-
border-radius: 0 0
|
|
3407
|
+
border-radius: 0 0 var(--bsi-progress-border-radius) var(--bsi-progress-border-radius);
|
|
3343
3408
|
}
|
|
3344
3409
|
.btn-progress .progress-bar {
|
|
3345
|
-
height:
|
|
3410
|
+
height: var(--bsi-progress-height);
|
|
3346
3411
|
}
|
|
3347
3412
|
|
|
3348
|
-
@media (min-width: 576px) {
|
|
3349
|
-
.progress-bar-label {
|
|
3350
|
-
font-size: 0.75rem;
|
|
3351
|
-
}
|
|
3352
|
-
}
|
|
3353
3413
|
body {
|
|
3354
|
-
font-family: var(--
|
|
3414
|
+
font-family: var(--bsi-font-sans);
|
|
3355
3415
|
}
|
|
3356
3416
|
|
|
3357
3417
|
p,
|
|
3358
3418
|
ul,
|
|
3359
3419
|
ol,
|
|
3360
3420
|
dl {
|
|
3361
|
-
font-size: var(--
|
|
3362
|
-
line-height: var(--
|
|
3421
|
+
font-size: var(--bsi-body-font-size);
|
|
3422
|
+
line-height: var(--bsi-body-leading);
|
|
3363
3423
|
}
|
|
3364
3424
|
|
|
3365
3425
|
caption,
|
|
3366
3426
|
figcaption {
|
|
3367
|
-
font-size: var(--
|
|
3368
|
-
line-height: var(--
|
|
3427
|
+
font-size: var(--bsi-caption-font-size);
|
|
3428
|
+
line-height: var(--bsi-caption-leading);
|
|
3369
3429
|
}
|
|
3370
3430
|
|
|
3371
3431
|
b,
|
|
3372
3432
|
strong {
|
|
3373
|
-
font-weight: var(--
|
|
3433
|
+
font-weight: var(--bsi-font-weight-strong);
|
|
3374
3434
|
}
|
|
3375
3435
|
|
|
3376
3436
|
mark,
|
|
3377
3437
|
code {
|
|
3378
|
-
padding: 0 var(--
|
|
3438
|
+
padding: 0 var(--bsi-spacing-3xs);
|
|
3379
3439
|
}
|
|
3380
3440
|
|
|
3381
3441
|
mark {
|
|
3382
|
-
background-color: var(--
|
|
3442
|
+
background-color: var(--bsi-highlight-background);
|
|
3383
3443
|
}
|
|
3384
3444
|
|
|
3385
3445
|
pre,
|
|
3386
3446
|
code,
|
|
3387
3447
|
kbd,
|
|
3388
3448
|
samp {
|
|
3389
|
-
border-radius: var(--
|
|
3390
|
-
font-family: var(--
|
|
3449
|
+
border-radius: var(--bsi-radius-smooth);
|
|
3450
|
+
font-family: var(--bsi-font-mono);
|
|
3391
3451
|
}
|
|
3392
3452
|
|
|
3393
3453
|
ins,
|
|
@@ -3395,18 +3455,18 @@ del {
|
|
|
3395
3455
|
position: relative;
|
|
3396
3456
|
display: flex;
|
|
3397
3457
|
align-items: center;
|
|
3398
|
-
padding: var(--
|
|
3399
|
-
font: var(--
|
|
3458
|
+
padding: var(--bsi-spacing-3xs) var(--bsi-spacing-m);
|
|
3459
|
+
font: var(--bsi-body-font-size);
|
|
3400
3460
|
text-decoration: none;
|
|
3401
3461
|
}
|
|
3402
3462
|
|
|
3403
3463
|
ins {
|
|
3404
|
-
background-color: var(--
|
|
3464
|
+
background-color: var(--bsi-ins-background);
|
|
3405
3465
|
text-decoration: none;
|
|
3406
3466
|
}
|
|
3407
3467
|
|
|
3408
3468
|
del {
|
|
3409
|
-
background-color: var(--
|
|
3469
|
+
background-color: var(--bsi-del-background);
|
|
3410
3470
|
}
|
|
3411
3471
|
|
|
3412
3472
|
del::before,
|
|
@@ -3425,57 +3485,57 @@ ins::before {
|
|
|
3425
3485
|
|
|
3426
3486
|
kbd {
|
|
3427
3487
|
margin: 0 2px;
|
|
3428
|
-
padding: 2px var(--
|
|
3429
|
-
border: var(--
|
|
3430
|
-
background-color: var(--
|
|
3431
|
-
box-shadow: var(--
|
|
3432
|
-
color: var(--
|
|
3433
|
-
font-size: var(--
|
|
3434
|
-
font-weight: var(--
|
|
3488
|
+
padding: 2px var(--bsi-spacing-3xs);
|
|
3489
|
+
border: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
|
|
3490
|
+
background-color: var(--bsi-color-background-secondary-lighter);
|
|
3491
|
+
box-shadow: var(--bsi-elevation-low), 0 2px 0 0 hsla(255, 0%, 100%, 0.7) inset;
|
|
3492
|
+
color: var(--bsi-color-text-secondary);
|
|
3493
|
+
font-size: var(--bsi-font-size-1);
|
|
3494
|
+
font-weight: var(--bsi-font-weight-solid);
|
|
3435
3495
|
white-space: nowrap;
|
|
3436
3496
|
}
|
|
3437
3497
|
kbd kbd {
|
|
3438
3498
|
padding: 0;
|
|
3439
|
-
font-size: var(--
|
|
3499
|
+
font-size: var(--bsi-code-font-size);
|
|
3440
3500
|
}
|
|
3441
3501
|
|
|
3442
3502
|
small,
|
|
3443
3503
|
.small {
|
|
3444
|
-
font-size: var(--
|
|
3504
|
+
font-size: var(--bsi-caption-font-size);
|
|
3445
3505
|
}
|
|
3446
3506
|
|
|
3447
3507
|
.x-small {
|
|
3448
|
-
font-size: var(--
|
|
3508
|
+
font-size: var(--bsi-font-size-1);
|
|
3449
3509
|
}
|
|
3450
3510
|
|
|
3451
3511
|
h1,
|
|
3452
3512
|
.h1 {
|
|
3453
|
-
font-size: var(--
|
|
3513
|
+
font-size: var(--bsi-heading-1-font-size);
|
|
3454
3514
|
}
|
|
3455
3515
|
|
|
3456
3516
|
h2,
|
|
3457
3517
|
.h2 {
|
|
3458
|
-
font-size: var(--
|
|
3518
|
+
font-size: var(--bsi-heading-2-font-size);
|
|
3459
3519
|
}
|
|
3460
3520
|
|
|
3461
3521
|
h3,
|
|
3462
3522
|
.h3 {
|
|
3463
|
-
font-size: var(--
|
|
3523
|
+
font-size: var(--bsi-heading-3-font-size);
|
|
3464
3524
|
}
|
|
3465
3525
|
|
|
3466
3526
|
h4,
|
|
3467
3527
|
.h4 {
|
|
3468
|
-
font-size: var(--
|
|
3528
|
+
font-size: var(--bsi-heading-4-font-size);
|
|
3469
3529
|
}
|
|
3470
3530
|
|
|
3471
3531
|
h5,
|
|
3472
3532
|
.h5 {
|
|
3473
|
-
font-size: var(--
|
|
3533
|
+
font-size: var(--bsi-heading-5-font-size);
|
|
3474
3534
|
}
|
|
3475
3535
|
|
|
3476
3536
|
h6,
|
|
3477
3537
|
.h6 {
|
|
3478
|
-
font-size: var(--
|
|
3538
|
+
font-size: var(--bsi-heading-6-font-size);
|
|
3479
3539
|
}
|
|
3480
3540
|
|
|
3481
3541
|
h1,
|
|
@@ -3491,8 +3551,8 @@ h5,
|
|
|
3491
3551
|
h6,
|
|
3492
3552
|
.h6 {
|
|
3493
3553
|
margin-top: 0;
|
|
3494
|
-
margin-bottom: var(--
|
|
3495
|
-
line-height: var(--
|
|
3554
|
+
margin-bottom: var(--bsi-heading-spacing);
|
|
3555
|
+
line-height: var(--bsi-heading-leading);
|
|
3496
3556
|
}
|
|
3497
3557
|
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + h1, p + h1,
|
|
3498
3558
|
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + .h1,
|
|
@@ -3517,7 +3577,7 @@ p + .h5,
|
|
|
3517
3577
|
p + h6,
|
|
3518
3578
|
:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + .h6,
|
|
3519
3579
|
p + .h6 {
|
|
3520
|
-
padding-top: var(--
|
|
3580
|
+
padding-top: var(--bsi-spacing-s);
|
|
3521
3581
|
}
|
|
3522
3582
|
|
|
3523
3583
|
h1,
|
|
@@ -3526,7 +3586,7 @@ h3,
|
|
|
3526
3586
|
.h1,
|
|
3527
3587
|
.h2,
|
|
3528
3588
|
.h3 {
|
|
3529
|
-
font-weight: var(--
|
|
3589
|
+
font-weight: var(--bsi-heading-font-weight);
|
|
3530
3590
|
}
|
|
3531
3591
|
|
|
3532
3592
|
h4,
|
|
@@ -3535,7 +3595,7 @@ h6,
|
|
|
3535
3595
|
.h4,
|
|
3536
3596
|
.h5,
|
|
3537
3597
|
.h6 {
|
|
3538
|
-
font-weight: var(--
|
|
3598
|
+
font-weight: var(--bsi-heading-font-weight-weak);
|
|
3539
3599
|
}
|
|
3540
3600
|
|
|
3541
3601
|
h1,
|
|
@@ -3545,37 +3605,37 @@ h1,
|
|
|
3545
3605
|
}
|
|
3546
3606
|
|
|
3547
3607
|
.font-serif {
|
|
3548
|
-
font-family: var(--
|
|
3608
|
+
font-family: var(--bsi-font-serif) !important;
|
|
3549
3609
|
}
|
|
3550
3610
|
|
|
3551
3611
|
.font-sans-serif {
|
|
3552
|
-
font-family: var(--
|
|
3612
|
+
font-family: var(--bsi-font-sans) !important;
|
|
3553
3613
|
}
|
|
3554
3614
|
|
|
3555
3615
|
.font-monospace {
|
|
3556
|
-
font-family: var(--
|
|
3616
|
+
font-family: var(--bsi-font-mono) !important;
|
|
3557
3617
|
}
|
|
3558
3618
|
|
|
3559
3619
|
.display-1 {
|
|
3560
|
-
font-size: var(--
|
|
3561
|
-
font-weight: var(--
|
|
3562
|
-
line-height: var(--
|
|
3620
|
+
font-size: var(--bsi-display-font-size);
|
|
3621
|
+
font-weight: var(--bsi-heading-font-weight);
|
|
3622
|
+
line-height: var(--bsi-heading-leading);
|
|
3563
3623
|
}
|
|
3564
3624
|
|
|
3565
3625
|
.lead {
|
|
3566
|
-
font-size: var(--
|
|
3567
|
-
font-weight: var(--
|
|
3568
|
-
line-height: var(--
|
|
3626
|
+
font-size: var(--bsi-lead-font-size);
|
|
3627
|
+
font-weight: var(--bsi-lead-font-weight);
|
|
3628
|
+
line-height: var(--bsi-lead-leading);
|
|
3569
3629
|
}
|
|
3570
3630
|
|
|
3571
3631
|
blockquote,
|
|
3572
3632
|
.blockquote {
|
|
3573
|
-
margin: var(--
|
|
3574
|
-
margin-left: var(--
|
|
3575
|
-
padding: var(--
|
|
3576
|
-
border-left: var(--
|
|
3577
|
-
font-size: var(--
|
|
3578
|
-
line-height: var(--
|
|
3633
|
+
margin: var(--bsi-spacing-m) 0;
|
|
3634
|
+
margin-left: var(--bsi-spacin-inline-xs);
|
|
3635
|
+
padding: var(--bsi-spacing-s);
|
|
3636
|
+
border-left: var(--bsi-border-thick) solid var(--bsi-border-color-secondary);
|
|
3637
|
+
font-size: var(--bsi-body-font-size);
|
|
3638
|
+
line-height: var(--bsi-body-leading);
|
|
3579
3639
|
}
|
|
3580
3640
|
blockquote > :last-child,
|
|
3581
3641
|
.blockquote > :last-child {
|
|
@@ -3583,8 +3643,8 @@ blockquote > :last-child,
|
|
|
3583
3643
|
}
|
|
3584
3644
|
blockquote.text-end,
|
|
3585
3645
|
.blockquote.text-end {
|
|
3586
|
-
margin-right: var(--
|
|
3587
|
-
border-right: var(--
|
|
3646
|
+
margin-right: var(--bsi-spacin-inline-xs);
|
|
3647
|
+
border-right: var(--bsi-border-thick) solid var(--bsi-border-color-secondary);
|
|
3588
3648
|
}
|
|
3589
3649
|
blockquote.text-center, blockquote.text-end, blockquote.blockquote-simple,
|
|
3590
3650
|
.blockquote.text-center,
|
|
@@ -3606,9 +3666,9 @@ blockquote.blockquote-simple,
|
|
|
3606
3666
|
blockquote.blockquote-card,
|
|
3607
3667
|
.blockquote.blockquote-card {
|
|
3608
3668
|
margin-left: 0;
|
|
3609
|
-
padding: var(--
|
|
3610
|
-
background-color: var(--
|
|
3611
|
-
box-shadow: var(--
|
|
3669
|
+
padding: var(--bsi-spacing-m);
|
|
3670
|
+
background-color: var(--bsi-color-background-inverse);
|
|
3671
|
+
box-shadow: var(--bsi-elevation-low);
|
|
3612
3672
|
}
|
|
3613
3673
|
blockquote.blockquote-card .blockquote-footer,
|
|
3614
3674
|
.blockquote.blockquote-card .blockquote-footer {
|
|
@@ -3621,53 +3681,53 @@ blockquote.blockquote-card .blockquote-footer:before,
|
|
|
3621
3681
|
blockquote.blockquote-card.dark,
|
|
3622
3682
|
.blockquote.blockquote-card.dark {
|
|
3623
3683
|
border-left: none;
|
|
3624
|
-
background-color: var(--
|
|
3625
|
-
color: var(--
|
|
3684
|
+
background-color: var(--bsi-color-background-primary);
|
|
3685
|
+
color: var(--bsi-color-text-inverse);
|
|
3626
3686
|
}
|
|
3627
3687
|
blockquote.blockquote-card.dark .blockquote-footer,
|
|
3628
3688
|
.blockquote.blockquote-card.dark .blockquote-footer {
|
|
3629
|
-
color: var(--
|
|
3689
|
+
color: var(--bsi-color-text-inverse);
|
|
3630
3690
|
}
|
|
3631
3691
|
|
|
3632
3692
|
.blockquote-footer {
|
|
3633
3693
|
margin-top: 0;
|
|
3634
|
-
margin-bottom: var(--
|
|
3635
|
-
color: var(--
|
|
3636
|
-
font-size: var(--
|
|
3694
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3695
|
+
color: var(--bsi-color-text-secondary);
|
|
3696
|
+
font-size: var(--bsi-label-font-size);
|
|
3637
3697
|
}
|
|
3638
3698
|
.blockquote-footer::before {
|
|
3639
3699
|
content: "— ";
|
|
3640
3700
|
}
|
|
3641
3701
|
.bg-dark .blockquote-footer {
|
|
3642
|
-
color: var(--
|
|
3702
|
+
color: var(--bsi-color-text-muted);
|
|
3643
3703
|
}
|
|
3644
3704
|
|
|
3645
3705
|
.initialism {
|
|
3646
|
-
font-size: var(--
|
|
3706
|
+
font-size: var(--bsi-label-font-size-s);
|
|
3647
3707
|
text-transform: uppercase;
|
|
3648
3708
|
}
|
|
3649
3709
|
|
|
3650
3710
|
:root {
|
|
3651
|
-
--
|
|
3652
|
-
--
|
|
3653
|
-
--
|
|
3654
|
-
--
|
|
3655
|
-
--
|
|
3656
|
-
--
|
|
3657
|
-
--
|
|
3658
|
-
--
|
|
3659
|
-
--
|
|
3660
|
-
--
|
|
3661
|
-
--
|
|
3662
|
-
--
|
|
3663
|
-
--
|
|
3711
|
+
--bsi-form-control-height: 2.5rem;
|
|
3712
|
+
--bsi-form-control-spacing: var(--bsi-spacing-xxs);
|
|
3713
|
+
--bsi-form-control-background-color: var(--bsi-color-background-inverse);
|
|
3714
|
+
--bsi-form-control-border-color: var(--bsi-color-border-secondary);
|
|
3715
|
+
--bsi-form-control-border-radius: var(--bsi-radius-smooth);
|
|
3716
|
+
--bsi-form-control-placeholder-color: var(--bsi-color-text-muted);
|
|
3717
|
+
--bsi-form-control-label-color: var(--bsi-color-text-base);
|
|
3718
|
+
--bsi-form-control-text-color: var(--bsi-color-text-secondary);
|
|
3719
|
+
--bsi-form-control-font-size: var(--bsi-body-font-size);
|
|
3720
|
+
--bsi-form-group-spacing-y: var(--bsi-spacing-m);
|
|
3721
|
+
--bsi-form-checkbox-border-color: var(--bsi-color-border-secondary);
|
|
3722
|
+
--bsi-form-checkbox-border-radius: var(--bsi-radius-smooth);
|
|
3723
|
+
--bsi-form-checked-color: var(--bsi-color-background-primary);
|
|
3664
3724
|
}
|
|
3665
3725
|
|
|
3666
3726
|
input[readonly],
|
|
3667
3727
|
textarea[readonly],
|
|
3668
3728
|
select[readonly] {
|
|
3669
|
-
--
|
|
3670
|
-
--
|
|
3729
|
+
--bsi-form-control-border-color: var(--bsi-color-border-subtle);
|
|
3730
|
+
--bsi-form-control-background-color: var(--bsi-color-background-muted);
|
|
3671
3731
|
cursor: not-allowed;
|
|
3672
3732
|
}
|
|
3673
3733
|
|
|
@@ -3676,29 +3736,30 @@ textarea,
|
|
|
3676
3736
|
select {
|
|
3677
3737
|
display: block;
|
|
3678
3738
|
width: 100%;
|
|
3679
|
-
padding: var(--
|
|
3680
|
-
border: 1px solid var(--
|
|
3681
|
-
border-radius: var(--
|
|
3682
|
-
background-color: var(--
|
|
3683
|
-
color: var(--
|
|
3684
|
-
font-size: var(--
|
|
3739
|
+
padding: var(--bsi-form-control-spacing);
|
|
3740
|
+
border: 1px solid var(--bsi-form-control-border-color);
|
|
3741
|
+
border-radius: var(--bsi-form-control-border-radius);
|
|
3742
|
+
background-color: var(--bsi-form-control-background-color);
|
|
3743
|
+
color: var(--bsi-form-control-text-color);
|
|
3744
|
+
font-size: var(--bsi-form-control-font-size);
|
|
3685
3745
|
}
|
|
3686
3746
|
input.disabled, input:disabled,
|
|
3687
3747
|
textarea.disabled,
|
|
3688
3748
|
textarea:disabled,
|
|
3689
3749
|
select.disabled,
|
|
3690
3750
|
select:disabled {
|
|
3691
|
-
border-color: var(--
|
|
3751
|
+
border-color: var(--bsi-color-border-disabled);
|
|
3692
3752
|
opacity: 1;
|
|
3693
|
-
background-color: var(--
|
|
3694
|
-
color: var(--
|
|
3753
|
+
background-color: var(--bsi-color-background-disabled);
|
|
3754
|
+
color: var(--bsi-color-text-disabled);
|
|
3695
3755
|
}
|
|
3696
3756
|
|
|
3757
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
3697
3758
|
input:focus,
|
|
3698
3759
|
textarea:focus {
|
|
3699
3760
|
outline: 3px solid transparent;
|
|
3700
3761
|
outline-offset: 3px;
|
|
3701
|
-
box-shadow: 0 0 0 2px var(--
|
|
3762
|
+
box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
|
|
3702
3763
|
}
|
|
3703
3764
|
|
|
3704
3765
|
input::file-selector-button {
|
|
@@ -3736,7 +3797,7 @@ input::-webkit-date-and-time-value {
|
|
|
3736
3797
|
select {
|
|
3737
3798
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='hsl%280, 0%, 15%%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
|
|
3738
3799
|
background-repeat: no-repeat;
|
|
3739
|
-
background-position: right var(--
|
|
3800
|
+
background-position: right var(--bsi-form-control-spacing) center;
|
|
3740
3801
|
background-size: 16px 12px;
|
|
3741
3802
|
appearance: none;
|
|
3742
3803
|
}
|
|
@@ -3762,6 +3823,9 @@ select:-moz-focusring {
|
|
|
3762
3823
|
select option {
|
|
3763
3824
|
font-weight: normal;
|
|
3764
3825
|
}
|
|
3826
|
+
select {
|
|
3827
|
+
/* stylelint-disable-next-line no-duplicate-selectors */ /* TO DO check these styles */
|
|
3828
|
+
}
|
|
3765
3829
|
select:disabled {
|
|
3766
3830
|
opacity: 1;
|
|
3767
3831
|
background-color: hsl(210, 3%, 85%);
|
|
@@ -3769,7 +3833,7 @@ select:disabled {
|
|
|
3769
3833
|
|
|
3770
3834
|
textarea {
|
|
3771
3835
|
height: auto;
|
|
3772
|
-
font-size: var(--
|
|
3836
|
+
font-size: var(--bsi-body-font-size);
|
|
3773
3837
|
line-height: 1.5;
|
|
3774
3838
|
}
|
|
3775
3839
|
|
|
@@ -3777,13 +3841,14 @@ label {
|
|
|
3777
3841
|
display: inline-block;
|
|
3778
3842
|
width: auto;
|
|
3779
3843
|
max-width: 100%;
|
|
3780
|
-
margin-bottom: var(--
|
|
3781
|
-
color: var(--
|
|
3782
|
-
font-size: var(--
|
|
3783
|
-
font-weight: var(--
|
|
3784
|
-
line-height: var(--
|
|
3844
|
+
margin-bottom: var(--bsi-spacing-xxs);
|
|
3845
|
+
color: var(--bsi-form-control-label-color);
|
|
3846
|
+
font-size: var(--bsi-label-font-size-s);
|
|
3847
|
+
font-weight: var(--bsi-font-weight-solid);
|
|
3848
|
+
line-height: var(--bsi-label-leading);
|
|
3785
3849
|
}
|
|
3786
3850
|
|
|
3851
|
+
/* stylelint-disable-next-line no-duplicate-selectors */
|
|
3787
3852
|
input,
|
|
3788
3853
|
textarea {
|
|
3789
3854
|
outline: 0;
|
|
@@ -3799,26 +3864,26 @@ input[type=time] {
|
|
|
3799
3864
|
}
|
|
3800
3865
|
|
|
3801
3866
|
fieldset legend {
|
|
3802
|
-
margin-bottom: var(--
|
|
3803
|
-
padding: 0 var(--
|
|
3867
|
+
margin-bottom: var(--bsi-spacing-s);
|
|
3868
|
+
padding: 0 var(--bsi-form-input-spacing-x);
|
|
3804
3869
|
background-color: transparent;
|
|
3805
|
-
color: var(--
|
|
3806
|
-
font-size: var(--
|
|
3807
|
-
font-weight: var(--
|
|
3870
|
+
color: var(--bsi-form-control-text-color);
|
|
3871
|
+
font-size: var(--bsi-label-font-size-s);
|
|
3872
|
+
font-weight: var(--bsi-font-weight-solid);
|
|
3808
3873
|
}
|
|
3809
3874
|
|
|
3810
3875
|
::placeholder {
|
|
3811
|
-
color: var(--
|
|
3876
|
+
color: var(--bsi-form-control-placeholder-color);
|
|
3812
3877
|
}
|
|
3813
3878
|
|
|
3814
3879
|
input::-webkit-datetime-edit {
|
|
3815
|
-
background-color: var(--
|
|
3816
|
-
color: var(--
|
|
3880
|
+
background-color: var(--bsi-color-background-primary-lighter);
|
|
3881
|
+
color: var(--bsi-form-contro-text-color);
|
|
3817
3882
|
}
|
|
3818
3883
|
|
|
3819
3884
|
.form-group {
|
|
3820
3885
|
position: relative;
|
|
3821
|
-
margin-bottom: var(--
|
|
3886
|
+
margin-bottom: var(--bsi-form-group-spacing-y);
|
|
3822
3887
|
}
|
|
3823
3888
|
.form-group label.input-symbol-label:not(.active) {
|
|
3824
3889
|
left: 2.25rem;
|
|
@@ -3832,8 +3897,8 @@ input::-webkit-datetime-edit {
|
|
|
3832
3897
|
}
|
|
3833
3898
|
|
|
3834
3899
|
.form-text {
|
|
3835
|
-
margin: var(--
|
|
3836
|
-
color: var(--
|
|
3900
|
+
margin: var(--bsi-spacing-xxs) 0;
|
|
3901
|
+
color: var(--bsi-color-text-secondary);
|
|
3837
3902
|
}
|
|
3838
3903
|
|
|
3839
3904
|
.form-group.active .form-file-name {
|
|
@@ -3844,7 +3909,7 @@ input::-webkit-datetime-edit {
|
|
|
3844
3909
|
display: none;
|
|
3845
3910
|
width: 100%;
|
|
3846
3911
|
margin-top: 0.25rem;
|
|
3847
|
-
color: var(--
|
|
3912
|
+
color: var(--bsi-color-text-warning);
|
|
3848
3913
|
font-size: 0.75rem;
|
|
3849
3914
|
}
|
|
3850
3915
|
|
|
@@ -3855,7 +3920,7 @@ input::-webkit-datetime-edit {
|
|
|
3855
3920
|
}
|
|
3856
3921
|
|
|
3857
3922
|
.input-group .input-group-text .btn {
|
|
3858
|
-
border-radius: var(--
|
|
3923
|
+
border-radius: var(--bsi-form-control-border-radius) 0 0 var(--bsi-form-control-border-radius);
|
|
3859
3924
|
}
|
|
3860
3925
|
.input-group .input-group-append {
|
|
3861
3926
|
margin-left: 0;
|
|
@@ -3865,21 +3930,21 @@ input::-webkit-datetime-edit {
|
|
|
3865
3930
|
padding-top: 0;
|
|
3866
3931
|
padding-bottom: 0;
|
|
3867
3932
|
border-bottom: 1px solid hsl(210, 17%, 44%);
|
|
3868
|
-
border-radius: 0 var(--
|
|
3933
|
+
border-radius: 0 var(--bsi-form-control-border-radius) var(--bsi-form-control-border-radius) 0;
|
|
3869
3934
|
}
|
|
3870
3935
|
|
|
3871
3936
|
.form-check {
|
|
3872
3937
|
position: relative;
|
|
3873
|
-
padding-left: 0;
|
|
3874
|
-
align-items: center;
|
|
3875
3938
|
}
|
|
3876
3939
|
.form-check + .form-check {
|
|
3877
|
-
margin-top: var(--
|
|
3940
|
+
margin-top: var(--bsi-spacing-s);
|
|
3878
3941
|
}
|
|
3879
3942
|
.form-check [type=checkbox],
|
|
3880
3943
|
.form-check [type=radio] {
|
|
3881
3944
|
position: absolute;
|
|
3882
|
-
|
|
3945
|
+
top: 9px;
|
|
3946
|
+
left: 9px;
|
|
3947
|
+
width: auto;
|
|
3883
3948
|
margin-top: 0;
|
|
3884
3949
|
margin-left: 0;
|
|
3885
3950
|
opacity: 0;
|
|
@@ -3887,19 +3952,17 @@ input::-webkit-datetime-edit {
|
|
|
3887
3952
|
.form-check [type=checkbox] + label,
|
|
3888
3953
|
.form-check [type=radio] + label {
|
|
3889
3954
|
position: relative;
|
|
3890
|
-
|
|
3891
|
-
align-items: center;
|
|
3955
|
+
margin-bottom: 0;
|
|
3892
3956
|
padding-left: 28px;
|
|
3893
|
-
font-size: var(--
|
|
3894
|
-
font-weight: var(--
|
|
3957
|
+
font-size: var(--bsi-label-font-size);
|
|
3958
|
+
font-weight: var(--bsi-font-weight-solid);
|
|
3895
3959
|
cursor: pointer;
|
|
3896
|
-
margin-bottom: 0;
|
|
3897
3960
|
user-select: none;
|
|
3898
3961
|
}
|
|
3899
3962
|
@media (min-width: 576px) {
|
|
3900
3963
|
.form-check [type=checkbox] + label,
|
|
3901
3964
|
.form-check [type=radio] + label {
|
|
3902
|
-
font-size: var(--
|
|
3965
|
+
font-size: var(--bsi-label-font-size-l);
|
|
3903
3966
|
}
|
|
3904
3967
|
}
|
|
3905
3968
|
.form-check input[type=checkbox] + label::after,
|
|
@@ -3910,13 +3973,13 @@ input::-webkit-datetime-edit {
|
|
|
3910
3973
|
content: "";
|
|
3911
3974
|
border-width: 2px;
|
|
3912
3975
|
border-style: solid;
|
|
3913
|
-
transition: all var(--
|
|
3976
|
+
transition: all var(--bsi-transition-instant) ease-out;
|
|
3914
3977
|
}
|
|
3915
3978
|
.form-check input[type=checkbox] + label::after {
|
|
3916
3979
|
top: 0;
|
|
3917
3980
|
width: 20px;
|
|
3918
3981
|
height: 20px;
|
|
3919
|
-
border-radius: var(--
|
|
3982
|
+
border-radius: var(--bsi-form-control-border-radius);
|
|
3920
3983
|
}
|
|
3921
3984
|
.form-check input[type=checkbox]:checked + label::before {
|
|
3922
3985
|
top: 3px;
|
|
@@ -3925,7 +3988,7 @@ input::-webkit-datetime-edit {
|
|
|
3925
3988
|
height: 12px;
|
|
3926
3989
|
border-width: 2px;
|
|
3927
3990
|
border-style: solid;
|
|
3928
|
-
border-color: transparent var(--
|
|
3991
|
+
border-color: transparent var(--bsi-color-border-inverse) var(--bsi-color-border-inverse) transparent;
|
|
3929
3992
|
opacity: 1;
|
|
3930
3993
|
transform: rotate(40deg);
|
|
3931
3994
|
transform-origin: 100% 100%;
|
|
@@ -3933,12 +3996,12 @@ input::-webkit-datetime-edit {
|
|
|
3933
3996
|
}
|
|
3934
3997
|
.form-check input[type=checkbox]:checked + label::after {
|
|
3935
3998
|
z-index: 0;
|
|
3936
|
-
border-color: var(--
|
|
3937
|
-
background-color: var(--
|
|
3999
|
+
border-color: var(--bsi-form-checked-color);
|
|
4000
|
+
background-color: var(--bsi-form-checked-color);
|
|
3938
4001
|
}
|
|
3939
4002
|
.form-check input[type=checkbox]:not(:checked) + label::after {
|
|
3940
4003
|
z-index: 0;
|
|
3941
|
-
border-color: var(--
|
|
4004
|
+
border-color: var(--bsi-form-checkbox-border-color);
|
|
3942
4005
|
background-color: transparent;
|
|
3943
4006
|
}
|
|
3944
4007
|
.form-check input[type=checkbox]:not(:checked) + label::before {
|
|
@@ -3953,12 +4016,12 @@ input::-webkit-datetime-edit {
|
|
|
3953
4016
|
cursor: not-allowed;
|
|
3954
4017
|
}
|
|
3955
4018
|
.form-check input[type=checkbox]:disabled:not(:checked) + label::after {
|
|
3956
|
-
border-color: var(--
|
|
4019
|
+
border-color: var(--bsi-color-border-disabled);
|
|
3957
4020
|
background-color: transparent;
|
|
3958
4021
|
}
|
|
3959
4022
|
.form-check input[type=checkbox]:disabled:checked + label::after {
|
|
3960
|
-
border-color: var(--
|
|
3961
|
-
background-color: var(--
|
|
4023
|
+
border-color: var(--bsi-color-border-disabled);
|
|
4024
|
+
background-color: var(--bsi-color-border-disabled);
|
|
3962
4025
|
}
|
|
3963
4026
|
.form-check input[type=radio] + label::after, .form-check input[type=radio] + label::before {
|
|
3964
4027
|
position: absolute;
|
|
@@ -3970,11 +4033,11 @@ input::-webkit-datetime-edit {
|
|
|
3970
4033
|
height: 20px;
|
|
3971
4034
|
border-width: 2px;
|
|
3972
4035
|
border-style: solid;
|
|
3973
|
-
border-radius: var(--
|
|
3974
|
-
transition: all var(--
|
|
4036
|
+
border-radius: var(--bsi-radius-rounded);
|
|
4037
|
+
transition: all var(--bsi-transition-instant) ease-out;
|
|
3975
4038
|
}
|
|
3976
4039
|
.form-check input[type=radio]:not(:checked) + label::after, .form-check input[type=radio]:not(:checked) + label::before {
|
|
3977
|
-
border-color: var(--
|
|
4040
|
+
border-color: var(--bsi-form-checkbox-border-color);
|
|
3978
4041
|
}
|
|
3979
4042
|
.form-check input[type=radio]:not(:checked) + label:after {
|
|
3980
4043
|
z-index: -1;
|
|
@@ -3982,25 +4045,30 @@ input::-webkit-datetime-edit {
|
|
|
3982
4045
|
}
|
|
3983
4046
|
.form-check input[type=radio]:checked + label::after {
|
|
3984
4047
|
z-index: 0;
|
|
3985
|
-
border-color: var(--
|
|
3986
|
-
background-color: var(--
|
|
4048
|
+
border-color: var(--bsi-form-checked-color);
|
|
4049
|
+
background-color: var(--bsi-form-checked-color);
|
|
3987
4050
|
transform: scale(0.64);
|
|
3988
4051
|
}
|
|
3989
4052
|
.form-check input[type=radio]:checked + label::before {
|
|
3990
|
-
border-color: var(--
|
|
4053
|
+
border-color: var(--bsi-form-checked-color);
|
|
3991
4054
|
}
|
|
3992
4055
|
.form-check input[type=radio]:disabled + label {
|
|
3993
4056
|
cursor: not-allowed;
|
|
3994
4057
|
}
|
|
3995
4058
|
.form-check input[type=radio]:disabled:not(:checked) + label::after, .form-check input[type=radio]:disabled:not(:checked) + label::before {
|
|
3996
|
-
border-color: var(--
|
|
4059
|
+
border-color: var(--bsi-color-border-disabled);
|
|
3997
4060
|
}
|
|
3998
4061
|
.form-check input[type=radio]:disabled:checked + label::after {
|
|
3999
|
-
border-color: var(--
|
|
4000
|
-
background-color: var(--
|
|
4062
|
+
border-color: var(--bsi-color-border-disabled);
|
|
4063
|
+
background-color: var(--bsi-color-border-disabled);
|
|
4001
4064
|
}
|
|
4002
4065
|
.form-check input[type=radio]:disabled:checked + label::before {
|
|
4003
|
-
border-color: var(--
|
|
4066
|
+
border-color: var(--bsi-color-border-disabled);
|
|
4067
|
+
}
|
|
4068
|
+
.form-check .form-text {
|
|
4069
|
+
display: block;
|
|
4070
|
+
margin-bottom: 0.5rem;
|
|
4071
|
+
padding-right: 3.25rem;
|
|
4004
4072
|
}
|
|
4005
4073
|
.form-check.form-check-group {
|
|
4006
4074
|
margin-bottom: 1rem;
|
|
@@ -4009,6 +4077,7 @@ input::-webkit-datetime-edit {
|
|
|
4009
4077
|
}
|
|
4010
4078
|
.form-check.form-check-group input[type=checkbox] + label,
|
|
4011
4079
|
.form-check.form-check-group input[type=radio] + label {
|
|
4080
|
+
position: static;
|
|
4012
4081
|
padding-right: 3.25rem;
|
|
4013
4082
|
padding-left: 0;
|
|
4014
4083
|
}
|
|
@@ -4024,17 +4093,12 @@ input::-webkit-datetime-edit {
|
|
|
4024
4093
|
.form-check.form-check-group input[type=radio]:checked + label::before {
|
|
4025
4094
|
right: 0;
|
|
4026
4095
|
}
|
|
4027
|
-
.form-check.form-check-group .form-text {
|
|
4028
|
-
display: block;
|
|
4029
|
-
margin-bottom: 0.5rem;
|
|
4030
|
-
padding-right: 3.25rem;
|
|
4031
|
-
}
|
|
4032
4096
|
.form-check.form-check-group input.semi-checked:not(:checked) + label::before {
|
|
4033
4097
|
right: 4px;
|
|
4034
4098
|
left: auto;
|
|
4035
4099
|
}
|
|
4036
4100
|
.form-check input.semi-checked:not(:checked) + label::before {
|
|
4037
|
-
top:
|
|
4101
|
+
top: 12px;
|
|
4038
4102
|
left: 4px;
|
|
4039
4103
|
width: 12px;
|
|
4040
4104
|
height: 2px;
|
|
@@ -4042,21 +4106,21 @@ input::-webkit-datetime-edit {
|
|
|
4042
4106
|
border-style: none;
|
|
4043
4107
|
border-color: transparent;
|
|
4044
4108
|
opacity: 1;
|
|
4045
|
-
background: var(--
|
|
4109
|
+
background: var(--bsi-color-background-inverse);
|
|
4046
4110
|
transform: none;
|
|
4047
4111
|
backface-visibility: hidden;
|
|
4048
4112
|
}
|
|
4049
4113
|
.form-check input.semi-checked:not(:checked) + label::after {
|
|
4050
4114
|
z-index: 0;
|
|
4051
|
-
border-color: var(--
|
|
4052
|
-
background-color: var(--
|
|
4115
|
+
border-color: var(--bsi-form-checked-color);
|
|
4116
|
+
background-color: var(--bsi-form-checked-color);
|
|
4053
4117
|
}
|
|
4054
4118
|
|
|
4055
4119
|
.form-check-inline {
|
|
4056
4120
|
display: inline-block;
|
|
4057
4121
|
}
|
|
4058
4122
|
.form-check-inline:not(:last-child) {
|
|
4059
|
-
margin-right: var(--
|
|
4123
|
+
margin-right: var(--bsi-spacing-m);
|
|
4060
4124
|
}
|
|
4061
4125
|
|
|
4062
4126
|
@media (prefers-reduced-motion: reduce) {
|
|
@@ -4077,7 +4141,7 @@ input::-webkit-datetime-edit {
|
|
|
4077
4141
|
.form-check [type=checkbox]:focus + label,
|
|
4078
4142
|
.form-check [type=radio]:focus + label {
|
|
4079
4143
|
border-color: hsl(0, 0%, 0%) !important;
|
|
4080
|
-
box-shadow: 0 0 0 2px var(--
|
|
4144
|
+
box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
|
|
4081
4145
|
outline: 3px solid transparent !important;
|
|
4082
4146
|
outline-offset: 3px !important;
|
|
4083
4147
|
}
|
|
@@ -4091,10 +4155,10 @@ input::-webkit-datetime-edit {
|
|
|
4091
4155
|
|
|
4092
4156
|
.form-control-plaintext {
|
|
4093
4157
|
border: 0;
|
|
4094
|
-
--
|
|
4095
|
-
--
|
|
4096
|
-
--
|
|
4097
|
-
--
|
|
4158
|
+
--bsi-form-control-border-color: transparent;
|
|
4159
|
+
--bsi-form-control-border-radius: 0;
|
|
4160
|
+
--bsi-form-control-background-color: transparent;
|
|
4161
|
+
--bsi-form-control-spacing: 0;
|
|
4098
4162
|
}
|
|
4099
4163
|
.form-control-plaintext:focus {
|
|
4100
4164
|
outline: 0;
|
|
@@ -4111,28 +4175,28 @@ input::-webkit-datetime-edit {
|
|
|
4111
4175
|
}
|
|
4112
4176
|
.form-control:disabled {
|
|
4113
4177
|
cursor: not-allowed;
|
|
4114
|
-
background: var(--
|
|
4178
|
+
background: var(--bsi-color-background-disabled);
|
|
4115
4179
|
border: 0;
|
|
4116
|
-
color: var(--
|
|
4180
|
+
color: var(--bsi-color-text-disabled);
|
|
4117
4181
|
}
|
|
4118
4182
|
.was-validated .form-control:valid, .form-control.is-valid {
|
|
4119
4183
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23008055' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
|
|
4120
4184
|
}
|
|
4121
4185
|
.was-validated .form-control:invalid, .form-control.is-invalid {
|
|
4122
4186
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cc334d' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
|
|
4123
|
-
border-color: var(--
|
|
4187
|
+
border-color: var(--bsi-color-border-danger);
|
|
4124
4188
|
}
|
|
4125
4189
|
.form-control.warning {
|
|
4126
4190
|
background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2012C2%206.47715%206.47715%202%2012%202C14.6522%202%2017.1957%203.05357%2019.0711%204.92893C20.9464%206.8043%2022%209.34784%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012ZM3%2012C3%2016.9706%207.02944%2021%2012%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012ZM11.5%2014.2V5.7H12.7V14.2H11.5ZM12.6%2018.3V16.5H11.4V18.3H12.6Z%22/%3E%0A%3C/svg%3E") no-repeat;
|
|
4127
|
-
border-color: var(--
|
|
4191
|
+
border-color: var(--bsi-color-border-warning);
|
|
4128
4192
|
}
|
|
4129
4193
|
.form-control.is-valid ~ .warning-feedback {
|
|
4130
4194
|
display: block;
|
|
4131
4195
|
}
|
|
4132
4196
|
|
|
4133
4197
|
.form-control-sm {
|
|
4134
|
-
--
|
|
4135
|
-
--
|
|
4198
|
+
--bsi-form-control-spacing: var(--bsi-spacing-xxs) var(--bsi-spacing-3xs);
|
|
4199
|
+
--bsi-form-control-font-size: var(--bsi-label-font-size);
|
|
4136
4200
|
}
|
|
4137
4201
|
.form-control-sm::file-selector-button {
|
|
4138
4202
|
padding: 0.25rem 0.5rem;
|
|
@@ -4141,7 +4205,7 @@ input::-webkit-datetime-edit {
|
|
|
4141
4205
|
}
|
|
4142
4206
|
|
|
4143
4207
|
.form-control-lg {
|
|
4144
|
-
--
|
|
4208
|
+
--bsi-form-control-font-size: var(--bsi-lead-font-size);
|
|
4145
4209
|
}
|
|
4146
4210
|
.form-control-lg::file-selector-button {
|
|
4147
4211
|
padding: 0.5rem 1rem;
|
|
@@ -4184,15 +4248,15 @@ textarea.form-control-lg {
|
|
|
4184
4248
|
|
|
4185
4249
|
.password-icon {
|
|
4186
4250
|
position: absolute;
|
|
4187
|
-
top: calc(var(--
|
|
4188
|
-
right: var(--
|
|
4251
|
+
top: calc(var(--bsi-form-control-spacing) * 4.5);
|
|
4252
|
+
right: var(--bsi-form-control-spacing);
|
|
4189
4253
|
z-index: 10;
|
|
4190
|
-
padding: 0 var(--
|
|
4191
|
-
background-color: var(--
|
|
4254
|
+
padding: 0 var(--bsi-spacing-xxs);
|
|
4255
|
+
background-color: var(--bsi-form-control-background-color);
|
|
4192
4256
|
cursor: pointer;
|
|
4193
4257
|
}
|
|
4194
4258
|
.password-icon .icon {
|
|
4195
|
-
fill: var(--
|
|
4259
|
+
fill: var(--bsi-icon-primary);
|
|
4196
4260
|
}
|
|
4197
4261
|
|
|
4198
4262
|
.password-meter {
|
|
@@ -4221,12 +4285,12 @@ textarea.form-control-lg {
|
|
|
4221
4285
|
}
|
|
4222
4286
|
.input-number.input-number-adaptive input[type=number] {
|
|
4223
4287
|
width: auto;
|
|
4224
|
-
transition: all va(--
|
|
4288
|
+
transition: all va(--bsi-transition-instant);
|
|
4225
4289
|
}
|
|
4226
4290
|
.input-number input[type=number] {
|
|
4227
4291
|
appearance: textfield;
|
|
4228
|
-
border-top-right-radius: var(--
|
|
4229
|
-
border-bottom-right-radius: var(--
|
|
4292
|
+
border-top-right-radius: var(--bsi-form-control-border-radius) !important;
|
|
4293
|
+
border-bottom-right-radius: var(--bsi-form-control-border-radius) !important;
|
|
4230
4294
|
}
|
|
4231
4295
|
.input-number input[type=number]::-webkit-inner-spin-button, .input-number input[type=number]::-webkit-outer-spin-button {
|
|
4232
4296
|
-webkit-appearance: none;
|
|
@@ -4235,7 +4299,7 @@ textarea.form-control-lg {
|
|
|
4235
4299
|
display: none;
|
|
4236
4300
|
}
|
|
4237
4301
|
.input-number input[type=number]:not(:disabled) {
|
|
4238
|
-
border-left: 1px solid var(--
|
|
4302
|
+
border-left: 1px solid var(--bsi-form-control-border-color);
|
|
4239
4303
|
}
|
|
4240
4304
|
.input-number input[type=number][readonly] ~ .input-group-text .input-number-add,
|
|
4241
4305
|
.input-number input[type=number][readonly] ~ .input-group-text .input-number-sub {
|
|
@@ -4254,7 +4318,7 @@ textarea.form-control-lg {
|
|
|
4254
4318
|
bottom: 0;
|
|
4255
4319
|
right: 0;
|
|
4256
4320
|
z-index: 10;
|
|
4257
|
-
padding-right: var(--
|
|
4321
|
+
padding-right: var(--bsi-form-control-spacing);
|
|
4258
4322
|
border: none;
|
|
4259
4323
|
background: transparent;
|
|
4260
4324
|
}
|
|
@@ -4281,21 +4345,21 @@ textarea.form-control-lg {
|
|
|
4281
4345
|
border-style: solid;
|
|
4282
4346
|
}
|
|
4283
4347
|
.input-number .input-group-text button:focus.input-number-add:after, .input-number .input-group-text button:hover.input-number-add:after {
|
|
4284
|
-
border-color: transparent transparent
|
|
4348
|
+
border-color: transparent transparent var(--bsi-form-control-border-color) transparent;
|
|
4285
4349
|
}
|
|
4286
4350
|
.input-number .input-group-text button:focus.input-number-sub:after, .input-number .input-group-text button:hover.input-number-sub:after {
|
|
4287
|
-
border-color:
|
|
4351
|
+
border-color: var(--bsi-form-control-border-color) transparent transparent transparent;
|
|
4288
4352
|
}
|
|
4289
4353
|
.input-number .input-group-text button:focus:not([data-focus-mouse=true]) {
|
|
4290
4354
|
opacity: 1;
|
|
4291
4355
|
}
|
|
4292
4356
|
.input-number .input-group-text button.input-number-add:after {
|
|
4293
4357
|
border-width: 0 5px 6px 5px;
|
|
4294
|
-
border-color: transparent transparent
|
|
4358
|
+
border-color: transparent transparent var(--bsi-form-control-border-color) transparent;
|
|
4295
4359
|
}
|
|
4296
4360
|
.input-number .input-group-text button.input-number-sub:after {
|
|
4297
4361
|
border-width: 6px 5px 0 5px;
|
|
4298
|
-
border-color:
|
|
4362
|
+
border-color: var(--bsi-form-control-border-color) transparent transparent transparent;
|
|
4299
4363
|
}
|
|
4300
4364
|
.input-number .input-group-text button:hover {
|
|
4301
4365
|
cursor: pointer;
|
|
@@ -4347,11 +4411,11 @@ textarea.form-control-lg {
|
|
|
4347
4411
|
.input-group-text {
|
|
4348
4412
|
display: flex;
|
|
4349
4413
|
align-items: center;
|
|
4350
|
-
padding: var(--
|
|
4351
|
-
font-size: var(--
|
|
4352
|
-
font-weight: var(--
|
|
4353
|
-
color: var(--
|
|
4354
|
-
background-color: var(--
|
|
4414
|
+
padding: var(--bsi-form-control-spacing) 0 var(--bsi-form-control-spacing) var(--bsi-form-control-spacing);
|
|
4415
|
+
font-size: var(--bsi-body-font-size);
|
|
4416
|
+
font-weight: var(--bsi-font-weight-solid);
|
|
4417
|
+
color: var(--bsi-form-inpunt-text-color);
|
|
4418
|
+
background-color: var(--bsi-form-control-background-color);
|
|
4355
4419
|
text-align: center;
|
|
4356
4420
|
white-space: nowrap;
|
|
4357
4421
|
border-top-width: 1px;
|
|
@@ -4359,13 +4423,13 @@ textarea.form-control-lg {
|
|
|
4359
4423
|
border-right-width: 0;
|
|
4360
4424
|
border-bottom-width: 1px;
|
|
4361
4425
|
border-style: solid;
|
|
4362
|
-
border-color: var(--
|
|
4363
|
-
border-radius: var(--
|
|
4426
|
+
border-color: var(--bsi-form-control-border-color);
|
|
4427
|
+
border-radius: var(--bsi-form-control-border-radius);
|
|
4364
4428
|
}
|
|
4365
4429
|
.disabled .input-group-text {
|
|
4366
|
-
background-color: var(--
|
|
4367
|
-
border-color: var(--
|
|
4368
|
-
color: var(--
|
|
4430
|
+
background-color: var(--bsi-color-background-disabled);
|
|
4431
|
+
border-color: var(--bsi-color-border-disabled);
|
|
4432
|
+
color: var(--bsi-color-text-disabled);
|
|
4369
4433
|
}
|
|
4370
4434
|
|
|
4371
4435
|
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
|
|
@@ -4399,7 +4463,7 @@ textarea.form-control-lg {
|
|
|
4399
4463
|
font-size: 0.75rem;
|
|
4400
4464
|
}
|
|
4401
4465
|
.form-feedback.just-validate-error-label {
|
|
4402
|
-
color: var(--
|
|
4466
|
+
color: var(--bsi-color-text-danger);
|
|
4403
4467
|
}
|
|
4404
4468
|
|
|
4405
4469
|
.input-group-text:has(~ [data-focus-mouse=true]:not(.btn)),
|
|
@@ -4415,7 +4479,7 @@ button:has(~ [data-focus-mouse=true]:not(.btn)),
|
|
|
4415
4479
|
.is-invalid ~ .input-group-text,
|
|
4416
4480
|
button:has(~ .is-invalid),
|
|
4417
4481
|
.is-invalid + button {
|
|
4418
|
-
border-color: var(--
|
|
4482
|
+
border-color: var(--bsi-color-border-danger) !important;
|
|
4419
4483
|
}
|
|
4420
4484
|
|
|
4421
4485
|
.sr-only-justvalidate-bi {
|
|
@@ -4423,7 +4487,7 @@ button:has(~ .is-invalid),
|
|
|
4423
4487
|
}
|
|
4424
4488
|
|
|
4425
4489
|
.just-validate-success-field {
|
|
4426
|
-
border-color: var(--
|
|
4490
|
+
border-color: var(--bsi-color-border-success) !important;
|
|
4427
4491
|
padding-right: calc(1.5em + 0.75rem) !important;
|
|
4428
4492
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23008055' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
|
|
4429
4493
|
}
|
|
@@ -4432,7 +4496,7 @@ button:has(~ .is-invalid),
|
|
|
4432
4496
|
.just-validate-success-field ~ .input-group-text,
|
|
4433
4497
|
button:has(~ .just-validate-success-field),
|
|
4434
4498
|
.just-validate-success-field + button {
|
|
4435
|
-
border-color: var(--
|
|
4499
|
+
border-color: var(--bsi-color-border-success);
|
|
4436
4500
|
}
|
|
4437
4501
|
|
|
4438
4502
|
.just-validate-success-field + .input-group-text.align-buttons,
|
|
@@ -4463,14 +4527,14 @@ textarea.just-validate-success-field {
|
|
|
4463
4527
|
|
|
4464
4528
|
input[type=checkbox].is-invalid,
|
|
4465
4529
|
input[type=radio].is-invalid {
|
|
4466
|
-
--
|
|
4530
|
+
--bsi-form-checkbox-border-color: var(--bsi-color-border-danger);
|
|
4467
4531
|
}
|
|
4468
4532
|
|
|
4469
4533
|
select.is-invalid {
|
|
4470
|
-
border: 1px solid var(--
|
|
4534
|
+
border: 1px solid var(--bsi-color-border-danger);
|
|
4471
4535
|
}
|
|
4472
4536
|
select.just-validate-success-field {
|
|
4473
|
-
border: 1px solid var(--
|
|
4537
|
+
border: 1px solid var(--bsi-color-border-success);
|
|
4474
4538
|
}
|
|
4475
4539
|
|
|
4476
4540
|
.position-absolute {
|
|
@@ -4486,27 +4550,27 @@ select.just-validate-success-field {
|
|
|
4486
4550
|
}
|
|
4487
4551
|
|
|
4488
4552
|
.bg-muted {
|
|
4489
|
-
--
|
|
4553
|
+
--bsi-bg-opacity: 1;
|
|
4490
4554
|
background-color: hsl(0, 0%, 96%) !important;
|
|
4491
4555
|
}
|
|
4492
4556
|
|
|
4493
4557
|
.bg-danger {
|
|
4494
|
-
--
|
|
4558
|
+
--bsi-bg-opacity: 1;
|
|
4495
4559
|
background-color: hsl(350, 60%, 50%) !important;
|
|
4496
4560
|
}
|
|
4497
4561
|
|
|
4498
4562
|
.bg-warning {
|
|
4499
|
-
--
|
|
4563
|
+
--bsi-bg-opacity: 1;
|
|
4500
4564
|
background-color: hsl(36, 100%, 30%) !important;
|
|
4501
4565
|
}
|
|
4502
4566
|
|
|
4503
4567
|
.bg-success {
|
|
4504
|
-
--
|
|
4568
|
+
--bsi-bg-opacity: 1;
|
|
4505
4569
|
background-color: hsl(160, 100%, 25%) !important;
|
|
4506
4570
|
}
|
|
4507
4571
|
|
|
4508
4572
|
.border-start {
|
|
4509
|
-
border-left: var(--
|
|
4573
|
+
border-left: var(--bsi-border-base) var(--bsi-border-style) var(--bsi-border-color) !important;
|
|
4510
4574
|
}
|
|
4511
4575
|
|
|
4512
4576
|
.border-start-0 {
|
|
@@ -4514,7 +4578,7 @@ select.just-validate-success-field {
|
|
|
4514
4578
|
}
|
|
4515
4579
|
|
|
4516
4580
|
.border-end {
|
|
4517
|
-
border-right: var(--
|
|
4581
|
+
border-right: var(--bsi-border-base) var(--bsi-border-style) var(--bsi-border-color) !important;
|
|
4518
4582
|
}
|
|
4519
4583
|
|
|
4520
4584
|
.border-end-0 {
|
|
@@ -4522,127 +4586,126 @@ select.just-validate-success-field {
|
|
|
4522
4586
|
}
|
|
4523
4587
|
|
|
4524
4588
|
.border-white {
|
|
4525
|
-
--
|
|
4526
|
-
border-color: white !important;
|
|
4589
|
+
--bsi-border-color: white;
|
|
4527
4590
|
}
|
|
4528
4591
|
|
|
4529
4592
|
.text-primary {
|
|
4530
|
-
--
|
|
4531
|
-
color: rgba(var(--
|
|
4593
|
+
--bsi-text-opacity: 1;
|
|
4594
|
+
color: rgba(var(--bsi-primary-rgb), var(--bsi-text-opacity)) !important;
|
|
4532
4595
|
}
|
|
4533
4596
|
|
|
4534
4597
|
.text-secondary {
|
|
4535
|
-
--
|
|
4536
|
-
color:
|
|
4598
|
+
--bsi-text-opacity: 1;
|
|
4599
|
+
color: hsl(210, 33%, 28%) !important;
|
|
4537
4600
|
}
|
|
4538
4601
|
|
|
4539
4602
|
.text-success {
|
|
4540
|
-
--
|
|
4541
|
-
color: rgba(var(--
|
|
4603
|
+
--bsi-text-opacity: 1;
|
|
4604
|
+
color: rgba(var(--bsi-success-rgb), var(--bsi-text-opacity)) !important;
|
|
4542
4605
|
}
|
|
4543
4606
|
|
|
4544
4607
|
.text-info {
|
|
4545
|
-
--
|
|
4546
|
-
color: rgba(var(--
|
|
4608
|
+
--bsi-text-opacity: 1;
|
|
4609
|
+
color: rgba(var(--bsi-info-rgb), var(--bsi-text-opacity)) !important;
|
|
4547
4610
|
}
|
|
4548
4611
|
|
|
4549
4612
|
.text-warning {
|
|
4550
|
-
--
|
|
4551
|
-
color: rgba(var(--
|
|
4613
|
+
--bsi-text-opacity: 1;
|
|
4614
|
+
color: rgba(var(--bsi-warning-rgb), var(--bsi-text-opacity)) !important;
|
|
4552
4615
|
}
|
|
4553
4616
|
|
|
4554
4617
|
.text-danger {
|
|
4555
|
-
--
|
|
4556
|
-
color: rgba(var(--
|
|
4618
|
+
--bsi-text-opacity: 1;
|
|
4619
|
+
color: rgba(var(--bsi-danger-rgb), var(--bsi-text-opacity)) !important;
|
|
4557
4620
|
}
|
|
4558
4621
|
|
|
4559
4622
|
.text-light {
|
|
4560
|
-
--
|
|
4561
|
-
color: rgba(var(--
|
|
4623
|
+
--bsi-text-opacity: 1;
|
|
4624
|
+
color: rgba(var(--bsi-light-rgb), var(--bsi-text-opacity)) !important;
|
|
4562
4625
|
}
|
|
4563
4626
|
|
|
4564
4627
|
.text-dark {
|
|
4565
|
-
--
|
|
4566
|
-
color: rgba(var(--
|
|
4628
|
+
--bsi-text-opacity: 1;
|
|
4629
|
+
color: rgba(var(--bsi-dark-rgb), var(--bsi-text-opacity)) !important;
|
|
4567
4630
|
}
|
|
4568
4631
|
|
|
4569
4632
|
.text-black {
|
|
4570
|
-
--
|
|
4571
|
-
color: rgba(var(--
|
|
4633
|
+
--bsi-text-opacity: 1;
|
|
4634
|
+
color: rgba(var(--bsi-black-rgb), var(--bsi-text-opacity)) !important;
|
|
4572
4635
|
}
|
|
4573
4636
|
|
|
4574
4637
|
.text-white {
|
|
4575
|
-
--
|
|
4576
|
-
color: rgba(var(--
|
|
4638
|
+
--bsi-text-opacity: 1;
|
|
4639
|
+
color: rgba(var(--bsi-white-rgb), var(--bsi-text-opacity)) !important;
|
|
4577
4640
|
}
|
|
4578
4641
|
|
|
4579
4642
|
.text-100 {
|
|
4580
|
-
--
|
|
4581
|
-
color: rgba(var(--
|
|
4643
|
+
--bsi-text-opacity: 1;
|
|
4644
|
+
color: rgba(var(--bsi-100-rgb), var(--bsi-text-opacity)) !important;
|
|
4582
4645
|
}
|
|
4583
4646
|
|
|
4584
4647
|
.text-200 {
|
|
4585
|
-
--
|
|
4586
|
-
color: rgba(var(--
|
|
4648
|
+
--bsi-text-opacity: 1;
|
|
4649
|
+
color: rgba(var(--bsi-200-rgb), var(--bsi-text-opacity)) !important;
|
|
4587
4650
|
}
|
|
4588
4651
|
|
|
4589
4652
|
.text-300 {
|
|
4590
|
-
--
|
|
4591
|
-
color: rgba(var(--
|
|
4653
|
+
--bsi-text-opacity: 1;
|
|
4654
|
+
color: rgba(var(--bsi-300-rgb), var(--bsi-text-opacity)) !important;
|
|
4592
4655
|
}
|
|
4593
4656
|
|
|
4594
4657
|
.text-400 {
|
|
4595
|
-
--
|
|
4596
|
-
color: rgba(var(--
|
|
4658
|
+
--bsi-text-opacity: 1;
|
|
4659
|
+
color: rgba(var(--bsi-400-rgb), var(--bsi-text-opacity)) !important;
|
|
4597
4660
|
}
|
|
4598
4661
|
|
|
4599
4662
|
.text-500 {
|
|
4600
|
-
--
|
|
4601
|
-
color: rgba(var(--
|
|
4663
|
+
--bsi-text-opacity: 1;
|
|
4664
|
+
color: rgba(var(--bsi-500-rgb), var(--bsi-text-opacity)) !important;
|
|
4602
4665
|
}
|
|
4603
4666
|
|
|
4604
4667
|
.text-600 {
|
|
4605
|
-
--
|
|
4606
|
-
color: rgba(var(--
|
|
4668
|
+
--bsi-text-opacity: 1;
|
|
4669
|
+
color: rgba(var(--bsi-600-rgb), var(--bsi-text-opacity)) !important;
|
|
4607
4670
|
}
|
|
4608
4671
|
|
|
4609
4672
|
.text-700 {
|
|
4610
|
-
--
|
|
4611
|
-
color: rgba(var(--
|
|
4673
|
+
--bsi-text-opacity: 1;
|
|
4674
|
+
color: rgba(var(--bsi-700-rgb), var(--bsi-text-opacity)) !important;
|
|
4612
4675
|
}
|
|
4613
4676
|
|
|
4614
4677
|
.text-800 {
|
|
4615
|
-
--
|
|
4616
|
-
color: rgba(var(--
|
|
4678
|
+
--bsi-text-opacity: 1;
|
|
4679
|
+
color: rgba(var(--bsi-800-rgb), var(--bsi-text-opacity)) !important;
|
|
4617
4680
|
}
|
|
4618
4681
|
|
|
4619
4682
|
.text-900 {
|
|
4620
|
-
--
|
|
4621
|
-
color: rgba(var(--
|
|
4683
|
+
--bsi-text-opacity: 1;
|
|
4684
|
+
color: rgba(var(--bsi-900-rgb), var(--bsi-text-opacity)) !important;
|
|
4622
4685
|
}
|
|
4623
4686
|
|
|
4624
4687
|
.text-body {
|
|
4625
|
-
--
|
|
4626
|
-
color: rgba(var(--
|
|
4688
|
+
--bsi-text-opacity: 1;
|
|
4689
|
+
color: rgba(var(--bsi-body-color-rgb), var(--bsi-text-opacity)) !important;
|
|
4627
4690
|
}
|
|
4628
4691
|
|
|
4629
4692
|
.text-muted {
|
|
4630
|
-
--
|
|
4693
|
+
--bsi-text-opacity: 1;
|
|
4631
4694
|
color: hsl(210, 17%, 44%) !important;
|
|
4632
4695
|
}
|
|
4633
4696
|
|
|
4634
4697
|
.text-black-50 {
|
|
4635
|
-
--
|
|
4698
|
+
--bsi-text-opacity: 1;
|
|
4636
4699
|
color: rgba(0, 0, 0, 0.5) !important;
|
|
4637
4700
|
}
|
|
4638
4701
|
|
|
4639
4702
|
.text-white-50 {
|
|
4640
|
-
--
|
|
4703
|
+
--bsi-text-opacity: 1;
|
|
4641
4704
|
color: rgba(255, 255, 255, 0.5) !important;
|
|
4642
4705
|
}
|
|
4643
4706
|
|
|
4644
4707
|
.text-reset {
|
|
4645
|
-
--
|
|
4708
|
+
--bsi-text-opacity: 1;
|
|
4646
4709
|
color: inherit !important;
|
|
4647
4710
|
}
|
|
4648
4711
|
|
|
@@ -4715,8 +4778,12 @@ select.just-validate-success-field {
|
|
|
4715
4778
|
}
|
|
4716
4779
|
}
|
|
4717
4780
|
.password-icon {
|
|
4718
|
-
top: calc(var(--
|
|
4719
|
-
--
|
|
4781
|
+
top: calc(var(--bsi-form-control-spacing) * 5);
|
|
4782
|
+
--bsi-icon-default: var(--bsi-icon-primary);
|
|
4783
|
+
}
|
|
4784
|
+
|
|
4785
|
+
.is-invalid + .input-group-text.align-buttons {
|
|
4786
|
+
bottom: 0 !important;
|
|
4720
4787
|
}`;
|
|
4721
4788
|
|
|
4722
4789
|
var ItInput_1;
|
|
@@ -4788,7 +4855,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
4788
4855
|
this.logger.warn("The suggestions property is enabled, but type isn't password. Please, remove suggestions this property.");
|
|
4789
4856
|
}
|
|
4790
4857
|
if (!this.label || this.label?.length === 0) {
|
|
4791
|
-
this.logger.warn(`Label is required to ensure accessibility. Please, define a label for <it-input name="${this.name}" ... /> . Set attribute label-hidden="true" if you don't want to show label.`);
|
|
4858
|
+
this.logger.warn(`Label is required to ensure accessibility. Please, define a label for <it-input name="${this.name}" id="${this.id}" ... /> . Set attribute label-hidden="true" if you don't want to show label.`);
|
|
4792
4859
|
}
|
|
4793
4860
|
}
|
|
4794
4861
|
_handleInput(e) {
|
|
@@ -4953,9 +5020,9 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
4953
5020
|
}
|
|
4954
5021
|
return nothing;
|
|
4955
5022
|
}
|
|
4956
|
-
_renderInput(supportTextId, invalid, validityMessage) {
|
|
4957
|
-
const ariaDescribedBy = this.composeClass(this.supportText?.length > 0 ? supportTextId : '', this.passwordStrengthMeter ? `strengthMeterInfo_${this._id}` : '', this._ariaAttributes['aria-describedby']?.length > 0 ? this._ariaAttributes['aria-describedby'] : '', validityMessage?.length > 0 ? `invalid-feedback-${this._id}` : '');
|
|
4958
|
-
const inputClasses = this.composeClass('it-form__control', this.plaintext ? 'form-control-plaintext' : 'form-control', this.size ? `form-control-${this.size}` : '', invalid ? 'is-invalid' : '',
|
|
5023
|
+
_renderInput(supportTextId, invalid, validityMessage, showValidation) {
|
|
5024
|
+
const ariaDescribedBy = this.composeClass(this.supportText?.length > 0 ? supportTextId : '', this.passwordStrengthMeter ? `strengthMeterInfo_${this._id}` : '', this._ariaAttributes['aria-describedby']?.length > 0 ? this._ariaAttributes['aria-describedby'] : '', showValidation && validityMessage?.length > 0 ? `invalid-feedback-${this._id}` : '');
|
|
5025
|
+
const inputClasses = this.composeClass('it-form__control', this.plaintext ? 'form-control-plaintext' : 'form-control', this.size ? `form-control-${this.size}` : '', showValidation && invalid ? 'is-invalid' : '', showValidation && !invalid && !this.readonly ? 'just-validate-success-field' : '');
|
|
4959
5026
|
let inputRender;
|
|
4960
5027
|
if (this.type === 'textarea') {
|
|
4961
5028
|
inputRender = html `
|
|
@@ -4963,7 +5030,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
4963
5030
|
part="textarea focusable"
|
|
4964
5031
|
${setAttributes(this._ariaAttributes)}
|
|
4965
5032
|
aria-describedby=${ifDefined(ariaDescribedBy || undefined)}
|
|
4966
|
-
|
|
5033
|
+
aria-invalid=${ifDefined(invalid ? 'true' : undefined)}
|
|
4967
5034
|
@input="${this._handleInput}"
|
|
4968
5035
|
@blur=${this._handleBlur}
|
|
4969
5036
|
@focus=${this._handleFocus}
|
|
@@ -4995,7 +5062,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
4995
5062
|
part="input focusable"
|
|
4996
5063
|
${setAttributes(this._ariaAttributes)}
|
|
4997
5064
|
aria-describedby=${ifDefined(ariaDescribedBy || undefined)}
|
|
4998
|
-
|
|
5065
|
+
aria-invalid=${ifDefined(invalid ? 'true' : undefined)}
|
|
4999
5066
|
@input="${this._handleInput}"
|
|
5000
5067
|
@blur=${this._handleBlur}
|
|
5001
5068
|
@focus=${this._handleFocus}
|
|
@@ -5013,6 +5080,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
5013
5080
|
min=${ifDefined(this.min)}
|
|
5014
5081
|
max=${ifDefined(this.max)}
|
|
5015
5082
|
step=${ifDefined(this.step)}
|
|
5083
|
+
autocomplete="off"
|
|
5016
5084
|
pattern=${ifDefined(this.pattern)}
|
|
5017
5085
|
?formNoValidate=${this.customValidation}
|
|
5018
5086
|
.value="${live(this.value)}"
|
|
@@ -5028,7 +5096,8 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
5028
5096
|
render() {
|
|
5029
5097
|
const supportTextId = `${this._id}-support-text`;
|
|
5030
5098
|
const supportTextRender = html ` ${when(this.supportText, () => html ` <small class="form-text" id="${supportTextId}">${this.supportText}</small> `)}`;
|
|
5031
|
-
const
|
|
5099
|
+
const showValidation = this.formControlController.submittedOnce || this.customValidation; // true; // this._touched || this.customValidation;
|
|
5100
|
+
const validityMessage = (showValidation ? this.validationMessage : '') ?? '';
|
|
5032
5101
|
const invalid = validityMessage?.length > 0 || (!this.customValidation && this.inputElement?.checkValidity() === false);
|
|
5033
5102
|
const validityMessageRender = html `<div
|
|
5034
5103
|
role="alert"
|
|
@@ -5053,7 +5122,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
5053
5122
|
${when(this._slotPrepend, () => html ` <span class="input-group-text">
|
|
5054
5123
|
<slot name="prepend" @slotchange=${() => this.requestUpdate()}></slot
|
|
5055
5124
|
></span>`)}
|
|
5056
|
-
${this._renderInput(supportTextId, invalid, validityMessage)}
|
|
5125
|
+
${this._renderInput(supportTextId, invalid, validityMessage, showValidation)}
|
|
5057
5126
|
${when(this.type === 'number', () => html `<span class="input-group-text align-buttons flex-column">
|
|
5058
5127
|
<button
|
|
5059
5128
|
class="input-number-add"
|
|
@@ -5075,7 +5144,7 @@ let ItInput = ItInput_1 = class ItInput extends FormControl {
|
|
|
5075
5144
|
<slot name="append" @slotchange=${() => this.requestUpdate()}></slot>
|
|
5076
5145
|
</div>`)}
|
|
5077
5146
|
</div>
|
|
5078
|
-
${validityMessageRender} ${supportTextRender} ${this._renderpasswordStrengthMeter()}`, () => html ` ${this._renderInput(supportTextId, invalid, validityMessage)} ${validityMessageRender}
|
|
5147
|
+
${validityMessageRender} ${supportTextRender} ${this._renderpasswordStrengthMeter()}`, () => html ` ${this._renderInput(supportTextId, invalid, validityMessage, showValidation)} ${validityMessageRender}
|
|
5079
5148
|
${supportTextRender} ${this._renderpasswordStrengthMeter()}`)}
|
|
5080
5149
|
</div>
|
|
5081
5150
|
`;
|