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