styles - Respo/respo.calcit GitHub Wiki

Styles

Styles are represented in HashMap so it's very trival to extend with merge and if:

def style-a $ {}
  :line-height 1.6
  :color (hsl 0 0 80)

def style-b $ merge style-a
  {}
    :font-size "|16px"
  if (> size 0)
    {}
      :font-weight "|bold"

The keys have to be keywords, the values can be either of keywords, numbers or strings. Also I prepared a function called hsl as a helper.

In Respo, style updates are defined with direct accessing to el.style:

defn add-style (target op)
  let
      style-name (dashed->camel (name (key op))
      style-value (val op)
    aset (.-style target) style-name style-value

defn rm-style (target op)
  let
      style-name (dashed->camel (name op))
    aset (.-style target) style-name nil

defn replace-style (target op)
  let
      style-name (dashed->camel (name (key op)))
      style-value (val op)
    aset (.-style target) style-name style-value

For convenience, I collected my frequent used styles in a package called respo-ui. You can find more in the source code.

Actually there's one more solution to specify CSS content, the <style> element:

style $ {}
  :innerHTML "|.demo {color: red;}"

It may look awkward but sometimes quite useful for pseudo classes.

⚠️ **GitHub.com Fallback** ⚠️