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

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-08-09 08:39:36 +02:00
parent 2040314195
commit 16f9bae7ce
4 changed files with 37 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/email-styleguide.css
+22 -1
View File
@@ -1,9 +1,18 @@
@import "./styles/01-foundations.css"; @import "./styles/01-foundations.css";
/* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */ /* E-Mail-Komponenten: separater Einstiegspunkt, nicht Teil des Portal-CSS */
.sg-email-template-page {
background: var(--surface-object-card-lower-segment);
}
.sg-email-template-page .sg-main-heading,
.sg-email-template-page .sg-preview-label {
color: var(--text-card-body);
}
.sg-email-preview-viewport { .sg-email-preview-viewport {
width: var(--dimension-email-body-max-width); width: var(--dimension-email-body-max-width);
background: var(--surface-portal-background); background: var(--surface-object-card-lower-segment);
} }
.sg-email-preview-body { .sg-email-preview-body {
@@ -40,6 +49,10 @@
margin-inline: calc(-1 * var(--card-segment-padding-horizontal)); margin-inline: calc(-1 * var(--card-segment-padding-horizontal));
} }
.sg-email-footer-card {
margin-top: calc(var(--spacing-large) * 2);
}
.sg-email-card .sg-card-segment--body > .sg-body { .sg-email-card .sg-card-segment--body > .sg-body {
color: var(--text-card-body); color: var(--text-card-body);
} }
@@ -47,3 +60,11 @@
.sg-email-card-action-segment { .sg-email-card-action-segment {
align-items: flex-end; align-items: flex-end;
} }
.sg-email-template > .sg-heading-h1 {
color: var(--text-card-body);
}
.sg-email-template > .sg-email-template__intro {
color: var(--text-card-body);
}
docs/styleguide/index.html
+1 -1
View File
@@ -97,7 +97,7 @@
<h3 class="sg-sub-heading sg-section-h3">Patterns</h3> <h3 class="sg-sub-heading sg-section-h3">Patterns</h3>
<ul class="sg-index-list"> <ul class="sg-index-list">
<li><a href="./patterns/email-double-opt-in-bestaetigung.html">Double-Opt-in-Bestätigung</a></li> <li><a href="./patterns/general-email-template.html">General E-Mail-Template</a></li>
</ul> </ul>
<h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Templates</h3> <h3 class="sg-sub-heading sg-section-h3">Valuestockfinder Templates</h3>
docs/styleguide/patterns/email-double-opt-in-bestaetigung.html → docs/styleguide/patterns/general-email-template.html
+12 -11
View File
@@ -3,16 +3,16 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern E-Mail Double-Opt-in-Bestätigung</title> <title>Styleguide – General E-Mail-Template</title>
<link rel="stylesheet" href="../styleguide.css"> <link rel="stylesheet" href="../styleguide.css">
<link rel="stylesheet" href="../email-styleguide.css"> <link rel="stylesheet" href="../email-styleguide.css">
</head> </head>
<body> <body class="sg-email-template-page">
<h1 class="sg-main-heading">Pattern – E-Mail Double-Opt-in-Bestätigung</h1> <h1 class="sg-main-heading">General E-Mail-Template</h1>
<section id="pattern-email-double-opt-in-bestaetigung"> <section id="pattern-general-email-template">
<p class="sg-preview-label">Pattern: E-Mail Double-Opt-in-Bestätigung</p> <p class="sg-preview-label">General E-Mail-Template</p>
<div class="sg-preview-area"> <div class="sg-preview-area">
<div class="sg-email-preview-viewport"> <div class="sg-email-preview-viewport">
@@ -30,25 +30,26 @@
</header> </header>
<article <article
class="sg-transparent-card sg-page-layout-app__heading-block" class="sg-transparent-card sg-page-layout-app__heading-block sg-email-template"
aria-label="E-Mail Inhalt" aria-label="E-Mail Inhalt"
data-pattern="email-double-opt-in-bestaetigung" data-pattern="general-email-template"
data-email-subject="Bitte bestätige deine Anmeldung" data-email-subject="Bitte bestätige deine Anmeldung"
data-email-preheader="Bestätige deine E-Mail-Adresse, um Updates von ValueStockFinder zu erhalten." data-email-preheader="Bestätige deine E-Mail-Adresse, um Updates von ValueStockFinder zu erhalten."
> >
<h1 class="sg-heading-h1 sg-text-on-dark">Fast geschafft</h1> <h1 class="sg-heading-h1">Fast geschafft</h1>
<p class="sg-body sg-email-template__intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Integer nec odio. Praesent libero.<br>Sed cursus ante dapibus diam.</p>
<article class="sg-card sg-email-card" data-component="card" data-pattern-part="confirmation-card"> <article class="sg-card sg-email-card" data-component="card" data-pattern-part="confirmation-card">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header"> <div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue" data-component-part="card-header">
<div class="sg-strong">Bitte bestätige deine Anmeldung</div> <div class="sg-strong">Bitte bestätige deine Anmeldung</div>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-component-part="card-body">
<p class="sg-body">Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.</p> <p class="sg-body">Bitte bestätige jetzt deine E-Mail-Adresse. Erst danach dürfen wir dir die gewünschten Informationen per E-Mail senden.</p>
<p class="sg-body">Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.</p> <p class="sg-body">Falls du dich nicht selbst angemeldet hast, musst du nichts weiter tun.</p>
</div> </div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-email-card-action-segment" data-component-part="card-action"> <div class="sg-card-segment sg-card-segment--body sg-card-segment--gray sg-email-card-action-segment" data-component-part="card-action">
<button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active"> <button class="sg-interaction-element sg-button sg-button--process" type="button" data-component="button" data-component-variant="process" data-component-state="active">
Anmeldung bestätigen Anmeldung bestätigen
</button> </button>
@@ -56,7 +57,7 @@
</article> </article>
<article <article
class="sg-card sg-card--content-card sg-card--footer-card sg-email-footer-card" class="sg-card sg-card--content-card sg-card--content-card-dark sg-email-footer-card"
data-component="content-card" data-component="content-card"
data-component-context="email-footer" data-component-context="email-footer"
data-component-variant="not-subscribed" data-component-variant="not-subscribed"
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{ {
"styleguideVersion": "2026.05.18.1", "styleguideVersion": "2026.05.18.1",
"styleguideCommit": "580ded6", "styleguideCommit": "6e6d49f",
"syncedAtUtc": "2026-08-07T11:05:35Z", "syncedAtUtc": "2026-08-09T06:39:36Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide" "mirroredDocsPath": "docs/styleguide"
} }