n.kolosnaj/DrupalTutorial
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
nkolosnjaj
2024-07-15 12:33:27 +02:00
commit ce50ae282b
22084 changed files with 2623791 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
core/modules/navigation/assets/fonts/inter-var.woff2 Executable file
View File

Binary file not shown.

5
core/modules/navigation/assets/icons/announcement.svg Executable file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<path fill="none" d="M0 0h256v256H0z"/>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M160 80v120.67a8 8 0 0 0 3.56 6.65l11 7.33a8 8 0 0 0 12.2-4.72L200 160"/>
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" d="M40 200a8 8 0 0 0 13.15 6.12C105.55 162.16 160 160 160 160h40a40 40 0 0 0 0-80h-40s-54.45-2.16-106.85-46.11A8 8 0 0 0 40 40Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 534 B

3
core/modules/navigation/assets/icons/appearance.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.75 3C21.75 2.80109 21.6709 2.61032 21.5303 2.46967C21.3896 2.32902 21.1989 2.25 21 2.25C16.8675 2.25 12.6271 6.91031 10.2721 9.99656C9.43109 9.73898 8.54134 9.68224 7.67437 9.83089C6.8074 9.97954 5.98738 10.3294 5.28017 10.8525C4.57295 11.3755 3.99826 12.0571 3.60225 12.8426C3.20624 13.628 2.99996 14.4954 2.99996 15.375C2.99996 18.27 1.16808 19.5684 1.0809 19.6284C0.947855 19.7183 0.847149 19.8484 0.793587 19.9998C0.740026 20.1511 0.736435 20.3156 0.783343 20.4692C0.830251 20.6227 0.925182 20.7571 1.05418 20.8527C1.18317 20.9482 1.33943 20.9999 1.49996 21H8.62496C9.50458 21 10.3719 20.7937 11.1574 20.3977C11.9428 20.0017 12.6244 19.427 13.1475 18.7198C13.6705 18.0126 14.0204 17.1926 14.1691 16.3256C14.3177 15.4586 14.261 14.5689 14.0034 13.7278C17.0906 11.3728 21.75 7.1325 21.75 3ZM8.62496 19.5H3.24652C3.87933 18.6009 4.49996 17.2425 4.49996 15.375C4.49996 14.5592 4.74189 13.7616 5.19515 13.0833C5.64841 12.4049 6.29264 11.8762 7.04639 11.564C7.80013 11.2518 8.62953 11.1701 9.42971 11.3293C10.2299 11.4884 10.9649 11.8813 11.5418 12.4582C12.1187 13.0351 12.5115 13.7701 12.6707 14.5703C12.8299 15.3704 12.7482 16.1998 12.436 16.9536C12.1237 17.7073 11.595 18.3516 10.9167 18.8048C10.2383 19.2581 9.44081 19.5 8.62496 19.5ZM11.6643 10.6453C11.9856 10.2291 12.3009 9.83688 12.6103 9.46875C13.3675 9.98035 14.0196 10.6324 14.5312 11.3897C14.1625 11.6984 13.7703 12.0138 13.3546 12.3356C12.9176 11.6586 12.3414 11.0824 11.6643 10.6453ZM15.6675 10.3941C15.1012 9.59512 14.4039 8.89778 13.605 8.33156C16.5843 5.09438 18.8315 4.11281 20.1581 3.84C19.8909 5.1675 18.9046 7.41469 15.6675 10.3941Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

3
core/modules/navigation/assets/icons/arrow-left.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M14.2501 7.99994c0 .19892-.079.38968-.2197.53033-.1406.14066-.3314.21967-.5303.21967H4.3126l3.22 3.21936c.1409.1409.22005.332.22005.5313 0 .1992-.07915.3903-.22005.5312-.14089.1409-.33199.2201-.53125.2201-.19925 0-.39035-.0792-.53125-.2201l-4.5-4.49998c-.06992-.06968-.12539-.15247-.16325-.24364-.03785-.09116-.05734-.1889-.05734-.28761 0-.09871.01949-.19645.05734-.28762.03786-.09116.09333-.17395.16325-.24363l4.5-4.5c.06977-.06977.15259-.12511.24374-.16286.09115-.03776.18885-.05719.28751-.05719.09867 0 .19636.01943.28751.05719.09116.03775.17398.09309.24374.16286.06977.06976.12511.15259.16286.24374.03776.09115.05719.18885.05719.28751s-.01943.19636-.05719.28751c-.03775.09115-.09309.17397-.16286.24374l-3.22 3.21812h9.1875c.1989 0 .3897.07902.5303.21967.1407.14066.2197.33142.2197.53033Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 873 B

3
core/modules/navigation/assets/icons/basic.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 3H4.5C4.10218 3 3.72064 3.15804 3.43934 3.43934C3.15804 3.72064 3 4.10218 3 4.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H19.5C19.8978 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM4.5 19.5V5.56031L18.4397 19.5H4.5ZM5.56031 4.5H19.5V18.4406L5.56031 4.5Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 537 B

3
core/modules/navigation/assets/icons/blocks.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.75 3.75H5.25C4.85218 3.75 4.47064 3.90804 4.18934 4.18934C3.90804 4.47064 3.75 4.85218 3.75 5.25V9.75C3.75 10.1478 3.90804 10.5294 4.18934 10.8107C4.47064 11.092 4.85218 11.25 5.25 11.25H9.75C10.1478 11.25 10.5294 11.092 10.8107 10.8107C11.092 10.5294 11.25 10.1478 11.25 9.75V5.25C11.25 4.85218 11.092 4.47064 10.8107 4.18934C10.5294 3.90804 10.1478 3.75 9.75 3.75ZM9.75 9.75H5.25V5.25H9.75V9.75ZM18.75 3.75H14.25C13.8522 3.75 13.4706 3.90804 13.1893 4.18934C12.908 4.47064 12.75 4.85218 12.75 5.25V9.75C12.75 10.1478 12.908 10.5294 13.1893 10.8107C13.4706 11.092 13.8522 11.25 14.25 11.25H18.75C19.1478 11.25 19.5294 11.092 19.8107 10.8107C20.092 10.5294 20.25 10.1478 20.25 9.75V5.25C20.25 4.85218 20.092 4.47064 19.8107 4.18934C19.5294 3.90804 19.1478 3.75 18.75 3.75ZM18.75 9.75H14.25V5.25H18.75V9.75ZM9.75 12.75H5.25C4.85218 12.75 4.47064 12.908 4.18934 13.1893C3.90804 13.4706 3.75 13.8522 3.75 14.25V18.75C3.75 19.1478 3.90804 19.5294 4.18934 19.8107C4.47064 20.092 4.85218 20.25 5.25 20.25H9.75C10.1478 20.25 10.5294 20.092 10.8107 19.8107C11.092 19.5294 11.25 19.1478 11.25 18.75V14.25C11.25 13.8522 11.092 13.4706 10.8107 13.1893C10.5294 12.908 10.1478 12.75 9.75 12.75ZM9.75 18.75H5.25V14.25H9.75V18.75ZM18.75 12.75H14.25C13.8522 12.75 13.4706 12.908 13.1893 13.1893C12.908 13.4706 12.75 13.8522 12.75 14.25V18.75C12.75 19.1478 12.908 19.5294 13.1893 19.8107C13.4706 20.092 13.8522 20.25 14.25 20.25H18.75C19.1478 20.25 19.5294 20.092 19.8107 19.8107C20.092 19.5294 20.25 19.1478 20.25 18.75V14.25C20.25 13.8522 20.092 13.4706 19.8107 13.1893C19.5294 12.908 19.1478 12.75 18.75 12.75ZM18.75 18.75H14.25V14.25H18.75V18.75Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

3
core/modules/navigation/assets/icons/burger.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 14">
<path stroke="#55565B" stroke-width="2" d="M0 1h18M0 7h18M0 13h18"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 150 B

3
core/modules/navigation/assets/icons/chevron.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
<path d="M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 910 B

3
core/modules/navigation/assets/icons/config.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.00002 9.84375V3.75C6.00002 3.55109 5.92101 3.36032 5.78035 3.21967C5.6397 3.07902 5.44894 3 5.25002 3C5.05111 3 4.86035 3.07902 4.71969 3.21967C4.57904 3.36032 4.50002 3.55109 4.50002 3.75V9.84375C3.85471 10.009 3.28274 10.3843 2.87429 10.9105C2.46584 11.4367 2.24414 12.0839 2.24414 12.75C2.24414 13.4161 2.46584 14.0633 2.87429 14.5895C3.28274 15.1157 3.85471 15.491 4.50002 15.6562V20.25C4.50002 20.4489 4.57904 20.6397 4.71969 20.7803C4.86035 20.921 5.05111 21 5.25002 21C5.44894 21 5.6397 20.921 5.78035 20.7803C5.92101 20.6397 6.00002 20.4489 6.00002 20.25V15.6562C6.64533 15.491 7.2173 15.1157 7.62575 14.5895C8.0342 14.0633 8.25591 13.4161 8.25591 12.75C8.25591 12.0839 8.0342 11.4367 7.62575 10.9105C7.2173 10.3843 6.64533 10.009 6.00002 9.84375ZM5.25002 14.25C4.95335 14.25 4.66334 14.162 4.41667 13.9972C4.16999 13.8324 3.97774 13.5981 3.8642 13.324C3.75067 13.0499 3.72097 12.7483 3.77885 12.4574C3.83672 12.1664 3.97958 11.8991 4.18936 11.6893C4.39914 11.4796 4.66642 11.3367 4.95739 11.2788C5.24836 11.2209 5.54996 11.2506 5.82405 11.3642C6.09814 11.4777 6.33241 11.67 6.49723 11.9166C6.66205 12.1633 6.75002 12.4533 6.75002 12.75C6.75002 13.1478 6.59199 13.5294 6.31068 13.8107C6.02938 14.092 5.64785 14.25 5.25002 14.25ZM12.75 5.34375V3.75C12.75 3.55109 12.671 3.36032 12.5304 3.21967C12.3897 3.07902 12.1989 3 12 3C11.8011 3 11.6103 3.07902 11.4697 3.21967C11.329 3.36032 11.25 3.55109 11.25 3.75V5.34375C10.6047 5.50898 10.0327 5.88428 9.62429 6.41048C9.21584 6.93669 8.99414 7.58387 8.99414 8.25C8.99414 8.91613 9.21584 9.56331 9.62429 10.0895C10.0327 10.6157 10.6047 10.991 11.25 11.1562V20.25C11.25 20.4489 11.329 20.6397 11.4697 20.7803C11.6103 20.921 11.8011 21 12 21C12.1989 21 12.3897 20.921 12.5304 20.7803C12.671 20.6397 12.75 20.4489 12.75 20.25V11.1562C13.3953 10.991 13.9673 10.6157 14.3758 10.0895C14.7842 9.56331 15.0059 8.91613 15.0059 8.25C15.0059 7.58387 14.7842 6.93669 14.3758 6.41048C13.9673 5.88428 13.3953 5.50898 12.75 5.34375ZM12 9.75C11.7034 9.75 11.4133 9.66203 11.1667 9.4972C10.92 9.33238 10.7277 9.09811 10.6142 8.82402C10.5007 8.54994 10.471 8.24834 10.5288 7.95736C10.5867 7.66639 10.7296 7.39912 10.9394 7.18934C11.1491 6.97956 11.4164 6.8367 11.7074 6.77882C11.9984 6.72094 12.3 6.75065 12.574 6.86418C12.8481 6.97771 13.0824 7.16997 13.2472 7.41664C13.412 7.66332 13.5 7.95333 13.5 8.25C13.5 8.64782 13.342 9.02936 13.0607 9.31066C12.7794 9.59196 12.3978 9.75 12 9.75ZM21.75 15.75C21.7494 15.0849 21.5282 14.4388 21.121 13.9129C20.7139 13.387 20.1438 13.011 19.5 12.8438V3.75C19.5 3.55109 19.421 3.36032 19.2804 3.21967C19.1397 3.07902 18.9489 3 18.75 3C18.5511 3 18.3603 3.07902 18.2197 3.21967C18.079 3.36032 18 3.55109 18 3.75V12.8438C17.3547 13.009 16.7827 13.3843 16.3743 13.9105C15.9658 14.4367 15.7441 15.0839 15.7441 15.75C15.7441 16.4161 15.9658 17.0633 16.3743 17.5895C16.7827 18.1157 17.3547 18.491 18 18.6562V20.25C18 20.4489 18.079 20.6397 18.2197 20.7803C18.3603 20.921 18.5511 21 18.75 21C18.9489 21 19.1397 20.921 19.2804 20.7803C19.421 20.6397 19.5 20.4489 19.5 20.25V18.6562C20.1438 18.489 20.7139 18.113 21.121 17.5871C21.5282 17.0612 21.7494 16.4151 21.75 15.75ZM18.75 17.25C18.4534 17.25 18.1633 17.162 17.9167 16.9972C17.67 16.8324 17.4777 16.5981 17.3642 16.324C17.2507 16.0499 17.221 15.7483 17.2788 15.4574C17.3367 15.1664 17.4796 14.8991 17.6894 14.6893C17.8991 14.4796 18.1664 14.3367 18.4574 14.2788C18.7484 14.2209 19.05 14.2506 19.324 14.3642C19.5981 14.4777 19.8324 14.67 19.9972 14.9166C20.162 15.1633 20.25 15.4533 20.25 15.75C20.25 16.1478 20.092 16.5294 19.8107 16.8107C19.5294 17.092 19.1478 17.25 18.75 17.25Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

3
core/modules/navigation/assets/icons/content.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM17.25 9C17.25 9.19891 17.171 9.38968 17.0303 9.53033C16.8897 9.67098 16.6989 9.75 16.5 9.75H7.5C7.30109 9.75 7.11032 9.67098 6.96967 9.53033C6.82902 9.38968 6.75 9.19891 6.75 9C6.75 8.80109 6.82902 8.61032 6.96967 8.46967C7.11032 8.32902 7.30109 8.25 7.5 8.25H16.5C16.6989 8.25 16.8897 8.32902 17.0303 8.46967C17.171 8.61032 17.25 8.80109 17.25 9ZM17.25 12C17.25 12.1989 17.171 12.3897 17.0303 12.5303C16.8897 12.671 16.6989 12.75 16.5 12.75H7.5C7.30109 12.75 7.11032 12.671 6.96967 12.5303C6.82902 12.3897 6.75 12.1989 6.75 12C6.75 11.8011 6.82902 11.6103 6.96967 11.4697C7.11032 11.329 7.30109 11.25 7.5 11.25H16.5C16.6989 11.25 16.8897 11.329 17.0303 11.4697C17.171 11.6103 17.25 11.8011 17.25 12ZM17.25 15C17.25 15.1989 17.171 15.3897 17.0303 15.5303C16.8897 15.671 16.6989 15.75 16.5 15.75H7.5C7.30109 15.75 7.11032 15.671 6.96967 15.5303C6.82902 15.3897 6.75 15.1989 6.75 15C6.75 14.8011 6.82902 14.6103 6.96967 14.4697C7.11032 14.329 7.30109 14.25 7.5 14.25H16.5C16.6989 14.25 16.8897 14.329 17.0303 14.4697C17.171 14.6103 17.25 14.8011 17.25 15Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
core/modules/navigation/assets/icons/create.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96452 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7662 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM16.5 12C16.5 12.1989 16.421 12.3897 16.2803 12.5303C16.1397 12.671 15.9489 12.75 15.75 12.75H12.75V15.75C12.75 15.9489 12.671 16.1397 12.5303 16.2803C12.3897 16.421 12.1989 16.5 12 16.5C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75V12.75H8.25C8.05109 12.75 7.86033 12.671 7.71967 12.5303C7.57902 12.3897 7.5 12.1989 7.5 12C7.5 11.8011 7.57902 11.6103 7.71967 11.4697C7.86033 11.329 8.05109 11.25 8.25 11.25H11.25V8.25C11.25 8.05109 11.329 7.86032 11.4697 7.71967C11.6103 7.57902 11.8011 7.5 12 7.5C12.1989 7.5 12.3897 7.57902 12.5303 7.71967C12.671 7.86032 12.75 8.05109 12.75 8.25V11.25H15.75C15.9489 11.25 16.1397 11.329 16.2803 11.4697C16.421 11.6103 16.5 11.8011 16.5 12Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
core/modules/navigation/assets/icons/cross.svg Executable file
View File

@@ -0,0 +1,6 @@
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="none"
viewbox="0 0 20 20">
<path fill="#55565B"
d="M16.2883 14.9617c.1761.1762.275.415.275.6641 0 .2491-.0989.4879-.275.6641-.1761.1761-.415.275-.6641.275-.2491 0-.4879-.0989-.664-.275L10 11.3281l-4.96172 4.9602c-.17612.1761-.41499.2751-.66406.2751-.24908 0-.48795-.099-.66407-.2751-.17612-.1761-.27506-.415-.27506-.6641 0-.249.09894-.4879.27506-.664L8.67187 10 3.71172 5.0383c-.17613-.17612-.27507-.41499-.27507-.66407 0-.24907.09894-.48794.27507-.66406.17612-.17612.41499-.27506.66406-.27506.24907 0 .48794.09894.66406.27506L10 8.67189l4.9617-4.9625c.1761-.17612.415-.27506.6641-.27506.249 0 .4879.09894.664.27506.1762.17612.2751.41499.2751.66406 0 .24907-.0989.48794-.2751.66407L11.3281 10l4.9602 4.9617Z">
</path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 791 B

3
core/modules/navigation/assets/icons/extend.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.6503 14.8631C20.5434 14.7957 20.4212 14.7564 20.2949 14.7488C20.1687 14.7413 20.0427 14.7658 19.9285 14.82C19.6427 14.9552 19.3274 15.0159 19.0118 14.9965C18.6963 14.9771 18.3908 14.8782 18.1237 14.7091C17.8566 14.54 17.6366 14.3061 17.4842 14.0291C17.3318 13.7521 17.2518 13.4411 17.2518 13.125C17.2518 12.8089 17.3318 12.4979 17.4842 12.2209C17.6366 11.944 17.8566 11.7101 18.1237 11.5409C18.3908 11.3718 18.6963 11.2729 19.0118 11.2535C19.3274 11.2342 19.6427 11.2949 19.9285 11.43C20.0428 11.4843 20.169 11.5087 20.2953 11.5011C20.4217 11.4934 20.544 11.4539 20.651 11.3863C20.7579 11.3186 20.846 11.225 20.9071 11.1141C20.9681 11.0033 21.0001 10.8788 21 10.7522V6.75002C21 6.35219 20.842 5.97066 20.5607 5.68936C20.2794 5.40805 19.8979 5.25002 19.5 5.25002H16.1044C16.1184 5.12551 16.1252 5.00031 16.125 4.87502C16.1243 4.41407 16.0295 3.95812 15.8464 3.53511C15.6633 3.1121 15.3957 2.73095 15.06 2.41502C14.5953 1.97853 14.0164 1.68261 13.3904 1.56154C12.7644 1.44046 12.117 1.49918 11.523 1.73089C10.929 1.9626 10.4128 2.35782 10.0341 2.87079C9.65549 3.38376 9.42989 3.9935 9.38347 4.62939C9.36906 4.83624 9.37345 5.04396 9.39659 5.25002H6.00003C5.60221 5.25002 5.22067 5.40805 4.93937 5.68936C4.65807 5.97066 4.50003 6.35219 4.50003 6.75002V9.77064C4.37552 9.75669 4.25032 9.7498 4.12503 9.75002C3.66409 9.75076 3.20816 9.8456 2.78516 10.0287C2.36216 10.2119 1.981 10.4794 1.66503 10.815C1.34679 11.1512 1.10175 11.5497 0.945386 11.9854C0.789021 12.4211 0.724736 12.8845 0.756593 13.3463C0.810338 14.1594 1.15585 14.9259 1.7296 15.5046C2.30334 16.0833 3.06674 16.4355 3.87941 16.4963C4.08624 16.5111 4.29401 16.5067 4.50003 16.4831V19.5C4.50003 19.8978 4.65807 20.2794 4.93937 20.5607C5.22067 20.842 5.60221 21 6.00003 21H19.5C19.8979 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V15.4978C21.0001 15.3711 20.9681 15.2464 20.9069 15.1355C20.8458 15.0245 20.7575 14.9308 20.6503 14.8631ZM19.5 19.5H6.00003V15.4978C6.00007 15.3713 5.96809 15.2468 5.90705 15.1359C5.84602 15.025 5.75792 14.9314 5.65096 14.8637C5.54401 14.7961 5.42167 14.7566 5.29534 14.749C5.16901 14.7413 5.0428 14.7658 4.92847 14.82C4.64269 14.9552 4.32737 15.0159 4.01183 14.9965C3.6963 14.9771 3.39079 14.8782 3.1237 14.7091C2.85662 14.54 2.63664 14.3061 2.48421 14.0291C2.33178 13.7521 2.25184 13.4411 2.25184 13.125C2.25184 12.8089 2.33178 12.4979 2.48421 12.2209C2.63664 11.944 2.85662 11.7101 3.1237 11.5409C3.39079 11.3718 3.6963 11.2729 4.01183 11.2535C4.32737 11.2342 4.64269 11.2949 4.92847 11.43C5.0428 11.4843 5.16901 11.5087 5.29534 11.5011C5.42167 11.4934 5.54401 11.4539 5.65096 11.3863C5.75792 11.3186 5.84602 11.225 5.90705 11.1141C5.96809 11.0033 6.00007 10.8788 6.00003 10.7522V6.75002H10.3772C10.5038 6.75006 10.6283 6.71807 10.7392 6.65704C10.85 6.596 10.9436 6.50791 11.0113 6.40095C11.079 6.29399 11.1184 6.17165 11.1261 6.04533C11.1337 5.919 11.1093 5.79279 11.055 5.67845C10.9199 5.39267 10.8592 5.07736 10.8786 4.76182C10.898 4.44628 10.9968 4.14077 11.1659 3.87369C11.3351 3.60661 11.569 3.38663 11.8459 3.23419C12.1229 3.08176 12.4339 3.00183 12.75 3.00183C13.0662 3.00183 13.3772 3.08176 13.6541 3.23419C13.9311 3.38663 14.165 3.60661 14.3341 3.87369C14.5033 4.14077 14.6021 4.44628 14.6215 4.76182C14.6409 5.07736 14.5802 5.39267 14.445 5.67845C14.3908 5.79279 14.3663 5.919 14.374 6.04533C14.3816 6.17165 14.4211 6.29399 14.4888 6.40095C14.5564 6.50791 14.65 6.596 14.7609 6.65704C14.8718 6.71807 14.9963 6.75006 15.1228 6.75002H19.5V9.77158C19.294 9.74798 19.0862 9.74358 18.8794 9.75845C18.0065 9.82026 17.1917 10.2187 16.607 10.8697C16.0222 11.5207 15.7132 12.3734 15.745 13.2479C15.7769 14.1224 16.1472 14.9503 16.7778 15.5571C17.4084 16.1638 18.25 16.5019 19.125 16.5C19.2503 16.5002 19.3755 16.4933 19.5 16.4794V19.5Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

3
core/modules/navigation/assets/icons/eye.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path fill="#55565B" d="M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
core/modules/navigation/assets/icons/files.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.0306 6.21938L16.2806 2.46938C16.2109 2.39975 16.1282 2.34454 16.0371 2.3069C15.9461 2.26926 15.8485 2.24992 15.75 2.25H8.25C7.85218 2.25 7.47064 2.40804 7.18934 2.68934C6.90804 2.97064 6.75 3.35218 6.75 3.75V5.25H5.25C4.85218 5.25 4.47064 5.40804 4.18934 5.68934C3.90804 5.97064 3.75 6.35218 3.75 6.75V20.25C3.75 20.6478 3.90804 21.0294 4.18934 21.3107C4.47064 21.592 4.85218 21.75 5.25 21.75H15.75C16.1478 21.75 16.5294 21.592 16.8107 21.3107C17.092 21.0294 17.25 20.6478 17.25 20.25V18.75H18.75C19.1478 18.75 19.5294 18.592 19.8107 18.3107C20.092 18.0294 20.25 17.6478 20.25 17.25V6.75C20.2501 6.65148 20.2307 6.55391 20.1931 6.46286C20.1555 6.37182 20.1003 6.28908 20.0306 6.21938ZM15.75 20.25H5.25V6.75H12.4397L15.75 10.0603V17.985C15.75 17.9906 15.75 17.9953 15.75 18C15.75 18.0047 15.75 18.0094 15.75 18.015V20.25ZM18.75 17.25H17.25V9.75C17.2501 9.65148 17.2307 9.55391 17.1931 9.46286C17.1555 9.37182 17.1003 9.28908 17.0306 9.21937L13.2806 5.46938C13.2109 5.39975 13.1282 5.34454 13.0371 5.3069C12.9461 5.26926 12.8485 5.24992 12.75 5.25H8.25V3.75H15.4397L18.75 7.06031V17.25ZM13.5 14.25C13.5 14.4489 13.421 14.6397 13.2803 14.7803C13.1397 14.921 12.9489 15 12.75 15H8.25C8.05109 15 7.86032 14.921 7.71967 14.7803C7.57902 14.6397 7.5 14.4489 7.5 14.25C7.5 14.0511 7.57902 13.8603 7.71967 13.7197C7.86032 13.579 8.05109 13.5 8.25 13.5H12.75C12.9489 13.5 13.1397 13.579 13.2803 13.7197C13.421 13.8603 13.5 14.0511 13.5 14.25ZM13.5 17.25C13.5 17.4489 13.421 17.6397 13.2803 17.7803C13.1397 17.921 12.9489 18 12.75 18H8.25C8.05109 18 7.86032 17.921 7.71967 17.7803C7.57902 17.6397 7.5 17.4489 7.5 17.25C7.5 17.0511 7.57902 16.8603 7.71967 16.7197C7.86032 16.579 8.05109 16.5 8.25 16.5H12.75C12.9489 16.5 13.1397 16.579 13.2803 16.7197C13.421 16.8603 13.5 17.0511 13.5 17.25Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

3
core/modules/navigation/assets/icons/help.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.125 16.875C13.125 17.0975 13.059 17.315 12.9354 17.5C12.8118 17.685 12.6361 17.8292 12.4305 17.9144C12.225 17.9995 11.9988 18.0218 11.7805 17.9784C11.5623 17.935 11.3618 17.8278 11.2045 17.6705C11.0472 17.5132 10.94 17.3127 10.8966 17.0945C10.8532 16.8762 10.8755 16.65 10.9606 16.4445C11.0458 16.2389 11.19 16.0632 11.375 15.9396C11.56 15.816 11.7775 15.75 12 15.75C12.2984 15.75 12.5845 15.8685 12.7955 16.0795C13.0065 16.2905 13.125 16.5766 13.125 16.875ZM12 6.75C9.93188 6.75 8.25 8.26406 8.25 10.125V10.5C8.25 10.6989 8.32902 10.8897 8.46967 11.0303C8.61033 11.171 8.80109 11.25 9 11.25C9.19892 11.25 9.38968 11.171 9.53033 11.0303C9.67099 10.8897 9.75 10.6989 9.75 10.5V10.125C9.75 9.09375 10.7597 8.25 12 8.25C13.2403 8.25 14.25 9.09375 14.25 10.125C14.25 11.1562 13.2403 12 12 12C11.8011 12 11.6103 12.079 11.4697 12.2197C11.329 12.3603 11.25 12.5511 11.25 12.75V13.5C11.25 13.6989 11.329 13.8897 11.4697 14.0303C11.6103 14.171 11.8011 14.25 12 14.25C12.1989 14.25 12.3897 14.171 12.5303 14.0303C12.671 13.8897 12.75 13.6989 12.75 13.5V13.4325C14.46 13.1184 15.75 11.7544 15.75 10.125C15.75 8.26406 14.0681 6.75 12 6.75ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96452 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7662 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

3
core/modules/navigation/assets/icons/media.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 3H7.5C7.10218 3 6.72064 3.15804 6.43934 3.43934C6.15804 3.72064 6 4.10218 6 4.5V6H4.5C4.10218 6 3.72064 6.15804 3.43934 6.43934C3.15804 6.72064 3 7.10218 3 7.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H16.5C16.8978 21 17.2794 20.842 17.5607 20.5607C17.842 20.2794 18 19.8978 18 19.5V18H19.5C19.8978 18 20.2794 17.842 20.5607 17.5607C20.842 17.2794 21 16.8978 21 16.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM7.5 4.5H19.5V11.0044L17.9344 9.43875C17.6531 9.15766 17.2717 8.99976 16.8741 8.99976C16.4764 8.99976 16.095 9.15766 15.8137 9.43875L8.75344 16.5H7.5V4.5ZM16.5 19.5H4.5V7.5H6V16.5C6 16.8978 6.15804 17.2794 6.43934 17.5607C6.72064 17.842 7.10218 18 7.5 18H16.5V19.5ZM19.5 16.5H10.875L16.875 10.5L19.5 13.125V16.5ZM11.25 10.5C11.695 10.5 12.13 10.368 12.5 10.1208C12.87 9.87357 13.1584 9.52217 13.3287 9.11104C13.499 8.6999 13.5436 8.2475 13.4568 7.81105C13.37 7.37459 13.1557 6.97368 12.841 6.65901C12.5263 6.34434 12.1254 6.13005 11.689 6.04323C11.2525 5.95642 10.8001 6.00097 10.389 6.17127C9.97783 6.34157 9.62643 6.62996 9.37919 6.99997C9.13196 7.36998 9 7.80499 9 8.25C9 8.84674 9.23705 9.41903 9.65901 9.84099C10.081 10.2629 10.6533 10.5 11.25 10.5ZM11.25 7.5C11.3983 7.5 11.5433 7.54399 11.6667 7.6264C11.79 7.70881 11.8861 7.82594 11.9429 7.96299C11.9997 8.10003 12.0145 8.25083 11.9856 8.39632C11.9567 8.5418 11.8852 8.67544 11.7803 8.78033C11.6754 8.88522 11.5418 8.95665 11.3963 8.98559C11.2508 9.01453 11.1 8.99968 10.963 8.94291C10.8259 8.88614 10.7088 8.79001 10.6264 8.66668C10.544 8.54334 10.5 8.39834 10.5 8.25C10.5 8.05109 10.579 7.86032 10.7197 7.71967C10.8603 7.57902 11.0511 7.5 11.25 7.5Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

3
core/modules/navigation/assets/icons/pencil.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17.7586 5.73214 14.268 2.24073c-.1161-.1161-.2539-.2082-.4056-.27104-.1517-.06284-.3142-.09518-.4784-.09518s-.3268.03234-.4784.09518c-.1517.06284-.2895.15494-.4056.27104L2.86641 11.8751c-.11658.1157-.209.2533-.2719.405-.06291.1517-.09503.3144-.0945.4786v3.4914c0 .3315.13169.6495.36611.8839.23442.2344.55237.3661.88389.3661h3.4914c.16422.0005.32689-.0316.47858-.0945s.28936-.1553.40502-.2719l9.63359-9.6336c.1161-.11607.2082-.25388.271-.40556.0629-.15168.0952-.31424.0952-.47842s-.0323-.32675-.0952-.47842c-.0628-.15168-.1549-.28949-.271-.40556Zm-13.75 6.76796 6.6164-6.6164 1.3039 1.3039-6.61639 6.6156-1.30391-1.3031Zm-.25859 1.5086 2.2414 2.2414h-2.2414v-2.2414Zm3.75 1.9828L6.1961 14.6876l6.6164-6.6164 1.3039 1.3039-6.61639 6.6164ZM15 8.49151 11.5086 5.0001l1.875-1.875 3.4914 3.49063L15 8.49151Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 884 B

3
core/modules/navigation/assets/icons/people.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.9922 14.805C11.9974 14.1358 12.7606 13.1609 13.1688 12.0244C13.5771 10.8879 13.6088 9.65024 13.2592 8.49437C12.9096 7.3385 12.1974 6.32581 11.2278 5.60605C10.2581 4.88629 9.08262 4.49768 7.87505 4.49768C6.66747 4.49768 5.49196 4.88629 4.52233 5.60605C3.55271 6.32581 2.84045 7.3385 2.49088 8.49437C2.14132 9.65024 2.17301 10.8879 2.58126 12.0244C2.98952 13.1609 3.75267 14.1358 4.75786 14.805C2.93957 15.4751 1.38671 16.7152 0.330984 18.3403C0.275499 18.4227 0.236959 18.5154 0.217604 18.6129C0.198249 18.7104 0.198466 18.8108 0.218241 18.9082C0.238017 19.0056 0.276957 19.0981 0.332798 19.1803C0.388639 19.2625 0.460266 19.3328 0.543518 19.3871C0.626769 19.4414 0.719983 19.4786 0.817742 19.4966C0.9155 19.5146 1.01585 19.5129 1.11297 19.4917C1.21008 19.4706 1.30202 19.4303 1.38344 19.3733C1.46486 19.3163 1.53413 19.2437 1.58723 19.1597C2.26822 18.1123 3.20007 17.2516 4.29814 16.6558C5.39622 16.0599 6.62574 15.7479 7.87505 15.7479C9.12435 15.7479 10.3539 16.0599 11.4519 16.6558C12.55 17.2516 13.4819 18.1123 14.1629 19.1597C14.2729 19.3231 14.4428 19.4368 14.6359 19.476C14.829 19.5152 15.0298 19.4768 15.1949 19.3692C15.3599 19.2615 15.476 19.0932 15.5179 18.9007C15.5599 18.7082 15.5244 18.5068 15.4191 18.3403C14.3634 16.7152 12.8105 15.4751 10.9922 14.805ZM3.75005 10.125C3.75005 9.30912 3.99197 8.51159 4.44523 7.83324C4.8985 7.15488 5.54273 6.62617 6.29648 6.31396C7.05022 6.00175 7.87962 5.92006 8.67979 6.07922C9.47997 6.23839 10.215 6.63126 10.7919 7.20815C11.3688 7.78504 11.7616 8.52004 11.9208 9.32022C12.0799 10.1204 11.9983 10.9498 11.686 11.7035C11.3738 12.4573 10.8451 13.1015 10.1668 13.5548C9.48842 14.008 8.69089 14.25 7.87505 14.25C6.78141 14.2487 5.73292 13.8137 4.9596 13.0404C4.18628 12.2671 3.75129 11.2186 3.75005 10.125ZM23.4507 19.3781C23.2841 19.4867 23.0812 19.5247 22.8865 19.4838C22.6919 19.4428 22.5215 19.3262 22.4129 19.1597C21.7327 18.1116 20.801 17.2506 19.7027 16.655C18.6044 16.0594 17.3744 15.7483 16.125 15.75C15.9261 15.75 15.7354 15.6709 15.5947 15.5303C15.4541 15.3896 15.375 15.1989 15.375 15C15.375 14.8011 15.4541 14.6103 15.5947 14.4696C15.7354 14.329 15.9261 14.25 16.125 14.25C16.7325 14.2494 17.3324 14.1147 17.8817 13.8554C18.4311 13.5961 18.9164 13.2187 19.303 12.7501C19.6896 12.2815 19.9679 11.7334 20.1181 11.1448C20.2683 10.5561 20.2866 9.94162 20.1718 9.3451C20.0569 8.74859 19.8117 8.1848 19.4537 7.69402C19.0958 7.20325 18.6338 6.7976 18.1008 6.50606C17.5679 6.21452 16.9771 6.04429 16.3708 6.00752C15.7644 5.97076 15.1574 6.06838 14.5932 6.2934C14.5012 6.33317 14.4021 6.3541 14.3019 6.35495C14.2017 6.35579 14.1023 6.33654 14.0096 6.29833C13.917 6.26012 13.8329 6.20373 13.7624 6.13248C13.6919 6.06123 13.6364 5.97658 13.5992 5.88352C13.562 5.79046 13.5438 5.69088 13.5457 5.59067C13.5476 5.49046 13.5696 5.39165 13.6103 5.30007C13.6511 5.2085 13.7098 5.12602 13.7829 5.05752C13.8561 4.98901 13.9422 4.93586 14.0363 4.90121C15.3277 4.3862 16.764 4.36767 18.0682 4.84919C19.3725 5.33071 20.4522 6.27817 21.099 7.50879C21.7459 8.73941 21.9141 10.166 21.5713 11.5133C21.2284 12.8607 20.3987 14.0333 19.2422 14.805C21.0605 15.4751 22.6134 16.7152 23.6691 18.3403C23.7777 18.5069 23.8158 18.7098 23.7748 18.9044C23.7338 19.099 23.6172 19.2694 23.4507 19.3781Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

3
core/modules/navigation/assets/icons/reports.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96452 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM18.7378 7.24406L12.75 10.7006V3.78469C13.9389 3.89369 15.0901 4.25945 16.1239 4.85672C17.1577 5.45398 18.0495 6.26851 18.7378 7.24406ZM11.25 3.78469V11.5659L4.51032 15.4566C3.95704 14.2574 3.69975 12.9428 3.76008 11.6235C3.82041 10.3042 4.19659 9.01868 4.85701 7.87497C5.51742 6.73126 6.44276 5.76281 7.55523 5.05104C8.66771 4.33927 9.93481 3.90498 11.25 3.78469ZM12 20.25C10.6792 20.2495 9.37792 19.9318 8.20543 19.3238C7.03295 18.7158 6.02358 17.8351 5.26219 16.7559L19.4897 8.5425C20.0699 9.79946 20.3244 11.1822 20.2299 12.5634C20.1354 13.9445 19.6948 15.2797 18.9487 16.4459C18.2027 17.6121 17.1752 18.5717 15.9608 19.2365C14.7465 19.9013 13.3844 20.2499 12 20.25Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
core/modules/navigation/assets/icons/return-left.svg Executable file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-up-left"><polyline points="9 14 4 9 9 4"/><path d="M20 20v-7a4 4 0 0 0-4-4H4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 297 B

3
core/modules/navigation/assets/icons/shortcuts.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.4251 8.121C21.3342 7.84104 21.1631 7.594 20.9328 7.41063C20.7026 7.22726 20.4236 7.11566 20.1304 7.08975L14.5626 6.60974L12.3801 1.41974C12.2664 1.14742 12.0748 0.914795 11.8292 0.751174C11.5836 0.587552 11.2952 0.500244 11.0001 0.500244C10.705 0.500244 10.4165 0.587552 10.1709 0.751174C9.92537 0.914795 9.7337 1.14742 9.62007 1.41974L7.44413 6.60974L1.86976 7.09256C1.57542 7.11729 1.29493 7.22838 1.06347 7.41188C0.832008 7.59539 0.65988 7.84315 0.568668 8.1241C0.477457 8.40504 0.471222 8.70666 0.550747 8.99113C0.630272 9.2756 0.792015 9.53027 1.01569 9.72318L5.24476 13.4188L3.97726 18.9069C3.91023 19.1941 3.92936 19.4947 4.03224 19.7711C4.13512 20.0475 4.31719 20.2874 4.55569 20.4609C4.79419 20.6344 5.07853 20.7337 5.37317 20.7464C5.66781 20.7592 5.95967 20.6848 6.21226 20.5326L10.9935 17.6263L15.7851 20.5326C16.0377 20.6848 16.3295 20.7592 16.6242 20.7464C16.9188 20.7337 17.2031 20.6344 17.4416 20.4609C17.6801 20.2874 17.8622 20.0475 17.9651 19.7711C18.068 19.4947 18.0871 19.1941 18.0201 18.9069L16.7535 13.4132L20.9816 9.72318C21.2053 9.5296 21.3667 9.27421 21.4456 8.98914C21.5245 8.70406 21.5174 8.40202 21.4251 8.121ZM19.9982 8.58975L15.7701 12.2797C15.5643 12.4587 15.4112 12.6905 15.3273 12.95C15.2434 13.2095 15.2318 13.487 15.2938 13.7526L16.5641 19.2501L11.7763 16.3438C11.5427 16.2016 11.2745 16.1263 11.001 16.1263C10.7275 16.1263 10.4593 16.2016 10.2257 16.3438L5.44444 19.2501L6.70632 13.7563C6.76834 13.4907 6.75676 13.2132 6.67285 12.9537C6.58893 12.6942 6.43585 12.4625 6.23007 12.2835L2.00007 8.59537C1.99973 8.59257 1.99973 8.58973 2.00007 8.58693L7.57257 8.10506C7.84463 8.08108 8.10499 7.98327 8.32555 7.82219C8.54611 7.6611 8.7185 7.44286 8.82413 7.191L11.0001 2.00756L13.1751 7.191C13.2807 7.44286 13.4531 7.6611 13.6737 7.82219C13.8942 7.98327 14.1546 8.08108 14.4266 8.10506L20.0001 8.58693C20.0001 8.58693 20.0001 8.59256 20.0001 8.59349L19.9982 8.58975Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

3
core/modules/navigation/assets/icons/structure.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.75 10.5H20.25C20.6478 10.5 21.0294 10.342 21.3107 10.0607C21.592 9.77936 21.75 9.39782 21.75 9V4.5C21.75 4.10218 21.592 3.72064 21.3107 3.43934C21.0294 3.15804 20.6478 3 20.25 3H15.75C15.3522 3 14.9706 3.15804 14.6893 3.43934C14.408 3.72064 14.25 4.10218 14.25 4.5V6H13.5C12.7044 6 11.9413 6.31607 11.3787 6.87868C10.8161 7.44129 10.5 8.20435 10.5 9V11.25H7.5V10.5C7.5 10.1022 7.34196 9.72064 7.06066 9.43934C6.77936 9.15804 6.39782 9 6 9H3C2.60218 9 2.22064 9.15804 1.93934 9.43934C1.65804 9.72064 1.5 10.1022 1.5 10.5V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H6C6.39782 15 6.77936 14.842 7.06066 14.5607C7.34196 14.2794 7.5 13.8978 7.5 13.5V12.75H10.5V15C10.5 15.7956 10.8161 16.5587 11.3787 17.1213C11.9413 17.6839 12.7044 18 13.5 18H14.25V19.5C14.25 19.8978 14.408 20.2794 14.6893 20.5607C14.9706 20.842 15.3522 21 15.75 21H20.25C20.6478 21 21.0294 20.842 21.3107 20.5607C21.592 20.2794 21.75 19.8978 21.75 19.5V15C21.75 14.6022 21.592 14.2206 21.3107 13.9393C21.0294 13.658 20.6478 13.5 20.25 13.5H15.75C15.3522 13.5 14.9706 13.658 14.6893 13.9393C14.408 14.2206 14.25 14.6022 14.25 15V16.5H13.5C13.1022 16.5 12.7206 16.342 12.4393 16.0607C12.158 15.7794 12 15.3978 12 15V9C12 8.60218 12.158 8.22064 12.4393 7.93934C12.7206 7.65804 13.1022 7.5 13.5 7.5H14.25V9C14.25 9.39782 14.408 9.77936 14.6893 10.0607C14.9706 10.342 15.3522 10.5 15.75 10.5ZM6 13.5H3V10.5H6V13.5ZM15.75 15H20.25V19.5H15.75V15ZM15.75 4.5H20.25V9H15.75V4.5Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

3
core/modules/navigation/assets/icons/toggle-left.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg class="sidebar-toggle__icon sidebar-toggle__icon--left" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 3.75H20.25C20.6478 3.75 21.0294 3.90804 21.3107 4.18934C21.592 4.47064 21.75 4.85218 21.75 5.25V18.75C21.75 19.1478 21.592 19.5294 21.3107 19.8107C21.0294 20.092 20.6478 20.25 20.25 20.25H3.75C3.35218 20.25 2.97064 20.092 2.68934 19.8107C2.40804 19.5294 2.25 19.1478 2.25 18.75V5.25C2.25 4.85218 2.40804 4.47064 2.68934 4.18934C2.97064 3.90804 3.35218 3.75 3.75 3.75ZM7.5 5.25H3.75V18.75H7.5V5.25ZM9 18.75H20.25V5.25H9V18.75ZM18.2505 12.0006C18.2505 12.1995 18.1715 12.3902 18.0308 12.5309C17.8902 12.6715 17.6994 12.7506 17.5005 12.7506H13.8108L15.5311 14.4699C15.6718 14.6107 15.7509 14.8015 15.7509 15.0006C15.7509 15.1996 15.6718 15.3905 15.5311 15.5312C15.3904 15.6719 15.1995 15.751 15.0005 15.751C14.8015 15.751 14.6106 15.6719 14.4699 15.5312L11.4699 12.5312C11.4001 12.4615 11.3448 12.3788 11.3071 12.2878C11.2693 12.1967 11.2499 12.0991 11.2499 12.0006C11.2499 11.902 11.2693 11.8044 11.3071 11.7134C11.3448 11.6223 11.4001 11.5396 11.4699 11.4699L14.4699 8.46993C14.6106 8.3292 14.8015 8.25014 15.0005 8.25014C15.1995 8.25014 15.3904 8.3292 15.5311 8.46993C15.6718 8.61066 15.7509 8.80154 15.7509 9.00056C15.7509 9.19958 15.6718 9.39045 15.5311 9.53119L13.8108 11.2506H17.5005C17.6994 11.2506 17.8902 11.3296 18.0308 11.4702C18.1715 11.6109 18.2505 11.8016 18.2505 12.0006Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
core/modules/navigation/assets/icons/toggle-right.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg class="sidebar-toggle__icon sidebar-toggle__icon--right" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 3.75H20.25C20.6478 3.75 21.0294 3.90804 21.3107 4.18934C21.592 4.47064 21.75 4.85218 21.75 5.25V18.75C21.75 19.1478 21.592 19.5294 21.3107 19.8107C21.0294 20.092 20.6478 20.25 20.25 20.25H3.75C3.35218 20.25 2.97064 20.092 2.68934 19.8107C2.40804 19.5294 2.25 19.1478 2.25 18.75V5.25C2.25 4.85218 2.40804 4.47064 2.68934 4.18934C2.97064 3.90804 3.35218 3.75 3.75 3.75ZM7.5 5.25H3.75V18.75H7.5V5.25ZM9 18.75H20.25V5.25H9V18.75ZM11.25 12.0004C11.25 11.8015 11.329 11.6107 11.4697 11.4701C11.6103 11.3294 11.8011 11.2504 12 11.2504H15.6897L13.9694 9.53104C13.8286 9.39031 13.7496 9.19944 13.7496 9.00042C13.7496 8.80139 13.8286 8.61052 13.9694 8.46979C14.1101 8.32906 14.301 8.25 14.5 8.25C14.699 8.25 14.8899 8.32906 15.0306 8.46979L18.0306 11.4698C18.1004 11.5394 18.1557 11.6222 18.1934 11.7132C18.2312 11.8043 18.2506 11.9019 18.2506 12.0004C18.2506 12.099 18.2312 12.1966 18.1934 12.2876C18.1557 12.3787 18.1004 12.4614 18.0306 12.531L15.0306 15.531C14.8899 15.6718 14.699 15.7508 14.5 15.7508C14.301 15.7508 14.1101 15.6718 13.9694 15.531C13.8286 15.3903 13.7496 15.1994 13.7496 15.0004C13.7496 14.8014 13.8286 14.6105 13.9694 14.4698L15.6897 12.7504H12C11.8011 12.7504 11.6103 12.6714 11.4697 12.5307C11.329 12.3901 11.25 12.1993 11.25 12.0004Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

3
core/modules/navigation/assets/icons/user.svg Executable file
View File

@@ -0,0 +1,3 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10 1.875C8.39303 1.875 6.82214 2.35152 5.486 3.24431C4.14985 4.1371 3.10844 5.40605 2.49348 6.8907C1.87852 8.37535 1.71762 10.009 2.03112 11.5851C2.34463 13.1612 3.11846 14.6089 4.25476 15.7452C5.39106 16.8815 6.8388 17.6554 8.4149 17.9689C9.99099 18.2824 11.6247 18.1215 13.1093 17.5065C14.594 16.8916 15.8629 15.8502 16.7557 14.514C17.6485 13.1779 18.125 11.607 18.125 10C18.1227 7.84581 17.266 5.78051 15.7427 4.25727C14.2195 2.73403 12.1542 1.87727 10 1.875ZM5.7875 15.4297C6.23964 14.7226 6.86251 14.1406 7.59869 13.7375C8.33488 13.3345 9.16069 13.1232 10 13.1232C10.8393 13.1232 11.6651 13.3345 12.4013 13.7375C13.1375 14.1406 13.7604 14.7226 14.2125 15.4297C13.0081 16.3664 11.5258 16.8749 10 16.8749C8.4742 16.8749 6.99193 16.3664 5.7875 15.4297ZM7.5 9.375C7.5 8.88055 7.64663 8.3972 7.92133 7.98607C8.19603 7.57495 8.58648 7.25452 9.04329 7.0653C9.50011 6.87608 10.0028 6.82657 10.4877 6.92304C10.9727 7.0195 11.4181 7.2576 11.7678 7.60723C12.1174 7.95686 12.3555 8.40232 12.452 8.88727C12.5484 9.37223 12.4989 9.87489 12.3097 10.3317C12.1205 10.7885 11.8001 11.179 11.3889 11.4537C10.9778 11.7284 10.4945 11.875 10 11.875C9.33696 11.875 8.70108 11.6116 8.23224 11.1428C7.7634 10.6739 7.5 10.038 7.5 9.375ZM15.1375 14.5633C14.4404 13.5532 13.4603 12.7717 12.3203 12.3172C12.9327 11.8349 13.3795 11.1737 13.5987 10.4257C13.8179 9.67766 13.7985 8.87992 13.5433 8.1434C13.2881 7.40687 12.8097 6.76819 12.1746 6.31616C11.5396 5.86414 10.7795 5.62123 10 5.62123C9.22052 5.62123 8.4604 5.86414 7.82536 6.31616C7.19033 6.76819 6.71193 7.40687 6.45671 8.1434C6.20149 8.87992 6.18212 9.67766 6.40131 10.4257C6.62049 11.1737 7.06734 11.8349 7.67969 12.3172C6.5397 12.7717 5.55956 13.5532 4.8625 14.5633C3.9817 13.5728 3.406 12.3488 3.20473 11.0387C3.00346 9.72856 3.1852 8.3882 3.72806 7.17898C4.27093 5.96977 5.15178 4.94326 6.26454 4.22308C7.3773 3.50289 8.67452 3.11972 10 3.11972C11.3255 3.11972 12.6227 3.50289 13.7355 4.22308C14.8482 4.94326 15.7291 5.96977 16.2719 7.17898C16.8148 8.3882 16.9966 9.72856 16.7953 11.0387C16.594 12.3488 16.0183 13.5728 15.1375 14.5633Z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

35
core/modules/navigation/css/base/admin-reset-styles.css Executable file
View File

@@ -0,0 +1,35 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Reset styles from parent theme.
* https://developer.mozilla.org/en-US/docs/Web/CSS/all
*/
[data-drupal-admin-styles] {
box-sizing: border-box;
}
[data-drupal-admin-styles] *:focus {
outline: var(--admin-toolbar-size-focus) solid var(--admin-toolbar-color-focus);
}
:where([data-drupal-admin-styles] :not(svg *)) {
all: revert;
box-sizing: border-box;
}
:where([data-drupal-admin-styles] :not(svg *)) button {
font-family: inherit;
}
:where([data-drupal-admin-styles] :not(svg *))::after,
:where([data-drupal-admin-styles] :not(svg *))::before {
all: revert;
box-sizing: border-box;
}

28
core/modules/navigation/css/base/admin-reset-styles.pcss.css Executable file
View File

@@ -0,0 +1,28 @@
/**
* @file
* Reset styles from parent theme.
* https://developer.mozilla.org/en-US/docs/Web/CSS/all
*/
[data-drupal-admin-styles] {
box-sizing: border-box;
*:focus {
outline: var(--admin-toolbar-size-focus) solid var(--admin-toolbar-color-focus);
}
}
:where([data-drupal-admin-styles] :not(svg *)) {
all: revert;
box-sizing: border-box;
button {
font-family: inherit;
}
&::after,
&::before {
all: revert;
box-sizing: border-box;
}
}

18
core/modules/navigation/css/base/fonts.css Executable file
View File

@@ -0,0 +1,18 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Admin toolbar fonts.
*/
@font-face {
font-family: Inter;
src: url("../../assets/fonts/inter-var.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}

11
core/modules/navigation/css/base/fonts.pcss.css Executable file
View File

@@ -0,0 +1,11 @@
/**
* @file
* Admin toolbar fonts.
*/
@font-face {
font-family: Inter;
src: url("../../assets/fonts/inter-var.woff2") format("woff2");
font-weight: 100 900;
font-display: swap;
}

14
core/modules/navigation/css/base/layout-builder.css Executable file
View File

@@ -0,0 +1,14 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
.admin-toolbar .layout-builder-block {
padding: 0;
}
#navigation-layout .layout-builder {
border: none;
}

7
core/modules/navigation/css/base/layout-builder.pcss.css Executable file
View File

@@ -0,0 +1,7 @@
.admin-toolbar .layout-builder-block {
padding: 0;
}
#navigation-layout .layout-builder {
border: none;
}

9
core/modules/navigation/css/base/media-queries.css Executable file
View File

@@ -0,0 +1,9 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/ /*
* Media query breakpoints.
* Processed by postcss/postcss-custom-media.
*/

9
core/modules/navigation/css/base/media-queries.pcss.css Executable file
View File

@@ -0,0 +1,9 @@
/*
* Media query breakpoints.
* Processed by postcss/postcss-custom-media.
*/
@custom-media --admin-toolbar-tablet (min-width: 560px);
@custom-media --admin-toolbar-desktop (min-width: 1024px);
@custom-media --admin-toolbar-reduced-motion (prefers-reduced-motion);
@custom-media --forced-colors (forced-colors: active);

178
core/modules/navigation/css/base/variables.css Executable file
View File

@@ -0,0 +1,178 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* This is a universal size that helps in the case of themes with a size of 10 pixels.
We need it root to calculate the size of the displace in .dialog-off-canvas-main-canvas */
/* prettier-ignore */
:root {
/* stylelint-disable-next-line */
--admin-toolbar-rem: max(1rem, 16PX); /* Workaround until postcss-px-to-rem is removed so this is not converted to rems. */
}
[data-drupal-admin-styles] {
/*
* Color Palette.
*/
--admin-toolbar-color-focus: var(--drupal-admin-color-focus, var(--admin-toolbar-color-green-300));
--admin-toolbar-size-focus: var(--drupal-admin-size-focus, 2px);
/* Blue variations. */
--admin-toolbar-color-blue-070: var(--drupal-admin-color-blue-070, #dbe8ff);
--admin-toolbar-color-blue-100: var(--drupal-admin-color-blue-100, #ccdfff);
--admin-toolbar-color-blue-200: var(--drupal-admin-color-blue-200, #94bbff);
--admin-toolbar-color-blue-300: var(--drupal-admin-color-blue-300, #669eff);
--admin-toolbar-color-blue-400: var(--drupal-admin-color-blue-400, #347efe);
--admin-toolbar-color-blue-450: var(--drupal-admin-color-blue-450, #015efe);
--admin-toolbar-color-blue-500: var(--drupal-admin-color-blue-500, #004bcc);
--admin-toolbar-color-blue-600: var(--drupal-admin-color-blue-600, #0041b1);
--admin-toolbar-color-blue-650: var(--drupal-admin-color-blue-650, #00389a);
--admin-toolbar-color-blue-700: var(--drupal-admin-color-blue-700, #002566);
--admin-toolbar-color-blue-800: var(--drupal-admin-color-blue-800, #001333);
/* Gray variations. */
--admin-toolbar-color-gray-020: var(--drupal-admin-color-gray-020, #f8f9fc);
--admin-toolbar-color-gray-050: var(--drupal-admin-color-gray-050, #f3f5f9);
--admin-toolbar-color-gray-070: var(--drupal-admin-color-gray-070, #e3e9f2);
--admin-toolbar-color-gray-100: var(--drupal-admin-color-gray-100, #d8dfea);
--admin-toolbar-color-gray-200: var(--drupal-admin-color-gray-200, #cfd4dd);
--admin-toolbar-color-gray-300: var(--drupal-admin-color-gray-300, #b8c1d0);
--admin-toolbar-color-gray-400: var(--drupal-admin-color-gray-400, #a2acbe);
--admin-toolbar-color-gray-500: var(--drupal-admin-color-gray-500, #8590a3);
--admin-toolbar-color-gray-600: var(--drupal-admin-color-gray-600, #798291);
--admin-toolbar-color-gray-700: var(--drupal-admin-color-gray-700, #6d7583);
--admin-toolbar-color-gray-800: var(--drupal-admin-color-gray-800, #4f5661);
--admin-toolbar-color-gray-900: var(--drupal-admin-color-gray-900, #323946);
--admin-toolbar-color-gray-950: var(--drupal-admin-color-gray-950, #1f242d);
--admin-toolbar-color-gray-990: var(--drupal-admin-color-gray-990, #13161a);
/* Orange. */
--admin-toolbar-color-orange-020: var(--drupal-admin-color-orange-020, #fff7e0);
--admin-toolbar-color-orange-050: var(--drupal-admin-color-orange-050, #ffefc2);
--admin-toolbar-color-orange-070: var(--drupal-admin-color-orange-070, #ffe499);
--admin-toolbar-color-orange-100: var(--drupal-admin-color-orange-100, #fdd568);
--admin-toolbar-color-orange-200: var(--drupal-admin-color-orange-200, #ffc629);
--admin-toolbar-color-orange-300: var(--drupal-admin-color-orange-300, #f5b400);
/* Red. */
--admin-toolbar-color-red-020: var(--drupal-admin-color-red-020, #ffe5e0);
--admin-toolbar-color-red-050: var(--drupal-admin-color-red-050, #ffccc2);
--admin-toolbar-color-red-070: var(--drupal-admin-color-red-070, #fa9);
--admin-toolbar-color-red-100: var(--drupal-admin-color-red-100, #fd8168);
--admin-toolbar-color-red-200: var(--drupal-admin-color-red-200, #ff4d29);
--admin-toolbar-color-red-300: var(--drupal-admin-color-red-300, #ff2b00);
--admin-toolbar-color-red-400: var(--drupal-admin-color-red-400, #e52600);
--admin-toolbar-color-red-500: var(--drupal-admin-color-red-500, #c22000);
--admin-toolbar-color-red-600: var(--drupal-admin-color-red-600, #991a00);
/* Green. */
--admin-toolbar-color-green-020: var(--drupal-admin-color-green-020, #ccffe7);
--admin-toolbar-color-green-050: var(--drupal-admin-color-green-050, #9cfccf);
--admin-toolbar-color-green-070: var(--drupal-admin-color-green-070, #3df59f);
--admin-toolbar-color-green-100: var(--drupal-admin-color-green-100, #2ce890);
--admin-toolbar-color-green-200: var(--drupal-admin-color-green-200, #18dc81);
--admin-toolbar-color-green-300: var(--drupal-admin-color-green-300, #00cc6d);
--admin-toolbar-color-green-400: var(--drupal-admin-color-green-400, #009952);
--admin-toolbar-color-green-500: var(--drupal-admin-color-green-500, #008044);
--admin-toolbar-color-green-600: var(--drupal-admin-color-green-600, #005c31);
/* White. */
--admin-toolbar-color-white: var(--drupal-admin-color-white, #fff);
/* Expanded background color. */
--admin-toolbar-color-expanded: rgba(231, 234, 243, 0.5); /* --admin-toolbar-color-gray-050 */
/* Fonts. */
--admin-toolbar-font-family: inter, sans-serif;
/* Shadows. */
--admin-toolbar-color-shadow-0: rgba(0, 0, 0, 0);
--admin-toolbar-color-shadow-6: rgba(0, 0, 0, 0.06);
--admin-toolbar-color-shadow-8: rgba(0, 0, 0, 0.08);
--admin-toolbar-color-shadow-15: rgba(0, 0, 0, 0.15);
/**
* Spaces.
*/
--admin-toolbar-space-4: var(--drupal-admin-space-4, calc(0.25 * var(--admin-toolbar-rem))); /* 0.25 * 16px = 4px */
--admin-toolbar-space-8: var(--drupal-admin-space-8, calc(0.5 * var(--admin-toolbar-rem))); /* 0.5 * 16px = 8px */
--admin-toolbar-space-12: var(--drupal-admin-space-12, calc(0.75 * var(--admin-toolbar-rem))); /* 0.75 * 16px = 12px */
--admin-toolbar-space-16: var(--drupal-admin-space-16, var(--admin-toolbar-rem)); /* 16px = 16px */
--admin-toolbar-space-20: var(--drupal-admin-space-20, calc(1.25 * var(--admin-toolbar-rem))); /* 1.25 * 16px = 20px */
--admin-toolbar-space-24: var(--drupal-admin-space-24, calc(1.5 * var(--admin-toolbar-rem))); /* 1.5 * 16px = 24px */
--admin-toolbar-space-32: var(--drupal-admin-space-32, calc(2 * var(--admin-toolbar-rem))); /* 2 * 16px = 32px */
--admin-toolbar-space-40: var(--drupal-admin-space-40, calc(2.5 * var(--admin-toolbar-rem))); /* 2.5 * 16px = 40px */
--admin-toolbar-space-48: var(--drupal-admin-space-48, calc(3 * var(--admin-toolbar-rem))); /* 3 * 16px = 48px */
--admin-toolbar-space-56: var(--drupal-admin-space-56, calc(3.5 * var(--admin-toolbar-rem))); /* 3.5 * 16px = 56px */
--admin-toolbar-space-64: var(--drupal-admin-space-64, calc(4 * var(--admin-toolbar-rem))); /* 4 * 16px = 64px */
--admin-toolbar-space-72: var(--drupal-admin-space-72, calc(4.5 * var(--admin-toolbar-rem))); /* 4.5 * 16px = 72px */
--admin-toolbar-space-80: var(--drupal-admin-space-80, calc(5 * var(--admin-toolbar-rem))); /* 5 * 16px = 80px */
--admin-toolbar-space-96: var(--drupal-admin-space-96, calc(6 * var(--admin-toolbar-rem))); /* 6 * 16px = 96px */
--admin-toolbar-popover-width: calc(16 * var(--admin-toolbar-rem));
/**
* Font sizes and line heights.
* 1rem = 16px if font root is 100% and browser defaults are used.
*/
/* Heading styles. */
--admin-toolbar-font-size-heading-xs: var(--drupal-admin-font-size-heading-xs, calc(0.875 * var(--admin-toolbar-rem))); /* 14px */
--admin-toolbar-line-height-heading-xs: var(--drupal-admin-line-height-heading-xs, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-heading-sm: var(--drupal-admin-font-size-heading-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-line-height-heading-sm: var(--drupal-admin-line-height-heading-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-heading-md: var(--drupal-admin-font-size-heading-md, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */
--admin-toolbar-line-height-heading-md: var(--drupal-admin-line-height-heading-md, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-heading-lg: var(--drupal-admin-font-size-heading-lg, calc(1.25 * var(--admin-toolbar-rem))); /* 20px */
--admin-toolbar-line-height-heading-lg: var(--drupal-admin-line-height-heading-lg, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-heading-xl: var(--drupal-admin-font-size-heading-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-line-height-heading-xl: var(--drupal-admin-line-height-heading-xl, calc(2 * var(--admin-toolbar-rem))); /* 32px */
--admin-toolbar-font-size-heading-2xl: var(--drupal-admin-font-size-heading-2xl, calc(1.875 * var(--admin-toolbar-rem))); /* 30px */
--admin-toolbar-line-height-heading-2xl: var(--drupal-admin-line-height-heading-2xl, calc(1.5 * var(--admin-toolbar-rem))); /* 40px */
--admin-toolbar-font-size-heading-3xl: var(--drupal-admin-font-size-heading-3xl, calc(2.25 * var(--admin-toolbar-rem))); /* 36px */
--admin-toolbar-line-height-heading-3xl: var(--drupal-admin-line-height-heading-3xl, calc(3 * var(--admin-toolbar-rem))); /* 48px */
/* Label styles. */
--admin-toolbar-font-size-label-xs: var(--drupal-admin-font-size-label-xs, calc(0.625 * var(--admin-toolbar-rem))); /* 10px */
--admin-toolbar-line-height-label-xs: var(--drupal-admin-line-height-label-xs, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-sm: var(--drupal-admin-font-size-label-sm, calc(0.75 * var(--admin-toolbar-rem))); /* 12px */
--admin-toolbar-line-height-label-sm: var(--drupal-admin-line-height-label-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-md: var(--drupal-admin-font-size-label-md, calc(0.875 * var(--admin-toolbar-rem))); /* 14px */
--admin-toolbar-line-height-label-md: var(--drupal-admin-line-height-label-md, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-lg: var(--drupal-admin-font-size-label-lg, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-line-height-label-lg: var(--drupal-admin-line-height-label-lg, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-xl: var(--drupal-admin-font-size-label-xl, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */
--admin-toolbar-line-height-label-xl: var(--drupal-admin-line-height-label-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
/* Other styles. */
--admin-toolbar-font-size-info-xs: var(--drupal-admin-font-size-info-xs, calc(0.75 * var(--admin-toolbar-rem))); /* 12px */
--admin-toolbar-line-height-info-xs: var(--drupal-admin-line-height-info-xs, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-info-sm: var(--drupal-admin-font-size-info-sm, calc(0.875 * var(--admin-toolbar-rem))); /* 14px */
--admin-toolbar-line-height-info-sm: var(--drupal-admin-line-height-info-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-info-md: var(--drupal-admin-font-size-info-md, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-line-height-info-md: var(--drupal-admin-line-height-info-md, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-info-lg: var(--drupal-admin-font-size-info-lg, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */
--admin-toolbar-line-height-info-lg: var(--drupal-admin-line-height-info-lg, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-info-xl: var(--drupal-admin-font-size-info-xl, calc(1.25 * var(--admin-toolbar-rem))); /* 20px */
--admin-toolbar-line-height-info-xl: var(--drupal-admin-line-height-info-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
/**
* Letter spacings.
*/
--admin-toolbar-letter-spacing-0-8: var(--drupal-admin-letter-spacing-0-8, calc(0.05 * var(--admin-toolbar-rem))); /* 0.8px */
--admin-toolbar-letter-spacing-0-06: var(--drupal-admin-letter-spacing-0-06, calc(0.00375 * var(--admin-toolbar-rem))); /* 0.06px */
/**
* Z-index.
*
* @see https://www.drupal.org/docs/theming-drupal/z-indexes-in-drupal-8
*/
--admin-toolbar-z-index-admin-footer: var(--drupal-admin-z-index-footer, 40);
--admin-toolbar-z-index-header: var(--drupal-admin-z-index-header, 99);
--admin-toolbar-z-index-top-bar: var(--drupal-admin-z-index-top-bar, 490);
--admin-toolbar-z-index-admin-toolbar-control-bar: var(--drupal-admin-z-index-admin-toolbar-control-bar, 499);
--admin-toolbar-z-index-overlay: var(--drupal-admin-z-index-overlay, 500);
--admin-toolbar-z-index: var(--drupal-admin-z-index, 501);
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, 601);
--admin-toolbar-z-index-footer: var(--drupal-admin-z-index-footer, 701);
--admin-toolbar-z-index-tooltip: var(--drupal-admin-z-index-tooltip, 801);
}
/**
* Transitions.
*/
[data-admin-toolbar-transitions] {
--admin-toolbar-transition: 150ms ease-out;
}
@media (prefers-reduced-motion) {
[data-drupal-admin-styles] {
--admin-toolbar-transition: 0s linear;
}
}

177
core/modules/navigation/css/base/variables.pcss.css Executable file
View File

@@ -0,0 +1,177 @@
@import "../base/media-queries.pcss.css";
/* This is a universal size that helps in the case of themes with a size of 10 pixels.
We need it root to calculate the size of the displace in .dialog-off-canvas-main-canvas */
/* prettier-ignore */
:root {
/* stylelint-disable-next-line */
--admin-toolbar-rem: max(1rem, 16PX); /* Workaround until postcss-px-to-rem is removed so this is not converted to rems. */
}
[data-drupal-admin-styles] {
/*
* Color Palette.
*/
--admin-toolbar-color-focus: var(--drupal-admin-color-focus, var(--admin-toolbar-color-green-300));
--admin-toolbar-size-focus: var(--drupal-admin-size-focus, 2px);
/* Blue variations. */
--admin-toolbar-color-blue-070: var(--drupal-admin-color-blue-070, #dbe8ff);
--admin-toolbar-color-blue-100: var(--drupal-admin-color-blue-100, #ccdfff);
--admin-toolbar-color-blue-200: var(--drupal-admin-color-blue-200, #94bbff);
--admin-toolbar-color-blue-300: var(--drupal-admin-color-blue-300, #669eff);
--admin-toolbar-color-blue-400: var(--drupal-admin-color-blue-400, #347efe);
--admin-toolbar-color-blue-450: var(--drupal-admin-color-blue-450, #015efe);
--admin-toolbar-color-blue-500: var(--drupal-admin-color-blue-500, #004bcc);
--admin-toolbar-color-blue-600: var(--drupal-admin-color-blue-600, #0041b1);
--admin-toolbar-color-blue-650: var(--drupal-admin-color-blue-650, #00389a);
--admin-toolbar-color-blue-700: var(--drupal-admin-color-blue-700, #002566);
--admin-toolbar-color-blue-800: var(--drupal-admin-color-blue-800, #001333);
/* Gray variations. */
--admin-toolbar-color-gray-020: var(--drupal-admin-color-gray-020, #f8f9fc);
--admin-toolbar-color-gray-050: var(--drupal-admin-color-gray-050, #f3f5f9);
--admin-toolbar-color-gray-070: var(--drupal-admin-color-gray-070, #e3e9f2);
--admin-toolbar-color-gray-100: var(--drupal-admin-color-gray-100, #d8dfea);
--admin-toolbar-color-gray-200: var(--drupal-admin-color-gray-200, #cfd4dd);
--admin-toolbar-color-gray-300: var(--drupal-admin-color-gray-300, #b8c1d0);
--admin-toolbar-color-gray-400: var(--drupal-admin-color-gray-400, #a2acbe);
--admin-toolbar-color-gray-500: var(--drupal-admin-color-gray-500, #8590a3);
--admin-toolbar-color-gray-600: var(--drupal-admin-color-gray-600, #798291);
--admin-toolbar-color-gray-700: var(--drupal-admin-color-gray-700, #6d7583);
--admin-toolbar-color-gray-800: var(--drupal-admin-color-gray-800, #4f5661);
--admin-toolbar-color-gray-900: var(--drupal-admin-color-gray-900, #323946);
--admin-toolbar-color-gray-950: var(--drupal-admin-color-gray-950, #1f242d);
--admin-toolbar-color-gray-990: var(--drupal-admin-color-gray-990, #13161a);
/* Orange. */
--admin-toolbar-color-orange-020: var(--drupal-admin-color-orange-020, #fff7e0);
--admin-toolbar-color-orange-050: var(--drupal-admin-color-orange-050, #ffefc2);
--admin-toolbar-color-orange-070: var(--drupal-admin-color-orange-070, #ffe499);
--admin-toolbar-color-orange-100: var(--drupal-admin-color-orange-100, #fdd568);
--admin-toolbar-color-orange-200: var(--drupal-admin-color-orange-200, #ffc629);
--admin-toolbar-color-orange-300: var(--drupal-admin-color-orange-300, #f5b400);
/* Red. */
--admin-toolbar-color-red-020: var(--drupal-admin-color-red-020, #ffe5e0);
--admin-toolbar-color-red-050: var(--drupal-admin-color-red-050, #ffccc2);
--admin-toolbar-color-red-070: var(--drupal-admin-color-red-070, #fa9);
--admin-toolbar-color-red-100: var(--drupal-admin-color-red-100, #fd8168);
--admin-toolbar-color-red-200: var(--drupal-admin-color-red-200, #ff4d29);
--admin-toolbar-color-red-300: var(--drupal-admin-color-red-300, #ff2b00);
--admin-toolbar-color-red-400: var(--drupal-admin-color-red-400, #e52600);
--admin-toolbar-color-red-500: var(--drupal-admin-color-red-500, #c22000);
--admin-toolbar-color-red-600: var(--drupal-admin-color-red-600, #991a00);
/* Green. */
--admin-toolbar-color-green-020: var(--drupal-admin-color-green-020, #ccffe7);
--admin-toolbar-color-green-050: var(--drupal-admin-color-green-050, #9cfccf);
--admin-toolbar-color-green-070: var(--drupal-admin-color-green-070, #3df59f);
--admin-toolbar-color-green-100: var(--drupal-admin-color-green-100, #2ce890);
--admin-toolbar-color-green-200: var(--drupal-admin-color-green-200, #18dc81);
--admin-toolbar-color-green-300: var(--drupal-admin-color-green-300, #00cc6d);
--admin-toolbar-color-green-400: var(--drupal-admin-color-green-400, #009952);
--admin-toolbar-color-green-500: var(--drupal-admin-color-green-500, #008044);
--admin-toolbar-color-green-600: var(--drupal-admin-color-green-600, #005c31);
/* White. */
--admin-toolbar-color-white: var(--drupal-admin-color-white, #fff);
/* Expanded background color. */
--admin-toolbar-color-expanded: rgba(231, 234, 243, 0.5); /* --admin-toolbar-color-gray-050 */
/* Fonts. */
--admin-toolbar-font-family: inter, sans-serif;
/* Shadows. */
--admin-toolbar-color-shadow-0: rgba(0, 0, 0, 0);
--admin-toolbar-color-shadow-6: rgba(0, 0, 0, 0.06);
--admin-toolbar-color-shadow-8: rgba(0, 0, 0, 0.08);
--admin-toolbar-color-shadow-15: rgba(0, 0, 0, 0.15);
/**
* Spaces.
*/
--admin-toolbar-space-4: var(--drupal-admin-space-4, calc(0.25 * var(--admin-toolbar-rem))); /* 0.25 * 16px = 4px */
--admin-toolbar-space-8: var(--drupal-admin-space-8, calc(0.5 * var(--admin-toolbar-rem))); /* 0.5 * 16px = 8px */
--admin-toolbar-space-12: var(--drupal-admin-space-12, calc(0.75 * var(--admin-toolbar-rem))); /* 0.75 * 16px = 12px */
--admin-toolbar-space-16: var(--drupal-admin-space-16, var(--admin-toolbar-rem)); /* 16px = 16px */
--admin-toolbar-space-20: var(--drupal-admin-space-20, calc(1.25 * var(--admin-toolbar-rem))); /* 1.25 * 16px = 20px */
--admin-toolbar-space-24: var(--drupal-admin-space-24, calc(1.5 * var(--admin-toolbar-rem))); /* 1.5 * 16px = 24px */
--admin-toolbar-space-32: var(--drupal-admin-space-32, calc(2 * var(--admin-toolbar-rem))); /* 2 * 16px = 32px */
--admin-toolbar-space-40: var(--drupal-admin-space-40, calc(2.5 * var(--admin-toolbar-rem))); /* 2.5 * 16px = 40px */
--admin-toolbar-space-48: var(--drupal-admin-space-48, calc(3 * var(--admin-toolbar-rem))); /* 3 * 16px = 48px */
--admin-toolbar-space-56: var(--drupal-admin-space-56, calc(3.5 * var(--admin-toolbar-rem))); /* 3.5 * 16px = 56px */
--admin-toolbar-space-64: var(--drupal-admin-space-64, calc(4 * var(--admin-toolbar-rem))); /* 4 * 16px = 64px */
--admin-toolbar-space-72: var(--drupal-admin-space-72, calc(4.5 * var(--admin-toolbar-rem))); /* 4.5 * 16px = 72px */
--admin-toolbar-space-80: var(--drupal-admin-space-80, calc(5 * var(--admin-toolbar-rem))); /* 5 * 16px = 80px */
--admin-toolbar-space-96: var(--drupal-admin-space-96, calc(6 * var(--admin-toolbar-rem))); /* 6 * 16px = 96px */
--admin-toolbar-popover-width: calc(16 * var(--admin-toolbar-rem));
/**
* Font sizes and line heights.
* 1rem = 16px if font root is 100% and browser defaults are used.
*/
/* Heading styles. */
--admin-toolbar-font-size-heading-xs: var(--drupal-admin-font-size-heading-xs, calc(0.875 * var(--admin-toolbar-rem))); /* 14px */
--admin-toolbar-line-height-heading-xs: var(--drupal-admin-line-height-heading-xs, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-heading-sm: var(--drupal-admin-font-size-heading-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-line-height-heading-sm: var(--drupal-admin-line-height-heading-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-heading-md: var(--drupal-admin-font-size-heading-md, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */
--admin-toolbar-line-height-heading-md: var(--drupal-admin-line-height-heading-md, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-heading-lg: var(--drupal-admin-font-size-heading-lg, calc(1.25 * var(--admin-toolbar-rem))); /* 20px */
--admin-toolbar-line-height-heading-lg: var(--drupal-admin-line-height-heading-lg, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-heading-xl: var(--drupal-admin-font-size-heading-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-line-height-heading-xl: var(--drupal-admin-line-height-heading-xl, calc(2 * var(--admin-toolbar-rem))); /* 32px */
--admin-toolbar-font-size-heading-2xl: var(--drupal-admin-font-size-heading-2xl, calc(1.875 * var(--admin-toolbar-rem))); /* 30px */
--admin-toolbar-line-height-heading-2xl: var(--drupal-admin-line-height-heading-2xl, calc(1.5 * var(--admin-toolbar-rem))); /* 40px */
--admin-toolbar-font-size-heading-3xl: var(--drupal-admin-font-size-heading-3xl, calc(2.25 * var(--admin-toolbar-rem))); /* 36px */
--admin-toolbar-line-height-heading-3xl: var(--drupal-admin-line-height-heading-3xl, calc(3 * var(--admin-toolbar-rem))); /* 48px */
/* Label styles. */
--admin-toolbar-font-size-label-xs: var(--drupal-admin-font-size-label-xs, calc(0.625 * var(--admin-toolbar-rem))); /* 10px */
--admin-toolbar-line-height-label-xs: var(--drupal-admin-line-height-label-xs, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-sm: var(--drupal-admin-font-size-label-sm, calc(0.75 * var(--admin-toolbar-rem))); /* 12px */
--admin-toolbar-line-height-label-sm: var(--drupal-admin-line-height-label-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-md: var(--drupal-admin-font-size-label-md, calc(0.875 * var(--admin-toolbar-rem))); /* 14px */
--admin-toolbar-line-height-label-md: var(--drupal-admin-line-height-label-md, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-lg: var(--drupal-admin-font-size-label-lg, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-line-height-label-lg: var(--drupal-admin-line-height-label-lg, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-label-xl: var(--drupal-admin-font-size-label-xl, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */
--admin-toolbar-line-height-label-xl: var(--drupal-admin-line-height-label-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
/* Other styles. */
--admin-toolbar-font-size-info-xs: var(--drupal-admin-font-size-info-xs, calc(0.75 * var(--admin-toolbar-rem))); /* 12px */
--admin-toolbar-line-height-info-xs: var(--drupal-admin-line-height-info-xs, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-info-sm: var(--drupal-admin-font-size-info-sm, calc(0.875 * var(--admin-toolbar-rem))); /* 14px */
--admin-toolbar-line-height-info-sm: var(--drupal-admin-line-height-info-sm, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-font-size-info-md: var(--drupal-admin-font-size-info-md, var(--admin-toolbar-rem)); /* 16px */
--admin-toolbar-line-height-info-md: var(--drupal-admin-line-height-info-md, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-info-lg: var(--drupal-admin-font-size-info-lg, calc(1.125 * var(--admin-toolbar-rem))); /* 18px */
--admin-toolbar-line-height-info-lg: var(--drupal-admin-line-height-info-lg, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
--admin-toolbar-font-size-info-xl: var(--drupal-admin-font-size-info-xl, calc(1.25 * var(--admin-toolbar-rem))); /* 20px */
--admin-toolbar-line-height-info-xl: var(--drupal-admin-line-height-info-xl, calc(1.5 * var(--admin-toolbar-rem))); /* 24px */
/**
* Letter spacings.
*/
--admin-toolbar-letter-spacing-0-8: var(--drupal-admin-letter-spacing-0-8, calc(0.05 * var(--admin-toolbar-rem))); /* 0.8px */
--admin-toolbar-letter-spacing-0-06: var(--drupal-admin-letter-spacing-0-06, calc(0.00375 * var(--admin-toolbar-rem))); /* 0.06px */
/**
* Z-index.
*
* @see https://www.drupal.org/docs/theming-drupal/z-indexes-in-drupal-8
*/
--admin-toolbar-z-index-admin-footer: var(--drupal-admin-z-index-footer, 40);
--admin-toolbar-z-index-header: var(--drupal-admin-z-index-header, 99);
--admin-toolbar-z-index-top-bar: var(--drupal-admin-z-index-top-bar, 490);
--admin-toolbar-z-index-admin-toolbar-control-bar: var(--drupal-admin-z-index-admin-toolbar-control-bar, 499);
--admin-toolbar-z-index-overlay: var(--drupal-admin-z-index-overlay, 500);
--admin-toolbar-z-index: var(--drupal-admin-z-index, 501);
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, 601);
--admin-toolbar-z-index-footer: var(--drupal-admin-z-index-footer, 701);
--admin-toolbar-z-index-tooltip: var(--drupal-admin-z-index-tooltip, 801);
}
/**
* Transitions.
*/
[data-admin-toolbar-transitions] {
--admin-toolbar-transition: 150ms ease-out;
}
@media (--admin-toolbar-reduced-motion) {
[data-drupal-admin-styles] {
--admin-toolbar-transition: 0s linear;
}
}

39
core/modules/navigation/css/components/admin-toolbar-control-bar.css Executable file
View File

@@ -0,0 +1,39 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
:root {
--admin-toolbar-top-bar-height: var(-admin-toolbar-space-64);
}
.admin-toolbar-control-bar {
position: relative;
z-index: var(--admin-toolbar-z-index-admin-toolbar-control-bar);
display: flex;
padding: var(--admin-toolbar-space-4);
border-bottom: 1px solid var(--admin-toolbar-color-gray-100);
background-color: white;
font-family: var(--admin-toolbar-font-family);
}
@media (min-width: 64rem) {
.admin-toolbar-control-bar {
display: none;
}
}
.admin-toolbar-control-bar__burger {
align-self: start;
}
@media (min-width: 64rem) {
.admin-toolbar-control-bar__burger {
display: none;
}
}
.admin-toolbar-control-bar__content {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: space-between;
gap: var(--admin-toolbar-space-16);
width: 100%;
}

36
core/modules/navigation/css/components/admin-toolbar-control-bar.pcss.css Executable file
View File

@@ -0,0 +1,36 @@
@import "../base/media-queries.pcss.css";
:root {
--admin-toolbar-top-bar-height: var(-admin-toolbar-space-64);
}
.admin-toolbar-control-bar {
position: relative;
z-index: var(--admin-toolbar-z-index-admin-toolbar-control-bar);
display: flex;
padding: var(--admin-toolbar-space-4);
border-bottom: 1px solid var(--admin-toolbar-color-gray-100);
background-color: white;
font-family: var(--admin-toolbar-font-family);
@media (--admin-toolbar-desktop) {
display: none;
}
}
.admin-toolbar-control-bar__burger {
align-self: start;
@media (--admin-toolbar-desktop) {
display: none;
}
}
.admin-toolbar-control-bar__content {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: space-between;
gap: var(--admin-toolbar-space-16);
width: 100%;
}

354
core/modules/navigation/css/components/admin-toolbar.css Executable file
View File

@@ -0,0 +1,354 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore csvg cpath */
/**
* @file
* Admin Toolbar styles.
*/
/**
* Sidebar width is attached to the <body> element because it's used as a
* fallback value to the margin-inline-start property of the layout container.
*/
body {
--admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
--admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));
}
[data-admin-toolbar="expanded"] body {
--admin-toolbar-sidebar-width: 80vw;
}
@media (min-width: 35rem) {
[data-admin-toolbar="expanded"] body {
--admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
}
}
/* We apply transitions after page load to avoid shifts. */
[data-admin-toolbar-transitions] .admin-toolbar {
transition: transform var(--admin-toolbar-transition);
}
@media (min-width: 64rem) {
[data-admin-toolbar-transitions] .admin-toolbar {
transition: width var(--admin-toolbar-transition);
}
:is([data-admin-toolbar-transitions] .admin-toolbar) ~ .dialog-off-canvas-main-canvas {
transition: margin-inline-start var(--admin-toolbar-transition);
}
}
/**
* This zero height div has the [data-offset-left] attribute for
* Drupal.displace() to measure. It purposefully does not have any transitions
* because we want Drupal.displace() to measure the width immediately
*/
.admin-toolbar__displace-placeholder {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
}
@media (min-width: 64rem) {
.admin-toolbar__displace-placeholder {
width: var(--admin-toolbar-sidebar-width);
}
}
/**
* The Admin toolbar component.
*/
.admin-toolbar {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: var(--admin-toolbar-z-index);
display: flex;
flex-direction: column;
height: 100vh;
transform: translateX(-100%);
background-color: var(--admin-toolbar-color-white);
font-family: var(--admin-toolbar-font-family);
inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px);
}
[dir="rtl"] .admin-toolbar {
right: 0;
transform: translateX(100%);
}
@media (min-width: 64rem) {
[dir="rtl"] .admin-toolbar {
transform: none;
}
}
@media (min-width: 64rem) {
.admin-toolbar ~ .dialog-off-canvas-main-canvas {
margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
}
[dir="rtl"] :is(.admin-toolbar ~ .dialog-off-canvas-main-canvas) {
margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
}
}
[data-admin-toolbar="expanded"] .admin-toolbar {
transform: none;
}
@media (min-width: 64rem) {
.admin-toolbar {
transform: none;
}
}
@media only screen and (max-height: 18.75rem) {
.admin-toolbar {
min-height: 20rem;
}
}
.admin-toolbar__back-button {
display: none;
flex-grow: 0;
}
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
display: flex;
}
@media (min-width: 64rem) {
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__back-button {
display: none;
}
}
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
display: none;
}
@media (min-width: 64rem) {
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) .admin-toolbar__logo {
display: inline-flex;
}
}
.admin-toolbar__close-button {
flex-grow: 0;
justify-self: end;
margin-inline-start: auto;
}
@media (min-width: 64rem) {
.admin-toolbar__close-button {
display: none;
}
}
.admin-toolbar__expand-button {
display: none;
align-items: center;
justify-content: center;
width: calc(2.25 * var(--admin-toolbar-rem));
height: calc(2.25 * var(--admin-toolbar-rem));
margin-inline-start: calc(0.125 * var(--admin-toolbar-rem));
cursor: pointer;
color: var(--admin-toolbar-color-gray-500);
border: 1px solid var(--admin-toolbar-color-gray-300);
border-radius: 50%;
background-color: transparent;
}
.admin-toolbar__expand-button:hover {
color: var(--admin-toolbar-color-blue-700);
}
.admin-toolbar__expand-button::before {
display: block;
flex-shrink: 0;
width: calc(1 * var(--admin-toolbar-rem));
height: calc(1 * var(--admin-toolbar-rem));
content: "";
transition:
opacity var(--admin-toolbar-transition),
transform var(--admin-toolbar-transition);
opacity: 0;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
-webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
}
[data-admin-toolbar-transitions] .admin-toolbar__expand-button::before {
opacity: 1;
}
[dir="rtl"] .admin-toolbar__expand-button::before {
transform: rotate(180deg);
}
@media (forced-colors: active) {
.admin-toolbar__expand-button::before {
background: canvastext;
}
}
.admin-toolbar__expand-button[aria-expanded="true"]::before {
transform: rotate(180deg);
}
[dir="rtl"] .admin-toolbar__expand-button[aria-expanded="true"]::before {
transform: none;
}
@media (min-width: 64rem) {
.admin-toolbar__expand-button {
display: flex;
}
}
.admin-toolbar__header {
position: sticky;
z-index: var(--admin-toolbar-z-index-header);
inset-block-start: 0;
display: flex;
align-items: center;
justify-content: space-between;
margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
padding-block-start: var(--admin-toolbar-space-16);
background-color: var(--admin-toolbar-color-white);
}
.admin-toolbar__header + .toolbar-block {
margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
}
@media (min-width: 64rem) {
.admin-toolbar__header + .toolbar-block {
margin-block-start: 0;
}
}
@media (min-width: 64rem) {
.admin-toolbar__header:not(:has(.admin-toolbar__logo)) {
display: none;
}
}
@media (min-width: 64rem) {
.admin-toolbar__header {
position: static;
align-items: start;
margin-block-start: revert;
padding-block-start: revert;
padding-block-end: 0;
}
}
.admin-toolbar__item {
flex: 1 0 100%;
}
.admin-toolbar__logo {
display: inline-flex;
overflow: hidden;
border-radius: var(--admin-toolbar-space-8);
}
.admin-toolbar__logo:hover {
background-color: transparent;
}
.admin-toolbar__logo img {
display: block;
}
/**
* Scroll wrapper for Mobile.
*/
.admin-toolbar__scroll-wrapper {
display: flex;
overflow-y: auto;
flex-direction: column;
height: 100%;
background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
background-color: var(--admin-toolbar-color-white);
background-repeat: no-repeat;
background-attachment: local, scroll;
background-position-y: 3rem;
background-size:
100% 2.5rem,
100% 1rem;
}
@media (min-width: 64rem) {
.admin-toolbar__scroll-wrapper {
display: contents;
overflow-y: unset;
background: none;
}
}
/**
* Content region.
* Region where most of the content will be printed.
*/
.admin-toolbar__content {
display: grid;
gap: var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16);
padding-inline: var(--admin-toolbar-space-16);
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
}
@media (min-width: 64rem) {
.admin-toolbar__content {
display: flex;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;
flex-grow: 1;
padding-block-start: var(--admin-toolbar-space-16);
background:
linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
background-color: var(--admin-toolbar-color-white);
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size:
100% 2.5rem,
100% 2.5rem,
100% 1rem,
100% 1rem;
}
}
/**
* Sticky bottom region.
* Region with less used items and button for collapse.
*/
.admin-toolbar__footer {
z-index: var(--admin-toolbar-z-index-footer);
display: grid;
gap: var(--admin-toolbar-space-16);
margin-block-start: auto;
padding: var(--admin-toolbar-space-16);
border-block-start: 1px solid var(--admin-toolbar-color-gray-200);
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
}
@media (min-width: 64rem) {
.admin-toolbar__footer {
--admin-toolbar-z-index-footer: -1;
position: sticky;
bottom: 0;
background-color: var(--admin-toolbar-color-white);
}
}
/**
* Sidebar toggle.
*/
.admin-toolbar__toggle {
display: none;
}
@media (min-width: 64rem) {
.admin-toolbar__toggle {
display: flex;
}
}
[data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:hover + .admin-toolbar__tooltip),
[data-admin-toolbar="expanded"] :is([data-drupal-tooltip]:focus + .admin-toolbar__tooltip) {
display: none;
}
/**
* Element is used to overlay the content when Toolbar is expanded in smaller devices.
* It is created in the template templates/navigation.html.twig.
*/
.admin-toolbar-overlay {
position: fixed;
z-index: var(--admin-toolbar-z-index-overlay);
inset-block-start: 0;
inset-inline-start: 0;
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.14);
}
:where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay {
display: block;
}
@media (min-width: 64rem) {
.admin-toolbar-overlay {
display: none;
}
}

369
core/modules/navigation/css/components/admin-toolbar.pcss.css Executable file
View File

@@ -0,0 +1,369 @@
/* cspell:ignore csvg cpath */
/**
* @file
* Admin Toolbar styles.
*/
@import "../base/media-queries.pcss.css";
/**
* Sidebar width is attached to the <body> element because it's used as a
* fallback value to the margin-inline-start property of the layout container.
*/
body {
--admin-toolbar-sidebar-width: calc(4.5 * var(--admin-toolbar-rem));
--admin-toolbar-sidebar-header: calc(3.5 * var(--admin-toolbar-rem));
[data-admin-toolbar="expanded"] & {
--admin-toolbar-sidebar-width: 80vw;
@media (--admin-toolbar-tablet) {
--admin-toolbar-sidebar-width: calc(16.5 * var(--admin-toolbar-rem));
}
}
}
/* We apply transitions after page load to avoid shifts. */
[data-admin-toolbar-transitions] {
.admin-toolbar {
transition: transform var(--admin-toolbar-transition);
@media (--admin-toolbar-desktop) {
transition: width var(--admin-toolbar-transition);
~ .dialog-off-canvas-main-canvas {
transition: margin-inline-start var(--admin-toolbar-transition);
}
}
}
}
/**
* This zero height div has the [data-offset-left] attribute for
* Drupal.displace() to measure. It purposefully does not have any transitions
* because we want Drupal.displace() to measure the width immediately
*/
.admin-toolbar__displace-placeholder {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
@media (--admin-toolbar-desktop) {
width: var(--admin-toolbar-sidebar-width);
}
}
/**
* The Admin toolbar component.
*/
.admin-toolbar {
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
z-index: var(--admin-toolbar-z-index);
display: flex;
flex-direction: column;
height: 100vh;
transform: translateX(-100%);
background-color: var(--admin-toolbar-color-white);
font-family: var(--admin-toolbar-font-family);
inline-size: calc(var(--admin-toolbar-sidebar-width) + 1px);
[dir="rtl"] & {
right: 0;
transform: translateX(100%);
@media (--admin-toolbar-desktop) {
transform: none;
}
}
& ~ .dialog-off-canvas-main-canvas {
@media (--admin-toolbar-desktop) {
margin-inline-start: var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width));
[dir="rtl"] & {
margin-inline-start: var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width));
}
}
}
[data-admin-toolbar="expanded"] & {
transform: none;
}
@media (--admin-toolbar-desktop) {
transform: none;
}
@media only screen and (max-height: 300px) {
min-height: 20rem;
}
}
.admin-toolbar__back-button {
display: none;
flex-grow: 0;
}
.admin-toolbar:has([data-toolbar-popover-control][aria-expanded="true"]) {
.admin-toolbar__back-button {
display: flex;
@media (--admin-toolbar-desktop) {
display: none;
}
}
.admin-toolbar__logo {
display: none;
@media (--admin-toolbar-desktop) {
display: inline-flex;
}
}
}
.admin-toolbar__close-button {
flex-grow: 0;
justify-self: end;
margin-inline-start: auto;
@media (--admin-toolbar-desktop) {
display: none;
}
}
.admin-toolbar__expand-button {
display: none;
align-items: center;
justify-content: center;
width: calc(2.25 * var(--admin-toolbar-rem));
height: calc(2.25 * var(--admin-toolbar-rem));
margin-inline-start: calc(0.125 * var(--admin-toolbar-rem));
cursor: pointer;
color: var(--admin-toolbar-color-gray-500);
border: 1px solid var(--admin-toolbar-color-gray-300);
border-radius: 50%;
background-color: transparent;
&:hover {
color: var(--admin-toolbar-color-blue-700);
}
&::before {
display: block;
flex-shrink: 0;
width: calc(1 * var(--admin-toolbar-rem));
height: calc(1 * var(--admin-toolbar-rem));
content: "";
transition:
opacity var(--admin-toolbar-transition),
transform var(--admin-toolbar-transition);
opacity: 0;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% auto;
mask-image: url(../../assets/icons/chevron.svg);
[data-admin-toolbar-transitions] & {
opacity: 1;
}
[dir="rtl"] & {
transform: rotate(180deg);
}
@media (--forced-colors) {
background: canvastext;
}
}
&[aria-expanded="true"] {
&::before {
transform: rotate(180deg);
[dir="rtl"] & {
transform: none;
}
}
}
@media (--admin-toolbar-desktop) {
display: flex;
}
}
.admin-toolbar__header {
position: sticky;
z-index: var(--admin-toolbar-z-index-header);
inset-block-start: 0;
display: flex;
align-items: center;
justify-content: space-between;
margin-block-start: calc(var(--admin-toolbar-sidebar-header) * -1);
padding-block-start: var(--admin-toolbar-space-16);
background-color: var(--admin-toolbar-color-white);
& + .toolbar-block {
margin-block-start: calc(var(--admin-toolbar-space-10) * -1);
@media (--admin-toolbar-desktop) {
margin-block-start: 0;
}
}
&:not(:has(.admin-toolbar__logo)) {
@media (--admin-toolbar-desktop) {
display: none;
}
}
@media (--admin-toolbar-desktop) {
position: static;
align-items: start;
margin-block-start: revert;
padding-block-start: revert;
padding-block-end: 0;
}
}
.admin-toolbar__item {
flex: 1 0 100%;
}
.admin-toolbar__logo {
display: inline-flex;
overflow: hidden;
border-radius: var(--admin-toolbar-space-8);
&:hover {
background-color: transparent;
}
& img {
display: block;
}
}
/**
* Scroll wrapper for Mobile.
*/
.admin-toolbar__scroll-wrapper {
display: flex;
overflow-y: auto;
flex-direction: column;
height: 100%;
background: linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)), radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0));
background-color: var(--admin-toolbar-color-white);
background-repeat: no-repeat;
background-attachment: local, scroll;
background-position-y: 48px;
background-size:
100% 40px,
100% 16px;
@media (--admin-toolbar-desktop) {
display: contents;
overflow-y: unset;
background: none;
}
}
/**
* Content region.
* Region where most of the content will be printed.
*/
.admin-toolbar__content {
display: grid;
gap: var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-sidebar-header) var(--admin-toolbar-space-16);
padding-inline: var(--admin-toolbar-space-16);
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
@media (--admin-toolbar-desktop) {
display: flex;
overflow-x: hidden;
overflow-y: auto;
flex-direction: column;
flex-grow: 1;
padding-block-start: var(--admin-toolbar-space-16);
background:
linear-gradient(var(--admin-toolbar-color-white) 30%, var(--admin-toolbar-color-white)),
linear-gradient(var(--admin-toolbar-color-white), var(--admin-toolbar-color-white) 80%) 0 100%,
radial-gradient(farthest-side at 50% 0, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)),
radial-gradient(farthest-side at 50% 100%, var(--admin-toolbar-color-shadow-15), var(--admin-toolbar-color-shadow-0)) 0 100%;
background-color: var(--admin-toolbar-color-white);
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
background-size:
100% 40px,
100% 40px,
100% 16px,
100% 16px;
}
}
/**
* Sticky bottom region.
* Region with less used items and button for collapse.
*/
.admin-toolbar__footer {
z-index: var(--admin-toolbar-z-index-footer);
display: grid;
gap: var(--admin-toolbar-space-16);
margin-block-start: auto;
padding: var(--admin-toolbar-space-16);
border-block-start: 1px solid var(--admin-toolbar-color-gray-200);
border-inline-end: 1px solid var(--admin-toolbar-color-gray-100);
@media (--admin-toolbar-desktop) {
--admin-toolbar-z-index-footer: -1;
position: sticky;
bottom: 0;
background-color: var(--admin-toolbar-color-white);
}
}
/**
* Sidebar toggle.
*/
.admin-toolbar__toggle {
display: none;
@media (--admin-toolbar-desktop) {
display: flex;
}
}
[data-drupal-tooltip]:hover + .admin-toolbar__tooltip,
[data-drupal-tooltip]:focus + .admin-toolbar__tooltip {
[data-admin-toolbar="expanded"] & {
display: none;
}
}
/**
* Element is used to overlay the content when Toolbar is expanded in smaller devices.
* It is created in the template templates/navigation.html.twig.
*/
.admin-toolbar-overlay {
position: fixed;
z-index: var(--admin-toolbar-z-index-overlay);
inset-block-start: 0;
inset-inline-start: 0;
display: none;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.14);
:where([data-admin-toolbar="expanded"]) & {
display: block;
}
@media (--admin-toolbar-desktop) {
display: none;
}
}

29
core/modules/navigation/css/components/body-scroll-lock.css Executable file
View File

@@ -0,0 +1,29 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Body scroll lock with css only.
*/
[data-admin-toolbar-body-scroll="locked"] {
overflow: clip;
}
[data-admin-toolbar-body-scroll="locked"] body {
overflow: clip;
}
@media (min-width: 64rem) {
[data-admin-toolbar-body-scroll="locked"] {
overflow: initial;
}
[data-admin-toolbar-body-scroll="locked"] body {
overflow: initial;
}
}

22
core/modules/navigation/css/components/body-scroll-lock.pcss.css Executable file
View File

@@ -0,0 +1,22 @@
/**
* @file
* Body scroll lock with css only.
*/
@import "../base/media-queries.pcss.css";
[data-admin-toolbar-body-scroll="locked"] {
overflow: clip;
body {
overflow: clip;
}
@media (--admin-toolbar-desktop) {
overflow: initial;
body {
overflow: initial;
}
}
}

65
core/modules/navigation/css/components/toolbar-block.css Executable file
View File

@@ -0,0 +1,65 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore wght */
/**
* @file
* Toolbar block styles.
*/
.toolbar-block {
display: grid;
gap: var(--admin-toolbar-space-4);
}
.admin-toolbar__content .toolbar-block:nth-last-child(n + 2)::after {
margin-top: var(--admin-toolbar-space-8);
content: "";
border-top: 1px solid var(--admin-toolbar-color-gray-200);
}
.toolbar-block__list {
display: grid;
margin: 0;
padding: 0;
list-style-type: none;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
gap: var(--admin-toolbar-space-4);
}
.toolbar-block__list-item {
display: grid;
}
.toolbar-block__title {
position: relative;
margin: 0;
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-8);
letter-spacing: var(--admin-toolbar-letter-spacing-0-8);
text-transform: uppercase;
color: var(--admin-toolbar-color-gray-600);
font-family: inherit;
font-size: var(--admin-toolbar-font-size-label-xs);
line-height: var(--admin-toolbar-line-height-label-xs);
font-variation-settings: "wght" 500;
}
html:not([data-admin-toolbar="expanded"]) .toolbar-block__title,
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--admin-toolbar-color-gray-600);
font-size: 0;
block-size: calc(2.5 * var(--admin-toolbar-rem));
inline-size: calc(2.5 * var(--admin-toolbar-rem));
}
:is(html:not([data-admin-toolbar="expanded"]) .toolbar-block__title, html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-block__title)::before {
position: absolute;
display: block;
width: var(--admin-toolbar-space-4);
height: var(--admin-toolbar-space-4);
content: "";
border-radius: 50%;
background-color: currentColor;
}

69
core/modules/navigation/css/components/toolbar-block.pcss.css Executable file
View File

@@ -0,0 +1,69 @@
/* cspell:ignore wght */
/**
* @file
* Toolbar block styles.
*/
.toolbar-block {
display: grid;
gap: var(--admin-toolbar-space-4);
.admin-toolbar__content & {
&:nth-last-child(n + 2) {
&::after {
margin-top: var(--admin-toolbar-space-8);
content: "";
border-top: 1px solid var(--admin-toolbar-color-gray-200);
}
}
}
}
.toolbar-block__list {
display: grid;
margin: 0;
padding: 0;
list-style-type: none;
word-wrap: break-word;
hyphens: auto;
gap: var(--admin-toolbar-space-4);
}
.toolbar-block__list-item {
display: grid;
}
.toolbar-block__title {
position: relative;
margin: 0;
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-8);
letter-spacing: var(--admin-toolbar-letter-spacing-0-8);
text-transform: uppercase;
color: var(--admin-toolbar-color-gray-600);
font-family: inherit;
font-size: var(--admin-toolbar-font-size-label-xs);
line-height: var(--admin-toolbar-line-height-label-xs);
font-variation-settings: "wght" 500;
html:not([data-admin-toolbar="expanded"]) &,
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] & {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: var(--admin-toolbar-color-gray-600);
font-size: 0;
block-size: calc(2.5 * var(--admin-toolbar-rem));
inline-size: calc(2.5 * var(--admin-toolbar-rem));
&::before {
position: absolute;
display: block;
width: var(--admin-toolbar-space-4);
height: var(--admin-toolbar-space-4);
content: "";
border-radius: 50%;
background-color: currentColor;
}
}
}

276
core/modules/navigation/css/components/toolbar-button.css Executable file
View File

@@ -0,0 +1,276 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore csvg cpath wght */
/**
* @file
* Toolbar button styles.
*/
:root {
--toolbar-button-outline-offset: 0;
}
/* In top bar mobile we need small outline offset. */
:where(.top-bar) {
--toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
}
@media (min-width: 64rem) {
:where(.top-bar) {
--toolbar-button-outline-offset: 0px;
}
}
.toolbar-button {
z-index: 1;
align-items: center;
padding-inline: var(--admin-toolbar-space-16);
padding-block: calc(0.75 * var(--admin-toolbar-rem));
cursor: pointer;
text-align: start;
-webkit-text-decoration: none;
text-decoration: none;
word-break: break-word;
color: var(--admin-toolbar-color-gray-800);
border: 0;
border-radius: var(--admin-toolbar-space-8);
background-color: transparent;
font-size: var(--admin-toolbar-font-size-info-sm);
font-variation-settings: "wght" 700;
line-height: var(--admin-toolbar-line-height-info-sm);
gap: calc(0.5 * var(--admin-toolbar-rem));
}
.toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {
color: var(--admin-toolbar-color-gray-950);
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-button:hover {
z-index: 20;
color: var(--admin-toolbar-color-gray-990);
outline: 2px solid var(--admin-toolbar-color-blue-200);
outline-offset: var(--toolbar-button-outline-offset);
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-button:focus {
z-index: 10;
color: var(--admin-toolbar-color-blue-700);
outline: 2px solid var(--admin-toolbar-color-focus);
outline-offset: var(--toolbar-button-outline-offset);
background-color: transparent;
}
.toolbar-button:hover:focus {
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-button.current {
color: var(--admin-toolbar-color-blue-700);
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-button--large {
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
font-size: var(--admin-toolbar-font-size-info-lg);
line-height: var(--admin-toolbar-line-height-info-lg);
}
/* Dark color modifier for submenus title */
.toolbar-button--dark {
color: var(--admin-toolbar-color-gray-990);
}
.toolbar-button--non-interactive:hover,
.toolbar-button--non-interactive:focus,
.toolbar-button--non-interactive:hover:focus {
z-index: 1;
cursor: auto;
color: var(--admin-toolbar-color-gray-800);
outline: 0;
background-color: transparent;
}
/* Class starts with `toolbar-button--icon` */
[class*="toolbar-button--icon"] {
padding-inline: calc(0.75 * var(--admin-toolbar-rem));
}
[class*="toolbar-button--icon"]::before {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
content: attr(data-icon-text);
color: currentColor;
background-image: linear-gradient(currentColor, currentColor 50%, transparent 50%);
background-position-y: calc(100% - (100% * var(--icon, 0)));
background-size: 100% 200%;
font-size: calc(0.75 * var(--admin-toolbar-rem));
inline-size: var(--admin-toolbar-space-20);
block-size: var(--admin-toolbar-space-20);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-size: 100% auto;
mask-size: 100% auto;
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
}
[class*="toolbar-button--icon"]:hover::before {
background-color: linear-gradient(var(--admin-toolbar-color-blue-600), var(--admin-toolbar-color-blue-600) 50%, transparent 50%);
}
@media (forced-colors: active) {
[class*="toolbar-button--icon"]::before,
[class*="toolbar-button--icon"]:hover::before {
background: canvastext;
}
a[class*="toolbar-button--icon"]::before,
a[class*="toolbar-button--icon"]:hover::before {
background: linktext;
}
}
.toolbar-button--primary {
color: white;
background-color: var(--admin-toolbar-color-blue-450);
}
.toolbar-button--primary:hover,
.toolbar-button--primary:focus {
color: white;
background-color: var(--admin-toolbar-color-blue-650);
}
.toolbar-button--secondary--expanded[aria-expanded="true"] {
color: white;
background-color: var(--admin-toolbar-color-gray-900);
}
.toolbar-button--tertiary--expanded[aria-expanded="true"] {
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-button--weight--400 {
font-variation-settings: "wght" 400;
}
/* Set 0 specificity */
:where(.toolbar-button) {
display: flex;
flex-grow: 1;
}
[class*="toolbar-button--expand"]::after {
flex-shrink: 0;
margin-inline-start: auto;
content: "";
transition: transform var(--admin-toolbar-transition);
background-color: currentColor;
block-size: var(--admin-toolbar-space-16);
inline-size: var(--admin-toolbar-space-16);
-webkit-mask-size: var(--admin-toolbar-space-16);
mask-size: var(--admin-toolbar-space-16);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
}
[dir="rtl"] [class*="toolbar-button--expand"]::after {
transform: rotate(180deg);
}
@media (forced-colors: active) {
[class*="toolbar-button--expand"]::after {
background: canvastext;
}
}
:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down)::after {
transform: rotate(90deg);
}
@media (forced-colors: active) {
:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down)::after {
background: canvastext;
}
}
[aria-expanded="true"]:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down)::after {
transform: rotate(-90deg);
}
[aria-expanded="true"]:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down):focus,
[aria-expanded="true"]:is(.toolbar-button--expand--down, [dir="rtl"] .toolbar-button--expand--down):hover {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.toolbar-button--arrow-first::after {
order: -1;
}
.toolbar-button--icon--back {
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e %3cpath d='M14.2501 7.99994c0 .19892-.079.38968-.2197.53033-.1406.14066-.3314.21967-.5303.21967H4.3126l3.22 3.21936c.1409.1409.22005.332.22005.5313 0 .1992-.07915.3903-.22005.5312-.14089.1409-.33199.2201-.53125.2201-.19925 0-.39035-.0792-.53125-.2201l-4.5-4.49998c-.06992-.06968-.12539-.15247-.16325-.24364-.03785-.09116-.05734-.1889-.05734-.28761 0-.09871.01949-.19645.05734-.28762.03786-.09116.09333-.17395.16325-.24363l4.5-4.5c.06977-.06977.15259-.12511.24374-.16286.09115-.03776.18885-.05719.28751-.05719.09867 0 .19636.01943.28751.05719.09116.03775.17398.09309.24374.16286.06977.06976.12511.15259.16286.24374.03776.09115.05719.18885.05719.28751s-.01943.19636-.05719.28751c-.03775.09115-.09309.17397-.16286.24374l-3.22 3.21812h9.1875c.1989 0 .3897.07902.5303.21967.1407.14066.2197.33142.2197.53033Z'/%3e%3c/svg%3e");
}
.toolbar-button--icon--burger {
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 18 14'%3e %3cpath stroke='%2355565B' stroke-width='2' d='M0 1h18M0 7h18M0 13h18'/%3e%3c/svg%3e");
}
.toolbar-button--icon--cross {
--icon: url("data:image/svg+xml,%3csvg role='img' xmlns='http://www.w3.org/2000/svg' fill='none' viewbox='0 0 20 20'%3e %3cpath fill='%2355565B' d='M16.2883 14.9617c.1761.1762.275.415.275.6641 0 .2491-.0989.4879-.275.6641-.1761.1761-.415.275-.6641.275-.2491 0-.4879-.0989-.664-.275L10 11.3281l-4.96172 4.9602c-.17612.1761-.41499.2751-.66406.2751-.24908 0-.48795-.099-.66407-.2751-.17612-.1761-.27506-.415-.27506-.6641 0-.249.09894-.4879.27506-.664L8.67187 10 3.71172 5.0383c-.17613-.17612-.27507-.41499-.27507-.66407 0-.24907.09894-.48794.27507-.66406.17612-.17612.41499-.27506.66406-.27506.24907 0 .48794.09894.66406.27506L10 8.67189l4.9617-4.9625c.1761-.17612.415-.27506.6641-.27506.249 0 .4879.09894.664.27506.1762.17612.2751.41499.2751.66406 0 .24907-.0989.48794-.2751.66407L11.3281 10l4.9602 4.9617Z'%3e %3c/path%3e%3c/svg%3e");
}
.toolbar-button--icon--system-themes-page {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M21.75 3C21.75 2.80109 21.6709 2.61032 21.5303 2.46967C21.3896 2.32902 21.1989 2.25 21 2.25C16.8675 2.25 12.6271 6.91031 10.2721 9.99656C9.43109 9.73898 8.54134 9.68224 7.67437 9.83089C6.8074 9.97954 5.98738 10.3294 5.28017 10.8525C4.57295 11.3755 3.99826 12.0571 3.60225 12.8426C3.20624 13.628 2.99996 14.4954 2.99996 15.375C2.99996 18.27 1.16808 19.5684 1.0809 19.6284C0.947855 19.7183 0.847149 19.8484 0.793587 19.9998C0.740026 20.1511 0.736435 20.3156 0.783343 20.4692C0.830251 20.6227 0.925182 20.7571 1.05418 20.8527C1.18317 20.9482 1.33943 20.9999 1.49996 21H8.62496C9.50458 21 10.3719 20.7937 11.1574 20.3977C11.9428 20.0017 12.6244 19.427 13.1475 18.7198C13.6705 18.0126 14.0204 17.1926 14.1691 16.3256C14.3177 15.4586 14.261 14.5689 14.0034 13.7278C17.0906 11.3728 21.75 7.1325 21.75 3ZM8.62496 19.5H3.24652C3.87933 18.6009 4.49996 17.2425 4.49996 15.375C4.49996 14.5592 4.74189 13.7616 5.19515 13.0833C5.64841 12.4049 6.29264 11.8762 7.04639 11.564C7.80013 11.2518 8.62953 11.1701 9.42971 11.3293C10.2299 11.4884 10.9649 11.8813 11.5418 12.4582C12.1187 13.0351 12.5115 13.7701 12.6707 14.5703C12.8299 15.3704 12.7482 16.1998 12.436 16.9536C12.1237 17.7073 11.595 18.3516 10.9167 18.8048C10.2383 19.2581 9.44081 19.5 8.62496 19.5ZM11.6643 10.6453C11.9856 10.2291 12.3009 9.83688 12.6103 9.46875C13.3675 9.98035 14.0196 10.6324 14.5312 11.3897C14.1625 11.6984 13.7703 12.0138 13.3546 12.3356C12.9176 11.6586 12.3414 11.0824 11.6643 10.6453ZM15.6675 10.3941C15.1012 9.59512 14.4039 8.89778 13.605 8.33156C16.5843 5.09438 18.8315 4.11281 20.1581 3.84C19.8909 5.1675 18.9046 7.41469 15.6675 10.3941Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--navigation-blocks {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M9.75 3.75H5.25C4.85218 3.75 4.47064 3.90804 4.18934 4.18934C3.90804 4.47064 3.75 4.85218 3.75 5.25V9.75C3.75 10.1478 3.90804 10.5294 4.18934 10.8107C4.47064 11.092 4.85218 11.25 5.25 11.25H9.75C10.1478 11.25 10.5294 11.092 10.8107 10.8107C11.092 10.5294 11.25 10.1478 11.25 9.75V5.25C11.25 4.85218 11.092 4.47064 10.8107 4.18934C10.5294 3.90804 10.1478 3.75 9.75 3.75ZM9.75 9.75H5.25V5.25H9.75V9.75ZM18.75 3.75H14.25C13.8522 3.75 13.4706 3.90804 13.1893 4.18934C12.908 4.47064 12.75 4.85218 12.75 5.25V9.75C12.75 10.1478 12.908 10.5294 13.1893 10.8107C13.4706 11.092 13.8522 11.25 14.25 11.25H18.75C19.1478 11.25 19.5294 11.092 19.8107 10.8107C20.092 10.5294 20.25 10.1478 20.25 9.75V5.25C20.25 4.85218 20.092 4.47064 19.8107 4.18934C19.5294 3.90804 19.1478 3.75 18.75 3.75ZM18.75 9.75H14.25V5.25H18.75V9.75ZM9.75 12.75H5.25C4.85218 12.75 4.47064 12.908 4.18934 13.1893C3.90804 13.4706 3.75 13.8522 3.75 14.25V18.75C3.75 19.1478 3.90804 19.5294 4.18934 19.8107C4.47064 20.092 4.85218 20.25 5.25 20.25H9.75C10.1478 20.25 10.5294 20.092 10.8107 19.8107C11.092 19.5294 11.25 19.1478 11.25 18.75V14.25C11.25 13.8522 11.092 13.4706 10.8107 13.1893C10.5294 12.908 10.1478 12.75 9.75 12.75ZM9.75 18.75H5.25V14.25H9.75V18.75ZM18.75 12.75H14.25C13.8522 12.75 13.4706 12.908 13.1893 13.1893C12.908 13.4706 12.75 13.8522 12.75 14.25V18.75C12.75 19.1478 12.908 19.5294 13.1893 19.8107C13.4706 20.092 13.8522 20.25 14.25 20.25H18.75C19.1478 20.25 19.5294 20.092 19.8107 19.8107C20.092 19.5294 20.25 19.1478 20.25 18.75V14.25C20.25 13.8522 20.092 13.4706 19.8107 13.1893C19.5294 12.908 19.1478 12.75 18.75 12.75ZM18.75 18.75H14.25V14.25H18.75V18.75Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--shortcuts {
--icon: url("data:image/svg+xml,%3csvg width='22' height='21' viewBox='0 0 22 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M21.4251 8.121C21.3342 7.84104 21.1631 7.594 20.9328 7.41063C20.7026 7.22726 20.4236 7.11566 20.1304 7.08975L14.5626 6.60974L12.3801 1.41974C12.2664 1.14742 12.0748 0.914795 11.8292 0.751174C11.5836 0.587552 11.2952 0.500244 11.0001 0.500244C10.705 0.500244 10.4165 0.587552 10.1709 0.751174C9.92537 0.914795 9.7337 1.14742 9.62007 1.41974L7.44413 6.60974L1.86976 7.09256C1.57542 7.11729 1.29493 7.22838 1.06347 7.41188C0.832008 7.59539 0.65988 7.84315 0.568668 8.1241C0.477457 8.40504 0.471222 8.70666 0.550747 8.99113C0.630272 9.2756 0.792015 9.53027 1.01569 9.72318L5.24476 13.4188L3.97726 18.9069C3.91023 19.1941 3.92936 19.4947 4.03224 19.7711C4.13512 20.0475 4.31719 20.2874 4.55569 20.4609C4.79419 20.6344 5.07853 20.7337 5.37317 20.7464C5.66781 20.7592 5.95967 20.6848 6.21226 20.5326L10.9935 17.6263L15.7851 20.5326C16.0377 20.6848 16.3295 20.7592 16.6242 20.7464C16.9188 20.7337 17.2031 20.6344 17.4416 20.4609C17.6801 20.2874 17.8622 20.0475 17.9651 19.7711C18.068 19.4947 18.0871 19.1941 18.0201 18.9069L16.7535 13.4132L20.9816 9.72318C21.2053 9.5296 21.3667 9.27421 21.4456 8.98914C21.5245 8.70406 21.5174 8.40202 21.4251 8.121ZM19.9982 8.58975L15.7701 12.2797C15.5643 12.4587 15.4112 12.6905 15.3273 12.95C15.2434 13.2095 15.2318 13.487 15.2938 13.7526L16.5641 19.2501L11.7763 16.3438C11.5427 16.2016 11.2745 16.1263 11.001 16.1263C10.7275 16.1263 10.4593 16.2016 10.2257 16.3438L5.44444 19.2501L6.70632 13.7563C6.76834 13.4907 6.75676 13.2132 6.67285 12.9537C6.58893 12.6942 6.43585 12.4625 6.23007 12.2835L2.00007 8.59537C1.99973 8.59257 1.99973 8.58973 2.00007 8.58693L7.57257 8.10506C7.84463 8.08108 8.10499 7.98327 8.32555 7.82219C8.54611 7.6611 8.7185 7.44286 8.82413 7.191L11.0001 2.00756L13.1751 7.191C13.2807 7.44286 13.4531 7.6611 13.6737 7.82219C13.8942 7.98327 14.1546 8.08108 14.4266 8.10506L20.0001 8.58693C20.0001 8.58693 20.0001 8.59256 20.0001 8.59349L19.9982 8.58975Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--system-admin-config {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M6.00002 9.84375V3.75C6.00002 3.55109 5.92101 3.36032 5.78035 3.21967C5.6397 3.07902 5.44894 3 5.25002 3C5.05111 3 4.86035 3.07902 4.71969 3.21967C4.57904 3.36032 4.50002 3.55109 4.50002 3.75V9.84375C3.85471 10.009 3.28274 10.3843 2.87429 10.9105C2.46584 11.4367 2.24414 12.0839 2.24414 12.75C2.24414 13.4161 2.46584 14.0633 2.87429 14.5895C3.28274 15.1157 3.85471 15.491 4.50002 15.6562V20.25C4.50002 20.4489 4.57904 20.6397 4.71969 20.7803C4.86035 20.921 5.05111 21 5.25002 21C5.44894 21 5.6397 20.921 5.78035 20.7803C5.92101 20.6397 6.00002 20.4489 6.00002 20.25V15.6562C6.64533 15.491 7.2173 15.1157 7.62575 14.5895C8.0342 14.0633 8.25591 13.4161 8.25591 12.75C8.25591 12.0839 8.0342 11.4367 7.62575 10.9105C7.2173 10.3843 6.64533 10.009 6.00002 9.84375ZM5.25002 14.25C4.95335 14.25 4.66334 14.162 4.41667 13.9972C4.16999 13.8324 3.97774 13.5981 3.8642 13.324C3.75067 13.0499 3.72097 12.7483 3.77885 12.4574C3.83672 12.1664 3.97958 11.8991 4.18936 11.6893C4.39914 11.4796 4.66642 11.3367 4.95739 11.2788C5.24836 11.2209 5.54996 11.2506 5.82405 11.3642C6.09814 11.4777 6.33241 11.67 6.49723 11.9166C6.66205 12.1633 6.75002 12.4533 6.75002 12.75C6.75002 13.1478 6.59199 13.5294 6.31068 13.8107C6.02938 14.092 5.64785 14.25 5.25002 14.25ZM12.75 5.34375V3.75C12.75 3.55109 12.671 3.36032 12.5304 3.21967C12.3897 3.07902 12.1989 3 12 3C11.8011 3 11.6103 3.07902 11.4697 3.21967C11.329 3.36032 11.25 3.55109 11.25 3.75V5.34375C10.6047 5.50898 10.0327 5.88428 9.62429 6.41048C9.21584 6.93669 8.99414 7.58387 8.99414 8.25C8.99414 8.91613 9.21584 9.56331 9.62429 10.0895C10.0327 10.6157 10.6047 10.991 11.25 11.1562V20.25C11.25 20.4489 11.329 20.6397 11.4697 20.7803C11.6103 20.921 11.8011 21 12 21C12.1989 21 12.3897 20.921 12.5304 20.7803C12.671 20.6397 12.75 20.4489 12.75 20.25V11.1562C13.3953 10.991 13.9673 10.6157 14.3758 10.0895C14.7842 9.56331 15.0059 8.91613 15.0059 8.25C15.0059 7.58387 14.7842 6.93669 14.3758 6.41048C13.9673 5.88428 13.3953 5.50898 12.75 5.34375ZM12 9.75C11.7034 9.75 11.4133 9.66203 11.1667 9.4972C10.92 9.33238 10.7277 9.09811 10.6142 8.82402C10.5007 8.54994 10.471 8.24834 10.5288 7.95736C10.5867 7.66639 10.7296 7.39912 10.9394 7.18934C11.1491 6.97956 11.4164 6.8367 11.7074 6.77882C11.9984 6.72094 12.3 6.75065 12.574 6.86418C12.8481 6.97771 13.0824 7.16997 13.2472 7.41664C13.412 7.66332 13.5 7.95333 13.5 8.25C13.5 8.64782 13.342 9.02936 13.0607 9.31066C12.7794 9.59196 12.3978 9.75 12 9.75ZM21.75 15.75C21.7494 15.0849 21.5282 14.4388 21.121 13.9129C20.7139 13.387 20.1438 13.011 19.5 12.8438V3.75C19.5 3.55109 19.421 3.36032 19.2804 3.21967C19.1397 3.07902 18.9489 3 18.75 3C18.5511 3 18.3603 3.07902 18.2197 3.21967C18.079 3.36032 18 3.55109 18 3.75V12.8438C17.3547 13.009 16.7827 13.3843 16.3743 13.9105C15.9658 14.4367 15.7441 15.0839 15.7441 15.75C15.7441 16.4161 15.9658 17.0633 16.3743 17.5895C16.7827 18.1157 17.3547 18.491 18 18.6562V20.25C18 20.4489 18.079 20.6397 18.2197 20.7803C18.3603 20.921 18.5511 21 18.75 21C18.9489 21 19.1397 20.921 19.2804 20.7803C19.421 20.6397 19.5 20.4489 19.5 20.25V18.6562C20.1438 18.489 20.7139 18.113 21.121 17.5871C21.5282 17.0612 21.7494 16.4151 21.75 15.75ZM18.75 17.25C18.4534 17.25 18.1633 17.162 17.9167 16.9972C17.67 16.8324 17.4777 16.5981 17.3642 16.324C17.2507 16.0499 17.221 15.7483 17.2788 15.4574C17.3367 15.1664 17.4796 14.8991 17.6894 14.6893C17.8991 14.4796 18.1664 14.3367 18.4574 14.2788C18.7484 14.2209 19.05 14.2506 19.324 14.3642C19.5981 14.4777 19.8324 14.67 19.9972 14.9166C20.162 15.1633 20.25 15.4533 20.25 15.75C20.25 16.1478 20.092 16.5294 19.8107 16.8107C19.5294 17.092 19.1478 17.25 18.75 17.25Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--navigation-content {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.25 3.75H3.75C3.35218 3.75 2.97064 3.90804 2.68934 4.18934C2.40804 4.47064 2.25 4.85218 2.25 5.25V18.75C2.25 19.1478 2.40804 19.5294 2.68934 19.8107C2.97064 20.092 3.35218 20.25 3.75 20.25H20.25C20.6478 20.25 21.0294 20.092 21.3107 19.8107C21.592 19.5294 21.75 19.1478 21.75 18.75V5.25C21.75 4.85218 21.592 4.47064 21.3107 4.18934C21.0294 3.90804 20.6478 3.75 20.25 3.75ZM20.25 18.75H3.75V5.25H20.25V18.75ZM17.25 9C17.25 9.19891 17.171 9.38968 17.0303 9.53033C16.8897 9.67098 16.6989 9.75 16.5 9.75H7.5C7.30109 9.75 7.11032 9.67098 6.96967 9.53033C6.82902 9.38968 6.75 9.19891 6.75 9C6.75 8.80109 6.82902 8.61032 6.96967 8.46967C7.11032 8.32902 7.30109 8.25 7.5 8.25H16.5C16.6989 8.25 16.8897 8.32902 17.0303 8.46967C17.171 8.61032 17.25 8.80109 17.25 9ZM17.25 12C17.25 12.1989 17.171 12.3897 17.0303 12.5303C16.8897 12.671 16.6989 12.75 16.5 12.75H7.5C7.30109 12.75 7.11032 12.671 6.96967 12.5303C6.82902 12.3897 6.75 12.1989 6.75 12C6.75 11.8011 6.82902 11.6103 6.96967 11.4697C7.11032 11.329 7.30109 11.25 7.5 11.25H16.5C16.6989 11.25 16.8897 11.329 17.0303 11.4697C17.171 11.6103 17.25 11.8011 17.25 12ZM17.25 15C17.25 15.1989 17.171 15.3897 17.0303 15.5303C16.8897 15.671 16.6989 15.75 16.5 15.75H7.5C7.30109 15.75 7.11032 15.671 6.96967 15.5303C6.82902 15.3897 6.75 15.1989 6.75 15C6.75 14.8011 6.82902 14.6103 6.96967 14.4697C7.11032 14.329 7.30109 14.25 7.5 14.25H16.5C16.6989 14.25 16.8897 14.329 17.0303 14.4697C17.171 14.6103 17.25 14.8011 17.25 15Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--navigation-create {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96452 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM12 20.25C10.3683 20.25 8.77326 19.7661 7.41655 18.8596C6.05984 17.9531 5.00242 16.6646 4.378 15.1571C3.75358 13.6496 3.5902 11.9908 3.90853 10.3905C4.22685 8.79016 5.01259 7.32015 6.16637 6.16637C7.32016 5.01259 8.79017 4.22685 10.3905 3.90852C11.9909 3.59019 13.6497 3.75357 15.1571 4.37799C16.6646 5.00242 17.9531 6.05984 18.8596 7.41655C19.7662 8.77325 20.25 10.3683 20.25 12C20.2475 14.1873 19.3775 16.2843 17.8309 17.8309C16.2843 19.3775 14.1873 20.2475 12 20.25ZM16.5 12C16.5 12.1989 16.421 12.3897 16.2803 12.5303C16.1397 12.671 15.9489 12.75 15.75 12.75H12.75V15.75C12.75 15.9489 12.671 16.1397 12.5303 16.2803C12.3897 16.421 12.1989 16.5 12 16.5C11.8011 16.5 11.6103 16.421 11.4697 16.2803C11.329 16.1397 11.25 15.9489 11.25 15.75V12.75H8.25C8.05109 12.75 7.86033 12.671 7.71967 12.5303C7.57902 12.3897 7.5 12.1989 7.5 12C7.5 11.8011 7.57902 11.6103 7.71967 11.4697C7.86033 11.329 8.05109 11.25 8.25 11.25H11.25V8.25C11.25 8.05109 11.329 7.86032 11.4697 7.71967C11.6103 7.57902 11.8011 7.5 12 7.5C12.1989 7.5 12.3897 7.57902 12.5303 7.71967C12.671 7.86032 12.75 8.05109 12.75 8.25V11.25H15.75C15.9489 11.25 16.1397 11.329 16.2803 11.4697C16.421 11.6103 16.5 11.8011 16.5 12Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--system-modules-list {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.6503 14.8631C20.5434 14.7957 20.4212 14.7564 20.2949 14.7488C20.1687 14.7413 20.0427 14.7658 19.9285 14.82C19.6427 14.9552 19.3274 15.0159 19.0118 14.9965C18.6963 14.9771 18.3908 14.8782 18.1237 14.7091C17.8566 14.54 17.6366 14.3061 17.4842 14.0291C17.3318 13.7521 17.2518 13.4411 17.2518 13.125C17.2518 12.8089 17.3318 12.4979 17.4842 12.2209C17.6366 11.944 17.8566 11.7101 18.1237 11.5409C18.3908 11.3718 18.6963 11.2729 19.0118 11.2535C19.3274 11.2342 19.6427 11.2949 19.9285 11.43C20.0428 11.4843 20.169 11.5087 20.2953 11.5011C20.4217 11.4934 20.544 11.4539 20.651 11.3863C20.7579 11.3186 20.846 11.225 20.9071 11.1141C20.9681 11.0033 21.0001 10.8788 21 10.7522V6.75002C21 6.35219 20.842 5.97066 20.5607 5.68936C20.2794 5.40805 19.8979 5.25002 19.5 5.25002H16.1044C16.1184 5.12551 16.1252 5.00031 16.125 4.87502C16.1243 4.41407 16.0295 3.95812 15.8464 3.53511C15.6633 3.1121 15.3957 2.73095 15.06 2.41502C14.5953 1.97853 14.0164 1.68261 13.3904 1.56154C12.7644 1.44046 12.117 1.49918 11.523 1.73089C10.929 1.9626 10.4128 2.35782 10.0341 2.87079C9.65549 3.38376 9.42989 3.9935 9.38347 4.62939C9.36906 4.83624 9.37345 5.04396 9.39659 5.25002H6.00003C5.60221 5.25002 5.22067 5.40805 4.93937 5.68936C4.65807 5.97066 4.50003 6.35219 4.50003 6.75002V9.77064C4.37552 9.75669 4.25032 9.7498 4.12503 9.75002C3.66409 9.75076 3.20816 9.8456 2.78516 10.0287C2.36216 10.2119 1.981 10.4794 1.66503 10.815C1.34679 11.1512 1.10175 11.5497 0.945386 11.9854C0.789021 12.4211 0.724736 12.8845 0.756593 13.3463C0.810338 14.1594 1.15585 14.9259 1.7296 15.5046C2.30334 16.0833 3.06674 16.4355 3.87941 16.4963C4.08624 16.5111 4.29401 16.5067 4.50003 16.4831V19.5C4.50003 19.8978 4.65807 20.2794 4.93937 20.5607C5.22067 20.842 5.60221 21 6.00003 21H19.5C19.8979 21 20.2794 20.842 20.5607 20.5607C20.842 20.2794 21 19.8978 21 19.5V15.4978C21.0001 15.3711 20.9681 15.2464 20.9069 15.1355C20.8458 15.0245 20.7575 14.9308 20.6503 14.8631ZM19.5 19.5H6.00003V15.4978C6.00007 15.3713 5.96809 15.2468 5.90705 15.1359C5.84602 15.025 5.75792 14.9314 5.65096 14.8637C5.54401 14.7961 5.42167 14.7566 5.29534 14.749C5.16901 14.7413 5.0428 14.7658 4.92847 14.82C4.64269 14.9552 4.32737 15.0159 4.01183 14.9965C3.6963 14.9771 3.39079 14.8782 3.1237 14.7091C2.85662 14.54 2.63664 14.3061 2.48421 14.0291C2.33178 13.7521 2.25184 13.4411 2.25184 13.125C2.25184 12.8089 2.33178 12.4979 2.48421 12.2209C2.63664 11.944 2.85662 11.7101 3.1237 11.5409C3.39079 11.3718 3.6963 11.2729 4.01183 11.2535C4.32737 11.2342 4.64269 11.2949 4.92847 11.43C5.0428 11.4843 5.16901 11.5087 5.29534 11.5011C5.42167 11.4934 5.54401 11.4539 5.65096 11.3863C5.75792 11.3186 5.84602 11.225 5.90705 11.1141C5.96809 11.0033 6.00007 10.8788 6.00003 10.7522V6.75002H10.3772C10.5038 6.75006 10.6283 6.71807 10.7392 6.65704C10.85 6.596 10.9436 6.50791 11.0113 6.40095C11.079 6.29399 11.1184 6.17165 11.1261 6.04533C11.1337 5.919 11.1093 5.79279 11.055 5.67845C10.9199 5.39267 10.8592 5.07736 10.8786 4.76182C10.898 4.44628 10.9968 4.14077 11.1659 3.87369C11.3351 3.60661 11.569 3.38663 11.8459 3.23419C12.1229 3.08176 12.4339 3.00183 12.75 3.00183C13.0662 3.00183 13.3772 3.08176 13.6541 3.23419C13.9311 3.38663 14.165 3.60661 14.3341 3.87369C14.5033 4.14077 14.6021 4.44628 14.6215 4.76182C14.6409 5.07736 14.5802 5.39267 14.445 5.67845C14.3908 5.79279 14.3663 5.919 14.374 6.04533C14.3816 6.17165 14.4211 6.29399 14.4888 6.40095C14.5564 6.50791 14.65 6.596 14.7609 6.65704C14.8718 6.71807 14.9963 6.75006 15.1228 6.75002H19.5V9.77158C19.294 9.74798 19.0862 9.74358 18.8794 9.75845C18.0065 9.82026 17.1917 10.2187 16.607 10.8697C16.0222 11.5207 15.7132 12.3734 15.745 13.2479C15.7769 14.1224 16.1472 14.9503 16.7778 15.5571C17.4084 16.1638 18.25 16.5019 19.125 16.5C19.2503 16.5002 19.3755 16.4933 19.5 16.4794V19.5Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--navigation-files {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M20.0306 6.21938L16.2806 2.46938C16.2109 2.39975 16.1282 2.34454 16.0371 2.3069C15.9461 2.26926 15.8485 2.24992 15.75 2.25H8.25C7.85218 2.25 7.47064 2.40804 7.18934 2.68934C6.90804 2.97064 6.75 3.35218 6.75 3.75V5.25H5.25C4.85218 5.25 4.47064 5.40804 4.18934 5.68934C3.90804 5.97064 3.75 6.35218 3.75 6.75V20.25C3.75 20.6478 3.90804 21.0294 4.18934 21.3107C4.47064 21.592 4.85218 21.75 5.25 21.75H15.75C16.1478 21.75 16.5294 21.592 16.8107 21.3107C17.092 21.0294 17.25 20.6478 17.25 20.25V18.75H18.75C19.1478 18.75 19.5294 18.592 19.8107 18.3107C20.092 18.0294 20.25 17.6478 20.25 17.25V6.75C20.2501 6.65148 20.2307 6.55391 20.1931 6.46286C20.1555 6.37182 20.1003 6.28908 20.0306 6.21938ZM15.75 20.25H5.25V6.75H12.4397L15.75 10.0603V17.985C15.75 17.9906 15.75 17.9953 15.75 18C15.75 18.0047 15.75 18.0094 15.75 18.015V20.25ZM18.75 17.25H17.25V9.75C17.2501 9.65148 17.2307 9.55391 17.1931 9.46286C17.1555 9.37182 17.1003 9.28908 17.0306 9.21937L13.2806 5.46938C13.2109 5.39975 13.1282 5.34454 13.0371 5.3069C12.9461 5.26926 12.8485 5.24992 12.75 5.25H8.25V3.75H15.4397L18.75 7.06031V17.25ZM13.5 14.25C13.5 14.4489 13.421 14.6397 13.2803 14.7803C13.1397 14.921 12.9489 15 12.75 15H8.25C8.05109 15 7.86032 14.921 7.71967 14.7803C7.57902 14.6397 7.5 14.4489 7.5 14.25C7.5 14.0511 7.57902 13.8603 7.71967 13.7197C7.86032 13.579 8.05109 13.5 8.25 13.5H12.75C12.9489 13.5 13.1397 13.579 13.2803 13.7197C13.421 13.8603 13.5 14.0511 13.5 14.25ZM13.5 17.25C13.5 17.4489 13.421 17.6397 13.2803 17.7803C13.1397 17.921 12.9489 18 12.75 18H8.25C8.05109 18 7.86032 17.921 7.71967 17.7803C7.57902 17.6397 7.5 17.4489 7.5 17.25C7.5 17.0511 7.57902 16.8603 7.71967 16.7197C7.86032 16.579 8.05109 16.5 8.25 16.5H12.75C12.9489 16.5 13.1397 16.579 13.2803 16.7197C13.421 16.8603 13.5 17.0511 13.5 17.25Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--help {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M13.125 16.875C13.125 17.0975 13.059 17.315 12.9354 17.5C12.8118 17.685 12.6361 17.8292 12.4305 17.9144C12.225 17.9995 11.9988 18.0218 11.7805 17.9784C11.5623 17.935 11.3618 17.8278 11.2045 17.6705C11.0472 17.5132 10.94 17.3127 10.8966 17.0945C10.8532 16.8762 10.8755 16.65 10.9606 16.4445C11.0458 16.2389 11.19 16.0632 11.375 15.9396C11.56 15.816 11.7775 15.75 12 15.75C12.2984 15.75 12.5845 15.8685 12.7955 16.0795C13.0065 16.2905 13.125 16.5766 13.125 16.875ZM12 6.75C9.93188 6.75 8.25 8.26406 8.25 10.125V10.5C8.25 10.6989 8.32902 10.8897 8.46967 11.0303C8.61033 11.171 8.80109 11.25 9 11.25C9.19892 11.25 9.38968 11.171 9.53033 11.0303C9.67099 10.8897 9.75 10.6989 9.75 10.5V10.125C9.75 9.09375 10.7597 8.25 12 8.25C13.2403 8.25 14.25 9.09375 14.25 10.125C14.25 11.1562 13.2403 12 12 12C11.8011 12 11.6103 12.079 11.4697 12.2197C11.329 12.3603 11.25 12.5511 11.25 12.75V13.5C11.25 13.6989 11.329 13.8897 11.4697 14.0303C11.6103 14.171 11.8011 14.25 12 14.25C12.1989 14.25 12.3897 14.171 12.5303 14.0303C12.671 13.8897 12.75 13.6989 12.75 13.5V13.4325C14.46 13.1184 15.75 11.7544 15.75 10.125C15.75 8.26406 14.0681 6.75 12 6.75ZM21.75 12C21.75 13.9284 21.1782 15.8134 20.1068 17.4168C19.0355 19.0202 17.5127 20.2699 15.7312 21.0078C13.9496 21.7458 11.9892 21.9389 10.0979 21.5627C8.20656 21.1865 6.46928 20.2579 5.10571 18.8943C3.74215 17.5307 2.81355 15.7934 2.43735 13.9021C2.06114 12.0108 2.25422 10.0504 2.99218 8.26884C3.73013 6.48726 4.97982 4.96452 6.58319 3.89317C8.18657 2.82183 10.0716 2.25 12 2.25C14.585 2.25273 17.0634 3.28084 18.8913 5.10872C20.7192 6.93661 21.7473 9.41498 21.75 12ZM20.25 12C20.25 10.3683 19.7662 8.77325 18.8596 7.41655C17.9531 6.05984 16.6646 5.00242 15.1571 4.37799C13.6497 3.75357 11.9909 3.59019 10.3905 3.90852C8.79017 4.22685 7.32016 5.01259 6.16637 6.16637C5.01259 7.32015 4.22685 8.79016 3.90853 10.3905C3.5902 11.9908 3.75358 13.6496 4.378 15.1571C5.00242 16.6646 6.05984 17.9531 7.41655 18.8596C8.77326 19.7661 10.3683 20.25 12 20.25C14.1873 20.2475 16.2843 19.3775 17.8309 17.8309C19.3775 16.2843 20.2475 14.1873 20.25 12Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--navigation-media {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M19.5 3H7.5C7.10218 3 6.72064 3.15804 6.43934 3.43934C6.15804 3.72064 6 4.10218 6 4.5V6H4.5C4.10218 6 3.72064 6.15804 3.43934 6.43934C3.15804 6.72064 3 7.10218 3 7.5V19.5C3 19.8978 3.15804 20.2794 3.43934 20.5607C3.72064 20.842 4.10218 21 4.5 21H16.5C16.8978 21 17.2794 20.842 17.5607 20.5607C17.842 20.2794 18 19.8978 18 19.5V18H19.5C19.8978 18 20.2794 17.842 20.5607 17.5607C20.842 17.2794 21 16.8978 21 16.5V4.5C21 4.10218 20.842 3.72064 20.5607 3.43934C20.2794 3.15804 19.8978 3 19.5 3ZM7.5 4.5H19.5V11.0044L17.9344 9.43875C17.6531 9.15766 17.2717 8.99976 16.8741 8.99976C16.4764 8.99976 16.095 9.15766 15.8137 9.43875L8.75344 16.5H7.5V4.5ZM16.5 19.5H4.5V7.5H6V16.5C6 16.8978 6.15804 17.2794 6.43934 17.5607C6.72064 17.842 7.10218 18 7.5 18H16.5V19.5ZM19.5 16.5H10.875L16.875 10.5L19.5 13.125V16.5ZM11.25 10.5C11.695 10.5 12.13 10.368 12.5 10.1208C12.87 9.87357 13.1584 9.52217 13.3287 9.11104C13.499 8.6999 13.5436 8.2475 13.4568 7.81105C13.37 7.37459 13.1557 6.97368 12.841 6.65901C12.5263 6.34434 12.1254 6.13005 11.689 6.04323C11.2525 5.95642 10.8001 6.00097 10.389 6.17127C9.97783 6.34157 9.62643 6.62996 9.37919 6.99997C9.13196 7.36998 9 7.80499 9 8.25C9 8.84674 9.23705 9.41903 9.65901 9.84099C10.081 10.2629 10.6533 10.5 11.25 10.5ZM11.25 7.5C11.3983 7.5 11.5433 7.54399 11.6667 7.6264C11.79 7.70881 11.8861 7.82594 11.9429 7.96299C11.9997 8.10003 12.0145 8.25083 11.9856 8.39632C11.9567 8.5418 11.8852 8.67544 11.7803 8.78033C11.6754 8.88522 11.5418 8.95665 11.3963 8.98559C11.2508 9.01453 11.1 8.99968 10.963 8.94291C10.8259 8.88614 10.7088 8.79001 10.6264 8.66668C10.544 8.54334 10.5 8.39834 10.5 8.25C10.5 8.05109 10.579 7.86032 10.7197 7.71967C10.8603 7.57902 11.0511 7.5 11.25 7.5Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--pencil {
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e %3cpath d='M17.7586 5.73214 14.268 2.24073c-.1161-.1161-.2539-.2082-.4056-.27104-.1517-.06284-.3142-.09518-.4784-.09518s-.3268.03234-.4784.09518c-.1517.06284-.2895.15494-.4056.27104L2.86641 11.8751c-.11658.1157-.209.2533-.2719.405-.06291.1517-.09503.3144-.0945.4786v3.4914c0 .3315.13169.6495.36611.8839.23442.2344.55237.3661.88389.3661h3.4914c.16422.0005.32689-.0316.47858-.0945s.28936-.1553.40502-.2719l9.63359-9.6336c.1161-.11607.2082-.25388.271-.40556.0629-.15168.0952-.31424.0952-.47842s-.0323-.32675-.0952-.47842c-.0628-.15168-.1549-.28949-.271-.40556Zm-13.75 6.76796 6.6164-6.6164 1.3039 1.3039-6.61639 6.6156-1.30391-1.3031Zm-.25859 1.5086 2.2414 2.2414h-2.2414v-2.2414Zm3.75 1.9828L6.1961 14.6876l6.6164-6.6164 1.3039 1.3039-6.61639 6.6164ZM15 8.49151 11.5086 5.0001l1.875-1.875 3.4914 3.49063L15 8.49151Z'/%3e%3c/svg%3e");
}
.toolbar-button--icon--preview {
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e %3cpath fill='%2355565B' d='M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z'/%3e%3c/svg%3e");
}
.toolbar-button--icon--entity-user-collection {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M10.9922 14.805C11.9974 14.1358 12.7606 13.1609 13.1688 12.0244C13.5771 10.8879 13.6088 9.65024 13.2592 8.49437C12.9096 7.3385 12.1974 6.32581 11.2278 5.60605C10.2581 4.88629 9.08262 4.49768 7.87505 4.49768C6.66747 4.49768 5.49196 4.88629 4.52233 5.60605C3.55271 6.32581 2.84045 7.3385 2.49088 8.49437C2.14132 9.65024 2.17301 10.8879 2.58126 12.0244C2.98952 13.1609 3.75267 14.1358 4.75786 14.805C2.93957 15.4751 1.38671 16.7152 0.330984 18.3403C0.275499 18.4227 0.236959 18.5154 0.217604 18.6129C0.198249 18.7104 0.198466 18.8108 0.218241 18.9082C0.238017 19.0056 0.276957 19.0981 0.332798 19.1803C0.388639 19.2625 0.460266 19.3328 0.543518 19.3871C0.626769 19.4414 0.719983 19.4786 0.817742 19.4966C0.9155 19.5146 1.01585 19.5129 1.11297 19.4917C1.21008 19.4706 1.30202 19.4303 1.38344 19.3733C1.46486 19.3163 1.53413 19.2437 1.58723 19.1597C2.26822 18.1123 3.20007 17.2516 4.29814 16.6558C5.39622 16.0599 6.62574 15.7479 7.87505 15.7479C9.12435 15.7479 10.3539 16.0599 11.4519 16.6558C12.55 17.2516 13.4819 18.1123 14.1629 19.1597C14.2729 19.3231 14.4428 19.4368 14.6359 19.476C14.829 19.5152 15.0298 19.4768 15.1949 19.3692C15.3599 19.2615 15.476 19.0932 15.5179 18.9007C15.5599 18.7082 15.5244 18.5068 15.4191 18.3403C14.3634 16.7152 12.8105 15.4751 10.9922 14.805ZM3.75005 10.125C3.75005 9.30912 3.99197 8.51159 4.44523 7.83324C4.8985 7.15488 5.54273 6.62617 6.29648 6.31396C7.05022 6.00175 7.87962 5.92006 8.67979 6.07922C9.47997 6.23839 10.215 6.63126 10.7919 7.20815C11.3688 7.78504 11.7616 8.52004 11.9208 9.32022C12.0799 10.1204 11.9983 10.9498 11.686 11.7035C11.3738 12.4573 10.8451 13.1015 10.1668 13.5548C9.48842 14.008 8.69089 14.25 7.87505 14.25C6.78141 14.2487 5.73292 13.8137 4.9596 13.0404C4.18628 12.2671 3.75129 11.2186 3.75005 10.125ZM23.4507 19.3781C23.2841 19.4867 23.0812 19.5247 22.8865 19.4838C22.6919 19.4428 22.5215 19.3262 22.4129 19.1597C21.7327 18.1116 20.801 17.2506 19.7027 16.655C18.6044 16.0594 17.3744 15.7483 16.125 15.75C15.9261 15.75 15.7354 15.6709 15.5947 15.5303C15.4541 15.3896 15.375 15.1989 15.375 15C15.375 14.8011 15.4541 14.6103 15.5947 14.4696C15.7354 14.329 15.9261 14.25 16.125 14.25C16.7325 14.2494 17.3324 14.1147 17.8817 13.8554C18.4311 13.5961 18.9164 13.2187 19.303 12.7501C19.6896 12.2815 19.9679 11.7334 20.1181 11.1448C20.2683 10.5561 20.2866 9.94162 20.1718 9.3451C20.0569 8.74859 19.8117 8.1848 19.4537 7.69402C19.0958 7.20325 18.6338 6.7976 18.1008 6.50606C17.5679 6.21452 16.9771 6.04429 16.3708 6.00752C15.7644 5.97076 15.1574 6.06838 14.5932 6.2934C14.5012 6.33317 14.4021 6.3541 14.3019 6.35495C14.2017 6.35579 14.1023 6.33654 14.0096 6.29833C13.917 6.26012 13.8329 6.20373 13.7624 6.13248C13.6919 6.06123 13.6364 5.97658 13.5992 5.88352C13.562 5.79046 13.5438 5.69088 13.5457 5.59067C13.5476 5.49046 13.5696 5.39165 13.6103 5.30007C13.6511 5.2085 13.7098 5.12602 13.7829 5.05752C13.8561 4.98901 13.9422 4.93586 14.0363 4.90121C15.3277 4.3862 16.764 4.36767 18.0682 4.84919C19.3725 5.33071 20.4522 6.27817 21.099 7.50879C21.7459 8.73941 21.9141 10.166 21.5713 11.5133C21.2284 12.8607 20.3987 14.0333 19.2422 14.805C21.0605 15.4751 22.6134 16.7152 23.6691 18.3403C23.7777 18.5069 23.8158 18.7098 23.7748 18.9044C23.7338 19.099 23.6172 19.2694 23.4507 19.3781Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--system-admin-reports {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12 2.25C10.0716 2.25 8.18657 2.82183 6.58319 3.89317C4.97982 4.96452 3.73013 6.48726 2.99218 8.26884C2.25422 10.0504 2.06114 12.0108 2.43735 13.9021C2.81355 15.7934 3.74215 17.5307 5.10571 18.8943C6.46928 20.2579 8.20656 21.1865 10.0979 21.5627C11.9892 21.9389 13.9496 21.7458 15.7312 21.0078C17.5127 20.2699 19.0355 19.0202 20.1068 17.4168C21.1782 15.8134 21.75 13.9284 21.75 12C21.7473 9.41498 20.7192 6.93661 18.8913 5.10872C17.0634 3.28084 14.585 2.25273 12 2.25ZM18.7378 7.24406L12.75 10.7006V3.78469C13.9389 3.89369 15.0901 4.25945 16.1239 4.85672C17.1577 5.45398 18.0495 6.26851 18.7378 7.24406ZM11.25 3.78469V11.5659L4.51032 15.4566C3.95704 14.2574 3.69975 12.9428 3.76008 11.6235C3.82041 10.3042 4.19659 9.01868 4.85701 7.87497C5.51742 6.73126 6.44276 5.76281 7.55523 5.05104C8.66771 4.33927 9.93481 3.90498 11.25 3.78469ZM12 20.25C10.6792 20.2495 9.37792 19.9318 8.20543 19.3238C7.03295 18.7158 6.02358 17.8351 5.26219 16.7559L19.4897 8.5425C20.0699 9.79946 20.3244 11.1822 20.2299 12.5634C20.1354 13.9445 19.6948 15.2797 18.9487 16.4459C18.2027 17.6121 17.1752 18.5717 15.9608 19.2365C14.7465 19.9013 13.3844 20.2499 12 20.25Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--system-admin-structure {
--icon: url("data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M15.75 10.5H20.25C20.6478 10.5 21.0294 10.342 21.3107 10.0607C21.592 9.77936 21.75 9.39782 21.75 9V4.5C21.75 4.10218 21.592 3.72064 21.3107 3.43934C21.0294 3.15804 20.6478 3 20.25 3H15.75C15.3522 3 14.9706 3.15804 14.6893 3.43934C14.408 3.72064 14.25 4.10218 14.25 4.5V6H13.5C12.7044 6 11.9413 6.31607 11.3787 6.87868C10.8161 7.44129 10.5 8.20435 10.5 9V11.25H7.5V10.5C7.5 10.1022 7.34196 9.72064 7.06066 9.43934C6.77936 9.15804 6.39782 9 6 9H3C2.60218 9 2.22064 9.15804 1.93934 9.43934C1.65804 9.72064 1.5 10.1022 1.5 10.5V13.5C1.5 13.8978 1.65804 14.2794 1.93934 14.5607C2.22064 14.842 2.60218 15 3 15H6C6.39782 15 6.77936 14.842 7.06066 14.5607C7.34196 14.2794 7.5 13.8978 7.5 13.5V12.75H10.5V15C10.5 15.7956 10.8161 16.5587 11.3787 17.1213C11.9413 17.6839 12.7044 18 13.5 18H14.25V19.5C14.25 19.8978 14.408 20.2794 14.6893 20.5607C14.9706 20.842 15.3522 21 15.75 21H20.25C20.6478 21 21.0294 20.842 21.3107 20.5607C21.592 20.2794 21.75 19.8978 21.75 19.5V15C21.75 14.6022 21.592 14.2206 21.3107 13.9393C21.0294 13.658 20.6478 13.5 20.25 13.5H15.75C15.3522 13.5 14.9706 13.658 14.6893 13.9393C14.408 14.2206 14.25 14.6022 14.25 15V16.5H13.5C13.1022 16.5 12.7206 16.342 12.4393 16.0607C12.158 15.7794 12 15.3978 12 15V9C12 8.60218 12.158 8.22064 12.4393 7.93934C12.7206 7.65804 13.1022 7.5 13.5 7.5H14.25V9C14.25 9.39782 14.408 9.77936 14.6893 10.0607C14.9706 10.342 15.3522 10.5 15.75 10.5ZM6 13.5H3V10.5H6V13.5ZM15.75 15H20.25V19.5H15.75V15ZM15.75 4.5H20.25V9H15.75V4.5Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--user {
--icon: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M10 1.875C8.39303 1.875 6.82214 2.35152 5.486 3.24431C4.14985 4.1371 3.10844 5.40605 2.49348 6.8907C1.87852 8.37535 1.71762 10.009 2.03112 11.5851C2.34463 13.1612 3.11846 14.6089 4.25476 15.7452C5.39106 16.8815 6.8388 17.6554 8.4149 17.9689C9.99099 18.2824 11.6247 18.1215 13.1093 17.5065C14.594 16.8916 15.8629 15.8502 16.7557 14.514C17.6485 13.1779 18.125 11.607 18.125 10C18.1227 7.84581 17.266 5.78051 15.7427 4.25727C14.2195 2.73403 12.1542 1.87727 10 1.875ZM5.7875 15.4297C6.23964 14.7226 6.86251 14.1406 7.59869 13.7375C8.33488 13.3345 9.16069 13.1232 10 13.1232C10.8393 13.1232 11.6651 13.3345 12.4013 13.7375C13.1375 14.1406 13.7604 14.7226 14.2125 15.4297C13.0081 16.3664 11.5258 16.8749 10 16.8749C8.4742 16.8749 6.99193 16.3664 5.7875 15.4297ZM7.5 9.375C7.5 8.88055 7.64663 8.3972 7.92133 7.98607C8.19603 7.57495 8.58648 7.25452 9.04329 7.0653C9.50011 6.87608 10.0028 6.82657 10.4877 6.92304C10.9727 7.0195 11.4181 7.2576 11.7678 7.60723C12.1174 7.95686 12.3555 8.40232 12.452 8.88727C12.5484 9.37223 12.4989 9.87489 12.3097 10.3317C12.1205 10.7885 11.8001 11.179 11.3889 11.4537C10.9778 11.7284 10.4945 11.875 10 11.875C9.33696 11.875 8.70108 11.6116 8.23224 11.1428C7.7634 10.6739 7.5 10.038 7.5 9.375ZM15.1375 14.5633C14.4404 13.5532 13.4603 12.7717 12.3203 12.3172C12.9327 11.8349 13.3795 11.1737 13.5987 10.4257C13.8179 9.67766 13.7985 8.87992 13.5433 8.1434C13.2881 7.40687 12.8097 6.76819 12.1746 6.31616C11.5396 5.86414 10.7795 5.62123 10 5.62123C9.22052 5.62123 8.4604 5.86414 7.82536 6.31616C7.19033 6.76819 6.71193 7.40687 6.45671 8.1434C6.20149 8.87992 6.18212 9.67766 6.40131 10.4257C6.62049 11.1737 7.06734 11.8349 7.67969 12.3172C6.5397 12.7717 5.55956 13.5532 4.8625 14.5633C3.9817 13.5728 3.406 12.3488 3.20473 11.0387C3.00346 9.72856 3.1852 8.3882 3.72806 7.17898C4.27093 5.96977 5.15178 4.94326 6.26454 4.22308C7.3773 3.50289 8.67452 3.11972 10 3.11972C11.3255 3.11972 12.6227 3.50289 13.7355 4.22308C14.8482 4.94326 15.7291 5.96977 16.2719 7.17898C16.8148 8.3882 16.9966 9.72856 16.7953 11.0387C16.594 12.3488 16.0183 13.5728 15.1375 14.5633Z' fill='currentColor'/%3e%3c/svg%3e");
}
.toolbar-button--icon--announcements-feed-announcement {
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3e %3cpath fill='none' d='M0 0h256v256H0z'/%3e %3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M160 80v120.67a8 8 0 0 0 3.56 6.65l11 7.33a8 8 0 0 0 12.2-4.72L200 160'/%3e %3cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='16' d='M40 200a8 8 0 0 0 13.15 6.12C105.55 162.16 160 160 160 160h40a40 40 0 0 0 0-80h-40s-54.45-2.16-106.85-46.11A8 8 0 0 0 40 40Z'/%3e%3c/svg%3e");
}
.toolbar-button--icon--announcements-feed-announcement::before {
transform: scaleX(-1);
}
[dir="rtl"] .toolbar-button--icon--announcements-feed-announcement::before {
transform: scaleX(1);
}
html:not([data-admin-toolbar="expanded"]) .toolbar-button--collapsible::after {
display: none;
}
/* Visually-hidden labels when collapsed. */
html:not([data-admin-toolbar="expanded"]) .toolbar-button--collapsible .toolbar-button__label {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
white-space: nowrap;
clip-path: inset(50%);
opacity: 0;
}
/* Hides button's label while transitioning. */
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label {
display: none;
}

328
core/modules/navigation/css/components/toolbar-button.pcss.css Executable file
View File

@@ -0,0 +1,328 @@
/* cspell:ignore csvg cpath wght */
/**
* @file
* Toolbar button styles.
*/
@import "../base/media-queries.pcss.css";
:root {
--toolbar-button-outline-offset: 0;
}
/* In top bar mobile we need small outline offset. */
:where(.top-bar) {
--toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
@media (--admin-toolbar-desktop) {
--toolbar-button-outline-offset: 0px;
}
}
.toolbar-button {
z-index: 1;
align-items: center;
padding-inline: var(--admin-toolbar-space-16);
padding-block: calc(0.75 * var(--admin-toolbar-rem));
cursor: pointer;
text-align: start;
text-decoration: none;
word-break: break-word;
color: var(--admin-toolbar-color-gray-800);
border: 0;
border-radius: var(--admin-toolbar-space-8);
background-color: transparent;
font-size: var(--admin-toolbar-font-size-info-sm);
font-variation-settings: "wght" 700;
line-height: var(--admin-toolbar-line-height-info-sm);
gap: calc(0.5 * var(--admin-toolbar-rem));
&:has(+ .toolbar-popover__wrapper .is-active) {
color: var(--admin-toolbar-color-gray-950);
background-color: var(--admin-toolbar-color-gray-050);
}
&:hover {
z-index: 20;
color: var(--admin-toolbar-color-gray-990);
outline: 2px solid var(--admin-toolbar-color-blue-200);
outline-offset: var(--toolbar-button-outline-offset);
background-color: var(--admin-toolbar-color-gray-050);
}
&:focus {
z-index: 10;
color: var(--admin-toolbar-color-blue-700);
outline: 2px solid var(--admin-toolbar-color-focus);
outline-offset: var(--toolbar-button-outline-offset);
background-color: transparent;
}
&:hover:focus {
background-color: var(--admin-toolbar-color-gray-050);
}
&.current {
color: var(--admin-toolbar-color-blue-700);
background-color: var(--admin-toolbar-color-gray-050);
}
}
.toolbar-button--large {
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
font-size: var(--admin-toolbar-font-size-info-lg);
line-height: var(--admin-toolbar-line-height-info-lg);
}
/* Dark color modifier for submenus title */
.toolbar-button--dark {
color: var(--admin-toolbar-color-gray-990);
}
.toolbar-button--non-interactive {
&:hover,
&:focus,
&:hover:focus {
z-index: 1;
cursor: auto;
color: var(--admin-toolbar-color-gray-800);
outline: 0;
background-color: transparent;
}
}
/* Class starts with `toolbar-button--icon` */
[class*="toolbar-button--icon"] {
padding-inline: calc(0.75 * var(--admin-toolbar-rem));
&::before {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
content: attr(data-icon-text);
color: currentColor;
background-image: linear-gradient(currentColor, currentColor 50%, transparent 50%);
background-position-y: calc(100% - (100% * var(--icon, 0)));
background-size: 100% 200%;
font-size: calc(0.75 * var(--admin-toolbar-rem));
inline-size: var(--admin-toolbar-space-20);
block-size: var(--admin-toolbar-space-20);
mask-repeat: no-repeat;
mask-position: center center;
mask-size: 100% auto;
-webkit-mask-image: var(--icon);
mask-image: var(--icon);
}
&:hover::before {
background-color: linear-gradient(var(--admin-toolbar-color-blue-600), var(--admin-toolbar-color-blue-600) 50%, transparent 50%);
}
@media (--forced-colors) {
&::before,
&:hover::before {
background: canvastext;
}
&a {
&::before,
&:hover::before {
background: linktext;
}
}
}
}
.toolbar-button--primary {
color: white;
background-color: var(--admin-toolbar-color-blue-450);
&:hover,
&:focus {
color: white;
background-color: var(--admin-toolbar-color-blue-650);
}
}
.toolbar-button--secondary--expanded[aria-expanded="true"] {
color: white;
background-color: var(--admin-toolbar-color-gray-900);
}
.toolbar-button--tertiary--expanded[aria-expanded="true"] {
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-button--weight--400 {
font-variation-settings: "wght" 400;
}
/* Set 0 specificity */
:where(.toolbar-button) {
display: flex;
flex-grow: 1;
}
[class*="toolbar-button--expand"] {
&::after {
flex-shrink: 0;
margin-inline-start: auto;
content: "";
transition: transform var(--admin-toolbar-transition);
background-color: currentColor;
block-size: var(--admin-toolbar-space-16);
inline-size: var(--admin-toolbar-space-16);
mask-size: var(--admin-toolbar-space-16);
mask-repeat: no-repeat;
mask-position: center center;
mask-image: url(../../assets/icons/chevron.svg);
[dir="rtl"] & {
transform: rotate(180deg);
}
@media (--forced-colors) {
background: canvastext;
}
}
}
.toolbar-button--expand--down,
[dir="rtl"] .toolbar-button--expand--down {
&::after {
transform: rotate(90deg);
@media (--forced-colors) {
background: canvastext;
}
}
&[aria-expanded="true"] {
&::after {
transform: rotate(-90deg);
}
&:focus,
&:hover {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
}
}
.toolbar-button--arrow-first {
&::after {
order: -1;
}
}
.toolbar-button--icon--back {
--icon: url(../../assets/icons/arrow-left.svg);
}
.toolbar-button--icon--burger {
--icon: url(../../assets/icons/burger.svg);
}
.toolbar-button--icon--cross {
--icon: url(../../assets/icons/cross.svg);
}
.toolbar-button--icon--system-themes-page {
--icon: url(../../assets/icons/appearance.svg);
}
.toolbar-button--icon--navigation-blocks {
--icon: url(../../assets/icons/blocks.svg);
}
.toolbar-button--icon--shortcuts {
--icon: url(../../assets/icons/shortcuts.svg);
}
.toolbar-button--icon--system-admin-config {
--icon: url(../../assets/icons/config.svg);
}
.toolbar-button--icon--navigation-content {
--icon: url(../../assets/icons/content.svg);
}
.toolbar-button--icon--navigation-create {
--icon: url(../../assets/icons/create.svg);
}
.toolbar-button--icon--system-modules-list {
--icon: url(../../assets/icons/extend.svg);
}
.toolbar-button--icon--navigation-files {
--icon: url(../../assets/icons/files.svg);
}
.toolbar-button--icon--help {
--icon: url(../../assets/icons/help.svg);
}
.toolbar-button--icon--navigation-media {
--icon: url(../../assets/icons/media.svg);
}
.toolbar-button--icon--pencil {
--icon: url(../../assets/icons/pencil.svg);
}
.toolbar-button--icon--preview {
--icon: url(../../assets/icons/eye.svg);
}
.toolbar-button--icon--entity-user-collection {
--icon: url(../../assets/icons/people.svg);
}
.toolbar-button--icon--system-admin-reports {
--icon: url(../../assets/icons/reports.svg);
}
.toolbar-button--icon--system-admin-structure {
--icon: url(../../assets/icons/structure.svg);
}
.toolbar-button--icon--user {
--icon: url(../../assets/icons/user.svg);
}
.toolbar-button--icon--announcements-feed-announcement {
--icon: url(../../assets/icons/announcement.svg);
&::before {
transform: scaleX(-1);
}
[dir="rtl"] & {
&::before {
transform: scaleX(1);
}
}
}
html:not([data-admin-toolbar="expanded"]) {
.toolbar-button--collapsible::after {
display: none;
}
/* Visually-hidden labels when collapsed. */
.toolbar-button--collapsible .toolbar-button__label {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
white-space: nowrap;
clip-path: inset(50%);
opacity: 0;
}
}
/* Hides button's label while transitioning. */
html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label {
display: none;
}

57
core/modules/navigation/css/components/toolbar-dropdown.css Executable file
View File

@@ -0,0 +1,57 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore wght */
.toolbar-dropdown__item + .toolbar-dropdown__item {
border-top: 1px solid #d8dfea;
}
.toolbar-dropdown__link {
display: block;
padding-inline: var(--admin-toolbar-space-16) var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-space-12);
-webkit-text-decoration: none;
text-decoration: none;
color: var(--admin-toolbar-color-gray-800);
border-radius: var(--admin-toolbar-space-8);
font-size: var(--admin-toolbar-font-size-info-sm);
line-height: var(--admin-toolbar-line-height-info-sm);
font-variation-settings: "wght" 700;
}
.toolbar-dropdown__link:hover {
z-index: 20;
color: var(--admin-toolbar-color-gray-900);
outline: 2px solid var(--admin-toolbar-color-blue-300);
outline-offset: var(--toolbar-button-outline-offset);
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-dropdown__link:focus {
z-index: 10;
color: var(--admin-toolbar-color-blue-600);
outline: 2px solid var(--admin-toolbar-color-focus);
outline-offset: var(--toolbar-button-outline-offset);
background-color: transparent;
}
.toolbar-dropdown__link:hover:focus {
background-color: var(--admin-toolbar-color-gray-050);
}
.toolbar-dropdown__list {
margin: 0;
padding: 0;
list-style-type: none;
}
.toolbar-dropdown__menu {
position: fixed;
z-index: 1000;
display: none;
inline-size: calc(11.25 * var(--admin-toolbar-rem));
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
border-radius: var(--admin-toolbar-space-12);
background: white;
box-shadow: 0 14px 30px 0 rgba(0, 0, 0, 0.1);
}
[data-drupal-dropdown][aria-expanded="true"] + .toolbar-dropdown__menu {
display: block;
}

57
core/modules/navigation/css/components/toolbar-dropdown.pcss.css Executable file
View File

@@ -0,0 +1,57 @@
/* cspell:ignore wght */
.toolbar-dropdown__item + .toolbar-dropdown__item {
border-top: 1px solid #d8dfea;
}
.toolbar-dropdown__link {
display: block;
padding-inline: var(--admin-toolbar-space-16) var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-space-12);
text-decoration: none;
color: var(--admin-toolbar-color-gray-800);
border-radius: var(--admin-toolbar-space-8);
font-size: var(--admin-toolbar-font-size-info-sm);
line-height: var(--admin-toolbar-line-height-info-sm);
font-variation-settings: "wght" 700;
&:hover {
z-index: 20;
color: var(--admin-toolbar-color-gray-900);
outline: 2px solid var(--admin-toolbar-color-blue-300);
outline-offset: var(--toolbar-button-outline-offset);
background-color: var(--admin-toolbar-color-gray-050);
}
&:focus {
z-index: 10;
color: var(--admin-toolbar-color-blue-600);
outline: 2px solid var(--admin-toolbar-color-focus);
outline-offset: var(--toolbar-button-outline-offset);
background-color: transparent;
}
&:hover:focus {
background-color: var(--admin-toolbar-color-gray-050);
}
}
.toolbar-dropdown__list {
margin: 0;
padding: 0;
list-style-type: none;
}
.toolbar-dropdown__menu {
position: fixed;
z-index: 1000;
display: none;
inline-size: calc(11.25 * var(--admin-toolbar-rem));
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
border-radius: var(--admin-toolbar-space-12);
background: white;
box-shadow: 0 14px 30px 0 rgba(0, 0, 0, 0.1);
}
[data-drupal-dropdown][aria-expanded="true"] + .toolbar-dropdown__menu {
display: block;
}

151
core/modules/navigation/css/components/toolbar-menu.css Executable file
View File

@@ -0,0 +1,151 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore csvg cpath wght */
/**
* @file
* Admin Toolbar menus styles.
*/
.toolbar-menu {
display: grid;
margin: 0;
padding: 0;
list-style-type: none;
gap: var(--admin-toolbar-space-4);
}
[class*="toolbar-menu--level-"] {
display: none;
}
[data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {
display: grid;
}
.toolbar-menu__item {
display: grid;
}
.toolbar-menu__item--level-1 {
border-radius: var(--admin-toolbar-space-8);
}
.toolbar-menu__item--level-1:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {
background: var(--admin-toolbar-color-gray-050);
}
.toolbar-menu--level-2 {
padding-block-end: var(--admin-toolbar-space-12);
box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);
}
[dir="rtl"] .toolbar-menu--level-2 {
box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100);
}
.toolbar-menu__link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-inline: var(--admin-toolbar-space-20) var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-space-8);
cursor: pointer;
text-align: start;
-webkit-text-decoration: none;
text-decoration: none;
letter-spacing: var(--admin-toolbar-letter-spacing-0-06);
word-break: break-word;
color: var(--admin-toolbar-color-gray-800);
border: none;
background-color: transparent;
font-family: inherit;
font-size: var(--admin-toolbar-font-size-info-xs);
line-height: var(--admin-toolbar-line-height-info-xs);
font-variation-settings: "wght" 600;
inline-size: 100%;
gap: var(--admin-toolbar-space-8);
}
.toolbar-menu__link:has(+ .toolbar-menu .is-active) {
color: var(--admin-toolbar-color-gray-950);
}
.toolbar-menu__link.current {
color: var(--admin-toolbar-color-gray-990);
}
.toolbar-menu__link.current::after {
position: absolute;
z-index: 1;
inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);
inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);
content: "";
border-radius: 50%;
background-color: currentColor;
inline-size: var(--admin-toolbar-space-8);
block-size: var(--admin-toolbar-space-8);
}
.toolbar-menu__link:focus {
color: var(--admin-toolbar-color-gray-990);
outline-offset: -2px;
background-color: transparent;
}
.toolbar-menu__link:hover {
color: var(--admin-toolbar-color-blue-700);
background-color: transparent;
}
.toolbar-menu__link:hover::before {
position: absolute;
z-index: 1;
inset-block-start: 0;
inset-inline-start: 0;
content: "";
background-color: currentColor;
inline-size: var(--admin-toolbar-space-8);
block-size: 100%;
}
.toolbar-menu__link[aria-expanded]::after {
flex-shrink: 0;
margin-inline-start: auto;
content: "";
transition: transform var(--admin-toolbar-transition);
transform: rotate(90deg);
background-color: currentColor;
block-size: var(--admin-toolbar-space-16);
inline-size: var(--admin-toolbar-space-16);
-webkit-mask-size: var(--admin-toolbar-space-16);
mask-size: var(--admin-toolbar-space-16);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
}
[dir="rtl"] .toolbar-menu__link[aria-expanded]::after {
transform: rotate(90deg);
}
@media (forced-colors: active) {
.toolbar-menu__link[aria-expanded]::after {
background: canvastext;
}
}
.toolbar-menu__link[aria-expanded="true"]::after {
transform: rotate(-90deg);
}
[dir="rtl"] .toolbar-menu__link[aria-expanded="true"]::after {
transform: rotate(-90deg);
}
.toolbar-menu__link--3 {
padding-inline-start: var(--admin-toolbar-space-32);
font-size: var(--admin-toolbar-font-size-info-xs);
line-height: var(--admin-toolbar-line-height-info-xs);
font-variation-settings: "wght" 500;
}
.toolbar-menu__link--3::after {
position: absolute;
z-index: 1;
inset-block-start: 50%;
inset-inline-start: 0;
content: "";
background-color: var(--admin-toolbar-color-gray-100);
inline-size: var(--admin-toolbar-space-20);
block-size: 1px;
}
.toolbar-menu__link--3:hover::after {
background-color: currentColor;
}

169
core/modules/navigation/css/components/toolbar-menu.pcss.css Executable file
View File

@@ -0,0 +1,169 @@
/* cspell:ignore csvg cpath wght */
/**
* @file
* Admin Toolbar menus styles.
*/
@import "../base/media-queries.pcss.css";
.toolbar-menu {
display: grid;
margin: 0;
padding: 0;
list-style-type: none;
gap: var(--admin-toolbar-space-4);
}
[class*="toolbar-menu--level-"] {
display: none;
}
[data-toolbar-menu-trigger][aria-expanded="true"] + [class*="toolbar-menu--level-"] {
display: grid;
}
.toolbar-menu__item {
display: grid;
}
.toolbar-menu__item--level-1 {
border-radius: var(--admin-toolbar-space-8);
&:has(> [data-toolbar-menu-trigger][aria-expanded="true"]) {
background: var(--admin-toolbar-color-gray-050);
}
}
.toolbar-menu--level-2 {
padding-block-end: var(--admin-toolbar-space-12);
box-shadow: inset var(--admin-toolbar-space-4) 0 0 0 var(--admin-toolbar-color-gray-100);
[dir="rtl"] & {
box-shadow: inset calc(-1 * var(--admin-toolbar-space-4)) 0 0 0 var(--admin-toolbar-color-gray-100);
}
}
.toolbar-menu__link {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding-inline: var(--admin-toolbar-space-20) var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-space-8);
cursor: pointer;
text-align: start;
text-decoration: none;
letter-spacing: var(--admin-toolbar-letter-spacing-0-06);
word-break: break-word;
color: var(--admin-toolbar-color-gray-800);
border: none;
background-color: transparent;
font-family: inherit;
font-size: var(--admin-toolbar-font-size-info-xs);
line-height: var(--admin-toolbar-line-height-info-xs);
font-variation-settings: "wght" 600;
inline-size: 100%;
gap: var(--admin-toolbar-space-8);
&:has(+ .toolbar-menu .is-active) {
color: var(--admin-toolbar-color-gray-950);
}
&.current {
color: var(--admin-toolbar-color-gray-990);
&::after {
position: absolute;
z-index: 1;
inset-block-start: calc(50% - var(--admin-toolbar-space-8) / 2);
inset-inline-start: calc(var(--admin-toolbar-space-4) * -0.5);
content: "";
border-radius: 50%;
background-color: currentColor;
inline-size: var(--admin-toolbar-space-8);
block-size: var(--admin-toolbar-space-8);
}
}
&:focus {
color: var(--admin-toolbar-color-gray-990);
outline-offset: -2px;
background-color: transparent;
}
&:hover {
color: var(--admin-toolbar-color-blue-700);
background-color: transparent;
&::before {
position: absolute;
z-index: 1;
inset-block-start: 0;
inset-inline-start: 0;
content: "";
background-color: currentColor;
inline-size: var(--admin-toolbar-space-8);
block-size: 100%;
}
}
&[aria-expanded] {
&::after {
flex-shrink: 0;
margin-inline-start: auto;
content: "";
transition: transform var(--admin-toolbar-transition);
transform: rotate(90deg);
background-color: currentColor;
block-size: var(--admin-toolbar-space-16);
inline-size: var(--admin-toolbar-space-16);
mask-size: var(--admin-toolbar-space-16);
mask-repeat: no-repeat;
mask-position: center center;
mask-image: url(../../assets/icons/chevron.svg);
[dir="rtl"] & {
transform: rotate(90deg);
}
@media (--forced-colors) {
background: canvastext;
}
}
}
&[aria-expanded="true"] {
&::after {
transform: rotate(-90deg);
[dir="rtl"] & {
transform: rotate(-90deg);
}
}
}
}
.toolbar-menu__link--3 {
padding-inline-start: var(--admin-toolbar-space-32);
font-size: var(--admin-toolbar-font-size-info-xs);
line-height: var(--admin-toolbar-line-height-info-xs);
font-variation-settings: "wght" 500;
&::after {
position: absolute;
z-index: 1;
inset-block-start: 50%;
inset-inline-start: 0;
content: "";
background-color: var(--admin-toolbar-color-gray-100);
inline-size: var(--admin-toolbar-space-20);
block-size: 1px;
}
&:hover {
&::after {
background-color: currentColor;
}
}
}

94
core/modules/navigation/css/components/toolbar-popover.css Executable file
View File

@@ -0,0 +1,94 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
.toolbar-popover {
--safe-triangle-cursor-y: 6.25rem;
--safe-triangle-cursor-x: 6.25rem;
--safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
--safe-triangle-submenu-start-y: 5vh;
--safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
/* TODO: Replace with calculated value of popover content height. */
--safe-triangle-submenu-end-y: 66vh;
border-radius: var(--admin-toolbar-space-8);
}
.toolbar-popover--expanded {
background-color: var(--admin-toolbar-color-expanded);
}
.toolbar-popover__control {
inline-size: 100%;
}
.toolbar-popover__control:hover [data-toolbar-popover-safe-triangle] {
display: block;
}
[data-toolbar-popover-wrapper] {
position: fixed;
z-index: var(--admin-toolbar-z-index-popover);
display: grid;
overflow: auto;
grid-auto-rows: max-content;
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
transition:
transform var(--admin-toolbar-transition),
opacity var(--admin-toolbar-transition);
transform: translateX(-100%);
transform-origin: 0;
opacity: 0;
background-color: var(--admin-toolbar-color-white);
inline-size: var(--admin-toolbar-sidebar-width);
block-size: 100vh;
gap: var(--admin-toolbar-space-8);
inset-block-start: var(--admin-toolbar-sidebar-header);
inset-inline-start: 0;
/* Hide the drop-shadow on the left side. */
clip-path: inset(0 -10rem 0 0);
}
[dir="rtl"] [data-toolbar-popover-wrapper] {
/* Hide the drop-shadow on the right side. */
clip-path: inset(0 0 0 -10rem);
transform: translateX(0);
}
@media (min-width: 64rem) {
[data-toolbar-popover-wrapper] {
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
padding-block-start: var(--admin-toolbar-space-16);
transform: translateX(0);
box-shadow:
0 0 72px rgba(0, 0, 0, 0.2),
0 0 8px rgba(0, 0, 0, 0.04),
0 0 40px rgba(0, 0, 0, 0.06);
inline-size: var(--admin-toolbar-popover-width);
inset-block-start: 0;
inset-inline-start: 1px;
}
}
[data-toolbar-popover-safe-triangle] {
position: fixed;
display: none;
content: "";
inset: 0;
clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
}
[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
transform: translateX(0);
opacity: 1;
}
@media (min-width: 64rem) {
[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
transform: translateX(var(--admin-toolbar-sidebar-width));
}
[dir="rtl"] :is([data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper]) {
transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));
}
}
[data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper] {
transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left, var(--admin-toolbar-space-72))));
}
[dir="rtl"] :is([data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper]) {
transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right, var(--admin-toolbar-space-72))));
}

99
core/modules/navigation/css/components/toolbar-popover.pcss.css Executable file
View File

@@ -0,0 +1,99 @@
@import "../base/media-queries.pcss.css";
.toolbar-popover {
--safe-triangle-cursor-y: 100px;
--safe-triangle-cursor-x: 100px;
--safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
--safe-triangle-submenu-start-y: 5vh;
--safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
/* TODO: Replace with calculated value of popover content height. */
--safe-triangle-submenu-end-y: 66vh;
border-radius: var(--admin-toolbar-space-8);
}
.toolbar-popover--expanded {
background-color: var(--admin-toolbar-color-expanded);
}
.toolbar-popover__control {
inline-size: 100%;
&:hover {
[data-toolbar-popover-safe-triangle] {
display: block;
}
}
}
[data-toolbar-popover-wrapper] {
position: fixed;
z-index: var(--admin-toolbar-z-index-popover);
display: grid;
overflow: auto;
grid-auto-rows: max-content;
padding: var(--admin-toolbar-space-12) var(--admin-toolbar-space-16) var(--admin-toolbar-space-16);
transition:
transform var(--admin-toolbar-transition),
opacity var(--admin-toolbar-transition);
transform: translateX(-100%);
transform-origin: 0;
opacity: 0;
background-color: var(--admin-toolbar-color-white);
inline-size: var(--admin-toolbar-sidebar-width);
block-size: 100vh;
gap: var(--admin-toolbar-space-8);
inset-block-start: var(--admin-toolbar-sidebar-header);
inset-inline-start: 0;
/* Hide the drop-shadow on the left side. */
clip-path: inset(0 -10rem 0 0);
[dir="rtl"] & {
/* Hide the drop-shadow on the right side. */
clip-path: inset(0 0 0 -10rem);
transform: translateX(0);
}
@media (--admin-toolbar-desktop) {
--admin-toolbar-z-index-popover: var(--drupal-admin-z-index-popover, -1);
padding-block-start: var(--admin-toolbar-space-16);
transform: translateX(0);
box-shadow:
0 0 72px rgba(0, 0, 0, 0.2),
0 0 8px rgba(0, 0, 0, 0.04),
0 0 40px rgba(0, 0, 0, 0.06);
inline-size: var(--admin-toolbar-popover-width);
inset-block-start: 0;
inset-inline-start: 1px;
}
}
[data-toolbar-popover-safe-triangle] {
position: fixed;
display: none;
content: "";
inset: 0;
clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
}
[data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
transform: translateX(0);
opacity: 1;
@media (--admin-toolbar-desktop) {
transform: translateX(var(--admin-toolbar-sidebar-width));
[dir="rtl"] & {
transform: translateX(calc(var(--admin-toolbar-sidebar-width) * -1));
}
}
}
[data-admin-toolbar="collapsed"] [data-toolbar-popover-wrapper] {
transform: translateX(calc((16 * var(--admin-toolbar-rem) * -1) + var(--drupal-displace-offset-left, var(--admin-toolbar-space-72))));
[dir="rtl"] & {
transform: translateX(calc((16 * var(--admin-toolbar-rem)) + var(--drupal-displace-offset-right, var(--admin-toolbar-space-72))));
}
}

31
core/modules/navigation/css/components/tooltip.css Executable file
View File

@@ -0,0 +1,31 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/* cspell:ignore wght */
/**
* @file
* Tooltip styles.
*/
.toolbar-tooltip {
position: fixed;
z-index: var(--admin-toolbar-z-index-tooltip);
display: none;
padding-inline: var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-space-8);
color: var(--admin-toolbar-color-white);
border-radius: var(--admin-toolbar-space-8);
background-color: var(--admin-toolbar-color-gray-990);
font-size: var(--admin-toolbar-font-size-info-sm);
font-variation-settings: "wght" 600;
line-height: var(--admin-toolbar-line-height-info-sm);
}
[data-drupal-tooltip]:hover + .toolbar-tooltip,
[data-drupal-tooltip]:focus + .toolbar-tooltip {
display: block;
}
[data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
display: none;
}

28
core/modules/navigation/css/components/tooltip.pcss.css Executable file
View File

@@ -0,0 +1,28 @@
/* cspell:ignore wght */
/**
* @file
* Tooltip styles.
*/
.toolbar-tooltip {
position: fixed;
z-index: var(--admin-toolbar-z-index-tooltip);
display: none;
padding-inline: var(--admin-toolbar-space-12);
padding-block: var(--admin-toolbar-space-8);
color: var(--admin-toolbar-color-white);
border-radius: var(--admin-toolbar-space-8);
background-color: var(--admin-toolbar-color-gray-990);
font-size: var(--admin-toolbar-font-size-info-sm);
font-variation-settings: "wght" 600;
line-height: var(--admin-toolbar-line-height-info-sm);
}
[data-drupal-tooltip]:hover + .toolbar-tooltip,
[data-drupal-tooltip]:focus + .toolbar-tooltip {
display: block;
}
[data-admin-toolbar="expanded"] [data-drupal-tooltip]:hover + .toolbar-block__title-tooltip {
display: none;
}

73
core/modules/navigation/css/components/top-bar.css Executable file
View File

@@ -0,0 +1,73 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
:root {
--admin-toolbar-top-bar-height: calc(4 * var(--admin-toolbar-rem));
}
.top-bar {
position: relative;
z-index: var(--admin-toolbar-z-index-top-bar);
display: flex;
padding-inline: var(--admin-toolbar-space-4);
padding-block: var(--admin-toolbar-space-4);
background-color: white;
box-shadow: 0 0 8px 0 var(--admin-toolbar-color-shadow-15);
font-family: var(--admin-toolbar-font-family);
}
@media (min-width: 64rem) {
.top-bar {
block-size: var(--admin-toolbar-top-bar-height);
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
width: 100vw;
padding-block: var(--admin-toolbar-space-12);
padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
box-shadow:
0 0 40px 0 var(--admin-toolbar-color-shadow-6),
0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
}
[dir="rtl"] .top-bar {
padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
}
}
/* When only one burger button hide top bar on desktop. */
@media (min-width: 64rem) {
.top-bar:has(.top-bar__burger:only-child) {
display: none;
}
}
@media (min-width: 64rem) {
.top-bar:not(:has(.top-bar__burger:only-child)) ~ .dialog-off-canvas-main-canvas {
margin-block-start: var(--admin-toolbar-top-bar-height);
}
}
.top-bar__burger {
align-self: start;
}
@media (min-width: 64rem) {
.top-bar__burger {
display: none;
}
}
.top-bar__content {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: space-between;
gap: var(--admin-toolbar-space-16);
width: 100%;
}
.top-bar__controls {
display: none;
}
@media (min-width: 64rem) {
.top-bar__controls {
display: flex;
gap: var(--admin-toolbar-space-8);
}
}

71
core/modules/navigation/css/components/top-bar.pcss.css Executable file
View File

@@ -0,0 +1,71 @@
@import "../base/media-queries.pcss.css";
:root {
--admin-toolbar-top-bar-height: calc(4 * var(--admin-toolbar-rem));
}
.top-bar {
position: relative;
z-index: var(--admin-toolbar-z-index-top-bar);
display: flex;
padding-inline: var(--admin-toolbar-space-4);
padding-block: var(--admin-toolbar-space-4);
background-color: white;
box-shadow: 0 0 8px 0 var(--admin-toolbar-color-shadow-15);
font-family: var(--admin-toolbar-font-family);
@media (--admin-toolbar-desktop) {
block-size: var(--admin-toolbar-top-bar-height);
position: fixed;
inset-block-start: 0;
inset-inline-start: 0;
width: 100vw;
padding-block: var(--admin-toolbar-space-12);
padding-inline: calc(var(--drupal-displace-offset-left, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
box-shadow:
0 0 40px 0 var(--admin-toolbar-color-shadow-6),
0 4px 4px 0 var(--admin-toolbar-color-shadow-8);
[dir="rtl"] & {
padding-inline: calc(var(--drupal-displace-offset-right, var(--admin-toolbar-sidebar-width)) + var(--admin-toolbar-space-32)) var(--admin-toolbar-space-32);
}
}
}
/* When only one burger button hide top bar on desktop. */
.top-bar:has(.top-bar__burger:only-child) {
@media (--admin-toolbar-desktop) {
display: none;
}
}
.top-bar:not(:has(.top-bar__burger:only-child)) ~ .dialog-off-canvas-main-canvas {
@media (--admin-toolbar-desktop) {
margin-block-start: var(--admin-toolbar-top-bar-height);
}
}
.top-bar__burger {
align-self: start;
@media (--admin-toolbar-desktop) {
display: none;
}
}
.top-bar__content {
display: grid;
grid-auto-flow: column;
align-items: center;
justify-content: space-between;
gap: var(--admin-toolbar-space-16);
width: 100%;
}
.top-bar__controls {
display: none;
@media (--admin-toolbar-desktop) {
display: flex;
gap: var(--admin-toolbar-space-8);
}
}

186
core/modules/navigation/js/admin-toolbar-wrapper.js Executable file
View File

@@ -0,0 +1,186 @@
/**
*
* Common JS managing behavior of admin-toolbar.
*
* Init Toolbar triggers.
*
* One trigger is button in Toolbar.
* Another button in control panel on mobile.
* Third is mobile shadow.
* Fourth is close sidebar button on mobile.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
*/
(
(Drupal, once) => {
/**
* Constant representing the event name for toggling the admin toolbar state.
* @type {string}
*/
const HTML_TRIGGER_EVENT = 'toggle-admin-toolbar';
/**
* Constant representing the event name for toggling the admin toolbar content.
* @type {string}
*/
const SIDEBAR_CONTENT_EVENT = 'toggle-admin-toolbar-content';
Drupal.behaviors.navigationProcessHtmlListener = {
/**
* Attaches the behavior to the context element.
*
* @param {HTMLElement} context The context element to attach the behavior to.
*/
attach: (context) => {
if (context === document) {
if (
once(
'admin-toolbar-document-triggers-listener',
document.documentElement,
).length
) {
const doc = document.documentElement;
// This is special attribute which added to apply css
// with animations and avoid layout shift.
setTimeout(() => {
doc.setAttribute('data-admin-toolbar-transitions', true);
}, 200);
doc.addEventListener(HTML_TRIGGER_EVENT, (e) => {
// Prevents multiple triggering while transitioning.
const newState = e.detail.state;
const isUserInput = e.detail.manual;
document.documentElement.setAttribute(
'data-admin-toolbar',
newState ? 'expanded' : 'collapsed',
);
// Set [data-admin-toolbar-body-scroll='locked']
// See css/components/body-scroll-lock.pcss.css.
document.documentElement.setAttribute(
'data-admin-toolbar-body-scroll',
newState ? 'locked' : 'unlocked',
);
doc.querySelector('.admin-toolbar').dispatchEvent(
new CustomEvent(SIDEBAR_CONTENT_EVENT, {
detail: {
state: newState,
},
}),
);
if (isUserInput) {
document.documentElement.setAttribute(
'data-admin-toolbar-animating',
true,
);
}
setTimeout(() => {
document.documentElement.removeAttribute(
'data-admin-toolbar-animating',
);
}, 200);
Drupal.displace(true);
});
/**
* Initialize Drupal.displace()
*
* We add the displace attribute to a separate full width element because we
* don't want this element to have transitions. Note that this element and the
* navbar share the same exact width.
*/
const initDisplace = () => {
const displaceElement = doc
.querySelector('.admin-toolbar')
?.querySelector('.admin-toolbar__displace-placeholder');
const edge =
document.documentElement.dir === 'rtl' ? 'right' : 'left';
displaceElement?.setAttribute(`data-offset-${edge}`, '');
Drupal.displace(true);
};
initDisplace();
}
}
},
};
// Any triggers on page. Inside or outside sidebar.
// For now button in sidebar + mobile header and background.
Drupal.behaviors.navigationProcessToolbarTriggers = {
attach: (context) => {
const triggers = once(
'admin-toolbar-trigger',
'[aria-controls="admin-toolbar"]',
context,
);
/**
* Updates the state of all trigger elements based on the provided state.
*
* @param {boolean} toState The new state of the sidebar.
*/
const toggleTriggers = (toState) => {
triggers.forEach((trigger) => {
trigger.setAttribute('aria-expanded', toState);
const text = trigger.querySelector('[data-text]');
if (text) {
text.textContent = toState
? Drupal.t('Collapse sidebar')
: Drupal.t('Expand sidebar');
}
});
};
let firstState =
localStorage.getItem('Drupal.navigation.sidebarExpanded') !== 'false';
// We need to display closed sidebar on init on mobile.
if (window.matchMedia('(max-width: 1023px)').matches) {
firstState = false;
}
// Set values on load.
toggleTriggers(firstState);
document.documentElement.dispatchEvent(
new CustomEvent(HTML_TRIGGER_EVENT, {
bubbles: true,
detail: {
state: firstState,
manual: false,
},
}),
);
triggers.forEach((trigger) => {
trigger.addEventListener('click', (e) => {
const state =
e.currentTarget.getAttribute('aria-expanded') === 'false';
trigger.dispatchEvent(
new CustomEvent(HTML_TRIGGER_EVENT, {
bubbles: true,
detail: {
state,
manual: true,
},
}),
);
toggleTriggers(state);
localStorage.setItem('Drupal.navigation.sidebarExpanded', state);
});
});
},
};
}
)(Drupal, once);

265
core/modules/navigation/js/arrow-navigation.js Executable file
View File

@@ -0,0 +1,265 @@
/**
* @file
* Keyboard navigation component.
*/
((Drupal, once, { focusable }) => {
/**
* Attaches the keyboard navigation functionality.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches the behavior to the `.admin-toolbar` element.
*/
Drupal.behaviors.keyboardNavigation = {
attach: (context) => {
once('keyboard-processed', '.admin-toolbar', context).forEach(
(sidebar) => {
const IS_RTL = document.documentElement.dir === 'rtl';
const isInteractive = (element) =>
element.getAttribute('aria-expanded');
const getFocusableGroup = (element) =>
element.closest('[class*="toolbar-menu--level-"]') ||
element.closest('[data-toolbar-popover-wrapper]') ||
element.closest('.admin-toolbar');
const findFirstElementByChar = (focusableElements, targetChar) => {
const elementWIthChar = Array.prototype.find.call(
focusableElements,
(element) => {
const dataText = element.dataset.indexText;
return dataText && dataText[0] === targetChar;
},
);
return elementWIthChar;
};
const checkChar = ({ key, target }) => {
const currentGroup = getFocusableGroup(target);
const foundElementWithIndexChar = findFirstElementByChar(
focusable(currentGroup),
key,
);
if (foundElementWithIndexChar) {
foundElementWithIndexChar.focus();
}
};
const focusFirstInGroup = (focusableElements) => {
focusableElements[0].focus();
};
const focusLastInGroup = (focusableElements) => {
focusableElements[focusableElements.length - 1].focus();
};
const focusNextInGroup = (focusableElements, element) => {
const currentIndex = Array.prototype.indexOf.call(
focusableElements,
element,
);
if (currentIndex === focusableElements.length - 1) {
focusableElements[0].focus();
} else {
focusableElements[currentIndex + 1].focus();
}
};
const focusPreviousInGroup = (focusableElements, element) => {
const currentIndex = Array.prototype.indexOf.call(
focusableElements,
element,
);
if (currentIndex === 0) {
focusableElements[focusableElements.length - 1].focus();
} else {
focusableElements[currentIndex - 1].focus();
}
};
const toggleMenu = (element, state) =>
element.dispatchEvent(
new CustomEvent('toolbar-menu-set-toggle', {
bubbles: false,
detail: {
state,
},
}),
);
const closePopover = (element) =>
element.dispatchEvent(
new CustomEvent('toolbar-popover-close', { bubbles: true }),
);
const openPopover = (element) =>
element.dispatchEvent(
new CustomEvent('toolbar-popover-open', { bubbles: true }),
);
const focusClosestPopoverTrigger = (element) => {
element
.closest('[data-toolbar-popover]')
?.querySelector('[data-toolbar-popover-control]')
?.focus();
};
const focusFirstMenuElement = (element) => {
const elements = focusable(
element
.closest('.toolbar-menu__item')
?.querySelector('.toolbar-menu'),
);
if (elements?.length) {
elements[0].focus();
}
};
const focusFirstPopoverElement = (element) => {
// Zero is always popover trigger.
// And Popover header can be not interactive.
const elements = focusable(
element.closest('[data-toolbar-popover]'),
);
if (elements?.length >= 1) {
elements[1].focus();
}
};
const focusLastPopoverElement = (element) => {
const elements = focusable(
element.closest('[data-toolbar-popover]'),
);
if (elements?.length > 0) {
elements[elements.length - 1].focus();
}
};
const closeNonInteractiveElement = (element) => {
// If we are inside submenus.
if (element.closest('[class*="toolbar-menu--level-"]')) {
const trigger =
element.closest('.toolbar-menu')?.previousElementSibling;
toggleMenu(trigger, false);
trigger.focus();
} else {
closePopover(element);
focusClosestPopoverTrigger(element);
}
};
const openInteractiveElement = (element) => {
// If menu button.
if (element.hasAttribute('data-toolbar-menu-trigger')) {
toggleMenu(element, true);
focusFirstMenuElement(element);
}
// If popover trigger.
if (element.hasAttribute('data-toolbar-popover-control')) {
openPopover(element);
focusFirstPopoverElement(element);
}
};
const closeInteractiveElement = (element) => {
// If menu button.
if (element.hasAttribute('data-toolbar-menu-trigger')) {
if (element.getAttribute('aria-expanded') === 'false') {
closeNonInteractiveElement(element);
} else {
toggleMenu(element, false);
focusFirstMenuElement(element);
}
}
// If popover trigger.
if (element.hasAttribute('data-toolbar-popover-control')) {
openPopover(element);
focusLastPopoverElement(element);
}
};
const arrowsSideControl = ({ key, target }) => {
if (
(key === 'ArrowRight' && !IS_RTL) ||
(key === 'ArrowLeft' && IS_RTL)
) {
if (isInteractive(target)) {
openInteractiveElement(target);
// If also we want to care about expand button.
if (
target.getAttribute('aria-controls') === 'admin-toolbar' &&
target.getAttribute('aria-expanded') === 'false'
) {
target.click();
}
}
} else if (
(key === 'ArrowRight' && IS_RTL) ||
(key === 'ArrowLeft' && !IS_RTL)
) {
if (isInteractive(target)) {
closeInteractiveElement(target);
// If also we want to care about expand button.
if (
target.getAttribute('aria-controls') === 'admin-toolbar' &&
target.getAttribute('aria-expanded') !== 'false'
) {
target.click();
}
} else {
closeNonInteractiveElement(target);
}
}
};
const arrowsDirectionControl = ({ key, target }) => {
const focusableElements = focusable(getFocusableGroup(target));
if (key === 'ArrowUp') {
focusPreviousInGroup(focusableElements, target);
} else if (key === 'ArrowDown') {
focusNextInGroup(focusableElements, target);
}
};
sidebar.addEventListener('keydown', (e) => {
switch (e.key) {
case 'Escape':
closePopover(e.target);
focusClosestPopoverTrigger(e.target);
break;
case 'ArrowLeft':
case 'ArrowRight':
e.preventDefault();
arrowsSideControl(e);
break;
case 'ArrowDown':
case 'ArrowUp':
e.preventDefault();
arrowsDirectionControl(e);
break;
case 'Home':
e.preventDefault();
focusFirstInGroup(getFocusableGroup(e.target));
break;
case 'End':
e.preventDefault();
focusLastInGroup(getFocusableGroup(e.target));
break;
default:
checkChar(e);
break;
}
});
},
);
},
};
})(Drupal, once, window.tabbable);

155
core/modules/navigation/js/sidebar.js Executable file
View File

@@ -0,0 +1,155 @@
/**
* @file
*
* Sidebar component.
*
* Only few common things. Like close all popovers when one is opened.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches the behavior to the `.admin-toolbar` element.
*/
(
(Drupal, once) => {
/**
* Drupal behaviors object.
*
* @type {Drupal~behaviors}
*/
Drupal.behaviors.navigation = {
attach(context) {
/**
* Sidebar element with the `.admin-toolbar` class.
*
* @type {HTMLElement}
*/
once('navigation', '.admin-toolbar', context).forEach((sidebar) => {
const backButton = sidebar.querySelector(
'[data-toolbar-back-control]',
);
if (!backButton) {
// We're in layout editing mode and the .admin-toolbar we have in
// scope here is the empty one that only exists to leave space for
// the one added by layout builder. We need to use an empty
// .admin-toolbar element because the css uses the adjacent
// sibling selector.
// @see \navigation_page_top();
return;
}
/**
* All menu triggers.
*
* @type {NodeList}
*/
const buttons = sidebar.querySelectorAll(
'[data-toolbar-menu-trigger]',
);
/**
* All popovers and tooltip triggers.
*
* @type {NodeList}
*/
// const popovers = sidebar.querySelectorAll('[data-toolbar-popover]');
/**
* NodeList of all tooltip elements.
*
* @type {NodeList}
*/
const tooltips = sidebar.querySelectorAll('[data-drupal-tooltip]');
const closeButtons = () => {
buttons.forEach((button) => {
button.dispatchEvent(
new CustomEvent('toolbar-menu-set-toggle', {
detail: {
state: false,
},
}),
);
});
};
const closePopovers = (current = false) => {
// TODO: Find way to use popovers variable.
// This change needed because BigPipe replaces user popover.
sidebar
.querySelectorAll('[data-toolbar-popover]')
.forEach((popover) => {
if (
current &&
current instanceof Element &&
popover.isEqualNode(current)
) {
return;
}
popover.dispatchEvent(
new CustomEvent('toolbar-popover-close', {}),
);
});
};
// Add click event listeners to all buttons and then contains the callback
// to expand / collapse the button's menus.
sidebar.addEventListener('click', (e) => {
if (e.target.matches('button, button *')) {
e.target.closest('button').focus();
}
});
// We want to close all popovers when we close sidebar.
sidebar.addEventListener('toggle-admin-toolbar-content', (e) => {
if (!e.detail.state) {
closePopovers();
}
});
// When any popover opened we close all others.
sidebar.addEventListener('toolbar-popover-toggled', (e) => {
if (e.detail.state) {
closeButtons();
closePopovers(e.target);
}
});
// When any menu opened we close all others.
sidebar.addEventListener('toolbar-menu-toggled', (e) => {
if (e.detail.state) {
// We want to close buttons on when new opened only if they are on same level.
const targetLevel = e.detail.level;
buttons.forEach((button) => {
const buttonLevel = button.dataset.toolbarMenuTrigger;
if (
!button.isEqualNode(e.target) &&
+buttonLevel === +targetLevel
) {
button.dispatchEvent(
new CustomEvent('toolbar-menu-set-toggle', {
detail: {
state: false,
},
}),
);
}
});
}
});
backButton.addEventListener('click', closePopovers);
// Tooltips triggered on hover and focus so add an extra event listener
// to close all popovers.
tooltips.forEach((tooltip) => {
['mouseover', 'focus'].forEach((e) => {
tooltip.addEventListener(e, closePopovers);
});
});
});
},
};
}
)(Drupal, once);

53
core/modules/navigation/js/toolbar-dropdown.js Executable file
View File

@@ -0,0 +1,53 @@
/* cspell:ignore uidom */
((Drupal, once, { computePosition, offset, shift, flip }) => {
/**
* Attaches the dropdown behavior to all required triggers.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches the dropdown behavior.
*/
Drupal.behaviors.dropdownInit = {
attach: (context) => {
once('dropdown-trigger', '[data-drupal-dropdown]', context).forEach(
(trigger) => {
const dropdown = trigger.nextElementSibling;
const updatePosition = () => {
computePosition(trigger, dropdown, {
strategy: 'fixed',
placement: trigger.dataset.drupalDropdownPosition || 'bottom',
middleware: [
flip({ padding: 16 }),
offset(6),
shift({ padding: 16 }),
],
}).then(({ x, y }) => {
Object.assign(dropdown.style, {
left: `${x}px`,
top: `${y}px`,
});
});
};
trigger.addEventListener('click', (e) => {
updatePosition();
trigger.setAttribute(
'aria-expanded',
e.currentTarget.getAttribute('aria-expanded') === 'false',
);
});
// Event listener to close dropdown when clicking outside
document.addEventListener('click', (e) => {
const isButtonClicked = trigger.contains(e.target);
if (!isButtonClicked) {
trigger.setAttribute('aria-expanded', 'false');
}
});
},
);
},
};
})(Drupal, once, FloatingUIDOM);

135
core/modules/navigation/js/toolbar-menu.js Executable file
View File

@@ -0,0 +1,135 @@
/**
*
* Toolbar menu code.
*
* Toggle own state
* Listens toolbar-menu-set-toggle to change state.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
*/
(
(Drupal, once) => {
/**
* Constant for the "toolbar-menu-set-toggle" event name.
*
* @type {string}
*/
const TOOLBAR_MENU_SET_TOGGLE = 'toolbar-menu-set-toggle';
/**
* Initializes menu buttons.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Toggles aria-expanded attribute.
* Changes buttons inner text.
* Listens event when should be expanded.
*/
Drupal.behaviors.navigationProcessToolbarMenuTriggers = {
attach: (context) => {
once(
'toolbar-menu-trigger',
'[data-toolbar-menu-trigger]',
context,
).forEach((button) => {
const menu = button.nextElementSibling;
/**
* Element containing the button text.
*
* @type {HTMLElement}
*/
const text = button.querySelector('.toolbar-menu__link-action');
/**
* Toggles the button's aria-expanded attribute and updates its text.
* This is only one function which change state of button.
*
* @param {boolean} state The button state it should be expanded or collapsed.
*/
const toggleButtonState = (state) => {
button.setAttribute('aria-expanded', state);
if (text) {
text.textContent = state
? Drupal.t('Collapse')
: Drupal.t('Extend');
}
if (state) {
menu.removeAttribute('inert');
} else {
menu.setAttribute('inert', true);
}
};
button.addEventListener('click', (e) => {
const level = e.currentTarget.dataset.toolbarMenuTrigger;
const state =
e.currentTarget.getAttribute('aria-expanded') === 'false';
toggleButtonState(state);
button.dispatchEvent(
new CustomEvent('toolbar-menu-toggled', {
bubbles: true,
detail: {
state,
level,
},
}),
);
});
// State of submenu button can be changed by CustomEvent.
button.addEventListener(TOOLBAR_MENU_SET_TOGGLE, (e) => {
const newState = e.detail.state;
toggleButtonState(newState);
});
});
},
};
/**
* Initializes menu links.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
*
* When current url it adds classes and dispatch event to popover.
*/
Drupal.behaviors.navigationProcessToolbarMenuLinks = {
attach: (context) => {
once(
'toolbar-menu-link',
'a.toolbar-menu__link, a.toolbar-button',
context,
).forEach((link) => {
// What we do if menu link is in current url.
if (document.URL === link.href) {
link.classList.add('current', 'is-active');
link.dispatchEvent(
new CustomEvent('toolbar-active-url', {
bubbles: true,
}),
);
// We also want to open all parent menus.
const menu = link.closest('.toolbar-menu');
if (menu) {
menu.previousElementSibling.dispatchEvent(
new CustomEvent(TOOLBAR_MENU_SET_TOGGLE, {
detail: {
state: true,
},
}),
);
}
}
});
},
};
}
)(Drupal, once);

157
core/modules/navigation/js/toolbar-popover.js Executable file
View File

@@ -0,0 +1,157 @@
/**
*
* Toolbar popover.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
*/
const POPOVER_OPEN_DELAY = 150;
const POPOVER_CLOSE_DELAY = 400;
((Drupal, once) => {
Drupal.behaviors.navigationProcessPopovers = {
/**
* Attaches the behavior to the context element.
*
* @param {HTMLElement} context The context element to attach the behavior to.
*/
attach: (context) => {
once(
'toolbar-popover',
context.querySelectorAll('[data-toolbar-popover]'),
).forEach((popover) => {
// This is trigger of popover. Currently only first level button.
const button = popover.querySelector('[data-toolbar-popover-control]');
// This is tooltip content. Currently child menus only.
const tooltip = popover.querySelector('[data-toolbar-popover-wrapper]');
if (!button || !tooltip) return;
const handleMouseMove = (event) => {
button.style.setProperty(
'--safe-triangle-cursor-x',
`${event.clientX}px`,
);
button.style.setProperty(
'--safe-triangle-cursor-y',
`${event.clientY}px`,
);
};
const expandPopover = () => {
popover.classList.add('toolbar-popover--expanded');
tooltip.removeAttribute('inert');
};
const collapsePopover = () => {
popover.classList.remove('toolbar-popover--expanded');
tooltip.setAttribute('inert', true);
};
/**
* We need to change state of trigger and popover.
*
* @param {boolean} state The popover state.
*
* @param {boolean} initialLoad Happens on page loads.
*/
const toggleState = (state, initialLoad = false) => {
/* eslint-disable-next-line no-unused-expressions */
state && !initialLoad ? expandPopover() : collapsePopover();
button.setAttribute('aria-expanded', state && !initialLoad);
const text = button.querySelector('[data-toolbar-action]');
if (text) {
text.textContent = state
? Drupal.t('Collapse')
: Drupal.t('Extend');
}
// Dispatch event to sidebar.js
popover.dispatchEvent(
new CustomEvent('toolbar-popover-toggled', {
bubbles: true,
detail: {
state,
},
}),
);
};
const isPopoverHoverOrFocus = () =>
popover.contains(document.activeElement) || popover.matches(':hover');
const delayedClose = () => {
setTimeout(() => {
if (isPopoverHoverOrFocus()) return;
// eslint-disable-next-line no-use-before-define
close();
}, POPOVER_CLOSE_DELAY);
};
const open = () => {
['mouseleave', 'focusout'].forEach((e) => {
button.addEventListener(e, delayedClose, false);
tooltip.addEventListener(e, delayedClose, false);
});
};
const close = () => {
toggleState(false);
['mouseleave', 'focusout'].forEach((e) => {
button.removeEventListener(e, delayedClose);
tooltip.removeEventListener(e, delayedClose);
});
};
button.addEventListener('mousemove', handleMouseMove);
button.addEventListener('mouseover', () => {
// This is not needed because no hover on mobile.
// @todo test is after.
if (window.matchMedia('(max-width: 1023px)').matches) {
return;
}
setTimeout(() => {
// If it is accident hover ignore it.
// If in this timeout popover already opened by click.
if (
!button.matches(':hover') ||
!button.getAttribute('aria-expanded') === 'false'
) {
return;
}
toggleState(true);
open();
}, POPOVER_OPEN_DELAY);
});
button.addEventListener('click', (e) => {
const state =
e.currentTarget.getAttribute('aria-expanded') === 'false';
toggleState(state);
});
// Listens events from sidebar.js.
popover.addEventListener('toolbar-popover-close', () => {
close();
});
// TODO: Add toggle with state.
popover.addEventListener('toolbar-popover-open', () => {
toggleState(true);
});
// Listens events from toolbar-menu.js
popover.addEventListener('toolbar-active-url', () => {
toggleState(true, true);
});
});
},
};
})(Drupal, once);

83
core/modules/navigation/js/tooltip.js Executable file
View File

@@ -0,0 +1,83 @@
/* cspell:ignore uidom */
/**
* @file
*
* Simple tooltip component.
*
* To use it just add:
*
* data-drupal-tooltip="title" - Text displayed in tooltip.
*
* data-drupal-tooltip-class="extra-class" - Optional class for css.
*
* data-drupal-tooltip-position="top" - Tooltip position (default right).
*
* @see https://floating-ui.com/ for available placement options.
*/
((Drupal, once, { computePosition, offset, shift, flip }) => {
/**
* Theme function for a tooltip.
*
* @param {object} dataset
* The dataset object.
* @param {string} dataset.drupalTooltipClass
* Extra class for theming.
* @param {string} dataset.drupalTooltip
* The text for tooltip.
*
* @return {HTMLElement}
* A DOM Node.
*/
Drupal.theme.tooltipWrapper = (dataset) =>
`<div class="toolbar-tooltip ${dataset.drupalTooltipClass || ''}">
${dataset.drupalTooltip}
</div>`;
/**
* Attaches the tooltip behavior to all required triggers.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Attaches the tooltip behavior.
*/
Drupal.behaviors.tooltipInit = {
attach: (context) => {
once('tooltip-trigger', '[data-drupal-tooltip]', context).forEach(
(trigger) => {
trigger.insertAdjacentHTML(
'afterend',
Drupal.theme.tooltipWrapper(trigger.dataset),
);
const tooltip = trigger.nextElementSibling;
const updatePosition = () => {
computePosition(trigger, tooltip, {
strategy: 'fixed',
placement: trigger.dataset.drupalTooltipPosition || 'right',
middleware: [
flip({ padding: 16 }),
offset(6),
shift({ padding: 16 }),
],
}).then(({ x, y }) => {
Object.assign(tooltip.style, {
left: `${x}px`,
top: `${y}px`,
});
});
};
// Small trick to avoid tooltip stays on same place when button size changed.
const ro = new ResizeObserver(updatePosition);
ro.observe(trigger);
trigger.addEventListener('mouseover', updatePosition);
trigger.addEventListener('focus', updatePosition);
},
);
},
};
})(Drupal, once, FloatingUIDOM);

91
core/modules/navigation/layouts/navigation.html.twig Executable file
View File

@@ -0,0 +1,91 @@
{#
/**
* @file
* Default theme implementation to display a navigation layout.
*
* Available variables:
* - content: The content for this layout.
* - attributes: HTML attributes for the layout <div>.
* - hide_logo: Whether to hide the logo.
* - logo_path: The path to the logo image if logo_managed in
* navigation.settings configuration has been set.
* - logo_width: The width of the logo image. Available if
* logo_path points to a valid image file.
* - logo_height: The height of the logo image. Available if
* logo_path points to a valid image file.
*
* @ingroup themeable
*/
#}
{% set control_bar_attributes = create_attribute() %}
<div {{ control_bar_attributes.addClass('admin-toolbar-control-bar').setAttribute('data-drupal-admin-styles', '').setAttribute('data-offset-top', '') }}>
<div class="admin-toolbar-control-bar__content">
{% include '@navigation/toolbar-button.html.twig' with {
attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar', 'type': 'button'}),
icon: 'burger',
text: 'Expand sidebar'|t,
extra_classes: 'admin-toolbar-control-bar__burger',
} only %}
</div>
</div>
<aside
{{ attributes.addClass('admin-toolbar').setAttribute('id', 'admin-toolbar').setAttribute('data-drupal-admin-styles', true) }}
>
{# This lil' div will get the Drupal.displace() attributes added to it via JS. #}
<div class="admin-toolbar__displace-placeholder"></div>
<div class="admin-toolbar__scroll-wrapper">
{% set title_menu = 'admin-toolbar-title'|clean_unique_id %}
{# @todo - We should get rid of this ID below. #}
<nav {{ region_attributes.content.setAttribute('id', 'menu-builder').addClass('admin-toolbar__content').setAttribute('aria-labelledby', title_menu) }}>
<h3 id="{{ title_menu }}" class="visually-hidden">{{ 'Administrative toolbar content'|t }}</h3>
{# @todo - Needs to be placed here so we can have the header footer on mobile. #}
<div class="admin-toolbar__header">
{% if not hide_logo %}
<a class="admin-toolbar__logo" href="{{ path('<front>') }}">
{% if logo_path %}
<img alt="{{ 'Navigation logo'|t }}" src="{{ file_url(logo_path) }}" loading="eager" width="{{ logo_width|default(40) }}" height="{{ logo_height|default(40) }}">
{% else %}
{% include '@navigation/logo.svg.twig' with {
label: 'Navigation logo'|t
} only %}
{% endif %}
</a>
{% endif %}
{% include '@navigation/toolbar-button.html.twig' with {
attributes: create_attribute({ 'data-toolbar-back-control': true, 'tabindex': '-1' }),
extra_classes: 'admin-toolbar__back-button',
icon: 'back',
text: 'Back'|t,
} only %}
{% include '@navigation/toolbar-button.html.twig' with {
attributes: create_attribute({ 'aria-controls': 'admin-toolbar', 'tabindex': '-1', 'type': 'button' }),
extra_classes: 'admin-toolbar__close-button',
icon: 'cross',
label_classes: 'visually-hidden',
text: 'Collapse sidebar'|t,
} only %}
</div>
{{ content.content }}
</nav>
{% set title_menu_footer = 'admin-toolbar-footer'|clean_unique_id %}
<nav {{ region_attributes.footer.setAttribute('id', 'menu-footer').addClass('admin-toolbar__footer').setAttribute('aria-labelledby', title_menu_footer) }}>
<h3 id="{{ title_menu_footer }}" class="visually-hidden">{{ 'Administrative toolbar footer'|t }}</h3>
{{ content.footer }}
<button aria-controls="admin-toolbar" class="admin-toolbar__expand-button" type="button">
<span class="visually-hidden" data-text>{{ 'Collapse sidebar'|t }}</span>
</button>
</nav>
</div>
</aside>
<div class="admin-toolbar-overlay" aria-controls="admin-toolbar" data-drupal-admin-styles></div>
<script>
if (localStorage.getItem('Drupal.navigation.sidebarExpanded') !== 'false' && (window.matchMedia('(min-width: 1024px)').matches)) {
document.documentElement.setAttribute('data-admin-toolbar', 'expanded');
}
</script>

13
core/modules/navigation/modules/navigation_top_bar/navigation_top_bar.info.yml Executable file
View File

@@ -0,0 +1,13 @@
name: Navigation Top Bar
type: module
description: 'When enabled, this module provides relevant administrative information and tasks for the current page on a top bar. It is not feature complete nor fully functional so enabling it could lead to possible inconsistencies.'
package: Core (Experimental)
lifecycle: experimental
# version: VERSION
dependencies:
- navigation:navigation
# Information added by Drupal.org packaging script on 2024-07-04
version: '10.3.1'
project: 'drupal'
datestamp: 1720094222

28
core/modules/navigation/modules/navigation_top_bar/navigation_top_bar.module Executable file
View File

@@ -0,0 +1,28 @@
<?php
/**
* @file
* Primary module hooks for navigation top bar module.
*/
declare(strict_types=1);
use Drupal\Core\Routing\RouteMatchInterface;
/**
* Implements hook_help().
*/
function navigation_top_bar_help($route_name, RouteMatchInterface $route_match) {
switch ($route_name) {
case 'help.page.navigation_top_bar':
$output = '<h2>' . t('About') . '</h2>';
$output .= '<p>' . t('The Navigation Top Bar module is a Feature Flag module which, when enabled, renders the experimental navigation top bar.') . '</p>';
$output .= '<p>' . t('The top bar provides relevant administrative information and tasks for the current page. It is not feature complete nor fully functional.') . '</p>';
$output .= '<p>' . t('Leaving this module enabled can affect both admin and front-end pages layouts and blocks like Primary admin actions, whose content might be moved to te top bar.') . '</p>';
$output .= '<p>' . t('It is recommended to leave this module off while it is under active development and experimental phase.') . '</p>';
$output .= '<p>' . t('For more information, see the <a href=":docs">online documentation for the Navigation Top Bar module</a>.', [
':docs' => 'https://www.drupal.org/project/navigation',
]) . '</p>';
return $output;
}
}

14
core/modules/navigation/modules/navigation_top_bar/tests/src/Functional/GenericTest.php Executable file
View File

@@ -0,0 +1,14 @@
<?php
declare(strict_types=1);
namespace Drupal\Tests\navigation_top_bar\Functional;
use Drupal\Tests\system\Functional\Module\GenericModuleTestBase;
/**
* Generic module test for navigation_top_bar.
*
* @group navigation_top_bar
*/
class GenericTest extends GenericModuleTestBase {}

16
core/modules/navigation/navigation.info.yml Executable file
View File

@@ -0,0 +1,16 @@
name: Navigation
description: New administration navigation
package: Core (Experimental)
lifecycle: experimental
# version: VERSION
configure: navigation.settings
type: module
dependencies:
- drupal:block
- drupal:file
- drupal:layout_builder
# Information added by Drupal.org packaging script on 2024-07-04
version: '10.3.1'
project: 'drupal'
datestamp: 1720094222

25
core/modules/navigation/navigation.install Executable file
View File

@@ -0,0 +1,25 @@
<?php
/**
* @file
* Install, update and uninstall functions for the navigation module.
*/
/**
* Implements hook_requirements().
*/
function navigation_requirements($phase) {
$requirements = [];
if ($phase === 'runtime') {
if (\Drupal::moduleHandler()->moduleExists('toolbar')) {
$requirements['toolbar'] = [
'title' => t('Toolbar and Navigation modules are both installed'),
'value' => t('The Navigation module is a complete replacement for the Toolbar module and disables its functionality when both modules are installed. If you are planning to continue using Navigation module, you can uninstall the Toolbar module now.'),
'severity' => REQUIREMENT_WARNING,
];
}
}
return $requirements;
}

16
core/modules/navigation/navigation.layouts.yml Executable file
View File

@@ -0,0 +1,16 @@
navigation_layout:
label: 'Navigation layout'
path: layouts
template: navigation
library: navigation/navigation.layout
category: 'Navigation'
class: \Drupal\navigation\NavigationLayout
default_region: first
icon_map:
- [ content ]
- [ footer ]
regions:
content:
label: Content
footer:
label: Footer

84
core/modules/navigation/navigation.libraries.yml Executable file
View File

@@ -0,0 +1,84 @@
internal.navigation:
# Internal library. Do not depend on it outside core nor add core usage
# beyond the Navigation module.
version: VERSION
js:
js/toolbar-menu.js: {}
js/tooltip.js: {}
js/sidebar.js: {}
js/admin-toolbar-wrapper.js: {}
js/arrow-navigation.js: {}
css:
theme:
css/base/fonts.css: {}
css/base/variables.css: {}
css/components/toolbar-button.css: {}
css/components/admin-toolbar.css: {}
css/components/top-bar.css: {}
css/components/admin-toolbar-control-bar.css: {}
css/components/toolbar-menu.css: {}
css/components/toolbar-block.css: {}
dependencies:
- core/drupal.displace
- core/once
- core/tabbable
- navigation/admin-reset-styles
- navigation/body-scroll-lock
- navigation/internal.dropdown
- navigation/internal.tooltip
- navigation/internal.popover
admin-reset-styles:
css:
base:
css/base/admin-reset-styles.css: {}
navigation.layout:
dependencies:
- navigation/internal.navigation
body-scroll-lock:
version: VERSION
css:
base:
css/components/body-scroll-lock.css: {}
internal.popover:
# Internal library. Do not depend on it outside core nor add core usage
# beyond the Navigation module.
js:
js/toolbar-popover.js: {}
css:
base:
css/components/toolbar-popover.css: {}
dependencies:
- core/once
internal.tooltip:
# Internal library. Do not depend on it outside core nor add core usage
# beyond the Navigation module.
js:
js/tooltip.js: {}
css:
base:
css/components/tooltip.css: {}
dependencies:
- core/once
- core/internal.floating-ui
internal.dropdown:
# Internal library. Do not depend on it outside core nor add core usage
# beyond the Navigation module.
js:
js/toolbar-dropdown.js: {}
css:
base:
css/components/toolbar-dropdown.css: {}
dependencies:
- core/once
- core/internal.floating-ui
navigation.layoutBuilder:
css:
base:
css/base/layout-builder.css: {}

12
core/modules/navigation/navigation.links.menu.yml Executable file
View File

@@ -0,0 +1,12 @@
navigation.settings:
title: Navigation Settings
description: Configure different settings for the Navigation module.
route_name: navigation.settings
weight: 10
parent: system.admin_config_ui
navigation_block.admin_display:
title: Navigation blocks
parent: system.admin_config_ui
description: 'Manage navigation blocks.'
route_name: layout_builder.navigation.view

224
core/modules/navigation/navigation.module Executable file
View File

@@ -0,0 +1,224 @@
<?php
/**
* @file
* Primary module hooks for navigation module.
*/
use Drupal\Component\Plugin\PluginBase;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\navigation\NavigationContentLinks;
use Drupal\navigation\NavigationRenderer;
use Drupal\navigation\Plugin\SectionStorage\NavigationSectionStorage;
use Drupal\navigation\RenderCallbacks;
/**
* Implements hook_help().
*/
function navigation_help($route_name, RouteMatchInterface $route_match) {
switch ($route_name) {
case 'help.page.navigation':
$output = '';
$output .= '<h3>' . t('About') . '</h3>';
$output .= '<p>' . t('The Navigation module provides a left-aligned, collapsible, vertical sidebar navigation.') . '</p>';
$output .= '<p>' . t('For more information, see the <a href=":docs">online documentation for the Navigation module</a>.', [
':docs' => 'https://www.drupal.org/project/navigation',
]) . '</p>';
return $output;
}
$configuration_route = 'layout_builder.navigation.';
if (!$route_match->getRouteObject()->getOption('_layout_builder') || !str_starts_with($route_name, $configuration_route)) {
return layout_builder_help($route_name, $route_match);
}
if (str_starts_with($route_name, $configuration_route)) {
$output = '<p>' . t('This layout builder tool allows you to configure the blocks in the navigation toolbar.') . '</p>';
$output .= '<p>' . t('Forms and links inside the content of the layout builder tool have been disabled.') . '</p>';
return $output;
}
}
/**
* Implements hook_page_top().
*/
function navigation_page_top(array &$page_top) {
if (!\Drupal::currentUser()->hasPermission('access navigation')) {
return;
}
$navigation_renderer = \Drupal::service('navigation.renderer');
assert($navigation_renderer instanceof NavigationRenderer);
$navigation_renderer->removeToolbar($page_top);
if (\Drupal::routeMatch()->getRouteName() !== 'layout_builder.navigation.view') {
// Don't render the admin toolbar if in layout edit mode.
$navigation_renderer->buildNavigation($page_top);
$navigation_renderer->buildTopBar($page_top);
return;
}
// But if in layout mode, add an empty element to leave space. We need to use
// an empty .admin-toolbar element because the css uses the adjacent sibling
// selector. The actual rendering of the navigation blocks/layout occurs in
// the layout form.
$page_top['navigation'] = [
'#type' => 'html_tag',
'#tag' => 'aside',
'#attributes' => [
'class' => 'admin-toolbar',
],
];
$navigation_renderer->buildTopBar($page_top);
}
/**
* Implements hook_module_implements_alter().
*/
function navigation_module_implements_alter(&$implementations, $hook) {
if ($hook == 'page_top') {
$group = $implementations['navigation'];
unset($implementations['navigation']);
$implementations['navigation'] = $group;
}
if ($hook == 'help') {
// We take over the layout_builder hook_help().
unset($implementations['layout_builder']);
}
}
/**
* Implements hook_theme().
*/
function navigation_theme($existing, $type, $theme, $path) {
$items['top_bar'] = [
'variables' => [
'local_tasks' => [],
],
];
$items['top_bar_local_tasks'] = [
'variables' => [
'local_tasks' => [],
],
];
$items['top_bar_local_task'] = [
'variables' => [
'link' => [],
],
];
$items['big_pipe_interface_preview__navigation_shortcut_lazy_builder_lazyLinks__Shortcuts'] = [
'variables' => [
'callback' => NULL,
'arguments' => NULL,
'preview' => NULL,
],
'base hook' => 'big_pipe_interface_preview',
];
$items['block__navigation'] = [
'render element' => 'elements',
'base hook' => 'block',
];
$items['navigation_menu'] = [
'base hook' => 'menu',
'variables' => [
'menu_name' => NULL,
'items' => [],
'attributes' => [],
],
];
$items['menu_region__footer'] = [
'variables' => [
'help' => NULL,
'items' => [],
'title' => NULL,
'menu_name' => NULL,
],
];
return $items;
}
/**
* Implements hook_menu_links_discovered_alter().
*/
function navigation_menu_links_discovered_alter(&$links) {
$navigation_links = \Drupal::classResolver(NavigationContentLinks::class);
assert($navigation_links instanceof NavigationContentLinks);
$navigation_links->addMenuLinks($links);
$navigation_links->removeAdminContentLink($links);
$navigation_links->removeHelpLink($links);
}
/**
* Implements hook_block_build_BASE_BLOCK_ID_alter().
*/
function navigation_block_build_local_tasks_block_alter(array &$build, BlockPluginInterface $block) {
$navigation_renderer = \Drupal::service('navigation.renderer');
assert($navigation_renderer instanceof NavigationRenderer);
$navigation_renderer->removeLocalTasks($build, $block);
}
/**
* Implements hook_plugin_filter_TYPE__CONSUMER_alter().
*
* Curate the blocks available in the Layout Builder "Add Block" UI.
*/
function navigation_plugin_filter_block__layout_builder_alter(array &$definitions, array $extra) {
if (($extra['section_storage'] ?? NULL) instanceof NavigationSectionStorage) {
// Remove all blocks other than the ones we support.
$navigation_safe = [
'navigation_user',
'navigation_shortcuts',
'navigation_menu',
];
$definitions = array_filter($definitions, static function (array $definition, string $plugin_id) use ($navigation_safe): bool {
[$base_plugin_id] = explode(PluginBase::DERIVATIVE_SEPARATOR, $plugin_id);
return in_array($base_plugin_id, $navigation_safe, TRUE);
}, ARRAY_FILTER_USE_BOTH);
}
}
/**
* Implements hook_plugin_filter_TYPE__CONSUMER_alter().
*/
function navigation_plugin_filter_layout__layout_builder_alter(array &$definitions, array $extra) {
if (($extra['section_storage'] ?? NULL) instanceof NavigationSectionStorage) {
// We don't allow adding a new section.
$definitions = [];
}
}
/**
* Implements hook_block_alter().
*/
function navigation_block_alter(&$definitions): void {
$hidden = [
'navigation_user',
'navigation_shortcuts',
'navigation_menu',
];
foreach ($hidden as $block_id) {
if (isset($definitions[$block_id])) {
$definitions[$block_id]['_block_ui_hidden'] = TRUE;
}
}
}
/**
* Implements hook_preprocess_HOOK().
*/
function template_preprocess_navigation(array &$variables): void {
$variables['hide_logo'] = $variables['content']['#hide_logo'] ?? TRUE;
}
/**
* Implements hook_element_info_alter().
*/
function navigation_element_info_alter(array &$info) {
if (array_key_exists('layout_builder', $info)) {
$info['layout_builder']['#pre_render'][] = [RenderCallbacks::class, 'alterLayoutBuilder'];
}
}

4
core/modules/navigation/navigation.permissions.yml Executable file
View File

@@ -0,0 +1,4 @@
access navigation:
title: 'Access navigation bar'
configure navigation layout:
title: 'Configure navigation layout'

28
core/modules/navigation/navigation.post_update.php Executable file
View File

@@ -0,0 +1,28 @@
<?php
/**
* @file
* Post update functions for the Navigation module.
*/
use Drupal\Core\Config\Entity\ConfigEntityUpdater;
use Drupal\user\RoleInterface;
/**
* Grants navigation specific permission to roles with access to any layout.
*/
function navigation_post_update_update_permissions(array &$sandbox) {
\Drupal::classResolver(ConfigEntityUpdater::class)->update($sandbox, 'user_role', function (RoleInterface $role) {
$needs_save = FALSE;
if ($role->hasPermission('configure any layout')) {
$role->grantPermission('configure navigation layout');
$needs_save = TRUE;
}
if ($role->hasPermission('administer navigation_block')) {
$role->revokePermission('administer navigation_block');
$role->grantPermission('configure navigation layout');
$needs_save = TRUE;
}
return $needs_save;
});
}

7
core/modules/navigation/navigation.routing.yml Executable file
View File

@@ -0,0 +1,7 @@
navigation.settings:
path: '/admin/config/user-interface/navigation/settings'
defaults:
_title: 'Navigation Settings'
_form: 'Drupal\navigation\Form\SettingsForm'
requirements:
_permission: 'administer site configuration'

33
core/modules/navigation/navigation.services.yml Executable file
View File

@@ -0,0 +1,33 @@
services:
navigation.renderer:
class: Drupal\navigation\NavigationRenderer
arguments:
[
'@config.factory',
'@module_handler',
'@current_route_match',
'@plugin.manager.menu.local_task',
'@entity_type.manager',
'@image.factory',
'@file_url_generator',
'@plugin.manager.layout_builder.section_storage',
'@request_stack',
'@extension.list.module'
]
Drupal\navigation\NavigationRenderer: '@navigation.renderer'
navigation.menu_tree:
class: Drupal\navigation\Menu\NavigationMenuLinkTree
arguments:
[
'@menu.tree_storage',
'@plugin.manager.menu.link',
'@router.route_provider',
'@menu.active_trail',
'@callable_resolver',
]
navigation.user_lazy_builder:
class: Drupal\navigation\UserLazyBuilder
arguments: ['@module_handler', '@current_user']
Drupal\navigation\UserLazyBuilders: '@navigation.user_lazy_builder'

92
core/modules/navigation/src/Form/LayoutForm.php Executable file
View File

@@ -0,0 +1,92 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation\Form;
use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\layout_builder\Form\LayoutBuilderEntityFormTrait;
use Drupal\layout_builder\LayoutTempstoreRepositoryInterface;
use Drupal\layout_builder\SectionStorageInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Defines a form for configuring navigation blocks.
*
* @internal
*/
final class LayoutForm extends FormBase {
use LayoutBuilderEntityFormTrait {
buildActions as buildActionsElement;
saveTasks as saveTasks;
}
/**
* {@inheritdoc}
*/
public function getBaseFormId(): string {
return 'navigation_layout';
}
/**
* {@inheritdoc}
*/
public function getFormId(): string {
return 'navigation_layout';
}
/**
* The section storage.
*
* @var \Drupal\layout_builder\SectionStorageInterface
*/
protected $sectionStorage;
/**
* Constructs a new LayoutForm.
*/
public function __construct(protected LayoutTempstoreRepositoryInterface $layoutTempstoreRepository) {
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
return new static(
$container->get('layout_builder.tempstore_repository')
);
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state, ?SectionStorageInterface $section_storage = NULL) {
$form['#attributes']['class'][] = 'layout-builder-form';
$form['layout_builder'] = [
'#type' => 'layout_builder',
'#section_storage' => $section_storage,
];
$form['#attached']['library'][] = 'navigation/navigation.layoutBuilder';
$this->sectionStorage = $section_storage;
$form['actions'] = [
'submit' => [
'#type' => 'submit',
'#value' => $this->t('Save'),
],
] + $this->buildActionsElement([]);
return $form;
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state): void {
$this->sectionStorage->save();
$this->saveTasks($form_state, new TranslatableMarkup('Saved navigation blocks'));
}
}

223
core/modules/navigation/src/Form/SettingsForm.php Executable file
View File

@@ -0,0 +1,223 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation\Form;
use Drupal\Component\Utility\Environment;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Config\TypedConfigManagerInterface;
use Drupal\Core\File\FileSystemInterface;
use Drupal\Core\File\FileUrlGeneratorInterface;
use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\RendererInterface;
use Drupal\file\Entity\File;
use Drupal\file\FileUsage\FileUsageInterface;
use Drupal\navigation\NavigationRenderer;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Configure Navigation settings for this site.
*
* @internal
*/
final class SettingsForm extends ConfigFormBase {
/**
* The file system service.
*
* @var \Drupal\Core\File\FileSystemInterface
*/
protected $fileSystem;
/**
* The file usage service.
*
* @var \Drupal\file\FileUsage\FileUsageInterface
*/
protected $fileUsage;
/**
* The file URL generator.
*
* @var \Drupal\Core\File\FileUrlGeneratorInterface
*/
protected $fileUrlGenerator;
/**
* Renderer service.
*
* @var \Drupal\Core\Render\RendererInterface
*/
protected RendererInterface $renderer;
/**
* Constructs a Navigation SettingsForm object.
*
* @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
* The factory for configuration objects.
* @param \Drupal\Core\Config\TypedConfigManagerInterface $typed_config_manager
* The typed config manager.
* @param \Drupal\Core\File\FileSystemInterface $file_system
* File system service.
* @param \Drupal\Core\File\FileUrlGeneratorInterface $fileUrlGenerator
* The file URL generator.
* @param \Drupal\file\FileUsage\FileUsageInterface $fileUsage
* The File Usage service.
* @param \Drupal\Core\Render\RendererInterface $renderer
* Renderer service.
*/
public function __construct(
ConfigFactoryInterface $config_factory,
TypedConfigManagerInterface $typed_config_manager,
FileSystemInterface $file_system,
FileUrlGeneratorInterface $fileUrlGenerator,
FileUsageInterface $fileUsage,
RendererInterface $renderer,
) {
parent::__construct($config_factory, $typed_config_manager);
$this->fileSystem = $file_system;
$this->fileUrlGenerator = $fileUrlGenerator;
$this->fileUsage = $fileUsage;
$this->renderer = $renderer;
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
return new static(
$container->get('config.factory'),
$container->get('config.typed'),
$container->get('file_system'),
$container->get('file_url_generator'),
$container->get('file.usage'),
$container->get('renderer')
);
}
/**
* {@inheritdoc}
*/
public function getFormId(): string {
return 'navigation_settings';
}
/**
* {@inheritdoc}
*/
protected function getEditableConfigNames(): array {
return ['navigation.settings'];
}
/**
* {@inheritdoc}
*/
public function buildForm(array $form, FormStateInterface $form_state): array {
$config = $this->config('navigation.settings');
$form['#attached']['library'][] = 'core/drupal.states';
$form['logo'] = [
'#type' => 'fieldset',
'#title' => $this->t('Logo options'),
];
$form['logo']['logo_provider'] = [
'#type' => 'radios',
'#title' => $this->t('Choose logo handling'),
'#title_display' => 'invisible',
'#options' => [
NavigationRenderer::LOGO_PROVIDER_DEFAULT => $this->t('Default logo'),
NavigationRenderer::LOGO_PROVIDER_HIDE => $this->t('Hide logo'),
NavigationRenderer::LOGO_PROVIDER_CUSTOM => $this->t('Custom logo'),
],
'#default_value' => $config->get('logo_provider'),
];
$form['logo']['image'] = [
'#type' => 'container',
'#states' => [
'visible' => [
':input[name="logo_provider"]' => ['value' => NavigationRenderer::LOGO_PROVIDER_CUSTOM],
],
],
];
$allowed = 'png jpg jpeg';
$current_logo_managed_fid = $config->get('logo_managed');
$max_navigation_allowed = $config->get('logo_max_filesize');
$max_system_allowed = Environment::getUploadMaxSize();
$max_allowed = $max_navigation_allowed < $max_system_allowed ? $max_navigation_allowed : $max_system_allowed;
$upload_validators = [
'FileExtension' => ['extensions' => $allowed],
'FileSizeLimit' => ['fileLimit' => $max_allowed],
];
$file_upload_help = [
'#theme' => 'file_upload_help',
'#description' => $this->t('Recommended image dimension 40 x 40 pixels.'),
'#upload_validators' => $upload_validators,
'#cardinality' => 1,
];
$form['logo']['image']['logo_managed'] = [
'#type' => 'managed_file',
'#title' => t('Choose custom logo'),
'#upload_validators' => $upload_validators,
'#upload_location' => 'public://navigation-logo',
'#description' => $this->renderer->renderInIsolation($file_upload_help),
'#default_value' => $current_logo_managed_fid,
'#multiple' => FALSE,
];
return parent::buildForm($form, $form_state);
}
/**
* {@inheritdoc}
*/
public function validateForm(array &$form, FormStateInterface $form_state): void {
$logo_managed = $form_state->getValue('logo_managed');
if ($form_state->getValue('logo_provider') === NavigationRenderer::LOGO_PROVIDER_CUSTOM && empty($logo_managed) === TRUE) {
$form_state->setErrorByName('logo_managed', 'An image file is required with the current logo handling option.');
}
}
/**
* {@inheritdoc}
*/
public function submitForm(array &$form, FormStateInterface $form_state): void {
$config = $this->config('navigation.settings');
// Get the previous config settings.
$previous_logo_provider = $config->get('logo_provider');
$logo_managed = $config->get('logo_managed');
$previous_logo_fid = $logo_managed ? reset($logo_managed) : NULL;
// Get new values from the form.
$new_logo_provider = $form_state->getValue('logo_provider');
$logo = $form_state->getValue('logo_managed');
$new_logo_fid = !empty($logo) ? reset($logo) : NULL;
// Pre-load files if any for FileUsageInterface.
$previous_logo_managed = $previous_logo_fid ? File::load($previous_logo_fid) : NULL;
$new_logo_managed = $new_logo_fid ? File::load($new_logo_fid) : NULL;
// Decrement if previous logo_provider was 'custom' and has changed to a
// different fid and there's a change in the logo fid.
if ($previous_logo_provider === NavigationRenderer::LOGO_PROVIDER_CUSTOM
&& ($new_logo_provider !== NavigationRenderer::LOGO_PROVIDER_CUSTOM || $previous_logo_fid !== $new_logo_fid)
&& $previous_logo_managed
) {
$this->fileUsage->delete($previous_logo_managed, 'navigation', 'logo', 1);
}
// Increment usage if different from the previous one.
if ($new_logo_managed && $new_logo_fid !== $previous_logo_fid) {
$new_logo_managed->setPermanent();
$new_logo_managed->save();
$this->fileUsage->add($new_logo_managed, 'navigation', 'logo', 1);
}
$config
->set('logo_provider', $form_state->getValue('logo_provider'))
->set('logo_managed', $form_state->getValue('logo_managed'))
->save();
parent::submitForm($form, $form_state);
}
}

50
core/modules/navigation/src/Menu/NavigationMenuLinkTree.php Executable file
View File

@@ -0,0 +1,50 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation\Menu;
use Drupal\Core\Menu\MenuLinkTree;
/**
* Extends MenuLinkTree to add specific theme suggestions for the navigation.
*
* @internal
*/
final class NavigationMenuLinkTree extends MenuLinkTree {
/**
* {@inheritdoc}
*/
public function build(array $tree): array {
if (!$tree) {
return [];
}
$build = parent::build($tree);
if (empty($build['#items'])) {
return [];
}
/** @var \Drupal\Core\Menu\MenuLinkInterface $link */
$first_link = reset($tree)->link;
// Get the menu name of the first link.
$menu_name = $first_link->getMenuName();
// Add a more specific theme suggestion to differentiate this rendered
// menu from others.
$build['#menu_name'] = $menu_name;
$build['#theme'] = 'navigation_menu__' . strtr($menu_name, '-', '_');
// Loop through menu items and add the plugin id as a class.
foreach ($tree as $item) {
if ($item->access->isAllowed()) {
$plugin_id = $item->link->getPluginId();
$plugin_class = str_replace('.', '_', $plugin_id);
$build['#items'][$plugin_id]['class'] = $plugin_class;
}
}
return $build;
}
}

206
core/modules/navigation/src/NavigationContentLinks.php Executable file
View File

@@ -0,0 +1,206 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation;
use Drupal\Core\DependencyInjection\ContainerInjectionInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Routing\RouteProviderInterface;
use Drupal\Core\StringTranslation\StringTranslationTrait;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\Routing\Exception\RouteNotFoundException;
/**
* Build the menu links for the Content menu.
*
* The content menu contains a "Create" section, along with links to other
* overview pages for different entity types.
*
* @internal The navigation module is experimental.
*/
final class NavigationContentLinks implements ContainerInjectionInterface {
use StringTranslationTrait;
/**
* Construct a new NavigationContentLinks object.
*
* @param \Drupal\Core\Routing\RouteProviderInterface $routeProvider
* The route provider.
* @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
* The entity type manager.
*/
public function __construct(private RouteProviderInterface $routeProvider, private EntityTypeManagerInterface $entityTypeManager) {}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container) {
return new static(
$container->get('router.route_provider'),
$container->get('entity_type.manager')
);
}
/**
* Add links to the Content menu, based on enabled modules.
*
* @param array $links
* The array of links being altered.
*/
public function addMenuLinks(array &$links): void {
// First, add the top-level menu items.
// @todo Consider turning this into a data object so we can avoid typos in
// array keys.
$content_links = [
'navigation.create' => [
'route_name' => 'node.add_page',
'title' => $this->t('Create'),
'weight' => -10,
],
'navigation.content' => [
'route_name' => 'view.content.page_1',
'title' => $this->t('Content'),
],
'navigation.files' => [
'route_name' => 'view.files.page_1',
'title' => $this->t('Files'),
],
'navigation.media' => [
'route_name' => 'view.media.media_page_list',
'title' => $this->t('Media'),
],
'navigation.blocks' => [
'route_name' => 'view.block_content.page_1',
'title' => $this->t('Blocks'),
],
];
foreach ($content_links as $link_name => $link) {
$this->addLink($link_name, $link, $links);
}
// Add supported add links under the Create button.
$this->addCreateEntityLinks('node_type', 'node.add', $links);
$this->addCreateEntityLinks('media_type', 'entity.media.add_form', $links, ['document', 'image']);
// Finally, add the bundleless User link and pin it to the bottom.
$this->addLink('navigation.create.user', [
'route_name' => 'user.admin_create',
'title' => $this->t('User'),
'parent' => 'navigation.create',
'weight' => 100,
], $links);
}
/**
* Remove the admin/content link, and any direct children.
*
* @param array $links
* The array of links being altered.
*/
public function removeAdminContentLink(array &$links): void {
unset($links['system.admin_content']);
// Also remove any links that have set admin/content as their parent link.
// They are unsupported by the Navigation module.
foreach ($links as $link_name => $link) {
if (isset($link['parent']) && $link['parent'] === 'system.admin_content') {
// @todo Do we need to make this recursive, and unset children of these
// links too?
unset($links[$link_name]);
}
}
}
/**
* Remove the help link as render it outside any menu.
*
* @param array $links
* The array of links being altered.
*/
public function removeHelpLink(array &$links): void {
unset($links['help.main']);
}
/**
* Add create links for an entity type.
*
* This function preserves the order of entity types as it is called.
*
* @param string $entity_type
* The entity type to add links for, such as node_type.
* @param string $add_route_id
* The ID of the route for the entity type add form.
* @param array $links
* The existing array of links to add to.
* @param array $bundle_allow_list
* A list of allowed bundles to include. Can be used to limit the list of
* bundles that are included for noisy entity types like media.
*/
private function addCreateEntityLinks(string $entity_type, string $add_route_id, array &$links, array $bundle_allow_list = []): void {
// Ensure subsequent calls always get added to the bottom, and not in
// alphabetical order.
static $weight = 0;
// The module providing the entity type is either not installed, or in the
// process of being uninstalled.
if (!$this->entityTypeManager->hasDefinition($entity_type)) {
return;
}
// Sort all types within an entity type alphabetically.
$definition = $this->entityTypeManager->getDefinition($entity_type);
$types = $this->entityTypeManager->getStorage($entity_type)->loadMultiple();
if (method_exists($definition->getClass(), 'sort')) {
uasort($types, [$definition->getClass(), 'sort']);
}
$add_content_links = [];
foreach ($types as $type) {
// Skip if the bundle is not in the allow list.
if (!empty($bundle_allow_list) && !in_array($type->id(), $bundle_allow_list)) {
continue;
}
$add_content_links['navigation.content.' . $type->getEntityTypeId() . '.' . $type->id()] = [
'title' => $type->label(),
'route_name' => $add_route_id,
'route_parameters' => [
$entity_type => $type->id(),
],
'parent' => 'navigation.create',
'weight' => $weight,
];
}
foreach ($add_content_links as $link_name => $link) {
$this->addLink($link_name, $link, $links);
}
$weight++;
}
/**
* Ensure a route exists and add the link.
*
* @param string $link_name
* The name of the link being added.
* @param array $link
* The link array, as defined in hook_menu_links_discovered_alter().
* @param array $links
* The existing array of links.
*/
private function addLink(string $link_name, array $link, array &$links): void {
try {
// Ensure the route exists (there is no separate "exists" method).
$this->routeProvider->getRouteByName($link['route_name']);
$links[$link_name] = $link + ['menu_name' => 'content', 'provider' => 'navigation'];
}
catch (RouteNotFoundException $e) {
// The module isn't installed, or the route (such as provided by a view)
// has been deleted.
}
}
}

31
core/modules/navigation/src/NavigationLayout.php Executable file
View File

@@ -0,0 +1,31 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation;
use Drupal\Core\Layout\LayoutDefault;
use Drupal\Core\Render\Element;
/**
* Defines a layout class for navigation.
*
* @internal
*/
final class NavigationLayout extends LayoutDefault {
/**
* {@inheritdoc}
*/
public function build(array $regions) {
foreach (Element::children($regions) as $region_id) {
foreach (Element::children($regions[$region_id]) as $component_uuid) {
if (!Element::isEmpty($regions[$region_id][$component_uuid])) {
$regions[$region_id][$component_uuid]['#theme'] = 'block__navigation';
}
}
}
return parent::build($regions);
}
}

358
core/modules/navigation/src/NavigationRenderer.php Executable file
View File

@@ -0,0 +1,358 @@
<?php
namespace Drupal\navigation;
use Drupal\Component\Utility\NestedArray;
use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Cache\CacheableMetadata;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Entity\ContentEntityInterface;
use Drupal\Core\Entity\EntityTypeInterface;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Entity\FieldableEntityInterface;
use Drupal\Core\Extension\ModuleExtensionList;
use Drupal\Core\Extension\ModuleHandlerInterface;
use Drupal\Core\File\FileUrlGeneratorInterface;
use Drupal\Core\Image\ImageFactory;
use Drupal\Core\Menu\LocalTaskManagerInterface;
use Drupal\Core\Plugin\Context\Context;
use Drupal\Core\Plugin\Context\ContextDefinition;
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\file\Entity\File;
use Drupal\layout_builder\SectionStorage\SectionStorageManagerInterface;
use Symfony\Component\HttpFoundation\RequestStack;
/**
* Handle rendering for different pieces of the navigation.
*
* @internal The navigation module is experimental.
*/
final class NavigationRenderer {
/**
* Use the default Drupal logo in the navigation.
*/
const LOGO_PROVIDER_DEFAULT = 'default';
/**
* Hide the logo in the navigation.
*/
const LOGO_PROVIDER_HIDE = 'hide';
/**
* Use the custom provided logo in the navigation.
*/
const LOGO_PROVIDER_CUSTOM = 'custom';
/**
* A list of all the link paths of enabled content entities.
*
* @var array
*/
protected array $contentEntityPaths;
/**
* The navigation local tasks render array.
*
* @var array
*/
protected array $localTasks;
/**
* Construct a new NavigationRenderer object.
*/
public function __construct(
private ConfigFactoryInterface $configFactory,
private ModuleHandlerInterface $moduleHandler,
private RouteMatchInterface $routeMatch,
private LocalTaskManagerInterface $localTaskManager,
private EntityTypeManagerInterface $entityTypeManager,
private ImageFactory $imageFactory,
private FileUrlGeneratorInterface $fileUrlGenerator,
private SectionStorageManagerInterface $sectionStorageManager,
private RequestStack $requestStack,
private ModuleExtensionList $moduleExtensionList,
) {}
/**
* Remove the toolbar provided by Toolbar module.
*
* @param array $page_top
* A renderable array representing the top of the page.
*
* @see toolbar_page_top()
* @see hook_page_top()
*/
public function removeToolbar(array &$page_top): void {
if (isset($page_top['toolbar'])) {
unset($page_top['toolbar']);
}
}
/**
* Build out the navigation bar.
*
* @param array $page_top
* A renderable array representing the top of the page.
*
* @see toolbar_page_top()
* @see hook_page_top()
*/
public function buildNavigation(array &$page_top): void {
$logo_settings = $this->configFactory->get('navigation.settings');
$logo_provider = $logo_settings->get('logo_provider');
$cacheability = new CacheableMetadata();
$contexts = [
'navigation' => new Context(ContextDefinition::create('string'), 'navigation'),
];
$storage = $this->sectionStorageManager->findByContext($contexts, $cacheability);
$build = [];
if ($storage) {
foreach ($storage->getSections() as $delta => $section) {
$build[$delta] = $section->toRenderArray([]);
}
}
// The render array is built based on decisions made by SectionStorage
// plugins and therefore it needs to depend on the accumulated
// cacheability of those decisions.
$cacheability->addCacheableDependency($logo_settings)
->addCacheableDependency($this->configFactory->get('navigation.block_layout'));
$cacheability->applyTo($build);
$module_path = $this->requestStack->getCurrentRequest()->getBasePath() . '/' . $this->moduleExtensionList->getPath('navigation');
$asset_url = $module_path . '/assets/fonts/inter-var.woff2';
$defaults = [
'#hide_logo' => $logo_provider === self::LOGO_PROVIDER_HIDE,
'#attached' => [
'html_head_link' => [
[
[
'rel' => 'preload',
'href' => $asset_url,
'as' => 'font',
'crossorigin' => 'anonymous',
],
],
],
],
];
$build[0] = NestedArray::mergeDeepArray([$build[0], $defaults]);
$page_top['navigation'] = $build;
if ($logo_provider === self::LOGO_PROVIDER_CUSTOM) {
$logo_managed_fid = $logo_settings->get('logo_managed');
if (isset($logo_managed_fid[0]) && $logo_managed_fid[0] > 0) {
$logo_managed = File::load($logo_managed_fid[0]);
if ($logo_managed instanceof File) {
$logo_managed_uri = $logo_managed->getFileUri();
$logo_managed_url = $this->fileUrlGenerator->generateAbsoluteString($logo_managed_uri);
$page_top['navigation']['#logo_path'] = $logo_managed_url;
$image = $this->imageFactory->get($logo_managed_uri);
if ($image->isValid()) {
$page_top['navigation']['#logo_width'] = $image->getWidth();
$page_top['navigation']['#logo_height'] = $image->getHeight();
}
}
}
}
}
/**
* Build the top bar for content entity pages.
*
* @param array $page_top
* A renderable array representing the top of the page.
*
* @see navigation_page_top()
* @see hook_page_top()
*/
public function buildTopBar(array &$page_top): void {
if (!$this->moduleHandler->moduleExists('navigation_top_bar')) {
return;
}
$page_top['top_bar'] = [
'#theme' => 'top_bar',
'#attached' => [
'library' => [
'navigation/internal.navigation',
],
],
'#cache' => [
'contexts' => [
'url.path',
'user.permissions',
],
],
];
// Local tasks for content entities.
if ($this->hasLocalTasks()) {
$local_tasks = $this->getLocalTasks();
$page_top['top_bar']['#local_tasks'] = [
'#theme' => 'top_bar_local_tasks',
'#local_tasks' => $local_tasks['tasks'],
];
assert($local_tasks['cacheability'] instanceof CacheableMetadata);
CacheableMetadata::createFromRenderArray($page_top['top_bar'])
->addCacheableDependency($local_tasks['cacheability'])
->applyTo($page_top['top_bar']);
}
}
/**
* Alter the build of any local_tasks_block plugin block.
*
* If we are showing the local tasks in the top bar, hide the local tasks
* from display to avoid duplicating the links.
*
* @param array $build
* A renderable array representing the local_tasks_block plugin block to be
* rendered.
* @param \Drupal\Core\Block\BlockPluginInterface $block
* Block plugin object representing a local_tasks_block.
*
* @see navigation_block_build_local_tasks_block_alter()
*/
public function removeLocalTasks(array &$build, BlockPluginInterface $block): void {
if ($block->getPluginId() !== 'local_tasks_block') {
return;
}
if ($this->hasLocalTasks() && $this->moduleHandler->moduleExists('navigation_top_bar')) {
$build['#access'] = FALSE;
}
}
/**
* Local tasks list based on user access.
*
* @return array
* Local tasks keyed by route name.
*/
private function getLocalTasks(): array {
if (isset($this->localTasks)) {
return $this->localTasks;
}
$cacheability = new CacheableMetadata();
$cacheability->addCacheableDependency($this->localTaskManager);
$this->localTasks = [
'tasks' => [],
'cacheability' => $cacheability,
];
// For now, we're only interested in local tasks corresponding to a content
// entity.
if (!$this->meetsContentEntityRoutesCondition()) {
return $this->localTasks;
}
$entity_local_tasks = $this->localTaskManager->getLocalTasks($this->routeMatch->getRouteName());
foreach ($entity_local_tasks['tabs'] as $route_name => $local_task) {
// The $local_task array that we get here is tailor-made for use
// with the menu-local-tasks.html.twig, eg. the menu_local_task
// theme hook. It has all the information we need, but we're not
// rendering local tasks, or tabs, we're rendering a simple list of
// links. Here we're taking advantage of all the good stuff found in
// the render array, namely the #link, and #access properties, using
// them to render a simple link.
// @see \Drupal\Core\Menu\LocalTaskManager::getTasksBuild()
$link = $local_task['#link'];
$link['localized_options'] += [
'set_active_class' => TRUE,
];
$this->localTasks['tasks'][$route_name] = [
'#theme' => 'top_bar_local_task',
'#link' => [
'#type' => 'link',
'#title' => $link['title'],
'#url' => $link['url'],
'#options' => $link['localized_options'],
],
'#access' => $local_task['#access'],
];
}
$this->localTasks['cacheability'] = $cacheability->merge($entity_local_tasks['cacheability']);
return $this->localTasks;
}
/**
* Do we have local tasks that we want to show in the top bar?
*
* @return bool
* TRUE if there are local tasks available for the top bar, FALSE otherwise.
*/
private function hasLocalTasks(): bool {
$local_tasks = $this->getLocalTasks();
return !empty($local_tasks['tasks']);
}
/**
* Determines if content entity route condition is met.
*
* @return bool
* TRUE if the content entity route condition is met, FALSE otherwise.
*/
protected function meetsContentEntityRoutesCondition(): bool {
return array_key_exists($this->routeMatch->getRouteObject()->getPath(), $this->getContentEntityPaths());
}
/**
* Returns the paths for the link templates of all content entities.
*
* @return array
* An array of all content entity type IDs, keyed by the corresponding link
* template paths.
*/
protected function getContentEntityPaths(): array {
if (isset($this->contentEntityPaths)) {
return $this->contentEntityPaths;
}
$this->contentEntityPaths = [];
$entity_types = $this->entityTypeManager->getDefinitions();
foreach ($entity_types as $entity_type) {
if ($entity_type->entityClassImplements(ContentEntityInterface::class)) {
$entity_paths = $this->getContentEntityTypePaths($entity_type);
$this->contentEntityPaths = array_merge($this->contentEntityPaths, $entity_paths);
}
}
return $this->contentEntityPaths;
}
/**
* Returns the path for the link template for a given content entity type.
*
* @param \Drupal\Core\Entity\EntityTypeInterface $entity_type
* The entity type definition.
*
* @return array
* Array containing the paths for the given content entity type.
*/
protected function getContentEntityTypePaths(EntityTypeInterface $entity_type): array {
$paths = array_filter($entity_type->getLinkTemplates(), fn ($template) => $template !== 'collection', ARRAY_FILTER_USE_KEY);
if ($this->isLayoutBuilderEntityType($entity_type)) {
$paths[] = $entity_type->getLinkTemplate('canonical') . '/layout';
}
return array_fill_keys($paths, $entity_type->id());
}
/**
* Determines if a given entity type is layout builder relevant or not.
*
* @param \Drupal\Core\Entity\EntityTypeInterface $entity_type
* The entity type.
*
* @return bool
* Whether this entity type is a Layout builder candidate or not
*
* @see \Drupal\layout_builder\Plugin\SectionStorage\OverridesSectionStorage::getEntityTypes()
*/
protected function isLayoutBuilderEntityType(EntityTypeInterface $entity_type): bool {
return $entity_type->entityClassImplements(FieldableEntityInterface::class) && $entity_type->hasHandlerClass('form', 'layout_builder') && $entity_type->hasViewBuilderClass() && $entity_type->hasLinkTemplate('canonical');
}
}

30
core/modules/navigation/src/NavigationServiceProvider.php Executable file
View File

@@ -0,0 +1,30 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation;
use Drupal\Core\DependencyInjection\ContainerBuilder;
use Drupal\Core\DependencyInjection\ServiceProviderInterface;
use Symfony\Component\DependencyInjection\Reference;
/**
* Defines a service provider for the Navigation module.
*
* @internal
*/
final class NavigationServiceProvider implements ServiceProviderInterface {
/**
* {@inheritdoc}
*/
public function register(ContainerBuilder $container): void {
// If shortcuts module service is available, register our own service.
if ($container->has('shortcut.lazy_builders')) {
$container
->register('navigation.shortcut_lazy_builder', ShortcutLazyBuilder::class)
->addArgument(new Reference('shortcut.lazy_builders'));
}
}
}

118
core/modules/navigation/src/Plugin/Block/NavigationMenuBlock.php Executable file
View File

@@ -0,0 +1,118 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation\Plugin\Block;
use Drupal\Core\Block\Attribute\Block;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Menu\MenuTreeParameters;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\navigation\Plugin\Derivative\SystemMenuNavigationBlock as SystemMenuNavigationBlockDeriver;
use Drupal\system\Plugin\Block\SystemMenuBlock;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Provides a generic menu navigation block.
*
* @internal
*/
#[Block(
id: "navigation_menu",
admin_label: new TranslatableMarkup("Navigation menu"),
category: new TranslatableMarkup("Menus"),
deriver: SystemMenuNavigationBlockDeriver::class,
)]
final class NavigationMenuBlock extends SystemMenuBlock implements ContainerFactoryPluginInterface {
const NAVIGATION_MAX_DEPTH = 3;
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
return new static(
$configuration,
$plugin_id,
$plugin_definition,
$container->get('navigation.menu_tree'),
$container->get('menu.active_trail'),
);
}
/**
* {@inheritdoc}
*/
public function defaultConfiguration(): array {
return [
'level' => 1,
'depth' => 0,
];
}
/**
* {@inheritdoc}
*/
public function blockForm($form, FormStateInterface $form_state): array {
$form = parent::blockForm($form, $form_state);
unset($form['menu_levels']['expand_all_items']);
$form['menu_levels']['depth']['#options'] = range(1, static::NAVIGATION_MAX_DEPTH);
return $form;
}
/**
* {@inheritdoc}
*/
public function blockSubmit($form, FormStateInterface $form_state): void {
$this->configuration['level'] = $form_state->getValue('level');
$this->configuration['depth'] = $form_state->getValue('depth');
}
/**
* {@inheritdoc}
*/
public function build(): array {
$menu_name = $this->getDerivativeId();
$level = $this->configuration['level'];
$depth = $this->configuration['depth'];
$parameters = new MenuTreeParameters();
$parameters
->setMinDepth($level)
->setMaxDepth(min($level + $depth, $this->menuTree->maxDepth()))
->onlyEnabledLinks();
$tree = $this->menuTree->load($menu_name, $parameters);
$manipulators = [
['callable' => 'menu.default_tree_manipulators:checkAccess'],
['callable' => 'menu.default_tree_manipulators:generateIndexAndSort'],
];
$tree = $this->menuTree->transform($tree, $manipulators);
$build = $this->menuTree->build($tree);
if (!empty($build)) {
$build['#title'] = $this->configuration['label'];
}
return $build;
}
/**
* {@inheritdoc}
*/
public function calculateDependencies() {
return [
'module' => [
'system',
],
];
}
/**
* {@inheritdoc}
*/
public function getCacheContexts(): array {
// We don't use menu active trails here.
return array_filter(parent::getCacheContexts(), static fn (string $tag) => !str_starts_with($tag, 'route.menu_active_trails'));
}
}

90
core/modules/navigation/src/Plugin/Block/NavigationShortcutsBlock.php Executable file
View File

@@ -0,0 +1,90 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation\Plugin\Block;
use Drupal\Core\Access\AccessResult;
use Drupal\Core\Access\AccessResultInterface;
use Drupal\Core\Block\Attribute\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Extension\ModuleHandlerInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\Core\Session\AccountInterface;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Defines a shortcuts navigation block class.
*
* @internal
*
* @todo Move to Shortcut module as part of the core MR process.
*/
#[Block(
id: 'navigation_shortcuts',
admin_label: new TranslatableMarkup('Navigation Shortcuts'),
)]
final class NavigationShortcutsBlock extends BlockBase implements ContainerFactoryPluginInterface {
/**
* Constructs a new ShortcutsNavigationBlock.
*
* @param array $configuration
* A configuration array containing information about the plugin instance.
* @param string $plugin_id
* The plugin_id for the plugin instance.
* @param mixed $plugin_definition
* The plugin implementation definition.
* @param \Drupal\Core\Extension\ModuleHandlerInterface $moduleHandler
* The module handler service.
*/
public function __construct(array $configuration, $plugin_id, $plugin_definition, protected ModuleHandlerInterface $moduleHandler) {
parent::__construct($configuration, $plugin_id, $plugin_definition);
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
return new static(
$configuration,
$plugin_id,
$plugin_definition,
$container->get('module_handler')
);
}
/**
* {@inheritdoc}
*/
protected function blockAccess(AccountInterface $account): AccessResultInterface {
return AccessResult::allowedIfHasPermission($account, 'access shortcuts');
}
/**
* {@inheritdoc}
*/
public function build(): array {
// This navigation block requires shortcut module. Once the plugin is moved
// to the module, this should not be necessary.
if (!$this->moduleHandler->moduleExists('shortcut')) {
return [];
}
return [
'shortcuts' => [
// @phpstan-ignore-next-line
'#lazy_builder' => ['navigation.shortcut_lazy_builder:lazyLinks', [$this->configuration['label']]],
'#create_placeholder' => TRUE,
'#cache' => [
'keys' => ['shortcut_set_navigation_links'],
'contexts' => ['user'],
],
'#lazy_builder_preview' => [
'#markup' => '<a href="#" class="toolbar-tray-lazy-placeholder-link">&nbsp;</a>',
],
],
];
}
}

44
core/modules/navigation/src/Plugin/Block/NavigationUserBlock.php Executable file
View File

@@ -0,0 +1,44 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation\Plugin\Block;
use Drupal\Core\Block\Attribute\Block;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\StringTranslation\TranslatableMarkup;
/**
* Defines a user navigation block.
*
* @internal
*/
#[Block(
id: 'navigation_user',
admin_label: new TranslatableMarkup('User'),
)]
final class NavigationUserBlock extends BlockBase {
/**
* {@inheritdoc}
*/
public function build(): array {
return [
'user' => [
'#lazy_builder' => [
'navigation.user_lazy_builder:renderNavigationLinks',
[],
],
'#create_placeholder' => TRUE,
'#cache' => [
'keys' => ['user_set_navigation_links'],
'contexts' => ['user'],
],
'#lazy_builder_preview' => [
'#markup' => '<a href="#" class="toolbar-tray-lazy-placeholder-link">&nbsp;</a>',
],
],
];
}
}

49
core/modules/navigation/src/Plugin/Derivative/SystemMenuNavigationBlock.php Executable file
View File

@@ -0,0 +1,49 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation\Plugin\Derivative;
use Drupal\Component\Plugin\Derivative\DeriverBase;
use Drupal\Core\Entity\EntityStorageInterface;
use Drupal\Core\Plugin\Discovery\ContainerDeriverInterface;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
* Provides navigation block plugin definitions for custom menus.
*
* @internal
* @see \Drupal\navigation\Plugin\Block\NavigationMenuBlock
*/
final class SystemMenuNavigationBlock extends DeriverBase implements ContainerDeriverInterface {
/**
* Constructs new SystemMenuNavigationBlock.
*
* @param \Drupal\Core\Entity\EntityStorageInterface $menuStorage
* The menu storage.
*/
public function __construct(protected EntityStorageInterface $menuStorage) {}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, $base_plugin_id): static {
return new static(
$container->get('entity_type.manager')->getStorage('menu')
);
}
/**
* {@inheritdoc}
*/
public function getDerivativeDefinitions($base_plugin_definition): array {
foreach ($this->menuStorage->loadMultiple() as $menu => $entity) {
$this->derivatives[$menu] = $base_plugin_definition;
$this->derivatives[$menu]['admin_label'] = $entity->label();
$this->derivatives[$menu]['config_dependencies']['config'] = [$entity->getConfigDependencyName()];
}
return $this->derivatives;
}
}

215
core/modules/navigation/src/Plugin/SectionStorage/NavigationSectionStorage.php Executable file
View File

@@ -0,0 +1,215 @@
<?php
namespace Drupal\navigation\Plugin\SectionStorage;
use Drupal\Core\Access\AccessResult;
use Drupal\Core\Access\AccessResultInterface;
use Drupal\Core\Cache\CacheableDependencyInterface;
use Drupal\Core\Cache\RefinableCacheableDependencyInterface;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\Core\Plugin\Context\Context;
use Drupal\Core\Plugin\Context\ContextDefinition;
use Drupal\Core\Plugin\ContextAwarePluginTrait;
use Drupal\Core\Plugin\PluginBase;
use Drupal\Core\Session\AccountInterface;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\Core\Url;
use Drupal\layout_builder\Attribute\SectionStorage;
use Drupal\layout_builder\Plugin\SectionStorage\SectionStorageLocalTaskProviderInterface;
use Drupal\layout_builder\Routing\LayoutBuilderRoutesTrait;
use Drupal\layout_builder\Section;
use Drupal\layout_builder\SectionListTrait;
use Drupal\layout_builder\SectionStorageInterface;
use Drupal\navigation\Form\LayoutForm;
use Symfony\Component\DependencyInjection\ContainerInterface;
use Symfony\Component\Routing\RouteCollection;
/**
* Provides navigation section storage.
*
* @internal The navigation module is experimental.
*/
#[SectionStorage(id: "navigation",
context_definitions: [
"navigation" => new ContextDefinition(
data_type: "string",
label: new TranslatableMarkup("Navigation flag"),
),
],
handles_permission_check: TRUE,
)]
final class NavigationSectionStorage extends PluginBase implements SectionStorageInterface, SectionStorageLocalTaskProviderInterface, ContainerFactoryPluginInterface, CacheableDependencyInterface {
const STORAGE_ID = 'navigation.block_layout';
use ContextAwarePluginTrait;
use LayoutBuilderRoutesTrait;
use SectionListTrait;
/**
* The config factory.
*
* @var \Drupal\Core\Config\ConfigFactoryInterface
*/
protected ConfigFactoryInterface $configFactory;
/**
* An array of sections.
*
* @var \Drupal\layout_builder\Section[]|null
*/
protected $sections;
/**
* {@inheritdoc}
*/
public function __construct(array $configuration, $plugin_id, $plugin_definition, ConfigFactoryInterface $config_factory) {
parent::__construct($configuration, $plugin_id, $plugin_definition);
$this->configFactory = $config_factory;
}
/**
* {@inheritdoc}
*/
public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
return new static(
$configuration,
$plugin_id,
$plugin_definition,
$container->get('config.factory')
);
}
/**
* {@inheritdoc}
*/
public function getStorageType(): string {
return $this->getPluginId();
}
/**
* {@inheritdoc}
*/
public function getStorageId(): string {
return self::STORAGE_ID;
}
/**
* {@inheritdoc}
*/
public function label(): string {
return 'Navigation layout';
}
/**
* Returns the name to be used to store in the config system.
*/
protected function getConfigName(): string {
return self::STORAGE_ID;
}
/**
* {@inheritdoc}
*/
public function getSections(): array {
if (is_null($this->sections)) {
$sections = $this->configFactory->get($this->getConfigName())->get('sections') ?: [];
$this->setSections(array_map([Section::class, 'fromArray'], $sections));
}
return $this->sections;
}
/**
* {@inheritdoc}
*/
protected function setSections(array $sections): static {
$this->sections = array_values($sections);
return $this;
}
/**
* {@inheritdoc}
*/
public function save(): int {
$sections = array_map(function (Section $section) {
return $section->toArray();
}, $this->getSections());
$config = $this->configFactory->getEditable($this->getConfigName());
$return = $config->get('sections') ? SAVED_UPDATED : SAVED_NEW;
$config->set('sections', $sections)->save();
return $return;
}
/**
* {@inheritdoc}
*/
public function buildRoutes(RouteCollection $collection): void {
$this->buildLayoutRoutes($collection, $this->getPluginDefinition(), '/admin/config/user-interface/navigation-block');
$default_route = 'layout_builder.' . $this->getPluginDefinition()->id() . '.view';
$route = $collection->get($default_route);
// Use a form for editing the layout instead of a controller.
$defaults = $route->getDefaults();
$defaults['_form'] = LayoutForm::class;
unset($defaults['_controller']);
$route->setDefaults($defaults);
}
/**
* {@inheritdoc}
*/
public function deriveContextsFromRoute($value, $definition, $name, array $defaults): array {
return ['navigation' => new Context(new ContextDefinition('string'), 'navigation')];
}
/**
* {@inheritdoc}
*/
public function buildLocalTasks($base_plugin_definition): array {
return [];
}
/**
* {@inheritdoc}
*/
public function getLayoutBuilderUrl($rel = 'view'): Url {
return Url::fromRoute("layout_builder.{$this->getStorageType()}.$rel", ['id' => $this->getStorageId()]);
}
/**
* {@inheritdoc}
*/
public function getRedirectUrl(): Url {
return $this->getLayoutBuilderUrl();
}
/**
* {@inheritdoc}
*/
public function access($operation, ?AccountInterface $account = NULL, $return_as_object = FALSE): AccessResultInterface | bool {
$result = AccessResult::allowedIfHasPermission($account, 'configure navigation layout');
return $return_as_object ? $result : $result->isAllowed();
}
/**
* {@inheritdoc}
*/
public function getContextsDuringPreview(): array {
return $this->getContexts();
}
/**
* {@inheritdoc}
*/
public function isApplicable(RefinableCacheableDependencyInterface $cacheability): bool {
return TRUE;
}
/**
* {@inheritdoc}
*/
public function getContextMapping(): array {
return ['navigation' => 'navigation'];
}
}

37
core/modules/navigation/src/RenderCallbacks.php Executable file
View File

@@ -0,0 +1,37 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation;
use Drupal\Core\Security\Attribute\TrustedCallback;
use Drupal\navigation\Plugin\SectionStorage\NavigationSectionStorage;
/**
* Defines a class for render element callbacks.
*
* @internal
*/
final class RenderCallbacks {
/**
* Pre-render callback for layout builder.
*/
#[TrustedCallback]
public static function alterLayoutBuilder(array $element): array {
if (($element['#section_storage'] ?? NULL) instanceof NavigationSectionStorage) {
// Remove add section links that exist before and after the existing
// section.
unset($element['layout_builder'][0], $element['layout_builder'][2]);
// Remove add block link from the footer section and the remove and
// configure buttons from the existing section.
unset(
$element['layout_builder'][1]['remove'],
$element['layout_builder'][1]['configure'],
$element['layout_builder'][1]['layout-builder__section']['footer']['layout_builder_add_block'],
);
}
return $element;
}
}

69
core/modules/navigation/src/ShortcutLazyBuilder.php Executable file
View File

@@ -0,0 +1,69 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation;
use Drupal\Core\Security\TrustedCallbackInterface;
use Drupal\shortcut\ShortcutLazyBuilders;
/**
* Lazy Builders for Navigation shortcuts links.
*
* @internal The navigation module is experimental.
* @see \Drupal\shortcut\ShortcutLazyBuilders
*/
final class ShortcutLazyBuilder implements TrustedCallbackInterface {
/**
* Constructs a ShortcutLazyBuilders object.
*
* @param \Drupal\shortcut\ShortcutLazyBuilders $shortcutLazyBuilder
* The original shortcuts lazy builder service.
*/
public function __construct(
protected readonly ShortcutLazyBuilders $shortcutLazyBuilder,
) {}
/**
* {@inheritdoc}
*/
public static function trustedCallbacks() {
return ['lazyLinks'];
}
/**
* The #lazy_builder callback; builds shortcut navigation links.
*
* @param string $label
* (Optional) The links label. Defaults to "Shortcuts".
*
* @return array
* A renderable array of shortcut links.
*/
public function lazyLinks(string $label = 'Shortcuts') {
$shortcut_links = $this->shortcutLazyBuilder->lazyLinks();
if (empty($shortcut_links['shortcuts']['#links'])) {
return [
'#cache' => $shortcut_links['#cache'],
];
}
$shortcuts_items = [
[
'title' => $label,
'class' => 'shortcuts',
'below' => $shortcut_links['shortcuts']['#links'],
],
];
return [
'#title' => $label,
'#theme' => 'navigation_menu',
'#menu_name' => 'shortcuts',
'#items' => $shortcuts_items,
'#cache' => $shortcut_links['#cache'],
];
}
}

101
core/modules/navigation/src/UserLazyBuilder.php Executable file
View File

@@ -0,0 +1,101 @@
<?php
declare(strict_types=1);
namespace Drupal\navigation;
use Drupal\Core\Extension\ModuleHandlerInterface;
use Drupal\Core\Security\TrustedCallbackInterface;
use Drupal\Core\Session\AccountProxyInterface;
use Drupal\Core\StringTranslation\StringTranslationTrait;
use Drupal\Core\Url;
/**
* User navigation block lazy builder.
*
* @internal The navigation module is experimental.
*/
final class UserLazyBuilder implements TrustedCallbackInterface {
use StringTranslationTrait;
/**
* Constructs an UserLazyBuilder object.
*
* @param \Drupal\Core\Extension\ModuleHandlerInterface $moduleHandler
* The module handler.
* @param \Drupal\Core\Session\AccountProxyInterface $account
* The current user.
*/
public function __construct(
protected readonly ModuleHandlerInterface $moduleHandler,
protected readonly AccountProxyInterface $account,
) {}
/**
* Lazy builder callback for rendering navigation links.
*
* @return array
* A renderable array as expected by the renderer service.
*/
public function renderNavigationLinks() {
return [
'#help' => $this->moduleHandler->moduleExists('help'),
'#theme' => 'menu_region__footer',
'#items' => $this->userOperationLinks(),
'#menu_name' => 'user',
'#title' => $this->account->getDisplayName(),
'#cache' => [
'contexts' => [
'user',
],
],
];
}
/**
* Returns the user operation links in navigation expected format.
*
* @param bool $include_edit
* (Optional) Whether to include the edit account link or not.
*
* @return array
* List of operation links for the current user.
*/
public function userOperationLinks(bool $include_edit = TRUE): array {
$links = [
'account' => [
'title' => $this->t('View profile'),
'url' => Url::fromRoute('user.page'),
'attributes' => [
'title' => $this->t('User account'),
],
],
'account_edit' => [
'title' => $this->t('Edit profile'),
'url' => Url::fromRoute('entity.user.edit_form', ['user' => $this->account->id()]),
'attributes' => [
'title' => $this->t('Edit user account'),
],
],
'logout' => [
'title' => $this->t('Log out'),
'url' => Url::fromRoute('user.logout'),
],
];
if (!$include_edit) {
unset($links['account_edit']);
}
return $links;
}
/**
* {@inheritdoc}
*/
public static function trustedCallbacks() {
return ['renderNavigationLinks'];
}
}

14
core/modules/navigation/templates/big-pipe-interface-preview--navigation-shortcut-lazy-builder-lazyLinks--Shortcuts.html.twig Executable file
View File

@@ -0,0 +1,14 @@
{#
/**
* @file
* Placeholder content for the shortcuts menu. This is used to eliminate layout
* shifts as BigPipe injects data.
*/
#}
{% include '@navigation/toolbar-button.html.twig' with {
attributes: create_attribute(),
extra_classes: 'invisible toolbar-button--icon--shortcuts toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
icon: 'shortcuts',
text: 'Shortcuts'|t,
} only %}

40
core/modules/navigation/templates/block--navigation.html.twig Executable file
View File

@@ -0,0 +1,40 @@
{#
/**
* @file
* Default theme implementation to display a navigation_block.
*
* Available variables:
* - plugin_id: The ID of the navigation_block implementation.
* - label: The configured label of the navigation_block if visible.
* - configuration: A list of the navigation_block's configuration values.
* - label: The configured label for the navigation_block.
* - label_display: The display settings for the label.
* - provider: The module or other provider that provided this
navigation_block plugin.
* - Navigation block plugin specific settings will also be stored here.
* - content: The content of this navigation_block.
* - attributes: array of HTML attributes populated by modules, intended to
* be added to the main container tag of this template.
* - id: A valid HTML ID and guaranteed unique.
* - title_attributes: Same as attributes, except applied to the main title
* tag that appears in the template.
* - title_prefix: Additional output populated by modules, intended to be
* displayed in front of the main title tag that appears in the template.
* - title_suffix: Additional output populated by modules, intended to be
* displayed after the main title tag that appears in the template.
*
* @see template_preprocess_navigation_block()
*
* @ingroup themeable
*/
#}
<div{{ attributes.addClass('toolbar-block') }}>
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes.addClass('toolbar-block__title').setAttribute('data-drupal-tooltip', label).setAttribute('data-drupal-tooltip-class', 'toolbar-block__title-tooltip') }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content }}
{% endblock %}
</div>

4
core/modules/navigation/templates/logo.svg.twig Executable file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 32 32" role="img" aria-label="{{ label }}">
<rect fill="{{ bg_color|default('#347efe') }}" width="32" height="32" rx="8"/>
<path fill="{{ fg_color|default('#fff') }}" d="M19,10.3C17.67,9,16.38,7.68,16,6.23,15.62,7.67,14.33,9,13,10.3c-2,2-4.31,4.31-4.31,7.74a7.32,7.32,0,0,0,14.64,0C23.32,14.61,21,12.32,19,10.3Zm-7.22,9.44c-.45,0-2.11-2.87,1-5.91l2,2.22a.18.18,0,0,1,0,.25h0A19.3,19.3,0,0,0,12,19.6C11.92,19.75,11.83,19.74,11.79,19.74ZM16,23.51A2.52,2.52,0,0,1,13.48,21a2.56,2.56,0,0,1,.63-1.66c.45-.56,1.89-2.12,1.89-2.12s1.41,1.59,1.89,2.11A2.5,2.5,0,0,1,18.52,21,2.52,2.52,0,0,1,16,23.51Zm4.82-4.09c-.06.12-.18.32-.35.33s-.32-.14-.55-.47c-.48-.71-4.67-5.09-5.46-5.94s-.09-1.27.18-1.55L16,10.44a35.72,35.72,0,0,1,4.25,4.8A4.5,4.5,0,0,1,20.82,19.42Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 841 B

64
core/modules/navigation/templates/menu-region--footer.html.twig Executable file
View File

@@ -0,0 +1,64 @@
{#
/**
* @file
* Default theme implementation to display the navigation footer menu.
*
* Available variables:
* - menu_name: The machine name of the user menu.
* - help: TRUE if "Help" module is enabled.
* - title: A name of account.
* - items: A nested list of menu items. Each menu item contains:
* - attributes: HTML attributes for the menu item.
* - below: The menu item child items.
* - title: The menu link title.
* - url: The menu link URL, instance of \Drupal\Core\Url
* - localized_options: Menu link localized options.
* - is_expanded: TRUE if the link has visible children within the current
* menu tree.
* - is_collapsed: TRUE if the link has children within the current menu tree
* that are not currently visible.
* - in_active_trail: TRUE if the link is in the active trail.
*
* @ingroup themeable
*/
#}
{% set menu_heading_id = 'menu--' ~ menu_name|clean_unique_id %}
<div class="admin-toolbar__item">
<h4 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h4>
<ul class="toolbar-block__list">
{% if help %}
<li class="toolbar-block__list-item">
{% include '@navigation/toolbar-button.html.twig' with {
attributes: create_attribute({ 'href': path('help.main'), 'data-drupal-tooltip': 'Help'|t, 'data-drupal-tooltip-class': 'admin-toolbar__tooltip' }),
icon: 'help',
html_tag: 'a',
text: 'Help'|t,
extra_classes: 'toolbar-button--collapsible',
} only %}
</li>
{% endif %}
<li id="admin-toolbar-user-menu" class="toolbar-block__list-item toolbar-block__list-item--user toolbar-popover" data-toolbar-popover>
{% include '@navigation/toolbar-button.html.twig' with {
action: true,
attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar-user-menu', 'data-toolbar-popover-control': true}),
icon: menu_name|clean_class,
text: title,
extra_classes: 'toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
has_safe_triangle: TRUE,
} only %}
<div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper>
<span class="toolbar-popover__header toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive">{{ title }}</span>
<ul class="toolbar-menu toolbar-popover__menu">
{% for item in items %}
<li class="toolbar-menu__item toolbar-menu__item--level-1">
<a
href="{{ item.url }}"
class="toolbar-button"
>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
</ul>
</div>

95
core/modules/navigation/templates/navigation-menu.html.twig Executable file
View File

@@ -0,0 +1,95 @@
{% import _self as menus %}
{% set menu_heading_id = 'menu--' ~ menu_name|clean_unique_id %}
<div class="admin-toolbar__item">
<h4 id="{{ menu_heading_id }}" class="toolbar-block__title visually-hidden focusable">{{ title }}</h4>
<ul class="toolbar-block__list" aria-labelledby="{{ menu_heading_id }}">
{{ menus.menu_items(items, attributes, 0) }}
</ul>
</div>
{% macro menu_items(items, attributes, menu_level) %}
{% for item in items %}
{% set item_id = ('navigation-link--' ~ item.original_link.pluginId)|clean_unique_id %}
{% if menu_level == 0 %}
{% if item.below is empty %}
<li id="{{ item_id }}" class="toolbar-block__list-item">
{% include '@navigation/toolbar-button.html.twig' with {
attributes: create_attribute({ 'href': item.url|render, 'data-drupal-tooltip': item.title, 'data-drupal-tooltip-class': 'admin-toolbar__tooltip' }),
icon: item.class|clean_class,
html_tag: 'a',
text: item.title,
extra_classes: 'toolbar-button--collapsible',
} only %}
</li>
{% else %}
<li id="{{ item_id }}" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover>
{% include '@navigation/toolbar-button.html.twig' with {
action: true,
attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': item_id, 'data-toolbar-popover-control': true}),
icon: item.class|clean_class,
text: item.title,
extra_classes: 'toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
has_safe_triangle: TRUE,
} only %}
<div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper inert>
{% if item.url %}
{{ link(item.title, item.url, create_attribute({'class': ['toolbar-popover__header', 'toolbar-button', 'toolbar-button--large', 'toolbar-button--dark']})) }}
{% else %}
<span class="toolbar-popover__header toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive">{{ item.title }}</span>
{% endif %}
<ul class="toolbar-menu toolbar-popover__menu">
{{ menus.menu_items(item.below, attributes, 1) }}
</ul>
</div>
</li>
{% endif %}
{% elseif menu_level == 1 %}
<li class="toolbar-menu__item toolbar-menu__item--level-{{ menu_level }}">
{% if item.below is empty %}
<a
href="{{ item.url }}"
class="toolbar-button"
data-index-text="{{ item.title|first|lower }}"
>{{ item.title }}</a>
{% else %}
<button
class="toolbar-button toolbar-button--expand--down"
data-toolbar-menu-trigger="{{ menu_level }}"
aria-expanded="false"
data-index-text="{{ item.title|first|lower }}"
>
<span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
<span class="toolbar-menu__link-title">{{ item.title }}</span>
</button>
<ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>
{{ menus.menu_items(item.below, attributes, menu_level + 1) }}
</ul>
{% endif %}
</li>
{% else %}
<li class="toolbar-menu__item toolbar-menu__item--level-{{ menu_level }}">
{% if item.below is empty %}
<a
href="{{ item.url }}"
class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"
data-index-text="{{ item.title|first|lower }}"
>{{ item.title }}</a>
{% else %}
<button
class="toolbar-menu__link toolbar-menu__link--{{ menu_level }}"
data-toolbar-menu-trigger="{{ menu_level }}"
aria-expanded="false"
data-index-text="{{ item.title|first|lower }}"
>
<span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
<span class="toolbar-menu__link-title">{{ item.title }}</span>
</button>
<ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>
{{ menus.menu_items(item.below, attributes, menu_level + 1) }}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
{% endmacro %}

33
core/modules/navigation/templates/toolbar-button.html.twig Executable file
View File

@@ -0,0 +1,33 @@
{# Extra classes variable added to be sure that modifiers will
appear after main classes #}
{%
set classes = [
'toolbar-button',
icon ? 'toolbar-button--icon--' ~ icon : '',
extra_classes,
]
%}
<{{html_tag|default('button')}}
{{ attributes.addClass(classes) }}
data-index-text="{{ text|first|lower }}"
data-icon-text={{- text|render|trim|slice(0, 2)|join('') }}
>
{% if avatar %}
<span class="toolbar-button__avatar">{{~ avatar ~}}</span>
{% endif %}
{% if action %}
<span data-toolbar-action class="visually-hidden">{{ 'Extend'|t }}</span>
{% endif %}
{% block content %}
{% if text %}
<span class="toolbar-button__label {{ label_classes }}" data-text>{{~ text ~}}</span>
{% endif %}
{% endblock %}
{# Element that improves sub-menu UX by implementing the Safe Triangle strategy.
More info at https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles #}
{% if has_safe_triangle %}
<div data-toolbar-popover-safe-triangle></div>
{% endif %}
</{{html_tag|default('button')}}>

12
core/modules/navigation/templates/top-bar-local-task.html.twig Executable file
View File

@@ -0,0 +1,12 @@
{#
/**
* @file
* Default theme implementation for a single navigation top bar local task.
*
* Available variables:
* - link: Link render element.
*/
#}
<li class="toolbar-dropdown__item">
{{ link|add_class('toolbar-dropdown__link') }}
</li>

28
core/modules/navigation/templates/top-bar-local-tasks.html.twig Executable file
View File

@@ -0,0 +1,28 @@
{#
/**
* @file
* Default theme implementation for navigation top bar local tasks.
*
* Available variables:
* - local_tasks: Array of local tasks for the current route.
*/
#}
{% set dropdown_id = 'admin-local-tasks'|clean_unique_id %}
{% include '@navigation/toolbar-button.html.twig' with {
attributes: create_attribute(
{
'aria-expanded': 'false',
'aria-controls': dropdown_id,
'data-drupal-dropdown': 'true'
}
),
text: 'More actions'|t,
extra_classes: 'toolbar-button--expand--down toolbar-button--weight--400 toolbar-button--tertiary--expanded toolbar-button--actions',
} only %}
<div class="toolbar-dropdown__menu" id={{ dropdown_id }}>
<ul class="toolbar-dropdown__list">
{% for local_task in local_tasks %}
{{ local_task }}
{% endfor %}
</ul>
</div>

Some files were not shown because too many files have changed in this diff Show More