Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -90,7 +90,24 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
<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 = () => {
|
const updateObjectCardGridRowState = () => {
|
||||||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||||||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
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);
|
window.addEventListener('resize', updateObjectCardGridRowState);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -13,6 +13,10 @@
|
|||||||
height: var(--layout-object-group-card-height);
|
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) {
|
@media (max-width: 767px) {
|
||||||
.sg-object-card[data-pattern="object-group-card"] {
|
.sg-object-card[data-pattern="object-group-card"] {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@@ -2335,6 +2335,10 @@ section + section {
|
|||||||
height: var(--layout-object-group-card-height);
|
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) {
|
@media (max-width: 767px) {
|
||||||
.sg-object-card[data-pattern="object-group-card"] {
|
.sg-object-card[data-pattern="object-group-card"] {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"styleguideVersion": "2026.05.18.1",
|
"styleguideVersion": "2026.05.18.1",
|
||||||
"styleguideCommit": "5b2e0ff",
|
"styleguideCommit": "b989195",
|
||||||
"syncedAtUtc": "2026-06-12T06:53:40Z",
|
"syncedAtUtc": "2026-06-12T07:02:48Z",
|
||||||
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
|
||||||
"mirroredDocsPath": "docs/styleguide"
|
"mirroredDocsPath": "docs/styleguide"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2335,6 +2335,10 @@ section + section {
|
|||||||
height: var(--layout-object-group-card-height);
|
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) {
|
@media (max-width: 767px) {
|
||||||
.sg-object-card[data-pattern="object-group-card"] {
|
.sg-object-card[data-pattern="object-group-card"] {
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user