From 53baf0dfbf8dd782f4443d2a3c53dc2aab7e6185 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Thu, 24 Sep 2026 13:00:00 +0200 Subject: [PATCH] Sync styleguide 2026.05.18.2 --- docs/styleguide/patterns/options-row.html | 49 ++++++++++++++++++- .../styles/21-patterns-options-row.css | 30 ++++++++++-- public/assets/styleguide.upstream.css | 30 ++++++++++-- public/assets/styleguide.upstream.meta.json | 4 +- public/assets/styles.css | 30 ++++++++++-- 5 files changed, 125 insertions(+), 18 deletions(-) diff --git a/docs/styleguide/patterns/options-row.html b/docs/styleguide/patterns/options-row.html index 4a36238..b275985 100644 --- a/docs/styleguide/patterns/options-row.html +++ b/docs/styleguide/patterns/options-row.html @@ -17,7 +17,7 @@

- Mobile: rechte Optionen werden zum oberen Segment, linke Optionen zum unteren Segment; linke Optionen brechen innerhalb der verfügbaren Breite um. + Mobile: Pulldowns stehen mit maximal zwei Elementen pro Zeile; ein Suchfeld steht immer allein in einer 100-%-Zeile.

@@ -83,6 +83,20 @@
+
+ + +
+
    + +
+
+
+
+
+

Pattern: Options Row – Mobile-Fälle

+

+ Prüffälle: kein Pulldown, ein Pulldown, Suchfeld ohne Ergebniszähler sowie lange deutsche Beschriftung. +

+ +
+
+
+ + + + +
+
+
+ +
+
+
+ +
+
    + +
+
+
+
+
+
+

Pattern: Options row left only

diff --git a/docs/styleguide/styles/21-patterns-options-row.css b/docs/styleguide/styles/21-patterns-options-row.css index 0b8dce1..ffb4dba 100644 --- a/docs/styleguide/styles/21-patterns-options-row.css +++ b/docs/styleguide/styles/21-patterns-options-row.css @@ -91,19 +91,39 @@ .sg-options-row--left-only .sg-options-row__left { order: 0; + width: 100%; padding: 0; box-shadow: none; } - .sg-options-row__left > .sg-pulldown-demo, - .sg-options-row__left > .sg-input-single-line-wrap, - .sg-options-row__left > .sg-search-field-row { - flex: 1 1 calc(50% - var(--layout-options-row-group-gap)); + .sg-options-row__left > .sg-pulldown-demo { + flex: 1 1 100%; min-width: 0; } + .sg-options-row__left:has(> .sg-pulldown-demo ~ .sg-pulldown-demo) > .sg-pulldown-demo { + flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2)); + } + + .sg-options-row--left-only .sg-options-row__left > .sg-pulldown-demo { + flex-basis: 100%; + } + .sg-options-row__left > .sg-search-field-row { - flex: 0 0 auto; + flex: 0 0 100%; + width: 100%; + min-width: 0; + } + + .sg-options-row__left > .sg-search-field-row > .sg-search-field-input { + flex: 1 1 auto; + width: auto; + min-width: 0; + } + + .sg-options-row__left > .sg-search-field-row .sg-input-single-line { + width: 100%; + min-width: 0; } .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, diff --git a/public/assets/styleguide.upstream.css b/public/assets/styleguide.upstream.css index 9338753..b28ae12 100644 --- a/public/assets/styleguide.upstream.css +++ b/public/assets/styleguide.upstream.css @@ -2627,19 +2627,39 @@ section + section { .sg-options-row--left-only .sg-options-row__left { order: 0; + width: 100%; padding: 0; box-shadow: none; } - .sg-options-row__left > .sg-pulldown-demo, - .sg-options-row__left > .sg-input-single-line-wrap, - .sg-options-row__left > .sg-search-field-row { - flex: 1 1 calc(50% - var(--layout-options-row-group-gap)); + .sg-options-row__left > .sg-pulldown-demo { + flex: 1 1 100%; min-width: 0; } + .sg-options-row__left:has(> .sg-pulldown-demo ~ .sg-pulldown-demo) > .sg-pulldown-demo { + flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2)); + } + + .sg-options-row--left-only .sg-options-row__left > .sg-pulldown-demo { + flex-basis: 100%; + } + .sg-options-row__left > .sg-search-field-row { - flex: 0 0 auto; + flex: 0 0 100%; + width: 100%; + min-width: 0; + } + + .sg-options-row__left > .sg-search-field-row > .sg-search-field-input { + flex: 1 1 auto; + width: auto; + min-width: 0; + } + + .sg-options-row__left > .sg-search-field-row .sg-input-single-line { + width: 100%; + min-width: 0; } .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, diff --git a/public/assets/styleguide.upstream.meta.json b/public/assets/styleguide.upstream.meta.json index 8c9a926..b12d0d1 100644 --- a/public/assets/styleguide.upstream.meta.json +++ b/public/assets/styleguide.upstream.meta.json @@ -1,7 +1,7 @@ { "styleguideVersion": "2026.05.18.2", - "styleguideCommit": "08bf51e", - "syncedAtUtc": "2026-09-22T09:50:21Z", + "styleguideCommit": "519ed6b", + "syncedAtUtc": "2026-09-24T11:00:00Z", "sourceRepo": "/Users/mathias/Documents/Dokumente Chouchou/Codebases/Styleguide", "mirroredDocsPath": "docs/styleguide" } diff --git a/public/assets/styles.css b/public/assets/styles.css index 9338753..b28ae12 100644 --- a/public/assets/styles.css +++ b/public/assets/styles.css @@ -2627,19 +2627,39 @@ section + section { .sg-options-row--left-only .sg-options-row__left { order: 0; + width: 100%; padding: 0; box-shadow: none; } - .sg-options-row__left > .sg-pulldown-demo, - .sg-options-row__left > .sg-input-single-line-wrap, - .sg-options-row__left > .sg-search-field-row { - flex: 1 1 calc(50% - var(--layout-options-row-group-gap)); + .sg-options-row__left > .sg-pulldown-demo { + flex: 1 1 100%; min-width: 0; } + .sg-options-row__left:has(> .sg-pulldown-demo ~ .sg-pulldown-demo) > .sg-pulldown-demo { + flex-basis: calc(50% - (var(--layout-options-row-group-gap) / 2)); + } + + .sg-options-row--left-only .sg-options-row__left > .sg-pulldown-demo { + flex-basis: 100%; + } + .sg-options-row__left > .sg-search-field-row { - flex: 0 0 auto; + flex: 0 0 100%; + width: 100%; + min-width: 0; + } + + .sg-options-row__left > .sg-search-field-row > .sg-search-field-input { + flex: 1 1 auto; + width: auto; + min-width: 0; + } + + .sg-options-row__left > .sg-search-field-row .sg-input-single-line { + width: 100%; + min-width: 0; } .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line,