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

Rebuild VSF drawer card on base card pattern without object-card layout rules

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 11:59:23 +02:00
parent 87556f8188
commit 2a58f9228b
2 changed files with 15 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-seite.html
+4 -4
View File
@@ -683,11 +683,11 @@
</div> </div>
</div> </div>
<article class="sg-card sg-object-card sg-vsf-drawer-object-card" data-component="card" data-pattern="card" aria-label="Card Western Digital Corporation"> <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 sg-object-card__header" data-pattern-part="card-header"> <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-pattern-part="card-header">
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2> <h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
</header> </header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="card-body"> <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"> <div class="sg-text-layout-pattern__sample sg-text-layout-pattern__two-column" data-pattern-part="text-block-two-column">
<p class="sg-body sg-text-layout-pattern__column"> <p class="sg-body sg-text-layout-pattern__column">
Ticker: WDC<br> Ticker: WDC<br>
@@ -701,7 +701,7 @@
</p> </p>
</div> </div>
</div> </div>
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="card-actions"> <footer class="sg-card-segment sg-card-segment--body sg-vsf-drawer-card__actions-segment" data-pattern-part="card-actions">
<button class="sg-interaction-element sg-button" type="button">Geschäftsmodell</button> <button class="sg-interaction-element sg-button" type="button">Geschäftsmodell</button>
</footer> </footer>
</article> </article>
styleguide.css
+11 -13
View File
@@ -2085,13 +2085,12 @@ section + section {
width: 100%; width: 100%;
} }
.sg-vsf-drawer-object-card { .sg-vsf-drawer-card {
--surface-card-header-primary: var(--surface-vsf-drawer-object-card-header); --surface-card-header-primary: var(--surface-vsf-drawer-object-card-header);
--surface-card: var(--surface-vsf-drawer-object-card-body); --surface-card: var(--surface-vsf-drawer-object-card-body);
--surface-object-card-lower-segment: var(--surface-vsf-drawer-object-card-body); --surface-card-body: var(--surface-vsf-drawer-object-card-body);
--text-card-header: var(--text-vsf-drawer-object-card-heading); --text-card-header: var(--text-vsf-drawer-object-card-heading);
--text-card-body: var(--text-vsf-drawer-object-card-body); --text-card-body: var(--text-vsf-drawer-object-card-body);
--layout-object-card-height: auto;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: none; max-width: none;
@@ -2099,27 +2098,26 @@ section + section {
height: auto; height: auto;
} }
.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__content { .sg-vsf-drawer-card__content {
color: var(--text-vsf-drawer-object-card-body);
flex: 0 0 auto;
}
.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column,
.sg-vsf-drawer-object-card .sg-text-layout-pattern__column {
color: var(--text-vsf-drawer-object-card-body); color: var(--text-vsf-drawer-object-card-body);
} }
.sg-vsf-drawer-object-card .sg-text-layout-pattern__two-column { .sg-vsf-drawer-card .sg-text-layout-pattern__two-column,
.sg-vsf-drawer-card .sg-text-layout-pattern__column {
color: var(--text-vsf-drawer-object-card-body);
}
.sg-vsf-drawer-card .sg-text-layout-pattern__two-column {
gap: var(--layout-vsf-drawer-object-card-column-gap); gap: var(--layout-vsf-drawer-object-card-column-gap);
} }
.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__actions-segment { .sg-vsf-drawer-card__actions-segment {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
background: var(--surface-vsf-drawer-object-card-body); background: var(--surface-vsf-drawer-object-card-body);
} }
.sg-vsf-drawer-object-card .sg-card-segment--body.sg-object-card__actions-segment .sg-interaction-element.sg-button { .sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button {
height: auto; height: auto;
} }