Safe Haskell | None |
---|---|
Language | Haskell2010 |
Clay
Contents
- Rendering stylesheets to CSS.
- The
Css
monad for collecting style rules. - The selector language.
- 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
- id :: Refinement
- for :: Refinement
- loop :: Refinement
- max :: Refinement
- min :: Refinement
- step :: Refinement
- list :: 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
- head :: Selector
- map :: Selector
- span :: IsString a => a
- div :: Selector
- 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
- data Overflow
- inline :: Display
- 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
- 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
- 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
- class Val a => Mask a where
- xor :: MaskComposite
- 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 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.
Render to CSS using the default configuration (pretty
) and directly
print to the standard output.
renderSelector :: Selector -> Text #
Render a single CSS Selector
.
The Css
monad for collecting style rules.
(?) :: 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.
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.
data Refinement #
Instances
IsString Refinement # | |
Defined in Clay.Selector Methods fromString :: String -> Refinement # | |
Monoid Refinement # | |
Defined in Clay.Selector Methods mempty :: Refinement # mappend :: Refinement -> Refinement -> Refinement # mconcat :: [Refinement] -> Refinement # | |
Semigroup Refinement # | |
Defined in Clay.Selector Methods (<>) :: Refinement -> Refinement -> Refinement # sconcat :: NonEmpty Refinement -> Refinement # stimes :: Integral b => b -> Refinement -> Refinement # | |
Show Refinement # | |
Defined in Clay.Selector Methods showsPrec :: Int -> Refinement -> ShowS # show :: Refinement -> String # showList :: [Refinement] -> ShowS # |
Elements selectors.
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 -> 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.
Define font-faces.
!important
Indicate the supplied css should override css declarations that would otherwise take precedence.
Use sparingly.
Import other CSS files
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 #
firstLine :: Refinement #
selection :: Refinement #
backdrop :: Refinement #
visited :: Refinement #
active :: Refinement #
hover :: Refinement #
focus :: Refinement #
lastChild :: Refinement #
enabled :: Refinement #
invalid :: Refinement #
onlyChild :: Refinement #
nthChild :: Text -> Refinement #
nthLastChild :: Text -> Refinement #
nthLastOfType :: Text -> Refinement #
nthOfType :: Text -> Refinement #
HTML5 attribute and element names.
id :: Refinement #
for :: Refinement #
loop :: Refinement #
max :: Refinement #
min :: Refinement #
step :: Refinement #
list :: Refinement #
pattern :: Refinement #
default_ :: Refinement #
required :: Refinement #
lang :: Refinement #
wrap :: Refinement #
icon :: Refinement #
accept :: Refinement #
accesskey :: Refinement #
action :: Refinement #
alt :: Refinement #
async :: Refinement #
autofocus :: Refinement #
autoplay :: Refinement #
challenge :: Refinement #
charset :: Refinement #
cols :: Refinement #
colspan :: Refinement #
controls :: Refinement #
coords :: Refinement #
datetime :: Refinement #
defer :: Refinement #
dir :: Refinement #
dirname :: Refinement #
download :: Refinement #
draggable :: Refinement #
dropzone :: Refinement #
enctype :: 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 #
method :: Refinement #
multiple :: Refinement #
muted :: Refinement #
name :: Refinement #
open :: Refinement #
optimum :: Refinement #
ping :: Refinement #
poster :: Refinement #
preload :: 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 #
src :: Refinement #
srcdoc :: Refinement #
srclang :: Refinement #
srcset :: Refinement #
tabindex :: Refinement #
type_ :: Refinement #
usemap :: Refinement #
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
Special cases, these items occur both as an HTML tag and an HTML attribute. We keep them polymorph.
blockquote :: Selector #
figcaption :: 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
Instances
Auto Overflow # | |
Defined in Clay.Display | |
Hidden Overflow # | |
Defined in Clay.Display | |
Inherit Overflow # | |
Defined in Clay.Display | |
Other Overflow # | |
Defined in Clay.Display | |
Visible Overflow # | |
Defined in Clay.Display | |
Val Overflow # | |
Defined in Clay.Display |
float :: FloatStyle -> Css #
data FloatStyle #
Instances
Inherit FloatStyle # | |
Defined in Clay.Display Methods inherit :: FloatStyle # | |
None FloatStyle # | |
Defined in Clay.Display Methods none :: FloatStyle # | |
Val FloatStyle # | |
Defined in Clay.Display Methods value :: FloatStyle -> Value # |
floatLeft :: FloatStyle #
clearRight :: Clear #
inlineBlock :: Display #
displayTable :: Display #
inlineTable :: Display #
tableColumn :: Display #
tableCaption :: Display #
displayNone :: Display #
inlineFlex :: Display #
inlineGrid :: Display #
data Visibility #
Instances
Hidden Visibility # | |
Defined in Clay.Display Methods hidden :: Visibility # | |
Inherit Visibility # | |
Defined in Clay.Display Methods inherit :: Visibility # | |
Other Visibility # | |
Defined in Clay.Display Methods other :: Value -> Visibility # | |
Unset Visibility # | |
Defined in Clay.Display Methods unset :: Visibility # | |
Visible Visibility # | |
Defined in Clay.Display Methods visible :: Visibility # | |
Val Visibility # | |
Defined in Clay.Display Methods value :: Visibility -> Value # |
collapse :: Visibility #
separate :: Visibility #
visibility :: Visibility -> Css #
data PointerEvents #
Instances
Auto PointerEvents # | |
Defined in Clay.Display Methods auto :: PointerEvents # | |
Inherit PointerEvents # | |
Defined in Clay.Display Methods | |
None PointerEvents # | |
Defined in Clay.Display Methods none :: PointerEvents # | |
Other PointerEvents # | |
Defined in Clay.Display Methods other :: Value -> PointerEvents # | |
Visible PointerEvents # | |
Defined in Clay.Display Methods | |
Val PointerEvents # | |
Defined in Clay.Display Methods value :: PointerEvents -> Value # |
pointerEvents :: PointerEvents -> Css #
class Val a => VerticalAlign a where #
Minimal complete definition
Nothing
Methods
verticalAlign :: a -> Css #
Instances
VerticalAlign (Size a) # | |
Defined in Clay.Display Methods verticalAlign :: Size a -> Css # |
vAlignSuper :: VerticalAlignValue #
textBottom :: VerticalAlignValue #
vAlignBottom :: VerticalAlignValue #
vAlignBaseline :: VerticalAlignValue #
cursorDefault :: CursorValue Value #
contextMenu :: CursorValue Value #
cursorProgress :: CursorValue Value #
cursorText :: CursorValue Value #
cursorCopy :: CursorValue Value #
notAllowed :: CursorValue Value #
neswResize :: CursorValue Value #
nwseResize :: CursorValue Value #
module Clay.Dynamic
CSS Flexible Box Layout http://dev.w3.org/csswg/css-flexbox-1
Instances
FlexEnd AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
FlexEnd AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
FlexEnd AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
FlexEnd JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
FlexEnd Value # | |
Defined in Clay.Flexbox |
Instances
FlexStart AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart Value # | |
Defined in Clay.Flexbox |
class SpaceAround a where #
Methods
spaceAround :: a #
Instances
SpaceAround AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceAround JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceAround Value # | |
Defined in Clay.Flexbox Methods spaceAround :: Value # |
class SpaceBetween a where #
Methods
spaceBetween :: a #
Instances
SpaceBetween AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceBetween JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceBetween Value # | |
Defined in Clay.Flexbox Methods spaceBetween :: Value # |
class SpaceEvenly a where #
Methods
spaceEvenly :: a #
Instances
SpaceEvenly AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceEvenly JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceEvenly Value # | |
Defined in Clay.Flexbox Methods spaceEvenly :: Value # |
Instances
Stretch AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
Stretch AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
Stretch AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
Stretch Value # | |
Defined in Clay.Flexbox |
newtype AlignContentValue #
Constructors
AlignContentValue Value |
Instances
Center AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
Inherit AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
Other AlignContentValue # | |
Defined in Clay.Flexbox Methods other :: Value -> AlignContentValue # | |
FlexEnd AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceAround AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceBetween AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceEvenly AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
Stretch AlignContentValue # | |
Defined in Clay.Flexbox Methods | |
Val AlignContentValue # | |
Defined in Clay.Flexbox Methods value :: AlignContentValue -> Value # |
alignContent :: AlignContentValue -> Css #
newtype AlignItemsValue #
Constructors
AlignItemValue Value |
Instances
Baseline AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
Center AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
Inherit AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
Other AlignItemsValue # | |
Defined in Clay.Flexbox Methods other :: Value -> AlignItemsValue # | |
FlexEnd AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
Stretch AlignItemsValue # | |
Defined in Clay.Flexbox Methods | |
Val AlignItemsValue # | |
Defined in Clay.Flexbox Methods value :: AlignItemsValue -> Value # |
alignItems :: AlignItemsValue -> Css #
newtype AlignSelfValue #
Constructors
AlignSelfValue Value |
Instances
Auto AlignSelfValue # | |
Defined in Clay.Flexbox Methods auto :: AlignSelfValue # | |
Baseline AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
Center AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
Inherit AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
Other AlignSelfValue # | |
Defined in Clay.Flexbox Methods other :: Value -> AlignSelfValue # | |
FlexEnd AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
Stretch AlignSelfValue # | |
Defined in Clay.Flexbox Methods | |
Val AlignSelfValue # | |
Defined in Clay.Flexbox Methods value :: AlignSelfValue -> Value # |
alignSelf :: AlignSelfValue -> Css #
newtype FlexDirection #
Constructors
FlexDirection Value |
Instances
Other FlexDirection # | |
Defined in Clay.Flexbox Methods other :: Value -> FlexDirection # | |
Val FlexDirection # | |
Defined in Clay.Flexbox Methods value :: FlexDirection -> Value # |
row :: FlexDirection #
column :: FlexDirection #
flexDirection :: FlexDirection -> Css #
flexFlow :: FlexDirection -> FlexWrap -> Css #
flexShrink :: Int -> Css #
wrapReverse :: FlexWrap #
newtype JustifyContentValue #
Constructors
JustifyContentValue Value |
Instances
Center JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
Inherit JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
Other JustifyContentValue # | |
Defined in Clay.Flexbox Methods other :: Value -> JustifyContentValue # | |
FlexEnd JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
FlexStart JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceAround JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceBetween JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
SpaceEvenly JustifyContentValue # | |
Defined in Clay.Flexbox Methods | |
Val JustifyContentValue # | |
Defined in Clay.Flexbox Methods value :: JustifyContentValue -> Value # |
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.
Minimal complete definition
Nothing
Constructors
Optional (Maybe FontWeight) (Maybe FontVariant) (Maybe FontStyle) |
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.
fontSizeCustom :: FontSize -> Css #
data FontVariant #
Instances
Inherit FontVariant # | |
Defined in Clay.Font Methods inherit :: FontVariant # | |
Normal FontVariant # | |
Defined in Clay.Font Methods normal :: FontVariant # | |
Other FontVariant # | |
Defined in Clay.Font Methods other :: Value -> FontVariant # | |
Val FontVariant # | |
Defined in Clay.Font Methods value :: FontVariant -> Value # |
fontVariant :: FontVariant -> Css #
data FontWeight #
Instances
Inherit FontWeight # | |
Defined in Clay.Font Methods inherit :: FontWeight # | |
Normal FontWeight # | |
Defined in Clay.Font Methods normal :: FontWeight # | |
Other FontWeight # | |
Defined in Clay.Font Methods other :: Value -> FontWeight # | |
Val FontWeight # | |
Defined in Clay.Font Methods value :: FontWeight -> Value # |
fontWeight :: FontWeight -> Css #
bold :: FontWeight #
bolder :: FontWeight #
lighter :: FontWeight #
weight :: Integer -> FontWeight #
messageBox :: NamedFont #
lineHeight :: Size a -> Css #
module Clay.FontFace
module Clay.Geometry
module Clay.Gradient
module Clay.Grid
module Clay.List
indent :: Size a -> TextIndent #
nowrap :: WhiteSpace #
letterSpacing :: Size a -> Css #
wordSpacing :: Size a -> Css #
data TextRendering #
Instances
Auto TextRendering # | |
Defined in Clay.Text Methods auto :: TextRendering # | |
Inherit TextRendering # | |
Defined in Clay.Text Methods | |
Other TextRendering # | |
Defined in Clay.Text Methods other :: Value -> TextRendering # | |
Val TextRendering # | |
Defined in Clay.Text Methods value :: TextRendering -> Value # |
textRendering :: TextRendering -> Css #
data TextIndent #
Instances
Inherit TextIndent # | |
Defined in Clay.Text Methods inherit :: TextIndent # | |
Initial TextIndent # | |
Defined in Clay.Text Methods initial :: TextIndent # | |
Other TextIndent # | |
Defined in Clay.Text Methods other :: Value -> TextIndent # | |
Unset TextIndent # | |
Defined in Clay.Text Methods unset :: TextIndent # | |
Val TextIndent # | |
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
Inherit TextDirection # | |
Defined in Clay.Text Methods | |
Normal TextDirection # | |
Defined in Clay.Text Methods normal :: TextDirection # | |
Other TextDirection # | |
Defined in Clay.Text Methods other :: Value -> TextDirection # | |
Val TextDirection # | |
Defined in Clay.Text Methods value :: TextDirection -> Value # |
direction :: TextDirection -> Css #
ltr :: TextDirection #
rtl :: TextDirection #
textAlignLast :: TextAlign -> Css #
alignString :: Char -> TextAlign #
data WhiteSpace #
Instances
Inherit WhiteSpace # | |
Defined in Clay.Text Methods inherit :: WhiteSpace # | |
Normal WhiteSpace # | |
Defined in Clay.Text Methods normal :: WhiteSpace # | |
Other WhiteSpace # | |
Defined in Clay.Text Methods other :: Value -> WhiteSpace # | |
Val WhiteSpace # | |
Defined in Clay.Text Methods value :: WhiteSpace -> Value # |
whiteSpace :: WhiteSpace -> Css #
preWrap :: WhiteSpace #
preLine :: WhiteSpace #
data TextDecoration #
Instances
Inherit TextDecoration # | |
Defined in Clay.Text Methods | |
None TextDecoration # | |
Defined in Clay.Text Methods none :: TextDecoration # | |
Other TextDecoration # | |
Defined in Clay.Text Methods other :: Value -> TextDecoration # | |
Val TextDecoration # | |
Defined in Clay.Text Methods value :: TextDecoration -> Value # |
textDecoration :: TextDecoration -> Css #
textDecorationStyle :: Stroke -> Css #
textDecorationLine :: TextDecoration -> Css #
textDecorationColor :: Color -> Css #
blink :: TextDecoration #
data TextTransform #
Instances
Inherit TextTransform # | |
Defined in Clay.Text Methods | |
None TextTransform # | |
Defined in Clay.Text Methods none :: TextTransform # | |
Val TextTransform # | |
Defined in Clay.Text Methods value :: TextTransform -> Value # |
textTransform :: TextTransform -> Css #
data TextOverflow #
Instances
Inherit TextOverflow # | |
Defined in Clay.Text Methods inherit :: TextOverflow # | |
Initial TextOverflow # | |
Defined in Clay.Text Methods initial :: TextOverflow # | |
None TextOverflow # | |
Defined in Clay.Text Methods none :: TextOverflow # | |
Val TextOverflow # | |
Defined in Clay.Text Methods value :: TextOverflow -> Value # |
textOverflow :: TextOverflow -> Css #
data OverflowWrap #
Instances
Inherit OverflowWrap # | |
Defined in Clay.Text Methods inherit :: OverflowWrap # | |
Initial OverflowWrap # | |
Defined in Clay.Text Methods initial :: OverflowWrap # | |
Normal OverflowWrap # | |
Defined in Clay.Text Methods normal :: OverflowWrap # | |
Unset OverflowWrap # | |
Defined in Clay.Text Methods unset :: OverflowWrap # | |
Val OverflowWrap # | |
Defined in Clay.Text Methods value :: OverflowWrap -> Value # |
overflowWrap :: OverflowWrap -> Css #
wordWrap :: OverflowWrap -> 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
­
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
.
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
.
Type for values which can be provided to hyphens
.
data HyphenateCharacter #
Type for values which can be provided to hyphenateCharacter
.
Instances
IsString HyphenateCharacter # | |
Defined in Clay.Text Methods fromString :: String -> HyphenateCharacter # | |
Auto HyphenateCharacter # | |
Defined in Clay.Text Methods | |
Inherit HyphenateCharacter # | |
Defined in Clay.Text Methods | |
Initial HyphenateCharacter # | |
Defined in Clay.Text Methods | |
Other HyphenateCharacter # | |
Defined in Clay.Text Methods other :: Value -> HyphenateCharacter # | |
Unset HyphenateCharacter # | |
Defined in Clay.Text Methods | |
Val HyphenateCharacter # | |
Defined in Clay.Text Methods value :: HyphenateCharacter -> Value # |
data HyphenateLimit #
Type for values which can be provded to hyphenateLimitChars
.
Instances
Num HyphenateLimit # | |
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 # | |
Auto HyphenateLimit # | |
Defined in Clay.Text Methods auto :: HyphenateLimit # | |
Inherit HyphenateLimit # | |
Defined in Clay.Text Methods | |
Initial HyphenateLimit # | |
Defined in Clay.Text Methods | |
Other HyphenateLimit # | |
Defined in Clay.Text Methods other :: Value -> HyphenateLimit # | |
Unset HyphenateLimit # | |
Defined in Clay.Text Methods unset :: HyphenateLimit # | |
Val HyphenateLimit # | |
Defined in Clay.Text Methods value :: HyphenateLimit -> Value # |
attrContent :: Text -> Content #
stringContent :: Text -> Content #
uriContent :: Text -> Content #
urlContent :: Text -> Content #
closeQuote :: Content #
noOpenQuote :: Content #
noCloseQuote :: Content #
module Clay.Transform
module Clay.Transition
module Clay.Animation
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
Instances
Mask BackgroundAttachment # | |
Defined in Clay.Mask Methods mask :: BackgroundAttachment -> Css # | |
Mask BackgroundClip # | |
Defined in Clay.Mask Methods mask :: BackgroundClip -> Css # | |
Mask BackgroundImage # | |
Defined in Clay.Mask Methods mask :: BackgroundImage -> Css # | |
Mask BackgroundOrigin # | |
Defined in Clay.Mask Methods mask :: BackgroundOrigin -> Css # | |
Mask BackgroundPosition # | |
Defined in Clay.Mask Methods mask :: BackgroundPosition -> Css # | |
Mask BackgroundRepeat # | |
Defined in Clay.Mask Methods mask :: BackgroundRepeat -> Css # | |
Mask BackgroundSize # | |
Defined in Clay.Mask Methods mask :: BackgroundSize -> Css # | |
Mask MaskComposite # | |
Defined in Clay.Mask Methods mask :: MaskComposite -> Css # | |
Mask a => Mask [a] # | |
(Mask a, Mask b) => Mask (a, b) # | |
xor :: MaskComposite #
copy :: MaskComposite #
data MaskComposite #
Instances
Inherit MaskComposite # | |
Defined in Clay.Mask Methods | |
None MaskComposite # | |
Defined in Clay.Mask Methods none :: MaskComposite # | |
Other MaskComposite # | |
Defined in Clay.Mask Methods other :: Value -> MaskComposite # | |
Mask MaskComposite # | |
Defined in Clay.Mask Methods mask :: MaskComposite -> Css # | |
Val MaskComposite # | |
Defined in Clay.Mask Methods value :: MaskComposite -> Value # |
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 #
maskAttachments :: [BackgroundAttachment] -> Css #
maskImage :: BackgroundImage -> Css #
maskImages :: [BackgroundImage] -> 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 #
invert :: Size Percentage -> Filter #
saturate :: Size Percentage -> Filter #
sepia :: Size Percentage -> Filter #
Writing your own properties.
module Clay.Property