@patternfly/patternfly 6.5.0-prerelease.73 → 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 +4 -0
- package/components/Page/page.scss +4 -0
- package/components/_index.css +8 -3
- 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 +35 -7
- package/patternfly.css +35 -7
- 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
|
@@ -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 {
|
|
@@ -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) {
|
package/components/_index.css
CHANGED
|
@@ -6218,7 +6218,7 @@ ul) {
|
|
|
6218
6218
|
--pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
|
|
6219
6219
|
--pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
|
|
6220
6220
|
--pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
|
|
6221
|
-
--pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
|
|
6221
|
+
--pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
|
|
6222
6222
|
--pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
|
|
6223
6223
|
--pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
|
|
6224
6224
|
--pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
|
|
@@ -6251,9 +6251,10 @@ ul) {
|
|
|
6251
6251
|
--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
|
|
6252
6252
|
--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
|
|
6253
6253
|
--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
|
|
6254
|
-
--pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--
|
|
6254
|
+
--pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
|
|
6255
6255
|
--pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
|
|
6256
6256
|
--pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
|
|
6257
|
+
--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
|
|
6257
6258
|
--pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
|
|
6258
6259
|
--pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
6259
6260
|
--pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
|
|
@@ -6500,6 +6501,7 @@ ul) {
|
|
|
6500
6501
|
border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
|
|
6501
6502
|
border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
|
|
6502
6503
|
border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
|
|
6504
|
+
box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
|
|
6503
6505
|
}
|
|
6504
6506
|
}
|
|
6505
6507
|
@media screen and (min-width: 48rem) {
|
|
@@ -10707,7 +10709,6 @@ ul.pf-v6-c-list {
|
|
|
10707
10709
|
padding-inline-end: var(--pf-t--global--spacer--2xl);
|
|
10708
10710
|
}
|
|
10709
10711
|
:where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
|
|
10710
|
-
margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
|
|
10711
10712
|
background-color: var(--pf-t--global--background--color--glass--primary--default);
|
|
10712
10713
|
backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
|
|
10713
10714
|
border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
|
|
@@ -13690,6 +13691,7 @@ ul.pf-v6-c-list {
|
|
|
13690
13691
|
--pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13691
13692
|
--pf-v6-c-page--BackgroundColor--glass: transparent;
|
|
13692
13693
|
--pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
|
|
13694
|
+
--pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13693
13695
|
--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
|
|
13694
13696
|
--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
|
|
13695
13697
|
--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
|
|
@@ -13709,10 +13711,12 @@ ul.pf-v6-c-list {
|
|
|
13709
13711
|
--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13710
13712
|
--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13711
13713
|
--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13714
|
+
--pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
|
|
13712
13715
|
}
|
|
13713
13716
|
:where(.pf-v6-theme-glass) .pf-v6-c-page {
|
|
13714
13717
|
--pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
|
|
13715
13718
|
--pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
|
|
13719
|
+
--pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
|
|
13716
13720
|
--pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
|
|
13717
13721
|
--pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
|
|
13718
13722
|
--pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
|
|
@@ -13728,6 +13732,7 @@ ul.pf-v6-c-list {
|
|
|
13728
13732
|
--pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
|
|
13729
13733
|
--pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
|
|
13730
13734
|
--pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
|
|
13735
|
+
--pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
|
|
13731
13736
|
}
|
|
13732
13737
|
@media (min-width: 75rem) {
|
|
13733
13738
|
.pf-v6-c-page {
|
|
@@ -1044,6 +1044,66 @@ cssPrefix: pf-v6-c-drawer
|
|
|
1044
1044
|
|
|
1045
1045
|
```
|
|
1046
1046
|
|
|
1047
|
+
### Resizable Pill
|
|
1048
|
+
|
|
1049
|
+
```html isBeta
|
|
1050
|
+
<div class="pf-v6-c-drawer pf-m-expanded pf-m-pill">
|
|
1051
|
+
<div class="pf-v6-c-drawer__main">
|
|
1052
|
+
<div class="pf-v6-c-drawer__content">
|
|
1053
|
+
<div
|
|
1054
|
+
class="pf-v6-c-drawer__body"
|
|
1055
|
+
>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
|
|
1056
|
+
</div>
|
|
1057
|
+
<div class="pf-v6-c-drawer__panel pf-m-resizable">
|
|
1058
|
+
<div
|
|
1059
|
+
class="pf-v6-c-drawer__splitter pf-m-vertical"
|
|
1060
|
+
role="separator"
|
|
1061
|
+
tabindex="0"
|
|
1062
|
+
aria-valuenow="50"
|
|
1063
|
+
aria-orientation="vertical"
|
|
1064
|
+
>
|
|
1065
|
+
<div class="pf-v6-c-drawer__splitter-handle"></div>
|
|
1066
|
+
</div>
|
|
1067
|
+
<div class="pf-v6-c-drawer__panel-main">
|
|
1068
|
+
<div class="pf-v6-c-drawer__head">
|
|
1069
|
+
<span>Drawer panel header content</span>
|
|
1070
|
+
<div class="pf-v6-c-drawer__actions">
|
|
1071
|
+
<div class="pf-v6-c-drawer__close">
|
|
1072
|
+
<button
|
|
1073
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1074
|
+
type="button"
|
|
1075
|
+
aria-label="Close drawer panel"
|
|
1076
|
+
>
|
|
1077
|
+
<span class="pf-v6-c-button__icon">
|
|
1078
|
+
<svg
|
|
1079
|
+
class="pf-v6-svg"
|
|
1080
|
+
viewBox="0 0 20 20"
|
|
1081
|
+
fill="currentColor"
|
|
1082
|
+
aria-hidden="true"
|
|
1083
|
+
role="img"
|
|
1084
|
+
width="1em"
|
|
1085
|
+
height="1em"
|
|
1086
|
+
>
|
|
1087
|
+
<path
|
|
1088
|
+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
|
|
1089
|
+
/>
|
|
1090
|
+
</svg>
|
|
1091
|
+
</span>
|
|
1092
|
+
</button>
|
|
1093
|
+
</div>
|
|
1094
|
+
</div>
|
|
1095
|
+
</div>
|
|
1096
|
+
<div
|
|
1097
|
+
class="pf-v6-c-drawer__description"
|
|
1098
|
+
>This is a helpful description of the drawer panel.</div>
|
|
1099
|
+
<div class="pf-v6-c-drawer__body">Drawer panel body content</div>
|
|
1100
|
+
</div>
|
|
1101
|
+
</div>
|
|
1102
|
+
</div>
|
|
1103
|
+
</div>
|
|
1104
|
+
|
|
1105
|
+
```
|
|
1106
|
+
|
|
1047
1107
|
### Pill inline
|
|
1048
1108
|
|
|
1049
1109
|
```html isBeta
|