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

vw :: Number -> StyleProperty

Relative to 1% of the width of the viewport.

vmin :: Number -> StyleProperty

Relative to 1% of viewport's smaller dimension.

vmax :: Number -> StyleProperty

Relative to 1% of viewport's larger dimension.

vh :: Number -> StyleProperty

Relative to 1% of the height of the viewport.

url :: URL -> StyleProperty

unset :: StyleProperty

str :: String -> StyleProperty

rem :: Number -> StyleProperty

Relative to font-size of the root element.

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.

pt :: Number -> StyleProperty

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

percent :: Number -> StyleProperty

Relative to the parent element.

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

none :: StyleProperty

nested :: Style -> StyleProperty

mm :: Number -> StyleProperty

Milimeters

merge :: Array Style -> Style

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

inherit :: StyleProperty

inches :: Number -> StyleProperty

Inches (1in ≈ 2.54cm)

important :: StyleProperty -> StyleProperty

fallbacks :: Array StyleProperty -> StyleProperty

ex :: Number -> StyleProperty

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

em :: Number -> StyleProperty

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

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

color :: Color -> StyleProperty

cm :: Number -> StyleProperty

Centimeters

ch :: Number -> StyleProperty

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