diff options
Diffstat (limited to 'views/css/wpsg-theme.css')
| -rw-r--r-- | views/css/wpsg-theme.css | 23 |
1 files changed, 16 insertions, 7 deletions
diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css index d40cf5b..76e0274 100644 --- a/views/css/wpsg-theme.css +++ b/views/css/wpsg-theme.css @@ -658,20 +658,25 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max .wpsg-product-tiles > .wpsg-product-list__count { margin-block:0 var(--wpsg-pvf-gap); } .wpsg-product-tiles > .wpsg-product-list__count:empty { display:none; } .wpsg-product-tiles > .wpsg-block-product-filter { margin-block:var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--60, 2rem); } -.wpsg-product-tiles .wpsg-pvf__fields { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--wpsg-pvf-gap); padding:var(--wp--preset--spacing--40, 1rem); border:1px solid var(--wpsg-color-line-soft); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-surface); } +/* Raster mit gleich breiten Spalten, damit die Gruppen untereinander stehen; Überschriften oben bündig, „Filtern“ unten in der letzten Spalte */ +.wpsg-product-tiles .wpsg-pvf__fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items:start; gap:var(--wpsg-pvf-gap); padding:var(--wp--preset--spacing--40, 1rem); border:1px solid var(--wpsg-color-line-soft); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-surface); } .wpsg-product-tiles .wpsg-pvf__fields > * { margin:0; padding:0; border:0; min-width:0; } .wpsg-product-tiles .wpsg-pvf__title { display:block; margin:0 0 var(--wpsg-pvf-gap-small) 0; padding:0; font-size:inherit; font-weight:600; line-height:1.3; } .wpsg-product-tiles .wpsg-pvf__options { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap-small) var(--wpsg-pvf-gap); min-height:var(--wpsg-pvf-control); } .wpsg-product-tiles .wpsg-pvf__price .wpsg-pvf__options { flex-wrap:nowrap; gap:var(--wpsg-pvf-gap-small); } -.wpsg-product-tiles .wpsg-pvf__price label { display:flex; flex:1 1 0; align-items:center; gap:var(--wpsg-pvf-gap-small); min-width:0; } +.wpsg-product-tiles .wpsg-pvf__price label { display:flex; flex:0 1 auto; align-items:center; gap:var(--wpsg-pvf-gap-small); min-width:0; } .wpsg-product-tiles .wpsg-pvf__price label > span { min-width:0; } -.wpsg-product-tiles .wpsg-pvf__price input { flex:1 1 auto; width:6em; min-width:0; } +/* Preis über zwei Spalten, damit von, bis und EUR mit lesbaren Feldern in eine Zeile passen */ +.wpsg-product-tiles .wpsg-pvf__price { grid-column:span 2; } +.wpsg-product-tiles .wpsg-pvf__price input { flex:0 1 auto; width:9em; min-width:0; appearance:textfield; -moz-appearance:textfield; } +/* Ohne Pfeile des Zahlenfelds, sonst schneiden sie den Platzhalter ab */ +.wpsg-product-tiles .wpsg-pvf__price input::-webkit-inner-spin-button, .wpsg-product-tiles .wpsg-pvf__price input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; } .wpsg-product-tiles .wpsg-pvf__option { margin:0; } .wpsg-product-tiles .wpsg-pvf input[type="checkbox"] { width:1.25em; height:1.25em; margin:0; } /* Felder, Auswahllisten und Knöpfe gleich hoch */ .wpsg-product-tiles .wpsg-pvf :is(input[type="number"], select, .wpsg-pvf__actions .wpsg_button) { box-sizing:border-box; height:var(--wpsg-pvf-control); margin:0; padding-block:0; } .wpsg-product-tiles .wpsg-pvf .wpsg-pvf__actions .wpsg_button { display:inline-flex; align-items:center; justify-content:center; } -.wpsg-product-tiles .wpsg-pvf__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap); } +.wpsg-product-tiles .wpsg-pvf__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap); grid-column-end:-1; align-self:end; } .wpsg-product-tiles .wpsg-pvf__reset[hidden] { display:none; } /* Knopf „Filter“ (nur am Handy): umrandet, Pfeil dreht sich, Zahl der aktiven Filter */ .wpsg-product-tiles .wpsg-pvf__summary, .wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__summary { box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--wpsg-pvf-gap-small); min-height:var(--wpsg-pvf-control); padding:0 1.2em; border:1px solid currentColor; border-radius:var(--wpsg-radius); background:transparent; color:inherit; font-weight:600; list-style:none; cursor:pointer; } @@ -683,10 +688,14 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max .wpsg-product-tiles .wpsg-pvf__none { margin:0; } @media (max-width:781px) { .wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__fields { margin-top:var(--wpsg-pvf-gap-small); } - .wpsg-product-tiles .wpsg-pvf__fields { flex-direction:column; align-items:stretch; } + .wpsg-product-tiles .wpsg-pvf__fields { grid-template-columns:minmax(0, 1fr); } + .wpsg-product-tiles .wpsg-pvf__price { grid-column:auto; } + /* Am Handy füllen die Felder die Zeile; eine feste Breite zählte sonst als Mindestbreite */ + /* Sehr schmal: „bis“ in die zweite Zeile, damit die Platzhalter lesbar bleiben */ + .wpsg-product-tiles .wpsg-pvf__price .wpsg-pvf__options { flex-wrap:wrap; } + .wpsg-product-tiles .wpsg-pvf__price label { flex:1 1 7em; } + .wpsg-product-tiles .wpsg-pvf__price input { flex:1 1 5em; width:0; } .wpsg-product-tiles .wpsg-pvf__select select { width:100%; } - /* Feste Breite zählte sonst als Mindestbreite und schob die Zeile über den Rand */ - .wpsg-product-tiles .wpsg-pvf__price input { flex-basis:5em; width:0; } .wpsg-product-tiles .wpsg-pvf__actions .wpsg_button { flex:1 1 auto; } } @media (min-width:782px) { |