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-07 13:05:35 +02:00
parent 6b2f9d7966
commit 2040314195
6 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/patterns/public-page-patterns.html
+4 -4
View File
@@ -152,11 +152,11 @@
</div>
</div>
<p class="sg-preview-label">pattern: CTA box left full width</p>
<p class="sg-preview-label">pattern: CTA box left wide right</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--full-width" data-component="call-to-action-card" data-component-variant="full-width" aria-label="Call to action Card full width">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--wide" data-component="call-to-action-card" data-component-variant="wide" aria-label="Call to action Card wide right">
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
<p class="sg-body sg-call-to-action-card__text">
Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
@@ -212,11 +212,11 @@
</div>
</div>
<p class="sg-preview-label">pattern: CTA small button box right full width</p>
<p class="sg-preview-label">pattern: CTA small button box right wide</p>
<div class="sg-preview-area">
<div class="sg-content-group-box" data-component="content-group-box">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--full-width sg-call-to-action-card--align-right" data-component="call-to-action-card" data-component-variant="full-width" aria-label="CTA small button box right full width">
<article class="sg-card sg-card--content-card sg-card--content-card-dark sg-card--call-to-action-card sg-card--call-to-action-card--wide sg-call-to-action-card--align-right" data-component="call-to-action-card" data-component-variant="wide" aria-label="CTA small button box right wide">
<div class="sg-card-segment sg-card-segment--body sg-call-to-action-card__body" data-component-part="card-body">
<p class="sg-body sg-call-to-action-card__text">
Jetzt passende Inhalte entdecken und direkt mit dem nächsten Schritt starten.
docs/styleguide/semantic-tokens-components.html
+1 -1
View File
@@ -122,7 +122,7 @@
<tbody>
<tr><td>surface-call-to-action-card</td><td>surface-card-group</td><td>Fläche der Call-to-action-Card als dunkle Content-Card-Variante.</td></tr>
<tr><td>text-call-to-action-card</td><td>color-font-light</td><td>Textfarbe in der Call-to-action-Card.</td></tr>
<tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5); dimension-public-content-width in der Fullwidth- und Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; die Fullwidth- und Drei-Spalten-Varianten nutzen die volle Content-Breite.</td></tr>
<tr><td>layout-call-to-action-card-width</td><td>calc(var(--dimension-public-content-width) * 0.5); calc(var(--dimension-public-content-width) * 0.7) in der Wide-Variante; dimension-public-content-width in der Drei-Spalten-Variante</td><td>Breite der Card im Page-Layout; die Wide-Variante nutzt 70&nbsp;% der Content-Breite und ist rechtsbündig ausgerichtet, die Drei-Spalten-Variante nutzt die volle Content-Breite.</td></tr>
<tr><td>layout-call-to-action-card-content-columns</td><td>minmax(0, 1fr) max-content; minmax(0, 1fr) 30% max-content in der Drei-Spalten-Variante</td><td>Zweispaltiges Standardlayout oder dreispaltiges Layout mit flexibler Textspalte, 30% Formularfeldspalte und Inhaltsbreite der Aktion; auf kleinen Viewports einspaltig.</td></tr>
<tr><td>layout-call-to-action-card-content-gap</td><td>spacing-large</td><td>Abstand zwischen Text und Button.</td></tr>
</tbody>
docs/styleguide/styles/44-components-public-page-components.css
+7 -2
View File
@@ -53,8 +53,9 @@
--layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
}
.sg-card--call-to-action-card--full-width {
--layout-call-to-action-card-width: var(--dimension-public-content-width);
.sg-card--call-to-action-card--wide {
--layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7);
margin-left: auto;
}
.sg-card--call-to-action-card .sg-card-segment--body {
@@ -116,6 +117,10 @@
--layout-call-to-action-card-content-columns: minmax(0, 1fr);
}
.sg-card--call-to-action-card--wide {
width: 100%;
}
.sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
justify-content: flex-end;
}
public/assets/styleguide.upstream.css
+7 -2
View File
@@ -4687,8 +4687,9 @@ main {
--layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
}
.sg-card--call-to-action-card--full-width {
--layout-call-to-action-card-width: var(--dimension-public-content-width);
.sg-card--call-to-action-card--wide {
--layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7);
margin-left: auto;
}
.sg-card--call-to-action-card .sg-card-segment--body {
@@ -4750,6 +4751,10 @@ main {
--layout-call-to-action-card-content-columns: minmax(0, 1fr);
}
.sg-card--call-to-action-card--wide {
width: 100%;
}
.sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
justify-content: flex-end;
}
public/assets/styleguide.upstream.meta.json
+2 -2
View File
@@ -1,7 +1,7 @@
{
"styleguideVersion": "2026.05.18.1",
"styleguideCommit": "6a9b3b1",
"syncedAtUtc": "2026-08-07T10:56:44Z",
"styleguideCommit": "580ded6",
"syncedAtUtc": "2026-08-07T11:05:35Z",
"sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide",
"mirroredDocsPath": "docs/styleguide"
}
public/assets/styles.css
+7 -2
View File
@@ -4687,8 +4687,9 @@ main {
--layout-call-to-action-card-content-columns: minmax(0, 1fr) 30% max-content;
}
.sg-card--call-to-action-card--full-width {
--layout-call-to-action-card-width: var(--dimension-public-content-width);
.sg-card--call-to-action-card--wide {
--layout-call-to-action-card-width: calc(var(--dimension-public-content-width) * 0.7);
margin-left: auto;
}
.sg-card--call-to-action-card .sg-card-segment--body {
@@ -4750,6 +4751,10 @@ main {
--layout-call-to-action-card-content-columns: minmax(0, 1fr);
}
.sg-card--call-to-action-card--wide {
width: 100%;
}
.sg-card--call-to-action-card--three-column .sg-call-to-action-card__action {
justify-content: flex-end;
}