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

Add in-content large tab navigation variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-02 08:33:25 +02:00
parent 246e5e9a8b
commit 701b081232
2 changed files with 27 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> </div>
</section> </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>
<div class="sg-tab-button-group" role="tablist" aria-label="Tasten Navigation im Content" data-component="tab-navigation" data-component-size="large" data-component-context="content">
<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: Compact Button Tab Navigation --> <!-- Component: Compact Button Tab Navigation -->
<section id="component-button-tab-navigation-compact"> <section id="component-button-tab-navigation-compact">
<p class="sg-preview-label">Component: Tasten-Navigation-schmal</p> <p class="sg-preview-label">Component: Tasten-Navigation-schmal</p>
styles/10-components-interactive-elements.css
+14
View File
@@ -155,6 +155,10 @@
background: var(--surface-tab-compact-background); background: var(--surface-tab-compact-background);
} }
.sg-tab-button-group[data-component-context="content"] {
background: var(--surface-tab-compact-background);
}
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button { .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button {
padding-inline: var(--layout-tab-navigation-large-padding-inline); padding-inline: var(--layout-tab-navigation-large-padding-inline);
} }
@@ -169,6 +173,16 @@
color: var(--text-tab-selected); color: var(--text-tab-selected);
} }
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] {
background: var(--surface-control-default);
color: var(--text-control-default);
}
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] {
background: var(--surface-tab-compact-unselected);
color: var(--text-control-default);
}
.sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] { .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] {
background: var(--surface-tab-compact-unselected); background: var(--surface-tab-compact-unselected);
color: var(--text-control-default); color: var(--text-control-default);