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

#StyleProperty Source

data StyleProperty

Instances

#Style Source

data Style

Instances

#IsStyle Source

class IsStyle a

Instances

IsStyle Style

#IsStyleProperty Source

class IsStyleProperty a  where

Members

prop :: a -> StyleProperty

Instances

IsStyleProperty StyleProperty

#wrap Source

wrap :: StyleProperty

#vw4 Source

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

#vw2 Source

vw2 :: Number -> Number -> StyleProperty

#vw Source

vw :: Number -> StyleProperty

Relative to 1% of the width of the viewport.

#vmin4 Source

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

#vmin2 Source

vmin2 :: Number -> Number -> StyleProperty

#vmin Source

vmin :: Number -> StyleProperty

Relative to 1% of viewport's smaller dimension.

#vmax4 Source

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

#vmax2 Source

vmax2 :: Number -> Number -> StyleProperty

#vmax Source

vmax :: Number -> StyleProperty

Relative to 1% of viewport's larger dimension.

#visible Source

visible :: StyleProperty

#vh4 Source

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

#vh2 Source

vh2 :: Number -> Number -> StyleProperty

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

#url Source

url :: URL -> StyleProperty

#unset Source

unset :: StyleProperty

#underline Source

underline :: StyleProperty

#stretch Source

stretch :: StyleProperty

#str Source

str :: String -> StyleProperty

#sticky Source

sticky :: StyleProperty

#spaceEvenly Source

spaceEvenly :: StyleProperty

#spaceBetween Source

spaceBetween :: StyleProperty

#spaceAround Source

spaceAround :: StyleProperty

#solid Source

solid :: StyleProperty

#scroll Source

scroll :: StyleProperty

#row Source

row :: StyleProperty

#revert Source

revert :: StyleProperty

#rem4 Source

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

#rem2 Source

rem2 :: Number -> Number -> StyleProperty

#rem Source

rem :: Number -> StyleProperty

Relative to font-size of the root element.

#relative Source

relative :: StyleProperty

#px4' Source

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

#px4 Source

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

#px2' Source

px2' :: Number -> Number -> StyleProperty

#px2 Source

px2 :: 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.

#pt4 Source

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

#pt2 Source

pt2 :: Number -> Number -> StyleProperty

#pt Source

pt :: Number -> StyleProperty

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

#preWrap Source

preWrap :: StyleProperty

#pointer Source

pointer :: StyleProperty

#percent4 Source

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

#percent2 Source

percent2 :: Number -> Number -> StyleProperty

#percent Source

percent :: Number -> StyleProperty

Relative to the parent element.

#pc4 Source

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

#pc2 Source

pc2 :: Number -> Number -> StyleProperty

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

#nowrap Source

nowrap :: StyleProperty

#none Source

none :: StyleProperty

#nested Source

nested :: Style -> StyleProperty

#mm4 Source

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

#mm2 Source

mm2 :: Number -> Number -> StyleProperty

#mm Source

mm :: Number -> StyleProperty

Milimeters

#minContent Source

minContent :: StyleProperty

#merge Source

merge :: Array Style -> Style

#maxContent Source

maxContent :: StyleProperty

#manipulation Source

manipulation :: StyleProperty

#keyframes Source

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

#int Source

int :: Int -> StyleProperty

Create a unitless Int property.

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

#inlineGrid Source

inlineGrid :: StyleProperty

#inlineFlex Source

inlineFlex :: StyleProperty

#inlineBlock Source

inlineBlock :: StyleProperty

#initial Source

initial :: StyleProperty

#inherit Source

inherit :: StyleProperty

#inches4 Source

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

#inches2 Source

inches2 :: Number -> Number -> StyleProperty

#inches Source

inches :: Number -> StyleProperty

Inches (1in ≈ 2.54cm)

#important Source

important :: StyleProperty -> StyleProperty

#hidden Source

hidden :: StyleProperty

#grid Source

grid :: StyleProperty

#global Source

global :: ReactComponent { styles :: Style }

#flexStart Source

flexStart :: StyleProperty

#flexEnd Source

flexEnd :: StyleProperty

#flex Source

flex :: StyleProperty

#fixed Source

fixed :: StyleProperty

#fallbacks Source

fallbacks :: Array StyleProperty -> StyleProperty

#ex4 Source

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

#ex2 Source

ex2 :: Number -> Number -> StyleProperty

#ex Source

ex :: Number -> StyleProperty

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

#em4 Source

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

#em2 Source

em2 :: Number -> Number -> StyleProperty

#em Source

em :: Number -> StyleProperty

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

#ellipsis Source

ellipsis :: StyleProperty

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

#default Source

default :: StyleProperty

#css Source

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

#contentBox Source

contentBox :: StyleProperty

#column Source

column :: StyleProperty

#color Source

color :: Color -> StyleProperty

#cm4 Source

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

#cm2 Source

cm2 :: Number -> Number -> StyleProperty

#cm Source

cm :: Number -> StyleProperty

Centimeters

#ch4 Source

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

#ch2 Source

ch2 :: Number -> Number -> StyleProperty

#ch Source

ch :: Number -> StyleProperty

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

#center Source

center :: StyleProperty

#borderBox Source

borderBox :: StyleProperty

#block Source

block :: StyleProperty

#baseline Source

baseline :: StyleProperty

#auto Source

auto :: StyleProperty

#absolute Source

absolute :: StyleProperty

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