| @@ -1,16 +1,44 @@ | ||
| 1 | 1 | .king-addons-facet--price .king-addons-facet__row { |
| 2 | - display: flex; | |
| 3 | - gap: 12px; | |
| 4 | - align-items: center; | |
| 2 | + display: grid; | |
| 3 | + grid-template-columns: 1fr 1fr; | |
| 4 | + gap: 10px; | |
| 5 | + align-items: end; | |
| 5 | 6 | } |
| 6 | 7 | |
| 7 | 8 | .king-addons-facet--price .king-addons-facet__label { |
| 8 | 9 | display: flex; |
| 9 | 10 | flex-direction: column; |
| 10 | - gap: 4px; | |
| 11 | + gap: 6px; | |
| 12 | + margin: 0; | |
| 13 | + font-size: 12px; | |
| 14 | + font-weight: 600; | |
| 15 | + letter-spacing: 0.02em; | |
| 16 | + color: #6b7280; | |
| 11 | 17 | } |
| 12 | 18 | |
| 19 | +.king-addons-facet--price .king-addons-facet__input { | |
| 20 | + width: 100%; | |
| 21 | + box-sizing: border-box; | |
| 22 | + height: 40px; | |
| 23 | + margin: 0; | |
| 24 | + padding: 0 12px; | |
| 25 | + border: 1px solid #d0d5dd; | |
| 26 | + border-radius: 8px; | |
| 27 | + background: #fff; | |
| 28 | + color: #111827; | |
| 29 | + font-size: 15px; | |
| 30 | + font-weight: 500; | |
| 31 | + letter-spacing: 0; | |
| 32 | + line-height: 1.2; | |
| 33 | +} | |
| 34 | + | |
| 35 | +.king-addons-facet--price .king-addons-facet__input:focus { | |
| 36 | + outline: none; | |
| 37 | + border-color: #111827; | |
| 38 | + box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08); | |
| 39 | +} | |
| 40 | + | |
| 13 | 41 | .king-addons-facet__buckets { |
| 14 | 42 | list-style: none; |
| 15 | 43 | padding: 0; |
| 16 | 44 | margin: 12px 0 0; |
| @@ -24,17 +52,19 @@ | ||
| 24 | 52 | |
| 25 | 53 | .king-addons-facet__bucket-btn { |
| 26 | 54 | width: 100%; |
| 27 | 55 | display: flex; |
| 28 | - align-items: center; | |
| 56 | + align-items: flex-start; | |
| 29 | 57 | justify-content: space-between; |
| 30 | 58 | gap: 10px; |
| 31 | 59 | padding: 10px 12px; |
| 32 | - border-radius: 10px; | |
| 33 | - border: 1px solid #e5e7eb; | |
| 60 | + border-radius: 8px; | |
| 61 | + border: 1px solid #e4e7ec; | |
| 34 | 62 | background: #fff; |
| 63 | + color: #111827; | |
| 64 | + font: inherit; | |
| 35 | 65 | cursor: pointer; |
| 36 | - transition: all 0.15s ease; | |
| 66 | + transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; | |
| 37 | 67 | } |
| 38 | 68 | |
| 39 | 69 | .king-addons-facet__bucket-btn:hover { |
| 40 | 70 | border-color: #cbd5e1; |
| @@ -41,28 +71,27 @@ | ||
| 41 | 71 | background: #f8fafc; |
| 42 | 72 | } |
| 43 | 73 | |
| 44 | 74 | .king-addons-facet__bucket-btn.is-active { |
| 45 | - border-color: #2563eb; | |
| 46 | - background: #eff6ff; | |
| 47 | - color: #1d4ed8; | |
| 75 | + border-color: #111827; | |
| 76 | + background: #f3f4f6; | |
| 77 | + color: #111827; | |
| 48 | 78 | } |
| 49 | 79 | |
| 50 | 80 | .king-addons-facet__bucket-btn.is-disabled { |
| 51 | - opacity: 0.5; | |
| 81 | + opacity: 0.45; | |
| 52 | 82 | cursor: not-allowed; |
| 53 | 83 | } |
| 54 | 84 | |
| 55 | 85 | .king-addons-facet__bucket-label { |
| 86 | + flex: 1 1 auto; | |
| 87 | + min-width: 0; | |
| 56 | 88 | font-weight: 600; |
| 89 | + text-align: left; | |
| 90 | + overflow-wrap: anywhere; | |
| 57 | 91 | } |
| 58 | 92 | |
| 59 | 93 | .king-addons-facet__bucket-count { |
| 60 | 94 | font-size: 12px; |
| 61 | - color: #475569; | |
| 95 | + color: #6b7280; | |
| 96 | + font-variant-numeric: tabular-nums; | |
| 62 | 97 | } |
| 63 | - | |
| 64 | - | |
| 65 | - | |
| 66 | - | |
| 67 | - | |
| 68 | - | |
