diff --git a/patterns/options-row.html b/patterns/options-row.html index 4a36238..b275985 100644 --- a/patterns/options-row.html +++ b/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/styles/21-patterns-options-row.css b/styles/21-patterns-options-row.css index 0b8dce1..2929d87 100644 --- a/styles/21-patterns-options-row.css +++ b/styles/21-patterns-options-row.css @@ -91,19 +91,35 @@ .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 > .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,