module Design.Loadable
  ( design
  ) where

import           Clay

design :: Css
design = do
  ".g-Loadable" ? do
    position relative
    width (pct 100)
    height (pct 100)

  ".g-Loadable__Spinner" ? do
    position absolute
    top (px 0)
    left (px 0)
    width (pct 100)
    height (pct 100)
    display none

  ".g-Loadable__Spinner--Loading" ? do
    display block

  ".g-Loadable__Content" ?
    transition "opacity" (sec 0.4) ease (sec 0)

  ".g-Loadable__Content--Loading" ?
    opacity 0.5