elm-css: How to give a value to `opacity`

Question

I am playing around with elm-css. Most of the things work as I expect them. But I am not able to give a correct value to the Css.opacity function.

Here is what I have tried:

Css.opacity 0.5

which gives the error:

Function `opacity` is expecting the argument to be:

    Css.Number compatible

But it is:

    Float

The Css.Number is a type alias in the following form:

type alias Number compatible =
     { compatible | value : String, number : Compatible }

But I don't understand how to create a valid value for the Css.opacity function...

Answer 1

You can create input for opacity by using one of the "unitless" functions, like Css.int or Css.num. For example:

-- 42% opaque
translucent = Css.opacity (Css.num 0.42)

It is "unitless" because the CSS property of opacity does not define a unit like px or percent.