@@ -4,15 +4,23 @@ import Yoga.Prelude.Style
44import Data.Interpolate (i)
55import Yoga.Block.Container.Style (colour)
66
7+data SizeVariant = SizeMedium | SizeSmall
8+
9+sizeVariantToFactor ∷ SizeVariant → String
10+sizeVariantToFactor = case _ of
11+ SizeMedium -> "1"
12+ SizeSmall -> "0.8"
13+
714type Props :: forall k. (Type -> k) -> Row k -> Row k
8−type Props f r
9− = ( css ∷ f Style
10− , background ∷ f String
11− , textColour ∷ f String
12− , placeholderColour ∷ f String
13− , borderColour ∷ f String
14− | r
15− )
15+type Props f r =
16+ ( css ∷ f Style
17+ , sizeVariant :: f SizeVariant
18+ , background ∷ f String
19+ , textColour ∷ f String
20+ , placeholderColour ∷ f String
21+ , borderColour ∷ f String
22+ | r
23+ )
1624
1725leftIconSize ∷ StyleProperty
1826leftIconSize = var "--left-icon-size"
@@ -38,9 +46,9 @@ labelAndInputWrapper =
3846 css
3947 { position: relative
4048 -- , display: inlineBlock
41− , "--left-icon-size": var "--s0"
42− , "--right-icon-size": str "calc(var(--s0) * 1.2)"
43− , "--input-border-radius": var "--s-1"
49+ , "--left-icon-size": str "calc(var(--s0) * var(--input-size-factor))"
50+ , "--right-icon-size": str "calc(var(--s0) * var(--input-size-factor)) * 1.2)"
51+ , "--input-border-radius": str "calc(var(--s-1) * var(--input-size-factor))"
4452 , "--input-side-padding": var "--s-1"
4553 , width: inherit
4654 , margin: _0
@@ -51,8 +59,8 @@ labelContainer =
5159 css
5260 { position: absolute
5361 , overflow: visible
54− , top: _0
5562 , left: _0
63+ , top: _0
5664 , display: inlineBlock
5765 , zIndex: str "2"
5866 , pointerEvents: none
@@ -62,7 +70,7 @@ labelSmall ∷ String -> String -> Style
6270labelSmall background textColour =
6371 css
6472 { fontSize: var "--s-1"
65− , marginTop: str "calc(var(--s-3) * -1)"
73+ , marginTop: str "calc(var(--s-2) * var(--input-size-factor) * -1)"
6674 , marginLeft: var "--s-2"
6775 , userSelect: none
6876 , """&[data-required="true"] > span:after""":
@@ -73,7 +81,7 @@ labelSmall background textColour =
7381 nest
7482 { fontWeight: str "500"
7583 , whiteSpace: str "nowrap"
76− , background: str $ i "linear-gradient(" background " 51%, transparent 51%, transparent)"
84+ , background: str $ i "linear-gradient(" background " 61%, transparent 61%, transparent)"
7785 , color: str textColour
7886 , borderRadius: var "--s-4"
7987 , paddingLeft: var "--s-4"
@@ -109,32 +117,30 @@ labelSmallFocusBackground =
109117labelLarge ∷ { left ∷ Number, width ∷ Number } -> Style
110118labelLarge { left, width } =
111119 css
112− { fontSize: str "var(--s0)"
120+ { fontSize: str "calc(var(--input-size-factor) * 16px)"
113121 , padding: _0
114122 , whiteSpace: nowrap -- force on one line
115− , height: str "calc(var(--s0) * 1.2)"
123+ -- , height: str "calc(var(--s0) * 1.2)"
116124 , letterSpacing: em (-0.011)
117125 , maxWidth: str $ i "calc(" width "px - 2ch)"
118− , marginTop: str "calc(var(--s-1))"
126+ , marginTop: str "calc(var(--s-1) * var(--input-size-factor))"
119127 , marginLeft: str $ i left "px"
120128 , marginRight: var "--input-side-padding"
121129 , color: str colour.textPaler2
122130 , fontWeight: str "400"
123131 , overflowX: str "hidden"
124132 , textOverflow: str "ellipsis"
125− , overflowY: str "visible"
126− , "MsOverflowStyle": none
133+ , overflowY: visible
127134 , scrollbarWidth: none
128135 , "&::-webkit-scrollbar": nested $ css
129− { display: none }
136+ { display: none }
130137 -- , fontWeight: str "600"
131138 , """&[data-required="true"]:after""":
132139 nest
133140 { content: str "'*'"
134141 , color: str colour.required
135142 , fontFamily: str "Helvetica, Arial, Inter, sans-serif"
136− , fontSize: str "calc(var(--s0))"
137− , lineHeight: str "calc(var(--s0) * 0.85)"
143+ , lineHeight: str "calc(var(--s0) * 0.85 * var(--input-size-factor))"
138144 }
139145 }
140146
@@ -142,31 +148,31 @@ rightIconContainer ∷ Style
142148rightIconContainer =
143149 iconContainer
144150 <> css
145− { display: inlineFlex
146− , alignItems: center
147− , justifyContent: center
148− , "& > *":
149− nest
150− { display: inlineFlex
151− , alignItems: center
152− , justifyContent: center
153− }
154− , ".ry-icon":
155− nest
156− { "--stroke-colour": str colour.text
157− }
158− }
151+ { display: inlineFlex
152+ , alignItems: center
153+ , justifyContent: center
154+ , "& > *":
155+ nest
156+ { display: inlineFlex
157+ , alignItems: center
158+ , justifyContent: center
159+ }
160+ , ".ry-icon":
161+ nest
162+ { "--stroke-colour": str colour.text
163+ }
164+ }
159165
160166leftIconContainer ∷ Style
161167leftIconContainer =
162168 iconContainer
163169 <> css
164− { borderRadius: str "var(--input-border-radius) 0 0 var(--input-border-radius)"
165− , ".ry-icon":
166− nest
167− { "--stroke-colour": str colour.text
168− }
169− }
170+ { borderRadius: str "var(--input-border-radius) 0 0 var(--input-border-radius)"
171+ , ".ry-icon":
172+ nest
173+ { "--stroke-colour": str colour.text
174+ }
175+ }
170176
171177inputContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
172178inputContainer props = theCss <>? props.css
@@ -175,9 +181,10 @@ inputContainer props = theCss <>? props.css
175181 css
176182 { "--left-icon-size": var "--s0"
177183 , "--right-icon-size": str "calc(var(--s0) * 1.2)"
178− , "--input-side-padding": str "calc(var(--s-1) * 1.2)"
179− , "--input-top-padding": var "--s-5"
180− , "--input-bottom-padding": var "--s-5"
184+ , "--input-side-padding": str "calc(var(--s-1) * var(--input-size-factor) * 1.2)"
185+ , "--input-top-padding": str "calc(var(--s-5) * var(--input-size-factor))"
186+ , "--input-bottom-padding": str "calc(var(--s-5) * var(--input-size-factor))"
187+ , "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)
181188 , letterSpacing: em (-0.011)
182189 , position: relative
183190 , cursor: str "text"
@@ -200,41 +207,50 @@ inputContainer props = theCss <>? props.css
200207 { "--border-width": str "2px"
201208 , borderColor: str colour.highlight
202209 , marginTop: str "-1px"
203− , transition: str "border-color 0s linear 0.1s"
204− , animation: plopAnimation <> str " 260ms ease-in"
205210 }
206211 , alignItems: center
207212 , justifyContent: center
208213 , border: str $ "var(--border-width) solid " <> colour.inputBorder
209− , paddingLeft: str "calc(var(--input-side-padding) - var(--border-width))"
210− , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"
211− , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"
212− , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"
214+ , paddingLeft: str "calc((var(--input-side-padding) - var(--border-width)) * var(--input-size-factor))"
215+ , paddingRight: str "calc((var(--input-side-padding) - var(--border-width)) * var(--input-size-factor))"
216+ , paddingTop: str "calc((var(--input-top-padding) - var(--border-width)) * var(--input-size-factor))"
217+ , paddingBottom: str "calc((var(--input-bottom-padding)) - var(--border-width))"
213218 , gap: str "calc(var(--input-side-padding) / 2)"
214219 , borderRadius: var "--input-border-radius"
220+ , overflow: visible
215221 }
216222
223+ploppedFocusWithin ∷ Style
224+ploppedFocusWithin = css
225+ { "&:focus-within":
226+ nest
227+ { animation: str "plop 180ms ease"
228+ , animationName: plopAnimation
229+ }
230+ }
231+
217232containerBackground ∷ ∀ r. { | Props OptionalProp r } -> Style
218−containerBackground props = css {
219− background: str (props.background ?|| colour.inputBackground)
220− , boxShadow: str """
221− 0 1px 1px rgba(200,200,255,0.2),
222− 0 2px 2px rgba(200,200,255,0.1),
223− 0 4px 8px rgba(200,200,255,0.03)"""
233+containerBackground props = css
234+ { background: str (props.background ?|| colour.inputBackground)
235+ -- , boxShadow: str
236+ -- """
237+ -- 0 1px 1px rgba(200,200,255,0.2),
238+ -- 0 2px 2px rgba(200,200,255,0.1),
239+ -- 0 4px 8px rgba(200,200,255,0.03)"""
224240 , border: str $ "var(--border-width) solid " <> colour.inputBorder
225241 , borderRadius: var "--input-border-radius"
226242
227−}
243+ }
228244
229245containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style
230−containerContainer props = css {
231− "& > *": nested $ css {
232− gridColumn: int 1,
233− gridRow: int 1
234− }, width: str "calc(var(--s4) * 2)"
235− , height: str "calc(var(--s2) - var(--border-width) * 2)"
246+containerContainer props = css
247+ { "& > *": nested $ css
248+ { gridColumn: int 1
249+ , gridRow: int 1
250+ }
236251 , "--border-width": str "1px"
237− , "--input-border-radius": var "--s-1"
252+ , "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)
253+ , "--input-border-radius": str "calc(var(--s-1) * var(--input-size-factor))"
238254 , borderRadius: var "--input-border-radius"
239255 , display: grid
240256 , overflow: visible
@@ -253,7 +269,8 @@ inputWrapper =
253269input ∷ ∀ r. { | Props OptionalProp r } -> Style
254270input props =
255271 css
256− { "&[type=text],&[type=search],&[type=password],&[type=number],&:not([type])":
272+ { "--input-size-factor": str ((props.sizeVariant ?|| SizeMedium) # sizeVariantToFactor)
273+ , "&[type=text],&[type=search],&[type=password],&[type=number],&:not([type])":
257274 nest
258275 { background: str "transparent"
259276 , touchAction: manipulation
@@ -262,14 +279,14 @@ input props =
262279 , minWidth: _0
263280 , margin: _0
264281 , overflowY: visible
282+ , "--padding-top": str "calc(var(--s-1) * var(--input-size-factor))"
283+ , "--padding-bottom": str "calc(var(--s-1) * var(--input-size-factor))"
265284 , paddingTop: var "--padding-top"
266285 , paddingBottom: var "--padding-bottom"
267286 , paddingLeft: _0
268287 , paddingRight: _0
269− -- , fontSize: str "calc(var(--s0) * 0.85)"
270− , fontSize: str "calc(var(--s0))"
271− , "--padding-top": var "--s-1"
272− , "--padding-bottom": var "--s-1"
288+ , fontSize: str "calc(var(--input-size-factor) * 16px)"
289+ -- , fontSize: str "calc(var(--s0))"
273290 , "&::placeholder":
274291 nest
275292 { color: str (props.placeholderColour ?|| colour.placeholderText)
@@ -297,8 +314,9 @@ input props =
297314plopAnimation ∷ StyleProperty
298315plopAnimation =
299316 keyframes
300− $ { "from": css { transform: str "scale3d(1.01,1.2,1)" }
301− , "67.7%": css { transform: str "scale3d(0.993,0.9,1)" }
302− , "86.7%": css { transform: str "scale3d(1.002,1.05,1)" }
317+ $
318+ { "from": css { transform: str "scale3d(1.03,1.02,1)" }
319+ , "67.7%": css { transform: str "scale3d(0.997,0.98,1)" }
320+ , "86.7%": css { transform: str "scale3d(1.004,1.01,1)" }
303321 , "to": css { transform: str "scale3d(1,1,1)" }
304322 }