Align list-card form fields with interactive-elements styling

This commit is contained in:
2026-05-27 16:39:58 +02:00
parent 86ada4cf60
commit d95150c78a
+20 -1
View File
@@ -5,6 +5,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide Layout VSF List Card</title>
<link rel="stylesheet" href="../styleguide.css">
<style>
#layout-vsf-list-card .sg-form-sections-card__field-group .sg-labeled-input-row {
width: 100%;
max-width: none;
}
#layout-vsf-list-card .sg-labeled-input-row .sg-pulldown,
#layout-vsf-list-card .sg-labeled-input-row .sg-pulldown-demo {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
#layout-vsf-list-card .sg-pulldown-demo__trigger {
width: 100%;
min-width: 0;
max-width: var(--layout-input-field-max-width);
}
</style>
</head>
<body>
@@ -26,7 +45,7 @@
<label class="sg-labeled-input-row">
<span class="sg-label">Listentyp</span>
<span class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="single" data-component="pulldown" data-component-context="form" data-component-state="inactive-selectable">
<button class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown Listentyp" data-component-part="pulldown-trigger" data-label-base="Listentyp">
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-form-inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Pulldown ohne aktive Auswahl" data-component-part="pulldown-trigger" data-label-base="Listentyp">
Listentyp
</button>
<span class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">