atomic-css-0.1.0: Type-safe, composable CSS utility functions. Inspired by Tailwindcss and Elm-UI

Safe Haskell	None
Language	GHC2021

Web.Atomic.CSS.Select

Synopsis

hover :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h
active :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h
even :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h
odd :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h
pseudo :: Styleable h => Pseudo -> (CSS h -> CSS h) -> CSS h -> CSS h
media :: Styleable h => Media -> (CSS h -> CSS h) -> CSS h -> CSS h
addPseudo :: Pseudo -> Rule -> Rule
addMedia :: Media -> Rule -> Rule
descendentOf :: Styleable h => ClassName -> (CSS h -> CSS h) -> CSS h -> CSS h
addAncestor :: ClassName -> Rule -> Rule

Documentation

hover :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h Source #

Apply when hovering over an element

el ~ bg Primary . hover (bg PrimaryLight) $ "Hover"

active :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h Source #

Apply when the mouse is pressed down on an element

even :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h Source #

Apply to even-numbered children

odd :: Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h Source #

Apply to odd-numbered children

pseudo :: Styleable h => Pseudo -> (CSS h -> CSS h) -> CSS h -> CSS h Source #

media :: Styleable h => Media -> (CSS h -> CSS h) -> CSS h -> CSS h Source #

Apply when the Media matches the current window. This allows for responsive designs

el ~ width 100 . media (MinWidth 800) (width 400) $ do
  "Big if window > 800"

addPseudo :: Pseudo -> Rule -> Rule Source #

addMedia :: Media -> Rule -> Rule Source #

descendentOf :: Styleable h => ClassName -> (CSS h -> CSS h) -> CSS h -> CSS h Source #

Apply when this element is contained somewhere another element with the given class

el ~ descendentOf "htmx-request" bold $ "Only bold when htmx is making a request"

addAncestor :: ClassName -> Rule -> Rule Source #