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
+9 -5
View File
@@ -688,15 +688,19 @@
<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="object-card-content"> <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"> <div class="sg-vsf-drawer-object-card__text-columns" data-pattern-part="text-block-two-column">
Ticker: WDC <p class="sg-body sg-vsf-drawer-object-card__text-column">
Region: Amerika Ticker: WDC<br>
Sub-Region: Nordamerika Region: Amerika<br>
Sub-Region: Nordamerika<br>
Land: Vereinigte Staaten von Amerika Land: Vereinigte Staaten von Amerika
ISIN: US9581021055 </p>
<p class="sg-body sg-vsf-drawer-object-card__text-column">
ISIN: US9581021055<br>
Industrie: Computer Hardware Industrie: Computer Hardware
</p> </p>
</div> </div>
</div>
</article> </article>
<div class="sg-navigation-card-layout"> <div class="sg-navigation-card-layout">
styleguide.css
+16
View File
@@ -2101,6 +2101,18 @@ section + section {
column-gap: var(--layout-vsf-drawer-object-card-column-gap); 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 { .sg-vsf-drawer-object-card__heading {
color: var(--text-vsf-drawer-object-card-heading); color: var(--text-vsf-drawer-object-card-heading);
margin: 0; margin: 0;
@@ -2142,6 +2154,10 @@ section + section {
} }
@media (max-width: 767px) { @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--sixty-width,
.sg-text-layout-pattern__sample--two-column { .sg-text-layout-pattern__sample--two-column {
width: 100%; width: 100%;