search

rtfeldman / elm-css

Typed CSS in Elm.
https://package.elm-lang.org/packages/rtfeldman/elm-css/latest
BSD 3-Clause "New" or "Revised" License
1.23k stars 196 forks source link

Support for flex box gap #587

Open schoettl opened 1 year ago

schoettl commented 1 year ago

There is the CSS gap property but it's not yet supported in elm-css. Only a gap transition exists already.

Can I add it in a PR?

I think it's very important and handy when working with flexbox.

gap is described here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-gap-row-gap-column-gap

Originally posted by @schoettl in https://github.com/rtfeldman/elm-css/issues/560#issuecomment-1554382711

schoettl commented 5 months ago

For reference:

{-| Not quite correct since CSS gap accepts (slightly) other values.
See https://developer.mozilla.org/en-US/docs/Web/CSS/gap#syntax
-}
gap : LengthOrNumberOrAutoOrNoneOrContent compatible -> Style
gap x =
    property "gap" x.value

gap2 : LengthOrNumberOrAutoOrNoneOrContent compatible -> LengthOrNumberOrAutoOrNoneOrContent compatible -> Style
gap2 x y =
    property "gap" (x.value ++ " " ++ y.value)