Module

Lumi.Styles

Package
purescript-lumi-components
Repository
lumihq/purescript-lumi-components

#StyleModifier Source

type StyleModifier = forall props. PropsModifier props

#style Source

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

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

#style_ Source

style_ :: Style -> StyleModifier

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

#styles Source

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

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

#styles_ Source

styles_ :: Array Style -> StyleModifier

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

#toCSS Source

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.

Re-exports from React.Basic.Emotion

#IsStyle Source

class IsStyle a 

Instances

#IsStyleProperty Source

class IsStyleProperty a  where

Members

Instances

#vw Source

vw :: Number -> StyleProperty

Relative to 1% of the width of the viewport.

#vmin Source

vmin :: Number -> StyleProperty

Relative to 1% of viewport's smaller dimension.

#vmax Source

vmax :: Number -> StyleProperty

Relative to 1% of viewport's larger dimension.

#vh Source

vh :: Number -> StyleProperty

Relative to 1% of the height of the viewport.

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

#rem Source

rem :: Number -> StyleProperty

Relative to font-size of the root element.

#px4 Source

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

#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.

#px Source

px :: Int -> StyleProperty

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

#pt Source

pt :: Number -> StyleProperty

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

#percent Source

percent :: Number -> StyleProperty

Relative to the parent element.

#pc Source

pc :: Number -> StyleProperty

Picas (1pc = 12 pt)

#num Source

num :: Number -> StyleProperty

Create a unitless Number property.

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

#mm Source

mm :: Number -> StyleProperty

Milimeters

#keyframes Source

#int Source

int :: Int -> StyleProperty

Create a unitless Int property.

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

#inches Source

inches :: Number -> StyleProperty

Inches (1in ≈ 2.54cm)

#global Source

global :: ReactComponent { styles :: Style }

#ex Source

ex :: Number -> StyleProperty

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

#em Source

em :: Number -> StyleProperty

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

#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.

#css Source

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

#cm Source

cm :: Number -> StyleProperty

Centimeters

#ch Source

ch :: Number -> StyleProperty

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

Modules
JSS
Lumi.Components
Lumi.Components.Badge
Lumi.Components.Border
Lumi.Components.Breadcrumb
Lumi.Components.Button
Lumi.Components.ButtonGroup
Lumi.Components.Card
Lumi.Components.CardGrid
Lumi.Components.Color
Lumi.Components.Column
Lumi.Components.Details
Lumi.Components.Divider
Lumi.Components.DropdownButton
Lumi.Components.EditableTable
Lumi.Components.FetchCache
Lumi.Components.FixedPrecisionInput
Lumi.Components.Form
Lumi.Components.Form.Defaults
Lumi.Components.Form.Internal
Lumi.Components.Form.Table
Lumi.Components.Form.Validation
Lumi.Components.Icon
Lumi.Components.Images
Lumi.Components.Input
Lumi.Components.InputGroup
Lumi.Components.LabeledField
Lumi.Components.Layouts
Lumi.Components.Layouts.Centered
Lumi.Components.Layouts.OneColumnWithHeader
Lumi.Components.Layouts.Tabs
Lumi.Components.Link
Lumi.Components.List
Lumi.Components.Loader
Lumi.Components.Lockup
Lumi.Components.Modal
Lumi.Components.NativeSelect
Lumi.Components.Navigation
Lumi.Components.Orientation
Lumi.Components.Pagination
Lumi.Components.Pill
Lumi.Components.Progress
Lumi.Components.Responsive
Lumi.Components.Row
Lumi.Components.Select
Lumi.Components.Select.Backend
Lumi.Components.Size
Lumi.Components.Slider
Lumi.Components.Spacing
Lumi.Components.Status
Lumi.Components.StatusSlat
Lumi.Components.Styles
Lumi.Components.Svg
Lumi.Components.Tab
Lumi.Components.Table
Lumi.Components.Table.FilterDropdown
Lumi.Components.Text
Lumi.Components.Textarea
Lumi.Components.Toast
Lumi.Components.Tooltip
Lumi.Components.Upload
Lumi.Components.Wizard
Lumi.Components.ZIndex
Lumi.Components2.Box
Lumi.Components2.Button
Lumi.Components2.ButtonGroup
Lumi.Components2.Clip
Lumi.Components2.Image
Lumi.Components2.Link
Lumi.Components2.PasswordStrength
Lumi.Components2.QRCode
Lumi.Components2.ScrollObserver
Lumi.Components2.Slat
Lumi.Components2.Tabs
Lumi.Components2.Text
Lumi.Styles
Lumi.Styles.Border
Lumi.Styles.Box
Lumi.Styles.Clip
Lumi.Styles.Link
Lumi.Styles.Loader
Lumi.Styles.Responsive
Lumi.Styles.Slat
Lumi.Styles.Theme