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

Align VSF overview overlay cards to group-card width and height

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 12:14:45 +02:00
parent e88baa8bd4
commit bf41a4f8bf
2 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-listen-uebersicht-seite.html
+2 -2
View File
@@ -109,7 +109,7 @@
<div id="layout-vsf-list-card"> <div id="layout-vsf-list-card">
<div class="sg-object-card-grid" aria-label="VSF Listen Übersicht Karten"> <div class="sg-object-card-grid" aria-label="VSF Listen Übersicht Karten">
<div class="sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-object-card" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card"> <div class="sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card__overlay-item" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
<article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card"> <article class="sg-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>
@@ -228,7 +228,7 @@
</article> </article>
</div> </div>
<div class="sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-object-card" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card"> <div class="sg-delete-confirmation-pattern sg-delete-confirmation-pattern__stage sg-vsf-list-card__overlay-item" data-pattern="overlay-card" data-dialog-open="false" aria-label="VSF List Card Layout List Card">
<article class="sg-card sg-delete-confirmation-pattern__target" data-pattern="object-group-card" aria-label="List Card"> <article class="sg-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>
styles/26-patterns-vsf-list-card.css
+19
View File
@@ -14,3 +14,22 @@
#layout-vsf-list-card [data-pattern="overlay-card"] { #layout-vsf-list-card [data-pattern="overlay-card"] {
--layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width); --layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width);
} }
#layout-vsf-list-card .sg-vsf-list-card__overlay-item {
display: flex;
flex-direction: column;
flex: 1 1 var(--layout-object-group-card-min-width);
min-width: var(--layout-object-group-card-min-width);
max-width: var(--layout-object-group-card-max-width);
height: var(--layout-object-card-height);
}
@media (max-width: 767px) {
#layout-vsf-list-card .sg-vsf-list-card__overlay-item {
flex-basis: 100%;
width: 100%;
min-width: 0;
max-width: none;
height: var(--layout-object-card-mobile-height);
}
}