mdgriffith / style-elements

Create styles that don't mysteriously break!
http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
BSD 3-Clause "New" or "Revised" License
445 stars 49 forks source link

Unsupported Style Properties #103

Open mdgriffith opened 7 years ago

mdgriffith commented 7 years ago

I'm trying to come see if there are any missing style properties that style-elements does not directly support that it should.

If you've been using style-elements and have found yourself using Style.prop for any reason, I would love it if you could leave a note describing the situation you were using it in.

Some properties aren't supported on purpose, like z-index, because the library's goal is to make them not needed. However, it's still really useful to see where people had to do an override!

gampleman commented 7 years ago

We used position: sticky to do "chapter headers" ala iOS scrolling lists.

AionDev commented 7 years ago

I use Style.prop "user-select" "none" -- for some things that need to use drag and drop.

Style.prop "overflow-y" "auto" -- in drop-downs for example - there needs to be a scroll bar only if the nr of elements is exceeding a certain height. overflow on x is also a thing used often

I also use - but not as often.. Style.prop "user-drag" "none"

thorebear commented 7 years ago

I use Style.prop "border-top-color", Style.prop "border-left-color", Style.prop "border-right-color", Style.prop "border-bottom-color".

bengolds commented 7 years ago

I ended up using:

    attribute "style" ("transform: scale(" ++ xScale ++ "," ++ yScale ++ ")")

for scaling parentheses based off of their content, a la KaTeX. I had to manually calculate the content size as well, for xScale. If you want me to explain the use case in more detail, lemme know!

akoppela commented 7 years ago

In my case I've used "z-index" to implement calendar. I used buttons because they are focusable. image

Without "z-index" outline of button would be overlapped. image

So if you want to be explicit about it maybe something like onTop or bringFront, etc... could be the option to go.