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

Add VSF Listen Übersicht Seite V2 layout scaffold

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 13:20:03 +02:00
parent fab59b8f89
commit 20bdb04c0e
4 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -69,6 +69,7 @@
<li><a href="./patterns/vsf-card-listen-seite.html">VSF Card Listen Seite</a></li>
<li><a href="./patterns/vsf-list-detailseite.html">VSF List Detailseite</a></li>
<li><a href="./patterns/vsf-listen-uebersicht-seite.html">VSF Listen Übersicht Seite</a></li>
<li><a href="./patterns/vsf-listen-uebersicht-seite-v2.html">VSF Listen Übersicht Seite V2</a></li>
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-mobile.html">VSF Card Listen Fundamentalanalyse Mobile</a></li>
<li><a href="./patterns/vsf-card-listen-fundamentalanalyse-drawer.html">VSF Card Listen Fundamentalanalyse Drawer</a></li>
</ul>
patterns/vsf-listen-uebersicht-seite-v2.html
+27
View File
@@ -0,0 +1,27 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – VSF Listen Übersicht Seite V2</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Layout – VSF Listen Übersicht Seite V2</h1>
<section class="sg-vsf-list-overview-page-v2" aria-label="VSF Listen Übersicht Seite V2">
<header class="sg-vsf-list-overview-page-v2__header" aria-label="Header-Bereich"></header>
<div class="sg-vsf-list-overview-page-v2__toolbar" aria-label="Toolbar-Bereich"></div>
<div class="sg-vsf-list-overview-page-v2__intro" aria-label="Intro-Bereich"></div>
<main class="sg-vsf-list-overview-page-v2__content" aria-label="Inhaltsbereich">
<section class="sg-vsf-list-overview-page-v2__primary" aria-label="Primärer Bereich"></section>
<aside class="sg-vsf-list-overview-page-v2__secondary" aria-label="Sekundärer Bereich"></aside>
</main>
</section>
</body>
</html>
styleguide.css
+1
View File
@@ -12,6 +12,7 @@
@import "./styles/27-patterns-delete-confirmation.css";
@import "./styles/30-layouts-card-list-page.css";
@import "./styles/33-layouts-vsf-list-detailseite.css";
@import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
@import "./styles/31-patterns-text-layouts.css";
@import "./styles/32-patterns-card-group-keyboard-nav.css";
@import "./styles/40-components-cards.css";
styles/34-layouts-vsf-listen-uebersicht-seite-v2.css
+43
View File
@@ -0,0 +1,43 @@
/* ========================================================= */
/* Layouts: VSF Listen Übersicht Seite V2 */
/* ========================================================= */
.sg-vsf-list-overview-page-v2 {
display: flex;
flex-direction: column;
}
.sg-vsf-list-overview-page-v2 > * + * {
margin-top: var(--spacing-large);
}
.sg-vsf-list-overview-page-v2__content {
display: flex;
gap: var(--spacing-small);
width: 100%;
}
.sg-vsf-list-overview-page-v2__primary {
width: 70%;
min-width: 0;
}
.sg-vsf-list-overview-page-v2__secondary {
width: 30%;
min-width: 0;
}
@media (max-width: 767px) {
.sg-vsf-list-overview-page-v2__content {
display: block;
}
.sg-vsf-list-overview-page-v2__primary,
.sg-vsf-list-overview-page-v2__secondary {
width: 100%;
}
.sg-vsf-list-overview-page-v2__secondary {
margin-top: var(--spacing-large);
}
}