Lumi.Styles

type StyleModifier = forall props. PropsModifier props

style :: (LumiTheme -> Style) -> StyleModifier

Lift a themed set of styles into a StyleModifier for composition with other modifiers.

style_ :: Style -> StyleModifier

Lift a static set of styles into a StyleModifier for composition with other modifiers.

styles :: Array (LumiTheme -> Style) -> StyleModifier

Lift an array of themed styles into a StyleModifier for composition with other modifiers.

styles_ :: Array Style -> StyleModifier

Lift an array of static styles into a StyleModifier for composition with other modifiers.

toCSS :: PropsModifier () -> LumiTheme -> Style

Flatten a PropsModifier and extract the Emotion styles for use with React.Basic.Emotion.element. This function is mainly used inside component implementations where the LumiComponent boundary gives way to DOM components or other ReactComponents.

data StyleProperty

Instances

• Semigroup StyleProperty
• Monoid StyleProperty
• IsStyleProperty StyleProperty

data Style

Instances

• Semigroup Style
• Monoid Style
• IsStyle Style

class IsStyle a 

Instances

• IsStyle Style

class IsStyleProperty a  where

Members

• prop :: a -> StyleProperty

Instances

• IsStyleProperty StyleProperty

wrap :: StyleProperty

vw4 :: Number -> Number -> Number -> Number -> StyleProperty

vw2 :: Number -> Number -> StyleProperty

vw :: Number -> StyleProperty

Relative to 1% of the width of the viewport.

vmin4 :: Number -> Number -> Number -> Number -> StyleProperty

vmin2 :: Number -> Number -> StyleProperty

vmin :: Number -> StyleProperty

Relative to 1% of viewport's smaller dimension.

vmax4 :: Number -> Number -> Number -> Number -> StyleProperty

vmax2 :: Number -> Number -> StyleProperty

vmax :: Number -> StyleProperty

Relative to 1% of viewport's larger dimension.

visible :: StyleProperty

vh4 :: Number -> Number -> Number -> Number -> StyleProperty

vh2 :: Number -> Number -> StyleProperty

vh :: Number -> StyleProperty

Relative to 1% of the height of the viewport.

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" }

url :: URL -> StyleProperty

unset :: StyleProperty

underline :: StyleProperty

stretch :: StyleProperty

str :: String -> StyleProperty

sticky :: StyleProperty

spaceEvenly :: StyleProperty

spaceBetween :: StyleProperty

spaceAround :: StyleProperty

solid :: StyleProperty

scroll :: StyleProperty

row :: StyleProperty

revert :: StyleProperty

rem4 :: Number -> Number -> Number -> Number -> StyleProperty

rem2 :: Number -> Number -> StyleProperty

rem :: Number -> StyleProperty

Relative to font-size of the root element.

relative :: StyleProperty

px4' :: Number -> Number -> Number -> Number -> StyleProperty

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

px2' :: Number -> Number -> StyleProperty

px2 :: Int -> Int -> StyleProperty

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.

px :: Int -> StyleProperty

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

pt4 :: Number -> Number -> Number -> Number -> StyleProperty

pt2 :: Number -> Number -> StyleProperty

pt :: Number -> StyleProperty

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

preWrap :: StyleProperty

pointer :: StyleProperty

percent4 :: Number -> Number -> Number -> Number -> StyleProperty

percent2 :: Number -> Number -> StyleProperty

percent :: Number -> StyleProperty

Relative to the parent element.

pc4 :: Number -> Number -> Number -> Number -> StyleProperty

pc2 :: Number -> Number -> StyleProperty

pc :: Number -> StyleProperty

Picas (1pc = 12 pt)

num :: Warn (Text "`int` is deprecated and may be removed in future versions. Prefer `str` or one of the unit combinators like `px` or `em` instead.") => Number -> StyleProperty

nowrap :: StyleProperty

none :: StyleProperty

nested :: Style -> StyleProperty

mm4 :: Number -> Number -> Number -> Number -> StyleProperty

mm2 :: Number -> Number -> StyleProperty

mm :: Number -> StyleProperty

Milimeters

minContent :: StyleProperty

merge :: Array Style -> Style

maxContent :: StyleProperty

manipulation :: StyleProperty

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

int :: Warn (Text "`int` is deprecated and may be removed in future versions. Prefer `str` or one of the unit combinators like `px` or `em` instead.") => Int -> StyleProperty

inlineGrid :: StyleProperty

inlineFlex :: StyleProperty

inlineBlock :: StyleProperty

initial :: StyleProperty

inherit :: StyleProperty

inches4 :: Number -> Number -> Number -> Number -> StyleProperty

inches2 :: Number -> Number -> StyleProperty

inches :: Number -> StyleProperty

Inches (1in ≈ 2.54cm)

important :: StyleProperty -> StyleProperty

hidden :: StyleProperty

grid :: StyleProperty

global :: ReactComponent { styles :: Style }

flexStart :: StyleProperty

flexEnd :: StyleProperty

flex :: StyleProperty

fixed :: StyleProperty

fallbacks :: Array StyleProperty -> StyleProperty

ex4 :: Number -> Number -> Number -> Number -> StyleProperty

ex2 :: Number -> Number -> StyleProperty

ex :: Number -> StyleProperty

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

em4 :: Number -> Number -> Number -> Number -> StyleProperty

em2 :: Number -> Number -> StyleProperty

em :: Number -> StyleProperty

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

ellipsis :: StyleProperty

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.

default :: StyleProperty

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

contentBox :: StyleProperty

column :: StyleProperty

color :: Color -> StyleProperty

cm4 :: Number -> Number -> Number -> Number -> StyleProperty

cm2 :: Number -> Number -> StyleProperty

cm :: Number -> StyleProperty

Centimeters

ch4 :: Number -> Number -> Number -> Number -> StyleProperty

ch2 :: Number -> Number -> StyleProperty

ch :: Number -> StyleProperty

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

center :: StyleProperty

borderBox :: StyleProperty

block :: StyleProperty

baseline :: StyleProperty

auto :: StyleProperty

absolute :: StyleProperty