PackagesReroutesAboutlamdera.com

rtfeldman/elm-css/3.1.0

NOTE: this package is not compatible with Elm 0.19.1

READMEAboutVersionsSourceModules

Css

Functions for building stylesheets.

Misc

type alias Stylesheet =
Stylesheet
asPairs : List Mixin -> List ( String, String )

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

styles = asPairs >> Html.Attributes.style


button
  [ styles [ position absolute, left (px 5) ] ]
  [ text "Whee!" ]
absolute : Position {}

An absolute position value.

position absolute
all : All compatible -> Mixin

An all property.

allPetiteCaps : FontVariantCaps {}
allSmallCaps : FontVariantCaps {}
withClass : class -> List Mixin -> Mixin
{ lengthOrAuto : Compatible
, overflow : Compatible
, textRendering : Compatible
, flexBasis : Compatible
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
, alignItemsOrAuto : Compatible
, value : String
}
baseline : VerticalAlign a b

The middle vertical-align value.

verticalAlign baseline
block : Display {}
bold : LengthOrNumberOrAutoOrNoneOrContent {}
bolder : LengthOrNumberOrAutoOrNoneOrContent {}
border : Length compatible units -> Mixin

Sets border

border  (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
border2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border

border  (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border

border  (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
borderBlockEnd : Length compatible units -> Mixin

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 -> Mixin

Sets border-block-end

borderBlockEnd  (px 5)
borderBlockEnd2 (px 5) dashed
borderBlockEnd3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-end

borderBlockEnd  (px 5)
borderBlockEnd2 (px 5) dashed
borderBlockEnd3 (px 5) dashed (rgb 11 14 17)
borderBlockEndColor : ColorValue compatible -> Mixin

Sets border-block-end-color

borderBlockEndColor (rgb 101 202 0)
borderBlockEndStyle : BorderStyle compatible -> Mixin

Sets border-block-end-style

borderBlockEndStyle dashed
borderBlockStart : Length compatible units -> Mixin

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 -> Mixin

Sets border-block-start

borderBlockStart  (px 5)
borderBlockStart2 (px 5) dashed
borderBlockStart3 (px 5) dashed (rgb 11 14 17)
Length compatibleA units
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-start

borderBlockStart  (px 5)
borderBlockStart2 (px 5) dashed
borderBlockStart3 (px 5) dashed (rgb 11 14 17)
borderBlockStartColor : ColorValue compatible -> Mixin

Sets border-block-start-color

borderBlockStartColor (rgb 101 202 0)
borderBlockStartStyle : BorderStyle compatible -> Mixin

Sets border-block-start-style

borderBlockStartStyle dashed
borderBottom : Length compatible units -> Mixin

Sets border-bottom

borderBottom  (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
borderBottom2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-bottom

borderBottom  (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-bottom

borderBottom  (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
borderBottomColor : ColorValue compatible -> Mixin

Sets border-bottom-color

borderBottomColor (rgb 101 202 0)
borderBottomLeftRadius : Length compatible units -> Mixin

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderBottomLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderBottomRightRadius : Length compatible units -> Mixin

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderBottomRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderBottomStyle : BorderStyle compatible -> Mixin

Sets border-bottom-style

borderBottomStyle dashed
borderBottomWidth : Length compatible units -> Mixin

Sets border-bottom-width

borderBottomWidth (em 4)
borderBox : BoxSizing {}

The border-box value for the box-sizing property.

borderColor : ColorValue compatible -> Mixin

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 -> Mixin

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)
ColorValue compatibleA
-> ColorValue compatibleB
-> ColorValue compatibleC
-> Mixin

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)
ColorValue compatibleA
-> ColorValue compatibleB
-> ColorValue compatibleC
-> ColorValue compatibleD
-> Mixin

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 -> Mixin

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 -> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> LengthOrNumber compatibleD
-> Mixin

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 -> Mixin

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 -> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> LengthOrNumber compatibleD
-> Mixin

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 -> Mixin

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 -> Mixin

Sets border-block-end

borderInlineEnd  (px 5)
borderInlineEnd2 (px 5) dashed
borderInlineEnd3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-end

borderInlineEnd  (px 5)
borderInlineEnd2 (px 5) dashed
borderInlineEnd3 (px 5) dashed (rgb 11 14 17)
borderInlineEndColor : ColorValue compatible -> Mixin

Sets border-inline-end-color

borderInlineEndColor (rgb 101 202 0)
borderInlineEndStyle : BorderStyle compatible -> Mixin

Sets border-inline-end-style

borderInlineEndStyle dashed
borderInlineEndWidth : Length compatible units -> Mixin

Sets border-inline-end-width

borderInlineEndWidth (em 4)
borderInlineStart : Length compatible units -> Mixin

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 -> Mixin

Sets border-block-start

borderInlineStart  (px 5)
borderInlineStart2 (px 5) dashed
borderInlineStart3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-start

borderInlineStart  (px 5)
borderInlineStart2 (px 5) dashed
borderInlineStart3 (px 5) dashed (rgb 11 14 17)
borderInlineStartColor : ColorValue compatible -> Mixin

Sets border-inline-start-color

borderInlineStartColor (rgb 101 202 0)
borderInlineStartStyle : BorderStyle compatible -> Mixin

Sets border-inline-start-style

borderInlineStartStyle dashed
borderLeft : Length compatible units -> Mixin

Sets border-left

borderLeft  (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
borderLeft2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-left

borderLeft  (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-left

borderLeft  (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
borderLeftColor : ColorValue compatible -> Mixin

Sets border-left-color

borderLeftColor (rgb 101 202 0)
borderLeftStyle : BorderStyle compatible -> Mixin

Sets border-left-style

borderLeftStyle dashed
borderLeftWidth : Length compatible units -> Mixin

Sets border-left-width

borderLeftWidth (em 4)
borderRadius : Length compatible units -> Mixin

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 -> Mixin

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)
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Mixin

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)
Length compatibleB unitsB
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Length compatibleD unitsD
-> Mixin

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 -> Mixin

Sets border-right

borderRight  (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
borderRight2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-right

borderRight  (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-right

borderRight  (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
borderRightColor : ColorValue compatible -> Mixin

Sets border-right-color

borderRightColor (rgb 101 202 0)
borderRightStyle : BorderStyle compatible -> Mixin

Sets border-right-style

borderRightStyle dashed
borderRightWidth : Length compatible units -> Mixin

Sets border-right-width

borderRightWidth (em 4)
borderStyle : BorderStyle compatible -> Mixin

Sets border-style

borderStyle dashed
borderTop : Length compatible units -> Mixin

Sets border-top

borderTop  (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
borderTop2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-top

borderTop  (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-top

borderTop  (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
borderTopColor : ColorValue compatible -> Mixin

Sets border-top-color

borderTopColor (rgb 101 202 0)
borderTopLeftRadius : Length compatible units -> Mixin

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopRightRadius : Length compatible units -> Mixin

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)
borderTopRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)
borderTopStyle : BorderStyle compatible -> Mixin

Sets border-top-style

borderTopStyle dashed
borderTopWidth : Length compatible units -> Mixin

Sets border-top-width

borderTopWidth  (em 4)
borderTopWidth2 (em 4) (px 2)
bottom : LengthOrAuto compatible -> Mixin

The bottom property.

position absolute
bottom (px 5)

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

verticalAlign bottom
column : FlexDirectionOrWrap (FlexDirection {})

The[column](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

columnReverse : FlexDirectionOrWrap (FlexDirection {})

The[column-reverse](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

commonLigatures : FontVariantLigatures {}
content : LengthOrNumberOrAutoOrNoneOrContent (FlexBasis {})

The content value for the flex-basis property.

contentBox : BoxSizing {}

The content-box value for the box-sizing 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 {}

A fixed position value.

position fixed
flat : TransformStyle {}

The flat value for the transform-style property.

displayFlex : Mixin

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

flexEnd : AlignItems a b

Theflex-end value for the align-items property.

flexStart : AlignItems a b

Theflex-start value for the align-items property.

groove : BorderStyle {}

A groove border style.

hex : String -> Color

[RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()) 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.

hidden : Overflow (BorderStyle {})

hidden overflow value.

This can also represent a hidden border style.

historicalLigatures : FontVariantLigatures {}
hsl : number -> number -> number -> Color

[HSL color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()) s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage at compile-time

hsla : number -> number -> number -> number -> Color

[HSLA color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsla()) s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage at compile-time

important : Mixin -> Mixin

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 {}
inset : BorderStyle {}

An inset border style.

italic : FontStyle {}
large : FontSize {}
larger : FontSize {}
lighter : LengthOrNumberOrAutoOrNoneOrContent {}
liningNums : FontVariantNumeric {}
matrix : number -> number -> number -> number -> number -> number -> Transform {}

The [matrix()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#matrix()) transform-function.

transform (matrix 0.5 1 1.5 2 2.5 3)
number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> Transform {}

The [matrix3d()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#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 {}))
{ borderStyle : Compatible
, display : Compatible
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
, none : Compatible
, lengthOrNone : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible
, textDecorationLine : Compatible
, transform : Compatible
, value : String
}
normal : FontStyleOrFeatureTagValue {}
oblique : FontStyle {}
oldstyleNums : FontVariantNumeric {}
ordinal : FontVariantNumeric {}
outset : BorderStyle {}

An outset border style.

perspective : number -> Transform {}

The [perspective()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#perspective()) transform-function.

 transform (perspective 0.5)
petiteCaps : FontVariantCaps {}
position : Position compatible -> Mixin

The position property.

preserve3d : TransformStyle {}

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

proportionalNums : FontVariantNumeric {}
relative : Position {}

A relative position value.

position relative
rgb : Int -> Int -> Int -> Color

[RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()) in functional notation.

rgba : Int -> Int -> Int -> Float -> Color

[RGBA color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()).

ridge : BorderStyle {}

A ridge border style.

rotate : Angle compatible -> Transform {}

The [rotate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()) transform-function.

 transform (rotate (deg 90))
rotate3d : number -> number -> number -> Angle compatible -> Transform {}

The [rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate3d()) transform-function.

 transform (rotate3d 1 1 1 (deg 90))
rotateX : Angle compatible -> Transform {}

The [rotateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateX()) transform-function.

 transform (rotateX (deg 90))
rotateY : Angle compatible -> Transform {}

The [rotateY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateY()) transform-function.

 transform (rotateY (deg 90))
rotateZ : Angle compatible -> Transform {}

The [rotateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateZ()) transform-function.

 transform (rotateZ (deg 90))
row : FlexDirectionOrWrap (FlexDirection {})

The[row](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

rowReverse : FlexDirectionOrWrap (FlexDirection {})

The[row-reverse](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

sansSerif : FontFamily {}
scale : number -> Transform {}

The [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()) transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)
scale2 : number -> number -> Transform {}

The [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()) transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)
scale3d : number -> number -> number -> Transform {}

The [scale3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale3d()) transform-function.

 transform (scale3d 0.5 0.5 1)
scaleX : number -> Transform {}

The [scaleX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleX()) transform-function.

 transform (scaleX 0.5)
scaleY : number -> Transform {}

The [scaleY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleY()) transform-function.

 transform (scaleY 0.5)
scroll : Overflow {}

The scroll overflow value.

serif : FontFamily {}
skew : Angle compatible -> Transform {}

The [skew](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()) transform-function.

 transform (skew (deg 90))
 transform (skew2 (deg 90) (deg 45))
skew2 : Angle compatibleA -> Angle compatibleB -> Transform {}

The [skew](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()) transform-function.

 transform (skew (deg 90))
 transform (skew2 (deg 90) (deg 45))
skewX : Angle compatible -> Transform {}

The [skewX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewX()) transform-function.

 transform (skewX (deg 90))
skewY : Angle compatible -> Transform {}

The [skewY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewY()) transform-function.

transform (skewY (deg 90))
slashedZero : FontVariantNumeric {}
small : FontSize {}
smallCaps : FontVariantCaps {}
smaller : FontSize {}
solid : BorderStyle (TextDecorationStyle {})

A solid border style.

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 middle vertical-align value.

verticalAlign sub
super : VerticalAlign a b

The middle vertical-align value.

verticalAlign super
tabularNums : FontVariantNumeric {}
textBottom : VerticalAlign a b

The middle vertical-align value.

verticalAlign textBottom
textTop : VerticalAlign a b

The middle vertical-align value.

verticalAlign textTop
titlingCaps : FontVariantCaps {}
top : LengthOrAuto compatible -> Mixin

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](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()) transform-function.

transform (translate (px 100))
transform (translate2 (px 100) (pct -45))
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Transform {}

The [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()) transform-function.

transform (translate (px 100))
transform (translate2 (px 100) (pct -45))
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Transform {}

The [translateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()) transform-function.

transform (translate3d (px 100) (px 100) (px 100))
translateX : Length compatible units -> Transform {}

The [translateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()) transform-function.

transform (translateX (px 100))
translateY : Length compatible units -> Transform {}

The [translateY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateY()) transform-function.

transform (translateY (px 100))
translateZ : Length compatible units -> Transform {}

The [translateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateZ()) transform-function.

transform (translateZ (px 100))
transparent : ColorValue NonMixable

A transparent color.

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 {}

Style

type alias Snippet =
Snippet
type alias Mixin =
Mixin
mixin : List Mixin -> Mixin

A Mixin allowing you to modularly reuse common styles in other styles. The return value of mixin can be used like any other property, since all properties in elm-css are implemented as mixins.

underlineOnHover =
    mixin "underlineOnHover"
        [ textDecoration none


        , hover
            [ textDecoration underline ]
        ]


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

...has the same result as:

stylesheet
  [ (.) 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)
        ]
    ]
Stylesheet
-> { css : String
, warnings : List String
}

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

Statements

(#) : id -> List Mixin -> Snippet

An id selector.

stylesheet
    [ (#) NavBar
        [ width 960 px
        , backgroundColor (rgb 123 42 208)
        ]
    ]
(.) : class -> List Mixin -> Snippet

A class selector.

stylesheet
    [ (.) LoginFormButton
        [ fontWeight normal
        , color (rgb 128 64 32)
        ]
    ]
selector : String -> List Mixin -> 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 Mixin -> Snippet

A * selector.

(.) 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 -> Mixin
descendants : List Snippet -> Mixin
adjacentSiblings : List Snippet -> Mixin
generalSiblings : List Snippet -> Mixin

Media Queries

screen : MediaQuery
tv : MediaQuery
projection : MediaQuery
print : MediaQuery

Properties

property : String -> String -> Mixin

Define a custom property.

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

...outputs

body {
    -webkit-font-smoothing: none;
}
flex : LengthOrNumberOrAutoOrNoneOrContent compatible -> Mixin

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 -> Mixin

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))

Number compatibleA
-> Number compatibleB
-> LengthOrNumber compatbileC
-> Mixin

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))

medium : FontSize {}
alignSelf : (ExplicitLength IncompatibleUnits -> Mixin) -> Mixin

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 -> Mixin) -> Mixin

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!

order : Number compatible -> Mixin

Sets flex-wrap property.}

flexDirection : FlexDirection compatible -> Mixin

Sets flex-direction property.}

flexFlow1 : FlexDirectionOrWrap compatible -> Mixin

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

FlexDirectionOrWrap compatibleA
-> FlexDirectionOrWrap compatibleB
-> Mixin

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 -> Mixin

Sets flex-wrap property.}

flexBasis : FlexBasis compatible -> Mixin

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 -> Mixin

Sets flex-grow property.}

flexShrink : Number compatible -> Mixin

Sets flex-shrink property.}

transformStyle : TransformStyle compatible -> Mixin

The transform-style property.

transformBox : TransformBox compatible -> Mixin

The transform-box property.

transform : Transform compatible -> Mixin

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) -> Mixin

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.

textDecoration : TextDecorationLine a -> Mixin

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 compatibleA
-> TextDecorationStyle compatibleB
-> Mixin

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 compatibleA
-> TextDecorationStyle compatibleB
-> ColorValue compatibleC
-> Mixin

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 -> Mixin

Sets text-decoration-line

textDecorationLine underline

You can specify multiple line decorations with textDecorationLines.

textDecorationLines  [ underline, overline ]
textDecorations : List (TextDecorationLine compatible) -> Mixin

Sets text-decoration

textDecorations  [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)
List (TextDecorationLine compatibleA)
-> TextDecorationStyle compatibleB
-> Mixin

Sets text-decoration

textDecorations  [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)
List (TextDecorationLine compatibleA)
-> TextDecorationStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets text-decoration

textDecorations  [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)
textDecorationLine : TextDecorationLine compatible -> Mixin

Sets text-decoration-line

textDecorationLine underline

You can specify multiple line decorations with textDecorationLines.

textDecorationLines  [ underline, overline ]
textDecorationLines : List (TextDecorationLine compatible) -> Mixin

Sets text-decoration-line

textDecorationLines  [ underline, overline ]
textDecorationStyle : TextDecorationStyle compatible -> Mixin

Sets text-decoration-style

textDecorationStyle dotted
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 -> Mixin

Sets text-indent.

textIndent  (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLine
textIndent2 : Length compatibleA unitsA -> TextIndent compatibleB -> Mixin

Sets text-indent.

textIndent  (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLine
Length compatibleA unitsA
-> TextIndent compatibleB
-> TextIndent compatibleC
-> Mixin

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 -> Mixin

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 -> Mixin

Sets text-rendering.

textTransform : TextTransform compatible -> Mixin

Sets text-transform.

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

Sets text-align.

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

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 -> Mixin

The left property.

position absolute
left (px 5)

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

textAlign left
center : TextAlign a b

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

textJustify : TextAlign a b

text-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 -> Mixin) -> Mixin

Sets vertical-align.

display : Display compatible -> Mixin

For display: flex, use displayFlex.

opacity : Number compatible -> Mixin
minContent : MinMaxDimension {}

The min-content value for [min-width]https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#Values), [max-width]https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values), [min-height]https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#Values), and [max-height]https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#Values)

maxContent : MinMaxDimension {}

The max-content value for [min-width]https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#Values), [max-width]https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values), [min-height]https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#Values), and [max-height]https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#Values)

fitContent : MinMaxDimension {}

The fit-content value for [min-width]https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#Values), [max-width]https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values), [min-height]https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#Values), and [max-height]https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#Values)

fillAvailable : MinMaxDimension {}

The fill-available value for [min-width]https://developer.mozilla.org/en-US/docs/Web/CSS/min-width#Values), [max-width]https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#Values), [min-height]https://developer.mozilla.org/en-US/docs/Web/CSS/min-height#Values), and [max-height]https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#Values)

width : LengthOrAuto compatible -> Mixin

Sets width

width (px 960)
minWidth : LengthOrMinMaxDimension compatible -> Mixin

Sets min-width

minWidth (px 100)
maxWidth : LengthOrNoneOrMinMaxDimension compatible -> Mixin

Sets max-width

maxWidth (px 960)
height : LengthOrAuto compatible -> Mixin

Sets height

height (px 800)
minHeight : LengthOrMinMaxDimension compatible -> Mixin

Sets min-height

minHeight (px 100)
maxHeight : LengthOrNoneOrMinMaxDimension compatible -> Mixin

Sets max-height

maxHeight (px 1024)
padding : Length compatible units -> Mixin

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 -> Mixin

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)
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Mixin

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)
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Length compatible units
-> Mixin

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 -> Mixin

Sets padding-top

paddingTop (px 10)
paddingBottom : Length compatible units -> Mixin

Sets padding-bottom

paddingBottom (px 10)
paddingRight : Length compatible units -> Mixin

Sets padding-right

paddingRight (px 10)
paddingLeft : Length compatible units -> Mixin

Sets padding-left

paddingLeft (px 10)
paddingBlockStart : LengthOrAuto compatible -> Mixin

Sets padding-block-start

paddingBlockStart (px 10)
paddingBlockEnd : LengthOrAuto compatible -> Mixin

Sets padding-block-end

paddingBlockEnd (px 10)
paddingInlineStart : LengthOrAuto compatible -> Mixin

Sets padding-inline-start

paddingInlineStart (px 10)
paddingInlineEnd : LengthOrAuto compatible -> Mixin

Sets padding-inline-end

paddingInlineEnd (px 10)
margin : LengthOrAuto compatible -> Mixin

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 -> Mixin

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)
LengthOrAuto compatibleA
-> LengthOrAuto compatibleB
-> LengthOrAuto compatibleC
-> Mixin

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)
LengthOrAuto compatibleA
-> LengthOrAuto compatibleB
-> LengthOrAuto compatibleC
-> LengthOrAuto compatibleD
-> Mixin

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 -> Mixin

Sets margin-top

marginTop (px 10)
marginBottom : LengthOrAuto compatible -> Mixin

Sets margin-bottom

marginBottom (px 10)
marginRight : LengthOrAuto compatible -> Mixin

Sets margin-right

marginRight (px 10)
marginLeft : LengthOrAuto compatible -> Mixin

Sets margin-left

marginLeft (px 10)
marginBlockStart : LengthOrAuto compatible -> Mixin

Sets margin-block-start

marginBlockStart (px 10)
marginBlockEnd : LengthOrAuto compatible -> Mixin

Sets margin-block-end

marginBlockEnd (px 10)
marginInlineStart : LengthOrAuto compatible -> Mixin

Sets margin-inline-start

marginInlineStart (px 10)
marginInlineEnd : LengthOrAuto compatible -> Mixin

Sets margin-inline-end

marginInlineEnd (px 10)
boxSizing : BoxSizing compatible -> Mixin

Sets box-sizing

boxSizing borderBox
overflow : Overflow compatible -> Mixin
overflowX : Overflow compatible -> Mixin
overflowY : Overflow compatible -> Mixin
whiteSpace : WhiteSpace compatible -> Mixin
backgroundColor : ColorValue compatible -> Mixin
color : ColorValue compatible -> Mixin
withMedia : List MediaQuery -> List Mixin -> Mixin
each : List (List Mixin -> Snippet) -> List Mixin -> Snippet
media : List MediaQuery -> List Snippet -> Snippet
mediaQuery : String -> List Snippet -> Snippet
textShadow : None compatible -> Mixin

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 -> Mixin

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)
Length compatibleA unitsA
-> Length compatibleB unitsB
-> ColorValue compatibleC
-> Mixin

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)
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> ColorValue compatibleD
-> Mixin

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)
lineHeight : Length compatible units -> Mixin

Sets line-height

lineHeight (px 10)
letterSpacing : Length compatible units -> Mixin

Sets letter-spacing

letterSpacing (px 10)
fontFace : String -> String
fontFamily : FontFamily a -> Mixin
fontSize : FontSize a -> Mixin

Sets font-size

fontSize  xxSmall
fontSize  (px 12)
fontStyle : FontStyle a -> Mixin

Sets font-style

fontStyle  italic
fontWeight : LengthOrNumberOrAutoOrNoneOrContent a -> Mixin

Sets font-weight

fontWeight  bold
fontWeight  (int 300)
fontVariant : FontVariant a -> Mixin

Sets font-variant

fontVariant   smallCaps
fontVariant2  commonLigatures smallCaps
fontVariant3  commonLigatures smallCaps slashedZero
fontVariants  [ oldstyleNums tabularNums stackedFractions ordinal slashedZero ]
fontVariant2 : FontVariant compatibleA -> FontVariant compatibleB -> Mixin
FontVariant compatibleA
-> FontVariant compatibleB
-> FontVariant compatibleC
-> Mixin
fontVariantLigatures : FontVariantLigatures a -> Mixin
fontVariantCaps : FontVariantCaps a -> Mixin
fontVariantNumeric : FontVariantNumeric a -> Mixin
FontVariantNumeric compatibleA
-> FontVariantNumeric compatibleB
-> Mixin
FontVariantNumeric compatibleA
-> FontVariantNumeric compatibleB
-> FontVariantNumeric compatibleC
-> Mixin
fontFamilies : List String -> Mixin
fontVariantNumerics : List (FontVariantNumeric compatible) -> Mixin
fontFeatureSettings : FeatureTagValue a -> Mixin

Sets font-feature-settings

fontFeatureSettings (featureTag "hist")
fontFeatureSettings (featureTag2 "smcp" on)
fontFeatureSettings (featureTag2 "swsh" 2)
fontFeatureSettingsList : List (FeatureTagValue a) -> Mixin

Sets font-feature-settings

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

Values

Color values

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

all, important, custom, solid, transparent, rgb, rgba, hsl, hsla, hex

Font values

featureTag : String -> FeatureTagValue {}

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

fontFeatureSettings (featureTag "hist")
featureTag2 : String -> Int -> FeatureTagValue {}

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

fontFeatureSettings (featureTag2 "smcp" on)
fontFeatureSettings (featureTag2 "swsh" 2)
featureOn : Int

Alias for on value of font-feature-settings

Alias for off value of font-feature-settings

Other values

borderColor : ColorValue compatible -> Mixin

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 -> Mixin

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)
ColorValue compatibleA
-> ColorValue compatibleB
-> ColorValue compatibleC
-> Mixin

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)
ColorValue compatibleA
-> ColorValue compatibleB
-> ColorValue compatibleC
-> ColorValue compatibleD
-> Mixin

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)
borderBottomLeftRadius : Length compatible units -> Mixin

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderBottomLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderBottomRightRadius : Length compatible units -> Mixin

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderBottomRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderTopLeftRadius : Length compatible units -> Mixin

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopRightRadius : Length compatible units -> Mixin

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)
borderTopRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Mixin

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)
borderRadius : Length compatible units -> Mixin

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 -> Mixin

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)
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Mixin

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)
Length compatibleB unitsB
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Length compatibleD unitsD
-> Mixin

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)
borderBottomWidth : Length compatible units -> Mixin

Sets border-bottom-width

borderBottomWidth (em 4)
borderInlineEndWidth : Length compatible units -> Mixin

Sets border-inline-end-width

borderInlineEndWidth (em 4)
borderLeftWidth : Length compatible units -> Mixin

Sets border-left-width

borderLeftWidth (em 4)
borderRightWidth : Length compatible units -> Mixin

Sets border-right-width

borderRightWidth (em 4)
borderTopWidth : Length compatible units -> Mixin

Sets border-top-width

borderTopWidth  (em 4)
borderTopWidth2 (em 4) (px 2)
borderBlockEndStyle : BorderStyle compatible -> Mixin

Sets border-block-end-style

borderBlockEndStyle dashed
borderBlockStartStyle : BorderStyle compatible -> Mixin

Sets border-block-start-style

borderBlockStartStyle dashed
borderInlineEndStyle : BorderStyle compatible -> Mixin

Sets border-inline-end-style

borderInlineEndStyle dashed
borderBottomStyle : BorderStyle compatible -> Mixin

Sets border-bottom-style

borderBottomStyle dashed
borderInlineStartStyle : BorderStyle compatible -> Mixin

Sets border-inline-start-style

borderInlineStartStyle dashed
borderLeftStyle : BorderStyle compatible -> Mixin

Sets border-left-style

borderLeftStyle dashed
borderRightStyle : BorderStyle compatible -> Mixin

Sets border-right-style

borderRightStyle dashed
borderTopStyle : BorderStyle compatible -> Mixin

Sets border-top-style

borderTopStyle dashed
borderStyle : BorderStyle compatible -> Mixin

Sets border-style

borderStyle dashed
borderBlockStartColor : ColorValue compatible -> Mixin

Sets border-block-start-color

borderBlockStartColor (rgb 101 202 0)
borderBlockEndColor : ColorValue compatible -> Mixin

Sets border-block-end-color

borderBlockEndColor (rgb 101 202 0)
borderBottomColor : ColorValue compatible -> Mixin

Sets border-bottom-color

borderBottomColor (rgb 101 202 0)
borderInlineStartColor : ColorValue compatible -> Mixin

Sets border-inline-start-color

borderInlineStartColor (rgb 101 202 0)
borderInlineEndColor : ColorValue compatible -> Mixin

Sets border-inline-end-color

borderInlineEndColor (rgb 101 202 0)
borderLeftColor : ColorValue compatible -> Mixin

Sets border-left-color

borderLeftColor (rgb 101 202 0)
borderRightColor : ColorValue compatible -> Mixin

Sets border-right-color

borderRightColor (rgb 101 202 0)
borderTopColor : ColorValue compatible -> Mixin

Sets border-top-color

borderTopColor (rgb 101 202 0)
borderBox : BoxSizing {}

The border-box value for the box-sizing property.

contentBox : BoxSizing {}

The content-box value for the box-sizing property.

border : Length compatible units -> Mixin

Sets border

border  (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
border2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border

border  (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border

border  (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
borderTop : Length compatible units -> Mixin

Sets border-top

borderTop  (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
borderTop2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-top

borderTop  (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-top

borderTop  (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
borderBottom : Length compatible units -> Mixin

Sets border-bottom

borderBottom  (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
borderBottom2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-bottom

borderBottom  (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-bottom

borderBottom  (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
borderLeft : Length compatible units -> Mixin

Sets border-left

borderLeft  (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
borderLeft2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-left

borderLeft  (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-left

borderLeft  (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
borderRight : Length compatible units -> Mixin

Sets border-right

borderRight  (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
borderRight2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Mixin

Sets border-right

borderRight  (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-right

borderRight  (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
borderBlockEnd : Length compatible units -> Mixin

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 -> Mixin

Sets border-block-end

borderBlockEnd  (px 5)
borderBlockEnd2 (px 5) dashed
borderBlockEnd3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-end

borderBlockEnd  (px 5)
borderBlockEnd2 (px 5) dashed
borderBlockEnd3 (px 5) dashed (rgb 11 14 17)
borderBlockStart : Length compatible units -> Mixin

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 -> Mixin

Sets border-block-start

borderBlockStart  (px 5)
borderBlockStart2 (px 5) dashed
borderBlockStart3 (px 5) dashed (rgb 11 14 17)
Length compatibleA units
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-start

borderBlockStart  (px 5)
borderBlockStart2 (px 5) dashed
borderBlockStart3 (px 5) dashed (rgb 11 14 17)
borderInlineEnd : Length compatible units -> Mixin

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 -> Mixin

Sets border-block-end

borderInlineEnd  (px 5)
borderInlineEnd2 (px 5) dashed
borderInlineEnd3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-end

borderInlineEnd  (px 5)
borderInlineEnd2 (px 5) dashed
borderInlineEnd3 (px 5) dashed (rgb 11 14 17)
borderInlineStart : Length compatible units -> Mixin

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 -> Mixin

Sets border-block-start

borderInlineStart  (px 5)
borderInlineStart2 (px 5) dashed
borderInlineStart3 (px 5) dashed (rgb 11 14 17)
Length compatibleA unitsA
-> BorderStyle compatibleB
-> ColorValue compatibleC
-> Mixin

Sets border-block-start

borderInlineStart  (px 5)
borderInlineStart2 (px 5) dashed
borderInlineStart3 (px 5) dashed (rgb 11 14 17)
borderImageOutset : LengthOrNumber compatible -> Mixin

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 -> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> LengthOrNumber compatibleD
-> Mixin

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 -> Mixin

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 -> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> Mixin

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)
LengthOrNumber compatibleA
-> LengthOrNumber compatibleB
-> LengthOrNumber compatibleC
-> LengthOrNumber compatibleD
-> Mixin

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)
scroll : Overflow {}

The scroll overflow value.

visible : Overflow {}

The visible value for the overflow property.

block : Display {}
inlineBlock : Display {}
inline : Display {}
{ borderStyle : Compatible
, display : Compatible
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
, none : Compatible
, lengthOrNone : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible
, textDecorationLine : Compatible
, transform : Compatible
, value : String
}
{ lengthOrAuto : Compatible
, overflow : Compatible
, textRendering : Compatible
, flexBasis : Compatible
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
, alignItemsOrAuto : Compatible
, value : String
}
inherit : BasicProperty

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

unset : BasicProperty

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

initial : BasicProperty

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

noWrap : WhiteSpace (FlexDirectionOrWrap (FlexWrap {}))
top : LengthOrAuto compatible -> Mixin

The top property.

position absolute
top (px 5)

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

verticalAlign top
static : Position {}

A static position value.

position static
fixed : Position {}

A fixed position value.

position fixed
sticky : Position {}

A sticky position value.

position sticky
relative : Position {}

A relative position value.

position relative
absolute : Position {}

An absolute position value.

position absolute
position : Position compatible -> Mixin

The position property.

bottom : LengthOrAuto compatible -> Mixin

The bottom property.

position absolute
bottom (px 5)

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

verticalAlign bottom
middle : VerticalAlign a b

The middle vertical-align value.

verticalAlign middle
baseline : VerticalAlign a b

The middle vertical-align value.

verticalAlign baseline
sub : VerticalAlign a b

The middle vertical-align value.

verticalAlign sub
super : VerticalAlign a b

The middle vertical-align value.

verticalAlign super
textTop : VerticalAlign a b

The middle vertical-align value.

verticalAlign textTop
textBottom : VerticalAlign a b

The middle vertical-align value.

verticalAlign textBottom
hidden : Overflow (BorderStyle {})

hidden overflow value.

This can also represent a hidden border style.

wavy : TextDecorationStyle {}

A wavy text decoration style.

dotted : BorderStyle (TextDecorationStyle {})

A dotted border style.

dashed : BorderStyle (TextDecorationStyle {})

A dashed border style.

solid : BorderStyle (TextDecorationStyle {})

A solid border style.

double : BorderStyle (TextDecorationStyle {})

A double border style.

groove : BorderStyle {}

A groove border style.

ridge : BorderStyle {}

A ridge border style.

inset : BorderStyle {}

An inset border style.

outset : BorderStyle {}

An outset border style.

matrix : number -> number -> number -> number -> number -> number -> Transform {}

The [matrix()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#matrix()) transform-function.

transform (matrix 0.5 1 1.5 2 2.5 3)
number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> number
-> Transform {}

The [matrix3d()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#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)
perspective : number -> Transform {}

The [perspective()](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#perspective()) transform-function.

 transform (perspective 0.5)
rotate3d : number -> number -> number -> Angle compatible -> Transform {}

The [rotate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate3d()) transform-function.

 transform (rotate3d 1 1 1 (deg 90))
rotateX : Angle compatible -> Transform {}

The [rotateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateX()) transform-function.

 transform (rotateX (deg 90))
rotateY : Angle compatible -> Transform {}

The [rotateY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateY()) transform-function.

 transform (rotateY (deg 90))
rotateZ : Angle compatible -> Transform {}

The [rotateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotateZ()) transform-function.

 transform (rotateZ (deg 90))
scale : number -> Transform {}

The [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()) transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)
scale2 : number -> number -> Transform {}

The [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale()) transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)
scale3d : number -> number -> number -> Transform {}

The [scale3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scale3d()) transform-function.

 transform (scale3d 0.5 0.5 1)
scaleX : number -> Transform {}

The [scaleX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleX()) transform-function.

 transform (scaleX 0.5)
scaleY : number -> Transform {}

The [scaleY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#scaleY()) transform-function.

 transform (scaleY 0.5)
skew : Angle compatible -> Transform {}

The [skew](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()) transform-function.

 transform (skew (deg 90))
 transform (skew2 (deg 90) (deg 45))
skew2 : Angle compatibleA -> Angle compatibleB -> Transform {}

The [skew](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skew()) transform-function.

 transform (skew (deg 90))
 transform (skew2 (deg 90) (deg 45))
skewX : Angle compatible -> Transform {}

The [skewX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewX()) transform-function.

 transform (skewX (deg 90))
skewY : Angle compatible -> Transform {}

The [skewY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#skewY()) transform-function.

transform (skewY (deg 90))
translate : Length compatible units -> Transform {}

The [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()) transform-function.

transform (translate (px 100))
transform (translate2 (px 100) (pct -45))
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Transform {}

The [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translate()) transform-function.

transform (translate (px 100))
transform (translate2 (px 100) (pct -45))
Length compatibleA unitsA
-> Length compatibleB unitsB
-> Length compatibleC unitsC
-> Transform {}

The [translateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()) transform-function.

transform (translate3d (px 100) (px 100) (px 100))
translateX : Length compatible units -> Transform {}

The [translateX](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateX()) transform-function.

transform (translateX (px 100))
translateY : Length compatible units -> Transform {}

The [translateY](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateY()) transform-function.

transform (translateY (px 100))
translateZ : Length compatible units -> Transform {}

The [translateZ](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#translateZ()) transform-function.

transform (translateZ (px 100))
rotate : Angle compatible -> Transform {}

The [rotate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function#rotate()) transform-function.

 transform (rotate (deg 90))
fillBox : TransformBox {}

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

viewBox : TransformBox {}

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

flat : TransformStyle {}

The flat value for the transform-style property.

preserve3d : TransformStyle {}

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

content : LengthOrNumberOrAutoOrNoneOrContent (FlexBasis {})

The content value for the flex-basis property.

wrapReverse : FlexDirectionOrWrap (FlexWrap {})

Thewrap-reverse value for the flex-wrap property.

wrap : FlexDirectionOrWrap (FlexWrap {})

Thewrap value for the flex-wrap property.

flexStart : AlignItems a b

Theflex-start value for the align-items property.

flexEnd : AlignItems a b

Theflex-end value for the align-items property.

stretch : AlignItems a b

Thestretch value for the align-items property.

row : FlexDirectionOrWrap (FlexDirection {})

The[row](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

rowReverse : FlexDirectionOrWrap (FlexDirection {})

The[row-reverse](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

column : FlexDirectionOrWrap (FlexDirection {})

The[column](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

columnReverse : FlexDirectionOrWrap (FlexDirection {})

The[column-reverse](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction #Values) value for the flex-direction property.

serif : FontFamily {}
sansSerif : FontFamily {}
monospace : FontFamily {}
cursive : FontFamily {}
fantasy : FontFamily {}
xxSmall : FontSize {}
xSmall : FontSize {}
small : FontSize {}
large : FontSize {}
xLarge : FontSize {}
xxLarge : FontSize {}
smaller : FontSize {}
larger : FontSize {}
normal : FontStyleOrFeatureTagValue {}
italic : FontStyle {}
oblique : FontStyle {}
bold : LengthOrNumberOrAutoOrNoneOrContent {}
lighter : LengthOrNumberOrAutoOrNoneOrContent {}
bolder : LengthOrNumberOrAutoOrNoneOrContent {}
smallCaps : FontVariantCaps {}
allSmallCaps : FontVariantCaps {}
petiteCaps : FontVariantCaps {}
allPetiteCaps : FontVariantCaps {}
unicase : FontVariantCaps {}
titlingCaps : FontVariantCaps {}
commonLigatures : FontVariantLigatures {}
noCommonLigatures : FontVariantLigatures {}
discretionaryLigatures : FontVariantLigatures {}
noDiscretionaryLigatures : FontVariantLigatures {}
historicalLigatures : FontVariantLigatures {}
noHistoricalLigatures : FontVariantLigatures {}
contextual : FontVariantLigatures {}
noContextual : FontVariantLigatures {}
liningNums : FontVariantNumeric {}
oldstyleNums : FontVariantNumeric {}
proportionalNums : FontVariantNumeric {}
tabularNums : FontVariantNumeric {}
diagonalFractions : FontVariantNumeric {}
stackedFractions : FontVariantNumeric {}
ordinal : FontVariantNumeric {}
slashedZero : FontVariantNumeric {}

Length

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

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

pct : Float -> ExplicitLength PercentageUnits

pct units.

px : Float -> ExplicitLength PxUnits

px units.

em : Float -> ExplicitLength EmUnits

em units.

pt : Float -> ExplicitLength PtUnits

pt units.

ex : Float -> ExplicitLength ExUnits

ex units.

ch : Float -> ExplicitLength ChUnits

ch units.

rem : Float -> ExplicitLength RemUnits

rem units.

vh : Float -> ExplicitLength VhUnits

vh units.

vw : Float -> ExplicitLength VwUnits

vw units.

vmin : Float -> ExplicitLength VMinUnits

vmin units.

vmax : Float -> ExplicitLength VMaxUnits

vmax units.

mm : Float -> ExplicitLength MMUnits

`` units.

cm : Float -> ExplicitLength CMUnits

cm units.

inches : Float -> ExplicitLength InchUnits

in units.

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

pc : Float -> ExplicitLength PcUnits

pc units.

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

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

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

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

{ value : String
, length : Compatible
, lengthOrNumber : Compatible
, lengthOrNone : Compatible
, lengthOrAuto : Compatible
, lengthOrMinMaxDimension : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible
, number : Compatible
, units : UnitlessInteger
, unitLabel : String
, numericValue : Float
}

Convenience length value that compiles to 0 with no units.

stylesheet
  [ ul
      [ padding zero ]
  ]

...compiles to:

ul {
    padding: 0;
}
Length compatible units
-> Length compatible units
-> Length compatible units
Length compatible units
-> Length compatible units
-> Length compatible units
Length compatible units
-> Length compatible units
-> Length compatible units
Length compatible units
-> Length compatible units
-> Length compatible units

Angle

deg : number -> Angle {}

deg units.

rad : number -> Angle {}

rad units.

grad : number -> Angle {}

grad units.

turn : number -> Angle {}

turn units.

Pseudo-Classes

active : List Mixin -> Mixin

An :active pseudo-class.

any : String -> List Mixin -> Mixin

An :any pseudo-class.

checked : List Mixin -> Mixin

A :checked pseudo-class.

dir : Directionality -> List Mixin -> Mixin

A :dir pseudo-class.

disabled : List Mixin -> Mixin

A :disabled pseudo-class.

empty : List Mixin -> Mixin

An :empty pseudo-class.

enabled : List Mixin -> Mixin

An :enabled pseudo-class.

first : List Mixin -> Mixin

A :first pseudo-class.

firstChild : List Mixin -> Mixin

A :first-child pseudo-class.

firstOfType : List Mixin -> Mixin

A :first-of-type pseudo-class.

fullscreen : List Mixin -> Mixin

A :fullscreen pseudo-class.

focus : List Mixin -> Mixin

A :focus pseudo-class.

hover : List Mixin -> Mixin

An :hover pseudo-class.

indeterminate : List Mixin -> Mixin

An :indeterminate pseudo-class.

invalid : List Mixin -> Mixin

An :invalid pseudo-class.

lang : String -> List Mixin -> Mixin

A :lang pseudo-class.

lastChild : List Mixin -> Mixin

A :last-child pseudo-class.

lastOfType : List Mixin -> Mixin

A :last-of-type pseudo-class.

nthChild : String -> List Mixin -> Mixin

An :nth-child pseudo-class.

nthLastChild : String -> List Mixin -> Mixin

An :nth-last-child pseudo-class.

nthLastOfType : String -> List Mixin -> Mixin

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

nthOfType : String -> List Mixin -> Mixin

An :nth pseudo-class.

onlyChild : List Mixin -> Mixin

An :only-child pseudo-class.

onlyOfType : List Mixin -> Mixin

An :only-of-type pseudo-class.

optional : List Mixin -> Mixin

An :optional pseudo-class.

outOfRange : List Mixin -> Mixin

An :out-of-range pseudo-class.

readWrite : List Mixin -> Mixin

A :read-write pseudo-class.

required : List Mixin -> Mixin

A :required pseudo-class.

root : List Mixin -> Mixin

A :root pseudo-class.

scope : List Mixin -> Mixin

A :scope pseudo-class.

target : List Mixin -> Mixin

A :target pseudo-class.

valid : List Mixin -> Mixin

A :valid pseudo-class.

Pseudo-Elements

after : List Mixin -> Mixin

An ::after pseudo-element.

before : List Mixin -> Mixin

A ::before pseudo-element.

firstLetter : List Mixin -> Mixin

A ::first-letter pseudo-element.

firstLine : List Mixin -> Mixin

A ::first-line pseudo-element.

selection : List Mixin -> Mixin

A ::selection pseudo-element.

Media Queries

type alias MediaQuery =
MediaQuery
screen : MediaQuery
print : MediaQuery
tv : MediaQuery
projection : MediaQuery

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

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" ]
    ]

Modules

About this package serverReroutesreroutes.json
Pages and docs rendering from package.elm-lang.org, © 2012-2020 Evan Czaplicki. © 2026 Lamdera