@dynamic-framework/ui-react 1.34.0 → 1.35.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/README.md +1 -1
  2. package/dist/css/bootstrap-icons.css +3 -3
  3. package/dist/css/bootstrap-icons.min.css +2 -2
  4. package/dist/css/bootstrap-icons.scss +1 -1
  5. package/dist/css/dynamic-ui-non-root.css +720 -963
  6. package/dist/css/dynamic-ui-non-root.min.css +2 -2
  7. package/dist/css/dynamic-ui-root.css +1 -1
  8. package/dist/css/dynamic-ui-root.min.css +1 -1
  9. package/dist/css/dynamic-ui.css +720 -963
  10. package/dist/css/dynamic-ui.min.css +2 -2
  11. package/dist/css/fonts/bootstrap-icons.woff +0 -0
  12. package/dist/css/fonts/bootstrap-icons.woff2 +0 -0
  13. package/dist/index.esm.js +576 -146
  14. package/dist/index.esm.js.map +1 -1
  15. package/dist/index.js +573 -143
  16. package/dist/index.js.map +1 -1
  17. package/dist/js/bootstrap.bundle.js +19 -18
  18. package/dist/js/bootstrap.bundle.min.js +3 -3
  19. package/dist/js/bootstrap.esm.js +19 -16
  20. package/dist/js/bootstrap.esm.min.js +3 -3
  21. package/dist/js/bootstrap.js +19 -16
  22. package/dist/js/bootstrap.min.js +3 -3
  23. package/dist/types/components/DBoxFile/DBoxFile.d.ts +6 -5
  24. package/dist/types/components/DBoxFile/useDBoxFile.d.ts +37 -0
  25. package/dist/types/components/DBoxFile/utils.d.ts +39 -0
  26. package/dist/types/components/DDatePicker/DDatePicker.d.ts +6 -12
  27. package/dist/types/components/DDatePicker/components/DDatePickerHeaderSelector.d.ts +38 -0
  28. package/dist/types/components/{DDatePickerInput → DDatePicker/components}/DDatePickerInput.d.ts +2 -2
  29. package/dist/types/components/{DDatePickerTime → DDatePicker/components}/DDatePickerTime.d.ts +2 -2
  30. package/dist/types/components/DInput/DInput.d.ts +1 -1
  31. package/dist/types/components/DInputCounter/DInputCounter.d.ts +2 -2
  32. package/dist/types/components/DInputCurrency/DInputCurrency.d.ts +2 -2
  33. package/dist/types/components/DInputCurrencyBase/DInputCurrencyBase.d.ts +2 -2
  34. package/dist/types/components/DInputMask/DInputMask.d.ts +1 -1
  35. package/dist/types/components/DInputRange/DInputRange.d.ts +1 -1
  36. package/dist/types/components/DInputSearch/DInputSearch.d.ts +1 -1
  37. package/dist/types/components/DPopover/DPopover.d.ts +0 -3
  38. package/dist/types/utils/attr-accept.d.ts +11 -0
  39. package/dist/types/utils/getKeyboardFocusableElements.d.ts +1 -0
  40. package/jest/setup.js +14 -0
  41. package/package.json +13 -14
  42. package/src/style/abstracts/variables/_+import.scss +1 -0
  43. package/src/style/abstracts/variables/_box-file.scss +14 -7
  44. package/src/style/abstracts/variables/_cards.scss +1 -1
  45. package/src/style/abstracts/variables/_datepicker.scss +50 -0
  46. package/src/style/abstracts/variables/_forms.scss +6 -3
  47. package/src/style/base/_form-switch.scss +23 -2
  48. package/src/style/base/_input-group.scss +18 -1
  49. package/src/style/base/_nav.scss +0 -1
  50. package/src/style/base/_toast.scss +2 -0
  51. package/src/style/components/_d-box-file.scss +31 -15
  52. package/src/style/components/_d-button-icon.scss +17 -16
  53. package/src/style/components/_d-datepicker.scss +578 -243
  54. package/src/style/components/_d-input-pin.scss +8 -5
  55. package/src/style/components/_d-quick-action-button.scss +1 -1
  56. package/src/style/components/_d-quick-action-check.scss +1 -1
  57. package/src/style/components/_d-select.scss +35 -6
  58. package/src/style/components/_d-stepper-desktop.scss +1 -1
  59. package/src/style/helpers/_text-truncate.scss +2 -2
  60. package/dist/types/components/DDatePickerHeader/DDatePickerHeader.d.ts +0 -24
  61. package/dist/types/components/DDatePickerHeader/index.d.ts +0 -2
  62. package/dist/types/components/DDatePickerInput/index.d.ts +0 -2
  63. package/dist/types/components/DDatePickerTime/index.d.ts +0 -2
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * dynamic-framework 1.34.0
2
+ * dynamic-framework 1.35.0
3
3
  * bootstrap ~5.3.3
4
4
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
5
5
  */
@@ -325,8 +325,8 @@ legend {
325
325
  width: 100%;
326
326
  padding: 0;
327
327
  margin-bottom: 0.5rem;
328
- font-size: calc(1.275rem + 0.3vw);
329
328
  line-height: inherit;
329
+ font-size: calc(1.275rem + 0.3vw);
330
330
  }
331
331
  @media (min-width: 1200px) {
332
332
  legend {
@@ -932,7 +932,7 @@ progress {
932
932
  }
933
933
 
934
934
  .col {
935
- flex: 1 0 0%;
935
+ flex: 1 0 0;
936
936
  }
937
937
 
938
938
  .row-cols-auto > * {
@@ -1391,7 +1391,7 @@ progress {
1391
1391
 
1392
1392
  @media (min-width: 576px) {
1393
1393
  .col-sm {
1394
- flex: 1 0 0%;
1394
+ flex: 1 0 0;
1395
1395
  }
1396
1396
  .row-cols-sm-auto > * {
1397
1397
  flex: 0 0 auto;
@@ -1760,7 +1760,7 @@ progress {
1760
1760
  }
1761
1761
  @media (min-width: 768px) {
1762
1762
  .col-md {
1763
- flex: 1 0 0%;
1763
+ flex: 1 0 0;
1764
1764
  }
1765
1765
  .row-cols-md-auto > * {
1766
1766
  flex: 0 0 auto;
@@ -2129,7 +2129,7 @@ progress {
2129
2129
  }
2130
2130
  @media (min-width: 992px) {
2131
2131
  .col-lg {
2132
- flex: 1 0 0%;
2132
+ flex: 1 0 0;
2133
2133
  }
2134
2134
  .row-cols-lg-auto > * {
2135
2135
  flex: 0 0 auto;
@@ -2498,7 +2498,7 @@ progress {
2498
2498
  }
2499
2499
  @media (min-width: 1200px) {
2500
2500
  .col-xl {
2501
- flex: 1 0 0%;
2501
+ flex: 1 0 0;
2502
2502
  }
2503
2503
  .row-cols-xl-auto > * {
2504
2504
  flex: 0 0 auto;
@@ -2867,7 +2867,7 @@ progress {
2867
2867
  }
2868
2868
  @media (min-width: 1400px) {
2869
2869
  .col-xxl {
2870
- flex: 1 0 0%;
2870
+ flex: 1 0 0;
2871
2871
  }
2872
2872
  .row-cols-xxl-auto > * {
2873
2873
  flex: 0 0 auto;
@@ -3745,7 +3745,7 @@ textarea.form-control-lg {
3745
3745
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
3746
3746
  background-repeat: no-repeat;
3747
3747
  background-position: right 1rem center;
3748
- background-size: 24px;
3748
+ background-size: 16px;
3749
3749
  border: var(--bs-border-width) solid var(--bs-border-color);
3750
3750
  border-radius: var(--bs-border-radius-sm);
3751
3751
  box-shadow: none;
@@ -4030,9 +4030,11 @@ textarea.form-control-lg {
4030
4030
  top: 0;
4031
4031
  left: 0;
4032
4032
  z-index: 2;
4033
+ max-width: 100%;
4033
4034
  height: 100%;
4034
4035
  padding: 1rem 1rem;
4035
4036
  overflow: hidden;
4037
+ color: rgba(var(--bs-body-color-rgb), 0.65);
4036
4038
  text-align: start;
4037
4039
  text-overflow: ellipsis;
4038
4040
  white-space: nowrap;
@@ -4057,7 +4059,7 @@ textarea.form-control-lg {
4057
4059
  .form-floating > .form-control-plaintext::placeholder {
4058
4060
  color: transparent;
4059
4061
  }
4060
- .form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
4062
+ .form-floating > .form-control:not(:-moz-placeholder), .form-floating > .form-control-plaintext:not(:-moz-placeholder) {
4061
4063
  padding-top: 1.625rem;
4062
4064
  padding-bottom: 0.625rem;
4063
4065
  }
@@ -4075,19 +4077,21 @@ textarea.form-control-lg {
4075
4077
  .form-floating > .form-select {
4076
4078
  padding-top: 1.625rem;
4077
4079
  padding-bottom: 0.625rem;
4080
+ padding-left: 1rem;
4078
4081
  }
4079
- .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
4080
- color: rgba(var(--bs-body-color-rgb), 0.65);
4082
+ .form-floating > .form-control:not(:-moz-placeholder) ~ label {
4081
4083
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4082
4084
  }
4083
4085
  .form-floating > .form-control:focus ~ label,
4084
4086
  .form-floating > .form-control:not(:placeholder-shown) ~ label,
4085
4087
  .form-floating > .form-control-plaintext ~ label,
4086
4088
  .form-floating > .form-select ~ label {
4087
- color: rgba(var(--bs-body-color-rgb), 0.65);
4088
4089
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4089
4090
  }
4090
- .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
4091
+ .form-floating > .form-control:-webkit-autofill ~ label {
4092
+ transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4093
+ }
4094
+ .form-floating > textarea:not(:-moz-placeholder) ~ label::after {
4091
4095
  position: absolute;
4092
4096
  inset: 1rem 0.5rem;
4093
4097
  z-index: -1;
@@ -4096,10 +4100,8 @@ textarea.form-control-lg {
4096
4100
  background-color: var(--bs-white);
4097
4101
  border-radius: var(--bs-border-radius-sm);
4098
4102
  }
4099
- .form-floating > .form-control:focus ~ label::after,
4100
- .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
4101
- .form-floating > .form-control-plaintext ~ label::after,
4102
- .form-floating > .form-select ~ label::after {
4103
+ .form-floating > textarea:focus ~ label::after,
4104
+ .form-floating > textarea:not(:placeholder-shown) ~ label::after {
4103
4105
  position: absolute;
4104
4106
  inset: 1rem 0.5rem;
4105
4107
  z-index: -1;
@@ -4108,9 +4110,8 @@ textarea.form-control-lg {
4108
4110
  background-color: var(--bs-white);
4109
4111
  border-radius: var(--bs-border-radius-sm);
4110
4112
  }
4111
- .form-floating > .form-control:-webkit-autofill ~ label {
4112
- color: rgba(var(--bs-body-color-rgb), 0.65);
4113
- transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
4113
+ .form-floating > textarea:disabled ~ label::after {
4114
+ background-color: var(--bs-gray-100);
4114
4115
  }
4115
4116
  .form-floating > .form-control-plaintext ~ label {
4116
4117
  border-width: var(--bs-border-width) 0;
@@ -4119,10 +4120,6 @@ textarea.form-control-lg {
4119
4120
  .form-floating > .form-control:disabled ~ label {
4120
4121
  color: var(--bs-gray-600);
4121
4122
  }
4122
- .form-floating > :disabled ~ label::after,
4123
- .form-floating > .form-control:disabled ~ label::after {
4124
- background-color: var(--bs-gray-100);
4125
- }
4126
4123
 
4127
4124
  .input-group {
4128
4125
  position: relative;
@@ -4205,7 +4202,7 @@ textarea.form-control-lg {
4205
4202
  border-bottom-right-radius: 0;
4206
4203
  }
4207
4204
  .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
4208
- margin-left: calc(var(--bs-border-width) * -1);
4205
+ margin-left: calc(-1 * var(--bs-border-width));
4209
4206
  border-top-left-radius: 0;
4210
4207
  border-bottom-left-radius: 0;
4211
4208
  }
@@ -4269,7 +4266,7 @@ textarea.form-control-lg {
4269
4266
  --bs-form-select-bg-icon: var(--bs-form-feedback-icon-valid);
4270
4267
  padding-right: 5.5rem;
4271
4268
  background-position: right 1rem center, center right 3rem;
4272
- background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4269
+ background-size: 16px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4273
4270
  }
4274
4271
  .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
4275
4272
  border-color: var(--bs-form-valid-border-color);
@@ -4359,7 +4356,7 @@ textarea.form-control-lg {
4359
4356
  --bs-form-select-bg-icon: var(--bs-form-feedback-icon-invalid);
4360
4357
  padding-right: 5.5rem;
4361
4358
  background-position: right 1rem center, center right 3rem;
4362
- background-size: 24px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4359
+ background-size: 16px, calc(0.75em + 0.75rem) calc(0.75em + 0.75rem);
4363
4360
  }
4364
4361
  .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
4365
4362
  border-color: var(--bs-form-invalid-border-color);
@@ -4753,7 +4750,7 @@ textarea.form-control-lg {
4753
4750
  }
4754
4751
  .btn-group > :not(.btn-check:first-child) + .btn,
4755
4752
  .btn-group > .btn-group:not(:first-child) {
4756
- margin-left: calc(var(--bs-border-width) * -1);
4753
+ margin-left: calc(-1 * var(--bs-border-width));
4757
4754
  }
4758
4755
  .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
4759
4756
  .btn-group > .btn.dropdown-toggle-split:first-child,
@@ -4807,14 +4804,15 @@ textarea.form-control-lg {
4807
4804
  }
4808
4805
  .btn-group-vertical > .btn:not(:first-child),
4809
4806
  .btn-group-vertical > .btn-group:not(:first-child) {
4810
- margin-top: calc(var(--bs-border-width) * -1);
4807
+ margin-top: calc(-1 * var(--bs-border-width));
4811
4808
  }
4812
4809
  .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
4813
4810
  .btn-group-vertical > .btn-group:not(:last-child) > .btn {
4814
4811
  border-bottom-right-radius: 0;
4815
4812
  border-bottom-left-radius: 0;
4816
4813
  }
4817
- .btn-group-vertical > .btn ~ .btn,
4814
+ .btn-group-vertical > .btn:nth-child(n+3),
4815
+ .btn-group-vertical > :not(.btn-check) + .btn,
4818
4816
  .btn-group-vertical > .btn-group:not(:first-child) > .btn {
4819
4817
  border-top-left-radius: 0;
4820
4818
  border-top-right-radius: 0;
@@ -4939,8 +4937,8 @@ textarea.form-control-lg {
4939
4937
 
4940
4938
  .nav-justified > .nav-link,
4941
4939
  .nav-justified .nav-item {
4942
- flex-basis: 0;
4943
4940
  flex-grow: 1;
4941
+ flex-basis: 0;
4944
4942
  text-align: center;
4945
4943
  }
4946
4944
 
@@ -5042,8 +5040,8 @@ textarea.form-control-lg {
5042
5040
  }
5043
5041
 
5044
5042
  .navbar-collapse {
5045
- flex-basis: 100%;
5046
5043
  flex-grow: 1;
5044
+ flex-basis: 100%;
5047
5045
  align-items: center;
5048
5046
  }
5049
5047
 
@@ -5544,7 +5542,7 @@ textarea.form-control-lg {
5544
5542
  flex-flow: row wrap;
5545
5543
  }
5546
5544
  .card-group > .card {
5547
- flex: 1 0 0%;
5545
+ flex: 1 0 0;
5548
5546
  margin-bottom: 0;
5549
5547
  }
5550
5548
  .card-group > .card + .card {
@@ -5555,24 +5553,24 @@ textarea.form-control-lg {
5555
5553
  border-top-right-radius: 0;
5556
5554
  border-bottom-right-radius: 0;
5557
5555
  }
5558
- .card-group > .card:not(:last-child) .card-img-top,
5559
- .card-group > .card:not(:last-child) .card-header {
5556
+ .card-group > .card:not(:last-child) > .card-img-top,
5557
+ .card-group > .card:not(:last-child) > .card-header {
5560
5558
  border-top-right-radius: 0;
5561
5559
  }
5562
- .card-group > .card:not(:last-child) .card-img-bottom,
5563
- .card-group > .card:not(:last-child) .card-footer {
5560
+ .card-group > .card:not(:last-child) > .card-img-bottom,
5561
+ .card-group > .card:not(:last-child) > .card-footer {
5564
5562
  border-bottom-right-radius: 0;
5565
5563
  }
5566
5564
  .card-group > .card:not(:first-child) {
5567
5565
  border-top-left-radius: 0;
5568
5566
  border-bottom-left-radius: 0;
5569
5567
  }
5570
- .card-group > .card:not(:first-child) .card-img-top,
5571
- .card-group > .card:not(:first-child) .card-header {
5568
+ .card-group > .card:not(:first-child) > .card-img-top,
5569
+ .card-group > .card:not(:first-child) > .card-header {
5572
5570
  border-top-left-radius: 0;
5573
5571
  }
5574
- .card-group > .card:not(:first-child) .card-img-bottom,
5575
- .card-group > .card:not(:first-child) .card-footer {
5572
+ .card-group > .card:not(:first-child) > .card-img-bottom,
5573
+ .card-group > .card:not(:first-child) > .card-footer {
5576
5574
  border-bottom-left-radius: 0;
5577
5575
  }
5578
5576
  }
@@ -5703,10 +5701,9 @@ textarea.form-control-lg {
5703
5701
  .accordion-flush > .accordion-item:last-child {
5704
5702
  border-bottom: 0;
5705
5703
  }
5706
- .accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
5707
- border-radius: 0;
5708
- }
5709
- .accordion-flush > .accordion-item > .accordion-collapse {
5704
+ .accordion-flush > .accordion-item > .accordion-collapse,
5705
+ .accordion-flush > .accordion-item > .accordion-header .accordion-button,
5706
+ .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
5710
5707
  border-radius: 0;
5711
5708
  }
5712
5709
 
@@ -5811,7 +5808,7 @@ textarea.form-control-lg {
5811
5808
  }
5812
5809
 
5813
5810
  .page-item:not(:first-child) .page-link {
5814
- margin-left: calc(0 * -1);
5811
+ margin-left: calc(-1 * 0);
5815
5812
  }
5816
5813
  .page-item:first-child .page-link {
5817
5814
  border-top-left-radius: var(--bs-pagination-border-radius);
@@ -5933,7 +5930,7 @@ textarea.form-control-lg {
5933
5930
 
5934
5931
  @keyframes progress-bar-stripes {
5935
5932
  0% {
5936
- background-position-x: 1rem;
5933
+ background-position-x: var(--bs-progress-height);
5937
5934
  }
5938
5935
  }
5939
5936
  .progress,
@@ -6028,22 +6025,6 @@ textarea.form-control-lg {
6028
6025
  counter-increment: section;
6029
6026
  }
6030
6027
 
6031
- .list-group-item-action {
6032
- width: 100%;
6033
- color: var(--bs-list-group-action-color);
6034
- text-align: inherit;
6035
- }
6036
- .list-group-item-action:hover, .list-group-item-action:focus {
6037
- z-index: 1;
6038
- color: var(--bs-list-group-action-hover-color);
6039
- text-decoration: none;
6040
- background-color: var(--bs-list-group-action-hover-bg);
6041
- }
6042
- .list-group-item-action:active {
6043
- color: var(--bs-list-group-action-active-color);
6044
- background-color: var(--bs-list-group-action-active-bg);
6045
- }
6046
-
6047
6028
  .list-group-item {
6048
6029
  position: relative;
6049
6030
  display: block;
@@ -6079,6 +6060,22 @@ textarea.form-control-lg {
6079
6060
  border-top-width: var(--bs-list-group-border-width);
6080
6061
  }
6081
6062
 
6063
+ .list-group-item-action {
6064
+ width: 100%;
6065
+ color: var(--bs-list-group-action-color);
6066
+ text-align: inherit;
6067
+ }
6068
+ .list-group-item-action:not(.active):hover, .list-group-item-action:not(.active):focus {
6069
+ z-index: 1;
6070
+ color: var(--bs-list-group-action-hover-color);
6071
+ text-decoration: none;
6072
+ background-color: var(--bs-list-group-action-hover-bg);
6073
+ }
6074
+ .list-group-item-action:not(.active):active {
6075
+ color: var(--bs-list-group-action-active-color);
6076
+ background-color: var(--bs-list-group-action-active-bg);
6077
+ }
6078
+
6082
6079
  .list-group-horizontal {
6083
6080
  flex-direction: row;
6084
6081
  }
@@ -6338,19 +6335,19 @@ textarea.form-control-lg {
6338
6335
 
6339
6336
  .btn-close {
6340
6337
  --bs-btn-close-color: var(--bs-black);
6341
- --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-black%29'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
6338
+ --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-black%29'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
6342
6339
  --bs-btn-close-opacity: 1;
6343
6340
  --bs-btn-close-hover-opacity: 1;
6344
6341
  --bs-btn-close-focus-shadow: none;
6345
6342
  --bs-btn-close-focus-opacity: 1;
6346
6343
  --bs-btn-close-disabled-opacity: 0.25;
6347
- --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
6348
6344
  box-sizing: content-box;
6349
6345
  width: 1em;
6350
6346
  height: 1em;
6351
6347
  padding: 0 0;
6352
6348
  color: var(--bs-btn-close-color);
6353
6349
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
6350
+ filter: var(--bs-btn-close-filter);
6354
6351
  border: 0;
6355
6352
  border-radius: 1rem;
6356
6353
  opacity: var(--bs-btn-close-opacity);
@@ -6374,7 +6371,12 @@ textarea.form-control-lg {
6374
6371
  }
6375
6372
 
6376
6373
  .btn-close-white {
6377
- filter: var(--bs-btn-close-white-filter);
6374
+ --bs-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
6375
+ }
6376
+
6377
+ :root,
6378
+ [data-bs-theme=light] {
6379
+ --bs-btn-close-filter: ;
6378
6380
  }
6379
6381
 
6380
6382
  .toast {
@@ -6451,7 +6453,7 @@ textarea.form-control-lg {
6451
6453
  --bs-modal-width: 500px;
6452
6454
  --bs-modal-padding: var(--bs-ref-spacer-4);
6453
6455
  --bs-modal-margin: 0.5rem;
6454
- --bs-modal-color: ;
6456
+ --bs-modal-color: var(--bs-body-color);
6455
6457
  --bs-modal-bg: var(--bs-white);
6456
6458
  --bs-modal-border-color: transparent;
6457
6459
  --bs-modal-border-width: var(--bs-border-width);
@@ -6487,8 +6489,8 @@ textarea.form-control-lg {
6487
6489
  pointer-events: none;
6488
6490
  }
6489
6491
  .modal.fade .modal-dialog {
6490
- transition: transform 0.3s ease-out;
6491
6492
  transform: translate(0, -50px);
6493
+ transition: transform 0.3s ease-out;
6492
6494
  }
6493
6495
  @media (prefers-reduced-motion: reduce) {
6494
6496
  .modal.fade .modal-dialog {
@@ -6564,7 +6566,10 @@ textarea.form-control-lg {
6564
6566
  }
6565
6567
  .modal-header .btn-close {
6566
6568
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
6567
- margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
6569
+ margin-top: calc(-0.5 * var(--bs-modal-header-padding-y));
6570
+ margin-right: calc(-0.5 * var(--bs-modal-header-padding-x));
6571
+ margin-bottom: calc(-0.5 * var(--bs-modal-header-padding-y));
6572
+ margin-left: auto;
6568
6573
  }
6569
6574
 
6570
6575
  .modal-title {
@@ -7086,6 +7091,7 @@ textarea.form-control-lg {
7086
7091
  color: var(--bs-white);
7087
7092
  text-align: center;
7088
7093
  background: none;
7094
+ filter: var(--bs-carousel-control-icon-filter);
7089
7095
  border: 0;
7090
7096
  opacity: 0.5;
7091
7097
  transition: opacity 0.15s ease;
@@ -7124,11 +7130,11 @@ textarea.form-control-lg {
7124
7130
  }
7125
7131
 
7126
7132
  .carousel-control-prev-icon {
7127
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")*/;
7133
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e")*/;
7128
7134
  }
7129
7135
 
7130
7136
  .carousel-control-next-icon {
7131
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")*/;
7137
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e") /*rtl:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='var%28--bs-white%29'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e")*/;
7132
7138
  }
7133
7139
 
7134
7140
  .carousel-indicators {
@@ -7154,7 +7160,7 @@ textarea.form-control-lg {
7154
7160
  margin-left: 3px;
7155
7161
  text-indent: -999px;
7156
7162
  cursor: pointer;
7157
- background-color: var(--bs-white);
7163
+ background-color: var(--bs-carousel-indicator-active-bg);
7158
7164
  background-clip: padding-box;
7159
7165
  border: 0;
7160
7166
  border-top: 10px solid transparent;
@@ -7178,19 +7184,21 @@ textarea.form-control-lg {
7178
7184
  left: 15%;
7179
7185
  padding-top: 1.25rem;
7180
7186
  padding-bottom: 1.25rem;
7181
- color: var(--bs-white);
7187
+ color: var(--bs-carousel-caption-color);
7182
7188
  text-align: center;
7183
7189
  }
7184
7190
 
7185
- .carousel-dark .carousel-control-prev-icon,
7186
- .carousel-dark .carousel-control-next-icon {
7187
- filter: invert(1) grayscale(100);
7188
- }
7189
- .carousel-dark .carousel-indicators [data-bs-target] {
7190
- background-color: var(--bs-black);
7191
+ .carousel-dark {
7192
+ --bs-carousel-indicator-active-bg: var(--bs-black);
7193
+ --bs-carousel-caption-color: var(--bs-black);
7194
+ --bs-carousel-control-icon-filter: invert(1) grayscale(100);
7191
7195
  }
7192
- .carousel-dark .carousel-caption {
7193
- color: var(--bs-black);
7196
+
7197
+ :root,
7198
+ [data-bs-theme=light] {
7199
+ --bs-carousel-indicator-active-bg: var(--bs-white);
7200
+ --bs-carousel-caption-color: var(--bs-white);
7201
+ --bs-carousel-control-icon-filter: ;
7194
7202
  }
7195
7203
 
7196
7204
  .spinner-grow,
@@ -7746,7 +7754,10 @@ textarea.form-control-lg {
7746
7754
  }
7747
7755
  .offcanvas-header .btn-close {
7748
7756
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
7749
- margin: calc(-0.5 * var(--bs-offcanvas-padding-y)) calc(-0.5 * var(--bs-offcanvas-padding-x)) calc(-0.5 * var(--bs-offcanvas-padding-y)) auto;
7757
+ margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
7758
+ margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
7759
+ margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
7760
+ margin-left: auto;
7750
7761
  }
7751
7762
 
7752
7763
  .offcanvas-title {
@@ -7989,6 +8000,25 @@ body {
7989
8000
  padding-top: var(--bs-accordion-body-padding-top);
7990
8001
  }
7991
8002
 
8003
+ .form-switch {
8004
+ --bs-form-switch-width: 2em;
8005
+ --bs-form-switch-padding-start: 2em * -1;
8006
+ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23a7a7b4'/%3e%3c/svg%3e");
8007
+ --bs-form-switch-border-radius: 2em;
8008
+ --bs-form-switch-focus-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239191d4'/%3e%3c/svg%3e");
8009
+ --bs-form-switch-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
8010
+ }
8011
+ .form-switch .form-check-input {
8012
+ width: var(--bs-form-switch-width);
8013
+ margin-left: var(--bs-form-switch-padding-start);
8014
+ border-radius: var(--bs-form-switch-border-radius);
8015
+ }
8016
+ .form-switch .form-check-input:focus {
8017
+ --bs-form-switch-bg: var(--bs-form-switch-focus-bg-image);
8018
+ }
8019
+ .form-switch .form-check-input:checked {
8020
+ --bs-form-switch-bg: var(--bs-form-switch-checked-bg-image);
8021
+ }
7992
8022
  .form-switch .form-check-input.is-valid:not(:checked) {
7993
8023
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23198754'/%3e%3c/svg%3e");
7994
8024
  }
@@ -8088,6 +8118,10 @@ body {
8088
8118
  .input-group > .form-floating:not(:first-child) .form-control {
8089
8119
  padding-left: 0;
8090
8120
  }
8121
+ .input-group > .form-floating:not(:first-child) .form-select ~ label,
8122
+ .input-group > .form-floating:not(:first-child) .form-control ~ label {
8123
+ padding-left: 0;
8124
+ }
8091
8125
 
8092
8126
  .input-group > .form-floating:not(:last-child) .form-select {
8093
8127
  padding-right: 2rem;
@@ -8107,9 +8141,17 @@ body {
8107
8141
  --bs-input-disabled-border-color: var(--bs-gray-300);
8108
8142
  --bs-input-disabled-bg: var(--bs-gray-100);
8109
8143
  --bs-input-disabled-color: var(--bs-body-color);
8144
+ --bs-input-group-sm-icon-size: 1rem;
8145
+ --bs-input-group-lg-icon-size: 1.75rem;
8110
8146
  border: var(--bs-input-border-width) solid var(--bs-input-border-color);
8111
8147
  border-radius: var(--bs-input-border-radius);
8112
8148
  }
8149
+ .input-group.input-group-sm .d-icon {
8150
+ --bs-icon-component-size: var(--bs-input-group-sm-icon-size);
8151
+ }
8152
+ .input-group.input-group-lg .d-icon {
8153
+ --bs-icon-component-size: var(--bs-input-group-lg-icon-size);
8154
+ }
8113
8155
  .input-group:focus-within {
8114
8156
  border-color: var(--bs-input-focus-border-color);
8115
8157
  box-shadow: var(--bs-input-focus-box-shadow);
@@ -8121,7 +8163,7 @@ body {
8121
8163
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
8122
8164
  }
8123
8165
  .input-group:has(.form-control.is-valid, .form-select.is-valid) ~ .form-text {
8124
- color: var(--bs-form-valid-border-color);
8166
+ color: var(--bs-form-valid-color);
8125
8167
  }
8126
8168
  .input-group:has(.form-control.is-valid, .form-select.is-valid) .input-group-validation-icon {
8127
8169
  --bs-icon-color: var(--bs-success);
@@ -8133,7 +8175,7 @@ body {
8133
8175
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
8134
8176
  }
8135
8177
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) ~ .form-text {
8136
- color: var(--bs-form-invalid-border-color);
8178
+ color: var(--bs-form-invalid-color);
8137
8179
  }
8138
8180
  .input-group:has(.form-control.is-invalid, .form-select.is-invalid) .input-group-validation-icon {
8139
8181
  --bs-icon-color: var(--bs-danger);
@@ -9172,6 +9214,7 @@ label .d-icon {
9172
9214
 
9173
9215
  .toast {
9174
9216
  --bs-toast-header-gap: var(--bs-ref-spacer-2);
9217
+ --bs-toast-body-gap: var(--bs-ref-spacer-2);
9175
9218
  --bs-toast-color: var(--bs-gray-900);
9176
9219
  --bs-toast-close-color: var(--bs-gray-900);
9177
9220
  --bs-toast-header-color: var(--bs-gray-900);
@@ -9185,6 +9228,7 @@ label .d-icon {
9185
9228
  }
9186
9229
  .toast .toast-body {
9187
9230
  display: flex;
9231
+ gap: var(--bs-toast-body-gap);
9188
9232
  align-items: center;
9189
9233
  justify-content: space-between;
9190
9234
  }
@@ -9380,7 +9424,6 @@ label .d-icon {
9380
9424
  .nav-pills,
9381
9425
  .nav-underline {
9382
9426
  gap: var(--bs-nav-tabs-nav-gap);
9383
- padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
9384
9427
  }
9385
9428
  .nav-pills.flex-column,
9386
9429
  .nav-underline.flex-column {
@@ -9587,9 +9630,10 @@ label .d-icon {
9587
9630
  }
9588
9631
  .d-input-pin {
9589
9632
  --bs-input-pin-form-gap: var(--bs-ref-spacer-1);
9590
- --bs-input-pin-form-control-size: 4rem;
9591
9633
  --bs-input-pin-form-control-focus-border-color: var(--bs-focus-ring-border-color);
9592
9634
  --bs-input-pin-form-control-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
9635
+ --bs-input-pin-form-control-min-width: 2rem;
9636
+ --bs-input-pin-form-control-max-width: 4rem;
9593
9637
  display: flex;
9594
9638
  flex-direction: column;
9595
9639
  align-items: flex-start;
@@ -9601,13 +9645,14 @@ label .d-icon {
9601
9645
  width: 100%;
9602
9646
  }
9603
9647
  .d-input-pin .form-control {
9604
- width: var(--bs-input-pin-form-control-size);
9605
- height: var(--bs-input-pin-form-control-size);
9648
+ min-width: var(--bs-input-pin-form-control-min-width);
9649
+ max-width: var(--bs-input-pin-form-control-max-width);
9650
+ aspect-ratio: 1;
9606
9651
  text-align: center;
9607
9652
  box-shadow: none;
9608
9653
  }
9609
9654
  .d-input-pin .form-control:has(~ .input-group-text) {
9610
- padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-4);
9655
+ padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-3);
9611
9656
  }
9612
9657
  .d-input-pin .form-control::-webkit-inner-spin-button,
9613
9658
  .d-input-pin .form-control::-webkit-outer-spin-button {
@@ -9667,15 +9712,13 @@ label .d-icon {
9667
9712
  --bs-btn-sm-padding-y: var(--bs-ref-spacer-2);
9668
9713
  --bs-btn-sm-padding-x: var(--bs-ref-spacer-2);
9669
9714
  }
9670
-
9671
- .btn-lg, .btn-group-lg > .btn {
9715
+ .d-button-icon.btn-lg, .btn-group-lg > .d-button-icon.btn {
9672
9716
  --bs-btn-padding-y: var(--bs-btn-lg-padding-y);
9673
9717
  --bs-btn-padding-x: var(--bs-btn-lg-padding-x);
9674
9718
  --bs-btn-font-size: var(--bs-btn-lg-font-size);
9675
9719
  --bs-btn-border-radius: var(--bs-btn-lg-border-radius);
9676
9720
  }
9677
-
9678
- .btn-sm, .btn-group-sm > .btn {
9721
+ .d-button-icon.btn-sm, .btn-group-sm > .d-button-icon.btn {
9679
9722
  --bs-btn-padding-y: var(--bs-btn-sm-padding-y);
9680
9723
  --bs-btn-padding-x: var(--bs-btn-sm-padding-x);
9681
9724
  --bs-btn-font-size: var(--bs-btn-sm-font-size);
@@ -9757,8 +9800,8 @@ label .d-icon {
9757
9800
  }
9758
9801
  .d-quick-action-button .d-quick-action-button-text {
9759
9802
  display: flex;
9760
- flex-direction: column;
9761
9803
  flex-grow: 1;
9804
+ flex-direction: column;
9762
9805
  }
9763
9806
  .d-quick-action-button .d-quick-action-button-action-link,
9764
9807
  .d-quick-action-button .d-quick-action-button-secondary-action-link {
@@ -9872,8 +9915,8 @@ label .d-icon {
9872
9915
  }
9873
9916
  .d-quick-action-check .d-quick-action-check-detail {
9874
9917
  display: flex;
9875
- flex-direction: column;
9876
9918
  flex-grow: 1;
9919
+ flex-direction: column;
9877
9920
  }
9878
9921
  .d-quick-action-check .d-quick-action-check-line1 {
9879
9922
  font-size: var(--bs-quick-action-check-line1-font-size);
@@ -10107,139 +10150,101 @@ label .d-icon {
10107
10150
  font-weight: var(--bs-collapse-icon-text-header-font-weight);
10108
10151
  }
10109
10152
 
10110
- .react-datepicker__year-read-view--down-arrow,
10111
- .react-datepicker__month-read-view--down-arrow,
10112
- .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
10113
- border-color: #ccc;
10114
- border-style: solid;
10115
- border-width: 3px 3px 0 0;
10116
- content: "";
10117
- display: block;
10118
- height: 9px;
10119
- position: absolute;
10120
- top: 6px;
10121
- width: 9px;
10122
- }
10123
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
10124
- margin-left: -4px;
10125
- position: absolute;
10126
- width: 0;
10127
- }
10128
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
10129
- box-sizing: content-box;
10130
- position: absolute;
10131
- border: 8px solid transparent;
10132
- height: 0;
10133
- width: 1px;
10134
- content: "";
10135
- z-index: -1;
10136
- border-width: 8px;
10137
- left: -8px;
10138
- }
10139
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
10140
- border-bottom-color: #aeaeae;
10141
- }
10142
-
10143
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
10144
- top: 0;
10145
- margin-top: -8px;
10146
- }
10147
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
10148
- border-top: none;
10149
- border-bottom-color: #f0f0f0;
10150
- }
10151
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
10152
- top: 0;
10153
- }
10154
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
10155
- top: -1px;
10156
- border-bottom-color: #aeaeae;
10157
- }
10158
-
10159
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
10160
- bottom: 0;
10161
- margin-bottom: -8px;
10162
- }
10163
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
10164
- border-bottom: none;
10165
- border-top-color: #fff;
10166
- }
10167
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
10168
- bottom: 0;
10169
- }
10170
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
10171
- bottom: -1px;
10172
- border-top-color: #aeaeae;
10173
- }
10174
-
10153
+ /* stylelint-disable */
10175
10154
  .react-datepicker-wrapper {
10176
10155
  display: inline-block;
10177
10156
  padding: 0;
10178
10157
  border: 0;
10158
+ width: 100%;
10159
+ margin-inline: auto;
10179
10160
  }
10180
10161
 
10181
10162
  .react-datepicker {
10182
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
10183
- font-size: 0.8rem;
10184
- background-color: #fff;
10185
- color: #000;
10186
- border: 1px solid #aeaeae;
10187
- border-radius: 0.3rem;
10163
+ --bs-datepicker-bg: var(--bs-white);
10164
+ --bs-datepicker-border-color: var(--bs-gray-400);
10165
+ --bs-datepicker-border: 1px solid var(--bs-gray-400);
10166
+ --bs-datepicker-border-radius: var(--bs-border-radius-sm);
10167
+ --bs-datepicker-header-bg: var(--bs-gray-100);
10168
+ --bs-datepicker-header-border-bottom: 1px solid var(--bs-gray-400);
10169
+ --bs-datepicker-header-padding: var(--bs-ref-spacer-2) 0;
10170
+ --bs-datepicker-header-font-weight: var(--bs-fw-bold);
10171
+ --bs-datepicker-day-names-color: var(--bs-body-color);
10172
+ --bs-datepicker-day-names-font-size: var(--bs-fs-small);
10173
+ --bs-datepicker-body-margin: var(--bs-ref-spacer-2);
10174
+ --bs-datepicker-body-gap: var(--bs-ref-spacer-2);
10175
+ --bs-datepicker-highlighted-color: inherit;
10176
+ --bs-datepicker-highlighted-bg: transparent;
10177
+ --bs-datepicker-highlighted-border-radius: unset;
10178
+ --bs-datepicker-holidays-color: inherit;
10179
+ --bs-datepicker-holidays-bg: transparent;
10180
+ --bs-datepicker-holidays-border-radius: unset;
10181
+ --bs-datepicker-day-border-radius: 0.25rem;
10182
+ --bs-datepicker-day-outside-month-color: var(--bs-gray-700);
10183
+ --bs-datepicker-day-bg: var(--bs-secondary);
10184
+ --bs-datepicker-day-hover-bg: var(--bs-gray-100);
10185
+ --bs-datepicker-day-width: var(--bs-ref-spacer-7);
10186
+ --bs-datepicker-day-selected-color: var(--bs-white);
10187
+ --bs-datepicker-day-selected-bg: var(--bs-secondary);
10188
+ --bs-datepicker-day-disabled-color: var(--bs-gray-400);
10189
+ --bs-datepicker-week-number-color: var(--bs-datepicker-day-disabled-color);
10190
+ --bs-datepicker-week-number-bg: var(--bs-white);
10191
+ --bs-datepicker-week-number-selected-color: var(--bs-datepicker-day-selected-color);
10192
+ --bs-datepicker-week-number-selected-bg: var(--bs-datepicker-day-selected-bg);
10193
+ --bs-datepicker-week-number-hover-bg: var(--bs-datepicker-day-hover-bg);
10194
+ --bs-datepicker-week-number-hover-color: var(--bs-body-color);
10195
+ --bs-datepicker-week-number-border-radius: 0.25rem;
10196
+ --bs-datepicker-range-start-color: var(--bs-white);
10197
+ --bs-datepicker-range-start-bg: var(--bs-secondary-600);
10198
+ --bs-datepicker-range-end-color: var(--bs-white);
10199
+ --bs-datepicker-range-end-bg: var(--bs-secondary-600);
10200
+ --bs-datepicker-in-range-bg: var(--bs-secondary-200);
10201
+ --bs-datepicker-range-color: var(--bs-body-color);
10202
+ --bs-datepicker-in-range-hover-bg: var(--bs-secondary-400);
10203
+ --bs-datepicker-in-range-disabled-color: var(--bs-secondary-300);
10204
+ --bs-datepicker-in-range-disabled-bg: var(--bs-gray-300);
10205
+ --bs-datepicker-portal-bg: rgba(var(--bs-black-rgb), 0.3);
10206
+ background-color: var(--bs-datepicker-bg);
10207
+ border: var(--bs-datepicker-border);
10208
+ border-radius: var(--bs-datepicker-border-radius);
10188
10209
  display: inline-block;
10189
10210
  position: relative;
10211
+ line-height: initial;
10212
+ overflow: hidden;
10190
10213
  }
10191
10214
 
10192
- .react-datepicker--time-only .react-datepicker__triangle {
10193
- left: 35px;
10194
- }
10195
10215
  .react-datepicker--time-only .react-datepicker__time-container {
10196
10216
  border-left: 0;
10197
10217
  }
10198
10218
  .react-datepicker--time-only .react-datepicker__time,
10199
10219
  .react-datepicker--time-only .react-datepicker__time-box {
10200
- border-bottom-left-radius: 0.3rem;
10201
- border-bottom-right-radius: 0.3rem;
10202
- }
10203
-
10204
- .react-datepicker__triangle {
10205
- position: absolute;
10206
- left: 50px;
10220
+ border-bottom-left-radius: var(--bs-datepicker-border-radius);
10221
+ border-bottom-right-radius: var(--bs-datepicker-border-radius);
10207
10222
  }
10208
10223
 
10209
10224
  .react-datepicker-popper {
10210
10225
  z-index: 1;
10226
+ line-height: 0;
10211
10227
  }
10212
- .react-datepicker-popper[data-placement^=bottom] {
10213
- padding-top: 10px;
10214
- }
10215
- .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
10216
- left: auto;
10217
- right: 50px;
10218
- }
10219
- .react-datepicker-popper[data-placement^=top] {
10220
- padding-bottom: 10px;
10221
- }
10222
- .react-datepicker-popper[data-placement^=right] {
10223
- padding-left: 8px;
10224
- }
10225
- .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
10226
- left: auto;
10227
- right: 42px;
10228
+ .react-datepicker-popper .react-datepicker__triangle {
10229
+ --bs-datepicker-border-color: var(--bs-gray-400);
10230
+ stroke: var(--bs-datepicker-border-color);
10228
10231
  }
10229
- .react-datepicker-popper[data-placement^=left] {
10230
- padding-right: 8px;
10232
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
10233
+ --bs-datepicker-header-bg: var(--bs-gray-100);
10234
+ fill: var(--bs-datepicker-header-bg);
10235
+ color: var(--bs-datepicker-header-bg);
10231
10236
  }
10232
- .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
10233
- left: 42px;
10234
- right: auto;
10237
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
10238
+ --bs-datepicker-header-bg: var(--bs-white);
10239
+ fill: var(--bs-datepicker-header-bg);
10240
+ color: var(--bs-datepicker-header-bg);
10235
10241
  }
10236
10242
 
10237
10243
  .react-datepicker__header {
10238
10244
  text-align: center;
10239
- background-color: #f0f0f0;
10240
- border-bottom: 1px solid #aeaeae;
10241
- border-top-left-radius: 0.3rem;
10242
- padding: 8px 0;
10245
+ background-color: var(--bs-datepicker-header-bg);
10246
+ border-bottom: var(--bs-datepicker-header-border-bottom);
10247
+ padding: var(--bs-datepicker-header-padding);
10243
10248
  position: relative;
10244
10249
  }
10245
10250
  .react-datepicker__header--time {
@@ -10250,97 +10255,72 @@ label .d-icon {
10250
10255
  .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
10251
10256
  border-top-left-radius: 0;
10252
10257
  }
10253
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
10254
- border-top-right-radius: 0.3rem;
10258
+ .react-datepicker__header-selector {
10259
+ display: flex;
10260
+ align-items: center;
10261
+ gap: var(--bs-ref-spacer-1);
10255
10262
  }
10256
-
10257
- .react-datepicker__year-dropdown-container--select,
10258
- .react-datepicker__month-dropdown-container--select,
10259
- .react-datepicker__month-year-dropdown-container--select,
10260
- .react-datepicker__year-dropdown-container--scroll,
10261
- .react-datepicker__month-dropdown-container--scroll,
10262
- .react-datepicker__month-year-dropdown-container--scroll {
10263
- display: inline-block;
10264
- margin: 0 15px;
10263
+ .react-datepicker__header-selector .d-select {
10264
+ --bs-select-option-selected-bg: var(--bs-datepicker-bg);
10265
+ --bs-select-option-selected-color: var(--bs-datepicker-text-color);
10265
10266
  }
10266
-
10267
- .react-datepicker__current-month,
10268
- .react-datepicker-time__header,
10269
- .react-datepicker-year-header {
10270
- margin-top: 0;
10271
- color: #000;
10272
- font-weight: bold;
10273
- font-size: 0.944rem;
10267
+ .react-datepicker__header-selector .d-select .d-select__control {
10268
+ padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
10274
10269
  }
10275
-
10276
- .react-datepicker-time__header {
10277
- text-overflow: ellipsis;
10278
- white-space: nowrap;
10279
- overflow: hidden;
10270
+ .react-datepicker__header-selector .d-select .d-select__menu-list {
10271
+ border: var(--bs-datepicker-border);
10272
+ line-height: var(--bs-ref-spacer-8);
10273
+ max-height: 7lh;
10280
10274
  }
10281
-
10282
- .react-datepicker__navigation {
10283
- align-items: center;
10284
- background: none;
10285
- display: flex;
10286
- justify-content: center;
10287
- text-align: center;
10288
- cursor: pointer;
10289
- position: absolute;
10290
- top: 2px;
10291
- padding: 0;
10292
- border: none;
10293
- z-index: 1;
10294
- height: 32px;
10295
- width: 32px;
10296
- text-indent: -999em;
10297
- overflow: hidden;
10275
+ .react-datepicker__header-selector .d-select .d-select__option {
10276
+ padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
10277
+ line-height: var(--bs-ref-spacer-8);
10278
+ text-align: start;
10298
10279
  }
10299
- .react-datepicker__navigation--previous {
10300
- left: 2px;
10280
+ .react-datepicker__header-selector .d-select .d-select__option--is-selected {
10281
+ font-weight: bold;
10301
10282
  }
10302
- .react-datepicker__navigation--next {
10303
- right: 2px;
10283
+ .react-datepicker__header-selector .d-select .d-select__option--is-selected:hover {
10284
+ background-color: var(--bs-datepicker-day-hover-bg);
10304
10285
  }
10305
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
10306
- right: 85px;
10286
+ .react-datepicker__header-selector .d-select.custom-year-selector .d-select__single-value {
10287
+ width: 4ch;
10307
10288
  }
10308
- .react-datepicker__navigation--years {
10309
- position: relative;
10310
- top: 0;
10311
- display: block;
10312
- margin-left: auto;
10289
+ .react-datepicker__header-selector p {
10290
+ margin: 0;
10291
+ font-weight: bold;
10292
+ }
10293
+ .react-datepicker__header-selector .header-button:first-child {
10294
+ padding: var(--bs-ref-spacer-1);
10295
+ margin-left: var(--bs-ref-spacer-1);
10313
10296
  margin-right: auto;
10314
10297
  }
10315
- .react-datepicker__navigation--years-previous {
10316
- top: 4px;
10298
+ .react-datepicker__header-selector .header-button:last-child {
10299
+ padding: var(--bs-ref-spacer-1);
10300
+ margin-right: var(--bs-ref-spacer-1);
10301
+ margin-left: auto;
10317
10302
  }
10318
- .react-datepicker__navigation--years-upcoming {
10319
- top: -4px;
10303
+ .react-datepicker__header-day-selector {
10304
+ margin-bottom: var(--bs-ref-spacer-4);
10320
10305
  }
10321
- .react-datepicker__navigation:hover *::before {
10322
- border-color: #a6a6a6;
10306
+ .react-datepicker__header-day-selector .custom-month-selector .d-select__single-value {
10307
+ text-align: start;
10308
+ min-width: 10ch;
10323
10309
  }
10324
10310
 
10325
- .react-datepicker__navigation-icon {
10326
- position: relative;
10327
- top: -1px;
10328
- font-size: 20px;
10329
- width: 0;
10330
- }
10331
- .react-datepicker__navigation-icon--next {
10332
- left: -2px;
10333
- }
10334
- .react-datepicker__navigation-icon--next::before {
10335
- transform: rotate(45deg);
10336
- left: -7px;
10337
- }
10338
- .react-datepicker__navigation-icon--previous {
10339
- right: -2px;
10311
+ .react-datepicker__current-month,
10312
+ .react-datepicker-time__header,
10313
+ .react-datepicker-year-header {
10314
+ margin-top: 0;
10315
+ color: var(--bs-datepicker-text-color);
10316
+ font-weight: var(--bs-datepicker-header-font-weight);
10317
+ font-size: var(--bs-datepicker-font-size);
10340
10318
  }
10341
- .react-datepicker__navigation-icon--previous::before {
10342
- transform: rotate(225deg);
10343
- right: -7px;
10319
+
10320
+ .react-datepicker-time__header {
10321
+ text-overflow: ellipsis;
10322
+ white-space: nowrap;
10323
+ overflow: hidden;
10344
10324
  }
10345
10325
 
10346
10326
  .react-datepicker__month-container {
@@ -10348,218 +10328,219 @@ label .d-icon {
10348
10328
  }
10349
10329
 
10350
10330
  .react-datepicker__year {
10351
- margin: 0.4rem;
10331
+ margin: var(--bs-datepicker-body-margin);
10352
10332
  text-align: center;
10353
10333
  }
10354
10334
  .react-datepicker__year-wrapper {
10355
10335
  display: flex;
10356
10336
  flex-wrap: wrap;
10357
- max-width: 180px;
10337
+ max-width: calc(12rem + var(--bs-datepicker-body-gap) * 2);
10338
+ gap: var(--bs-datepicker-body-gap);
10358
10339
  }
10359
10340
  .react-datepicker__year .react-datepicker__year-text {
10360
10341
  display: inline-block;
10361
10342
  width: 4rem;
10362
- margin: 2px;
10363
10343
  }
10364
10344
 
10365
- .react-datepicker__month {
10366
- margin: 0.4rem;
10345
+ .react-datepicker__month,
10346
+ .react-datepicker__quarter {
10347
+ margin: var(--bs-datepicker-body-margin);
10367
10348
  text-align: center;
10349
+ display: flex;
10350
+ flex-direction: column;
10351
+ gap: var(--bs-datepicker-body-gap);
10352
+ }
10353
+ .react-datepicker__month-wrapper,
10354
+ .react-datepicker__quarter-wrapper {
10355
+ display: flex;
10356
+ flex: 1;
10357
+ gap: var(--bs-datepicker-body-gap);
10368
10358
  }
10369
10359
  .react-datepicker__month .react-datepicker__month-text,
10370
- .react-datepicker__month .react-datepicker__quarter-text {
10360
+ .react-datepicker__quarter .react-datepicker__month-text {
10371
10361
  display: inline-block;
10372
- width: 4rem;
10373
- margin: 2px;
10374
- }
10375
-
10376
- .react-datepicker__input-time-container {
10377
- clear: both;
10378
- width: 100%;
10379
- float: left;
10380
- margin: 5px 0 10px 15px;
10381
- text-align: left;
10362
+ width: 10ch;
10363
+ flex: 1;
10382
10364
  }
10383
- .react-datepicker__input-time-container .react-datepicker-time__caption {
10365
+ .react-datepicker__month .react-datepicker__quarter-text,
10366
+ .react-datepicker__quarter .react-datepicker__quarter-text {
10384
10367
  display: inline-block;
10368
+ width: 6ch;
10385
10369
  }
10386
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
10370
+
10371
+ .react-datepicker__week-number {
10372
+ color: var(--bs-datepicker-week-number-color);
10387
10373
  display: inline-block;
10374
+ width: var(--bs-datepicker-day-width);
10375
+ line-height: var(--bs-datepicker-day-width);
10376
+ text-align: center;
10377
+ font-size: var(--bs-datepicker-day-names-font-size);
10388
10378
  }
10389
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
10390
- display: inline-block;
10391
- margin-left: 10px;
10379
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
10380
+ cursor: pointer;
10381
+ color: var(--bs-body-color);
10392
10382
  }
10393
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
10394
- width: auto;
10383
+ .react-datepicker__week-number.react-datepicker__week-number--clickable.react-datepicker__week-number--selected {
10384
+ border-radius: var(--bs-datepicker-week-number-border-radius);
10385
+ background-color: var(--bs-datepicker-week-number-selected-bg);
10386
+ color: var(--bs-datepicker-week-number-selected-color);
10395
10387
  }
10396
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
10397
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
10398
- -webkit-appearance: none;
10399
- margin: 0;
10388
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
10389
+ border-radius: var(--bs-datepicker-week-number-border-radius);
10390
+ background-color: var(--bs-datepicker-week-number-hover-bg);
10391
+ color: var(--bs-datepicker-week-number-hover-color);
10392
+ }
10393
+
10394
+ .react-datepicker__day-names {
10395
+ white-space: nowrap;
10396
+ display: inline-flex;
10397
+ gap: var(--bs-datepicker-body-gap);
10400
10398
  }
10401
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
10402
- -moz-appearance: textfield;
10399
+
10400
+ .react-datepicker__week {
10401
+ white-space: nowrap;
10402
+ display: inline-flex;
10403
+ gap: var(--bs-datepicker-body-gap);
10404
+ align-self: center;
10405
+ align-items: center;
10403
10406
  }
10404
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
10405
- margin-left: 5px;
10407
+
10408
+ .react-datepicker__day-name,
10409
+ .react-datepicker__day,
10410
+ .react-datepicker__time-name {
10411
+ color: var(--bs-datepicker-day-names-color);
10406
10412
  display: inline-block;
10413
+ text-align: center;
10414
+ width: var(--bs-datepicker-day-width);
10415
+ line-height: var(--bs-datepicker-day-width);
10416
+ font-size: var(--bs-datepicker-day-names-font-size);
10407
10417
  }
10408
10418
 
10409
- .react-datepicker__time-container {
10410
- float: right;
10411
- border-left: 1px solid #aeaeae;
10412
- width: 85px;
10419
+ .react-datepicker__day--outside-month {
10420
+ color: var(--bs-datepicker-day-outside-month-color);
10413
10421
  }
10414
- .react-datepicker__time-container--with-today-button {
10415
- display: inline;
10416
- border: 1px solid #aeaeae;
10417
- border-radius: 0.3rem;
10418
- position: absolute;
10419
- right: -87px;
10420
- top: 0;
10422
+
10423
+ .react-datepicker__day {
10424
+ cursor: pointer;
10421
10425
  }
10422
- .react-datepicker__time-container .react-datepicker__time {
10423
- position: relative;
10424
- background: white;
10425
- border-bottom-right-radius: 0.3rem;
10426
+ .react-datepicker__day:not([aria-disabled=true], .react-datepicker__day--selected):hover {
10427
+ border-radius: var(--bs-datepicker-day-border-radius);
10428
+ background-color: var(--bs-datepicker-day-hover-bg);
10426
10429
  }
10427
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
10428
- width: 85px;
10429
- overflow-x: hidden;
10430
- margin: 0 auto;
10431
- text-align: center;
10432
- border-bottom-right-radius: 0.3rem;
10430
+ .react-datepicker__day--today {
10431
+ font-weight: bold;
10433
10432
  }
10434
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
10435
- list-style: none;
10436
- margin: 0;
10437
- height: calc(195px + 1.7rem / 2);
10438
- overflow-y: scroll;
10439
- padding-right: 0;
10440
- padding-left: 0;
10441
- width: 100%;
10442
- box-sizing: content-box;
10433
+ .react-datepicker__day--highlighted {
10434
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10435
+ background-color: var(--bs-datepicker-highlighted-bg);
10436
+ color: var(--bs-datepicker-highlighted-color);
10437
+ }
10438
+ .react-datepicker__day--highlighted:not([aria-disabled=true]):hover {
10439
+ background-color: var(--bs-datepicker-day-hover-bg);
10440
+ }
10441
+ .react-datepicker__day--holidays {
10442
+ position: relative;
10443
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10444
+ background-color: var(--bs-datepicker-holidays-bg);
10445
+ color: var(--bs-datepicker-holidays-color);
10443
10446
  }
10444
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
10445
- height: 30px;
10446
- padding: 5px 10px;
10447
+ .react-datepicker__day--holidays .overlay {
10448
+ position: absolute;
10449
+ bottom: 100%;
10450
+ left: 50%;
10451
+ transform: translateX(-50%);
10452
+ background-color: #333;
10453
+ color: #fff;
10454
+ padding: 4px;
10455
+ border-radius: 4px;
10447
10456
  white-space: nowrap;
10457
+ visibility: hidden;
10458
+ opacity: 0;
10459
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10448
10460
  }
10449
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
10450
- cursor: pointer;
10451
- background-color: #f0f0f0;
10461
+ .react-datepicker__day--holidays:not([aria-disabled=true]):hover {
10462
+ background-color: var(--bs-datepicker-day-hover-bg);
10452
10463
  }
10453
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
10454
- background-color: #216ba5;
10455
- color: white;
10456
- font-weight: bold;
10464
+ .react-datepicker__day--holidays:hover .overlay {
10465
+ visibility: visible;
10466
+ opacity: 1;
10457
10467
  }
10458
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
10459
- background-color: #216ba5;
10468
+ .react-datepicker__day--selected {
10469
+ color: var(--bs-datepicker-day-selected-color);
10470
+ background-color: var(--bs-datepicker-day-selected-bg);
10471
+ border-radius: var(--bs-datepicker-day-border-radius);
10460
10472
  }
10461
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
10462
- color: #ccc;
10473
+ .react-datepicker__day--in-range, .react-datepicker__day--in-selecting-range {
10474
+ border-radius: var(--bs-datepicker-day-border-radius);
10475
+ background-color: var(--bs-datepicker-in-range-bg);
10476
+ color: var(--bs-datepicker-range-color);
10463
10477
  }
10464
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
10465
- cursor: default;
10466
- background-color: transparent;
10478
+ .react-datepicker__day--in-range[aria-disabled=true], .react-datepicker__day--in-selecting-range[aria-disabled=true] {
10479
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10480
+ color: var(--bs-datepicker-in-range-disabled-color);
10467
10481
  }
10468
-
10469
- .react-datepicker__week-number {
10470
- color: #ccc;
10471
- display: inline-block;
10472
- width: 1.7rem;
10473
- line-height: 1.7rem;
10474
- text-align: center;
10475
- margin: 0.166rem;
10482
+ .react-datepicker__day--in-range:not(.react-datepicker__day--range-start,
10483
+ .react-datepicker__day--range-end,
10484
+ .react-datepicker__day--disabled):hover, .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--range-start,
10485
+ .react-datepicker__day--range-end,
10486
+ .react-datepicker__day--disabled):hover {
10487
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10476
10488
  }
10477
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
10478
- cursor: pointer;
10489
+ .react-datepicker__day--in-range:is(.react-datepicker__day--range-start, .react-datepicker__day--range-end):hover, .react-datepicker__day--in-selecting-range:is(.react-datepicker__day--range-start, .react-datepicker__day--range-end):hover {
10490
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10479
10491
  }
10480
- .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
10481
- border-radius: 0.3rem;
10482
- background-color: #f0f0f0;
10492
+ .react-datepicker__day--range-start:not(.react-datepicker__day--disabled) {
10493
+ color: var(--bs-datepicker-range-start-color);
10494
+ background-color: var(--bs-datepicker-range-start-bg);
10483
10495
  }
10484
-
10485
- .react-datepicker__day-names,
10486
- .react-datepicker__week {
10487
- white-space: nowrap;
10496
+ .react-datepicker__day--range-end:not(.react-datepicker__day--disabled) {
10497
+ color: var(--bs-datepicker-range-end-color);
10498
+ background-color: var(--bs-datepicker-range-end-bg);
10488
10499
  }
10489
-
10490
- .react-datepicker__day-names {
10491
- margin-bottom: -8px;
10500
+ .react-datepicker__day--disabled {
10501
+ cursor: default;
10502
+ color: var(--bs-datepicker-day-disabled-color);
10492
10503
  }
10493
-
10494
- .react-datepicker__day-name,
10495
- .react-datepicker__day,
10496
- .react-datepicker__time-name {
10497
- color: #000;
10498
- display: inline-block;
10499
- width: 1.7rem;
10500
- line-height: 1.7rem;
10501
- text-align: center;
10502
- margin: 0.166rem;
10504
+ .react-datepicker__day--disabled .overlay {
10505
+ position: absolute;
10506
+ bottom: 70%;
10507
+ left: 50%;
10508
+ transform: translateX(-50%);
10509
+ background-color: #333;
10510
+ color: #fff;
10511
+ padding: 4px;
10512
+ border-radius: 4px;
10513
+ white-space: nowrap;
10514
+ visibility: hidden;
10515
+ opacity: 0;
10516
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10503
10517
  }
10504
10518
 
10505
- .react-datepicker__day,
10506
- .react-datepicker__month-text,
10507
- .react-datepicker__quarter-text,
10508
- .react-datepicker__year-text {
10519
+ .react-datepicker__month-text {
10509
10520
  cursor: pointer;
10510
10521
  }
10511
- .react-datepicker__day:hover,
10512
- .react-datepicker__month-text:hover,
10513
- .react-datepicker__quarter-text:hover,
10514
- .react-datepicker__year-text:hover {
10515
- border-radius: 0.3rem;
10516
- background-color: #f0f0f0;
10522
+ .react-datepicker__month-text:not([aria-disabled=true], .react-datepicker__month-text--selected):hover {
10523
+ border-radius: var(--bs-datepicker-day-border-radius);
10524
+ background-color: var(--bs-datepicker-day-hover-bg);
10517
10525
  }
10518
- .react-datepicker__day--today,
10519
- .react-datepicker__month-text--today,
10520
- .react-datepicker__quarter-text--today,
10521
- .react-datepicker__year-text--today {
10526
+ .react-datepicker__month-text--today {
10522
10527
  font-weight: bold;
10523
10528
  }
10524
- .react-datepicker__day--highlighted,
10525
- .react-datepicker__month-text--highlighted,
10526
- .react-datepicker__quarter-text--highlighted,
10527
- .react-datepicker__year-text--highlighted {
10528
- border-radius: 0.3rem;
10529
- background-color: #3dcc4a;
10530
- color: #fff;
10529
+ .react-datepicker__month-text--highlighted {
10530
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10531
+ background-color: var(--bs-datepicker-highlighted-bg);
10532
+ color: var(--bs-datepicker-highlighted-color);
10531
10533
  }
10532
- .react-datepicker__day--highlighted:hover,
10533
- .react-datepicker__month-text--highlighted:hover,
10534
- .react-datepicker__quarter-text--highlighted:hover,
10535
- .react-datepicker__year-text--highlighted:hover {
10536
- background-color: #32be3f;
10537
- }
10538
- .react-datepicker__day--highlighted-custom-1,
10539
- .react-datepicker__month-text--highlighted-custom-1,
10540
- .react-datepicker__quarter-text--highlighted-custom-1,
10541
- .react-datepicker__year-text--highlighted-custom-1 {
10542
- color: magenta;
10543
- }
10544
- .react-datepicker__day--highlighted-custom-2,
10545
- .react-datepicker__month-text--highlighted-custom-2,
10546
- .react-datepicker__quarter-text--highlighted-custom-2,
10547
- .react-datepicker__year-text--highlighted-custom-2 {
10548
- color: green;
10549
- }
10550
- .react-datepicker__day--holidays,
10551
- .react-datepicker__month-text--holidays,
10552
- .react-datepicker__quarter-text--holidays,
10553
- .react-datepicker__year-text--holidays {
10534
+ .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover {
10535
+ background-color: var(--bs-datepicker-day-hover-bg);
10536
+ }
10537
+ .react-datepicker__month-text--holidays {
10554
10538
  position: relative;
10555
- border-radius: 0.3rem;
10556
- background-color: #ff6803;
10557
- color: #fff;
10539
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10540
+ background-color: var(--bs-datepicker-holidays-bg);
10541
+ color: var(--bs-datepicker-holidays-color);
10558
10542
  }
10559
- .react-datepicker__day--holidays .holiday-overlay,
10560
- .react-datepicker__month-text--holidays .holiday-overlay,
10561
- .react-datepicker__quarter-text--holidays .holiday-overlay,
10562
- .react-datepicker__year-text--holidays .holiday-overlay {
10543
+ .react-datepicker__month-text--holidays .overlay {
10563
10544
  position: absolute;
10564
10545
  bottom: 100%;
10565
10546
  left: 50%;
@@ -10573,289 +10554,283 @@ label .d-icon {
10573
10554
  opacity: 0;
10574
10555
  transition: visibility 0s, opacity 0.3s ease-in-out;
10575
10556
  }
10576
- .react-datepicker__day--holidays:hover,
10577
- .react-datepicker__month-text--holidays:hover,
10578
- .react-datepicker__quarter-text--holidays:hover,
10579
- .react-datepicker__year-text--holidays:hover {
10580
- background-color: #cf5300;
10557
+ .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover {
10558
+ background-color: var(--bs-datepicker-day-hover-bg);
10581
10559
  }
10582
- .react-datepicker__day--holidays:hover .holiday-overlay,
10583
- .react-datepicker__month-text--holidays:hover .holiday-overlay,
10584
- .react-datepicker__quarter-text--holidays:hover .holiday-overlay,
10585
- .react-datepicker__year-text--holidays:hover .holiday-overlay {
10560
+ .react-datepicker__month-text--holidays:hover .overlay {
10586
10561
  visibility: visible;
10587
10562
  opacity: 1;
10588
10563
  }
10589
- .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
10590
- .react-datepicker__month-text--selected,
10591
- .react-datepicker__month-text--in-selecting-range,
10592
- .react-datepicker__month-text--in-range,
10593
- .react-datepicker__quarter-text--selected,
10594
- .react-datepicker__quarter-text--in-selecting-range,
10595
- .react-datepicker__quarter-text--in-range,
10596
- .react-datepicker__year-text--selected,
10597
- .react-datepicker__year-text--in-selecting-range,
10598
- .react-datepicker__year-text--in-range {
10599
- border-radius: 0.3rem;
10600
- background-color: #216ba5;
10601
- color: #fff;
10564
+ .react-datepicker__month-text--selected {
10565
+ color: var(--bs-datepicker-day-selected-color);
10566
+ background-color: var(--bs-datepicker-day-selected-bg);
10567
+ border-radius: var(--bs-datepicker-day-border-radius);
10602
10568
  }
10603
- .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
10604
- .react-datepicker__month-text--selected:hover,
10605
- .react-datepicker__month-text--in-selecting-range:hover,
10606
- .react-datepicker__month-text--in-range:hover,
10607
- .react-datepicker__quarter-text--selected:hover,
10608
- .react-datepicker__quarter-text--in-selecting-range:hover,
10609
- .react-datepicker__quarter-text--in-range:hover,
10610
- .react-datepicker__year-text--selected:hover,
10611
- .react-datepicker__year-text--in-selecting-range:hover,
10612
- .react-datepicker__year-text--in-range:hover {
10613
- background-color: #1d5d90;
10614
- }
10615
- .react-datepicker__day--keyboard-selected,
10616
- .react-datepicker__month-text--keyboard-selected,
10617
- .react-datepicker__quarter-text--keyboard-selected,
10618
- .react-datepicker__year-text--keyboard-selected {
10619
- border-radius: 0.3rem;
10620
- background-color: #bad9f1;
10621
- color: rgb(0, 0, 0);
10622
- }
10623
- .react-datepicker__day--keyboard-selected:hover,
10624
- .react-datepicker__month-text--keyboard-selected:hover,
10625
- .react-datepicker__quarter-text--keyboard-selected:hover,
10626
- .react-datepicker__year-text--keyboard-selected:hover {
10627
- background-color: #1d5d90;
10628
- }
10629
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
10630
- .react-datepicker__month-text--in-range,
10631
- .react-datepicker__quarter-text--in-range,
10632
- .react-datepicker__year-text--in-range),
10633
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
10634
- .react-datepicker__month-text--in-range,
10635
- .react-datepicker__quarter-text--in-range,
10636
- .react-datepicker__year-text--in-range),
10637
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
10638
- .react-datepicker__month-text--in-range,
10639
- .react-datepicker__quarter-text--in-range,
10640
- .react-datepicker__year-text--in-range),
10641
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
10642
- .react-datepicker__month-text--in-range,
10643
- .react-datepicker__quarter-text--in-range,
10644
- .react-datepicker__year-text--in-range) {
10645
- background-color: rgba(33, 107, 165, 0.5);
10646
- }
10647
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
10648
- .react-datepicker__month-text--in-selecting-range,
10649
- .react-datepicker__quarter-text--in-selecting-range,
10650
- .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
10651
- .react-datepicker__month-text--in-selecting-range,
10652
- .react-datepicker__quarter-text--in-selecting-range,
10653
- .react-datepicker__year-text--in-selecting-range),
10654
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
10655
- .react-datepicker__month-text--in-selecting-range,
10656
- .react-datepicker__quarter-text--in-selecting-range,
10657
- .react-datepicker__year-text--in-selecting-range),
10658
- .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
10659
- .react-datepicker__month-text--in-selecting-range,
10660
- .react-datepicker__quarter-text--in-selecting-range,
10661
- .react-datepicker__year-text--in-selecting-range),
10662
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
10663
- .react-datepicker__month-text--in-selecting-range,
10664
- .react-datepicker__quarter-text--in-selecting-range,
10665
- .react-datepicker__year-text--in-selecting-range),
10666
- .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
10667
- .react-datepicker__month-text--in-selecting-range,
10668
- .react-datepicker__quarter-text--in-selecting-range,
10669
- .react-datepicker__year-text--in-selecting-range),
10670
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
10671
- .react-datepicker__month-text--in-selecting-range,
10672
- .react-datepicker__quarter-text--in-selecting-range,
10673
- .react-datepicker__year-text--in-selecting-range),
10674
- .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
10675
- .react-datepicker__month-text--in-selecting-range,
10676
- .react-datepicker__quarter-text--in-selecting-range,
10677
- .react-datepicker__year-text--in-selecting-range) {
10678
- background-color: #f0f0f0;
10679
- color: #000;
10680
- }
10681
- .react-datepicker__day--disabled,
10682
- .react-datepicker__month-text--disabled,
10683
- .react-datepicker__quarter-text--disabled,
10684
- .react-datepicker__year-text--disabled {
10569
+ .react-datepicker__month-text--in-range, .react-datepicker__month-text--in-selecting-range {
10570
+ border-radius: var(--bs-datepicker-day-border-radius);
10571
+ background-color: var(--bs-datepicker-in-range-bg);
10572
+ color: var(--bs-datepicker-range-color);
10573
+ }
10574
+ .react-datepicker__month-text--in-range[aria-disabled=true], .react-datepicker__month-text--in-selecting-range[aria-disabled=true] {
10575
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10576
+ color: var(--bs-datepicker-in-range-disabled-color);
10577
+ }
10578
+ .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--range-start,
10579
+ .react-datepicker__month-text--range-end,
10580
+ .react-datepicker__month-text--disabled):hover, .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__month-text--range-start,
10581
+ .react-datepicker__month-text--range-end,
10582
+ .react-datepicker__month-text--disabled):hover {
10583
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10584
+ }
10585
+ .react-datepicker__month-text--in-range:is(.react-datepicker__month-text--range-start, .react-datepicker__month-text--range-end):hover, .react-datepicker__month-text--in-selecting-range:is(.react-datepicker__month-text--range-start, .react-datepicker__month-text--range-end):hover {
10586
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10587
+ }
10588
+ .react-datepicker__month-text--range-start:not(.react-datepicker__month-text--disabled) {
10589
+ color: var(--bs-datepicker-range-start-color);
10590
+ background-color: var(--bs-datepicker-range-start-bg);
10591
+ }
10592
+ .react-datepicker__month-text--range-end:not(.react-datepicker__month-text--disabled) {
10593
+ color: var(--bs-datepicker-range-end-color);
10594
+ background-color: var(--bs-datepicker-range-end-bg);
10595
+ }
10596
+ .react-datepicker__month-text--disabled {
10685
10597
  cursor: default;
10686
- color: #ccc;
10598
+ color: var(--bs-datepicker-day-disabled-color);
10687
10599
  }
10688
- .react-datepicker__day--disabled:hover,
10689
- .react-datepicker__month-text--disabled:hover,
10690
- .react-datepicker__quarter-text--disabled:hover,
10691
- .react-datepicker__year-text--disabled:hover {
10692
- background-color: transparent;
10600
+ .react-datepicker__month-text--disabled .overlay {
10601
+ position: absolute;
10602
+ bottom: 70%;
10603
+ left: 50%;
10604
+ transform: translateX(-50%);
10605
+ background-color: #333;
10606
+ color: #fff;
10607
+ padding: 4px;
10608
+ border-radius: 4px;
10609
+ white-space: nowrap;
10610
+ visibility: hidden;
10611
+ opacity: 0;
10612
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10693
10613
  }
10694
10614
 
10695
- .react-datepicker__input-container {
10615
+ .react-datepicker__quarter-text {
10616
+ cursor: pointer;
10617
+ }
10618
+ .react-datepicker__quarter-text:not([aria-disabled=true], .react-datepicker__quarter-text--selected):hover {
10619
+ border-radius: var(--bs-datepicker-day-border-radius);
10620
+ background-color: var(--bs-datepicker-day-hover-bg);
10621
+ }
10622
+ .react-datepicker__quarter-text--today {
10623
+ font-weight: bold;
10624
+ }
10625
+ .react-datepicker__quarter-text--highlighted {
10626
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10627
+ background-color: var(--bs-datepicker-highlighted-bg);
10628
+ color: var(--bs-datepicker-highlighted-color);
10629
+ }
10630
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover {
10631
+ background-color: var(--bs-datepicker-day-hover-bg);
10632
+ }
10633
+ .react-datepicker__quarter-text--holidays {
10696
10634
  position: relative;
10697
- display: inline-block;
10698
- width: 100%;
10635
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10636
+ background-color: var(--bs-datepicker-holidays-bg);
10637
+ color: var(--bs-datepicker-holidays-color);
10699
10638
  }
10700
- .react-datepicker__input-container .react-datepicker__calendar-icon {
10639
+ .react-datepicker__quarter-text--holidays .overlay {
10701
10640
  position: absolute;
10702
- padding: 0.5rem;
10703
- box-sizing: content-box;
10641
+ bottom: 100%;
10642
+ left: 50%;
10643
+ transform: translateX(-50%);
10644
+ background-color: #333;
10645
+ color: #fff;
10646
+ padding: 4px;
10647
+ border-radius: 4px;
10648
+ white-space: nowrap;
10649
+ visibility: hidden;
10650
+ opacity: 0;
10651
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10704
10652
  }
10705
-
10706
- .react-datepicker__view-calendar-icon input {
10707
- padding: 6px 10px 5px 25px;
10653
+ .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover {
10654
+ background-color: var(--bs-datepicker-day-hover-bg);
10708
10655
  }
10709
-
10710
- .react-datepicker__year-read-view,
10711
- .react-datepicker__month-read-view,
10712
- .react-datepicker__month-year-read-view {
10713
- border: 1px solid transparent;
10714
- border-radius: 0.3rem;
10715
- position: relative;
10656
+ .react-datepicker__quarter-text--holidays:hover .overlay {
10657
+ visibility: visible;
10658
+ opacity: 1;
10716
10659
  }
10717
- .react-datepicker__year-read-view:hover,
10718
- .react-datepicker__month-read-view:hover,
10719
- .react-datepicker__month-year-read-view:hover {
10720
- cursor: pointer;
10660
+ .react-datepicker__quarter-text--selected {
10661
+ color: var(--bs-datepicker-day-selected-color);
10662
+ background-color: var(--bs-datepicker-day-selected-bg);
10663
+ border-radius: var(--bs-datepicker-day-border-radius);
10721
10664
  }
10722
- .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
10723
- .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
10724
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
10725
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
10726
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
10727
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
10728
- border-top-color: #b3b3b3;
10729
- }
10730
- .react-datepicker__year-read-view--down-arrow,
10731
- .react-datepicker__month-read-view--down-arrow,
10732
- .react-datepicker__month-year-read-view--down-arrow {
10733
- transform: rotate(135deg);
10734
- right: -16px;
10735
- top: 0;
10665
+ .react-datepicker__quarter-text--in-range, .react-datepicker__quarter-text--in-selecting-range {
10666
+ border-radius: var(--bs-datepicker-day-border-radius);
10667
+ background-color: var(--bs-datepicker-in-range-bg);
10668
+ color: var(--bs-datepicker-range-color);
10736
10669
  }
10737
-
10738
- .react-datepicker__year-dropdown,
10739
- .react-datepicker__month-dropdown,
10740
- .react-datepicker__month-year-dropdown {
10741
- background-color: #f0f0f0;
10742
- position: absolute;
10743
- width: 50%;
10744
- left: 25%;
10745
- top: 30px;
10746
- z-index: 1;
10747
- text-align: center;
10748
- border-radius: 0.3rem;
10749
- border: 1px solid #aeaeae;
10670
+ .react-datepicker__quarter-text--in-range[aria-disabled=true], .react-datepicker__quarter-text--in-selecting-range[aria-disabled=true] {
10671
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10672
+ color: var(--bs-datepicker-in-range-disabled-color);
10750
10673
  }
10751
- .react-datepicker__year-dropdown:hover,
10752
- .react-datepicker__month-dropdown:hover,
10753
- .react-datepicker__month-year-dropdown:hover {
10754
- cursor: pointer;
10674
+ .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--range-start,
10675
+ .react-datepicker__quarter-text--range-end,
10676
+ .react-datepicker__quarter-text--disabled):hover, .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__quarter-text--range-start,
10677
+ .react-datepicker__quarter-text--range-end,
10678
+ .react-datepicker__quarter-text--disabled):hover {
10679
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10755
10680
  }
10756
- .react-datepicker__year-dropdown--scrollable,
10757
- .react-datepicker__month-dropdown--scrollable,
10758
- .react-datepicker__month-year-dropdown--scrollable {
10759
- height: 150px;
10760
- overflow-y: scroll;
10681
+ .react-datepicker__quarter-text--in-range:is(.react-datepicker__quarter-text--range-start, .react-datepicker__quarter-text--range-end):hover, .react-datepicker__quarter-text--in-selecting-range:is(.react-datepicker__quarter-text--range-start, .react-datepicker__quarter-text--range-end):hover {
10682
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10761
10683
  }
10762
-
10763
- .react-datepicker__year-option,
10764
- .react-datepicker__month-option,
10765
- .react-datepicker__month-year-option {
10766
- line-height: 20px;
10767
- width: 100%;
10768
- display: block;
10769
- margin-left: auto;
10770
- margin-right: auto;
10684
+ .react-datepicker__quarter-text--range-start:not(.react-datepicker__quarter-text--disabled) {
10685
+ color: var(--bs-datepicker-range-start-color);
10686
+ background-color: var(--bs-datepicker-range-start-bg);
10771
10687
  }
10772
- .react-datepicker__year-option:first-of-type,
10773
- .react-datepicker__month-option:first-of-type,
10774
- .react-datepicker__month-year-option:first-of-type {
10775
- border-top-left-radius: 0.3rem;
10776
- border-top-right-radius: 0.3rem;
10688
+ .react-datepicker__quarter-text--range-end:not(.react-datepicker__quarter-text--disabled) {
10689
+ color: var(--bs-datepicker-range-end-color);
10690
+ background-color: var(--bs-datepicker-range-end-bg);
10777
10691
  }
10778
- .react-datepicker__year-option:last-of-type,
10779
- .react-datepicker__month-option:last-of-type,
10780
- .react-datepicker__month-year-option:last-of-type {
10781
- -webkit-user-select: none;
10782
- -moz-user-select: none;
10783
- user-select: none;
10784
- border-bottom-left-radius: 0.3rem;
10785
- border-bottom-right-radius: 0.3rem;
10786
- }
10787
- .react-datepicker__year-option:hover,
10788
- .react-datepicker__month-option:hover,
10789
- .react-datepicker__month-year-option:hover {
10790
- background-color: #ccc;
10791
- }
10792
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
10793
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
10794
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
10795
- border-bottom-color: #b3b3b3;
10796
- }
10797
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
10798
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
10799
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
10800
- border-top-color: #b3b3b3;
10801
- }
10802
- .react-datepicker__year-option--selected,
10803
- .react-datepicker__month-option--selected,
10804
- .react-datepicker__month-year-option--selected {
10805
- position: absolute;
10806
- left: 15px;
10692
+ .react-datepicker__quarter-text--disabled {
10693
+ cursor: default;
10694
+ color: var(--bs-datepicker-day-disabled-color);
10807
10695
  }
10808
-
10809
- .react-datepicker__close-icon {
10810
- cursor: pointer;
10811
- background-color: transparent;
10812
- border: 0;
10813
- outline: 0;
10814
- padding: 0 6px 0 0;
10696
+ .react-datepicker__quarter-text--disabled .overlay {
10815
10697
  position: absolute;
10816
- top: 0;
10817
- right: 0;
10818
- height: 100%;
10819
- display: table-cell;
10820
- vertical-align: middle;
10821
- }
10822
- .react-datepicker__close-icon::after {
10823
- cursor: pointer;
10824
- background-color: #216ba5;
10698
+ bottom: 70%;
10699
+ left: 50%;
10700
+ transform: translateX(-50%);
10701
+ background-color: #333;
10825
10702
  color: #fff;
10826
- border-radius: 50%;
10827
- height: 16px;
10828
- width: 16px;
10829
- padding: 2px;
10830
- font-size: 12px;
10831
- line-height: 1;
10832
- text-align: center;
10833
- display: table-cell;
10834
- vertical-align: middle;
10835
- content: "×";
10703
+ padding: 4px;
10704
+ border-radius: 4px;
10705
+ white-space: nowrap;
10706
+ visibility: hidden;
10707
+ opacity: 0;
10708
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10836
10709
  }
10837
10710
 
10838
- .react-datepicker__today-button {
10839
- background: #f0f0f0;
10840
- border-top: 1px solid #aeaeae;
10711
+ .react-datepicker__year-text {
10841
10712
  cursor: pointer;
10842
- text-align: center;
10713
+ }
10714
+ .react-datepicker__year-text:not([aria-disabled=true], .react-datepicker__year-text--selected):hover {
10715
+ border-radius: var(--bs-datepicker-day-border-radius);
10716
+ background-color: var(--bs-datepicker-day-hover-bg);
10717
+ }
10718
+ .react-datepicker__year-text--today {
10843
10719
  font-weight: bold;
10844
- padding: 5px 0;
10845
- clear: left;
10720
+ }
10721
+ .react-datepicker__year-text--highlighted {
10722
+ border-radius: var(--bs-datepicker-highlighted-border-radius);
10723
+ background-color: var(--bs-datepicker-highlighted-bg);
10724
+ color: var(--bs-datepicker-highlighted-color);
10725
+ }
10726
+ .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
10727
+ background-color: var(--bs-datepicker-day-hover-bg);
10728
+ }
10729
+ .react-datepicker__year-text--holidays {
10730
+ position: relative;
10731
+ border-radius: var(--bs-datepicker-holidays-border-radius);
10732
+ background-color: var(--bs-datepicker-holidays-bg);
10733
+ color: var(--bs-datepicker-holidays-color);
10734
+ }
10735
+ .react-datepicker__year-text--holidays .overlay {
10736
+ position: absolute;
10737
+ bottom: 100%;
10738
+ left: 50%;
10739
+ transform: translateX(-50%);
10740
+ background-color: #333;
10741
+ color: #fff;
10742
+ padding: 4px;
10743
+ border-radius: 4px;
10744
+ white-space: nowrap;
10745
+ visibility: hidden;
10746
+ opacity: 0;
10747
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10748
+ }
10749
+ .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
10750
+ background-color: var(--bs-datepicker-day-hover-bg);
10751
+ }
10752
+ .react-datepicker__year-text--holidays:hover .overlay {
10753
+ visibility: visible;
10754
+ opacity: 1;
10755
+ }
10756
+ .react-datepicker__year-text--selected {
10757
+ color: var(--bs-datepicker-day-selected-color);
10758
+ background-color: var(--bs-datepicker-day-selected-bg);
10759
+ border-radius: var(--bs-datepicker-day-border-radius);
10760
+ }
10761
+ .react-datepicker__year-text--in-range, .react-datepicker__year-text--in-selecting-range {
10762
+ border-radius: var(--bs-datepicker-day-border-radius);
10763
+ background-color: var(--bs-datepicker-in-range-bg);
10764
+ color: var(--bs-datepicker-range-color);
10765
+ }
10766
+ .react-datepicker__year-text--in-range[aria-disabled=true], .react-datepicker__year-text--in-selecting-range[aria-disabled=true] {
10767
+ background-color: var(--bs-datepicker-in-range-disabled-bg);
10768
+ color: var(--bs-datepicker-in-range-disabled-color);
10769
+ }
10770
+ .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--range-start,
10771
+ .react-datepicker__year-text--range-end,
10772
+ .react-datepicker__year-text--disabled):hover, .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__year-text--range-start,
10773
+ .react-datepicker__year-text--range-end,
10774
+ .react-datepicker__year-text--disabled):hover {
10775
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10776
+ }
10777
+ .react-datepicker__year-text--in-range:is(.react-datepicker__year-text--range-start, .react-datepicker__year-text--range-end):hover, .react-datepicker__year-text--in-selecting-range:is(.react-datepicker__year-text--range-start, .react-datepicker__year-text--range-end):hover {
10778
+ background-color: var(--bs-datepicker-in-range-hover-bg);
10779
+ }
10780
+ .react-datepicker__year-text--range-start:not(.react-datepicker__year-text--disabled) {
10781
+ color: var(--bs-datepicker-range-start-color);
10782
+ background-color: var(--bs-datepicker-range-start-bg);
10783
+ }
10784
+ .react-datepicker__year-text--range-end:not(.react-datepicker__year-text--disabled) {
10785
+ color: var(--bs-datepicker-range-end-color);
10786
+ background-color: var(--bs-datepicker-range-end-bg);
10787
+ }
10788
+ .react-datepicker__year-text--disabled {
10789
+ cursor: default;
10790
+ color: var(--bs-datepicker-day-disabled-color);
10791
+ }
10792
+ .react-datepicker__year-text--disabled .overlay {
10793
+ position: absolute;
10794
+ bottom: 70%;
10795
+ left: 50%;
10796
+ transform: translateX(-50%);
10797
+ background-color: #333;
10798
+ color: #fff;
10799
+ padding: 4px;
10800
+ border-radius: 4px;
10801
+ white-space: nowrap;
10802
+ visibility: hidden;
10803
+ opacity: 0;
10804
+ transition: visibility 0s, opacity 0.3s ease-in-out;
10846
10805
  }
10847
10806
 
10807
+ /* Removed following styles:
10808
+ view-calendar-icon
10809
+ year-read-view,
10810
+ month-read-view,
10811
+ month-year-read-view
10812
+ month-year-read-view
10813
+ year-dropdown,
10814
+ month-dropdown,
10815
+ month-year-dropdown
10816
+ year-option,
10817
+ month-option,
10818
+ month-year-option
10819
+ close-icon
10820
+ react-datepicker__navigation
10821
+ */
10848
10822
  .react-datepicker__portal {
10823
+ --bs-datepicker-portal-bg: rgba(var(--bs-black-rgb), 0.3);
10849
10824
  position: fixed;
10850
10825
  width: 100vw;
10851
10826
  height: 100vh;
10852
- background-color: rgba(0, 0, 0, 0.8);
10827
+ background-color: var(--bs-datepicker-portal-bg);
10853
10828
  left: 0;
10854
10829
  top: 0;
10855
10830
  justify-content: center;
10856
10831
  align-items: center;
10857
10832
  display: flex;
10858
- z-index: 2147483647;
10833
+ z-index: 1060;
10859
10834
  }
10860
10835
  .react-datepicker__portal .react-datepicker__day-name,
10861
10836
  .react-datepicker__portal .react-datepicker__day,
@@ -10871,10 +10846,6 @@ label .d-icon {
10871
10846
  line-height: 2rem;
10872
10847
  }
10873
10848
  }
10874
- .react-datepicker__portal .react-datepicker__current-month,
10875
- .react-datepicker__portal .react-datepicker-time__header {
10876
- font-size: 1.44rem;
10877
- }
10878
10849
 
10879
10850
  .react-datepicker__children-container {
10880
10851
  width: 13.8rem;
@@ -10897,260 +10868,7 @@ label .d-icon {
10897
10868
  white-space: nowrap;
10898
10869
  }
10899
10870
 
10900
- .react-datepicker__calendar-icon {
10901
- width: 1em;
10902
- height: 1em;
10903
- vertical-align: -0.125em;
10904
- }
10905
-
10906
- .react-datepicker-wrapper {
10907
- width: 100%;
10908
- margin-inline: auto;
10909
- }
10910
-
10911
- .react-datepicker {
10912
- --bs-datepicker-font-family: var(--bs-font-sans-serif);
10913
- --bs-datepicker-border: 0px;
10914
- --bs-datepicker-box-shadow: var(--bs-box-shadow);
10915
- --bs-datepicker-font-size: var(--bs-ref-spacer-4);
10916
- --bs-datepicker-header-gap: var(--bs-ref-spacer-4);
10917
- --bs-datepicker-header-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7);
10918
- --bs-datepicker-header-background-color: var(--bs-secondary-soft);
10919
- --bs-datepicker-header-border: 0;
10920
- --bs-datepicker-header-font-size: var(--bs-fs-6);
10921
- --bs-datepicker-header-button-padding: 0;
10922
- --bs-datepicker-header-select-padding: 0 var(--bs-ref-spacer-1);
10923
- --bs-datepicker-header-select-font-weight: var(--bs-fw-bold);
10924
- --bs-datepicker-header-select-menu-width: fit-content;
10925
- --bs-datepicker-day-names-margin: 0;
10926
- --bs-datepicker-day-names-font-size: var(--bs-ref-spacer-4);
10927
- --bs-datepicker-day-name-weight: var(--bs-fw-bold);
10928
- --bs-datepicker-day-name-margin: 0;
10929
- --bs-datepicker-day-name-padding: 0;
10930
- --bs-datepicker-day-name-size: var(--bs-ref-spacer-5);
10931
- --bs-datepicker-day-name-color: var(--bs-gray-500);
10932
- --bs-datepicker-month-gap: .875rem;
10933
- --bs-datepicker-month-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7) var(--bs-ref-spacer-6);
10934
- --bs-datepicker-month-margin: 0;
10935
- --bs-datepicker-month-color: var(--bs-white);
10936
- --bs-datepicker-week-gap: var(--bs-ref-spacer-8);
10937
- --bs-datepicker-day-margin: 0;
10938
- --bs-datepicker-day-font-size: var(--bs-fs-small);
10939
- --bs-datepicker-day-size: var(--bs-ref-spacer-5);
10940
- --bs-datepicker-day-padding: 0;
10941
- --bs-datepicker-day-radius: 100%;
10942
- --bs-datepicker-day-color: var(--bs-gray-900);
10943
- --bs-datepicker-day-disabled-color: var(--bs-gray-300);
10944
- --bs-datepicker-day-color-hover: var(--bs-gray-900);
10945
- --bs-datepicker-day-bg-hover: var(--bs-info-100);
10946
- --bs-datepicker-day-selected-color: var(--bs-white);
10947
- --bs-datepicker-day-selected-bg: var(--bs-secondary-500);
10948
- --bs-datepicker-day-in-range-color: var(--bs-dark);
10949
- --bs-datepicker-day-in-range-bg: var(--bs-secondary-100);
10950
- --bs-datepicker-day-outside-month-color: var(--bs-gray-400);
10951
- --bs-datepicker-day-today-font-weight: var(--bs-fw-normal);
10952
- --bs-datepicker-day-today-box-shadow: 0 0 0 2px var(--bs-secondary);
10953
- --bs-datepicker-time-container-margin: 0;
10954
- --bs-datepicker-time-container-align: center;
10955
- --bs-datepicker-time-input-width: 50%;
10956
- --bs-datepicker-time-input-margin: 0;
10957
- --bs-datepicker-time-input-align: center;
10958
- --bs-datepicker-time-input-padding: var(--bs-ref-spacer-4);
10959
- --bs-datepicker-time-input-gap: var(--bs-ref-spacer-2);
10960
- --bs-datepicker-time-input-label-weight: var(--bs-fw-bold);
10961
- --bs-datepicker-time-input-label-color: var(--bs-gray-700);
10962
- --bs-datepicker-time-input-label-size: var(--bs-fs-small);
10963
- font-family: var(--bs-datepicker-font-family);
10964
- font-size: var(--bs-datepicker-font-size);
10965
- border: var(--bs-datepicker-border);
10966
- box-shadow: var(--bs-datepicker-box-shadow);
10967
- /* Start time selector */
10968
- /* End time selector */
10969
- }
10970
- .react-datepicker .react-datepicker__header {
10971
- display: flex;
10972
- flex-direction: column;
10973
- gap: var(--bs-datepicker-header-gap);
10974
- padding: var(--bs-datepicker-header-padding);
10975
- font-size: var(--bs-datepicker-header-font-size);
10976
- background-color: var(--bs-datepicker-header-background-color);
10977
- border: var(--bs-datepicker-header-border);
10978
- }
10979
- .react-datepicker .react-datepicker__header .react-datepicker__day-names {
10980
- display: flex;
10981
- gap: var(--bs-ref-spacer-8);
10982
- margin: var(--bs-datepicker-day-names-margin);
10983
- font-size: var(--bs-datepicker-day-names-font-size);
10984
- }
10985
- .react-datepicker .react-datepicker__header .react-datepicker__day-name {
10986
- width: var(--bs-datepicker-day-name-size);
10987
- height: var(--bs-datepicker-day-name-size);
10988
- padding: var(--bs-datepicker-day-name-padding);
10989
- margin: var(--bs-datepicker-day-name-margin);
10990
- font-weight: var(--bs-datepicker-day-name-weight);
10991
- line-height: var(--bs-datepicker-day-name-size);
10992
- color: var(--bs-datepicker-day-name-color);
10993
- }
10994
- .react-datepicker.d-month-picker .react-datepicker__month-container .d-icon {
10995
- --bs-icon-component-color: var(--bs-datepicker-month-color);
10996
- }
10997
- .react-datepicker .react-datepicker__month {
10998
- display: flex;
10999
- flex-direction: column;
11000
- gap: var(--bs-datepicker-month-gap);
11001
- padding: var(--bs-datepicker-month-padding);
11002
- margin: var(--bs-datepicker-month-margin);
11003
- }
11004
- .react-datepicker .react-datepicker__week {
11005
- display: flex;
11006
- gap: var(--bs-datepicker-week-gap);
11007
- }
11008
- .react-datepicker .react-datepicker__day {
11009
- display: flex;
11010
- align-items: center;
11011
- justify-content: center;
11012
- width: var(--bs-datepicker-day-size);
11013
- height: var(--bs-datepicker-day-size);
11014
- padding: var(--bs-datepicker-day-padding);
11015
- margin: var(--bs-datepicker-day-margin);
11016
- font-size: var(--bs-datepicker-day-font-size);
11017
- line-height: var(--bs-datepicker-day-size);
11018
- color: var(--bs-datepicker-day-color);
11019
- }
11020
- .react-datepicker .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end, .react-datepicker .react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
11021
- color: var(--bs-datepicker-day-selected-color);
11022
- background-color: var(--bs-datepicker-day-selected-bg);
11023
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
11024
- }
11025
- .react-datepicker .react-datepicker__day:not(.react-datepicker__day--selected,
11026
- .react-datepicker__month-text--selected,
11027
- .react-datepicker__quarter-text--selected,
11028
- .react-datepicker__year-text--selected):hover,
11029
- .react-datepicker .react-datepicker__month-text:not(.react-datepicker__day--selected,
11030
- .react-datepicker__month-text--selected,
11031
- .react-datepicker__quarter-text--selected,
11032
- .react-datepicker__year-text--selected):hover,
11033
- .react-datepicker .react-datepicker__quarter-text:not(.react-datepicker__day--selected,
11034
- .react-datepicker__month-text--selected,
11035
- .react-datepicker__quarter-text--selected,
11036
- .react-datepicker__year-text--selected):hover,
11037
- .react-datepicker .react-datepicker__year-text:not(.react-datepicker__day--selected,
11038
- .react-datepicker__month-text--selected,
11039
- .react-datepicker__quarter-text--selected,
11040
- .react-datepicker__year-text--selected):hover {
11041
- color: var(--bs-datepicker-day-color-hover);
11042
- background-color: var(--bs-datepicker-day-bg-hover);
11043
- border-radius: var(--bs-datepicker-day-radius);
11044
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-bg-hover);
11045
- }
11046
- .react-datepicker .react-datepicker__day--disabled {
11047
- color: var(--bs-datepicker-day-disabled-color);
11048
- }
11049
- .react-datepicker .react-datepicker__day--selected,
11050
- .react-datepicker .react-datepicker__month--selected,
11051
- .react-datepicker .react-datepicker__quarter--selected,
11052
- .react-datepicker .react-datepicker__year--selected {
11053
- color: var(--bs-datepicker-day-selected-color);
11054
- background-color: var(--bs-datepicker-day-selected-bg);
11055
- border-radius: var(--bs-datepicker-day-radius);
11056
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
11057
- }
11058
- .react-datepicker .react-datepicker__day--selected.react-datepicker__day--in-range.react-datepicker__day--range-start, .react-datepicker .react-datepicker__day--selected.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
11059
- color: var(--bs-datepicker-day-selected-color);
11060
- background-color: var(--bs-datepicker-day-selected-bg);
11061
- box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
11062
- }
11063
- .react-datepicker .react-datepicker__day--in-range,
11064
- .react-datepicker .react-datepicker__month-text--in-range,
11065
- .react-datepicker .react-datepicker__quarter-text--in-range,
11066
- .react-datepicker .react-datepicker__year-text--in-range,
11067
- .react-datepicker .react-datepicker__day--in-selecting-range,
11068
- .react-datepicker .react-datepicker__month-text--in-selecting-range,
11069
- .react-datepicker .react-datepicker__quarter-text--in-selecting-range,
11070
- .react-datepicker .react-datepicker__year-text--in-selecting-range,
11071
- .react-datepicker .react-datepicker__day--keyboard-selected,
11072
- .react-datepicker .react-datepicker__month-text--keyboard-selected,
11073
- .react-datepicker .react-datepicker__quarter-text--keyboard-selected,
11074
- .react-datepicker .react-datepicker__year-text--keyboard-selected {
11075
- color: var(--bs-datepicker-day-in-range-color);
11076
- background-color: var(--bs-datepicker-day-in-range-bg);
11077
- border-radius: var(--bs-datepicker-day-radius);
11078
- }
11079
- .react-datepicker .react-datepicker__day--outside-month {
11080
- color: var(--bs-datepicker-day-outside-month-color);
11081
- }
11082
- .react-datepicker .react-datepicker-wrapper {
11083
- margin-inline: auto;
11084
- }
11085
- .react-datepicker .react-datepicker__input-time-container {
11086
- width: 100%;
11087
- margin: var(--bs-datepicker-time-container-margin);
11088
- text-align: var(--bs-datepicker-time-container-align);
11089
- border-top: var(--bs-border-width) solid var(--bs-light);
11090
- }
11091
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__caption {
11092
- display: none;
11093
- }
11094
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__input-container {
11095
- width: 100%;
11096
- }
11097
- .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
11098
- width: var(--bs-datepicker-time-input-width);
11099
- margin: var(--bs-datepicker-time-input-margin);
11100
- text-align: var(--bs-datepicker-time-input-align);
11101
- outline: 0;
11102
- }
11103
- .react-datepicker .react-datepicker__day--today {
11104
- font-weight: var(--bs-datepicker-day-today-font-weight);
11105
- border-radius: var(--bs-datepicker-day-radius);
11106
- box-shadow: var(--bs-datepicker-day-today-box-shadow);
11107
- }
11108
- .react-datepicker .d-datepicker-time {
11109
- gap: var(--bs-datepicker-time-input-gap);
11110
- padding: var(--bs-datepicker-time-input-padding);
11111
- }
11112
- .react-datepicker .d-datepicker-time .d-datepicker-time-label {
11113
- font-size: var(--bs-datepicker-time-input-label-size);
11114
- font-weight: var(--bs-datepicker-time-input-label-weight);
11115
- color: var(--bs-datepicker-time-input-label-color);
11116
- }
11117
- .react-datepicker .d-datepicker-header {
11118
- font-size: var(--bs-datepicker-header-font-size);
11119
- }
11120
- .react-datepicker .header-button {
11121
- --bs-btn-padding-y: var(--bs-datepicker-header-button-padding);
11122
- --bs-btn-padding-x: var(--bs-datepicker-header-button-padding);
11123
- }
11124
- .react-datepicker .header-button:hover, .react-datepicker .header-button:active {
11125
- color: inherit;
11126
- background-color: inherit;
11127
- }
11128
- .react-datepicker .header-button:focus {
11129
- --bs-btn-focus-outline-offset: 8px;
11130
- }
11131
- .react-datepicker .d-select:focus-within .input-group {
11132
- border-color: transparent;
11133
- box-shadow: none;
11134
- }
11135
- .react-datepicker .d-select .input-group {
11136
- --bs-input-border-width: 0;
11137
- }
11138
- .react-datepicker .d-select .d-select__indicators {
11139
- display: none;
11140
- }
11141
- .react-datepicker .d-select .d-select__control {
11142
- padding: var(--bs-datepicker-header-select-padding);
11143
- background-color: transparent;
11144
- }
11145
- .react-datepicker .d-select .d-select__single-value {
11146
- font-weight: var(--bs-datepicker-header-select-font-weight);
11147
- }
11148
- .react-datepicker .d-select__menu {
11149
- left: 50%;
11150
- min-width: var(--bs-datepicker-header-select-menu-width);
11151
- translate: -50%;
11152
- }
11153
-
10871
+ /* stylelint-enable */
11154
10872
  .d-datepicker-time {
11155
10873
  --bs-datepicker-time-input: 100%;
11156
10874
  --bs-datepicker-webkit-time-color: var(--bs-black);
@@ -11209,19 +10927,20 @@ label .d-icon {
11209
10927
  .d-box-file {
11210
10928
  --bs-box-file-gap: var(--bs-ref-spacer-4);
11211
10929
  --bs-box-file-bg: unset;
11212
- --bs-box-file-border: 1px dashed var(--bs-gray-700);
11213
- --bs-box-file-border-radius: var(--bs-border-radius);
10930
+ --bs-box-file-border: 1px dashed var(--bs-gray-100);
10931
+ --bs-box-file-border-radius: var(--bs-ref-spacer-1);
11214
10932
  --bs-box-file-padding: var(--bs-ref-spacer-8);
11215
10933
  --bs-box-file-content-max-width: 220px;
11216
10934
  --bs-box-file-icon-size: var(--bs-ref-spacer-14);
11217
- --bs-box-file-icon-color: var(--bs-secondary-300);
11218
- --bs-box-file-hover-border: 1px dashed var(--bs-secondary-700);
11219
- --bs-box-file-hover-bg: var(--bs-secondary-100);
11220
- --bs-box-file-selected-border: 1px dashed var(--bs-secondary-700);
10935
+ --bs-box-file-icon-color: var(--bs-primary);
10936
+ --bs-box-file-hover-border: 1px dashed var(--bs-primary-700);
10937
+ --bs-box-file-hover-bg: var(--bs-primary-25);
10938
+ --bs-box-file-selected-border: 1px dashed var(--bs-primary-700);
11221
10939
  --bs-box-file-selected-bg: var(--bs-white);
11222
- display: flex;
11223
- flex-direction: column;
11224
- gap: var(--bs-box-file-gap);
10940
+ --bs-box-file-disabled-border: 1px dashed var(--bs-gray-300);
10941
+ --bs-box-file-disabled-bg: var(--bs-gray-100);
10942
+ --bs-box-file-valid-border: 1px dashed var(--bs-success);
10943
+ --bs-box-file-invalid-border: 1px dashed var(--bs-danger);
11225
10944
  width: 100%;
11226
10945
  cursor: pointer;
11227
10946
  background: var(--bs-box-file-bg);
@@ -11236,6 +10955,17 @@ label .d-icon {
11236
10955
  background: var(--bs-box-file-selected-bg);
11237
10956
  border: var(--bs-box-file-selected-border);
11238
10957
  }
10958
+ .d-box-file.d-box-file-valid {
10959
+ border: var(--bs-box-file-valid-border);
10960
+ }
10961
+ .d-box-file.d-box-file-invalid {
10962
+ border: var(--bs-box-file-invalid-border);
10963
+ }
10964
+ .d-box-file.d-box-file-disabled {
10965
+ cursor: default;
10966
+ background: var(--bs-box-file-disabled-bg);
10967
+ border: var(--bs-box-file-disabled-border);
10968
+ }
11239
10969
  .d-box-file .d-icon {
11240
10970
  --bs-icon-size: var(--bs-box-file-icon-size);
11241
10971
  --bs-icon-color: var(--bs-box-file-icon-color);
@@ -11248,20 +10978,21 @@ label .d-icon {
11248
10978
  width: 100%;
11249
10979
  padding: var(--bs-box-file-padding);
11250
10980
  }
11251
- .d-box-file .d-box-file-dropzone:not(:last-child) {
11252
- padding-bottom: 0;
11253
- }
11254
10981
  .d-box-file .d-box-content {
11255
10982
  max-width: var(--bs-box-file-content-max-width);
11256
10983
  }
11257
- .d-box-file .d-box-files {
10984
+
10985
+ .d-box-files {
10986
+ --bs-box-file-list-gap: var(--bs-ref-spacer-4);
10987
+ --bs-box-file-list-padding: var(--bs-ref-spacer-0);
11258
10988
  display: flex;
11259
10989
  flex-direction: column;
11260
- gap: var(--bs-box-file-gap);
11261
- padding: 0 var(--bs-box-file-padding) var(--bs-box-file-padding);
10990
+ gap: var(--bs-box-file-list-gap);
10991
+ padding: var(--bs-box-file-list-padding);
11262
10992
  }
11263
- .d-box-file .d-box-files-text {
11264
- word-break: break-word;
10993
+ .d-box-files .input-group:focus-within {
10994
+ --bs-input-focus-border-color: var(--bs-gray-100);
10995
+ --bs-input-focus-box-shadow: none;
11265
10996
  }
11266
10997
 
11267
10998
  .splide__container {
@@ -11769,8 +11500,8 @@ label .d-icon {
11769
11500
  }
11770
11501
  .d-stepper-desktop.is-vertical .d-step .d-step-text-container {
11771
11502
  display: flex;
11772
- flex-direction: column;
11773
11503
  flex-grow: 1;
11504
+ flex-direction: column;
11774
11505
  align-items: flex-start;
11775
11506
  min-height: var(--bs-step-label-height);
11776
11507
  padding: var(--bs-step-vertical-label-padding);
@@ -11893,12 +11624,17 @@ label .d-icon {
11893
11624
  --bs-select-option-is-checkbox-font-weight: var(--bs-fw-normal);
11894
11625
  --bs-select-option-is-checkbox-color: var(--bs-gray-900);
11895
11626
  --bs-select-option-has-icon-icon-size: var(--bs-ref-spacer-4);
11896
- --bs-select-multi-value-padding-x: var(--bs-select-gap);
11897
- --bs-select-multi-value-padding-y: 0;
11627
+ --bs-select-multi-value-padding: 0 var(--bs-ref-spacer-1) 0 var(--bs-select-gap);
11898
11628
  --bs-select-multi-value-margin-right: var(--bs-select-gap);
11899
- --bs-select-multi-value-background: var(--bs-gray-100);
11629
+ --bs-select-multi-value-background: var(--bs-secondary-100);
11900
11630
  --bs-select-multi-value-border-radius: 0.25rem;
11901
11631
  --bs-select-multi-value-label-color: var(--bs-secondary);
11632
+ --bs-select-multi-value-remove-color: var(--bs-secondary);
11633
+ --bs-select-multi-value-remove-hover-color: var(--bs-white);
11634
+ --bs-select-multi-value-remove-hover-background: var(--bs-primary);
11635
+ --bs-select-indicator-separator-width: 1px;
11636
+ --bs-select-indicator-separator-margin: var(--bs-ref-spacer-0) var(--bs-ref-spacer-1);
11637
+ --bs-select-indicator-separator-color: var(--bs-transparent);
11902
11638
  --bs-select-indicator-width: var(--bs-ref-spacer-4);
11903
11639
  --bs-select-indicator-height: var(--bs-ref-spacer-4);
11904
11640
  }
@@ -12017,14 +11753,23 @@ label .d-icon {
12017
11753
  color: var(--bs-select-option-is-checkbox-color);
12018
11754
  }
12019
11755
  .d-select .d-select__multi-value {
12020
- padding: var(--bs-select-multi-value-padding-y) var(--bs-select-multi-value-padding-x);
12021
11756
  margin-right: var(--bs-select-multi-value-margin-right);
12022
11757
  background: var(--bs-select-multi-value-background);
12023
11758
  border-radius: var(--bs-select-multi-value-border-radius);
12024
11759
  }
12025
11760
  .d-select .d-select__multi-value__label {
11761
+ padding: var(--bs-select-multi-value-padding);
12026
11762
  color: var(--bs-select-multi-value-label-color);
12027
11763
  }
11764
+ .d-select .d-select__multi-value__remove {
11765
+ color: var(--bs-select-multi-value-remove-color);
11766
+ }
11767
+ .d-select .d-select__multi-value__remove:hover {
11768
+ color: var(--bs-select-multi-value-remove-hover-color);
11769
+ background-color: var(--bs-select-multi-value-remove-hover-background);
11770
+ border-top-right-radius: inherit;
11771
+ border-bottom-right-radius: inherit;
11772
+ }
12028
11773
  .d-select .d-select__control--has-icon,
12029
11774
  .d-select .d-select__option--has-icon {
12030
11775
  display: flex;
@@ -12044,8 +11789,16 @@ label .d-icon {
12044
11789
  width: var(--bs-select-indicator-width);
12045
11790
  height: var(--bs-select-indicator-height);
12046
11791
  }
12047
- .d-select .d-select__indicator-separator {
12048
- width: var(--bs-select-gap);
11792
+ .d-select .d-select__indicator .d-icon {
11793
+ --bs-icon-component-size: var(--bs-select-indicator-width);
11794
+ }
11795
+ .d-select .d-select__indicators .d-select__indicator-separator {
11796
+ width: var(--bs-select-indicator-separator-width);
11797
+ margin: var(--bs-select-indicator-separator-margin);
11798
+ background-color: var(--bs-select-indicator-separator-color);
11799
+ }
11800
+ .d-select .d-select__indicators .d-select__indicator-separator:not(:first-child) {
11801
+ --bs-select-indicator-separator-color: var(--bs-gray-100);
12049
11802
  }
12050
11803
  .d-select.disabled .d-select__control {
12051
11804
  background: var(--bs-input-disabled-bg);
@@ -12845,6 +12598,10 @@ label .d-icon {
12845
12598
  .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
12846
12599
  position: absolute !important;
12847
12600
  }
12601
+ .visually-hidden *,
12602
+ .visually-hidden-focusable:not(:focus):not(:focus-within) * {
12603
+ overflow: hidden !important;
12604
+ }
12848
12605
 
12849
12606
  .stretched-link::after {
12850
12607
  position: absolute;
@@ -12887,10 +12644,10 @@ label .d-icon {
12887
12644
 
12888
12645
  [class*=text-truncate-] {
12889
12646
  display: -webkit-box;
12890
- -webkit-line-clamp: var(--bs-text-truncate);
12891
- -webkit-box-orient: vertical;
12892
12647
  overflow: hidden;
12893
12648
  text-overflow: ellipsis;
12649
+ -webkit-line-clamp: var(--bs-text-truncate);
12650
+ -webkit-box-orient: vertical;
12894
12651
  white-space: normal;
12895
12652
  }
12896
12653