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

Remove left navigation wrapper card

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-04 17:45:17 +02:00
parent 72b7a93f23
commit f76f4b4322
2 changed files with 24 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/left-navigation.html
+23 -25
View File
@@ -16,34 +16,32 @@
Die linke Navigationsspalte nutzt auf Desktop 15% der verfügbaren Breite. Die zweite Group Card ist leer und dient in der Demo nur dazu, den restlichen Bildschirm zu füllen. Die linke Navigationsspalte nutzt auf Desktop 15% der verfügbaren Breite. Die zweite Group Card ist leer und dient in der Demo nur dazu, den restlichen Bildschirm zu füllen.
</p> </p>
<div class="sg-left-navigation-pattern__surface"> <div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">
<div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo"> <aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Linke Navigation">
<aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Linke Navigation"> <div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">
<div class="sg-group-card__header-row sg-left-navigation-pattern__header-row"> <h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>
<button <button
class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle" class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle"
type="button" type="button"
data-left-navigation-toggle data-left-navigation-toggle
aria-expanded="true" aria-expanded="true"
aria-controls="left-navigation-menu" aria-controls="left-navigation-menu"
> >
Ausblenden Ausblenden
</button> </button>
</div> </div>
<nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items"> <nav class="sg-tab-button-group" id="left-navigation-menu" 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="true" data-component-part="tab-button">Übersicht</button> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Übersicht</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Unternehmen</button> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Unternehmen</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kennzahlen</button> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kennzahlen</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Nachrichten</button> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Nachrichten</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button> <button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button>
</nav> </nav>
</aside> </aside>
<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section> <section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>
</div>
</div> </div>
</section> </section>
styles/29-patterns-left-navigation.css
+1 -9
View File
@@ -8,14 +8,6 @@
gap: var(--spacing-small); gap: var(--spacing-small);
} }
.sg-left-navigation-pattern__surface {
width: 100%;
box-sizing: border-box;
padding: var(--spacing-large);
border-radius: var(--radius-card);
background: var(--color-light-grey);
}
.sg-left-navigation-pattern__layout { .sg-left-navigation-pattern__layout {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
@@ -41,7 +33,7 @@
width: 15vw; width: 15vw;
max-width: 15vw; max-width: 15vw;
padding: var(--spacing-small); padding: var(--spacing-small);
margin: var(--spacing-small) var(--spacing-large) var(--spacing-small) var(--spacing-small); margin: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-small);
} }
.sg-left-navigation-pattern__group-card--content { .sg-left-navigation-pattern__group-card--content {