Clay

clay-0.15.0: CSS preprocessor as embedded Haskell.

Safe Haskell | None
Language | Haskell2010

Clay

Contents

- Rendering stylesheets to CSS.
- The `Css` monad for collecting style rules.
  - Comments
- The selector language.
  - Elements selectors.
  - Refining selectors.
  - Attribute based refining.
- Apply media queries.
- Apply key-frame animation.
- Define font-faces.
- !important
- Import other CSS files
- Pseudo elements and classes.
- HTML5 attribute and element names.
- Commonly used value types.
- Values shared between multiple properties.
- Embedded style properties.
- Writing your own properties.

Synopsis

- render :: Css -> Text
- renderWith :: Config -> [App] -> Css -> Text
- putCss :: Css -> IO ()
- pretty :: Config
- compact :: Config
- renderSelector :: Selector -> Text
- type Css = StyleM ()
- (?) :: Selector -> Css -> Css
- (<?) :: Selector -> Css -> Css
- (&) :: Refinement -> Css -> Css
- root :: Selector -> Css -> Css
- pop :: Int -> Css -> Css
- (-:) :: Key Text -> Text -> Css
- commenting :: CommentText -> Css -> Css
- type Selector = Fix SelectorF
- data Refinement
- star :: Selector
- element :: Text -> Selector
- (**) :: Selector -> Selector -> Selector
- (|>) :: Selector -> Selector -> Selector
- (#) :: Selector -> Refinement -> Selector
- (|+) :: Selector -> Selector -> Selector
- (|~) :: Selector -> Selector -> Selector
- byId :: Text -> Refinement
- byClass :: Text -> Refinement
- pseudo :: Text -> Refinement
- func :: Text -> [Text] -> Refinement
- attr :: Text -> Refinement
- (@=) :: Text -> Text -> Refinement
- (^=) :: Text -> Text -> Refinement
- ($=) :: Text -> Text -> Refinement
- (*=) :: Text -> Text -> Refinement
- (~=) :: Text -> Text -> Refinement
- (|=) :: Text -> Text -> Refinement
- query :: MediaType -> [Feature] -> Css -> Css
- queryNot :: MediaType -> [Feature] -> Css -> Css
- queryOnly :: MediaType -> [Feature] -> Css -> Css
- keyframes :: Text -> [(Number, Css)] -> Css
- keyframesFromTo :: Text -> Css -> Css -> Css
- fontFace :: Css -> Css
- important :: Css -> Css
- importUrl :: Text -> Css
- inRange :: Refinement
- not :: Selector -> Refinement
- empty :: Refinement
- optional :: Refinement
- link :: Refinement
- valid :: Refinement
- target :: Refinement
- checked :: Refinement
- disabled :: Refinement
- after :: Refinement
- before :: Refinement
- firstLetter :: Refinement
- firstLine :: Refinement
- selection :: Refinement
- backdrop :: Refinement
- visited :: Refinement
- active :: Refinement
- hover :: Refinement
- focus :: Refinement
- firstChild :: Refinement
- lastChild :: Refinement
- enabled :: Refinement
- firstOfType :: Refinement
- indeterminate :: Refinement
- invalid :: Refinement
- lastOfType :: Refinement
- onlyChild :: Refinement
- onlyOfType :: Refinement
- outOfRange :: Refinement
- nthChild :: Text -> Refinement
- nthLastChild :: Text -> Refinement
- nthLastOfType :: Text -> Refinement
- nthOfType :: Text -> Refinement
- loop :: Refinement
- max :: Refinement
- min :: Refinement
- id :: Refinement
- step :: Refinement
- list :: Refinement
- for :: Refinement
- pattern :: Refinement
- default_ :: Refinement
- required :: Refinement
- lang :: Refinement
- wrap :: Refinement
- icon :: Refinement
- accept :: Refinement
- acceptCharset :: Refinement
- accesskey :: Refinement
- action :: Refinement
- alt :: Refinement
- async :: Refinement
- autocomplete :: Refinement
- autofocus :: Refinement
- autoplay :: Refinement
- challenge :: Refinement
- charset :: Refinement
- cols :: Refinement
- colspan :: Refinement
- contenteditable :: Refinement
- contextmenu :: Refinement
- controls :: Refinement
- coords :: Refinement
- crossorigin :: Refinement
- datetime :: Refinement
- defer :: Refinement
- dir :: Refinement
- dirname :: Refinement
- download :: Refinement
- draggable :: Refinement
- dropzone :: Refinement
- enctype :: Refinement
- formaction :: Refinement
- formenctype :: Refinement
- formmethod :: Refinement
- formnovalidate :: Refinement
- formtarget :: Refinement
- headers :: Refinement
- high :: Refinement
- href :: Refinement
- hreflang :: Refinement
- httpEquiv :: Refinement
- inert :: Refinement
- inputmode :: Refinement
- ismap :: Refinement
- itemid :: Refinement
- itemprop :: Refinement
- itemref :: Refinement
- itemscope :: Refinement
- itemtype :: Refinement
- keytype :: Refinement
- kind :: Refinement
- low :: Refinement
- manifest :: Refinement
- maxlength :: Refinement
- media :: Refinement
- mediagroup :: Refinement
- method :: Refinement
- multiple :: Refinement
- muted :: Refinement
- name :: Refinement
- novalidate :: Refinement
- open :: Refinement
- optimum :: Refinement
- ping :: Refinement
- placeholder :: Refinement
- poster :: Refinement
- preload :: Refinement
- radiogroup :: Refinement
- readonly :: Refinement
- rel :: Refinement
- reversed :: Refinement
- rows :: Refinement
- rowspan :: Refinement
- sandbox :: Refinement
- scope :: Refinement
- scoped :: Refinement
- seamless :: Refinement
- selected :: Refinement
- shape :: Refinement
- sizes :: Refinement
- spellcheck :: Refinement
- src :: Refinement
- srcdoc :: Refinement
- srclang :: Refinement
- srcset :: Refinement
- tabindex :: Refinement
- type_ :: Refinement
- typemustmatch :: Refinement
- usemap :: Refinement
- base :: Selector
- time :: Selector
- map :: Selector
- div :: Selector
- head :: Selector
- span :: IsString a => a
- option :: Selector
- label :: IsString a => a
- select :: Selector
- style :: IsString a => a
- table :: Selector
- menu :: Selector
- caption :: Selector
- small :: Selector
- pre :: Selector
- a :: Selector
- abbr :: IsString a => a
- cite :: IsString a => a
- command :: IsString a => a
- data_ :: IsString a => a
- form :: IsString a => a
- title :: IsString a => a
- s :: Selector
- p :: Selector
- b :: Selector
- u :: Selector
- i :: Selector
- q :: Selector
- code :: Selector
- br :: Selector
- h1 :: Selector
- address :: Selector
- area :: Selector
- article :: Selector
- aside :: Selector
- audio :: Selector
- bdi :: Selector
- bdo :: Selector
- blockquote :: Selector
- body :: Selector
- button :: Selector
- canvas :: Selector
- col :: Selector
- colgroup :: Selector
- datalist :: Selector
- dd :: Selector
- del :: Selector
- details :: Selector
- dfn :: Selector
- dialog :: Selector
- dl :: Selector
- dt :: Selector
- embed :: Selector
- fieldset :: Selector
- figcaption :: Selector
- figure :: Selector
- footer :: Selector
- h2 :: Selector
- h3 :: Selector
- h4 :: Selector
- h5 :: Selector
- h6 :: Selector
- header :: Selector
- hgroup :: Selector
- hr :: Selector
- html :: Selector
- iframe :: Selector
- img :: Selector
- input :: Selector
- ins :: Selector
- kbd :: Selector
- keygen :: Selector
- legend :: Selector
- li :: Selector
- main_ :: Selector
- mark :: Selector
- math :: Selector
- meta :: Selector
- meter :: Selector
- nav :: Selector
- noscript :: Selector
- object :: Selector
- ol :: Selector
- optgroup :: Selector
- output :: Selector
- param :: Selector
- progress :: Selector
- rp :: Selector
- rt :: Selector
- ruby :: Selector
- samp :: Selector
- script :: Selector
- section :: Selector
- source :: Selector
- strong :: Selector
- sub :: Selector
- summary :: Selector
- sup :: Selector
- svg :: Selector
- tbody :: Selector
- td :: Selector
- template :: Selector
- textarea :: Selector
- tfoot :: Selector
- th :: Selector
- thead :: Selector
- tr :: Selector
- track :: Selector
- ul :: Selector
- var :: Selector
- video :: Selector
- wbr :: Selector
- module Clay.Size
- module Clay.Color
- module Clay.Time
- module Clay.Common
- module Clay.Background
- module Clay.Border
- module Clay.Box
- inline :: Display
- data Overflow
- clear :: Clear -> Css
- float :: FloatStyle -> Css
- static :: Position
- data Display
- flex :: Display
- opacity :: Number -> Css
- data FloatStyle
- floatLeft :: FloatStyle
- floatRight :: FloatStyle
- data Clear
- both :: Clear
- clearLeft :: Clear
- clearRight :: Clear
- data Position
- position :: Position -> Css
- absolute :: Position
- fixed :: Position
- relative :: Position
- sticky :: Position
- display :: Display -> Css
- block :: Display
- listItem :: Display
- runIn :: Display
- inlineBlock :: Display
- displayTable :: Display
- inlineTable :: Display
- tableRowGroup :: Display
- tableHeaderGroup :: Display
- tableFooterGroup :: Display
- tableRow :: Display
- tableColumnGroup :: Display
- tableColumn :: Display
- tableCell :: Display
- tableCaption :: Display
- displayNone :: Display
- displayInherit :: Display
- inlineFlex :: Display
- grid :: Display
- inlineGrid :: Display
- scroll :: Overflow
- overflow :: Overflow -> Css
- overflowX :: Overflow -> Css
- overflowY :: Overflow -> Css
- data Visibility
- collapse :: Visibility
- separate :: Visibility
- visibility :: Visibility -> Css
- data Clip
- clip :: Clip -> Css
- rect :: Size a -> Size a -> Size a -> Size a -> Clip
- zIndex :: Integer -> Css
- data PointerEvents
- pointerEvents :: PointerEvents -> Css
- visiblePainted :: PointerEvents
- visibleFill :: PointerEvents
- visibleStroke :: PointerEvents
- painted :: PointerEvents
- fillEvents :: PointerEvents
- strokeEvents :: PointerEvents
- allEvents :: PointerEvents
- class Val a => VerticalAlign a where
  - verticalAlign :: a -> Css
- middle :: VerticalAlignValue
- vAlignSub :: VerticalAlignValue
- vAlignSuper :: VerticalAlignValue
- textTop :: VerticalAlignValue
- textBottom :: VerticalAlignValue
- vAlignTop :: VerticalAlignValue
- vAlignBottom :: VerticalAlignValue
- vAlignBaseline :: VerticalAlignValue
- class Val a => Cursor a where
  - cursor :: a -> Css
- cursorUrl :: Text -> CursorValue Value
- cursorDefault :: CursorValue Value
- contextMenu :: CursorValue Value
- help :: CursorValue Value
- pointer :: CursorValue Value
- cursorProgress :: CursorValue Value
- wait :: CursorValue Value
- cell :: CursorValue Value
- crosshair :: CursorValue Value
- cursorText :: CursorValue Value
- vText :: CursorValue Value
- alias :: CursorValue Value
- cursorCopy :: CursorValue Value
- move :: CursorValue Value
- noDrop :: CursorValue Value
- notAllowed :: CursorValue Value
- grab :: CursorValue Value
- grabbing :: CursorValue Value
- allScroll :: CursorValue Value
- colResize :: CursorValue Value
- rowResize :: CursorValue Value
- nResize :: CursorValue Value
- eResize :: CursorValue Value
- sResize :: CursorValue Value
- wResize :: CursorValue Value
- neResize :: CursorValue Value
- nwResize :: CursorValue Value
- seResize :: CursorValue Value
- swResize :: CursorValue Value
- ewResize :: CursorValue Value
- nsResize :: CursorValue Value
- neswResize :: CursorValue Value
- nwseResize :: CursorValue Value
- zoomIn :: CursorValue Value
- zoomOut :: CursorValue Value
- module Clay.Dynamic
- class FlexEnd a where
  - flexEnd :: a
- class FlexStart a where
  - flexStart :: a
- class SpaceAround a where
  - spaceAround :: a
- class SpaceBetween a where
  - spaceBetween :: a
- class SpaceEvenly a where
  - spaceEvenly :: a
- class Stretch a where
  - stretch :: a
- newtype AlignContentValue = AlignContentValue Value
- alignContent :: AlignContentValue -> Css
- newtype AlignItemsValue = AlignItemValue Value
- alignItems :: AlignItemsValue -> Css
- newtype AlignSelfValue = AlignSelfValue Value
- alignSelf :: AlignSelfValue -> Css
- flexBasis :: Size a -> Css
- newtype FlexDirection = FlexDirection Value
- row :: FlexDirection
- rowReverse :: FlexDirection
- column :: FlexDirection
- columnReverse :: FlexDirection
- flexDirection :: FlexDirection -> Css
- flexFlow :: FlexDirection -> FlexWrap -> Css
- newtype FlexWrap = FlexWrap Value
- flexGrow :: Int -> Css
- flexShrink :: Int -> Css
- wrapReverse :: FlexWrap
- flexWrap :: FlexWrap -> Css
- newtype JustifyContentValue = JustifyContentValue Value
- justifyContent :: JustifyContentValue -> Css
- order :: Int -> Css
- smaller :: FontSize
- larger :: FontSize
- class Val a => Font a where
  - font :: a -> Css
- data Optional = Optional (Maybe FontWeight) (Maybe FontVariant) (Maybe FontStyle)
- data Required a = Required (Size a) (Maybe (Size a)) [Text] [GenericFontFamily]
- fontColor :: Color -> Css
- color :: Color -> Css
- fontFamily :: [Text] -> [GenericFontFamily] -> Css
- sansSerif :: GenericFontFamily
- serif :: GenericFontFamily
- monospace :: GenericFontFamily
- cursive :: GenericFontFamily
- fantasy :: GenericFontFamily
- data FontSize
- fontSize :: Size a -> Css
- fontSizeCustom :: FontSize -> Css
- xxSmall :: FontSize
- xSmall :: FontSize
- medium :: FontSize
- large :: FontSize
- xLarge :: FontSize
- xxLarge :: FontSize
- data FontStyle
- fontStyle :: FontStyle -> Css
- italic :: FontStyle
- oblique :: FontStyle
- data FontVariant
- fontVariant :: FontVariant -> Css
- smallCaps :: FontVariant
- data FontWeight
- fontWeight :: FontWeight -> Css
- bold :: FontWeight
- bolder :: FontWeight
- lighter :: FontWeight
- weight :: Integer -> FontWeight
- data NamedFont
- messageBox :: NamedFont
- smallCaption :: NamedFont
- statusBar :: NamedFont
- lineHeight :: Size a -> Css
- module Clay.FontFace
- module Clay.Geometry
- module Clay.Gradient
- module Clay.Grid
- module Clay.List
- indent :: Size a -> TextIndent
- content :: Content -> Css
- start :: TextAlign
- nowrap :: WhiteSpace
- letterSpacing :: Size a -> Css
- wordSpacing :: Size a -> Css
- data TextRendering
- textRendering :: TextRendering -> Css
- optimizeSpeed :: TextRendering
- optimizeLegibility :: TextRendering
- geometricPrecision :: TextRendering
- textShadow :: Size a -> Size a -> Size a -> Color -> Css
- data TextIndent
- textIndent :: TextIndent -> Css
- eachLine :: TextIndent -> TextIndent
- hanging :: TextIndent -> TextIndent
- data TextDirection
- direction :: TextDirection -> Css
- ltr :: TextDirection
- rtl :: TextDirection
- data TextAlign
- textAlign :: TextAlign -> Css
- textAlignLast :: TextAlign -> Css
- justify :: TextAlign
- matchParent :: TextAlign
- end :: TextAlign
- alignSide :: Side -> TextAlign
- alignString :: Char -> TextAlign
- data WhiteSpace
- whiteSpace :: WhiteSpace -> Css
- preWrap :: WhiteSpace
- preLine :: WhiteSpace
- data TextDecoration
- textDecoration :: TextDecoration -> Css
- textDecorationStyle :: Stroke -> Css
- textDecorationLine :: TextDecoration -> Css
- textDecorationColor :: Color -> Css
- underline :: TextDecoration
- overline :: TextDecoration
- lineThrough :: TextDecoration
- blink :: TextDecoration
- data TextTransform
- textTransform :: TextTransform -> Css
- capitalize :: TextTransform
- uppercase :: TextTransform
- lowercase :: TextTransform
- fullWidth :: TextTransform
- data TextOverflow
- textOverflow :: TextOverflow -> Css
- overflowClip :: TextOverflow
- overflowEllipsis :: TextOverflow
- data WordBreak
- wordBreak :: WordBreak -> Css
- breakAll :: WordBreak
- keepAll :: WordBreak
- data OverflowWrap
- overflowWrap :: OverflowWrap -> Css
- wordWrap :: OverflowWrap -> Css
- breakWord :: OverflowWrap
- hyphens :: Hyphens -> Css
- hyphenateCharacter :: HyphenateCharacter -> Css
- hyphenateLimitChars :: HyphenateLimit -> HyphenateLimit -> HyphenateLimit -> Css
- manual :: Hyphens
- data Hyphens
- data HyphenateCharacter
- data HyphenateLimit
- data Content
- contents :: [Content] -> Css
- attrContent :: Text -> Content
- stringContent :: Text -> Content
- uriContent :: Text -> Content
- urlContent :: Text -> Content
- openQuote :: Content
- closeQuote :: Content
- noOpenQuote :: Content
- noCloseQuote :: Content
- module Clay.Transform
- module Clay.Transition
- module Clay.Animation
- xor :: MaskComposite
- class Val a => Mask a where
  - mask :: a -> Css
- copy :: MaskComposite
- data MaskComposite
- sourceOver :: MaskComposite
- sourceIn :: MaskComposite
- sourceOut :: MaskComposite
- sourceAtop :: MaskComposite
- destinationOver :: MaskComposite
- destinationIn :: MaskComposite
- destinationOut :: MaskComposite
- destinationAtop :: MaskComposite
- maskComposite :: MaskComposite -> Css
- maskComposites :: [MaskComposite] -> Css
- maskPosition :: BackgroundPosition -> Css
- maskPositions :: [BackgroundPosition] -> Css
- maskSize :: BackgroundSize -> Css
- maskSizes :: [BackgroundSize] -> Css
- maskRepeat :: BackgroundRepeat -> Css
- maskRepeats :: [BackgroundRepeat] -> Css
- maskOrigin :: BackgroundOrigin -> Css
- maskOrigins :: [BackgroundOrigin] -> Css
- maskClip :: BackgroundClip -> Css
- maskClips :: [BackgroundClip] -> Css
- maskAttachment :: BackgroundAttachment -> Css
- maskAttachments :: [BackgroundAttachment] -> Css
- maskImage :: BackgroundImage -> Css
- maskImages :: [BackgroundImage] -> Css
- filter :: Filter -> Css
- data Filter
- filters :: [Filter] -> Css
- blur :: Size LengthUnit -> Filter
- brightness :: Number -> Filter
- contrast :: Size Percentage -> Filter
- dropShadow :: Size LengthUnit -> Size LengthUnit -> Size LengthUnit -> Color -> Filter
- grayscale :: Size Percentage -> Filter
- hueRotate :: Angle a -> Filter
- invert :: Size Percentage -> Filter
- saturate :: Size Percentage -> Filter
- sepia :: Size Percentage -> Filter
- module Clay.Property

# Rendering stylesheets to CSS.

render :: Css -> Text #

Render a stylesheet with the default configuration. The pretty printer is used by default.

renderWith :: Config -> [App] -> Css -> Text #

Render a stylesheet with a custom configuration and an optional outer scope.

putCss :: Css -> IO () #

Render to CSS using the default configuration (`pretty`) and directly print to the standard output.

pretty :: Config #

Configuration to print to a pretty human readable CSS output.

compact :: Config #

Configuration to print to a compacted unreadable CSS output.

renderSelector :: Selector -> Text #

Render a single CSS `Selector`.

# The `Css` monad for collecting style rules.

type Css = StyleM () #

The `Css` context is used to collect style rules which are mappings from selectors to style properties. The `Css` type is a computation in the `StyleM` monad that just collects and doesn't return anything.

(?) :: Selector -> Css -> Css infixr 5 #

Assign a stylesheet to a selector. When the selector is nested inside an outer scope it will be composed with `deep`.

(<?) :: Selector -> Css -> Css infixr 5 #

Assign a stylesheet to a selector. When the selector is nested inside an outer scope it will be composed with `|>`.

(&) :: Refinement -> Css -> Css infixr 5 #

Assign a stylesheet to a filter selector. When the selector is nested inside an outer scope it will be composed with the `with` selector.

root :: Selector -> Css -> Css #

Root is used to add style rules to the top scope.

pop :: Int -> Css -> Css #

Pop is used to add style rules to selectors defined in an outer scope. The counter specifies how far up the scope stack we want to add the rules.

(-:) :: Key Text -> Text -> Css infix 4 #

The colon operator can be used to add style rules to the current context for which there is no embedded version available. Both the key and the value are plain text values and rendered as is to the output CSS.

## Comments

It is occasionally useful to output comments in the generated css. `commenting` appends comments (surrounded by '`/*` ' and '`*/`') to the values of the supplied `Css` as

    key: value /* comment */;

Placing the comments before the semicolon ensures they are obviously grouped with the preceding value when rendered compactly.

Note that every generated line in the generated content will feature the comment.

An empty comment generates '`* *`'.

commenting :: CommentText -> Css -> Css infixl 3 #

Annotate the supplied `Css` with the supplied comment. Comments work with `OverloadedStrings`. This will annotate every non-nested value.

# The selector language.

type Selector = Fix SelectorF #

data Refinement #

#### Instances

Instances details

Monoid Refinement # |
Instance details Defined in Clay.Selector Methods mempty :: Refinement # mappend :: Refinement -> Refinement -> Refinement # mconcat :: [Refinement] -> Refinement #
Semigroup Refinement # |
Instance details Defined in Clay.Selector Methods (<>) :: Refinement -> Refinement -> Refinement # sconcat :: NonEmpty Refinement -> Refinement # stimes :: Integral b => b -> Refinement -> Refinement #
IsString Refinement # |
Instance details Defined in Clay.Selector Methods fromString :: String -> Refinement #
Show Refinement # |
Instance details Defined in Clay.Selector Methods showsPrec :: Int -> Refinement -> ShowS # show :: Refinement -> String # showList :: [Refinement] -> ShowS #

## Elements selectors.

star :: Selector #

The star selector applies to all elements. Maps to `*` in CSS.

element :: Text -> Selector #

Select elements by name. The preferred syntax is to enable `OverloadedStrings` and actually just use `"element-name"` or use one of the predefined elements from Clay.Elements.

(**) :: Selector -> Selector -> Selector #

The deep selector composer. Maps to `sel1 sel2` in CSS.

(|>) :: Selector -> Selector -> Selector #

The child selector composer. Maps to `sel1 > sel2` in CSS.

(#) :: Selector -> Refinement -> Selector #

The filter selector composer, adds a filter to a selector. Maps to something like `sel#filter` or `sel.filter` in CSS, depending on the filter.

(|+) :: Selector -> Selector -> Selector #

The adjacent selector composer. Maps to `sel1 + sel2` in CSS.

(|~) :: Selector -> Selector -> Selector #

The general sibling selector composer. Maps to `sel1 ~ sel2` in CSS.

## Refining selectors.

byId :: Text -> Refinement #

Filter elements by id. The preferred syntax is to enable `OverloadedStrings` and use `"#id-name"`.

byClass :: Text -> Refinement #

Filter elements by class. The preferred syntax is to enable `OverloadedStrings` and use `".class-name"`.

pseudo :: Text -> Refinement #

Filter elements by pseudo selector or pseudo class. The preferred syntax is to enable `OverloadedStrings` and use `":pseudo-selector"` or use one of the predefined ones from Clay.Pseudo.

func :: Text -> [Text] -> Refinement #

Filter elements by pseudo selector functions. The preferred way is to use one of the predefined functions from Clay.Pseudo.

## Attribute based refining.

attr :: Text -> Refinement #

Filter elements based on the presence of a certain attribute. The preferred syntax is to enable `OverloadedStrings` and use `"@attr"` or use one of the predefined ones from Clay.Attributes.

(@=) :: Text -> Text -> Refinement #

Filter elements based on the presence of a certain attribute with the specified value.

(^=) :: Text -> Text -> Refinement #

Filter elements based on the presence of a certain attribute that begins with the selected value.

($=) :: Text -> Text -> Refinement #

Filter elements based on the presence of a certain attribute that ends with the specified value.

(*=) :: Text -> Text -> Refinement #

Filter elements based on the presence of a certain attribute that contains the specified value as a substring.

(~=) :: Text -> Text -> Refinement #

Filter elements based on the presence of a certain attribute that have the specified value contained in a space separated list.

(|=) :: Text -> Text -> Refinement #

Filter elements based on the presence of a certain attribute that have the specified value contained in a hyphen separated list.

# Apply media queries.

Because a large part of the names export by Clay.Media clash with names export by other modules we don't re-export it here and recommend you to import the module qualified.

query :: MediaType -> [Feature] -> Css -> Css #

Apply a set of style rules when the media type and feature queries apply.

queryNot :: MediaType -> [Feature] -> Css -> Css #

Apply a set of style rules when the media type and feature queries do not apply.

queryOnly :: MediaType -> [Feature] -> Css -> Css #

Apply a set of style rules only when the media type and feature queries apply.

# Apply key-frame animation.

keyframes :: Text -> [(Number, Css)] -> Css #

keyframesFromTo :: Text -> Css -> Css -> Css #

# Define font-faces.

fontFace :: Css -> Css #

Define a new font-face.

# !important

important :: Css -> Css #

Indicate the supplied css should override css declarations that would otherwise take precedence.

Use sparingly.

# Import other CSS files

importUrl :: Text -> Css #

Import a CSS file from a URL

# Pseudo elements and classes.

inRange :: Refinement #

not :: Selector -> Refinement #

empty :: Refinement #

optional :: Refinement #

link :: Refinement #

valid :: Refinement #

target :: Refinement #

checked :: Refinement #

disabled :: Refinement #

after :: Refinement #

before :: Refinement #

firstLetter :: Refinement #

firstLine :: Refinement #

selection :: Refinement #

backdrop :: Refinement #

visited :: Refinement #

active :: Refinement #

hover :: Refinement #

focus :: Refinement #

firstChild :: Refinement #

lastChild :: Refinement #

enabled :: Refinement #

firstOfType :: Refinement #

indeterminate :: Refinement #

invalid :: Refinement #

lastOfType :: Refinement #

onlyChild :: Refinement #

onlyOfType :: Refinement #

outOfRange :: Refinement #

nthChild :: Text -> Refinement #

nthLastChild :: Text -> Refinement #

nthLastOfType :: Text -> Refinement #

nthOfType :: Text -> Refinement #

# HTML5 attribute and element names.

loop :: Refinement #

max :: Refinement #

min :: Refinement #

id :: Refinement #

step :: Refinement #

list :: Refinement #

for :: Refinement #

pattern :: Refinement #

default_ :: Refinement #

required :: Refinement #

lang :: Refinement #

wrap :: Refinement #

icon :: Refinement #

accept :: Refinement #

acceptCharset :: Refinement #

accesskey :: Refinement #

action :: Refinement #

alt :: Refinement #

async :: Refinement #

autocomplete :: Refinement #

autofocus :: Refinement #

autoplay :: Refinement #

challenge :: Refinement #

charset :: Refinement #

cols :: Refinement #

colspan :: Refinement #

contenteditable :: Refinement #

contextmenu :: Refinement #

controls :: Refinement #

coords :: Refinement #

crossorigin :: Refinement #

datetime :: Refinement #

defer :: Refinement #

dir :: Refinement #

dirname :: Refinement #

download :: Refinement #

draggable :: Refinement #

dropzone :: Refinement #

enctype :: Refinement #

formaction :: Refinement #

formenctype :: Refinement #

formmethod :: Refinement #

formnovalidate :: Refinement #

formtarget :: Refinement #

headers :: Refinement #

high :: Refinement #

href :: Refinement #

hreflang :: Refinement #

httpEquiv :: Refinement #

inert :: Refinement #

inputmode :: Refinement #

ismap :: Refinement #

itemid :: Refinement #

itemprop :: Refinement #

itemref :: Refinement #

itemscope :: Refinement #

itemtype :: Refinement #

keytype :: Refinement #

kind :: Refinement #

low :: Refinement #

manifest :: Refinement #

maxlength :: Refinement #

media :: Refinement #

mediagroup :: Refinement #

method :: Refinement #

multiple :: Refinement #

muted :: Refinement #

name :: Refinement #

novalidate :: Refinement #

open :: Refinement #

optimum :: Refinement #

ping :: Refinement #

placeholder :: Refinement #

poster :: Refinement #

preload :: Refinement #

radiogroup :: Refinement #

readonly :: Refinement #

rel :: Refinement #

reversed :: Refinement #

rows :: Refinement #

rowspan :: Refinement #

sandbox :: Refinement #

scope :: Refinement #

scoped :: Refinement #

seamless :: Refinement #

selected :: Refinement #

shape :: Refinement #

sizes :: Refinement #

spellcheck :: Refinement #

src :: Refinement #

srcdoc :: Refinement #

srclang :: Refinement #

srcset :: Refinement #

tabindex :: Refinement #

type_ :: Refinement #

typemustmatch :: Refinement #

usemap :: Refinement #

base :: Selector #

time :: Selector #

map :: Selector #

div :: Selector #

head :: Selector #

span :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

option :: Selector #

label :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

select :: Selector #

style :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

table :: Selector #

menu :: Selector #

caption :: Selector #

small :: Selector #

pre :: Selector #

a :: Selector #

abbr :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

cite :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

command :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

data_ :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

form :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

title :: IsString a => a #

Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.

s :: Selector #

p :: Selector #

b :: Selector #

u :: Selector #

i :: Selector #

q :: Selector #

code :: Selector #

br :: Selector #

h1 :: Selector #

address :: Selector #

area :: Selector #

article :: Selector #

aside :: Selector #

audio :: Selector #

bdi :: Selector #

bdo :: Selector #

blockquote :: Selector #

body :: Selector #

button :: Selector #

canvas :: Selector #

col :: Selector #

colgroup :: Selector #

datalist :: Selector #

dd :: Selector #

del :: Selector #

details :: Selector #

dfn :: Selector #

dialog :: Selector #

dl :: Selector #

dt :: Selector #

embed :: Selector #

fieldset :: Selector #

figcaption :: Selector #

figure :: Selector #

footer :: Selector #

h2 :: Selector #

h3 :: Selector #

h4 :: Selector #

h5 :: Selector #

h6 :: Selector #

header :: Selector #

hgroup :: Selector #

hr :: Selector #

html :: Selector #

iframe :: Selector #

img :: Selector #

input :: Selector #

ins :: Selector #

kbd :: Selector #

keygen :: Selector #

legend :: Selector #

li :: Selector #

main_ :: Selector #

mark :: Selector #

math :: Selector #

meta :: Selector #

meter :: Selector #

nav :: Selector #

noscript :: Selector #

object :: Selector #

ol :: Selector #

optgroup :: Selector #

output :: Selector #

param :: Selector #

progress :: Selector #

rp :: Selector #

rt :: Selector #

ruby :: Selector #

samp :: Selector #

script :: Selector #

section :: Selector #

source :: Selector #

strong :: Selector #

sub :: Selector #

summary :: Selector #

sup :: Selector #

svg :: Selector #

tbody :: Selector #

td :: Selector #

template :: Selector #

textarea :: Selector #

tfoot :: Selector #

th :: Selector #

thead :: Selector #

tr :: Selector #

track :: Selector #

ul :: Selector #

var :: Selector #

video :: Selector #

wbr :: Selector #

# Commonly used value types.

module Clay.Size

module Clay.Color

module Clay.Time

# Values shared between multiple properties.

module Clay.Common

# Embedded style properties.

module Clay.Background

module Clay.Border

module Clay.Box

inline :: Display #

data Overflow #

#### Instances

Instances details

Auto Overflow # |
Instance details Defined in Clay.Display Methods auto :: Overflow #
Hidden Overflow # |
Instance details Defined in Clay.Display Methods hidden :: Overflow #
Inherit Overflow # |
Instance details Defined in Clay.Display Methods inherit :: Overflow #
Other Overflow # |
Instance details Defined in Clay.Display Methods other :: Value -> Overflow #
Visible Overflow # |
Instance details Defined in Clay.Display Methods visible :: Overflow #
Val Overflow # |
Instance details Defined in Clay.Display Methods value :: Overflow -> Value #

clear :: Clear -> Css #

float :: FloatStyle -> Css #

static :: Position #

data Display #

#### Instances

Instances details

Inherit Display # |
Instance details Defined in Clay.Display Methods inherit :: Display #
None Display # |
Instance details Defined in Clay.Display Methods none :: Display #
Other Display # |
Instance details Defined in Clay.Display Methods other :: Value -> Display #
Val Display # |
Instance details Defined in Clay.Display Methods value :: Display -> Value #

flex :: Display #

opacity :: Number -> Css #

data FloatStyle #

#### Instances

Instances details

Inherit FloatStyle # |
Instance details Defined in Clay.Display Methods inherit :: FloatStyle #
None FloatStyle # |
Instance details Defined in Clay.Display Methods none :: FloatStyle #
Val FloatStyle # |
Instance details Defined in Clay.Display Methods value :: FloatStyle -> Value #

floatLeft :: FloatStyle #

floatRight :: FloatStyle #

data Clear #

#### Instances

Instances details

Inherit Clear # |
Instance details Defined in Clay.Display Methods inherit :: Clear #
None Clear # |
Instance details Defined in Clay.Display Methods none :: Clear #
Other Clear # |
Instance details Defined in Clay.Display Methods other :: Value -> Clear #
Val Clear # |
Instance details Defined in Clay.Display Methods value :: Clear -> Value #

both :: Clear #

clearLeft :: Clear #

clearRight :: Clear #

data Position #

#### Instances

Instances details

Inherit Position # |
Instance details Defined in Clay.Display Methods inherit :: Position #
Other Position # |
Instance details Defined in Clay.Display Methods other :: Value -> Position #
Val Position # |
Instance details Defined in Clay.Display Methods value :: Position -> Value #

position :: Position -> Css #

absolute :: Position #

fixed :: Position #

relative :: Position #

sticky :: Position #

display :: Display -> Css #

block :: Display #

listItem :: Display #

runIn :: Display #

inlineBlock :: Display #

displayTable :: Display #

inlineTable :: Display #

tableRowGroup :: Display #

tableHeaderGroup :: Display #

tableFooterGroup :: Display #

tableRow :: Display #

tableColumnGroup :: Display #

tableColumn :: Display #

tableCell :: Display #

tableCaption :: Display #

displayNone :: Display #

displayInherit :: Display #

inlineFlex :: Display #

grid :: Display #

inlineGrid :: Display #

scroll :: Overflow #

overflow :: Overflow -> Css #

overflowX :: Overflow -> Css #

overflowY :: Overflow -> Css #

data Visibility #

#### Instances

Instances details

Hidden Visibility # |
Instance details Defined in Clay.Display Methods hidden :: Visibility #
Inherit Visibility # |
Instance details Defined in Clay.Display Methods inherit :: Visibility #
Other Visibility # |
Instance details Defined in Clay.Display Methods other :: Value -> Visibility #
Unset Visibility # |
Instance details Defined in Clay.Display Methods unset :: Visibility #
Visible Visibility # |
Instance details Defined in Clay.Display Methods visible :: Visibility #
Val Visibility # |
Instance details Defined in Clay.Display Methods value :: Visibility -> Value #

collapse :: Visibility #

separate :: Visibility #

visibility :: Visibility -> Css #

data Clip #

#### Instances

Instances details

Auto Clip # |
Instance details Defined in Clay.Display Methods auto :: Clip #
Inherit Clip # |
Instance details Defined in Clay.Display Methods inherit :: Clip #
Other Clip # |
Instance details Defined in Clay.Display Methods other :: Value -> Clip #
Val Clip # |
Instance details Defined in Clay.Display Methods value :: Clip -> Value #

clip :: Clip -> Css #

rect :: Size a -> Size a -> Size a -> Size a -> Clip #

zIndex :: Integer -> Css #

data PointerEvents #

#### Instances

Instances details

Auto PointerEvents # |
Instance details Defined in Clay.Display Methods auto :: PointerEvents #
Inherit PointerEvents # |
Instance details Defined in Clay.Display Methods inherit :: PointerEvents #
None PointerEvents # |
Instance details Defined in Clay.Display Methods none :: PointerEvents #
Other PointerEvents # |
Instance details Defined in Clay.Display Methods other :: Value -> PointerEvents #
Visible PointerEvents # |
Instance details Defined in Clay.Display Methods visible :: PointerEvents #
Val PointerEvents # |
Instance details Defined in Clay.Display Methods value :: PointerEvents -> Value #

pointerEvents :: PointerEvents -> Css #

visiblePainted :: PointerEvents #

visibleFill :: PointerEvents #

visibleStroke :: PointerEvents #

painted :: PointerEvents #

fillEvents :: PointerEvents #

strokeEvents :: PointerEvents #

allEvents :: PointerEvents #

class Val a => VerticalAlign a where #

Minimal complete definition

Nothing

Methods

verticalAlign :: a -> Css #

#### Instances

Instances details

VerticalAlign (Size a) # |
Instance details Defined in Clay.Display Methods verticalAlign :: Size a -> Css #

middle :: VerticalAlignValue #

vAlignSub :: VerticalAlignValue #

vAlignSuper :: VerticalAlignValue #

textTop :: VerticalAlignValue #

textBottom :: VerticalAlignValue #

vAlignTop :: VerticalAlignValue #

vAlignBottom :: VerticalAlignValue #

vAlignBaseline :: VerticalAlignValue #

class Val a => Cursor a where #

Minimal complete definition

Nothing

Methods

cursor :: a -> Css #

cursorUrl :: Text -> CursorValue Value #

cursorDefault :: CursorValue Value #

contextMenu :: CursorValue Value #

help :: CursorValue Value #

pointer :: CursorValue Value #

cursorProgress :: CursorValue Value #

wait :: CursorValue Value #

cell :: CursorValue Value #

crosshair :: CursorValue Value #

cursorText :: CursorValue Value #

vText :: CursorValue Value #

alias :: CursorValue Value #

cursorCopy :: CursorValue Value #

move :: CursorValue Value #

noDrop :: CursorValue Value #

notAllowed :: CursorValue Value #

grab :: CursorValue Value #

grabbing :: CursorValue Value #

allScroll :: CursorValue Value #

colResize :: CursorValue Value #

rowResize :: CursorValue Value #

nResize :: CursorValue Value #

eResize :: CursorValue Value #

sResize :: CursorValue Value #

wResize :: CursorValue Value #

neResize :: CursorValue Value #

nwResize :: CursorValue Value #

seResize :: CursorValue Value #

swResize :: CursorValue Value #

ewResize :: CursorValue Value #

nsResize :: CursorValue Value #

neswResize :: CursorValue Value #

nwseResize :: CursorValue Value #

zoomIn :: CursorValue Value #

zoomOut :: CursorValue Value #

module Clay.Dynamic

class FlexEnd a where #

CSS Flexible Box Layout http://dev.w3.org/csswg/css-flexbox-1

Methods

flexEnd :: a #

#### Instances

Instances details

FlexEnd AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: AlignContentValue #
FlexEnd AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: AlignItemsValue #
FlexEnd AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: AlignSelfValue #
FlexEnd JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: JustifyContentValue #
FlexEnd Value # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: Value #

class FlexStart a where #

Methods

flexStart :: a #

#### Instances

Instances details

FlexStart AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: AlignContentValue #
FlexStart AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: AlignItemsValue #
FlexStart AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: AlignSelfValue #
FlexStart JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: JustifyContentValue #
FlexStart Value # |
Instance details Defined in Clay.Flexbox Methods flexStart :: Value #

class SpaceAround a where #

Methods

spaceAround :: a #

#### Instances

Instances details

SpaceAround AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceAround :: AlignContentValue #
SpaceAround JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceAround :: JustifyContentValue #
SpaceAround Value # |
Instance details Defined in Clay.Flexbox Methods spaceAround :: Value #

class SpaceBetween a where #

Methods

spaceBetween :: a #

#### Instances

Instances details

SpaceBetween AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceBetween :: AlignContentValue #
SpaceBetween JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceBetween :: JustifyContentValue #
SpaceBetween Value # |
Instance details Defined in Clay.Flexbox Methods spaceBetween :: Value #

class SpaceEvenly a where #

Methods

spaceEvenly :: a #

#### Instances

Instances details

SpaceEvenly AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceEvenly :: AlignContentValue #
SpaceEvenly JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceEvenly :: JustifyContentValue #
SpaceEvenly Value # |
Instance details Defined in Clay.Flexbox Methods spaceEvenly :: Value #

class Stretch a where #

Methods

stretch :: a #

#### Instances

Instances details

Stretch AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods stretch :: AlignContentValue #
Stretch AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods stretch :: AlignItemsValue #
Stretch AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods stretch :: AlignSelfValue #
Stretch Value # |
Instance details Defined in Clay.Flexbox Methods stretch :: Value #

newtype AlignContentValue #

Constructors

AlignContentValue Value |

#### Instances

Instances details

Center AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods center :: AlignContentValue #
Inherit AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods inherit :: AlignContentValue #
Other AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods other :: Value -> AlignContentValue #
FlexEnd AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: AlignContentValue #
FlexStart AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: AlignContentValue #
SpaceAround AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceAround :: AlignContentValue #
SpaceBetween AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceBetween :: AlignContentValue #
SpaceEvenly AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceEvenly :: AlignContentValue #
Stretch AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods stretch :: AlignContentValue #
Val AlignContentValue # |
Instance details Defined in Clay.Flexbox Methods value :: AlignContentValue -> Value #

alignContent :: AlignContentValue -> Css #

newtype AlignItemsValue #

Constructors

AlignItemValue Value |

#### Instances

Instances details

Baseline AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods baseline :: AlignItemsValue #
Center AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods center :: AlignItemsValue #
Inherit AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods inherit :: AlignItemsValue #
Other AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods other :: Value -> AlignItemsValue #
FlexEnd AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: AlignItemsValue #
FlexStart AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: AlignItemsValue #
Stretch AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods stretch :: AlignItemsValue #
Val AlignItemsValue # |
Instance details Defined in Clay.Flexbox Methods value :: AlignItemsValue -> Value #

alignItems :: AlignItemsValue -> Css #

newtype AlignSelfValue #

Constructors

AlignSelfValue Value |

#### Instances

Instances details

Auto AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods auto :: AlignSelfValue #
Baseline AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods baseline :: AlignSelfValue #
Center AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods center :: AlignSelfValue #
Inherit AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods inherit :: AlignSelfValue #
Other AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods other :: Value -> AlignSelfValue #
FlexEnd AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: AlignSelfValue #
FlexStart AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: AlignSelfValue #
Stretch AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods stretch :: AlignSelfValue #
Val AlignSelfValue # |
Instance details Defined in Clay.Flexbox Methods value :: AlignSelfValue -> Value #

alignSelf :: AlignSelfValue -> Css #

flexBasis :: Size a -> Css #

newtype FlexDirection #

Constructors

FlexDirection Value |

#### Instances

Instances details

Other FlexDirection # |
Instance details Defined in Clay.Flexbox Methods other :: Value -> FlexDirection #
Val FlexDirection # |
Instance details Defined in Clay.Flexbox Methods value :: FlexDirection -> Value #

row :: FlexDirection #

rowReverse :: FlexDirection #

column :: FlexDirection #

columnReverse :: FlexDirection #

flexDirection :: FlexDirection -> Css #

flexFlow :: FlexDirection -> FlexWrap -> Css #

newtype FlexWrap #

Constructors

FlexWrap Value |

#### Instances

Instances details

Other FlexWrap # |
Instance details Defined in Clay.Flexbox Methods other :: Value -> FlexWrap #
Val FlexWrap # |
Instance details Defined in Clay.Flexbox Methods value :: FlexWrap -> Value #

flexGrow :: Int -> Css #

flexShrink :: Int -> Css #

wrapReverse :: FlexWrap #

flexWrap :: FlexWrap -> Css #

newtype JustifyContentValue #

Constructors

JustifyContentValue Value |

#### Instances

Instances details

Center JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods center :: JustifyContentValue #
Inherit JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods inherit :: JustifyContentValue #
Other JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods other :: Value -> JustifyContentValue #
FlexEnd JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods flexEnd :: JustifyContentValue #
FlexStart JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods flexStart :: JustifyContentValue #
SpaceAround JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceAround :: JustifyContentValue #
SpaceBetween JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceBetween :: JustifyContentValue #
SpaceEvenly JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods spaceEvenly :: JustifyContentValue #
Val JustifyContentValue # |
Instance details Defined in Clay.Flexbox Methods value :: JustifyContentValue -> Value #

justifyContent :: JustifyContentValue -> Css #

order :: Int -> Css #

smaller :: FontSize #

larger :: FontSize #

class Val a => Font a where #

We implement the generic font property as a type class that accepts multiple value types. This allows us to combine different font aspects into a shorthand syntax. Fonts require a mandatory part and have a optional a part.

http://www.w3.org/TR/css3-fonts/#font-prop

Minimal complete definition

Nothing

Methods

font :: a -> Css #

#### Instances

Instances details

Font (Required a) # |
Instance details Defined in Clay.Font Methods font :: Required a -> Css #
Font (Optional, Required a) # |
Instance details Defined in Clay.Font Methods font :: (Optional, Required a) -> Css #

data Optional #

Constructors

Optional (Maybe FontWeight) (Maybe FontVariant) (Maybe FontStyle) |

#### Instances

Instances details

Val Optional # |
Instance details Defined in Clay.Font Methods value :: Optional -> Value #
Font (Optional, Required a) # |
Instance details Defined in Clay.Font Methods font :: (Optional, Required a) -> Css #

data Required a #

Constructors

Required (Size a) (Maybe (Size a)) [Text] [GenericFontFamily] |

#### Instances

Instances details

Font (Required a) # |
Instance details Defined in Clay.Font Methods font :: Required a -> Css #
Val (Required a) # |
Instance details Defined in Clay.Font Methods value :: Required a -> Value #
Font (Optional, Required a) # |
Instance details Defined in Clay.Font Methods font :: (Optional, Required a) -> Css #

fontColor :: Color -> Css #

An alias for color.

color :: Color -> Css #

fontFamily :: [Text] -> [GenericFontFamily] -> Css #

The `fontFamily` style rules takes to lists of font families: zero or more custom font-families and preferably one or more generic font families.

sansSerif :: GenericFontFamily #

serif :: GenericFontFamily #

monospace :: GenericFontFamily #

cursive :: GenericFontFamily #

fantasy :: GenericFontFamily #

data FontSize #

#### Instances

Instances details

Auto FontSize # |
Instance details Defined in Clay.Font Methods auto :: FontSize #
Inherit FontSize # |
Instance details Defined in Clay.Font Methods inherit :: FontSize #
Other FontSize # |
Instance details Defined in Clay.Font Methods other :: Value -> FontSize #
Val FontSize # |
Instance details Defined in Clay.Font Methods value :: FontSize -> Value #

fontSize :: Size a -> Css #

fontSizeCustom :: FontSize -> Css #

xxSmall :: FontSize #

xSmall :: FontSize #

medium :: FontSize #

large :: FontSize #

xLarge :: FontSize #

xxLarge :: FontSize #

data FontStyle #

#### Instances

Instances details

Inherit FontStyle # |
Instance details Defined in Clay.Font Methods inherit :: FontStyle #
Normal FontStyle # |
Instance details Defined in Clay.Font Methods normal :: FontStyle #
Other FontStyle # |
Instance details Defined in Clay.Font Methods other :: Value -> FontStyle #
Val FontStyle # |
Instance details Defined in Clay.Font Methods value :: FontStyle -> Value #

fontStyle :: FontStyle -> Css #

italic :: FontStyle #

oblique :: FontStyle #

data FontVariant #

#### Instances

Instances details

Inherit FontVariant # |
Instance details Defined in Clay.Font Methods inherit :: FontVariant #
Normal FontVariant # |
Instance details Defined in Clay.Font Methods normal :: FontVariant #
Other FontVariant # |
Instance details Defined in Clay.Font Methods other :: Value -> FontVariant #
Val FontVariant # |
Instance details Defined in Clay.Font Methods value :: FontVariant -> Value #

fontVariant :: FontVariant -> Css #

smallCaps :: FontVariant #

data FontWeight #

#### Instances

Instances details

Inherit FontWeight # |
Instance details Defined in Clay.Font Methods inherit :: FontWeight #
Normal FontWeight # |
Instance details Defined in Clay.Font Methods normal :: FontWeight #
Other FontWeight # |
Instance details Defined in Clay.Font Methods other :: Value -> FontWeight #
Val FontWeight # |
Instance details Defined in Clay.Font Methods value :: FontWeight -> Value #

fontWeight :: FontWeight -> Css #

bold :: FontWeight #

bolder :: FontWeight #

lighter :: FontWeight #

weight :: Integer -> FontWeight #

data NamedFont #

#### Instances

Instances details

Other NamedFont # |
Instance details Defined in Clay.Font Methods other :: Value -> NamedFont #
Val NamedFont # |
Instance details Defined in Clay.Font Methods value :: NamedFont -> Value #

messageBox :: NamedFont #

smallCaption :: NamedFont #

statusBar :: NamedFont #

lineHeight :: Size a -> Css #

module Clay.FontFace

module Clay.Geometry

module Clay.Gradient

module Clay.Grid

module Clay.List

indent :: Size a -> TextIndent #

content :: Content -> Css #

start :: TextAlign #

nowrap :: WhiteSpace #

letterSpacing :: Size a -> Css #

wordSpacing :: Size a -> Css #

data TextRendering #

#### Instances

Instances details

Auto TextRendering # |
Instance details Defined in Clay.Text Methods auto :: TextRendering #
Inherit TextRendering # |
Instance details Defined in Clay.Text Methods inherit :: TextRendering #
Other TextRendering # |
Instance details Defined in Clay.Text Methods other :: Value -> TextRendering #
Val TextRendering # |
Instance details Defined in Clay.Text Methods value :: TextRendering -> Value #

textRendering :: TextRendering -> Css #

optimizeSpeed :: TextRendering #

optimizeLegibility :: TextRendering #

geometricPrecision :: TextRendering #

textShadow :: Size a -> Size a -> Size a -> Color -> Css #

data TextIndent #

#### Instances

Instances details

Inherit TextIndent # |
Instance details Defined in Clay.Text Methods inherit :: TextIndent #
Initial TextIndent # |
Instance details Defined in Clay.Text Methods initial :: TextIndent #
Other TextIndent # |
Instance details Defined in Clay.Text Methods other :: Value -> TextIndent #
Unset TextIndent # |
Instance details Defined in Clay.Text Methods unset :: TextIndent #
Val TextIndent # |
Instance details Defined in Clay.Text Methods value :: TextIndent -> Value #

textIndent :: TextIndent -> Css #

eachLine :: TextIndent -> TextIndent #

Annotate the supplied `TextIndent` with `each-line` or `hanging` or both.

    eachLine . hanging . indent $ px 3 :: TextIndent

hanging :: TextIndent -> TextIndent #

Annotate the supplied `TextIndent` with `each-line` or `hanging` or both.

    eachLine . hanging . indent $ px 3 :: TextIndent

data TextDirection #

#### Instances

Instances details

Inherit TextDirection # |
Instance details Defined in Clay.Text Methods inherit :: TextDirection #
Normal TextDirection # |
Instance details Defined in Clay.Text Methods normal :: TextDirection #
Other TextDirection # |
Instance details Defined in Clay.Text Methods other :: Value -> TextDirection #
Val TextDirection # |
Instance details Defined in Clay.Text Methods value :: TextDirection -> Value #

direction :: TextDirection -> Css #

ltr :: TextDirection #

rtl :: TextDirection #

data TextAlign #

#### Instances

Instances details

Center TextAlign # |
Instance details Defined in Clay.Text Methods center :: TextAlign #
Inherit TextAlign # |
Instance details Defined in Clay.Text Methods inherit :: TextAlign #
Normal TextAlign # |
Instance details Defined in Clay.Text Methods normal :: TextAlign #
Other TextAlign # |
Instance details Defined in Clay.Text Methods other :: Value -> TextAlign #
Val TextAlign # |
Instance details Defined in Clay.Text Methods value :: TextAlign -> Value #

textAlign :: TextAlign -> Css #

textAlignLast :: TextAlign -> Css #

justify :: TextAlign #

matchParent :: TextAlign #

end :: TextAlign #

alignSide :: Side -> TextAlign #

alignString :: Char -> TextAlign #

data WhiteSpace #

#### Instances

Instances details

Inherit WhiteSpace # |
Instance details Defined in Clay.Text Methods inherit :: WhiteSpace #
Normal WhiteSpace # |
Instance details Defined in Clay.Text Methods normal :: WhiteSpace #
Other WhiteSpace # |
Instance details Defined in Clay.Text Methods other :: Value -> WhiteSpace #
Val WhiteSpace # |
Instance details Defined in Clay.Text Methods value :: WhiteSpace -> Value #

whiteSpace :: WhiteSpace -> Css #

preWrap :: WhiteSpace #

preLine :: WhiteSpace #

data TextDecoration #

#### Instances

Instances details

Inherit TextDecoration # |
Instance details Defined in Clay.Text Methods inherit :: TextDecoration #
None TextDecoration # |
Instance details Defined in Clay.Text Methods none :: TextDecoration #
Other TextDecoration # |
Instance details Defined in Clay.Text Methods other :: Value -> TextDecoration #
Val TextDecoration # |
Instance details Defined in Clay.Text Methods value :: TextDecoration -> Value #

textDecoration :: TextDecoration -> Css #

textDecorationStyle :: Stroke -> Css #

textDecorationLine :: TextDecoration -> Css #

textDecorationColor :: Color -> Css #

underline :: TextDecoration #

overline :: TextDecoration #

lineThrough :: TextDecoration #

blink :: TextDecoration #

data TextTransform #

#### Instances

Instances details

Inherit TextTransform # |
Instance details Defined in Clay.Text Methods inherit :: TextTransform #
None TextTransform # |
Instance details Defined in Clay.Text Methods none :: TextTransform #
Val TextTransform # |
Instance details Defined in Clay.Text Methods value :: TextTransform -> Value #

textTransform :: TextTransform -> Css #

capitalize :: TextTransform #

uppercase :: TextTransform #

lowercase :: TextTransform #

fullWidth :: TextTransform #

data TextOverflow #

#### Instances

Instances details

Inherit TextOverflow # |
Instance details Defined in Clay.Text Methods inherit :: TextOverflow #
Initial TextOverflow # |
Instance details Defined in Clay.Text Methods initial :: TextOverflow #
None TextOverflow # |
Instance details Defined in Clay.Text Methods none :: TextOverflow #
Val TextOverflow # |
Instance details Defined in Clay.Text Methods value :: TextOverflow -> Value #

textOverflow :: TextOverflow -> Css #

overflowClip :: TextOverflow #

overflowEllipsis :: TextOverflow #

data WordBreak #

#### Instances

Instances details

Inherit WordBreak # |
Instance details Defined in Clay.Text Methods inherit :: WordBreak #
Initial WordBreak # |
Instance details Defined in Clay.Text Methods initial :: WordBreak #
Normal WordBreak # |
Instance details Defined in Clay.Text Methods normal :: WordBreak #
Unset WordBreak # |
Instance details Defined in Clay.Text Methods unset :: WordBreak #
Val WordBreak # |
Instance details Defined in Clay.Text Methods value :: WordBreak -> Value #

wordBreak :: WordBreak -> Css #

breakAll :: WordBreak #

keepAll :: WordBreak #

data OverflowWrap #

#### Instances

Instances details

Inherit OverflowWrap # |
Instance details Defined in Clay.Text Methods inherit :: OverflowWrap #
Initial OverflowWrap # |
Instance details Defined in Clay.Text Methods initial :: OverflowWrap #
Normal OverflowWrap # |
Instance details Defined in Clay.Text Methods normal :: OverflowWrap #
Unset OverflowWrap # |
Instance details Defined in Clay.Text Methods unset :: OverflowWrap #
Val OverflowWrap # |
Instance details Defined in Clay.Text Methods value :: OverflowWrap -> Value #

overflowWrap :: OverflowWrap -> Css #

wordWrap :: OverflowWrap -> Css #

breakWord :: OverflowWrap #

hyphens :: Hyphens -> Css #

Specifies how words should be hyphenated.

Possible values are:

`none`
  No hyphenation. Words will not be hyphenated even if it is explicitly suggested for a word.
`manual`
  Manual hyphenation. Specific characters such as `&shy;` in a word will suggest break points. This is the default.
`auto`
  Automatic hyphenation. The browser is free to hyphenate words as it sees fit. However, explicitly suggested break points will take precedence.

For example,

    >>> hyphens auto

The hyphenation rules depend on the language, which must be specified by the `lang` attribute.

For reference, see `hyphens`.

hyphenateCharacter :: HyphenateCharacter -> Css #

Customizes the character used for hyphenation.

For example,

    >>> hyphenateCharacter "~"

For reference, see `hyphenate-character`.

hyphenateLimitChars #

Arguments

:: HyphenateLimit | Minimum length of a word which can be hyphenated.
-> HyphenateLimit | Minimum number of characters allowed before a break point.
-> HyphenateLimit | Minimum number of characters allowed after a break point.
-> Css |

Adjusts the minumum number of characters involved in hyphenation.

I.e., specifies the minumum number of characters allowed in a breakable word, before a break point, and after a break point when hyphenating a word.

For example,

    >>> hyphenateLimitChars 14 auto auto

For reference, see `hyphenate-limit-chars`.

manual :: Hyphens #

Value for `hyphens` specifying that hyphenation be manual.

data Hyphens #

Type for values which can be provided to `hyphens`.

#### Instances

Instances details

Auto Hyphens # |
Instance details Defined in Clay.Text Methods auto :: Hyphens #
Inherit Hyphens # |
Instance details Defined in Clay.Text Methods inherit :: Hyphens #
Initial Hyphens # |
Instance details Defined in Clay.Text Methods initial :: Hyphens #
None Hyphens # |
Instance details Defined in Clay.Text Methods none :: Hyphens #
Other Hyphens # |
Instance details Defined in Clay.Text Methods other :: Value -> Hyphens #
Unset Hyphens # |
Instance details Defined in Clay.Text Methods unset :: Hyphens #
Val Hyphens # |
Instance details Defined in Clay.Text Methods value :: Hyphens -> Value #

data HyphenateCharacter #

Type for values which can be provided to `hyphenateCharacter`.

#### Instances

Instances details

Auto HyphenateCharacter # |
Instance details Defined in Clay.Text Methods auto :: HyphenateCharacter #
Inherit HyphenateCharacter # |
Instance details Defined in Clay.Text Methods inherit :: HyphenateCharacter #
Initial HyphenateCharacter # |
Instance details Defined in Clay.Text Methods initial :: HyphenateCharacter #
Other HyphenateCharacter # |
Instance details Defined in Clay.Text Methods other :: Value -> HyphenateCharacter #
Unset HyphenateCharacter # |
Instance details Defined in Clay.Text Methods unset :: HyphenateCharacter #
Val HyphenateCharacter # |
Instance details Defined in Clay.Text Methods value :: HyphenateCharacter -> Value #
IsString HyphenateCharacter # |
Instance details Defined in Clay.Text Methods fromString :: String -> HyphenateCharacter #

data HyphenateLimit #

Type for values which can be provded to `hyphenateLimitChars`.

#### Instances

Instances details

Auto HyphenateLimit # |
Instance details Defined in Clay.Text Methods auto :: HyphenateLimit #
Inherit HyphenateLimit # |
Instance details Defined in Clay.Text Methods inherit :: HyphenateLimit #
Initial HyphenateLimit # |
Instance details Defined in Clay.Text Methods initial :: HyphenateLimit #
Other HyphenateLimit # |
Instance details Defined in Clay.Text Methods other :: Value -> HyphenateLimit #
Unset HyphenateLimit # |
Instance details Defined in Clay.Text Methods unset :: HyphenateLimit #
Val HyphenateLimit # |
Instance details Defined in Clay.Text Methods value :: HyphenateLimit -> Value #
Num HyphenateLimit # |
Instance details Defined in Clay.Text Methods (+) :: HyphenateLimit -> HyphenateLimit -> HyphenateLimit # (-) :: HyphenateLimit -> HyphenateLimit -> HyphenateLimit # (*) :: HyphenateLimit -> HyphenateLimit -> HyphenateLimit # negate :: HyphenateLimit -> HyphenateLimit # abs :: HyphenateLimit -> HyphenateLimit # signum :: HyphenateLimit -> HyphenateLimit # fromInteger :: Integer -> HyphenateLimit #

data Content #

#### Instances

Instances details

Inherit Content # |
Instance details Defined in Clay.Text Methods inherit :: Content #
Initial Content # |
Instance details Defined in Clay.Text Methods initial :: Content #
None Content # |
Instance details Defined in Clay.Text Methods none :: Content #
Normal Content # |
Instance details Defined in Clay.Text Methods normal :: Content #
Val Content # |
Instance details Defined in Clay.Text Methods value :: Content -> Value #

contents :: [Content] -> Css #

attrContent :: Text -> Content #

stringContent :: Text -> Content #

uriContent :: Text -> Content #

urlContent :: Text -> Content #

openQuote :: Content #

closeQuote :: Content #

noOpenQuote :: Content #

noCloseQuote :: Content #

module Clay.Transform

module Clay.Transition

module Clay.Animation

xor :: MaskComposite #

class Val a => Mask a where #

We implement the generic mask property as a type class that accepts multiple value types. This allows us to combine different mask aspects into a shorthand syntax.

Minimal complete definition

Nothing

Methods

mask :: a -> Css #

#### Instances

Instances details

Mask BackgroundAttachment # |
Instance details Defined in Clay.Mask Methods mask :: BackgroundAttachment -> Css #
Mask BackgroundClip # |
Instance details Defined in Clay.Mask Methods mask :: BackgroundClip -> Css #
Mask BackgroundImage # |
Instance details Defined in Clay.Mask Methods mask :: BackgroundImage -> Css #
Mask BackgroundOrigin # |
Instance details Defined in Clay.Mask Methods mask :: BackgroundOrigin -> Css #
Mask BackgroundPosition # |
Instance details Defined in Clay.Mask Methods mask :: BackgroundPosition -> Css #
Mask BackgroundRepeat # |
Instance details Defined in Clay.Mask Methods mask :: BackgroundRepeat -> Css #
Mask BackgroundSize # |
Instance details Defined in Clay.Mask Methods mask :: BackgroundSize -> Css #
Mask MaskComposite # |
Instance details Defined in Clay.Mask Methods mask :: MaskComposite -> Css #
Mask a => Mask [a] # |
Instance details Defined in Clay.Mask Methods mask :: [a] -> Css #
(Mask a, Mask b) => Mask (a, b) # |
Instance details Defined in Clay.Mask Methods mask :: (a, b) -> Css #

copy :: MaskComposite #

data MaskComposite #

#### Instances

Instances details

Inherit MaskComposite # |
Instance details Defined in Clay.Mask Methods inherit :: MaskComposite #
None MaskComposite # |
Instance details Defined in Clay.Mask Methods none :: MaskComposite #
Other MaskComposite # |
Instance details Defined in Clay.Mask Methods other :: Value -> MaskComposite #
Mask MaskComposite # |
Instance details Defined in Clay.Mask Methods mask :: MaskComposite -> Css #
Val MaskComposite # |
Instance details Defined in Clay.Mask Methods value :: MaskComposite -> Value #

sourceOver :: MaskComposite #

sourceIn :: MaskComposite #

sourceOut :: MaskComposite #

sourceAtop :: MaskComposite #

destinationOver :: MaskComposite #

destinationIn :: MaskComposite #

destinationOut :: MaskComposite #

destinationAtop :: MaskComposite #

maskComposite :: MaskComposite -> Css #

maskComposites :: [MaskComposite] -> Css #

maskPosition :: BackgroundPosition -> Css #

maskPositions :: [BackgroundPosition] -> Css #

maskSize :: BackgroundSize -> Css #

maskSizes :: [BackgroundSize] -> Css #

maskRepeat :: BackgroundRepeat -> Css #

maskRepeats :: [BackgroundRepeat] -> Css #

maskOrigin :: BackgroundOrigin -> Css #

maskOrigins :: [BackgroundOrigin] -> Css #

maskClip :: BackgroundClip -> Css #

maskClips :: [BackgroundClip] -> Css #

maskAttachment :: BackgroundAttachment -> Css #

maskAttachments :: [BackgroundAttachment] -> Css #

maskImage :: BackgroundImage -> Css #

maskImages :: [BackgroundImage] -> Css #

filter :: Filter -> Css #

data Filter #

#### Instances

Instances details

Inherit Filter # |
Instance details Defined in Clay.Filter Methods inherit :: Filter #
None Filter # |
Instance details Defined in Clay.Filter Methods none :: Filter #
Val Filter # |
Instance details Defined in Clay.Filter Methods value :: Filter -> Value #

filters :: [Filter] -> Css #

blur :: Size LengthUnit -> Filter #

brightness :: Number -> Filter #

contrast :: Size Percentage -> Filter #

dropShadow :: Size LengthUnit -> Size LengthUnit -> Size LengthUnit -> Color -> Filter #

grayscale :: Size Percentage -> Filter #

hueRotate :: Angle a -> Filter #

invert :: Size Percentage -> Filter #

saturate :: Size Percentage -> Filter #

sepia :: Size Percentage -> Filter #

# Writing your own properties.

module Clay.Property