mhallin / forest

CSS modules for Clojurescript
MIT License
63 stars 3 forks source link

:not (and other psuedo classes) #4

Open ghost opened 8 years ago

ghost commented 8 years ago

I have two (hopefully) easy to answer questions.

1) Does forest support selectors such as :not and :nth-child(n)? 2) How are you supposed to style a button such that it has 1 style on :hover and another style on :active, but make sure :active takes precedence?

Consider this:

(defstylesheet styles
  [.clickable {:cursor "pointer"}]
  [.base {:composes clickable
          :background-color "transparent"
          :border "none"
          ... }]
  [.flat-light:active {:composes base
                       :background-color "rgba(60,60,60,.4)"}]
  [.flat-light:hover {:composes base
                      :background-color "rgba(0,0,0,.12)"}]
  [.flat-light:disabled {:composes base
                         :color "rgba(0,0,0,.26)"
                         :cursor "not-allowed"}]
  [.flat-light {:composes [base flat-light:active flat-light:hover flat-light:disabled]}])

If I attach {:class flat-light} to a button, how do I guarantee the ordering of the class application? Are there no guarantees? If so, how do I do (2) above?

ghost commented 8 years ago

After a bit of playing around this is the "answer" I came up with. The idea is that each specificity of :pseudo (such as :hover) has to be overridden for each other pseudo. Therefore, for :disabled to also disable the style of :active and :hover, you must have a selector .flat-light:disabled:active:hover.

(defstylesheet styles
  [.clickable {:cursor "pointer"}]
  [.base {:composes clickable
          :background-color "transparent"
          :border "none" ...]}

  [.flat-light:hover {:composes base
                      :background-color "rgba(0,0,0,.12)"}]
  [.flat-light:active {:composes base
                       :background-color "rgba(60,60,60,.4)"}]
  [.flat-light:disabled {:composes base
                         :background-color "inherit"
                         :color "rgba(0,0,0,.26)"
                         :cursor "not-allowed"}]
  [.flat-light:active:hover {:composes [base flat-light:active]}]
  [.flat-light:disabled:active:hover {:composes [base flat-light:disabled]}]
  [.flat-light {:composes [base
                           flat-light:hover
                           flat-light:active:hover
                           flat-light:disabled:active:hover]}])

This "works" but is a whole lot of typing, and I'm not sure if it's guaranteed behavior (maybe the <style> tags are not idempotent?).