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

Move sandwich menu into blue header and right-align mode toggle in controls card

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 17:29:40 +02:00
parent da949403e8
commit 4cabfe2daf
2 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+15 -15
View File
@@ -24,8 +24,22 @@
</div>
<article class="sg-card sg-vsf-drawer-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-pattern-part="card-header">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-inline-header-row" data-pattern-part="card-header">
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
<div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="small">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Objekt-Menü öffnen" data-component-part="sandwich-trigger">
<span class="sg-sandwich-button__icon" aria-hidden="true">
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
</div>
</div>
</header>
<div class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__content" data-pattern-part="card-body">
<div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
@@ -66,20 +80,6 @@
</span>
<span class="sg-mode-toggle__label" data-component-part="toggle-label">relativ</span>
</button>
<div class="sg-sandwich-menu-wrap" data-open="false" data-component="sandwich-menu" data-component-size="small">
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Objekt-Menü öffnen" data-component-part="sandwich-trigger">
<span class="sg-sandwich-button__icon" aria-hidden="true">
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
<span class="sg-sandwich-button__line"></span>
</span>
</button>
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Objekt-Menü" data-component-part="sandwich-panel">
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
<a class="sg-sandwich-menu-link sg-body" href="#">Menüpunkt</a>
</div>
</div>
</div>
</article>
<div class="sg-transparent-card sg-analysis-intro-block" data-component="transparent-card">
styleguide.css
+8 -1
View File
@@ -2143,11 +2143,18 @@ section + section {
--surface-card-body: var(--surface-card-segment-neutral);
}
.sg-card-segment.sg-inline-controls-row {
.sg-card-segment.sg-inline-header-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--spacing-small);
}
.sg-card-segment.sg-inline-controls-row {
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: var(--spacing-small);
flex-wrap: nowrap;
}