Module

React.Basic.Emotion

Package
purescript-react-basic-emotion
Repository
lumihq/purescript-react-basic-emotion

#ch Source

ch :: Number -> StyleProperty

Relative to the width of the "0" (zero) character.

#IsStyle Source

class IsStyle a  where

Members

Instances

#IsStyleProperty Source

class IsStyleProperty a  where

Members

Instances

#cm Source

cm :: Number -> StyleProperty

Centimeters

#css Source

css :: forall r. Homogeneous r StyleProperty => Record r -> Style

#element Source

element :: forall props. ReactComponent { className :: String | props } -> { className :: String, css :: Style | props } -> JSX

Create a JSX node from a ReactComponent, by providing the props.

This function is identical to React.Basic.element plus Emotion's css prop.

#elementKeyed Source

elementKeyed :: forall props. ReactComponent { className :: String | props } -> { className :: String, css :: Style, key :: String | props } -> JSX

Create a JSX node from a ReactComponent, by providing the props.

This function is identical to React.Basic.element plus Emotion's css prop.

#em Source

em :: Number -> StyleProperty

Relative to the font-size of the element (2em means 2 times the size of the current font).

#ex Source

ex :: Number -> StyleProperty

Relative to the x-height of the current font (rarely used).

#global Source

global :: ReactComponent { styles :: Style }

#inches Source

inches :: Number -> StyleProperty

Inches (1in ≈ 2.54cm)

#int Source

int :: Int -> StyleProperty

Create a unitless Int property.

Wherever units may be specified, use unit combinators like px or em instead.

#keyframes Source

keyframes :: forall r. Homogeneous r Style => Record r -> StyleProperty

#mm Source

mm :: Number -> StyleProperty

Milimeters

#num Source

num :: Number -> StyleProperty

Create a unitless Number property.

Wherever units may be specified, use unit combinators like px or em instead.

#pc Source

pc :: Number -> StyleProperty

Picas (1pc = 12 pt)

#percent Source

percent :: Number -> StyleProperty

Relative to the parent element.

#pt Source

pt :: Number -> StyleProperty

Points (1pt = 1/72 of 1in)

#px Source

px :: Int -> StyleProperty

Pixels. This function does not take a Number because approaches to subpixel rendering vary among browser implementations.

#px' Source

px' :: Number -> StyleProperty

Pixels and subpixels.

WARNING: Approaches to subpixel rendering vary among browser implementations. This means that non-integer pixel values may be displayed differently in different browsers.

#px4 Source

px4 :: Int -> Int -> Int -> Int -> StyleProperty

#rem Source

rem :: Number -> StyleProperty

Relative to font-size of the root element.

#var Source

var :: String -> StyleProperty

Use a variable name as a property.

Define a property somewhere:

css { "--color-primary": color blue }

Use the var:

css { color: var "--color-primary" }

#vh Source

vh :: Number -> StyleProperty

Relative to 1% of the height of the viewport.

#vmax Source

vmax :: Number -> StyleProperty

Relative to 1% of viewport's larger dimension.

#vmin Source

vmin :: Number -> StyleProperty

Relative to 1% of viewport's smaller dimension.

#vw Source

vw :: Number -> StyleProperty

Relative to 1% of the width of the viewport.

Modules
React.Basic.Emotion