@patternfly/react-styles 6.3.0-prerelease.3 → 6.3.0-prerelease.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/css/components/Accordion/accordion.css +11 -12
- package/css/components/Button/button.css +115 -5
- package/css/components/Button/button.d.ts +9 -0
- package/css/components/Button/button.js +9 -0
- package/css/components/Button/button.mjs +9 -0
- package/css/components/ExpandableSection/expandable-section.css +2 -4
- package/css/components/Form/form.css +33 -2
- package/css/components/Form/form.d.ts +2 -1
- package/css/components/Form/form.js +2 -1
- package/css/components/Form/form.mjs +2 -1
- package/css/components/Menu/menu.css +24 -4
- package/css/components/MenuToggle/menu-toggle.css +30 -0
- package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
- package/css/components/MenuToggle/menu-toggle.js +1 -0
- package/css/components/MenuToggle/menu-toggle.mjs +1 -0
- package/css/components/Nav/nav.css +22 -8
- package/css/components/Page/page.css +45 -0
- package/css/components/Page/page.d.ts +3 -0
- package/css/components/Page/page.js +3 -0
- package/css/components/Page/page.mjs +3 -0
- package/css/components/TreeView/tree-view.css +9 -3
- package/css/components/_index.css +291 -38
- package/css/components/_index.d.ts +9 -0
- package/css/components/_index.js +9 -0
- package/css/components/_index.mjs +9 -0
- package/package.json +3 -3
@@ -376,33 +376,32 @@
|
|
376
376
|
}
|
377
377
|
|
378
378
|
.pf-v6-c-accordion__expandable-content {
|
379
|
-
|
380
|
-
margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
|
379
|
+
max-height: 0;
|
381
380
|
margin-inline-start: var(--pf-v6-c-accordion__expandable-content--MarginInlineStart);
|
382
381
|
margin-inline-end: var(--pf-v6-c-accordion__expandable-content--MarginInlineEnd);
|
383
382
|
font-size: var(--pf-v6-c-accordion__expandable-content--FontSize);
|
384
383
|
color: var(--pf-v6-c-accordion__expandable-content--Color);
|
384
|
+
visibility: hidden;
|
385
385
|
background-color: var(--pf-v6-c-accordion__expandable-content--BackgroundColor);
|
386
386
|
border-radius: var(--pf-v6-c-accordion__expandable-content--BorderRadius);
|
387
387
|
opacity: var(--pf-v6-c-accordion__expandable-content--Opacity);
|
388
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade);
|
388
389
|
transition-timing-function: var(--pf-v6-c-accordion__expandable-content--TransitionTimingFunction);
|
389
|
-
transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide),
|
390
|
-
transition-property: opacity, translate,
|
391
|
-
transition-behavior: allow-discrete;
|
390
|
+
transition-duration: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--fade), var(--pf-v6-c-accordion__expandable-content--TransitionDuration--slide), 0s, 0s, 0s;
|
391
|
+
transition-property: opacity, translate, visibility, max-height, margin-block-end;
|
392
392
|
translate: 0 var(--pf-v6-c-accordion__expandable-content--TranslateY);
|
393
393
|
}
|
394
394
|
.pf-v6-c-accordion__expandable-content.pf-m-fixed {
|
395
|
-
max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
|
396
395
|
overflow-y: auto;
|
397
396
|
}
|
398
397
|
.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content {
|
399
|
-
|
398
|
+
max-height: 9999px;
|
399
|
+
margin-block-end: var(--pf-v6-c-accordion__expandable-content--MarginBlockEnd);
|
400
|
+
visibility: revert;
|
401
|
+
transition-delay: 0s;
|
400
402
|
}
|
401
|
-
|
402
|
-
|
403
|
-
--pf-v6-c-accordion__expandable-content--Opacity: 0;
|
404
|
-
--pf-v6-c-accordion__expandable-content--TranslateY: -.5rem;
|
405
|
-
}
|
403
|
+
.pf-v6-c-accordion__item.pf-m-expanded .pf-v6-c-accordion__expandable-content.pf-m-fixed {
|
404
|
+
max-height: var(--pf-v6-c-accordion__expandable-content--m-fixed--MaxHeight);
|
406
405
|
}
|
407
406
|
|
408
407
|
.pf-v6-c-accordion__expandable-content-body {
|
@@ -1548,9 +1547,10 @@ button.pf-v6-c-breadcrumb__link {
|
|
1548
1547
|
--pf-v6-c-button--TextDecorationLine: none;
|
1549
1548
|
--pf-v6-c-button--TextDecorationStyle: none;
|
1550
1549
|
--pf-v6-c-button--TextDecorationColor: currentcolor;
|
1550
|
+
--pf-v6-c-button--TransitionDelay: 0s;
|
1551
1551
|
--pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
1552
|
-
--pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--
|
1553
|
-
--pf-v6-c-button--TransitionProperty: color, background
|
1552
|
+
--pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
1553
|
+
--pf-v6-c-button--TransitionProperty: color, background, border-width, border-color;
|
1554
1554
|
--pf-v6-c-button--hover--BackgroundColor: transparent;
|
1555
1555
|
--pf-v6-c-button--hover--BorderColor: transparent;
|
1556
1556
|
--pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
|
@@ -1766,6 +1766,16 @@ button.pf-v6-c-breadcrumb__link {
|
|
1766
1766
|
--pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
|
1767
1767
|
--pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
|
1768
1768
|
--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
|
1769
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
1770
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: auto;
|
1771
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
1772
|
+
--pf-v6-c-button__icon--TransitionProperty: none;
|
1773
|
+
--pf-v6-c-button__icon--Rotate: 0deg;
|
1774
|
+
--pf-v6-c-button__icon--Scale: 1;
|
1775
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: auto;
|
1776
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
1777
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: none;
|
1778
|
+
--pf-v6-c-button--hover__icon--Rotate: 0deg;
|
1769
1779
|
--pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
|
1770
1780
|
--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
1771
1781
|
--pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
|
@@ -1791,9 +1801,28 @@ button.pf-v6-c-breadcrumb__link {
|
|
1791
1801
|
--pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
|
1792
1802
|
--pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
|
1793
1803
|
--pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
|
1804
|
+
--pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
1805
|
+
--pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
1806
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
1807
|
+
--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
1808
|
+
--pf-v6-c-button--m-settings--hover__icon--Rotate: 60deg;
|
1794
1809
|
--pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
|
1795
1810
|
--pf-v6-c-button--m-block--Display: flex;
|
1796
1811
|
--pf-v6-c-button--m-block--Width: 100%;
|
1812
|
+
--pf-v6-c-button--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
1813
|
+
--pf-v6-c-button--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
|
1814
|
+
--pf-v6-c-button--hamburger-icon--top--path--base: path("M1,1 L9,1");
|
1815
|
+
--pf-v6-c-button--hamburger-icon--middle--path--base: path("M1,5 L9,5");
|
1816
|
+
--pf-v6-c-button--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
|
1817
|
+
--pf-v6-c-button--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
|
1818
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
1819
|
+
--pf-v6-c-button--hamburger-icon--middle--path: var(--pf-v6-c-button--hamburger-icon--middle--path--base);
|
1820
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
1821
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
1822
|
+
--pf-v6-c-button--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
|
1823
|
+
--pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
|
1824
|
+
--pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
|
1825
|
+
--pf-v6-c-button--m-hamburger__icon--m-expand--Scale: -1;
|
1797
1826
|
}
|
1798
1827
|
|
1799
1828
|
.pf-v6-c-button {
|
@@ -1817,16 +1846,19 @@ button.pf-v6-c-breadcrumb__link {
|
|
1817
1846
|
text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
|
1818
1847
|
white-space: nowrap;
|
1819
1848
|
cursor: pointer;
|
1849
|
+
-webkit-user-select: none;
|
1820
1850
|
user-select: none;
|
1821
|
-
background
|
1851
|
+
background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
|
1822
1852
|
border: 0;
|
1823
1853
|
border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
|
1824
1854
|
border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
|
1825
1855
|
border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
|
1826
1856
|
border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
|
1857
|
+
transition-delay: var(--pf-v6-c-button--TransitionDelay);
|
1827
1858
|
transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
|
1828
1859
|
transition-duration: var(--pf-v6-c-button--TransitionDuration);
|
1829
1860
|
transition-property: var(--pf-v6-c-button--TransitionProperty);
|
1861
|
+
scale: var(--pf-v6-c-button--Scale, revert);
|
1830
1862
|
}
|
1831
1863
|
.pf-v6-c-button::after {
|
1832
1864
|
position: absolute;
|
@@ -1935,6 +1967,7 @@ button.pf-v6-c-breadcrumb__link {
|
|
1935
1967
|
--pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
|
1936
1968
|
text-align: start;
|
1937
1969
|
white-space: normal;
|
1970
|
+
background: transparent;
|
1938
1971
|
outline-offset: 0.125rem;
|
1939
1972
|
}
|
1940
1973
|
span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
@@ -2068,6 +2101,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
2068
2101
|
--pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
|
2069
2102
|
--pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
|
2070
2103
|
min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
|
2104
|
+
background: var(--pf-v6-c-button--BackgroundColor);
|
2071
2105
|
}
|
2072
2106
|
.pf-v6-c-button.pf-m-block {
|
2073
2107
|
--pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
|
@@ -2094,7 +2128,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
2094
2128
|
}
|
2095
2129
|
.pf-v6-c-button.pf-m-favorited {
|
2096
2130
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
2131
|
+
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
|
2097
2132
|
--pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
2133
|
+
--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
|
2098
2134
|
--pf-v6-c-button__icon--favorite--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorite--Opacity);
|
2099
2135
|
--pf-v6-c-button__icon--favorited--Opacity: var(--pf-v6-c-button--m-favorited__icon--favorited--Opacity);
|
2100
2136
|
}
|
@@ -2103,6 +2139,41 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
2103
2139
|
animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
|
2104
2140
|
animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
|
2105
2141
|
}
|
2142
|
+
.pf-v6-c-button.pf-m-settings {
|
2143
|
+
--pf-v6-c-button__icon--TransitionProperty: rotate;
|
2144
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--m-settings__icon--TransitionDuration);
|
2145
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings__icon--TransitionTimingFunction);
|
2146
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: rotate;
|
2147
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: var(--pf-v6-c-button--m-settings--hover__icon--TransitionDuration);
|
2148
|
+
--pf-v6-c-button--hover__icon--TransitionTimingFunction: var(--pf-v6-c-button--m-settings--hover__icon--TransitionTimingFunction);
|
2149
|
+
--pf-v6-c-button--hover__icon--Rotate: var(--pf-v6-c-button--m-settings--hover__icon--Rotate);
|
2150
|
+
}
|
2151
|
+
.pf-v6-c-button.pf-m-hamburger {
|
2152
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
2153
|
+
--pf-v6-c-button__icon--TransitionDuration: 0s;
|
2154
|
+
--pf-v6-c-button__icon--TransitionProperty: scale;
|
2155
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
2156
|
+
--pf-v6-c-button--hover__icon--TransitionDuration: 0s;
|
2157
|
+
--pf-v6-c-button--hover__icon--TransitionProperty: scale;
|
2158
|
+
}
|
2159
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-expand {
|
2160
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
2161
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
2162
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
2163
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
2164
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
2165
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
2166
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
2167
|
+
}
|
2168
|
+
.pf-v6-c-button.pf-m-hamburger.pf-m-collapse {
|
2169
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
2170
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
2171
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
2172
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
2173
|
+
--pf-v6-c-button__icon--Scale: 1;
|
2174
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
2175
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
2176
|
+
}
|
2106
2177
|
.pf-v6-c-button:hover, .pf-v6-c-button:focus {
|
2107
2178
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
|
2108
2179
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
|
@@ -2110,24 +2181,32 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
2110
2181
|
--pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
|
2111
2182
|
--pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
|
2112
2183
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
|
2184
|
+
--pf-v6-c-button__icon--TransitionTimingFunction: var(--pf-v6-c-button--hover__icon--TransitionTimingFunction);
|
2185
|
+
--pf-v6-c-button__icon--TransitionDuration: var(--pf-v6-c-button--hover__icon--TransitionDuration);
|
2186
|
+
--pf-v6-c-button__icon--TransitionProperty: var(--pf-v6-c-button--hover__icon--TransitionProperty);
|
2187
|
+
--pf-v6-c-button__icon--Rotate: var(--pf-v6-c-button--hover__icon--Rotate);
|
2113
2188
|
text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
|
2114
2189
|
text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
|
2115
2190
|
text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
|
2116
2191
|
}
|
2117
|
-
.pf-v6-c-button.pf-m-clicked {
|
2192
|
+
.pf-v6-c-button:active, .pf-v6-c-button.pf-m-clicked {
|
2118
2193
|
--pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
|
2119
2194
|
--pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-clicked--BackgroundColor);
|
2120
2195
|
--pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--m-clicked--BorderWidth);
|
2121
2196
|
--pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-clicked--BorderColor);
|
2122
2197
|
--pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
|
2123
2198
|
}
|
2199
|
+
.pf-v6-c-button:active {
|
2200
|
+
background-size: 100%;
|
2201
|
+
transition-duration: 0s;
|
2202
|
+
}
|
2124
2203
|
.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
|
2125
2204
|
pointer-events: none;
|
2126
2205
|
}
|
2127
2206
|
.pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
|
2128
2207
|
color: var(--pf-v6-c-button--disabled--Color);
|
2129
2208
|
text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
|
2130
|
-
background
|
2209
|
+
background: var(--pf-v6-c-button--disabled--BackgroundColor);
|
2131
2210
|
}
|
2132
2211
|
.pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
|
2133
2212
|
border-color: transparent;
|
@@ -2168,6 +2247,12 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
2168
2247
|
margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
|
2169
2248
|
margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
|
2170
2249
|
color: var(--pf-v6-c-button__icon--Color);
|
2250
|
+
transition-delay: var(--pf-v6-c-button__icon--TransitionDelay);
|
2251
|
+
transition-timing-function: var(--pf-v6-c-button__icon--TransitionTimingFunction);
|
2252
|
+
transition-duration: var(--pf-v6-c-button__icon--TransitionDuration);
|
2253
|
+
transition-property: var(--pf-v6-c-button__icon--TransitionProperty);
|
2254
|
+
rotate: var(--pf-v6-c-button__icon--Rotate);
|
2255
|
+
scale: var(--pf-v6-c-button__icon--Scale);
|
2171
2256
|
}
|
2172
2257
|
.pf-v6-c-button__icon.pf-m-start {
|
2173
2258
|
--pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
|
@@ -2212,6 +2297,30 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
|
|
2212
2297
|
align-items: center;
|
2213
2298
|
}
|
2214
2299
|
|
2300
|
+
.pf-v6-c-button--hamburger-icon path {
|
2301
|
+
fill: none;
|
2302
|
+
stroke: currentcolor;
|
2303
|
+
stroke-linecap: round;
|
2304
|
+
stroke-linejoin: round;
|
2305
|
+
transition: d var(--pf-v6-c-button--hamburger-icon--TransitionDuration) var(--pf-v6-c-button--hamburger-icon--TransitionTimingFunction);
|
2306
|
+
}
|
2307
|
+
|
2308
|
+
.pf-v6-c-button--hamburger-icon--top {
|
2309
|
+
d: var(--pf-v6-c-button--hamburger-icon--top--path);
|
2310
|
+
}
|
2311
|
+
|
2312
|
+
.pf-v6-c-button--hamburger-icon--middle {
|
2313
|
+
d: var(--pf-v6-c-button--hamburger-icon--middle--path);
|
2314
|
+
}
|
2315
|
+
|
2316
|
+
.pf-v6-c-button--hamburger-icon--arrow {
|
2317
|
+
d: var(--pf-v6-c-button--hamburger-icon--arrow--path);
|
2318
|
+
}
|
2319
|
+
|
2320
|
+
.pf-v6-c-button--hamburger-icon--bottom {
|
2321
|
+
d: var(--pf-v6-c-button--hamburger-icon--bottom--path);
|
2322
|
+
}
|
2323
|
+
|
2215
2324
|
@keyframes pf-v6-c-button-icon-notify {
|
2216
2325
|
33% {
|
2217
2326
|
transform: rotate(30deg);
|
@@ -6474,7 +6583,7 @@ ul) {
|
|
6474
6583
|
--pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
|
6475
6584
|
--pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
|
6476
6585
|
--pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
|
6477
|
-
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
|
6586
|
+
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
|
6478
6587
|
--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
|
6479
6588
|
--pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
|
6480
6589
|
--pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
|
@@ -6493,7 +6602,7 @@ ul) {
|
|
6493
6602
|
gap: 0;
|
6494
6603
|
transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
|
6495
6604
|
transition-duration: 0s;
|
6496
|
-
transition-property: gap;
|
6605
|
+
transition-property: gap, padding-block-end;
|
6497
6606
|
}
|
6498
6607
|
.pf-v6-c-expandable-section.pf-m-expanded {
|
6499
6608
|
--pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
|
@@ -6503,7 +6612,6 @@ ul) {
|
|
6503
6612
|
--pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
|
6504
6613
|
--pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
|
6505
6614
|
--pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
|
6506
|
-
--pf-v6-c-expandable-section--m-display-lg--TransitionDelay: 0s;
|
6507
6615
|
--pf-v6-c-expandable-section__content--Visibility: auto;
|
6508
6616
|
--pf-v6-c-expandable-section__content--MaxHeight: 9999px;
|
6509
6617
|
--pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
|
@@ -6520,7 +6628,6 @@ ul) {
|
|
6520
6628
|
background-color: var(--pf-v6-c-expandable-section--m-display-lg--BackgroundColor);
|
6521
6629
|
border: var(--pf-v6-c-expandable-section--m-display-lg--BorderWidth) solid var(--pf-v6-c-expandable-section--m-display-lg--BorderColor);
|
6522
6630
|
border-radius: var(--pf-v6-c-expandable-section--m-display-lg--BorderRadius);
|
6523
|
-
transition: padding-block-end 0s var(--pf-v6-c-expandable-section--m-display-lg--TransitionDelay, 0s);
|
6524
6631
|
}
|
6525
6632
|
.pf-v6-c-expandable-section.pf-m-indented {
|
6526
6633
|
--pf-v6-c-expandable-section__content--PaddingInlineStart: var(--pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart);
|
@@ -6706,6 +6813,19 @@ ul) {
|
|
6706
6813
|
--pf-v6-c-form__field-group__field-group__field-group-body--GridColumn: 1 / 3;
|
6707
6814
|
--pf-v6-c-form__field-group__field-group__field-group-toggle--field-group-body--GridColumn: 2 / 3;
|
6708
6815
|
--pf-v6-c-form__field-group-body__field-group--last-child--MarginBlockEnd: calc(var(--pf-v6-c-form__field-group-body--PaddingBlockEnd) * -1);
|
6816
|
+
--pf-v6-c-form__field-group-body--TranslateY: 0;
|
6817
|
+
--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY: 0;
|
6818
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: 0s;
|
6819
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
|
6820
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: 0s;
|
6821
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
|
6822
|
+
}
|
6823
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
6824
|
+
.pf-v6-c-form {
|
6825
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
6826
|
+
--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
6827
|
+
--pf-v6-c-form__field-group-body--TranslateY: -.5rem;
|
6828
|
+
}
|
6709
6829
|
}
|
6710
6830
|
|
6711
6831
|
.pf-v6-c-form {
|
@@ -7062,6 +7182,16 @@ ul) {
|
|
7062
7182
|
.pf-v6-c-form__field-group.pf-m-expanded > .pf-v6-c-form__field-group-toggle {
|
7063
7183
|
--pf-v6-c-form__field-group-toggle-icon--Rotate: var(--pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate);
|
7064
7184
|
}
|
7185
|
+
.pf-v6-c-form__field-group.pf-m-expanded.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
7186
|
+
max-height: 9999px;
|
7187
|
+
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
7188
|
+
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
7189
|
+
visibility: visible;
|
7190
|
+
opacity: 1;
|
7191
|
+
transition-delay: 0s;
|
7192
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
|
7193
|
+
translate: 0 var(--pf-v6-c-form__field-group--m-expanded__field-group-body--TranslateY);
|
7194
|
+
}
|
7065
7195
|
|
7066
7196
|
.pf-v6-c-form__field-group-toggle {
|
7067
7197
|
grid-row: 1/2;
|
@@ -7128,9 +7258,17 @@ ul) {
|
|
7128
7258
|
display: grid;
|
7129
7259
|
grid-column: var(--pf-v6-c-form__field-group-body--GridColumn);
|
7130
7260
|
gap: var(--pf-v6-c-form__field-group-body--Gap);
|
7131
|
-
padding-block-start: var(--pf-v6-c-form__field-group-body--PaddingBlockStart);
|
7132
|
-
padding-block-end: var(--pf-v6-c-form__field-group-body--PaddingBlockEnd);
|
7133
7261
|
}
|
7262
|
+
.pf-v6-c-form__field-group.pf-m-expandable > .pf-v6-c-form__field-group-body {
|
7263
|
+
max-height: 0;
|
7264
|
+
visibility: hidden;
|
7265
|
+
opacity: 0;
|
7266
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade);
|
7267
|
+
transition-duration: var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--fade), var(--pf-v6-c-form__field-group-body--TransitionDuration--collapse--slide), 0s, 0s, 0s, 0s;
|
7268
|
+
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
|
7269
|
+
translate: 0 var(--pf-v6-c-form__field-group-body--TranslateY);
|
7270
|
+
}
|
7271
|
+
|
7134
7272
|
.pf-v6-c-form__field-group-body > .pf-v6-c-form__field-group:first-child {
|
7135
7273
|
--pf-v6-c-form__field-group-toggle--PaddingBlockStart: 0;
|
7136
7274
|
--pf-v6-c-form__field-group-header--PaddingBlockStart: 0;
|
@@ -9835,7 +9973,7 @@ ul.pf-v6-c-list {
|
|
9835
9973
|
--pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
|
9836
9974
|
--pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
|
9837
9975
|
--pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
|
9838
|
-
--pf-v6-c-menu--TransitionDuration:
|
9976
|
+
--pf-v6-c-menu--TransitionDuration: 0s;
|
9839
9977
|
--pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
|
9840
9978
|
--pf-v6-c-menu--m-plain--BoxShadow: none;
|
9841
9979
|
--pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
|
@@ -9908,14 +10046,34 @@ ul.pf-v6-c-list {
|
|
9908
10046
|
--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
|
9909
10047
|
--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
|
9910
10048
|
--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
|
9911
|
-
--pf-v6-c-menu--m-drilldown__content--Transition:
|
10049
|
+
--pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
|
9912
10050
|
--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
|
9913
|
-
--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform:
|
10051
|
+
--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
|
9914
10052
|
--pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
|
9915
|
-
--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform:
|
10053
|
+
--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
|
9916
10054
|
--pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
|
9917
10055
|
--pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
|
9918
10056
|
}
|
10057
|
+
@media (prefers-reduced-motion: no-preference) {
|
10058
|
+
.pf-v6-c-menu {
|
10059
|
+
--pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
|
10060
|
+
}
|
10061
|
+
}
|
10062
|
+
@media (prefers-reduced-motion: no-preference) {
|
10063
|
+
.pf-v6-c-menu {
|
10064
|
+
--pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
|
10065
|
+
}
|
10066
|
+
}
|
10067
|
+
@media (prefers-reduced-motion: no-preference) {
|
10068
|
+
.pf-v6-c-menu {
|
10069
|
+
--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
|
10070
|
+
}
|
10071
|
+
}
|
10072
|
+
@media (prefers-reduced-motion: no-preference) {
|
10073
|
+
.pf-v6-c-menu {
|
10074
|
+
--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
|
10075
|
+
}
|
10076
|
+
}
|
9919
10077
|
|
9920
10078
|
.pf-v6-c-menu__content,
|
9921
10079
|
.pf-v6-c-menu__list-item,
|
@@ -10449,6 +10607,14 @@ ul.pf-v6-c-list {
|
|
10449
10607
|
--pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
|
10450
10608
|
--pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
10451
10609
|
--pf-v6-c-menu-toggle__icon--Color: var(--pf-t--global--icon--color--regular);
|
10610
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: 0s;
|
10611
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: 0s;
|
10612
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: none;
|
10613
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDelay: 0s;
|
10614
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: 0s;
|
10615
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: none;
|
10616
|
+
--pf-v6-c-menu-toggle__icon--Rotate: 0deg;
|
10617
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: 0deg;
|
10452
10618
|
--pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight));
|
10453
10619
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
|
10454
10620
|
--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
|
@@ -10546,6 +10712,11 @@ ul.pf-v6-c-list {
|
|
10546
10712
|
--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
|
10547
10713
|
--pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
|
10548
10714
|
--pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
|
10715
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
10716
|
+
--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
|
10717
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
|
10718
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
|
10719
|
+
--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate: 60deg;
|
10549
10720
|
}
|
10550
10721
|
|
10551
10722
|
.pf-v6-c-menu-toggle {
|
@@ -10659,6 +10830,10 @@ ul.pf-v6-c-list {
|
|
10659
10830
|
--pf-v6-c-menu-toggle--BorderWidth: var(--pf-v6-c-menu-toggle--hover--BorderWidth);
|
10660
10831
|
--pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--hover--BorderColor);
|
10661
10832
|
--pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--hover__toggle-icon--Color);
|
10833
|
+
--pf-v6-c-menu-toggle__icon--TransitionDelay: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDelay);
|
10834
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--hover__icon--TransitionDuration);
|
10835
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: var(--pf-v6-c-menu-toggle--hover__icon--TransitionProperty);
|
10836
|
+
--pf-v6-c-menu-toggle__icon--Rotate: var(--pf-v6-c-menu-toggle--hover__icon--Rotate);
|
10662
10837
|
}
|
10663
10838
|
.pf-v6-c-menu-toggle:is(.pf-m-expanded, [aria-expanded=true]) {
|
10664
10839
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--expanded--Color);
|
@@ -10714,6 +10889,15 @@ ul.pf-v6-c-list {
|
|
10714
10889
|
opacity: 1;
|
10715
10890
|
}
|
10716
10891
|
}
|
10892
|
+
.pf-v6-c-menu-toggle.pf-m-settings {
|
10893
|
+
--pf-v6-c-menu-toggle__icon--TransitionProperty: rotate;
|
10894
|
+
--pf-v6-c-menu-toggle__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionDuration);
|
10895
|
+
--pf-v6-c-menu-toggle__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings__icon--TransitionTimingFunction);
|
10896
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionProperty: rotate;
|
10897
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionDuration: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionDuration);
|
10898
|
+
--pf-v6-c-menu-toggle--hover__icon--TransitionTimingFunction: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--TransitionTimingFunction);
|
10899
|
+
--pf-v6-c-menu-toggle--hover__icon--Rotate: var(--pf-v6-c-menu-toggle--m-settings--hover__icon--Rotate);
|
10900
|
+
}
|
10717
10901
|
.pf-v6-c-menu-toggle.pf-m-placeholder {
|
10718
10902
|
--pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
|
10719
10903
|
}
|
@@ -10875,6 +11059,10 @@ ul.pf-v6-c-list {
|
|
10875
11059
|
|
10876
11060
|
.pf-v6-c-menu-toggle__icon {
|
10877
11061
|
flex-shrink: 0;
|
11062
|
+
transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
|
11063
|
+
transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
|
11064
|
+
transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
|
11065
|
+
rotate: var(--pf-v6-c-menu-toggle__icon--Rotate);
|
10878
11066
|
}
|
10879
11067
|
.pf-v6-c-menu-toggle__icon :where(picture, img) {
|
10880
11068
|
vertical-align: middle;
|
@@ -11366,9 +11554,13 @@ ul.pf-v6-c-list {
|
|
11366
11554
|
--pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
|
11367
11555
|
--pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
|
11368
11556
|
--pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
11369
|
-
--pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--
|
11370
|
-
--pf-v6-c-nav__subnav--TransitionDuration--
|
11557
|
+
--pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-t--global--motion--duration--fade--default);
|
11558
|
+
--pf-v6-c-nav__subnav--TransitionDuration--expand--slide: 0s;
|
11559
|
+
--pf-v6-c-nav__subnav--TransitionDuration--collapse: var(--pf-t--global--motion--duration--fade--short);
|
11560
|
+
--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: 0s;
|
11371
11561
|
--pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
|
11562
|
+
--pf-v6-c-nav__subnav--TranslateY: 0;
|
11563
|
+
--pf-v6-c-nav__subnav--hidden--TranslateY: 0;
|
11372
11564
|
--pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
|
11373
11565
|
--pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
|
11374
11566
|
--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
|
@@ -11397,6 +11589,13 @@ ul.pf-v6-c-list {
|
|
11397
11589
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
|
11398
11590
|
--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
|
11399
11591
|
}
|
11592
|
+
@media screen and (prefers-reduced-motion: no-preference) {
|
11593
|
+
.pf-v6-c-nav {
|
11594
|
+
--pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
|
11595
|
+
--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
|
11596
|
+
--pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
|
11597
|
+
}
|
11598
|
+
}
|
11400
11599
|
|
11401
11600
|
.pf-v6-c-nav,
|
11402
11601
|
.pf-v6-c-nav__section,
|
@@ -11467,24 +11666,27 @@ ul.pf-v6-c-list {
|
|
11467
11666
|
|
11468
11667
|
.pf-v6-c-nav__subnav {
|
11469
11668
|
--pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
|
11470
|
-
|
11471
|
-
min-height: 0;
|
11669
|
+
max-height: 9999px;
|
11472
11670
|
padding-block-start: var(--pf-v6-c-nav__subnav--PaddingBlockStart);
|
11473
11671
|
padding-block-end: var(--pf-v6-c-nav__subnav--PaddingBlockEnd);
|
11474
11672
|
padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
|
11475
11673
|
overflow-y: clip;
|
11476
|
-
|
11674
|
+
visibility: visible;
|
11675
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s), var(--pf-v6-c-nav__subnav--TransitionDelay--expand--focus, 0s);
|
11477
11676
|
transition-timing-function: var(--pf-v6-c-nav__subnav--TransitionTimingFunction--expand);
|
11478
|
-
transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), 0s, 0s, 0s, 0s;
|
11479
|
-
transition-property: opacity, visibility,
|
11677
|
+
transition-duration: var(--pf-v6-c-nav__subnav--TransitionDuration--expand), var(--pf-v6-c-nav__subnav--TransitionDuration--expand--slide), 0s, 0s, 0s, 0s;
|
11678
|
+
transition-property: opacity, translate, visibility, max-height, padding-block-start, padding-block-end;
|
11679
|
+
translate: 0 var(--pf-v6-c-nav__subnav--TranslateY);
|
11480
11680
|
}
|
11481
11681
|
.pf-v6-c-nav__subnav[hidden] {
|
11482
11682
|
--pf-v6-c-nav__subnav--TransitionDelay--expand--focus: var(--pf-v6-c-nav__subnav--TransitionDuration--expand);
|
11483
11683
|
--pf-v6-c-nav__subnav--TransitionDuration--expand: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse);
|
11684
|
+
--pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-v6-c-nav__subnav--TransitionDuration--collapse--slide);
|
11484
11685
|
--pf-v6-c-nav__subnav--PaddingBlockStart: 0;
|
11485
11686
|
--pf-v6-c-nav__subnav--PaddingBlockEnd: 0;
|
11687
|
+
--pf-v6-c-nav__subnav--TranslateY: var(--pf-v6-c-nav__subnav--hidden--TranslateY);
|
11486
11688
|
display: grid;
|
11487
|
-
|
11689
|
+
max-height: 0;
|
11488
11690
|
visibility: hidden;
|
11489
11691
|
opacity: 0;
|
11490
11692
|
}
|
@@ -12077,6 +12279,51 @@ ul.pf-v6-c-list {
|
|
12077
12279
|
grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
|
12078
12280
|
}
|
12079
12281
|
}
|
12282
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
12283
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
12284
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
12285
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
12286
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
12287
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
12288
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
12289
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
12290
|
+
}
|
12291
|
+
.pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
|
12292
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
12293
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
12294
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
12295
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
12296
|
+
--pf-v6-c-button__icon--Scale: 1;
|
12297
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
12298
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
12299
|
+
}
|
12300
|
+
@media (min-width: 75rem) {
|
12301
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
|
12302
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
12303
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
12304
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
12305
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
12306
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
12307
|
+
}
|
12308
|
+
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
12309
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
12310
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
12311
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
12312
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
12313
|
+
--pf-v6-c-button__icon--Scale: 1;
|
12314
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
12315
|
+
--pf-v6-c-button--hover__icon--Scale: 1;
|
12316
|
+
}
|
12317
|
+
.pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
12318
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
12319
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
12320
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
12321
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
12322
|
+
--pf-v6-c-button__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
12323
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
12324
|
+
--pf-v6-c-button--hover__icon--Scale: var(--pf-v6-c-button--m-hamburger__icon--m-expand--Scale);
|
12325
|
+
}
|
12326
|
+
}
|
12080
12327
|
|
12081
12328
|
.pf-v6-c-page > .pf-v6-c-masthead {
|
12082
12329
|
z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
|
@@ -22432,10 +22679,13 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
22432
22679
|
}
|
22433
22680
|
|
22434
22681
|
.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
|
22682
|
+
max-height: 0;
|
22683
|
+
visibility: hidden;
|
22435
22684
|
opacity: var(--pf-v6-c-tree-view__list--Opacity);
|
22685
|
+
transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
|
22436
22686
|
transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
|
22437
|
-
transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide);
|
22438
|
-
transition-property: opacity, translate;
|
22687
|
+
transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
|
22688
|
+
transition-property: opacity, translate, visibility, max-height;
|
22439
22689
|
translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
|
22440
22690
|
}
|
22441
22691
|
.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
|
@@ -22447,8 +22697,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
|
|
22447
22697
|
--pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
|
22448
22698
|
}
|
22449
22699
|
.pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
|
22700
|
+
max-height: 9999px;
|
22701
|
+
visibility: revert;
|
22450
22702
|
opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
|
22451
|
-
transition-
|
22703
|
+
transition-delay: 0s;
|
22704
|
+
transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
|
22452
22705
|
translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
|
22453
22706
|
}
|
22454
22707
|
|
@@ -45,6 +45,11 @@ declare const _default: {
|
|
45
45
|
"breadcrumbList": "pf-v6-c-breadcrumb__list",
|
46
46
|
"button": "pf-v6-c-button",
|
47
47
|
"buttonCount": "pf-v6-c-button__count",
|
48
|
+
"buttonHamburgerIcon": "pf-v6-c-button--hamburger-icon",
|
49
|
+
"buttonHamburgerIconArrow": "pf-v6-c-button--hamburger-icon--arrow",
|
50
|
+
"buttonHamburgerIconBottom": "pf-v6-c-button--hamburger-icon--bottom",
|
51
|
+
"buttonHamburgerIconMiddle": "pf-v6-c-button--hamburger-icon--middle",
|
52
|
+
"buttonHamburgerIconTop": "pf-v6-c-button--hamburger-icon--top",
|
48
53
|
"buttonIcon": "pf-v6-c-button__icon",
|
49
54
|
"buttonIconFavorite": "pf-v6-c-button__icon-favorite",
|
50
55
|
"buttonIconFavorited": "pf-v6-c-button__icon-favorited",
|
@@ -395,6 +400,10 @@ declare const _default: {
|
|
395
400
|
"small": "pf-m-small",
|
396
401
|
"favorite": "pf-m-favorite",
|
397
402
|
"favorited": "pf-m-favorited",
|
403
|
+
"settings": "pf-m-settings",
|
404
|
+
"hamburger": "pf-m-hamburger",
|
405
|
+
"expand": "pf-m-expand",
|
406
|
+
"collapse": "pf-m-collapse",
|
398
407
|
"clicked": "pf-m-clicked",
|
399
408
|
"ariaDisabled": "pf-m-aria-disabled",
|
400
409
|
"progress": "pf-m-progress",
|