@dynamic-framework/ui-react 1.12.0 → 1.13.0

package/dist/css/dynamic-ui-non-root.css

@@ -2359,7 +2359,7 @@ textarea.form-control-lg {
 .form-select:focus {
   border-color: var(--bs-focus-ring-color);
   outline: 0;
-  box-shadow: var(--bs-box-shadow-inset), 0 0 0 0 rgba(var(--bs-secondary-rgb), 0);
+  box-shadow: var(--bs-box-shadow-inset), 0 0 0 1px rgba(var(--bs-secondary-rgb), 1);
 }
 .form-select[multiple], .form-select[size]:not([size="1"]) {
   padding-right: 1rem;
@@ -2522,7 +2522,7 @@ textarea.form-control-lg {
 
 .form-range {
   width: 100%;
-  height: 1rem;
+  height: calc(1rem + 2px);
   padding: 0;
   -webkit-appearance: none;
      -moz-appearance: none;
@@ -2848,7 +2848,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
+  box-shadow: 0 0 0 1px rgba(var(--bs-success-rgb), 1);
 }
 
 .was-validated .form-select:valid, .form-select.is-valid {
@@ -2856,7 +2856,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:valid:focus, .form-select.is-valid:focus {
   border-color: var(--bs-form-valid-border-color);
-  box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
+  box-shadow: 0 0 0 1px rgba(var(--bs-success-rgb), 1);
 }
 
 .was-validated .form-check-input:valid, .form-check-input.is-valid {
@@ -2866,7 +2866,7 @@ textarea.form-control-lg {
   background-color: var(--bs-form-valid-color);
 }
 .was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
-  box-shadow: 0 0 0 0 rgba(var(--bs-success-rgb), 0);
+  box-shadow: 0 0 0 1px rgba(var(--bs-success-rgb), 1);
 }
 .was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
   color: var(--bs-form-valid-color);
@@ -2918,7 +2918,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
+  box-shadow: 0 0 0 1px rgba(var(--bs-danger-rgb), 1);
 }
 
 .was-validated .form-select:invalid, .form-select.is-invalid {
@@ -2926,7 +2926,7 @@ textarea.form-control-lg {
 }
 .was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
   border-color: var(--bs-form-invalid-border-color);
-  box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
+  box-shadow: 0 0 0 1px rgba(var(--bs-danger-rgb), 1);
 }
 
 .was-validated .form-check-input:invalid, .form-check-input.is-invalid {
@@ -2936,7 +2936,7 @@ textarea.form-control-lg {
   background-color: var(--bs-form-invalid-color);
 }
 .was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
-  box-shadow: 0 0 0 0 rgba(var(--bs-danger-rgb), 0);
+  box-shadow: 0 0 0 1px rgba(var(--bs-danger-rgb), 1);
 }
 .was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
   color: var(--bs-form-invalid-color);
@@ -3386,7 +3386,7 @@ textarea.form-control-lg {
   --bs-nav-link-font-size: var(--bs-body-font-size);
   --bs-nav-link-font-weight: var(--bs-ref-fw-normal);
   --bs-nav-link-color: var(--bs-gray-500);
-  --bs-nav-link-hover-color: var(--bs-gray-600);
+  --bs-nav-link-hover-color: var(--bs-secondary-600);
   --bs-nav-link-disabled-color: var(--bs-gray-200);
   display: flex;
   flex-wrap: wrap;
@@ -3429,7 +3429,7 @@ textarea.form-control-lg {
   --bs-nav-tabs-border-width: 0;
   --bs-nav-tabs-border-color: transparent;
   --bs-nav-tabs-border-radius: 1rem;
-  --bs-nav-tabs-link-hover-border-color: var(--bs-gray-600);
+  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-600);
   --bs-nav-tabs-link-active-color: var(--bs-secondary);
   --bs-nav-tabs-link-active-bg: transparent;
   --bs-nav-tabs-link-active-border-color: transparent;
@@ -7074,7 +7074,7 @@ textarea.form-control-lg {
   --bs-input-form-text-color: var(--bs-gray);
   --bs-input-group-disabled-border-color: var(--bs-gray-200);
   --bs-input-group-disabled-bg: var(--bs-gray-100);
-  --bs-input-group-disabled-color: var(--bs-gray);
+  --bs-input-group-disabled-color: var(--bs-secondary-100);
   display: flex;
   flex-direction: column;
   gap: var(--bs-input-gap);
@@ -7084,12 +7084,6 @@ textarea.form-control-lg {
   border-color: var(--bs-input-group-focus-border-color);
   box-shadow: var(--bs-input-group-focus-box-shadow);
 }
-.d-input:focus-within .input-group:hover:has(.form-control:not(:-moz-placeholder-shown:disabled)) {
-  border-color: var(--bs-input-group-focus-border-color);
-}
-.d-input:focus-within .input-group:hover:has(.form-control:not(:placeholder-shown:disabled)), .d-input:focus-within .input-group:hover {
-  border-color: var(--bs-input-group-focus-border-color);
-}
 .d-input .d-input-control {
   display: flex;
   flex-direction: column;
@@ -7109,14 +7103,15 @@ textarea.form-control-lg {
   border: var(--bs-input-group-border-width) solid var(--bs-input-group-border-color);
   border-radius: var(--bs-input-group-border-radius);
 }
-.d-input:has(.form-control:not(:-moz-placeholder-shown, :focus)) .input-group {
+.d-input .input-group:not(:focus-within):not(.has-validation):has(.form-control:not(:-moz-placeholder-shown, :disabled)) {
   border-color: var(--bs-input-group-hover-border-color);
 }
-.d-input:has(.form-control:not(:placeholder-shown, :focus)) .input-group {
+.d-input .input-group:not(:focus-within):not(.has-validation):has(.form-control:not(:placeholder-shown, :disabled)) {
   border-color: var(--bs-input-group-hover-border-color);
 }
 .d-input:has(.form-control.is-valid) .input-group {
   border-color: var(--bs-form-valid-border-color);
+  box-shadow: 0 0 0 1px rgba(var(--bs-success-rgb), 1);
 }
 .d-input:has(.form-control.is-valid) .input-group ~ .form-text {
   color: var(--bs-form-valid-border-color);
@@ -7126,6 +7121,7 @@ textarea.form-control-lg {
 }
 .d-input:has(.form-control.is-invalid) .input-group {
   border-color: var(--bs-form-invalid-border-color);
+  box-shadow: 0 0 0 1px rgba(var(--bs-danger-rgb), 1);
 }
 .d-input:has(.form-control.is-invalid) .input-group ~ .form-text {
   color: var(--bs-form-invalid-border-color);
@@ -7158,14 +7154,26 @@ textarea.form-control-lg {
   -webkit-appearance: none;
           appearance: none;
 }
+.d-input .form-control.is-invalid:focus,
+.d-input .form-control.is-valid:focus {
+  border: 0;
+  box-shadow: unset;
+}
 .d-input .input-group-text {
   border: 0;
   outline: 0;
 }
+.d-input .input-group-text:disabled {
+  color: var(--bs-input-group-disabled-color);
+}
 .d-input .form-control:disabled {
   background: var(--bs-input-group-disabled-bg);
 }
+.d-input:has(.form-control:disabled) {
+  border-color: var(--bs-input-group-disabled-color);
+}
 .d-input:has(.form-control:disabled) .input-group-text {
+  color: var(--bs-input-group-disabled-color);
   background: var(--bs-input-group-disabled-bg);
 }
 .d-input:has(.form-control:disabled) .d-input-icon .d-icon {
@@ -8211,7 +8219,7 @@ label {
   --bs-quick-action-check-border-radius: var(--bs-border-radius-sm);
   --bs-quick-action-check-line1-font-size: var(--bs-body-font-size);
   --bs-quick-action-check-line1-font-weight: var(--bs-ref-fw-bold);
-  --bs-quick-action-check-line1-color: var(--bs-light-text-emphasis);
+  --bs-quick-action-check-line1-color: var(--bs-gray-900);
   --bs-quick-action-check-line2-font-size: var(--bs-ref-fs-small);
   --bs-quick-action-check-line2-font-weight: var(--bs-ref-fw-normal);
   --bs-quick-action-check-line2-color: var(--bs-gray);
@@ -9524,16 +9532,17 @@ label {
   --bs-datepicker-day-names-font-size: var(--bs-ref-spacer-3);
   --bs-datepicker-day-name-weight: var(--bs-ref-fw-bold);
   --bs-datepicker-day-name-margin: 0;
-  --bs-datepicker-day-name-size: 20px;
+  --bs-datepicker-day-name-size: var(--bs-ref-spacer-3);
   --bs-datepicker-day-name-color: var(--bs-gray-500);
-  --bs-datepicker-month-gap: var(--bs-ref-fs-small);
+  --bs-datepicker-month-gap: var(--bs-ref-spacer-2);
   --bs-datepicker-month-padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-4) var(--bs-ref-spacer-4);
   --bs-datepicker-month-margin: 0;
   --bs-datepicker-month-color: var(--bs-white);
-  --bs-datepicker-week-gap: 1.875rem;
+  --bs-datepicker-week-gap: var(--bs-ref-spacer-2);
   --bs-datepicker-day-margin: 0;
   --bs-datepicker-day-font-size: var(--bs-ref-fs-small);
-  --bs-datepicker-day-size: 20px;
+  --bs-datepicker-day-size: var(--bs-ref-spacer-3);
+  --bs-datepicker-day-padding: var(--bs-ref-spacer-3);
   --bs-datepicker-day-radius: 100%;
   --bs-datepicker-day-bg-hover: var(--bs-body);
   --bs-datepicker-day-color-hover: var(--bs-info-100);
@@ -9572,13 +9581,17 @@ label {
 }
 .react-datepicker .react-datepicker__header .react-datepicker__day-names {
   display: flex;
-  justify-content: space-between;
+  gap: var(--bs-ref-spacer-2);
   margin: var(--bs-datepicker-day-names-margin);
   font-size: var(--bs-datepicker-day-names-font-size);
 }
 .react-datepicker .react-datepicker__header .react-datepicker__day-name {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: var(--bs-datepicker-day-name-size);
   height: var(--bs-datepicker-day-name-size);
+  padding: var(--bs-datepicker-day-padding);
   margin: var(--bs-datepicker-day-name-margin);
   font-weight: var(--bs-datepicker-day-name-weight);
   line-height: var(--bs-datepicker-day-name-size);
@@ -9599,8 +9612,12 @@ label {
   gap: var(--bs-datepicker-week-gap);
 }
 .react-datepicker .react-datepicker__month .react-datepicker__day {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: var(--bs-datepicker-day-size);
   height: var(--bs-datepicker-day-size);
+  padding: var(--bs-datepicker-day-padding);
   margin: var(--bs-datepicker-day-margin);
   font-size: var(--bs-datepicker-day-font-size);
   line-height: var(--bs-datepicker-day-size);
@@ -9660,6 +9677,9 @@ label {
 .react-datepicker .react-datepicker__day--outside-month {
   color: var(--bs-datepicker-day-outside-month-color);
 }
+.react-datepicker .react-datepicker-wrapper {
+  margin-inline: auto;
+}
 .react-datepicker .react-datepicker__input-time-container {
   width: 100%;
   margin: var(--bs-datepicker-time-container-margin);
@@ -9812,6 +9832,7 @@ label {
   --bs-tabs-nav-padding-y: 1rem;
   --bs-tabs-link-border-height: 2px;
   --bs-tabs-link-line-height: 1.5rem;
+  --bs-tabs-link-hover-color: var(--bs-secondary-600);
   --bs-tabs-link-border-border-radius: 50rem;
   --bs-tabs-link-border-active-color: var(--bs-secondary);
   --bs-tabs-link-border-active-font-weight: var(--bs-ref-fw-bold);
@@ -9827,6 +9848,9 @@ label {
   position: relative;
   line-height: var(--bs-tabs-link-line-height);
 }
+.d-tabs .nav-link:hover {
+  color: var(--bs-tabs-link-hover-color);
+}
 .d-tabs .nav-link.active {
   font-weight: var(--bs-tabs-link-border-active-font-weight);
   color: var(--bs-tabs-link-border-active-color);
@@ -10430,7 +10454,7 @@ label {
   width: 0;
   height: 100%;
   content: "";
-  border: var(--bs-step-icon-container-border-width) solid var(--bs-step-icon-container-border-color);
+  border: var(--bs-step-line-stroke) solid var(--bs-step-line-color);
 }
 .d-stepper-desktop.is-vertical .d-step:first-child .d-step-value::after {
   top: 50%;