@fkui/design 6.40.0 → 6.41.0

package/lib/fkui.css

@@ -1182,86 +1182,6 @@ input[type=search]:focus,
   border-color: var(--fkds-color-feedback-border-info, #4a52b6);
 }
 
-.button-group {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: calc(0.5rem * var(--f-density-factor, 1));
-  margin-top: calc(0.25rem * var(--f-density-factor, 1));
-}
-.button-group .button-group__item {
-  margin: 0;
-  margin-bottom: calc(1rem * var(--f-density-factor, 1));
-}
-@media (min-width: 640px) {
-  .button-group .button-group__item {
-    margin-bottom: calc(1rem * var(--f-density-factor, 1));
-    margin-right: 1.25rem;
-  }
-  .button-group .button-group__item:last-child {
-    margin-right: 0;
-  }
-}
-.button-group > .button.button--discrete, .button-group > .button--discrete.calendar-navbar__year-selector-button, .button-group > .button.button--text, .button-group > .button--text.calendar-navbar__year-selector-button {
-  margin-bottom: calc(1rem * var(--f-density-factor, 1));
-  margin-right: 1.5rem;
-}
-.button-group > .button.button--discrete:last-child, .button-group > .button--discrete.calendar-navbar__year-selector-button:last-child, .button-group > .button.button--text:last-child, .button-group > .button--text.calendar-navbar__year-selector-button:last-child {
-  margin-right: 0;
-}
-.button-group > .button.button--small, .button-group > .button--small.calendar-navbar__year-selector-button {
-  margin-bottom: calc(0.75rem * var(--f-density-factor, 1));
-  margin-right: 0.75rem;
-}
-.button-group > .button.button--small:last-child, .button-group > .button--small.calendar-navbar__year-selector-button:last-child {
-  margin-right: 0;
-}
-@media (max-width: 639.98px) {
-  .button-group > .button.button--small.button--full-width, .button-group > .button--small.button--full-width.calendar-navbar__year-selector-button {
-    margin-right: 0;
-  }
-}
-.button-group > .button.button--medium, .button-group > .button--medium.calendar-navbar__year-selector-button {
-  margin-bottom: calc(0.75rem * var(--f-density-factor, 1));
-  margin-right: 1rem;
-}
-.button-group > .button.button--medium:last-child, .button-group > .button--medium.calendar-navbar__year-selector-button:last-child {
-  margin-right: 0;
-}
-@media (max-width: 639.98px) {
-  .button-group > .button.button--medium.button--full-width, .button-group > .button--medium.button--full-width.calendar-navbar__year-selector-button {
-    margin-right: 0;
-  }
-}
-@media (min-width: 640px) {
-  .button-group > .button.button--large, .button-group > .button--large.calendar-navbar__year-selector-button {
-    margin-bottom: calc(1rem * var(--f-density-factor, 1));
-    margin-right: 1.25rem;
-  }
-  .button-group > .button.button--large:last-child, .button-group > .button--large.calendar-navbar__year-selector-button:last-child {
-    margin-right: 0;
-  }
-}
-.button-group--end {
-  justify-content: flex-end;
-}
-
-.button-list {
-  margin-bottom: calc(0.5rem * var(--f-density-factor, 1));
-  margin-top: calc(0.25rem * var(--f-density-factor, 1));
-  padding-left: 0;
-}
-.button-list > li button {
-  margin: 0;
-  margin-bottom: calc(1rem * var(--f-density-factor, 1));
-}
-.button-list > li button.button.button--small, .button-list > li button.button--small.calendar-navbar__year-selector-button, .button-list > li button.button.button--medium, .button-list > li button.button--medium.calendar-navbar__year-selector-button {
-  margin-bottom: calc(0.75rem * var(--f-density-factor, 1));
-}
-.button-list > li button.button.button--large, .button-list > li button.button--large.calendar-navbar__year-selector-button {
-  margin-bottom: calc(1rem * var(--f-density-factor, 1));
-}
-
 .button, .calendar-navbar__year-selector-button {
   border-color: transparent;
   border-radius: var(--f-border-radius-medium, 4px);
@@ -1763,6 +1683,86 @@ input[type=search]:focus,
   width: calc(var(--f-icon-size-small, 1rem) + 0.25rem);
 }
 
+.button-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: calc(0.5rem * var(--f-density-factor, 1));
+  margin-top: calc(0.25rem * var(--f-density-factor, 1));
+}
+.button-group--end {
+  justify-content: flex-end;
+}
+.button-group__item {
+  margin: 0;
+  margin-bottom: calc(1rem * var(--f-density-factor, 1));
+}
+@media (min-width: 640px) {
+  .button-group__item {
+    margin-bottom: calc(1rem * var(--f-density-factor, 1));
+    margin-right: 1.25rem;
+  }
+  .button-group__item:last-child {
+    margin-right: 0;
+  }
+}
+.button-group > .button--discrete {
+  margin-bottom: calc(1rem * var(--f-density-factor, 1));
+  margin-right: 1.5rem;
+}
+.button-group > .button--discrete:last-child {
+  margin-right: 0;
+}
+.button-group > .button--small {
+  margin-bottom: calc(0.75rem * var(--f-density-factor, 1));
+  margin-right: 0.75rem;
+}
+.button-group > .button--small:last-child {
+  margin-right: 0;
+}
+@media (max-width: 639.98px) {
+  .button-group > .button--small.button--full-width {
+    margin-right: 0;
+  }
+}
+.button-group > .button--medium {
+  margin-bottom: calc(0.75rem * var(--f-density-factor, 1));
+  margin-right: 1rem;
+}
+.button-group > .button--medium:last-child {
+  margin-right: 0;
+}
+@media (max-width: 639.98px) {
+  .button-group > .button--medium.button--full-width {
+    margin-right: 0;
+  }
+}
+@media (min-width: 640px) {
+  .button-group > .button--large {
+    margin-bottom: calc(1rem * var(--f-density-factor, 1));
+    margin-right: 1.25rem;
+  }
+  .button-group > .button--large:last-child {
+    margin-right: 0;
+  }
+}
+
+.button-list {
+  margin-bottom: calc(0.5rem * var(--f-density-factor, 1));
+  margin-top: calc(0.25rem * var(--f-density-factor, 1));
+  padding-left: 0;
+}
+.button-list > li button {
+  margin: 0;
+  margin-bottom: calc(1rem * var(--f-density-factor, 1));
+}
+.button-list > li button.button.button--small, .button-list > li button.button.button--medium {
+  margin-bottom: calc(0.75rem * var(--f-density-factor, 1));
+}
+.button-list > li button.button.button--large {
+  margin-bottom: calc(1rem * var(--f-density-factor, 1));
+}
+
 /* stylelint-disable no-invalid-position-declaration -- the selector is set when the mixin is included */
 .calendar-day {
   align-items: center;
@@ -2444,12 +2444,27 @@ input[type=search]:focus,
   width: calc(var(--f-icon-size-x-large, 2rem) * var(--f-density-factor, 1));
   vertical-align: middle;
 }
+@media (forced-colors: active) {
+  .datepicker-field__button .icon {
+    color: ButtonBorder;
+  }
+}
 .datepicker-field__button:hover .icon {
   color: var(--fkds-color-action-text-primary-hover, #3b4292);
 }
+@media (forced-colors: active) {
+  .datepicker-field__button:hover .icon {
+    color: LinkText;
+  }
+}
 .datepicker-field__button:disabled .icon {
   color: var(--fkds-color-text-disabled, #8d8e91);
 }
+@media (forced-colors: active) {
+  .datepicker-field__button:disabled .icon {
+    color: GrayText;
+  }
+}
 .datepicker-field__popup {
   margin-top: -16px;
   border-radius: var(--f-border-radius-medium, 4px);
@@ -4005,6 +4020,11 @@ input[type=search]:focus,
   position: absolute;
   width: 1rem;
 }
+@media (forced-colors: active) {
+  .loader__circle {
+    background-color: CanvasText;
+  }
+}
 .loader__wait-text {
   align-items: center;
   display: flex;
@@ -4030,6 +4050,11 @@ input[type=search]:focus,
 .loader--overlay .loader__circle {
   background-color: var(--fkds-color-text-inverted, #fff);
 }
+@media (forced-colors: active) {
+  .loader--overlay .loader__circle {
+    background-color: CanvasText;
+  }
+}
 .loader .loader__spinner-1-circle2 {
   animation-delay: -0.9s;
 }
@@ -5000,6 +5025,11 @@ input[type=search]:focus,
   padding: var(--padding-input-fields, 0 2.25rem 0 0.75rem);
   width: var(--f-width-full, 100%);
 }
+@media (forced-colors: active) {
+  .select-field__select {
+    border-color: ButtonBorder;
+  }
+}
 .select-field__select:hover {
   background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
 }
@@ -5024,6 +5054,11 @@ input[type=search]:focus,
 .select-field__icon {
   color: var(--fkds-color-action-text-primary-default, #4a52b6);
 }
+@media (forced-colors: active) {
+  .select-field__icon {
+    color: buttonText;
+  }
+}
 .select-field__error-popup-icon {
   color: var(--fkds-color-feedback-text-negative, #ca1515);
   display: inline;
@@ -5595,6 +5630,7 @@ input[type=search]:focus,
 }
 .table-ng__editable__text {
   flex: 1 1 auto;
+  white-space: pre;
 }
 .table-ng__editable__numeric span,
 .table-ng__editable__numeric input {
@@ -6221,6 +6257,14 @@ input[type=search]:focus,
   border-radius: 50%;
   box-shadow: var(--f-button-shadow, 0 1px 3px rgba(0,0,0,.3));
 }
+@media (forced-colors: active) {
+  .calendar-navbar__icon {
+    background-color: transparent;
+    border: 2px solid ButtonBorder;
+    color: ButtonText;
+    padding: 3px;
+  }
+}
 .calendar-navbar__icon--disabled {
   color: var(--fkds-color-text-disabled, #8d8e91);
   background-color: var(--fkds-color-background-disabled, #f4f4f4);
@@ -6228,6 +6272,15 @@ input[type=search]:focus,
   border: 1px solid var(--fkds-color-border-disabled, #8d8e91);
   box-shadow: none;
 }
+@media (forced-colors: active) {
+  .calendar-navbar__icon--disabled {
+    background-color: transparent;
+    border-color: GrayText;
+    border-width: 2px;
+    color: GrayText;
+    padding: 3px;
+  }
+}
 .calendar-navbar__arrow {
   padding: 0;
   display: flex;
@@ -6235,6 +6288,11 @@ input[type=search]:focus,
   background-color: transparent;
   cursor: pointer;
 }
+@media (forced-colors: active) {
+  .calendar-navbar__arrow {
+    border-color: ButtonBorder;
+  }
+}
 
 .calendar__wrapper {
   width: 100%;