Open ghost opened 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?).
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:
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?