Safe Haskell	None
Language	GHC2021

Web.Atomic.Types.Styleable

Synopsis

class Styleable h where
- (~) :: h -> (CSS h -> CSS h) -> h
- modCSS :: ([Rule] -> [Rule]) -> h -> h
newtype CSS (h :: k) = CSS {
- rules :: [Rule]
}
mapRules :: forall {k} (a :: k). (Rule -> Rule) -> CSS a -> CSS a
utility :: Styleable h => ClassName -> [Declaration] -> CSS h -> CSS h
cls :: Styleable h => ClassName -> CSS h -> CSS h
css :: Styleable h => ClassName -> Selector -> [Declaration] -> CSS h -> CSS h
rules :: (CSS [Rule] -> CSS [Rule]) -> [Rule]
declarations :: (CSS [Rule] -> CSS [Rule]) -> [Declaration]

Documentation

class Styleable h where Source #

Minimal complete definition

modCSS

Methods

(~) :: h -> (CSS h -> CSS h) -> h infixl 5 Source #

Apply a CSS utility to some html

el ~ bold . border 1 $ "styled"
el "styled" ~ bold . border 1
el "not styled"

modCSS :: ([Rule] -> [Rule]) -> h -> h Source #

Instances

Instances details

Styleable (Html a) Source #
Instance details Defined in Web.Atomic.Html Methods (~) :: Html a -> (CSS (Html a) -> CSS (Html a)) -> Html a Source # modCSS :: ([Rule] -> [Rule]) -> Html a -> Html a Source #
Styleable [Rule] Source #
Instance details Defined in Web.Atomic.Types.Styleable Methods (~) :: [Rule] -> (CSS [Rule] -> CSS [Rule]) -> [Rule] Source # modCSS :: ([Rule] -> [Rule]) -> [Rule] -> [Rule] Source #
Styleable (CSS h) Source #
Instance details Defined in Web.Atomic.Types.Styleable Methods (~) :: CSS h -> (CSS (CSS h) -> CSS (CSS h)) -> CSS h Source # modCSS :: ([Rule] -> [Rule]) -> CSS h -> CSS h Source #
(Styleable a, Styleable b) => Styleable (a -> b) Source #
Instance details Defined in Web.Atomic.Types.Styleable Methods (~) :: (a -> b) -> (CSS (a -> b) -> CSS (a -> b)) -> a -> b Source # modCSS :: ([Rule] -> [Rule]) -> (a -> b) -> a -> b Source #

newtype CSS (h :: k) Source #

Constructors

CSS
Fields rules :: [Rule]

Instances

Instances details

Styleable (CSS h) Source #
Instance details Defined in Web.Atomic.Types.Styleable Methods (~) :: CSS h -> (CSS (CSS h) -> CSS (CSS h)) -> CSS h Source # modCSS :: ([Rule] -> [Rule]) -> CSS h -> CSS h Source #
Monoid (CSS h) Source #
Instance details Defined in Web.Atomic.Types.Styleable Methods mempty :: CSS h # mappend :: CSS h -> CSS h -> CSS h # mconcat :: [CSS h] -> CSS h #
Semigroup (CSS h) Source #
Instance details Defined in Web.Atomic.Types.Styleable Methods (<>) :: CSS h -> CSS h -> CSS h # sconcat :: NonEmpty (CSS h) -> CSS h # stimes :: Integral b => b -> CSS h -> CSS h #

mapRules :: forall {k} (a :: k). (Rule -> Rule) -> CSS a -> CSS a Source #

utility :: Styleable h => ClassName -> [Declaration] -> CSS h -> CSS h Source #

Create an atomic CSS utility. These are classes that set a single property, allowing you to compose styles like functions

bold :: Styleable h => CSS h -> CSS h
bold = utility "bold" ["font-weight" :. "bold"]

pad :: Styleable h => PxRem -> CSS h -> CSS h
pad px = utility ("pad" -. px) ["padding" :. style px]

example = el ~ bold . pad 10 $ "Padded and bold"

cls :: Styleable h => ClassName -> CSS h -> CSS h Source #

Apply a class name with no styles. Useful for external CSS

el ~ cls "parent" $ do
  el ~ cls "item" $ "one"
  el ~ cls "item" $ "two"

css :: Styleable h => ClassName -> Selector -> [Declaration] -> CSS h -> CSS h Source #

Embed CSS with a custom selector and apply it to an element. Modifiers like hover will ignore this

listItems =
  css
    "list"
    ".list > .item"
    [ "display" :. "list-item"
    , "list-style" :. "square"
    ]

example = do
  el ~ listItems $ do
    el ~ cls "item" $ "one"
    el ~ cls "item" $ "two"
    el ~ cls "item" $ "three"

rules :: (CSS [Rule] -> CSS [Rule]) -> [Rule] Source #

Get all the rules for combined utilities

declarations :: (CSS [Rule] -> CSS [Rule]) -> [Declaration] Source #

Get all the declarations for a utility or combination of them