ThinkAlexandria / css-in-elm / Css

Functions for building stylesheets.

Misc


type alias Compatible =
Structure.Compatible


type alias Stylesheet =
Preprocess.Stylesheet

asPairs : List Style -> List ( String, String )

Take a list of styles and return a list of key-value pairs that can then be passed to a style attribute.

styled = asPairs >> Html.Attributes.style

button
  [ styled [ position absolute, left (px 5) ] ]
  [ text "Whee!" ]

absolute : Position {}

An absolute position value.

position absolute

all : All compatible -> Style

An all property.

allPetiteCaps : FontVariantCaps {}

allSmallCaps : FontVariantCaps {}

withClass : String -> List Style -> Style

auto : { lengthOrAuto : Compatible, overflow : Compatible, textRendering : Compatible, flexBasis : Compatible, lengthOrNumberOrAutoOrNoneOrContent : Compatible, alignItemsOrAuto : Compatible, justifyContentOrAuto : Compatible, cursor : Compatible, value : String, lengthOrAutoOrCoverOrContain : Compatible, intOrAuto : Compatible, touchAction : Compatible }

baseline : VerticalAlign a b

The baseline vertical-align value.

verticalAlign baseline

block : Display {}

bold : FontWeight {}

bolder : FontWeight {}

border : Length compatible units -> Style

Sets border

border (px 10)

border2 (px 10) dashed

border3 (px 10) dashed (rgb 11 14 17)

border2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border

border (px 10)

border2 (px 10) dashed

border3 (px 10) dashed (rgb 11 14 17)

border3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border

border (px 10)

border2 (px 10) dashed

border3 (px 10) dashed (rgb 11 14 17)

borderBlockEnd : Length compatible units -> Style

Sets border-block-end

borderBlockEnd (px 5)

borderBlockEnd2 (px 5) dashed

borderBlockEnd3 (px 5) dashed (rgb 11 14 17)

borderBlockEnd2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-block-end

borderBlockEnd (px 5)

borderBlockEnd2 (px 5) dashed

borderBlockEnd3 (px 5) dashed (rgb 11 14 17)

borderBlockEnd3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-block-end

borderBlockEnd (px 5)

borderBlockEnd2 (px 5) dashed

borderBlockEnd3 (px 5) dashed (rgb 11 14 17)

borderBlockEndColor : ColorValue compatible -> Style

Sets border-block-end-color

borderBlockEndColor (rgb 101 202 0)

borderBlockEndStyle : BorderStyle compatible -> Style

Sets border-block-end-style

borderBlockEndStyle dashed

borderBlockStart : Length compatible units -> Style

Sets border-block-start

borderBlockStart (px 5)

borderBlockStart2 (px 5) dashed

borderBlockStart3 (px 5) dashed (rgb 11 14 17)

borderBlockStart2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-block-start

borderBlockStart (px 5)

borderBlockStart2 (px 5) dashed

borderBlockStart3 (px 5) dashed (rgb 11 14 17)

borderBlockStart3 : Length compatibleA units -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-block-start

borderBlockStart (px 5)

borderBlockStart2 (px 5) dashed

borderBlockStart3 (px 5) dashed (rgb 11 14 17)

borderBlockStartColor : ColorValue compatible -> Style

Sets border-block-start-color

borderBlockStartColor (rgb 101 202 0)

borderBlockStartStyle : BorderStyle compatible -> Style

Sets border-block-start-style

borderBlockStartStyle dashed

borderBottom : Length compatible units -> Style

Sets border-bottom

borderBottom (px 5)

borderBottom2 (px 5) dashed

borderBottom3 (px 5) dashed (rgb 11 14 17)

borderBottom2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-bottom

borderBottom (px 5)

borderBottom2 (px 5) dashed

borderBottom3 (px 5) dashed (rgb 11 14 17)

borderBottom3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-bottom

borderBottom (px 5)

borderBottom2 (px 5) dashed

borderBottom3 (px 5) dashed (rgb 11 14 17)

borderBottomColor : ColorValue compatible -> Style

Sets border-bottom-color

borderBottomColor (rgb 101 202 0)

borderBottomLeftRadius : Length compatible units -> Style

Sets border-bottom-left-radius

borderBottomLeftRadius (em 4)

borderBottomLeftRadius2 (em 4) (px 2)

borderBottomLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets border-bottom-left-radius

borderBottomLeftRadius (em 4)

borderBottomLeftRadius2 (em 4) (px 2)

borderBottomRightRadius : Length compatible units -> Style

Sets border-bottom-right-radius

borderBottomRightRadius (em 4)

borderBottomRightRadius2 (em 4) (px 2)

borderBottomRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets border-bottom-right-radius

borderBottomRightRadius (em 4)

borderBottomRightRadius2 (em 4) (px 2)

borderBottomStyle : BorderStyle compatible -> Style

Sets border-bottom-style

borderBottomStyle dashed

borderWidth : Length compatible units -> Style

Sets border-width

borderWidth (em 4)

borderWidth2 (em 4) (px 2)

borderWidth3 (em 4) (px 2) (pct 5)

borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderWidth2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets border-width

borderWidth (em 4)

borderWidth2 (em 4) (px 2)

borderWidth3 (em 4) (px 2) (pct 5)

borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderWidth3 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Style

Sets border-width

borderWidth (em 4)

borderWidth2 (em 4) (px 2)

borderWidth3 (em 4) (px 2) (pct 5)

borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderWidth4 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Length compatibleD unitsD -> Style

Sets border-width

borderWidth (em 4)

borderWidth2 (em 4) (px 2)

borderWidth3 (em 4) (px 2) (pct 5)

borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderBottomWidth : Length compatible units -> Style

Sets border-bottom-width

borderBottomWidth (em 4)

borderBox : BoxSizing (BackgroundClip {})

The border-box value for the box-sizing property. Can also be used as border-box value for the background-clip property.

borderColor : ColorValue compatible -> Style

Sets border-color

borderColor (rgb 12 11 10)

borderColor2 (rgb 12 11 10) (hex "FFBBCC")

borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit

borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)

borderColor2 : ColorValue compatibleA -> ColorValue compatibleB -> Style

Sets border-color

borderColor (rgb 12 11 10)

borderColor2 (rgb 12 11 10) (hex "FFBBCC")

borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit

borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)

borderColor3 : ColorValue compatibleA -> ColorValue compatibleB -> ColorValue compatibleC -> Style

Sets border-color

borderColor (rgb 12 11 10)

borderColor2 (rgb 12 11 10) (hex "FFBBCC")

borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit

borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)

borderColor4 : ColorValue compatibleA -> ColorValue compatibleB -> ColorValue compatibleC -> ColorValue compatibleD -> Style

Sets border-color

borderColor (rgb 12 11 10)

borderColor2 (rgb 12 11 10) (hex "FFBBCC")

borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit

borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)

borderImageOutset : LengthOrNumber compatible -> Style

Sets border-image-outset

borderImageOutset (int 2)

borderImageOutset2 (int 2) (px 15)

borderImageOutset3 (int 2) (px 15) (int 1.5)

borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style

Sets border-image-outset

borderImageOutset (int 2)

borderImageOutset2 (int 2) (px 15)

borderImageOutset3 (int 2) (px 15) (int 1.5)

borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset3 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> Style

Sets border-image-outset

borderImageOutset (int 2)

borderImageOutset2 (int 2) (px 15)

borderImageOutset3 (int 2) (px 15) (int 1.5)

borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset4 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> LengthOrNumber compatibleD -> Style

Sets border-image-outset

borderImageOutset (int 2)

borderImageOutset2 (int 2) (px 15)

borderImageOutset3 (int 2) (px 15) (int 1.5)

borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageWidth : LengthOrNumber compatible -> Style

Sets border-image-width

borderImageWidth (int 3)

borderImageWidth2 (int 3) (px 15)

borderImageWidth3 (int 3) (px 15) auto

borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style

Sets border-image-width

borderImageWidth (int 3)

borderImageWidth2 (int 3) (px 15)

borderImageWidth3 (int 3) (px 15) auto

borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth3 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> Style

Sets border-image-width

borderImageWidth (int 3)

borderImageWidth2 (int 3) (px 15)

borderImageWidth3 (int 3) (px 15) auto

borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth4 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> LengthOrNumber compatibleD -> Style

Sets border-image-width

borderImageWidth (int 3)

borderImageWidth2 (int 3) (px 15)

borderImageWidth3 (int 3) (px 15) auto

borderImageWidth4 (int 3) (px 15) auto (int 2)

borderInlineEnd : Length compatible units -> Style

Sets border-block-end

borderInlineEnd (px 5)

borderInlineEnd2 (px 5) dashed

borderInlineEnd3 (px 5) dashed (rgb 11 14 17)

borderInlineEnd2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-block-end

borderInlineEnd (px 5)

borderInlineEnd2 (px 5) dashed

borderInlineEnd3 (px 5) dashed (rgb 11 14 17)

borderInlineEnd3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-block-end

borderInlineEnd (px 5)

borderInlineEnd2 (px 5) dashed

borderInlineEnd3 (px 5) dashed (rgb 11 14 17)

borderInlineEndColor : ColorValue compatible -> Style

Sets border-inline-end-color

borderInlineEndColor (rgb 101 202 0)

borderInlineEndStyle : BorderStyle compatible -> Style

Sets border-inline-end-style

borderInlineEndStyle dashed

borderInlineEndWidth : Length compatible units -> Style

Sets border-inline-end-width

borderInlineEndWidth (em 4)

borderInlineStart : Length compatible units -> Style

Sets border-block-start

borderInlineStart (px 5)

borderInlineStart2 (px 5) dashed

borderInlineStart3 (px 5) dashed (rgb 11 14 17)

borderInlineStart2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-block-start

borderInlineStart (px 5)

borderInlineStart2 (px 5) dashed

borderInlineStart3 (px 5) dashed (rgb 11 14 17)

borderInlineStart3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-block-start

borderInlineStart (px 5)

borderInlineStart2 (px 5) dashed

borderInlineStart3 (px 5) dashed (rgb 11 14 17)

borderInlineStartColor : ColorValue compatible -> Style

Sets border-inline-start-color

borderInlineStartColor (rgb 101 202 0)

borderInlineStartStyle : BorderStyle compatible -> Style

Sets border-inline-start-style

borderInlineStartStyle dashed

borderLeft : Length compatible units -> Style

Sets border-left

borderLeft (px 5)

borderLeft2 (px 5) dashed

borderLeft3 (px 5) dashed (rgb 11 14 17)

borderLeft2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-left

borderLeft (px 5)

borderLeft2 (px 5) dashed

borderLeft3 (px 5) dashed (rgb 11 14 17)

borderLeft3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-left

borderLeft (px 5)

borderLeft2 (px 5) dashed

borderLeft3 (px 5) dashed (rgb 11 14 17)

borderLeftColor : ColorValue compatible -> Style

Sets border-left-color

borderLeftColor (rgb 101 202 0)

borderLeftStyle : BorderStyle compatible -> Style

Sets border-left-style

borderLeftStyle dashed

borderLeftWidth : Length compatible units -> Style

Sets border-left-width

borderLeftWidth (em 4)

borderRadius : Length compatible units -> Style

Sets border-radius

borderRadius (em 4)

borderRadius2 (em 4) (px 2)

borderRadius3 (em 4) (px 2) (pct 5)

borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets border-radius

borderRadius (em 4)

borderRadius2 (em 4) (px 2)

borderRadius3 (em 4) (px 2) (pct 5)

borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRadius3 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Style

Sets border-radius

borderRadius (em 4)

borderRadius2 (em 4) (px 2)

borderRadius3 (em 4) (px 2) (pct 5)

borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRadius4 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Length compatibleD unitsD -> Style

Sets border-radius

borderRadius (em 4)

borderRadius2 (em 4) (px 2)

borderRadius3 (em 4) (px 2) (pct 5)

borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRight : Length compatible units -> Style

Sets border-right

borderRight (px 5)

borderRight2 (px 5) dashed

borderRight3 (px 5) dashed (rgb 11 14 17)

borderRight2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-right

borderRight (px 5)

borderRight2 (px 5) dashed

borderRight3 (px 5) dashed (rgb 11 14 17)

borderRight3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-right

borderRight (px 5)

borderRight2 (px 5) dashed

borderRight3 (px 5) dashed (rgb 11 14 17)

borderRightColor : ColorValue compatible -> Style

Sets border-right-color

borderRightColor (rgb 101 202 0)

borderRightStyle : BorderStyle compatible -> Style

Sets border-right-style

borderRightStyle dashed

borderRightWidth : Length compatible units -> Style

Sets border-right-width

borderRightWidth (em 4)

borderStyle : BorderStyle compatible -> Style

Sets border-style

borderStyle dashed

borderCollapse : BorderCollapse compatible -> Style

Sets border-collapse

borderCollapse collapse

borderTop : Length compatible units -> Style

Sets border-top

borderTop (px 5)

borderTop2 (px 5) dashed

borderTop3 (px 5) dashed (rgb 11 14 17)

borderTop2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style

Sets border-top

borderTop (px 5)

borderTop2 (px 5) dashed

borderTop3 (px 5) dashed (rgb 11 14 17)

borderTop3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets border-top

borderTop (px 5)

borderTop2 (px 5) dashed

borderTop3 (px 5) dashed (rgb 11 14 17)

borderTopColor : ColorValue compatible -> Style

Sets border-top-color

borderTopColor (rgb 101 202 0)

borderTopLeftRadius : Length compatible units -> Style

Sets border-top-left-radius

borderTopLeftRadius (em 4)

borderTopLeftRadius2 (em 4) (px 2)

borderTopLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets border-top-left-radius

borderTopLeftRadius (em 4)

borderTopLeftRadius2 (em 4) (px 2)

borderTopRightRadius : Length compatible units -> Style

Sets border-top-right-radius

borderTopRightRadius (em 4)

borderTopRightRadius2 (em 4) (px 2)

borderTopRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets border-top-right-radius

borderTopRightRadius (em 4)

borderTopRightRadius2 (em 4) (px 2)

borderTopStyle : BorderStyle compatible -> Style

Sets border-top-style

borderTopStyle dashed

borderTopWidth : Length compatible units -> Style

Sets border-top-width

borderTopWidth (em 4)

borderTopWidth2 (em 4) (px 2)

bottom : LengthOrAuto compatible -> Style

The bottom property.

position absolute

bottom (px 5)

This can also be used as a bottom vertical-align value:

verticalAlign bottom

column : FlexDirectionOrWrap (FlexDirection {})

Thecolumn value for the flex-direction property.

columnReverse : FlexDirectionOrWrap (FlexDirection {})

Thecolumn-reverse value for the flex-direction property.

commonLigatures : FontVariantLigatures {}

content : LengthOrNumberOrAutoOrNoneOrContent (FlexBasis {})

The content value for the flex-basis property.

contentBox : BoxSizing (BackgroundClip {})

The content-box value for the box-sizing property. Can also be used as content-box value for the background-clip property.

contextual : FontVariantLigatures {}

cursive : FontFamily {}

dashed : BorderStyle (TextDecorationStyle {})

A dashed border style.

diagonalFractions : FontVariantNumeric {}

discretionaryLigatures : FontVariantLigatures {}

dotted : BorderStyle (TextDecorationStyle {})

A dotted border style.

double : BorderStyle (TextDecorationStyle {})

A double border style.

fantasy : FontFamily {}

fillBox : TransformBox {}

The fill-box value for the transform-box property.

fixed : Position (BackgroundAttachment {})

A fixed position value. This can also represent a fixed background-attachment value.

position fixed

flat : TransformStyle {}

The flat value for the transform-style property.

displayFlex : Style

display: flex. This works around the fact that flex is already taken.

flexEnd : AlignItems a b

Theflex-end value for the align-items property. Can also be used with flex-box's justify-content property to apply the value of flex-end.

flexStart : AlignItems a b

Theflex-start value for the align-items property. Can also be used with flex-box's justify-content property to apply the value of flex-start.

groove : BorderStyle {}

A groove border style.

hidden : Overflow (BorderStyle {})

hidden overflow value.

This can also represent a hidden border style.

historicalLigatures : FontVariantLigatures {}

important : Style -> Style

Transforms the given property by adding !important to the end of its declaration.

inherit : BasicProperty

The inherit value. Any CSS property can be set to this value.

initial : BasicProperty

The initial value. Any CSS property can be set to this value.

inline : Display {}

inlineBlock : Display {}

inlineFlex : Display {}

Sets the display style to inline-flex

table : Display {}

Sets the display style to table

inlineTable : Display {}

Sets the display style to inline-table

tableCell : Display {}

Sets the display style to table-cell

tableRow : Display {}

Sets the display style to table-row

tableColumn : Display {}

Sets the display style to table-column

tableCaption : Display {}

Sets the display style to table-caption

tableRowGroup : Display {}

Sets the display style to table-row-group

tableColumnGroup : Display {}

Sets the display style to table-column-group

tableHeaderGroup : Display {}

Sets the display style to table-header-group

tableFooterGroup : Display {}

Sets the display style to table-footer-group

inlineListItem : Display {}

inset : BorderStyle {}

An inset border style.

italic : FontStyle {}

large : FontSize {}

larger : FontSize {}

lighter : FontWeight {}

liningNums : FontVariantNumeric {}

listItem : Display {}

manipulation : TouchAction {}

The manipulation value for the touch-action property.

matrix : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Transform {}

The matrix() transform-function.

transform (matrix 0.5 1 1.5 2 2.5 3)

matrix3d : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Transform {}

The matrix3d() transform-function.

transform (matrix3d 0.5 1 1.5 2 2.5 3 0.5 1 1.5 2 2.5 3 0.5 1 1.5 2 2.5 3 0.5 1 1.5 2 2.5 3)

middle : VerticalAlign a b

The middle vertical-align value.

verticalAlign middle

monospace : FontFamily {}

noCommonLigatures : FontVariantLigatures {}

noContextual : FontVariantLigatures {}

noDiscretionaryLigatures : FontVariantLigatures {}

noHistoricalLigatures : FontVariantLigatures {}

noWrap : WhiteSpace (FlexDirectionOrWrap (FlexWrap {}))

none : { borderStyle : Compatible, cursor : Compatible, display : Compatible, lengthOrNumberOrAutoOrNoneOrContent : Compatible, none : Compatible, lengthOrNone : Compatible, lengthOrNoneOrMinMaxDimension : Compatible, listStyleType : Compatible, listStyleTypeOrPositionOrImage : Compatible, outline : Compatible, resize : Compatible, textDecorationLine : Compatible, transform : Compatible, backgroundImage : Compatible, value : String, textTransform : Compatible, touchAction : Compatible, updateFrequency : Compatible, blockAxisOverflow : Compatible, inlineAxisOverflow : Compatible, pointerDevice : Compatible, hoverCapability : Compatible, scriptingSupport : Compatible }

normal : Normal

oblique : FontStyle {}

oldstyleNums : FontVariantNumeric {}

ordinal : FontVariantNumeric {}

outset : BorderStyle {}

An outset border style.

panX : TouchAction {}

The pan-x value for the touch-action property.

panLeft : TouchAction {}

The pan-left value for the touch-action property.

panRight : TouchAction {}

The pan-right value for the touch-action property.

panY : TouchAction {}

The pan-y value for the touch-action property.

panUp : TouchAction {}

The pan-up value for the touch-action property.

panDown : TouchAction {}

The pan-down value for the touch-action property.

perspective : Basics.Float -> Transform {}

The perspective() transform-function.

 transform (perspective 0.5)

petiteCaps : FontVariantCaps {}

pinchZoom : TouchAction {}

The pinch-zoom value for the touch-action property.

position : Position compatible -> Style

The position property.

float : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets 'float' float : Float compatible -> Style

float right

preserve3d : TransformStyle {}

The preserve-3d value for the transform-style property.

proportionalNums : FontVariantNumeric {}

relative : Position {}

A relative position value.

position relative

ridge : BorderStyle {}

A ridge border style.

rotate : Angle compatible -> Transform {}

The rotate transform-function.

 transform (rotate (deg 90))

rotate3d : Basics.Float -> Basics.Float -> Basics.Float -> Angle compatible -> Transform {}

The rotate3d transform-function.

 transform (rotate3d 1 1 1 (deg 90))

rotateX : Angle compatible -> Transform {}

The rotateX transform-function.

 transform (rotateX (deg 90))

rotateY : Angle compatible -> Transform {}

The rotateY transform-function.

 transform (rotateY (deg 90))

rotateZ : Angle compatible -> Transform {}

The rotateZ transform-function.

 transform (rotateZ (deg 90))

row : FlexDirectionOrWrap (FlexDirection {})

Therow value for the flex-direction property.

rowReverse : FlexDirectionOrWrap (FlexDirection {})

Therow-reverse value for the flex-direction property.

sansSerif : FontFamily {}

scale : Basics.Float -> Transform {}

The scale transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

scale2 : Basics.Float -> Basics.Float -> Transform {}

The scale transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

scale3d : Basics.Float -> Basics.Float -> Basics.Float -> Transform {}

The scale3d transform-function.

 transform (scale3d 0.5 0.5 1)

scaleX : Basics.Float -> Transform {}

The scaleX transform-function.

 transform (scaleX 0.5)

scaleY : Basics.Float -> Transform {}

The scaleY transform-function.

 transform (scaleY 0.5)

scroll : { value : String, scroll : Compatible, overflow : Compatible, backgroundAttachment : Compatible, blockAxisOverflow : Compatible, inlineAxisOverflow : Compatible }

The scroll overflow value. This can also represent a scroll background-attachment value. It can also be used in the overflow-block and oveflow-line media features.

serif : FontFamily {}

skew : Angle compatible -> Transform {}

The skew transform-function.

 transform (skew (deg 90))
 transform (skew2 (deg 90) (deg 45))

skew2 : Angle compatibleA -> Angle compatibleB -> Transform {}

The skew transform-function.

 transform (skew (deg 90))
 transform (skew2 (deg 90) (deg 45))

skewX : Angle compatible -> Transform {}

The skewX transform-function.

 transform (skewX (deg 90))

skewY : Angle compatible -> Transform {}

The skewY transform-function.

transform (skewY (deg 90))

slashedZero : FontVariantNumeric {}

small : FontSize {}

smallCaps : FontVariantCaps {}

smaller : FontSize {}

stackedFractions : FontVariantNumeric {}

static : Position {}

A static position value.

position static

sticky : Position {}

A sticky position value.

position sticky

stretch : AlignItems a b

Thestretch value for the align-items property.

sub : VerticalAlign a b

The sub vertical-align value.

verticalAlign sub

super : VerticalAlign a b

The super vertical-align value.

verticalAlign super

tabularNums : FontVariantNumeric {}

textBottom : VerticalAlign a b

The text-bottom vertical-align value.

verticalAlign textBottom

textTop : VerticalAlign a b

The text-top vertical-align value.

verticalAlign textTop

titlingCaps : FontVariantCaps {}

top : LengthOrAuto compatible -> Style

The top property.

position absolute

top (px 5)

This can also be used as a top vertical-align value:

verticalAlign top

translate : Length compatible units -> Transform {}

The translate transform-function.

transform (translate (px 100))

transform (translate2 (px 100) (pct -45))

translate2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Transform {}

The translate transform-function.

transform (translate (px 100))

transform (translate2 (px 100) (pct -45))

translate3d : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Transform {}

The translateX transform-function.

transform (translate3d (px 100) (px 100) (px 100))

translateX : Length compatible units -> Transform {}

The translateX transform-function.

transform (translateX (px 100))

translateY : Length compatible units -> Transform {}

The translateY transform-function.

transform (translateY (px 100))

translateZ : Length compatible units -> Transform {}

The translateZ transform-function.

transform (translateZ (px 100))

unicase : FontVariantCaps {}

unset : BasicProperty

The unset value. Any CSS property can be set to this value.

viewBox : TransformBox {}

The view-box value for the transform-box property.

visible : Overflow {}

The visible value for the overflow property.

wavy : TextDecorationStyle {}

A wavy text decoration style.

wrap : FlexDirectionOrWrap (FlexWrap {})

Thewrap value for the flex-wrap property.

wrapReverse : FlexDirectionOrWrap (FlexWrap {})

Thewrap-reverse value for the flex-wrap property.

xLarge : FontSize {}

xSmall : FontSize {}

xxLarge : FontSize {}

xxSmall : FontSize {}

backgroundRepeat : BackgroundRepeatShorthand compatible -> Style

Sets 'background-repeat'

backgroundRepeat repeatX

backgroundRepeat2 : BackgroundRepeat compatibleA -> BackgroundRepeat compatibleB -> Style

Sets 'background-repeat'

backgroundRepeat2 repeat noRepeat

repeatX : BackgroundRepeatShorthand {}

The repeat-x background-repeat value.

repeatY : BackgroundRepeatShorthand {}

The repeat-y background-repeat value.

repeat : BackgroundRepeat {}

The repeat background-repeat value.

space : BackgroundRepeat {}

The space background-repeat value.

round : BackgroundRepeat {}

The round background-repeat value.

noRepeat : BackgroundRepeat {}

The no-repeat background-repeat value.

backgroundAttachment : BackgroundAttachment compatible -> Style

Sets 'background-attachment'

backgroundAttachment fixed

local : BackgroundAttachment {}

The local background-attachment value.

backgroundBlendMode : (ColorValue NonMixable -> Style) -> Style

Sets 'background-blend-mode'

backgroundBlendMode darken

multiply : BackgroundBlendMode compatible

The multiply blend-mode.

overlay : BackgroundBlendMode compatible

The overlay blend-mode.

darken : BackgroundBlendMode compatible

The darken blend-mode.

lighten : BackgroundBlendMode compatible

The lighten blend-mode.

colorDodge : BackgroundBlendMode compatible

The color-dodge blend-mode.

colorBurn : BackgroundBlendMode compatible

The color-burn blend-mode.

hardLight : BackgroundBlendMode compatible

The hard-light blend-mode.

softLight : BackgroundBlendMode compatible

The soft-light blend-mode.

difference : BackgroundBlendMode compatible

The difference blend-mode.

exclusion : BackgroundBlendMode compatible

The exclusion blend-mode.

hue : BackgroundBlendMode compatible

The hue blend-mode.

saturation : BackgroundBlendMode compatible

The saturation blend-mode.

luminosity : BackgroundBlendMode compatible

The luminosity blend-mode.

screenBlendMode : BackgroundBlendMode compatible

The screen blend-mode.

backgroundClip : BackgroundClip compatible -> Style

Sets 'background-clip'

backgroundClip borderBox

paddingBox : BackgroundClip {}

The padding-box background-clip value.

backgroundImage : BackgroundImage compatible -> Style

Sets 'background-image'

backgroundImage (url "http://www.example.com/chicken.jpg")

url : String -> BackgroundImage {}

The url background-image value.

backgroundPosition : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets 'background-position'

backgroundPosition top

Only supports keywords values like "top" or "center". If you want to pass a single length, use backgroundPosition2:

backgroundPosition2 (px 10) zero

backgroundPosition2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets 'background-position'

backgroundPosition2 (px 10) zero

backgroundOrigin : BackgroundOrigin compatible -> Style

Sets 'background-origin'

backgroundOrigin borderBox

backgroundSize : LengthOrAutoOrCoverOrContain compatible -> Style

Sets 'background-size'

backgroundSize cover

backgroundSize2 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> Style

Sets 'background-size'

modBy auto (backgroundSize2 50)

cover : { value : String, lengthOrAutoOrCoverOrContain : Compatible }

The cover background-size value.

contain : { value : String, lengthOrAutoOrCoverOrContain : Compatible }

The contain background-size value.

both : Resize {}

The both value for the resize property.

horizontal : Resize {}

The horizontal value for the resize property.

vertical : Resize {}

The vertical value for the resize property.

breakWord : Wrap {}

The break-word value for the overflow-wrap property.

separate : BorderCollapse {}

A separate border-collapse.

collapse : BorderCollapse {}

A collapse border-collapse.

listStyleType : ListStyleType compatible -> Style

The list-style-type property.

disc : ListStyle (ListStyleType {})

circle : ListStyle (ListStyleType {})

square : ListStyle (ListStyleType {})

decimal : ListStyle (ListStyleType {})

decimalLeadingZero : ListStyle (ListStyleType {})

lowerRoman : ListStyle (ListStyleType {})

upperRoman : ListStyle (ListStyleType {})

lowerGreek : ListStyle (ListStyleType {})

lowerAlpha : ListStyle (ListStyleType {})

lowerLatin : ListStyle (ListStyleType {})

upperAlpha : ListStyle (ListStyleType {})

upperLatin : ListStyle (ListStyleType {})

arabicIndic : ListStyle (ListStyleType {})

armenian : ListStyle (ListStyleType {})

bengali : ListStyle (ListStyleType {})

cjkEarthlyBranch : ListStyle (ListStyleType {})

cjkHeavenlyStem : ListStyle (ListStyleType {})

devanagari : ListStyle (ListStyleType {})

georgian : ListStyle (ListStyleType {})

gujarati : ListStyle (ListStyleType {})

gurmukhi : ListStyle (ListStyleType {})

kannada : ListStyle (ListStyleType {})

khmer : ListStyle (ListStyleType {})

lao : ListStyle (ListStyleType {})

malayalam : ListStyle (ListStyleType {})

myanmar : ListStyle (ListStyleType {})

oriya : ListStyle (ListStyleType {})

telugu : ListStyle (ListStyleType {})

thai : ListStyle (ListStyleType {})

listStylePosition : ListStylePosition compatible -> Style

The list-style-position property.

inside : ListStyle (ListStylePosition {})

outside : ListStyle (ListStylePosition {})

listStyle : ListStyle compatible -> Style

The list-style shorthand property.

listStyle2 : ListStyle compatible1 -> ListStyle compatible2 -> Style

The list-style shorthand property.

listStyle3 : ListStyle compatible1 -> ListStyle compatible2 -> ListStyle compatible3 -> Style

The list-style shorthand property.

linearGradient : ColorStop compatibleA compatibleB unit -> ColorStop compatibleA compatibleB unit -> List (ColorStop compatibleA compatibleB unit) -> BackgroundImage (ListStyle {})

Sets linear-gradient

linearGradient  (stop2 red <| pct 75%) (stop <| hex "222") []
linearGradient  (stop red) (stop <| hex "222") [ stop green, stop blue ]

linearGradient2 : AngleOrDirection compatible -> ColorStop compatibleA compatibleB unit -> ColorStop compatibleA compatibleB unit -> List (ColorStop compatibleA compatibleB unit) -> BackgroundImage (ListStyle {})

Sets linear-gradient

linearGradient  toBottomLeft (stop2 red <| pct 75%) (stop <| hex "222") []
linearGradient  toTop (stop red) (stop <| hex "222") [ stop green, stop blue ]

stop : ColorValue compatibleA -> ColorStop compatibleA compatibleB unit

ColorStop

stop2 : ColorValue compatibleA -> Length compatibleB unit -> ColorStop compatibleA compatibleB unit

ColorStop

toBottom : AngleOrDirection {}

Sets the direction to bottom

toBottomLeft : AngleOrDirection {}

Sets the direction to bottom left

toBottomRight : AngleOrDirection {}

Sets the direction to bottom right

toLeft : AngleOrDirection {}

Sets the direction to left

toRight : AngleOrDirection {}

Sets the direction to right

toTop : AngleOrDirection {}

Sets the direction to top

toTopLeft : AngleOrDirection {}

Sets the direction to top left

toTopRight : AngleOrDirection {}

Sets the direction to top right


type alias AlignItems a b =
Length a b -> Style

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#Values


type alias All compatible =
{ compatible | value : String
, all : Compatible 
}


type alias Angle compatible =
{ compatible | value : String
, angle : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/angle


type alias AngleOrDirection compatible =
{ compatible | value : String
, angleOrDirection : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values


type alias BackgroundAttachment compatible =
{ compatible | value : String
, backgroundAttachment : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment


type alias BackgroundBlendMode a =
ColorValue a -> Style

Because color is both a common propertie and common value in CSS (e.g. color: red with and background-blend-mode: color), we implement it as a property (for the color: red case) and allow it to be used as a value as well. When being used as a value, we call it, expect that it will return the desired String as its key, and use that as our value. (See getOverloadedProperty. Note that VerticalAlign.)


type alias BackgroundClip compatible =
{ compatible | value : String
, backgroundClip : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip


type alias BackgroundImage compatible =
{ compatible | value : String
, backgroundImage : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image


type alias BackgroundOrigin compatible =
BackgroundClip compatible

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin


type alias BackgroundRepeat compatible =
{ compatible | value : String
, backgroundRepeat : Compatible
, backgroundRepeatShorthand : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat-style


type alias BackgroundRepeatShorthand compatible =
{ compatible | value : String
, backgroundRepeatShorthand : Compatible 
}


type alias BasicProperty =
{ value : String
, all : Compatible
, alignItems : Compatible
, borderStyle : Compatible
, boxSizing : Compatible
, color : Compatible
, cursor : Compatible
, display : Compatible
, flexBasis : Compatible
, flexWrap : Compatible
, flexDirection : Compatible
, flexDirectionOrWrap : Compatible
, justifyContent : Compatible
, none : Compatible
, number : Compatible
, outline : Compatible
, overflow : Compatible
, textDecorationLine : Compatible
, textRendering : Compatible
, textIndent : Compatible
, textDecorationStyle : Compatible
, textTransform : Compatible
, length : Compatible
, lengthOrAuto : Compatible
, lengthOrNone : Compatible
, lengthOrNumber : Compatible
, lengthOrMinMaxDimension : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
, listStyleType : Compatible
, listStylePosition : Compatible
, listStyleTypeOrPositionOrImage : Compatible
, fontFamily : Compatible
, fontSize : Compatible
, fontStyle : Compatible
, fontWeight : Compatible
, fontVariant : Compatible
, units : IncompatibleUnits
, numericValue : Basics.Float
, unitLabel : String
, warnings : List String
, backgroundRepeat : Compatible
, backgroundRepeatShorthand : Compatible
, backgroundAttachment : Compatible
, backgroundBlendMode : Compatible
, backgroundOrigin : Compatible
, backgroundImage : Compatible
, lengthOrAutoOrCoverOrContain : Compatible
, intOrAuto : Compatible
, touchAction : Compatible
, whiteSpace : Compatible 
}


type alias BorderCollapse compatible =
{ compatible | value : String
, borderCollapse : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse


type alias BorderStyle compatible =
{ compatible | value : String
, borderStyle : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values


type alias BoxSizing compatible =
{ compatible | value : String
, boxSizing : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values


type alias Calc compatible =
{ compatible | value : String
, calc : Compatible 
}

https://developer.mozilla.org/en/docs/Web/CSS/calc


type CalcExpression


type alias Cursor compatible =
{ compatible | value : String
, cursor : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Values


type Directionality


type alias Display compatible =
{ compatible | value : String
, display : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/display#Values


type alias ExplicitLength units =
{ value : String
, numericValue : Basics.Float
, units : units
, unitLabel : String
, length : Compatible
, lengthOrAuto : Compatible
, lengthOrNumber : Compatible
, lengthOrNone : Compatible
, lengthOrMinMaxDimension : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible
, textIndent : Compatible
, flexBasis : Compatible
, absoluteLength : Compatible
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
, fontSize : Compatible
, lengthOrAutoOrCoverOrContain : Compatible
, calc : Compatible 
}


type alias FeatureTagValue compatible =
{ compatible | value : String
, featureTagValue : Compatible
, warnings : List String 
}

https://www.microsoft.com/typography/otspec/featurelist.htm


type alias FlexBasis compatible =
{ compatible | value : String
, flexBasis : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values


type alias FlexDirection compatible =
{ compatible | value : String
, flexDirection : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Values


type alias FlexDirectionOrWrap compatible =
{ compatible | value : String
, flexDirectionOrWrap : Compatible 
}


type alias FlexWrap compatible =
{ compatible | value : String
, flexWrap : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#Values


type alias FontFamily compatible =
{ compatible | value : String
, fontFamily : Compatible 
}

A font family


type alias FontStyle compatible =
{ compatible | value : String
, fontStyle : Compatible 
}


type alias FontStyleOrFeatureTagValue compatible =
{ compatible | value : String
, warnings : List String
, fontStyle : Compatible
, featureTagValue : Compatible 
}


type alias FontVariant compatible =
{ compatible | value : String
, fontVariant : Compatible 
}


type alias FontVariantCaps compatible =
{ compatible | value : String
, fontVariant : Compatible
, fontVariantCaps : Compatible 
}


type alias FontVariantLigatures compatible =
{ compatible | value : String
, fontVariant : Compatible
, fontVariantLigatures : Compatible 
}


type alias FontVariantNumeric compatible =
{ compatible | value : String
, fontVariant : Compatible
, fontVariantNumeric : Compatible 
}


type alias FontWeight compatible =
{ compatible | value : String
, fontWeight : Compatible 
}


type alias ImportType compatible =
{ compatible | value : String
, import_ : Compatible 
}


type IncompatibleUnits


type alias JustifyContent a b =
Length a b -> Style

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Values


type alias LengthOrAuto compatible =
{ compatible | value : String
, lengthOrAuto : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/length


type alias LengthOrAutoOrCoverOrContain compatible =
{ compatible | value : String
, lengthOrAutoOrCoverOrContain : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size


type alias LengthOrMinMaxDimension compatible =
{ compatible | value : String
, lengthOrMinMaxDimension : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/length


type alias LengthOrNone compatible =
{ compatible | value : String
, lengthOrNone : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/length


type alias LengthOrNoneOrMinMaxDimension compatible =
{ compatible | value : String
, lengthOrNoneOrMinMaxDimension : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/length


type alias LengthOrNumber compatible =
{ compatible | value : String
, lengthOrNumber : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/length


type alias LengthOrNumberOrAutoOrNoneOrContent compatible =
{ compatible | value : String
, lengthOrNumberOrAutoOrNoneOrContent : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/flex#Values


type alias ListStyle compatible =
{ compatible | value : String
, listStyleTypeOrPositionOrImage : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#Values


type alias ListStylePosition compatible =
{ compatible | value : String
, listStylePosition : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#Values


type alias ListStyleType compatible =
{ compatible | value : String
, listStyleType : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values


type alias MinMaxDimension compatible =
{ compatible | value : String
, minMaxDimension : Compatible
, lengthOrMinMaxDimension : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible 
}


type alias NonMixable =
{}

A ColorValue that does not have red, green, or blue values.


type alias None compatible =
{ compatible | value : String
, none : Compatible 
}


type alias Number compatible =
{ compatible | value : String
, number : Compatible 
}


type alias Outline compatible =
{ compatible | value : String
, outline : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/outline#Values


type alias Overflow compatible =
{ compatible | value : String
, overflow : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values


type alias Position compatible =
{ compatible | value : String
, position : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values


type alias Resize compatible =
{ compatible | value : String
, resize : Compatible 
}

https://developer.mozilla.org/en/docs/Web/CSS/resize#Values


type alias TextDecorationLine compatible =
{ compatible | value : String
, textDecorationLine : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#Values


type alias TextDecorationStyle compatible =
{ compatible | value : String
, textDecorationStyle : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style#Values


type alias TextIndent compatible =
{ compatible | value : String
, textIndent : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent#Values


type alias TextOrientation compatible =
{ compatible | value : String
, textOrientation : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation#Values


type alias TextOverflow compatible =
{ compatible | value : String
, textOverflow : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Values


type alias TextRendering compatible =
{ compatible | value : String
, textRendering : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering#Values


type alias TextTransform compatible =
{ compatible | value : String
, textTransform : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#Values


type alias TouchAction compatible =
{ compatible | value : String
, touchAction : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action?v=control#Values


type alias Transform compatible =
{ compatible | value : String
, transform : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Values


type alias TransformBox compatible =
{ compatible | value : String
, transformBox : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box#Values


type alias TransformStyle compatible =
{ compatible | value : String
, transformStyle : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style#Values


type alias Value compatible =
{ compatible | value : String }


type alias VerticalAlign a b =
Length a b -> Style

Because top and bottom are both common properties and common values in CSS (e.g. top: 5px with position: absolute and vertical-align: top), we implement it as a property (for the top: 5px case) and allow it to be used as a value as well. When being used as a value, we call it, expect that it will return the desired String as its key, and use that as our value. (See getOverloadedProperty. Note that TextAlign follows a similar pattern.)


type alias WhiteSpace compatible =
{ compatible | value : String
, whiteSpace : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values


type alias Wrap compatible =
{ compatible | value : String
, overflowWrap : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Values

pre : WhiteSpace {}

The pre white-space value.

whiteSpace pre

preLine : WhiteSpace {}

The pre-line white-space value.

whiteSpace preLine

preWrap : WhiteSpace {}

The pre-wrap white-space value.

whiteSpace preWrap

Style


type alias Snippet =
Preprocess.Snippet


type alias Style =
Preprocess.Style

batch : List Style -> Style

Create a style from multiple other styles.

underlineOnHover =
    batch
        [ textDecoration none

        , hover
            [ textDecoration underline ]
        ]

stylesheet
  [ class FancyLink
      [ color (rgb 128 64 32)
      , underlineOnHover
      ]
  ]

...has the same result as:

stylesheet
    [ class FancyLink
        [ color (rgb 128 64 32)
        , textDecoration none
        , hover
            [ textDecoration underline ]
        ]
    ]

stylesheet : List Snippet -> Stylesheet

A stylesheet.

stylesheet
    [ body
        [ width (px 960)
        , color (rgb 7 7 7)
        ]
    ]

compile : List Stylesheet -> { css : String, warnings : List String }

Compile the given stylesheets to a CSS string, or to an error message if it could not be compiled.

Statements

class : String -> List Style -> Snippet

A class selector.

stylesheet
    [ class LoginFormButton
        [ fontWeight normal
        , color (rgb 128 64 32)
        ]
    ]

id : String -> List Style -> Snippet

An id selector.

stylesheet
    [ id NavBar
        [ width 960 px
        , backgroundColor (rgb 123 42 208)
        ]
    ]

selector : String -> List Style -> Snippet

A custom selector. Use this for things like attribute selectors and universal selectors.

stylesheet "homepage"
    [ selector "* [lang^=en]"
        [ textDecoration underline
        , color (rgb 7 7 7)
        ]
    ]

everything : List Style -> Snippet

A * selector.

class Foo
    [ children
        [ everything
            [ color (rgb 14 15 16)
            , borderRadius (px 5)
            ]
        ]
    ]

...compiles to:

.Foo > * {
  color: rgb(14, 15, 16);
  border-radius: 5px;
}

Combinators

children : List Snippet -> Style

descendants : List Snippet -> Style

adjacentSiblings : List Snippet -> Style

generalSiblings : List Snippet -> Style

Properties

property : String -> String -> Style

Define a custom property.

stylesheet
    [ body
        [ property "-webkit-font-smoothing" "none" ]
    ]

...outputs

body {
    -webkit-font-smoothing: none;
}

flex : LengthOrNumberOrAutoOrNoneOrContent compatible -> Style

Sets flex property.

flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))

flex2 : Number compatibleA -> LengthOrNumber compatibleB -> Style

Sets flex property.

flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))

flex3 : Number compatibleA -> Number compatibleB -> LengthOrNumber compatibleC -> Style

Sets flex property.

flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))

alignSelf : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets align-self.

Note: auto is not currently supported here. If you need to set this property to auto, use this workaround:

property "align-self" "auto"

If this is annoying, please file an issue, so adding support for "auto" can be prioritized!

alignItems : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets align-items.

Note: auto is not currently supported here. If you need to set this property to auto, use this workaround:

property "align-items" "auto"

If this is annoying, please file an issue, so adding support for "auto" can be prioritized!

justifyContent : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets justify-content.

order : Number compatible -> Style

Sets order property.

flexDirection : FlexDirection compatible -> Style

Sets flex-direction property.

flexFlow1 : FlexDirectionOrWrap compatible -> Style

Sets flex-flow property.

flexFlow1 (wrap | wrapReverse | noWrap) flexFlow2 (wrap | wrapReverse | noWrap) (row | column | rowReverse | columnReverse)

Or vice versa, order is not important for flex-flow

flexFlow2 : FlexDirectionOrWrap compatibleA -> FlexDirectionOrWrap compatibleB -> Style

Sets flex-flow property.

flexFlow1 (wrap | wrapReverse | noWrap) flexFlow2 (wrap | wrapReverse | noWrap) (row | column | rowReverse | columnReverse)

Or vice versa, order is not important for flex-flow

flexWrap : FlexWrap compatible -> Style

Sets flex-wrap property.

flexBasis : FlexBasis compatible -> Style

Sets flex-basis property.

flex (none | content | auto | (int 1) | (px 10)) flex2 (int 1) ((int 1) | (px 10 )) flex3 (int 1) (int 1) ((int 1) | (px 10))

flexGrow : Number compatible -> Style

Sets flex-grow property.

flexShrink : Number compatible -> Style

Sets flex-shrink property.

transformStyle : TransformStyle compatible -> Style

The transform-style property.

transformBox : TransformBox compatible -> Style

The transform-box property.

transform : Transform compatible -> Style

Sets transform with a single explicit transform value. If you need to set the transform property to none, use the transforms function with an empty list. See transforms for more details.

transform (scaleX 1.4)

transforms : List (Transform compatible) -> Style

Sets transform with a series of transform-functions. If an empty list is provided, the CSS output will be none, as if to state directly that the set of transforms applied to the current selector is empty:

transforms [] -- transform: none;

In the case that only one transform is needed, the transform function may be used instead for convenience. transform expects exactly one transform-function and cannot be passed none:

transform (matrix 1 2 3 4 5 6) -- transform: matrix(1, 2, 3, 4, 5, 6);

If a collection of transforms is needed, use the transforms function with a populated list:

transforms [ perspective 1, scale2 1 1.4 ]

currentColor : ColorValue NonMixable

The currentColor value.

underline : TextDecorationLine {}

An underline text decoration line.

overline : TextDecorationLine {}

An overline text decoration line.

lineThrough : TextDecorationLine {}

A line-through text decoration line.

textOrientation : TextOrientation compatible -> Style

Sets text-orientation.

text - orientation mixed

textDecoration : TextDecorationLine a -> Style

Sets text-decoration

textDecoration underline

textDecoration2 underline wavy

textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)

textDecoration2 : TextDecorationLine compatibleA -> TextDecorationStyle compatibleB -> Style

Sets text-decoration

textDecoration underline

textDecoration2 underline wavy

textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)

textDecoration3 : TextDecorationLine compatibleA -> TextDecorationStyle compatibleB -> ColorValue compatibleC -> Style

Sets text-decoration

textDecoration underline

textDecoration2 underline wavy

textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)

textDecorationLine : TextDecorationLine compatible -> Style

Sets text-decoration-line

textDecorationLine underline

You can specify multiple line decorations with textDecorationLines.

textDecorationLines [ underline, overline ]

textDecorations : List (TextDecorationLine compatible) -> Style

Sets text-decoration

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)

textDecorations2 : List (TextDecorationLine compatibleA) -> TextDecorationStyle compatibleB -> Style

Sets text-decoration

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)

textDecorations3 : List (TextDecorationLine compatibleA) -> TextDecorationStyle compatibleB -> ColorValue compatibleC -> Style

Sets text-decoration

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)

textDecorationLines : List (TextDecorationLine compatible) -> Style

Sets text-decoration-line

textDecorationLines [ underline, overline ]

textDecorationStyle : TextDecorationStyle compatible -> Style

Sets text-decoration-style

textDecorationStyle dotted

textEmphasisColor : ColorValue compatible -> Style

Sets 'text-emphasis-color'

 textEmphasisColor (rgb 100 100 100)

capitalize : TextTransform {}

capitalize text-transform value

uppercase : TextTransform {}

uppercase text-transform value

lowercase : TextTransform {}

lowercase text-transform value

fullWidth : TextTransform {}

full-width text-transform value

hanging : TextIndent {}

hanging hanging value

eachLine : TextIndent {}

each-line text-indent value

textIndent : Length compatible units -> Style

Sets text-indent.

textIndent (px 40)

textIndent2 (px 40) hanging

textIndent3 (px 40) hanging eachLine

textIndent2 : Length compatibleA unitsA -> TextIndent compatibleB -> Style

Sets text-indent.

textIndent (px 40)

textIndent2 (px 40) hanging

textIndent3 (px 40) hanging eachLine

textIndent3 : Length compatibleA unitsA -> TextIndent compatibleB -> TextIndent compatibleC -> Style

Sets text-indent.

textIndent (px 40)

textIndent2 (px 40) hanging

textIndent3 (px 40) hanging eachLine

clip : TextOverflow {}

clip text-overflow value

ellipsis : TextOverflow {}

ellipsis text-overflow value

textOverflow : TextOverflow compatible -> Style

Sets text-overflow.

textOverflow ellipsis

optimizeSpeed : TextRendering {}

optimizeSpeed text-rendering value

optimizeLegibility : TextRendering {}

optimizeLegibility text-rendering value

geometricPrecision : TextRendering {}

geometricPrecision text-rendering value

textRendering : TextRendering a -> Style

Sets text-rendering.

textTransform : TextTransform compatible -> Style

Sets text-transform.

textAlign : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets text-align.

textAlignLast : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets text-align-last. Note: auto is not currently supported here. If you need to set this property to auto, use this workaround:

property "text-align-last" "auto"

If this is annoying, please file an issue, so adding support for "auto"
can be prioritized!

left : LengthOrAuto compatible -> Style

The left property.

position absolute

left (px 5)

This can also be used as a left text alignment value:

textAlign left

It can also be used as a left float value :

float left

right : LengthOrAuto compatible -> Style

Sets right.

position absolute

right (px 5)

This can also be used as a right alignment value:

textAlign right

It can also be used as a right float value :

float right

center : TextAlign a b

center alignment. Can also be used with flex-box's align-items and justify-content properties to apply the value of center

justify : TextAlign a b

justify alignment.

justifyAll : TextAlign a b

justify-all alignment.

start : TextAlign a b

start alignment.

end : TextAlign a b

end alignment.

matchParent : TextAlign a b

match-parent alignment.

true : TextAlign a b

true alignment.

verticalAlign : (ExplicitLength IncompatibleUnits -> Style) -> Style

Sets vertical-align.

display : Display compatible -> Style

For display: flex, use displayFlex.

opacity : Number compatible -> Style

minContent : MinMaxDimension {}

The min-content value for min-width, max-width, min-height, and max-height

maxContent : MinMaxDimension {}

The max-content value for min-width, max-width, min-height, and max-height

fitContent : MinMaxDimension {}

The fit-content value for min-width, max-width, min-height, and max-height

fillAvailable : MinMaxDimension {}

The fill-available value for min-width, max-width, min-height, and max-height

width : LengthOrAuto compatible -> Style

Sets width

width (px 960)

minWidth : LengthOrMinMaxDimension compatible -> Style

Sets min-width

minWidth (px 100)

maxWidth : LengthOrNoneOrMinMaxDimension compatible -> Style

Sets max-width

maxWidth (px 960)

height : LengthOrAuto compatible -> Style

Sets height

height (px 800)

minHeight : LengthOrMinMaxDimension compatible -> Style

Sets min-height

minHeight (px 100)

maxHeight : LengthOrNoneOrMinMaxDimension compatible -> Style

Sets max-height

maxHeight (px 1024)

padding : Length compatible units -> Style

Sets padding

padding (px 10)

padding2 (px 10) (px 10)

padding3 (px 10) (px 10) (px 10)

padding4 (px 10) (px 10) (px 10) (px 10)

padding2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets padding

padding (px 10)

padding2 (px 10) (px 10)

padding3 (px 10) (px 10) (px 10)

padding4 (px 10) (px 10) (px 10) (px 10)

padding3 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Style

Sets padding

padding (px 10)

padding2 (px 10) (px 10)

padding3 (px 10) (px 10) (px 10)

padding4 (px 10) (px 10) (px 10) (px 10)

padding4 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Length compatible units -> Style

Sets padding

padding (px 10)

padding2 (px 10) (px 10)

padding3 (px 10) (px 10) (px 10)

padding4 (px 10) (px 10) (px 10) (px 10)

paddingTop : Length compatible units -> Style

Sets padding-top

paddingTop (px 10)

paddingBottom : Length compatible units -> Style

Sets padding-bottom

paddingBottom (px 10)

paddingRight : Length compatible units -> Style

Sets padding-right

paddingRight (px 10)

paddingLeft : Length compatible units -> Style

Sets padding-left

paddingLeft (px 10)

paddingBlockStart : LengthOrAuto compatible -> Style

Sets padding-block-start

paddingBlockStart (px 10)

paddingBlockEnd : LengthOrAuto compatible -> Style

Sets padding-block-end

paddingBlockEnd (px 10)

paddingInlineStart : LengthOrAuto compatible -> Style

Sets padding-inline-start

paddingInlineStart (px 10)

paddingInlineEnd : LengthOrAuto compatible -> Style

Sets padding-inline-end

paddingInlineEnd (px 10)

margin : LengthOrAuto compatible -> Style

Sets margin

margin (px 10)

margin2 (px 10) (px 10)

margin3 (px 10) (px 10) (px 10)

margin4 (px 10) (px 10) (px 10) (px 10)

margin2 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> Style

Sets margin

margin (px 10)

margin2 (px 10) (px 10)

margin3 (px 10) (px 10) (px 10)

margin4 (px 10) (px 10) (px 10) (px 10)

margin3 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> LengthOrAuto compatibleC -> Style

Sets margin

margin (px 10)

margin2 (px 10) (px 10)

margin3 (px 10) (px 10) (px 10)

margin4 (px 10) (px 10) (px 10) (px 10)

margin4 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> LengthOrAuto compatibleC -> LengthOrAuto compatibleD -> Style

Sets margin

margin (px 10)

margin2 (px 10) (px 10)

margin3 (px 10) (px 10) (px 10)

margin4 (px 10) (px 10) (px 10) (px 10)

marginTop : LengthOrAuto compatible -> Style

Sets margin-top

marginTop (px 10)

marginBottom : LengthOrAuto compatible -> Style

Sets margin-bottom

marginBottom (px 10)

marginRight : LengthOrAuto compatible -> Style

Sets margin-right

marginRight (px 10)

marginLeft : LengthOrAuto compatible -> Style

Sets margin-left

marginLeft (px 10)

marginBlockStart : LengthOrAuto compatible -> Style

Sets margin-block-start

marginBlockStart (px 10)

marginBlockEnd : LengthOrAuto compatible -> Style

Sets margin-block-end

marginBlockEnd (px 10)

marginInlineStart : LengthOrAuto compatible -> Style

Sets margin-inline-start

marginInlineStart (px 10)

marginInlineEnd : LengthOrAuto compatible -> Style

Sets margin-inline-end

marginInlineEnd (px 10)

boxSizing : BoxSizing compatible -> Style

Sets box-sizing

boxSizing borderBox

overflow : Overflow compatible -> Style

overflowX : Overflow compatible -> Style

overflowY : Overflow compatible -> Style

overflowWrap : Wrap compatible -> Style

whiteSpace : WhiteSpace compatible -> Style

backgroundColor : ColorValue compatible -> Style

color : ColorValue compatible -> Style

each : List (List Style -> Snippet) -> List Style -> Snippet

textShadow : None compatible -> Style

Sets text-shadow.

textShadow none

textShadow2 (px 1) (px 2)

textShadow3 (px 1) (px 2) (rgb 211 121 112)

textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

textShadow2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets text-shadow.

textShadow none

textShadow2 (px 1) (px 2)

textShadow3 (px 1) (px 2) (rgb 211 121 112)

textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

textShadow3 : Length compatibleA unitsA -> Length compatibleB unitsB -> ColorValue compatibleC -> Style

Sets text-shadow.

textShadow none

textShadow2 (px 1) (px 2)

textShadow3 (px 1) (px 2) (rgb 211 121 112)

textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

textShadow4 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> ColorValue compatibleD -> Style

Sets text-shadow.

textShadow none

textShadow2 (px 1) (px 2)

textShadow3 (px 1) (px 2) (rgb 211 121 112)

textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow : None compatible -> Style

Sets box-shadow.

boxShadow none

boxShadow2 (px 1) (px 2)

boxShadow3 (px 1) (px 2) (rgb 211 121 112)

boxShadow3 (px 1) (px 2) (px 3)

boxShadow3 inset (px 2) (px 3)

boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)

boxShadow4 (px 1) (px 2) (px 3) (px 4)

boxShadow4 inset (px 2) (px 3) (px 4)

boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets box-shadow.

boxShadow none

boxShadow2 (px 1) (px 2)

boxShadow3 (px 1) (px 2) (rgb 211 121 112)

boxShadow3 (px 1) (px 2) (px 3)

boxShadow3 inset (px 2) (px 3)

boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)

boxShadow4 (px 1) (px 2) (px 3) (px 4)

boxShadow4 inset (px 2) (px 3) (px 4)

boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow3 : Value a -> Length compatibleB unitsB -> Value c -> Style

Sets box-shadow.

boxShadow none

boxShadow2 (px 1) (px 2)

boxShadow3 (px 1) (px 2) (rgb 211 121 112)

boxShadow3 (px 1) (px 2) (px 3)

boxShadow3 inset (px 2) (px 3)

boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)

boxShadow4 (px 1) (px 2) (px 3) (px 4)

boxShadow4 inset (px 2) (px 3) (px 4)

boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow4 : Value a -> Length compatibleB unitsB -> Length compatibleC unitsC -> Value d -> Style

Sets box-shadow.

boxShadow none

boxShadow2 (px 1) (px 2)

boxShadow3 (px 1) (px 2) (rgb 211 121 112)

boxShadow3 (px 1) (px 2) (px 3)

boxShadow3 inset (px 2) (px 3)

boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)

boxShadow4 (px 1) (px 2) (px 3) (px 4)

boxShadow4 inset (px 2) (px 3) (px 4)

boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 : Value a -> Length compatibleB unitsB -> Length compatibleC unitsC -> Length compatibleD unitsD -> ColorValue compatibleE -> Style

Sets box-shadow.

boxShadow none

boxShadow2 (px 1) (px 2)

boxShadow3 (px 1) (px 2) (rgb 211 121 112)

boxShadow3 (px 1) (px 2) (px 3)

boxShadow3 inset (px 2) (px 3)

boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)

boxShadow4 (px 1) (px 2) (px 3) (px 4)

boxShadow4 inset (px 2) (px 3) (px 4)

boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 : Value a -> Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Length compatibleD unitsD -> ColorValue compatibleE -> Style

Sets box-shadow.

boxShadow none

boxShadow2 (px 1) (px 2)

boxShadow3 (px 1) (px 2) (rgb 211 121 112)

boxShadow3 (px 1) (px 2) (px 3)

boxShadow3 inset (px 2) (px 3)

boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)

boxShadow4 (px 1) (px 2) (px 3) (px 4)

boxShadow4 inset (px 2) (px 3) (px 4)

boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

lineHeight : LengthOrNumber compatible -> Style

Sets line-height

lineHeight (px 10)

letterSpacing : Length compatible units -> Style

Sets letter-spacing

letterSpacing (px 10)

fontFace : String -> String

fontFamily : FontFamily a -> Style

For when your font is one of serif, sansSerif, monospace, cursive or fantasy. If you want to refer to a font by its name (like Helvetica or Arial), use fontFamilies instead.

fontSize : FontSize a -> Style

Sets font-size

fontSize xxSmall

fontSize (px 12)

fontStyle : FontStyle a -> Style

Sets font-style

fontStyle italic

fontWeight : FontWeight a -> Style

Sets font-weight

fontWeight bold

fontWeight (int 300)

fontVariant : FontVariant a -> Style

Sets font-variant

fontVariant smallCaps

fontVariant2 commonLigatures smallCaps

fontVariant3 commonLigatures smallCaps slashedZero

fontVariants [ oldstyleNums tabularNums stackedFractions ordinal slashedZero ]

fontVariant2 : FontVariant compatibleA -> FontVariant compatibleB -> Style

fontVariant3 : FontVariant compatibleA -> FontVariant compatibleB -> FontVariant compatibleC -> Style

fontVariantLigatures : FontVariantLigatures a -> Style

fontVariantCaps : FontVariantCaps a -> Style

fontVariantNumeric : FontVariantNumeric a -> Style

fontVariantNumeric2 : FontVariantNumeric compatibleA -> FontVariantNumeric compatibleB -> Style

fontVariantNumeric3 : FontVariantNumeric compatibleA -> FontVariantNumeric compatibleB -> FontVariantNumeric compatibleC -> Style

fontFamilies : List String -> Style

For multiple font families:

fontFamilies [ "Verdana", "Arial" ]

fontFamilies [ qt "Gill Sans Extrabold", "Helvetica", .value sansSerif ]

fontVariantNumerics : List (FontVariantNumeric compatible) -> Style

fontFeatureSettings : FeatureTagValue a -> Style

Sets font-feature-settings

fontFeatureSettings (featureTag "hist")

fontFeatureSettings (featureTag2 "smcp" on)

fontFeatureSettings (featureTag2 "swsh" 2)

fontFeatureSettingsList : List (FeatureTagValue a) -> Style

Sets font-feature-settings

fontFeatureSettingsList [ featureTag "c2sc", featureTag "smcp" ]

cursor : Cursor compatible -> Style

A cursor specifies the mouse cursor displayed when mouse pointer is over an element.

outline : Outline compatible -> Style

Sets outline

outline zero

outline initial

outline3 (px 10) dashed (rgb 11 14 17)

outline3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style

Sets outline

outline zero

outline initial

outline3 (px 10) dashed (rgb 11 14 17)

outlineColor : ColorValue compatible -> Style

Sets outline-color

outlineColor (rgb 11 14 17)

outlineColor (hex "#ffffff")

outlineColor (hsla 120 0.5 0.5 0.5)

outlineWidth : LengthOrNone compatible -> Style

Sets outline-width

outlineWidth (px 10)

outlineWidth (em 1.4)

outlineWidth none

outlineStyle : BorderStyle compatible -> Style

Sets outline-style

outlineStyle dashed

outlineStyle solid

outlineStyle outset

outlineOffset : Length compatible units -> Style

Sets outline-offset

outlineOffset (px 10)

outlineOffset (em 1.4)

outlineOffset (pct 50)

zIndex : IntOrAuto compatible -> Style

Sets z-index

zIndex (int 2)

See http://package.elm-lang.org/packages/rtfeldman/count/latest for a useful library to manage z-index values.

spaceAround : JustifyContent a b

Thespace-around value for the justify-content property.

spaceBetween : JustifyContent a b

Thespace-between value for the justify-content property.

resize : Resize compatible -> Style

fill : ColorValue compatible -> Style

touchAction : TouchAction compatible -> Style

Sets touch-action property.

touchAction (auto | none | panX | panLeft | panRight | panY | panUp | panDown | pinchZoom | manipulation | inherit | initial | unset)

borderSpacing : Length compatible units -> Style

Sets border-spacing

borderSpacing (em 4)

borderSpacing2 (em 4) (px 2)

borderSpacing2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style

Sets border-spacing

borderSpacing (em 4)

borderSpacing2 (em 4) (px 2)

Values

Color values


type alias Color =
ColorValue { red : Basics.Int
, green : Basics.Int
, blue : Basics.Int
, alpha : Basics.Float 
}

solid : BorderStyle (TextDecorationStyle {})

A solid border style.

transparent : ColorValue NonMixable

A transparent color.

rgb : Basics.Int -> Basics.Int -> Basics.Int -> Color

RGB color value in functional notation.

rgba : Basics.Int -> Basics.Int -> Basics.Int -> Basics.Float -> Color

RGBA color value.

hsl : Basics.Float -> Basics.Float -> Basics.Float -> Color

HSL color value s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage at compile-time

hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Color

HSLA color value s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage at compile-time

hex : String -> Color

RGB color value in hexadecimal notation. You can optionally include # as the first character, for benefits like syntax highlighting in editors, ease of copy/pasting from tools which express these as e.g. #abcdef0, etc.

Font values

featureTag : String -> FeatureTagValue {}

Creates a feature-tag-value with the default value of 1

fontFeatureSettings (featureTag "hist")

featureTag2 : String -> Basics.Int -> FeatureTagValue {}

Creates a feature-tag-value with a particular integer value

fontFeatureSettings (featureTag2 "smcp" on)

fontFeatureSettings (featureTag2 "swsh" 2)

featureOn : Basics.Int

Alias for on value of font-feature-settings

featureOff : Basics.Int

Alias for off value of font-feature-settings

Other values

default : Cursor {}

pointer : Cursor {}

crosshair : Cursor {}

contextMenu : Cursor {}

help : Cursor {}

progress : Cursor {}

wait : Cursor {}

cell : Cursor {}

text : Cursor {}

verticalText : Cursor {}

cursorAlias : Cursor {}

copy : Cursor {}

move : Cursor {}

noDrop : Cursor {}

notAllowed : Cursor {}

eResize : Cursor {}

nResize : Cursor {}

neResize : Cursor {}

nwResize : Cursor {}

sResize : Cursor {}

seResize : Cursor {}

swResize : Cursor {}

wResize : Cursor {}

ewResize : Cursor {}

nsResize : Cursor {}

neswResize : Cursor {}

nwseResize : Cursor {}

colResize : Cursor {}

rowResize : Cursor {}

allScroll : Cursor {}

zoomIn : Cursor {}

zoomOut : Cursor {}

grab : Cursor {}

grabbing : Cursor {}

Length


type alias Length compatible units =
{ compatible | value : String
, length : Compatible
, numericValue : Basics.Float
, units : units
, unitLabel : String 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/length

pct : Basics.Float -> Pct

pct units.

px : Basics.Float -> Px

px units.

em : Basics.Float -> Em

em units.

pt : Basics.Float -> Pt

pt units.

ex : Basics.Float -> Ex

ex units.

ch : Basics.Float -> Ch

ch units.

rem : Basics.Float -> Rem

rem units.

vh : Basics.Float -> Vh

vh units.

vw : Basics.Float -> Vw

vw units.

vmin : Basics.Float -> Vmin

vmin units.

vmax : Basics.Float -> Vmax

vmax units.

mm : Basics.Float -> Mm

`` units.

cm : Basics.Float -> Cm

cm units.

inches : Basics.Float -> In

in units.

(This is inches instead of in because in is a reserved keyword in Elm.)

pc : Basics.Float -> Pc

pc units.

int : Basics.Int -> IntOrAuto (LengthOrNumberOrAutoOrNoneOrContent (LengthOrNumber (FontWeight (Number { numericValue : Basics.Float, unitLabel : String, units : UnitlessInteger }))))

A unitless integer. Useful with properties like borderImageOutset which accept either length units or unitless numbers for some properties.

num : Basics.Float -> LengthOrNumberOrAutoOrNoneOrContent (LengthOrNumber (Number { numericValue : Basics.Float, unitLabel : String, units : UnitlessFloat }))

A unitless number. Useful with properties like flexGrow which accept unitless numbers.

zero : { value : String, length : Compatible, lengthOrNumber : Compatible, lengthOrNone : Compatible, lengthOrAuto : Compatible, lengthOrMinMaxDimension : Compatible, lengthOrNoneOrMinMaxDimension : Compatible, number : Compatible, outline : Compatible, units : UnitlessInteger, unitLabel : String, numericValue : Basics.Float, lengthOrAutoOrCoverOrContain : Compatible }

Convenience length value that compiles to 0 with no units.

stylesheet
    [ ul
        [ padding zero ]
    ]

...compiles to:

ul {
    padding: 0;
}

calc : Calc compatibleA -> CalcExpression -> Calc compatibleB -> CalculatedLength

The css calc function.

almostPct100 =
    calc (pct 100) minus (px 2)


-- calc(100vh - (2px + 2rem))
screenMinusBorderAndFooter =
    calc (vh 100) minus (calc (px 2) plus (\divisor -> remainderBy divisor 2))

myWidth =
    width almostPct100

myHeight =
    height screenMinusBorderAndFooter

Using * and / with calc isn't supported. Use arithmetics from elm instead.

plus : CalcExpression

Use with calc to add lengths together

>>> calc (pct 100) plus (px 2)
calc (100% + 2px)

minus : CalcExpression

Use with calc to subtract lengths from eachother

>>> calc (pct 100) minus (px 2)
calc (100% - 2px)

addLengths : Length compatible units -> Length compatible units -> Length compatible units

Add two lengths.

>>> addLengths (em 2) (em 3)
em 5

subtractLengths : Length compatible units -> Length compatible units -> Length compatible units

Subtract two lengths.

>>> subtractLengths (em 7) (em 3)
em 4

multiplyLengths : Length compatible units -> Length compatible units -> Length compatible units

Multiply two lengths.

>>> multiplyLengths (em 3) (em 6)
em 18

divideLengths : Length compatible units -> Length compatible units -> Length compatible units

Divide two lengths.

>>> divideLengths (em 9) (em 2)
em 4.5

Length Units


type alias Px =
ExplicitLength PxUnits

px units.


type alias Em =
ExplicitLength EmUnits

em units.


type alias Rem =
ExplicitLength RemUnits

rem units.


type alias Pct =
ExplicitLength PercentageUnits

pct units.


type alias Ex =
ExplicitLength ExUnits

ex units.


type alias Ch =
ExplicitLength ChUnits

ch units.


type alias Vh =
ExplicitLength VhUnits

vh units.


type alias Vw =
ExplicitLength VwUnits

vw units.


type alias Vmin =
ExplicitLength VMinUnits

vmin units.


type alias Vmax =
ExplicitLength VMaxUnits

vmax units.


type alias Mm =
ExplicitLength MMUnits

`` units.


type alias Cm =
ExplicitLength CMUnits

cm units.


type alias In =
ExplicitLength InchUnits

in units.


type alias Pt =
ExplicitLength PtUnits

pt units.


type alias Pc =
ExplicitLength PcUnits

pc units.

Angle

deg : Basics.Float -> AngleOrDirection (Angle {})

deg units.

rad : Basics.Float -> AngleOrDirection (Angle {})

rad units.

grad : Basics.Float -> AngleOrDirection (Angle {})

grad units.

turn : Basics.Float -> AngleOrDirection (Angle {})

turn units.

Pseudo-Classes

pseudoClass : String -> List Style -> Style

Define a custom pseudo-class.

This can be useful for deprecated pseudo-classes such as -moz-any-link, which has been deprecated and removed in modern browsers.

stylesheet
    [ body
        [ pseudoClass "-moz-any-link" [ color (hex "f00") ] ]
    ]

...outputs

body:-moz-any-link {
    color: #f00;
}

active : List Style -> Style

An :active pseudo-class.

any : String -> List Style -> Style

An :any pseudo-class.

checked : List Style -> Style

A :checked pseudo-class.

dir : Directionality -> List Style -> Style

A :dir pseudo-class.

disabled : List Style -> Style

A :disabled pseudo-class.

empty : List Style -> Style

An :empty pseudo-class.

enabled : List Style -> Style

An :enabled pseudo-class.

first : List Style -> Style

A :first pseudo-class.

firstChild : List Style -> Style

A :first-child pseudo-class.

firstOfType : List Style -> Style

A :first-of-type pseudo-class.

fullscreen : List Style -> Style

A :fullscreen pseudo-class.

focus : List Style -> Style

A :focus pseudo-class.

hover : List Style -> Style

An :hover pseudo-class.

visited : List Style -> Style

An :visited pseudo-class.

indeterminate : List Style -> Style

An :indeterminate pseudo-class.

invalid : List Style -> Style

An :invalid pseudo-class.

lang : String -> List Style -> Style

A :lang pseudo-class.

lastChild : List Style -> Style

A :last-child pseudo-class.

lastOfType : List Style -> Style

A :last-of-type pseudo-class.

link : List Style -> Style

A :link pseudo-class.

nthChild : String -> List Style -> Style

An :nth-child pseudo-class.

nthLastChild : String -> List Style -> Style

An :nth-last-child pseudo-class.

nthLastOfType : String -> List Style -> Style

An :nth-last-of-type pseudo-class.

nthOfType : String -> List Style -> Style

An :nth pseudo-class.

onlyChild : List Style -> Style

An :only-child pseudo-class.

onlyOfType : List Style -> Style

An :only-of-type pseudo-class.

optional : List Style -> Style

An :optional pseudo-class.

outOfRange : List Style -> Style

An :out-of-range pseudo-class.

readWrite : List Style -> Style

A :read-write pseudo-class.

required : List Style -> Style

A :required pseudo-class.

root : List Style -> Style

A :root pseudo-class.

scope : List Style -> Style

A :scope pseudo-class.

target : List Style -> Style

A :target pseudo-class.

valid : List Style -> Style

A :valid pseudo-class.

Pseudo-Elements

pseudoElement : String -> List Style -> Style

Define a custom pseudo-element.

stylesheet
    [ body
        [ pseudoElement "-webkit-scrollbar" [ display none ] ]
    ]

...outputs

body::-webkit-scrollbar {
    display: none;
}

after : List Style -> Style

An ::after pseudo-element.

before : List Style -> Style

A ::before pseudo-element.

firstLetter : List Style -> Style

A ::first-letter pseudo-element.

firstLine : List Style -> Style

A ::first-line pseudo-element.

selection : List Style -> Style

A ::selection pseudo-element.

Source

src : ImportType compatible -> String

Quoting

qt : String -> String

For use with font-family

fontFamily serif

fontFamilies [ qt "Gill Sans Extrabold", "Helvetica", .value sansSerif ]

Types


type alias FontSize compatible =
{ compatible | value : String
, fontSize : Compatible 
}

A font size


type alias ColorValue compatible =
{ compatible | value : String
, color : Compatible
, warnings : List String 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/color#Values


type alias ColorStop compatibleA compatibleB unit =
( ColorValue compatibleA
, Maybe (Length compatibleB unit) 
)

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values


type alias IntOrAuto compatible =
{ compatible | value : String
, intOrAuto : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Intentionally Unsupported

These are features you might expect to be in elm-css (because they are in the CSS specification) but which have been omitted because their use is either deprecated or discouraged.

thin : IntentionallyUnsupportedPleaseSeeDocs

The border width values of thin, medium, and thick have unspecified behavior according to the CSS specification, and as such are intentionally unsupported.

Using them is a bad idea, but if the fate of the world depends on it, you can fall back on something like this:

stylesheet
    [ button
        [ property "border-left" "thin" ]
    ]

medium : FontSize {}

thick : IntentionallyUnsupportedPleaseSeeDocs

The border width values of thin, medium, and thick have unspecified behavior according to the CSS specification, and as such are intentionally unsupported.

Using them is a bad idea, but if the fate of the world depends on it, you can fall back on something like this:

stylesheet
    [ button
        [ property "border-left" "thick" ]
    ]

blink : IntentionallyUnsupportedPleaseSeeDocs

blink is ~~totally rad~~ deprecated, and as such has been ~~reluctantly~~ omitted from elm-css.