Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for flex box gap #587

Open
schoettl opened this issue May 19, 2023 · 1 comment
Open

Support for flex box gap #587

schoettl opened this issue May 19, 2023 · 1 comment

Comments

@schoettl
Copy link

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 #560 (comment)

@schoettl schoettl mentioned this issue May 21, 2023
@schoettl
Copy link
Author

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant