@patternfly/patternfly 6.5.0-prerelease.72 → 6.5.0-prerelease.74
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/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
- package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
- package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
- package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
- package/components/Drawer/drawer.css +4 -2
- package/components/Drawer/drawer.scss +4 -2
- package/components/Masthead/masthead.css +0 -1
- package/components/Masthead/masthead.scss +0 -1
- package/components/Page/page.css +47 -2
- package/components/Page/page.scss +34 -2
- package/components/_index.css +51 -5
- package/docs/components/Drawer/examples/Drawer.md +60 -0
- package/docs/demos/Compass/examples/Compass.md +5 -35
- package/package.json +1 -1
- package/patternfly-no-globals.css +78 -9
- package/patternfly.css +78 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/patternfly.scss +37 -8
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<svg width="1851" height="1196" viewBox="0 0 1851 1196" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_19351_19495)">
|
|
3
|
+
<rect width="1851" height="1196" fill="url(#paint0_linear_19351_19495)"/>
|
|
4
|
+
<g filter="url(#filter0_f_19351_19495)">
|
|
5
|
+
<path d="M1163.49 1254.14C1228.08 1267.49 1284.81 1209.64 1270.02 1145.54L1179.69 754.201C1151.53 637.917 1126.8 585.164 922.129 483.089C802.593 422.119 577.042 331.269 429.138 290.056C368.273 273.092 305.704 311.009 292.312 372.611L170.598 932.415C157.251 993.813 196.663 1054.29 258.337 1067.03L1163.49 1254.15V1254.14Z" fill="url(#paint1_linear_19351_19495)"/>
|
|
6
|
+
</g>
|
|
7
|
+
<path d="M1163.49 1254.14C1228.08 1267.49 1284.81 1209.64 1270.02 1145.54L1179.69 754.201C1151.53 637.917 1126.8 585.164 922.129 483.089C802.593 422.119 577.042 331.269 429.138 290.056C368.273 273.092 305.704 311.009 292.312 372.611L170.598 932.415C157.251 993.813 196.663 1054.29 258.337 1067.03L1163.49 1254.15V1254.14Z" fill="url(#paint2_linear_19351_19495)"/>
|
|
8
|
+
<g filter="url(#filter1_f_19351_19495)">
|
|
9
|
+
<path d="M1695.48 616.017C1827.61 651.42 2026.25 675.359 2068.34 518.276C2071.63 506.017 2074.47 493.995 2074.74 481.25L2087.61 118.401C2089.5 38.3884 2091.43 -10.7997 1968.31 -101.454C1684.68 -310.293 1342.14 -417.868 1266.6 -416.348C1200.6 -415.017 1150.23 -401.177 1094.55 -320.922C1094.55 -320.922 938.608 -94.3084 917.466 -60.9637C913.35 -54.7362 911.235 -47.0681 909.631 -41.0791C883.553 56.2453 1181.49 478.295 1695.49 616.019" fill="url(#paint3_linear_19351_19495)"/>
|
|
10
|
+
</g>
|
|
11
|
+
<path d="M1695.48 616.017C1827.61 651.42 2026.25 675.359 2068.34 518.276C2071.63 506.017 2074.47 493.995 2074.74 481.25L2087.61 118.401C2089.5 38.3883 2091.43 -10.7998 1968.31 -101.454C1684.68 -310.293 1342.14 -417.868 1266.6 -416.348C1200.6 -415.017 1150.23 -401.177 1094.55 -320.922C1094.55 -320.922 938.608 -94.3084 917.466 -60.9637C913.35 -54.7362 911.235 -47.0681 909.631 -41.0791C883.553 56.2453 1181.49 478.295 1695.49 616.019" fill="url(#paint4_linear_19351_19495)"/>
|
|
12
|
+
<g filter="url(#filter2_f_19351_19495)">
|
|
13
|
+
<path d="M1018.65 1252.4L899.777 808.935C883.342 747.626 919.732 684.535 980.992 668.127L1981.4 400.183C2165.17 350.962 2354.4 460.323 2403.7 644.243L2522.58 1087.71C2539.02 1149.02 2502.63 1212.11 2441.37 1228.52L1440.96 1496.46C1257.19 1545.68 1067.96 1436.32 1018.65 1252.4Z" fill="url(#paint5_linear_19351_19495)"/>
|
|
14
|
+
</g>
|
|
15
|
+
<path d="M1018.65 1252.4L899.777 808.935C883.342 747.626 919.732 684.535 980.992 668.127L1981.4 400.183C2165.17 350.962 2354.4 460.323 2403.7 644.243L2522.58 1087.71C2539.02 1149.02 2502.63 1212.11 2441.37 1228.52L1440.96 1496.46C1257.19 1545.68 1067.96 1436.32 1018.65 1252.4Z" fill="url(#paint6_linear_19351_19495)"/>
|
|
16
|
+
<g filter="url(#filter3_f_19351_19495)">
|
|
17
|
+
<path d="M782.287 -59.764C421.09 -246.933 -158.166 -246.234 -258.019 -53.8873C-271.175 -28.5469 -275.733 -4.57652 -273.796 18.0103C-267.733 233.992 242.437 497.887 646.906 497.887C936.866 497.887 1025.27 376.095 1036.3 269.541C1048.45 174.177 997.623 51.8132 782.287 -59.7708V-59.764Z" fill="url(#paint7_linear_19351_19495)"/>
|
|
18
|
+
</g>
|
|
19
|
+
<path d="M782.287 -59.764C421.09 -246.933 -158.166 -246.234 -258.019 -53.8873C-271.175 -28.5469 -275.733 -4.57652 -273.796 18.0103C-267.733 233.992 242.437 497.887 646.906 497.887C936.867 497.887 1025.27 376.095 1036.3 269.541C1048.45 174.177 997.623 51.8132 782.287 -59.7708V-59.764Z" fill="url(#paint8_linear_19351_19495)"/>
|
|
20
|
+
</g>
|
|
21
|
+
<defs>
|
|
22
|
+
<filter id="filter0_f_19351_19495" x="68" y="186" width="1304.39" height="1170.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
23
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
24
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
25
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19495"/>
|
|
26
|
+
</filter>
|
|
27
|
+
<filter id="filter1_f_19351_19495" x="808.051" y="-516.364" width="1380.03" height="1258.52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
28
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
29
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
30
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19495"/>
|
|
31
|
+
</filter>
|
|
32
|
+
<filter id="filter2_f_19351_19495" x="795.828" y="288.39" width="1830.7" height="1319.86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
33
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
34
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
35
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19495"/>
|
|
36
|
+
</filter>
|
|
37
|
+
<filter id="filter3_f_19351_19495" x="-374.223" y="-299.155" width="1512.2" height="897.042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
38
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
39
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
40
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19495"/>
|
|
41
|
+
</filter>
|
|
42
|
+
<linearGradient id="paint0_linear_19351_19495" x1="-755.182" y1="-589.97" x2="1132.51" y2="1298.52" gradientUnits="userSpaceOnUse">
|
|
43
|
+
<stop stop-color="#1B0D33"/>
|
|
44
|
+
<stop offset="1"/>
|
|
45
|
+
</linearGradient>
|
|
46
|
+
<linearGradient id="paint1_linear_19351_19495" x1="-309.347" y1="-279.398" x2="1466.54" y2="660.337" gradientUnits="userSpaceOnUse">
|
|
47
|
+
<stop stop-color="#1B0D33"/>
|
|
48
|
+
<stop offset="1"/>
|
|
49
|
+
</linearGradient>
|
|
50
|
+
<linearGradient id="paint2_linear_19351_19495" x1="-128.5" y1="644" x2="1223.59" y2="790.065" gradientUnits="userSpaceOnUse">
|
|
51
|
+
<stop stop-color="#1B0D33"/>
|
|
52
|
+
<stop offset="1"/>
|
|
53
|
+
</linearGradient>
|
|
54
|
+
<linearGradient id="paint3_linear_19351_19495" x1="2077.44" y1="-968.83" x2="949.169" y2="1496.83" gradientUnits="userSpaceOnUse">
|
|
55
|
+
<stop stop-color="#1B0D33"/>
|
|
56
|
+
<stop offset="1"/>
|
|
57
|
+
</linearGradient>
|
|
58
|
+
<linearGradient id="paint4_linear_19351_19495" x1="1828" y1="-334.5" x2="876.979" y2="1498.01" gradientUnits="userSpaceOnUse">
|
|
59
|
+
<stop stop-color="#1B0D33"/>
|
|
60
|
+
<stop offset="1"/>
|
|
61
|
+
</linearGradient>
|
|
62
|
+
<linearGradient id="paint5_linear_19351_19495" x1="755.202" y1="451.746" x2="1960.69" y2="1480.58" gradientUnits="userSpaceOnUse">
|
|
63
|
+
<stop stop-color="#1B0D33"/>
|
|
64
|
+
<stop offset="1"/>
|
|
65
|
+
</linearGradient>
|
|
66
|
+
<linearGradient id="paint6_linear_19351_19495" x1="870" y1="572.5" x2="1966.72" y2="1475.37" gradientUnits="userSpaceOnUse">
|
|
67
|
+
<stop stop-color="#1B0D33"/>
|
|
68
|
+
<stop offset="1"/>
|
|
69
|
+
</linearGradient>
|
|
70
|
+
<linearGradient id="paint7_linear_19351_19495" x1="692.977" y1="483.708" x2="308.23" y2="-78.5936" gradientUnits="userSpaceOnUse">
|
|
71
|
+
<stop stop-color="#1B0D33"/>
|
|
72
|
+
<stop offset="1"/>
|
|
73
|
+
</linearGradient>
|
|
74
|
+
<linearGradient id="paint8_linear_19351_19495" x1="957.5" y1="429.373" x2="-60.5206" y2="-444.022" gradientUnits="userSpaceOnUse">
|
|
75
|
+
<stop stop-color="#1B0D33"/>
|
|
76
|
+
<stop offset="1"/>
|
|
77
|
+
</linearGradient>
|
|
78
|
+
<clipPath id="clip0_19351_19495">
|
|
79
|
+
<rect width="1851" height="1196" fill="white"/>
|
|
80
|
+
</clipPath>
|
|
81
|
+
</defs>
|
|
82
|
+
</svg>
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
<svg width="1851" height="1196" viewBox="0 0 1851 1196" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_19351_19504)">
|
|
3
|
+
<rect width="1851" height="1196" fill="url(#paint0_linear_19351_19504)"/>
|
|
4
|
+
<g opacity="0.5" filter="url(#filter0_f_19351_19504)">
|
|
5
|
+
<path d="M1163.49 1254.14C1228.08 1267.49 1284.81 1209.64 1270.02 1145.54L1179.69 754.201C1151.53 637.917 1126.8 585.164 922.129 483.089C802.593 422.119 577.042 331.269 429.138 290.056C368.273 273.092 305.704 311.009 292.312 372.611L170.598 932.415C157.251 993.813 196.663 1054.29 258.337 1067.03L1163.49 1254.15V1254.14Z" fill="url(#paint1_linear_19351_19504)"/>
|
|
6
|
+
</g>
|
|
7
|
+
<path d="M1163.49 1254.14C1228.08 1267.49 1284.81 1209.64 1270.02 1145.54L1179.69 754.201C1151.53 637.917 1126.8 585.164 922.129 483.089C802.593 422.119 577.042 331.269 429.138 290.056C368.273 273.092 305.704 311.009 292.312 372.611L170.598 932.415C157.251 993.813 196.663 1054.29 258.337 1067.03L1163.49 1254.15V1254.14Z" fill="url(#paint2_linear_19351_19504)"/>
|
|
8
|
+
<g filter="url(#filter1_f_19351_19504)">
|
|
9
|
+
<path d="M1695.48 616.017C1827.61 651.42 2026.25 675.359 2068.34 518.276C2071.63 506.017 2074.47 493.995 2074.74 481.25L2087.61 118.401C2089.5 38.3884 2091.43 -10.7997 1968.31 -101.454C1684.68 -310.293 1342.14 -417.868 1266.6 -416.348C1200.6 -415.017 1150.23 -401.177 1094.55 -320.922C1094.55 -320.922 938.608 -94.3084 917.466 -60.9637C913.35 -54.7362 911.235 -47.0681 909.631 -41.0791C883.553 56.2453 1181.49 478.295 1695.49 616.019" fill="url(#paint3_linear_19351_19504)"/>
|
|
10
|
+
</g>
|
|
11
|
+
<path d="M1695.48 616.017C1827.61 651.42 2026.25 675.359 2068.34 518.276C2071.63 506.017 2074.47 493.995 2074.74 481.25L2087.61 118.401C2089.5 38.3883 2091.43 -10.7998 1968.31 -101.454C1684.68 -310.293 1342.14 -417.868 1266.6 -416.348C1200.6 -415.017 1150.23 -401.177 1094.55 -320.922C1094.55 -320.922 938.608 -94.3084 917.466 -60.9637C913.35 -54.7362 911.235 -47.0681 909.631 -41.0791C883.553 56.2453 1181.49 478.295 1695.49 616.019" fill="url(#paint4_linear_19351_19504)"/>
|
|
12
|
+
<g filter="url(#filter2_f_19351_19504)">
|
|
13
|
+
<path d="M1018.65 1252.4L899.777 808.935C883.342 747.626 919.732 684.535 980.992 668.127L1981.4 400.183C2165.17 350.962 2354.4 460.323 2403.7 644.243L2522.58 1087.71C2539.02 1149.02 2502.63 1212.11 2441.37 1228.52L1440.96 1496.46C1257.19 1545.68 1067.96 1436.32 1018.65 1252.4Z" fill="url(#paint5_linear_19351_19504)"/>
|
|
14
|
+
</g>
|
|
15
|
+
<path d="M1018.65 1252.4L899.777 808.935C883.342 747.626 919.732 684.535 980.992 668.127L1981.4 400.183C2165.17 350.962 2354.4 460.323 2403.7 644.243L2522.58 1087.71C2539.02 1149.02 2502.63 1212.11 2441.37 1228.52L1440.96 1496.46C1257.19 1545.68 1067.96 1436.32 1018.65 1252.4Z" fill="url(#paint6_linear_19351_19504)"/>
|
|
16
|
+
<g filter="url(#filter3_f_19351_19504)">
|
|
17
|
+
<path d="M782.287 -59.764C421.09 -246.933 -158.166 -246.234 -258.019 -53.8873C-271.175 -28.5469 -275.733 -4.57652 -273.796 18.0103C-267.733 233.992 242.437 497.887 646.906 497.887C936.866 497.887 1025.27 376.095 1036.3 269.541C1048.45 174.177 997.623 51.8132 782.287 -59.7708V-59.764Z" fill="url(#paint7_linear_19351_19504)"/>
|
|
18
|
+
</g>
|
|
19
|
+
<path opacity="0.5" d="M782.287 -59.764C421.09 -246.933 -158.166 -246.234 -258.019 -53.8873C-271.175 -28.5469 -275.733 -4.57652 -273.796 18.0103C-267.733 233.992 242.437 497.887 646.906 497.887C936.866 497.887 1025.27 376.095 1036.3 269.541C1048.45 174.177 997.623 51.8132 782.287 -59.7708V-59.764Z" fill="url(#paint8_linear_19351_19504)"/>
|
|
20
|
+
</g>
|
|
21
|
+
<defs>
|
|
22
|
+
<filter id="filter0_f_19351_19504" x="68" y="186" width="1304.39" height="1170.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
23
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
24
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
25
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19504"/>
|
|
26
|
+
</filter>
|
|
27
|
+
<filter id="filter1_f_19351_19504" x="808.051" y="-516.364" width="1380.03" height="1258.52" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
28
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
29
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
30
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19504"/>
|
|
31
|
+
</filter>
|
|
32
|
+
<filter id="filter2_f_19351_19504" x="795.828" y="288.39" width="1830.7" height="1319.86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
33
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
34
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
35
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19504"/>
|
|
36
|
+
</filter>
|
|
37
|
+
<filter id="filter3_f_19351_19504" x="-374.223" y="-299.155" width="1512.2" height="897.042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
38
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
39
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
40
|
+
<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_19351_19504"/>
|
|
41
|
+
</filter>
|
|
42
|
+
<linearGradient id="paint0_linear_19351_19504" x1="-755.182" y1="-589.97" x2="1214.13" y2="2824.34" gradientUnits="userSpaceOnUse">
|
|
43
|
+
<stop stop-color="#F2F2F2"/>
|
|
44
|
+
<stop offset="1" stop-color="#C7C7C7"/>
|
|
45
|
+
</linearGradient>
|
|
46
|
+
<linearGradient id="paint1_linear_19351_19504" x1="-309.347" y1="-279.398" x2="1466.54" y2="660.337" gradientUnits="userSpaceOnUse">
|
|
47
|
+
<stop stop-color="white"/>
|
|
48
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
49
|
+
</linearGradient>
|
|
50
|
+
<linearGradient id="paint2_linear_19351_19504" x1="-108.5" y1="-30.0001" x2="1413.95" y2="737.918" gradientUnits="userSpaceOnUse">
|
|
51
|
+
<stop stop-color="white"/>
|
|
52
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
53
|
+
</linearGradient>
|
|
54
|
+
<linearGradient id="paint3_linear_19351_19504" x1="2077.44" y1="-968.83" x2="949.169" y2="1496.83" gradientUnits="userSpaceOnUse">
|
|
55
|
+
<stop stop-color="white"/>
|
|
56
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
57
|
+
</linearGradient>
|
|
58
|
+
<linearGradient id="paint4_linear_19351_19504" x1="1800.5" y1="-441.5" x2="901.694" y2="1476.92" gradientUnits="userSpaceOnUse">
|
|
59
|
+
<stop stop-color="white"/>
|
|
60
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
61
|
+
</linearGradient>
|
|
62
|
+
<linearGradient id="paint5_linear_19351_19504" x1="755.202" y1="451.746" x2="1960.69" y2="1480.58" gradientUnits="userSpaceOnUse">
|
|
63
|
+
<stop stop-color="#F2F2F2"/>
|
|
64
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
65
|
+
</linearGradient>
|
|
66
|
+
<linearGradient id="paint6_linear_19351_19504" x1="755.202" y1="451.746" x2="1960.69" y2="1480.58" gradientUnits="userSpaceOnUse">
|
|
67
|
+
<stop stop-color="white"/>
|
|
68
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
69
|
+
</linearGradient>
|
|
70
|
+
<linearGradient id="paint7_linear_19351_19504" x1="692.977" y1="483.708" x2="308.23" y2="-78.5936" gradientUnits="userSpaceOnUse">
|
|
71
|
+
<stop stop-color="#F2F2F2"/>
|
|
72
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
73
|
+
</linearGradient>
|
|
74
|
+
<linearGradient id="paint8_linear_19351_19504" x1="957.5" y1="429.373" x2="-60.5206" y2="-444.022" gradientUnits="userSpaceOnUse">
|
|
75
|
+
<stop stop-color="white"/>
|
|
76
|
+
<stop offset="1" stop-color="#E0E0E0"/>
|
|
77
|
+
</linearGradient>
|
|
78
|
+
<clipPath id="clip0_19351_19504">
|
|
79
|
+
<rect width="1851" height="1196" fill="white"/>
|
|
80
|
+
</clipPath>
|
|
81
|
+
</defs>
|
|
82
|
+
</svg>
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
<svg width="1851" height="1196" viewBox="0 0 1851 1196" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_19356_19698)">
|
|
3
|
+
<rect width="1851" height="1196" fill="url(#paint0_linear_19356_19698)"/>
|
|
4
|
+
<g style="mix-blend-mode:difference">
|
|
5
|
+
<g filter="url(#filter0_f_19356_19698)">
|
|
6
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1102.43 904.428L749.184 292.595L137.351 645.837L175.198 711.39C349.386 1013.09 735.17 1116.46 1036.87 942.275L1102.43 904.428Z" fill="url(#paint1_linear_19356_19698)"/>
|
|
7
|
+
</g>
|
|
8
|
+
<g filter="url(#filter1_f_19356_19698)">
|
|
9
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M844.186 1868.49L1456.02 1515.25L1102.78 903.416L1037.22 941.264C735.521 1115.45 632.151 1501.24 806.338 1802.94L844.186 1868.49Z" fill="url(#paint2_linear_19356_19698)"/>
|
|
10
|
+
</g>
|
|
11
|
+
<g opacity="0.8" filter="url(#filter2_f_19356_19698)">
|
|
12
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1714.19 550.415L1102.36 903.656L1455.6 1515.49L1521.16 1477.64C1822.86 1303.45 1926.23 917.67 1752.04 615.968L1714.19 550.415Z" fill="url(#paint3_linear_19356_19698)"/>
|
|
13
|
+
</g>
|
|
14
|
+
<g opacity="0.8" filter="url(#filter3_f_19356_19698)">
|
|
15
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M749.355 292.244L1102.6 904.077L1714.43 550.835L1676.58 485.282C1502.4 183.58 1116.61 80.2092 814.909 254.397L749.355 292.244Z" fill="url(#paint4_linear_19356_19698)"/>
|
|
16
|
+
</g>
|
|
17
|
+
<g filter="url(#filter4_f_19356_19698)">
|
|
18
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M396.775 -319.413L750.017 292.42L138.184 645.662L100.337 580.109C-73.8506 278.407 29.5201 -107.378 331.222 -281.565L396.775 -319.413Z" fill="url(#paint5_linear_19356_19698)"/>
|
|
19
|
+
</g>
|
|
20
|
+
</g>
|
|
21
|
+
</g>
|
|
22
|
+
<defs>
|
|
23
|
+
<filter id="filter0_f_19356_19698" x="87.3516" y="242.595" width="1065.07" height="834.295" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
24
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
25
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
26
|
+
<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_19356_19698"/>
|
|
27
|
+
</filter>
|
|
28
|
+
<filter id="filter1_f_19356_19698" x="671.723" y="853.417" width="834.295" height="1065.07" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
29
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
30
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
31
|
+
<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_19356_19698"/>
|
|
32
|
+
</filter>
|
|
33
|
+
<filter id="filter2_f_19356_19698" x="1052.36" y="500.415" width="834.297" height="1065.07" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
34
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
35
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
36
|
+
<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_19356_19698"/>
|
|
37
|
+
</filter>
|
|
38
|
+
<filter id="filter3_f_19356_19698" x="699.355" y="119.782" width="1065.07" height="834.295" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
39
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
40
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
41
|
+
<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_19356_19698"/>
|
|
42
|
+
</filter>
|
|
43
|
+
<filter id="filter4_f_19356_19698" x="-34.2773" y="-369.413" width="834.295" height="1065.07" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
44
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
45
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
46
|
+
<feGaussianBlur stdDeviation="25" result="effect1_foregroundBlur_19356_19698"/>
|
|
47
|
+
</filter>
|
|
48
|
+
<linearGradient id="paint0_linear_19356_19698" x1="-987" y1="-1903.5" x2="1298.49" y2="1588.73" gradientUnits="userSpaceOnUse">
|
|
49
|
+
<stop stop-color="#151515"/>
|
|
50
|
+
<stop offset="1"/>
|
|
51
|
+
</linearGradient>
|
|
52
|
+
<linearGradient id="paint1_linear_19356_19698" x1="893.4" y1="1163.5" x2="743.275" y2="181.956" gradientUnits="userSpaceOnUse">
|
|
53
|
+
<stop stop-color="#032142"/>
|
|
54
|
+
<stop offset="1"/>
|
|
55
|
+
</linearGradient>
|
|
56
|
+
<linearGradient id="paint2_linear_19356_19698" x1="181.267" y1="1315.57" x2="1969.33" y2="1513.1" gradientUnits="userSpaceOnUse">
|
|
57
|
+
<stop/>
|
|
58
|
+
<stop offset="1" stop-color="#032142"/>
|
|
59
|
+
</linearGradient>
|
|
60
|
+
<linearGradient id="paint3_linear_19356_19698" x1="777.286" y1="915.285" x2="2323.4" y2="1237.44" gradientUnits="userSpaceOnUse">
|
|
61
|
+
<stop/>
|
|
62
|
+
<stop offset="1" stop-color="#032142"/>
|
|
63
|
+
</linearGradient>
|
|
64
|
+
<linearGradient id="paint4_linear_19356_19698" x1="1045.59" y1="973" x2="1170.3" y2="-155.867" gradientUnits="userSpaceOnUse">
|
|
65
|
+
<stop/>
|
|
66
|
+
<stop offset="1" stop-color="#032142"/>
|
|
67
|
+
</linearGradient>
|
|
68
|
+
<linearGradient id="paint5_linear_19356_19698" x1="911.549" y1="-728.183" x2="-1251.36" y2="1971.96" gradientUnits="userSpaceOnUse">
|
|
69
|
+
<stop/>
|
|
70
|
+
<stop offset="1" stop-color="#032142"/>
|
|
71
|
+
</linearGradient>
|
|
72
|
+
<clipPath id="clip0_19356_19698">
|
|
73
|
+
<rect width="1851" height="1196" fill="white"/>
|
|
74
|
+
</clipPath>
|
|
75
|
+
</defs>
|
|
76
|
+
</svg>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<svg width="1851" height="1196" viewBox="0 0 1851 1196" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g clip-path="url(#clip0_19356_19682)">
|
|
3
|
+
<rect width="1851" height="1196" fill="url(#paint0_linear_19356_19682)"/>
|
|
4
|
+
<g filter="url(#filter0_f_19356_19682)">
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1102.43 904.428L749.184 292.595L137.351 645.837L175.198 711.391C349.386 1013.09 735.17 1116.46 1036.87 942.276L1102.43 904.428Z" fill="url(#paint1_linear_19356_19682)"/>
|
|
6
|
+
</g>
|
|
7
|
+
<g filter="url(#filter1_f_19356_19682)">
|
|
8
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M844.186 1868.49L1456.02 1515.25L1102.78 903.417L1037.22 941.264C735.521 1115.45 632.151 1501.24 806.338 1802.94L844.186 1868.49Z" fill="url(#paint2_linear_19356_19682)"/>
|
|
9
|
+
</g>
|
|
10
|
+
<g filter="url(#filter2_f_19356_19682)">
|
|
11
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M1714.19 550.415L1102.36 903.657L1455.6 1515.49L1521.16 1477.64C1822.86 1303.45 1926.23 917.67 1752.04 615.969L1714.19 550.415Z" fill="url(#paint3_linear_19356_19682)"/>
|
|
12
|
+
</g>
|
|
13
|
+
<g filter="url(#filter3_f_19356_19682)">
|
|
14
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M749.357 292.245L1102.6 904.078L1714.43 550.836L1676.58 485.282C1502.4 183.58 1116.61 80.2097 814.911 254.397L749.357 292.245Z" fill="url(#paint4_linear_19356_19682)"/>
|
|
15
|
+
</g>
|
|
16
|
+
<g filter="url(#filter4_f_19356_19682)">
|
|
17
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M396.775 -319.412L750.017 292.421L138.184 645.663L100.337 580.109C-73.8506 278.407 29.5201 -107.377 331.222 -281.565L396.775 -319.412Z" fill="url(#paint5_linear_19356_19682)"/>
|
|
18
|
+
</g>
|
|
19
|
+
</g>
|
|
20
|
+
<defs>
|
|
21
|
+
<filter id="filter0_f_19356_19682" x="112.752" y="267.995" width="1014.27" height="783.495" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
22
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
23
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
24
|
+
<feGaussianBlur stdDeviation="12.3" result="effect1_foregroundBlur_19356_19682"/>
|
|
25
|
+
</filter>
|
|
26
|
+
<filter id="filter1_f_19356_19682" x="697.123" y="878.817" width="783.495" height="1014.27" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
27
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
28
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
29
|
+
<feGaussianBlur stdDeviation="12.3" result="effect1_foregroundBlur_19356_19682"/>
|
|
30
|
+
</filter>
|
|
31
|
+
<filter id="filter2_f_19356_19682" x="1077.76" y="525.815" width="783.497" height="1014.27" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
32
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
33
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
34
|
+
<feGaussianBlur stdDeviation="12.3" result="effect1_foregroundBlur_19356_19682"/>
|
|
35
|
+
</filter>
|
|
36
|
+
<filter id="filter3_f_19356_19682" x="724.757" y="145.182" width="1014.27" height="783.495" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
37
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
38
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
39
|
+
<feGaussianBlur stdDeviation="12.3" result="effect1_foregroundBlur_19356_19682"/>
|
|
40
|
+
</filter>
|
|
41
|
+
<filter id="filter4_f_19356_19682" x="-8.87734" y="-344.012" width="783.495" height="1014.27" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
|
42
|
+
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
|
43
|
+
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
|
44
|
+
<feGaussianBlur stdDeviation="12.3" result="effect1_foregroundBlur_19356_19682"/>
|
|
45
|
+
</filter>
|
|
46
|
+
<linearGradient id="paint0_linear_19356_19682" x1="210.671" y1="-298.5" x2="1299.08" y2="1588.29" gradientUnits="userSpaceOnUse">
|
|
47
|
+
<stop stop-color="#B9DAFC"/>
|
|
48
|
+
<stop offset="1" stop-color="white"/>
|
|
49
|
+
</linearGradient>
|
|
50
|
+
<linearGradient id="paint1_linear_19356_19682" x1="42.0705" y1="943.784" x2="1588.19" y2="1265.94" gradientUnits="userSpaceOnUse">
|
|
51
|
+
<stop stop-color="#B9DAFC"/>
|
|
52
|
+
<stop offset="1" stop-color="#F2F2F2"/>
|
|
53
|
+
</linearGradient>
|
|
54
|
+
<linearGradient id="paint2_linear_19356_19682" x1="1781.09" y1="1503.62" x2="234.974" y2="1181.47" gradientUnits="userSpaceOnUse">
|
|
55
|
+
<stop stop-color="#B9DAFC"/>
|
|
56
|
+
<stop offset="1" stop-color="white"/>
|
|
57
|
+
</linearGradient>
|
|
58
|
+
<linearGradient id="paint3_linear_19356_19682" x1="777.286" y1="915.285" x2="2323.4" y2="1237.44" gradientUnits="userSpaceOnUse">
|
|
59
|
+
<stop stop-color="white"/>
|
|
60
|
+
<stop offset="1" stop-color="#B9DAFC"/>
|
|
61
|
+
</linearGradient>
|
|
62
|
+
<linearGradient id="paint4_linear_19356_19682" x1="1114.23" y1="1229.15" x2="1436.38" y2="-316.967" gradientUnits="userSpaceOnUse">
|
|
63
|
+
<stop stop-color="white"/>
|
|
64
|
+
<stop offset="1" stop-color="#B9DAFC"/>
|
|
65
|
+
</linearGradient>
|
|
66
|
+
<linearGradient id="paint5_linear_19356_19682" x1="-167.485" y1="579.205" x2="326.579" y2="-920.851" gradientUnits="userSpaceOnUse">
|
|
67
|
+
<stop stop-color="#B9DAFC"/>
|
|
68
|
+
<stop offset="1" stop-color="white"/>
|
|
69
|
+
</linearGradient>
|
|
70
|
+
<clipPath id="clip0_19356_19682">
|
|
71
|
+
<rect width="1851" height="1196" fill="white"/>
|
|
72
|
+
</clipPath>
|
|
73
|
+
</defs>
|
|
74
|
+
</svg>
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
--pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
|
|
18
18
|
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
19
19
|
--pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
20
|
-
--pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
20
|
+
--pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
|
|
21
21
|
--pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
|
|
22
22
|
--pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
23
23
|
--pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -50,9 +50,10 @@
|
|
|
50
50
|
--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
|
|
51
51
|
--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
|
|
52
52
|
--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
53
|
-
--pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--
|
|
53
|
+
--pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
|
|
54
54
|
--pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
55
55
|
--pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
56
|
+
--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
56
57
|
--pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
57
58
|
--pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
58
59
|
--pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
@@ -299,6 +300,7 @@
|
|
|
299
300
|
border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
|
|
300
301
|
border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
|
|
301
302
|
border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
|
|
303
|
+
box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
|
|
302
304
|
}
|
|
303
305
|
}
|
|
304
306
|
@media screen and (min-width: 48rem) {
|
|
@@ -31,7 +31,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
31
31
|
--#{$drawer}__panel--BorderInlineEndWidth: 0;
|
|
32
32
|
--#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
33
33
|
--#{$drawer}__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
34
|
-
--#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
34
|
+
--#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
|
|
35
35
|
--#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
|
|
36
36
|
--#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
37
37
|
--#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -64,9 +64,10 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
64
64
|
--#{$drawer}--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
|
|
65
65
|
--#{$drawer}--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
|
|
66
66
|
--#{$drawer}--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
67
|
-
--#{$drawer}--m-pill__panel--BorderColor: var(--pf-t--global--border--color--
|
|
67
|
+
--#{$drawer}--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
|
|
68
68
|
--#{$drawer}--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
69
69
|
--#{$drawer}--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
70
|
+
--#{$drawer}--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
70
71
|
--#{$drawer}__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
71
72
|
--#{$drawer}__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
72
73
|
--#{$drawer}__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
@@ -353,6 +354,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
|
|
|
353
354
|
border-block-end-width: var(--#{$drawer}--m-pill__panel--BorderBlockEndWidth);
|
|
354
355
|
border-inline-start-width: var(--#{$drawer}--m-pill__panel--BorderInlineStartWidth);
|
|
355
356
|
border-inline-end-width: var(--#{$drawer}--m-pill__panel--BorderInlineEndWidth);
|
|
357
|
+
box-shadow: var(--#{$drawer}--m-pill--m-expanded__panel--BoxShadow);
|
|
356
358
|
}
|
|
357
359
|
}
|
|
358
360
|
|
|
@@ -239,7 +239,6 @@
|
|
|
239
239
|
padding-inline-end: var(--pf-t--global--spacer--2xl);
|
|
240
240
|
}
|
|
241
241
|
:where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
|
|
242
|
-
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
243
242
|
background-color: var(--pf-t--global--background--color--glass--primary--default);
|
|
244
243
|
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
245
244
|
border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
|
@@ -259,7 +259,6 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
|
|
|
259
259
|
|
|
260
260
|
// placeholder for banded
|
|
261
261
|
@at-root :where(.pf-v6-theme-glass) &:not(.pf-m-docked) {
|
|
262
|
-
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
263
262
|
background-color: var(--pf-t--global--background--color--glass--primary--default);
|
|
264
263
|
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
265
264
|
border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
package/components/Page/page.css
CHANGED
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
--pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
|
|
16
16
|
--pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
17
17
|
--pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
18
|
-
--pf-v6-c-page__dock-main--BoxShadow:
|
|
18
|
+
--pf-v6-c-page__dock-main--BoxShadow: none;
|
|
19
|
+
--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
|
|
19
20
|
--pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
|
|
20
21
|
--pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
|
|
21
22
|
--pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
|
|
22
23
|
--pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
|
|
23
24
|
--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
24
|
-
--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
25
25
|
--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
|
|
26
26
|
--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
|
|
27
27
|
--pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
|
|
@@ -193,6 +193,7 @@
|
|
|
193
193
|
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
194
194
|
--pf-v6-c-page--BackgroundColor--glass: transparent;
|
|
195
195
|
--pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
|
|
196
|
+
--pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
196
197
|
--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
|
|
197
198
|
--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
|
|
198
199
|
--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
|
|
@@ -212,10 +213,12 @@
|
|
|
212
213
|
--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
213
214
|
--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
214
215
|
--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
216
|
+
--pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
215
217
|
}
|
|
216
218
|
:where(.pf-v6-theme-glass) .pf-v6-c-page {
|
|
217
219
|
--pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
|
|
218
220
|
--pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
|
|
221
|
+
--pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
|
|
219
222
|
--pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
|
|
220
223
|
--pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
|
|
221
224
|
--pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
|
|
@@ -231,6 +234,7 @@
|
|
|
231
234
|
--pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
|
|
232
235
|
--pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
|
|
233
236
|
--pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
|
|
237
|
+
--pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
|
|
234
238
|
}
|
|
235
239
|
@media (min-width: 75rem) {
|
|
236
240
|
.pf-v6-c-page {
|
|
@@ -324,6 +328,43 @@
|
|
|
324
328
|
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
|
|
325
329
|
}
|
|
326
330
|
}
|
|
331
|
+
.pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
|
|
332
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
333
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
334
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
335
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
336
|
+
--pf-v6-c-button__icon--ScaleX: 1;
|
|
337
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
338
|
+
--pf-v6-c-button--hover__icon--ScaleX: 1;
|
|
339
|
+
}
|
|
340
|
+
@media (min-width: 62rem) {
|
|
341
|
+
.pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
|
|
342
|
+
.pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
|
|
343
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
|
|
344
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
|
|
345
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
|
|
346
|
+
--pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
347
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
|
|
348
|
+
}
|
|
349
|
+
.pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
350
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
351
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
352
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
353
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
354
|
+
--pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
|
|
355
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
356
|
+
--pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
|
|
357
|
+
}
|
|
358
|
+
.pf-v6-c-page .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
359
|
+
--pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
|
|
360
|
+
--pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
|
|
361
|
+
--pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
|
|
362
|
+
--pf-v6-c-button__icon--TransitionDelay: 0s;
|
|
363
|
+
--pf-v6-c-button__icon--ScaleX: 1;
|
|
364
|
+
--pf-v6-c-button--hover__icon--TransitionDelay: 0s;
|
|
365
|
+
--pf-v6-c-button--hover__icon--ScaleX: 1;
|
|
366
|
+
}
|
|
367
|
+
}
|
|
327
368
|
|
|
328
369
|
@media (min-width: 75rem) {
|
|
329
370
|
.pf-v6-c-page > .pf-v6-c-masthead {
|
|
@@ -381,10 +422,14 @@
|
|
|
381
422
|
}
|
|
382
423
|
.pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
|
|
383
424
|
border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
|
|
425
|
+
box-shadow: var(--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow);
|
|
384
426
|
}
|
|
385
427
|
@media (min-width: 62rem) {
|
|
386
428
|
.pf-v6-c-page__dock-main {
|
|
387
429
|
--pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
|
|
430
|
+
--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
|
|
431
|
+
--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
|
|
432
|
+
--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
|
|
388
433
|
}
|
|
389
434
|
}
|
|
390
435
|
|
|
@@ -30,13 +30,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
30
30
|
// Dock main
|
|
31
31
|
--#{$page}__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
32
32
|
--#{$page}__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
|
|
33
|
-
--#{$page}__dock-main--BoxShadow:
|
|
33
|
+
--#{$page}__dock-main--BoxShadow: none;
|
|
34
|
+
--#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
|
|
34
35
|
--#{$page}__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
|
|
35
36
|
--#{$page}__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
|
|
36
37
|
--#{$page}__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
|
|
37
38
|
--#{$page}__dock-main--BorderInlineEndColor: transparent;
|
|
38
39
|
--#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
39
|
-
--#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
|
|
40
40
|
--#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
|
|
41
41
|
--#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
|
|
42
42
|
|
|
@@ -234,6 +234,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
234
234
|
// Glass theme
|
|
235
235
|
--#{$page}--BackgroundColor--glass: transparent;
|
|
236
236
|
--#{$page}__sidebar--Width--base--glass: calc(#{pf-size-prem(290px)} + var(--pf-t--global--spacer--inset--page-chrome) * 2);
|
|
237
|
+
--#{$page}__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
237
238
|
--#{$page}__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
|
|
238
239
|
--#{$page}__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
|
|
239
240
|
--#{$page}__sidebar-main--PaddingBlockEnd--glass: var(--#{$page}__sidebar--PaddingBlockEnd);
|
|
@@ -253,10 +254,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
253
254
|
--#{$page}__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
254
255
|
--#{$page}__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
255
256
|
--#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
257
|
+
--#{$page}__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
256
258
|
|
|
257
259
|
:where(.pf-v6-theme-glass) & {
|
|
258
260
|
--#{$page}--BackgroundColor: var(--#{$page}--BackgroundColor--glass);
|
|
259
261
|
--#{$page}__sidebar--Width--base: var(--#{$page}__sidebar--Width--base--glass);
|
|
262
|
+
--#{$page}__sidebar--MarginBlockStart: var(--#{$page}__sidebar--MarginBlockStart--glass);
|
|
260
263
|
--#{$page}__sidebar-body--PaddingInlineStart: var(--#{$page}__sidebar-body--PaddingInlineStart--glass);
|
|
261
264
|
--#{$page}__sidebar-body--PaddingInlineEnd: var(--#{$page}__sidebar-body--PaddingInlineEnd--glass);
|
|
262
265
|
--#{$page}__sidebar-main--PaddingBlockEnd: var(--#{$page}__sidebar-main--PaddingBlockEnd--glass);
|
|
@@ -272,6 +275,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
272
275
|
--#{$page}__sidebar-main--BorderColor: var(--#{$page}__sidebar-main--BorderColor--glass);
|
|
273
276
|
--#{$page}__sidebar-main--BorderRadius: var(--#{$page}__sidebar-main--BorderRadius--glass);
|
|
274
277
|
--#{$page}__sidebar-main--BoxShadow: var(--#{$page}__sidebar-main--BoxShadow--glass);
|
|
278
|
+
--#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
|
|
275
279
|
}
|
|
276
280
|
|
|
277
281
|
@media (min-width: $pf-v6-global--breakpoint--xl) {
|
|
@@ -358,6 +362,30 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
358
362
|
@include pf-v6-hamburger;
|
|
359
363
|
}
|
|
360
364
|
}
|
|
365
|
+
|
|
366
|
+
// Dock hamburger menu animation
|
|
367
|
+
// mobile - show collapse arrow on dock internal toggle when expanded
|
|
368
|
+
.#{$page}__dock.pf-m-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger {
|
|
369
|
+
@include pf-v6-hamburger($collapse: true);
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
@media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
|
|
373
|
+
// desktop - reset dock internal toggle to bars
|
|
374
|
+
.#{$page}__dock .#{$masthead}__toggle .#{$button}.pf-m-hamburger,
|
|
375
|
+
.#{$page}__dock.pf-m-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger {
|
|
376
|
+
@include pf-v6-hamburger($reset: true);
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
// desktop - show expand arrow on hover
|
|
380
|
+
.#{$page}__dock .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
381
|
+
@include pf-v6-hamburger;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
// desktop - show collapse arrow on hover when text expanded
|
|
385
|
+
.#{$page}__dock.pf-m-text-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
|
|
386
|
+
@include pf-v6-hamburger($collapse: true);
|
|
387
|
+
}
|
|
388
|
+
}
|
|
361
389
|
}
|
|
362
390
|
|
|
363
391
|
// Header
|
|
@@ -426,10 +454,14 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
|
|
|
426
454
|
|
|
427
455
|
.#{$page}__dock.pf-m-expanded & {
|
|
428
456
|
border-inline-end: var(--#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor);
|
|
457
|
+
box-shadow: var(--#{$page}__dock--m-expanded__dock-main--BoxShadow);
|
|
429
458
|
}
|
|
430
459
|
|
|
431
460
|
@media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
|
|
432
461
|
--#{$page}__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
|
|
462
|
+
--#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
|
|
463
|
+
--#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--BorderInlineEndWidth);
|
|
464
|
+
--#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
|
|
433
465
|
}
|
|
434
466
|
}
|
|
435
467
|
|