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

Restore card overflow default and introduce reusable overlay-host card variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 17:28:45 +02:00
parent 299932af77
commit da949403e8
3 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-fundamentalanalyse-drawer.html
+14 -14
View File
@@ -57,8 +57,8 @@
<button id="vsf-business-model-toggle" class="sg-interaction-element sg-button" type="button" aria-controls="vsf-business-model-text" aria-expanded="false">Geschäftsmodell anzeigen</button>
</footer>
</article>
<article class="sg-card sg-card--content-card sg-vsf-drawer-controls-card" data-component="content-card" aria-label="Fundamentalanalyse Steuerung">
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray sg-vsf-drawer-controls-row" data-component-part="card-body">
<article class="sg-card sg-card--content-card sg-card--overlay-host sg-inline-controls-card" data-component="content-card" aria-label="Fundamentalanalyse Steuerung">
<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray sg-inline-controls-row" data-component-part="card-body">
<button class="sg-mode-toggle" type="button" data-active="relative" aria-label="Modus Schieber global: relativ aktiv" data-component="mode-toggle" data-component-context="drawer-controls">
<span class="sg-mode-toggle__label" data-component-part="toggle-label">absolut</span>
<span class="sg-mode-toggle__switch" aria-hidden="true" data-component-part="toggle-track">
@@ -82,8 +82,8 @@
</div>
</div>
</article>
<div class="sg-transparent-card sg-vsf-fundamental-analysis-intro" data-component="transparent-card">
<h2 class="sg-heading-h2 sg-vsf-fundamental-analysis-heading">Fundamentalanalyse vom 12.5.2026</h2>
<div class="sg-transparent-card sg-analysis-intro-block" data-component="transparent-card">
<h2 class="sg-heading-h2 sg-text-on-dark">Fundamentalanalyse vom 12.5.2026</h2>
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--full-width" data-pattern-part="text-block-full-width">
Nächste Quartalszahlen/Fundamentalanalyse: nicht bekannt
</p>
@@ -104,7 +104,7 @@
<div class="sg-content-block-card-group__panels">
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-1" role="tabpanel" aria-labelledby="vsf-fundamental-tab-1">
<div class="sg-content-cards-group" data-pattern="content-cards-group" aria-label="Card Gruppe Gesamtbewertung">
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Gesamtbewertung">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Gesamtbewertung">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Gesamtbewertung <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
@@ -133,7 +133,7 @@
</p>
</div>
</article>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Unterschied zur letzten Analyse vom 1.5.2026">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Unterschied zur letzten Analyse vom 1.5.2026">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Unterschied zur letzten Analyse vom 1.5.2026 <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Die Investment-Story hat sich insgesamt verbessert, da sich die strukturellen Wachstumstreiber konkretisiert und die Profitabilität deutlich beschleunigt hat.</p>
@@ -144,7 +144,7 @@
</div>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-2" role="tabpanel" aria-labelledby="vsf-fundamental-tab-2" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Marktbewertung">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Marktbewertung">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Marktbewertung <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
@@ -192,7 +192,7 @@
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-3" role="tabpanel" aria-labelledby="vsf-fundamental-tab-3" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Wachstum">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Wachstum">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Wachstum <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
@@ -237,7 +237,7 @@
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-4" role="tabpanel" aria-labelledby="vsf-fundamental-tab-4" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Profitabilität">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Profitabilität">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Profitabilität <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
@@ -282,7 +282,7 @@
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-5" role="tabpanel" aria-labelledby="vsf-fundamental-tab-5" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Stabilität">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Stabilität">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Stabilität <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--gray" data-component-part="card-body">
<div class="sg-score-bar-list sg-score-bar-list--single-score" data-component="score-bar-list">
@@ -327,7 +327,7 @@
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-6" role="tabpanel" aria-labelledby="vsf-fundamental-tab-6" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="TAM">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="TAM">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">TAM <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body">
<p class="sg-body">Der Gesamtmarkt für Datenspeicher wird bis zum Jahr 2030 auf rund 200 Milliarden Dollar geschätzt. Dieses Wachstum wird durch exponentiell steigende Datenmengen angetrieben, wobei Technologien wie Cloud-Computing und das Training künstlicher Intelligenz zentrale Treiber mit hohen jährlichen Zuwachsraten sind. Western Digital adressiert primär den NAND-Flash-Markt, in dem es mit einem Marktanteil von 15 bis 18 Prozent hinter dem Marktführer liegt.</p>
@@ -336,19 +336,19 @@
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-7" role="tabpanel" aria-labelledby="vsf-fundamental-tab-7" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Zyklus">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Zyklus">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Zyklus <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Zyklus.</p></div>
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-8" role="tabpanel" aria-labelledby="vsf-fundamental-tab-8" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Moat">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Moat">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Moat <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Moat.</p></div>
</article>
</div>
<div class="sg-content-block-card-group__panel" id="vsf-fundamental-tab-panel-9" role="tabpanel" aria-labelledby="vsf-fundamental-tab-9" hidden>
<article class="sg-card sg-card--content-card" data-component="content-card" aria-label="Technologie">
<article class="sg-card sg-card--content-card sg-card--overlay-host" data-component="content-card" aria-label="Technologie">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"><div class="sg-strong">Technologie <span class="sg-help-icon-wrap" data-open="false" data-align="left" data-component="help-icon"><button class="sg-help-icon" type="button" aria-expanded="false" aria-label="Hilfetext anzeigen" data-component-part="help-trigger">?</button><span class="sg-help-icon-panel sg-table-label" role="tooltip" data-component-part="help-panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.</span></span></div></div>
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body"><p class="sg-body">Inhalt Technologie.</p></div>
</article>
semantic-tokens-components.html
+1
View File
@@ -39,6 +39,7 @@
<tr><td>layout-card-body-text-margin</td><td>0</td><td>Textabstand im Card-Body; verhindert zusätzliche Default-Margins.</td></tr>
</tbody>
</table>
<p class="sg-table-label">Verhaltensregel: Für Cards mit ausklappenden Overlays (z. B. Help-Panel, Sandwich-Menü, Pulldown) ist die Komponenten-Variante <code>sg-card--overlay-host</code> zu verwenden, damit Overlays nicht abgeschnitten werden.</p>
<h3 class="sg-sub-heading sg-section-h3">Group Card</h3>
<table class="sg-foundation-table sg-table-label">
styleguide.css
+10 -10
View File
@@ -2139,11 +2139,11 @@ section + section {
color: var(--text-portal-header-tab);
}
.sg-vsf-drawer-controls-card {
.sg-inline-controls-card {
--surface-card-body: var(--surface-card-segment-neutral);
}
.sg-card-segment.sg-vsf-drawer-controls-row {
.sg-card-segment.sg-inline-controls-row {
flex-direction: row;
align-items: center;
justify-content: space-between;
@@ -2156,21 +2156,17 @@ section + section {
margin: 0;
}
.sg-vsf-fundamental-analysis-heading {
color: var(--text-vsf-drawer-object-card-body);
}
.sg-vsf-fundamental-analysis-intro {
.sg-analysis-intro-block {
display: flex;
flex-direction: column;
gap: var(--spacing-small);
}
.sg-vsf-fundamental-analysis-intro .sg-heading-h2 {
.sg-analysis-intro-block .sg-heading-h2 {
margin: 0;
}
.sg-vsf-fundamental-analysis-intro .sg-text-layout-pattern__sample {
.sg-analysis-intro-block .sg-text-layout-pattern__sample {
margin: 0;
color: var(--text-vsf-drawer-object-card-body);
}
@@ -2284,7 +2280,7 @@ section + section {
--layout-card-body-text-margin: 0;
display: flex;
flex-direction: column;
overflow: visible;
overflow: hidden;
width: 100%;
box-sizing: border-box;
border: var(--border-none);
@@ -2293,6 +2289,10 @@ section + section {
background: var(--surface-card);
}
.sg-card.sg-card--overlay-host {
overflow: visible;
}
.sg-card > .sg-card-segment:first-child {
border-top-left-radius: var(--radius-card);
border-top-right-radius: var(--radius-card);