cc8d6be · rowtype-yoga/ry-blocks

git.iko.soy/rowtype-yoga/ry-blocks

on main help sign in

Even better input shit

cc8d6beMark Eibes4 years ago

src/Yoga/Block/Atom/Input/Style.purs+27−14

compare with main

unifiedsplit

@@ -183,27 +183,29 @@ inputContainer props = theCss <>? props.css

183 , cursor: str "text"

184 , boxSizing: borderBox

185 , display: flex

186− , width: str "100%"

187 , """&[data-invalid="false"]""":

186 , """&[data-invalid="false"]""":

188 nest

187 nest

189 { borderColor: str colour.success

188 { borderColor: str colour.success

189+ , marginTop: str "-1px"

190 , "--border-width": str "2px"

191 }

192 , """&[data-invalid="true"]""":

193 nest

194 { borderColor: str colour.invalid

195+ , marginTop: str "-1px"

195 , "--border-width": str "2px"

196 , "--border-width": str "2px"

196 }

197 }

197 , "&:focus-within":

198 , "&:focus-within":

198 nest

199 nest

199 { "--border-width": str "2px"

200 { "--border-width": str "2px"

200 , borderColor: str colour.highlight

201 , borderColor: str colour.highlight

202+ , marginTop: str "-1px"

201 , transition: str "border-color 0s linear 0.1s"

203 , transition: str "border-color 0s linear 0.1s"

202− , boxShadow: str """

204+ -- , boxShadow: str $ """

203− 0 1px 2px var(--highlight-col),

205+ -- 0 1px 2px """ <> colour.highlightAlpha25 <> """,

204− 0 2px 4px rgba(230,200,255,0.4),

206+ -- 0 2px 4px """ <> colour.highlightAlpha25 <> """,

205− 0 4px 12px rgba(230,200,255,0.3)"""

207+ -- 0 4px 12px """ <> colour.highlightAlpha25

206− -- , animation: plopAnimation <> str " 260ms ease-in"

208+ , animation: plopAnimation <> str " 260ms ease-in"

207 }

209 }

208 , alignItems: center

210 , alignItems: center

209 , justifyContent: center

211 , justifyContent: center

@@ -212,23 +214,34 @@ inputContainer props = theCss <>? props.css

212 , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"

214 , paddingRight: str "calc(var(--input-side-padding) - var(--border-width))"

213 , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"

215 , paddingTop: str "calc(var(--input-top-padding) - var(--border-width))"

214 , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"

216 , paddingBottom: str "calc(var(--input-bottom-padding) - var(--border-width))"

215− , height: str "calc(var(--s2))"

216 , gap: str "calc(var(--input-side-padding) / 2)"

217 , gap: str "calc(var(--input-side-padding) / 2)"

217 , borderRadius: var "--input-border-radius"

218 , borderRadius: var "--input-border-radius"

218 }

219 }

219

220

220−containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style

221+containerBackground ∷ ∀ r. { | Props OptionalProp r } -> Style

221−containerContainer props = css { "--border-width": str "1px"

222+containerBackground props = css {

222− , "--input-border-radius": var "--s-1"

223− , width: str "calc(var(--s4) * 2)"

224− , background: str (props.background ?|| colour.inputBackground)

223+ background: str (props.background ?|| colour.inputBackground)

225− , boxSizing: contentBox

226− , borderRadius: var "--input-border-radius"

227 , boxShadow: str """

224 , boxShadow: str """

228 0 1px 1px rgba(200,200,255,0.2),

225 0 1px 1px rgba(200,200,255,0.2),

229 0 2px 2px rgba(200,200,255,0.1),

226 0 2px 2px rgba(200,200,255,0.1),

230 0 4px 8px rgba(200,200,255,0.03)"""

227 0 4px 8px rgba(200,200,255,0.03)"""

231 , border: str $ "var(--border-width) solid " <> colour.inputBorder

228 , border: str $ "var(--border-width) solid " <> colour.inputBorder

229+ , borderRadius: var "--input-border-radius"

230+

231+}

232+

233+containerContainer ∷ ∀ r. { | Props OptionalProp r } -> Style

234+containerContainer props = css {

235+ "& > *": nested $ css {

236+ gridColumn: int 1,

237+ gridRow: int 1

238+ }, width: str "calc(var(--s4) * 2)"

239+ , height: str "calc(var(--s2) - var(--border-width) * 2)"

240+ , "--border-width": str "1px"

241+ , "--input-border-radius": var "--s-1"

242+ , borderRadius: var "--input-border-radius"

243+ , display: grid

244+ , overflow: visible

232 }

245 }

233

246

234inputWrapper ∷ Style

247inputWrapper ∷ Style

src/Yoga/Block/Atom/Input/View/Container.purs+2−1

@@ -50,7 +50,8 @@ rawContainer =

50 containerVariants = mkContainerVariants dimensions

51 containerVariantLabels = mkContainerVariantLabels containerVariants

52 result = R.div' </* { css: Style.containerContainer props } />

53+ [ R.div' </*> { className: "container-background", css: Style.containerBackground props }

53− [ M.div

54+ , M.div

54 </*

55 </*

55 ( { variants: M.variants containerVariants

56 ( { variants: M.variants containerVariants

56 , initial: M.initial false

57 , initial: M.initial false