Safe Haskell	Safe-Inferred
Language	GHC2021

Web.View.Style

Contents

Styles
Selector Modifiers
Creating New Styles

Synopsis

width :: Length -> Mod
height :: Length -> Mod
minWidth :: Length -> Mod
minHeight :: Length -> Mod
pad :: Sides Length -> Mod
gap :: Length -> Mod
fontSize :: Length -> Mod
flexRow :: Mod
flexCol :: Mod
shadow :: Mod
rounded :: Length -> Mod
bg :: ToColor c => c -> Mod
color :: ToColor c => c -> Mod
bold :: Mod
hide :: Mod
opacity :: Float -> Mod
border :: Sides PxRem -> Mod
borderColor :: ToColor c => c -> Mod
pointer :: Mod
truncate :: Mod
transition :: Ms -> TransitionProperty -> Mod
data TransitionProperty
- = Width PxRem
- | Height PxRem
textAlign :: Align -> Mod
hover :: Mod -> Mod
active :: Mod -> Mod
even :: Mod -> Mod
odd :: Mod -> Mod
media :: Media -> Mod -> Mod
parent :: Text -> Mod -> Mod
applyPseudo :: Pseudo -> Mod -> Mod
mapModClass :: (Class -> Class) -> Mod -> Mod
addClass :: Class -> Mod
cls :: ClassName -> Class
prop :: ToStyleValue val => Name -> val -> Class -> Class
(-.) :: ToClassName a => ClassName -> a -> ClassName

Styles

width :: Length -> Mod Source #

Set to a specific width

height :: Length -> Mod Source #

Set to a specific height

minWidth :: Length -> Mod Source #

Allow width to grow to contents but not shrink any smaller than value

minHeight :: Length -> Mod Source #

Allow height to grow to contents but not shrink any smaller than value

pad :: Sides Length -> Mod Source #

Space surrounding the children of the element

To create even spacing around and between all elements:

col (pad 10 . gap 10) $ do
  el_ "one"
  el_ "two"
  el_ "three"

gap :: Length -> Mod Source #

The space between child elements. See pad

fontSize :: Length -> Mod Source #

flexRow :: Mod Source #

Set container to be a row. Favor row when possible

flexCol :: Mod Source #

Set container to be a column. Favor col when possible

shadow :: Mod Source #

Adds a basic drop shadow to an element

rounded :: Length -> Mod Source #

Round the corners of the element

bg :: ToColor c => c -> Mod Source #

Set the background color. See ToColor

color :: ToColor c => c -> Mod Source #

Set the text color. See ToColor

bold :: Mod Source #

hide :: Mod Source #

Hide an element. See parent and media

opacity :: Float -> Mod Source #

border :: Sides PxRem -> Mod Source #

Set a border around the element

el (border 1) "all sides"
el (border (X 1)) "only left and right"

borderColor :: ToColor c => c -> Mod Source #

Set a border color. See ToColor

pointer :: Mod Source #

Use a button-like cursor when hovering over the element

Button-like elements:

btn = pointer . bg Primary . hover (bg PrimaryLight)

options = row id $ do
  el btn "Login"
  el btn "Sign Up"

truncate :: Mod Source #

Cut off the contents of the element

transition :: Ms -> TransitionProperty -> Mod Source #

Animate changes to the given property

el (transition 100 (Height 400)) "Tall"
el (transition 100 (Height 100)) "Small"

data TransitionProperty Source #

Constructors

Width PxRem
Height PxRem

Instances

Instances details

Show TransitionProperty Source #
Instance details Defined in Web.View.Style Methods showsPrec :: Int -> TransitionProperty -> ShowS # show :: TransitionProperty -> String # showList :: [TransitionProperty] -> ShowS #

textAlign :: Align -> Mod Source #

Selector Modifiers

hover :: Mod -> Mod Source #

Apply when hovering over an element

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

active :: Mod -> Mod Source #

Apply when the mouse is pressed down on an element

even :: Mod -> Mod Source #

Apply to even-numbered children

odd :: Mod -> Mod Source #

Apply to odd-numbered children

media :: Media -> Mod -> Mod Source #

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

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

parent :: Text -> Mod -> Mod Source #

Apply when the element is somewhere inside an anscestor.

For example, the HTMX library applies an "htmx-request" class to the body when a request is pending. We can use this to create a loading indicator

el (pad 10) $ do
  el (parent "htmx-request" flexRow . hide) "Loading..."
  el (parent "htmx-request" hide . flexRow) "Normal Content"

applyPseudo :: Pseudo -> Mod -> Mod Source #

mapModClass :: (Class -> Class) -> Mod -> Mod Source #

Creating New Styles

addClass :: Class -> Mod Source #

Add a single class

width :: PxRem -> Mod
width n =
  addClass
    $ cls ("w" -. n)
    & prop "width" n
    & prop @Int "flex-shrink" 0

cls :: ClassName -> Class Source #

Construct a class from a ClassName

prop :: ToStyleValue val => Name -> val -> Class -> Class Source #

Add a property to a class

(-.) :: ToClassName a => ClassName -> a -> ClassName infixl 6 Source #

Hyphneate classnames