web-view-0.2.1.1: Type-safe HTML and CSS with intuitive layouts and composable styles.
Safe HaskellSafe-Inferred
LanguageGHC2021

Web.View.Style

Synopsis

Styles

width :: PxRem -> Mod Source #

Set to a specific width

height :: PxRem -> Mod Source #

Set to a specific height

minWidth :: PxRem -> Mod Source #

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

minHeight :: PxRem -> Mod Source #

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

pad :: Sides PxRem -> 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 :: PxRem -> Mod Source #

The space between child elements. See pad

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 :: PxRem -> 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

hide :: Mod Source #

Hide an element. See parent and media

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

data Align Source #

Constructors

Center 

Instances

Instances details
Show Align Source # 
Instance details

Defined in Web.View.Style

Methods

showsPrec :: Int -> Align -> ShowS #

show :: Align -> String #

showList :: [Align] -> ShowS #

ToClassName Align Source # 
Instance details

Defined in Web.View.Style

ToStyleValue Align Source # 
Instance details

Defined in Web.View.Style

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"

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