module Web.Hyperbole.View.CSS where

import Web.Atomic.CSS


{- | Apply CSS only when a request is in flight. See [Example.Page.Contact](https://docs.hyperbole.live/contacts/1)

@
contactEditView :: User -> 'View' Contact ()
contactEditView u = do
  'el' contactLoading ~ display None . whenLoading flexCol
  'el' (contactEdit 'View' Save u) ~ whenLoading (display None)
@
-}
whenLoading :: (Styleable h) => (CSS h -> CSS h) -> CSS h -> CSS h
whenLoading :: forall h. Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h
whenLoading = do
  ClassName -> (CSS h -> CSS h) -> CSS h -> CSS h
forall h.
Styleable h =>
ClassName -> (CSS h -> CSS h) -> CSS h -> CSS h
descendentOf ClassName
"hyp-loading"


disabled :: (Styleable h) => CSS h -> CSS h
disabled :: forall h. Styleable h => CSS h -> CSS h
disabled =
  ClassName -> [Declaration] -> CSS h -> CSS h
forall h.
Styleable h =>
ClassName -> [Declaration] -> CSS h -> CSS h
utility
    ClassName
"disabled"
    [ Property
"opacity" Property -> Style -> Declaration
:. Style
"0.7"
    , Property
"pointer-events" Property -> Style -> Declaration
:. Style
"none"
    ]


loading :: (Styleable h) => CSS h -> CSS h
loading :: forall h. Styleable h => CSS h -> CSS h
loading = (CSS h -> CSS h) -> CSS h -> CSS h
forall h. Styleable h => (CSS h -> CSS h) -> CSS h -> CSS h
whenLoading CSS h -> CSS h
forall h. Styleable h => CSS h -> CSS h
disabled