Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -90,7 +90,24 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pattern-list-group-card-height-600">
|
||||
<p class="sg-preview-label">Pattern: List Group Card</p>
|
||||
<p class="sg-body sg-object-group-card__hint">Variante: List Group Card, identisch, nur die Höhe ist 600px.</p>
|
||||
<div class="sg-object-card-grid sg-list-group-card--height-600" aria-label="List Group Card Höhe 600px"></div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
const populateListGroupCardVariant = () => {
|
||||
const sourceGrid = document.querySelector('#pattern-object-group-card .sg-object-card-grid');
|
||||
const variantGrid = document.querySelector('#pattern-list-group-card-height-600 .sg-object-card-grid');
|
||||
|
||||
if (!sourceGrid || !variantGrid || variantGrid.children.length > 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
variantGrid.innerHTML = sourceGrid.innerHTML;
|
||||
};
|
||||
|
||||
const updateObjectCardGridRowState = () => {
|
||||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||||
@@ -124,7 +141,10 @@
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('load', updateObjectCardGridRowState);
|
||||
window.addEventListener('load', () => {
|
||||
populateListGroupCardVariant();
|
||||
updateObjectCardGridRowState();
|
||||
});
|
||||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||
</script>
|
||||
|
||||
|
||||
@@ -13,6 +13,10 @@
|
||||
height: var(--layout-object-group-card-height);
|
||||
}
|
||||
|
||||
.sg-list-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
|
||||
height: var(--layout-object-card-height);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-object-card[data-pattern="object-group-card"] {
|
||||
height: auto;
|
||||
|
||||
@@ -2335,6 +2335,10 @@ section + section {
|
||||
height: var(--layout-object-group-card-height);
|
||||
}
|
||||
|
||||
.sg-list-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
|
||||
height: var(--layout-object-card-height);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-object-card[data-pattern="object-group-card"] {
|
||||
height: auto;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"styleguideVersion": "2026.05.18.1",
|
||||
"styleguideCommit": "5b2e0ff",
|
||||
"syncedAtUtc": "2026-06-12T06:53:40Z",
|
||||
"styleguideCommit": "b989195",
|
||||
"syncedAtUtc": "2026-06-12T07:02:48Z",
|
||||
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
||||
"mirroredDocsPath": "docs/styleguide"
|
||||
}
|
||||
|
||||
@@ -2335,6 +2335,10 @@ section + section {
|
||||
height: var(--layout-object-group-card-height);
|
||||
}
|
||||
|
||||
.sg-list-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
|
||||
height: var(--layout-object-card-height);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sg-object-card[data-pattern="object-group-card"] {
|
||||
height: auto;
|
||||
|
||||
Reference in New Issue
Block a user