| @@ -1,41 +1,46 @@ | ||
| 1 | 1 | .ka-facet-meta { |
| 2 | - display: inline-flex; | |
| 3 | - gap: 8px; | |
| 4 | - align-items: center; | |
| 2 | + display: block; | |
| 3 | + width: 100%; | |
| 5 | 4 | } |
| 6 | 5 | |
| 7 | 6 | .ka-facet-meta__input, |
| 8 | 7 | .ka-facet-meta__select, |
| 9 | 8 | .ka-facet-meta__range input { |
| 10 | - min-width: 140px; | |
| 9 | + display: block; | |
| 10 | + width: 100%; | |
| 11 | + box-sizing: border-box; | |
| 12 | + height: 40px; | |
| 13 | + margin: 0; | |
| 14 | + padding: 0 12px; | |
| 15 | + border: 1px solid #d0d5dd; | |
| 16 | + border-radius: 8px; | |
| 17 | + background: #fff; | |
| 18 | + color: #111827; | |
| 19 | + font: inherit; | |
| 20 | + font-size: 15px; | |
| 21 | + line-height: 1.2; | |
| 11 | 22 | } |
| 12 | 23 | |
| 13 | -.ka-facet-meta__range { | |
| 14 | - display: flex; | |
| 15 | - gap: 8px; | |
| 24 | +.ka-facet-meta__select { | |
| 25 | + appearance: none; | |
| 26 | + background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%); | |
| 27 | + background-position: calc(100% - 16px) 18px, calc(100% - 11px) 18px; | |
| 28 | + background-size: 5px 5px, 5px 5px; | |
| 29 | + background-repeat: no-repeat; | |
| 30 | + padding-right: 32px; | |
| 16 | 31 | } |
| 17 | -.king-addons-facet--meta .king-addons-facet__row { | |
| 18 | - display: flex; | |
| 19 | - gap: 8px; | |
| 20 | -} | |
| 21 | 32 | |
| 22 | -.king-addons-facet--meta .king-addons-facet__input { | |
| 23 | - min-width: 140px; | |
| 33 | +.ka-facet-meta__range { | |
| 34 | + display: grid; | |
| 35 | + grid-template-columns: 1fr 1fr; | |
| 36 | + gap: 10px; | |
| 24 | 37 | } |
| 25 | 38 | |
| 26 | -.ka-facet-meta__select.is-active, | |
| 27 | -.king-addons-facet--meta .king-addons-facet__input:focus, | |
| 28 | -.king-addons-facet--meta .king-addons-facet__input.is-active { | |
| 29 | - border-color: #2563eb; | |
| 30 | - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12); | |
| 39 | +.ka-facet-meta__input:focus, | |
| 40 | +.ka-facet-meta__select:focus, | |
| 41 | +.ka-facet-meta__range input:focus, | |
| 42 | +.ka-facet-meta__select.is-active { | |
| 43 | + outline: none; | |
| 44 | + border-color: #111827; | |
| 45 | + box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08); | |
| 31 | 46 | } |
| 32 | - | |
| 33 | -.king-addons-facet--meta .king-addons-facet__count { | |
| 34 | - font-size: 12px; | |
| 35 | - color: #6b7280; | |
| 36 | -} | |
| 37 | - | |
| 38 | - | |
| 39 | - | |
| 40 | - | |
| 41 | - | |
