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

Refactor VSF overlay layout to token-based pattern cascade

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 09:38:18 +02:00
parent 31d923c3ca
commit b59ecd40e1
2 changed files with 5 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-card.html
+3 -3
View File
@@ -190,7 +190,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-vsf-list-card__content-grow" data-pattern-part="company-card-content"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p> <p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list"> <div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar"> <div class="sg-score-bar-item" data-component="score-bar">
@@ -229,7 +229,7 @@
</div> </div>
<h2 class="sg-sub-heading sg-section-h2">Layout 4: Liste löschen</h2> <h2 class="sg-sub-heading sg-section-h2">Layout 4: Liste löschen</h2>
<div class="sg-object-card-grid sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" aria-label="VSF List Card Layout Liste löschen"> <div class="sg-object-card-grid sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" aria-label="VSF List Card Layout Liste löschen">
<article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card"> <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header"> <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-group-card-header">
<div class="sg-strong">NAME DER LISTE</div> <div class="sg-strong">NAME DER LISTE</div>
@@ -271,7 +271,7 @@
</p> </p>
</div> </div>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-vsf-list-card__content-grow" data-pattern-part="company-card-content"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-object-card__content" data-pattern-part="company-card-content">
<p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p> <p class="sg-table-label sg-company-card__analysis-title">Median-Subscores:</p>
<div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list"> <div class="sg-score-bar-list sg-company-card__analysis-bars" aria-label="Fundamentalanalyse Score-Balken" data-component="score-bar-list">
<div class="sg-score-bar-item" data-component="score-bar"> <div class="sg-score-bar-item" data-component="score-bar">
styles/26-patterns-vsf-list-card.css
+2 -11
View File
@@ -15,15 +15,6 @@
margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0; margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
} }
#layout-vsf-list-card .sg-vsf-list-card__content-grow { #layout-vsf-list-card [data-pattern="overlay-card"] {
flex: var(--layout-object-card-content-grow) 1 auto; --layout-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
}
#layout-vsf-list-card .sg-object-card-grid.sg-delete-confirmation-pattern__stage {
display: block;
width: min(100%, var(--layout-object-group-card-max-width));
}
#layout-vsf-list-card .sg-object-card-grid.sg-delete-confirmation-pattern__stage > .sg-object-card {
width: 100%;
} }