Revamped sidebar

Update sidebar.php and wedge.scss
This commit is contained in:
Herwin Bozet (NibblePoker) 2024-11-23 12:52:32 +01:00
parent d584aa9732
commit 0a08a16f0b
2 changed files with 37 additions and 52 deletions

View File

@ -17,114 +17,99 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<details class="by t-noselect" open> <details class="by t-noselect" open>
<summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Core</summary> <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Core</summary>
<div class="p-xs bt bkgd-grey"> <div class="p-xs px-m bt bkgd-grey t-size-11">
<a class="a-hidden" href="#text-weights"> <a class="a-hidden" href="#text-weights">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-text-height pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-text-height pr-xs t-half-muted"></i>Weights
<span class="t-size-12">Weights</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-styles"> <a class="a-hidden" href="#text-styles">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-italic pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-italic pr-xs t-half-muted"></i>Styles
<span class="t-size-12">Styles</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-alignment"> <a class="a-hidden" href="#text-alignment">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-text-width pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-text-width pr-xs t-half-muted"></i>Alignment
<span class="t-size-12">Alignment</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-modifiers"> <a class="a-hidden" href="#text-modifiers">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-subscript pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-subscript pr-xs t-half-muted"></i>Modifiers
<span class="t-size-12">Modifiers</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-links"> <a class="a-hidden" href="#text-links">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-link pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-link pr-xs t-half-muted"></i>Links
<span class="t-size-12">Links</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#text-misc"> <a class="a-hidden" href="#text-misc">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
<span class="t-size-12">Miscellaneous</span>
</p> </p>
</a> </a>
<hr class="subtle"> <hr class="subtle">
<a class="a-hidden" href="#spacing"> <a class="a-hidden" href="#spacing">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Spacing
<span class="t-size-12">Spacing</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#rounding"> <a class="a-hidden" href="#rounding">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-bezier-curve pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding
<span class="t-size-12">Rounding</span>
</p> </p>
</a> </a>
<hr class="subtle"> <hr class="subtle">
<a class="a-hidden" href="#lists-basic"> <a class="a-hidden" href="#lists-basic">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-list pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-list pr-xs t-half-muted"></i>Lists
<span class="t-size-12">Lists</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#grids"> <a class="a-hidden" href="#grids">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-table-cells-large pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
<span class="t-size-12">Grids</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#tables"> <a class="a-hidden" href="#tables">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-table pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
<span class="t-size-12">Tables</span>
</p> </p>
</a> </a>
</div> </div>
</details> </details>
<details class="by t-noselect" open> <details class="by t-noselect" open>
<summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Site</summary> <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Site</summary>
<div class="p-xs bt bkgd-grey"> <div class="p-xs px-m bt bkgd-grey t-size-11">
<a class="a-hidden" href="#horizontal-rulers"> <a class="a-hidden" href="#horizontal-rulers">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ruler pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
<span class="t-size-12">Horizontal Rulers</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#backgrounds"> <a class="a-hidden" href="#backgrounds">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-paint-roller pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
<span class="t-size-12">Backgrounds</span>
</p> </p>
</a> </a>
<a class="a-hidden" href="#buttons"> <a class="a-hidden" href="#buttons">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-stop pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons
<span class="t-size-12">Buttons</span>
</p> </p>
</a> </a>
</div> </div>
</details> </details>
<details class="by t-noselect" open> <details class="by t-noselect" open>
<summary class="p-xs bkgd-grid20 t-w-bold t-size-14">Examples</summary> <summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
<div class="p-xs bt bkgd-grey"> <div class="p-xs px-m bt bkgd-grey t-size-11">
<a class="a-hidden" href="#lists-composed"> <a class="a-hidden" href="#lists-composed">
<p class="t-size-18 t-w-500 py-xs sidebar-entry"> <p class="t-w-500 py-xs sidebar-entry">
<i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i> <i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Composed
<span class="t-size-12">Composed</span>
</p> </p>
</a> </a>
</div> </div>

View File

@ -2,7 +2,7 @@
/* Custom Elements > Wedge */ /* Custom Elements > Wedge */
.wedge { wedge, .wedge {
position: absolute; position: absolute;
//top: 0; //top: 0;
//right: 0; //right: 0;