gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add stacked links menu item variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 17:29:17 +02:00
parent cfc933f3c1
commit aabe66cef4
2 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+13
View File
@@ -57,6 +57,19 @@
</div>
</section>
<!-- Component: Link Menu Items -->
<section id="component-linksmenu-items">
<p class="sg-preview-label">Component: Linksmenue-Items</p>
<div class="sg-tab-button-group" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Gesamtbewertung</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Marktbewertung</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Wachstum</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Profitabilität</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Stabilität</button>
</div>
</section>
<!-- Component: Button Tab Navigation In Content -->
<section id="component-button-tab-navigation-in-content">
<p class="sg-preview-label">Component: Tasten-Navigation-gross in content</p>
styles/10-components-interactive-elements.css
+10
View File
@@ -155,6 +155,16 @@
background: var(--surface-tab-compact-background);
}
.sg-tab-button-group[data-component-variant="linksmenu-items"] {
flex-direction: column;
align-items: stretch;
width: 100%;
}
.sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button {
width: 100%;
}
.sg-tab-button-group[data-component-context="content"] {
background: var(--surface-tab-compact-background);
}