@@ -9,7 +9,7 @@ data SizeVariant = SizeMedium | SizeSmall
99sizeVariantToFactor ∷ SizeVariant → String
1010sizeVariantToFactor = case _ of
1111 SizeMedium -> "1"
12− SizeSmall -> "0.8"
12+ SizeSmall -> "0.85"
1313
1414type Props :: forall k. (Type -> k) -> Row k -> Row k
1515type Props f r =
@@ -188,26 +188,30 @@ inputContainer props = theCss <>? props.css
188188 , letterSpacing: em (-0.011)
189189 , position: relative
190190 , cursor: str "text"
191− , boxSizing: contentBox
191+ , boxSizing: borderBox
192+ , "--base-height": str "calc(42px * var(--input-size-factor))"
193+ , height: str "var(--base-height)"
192194 , display: flex
193195 , """&[data-invalid="false"]""":
194196 nest
195197 { borderColor: str colour.success
196198 , marginTop: str "-1px"
199+ , marginBottom: str "-1px"
197200 , "--border-width": str "2px"
198201 }
199202 , """&[data-invalid="true"]""":
200203 nest
201204 { borderColor: str colour.invalid
202− , marginTop: str "-1px"
203− , marginLeft: str "-1px"
205+ -- , marginTop: str "-1px"
206+ -- , marginBottom: str "-1px"
207+ -- , marginLeft: str "-1px"
204208 , "--border-width": str "2px"
205209 }
206210 , "&:focus-within":
207211 nest
208212 { "--border-width": str "2px"
209213 , borderColor: str colour.highlight
210− , marginTop: str "-1px"
214+ -- , boxSizing: borderBox
211215 }
212216 , alignItems: center
213217 , justifyContent: center
@@ -226,7 +230,6 @@ ploppedFocusWithin = css
226230 { "&:focus-within":
227231 nest
228232 { transition: str "border-color 0.18s ease-out"
229− , boxSizing: contentBox
230233 }
231234
232235 }