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

Align list-card form fields with interactive-elements styling

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-27 16:39:58 +02:00
parent 86ada4cf60
commit d95150c78a
1 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-card.html
+20 -1
View File
@@ -5,6 +5,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Layout VSF List Card</title> <title>Styleguide – Layout VSF List Card</title>
<link rel="stylesheet" href="../styleguide.css"> <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> </head>
<body> <body>
@@ -26,7 +45,7 @@
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
<span class="sg-label">Listentyp</span> <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"> <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 Listentyp
</button> </button>
<span class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel"> <span class="sg-pulldown-panel" aria-label="Geoeffnetes Pulldown Listentyp" data-component-part="pulldown-panel">