@fkui/design 6.7.0 → 6.8.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 (13) hide show
  1. package/lib/fkui.css +18 -117
  2. package/lib/fkui.min.css +1 -1
  3. package/package.json +5 -5
  4. package/src/components/button/_button.scss +0 -20
  5. package/src/components/button/_variables.scss +1 -1
  6. package/src/components/combobox/_variables.scss +1 -1
  7. package/src/components/fieldset/_fieldset.scss +1 -0
  8. package/src/components/select-field/_variables.scss +1 -1
  9. package/src/components/text-field/_variables.scss +1 -1
  10. package/src/components/textarea-field/_variables.scss +1 -1
  11. package/src/core/mixins/_button.scss +0 -20
  12. package/src/core/mixins/_variables.scss +3 -3
  13. package/src/internal-components/calendar-navbar/_navbar.scss +4 -6
package/lib/fkui.css CHANGED
@@ -1660,18 +1660,12 @@ input[type=search]:focus,
1660
1660
  color: var(--f-text-color-button-standard, #4a52b6);
1661
1661
  padding: calc(var(--f-button-standard-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-standard-padding-right, 1.5rem) calc(var(--f-button-standard-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-standard-padding-left, 1.5rem);
1662
1662
  }
1663
- .button > .button__icon {
1664
- color: var(--f-text-color-button-standard, #4a52b6);
1665
- }
1666
1663
  .button:hover {
1667
1664
  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
1668
1665
  border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
1669
1666
  color: var(--f-text-color-button-standard, #4a52b6);
1670
1667
  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
1671
1668
  }
1672
- .button:hover > .button__icon {
1673
- color: var(--f-text-color-button-standard, #4a52b6);
1674
- }
1675
1669
  .button:active, .button:focus {
1676
1670
  border-radius: 0;
1677
1671
  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1680,16 +1674,10 @@ input[type=search]:focus,
1680
1674
  border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
1681
1675
  color: var(--f-text-color-button-standard, #4a52b6);
1682
1676
  }
1683
- .button:active > .button__icon, .button:focus > .button__icon {
1684
- color: var(--f-text-color-button-standard, #4a52b6);
1685
- }
1686
1677
  .button.disabled, .button.disabled:hover, .button:disabled, .button:disabled:hover, .button.button--disabled, .button.button--disabled:hover {
1687
- background-color: var(--fkds-color-action-background-disabled, #f4f4f4);
1688
- border-color: var(--fkds-color-action-border-disabled, #8d8e91);
1689
- color: var(--fkds-color-action-text-disabled, #8d8e91);
1690
- }
1691
- .button.disabled > .button__icon, .button.disabled:hover > .button__icon, .button:disabled > .button__icon, .button:disabled:hover > .button__icon, .button.button--disabled > .button__icon, .button.button--disabled:hover > .button__icon {
1692
- color: var(--fkds-color-action-text-disabled, #8d8e91);
1678
+ background-color: var(--fkds-color-background-disabled, #f4f4f4);
1679
+ border-color: var(--fkds-color-border-disabled, #8d8e91);
1680
+ color: var(--fkds-color-text-disabled, #8d8e91);
1693
1681
  }
1694
1682
  .button.button--primary {
1695
1683
  background-color: var(--fkds-color-action-background-primary-default, #4a52b6);
@@ -1699,18 +1687,12 @@ input[type=search]:focus,
1699
1687
  color: var(--fkds-color-action-text-inverted-default, #ffffff);
1700
1688
  padding: calc(var(--f-button-primary-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-primary-padding-right, 1.5rem) calc(var(--f-button-primary-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-primary-padding-left, 1.5rem);
1701
1689
  }
1702
- .button.button--primary > .button__icon {
1703
- color: var(--fkds-color-action-text-inverted-default, #ffffff);
1704
- }
1705
1690
  .button.button--primary:hover {
1706
1691
  background-color: var(--fkds-color-action-background-primary-hover, #3b4292);
1707
1692
  border-color: transparent;
1708
1693
  color: var(--fkds-color-action-text-inverted-default, #ffffff);
1709
1694
  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
1710
1695
  }
1711
- .button.button--primary:hover > .button__icon {
1712
- color: var(--fkds-color-action-text-inverted-default, #ffffff);
1713
- }
1714
1696
  .button.button--primary:active, .button.button--primary:focus {
1715
1697
  border-radius: 0;
1716
1698
  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1719,16 +1701,10 @@ input[type=search]:focus,
1719
1701
  border-color: transparent;
1720
1702
  color: var(--fkds-color-action-text-inverted-default, #ffffff);
1721
1703
  }
1722
- .button.button--primary:active > .button__icon, .button.button--primary:focus > .button__icon {
1723
- color: var(--fkds-color-action-text-inverted-default, #ffffff);
1724
- }
1725
1704
  .button.button--primary.disabled, .button.button--primary.disabled:hover, .button.button--primary:disabled, .button.button--primary:disabled:hover, .button.button--primary.button--disabled, .button.button--primary.button--disabled:hover {
1726
- background-color: var(--fkds-color-action-background-disabled, #f4f4f4);
1727
- border-color: var(--fkds-color-action-border-disabled, #8d8e91);
1728
- color: var(--fkds-color-action-text-disabled, #8d8e91);
1729
- }
1730
- .button.button--primary.disabled > .button__icon, .button.button--primary.disabled:hover > .button__icon, .button.button--primary:disabled > .button__icon, .button.button--primary:disabled:hover > .button__icon, .button.button--primary.button--disabled > .button__icon, .button.button--primary.button--disabled:hover > .button__icon {
1731
- color: var(--fkds-color-action-text-disabled, #8d8e91);
1705
+ background-color: var(--fkds-color-background-disabled, #f4f4f4);
1706
+ border-color: var(--fkds-color-border-disabled, #8d8e91);
1707
+ color: var(--fkds-color-text-disabled, #8d8e91);
1732
1708
  }
1733
1709
  .button.button--secondary {
1734
1710
  background-color: var(--fkds-color-action-background-secondary-default, #f5f6fa);
@@ -1738,18 +1714,12 @@ input[type=search]:focus,
1738
1714
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
1739
1715
  padding: calc(var(--f-button-secondary-padding-top, 1rem) * var(--f-density-factor, 1)) var(--f-button-secondary-padding-right, 1.5rem) calc(var(--f-button-secondary-padding-bottom, 1rem) * var(--f-density-factor, 1)) var(--f-button-secondary-padding-left, 1.5rem);
1740
1716
  }
1741
- .button.button--secondary > .button__icon {
1742
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
1743
- }
1744
1717
  .button.button--secondary:hover {
1745
1718
  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
1746
1719
  border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
1747
1720
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
1748
1721
  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
1749
1722
  }
1750
- .button.button--secondary:hover > .button__icon {
1751
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
1752
- }
1753
1723
  .button.button--secondary:active, .button.button--secondary:focus {
1754
1724
  border-radius: 0;
1755
1725
  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1758,16 +1728,10 @@ input[type=search]:focus,
1758
1728
  border-color: var(--fkds-color-action-border-primary-default, #4a52b6);
1759
1729
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
1760
1730
  }
1761
- .button.button--secondary:active > .button__icon, .button.button--secondary:focus > .button__icon {
1762
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
1763
- }
1764
1731
  .button.button--secondary.disabled, .button.button--secondary.disabled:hover, .button.button--secondary:disabled, .button.button--secondary:disabled:hover, .button.button--secondary.button--disabled, .button.button--secondary.button--disabled:hover {
1765
- background-color: var(--fkds-color-action-background-disabled, #f4f4f4);
1766
- border-color: var(--fkds-color-action-border-disabled, #8d8e91);
1767
- color: var(--fkds-color-action-text-disabled, #8d8e91);
1768
- }
1769
- .button.button--secondary.disabled > .button__icon, .button.button--secondary.disabled:hover > .button__icon, .button.button--secondary:disabled > .button__icon, .button.button--secondary:disabled:hover > .button__icon, .button.button--secondary.button--disabled > .button__icon, .button.button--secondary.button--disabled:hover > .button__icon {
1770
- color: var(--fkds-color-action-text-disabled, #8d8e91);
1732
+ background-color: var(--fkds-color-background-disabled, #f4f4f4);
1733
+ border-color: var(--fkds-color-border-disabled, #8d8e91);
1734
+ color: var(--fkds-color-text-disabled, #8d8e91);
1771
1735
  }
1772
1736
  .button.button--discrete, .button.button--text {
1773
1737
  width: inherit;
@@ -1782,18 +1746,12 @@ input[type=search]:focus,
1782
1746
  color: var(--f-text-color-button-discrete, #4a52b6);
1783
1747
  padding: calc(var(--f-button-discrete-padding-top, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-right, initial) calc(var(--f-button-discrete-padding-bottom, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-left, initial);
1784
1748
  }
1785
- .button.button--discrete > .button__icon, .button.button--text > .button__icon {
1786
- color: var(--f-text-color-button-discrete, #4a52b6);
1787
- }
1788
1749
  .button.button--discrete:hover, .button.button--text:hover {
1789
1750
  background-color: var(--f-background-button-discrete-hover, none);
1790
1751
  border-color: transparent;
1791
1752
  color: var(--f-text-color-button-discrete-hover, #3b4292);
1792
1753
  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
1793
1754
  }
1794
- .button.button--discrete:hover > .button__icon, .button.button--text:hover > .button__icon {
1795
- color: var(--f-text-color-button-discrete-hover, #3b4292);
1796
- }
1797
1755
  .button.button--discrete:active, .button.button--text:active, .button.button--discrete:focus, .button.button--text:focus {
1798
1756
  border-radius: 0;
1799
1757
  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1802,17 +1760,11 @@ input[type=search]:focus,
1802
1760
  border-color: transparent;
1803
1761
  color: var(--f-text-color-button-discrete-hover, #3b4292);
1804
1762
  }
1805
- .button.button--discrete:active > .button__icon, .button.button--text:active > .button__icon, .button.button--discrete:focus > .button__icon, .button.button--text:focus > .button__icon {
1806
- color: var(--f-text-color-button-discrete-hover, #3b4292);
1807
- }
1808
1763
  .button.button--discrete.disabled, .button.disabled.button--text, .button.button--discrete.disabled:hover, .button.button--discrete:disabled, .button.button--text:disabled, .button.button--discrete:disabled:hover, .button.button--discrete.button--disabled, .button.button--disabled.button--text, .button.button--discrete.button--disabled:hover {
1809
1764
  background-color: transparent;
1810
1765
  border-color: transparent;
1811
1766
  color: var(--f-text-color-button-discrete-disabled, #8d8e91);
1812
1767
  }
1813
- .button.button--discrete.disabled > .button__icon, .button.disabled.button--text > .button__icon, .button.button--discrete.disabled:hover > .button__icon, .button.button--discrete:disabled > .button__icon, .button.button--text:disabled > .button__icon, .button.button--discrete:disabled:hover > .button__icon, .button.button--discrete.button--disabled > .button__icon, .button.button--disabled.button--text > .button__icon, .button.button--discrete.button--disabled:hover > .button__icon {
1814
- color: var(--f-text-color-button-discrete-disabled, #8d8e91);
1815
- }
1816
1768
  @media (max-width: 639.98px) {
1817
1769
  .button.button--discrete, .button.button--text {
1818
1770
  width: auto;
@@ -1856,18 +1808,12 @@ input[type=search]:focus,
1856
1808
  color: var(--f-text-color-button-discrete-inverted, #ffffff);
1857
1809
  padding: calc(var(--f-button-discrete-padding-top, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-right, initial) calc(var(--f-button-discrete-padding-bottom, initial) * var(--f-density-factor, 1)) var(--f-button-discrete-padding-left, initial);
1858
1810
  }
1859
- .button.button--discrete-inverted > .button__icon {
1860
- color: var(--f-text-color-button-discrete-inverted, #ffffff);
1861
- }
1862
1811
  .button.button--discrete-inverted:hover {
1863
1812
  background-color: transparent;
1864
1813
  border-color: transparent;
1865
1814
  color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
1866
1815
  box-shadow: var(--f-button-shadow-hover, 0 1px 3px rgba(0, 0, 0, 0.3));
1867
1816
  }
1868
- .button.button--discrete-inverted:hover > .button__icon {
1869
- color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
1870
- }
1871
1817
  .button.button--discrete-inverted:active, .button.button--discrete-inverted:focus {
1872
1818
  border-radius: 0;
1873
1819
  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1876,17 +1822,11 @@ input[type=search]:focus,
1876
1822
  border-color: transparent;
1877
1823
  color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
1878
1824
  }
1879
- .button.button--discrete-inverted:active > .button__icon, .button.button--discrete-inverted:focus > .button__icon {
1880
- color: var(--f-text-color-button-discrete-inverted-hover, #ffffff);
1881
- }
1882
1825
  .button.button--discrete-inverted.disabled, .button.button--discrete-inverted.disabled:hover, .button.button--discrete-inverted:disabled, .button.button--discrete-inverted:disabled:hover, .button.button--discrete-inverted.button--disabled, .button.button--discrete-inverted.button--disabled:hover {
1883
1826
  background-color: transparent;
1884
1827
  border-color: transparent;
1885
1828
  color: var(--f-text-color-button-discrete-inverted-disabled, #e5e5f5);
1886
1829
  }
1887
- .button.button--discrete-inverted.disabled > .button__icon, .button.button--discrete-inverted.disabled:hover > .button__icon, .button.button--discrete-inverted:disabled > .button__icon, .button.button--discrete-inverted:disabled:hover > .button__icon, .button.button--discrete-inverted.button--disabled > .button__icon, .button.button--discrete-inverted.button--disabled:hover > .button__icon {
1888
- color: var(--f-text-color-button-discrete-inverted-disabled, #e5e5f5);
1889
- }
1890
1830
  @media (max-width: 639.98px) {
1891
1831
  .button.button--discrete-inverted {
1892
1832
  width: auto;
@@ -1907,18 +1847,12 @@ input[type=search]:focus,
1907
1847
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
1908
1848
  padding: calc(var(--f-button-tertiary-padding-top, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-right, 0.5rem) calc(var(--f-button-tertiary-padding-bottom, 0.75rem) * var(--f-density-factor, 1)) var(--f-button-tertiary-padding-left, 0.5rem);
1909
1849
  }
1910
- .button.button--tertiary > .button__icon {
1911
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
1912
- }
1913
1850
  .button.button--tertiary:hover {
1914
1851
  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
1915
1852
  border-color: transparent;
1916
1853
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
1917
1854
  box-shadow: none;
1918
1855
  }
1919
- .button.button--tertiary:hover > .button__icon {
1920
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
1921
- }
1922
1856
  .button.button--tertiary:active, .button.button--tertiary:focus {
1923
1857
  border-radius: 0;
1924
1858
  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -1927,17 +1861,11 @@ input[type=search]:focus,
1927
1861
  border-color: transparent;
1928
1862
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
1929
1863
  }
1930
- .button.button--tertiary:active > .button__icon, .button.button--tertiary:focus > .button__icon {
1931
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
1932
- }
1933
1864
  .button.button--tertiary.disabled, .button.button--tertiary.disabled:hover, .button.button--tertiary:disabled, .button.button--tertiary:disabled:hover, .button.button--tertiary.button--disabled, .button.button--tertiary.button--disabled:hover {
1934
1865
  background-color: transparent;
1935
1866
  border-color: transparent;
1936
1867
  color: var(--fkds-color-text-disabled, #8d8e91);
1937
1868
  }
1938
- .button.button--tertiary.disabled > .button__icon, .button.button--tertiary.disabled:hover > .button__icon, .button.button--tertiary:disabled > .button__icon, .button.button--tertiary:disabled:hover > .button__icon, .button.button--tertiary.button--disabled > .button__icon, .button.button--tertiary.button--disabled:hover > .button__icon {
1939
- color: var(--fkds-color-text-disabled, #8d8e91);
1940
- }
1941
1869
  @media (max-width: 639.98px) {
1942
1870
  .button.button--tertiary {
1943
1871
  width: auto;
@@ -1946,36 +1874,21 @@ input[type=search]:focus,
1946
1874
  .button.button--tertiary--black {
1947
1875
  color: var(--fkds-color-action-text-secondary-default, #1b1e23);
1948
1876
  }
1949
- .button.button--tertiary--black > .button__icon {
1950
- color: var(--fkds-icon-color-action-content-secondary-default, #1b1e23);
1951
- }
1952
1877
  .button.button--tertiary--black:hover, .button.button--tertiary--black:active, .button.button--tertiary--black:focus {
1953
1878
  color: var(--fkds-color-action-text-secondary-default, #1b1e23);
1954
1879
  }
1955
- .button.button--tertiary--black:hover > .button__icon, .button.button--tertiary--black:active > .button__icon, .button.button--tertiary--black:focus > .button__icon {
1956
- color: var(--fkds-icon-color-action-content-secondary-default, #1b1e23);
1957
- }
1958
1880
  .button.button--tertiary--inverted {
1959
1881
  color: var(--fkds-color-action-text-inverted-default, #ffffff);
1960
1882
  }
1961
- .button.button--tertiary--inverted > .button__icon {
1962
- color: var(--fkds-icon-color-action-content-inverted-default, #ffffff);
1963
- }
1964
1883
  .button.button--tertiary--inverted:hover, .button.button--tertiary--inverted:active, .button.button--tertiary--inverted:focus {
1965
1884
  color: var(--fkds-color-action-text-inverted-focus, #ffffff);
1966
1885
  background-color: transparent;
1967
1886
  }
1968
- .button.button--tertiary--inverted:hover > .button__icon, .button.button--tertiary--inverted:active > .button__icon, .button.button--tertiary--inverted:focus > .button__icon {
1969
- color: var(--fkds-icon-color-action-content-inverted-default, #ffffff);
1970
- }
1971
1887
  .button.button--tertiary--inverted:disabled {
1972
1888
  color: var(--fkds-color-text-disabled, #8d8e91);
1973
1889
  border-width: 0;
1974
1890
  background-color: transparent;
1975
1891
  }
1976
- .button.button--tertiary--inverted:disabled > .button__icon {
1977
- color: var(--fkds-icon-color-action-content-primary-disabled, #8d8e91);
1978
- }
1979
1892
  .button.button--tertiary--underline {
1980
1893
  text-decoration: underline;
1981
1894
  text-decoration-thickness: 2px;
@@ -3004,7 +2917,7 @@ input[type=search]:focus,
3004
2917
  padding: 0;
3005
2918
  }
3006
2919
  .combobox__button:disabled {
3007
- color: var(--fkds-icon-color-action-content-primary-disabled, #8d8e91);
2920
+ color: var(--fkds-icon-color-content-disabled, #8d8e91);
3008
2921
  }
3009
2922
 
3010
2923
  .contextmenu {
@@ -3276,6 +3189,7 @@ input[type=search]:focus,
3276
3189
  .fieldset {
3277
3190
  border: 0;
3278
3191
  margin: 0 0 calc(var(--f-margin-component-bottom, 1.5rem) * var(--f-density-factor, 1));
3192
+ min-width: 0;
3279
3193
  padding: 0;
3280
3194
  width: var(--f-width-full, 100%);
3281
3195
  }
@@ -5190,7 +5104,7 @@ input[type=search]:focus,
5190
5104
  background-color: var(--fkds-color-background-primary, #ffffff);
5191
5105
  }
5192
5106
  .select-field__select:disabled {
5193
- border-color: var(--fkds-color-border-primary, #8d8e91);
5107
+ border-color: var(--fkds-color-border-disabled, #8d8e91);
5194
5108
  color: var(--fkds-color-text-disabled, #8d8e91);
5195
5109
  background-color: var(--fkds-color-background-disabled, #f4f4f4);
5196
5110
  opacity: 1;
@@ -5527,18 +5441,12 @@ input[type=search]:focus,
5527
5441
  width: -moz-max-content;
5528
5442
  width: max-content;
5529
5443
  }
5530
- .table__button > .button__icon {
5531
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
5532
- }
5533
5444
  .table__button:hover {
5534
5445
  background-color: var(--fkds-color-action-background-secondary-hover, #e5e5f5);
5535
5446
  border-color: transparent;
5536
5447
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
5537
5448
  box-shadow: none;
5538
5449
  }
5539
- .table__button:hover > .button__icon {
5540
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
5541
- }
5542
5450
  .table__button:active, .table__button:focus {
5543
5451
  border-radius: 0;
5544
5452
  box-shadow: var(--f-focus-box-shadow, 0 0 0 2px #ffffff, 0 0 0 4px #1b1e23, 0 0 0 6px #ffffff);
@@ -5547,17 +5455,11 @@ input[type=search]:focus,
5547
5455
  border-color: transparent;
5548
5456
  color: var(--fkds-color-action-text-primary-default, #4a52b6);
5549
5457
  }
5550
- .table__button:active > .button__icon, .table__button:focus > .button__icon {
5551
- color: var(--fkds-color-action-text-primary-default, #4a52b6);
5552
- }
5553
5458
  .table__button.disabled, .table__button.disabled:hover, .table__button:disabled, .table__button:disabled:hover, .table__button.table__button--disabled, .table__button.table__button--disabled:hover {
5554
5459
  background-color: transparent;
5555
5460
  border-color: transparent;
5556
5461
  color: var(--fkds-color-text-disabled, #8d8e91);
5557
5462
  }
5558
- .table__button.disabled > .button__icon, .table__button.disabled:hover > .button__icon, .table__button:disabled > .button__icon, .table__button:disabled:hover > .button__icon, .table__button.table__button--disabled > .button__icon, .table__button.table__button--disabled:hover > .button__icon {
5559
- color: var(--fkds-color-text-disabled, #8d8e91);
5560
- }
5561
5463
  .table__button .button__icon {
5562
5464
  margin: var(--f-button-tertiary-table-column-action-icon-margin, 0 2px 0 2px);
5563
5465
  transform: translate(0, 10%);
@@ -5640,7 +5542,7 @@ input[type=search]:focus,
5640
5542
  color: var(--fkds-icon-color-content-disabled, #8d8e91);
5641
5543
  }
5642
5544
  .text-field__input:disabled {
5643
- border-color: var(--fkds-color-border-primary, #8d8e91);
5545
+ border-color: var(--fkds-color-border-disabled, #8d8e91);
5644
5546
  color: var(--fkds-color-text-disabled, #8d8e91);
5645
5547
  background-color: var(--fkds-color-background-disabled, #f4f4f4);
5646
5548
  }
@@ -5710,7 +5612,7 @@ input[type=search]:focus,
5710
5612
  height: auto;
5711
5613
  }
5712
5614
  .textarea-field__textarea:disabled {
5713
- border-color: var(--fkds-color-border-primary, #8d8e91);
5615
+ border-color: var(--fkds-color-border-disabled, #8d8e91);
5714
5616
  color: var(--fkds-color-text-disabled, #8d8e91);
5715
5617
  background-color: var(--fkds-color-background-disabled, #f4f4f4);
5716
5618
  }
@@ -6229,19 +6131,18 @@ input[type=search]:focus,
6229
6131
  text-align: center;
6230
6132
  border-bottom: 1px solid var(--f-border-color-calendar-navbar, #ddddde);
6231
6133
  padding: 1rem;
6134
+ gap: 1rem;
6232
6135
  margin-bottom: 0.75rem;
6233
6136
  font-size: var(--f-font-size-h4, 1.25rem);
6234
6137
  }
6235
6138
  .calendar-navbar__month {
6236
- order: 2;
6139
+ margin-right: auto;
6140
+ font-size: 1.5rem;
6141
+ font-weight: bold;
6237
6142
  }
6238
6143
  .calendar-navbar__arrow--previous {
6239
- order: 1;
6240
6144
  transform: scaleX(-1);
6241
6145
  }
6242
- .calendar-navbar__arrow--next {
6243
- order: 3;
6244
- }
6245
6146
  .calendar-navbar__icon {
6246
6147
  color: var(--f-icon-color-white, #ffffff);
6247
6148
  background-color: var(--f-icon-color-primary, #4a52b6);