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

Fix VSF drawer text columns to exact left-right screenshot mapping

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-21 11:38:16 +02:00
parent c4e14396fc
commit fe2982a0d5
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-card-listen-seite.html
+12 -8
View File
@@ -688,14 +688,18 @@
<h2 class="sg-heading-h2 sg-vsf-drawer-object-card__heading">Western Digital Corporation</h2>
</header>
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
<p class="sg-body sg-text-layout-pattern__sample sg-text-layout-pattern__sample--two-column sg-vsf-drawer-object-card__text" data-pattern-part="text-block-two-column">
Ticker: WDC
Region: Amerika
Sub-Region: Nordamerika
Land: Vereinigte Staaten von Amerika
ISIN: US9581021055
Industrie: Computer Hardware
</p>
<div class="sg-vsf-drawer-object-card__text-columns" data-pattern-part="text-block-two-column">
<p class="sg-body sg-vsf-drawer-object-card__text-column">
Ticker: WDC<br>
Region: Amerika<br>
Sub-Region: Nordamerika<br>
Land: Vereinigte Staaten von Amerika
</p>
<p class="sg-body sg-vsf-drawer-object-card__text-column">
ISIN: US9581021055<br>
Industrie: Computer Hardware
</p>
</div>
</div>
</article>
styleguide.css
+16
View File
@@ -2101,6 +2101,18 @@ section + section {
column-gap: var(--layout-vsf-drawer-object-card-column-gap);
}
.sg-vsf-drawer-object-card__text-columns {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--layout-vsf-drawer-object-card-column-gap);
color: var(--text-vsf-drawer-object-card-body);
}
.sg-vsf-drawer-object-card__text-column {
margin: 0;
color: var(--text-vsf-drawer-object-card-body);
}
.sg-vsf-drawer-object-card__heading {
color: var(--text-vsf-drawer-object-card-heading);
margin: 0;
@@ -2142,6 +2154,10 @@ section + section {
}
@media (max-width: 767px) {
.sg-vsf-drawer-object-card__text-columns {
grid-template-columns: 1fr;
}
.sg-text-layout-pattern__sample--sixty-width,
.sg-text-layout-pattern__sample--two-column {
width: 100%;