@design-factory/design-factory 17.0.0 → 17.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/design-factory-initial-branding.css +1 -1
- package/design-factory.css +1 -1
- package/esm2022/lib/angular/sidenav/sidenavlist.component.mjs +12 -3
- package/esm2022/lib/angular/tooltip/truncate/tooltipTruncate.directive.mjs +3 -5
- package/esm2022/lib/angular/utils/html-element-helper.mjs +8 -0
- package/esm2022/lib/angular/utils/titleTruncate.directive.mjs +39 -0
- package/esm2022/lib/index.mjs +4 -1
- package/fesm2022/design-factory.mjs +56 -7
- package/fesm2022/design-factory.mjs.map +1 -1
- package/lib/angular/tooltip/truncate/tooltipTruncate.directive.d.ts +0 -1
- package/lib/angular/utils/html-element-helper.d.ts +5 -0
- package/lib/angular/utils/titleTruncate.directive.d.ts +16 -0
- package/lib/index.d.ts +2 -0
- package/package.json +8 -5
- package/styles/scss/_common.root.scss +9 -0
- package/styles/scss/bootstrap/_mixins-override.scss +0 -26
- package/styles/scss/bootstrap/_variables.scss +186 -172
- package/styles/scss/components/brand-color/_brand-color_container.scss +1 -6
- package/styles/scss/components/button/_button.scss +13 -0
- package/styles/scss/components/datepicker/_datepicker.variables.scss +1 -1
- package/styles/scss/components/form/_form.scss +21 -11
- package/styles/scss/components/form/_form.variables.scss +3 -12
- package/styles/scss/components/inputs/_inputs.mixin.scss +1 -1
- package/styles/scss/components/popover/_popover_container.scss +47 -38
- package/styles/scss/components/select/_select.scss +16 -12
- package/styles/scss/components/stepper/_stepper.mixins.scss +62 -55
- package/styles/scss/components/tabs/_tabs.scss +32 -18
- package/styles/scss/components/tabs/_tabs.variables.scss +1 -0
- package/styles/scss/themes/brand2023/_variables.scss +9 -9
|
@@ -695,7 +695,7 @@ $lights-mapping: (
|
|
|
695
695
|
|
|
696
696
|
$whites-mapping: (
|
|
697
697
|
'bg-color': var(--#{$prefix}white-50),
|
|
698
|
-
'bg-hover-color': var(--#{$prefix}white-
|
|
698
|
+
'bg-hover-color': var(--#{$prefix}white-200),
|
|
699
699
|
'bg-active-color': var(--#{$prefix}white-200),
|
|
700
700
|
'inert-color': var(--#{$prefix}white-50),
|
|
701
701
|
'bg-subtle-color': var(--#{$prefix}white-50),
|
|
@@ -1059,9 +1059,16 @@ $shade-colors: map.merge(
|
|
|
1059
1059
|
$map1: $shade-colors,
|
|
1060
1060
|
$map2: $pacifics
|
|
1061
1061
|
);
|
|
1062
|
+
|
|
1063
|
+
// Grays map does not include gray prefix in the color name by default
|
|
1064
|
+
$grays-names: ();
|
|
1065
|
+
@each $colorName, $colorValue in $grays {
|
|
1066
|
+
$grays-names: map.set($grays-names, gray-#{$colorName}, $colorValue);
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1062
1069
|
$shade-colors: map.merge(
|
|
1063
1070
|
$map1: $shade-colors,
|
|
1064
|
-
$map2: $grays
|
|
1071
|
+
$map2: $grays-names
|
|
1065
1072
|
);
|
|
1066
1073
|
$shade-colors: map.merge(
|
|
1067
1074
|
$map1: $shade-colors,
|
|
@@ -1207,17 +1214,17 @@ $spacers: (
|
|
|
1207
1214
|
//
|
|
1208
1215
|
// Settings for the `<body>` element.
|
|
1209
1216
|
|
|
1210
|
-
$body-bg: var(--#{$prefix}white) !default;
|
|
1211
|
-
$body-color: var(--#{$prefix}gray-900) !default;
|
|
1212
1217
|
// $body-text-align: null !default;
|
|
1218
|
+
$body-color: $gray-900 !default;
|
|
1219
|
+
$body-bg: $white !default;
|
|
1213
1220
|
|
|
1214
|
-
|
|
1215
|
-
|
|
1221
|
+
$body-secondary-color: $gray-700 !default;
|
|
1222
|
+
$body-secondary-bg: $gray-200 !default;
|
|
1216
1223
|
|
|
1217
1224
|
// $body-tertiary-color: rgba($body-color, .5) !default;
|
|
1218
|
-
|
|
1225
|
+
$body-tertiary-bg: $gray-100 !default;
|
|
1219
1226
|
|
|
1220
|
-
|
|
1227
|
+
$body-emphasis-color: $black !default;
|
|
1221
1228
|
|
|
1222
1229
|
// Links
|
|
1223
1230
|
//
|
|
@@ -1427,7 +1434,7 @@ $headings-font-family: 'Amadeus', sans-serif !default;
|
|
|
1427
1434
|
// $headings-font-style: null !default;
|
|
1428
1435
|
$headings-font-weight: 400 !default;
|
|
1429
1436
|
$headings-line-height: 1.5 !default;
|
|
1430
|
-
// $headings-color:
|
|
1437
|
+
// $headings-color: inherit !default;
|
|
1431
1438
|
// scss-docs-end headings-variables
|
|
1432
1439
|
|
|
1433
1440
|
// scss-docs-start display-headings
|
|
@@ -1454,7 +1461,9 @@ $display-line-height: 1.1 !default;
|
|
|
1454
1461
|
|
|
1455
1462
|
// $sub-sup-font-size: .75em !default;
|
|
1456
1463
|
|
|
1457
|
-
|
|
1464
|
+
// fusv-disable
|
|
1465
|
+
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
|
|
1466
|
+
// fusv-enable
|
|
1458
1467
|
|
|
1459
1468
|
// $initialism-font-size: $small-font-size !default;
|
|
1460
1469
|
|
|
@@ -1472,9 +1481,13 @@ $hr-margin-y: 1.5rem !default;
|
|
|
1472
1481
|
// fusv-enable
|
|
1473
1482
|
|
|
1474
1483
|
// $hr-border-color: null !default; // Allows for inherited colors
|
|
1475
|
-
// $hr-border-width: $border-width !default;
|
|
1484
|
+
// $hr-border-width: var(--#{$prefix}border-width) !default;
|
|
1476
1485
|
// $hr-opacity: .25 !default;
|
|
1477
1486
|
|
|
1487
|
+
// scss-docs-start vr-variables
|
|
1488
|
+
// $vr-border-width: var(--#{$prefix}border-width) !default;
|
|
1489
|
+
// scss-docs-end vr-variables
|
|
1490
|
+
|
|
1478
1491
|
// $legend-margin-bottom: .5rem !default;
|
|
1479
1492
|
// $legend-font-size: 1.5rem !default;
|
|
1480
1493
|
// $legend-font-weight: null !default;
|
|
@@ -1485,7 +1498,7 @@ $hr-margin-y: 1.5rem !default;
|
|
|
1485
1498
|
|
|
1486
1499
|
// $mark-padding: .1875em !default;
|
|
1487
1500
|
// $mark-color: $body-color !default;
|
|
1488
|
-
$mark-bg: $gray-600 !default;
|
|
1501
|
+
$mark-bg: var(--#{$prefix}gray-600) !default;
|
|
1489
1502
|
// scss-docs-end type-variables
|
|
1490
1503
|
|
|
1491
1504
|
// Tables
|
|
@@ -1500,34 +1513,34 @@ $table-cell-padding-x-sm: 0.3rem !default;
|
|
|
1500
1513
|
|
|
1501
1514
|
// $table-cell-vertical-align: top !default;
|
|
1502
1515
|
|
|
1503
|
-
|
|
1504
|
-
|
|
1516
|
+
$table-color: var(--#{$prefix}body-color) !default;
|
|
1517
|
+
$table-bg: transparent !default;
|
|
1505
1518
|
// $table-accent-bg: transparent !default;
|
|
1506
1519
|
|
|
1507
1520
|
$table-th-font-weight: 500 !default;
|
|
1508
1521
|
|
|
1509
1522
|
// $table-striped-color: $table-color !default;
|
|
1510
1523
|
// $table-striped-bg-factor: .05 !default;
|
|
1511
|
-
// $table-striped-bg: rgba($
|
|
1524
|
+
// $table-striped-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-striped-bg-factor) !default;
|
|
1512
1525
|
|
|
1513
1526
|
// $table-active-color: $table-color !default;
|
|
1514
1527
|
// $table-active-bg-factor: .1 !default;
|
|
1515
|
-
// $table-active-bg: rgba($
|
|
1528
|
+
// $table-active-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-active-bg-factor) !default;
|
|
1516
1529
|
|
|
1517
1530
|
// $table-hover-color: $table-color !default;
|
|
1518
1531
|
// $table-hover-bg-factor: .075 !default;
|
|
1519
|
-
// $table-hover-bg: rgba($
|
|
1532
|
+
// $table-hover-bg: rgba(var(--#{$prefix}emphasis-color-rgb), $table-hover-bg-factor) !default;
|
|
1520
1533
|
|
|
1521
1534
|
// $table-border-factor: .1 !default;
|
|
1522
|
-
// $table-border-width: $border-width !default;
|
|
1523
|
-
// $table-border-color: $border-color !default;
|
|
1535
|
+
// $table-border-width: var(--#{$prefix}border-width) !default;
|
|
1536
|
+
// $table-border-color: var(--#{$prefix}border-color) !default;
|
|
1524
1537
|
|
|
1525
1538
|
// $table-striped-order: odd !default;
|
|
1526
1539
|
// $table-striped-columns-order: even !default;
|
|
1527
1540
|
|
|
1528
1541
|
$table-group-separator-color: var(--#{$prefix}gray-400) !default;
|
|
1529
1542
|
|
|
1530
|
-
// $table-caption-color: $
|
|
1543
|
+
// $table-caption-color: var(--#{$prefix}secondary-color) !default;
|
|
1531
1544
|
|
|
1532
1545
|
// $table-bg-scale: -80% !default;
|
|
1533
1546
|
// scss-docs-end table-variables
|
|
@@ -1560,7 +1573,7 @@ $input-btn-padding-x: 1rem !default;
|
|
|
1560
1573
|
// $input-btn-focus-color-opacity: $focus-ring-opacity !default;
|
|
1561
1574
|
// $input-btn-focus-color: $focus-ring-color !default;
|
|
1562
1575
|
// $input-btn-focus-blur: $focus-ring-blur !default;
|
|
1563
|
-
|
|
1576
|
+
$input-btn-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
1564
1577
|
|
|
1565
1578
|
$input-btn-padding-y-sm: $input-btn-padding-y * map.get($df-sizing-ratios, 'sm') !default;
|
|
1566
1579
|
$input-btn-padding-x-sm: $input-btn-padding-x * map.get($df-sizing-ratios, 'sm') !default;
|
|
@@ -1570,7 +1583,7 @@ $input-btn-padding-y-lg: $input-btn-padding-y * map.get($df-sizing-ratios, 'lg')
|
|
|
1570
1583
|
$input-btn-padding-x-lg: $input-btn-padding-x * map.get($df-sizing-ratios, 'lg') !default;
|
|
1571
1584
|
// $input-btn-font-size-lg: $font-size-lg !default;
|
|
1572
1585
|
|
|
1573
|
-
// $input-btn-border-width: $border-width !default;
|
|
1586
|
+
// $input-btn-border-width: var(--#{$prefix}border-width) !default;
|
|
1574
1587
|
// scss-docs-end input-btn-variables
|
|
1575
1588
|
|
|
1576
1589
|
// Buttons
|
|
@@ -1603,8 +1616,8 @@ $btn-font-weight: $font-weight-semibold !default;
|
|
|
1603
1616
|
$btn-disabled-opacity: 1 !default;
|
|
1604
1617
|
// $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
|
|
1605
1618
|
|
|
1606
|
-
// $btn-link-color: $link-color !default;
|
|
1607
|
-
// $btn-link-hover-color: $link-hover-color !default;
|
|
1619
|
+
// $btn-link-color: var(--#{$prefix}link-color) !default;
|
|
1620
|
+
// $btn-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
|
1608
1621
|
$btn-link-disabled-color: var(--#{$prefix}gray-400) !default; // default $gray-600 but we align with $df-disabled-color
|
|
1609
1622
|
$btn-link-focus-shadow-rgb: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !default;
|
|
1610
1623
|
|
|
@@ -1632,7 +1645,7 @@ $btn-link-focus-shadow-rgb: rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5) !de
|
|
|
1632
1645
|
// $form-text-font-size: $small-font-size !default;
|
|
1633
1646
|
// $form-text-font-style: null !default;
|
|
1634
1647
|
// $form-text-font-weight: null !default;
|
|
1635
|
-
$form-text-color: $body-color !default;
|
|
1648
|
+
$form-text-color: var(--#{$prefix}body-color) !default;
|
|
1636
1649
|
// scss-docs-end form-text-variables
|
|
1637
1650
|
|
|
1638
1651
|
// scss-docs-start form-label-variables
|
|
@@ -1659,30 +1672,30 @@ $input-padding-x-sm: $input-padding-x * map.get($df-size-ratios, 'sm') !default;
|
|
|
1659
1672
|
$input-padding-x-lg: $input-padding-x * map.get($df-size-ratios, 'lg') !default;
|
|
1660
1673
|
// $input-font-size-lg: $input-btn-font-size-lg !default;
|
|
1661
1674
|
|
|
1662
|
-
// $input-bg: $body-bg !default;
|
|
1675
|
+
// $input-bg: var(--#{$prefix}body-bg) !default;
|
|
1663
1676
|
// $input-disabled-color: null !default;
|
|
1664
|
-
$input-disabled-bg: $gray-100 !default;
|
|
1677
|
+
$input-disabled-bg: var(--#{$prefix}gray-100) !default;
|
|
1665
1678
|
// $input-disabled-border-color: null !default;
|
|
1666
1679
|
|
|
1667
|
-
// $input-color: $body-color !default;
|
|
1668
|
-
|
|
1680
|
+
// $input-color: var(--#{$prefix}body-color) !default;
|
|
1681
|
+
$input-border-color: var(--#{$prefix}gray-400) !default;
|
|
1669
1682
|
// $input-border-width: $input-btn-border-width !default;
|
|
1670
|
-
// $input-box-shadow: $box-shadow-inset !default;
|
|
1683
|
+
// $input-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
|
1671
1684
|
|
|
1672
|
-
// $input-border-radius: $border-radius !default;
|
|
1673
|
-
// $input-border-radius-sm: $border-radius-sm !default;
|
|
1674
|
-
// $input-border-radius-lg: $border-radius-lg !default;
|
|
1685
|
+
// $input-border-radius: var(--#{$prefix}border-radius) !default;
|
|
1686
|
+
// $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
|
1687
|
+
// $input-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
|
1675
1688
|
|
|
1676
1689
|
// $input-focus-bg: $input-bg !default;
|
|
1677
|
-
$input-focus-border-color: $primary !default;
|
|
1690
|
+
$input-focus-border-color: var(--#{$prefix}primary) !default;
|
|
1678
1691
|
// $input-focus-color: $input-color !default;
|
|
1679
1692
|
// $input-focus-width: $input-btn-focus-width !default;
|
|
1680
1693
|
// $input-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
|
1681
1694
|
|
|
1682
|
-
|
|
1683
|
-
// $input-plaintext-color: $body-color !default;
|
|
1695
|
+
$input-placeholder-color: var(--#{$prefix}gray-600) !default;
|
|
1696
|
+
// $input-plaintext-color: var(--#{$prefix}body-color) !default;
|
|
1684
1697
|
|
|
1685
|
-
// $input-height-border: $input-border-width * 2 !default;
|
|
1698
|
+
// $input-height-border: calc(#{$input-border-width} * 2) !default;
|
|
1686
1699
|
|
|
1687
1700
|
// $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
|
|
1688
1701
|
// $input-height-inner-half: add($input-line-height * .5em, $input-padding-y) !default;
|
|
@@ -1709,11 +1722,11 @@ $form-check-label-cursor: pointer !default;
|
|
|
1709
1722
|
$form-check-input-active-filter: none !default;
|
|
1710
1723
|
|
|
1711
1724
|
// $form-check-input-bg: $input-bg !default;
|
|
1712
|
-
$form-check-input-border: 2px solid $gray-600 !default;
|
|
1725
|
+
$form-check-input-border: 2px solid var(--#{$prefix}gray-600) !default;
|
|
1713
1726
|
$form-check-input-border-radius: 0.125em !default;
|
|
1714
1727
|
// $form-check-radio-border-radius: 50% !default;
|
|
1715
|
-
$form-check-input-focus-border: $gray-600 !default;
|
|
1716
|
-
|
|
1728
|
+
$form-check-input-focus-border: var(--#{$prefix}gray-600) !default;
|
|
1729
|
+
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default;
|
|
1717
1730
|
|
|
1718
1731
|
$form-check-input-checked-color: $component-active-color !default;
|
|
1719
1732
|
$form-check-input-checked-bg-color: $component-active-bg !default;
|
|
@@ -1754,7 +1767,7 @@ $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.o
|
|
|
1754
1767
|
// $input-group-addon-padding-x: $input-padding-x !default;
|
|
1755
1768
|
// $input-group-addon-font-weight: $input-font-weight !default;
|
|
1756
1769
|
// $input-group-addon-color: $input-color !default;
|
|
1757
|
-
$input-group-addon-bg:
|
|
1770
|
+
// $input-group-addon-bg: var(--#{$prefix}tertiary-bg) !default;
|
|
1758
1771
|
// $input-group-addon-border-color: $input-border-color !default;
|
|
1759
1772
|
// scss-docs-end input-group-variables
|
|
1760
1773
|
|
|
@@ -1768,8 +1781,8 @@ $input-group-addon-bg: $gray-100 !default;
|
|
|
1768
1781
|
// $form-select-line-height: $input-line-height !default;
|
|
1769
1782
|
// $form-select-color: $input-color !default;
|
|
1770
1783
|
// $form-select-bg: $input-bg !default;
|
|
1771
|
-
$form-select-disabled-color: $
|
|
1772
|
-
$form-select-disabled-bg:
|
|
1784
|
+
$form-select-disabled-color: var(--#{$prefix}disabled-color) !default;
|
|
1785
|
+
// $form-select-disabled-bg: $input-disabled-bg !default;
|
|
1773
1786
|
// $form-select-disabled-border-color: $input-disabled-border-color !default;
|
|
1774
1787
|
// $form-select-bg-position: right $form-select-padding-x center !default;
|
|
1775
1788
|
$form-select-bg-size: 16px 16px !default; // In pixels because image dimensions
|
|
@@ -1787,7 +1800,7 @@ $form-select-indicator: str-replace(
|
|
|
1787
1800
|
// $form-select-border-width: $input-border-width !default;
|
|
1788
1801
|
// $form-select-border-color: $input-border-color !default;
|
|
1789
1802
|
// $form-select-border-radius: $input-border-radius !default;
|
|
1790
|
-
// $form-select-box-shadow: $box-shadow-inset !default;
|
|
1803
|
+
// $form-select-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
|
1791
1804
|
|
|
1792
1805
|
// $form-select-focus-border-color: $input-focus-border-color !default;
|
|
1793
1806
|
// $form-select-focus-width: $input-focus-width !default;
|
|
@@ -1810,9 +1823,9 @@ $form-select-indicator: str-replace(
|
|
|
1810
1823
|
// $form-range-track-width: 100% !default;
|
|
1811
1824
|
// $form-range-track-height: .5rem !default;
|
|
1812
1825
|
// $form-range-track-cursor: pointer !default;
|
|
1813
|
-
|
|
1826
|
+
$form-range-track-bg: var(--#{$prefix}gray-300) !default;
|
|
1814
1827
|
// $form-range-track-border-radius: 1rem !default;
|
|
1815
|
-
// $form-range-track-box-shadow: $box-shadow-inset !default;
|
|
1828
|
+
// $form-range-track-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
|
1816
1829
|
|
|
1817
1830
|
// $form-range-thumb-width: 1rem !default;
|
|
1818
1831
|
// $form-range-thumb-height: $form-range-thumb-width !default;
|
|
@@ -1823,14 +1836,14 @@ $form-select-indicator: str-replace(
|
|
|
1823
1836
|
// $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg, $input-focus-box-shadow !default;
|
|
1824
1837
|
// $form-range-thumb-focus-box-shadow-width: $input-focus-width !default; // For focus box shadow issue in Edge
|
|
1825
1838
|
// $form-range-thumb-active-bg: tint-color($component-active-bg, 70%) !default;
|
|
1826
|
-
|
|
1839
|
+
$form-range-thumb-disabled-bg: var(--#{$prefix}gray-500) !default;
|
|
1827
1840
|
// $form-range-thumb-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
|
1828
1841
|
// scss-docs-end form-range-variables
|
|
1829
1842
|
|
|
1830
1843
|
// scss-docs-start form-file-variables
|
|
1831
|
-
$form-file-button-color: $white !default;
|
|
1844
|
+
$form-file-button-color: var(--#{$prefix}white) !default;
|
|
1832
1845
|
$form-file-button-bg: $primary !default;
|
|
1833
|
-
|
|
1846
|
+
$form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
|
|
1834
1847
|
// scss-docs-end form-file-variables
|
|
1835
1848
|
|
|
1836
1849
|
// scss-docs-start form-floating-variables
|
|
@@ -1842,6 +1855,7 @@ $form-file-button-bg: $primary !default;
|
|
|
1842
1855
|
// $form-floating-input-padding-b: .625rem !default;
|
|
1843
1856
|
// $form-floating-label-opacity: .65 !default;
|
|
1844
1857
|
// $form-floating-label-transform: scale(.85) translateY(-.5rem) translateX(.15rem) !default;
|
|
1858
|
+
// $form-floating-label-disabled-color: $gray-600 !default;
|
|
1845
1859
|
// $form-floating-transition: opacity .1s ease-in-out, transform .1s ease-in-out !default;
|
|
1846
1860
|
// scss-docs-end form-floating-variables
|
|
1847
1861
|
|
|
@@ -1851,13 +1865,13 @@ $form-file-button-bg: $primary !default;
|
|
|
1851
1865
|
// $form-feedback-margin-top: $form-text-margin-top !default;
|
|
1852
1866
|
// $form-feedback-font-size: $form-text-font-size !default;
|
|
1853
1867
|
// $form-feedback-font-style: $form-text-font-style !default;
|
|
1854
|
-
|
|
1855
|
-
|
|
1868
|
+
$form-feedback-valid-color: $success !default;
|
|
1869
|
+
$form-feedback-invalid-color: $danger !default;
|
|
1856
1870
|
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1871
|
+
$form-feedback-icon-valid-color: $form-feedback-valid-color !default;
|
|
1872
|
+
$form-feedback-icon-valid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
|
|
1873
|
+
$form-feedback-icon-invalid-color: $form-feedback-invalid-color !default;
|
|
1874
|
+
$form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
|
|
1861
1875
|
// scss-docs-end form-feedback-variables
|
|
1862
1876
|
|
|
1863
1877
|
// scss-docs-start form-validation-colors
|
|
@@ -1868,24 +1882,24 @@ $form-file-button-bg: $primary !default;
|
|
|
1868
1882
|
// scss-docs-end form-validation-colors
|
|
1869
1883
|
|
|
1870
1884
|
// scss-docs-start form-validation-states
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
|
|
1886
|
-
|
|
1887
|
-
|
|
1888
|
-
|
|
1885
|
+
$form-validation-states: (
|
|
1886
|
+
'valid': (
|
|
1887
|
+
'color': var(--#{$prefix}form-valid-color),
|
|
1888
|
+
'icon': $form-feedback-icon-valid,
|
|
1889
|
+
'tooltip-color': #fff,
|
|
1890
|
+
'tooltip-bg-color': var(--#{$prefix}success),
|
|
1891
|
+
'focus-box-shadow': $input-btn-focus-box-shadow,
|
|
1892
|
+
'border-color': var(--#{$prefix}form-valid-border-color)
|
|
1893
|
+
),
|
|
1894
|
+
'invalid': (
|
|
1895
|
+
'color': var(--#{$prefix}form-invalid-color),
|
|
1896
|
+
'icon': $form-feedback-icon-invalid,
|
|
1897
|
+
'tooltip-color': #fff,
|
|
1898
|
+
'tooltip-bg-color': var(--#{$prefix}danger),
|
|
1899
|
+
'focus-box-shadow': $input-btn-focus-box-shadow,
|
|
1900
|
+
'border-color': var(--#{$prefix}form-invalid-border-color)
|
|
1901
|
+
)
|
|
1902
|
+
) !default;
|
|
1889
1903
|
// scss-docs-end form-validation-states
|
|
1890
1904
|
|
|
1891
1905
|
// Z-index master list
|
|
@@ -1923,23 +1937,23 @@ $form-file-button-bg: $primary !default;
|
|
|
1923
1937
|
// $nav-link-padding-x: 1rem !default;
|
|
1924
1938
|
// $nav-link-font-size: null !default;
|
|
1925
1939
|
// $nav-link-font-weight: null !default;
|
|
1926
|
-
// $nav-link-color: $link-color !default;
|
|
1927
|
-
// $nav-link-hover-color: $link-hover-color !default;
|
|
1940
|
+
// $nav-link-color: var(--#{$prefix}link-color) !default;
|
|
1941
|
+
// $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default;
|
|
1928
1942
|
// $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
|
|
1929
|
-
$nav-link-disabled-color: $
|
|
1943
|
+
$nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
|
|
1930
1944
|
// $nav-link-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
1931
1945
|
|
|
1932
|
-
// $nav-tabs-border-color: $
|
|
1933
|
-
// $nav-tabs-border-width: $border-width !default;
|
|
1946
|
+
// $nav-tabs-border-color: var(--#{$prefix}border-color) !default;
|
|
1947
|
+
// $nav-tabs-border-width: var(--#{$prefix}border-width !default;
|
|
1934
1948
|
$nav-tabs-border-radius: 0 !default;
|
|
1935
|
-
// $nav-tabs-link-hover-border-color: $
|
|
1936
|
-
$nav-tabs-link-active-color: $primary !default;
|
|
1937
|
-
$nav-tabs-link-active-bg: $white !default;
|
|
1938
|
-
// $nav-tabs-link-active-border-color: $
|
|
1949
|
+
// $nav-tabs-link-hover-border-color: var(--#{$prefix}secondary-bg) var(--#{$prefix}secondary-bg) $nav-tabs-border-color !default;
|
|
1950
|
+
$nav-tabs-link-active-color: var(--#{$prefix}primary) !default;
|
|
1951
|
+
$nav-tabs-link-active-bg: var(--#{$prefix}white) !default;
|
|
1952
|
+
// $nav-tabs-link-active-border-color: var(--#{$prefix}border-color) var(--#{$prefix}border-color) $nav-tabs-link-active-bg !default;
|
|
1939
1953
|
|
|
1940
1954
|
$nav-pills-border-radius: 0 !default; // $border-radius
|
|
1941
|
-
$nav-pills-link-active-color: $primary !default;
|
|
1942
|
-
$nav-pills-link-active-bg: $white !default;
|
|
1955
|
+
$nav-pills-link-active-color: var(--#{$prefix}primary) !default;
|
|
1956
|
+
$nav-pills-link-active-bg: var(--#{$prefix}white) !default;
|
|
1943
1957
|
|
|
1944
1958
|
// $nav-underline-gap: 1rem !default;
|
|
1945
1959
|
// $nav-underline-border-width: .125rem !default;
|
|
@@ -1974,7 +1988,7 @@ $navbar-light-active-color: var(--#{$prefix}primary-500) !default;
|
|
|
1974
1988
|
$navbar-light-disabled-color: var(--#{$prefix}gray-500) !default;
|
|
1975
1989
|
// $navbar-light-icon-color: rgba($body-color, .75) !default;
|
|
1976
1990
|
$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$primary-500}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
|
|
1977
|
-
$navbar-light-toggler-border-color: $white !default;
|
|
1991
|
+
$navbar-light-toggler-border-color: var(--#{$prefix}white) !default;
|
|
1978
1992
|
// $navbar-light-brand-color: $navbar-light-active-color !default;
|
|
1979
1993
|
// $navbar-light-brand-hover-color: $navbar-light-active-color !default;
|
|
1980
1994
|
// scss-docs-end navbar-variables
|
|
@@ -2002,29 +2016,29 @@ $navbar-dark-toggler-border-color: transparent !default;
|
|
|
2002
2016
|
// $dropdown-padding-y: .5rem !default;
|
|
2003
2017
|
// $dropdown-spacer: .125rem !default;
|
|
2004
2018
|
// $dropdown-font-size: $font-size-base !default;
|
|
2005
|
-
// $dropdown-color: $body-color !default;
|
|
2019
|
+
// $dropdown-color: var(--#{$prefix}body-color) !default;
|
|
2006
2020
|
// $dropdown-bg: $white !default;
|
|
2007
|
-
$dropdown-border-color: $border-color !default;
|
|
2008
|
-
// $dropdown-border-radius: $border-radius !default;
|
|
2009
|
-
// $dropdown-border-width: $border-width !default;
|
|
2010
|
-
// $dropdown-inner-border-radius:
|
|
2021
|
+
$dropdown-border-color: var(--#{$prefix}border-color) !default;
|
|
2022
|
+
// $dropdown-border-radius: var(--#{$prefix}border-radius) !default;
|
|
2023
|
+
// $dropdown-border-width: var(--#{$prefix}border-width) !default;
|
|
2024
|
+
// $dropdown-inner-border-radius: calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
|
|
2011
2025
|
// $dropdown-divider-bg: $dropdown-border-color !default;
|
|
2012
2026
|
// $dropdown-divider-margin-y: $spacer * .5 !default;
|
|
2013
|
-
$dropdown-box-shadow:
|
|
2027
|
+
// $dropdown-box-shadow: var(--#{$prefix}box-shadow) !default;
|
|
2014
2028
|
|
|
2015
|
-
// $dropdown-link-color: $
|
|
2016
|
-
// $dropdown-link-hover-color:
|
|
2029
|
+
// $dropdown-link-color: var(--#{$prefix}body-color) !default;
|
|
2030
|
+
// $dropdown-link-hover-color: $dropdown-link-color !default;
|
|
2017
2031
|
$dropdown-link-hover-bg: $gray-100 !default;
|
|
2018
2032
|
|
|
2019
2033
|
$dropdown-link-active-color: shades-css-var('primary', 'bg-color', true) !default;
|
|
2020
2034
|
$dropdown-link-active-bg: shades-css-var('primary', 'bg-color') !default;
|
|
2021
2035
|
|
|
2022
|
-
|
|
2036
|
+
$dropdown-link-disabled-color: var(--#{$prefix}gray-500) !default;
|
|
2023
2037
|
|
|
2024
2038
|
// $dropdown-item-padding-y: $spacer * .25 !default;
|
|
2025
2039
|
// $dropdown-item-padding-x: $spacer !default;
|
|
2026
2040
|
|
|
2027
|
-
$dropdown-header-color: $white !default;
|
|
2041
|
+
$dropdown-header-color: var(--#{$prefix}white) !default;
|
|
2028
2042
|
// $dropdown-header-padding-x: $dropdown-item-padding-x !default;
|
|
2029
2043
|
// $dropdown-header-padding-y: $dropdown-padding-y !default;
|
|
2030
2044
|
// fusv-disable
|
|
@@ -2059,34 +2073,34 @@ $pagination-padding-x-lg: 0.5rem !default;
|
|
|
2059
2073
|
|
|
2060
2074
|
// $pagination-font-size: $font-size-base !default;
|
|
2061
2075
|
|
|
2062
|
-
$pagination-color: $black !default;
|
|
2063
|
-
// $pagination-bg: $
|
|
2064
|
-
// $pagination-border-
|
|
2065
|
-
// $pagination-border-
|
|
2066
|
-
// $pagination-margin-start:
|
|
2067
|
-
// $pagination-border-color: $
|
|
2076
|
+
$pagination-color: var(--#{$prefix}black) !default;
|
|
2077
|
+
// $pagination-bg: var(--#{$prefix}body-bg) !default;
|
|
2078
|
+
// $pagination-border-radius: var(--#{$prefix}border-radius) !default;
|
|
2079
|
+
// $pagination-border-width: var(--#{$prefix}border-width) !default;
|
|
2080
|
+
// $pagination-margin-start: calc(#{$pagination-border-width} * -1) !default; // stylelint-disable-line function-disallowed-list
|
|
2081
|
+
// $pagination-border-color: var(--#{$prefix}border-color) !default;
|
|
2068
2082
|
|
|
2069
2083
|
$pagination-focus-color: shades-css-var('white', 'bg-color', true) !default; // $link-hover-color
|
|
2070
2084
|
$pagination-focus-bg: shades-css-var('white', 'bg-color') !default; // default $gray-200
|
|
2071
|
-
// $pagination-focus-box-shadow: $
|
|
2085
|
+
// $pagination-focus-box-shadow: $focus-ring-box-shadow !default;
|
|
2072
2086
|
// $pagination-focus-outline: 0 !default;
|
|
2073
2087
|
|
|
2074
2088
|
$pagination-hover-color: shades-css-var('white', 'bg-hover-color', true) !default;
|
|
2075
2089
|
$pagination-hover-bg: shades-css-var('white', 'bg-hover-color') !default; // default $gray-200
|
|
2076
|
-
// $pagination-hover-border-color: $
|
|
2090
|
+
// $pagination-hover-border-color: var(--#{$prefix}border-color) !default;
|
|
2077
2091
|
|
|
2078
2092
|
// $pagination-active-color: $component-active-color !default;
|
|
2079
2093
|
// $pagination-active-bg: $component-active-bg !default;
|
|
2080
2094
|
// $pagination-active-border-color: $pagination-active-bg !default;
|
|
2081
2095
|
|
|
2082
|
-
$pagination-disabled-color: $
|
|
2083
|
-
|
|
2084
|
-
// $pagination-disabled-border-color: $
|
|
2096
|
+
$pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
|
|
2097
|
+
$pagination-disabled-bg: var(--#{$prefix}white) !default;
|
|
2098
|
+
// $pagination-disabled-border-color: var(--#{$prefix}border-color) !default;
|
|
2085
2099
|
|
|
2086
2100
|
// $pagination-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
|
2087
2101
|
|
|
2088
|
-
// $pagination-border-radius-sm: $border-radius-sm !default;
|
|
2089
|
-
// $pagination-border-radius-lg: $border-radius-lg !default;
|
|
2102
|
+
// $pagination-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
|
2103
|
+
// $pagination-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
|
2090
2104
|
// scss-docs-end pagination-variables
|
|
2091
2105
|
|
|
2092
2106
|
// Placeholders
|
|
@@ -2104,18 +2118,18 @@ $card-spacer-x: 1rem !default;
|
|
|
2104
2118
|
// $card-title-spacer-y: $spacer * .5 !default;
|
|
2105
2119
|
// $card-title-color: null !default;
|
|
2106
2120
|
// $card-subtitle-color: null !default;
|
|
2107
|
-
// $card-border-width: $border-width !default;
|
|
2108
|
-
$card-border-color: $border-color !default;
|
|
2109
|
-
$card-border-radius: $border-radius-lg !default;
|
|
2121
|
+
// $card-border-width: var(--#{$prefix}border-width) !default;
|
|
2122
|
+
$card-border-color: var(--#{$prefix}border-color) !default;
|
|
2123
|
+
$card-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
|
2110
2124
|
// $card-box-shadow: null !default;
|
|
2111
2125
|
// $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
|
|
2112
2126
|
// $card-cap-padding-y: $card-spacer-y * .5 !default;
|
|
2113
2127
|
// $card-cap-padding-x: $card-spacer-x !default;
|
|
2114
|
-
// $card-cap-bg: rgba($
|
|
2128
|
+
// $card-cap-bg: rgba(var(--#{$prefix}body-color-rgb), .03) !default;
|
|
2115
2129
|
// $card-cap-color: null !default;
|
|
2116
2130
|
// $card-height: null !default;
|
|
2117
2131
|
// $card-color: null !default;
|
|
2118
|
-
// $card-bg: $
|
|
2132
|
+
// $card-bg: var(--#{$prefix}body-bg) !default;
|
|
2119
2133
|
// $card-img-overlay-padding: $spacer !default;
|
|
2120
2134
|
// $card-group-margin: $grid-gutter-width * .5 !default;
|
|
2121
2135
|
// scss-docs-end card-variables
|
|
@@ -2125,11 +2139,11 @@ $card-border-radius: $border-radius-lg !default;
|
|
|
2125
2139
|
// scss-docs-start accordion-variables
|
|
2126
2140
|
$accordion-padding-y: 0.75rem !default;
|
|
2127
2141
|
$accordion-padding-x: 1rem !default;
|
|
2128
|
-
$accordion-color: $body-color !default;
|
|
2129
|
-
$accordion-bg: $body-bg !default;
|
|
2130
|
-
// $accordion-border-width: $border-width !default;
|
|
2131
|
-
$accordion-border-color:
|
|
2132
|
-
// $accordion-border-radius: $border-radius !default;
|
|
2142
|
+
$accordion-color: var(--#{$prefix}body-color) !default;
|
|
2143
|
+
$accordion-bg: var(--#{$prefix}body-bg) !default;
|
|
2144
|
+
// $accordion-border-width: var(--#{$prefix}border-width) !default;
|
|
2145
|
+
// $accordion-border-color: var(--#{$prefix}border-color) !default;
|
|
2146
|
+
// $accordion-border-radius: var(--#{$prefix}border-radius) !default;
|
|
2133
2147
|
// $accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;
|
|
2134
2148
|
|
|
2135
2149
|
// $accordion-body-padding-y: $accordion-padding-y !default;
|
|
@@ -2137,8 +2151,8 @@ $accordion-border-color: $border-color !default;
|
|
|
2137
2151
|
|
|
2138
2152
|
// $accordion-button-padding-y: $accordion-padding-y !default;
|
|
2139
2153
|
// $accordion-button-padding-x: $accordion-padding-x !default;
|
|
2140
|
-
// $accordion-button-color: $
|
|
2141
|
-
// $accordion-button-bg: $accordion-bg !default;
|
|
2154
|
+
// $accordion-button-color: var(--#{$prefix}body-color) !default;
|
|
2155
|
+
// $accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
|
|
2142
2156
|
// $accordion-transition: $btn-transition, border-radius .15s ease !default;
|
|
2143
2157
|
$accordion-button-active-bg: $accordion-bg !default;
|
|
2144
2158
|
$accordion-button-active-color: $accordion-color !default;
|
|
@@ -2159,15 +2173,15 @@ $accordion-icon-active-color: $accordion-icon-color !default;
|
|
|
2159
2173
|
// Tooltips
|
|
2160
2174
|
|
|
2161
2175
|
// scss-docs-start tooltip-variables
|
|
2162
|
-
$tooltip-font-size:
|
|
2176
|
+
// $tooltip-font-size: $font-size-sm !default;
|
|
2163
2177
|
// $tooltip-max-width: 200px !default;
|
|
2164
|
-
// $tooltip-color: $
|
|
2165
|
-
$tooltip-bg: $gray-600 !default;
|
|
2178
|
+
// $tooltip-color: var(--#{$prefix}body-bg) !default;
|
|
2179
|
+
$tooltip-bg: var(--#{$prefix}gray-600) !default;
|
|
2166
2180
|
$tooltip-border-radius: 0.25rem !default;
|
|
2167
2181
|
$tooltip-opacity: 1 !default;
|
|
2168
2182
|
$tooltip-padding-y: 0.25rem !default;
|
|
2169
2183
|
$tooltip-padding-x: 0.75rem !default;
|
|
2170
|
-
// $tooltip-margin:
|
|
2184
|
+
// $tooltip-margin: null !default; // TODO: remove this in v6
|
|
2171
2185
|
|
|
2172
2186
|
// $tooltip-arrow-width: .8rem !default;
|
|
2173
2187
|
// $tooltip-arrow-height: .4rem !default;
|
|
@@ -2190,21 +2204,21 @@ $tooltip-padding-x: 0.75rem !default;
|
|
|
2190
2204
|
|
|
2191
2205
|
// scss-docs-start popover-variables
|
|
2192
2206
|
$popover-font-size: $font-size-base !default;
|
|
2193
|
-
// $popover-bg: $
|
|
2207
|
+
// $popover-bg: var(--#{$prefix}body-bg) !default;
|
|
2194
2208
|
$popover-max-width: 50vw !default; // default 276px
|
|
2195
|
-
// $popover-border-width: $border-width !default;
|
|
2196
|
-
$popover-border-color: $border-color !default;
|
|
2197
|
-
$popover-border-radius: $border-radius !default;
|
|
2198
|
-
// $popover-inner-border-radius:
|
|
2209
|
+
// $popover-border-width: var(--#{$prefix}border-width) !default;
|
|
2210
|
+
$popover-border-color: var(--#{$prefix}border-color) !default;
|
|
2211
|
+
$popover-border-radius: var(--#{$prefix}border-radius) !default;
|
|
2212
|
+
// $popover-inner-border-radius: calc(#{$popover-border-radius} - #{$popover-border-width}) !default;
|
|
2199
2213
|
$popover-box-shadow: var(--#{$prefix}box-shadow) !default;
|
|
2200
2214
|
|
|
2201
2215
|
// $popover-header-font-size: $font-size-base !default;
|
|
2202
|
-
$popover-header-bg: $white !default;
|
|
2203
|
-
// $popover-header-color:
|
|
2216
|
+
$popover-header-bg: var(--#{$prefix}white) !default;
|
|
2217
|
+
// $popover-header-color: $headings-color !default;
|
|
2204
2218
|
$popover-header-padding-y: 0 !default;
|
|
2205
2219
|
$popover-header-padding-x: 0 !default;
|
|
2206
2220
|
|
|
2207
|
-
// $popover-body-color: $body-color !default;
|
|
2221
|
+
// $popover-body-color: var(--#{$prefix}body-color) !default;
|
|
2208
2222
|
$popover-body-padding-y: 0 !default;
|
|
2209
2223
|
$popover-body-padding-x: 0 !default;
|
|
2210
2224
|
|
|
@@ -2215,7 +2229,7 @@ $popover-arrow-width: 1.3rem !default;
|
|
|
2215
2229
|
// fusv-disable
|
|
2216
2230
|
// Deprecated in Bootstrap 5.2.0 for CSS variables
|
|
2217
2231
|
// $popover-arrow-color: $popover-bg !default;
|
|
2218
|
-
$popover-arrow-outer-color: $gray-200 !default;
|
|
2232
|
+
$popover-arrow-outer-color: var(--#{$prefix}gray-200) !default;
|
|
2219
2233
|
// fusv-enable
|
|
2220
2234
|
|
|
2221
2235
|
// Toasts
|
|
@@ -2226,16 +2240,16 @@ $toast-padding-x: 1rem !default;
|
|
|
2226
2240
|
$toast-padding-y: 0.75rem !default;
|
|
2227
2241
|
// $toast-font-size: .875rem !default;
|
|
2228
2242
|
// $toast-color: null !default;
|
|
2229
|
-
// $toast-background-color: rgba($
|
|
2230
|
-
// $toast-border-width:
|
|
2231
|
-
// $toast-border-color:
|
|
2243
|
+
// $toast-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
|
2244
|
+
// $toast-border-width: var(--#{$prefix}border-width) !default;
|
|
2245
|
+
// $toast-border-color: var(--#{$prefix}border-color-translucent) !default;
|
|
2232
2246
|
$toast-border-radius: 0.25rem !default;
|
|
2233
|
-
// $toast-box-shadow: $box-shadow !default;
|
|
2247
|
+
// $toast-box-shadow: var(--#{$prefix}box-shadow) !default;
|
|
2234
2248
|
// $toast-spacing: $container-padding-x !default;
|
|
2235
2249
|
|
|
2236
|
-
// $toast-header-color: $
|
|
2237
|
-
// $toast-header-background-color: rgba($
|
|
2238
|
-
// $toast-header-border-color:
|
|
2250
|
+
// $toast-header-color: var(--#{$prefix}secondary-color) !default;
|
|
2251
|
+
// $toast-header-background-color: rgba(var(--#{$prefix}body-bg-rgb), .85) !default;
|
|
2252
|
+
// $toast-header-border-color: $toast-border-color !default;
|
|
2239
2253
|
// scss-docs-end toast-variables
|
|
2240
2254
|
|
|
2241
2255
|
// Badges
|
|
@@ -2262,13 +2276,13 @@ $badge-border-radius: 0.25rem !default;
|
|
|
2262
2276
|
$modal-title-line-height: 1.3 !default;
|
|
2263
2277
|
|
|
2264
2278
|
// $modal-content-color: null !default;
|
|
2265
|
-
// $modal-content-bg: $
|
|
2279
|
+
// $modal-content-bg: var(--#{$prefix}body-bg) !default;
|
|
2266
2280
|
$modal-content-border-color: none !default;
|
|
2267
|
-
// $modal-content-border-width: $border-width !default;
|
|
2268
|
-
// $modal-content-border-radius: $border-radius-lg !default;
|
|
2281
|
+
// $modal-content-border-width: var(--#{$prefix}border-width) !default;
|
|
2282
|
+
// $modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
|
|
2269
2283
|
// $modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width) !default;
|
|
2270
|
-
// $modal-content-box-shadow-xs: $box-shadow-sm !default;
|
|
2271
|
-
// $modal-content-box-shadow-sm-up: $box-shadow !default;
|
|
2284
|
+
// $modal-content-box-shadow-xs: var(--#{$prefix}box-shadow-sm) !default;
|
|
2285
|
+
// $modal-content-box-shadow-sm-up: var(--#{$prefix}box-shadow) !default;
|
|
2272
2286
|
|
|
2273
2287
|
// $modal-backdrop-bg: $black !default;
|
|
2274
2288
|
$modal-backdrop-opacity: 0.1 !default;
|
|
@@ -2302,9 +2316,9 @@ $modal-backdrop-opacity: 0.1 !default;
|
|
|
2302
2316
|
$alert-padding-y: 0.7rem !default;
|
|
2303
2317
|
$alert-padding-x: 1.25rem !default;
|
|
2304
2318
|
// $alert-margin-bottom: 1rem !default;
|
|
2305
|
-
// $alert-border-radius: $border-radius !default;
|
|
2319
|
+
// $alert-border-radius: var(--#{$prefix}border-radius) !default;
|
|
2306
2320
|
// $alert-link-font-weight: $font-weight-bold !default;
|
|
2307
|
-
// $alert-border-width: $border-width !default;
|
|
2321
|
+
// $alert-border-width: var(--#{$prefix}border-width) !default;
|
|
2308
2322
|
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
|
|
2309
2323
|
// scss-docs-end alert-variables
|
|
2310
2324
|
|
|
@@ -2319,9 +2333,9 @@ $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width
|
|
|
2319
2333
|
// scss-docs-start progress-variables
|
|
2320
2334
|
$progress-height: 5px !default;
|
|
2321
2335
|
// $progress-font-size: $font-size-base * .75 !default;
|
|
2322
|
-
$progress-bg: $gray-100 !default;
|
|
2323
|
-
$progress-border-radius:
|
|
2324
|
-
// $progress-box-shadow: $box-shadow-inset !default;
|
|
2336
|
+
$progress-bg: var(--#{$prefix}gray-100) !default;
|
|
2337
|
+
$progress-border-radius: var(--#{$prefix}border-radius-xl) !default;
|
|
2338
|
+
// $progress-box-shadow: var(--#{$prefix}box-shadow-inset) !default;
|
|
2325
2339
|
// $progress-bar-color: $white !default;
|
|
2326
2340
|
// $progress-bar-bg: $primary !default;
|
|
2327
2341
|
// $progress-bar-animation-timing: 1s linear infinite !default;
|
|
@@ -2331,11 +2345,11 @@ $progress-border-radius: 1rem !default;
|
|
|
2331
2345
|
// List group
|
|
2332
2346
|
|
|
2333
2347
|
// scss-docs-start list-group-variables
|
|
2334
|
-
// $list-group-color: $
|
|
2335
|
-
// $list-group-bg: $
|
|
2336
|
-
$list-group-border-color:
|
|
2337
|
-
// $list-group-border-width: $border-width !default;
|
|
2338
|
-
// $list-group-border-radius: $border-radius !default;
|
|
2348
|
+
// $list-group-color: var(--#{$prefix}body-color) !default;
|
|
2349
|
+
// $list-group-bg: var(--#{$prefix}body-bg) !default;
|
|
2350
|
+
// $list-group-border-color: var(--#{$prefix}border-color) !default;
|
|
2351
|
+
// $list-group-border-width: var(--#{$prefix}border-width) !default;
|
|
2352
|
+
// $list-group-border-radius: var(--#{$prefix}border-radius) !default;
|
|
2339
2353
|
|
|
2340
2354
|
$list-group-item-padding-y: 0.6875rem !default;
|
|
2341
2355
|
$list-group-item-padding-x: 1rem !default;
|
|
@@ -2347,13 +2361,13 @@ $list-group-item-padding-x: 1rem !default;
|
|
|
2347
2361
|
$list-group-hover-bg: shades-css-var('white', 'bg-hover-color') !default; // default $gray-100 $df-hover-bg-color
|
|
2348
2362
|
$list-group-active-color: shades-css-var('primary', 'bg-color') !default; // default $component-active-color
|
|
2349
2363
|
$list-group-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default; // $component-active-bg
|
|
2350
|
-
$list-group-active-border-color: $gray-100 !default; // $list-group-active-bg
|
|
2364
|
+
$list-group-active-border-color: var(--#{$prefix}gray-100) !default; // $list-group-active-bg
|
|
2351
2365
|
|
|
2352
|
-
$list-group-disabled-color: $
|
|
2353
|
-
$list-group-disabled-bg: $gray-100 !default; // default $list-group-bg, align with $df-disabled-bg-color
|
|
2366
|
+
$list-group-disabled-color: var(--#{$prefix}disabled-color) !default;
|
|
2367
|
+
$list-group-disabled-bg: var(--#{$prefix}gray-100) !default; // default $list-group-bg, align with $df-disabled-bg-color
|
|
2354
2368
|
|
|
2355
|
-
$list-group-action-color: $gray-900 !default; // default $
|
|
2356
|
-
|
|
2369
|
+
$list-group-action-color: var(--#{$prefix}gray-900) !default; // default var(--#{$prefix}secondary-color)
|
|
2370
|
+
$list-group-action-hover-color: $list-group-action-color !default;
|
|
2357
2371
|
|
|
2358
2372
|
$list-group-action-active-color: shades-css-var('primary', 'bg-color') !default;
|
|
2359
2373
|
$list-group-action-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.1) !default; // default $gray-200
|
|
@@ -2363,18 +2377,18 @@ $list-group-action-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.
|
|
|
2363
2377
|
|
|
2364
2378
|
// scss-docs-start thumbnail-variables
|
|
2365
2379
|
// $thumbnail-padding: .25rem !default;
|
|
2366
|
-
// $thumbnail-bg: $body-bg !default;
|
|
2367
|
-
// $thumbnail-border-width: $border-width !default;
|
|
2368
|
-
// $thumbnail-border-color: $
|
|
2369
|
-
// $thumbnail-border-radius: $border-radius !default;
|
|
2370
|
-
// $thumbnail-box-shadow: $box-shadow-sm !default;
|
|
2380
|
+
// $thumbnail-bg: var(--#{$prefix}body-bg) !default;
|
|
2381
|
+
// $thumbnail-border-width: var(--#{$prefix}border-width) !default;
|
|
2382
|
+
// $thumbnail-border-color: var(--#{$prefix}border-color) !default;
|
|
2383
|
+
// $thumbnail-border-radius: var(--#{$prefix}border-radius) !default;
|
|
2384
|
+
// $thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm) !default;
|
|
2371
2385
|
// scss-docs-end thumbnail-variables
|
|
2372
2386
|
|
|
2373
2387
|
// Figures
|
|
2374
2388
|
|
|
2375
2389
|
// scss-docs-start figure-variables
|
|
2376
2390
|
// $figure-caption-font-size: $small-font-size !default;
|
|
2377
|
-
|
|
2391
|
+
$figure-caption-color: var(--#{$prefix}gray-600) !default;
|
|
2378
2392
|
// scss-docs-end figure-variables
|
|
2379
2393
|
|
|
2380
2394
|
// Breadcrumbs
|
|
@@ -2386,8 +2400,8 @@ $list-group-action-active-bg: rgba(shades-rgb-css-var('primary', 'bg-color'), 0.
|
|
|
2386
2400
|
$breadcrumb-item-padding-x: 0 !default; //.5rem default
|
|
2387
2401
|
// $breadcrumb-margin-bottom: 1rem !default;
|
|
2388
2402
|
$breadcrumb-bg: none !default;
|
|
2389
|
-
|
|
2390
|
-
|
|
2403
|
+
$breadcrumb-divider-color: var(--#{$prefix}gray-600) !default;
|
|
2404
|
+
$breadcrumb-active-color: var(--#{$prefix}gray-600) !default;
|
|
2391
2405
|
// $breadcrumb-divider: quote("/") !default;
|
|
2392
2406
|
// $breadcrumb-divider-flipped: $breadcrumb-divider !default;
|
|
2393
2407
|
// $breadcrumb-border-radius: null !default;
|
|
@@ -2473,8 +2487,8 @@ $btn-close-opacity: 0.55 !default;
|
|
|
2473
2487
|
// $offcanvas-border-color: $modal-content-border-color !default;
|
|
2474
2488
|
// $offcanvas-border-width: $modal-content-border-width !default;
|
|
2475
2489
|
// $offcanvas-title-line-height: $modal-title-line-height !default;
|
|
2476
|
-
// $offcanvas-bg-color: $
|
|
2477
|
-
// $offcanvas-color: $
|
|
2490
|
+
// $offcanvas-bg-color: var(--#{$prefix}body-bg) !default;
|
|
2491
|
+
// $offcanvas-color: var(--#{$prefix}body-color) !default;
|
|
2478
2492
|
// $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
|
|
2479
2493
|
// $offcanvas-backdrop-bg: $modal-backdrop-bg !default;
|
|
2480
2494
|
// $offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
|
|
@@ -2488,8 +2502,8 @@ $code-color: shades-css-var('pink', 'text-color') !default;
|
|
|
2488
2502
|
// $kbd-padding-y: .2rem !default;
|
|
2489
2503
|
// $kbd-padding-x: .4rem !default;
|
|
2490
2504
|
// $kbd-font-size: $code-font-size !default;
|
|
2491
|
-
// $kbd-color: $
|
|
2492
|
-
// $kbd-bg: $
|
|
2505
|
+
// $kbd-color: var(--#{$prefix}body-bg) !default;
|
|
2506
|
+
// $kbd-bg: var(--#{$prefix}body-color) !default;
|
|
2493
2507
|
// $nested-kbd-font-weight: null !default; // Deprecated in v5.2.0, removing in v6
|
|
2494
2508
|
|
|
2495
2509
|
// $pre-color: null !default;
|