dzuk-mutant / elm-css / Css

If you need something that elm-css does not support right now, the Css.property and Css.Global.selector functions let you define custom properties and selectors, respectively.

Reusable Styles


type alias Style =
Preprocess.Style

A CSS property (such as color), or multiple properties grouped into one.

invisible : Style
invisible =
    display none

This corresponds to the CSS display: none.

boldAndUnderlineOnHover : Style
boldAndUnderlineOnHover =
    hover [ textDecoration underline, fontWeight bold ]

This (roughly) corresponds to the CSS :hover { text-decoration: underline; font-weight: bold; }.

You can use Style values to reuse styles (like mixins in other CSS systems). batch comes in handy for this!

batch : List Style -> Style

Create a style from multiple other styles.

underlineOnHover =
    batch
        [ textDecoration none

        , hover
            [ textDecoration underline ]
        ]

css
    [ color (rgb 128 64 32)
    , underlineOnHover
    ]

...has the same result as:

css
    [ color (rgb 128 64 32)
    , textDecoration none
    , hover
        [ textDecoration underline ]
    ]

Custom Properties

property : String -> String -> Style

Define a custom property.

css [ property "-webkit-font-smoothing" "none" ]

...outputs

-webkit-font-smoothing: none;

!important

important : Style -> Style

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

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.

button
    [ css [ pseudoClass "-moz-any-link" [ color (hex "f00") ] ] ]
    [ text "Whee!" ]

...outputs

<button class="f9fcb2">Whee!</button>

<style>
    .f9fcb2:-moz-any-link {
        color: #f00;
    }
</style>

active : List Style -> Style

An :active pseudo-class.

button [ active [ color (rgb 12 160 190) ] ]

checked : List Style -> Style

A :checked pseudo-class.

This pseudo-class is for any checkbox, option or radio input that is checked or toggled on.

checked
    [ backgroundColor (rgb 0 0 255)
    ]

default : List Style -> Style

A :default pseudo-class.

default [ color (hex "#ff0000") ]

defined : List Style -> Style

A :defined pseudo-class.

defined [ fontStyle italic ]

disabled : List Style -> Style

A :disabled pseudo-class.

button [ disabled [ color (rgb 194 194 194) ] ]

empty : List Style -> Style

An :empty pseudo-class.

empty
    [ backgroundColor (rgb 20 20 20)
    ]

enabled : List Style -> Style

An :enabled pseudo-class.

enabled
    [ borderColor (rgba 150 150 0 0.5)
    ]

first : List Style -> Style

A :first pseudo-class.

first
    [ marginTop (pct 30)
    ]

firstChild : List Style -> Style

A :first-of-type pseudo-class.

firstChild
    [ fontWeight bold
    ]

firstOfType : List Style -> Style

A :first-of-type pseudo-class.

firstOfType
    [ color (rgb 255 0 0)
    ]

focus : List Style -> Style

A :focus pseudo-class.

focus
    [ border3 (px 2) solid (rgb 0 0 0)
    ]

fullscreen : List Style -> Style

A :fullscreen pseudo-class.

fullscreen
    [ backgroundColor (rgb 0 0 0)
    ]

hover : List Style -> Style

A :hover pseudo-class.

hover
    [ fontWeight bold
    , color (rgb 255 50 0)
    ]

inRange : List Style -> Style

An :in-range pseudo-class.

inRange
    [ backgroundColor (rgb 0 255 0)
    ]

indeterminate : List Style -> Style

An :indeterminate pseudo-class.

indeterminate
    [ backgroundColor (rgb 100 100 100)
    ]

invalid : List Style -> Style

An :invalid pseudo-class.

invalid
    [ color (rgb 255 0 0)
    , fontWeight bold
    ]

lastChild : List Style -> Style

A :last-child pseudo-class.

lastChild
    [ backgroundColor (rgb 0 0 255)
    ]

lastOfType : List Style -> Style

A :last-of-type pseudo-class.

lastOfType
    [ color (rgb 100 100 100)
    ]

leftHandPage : List Style -> Style

A :left pseudo-class.

leftHandPage
    [ color (rgb 100 100 100)
    ]

Note: This is called leftHandPage instead of left or left_ is because both of those are taken by property and value keyword functions.

link : List Style -> Style

A :link pseudo-class.

link
    [ color (rgb 0 0 255)
    ]

onlyChild : List Style -> Style

An :only-child pseudo-class.

onlyChild
    [ backgroundColor (rgb 255 255 255)
    ]

onlyOfType : List Style -> Style

An :only-of-type pseudo-class.

onlyOfType
    [ color (rgb 255 0 0)
    , fontStyle italic
    ]

outOfRange : List Style -> Style

An :out-of-range pseudo-class.

outOfRange
    [ color (rgb 255 0 0)
    ]

readOnly : List Style -> Style

A :read-only pseudo-class.

readOnly
    [ color (rgb 50 50 50)
    ]

readWrite : List Style -> Style

A :read-write pseudo-class.

readWrite
    [ backgroundColor (rgb 0 50 150)
    ]

required : List Style -> Style

A :required pseudo-class.

required
    [ border (px 2) solid (rgb 100 100 100)
    ]

rightHandPage : List Style -> Style

A :right pseudo-class.

rightHandPage
    [ color (rgb 100 100 100)
    ]

Note: This is called rightHandPage instead of right or right_ is because both of those are taken by property and value keyword functions.

root : List Style -> Style

A :root pseudo-class.

root
    [ backgroundColor (rgb 0 200 200)
    ]

scope : List Style -> Style

A :scope pseudo-class.

scope
    [ backgroundColor (rgb 0 200 200)
    ]

target : List Style -> Style

A :target pseudo-class.

target
    [ fontWeight bold
    , border3 (px 2) dotted (rgb 255 0 0)
    ]

valid : List Style -> Style

A :valid pseudo-class.

valid
    [ border3 (px 1) solid (rgb 0 255 0)
    ]

visited : List Style -> Style

A :visited pseudo-class.

visited
    [ color (rgb 150 0 255)
    ]

Pseudo-Classes with arguments

dir : Value { ltr : Value.Supported, rtl : Value.Supported } -> List Style -> Style

A :dir() pseudo-class.

dir rtl
    [ backgroundColor (hex "#ff0000")
    ]

lang : String -> List Style -> Style

A :lang() pseudo-class.

lang "en-GB"
    [ backgroundColor (hex "#ff0000")
    ]

not : List String -> List Style -> Style

A :not() pseudo-class.

The first argument is a list of selectors to not select.

not ["p.notthis", ".notthat"]
    [ backgroundColor (hex "#ff0000")
    ]

nthChild : String -> List Style -> Style

An :nth-child() pseudo-class.

nthChild "3"
    [ backgroundColor (hex "#ff0000")
    ]

nthLastChild : String -> List Style -> Style

An :nth-last-child() pseudo-class.

This is the same as nthChild, but counting from the end rather than the start.

nthLastChild "3n+4"
    [ backgroundColor (hex "#ff0000")
    ]

nthOfType : String -> List Style -> Style

An :nth-of-type() pseudo-class.

nthOfType "odd"
    [ backgroundColor (hex "#ff0000")
    ]

nthLastOfType : String -> List Style -> Style

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

nthLastOfType "0n+1"
    [ backgroundColor (hex "#ff0000")
    ]

Pseudo-Elements

pseudoElement : String -> List Style -> Style

Define a custom pseudo-element.

textarea
    [ css [ pseudoElement "-webkit-scrollbar" [ display none ] ] ]
    []

...outputs

<textarea class="d84ff7"></textarea>

<style>
    .d84ff7::-webkit-scrollbar {
        display: none;
    }
</style>

after : List Style -> Style

An ::after pseudo-element.

div [ after [ content "hi!" ] ]

--TODO : Introduce a way to do content - lots of options there, not just text. Also it's overloaded with flexBasis content.

backdrop : List Style -> Style

A ::backdrop pseudo-element.

backdrop
    [ background (rgba 255 0 0 0.25)
    ]

before : List Style -> Style

A ::before pseudo-element.

div [ before [ content "hi!" ] ]

--TODO : Introduce a way to do content - lots of options there, not just text. Also it's overloaded with flexBasis content.

cue : List Style -> Style

A ::cue pseudo-element.

cue
    [ color (rgba 255 255 0 1)
    , fontWeight (int 600)
    ]

firstLetter : List Style -> Style

A ::first-letter pseudo-element.

firstLetter
    [ fontSize (rem 2)
    ]

firstLine : List Style -> Style

A ::first-line pseudo-element.

firstLine
    [ fontWeight (int 600)
    ]

marker : List Style -> Style

A ::marker pseudo-element.

marker
    [ color (rgba 255 255 0 1)
    , fontWeight (int 600)
    ]

placeholder : List Style -> Style

A ::placeholder pseudo-element.

Be careful when using placeholders as they can negatively impact accessibility.

placeholder
    [ opacity (num 1) <| important
    , color (rgb 90 90 90)
    , fontWeight (int 400)
    ]

]

selection : List Style -> Style

A ::selection pseudo-element.

selection
    [ backgroundColor (rgb 200 140 15)
    ]

Pseudo-Elements with arguments

slotted : String -> List Style -> Style

A ::slotted() pseudo-element.

slotted "*"
    [ backgroundColor (rgb 200 140 15)
    ]

Value types

Numerical units

Lengths


type alias Length =
LengthSupported {}

A type alias used to accept a length.


type alias LengthSupported supported =
{ supported | ch : Value.Supported
, em : Value.Supported
, ex : Value.Supported
, rem : Value.Supported
, vh : Value.Supported
, vw : Value.Supported
, vmin : Value.Supported
, vmax : Value.Supported
, px : Value.Supported
, cm : Value.Supported
, mm : Value.Supported
, inch : Value.Supported
, pc : Value.Supported
, pt : Value.Supported
, q : Value.Supported
, zero : Value.Supported
, calc : Value.Supported 
}

A type alias used to accept a length among other values.

zero : Value { provides | zero : Value.Supported }

Compiles to a 0 value with no units.

css [ padding zero ]

...compiles to:

padding: 0;

This conveniently lets you avoid doing things like padding (px 0)

px : Basics.Float -> Value { provides | px : Value.Supported }

px length units.

borderWidth (px 5)

em : Basics.Float -> Value { provides | em : Value.Supported }

em length units.

borderWidth (em 5)

ex : Basics.Float -> Value { provides | ex : Value.Supported }

ex length units.

borderWidth (ex 5)

ch : Basics.Float -> Value { provides | ch : Value.Supported }

ch length units.

borderWidth (ch 5)

rem : Basics.Float -> Value { provides | rem : Value.Supported }

rem length units.

borderWidth (rem 5)

vh : Basics.Float -> Value { provides | vh : Value.Supported }

vh length units.

borderWidth (vh 5)

vw : Basics.Float -> Value { provides | vw : Value.Supported }

vw length units.

borderWidth (vw 5)

vmin : Basics.Float -> Value { provides | vmin : Value.Supported }

vmin length units.

borderWidth (vmin 5)

vmax : Basics.Float -> Value { provides | vmax : Value.Supported }

vmax length units.

borderWidth (vmax 5)

mm : Basics.Float -> Value { provides | mm : Value.Supported }

mm length units.

borderWidth (mm 5)

cm : Basics.Float -> Value { provides | cm : Value.Supported }

cm length units.

borderWidth (cm 5)

q : Basics.Float -> Value { provides | q : Value.Supported }

Q length units.

borderWidth (q 2.5)

inch : Basics.Float -> Value { provides | inch : Value.Supported }

in length units.

borderWidth (inch 5)

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

pt : Basics.Float -> Value { provides | pt : Value.Supported }

pt length units.

borderWidth (pt 5)

pc : Basics.Float -> Value { provides | pc : Value.Supported }

pc length units.

borderWidth (pc 5)

pct : Basics.Float -> Value { provides | pct : Value.Supported }

pct length units.

borderWidth (pct 5)

num : Basics.Float -> Value { provides | num : Value.Supported }

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

flexGrow (num 2)

order (num -2)

int : Basics.Int -> Value { provides | int : Value.Supported }

A unitless integer. Useful with properties like zIndex which accept unitless integers.

zIndex (int 3)

Angles


type alias Angle =
AngleSupported {}

A type alias used to accept an angle.


type alias AngleSupported supported =
{ supported | deg : Value.Supported
, grad : Value.Supported
, rad : Value.Supported
, turn : Value.Supported
, zero : Value.Supported
, calc : Value.Supported 
}

A type alias used to accept an angle among other values.


type alias Width =
WidthSupported {}

A type alias used to accept a 'width'.


type alias WidthSupported supported =
LengthSupported { supported | auto : Value.Supported
, pct : Value.Supported
, minContent : Value.Supported
, maxContent : Value.Supported
, fitContent : Value.Supported 
}

A type alias used to accept a 'width' among other values.

deg : Basics.Float -> Value { provides | deg : Value.Supported }

A deg angle

deg 360 -- one full circle

deg 14.23

grad : Basics.Float -> Value { provides | grad : Value.Supported }

A grad angle

grad 400 -- one full circle

grad 38.8

rad : Basics.Float -> Value { provides | rad : Value.Supported }

A rad angle

rad 6.2832 -- approximately one full circle

rad 1

turn : Basics.Float -> Value { provides | turn : Value.Supported }

A turn angle

turn 1 -- one full circle

turn 0.25

Time


type alias Time =
TimeSupported {}

A type alias used to accept an time.


type alias TimeSupported supported =
{ supported | s : Value.Supported
, ms : Value.Supported 
}

A type alias used to accept an time among other values.

s : Basics.Float -> Value { provides | s : Value.Supported }

The s time unit.

animationDuration (s 1)

ms : Basics.Float -> Value { provides | ms : Value.Supported }

The ms time unit.

animationDuration (ms 120)

Flex

fr : Basics.Float -> Value { provides | fr : Value.Supported }

fr flex units.

gridAutoColumns (fr 1)

minmax : Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, auto : Value.Supported }) -> Value { provides | minmax : Value.Supported }

The minmax() value for grid properties.

gridAutoRows (minmax (px 2) (pct 100))

fitContentTo : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | fitContentTo : Value.Supported }

The fit-content() value that can have a length or percentage value that you want the property to be clamped to.

Not to be confused with the fitContent value for flex properties.

gridAutoColumns (fitContentTo (pct 100))

height (fitContentTo (rem 20))

Names & URLs

customIdent : String -> Value { provides | customIdent : Value.Supported }

Produces an custom-ident value used by properties such as (but not limited to) listStyle and listStyleType.

listStyleType (customIdent "hello-world")

Note: This method does not do any checking if the identifierer supplied is valid.

string : String -> Value { provides | string : Value.Supported }

Produces a string value used by properties such as:

listStyleType (string "> ")

quotes2 (string "«") (string "»")

fontLanguageOverride (string "ENG")

url : String -> Value { provides | url : Value.Supported }

The url value for the cursor, fill, strokeImage, and backgroundImage properties.

Color


type alias Color =
ColorSupported {}

A type alias used to accept a color.


type alias ColorSupported supported =
{ supported | rgb : Value.Supported
, rgba : Value.Supported
, hsl : Value.Supported
, hsla : Value.Supported
, hex : Value.Supported
, currentcolor : Value.Supported 
}

A type alias used to accept a color among other values.

hex : String -> Value { provides | hex : Value.Supported }

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.

color (hex "#60b5cc")

color (hex "60b5cc")

rgb : Basics.Int -> Basics.Int -> Basics.Int -> Value { provides | rgb : Value.Supported }

RGB color value in functional notation.

color (rgb 96 181 204)

rgba : Basics.Int -> Basics.Int -> Basics.Int -> Basics.Float -> Value { provides | rgba : Value.Supported }

RGBA color value.

color (rgba 96 181 204 0.25)

hsl : Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | hsl : Value.Supported }

HSL color value.

The s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.

color (hsl 193 0.51 0.59) -- hsl(193, 51%, 59%)

hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | hsla : Value.Supported }

HSLA color value

The s and l values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.

color (hsla 193 0.51 0.59 0.25) -- hsl(193, 51%, 59%, 0.25)

currentcolor : Value { provides | currentcolor : Value.Supported }

The currentcolor value used by properties such as color, backgroundColor

color currentcolor

Images & Shapes


type alias Image =
ImageSupported {}

A type alias used to accept an image.


type alias ImageSupported supported =
{ supported | url : Value.Supported
, linearGradient : Value.Supported
, radialGradient : Value.Supported
, repeatingLinearGradient : Value.Supported
, repeatingRadialGradient : Value.Supported 
}

A type alias used to accept an image among other values.


type alias BasicShape =
BasicShapeSupported {}

A type alias used to accept a basic shape.


type alias BasicShapeSupported supported =
{ supported | insetRect : Value.Supported
, insetRect2 : Value.Supported
, insetRect3 : Value.Supported
, insetRect4 : Value.Supported
, circle : Value.Supported
, circleAt : Value.Supported
, circleAt2 : Value.Supported
, ellipse : Value.Supported
, ellipseAt : Value.Supported
, ellipseAt2 : Value.Supported
, polygon : Value.Supported
, path : Value.Supported 
}

A type alias used to accept a basic shape among other values.

insetRect : Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }

Provides a one-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )

clipPath <| insetRect (px 20) (Just <| insetRound (px 2))

clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))

clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))

clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing

clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))

clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect instead of inset because inset and inset_ are already property and value functions handling other areas of CSS.

insetRect2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }

Provides a 2-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )

clipPath <| insetRect (px 20) (Just <| insetRound (px 2))

clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))

clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))

clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing

clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))

clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect2 instead of inset2 because inset and inset_ are already property and value functions handling other areas of CSS.

insetRect3 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }

Provides a 2-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )

clipPath <| insetRect (px 20) (Just <| insetRound (px 2))

clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))

clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))

clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing

clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))

clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect3 instead of inset3 because inset and inset_ are already property and value functions handling other areas of CSS.

insetRect4 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }

Provides a 2-argument inset() value. (Which creates an inset rectangle shape.)

clipPath <| insetRect (px 20) Nothing, "inset(20px)" )

clipPath <| insetRect (px 20) (Just <| insetRound (px 2))

clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))

clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))

clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing

clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))

clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))

Note: This is called insetRect4 instead of inset4 because inset and inset_ are already property and value functions handling other areas of CSS.

insetRound : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound : Value.Supported }

Provides a 1-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))

insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))

insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))

insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

insetRound2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound2 : Value.Supported }

Provides a 2-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))

insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))

insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))

insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

insetRound3 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound3 : Value.Supported }

Provides a 3-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))

insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))

insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))

insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

insetRound4 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound3 : Value.Supported }

Provides a 4-value border radius for use with insetRect(#insetRect) (inset()).

insetRect (px 40) (Just <| insetRound (px 2))

insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))

insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))

insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))

circle : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value { provides | circle : Value.Supported }

Provides a one-argument circle() value.

clipPath (circle (pct 10))

clipPath (circle closestSide)

clipPath (circleAt (pct 10) left)

clipPath (circleAt closestSide (rem 5))

clipPath (circleAt2 closestSide (rem 5) (rem 1))

Note: This is not to be confused with circle_, which is a keyword value for properties such as listStyleType.

circleAt : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value { provides | circleAt : Value.Supported }

Provides a 2-argument circle(<rad> at <pos>) value.

clipPath (circleAt (pct 10) left_)

clipPath (circleAt closestSide (rem 5))

clipPath (circleAt2 closestSide (rem 5) (rem 1))

circleAt2 : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Value { provides | circleAt2 : Value.Supported }

Provides a 3-argument circle(<rad> at <posX> <posY>) value.

clipPath (circleAt2 closestSide (rem 5) (rem 1))

clipPath (circleAt2 (pct 10) top_ left_)

ellipse : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value { provides | ellipse : Value.Supported }

Provides a one-argument ellipse() value.

clipPath (ellipse (px 20) (px 10))

clipPath (ellipse closestSide farthestSide)

clipPath (ellipseAt closestSide (pct 10) left_)

clipPath (ellipseAt (pct 20) (pct 10) (rem 5))

clipPath (ellipseAt2 (rem 5) closestSide (rem 5) (rem 1))

ellipseAt : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value { provides | ellipseAt : Value.Supported }

Provides a 3-argument ellipse(<radiusX> <radiusY> at <pos>) value.

clipPath (ellipseAt (pct 50) (pct 10) left_)

clipPath (ellipseAt (rem 5) closestSide (rem 5))

ellipseAt2 : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Value { provides | ellipseAt2 : Value.Supported }

Provides a 4-argument ellipse(<radiusX> <radiusY> at <posX> <posY>) value.

clipPath (ellipseAt2 (rem 6) closestSide (rem 5) (rem 1))

clipPath (ellipseAt2 farthestSide (pct 10) left_ top_)

closestSide : Value { provides | closestSide : Value.Supported }

The closest-side value for use in circle and ellipse shapes.

clipPath (circle closestSide)

clipPath (ellipse farthestSide (px 20))

farthestSide : Value { provides | farthestSide : Value.Supported }

The farthest-side value for use in circle and ellipse shapes.

clipPath (circleAt farthestSide (pct 20))

clipPath (ellipseAt farthestSide (px 2) (pct 20))

polygon : List ( Basics.Float, Basics.Float ) -> Value { provides | polygon : Value.Supported }

Creates a polygon() value for CSS properties that accept a <basic-shape> value.

Each numerical argument is a Float that represents a percentage.

clipPath <| polygon [ (20, 30), (40, 80.3), (14, 50) ]

path : String -> Value { provides | path : Value.Supported }

Creates a path() value for CSS properties that accept a <basic-shape> value.

The input string needs to be a valid SVG path string.

clipPath <| path "M161.693,39.249C94.047,39.249 39.127,94.169 39.127,161.816C39.127,229.462 94.047,284.382 161.693,284.382C229.34,284.382 284.26,229.462 284.26,161.816C284.26,94.169 229.34,39.249 161.693,39.249ZM161.693,71.382C211.605,71.382 211.605,252.249 161.693,252.249C111.782,252.249 71.26,211.727 71.26,161.816C71.26,111.904 111.782,71.382 161.693,71.382Z"

Blend Modes


type alias BlendMode =
BlendModeSupported {}

A type alias used to accept a blend mode.


type alias BlendModeSupported supported =
{ supported | normal : Value.Supported
, multiply : Value.Supported
, screen : Value.Supported
, overlay : Value.Supported
, darken : Value.Supported
, lighten : Value.Supported
, colorDodge : Value.Supported
, colorBurn : Value.Supported
, hardLight : Value.Supported
, softLight : Value.Supported
, difference : Value.Supported
, exclusion : Value.Supported
, hue : Value.Supported
, saturation : Value.Supported
, color_ : Value.Supported
, luminosity : Value.Supported 
}

A type alias used to accept a blend mode among other values.

multiply : Value { provides | multiply : Value.Supported }

The multiply background-blend-mode value.

backgroundBlendMode multiply

screen : Value { provides | screen : Value.Supported }

The screen background-blend-mode value.

backgroundBlendMode screen

overlay : Value { provides | overlay : Value.Supported }

The overlay background-blend-mode value.

backgroundBlendMode overlay

darken : Value { provides | darken : Value.Supported }

The darken background-blend-mode value.

backgroundBlendMode darken

lighten : Value { provides | lighten : Value.Supported }

The lighten background-blend-mode value.

backgroundBlendMode lighten

colorDodge : Value { provides | colorDodge : Value.Supported }

The color-dodge background-blend-mode value.

backgroundBlendMode color - colorDodge

colorBurn : Value { provides | colorBurn : Value.Supported }

The color-burn background-blend-mode value.

backgroundBlendMode colorBurn

hardLight : Value { provides | hardLight : Value.Supported }

The hard-light background-blend-mode value.

backgroundBlendMode hardLight

softLight : Value { provides | softLight : Value.Supported }

The soft-light background-blend-mode value.

backgroundBlendMode softLight

difference : Value { provides | difference : Value.Supported }

The difference background-blend-mode value.

backgroundBlendMode difference

exclusion : Value { provides | exclusion : Value.Supported }

The exclusion background-blend-mode value.

backgroundBlendMode exclusion

hue : Value { provides | hue : Value.Supported }

The hue background-blend-mode value.

backgroundBlendMode hue

saturation : Value { provides | saturation : Value.Supported }

The saturation background-blend-mode value.

backgroundBlendMode saturation

color_ : Value { provides | color_ : Value.Supported }

The color background-blend-mode value.

backgroundBlendMode color_

Not to be confused with color.

luminosity : Value { provides | luminosity : Value.Supported }

The luminosity background-blend-mode value.

backgroundBlendMode luminosity

Filter Functions


type alias FilterFunction =
FilterFunctionSupported {}

A type alias used to accept a filter function.


type alias FilterFunctionSupported supported =
{ supported | blur : Value.Supported
, brightness : Value.Supported
, contrast : Value.Supported
, dropShadow : Value.Supported
, grayscale : Value.Supported
, hueRotate : Value.Supported
, invert : Value.Supported
, opacity_ : Value.Supported
, saturate : Value.Supported
, sepia : Value.Supported 
}

A type alias used to accept a filter function, among other values.

blur : Value Length -> Value { provides | blur : Value.Supported }

Provides a blur() filter function value.

backdropFilter <| blur (px 20)
-- backdrop-filter: blur(20px);

brightness : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | brightness : Value.Supported }

Provides a brightness() filter function value.

filter <| brightness (pct 20)
-- backdrop-filter: brightness(20%);

filter <| brightness zero -- completely black

backdropFilter <| contrast (num 1) -- no effect

filter <| brightness (num 0.4)

contrast : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | contrast : Value.Supported }

Provides a contrast() filter function value.

backdropFilter <| contrast (pct 20)
-- backdrop-filter: contrast(20%);

backdropFilter <| contrast zero -- completely gray

backdropFilter <| contrast (num 1) -- no effect

backdropFilter <| contrast (num 0.4)

dropShadow : Value Length -> Value Length -> Maybe (Value Length) -> Maybe (Value Color) -> Value { provides | dropShadow : Value.Supported }

Provides a drop-shadow() filter function value.

filter <| dropShadow (px 20) (px 3) (Just <| px 30) (Just <| hex "#fff")
-- filter: drop-shadow(20px 4px 30px #fff);

grayscale : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | grayscale : Value.Supported }

Provides a grayscale() filter function value.

backdropFilter <| grayscale (pct 20)
-- backdrop-filter: grayscale(20%);

backdropFilter <| grayscale zero -- no effect

backdropFilter <| grayscale (num 1) -- completely grayscale

backdropFilter <| grayscale (num 0.4) -- 40% grayscale

hueRotate : Value Angle -> Value { provides | hueRotate : Value.Supported }

Provides a hue-rotate() filter function value.

backdropFilter <| hueRotate (deg -180)
-- backdrop-filter: hue-rotate(-180deg);

invert : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | invert : Value.Supported }

Provides a invert() filter function value.

backdropFilter <| invert (pct 20)
-- backdrop-filter: invert(20%);

backdropFilter <| invert zero -- no effect

backdropFilter <| invert (num 1) -- completely inverted

backdropFilter <| invert (num 0.4) -- 40% inversion

opacity_ : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | opacity_ : Value.Supported }

Provides a opacity() filter function value.

backdropFilter <| opacity_ (pct 20)
-- backdrop-filter: opacity(20%);

backdropFilter <| opacity_ zero -- completely transparent

backdropFilter <| opacity_ (num 1) -- no effect

backdropFilter <| opacity_ (num 0.4) -- 40% transparent

Note: This is called opacity_ instead of opacity because opacity is already used as a property function.

saturate : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | saturate : Value.Supported }

Provides a saturate() filter function value.

filter <| saturate (pct 20)
-- filter: saturate(20%);

filter <| saturate zero -- completely desaturated

filter <| saturate (num 1) -- no effect

filter <| saturate (num 2) -- double saturation

filter <| saturate (num 0.4) -- 40% saturated

sepia : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | sepia : Value.Supported }

Provides a sepia() filter function value.

filter <| sepia (pct 20)
-- filter: sepia(20%);

filter <| sepia zero -- no effect

filter <| sepia (num 1) -- completely sepia

filter <| sepia (num 0.4) -- 40% sepia

Lines


type alias LineStyle =
LineStyleSupported { hidden : Value.Supported }

A type alias used to accept a line-style. This includes hidden as a possible value.


type alias LineStyleSupported supported =
{ supported | none : Value.Supported
, dotted : Value.Supported
, dashed : Value.Supported
, solid : Value.Supported
, double : Value.Supported
, groove : Value.Supported
, ridge : Value.Supported
, inset_ : Value.Supported
, outset : Value.Supported 
}

A type alias used to accept a line-style (without the hidden) value among other values.


type alias LineWidth =
LineWidthSupported {}

A type alias used to accept a line-width.


type alias LineWidthSupported supported =
LengthSupported { supported | thin : Value.Supported
, medium : Value.Supported
, thick : Value.Supported 
}

A type alias used to accept a line-width among other values.

Calc

calc : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, int : Value.Supported }) -> CalcOperation -> Value { provides | calc : Value.Supported }

The css calc function.

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

-- The following compiles to: calc(100vh - (2px + 2rem))
screenMinusBorderAndFooter =
    calc (vh 100) (minus (calc (px 2) (plus (rem 2))))

myWidth =
    width almostPct100

myHeight =
    height screenMinusBorderAndFooter

CAUTION: calc can easily be used to create invalid CSS values! For example, zIndex (calc (pct 100) (minus (px 5))) compiles to z-index: calc(100% - 5px); which is invalid. According to the spec, calc may return values that have no relation to its arguments, so unfortunately there's not much elm-css can do to make calc more reliable. Use with caution!


type CalcOperation

Either plus or minus.

See calc for how to use this.

minus : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, int : Value.Supported }) -> CalcOperation

Use with calc to subtract one value from another.

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

plus : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, int : Value.Supported }) -> CalcOperation

Use with calc to add one numeric value to another.

calc (pct 100) (plus (px 2))
-- calc: (100% + 2px)

times : Value { num : Value.Supported, int : Value.Supported, zero : Value.Supported } -> CalcOperation

Use with calc to multiply a value by a unitless number.

calc (pct 100) (times (int 2))
-- calc: (100% * 2px)

Shared/Grouped keyword values

Many different kinds of CSS properties use the same keyword values, so they're put in this place for easier understanding.

Some of these keywords are used only in one property but they fit into a group of functionality (like Logical Values), so they're also grouped here.

General Values

All CSS properties can have the values unset, initial, inherit and revert.


type alias BaseValue supported =
Value { supported | initial : Value.Supported
, inherit : Value.Supported
, unset : Value.Supported
, revert : Value.Supported 
}

A type that is used in properties for CSS wide values. See CSS-wide values.

unset : Value { provides | unset : Value.Supported }

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

display unset

borderStyle unset

initial : Value { provides | initial : Value.Supported }

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

display initial

borderStyle initial

inherit : Value { provides | inherit : Value.Supported }

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

display inherit

revert : Value { provides | revert : Value.Supported }

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

all revert

color revert

Very common keywords

auto : Value { provides | auto : Value.Supported }

The auto value used in many properties such as (but not limited to) width, zoom, outlineStyle, and flexBasis.

width auto

zoom auto

flexBasis auto

none : Value { provides | none : Value.Supported }

The none value used in many properties such as (but not limited to) display, borderStyle, maxWidth, clear, strokeDashJustify, and flex.

display none

borderStyle none

strokeDashJustify none

flex none

(usually) Absolute positional values

left_ : Value { provides | left_ : Value.Supported }

The left value, used in many properties such as:

backgroundPosition left_

clear left_

float left_

justifyContent left_

justifyItems left_

justifySelf left_

pageBreakAfter left_

textAlign left_

The value is called left_ instead of left because left is already a property function.

right_ : Value { provides | right_ : Value.Supported }

The right value, used in many properties such as:

backgroundPosition right_

clear right_

float right_

justifyContent right_

justifyItems right_

justifySelf right_

pageBreakAfter right_

textAlign right_

The value is called right_ instead of right because right is already a property function.

top_ : Value { provides | top_ : Value.Supported }

The top value, used in the following properties:

backgroundPosition top_

captionSide top_

objectPosition2 right_ top_

perspectiveOrigin2 left_ top_

transformOrigin top_

verticalAlign top_

The value is called top_ instead of top because top is already a property function.

bottom_ : Value { provides | bottom_ : Value.Supported }

The bottom value, used in the following properties:

backgroundPosition bottom_

captionSide bottom_

objectPosition2 right_ bottom_

perspectiveOrigin2 left_ bottom_

transformOrigin bottom_

verticalAlign bottom_

The value is called bottom_ instead of bottom because bottom is already a property function.

(usually) Logical Values

Logical values are those that set properties by their relation to the user's reading direction.

Sometimes these keywords mean other things too.

block : Value { provides | block : Value.Supported }

The block value.

This is a CSS Logical value used by display and resize.

display block

resize block

inline : Value { provides | inline : Value.Supported }

The inline value.

This is a CSS Logical value used by display and resize.

display inline

resize inline

start : Value { provides | start : Value.Supported }

The start value.

It's used in the following properties as a CSS Logical value:

alignContent start

justifyItems start

It's also used as an animation keyword used in steps2.

steps2 3 start

end : Value { provides | end : Value.Supported }

The end value.

It's used in the following properties as a CSS Logical value:

alignContent end

justifyItems end

It's also used as an animation keyword used in steps2.

steps2 3 end

blockStart : Value { provides | blockEnd : Value.Supported }

The block-start value, which is a CSS Logical value. It can be used with captionSide.

captionSide blockStart

blockEnd : Value { provides | blockEnd : Value.Supported }

The block-end value, which is a CSS Logical value. It can be used with captionSide.

captionSide blockEnd

inlineStart : Value { provides | inlineStart : Value.Supported }

Sets inline-start, which is a CSS Logical value. It can be used with the following properties:

    clear inlineStart

    captionSide inlineStart

    float inlineStart

inlineEnd : Value { provides | inlineEnd : Value.Supported }

Sets inline-end, which is a CSS Logical value. It can be used with the following properties:

    clear inlineEnd

    captionSide inlineEnd

    float inlineEnd

Content sizing values

minContent : Value { provides | minContent : Value.Supported }

The min-content value used for properties such as:

width minContent

maxContent : Value { provides | maxContent : Value.Supported }

The max-content value used for properties such as:

width maxContent

fitContent : Value { provides | fitContent : Value.Supported }

The fit-content value used for properties such as:

width fitContent

Axis values

x : Value { provides | x : Value.Supported }

Sets x value for usage with scrollSnapType2 and rotate2.

scrollSnapType2 x mandatory

rotate x (deg 10)

y : Value { provides | y : Value.Supported }

Sets y value for usage with scrollSnapType2 and rotate2.

scrollSnapType2 y mandatory

rotate y (deg 50)

z : Value { provides | z : Value.Supported }

Sets z value for usage with rotate2.

rotate z (deg 100)

Alignment values

stretch : Value { provides | stretch : Value.Supported }

The stretch value used in the following properties:

alignContent stretch

strokeDashJustify stretch

center : Value { provides | center : Value.Supported }

The center value, used in many properties such as:

backgroundPosition enter

justifyContent center

Geometry box values

marginBox : Value { provides | marginBox : Value.Supported }

The margin-box value, used in clipPath.

clipPath marginBox

borderBox : Value { provides | borderBox : Value.Supported }

The border-box value, used in the following properties:

boxSizing borderBox

backgroundClip borderBox

backgroundOrigin borderBox

strokeOrigin borderBox

paddingBox : Value { provides | paddingBox : Value.Supported }

The padding-box value, used with backgroundClip, backgroundOrigin, and strokeOrigin.

backgroundClip paddingBox

backgroundOrigin paddingBox

strokeOrigin paddingBox

contentBox : Value { provides | contentBox : Value.Supported }

The content-box value, used in the following properties:

boxSizing contentBox

backgroundClip contentBox

backgroundOrigin contentBox

strokeOrigin contentBox

fillBox : Value { provides | fillBox : Value.Supported }

The fill-box value used by strokeOrigin and transformBox.

strokeOrigin fillBox

transformBox fillBox

strokeBox : Value { provides | strokeBox : Value.Supported }

The stroke-box value used by strokeOrigin and transformBox.

strokeOrigin strokeBoxx

transformBox strokeBox

viewBox : Value { provides | viewBox : Value.Supported }

The view-box value used by transformBox.

transformBox viewBox

Typographic values

baseline : Value { provides | baseline : Value.Supported }

The baseline value, used in the following properties:

alignItems baseline

verticalAlign baseline

sub : Value { provides | sub : Value.Supported }

A sub value for the following properties:

    fontVariantPosition sub

    verticalAlign sub

super : Value { provides | super : Value.Supported }

A super value for the following properties:

    fontVariantPosition super

    verticalAlign super

ruby : Value { provides | ruby : Value.Supported }

The ruby value used by display and fontVariantEastAsian.

display ruby

fontVariantEastAsian2 ruby jis83

fullWidth : Value { provides | fullWidth : Value.Supported }

A full-width value for:

textTransform

Forces the writing of characters in a square so they can be aligned in East Asian scripts.

fontVariantEastAsian

Activates the East Asian characters that are roughly be the same width.

textTransform fullWidth

fontVariantEastAsian fullWidth

under : Value { provides | under : Value.Supported }

A under value for the textUnderlinePosition property and the textEmphasisPosition2 property.

textUnderlinePosition under

textEmphasisPosition2 under left_

circle_ : Value { provides | circle_ : Value.Supported }

The circle value used by properties such as listStyle, listStyleType, textEmphasis and textEmphasisStyle.

listStyleType circle_

textEmphasis2 circle_ (hex "ff0000")

textEmphasisStyle circle_

Note: This is not to be confused with circle, circleAt or circleAt2, which are <basic-shape> data types.

Visibility

hidden : Value { provides | hidden : Value.Supported }

The hidden value used for properties such as visibility, overflow and borderStyle.

visibility hidden

overflow hidden

borderStyle hidden

visible : Value { provides | visible : Value.Supported }

The visible value used for properties such as visibility, overflow and pointer-events.

visibility visible

overflow visible

pointerEvents visible

Thickness

thin : Value { provides | thin : Value.Supported }

The thin value used by various properties.

In borderWidth and columnRuleWidth, the value is equivalent to 1px.

borderWidth thin

columnRuleWidth thin

It's also used in scrollbarWidth.

scrollbarWidth thin

thick : Value { provides | thick : Value.Supported }

The thick value used by properties such as borderWidth, and columnRuleWidth.

borderWidth thick

columnRuleWidth thick

The value is equivalent of 5px.

Miscellaneous shared

normal : Value { provides | normal : Value.Supported }

The normal value, which can be used with such properties as:

alignItems normal

columnGap normal

fontVariantCaps normal

whiteSpace normal

wordBreak normal

zoom normal

strict : Value { provides | strict : Value.Supported }

Sets strict value for usage with lineBreak and contain.

contain strict

lineBreak strict

all_ : Value { provides | all_ : Value.Supported }

The all value used in properties such as columnSpan and pointerEvents.

columnSpan all_

pointerEvents all_

This value function has an underscore because all is already a property function.

both : Value { provides | both : Value.Supported }

Sets both value for usage with clear and resize.

  clear both

  resize both

always : Value { provides | always : Value.Supported }

Sets always value for usage with scrollSnapStop, pageBreakBefore, and pageBreakAfter.

scrollSnapStop always

pageBreakBefore always

pageBreakAfter always

scroll : Value { provides | scroll : Value.Supported }

The scroll value used for properties such as overflow and background-attachment.

overflow scroll

backgroundAttachment scroll

column : Value { provides | column : Value.Supported }

The column value, used in flex-direction, break-before and break-after properties.

flexDirection column

breakBefore column

breakAfter column

content : Value { provides | content : Value.Supported }

The content value used in the following properties:

flexBasis content

contain content

fill_ : Value { provides | fill_ : Value.Supported }

The fill value used in properties such as objectFit, pointerEvents, paintOrder and maskBorderSlice.

objectFit fill_

pointerEvents fill_

paintOrder2 fill_ markers

maskBorderSlice4 fill_ (num 20) (pct 10) (num 45)

The value is called fill_ instead of fill because fill is already a property function.

stroke : Value { provides | stroke : Value.Supported }

The stroke value used by pointerEvents and paintOrder.

pointerEvents stroke

paintOrder2 stroke markers

text : Value { provides | text : Value.Supported }

The text value for the cursor, backgroundClip, and user-select properties.

backgroundClip text

cursor text

userSelect text

style : Value { provides | style : Value.Supported }

Sets the style value for:

    contain style

    fontSynthesis style

clip : Value { provides | clip : Value.Supported }

The clip value used by overflow and textOverflow.

overflow clip

overflowX clip

overflowY clip

textOverflow clip

Looking for the clip property? It's been deprecated and not supported in this version of elm-css. You should use clipPath instead.

cover : Value { provides | cover : Value.Supported }

Sets cover for the following properties:

backgroundSize cover

strokeSize cover

contain_ : Value { provides | contain_ : Value.Supported }

Sets contain for the following properties:

backgroundSize contain_

overscrollBehavior contain_

The value is called contain_ instead of contain because contain is already a property function.

repeat : Value { provides | repeat : Value.Supported }

The repeat value for background properties and strokeRepeat.

backgroundRepeat repeat

strokeRepeat repeat

noRepeat : Value { provides | repeat : Value.Supported }

The no-repeat value for background properties and strokeRepeat.

backgroundRepeat noRepeat

strokeRpeat noRepeat

repeatX : Value { provides | repeatX : Value.Supported }

The repeat-x value for repeating backgrounds and strokeRepeat.

backgroundRepeat repeatX

strokeRepeat repeatX

repeatY : Value { provides | repeatY : Value.Supported }

The repeat-y value for repeating backgrounds and strokeRepeat.

backgroundRepeat repeatY

strokeRepeat repeatY

space : Value { provides | space : Value.Supported }

The space value for repeating backgrounds and strokeRepeat.

backgroundRepeat space

strokeRepeat space

round_ : Value { provides | round_ : Value.Supported }

The round value used for properties such as:

This is called round_ because round is a function word used in Elm Core's Basics module.

    backgroundRepeat round_

    strokeLineCap round_

    strokeLinejoin2 miter round_

    strokeRepeat round_

isolate : Value { provides | isolate : Value.Supported }

Sets isolate value for usage with isolation, and unicodeBidi.

isolation isolate

unicodeBidi isolate

matchParent : Value { provides | matchParent : Value.Supported }

A match-parent value for the text-align, and strokeOrigin properties.

textAlign matchParent

strokeOrigin matchParent

All

all : BaseValue a -> Style

Sets an all property.

all inherit

Display

display : BaseValue { block : Value.Supported, flex_ : Value.Supported, flow : Value.Supported, flowRoot : Value.Supported, grid_ : Value.Supported, listItem : Value.Supported, inline : Value.Supported, inlineBlock : Value.Supported, inlineFlex : Value.Supported, inlineGrid : Value.Supported, inlineTable : Value.Supported, none : Value.Supported, contents : Value.Supported, ruby : Value.Supported, rubyBase : Value.Supported, rubyBaseContainer : Value.Supported, rubyText : Value.Supported, rubyTextContainer : Value.Supported, runIn : Value.Supported, table : Value.Supported, tableCaption : Value.Supported, tableCell : Value.Supported, tableColumn : Value.Supported, tableColumnGroup : Value.Supported, tableFooterGroup : Value.Supported, tableHeaderGroup : Value.Supported, tableRow : Value.Supported, tableRowGroup : Value.Supported } -> Style

Sets display.

display block

Note: This function accepts flex_ and grid_ ather than flex and grid because flex and grid are already property functions.

display2 : Value { block : Value.Supported, inline : Value.Supported, runIn : Value.Supported } -> Value { flow : Value.Supported, flowRoot : Value.Supported, table : Value.Supported, flex_ : Value.Supported, grid_ : Value.Supported, ruby : Value.Supported } -> Style

Sets display.

display2 block flex_

Note: This function accepts flex_ and grid_ ather than flex and grid because flex and grid are already property functions.

For display: inline list-item and similar property values that include list-item look at displayListItem2 and displayListItem3.

displayListItem2 : Value { block : Value.Supported, inline : Value.Supported, runIn : Value.Supported, flow : Value.Supported, flowRoot : Value.Supported } -> Style

The display property. This function is used to generate complex display: list-item properties such as display: block list-item.

displayListItem2 block

displayListItem3 : Value { block : Value.Supported, inline : Value.Supported, runIn : Value.Supported } -> Value { flow : Value.Supported, flowRoot : Value.Supported } -> Style

The display property. This function is used to generate complex display: list-item properties such as display: block flow-root list-item.

displayListItem3 block flowRoot

flex_ : Value { provides | flex_ : Value.Supported }

The flex value used by display.

display flex_

The value is called flex_ instead of flex because flex is already a property function.

flow : Value { provides | flow : Value.Supported }

The flow value used by display.

display flow

flowRoot : Value { provides | flowRoot : Value.Supported }

The flow-root value used by display.

display flowRoot

grid_ : Value { provides | grid_ : Value.Supported }

The grid value used by display.

The value is called grid_ instead of grid because grid is already a property function.

display grid_

contents : Value { provides | contents : Value.Supported }

The contents value used by display.

display contents

listItem : Value { provides | listItem : Value.Supported }

The list-item value used by display.

display listItem

inlineBlock : Value { provides | inlineBlock : Value.Supported }

The inline-block value used by display.

display inlineBlock

inlineFlex : Value { provides | inlineFlex : Value.Supported }

The inline-flex value used by display.

display inlineFlex

inlineTable : Value { provides | inlineTable : Value.Supported }

The inline-table value used by display.

display inlineTable

inlineGrid : Value { provides | inlineGrid : Value.Supported }

The inline-grid value used by display.

display inlineGrid

rubyBase : Value { provides | rubyBase : Value.Supported }

The ruby-base value used by display.

display rubyBase

rubyBaseContainer : Value { provides | rubyBaseContainer : Value.Supported }

The ruby-base-container value used by display.

display rubyBaseContainer

rubyText : Value { provides | rubyText : Value.Supported }

The ruby-text value used by display.

display rubyText

rubyTextContainer : Value { provides | rubyTextContainer : Value.Supported }

The ruby-text-container value used by display.

display rubyTextContainer

runIn : Value { provides | runIn : Value.Supported }

The run-in value used by display.

display runIn

table : Value { provides | table : Value.Supported }

The table value used by display.

display table

tableCaption : Value { provides | tableCaption : Value.Supported }

The table-caption value used by display.

display tableCaption

tableCell : Value { provides | tableCell : Value.Supported }

The table-cell value used by display.

display tableCell

tableColumn : Value { provides | tableColumn : Value.Supported }

The table-column value used by display.

display tableColumn

tableColumnGroup : Value { provides | tableColumnGroup : Value.Supported }

The table-column-group value used by display.

display tableColumnGroup

tableFooterGroup : Value { provides | tableFooterGroup : Value.Supported }

The table-footer-group value used by display.

display tableFooterGroup

tableHeaderGroup : Value { provides | tableHeaderGroup : Value.Supported }

The table-header-group value used by display.

display tableHeaderGroup

tableRow : Value { provides | tableRow : Value.Supported }

The table-row value used by display.

display tableRow

Position

position : BaseValue { absolute : Value.Supported, fixed : Value.Supported, relative : Value.Supported, static : Value.Supported, sticky : Value.Supported } -> Style

Sets the position of an element.

position absolute

position relative

absolute : Value { provides | absolute : Value.Supported }

An absolute position.

position absolute

The default position value is static. See also position: sticky, and [the differences between absolute, relative, and fixed positioning](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

fixed : Value { provides | fixed : Value.Supported }

A fixed position or fixed background-attachment or fixed table-layout.

position fixed

backgroundAttachment fixed

tableLayout fixed

The default position value is static. See also position: sticky, and the differences between absolute, relative, and fixed positioning

relative : Value { provides | relative : Value.Supported }

A relative position.

position relative

The default position value is static. See also position: sticky, and the differences between absolute, relative, and fixed positioning.

static : Value { provides | static : Value.Supported }

A static position.

position static

This is the default position value. See also position: sticky, and the differences between absolute, relative, and fixed positioning.

Stacking contexts & box-sizing

zIndex : BaseValue { int : Value.Supported, auto : Value.Supported } -> Style

Sets z-index

zIndex (int 10)

zIndex auto

NOTE: Z-index is not as simple as it looks! Make sure to read about stacking contexts if you're not already familiar with them.

isolation : BaseValue { auto : Value.Supported, isolate : Value.Supported } -> Style

Sets isolation

isolation auto

isolation isolate

Contain

contain : BaseValue { none : Value.Supported, strict : Value.Supported, content : Value.Supported, size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style

The contain property.

contain none

contain content

contain2 size layout

contain3 size layout style

contain4 -- all multiple choice values in use, no value entry needed

contain2 : Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style

The contain property.

This two-argument version lets you use 2 of the 4 multiple choice values you can use for this property.

contain2 size layout

contain3 : Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style

The contain property.

This two-argument version lets you use 3 of the 4 multiple choice values you can use for this property.

contain3 size layout style

contain4 : Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style

The contain property.

This 4-argument version lets you use all 4 multiple choice values you can use for this property.

contain4 size layout style paint

Note: The style value is considered at-risk from being deprecated.

size : Value { provides | size : Value.Supported }

Sets the size value for contain.

This indicates that the element can be sized without needing to look at the size of its descendants.

contain size

inlineSize_ : Value { provides | inlineSize_ : Value.Supported }

Sets the inline-size value for contain.

Indicates that inline size containment is applied to the element.

contain inlineSize_

Note: This is named inlineSize_ instead of inlineSize because it is already a property function.

layout : Value { provides | layout : Value.Supported }

Sets the layout value for contain.

This indicates that nothing outside the element may affect its internal layout and vice versa.

contain layout

paint : Value { provides | paint : Value.Supported }

Sets the paint value for contain.

Indicates that descendants of the element will not display outside its bounds and will not be painted by the browser if the containing box is offscreen.

contain paint

containIntrinsicSize : BaseValue (LengthSupported { none : Value.Supported }) -> Style

The contain-intrinsic-size property.

This 1-argument variant lets you use global values, none and lengths for width and height.

containIntrinsicSize revert

containIntrinsicSize none

                -- width + height
containIntrinsicSize (px 500)

                    -- width | height
containIntrinsicSize2 (rem 5) (px 800)

                -- width + height w/ auto
containIntrinsicSize2 auto (px 800)

                  -- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)

containIntrinsicSize2 : Value (LengthSupported { auto : Value.Supported }) -> Value Length -> Style

The contain-intrinsic-size property.

This 2-argument variant lets you use separate lengths for width and height or joined with and height with auto.

containIntrinsicSize revert

containIntrinsicSize none

                -- width + height
containIntrinsicSize (px 500)

                    -- width | height
containIntrinsicSize2 (rem 5) (px 800)

                -- width + height w/ auto
containIntrinsicSize2 auto (px 800)

                  -- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)

containIntrinsicSize4 : Value { auto : Value.Supported } -> Value Length -> Value { auto : Value.Supported } -> Value Length -> Style

The contain-intrinsic-size property.

This 4-argument variant lets you use separate lengths for width and height with auto.

Note: The 1st and 3rd argument can only be auto.

containIntrinsicSize revert

containIntrinsicSize none

                -- width + height
containIntrinsicSize (px 500)

                    -- width | height
containIntrinsicSize2 (rem 5) (px 800)

                -- width + height w/ auto
containIntrinsicSize2 auto (px 800)

                  -- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)

containIntrinsicWidth : BaseValue (LengthSupported { none : Value.Supported }) -> Style

The contain-intrinsic-width property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicWidth revert

containIntrinsicWidth none

                 -- specified width
containIntrinsicWidth (px 500)

                 -- specified width w/ auto
containIntrinsicWidth2 auto (px 800)

containIntrinsicWidth2 : Value { auto : Value.Supported } -> Value Length -> Style

The contain-intrinsic-width property.

This 2-argument variant lets you use lengths with auto.

Note: The 1st argument can only be auto.

containIntrinsicWidth revert

containIntrinsicWidth none

                 -- specified width
containIntrinsicWidth (px 500)

                 -- specified width w/ auto
containIntrinsicWidth2 auto (px 800)

containIntrinsicHeight : BaseValue (LengthSupported { none : Value.Supported }) -> Style

The contain-intrinsic-height property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicHeight revert

containIntrinsicHeight none

                 -- specified height
containIntrinsicHeight (px 500)

                 -- specified height w/ auto
containIntrinsicHeight2 auto (px 800)

containIntrinsicHeight2 : Value { auto : Value.Supported } -> Value Length -> Style

The contain-intrinsic-height property.

This 2-argument variant lets you use lengths with auto.

Note: The 1st argument can only be auto.

containIntrinsicHeight revert

containIntrinsicHeight none

                 -- specified height
containIntrinsicHeight (px 500)

                 -- specified height w/ auto
containIntrinsicHeight2 auto (px 800)

containIntrinsicInlineSize : BaseValue (LengthSupported { none : Value.Supported }) -> Style

The contain-intrinsic-inline-size property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicInlineSize revert

containIntrinsicInlineSize none

            -- specified inline size
containIntrinsicInlineSize (px 500)

            -- specified inline size w/ auto
containIntrinsicInlineSize2 auto (px 800)

containIntrinsicInlineSize2 : Value { auto : Value.Supported } -> Value Length -> Style

The contain-intrinsic-inline-size property.

This 2-argument variant lets you use lengths with auto.

Note: The 1st argument can only be auto.

containIntrinsicInlineSize revert

containIntrinsicInlineSize none

            -- specified inline size
containIntrinsicInlineSize (px 500)

            -- specified inline size w/ auto
containIntrinsicInlineSize2 auto (px 800)

containIntrinsicBlockSize : BaseValue (LengthSupported { none : Value.Supported }) -> Style

The contain-intrinsic-block-size property.

This 1-argument variant lets you use global values, none and lengths.

containIntrinsicBlockSize revert

containIntrinsicBlockSize none

            -- specified block size
containIntrinsicBlockSize (px 500)

            -- specified block size w/ auto
containIntrinsicBlockSize2 auto (px 800)

Sizing

width : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The width property.

width (px 150)

width (em 1.5)

width auto

width minContent

minWidth : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The min-width property.

minWidth (px 150)

minWidth (em 1.5)

minWidth auto

maxWidth : BaseValue (LengthSupported { pct : Value.Supported, none : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The max-width property.

maxWidth (px 150)

maxWidth (em 1.5)

maxWidth auto

height : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The height property.

height (px 34)

minHeight : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The min-height property.

minHeight (px 20)

maxHeight : BaseValue (LengthSupported { pct : Value.Supported, none : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The max-height property.

maxHeight (px 20)

blockSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The block-size property.

blockSize (px 20)

minBlockSize : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The min-block-size property.

minBlockSize (px 20)

maxBlockSize : BaseValue (LengthSupported { pct : Value.Supported, none : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The max-block-size property.

maxBlockSize (px 20)

inlineSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The inline-size property.

inlineSize (px 20)

minInlineSize : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style

The min-inline-size property.

minInlineSize (px 20)

Inset

inset : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.

inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%

inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px

inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

inset2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.

inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%

inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px

inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

inset3 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.

inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%

inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px

inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

inset4 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset property.

inset sets the top, bottom, left and right properties.

inset (px 10) -- top, bottom, left and right are all 10px.

inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%

inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px

inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px

Absolute insets

top : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the top property.

top (px 10)

top (pct 50)

top auto

top zero

If you need to use top as a CSS value instead of as a property, for example in vertical-align: top, use top_ instead of this.

right : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the right property.

right (px 10)

right (pct 50)

right auto

right zero

If you need to use right as a CSS value instead of as a property, for example in float: right, use right_ instead of this.

bottom : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the bottom property.

bottom (px 10)

bottom (pct 50)

bottom auto

bottom zero

If you need to use bottom as a CSS value instead of as a property, for example in vertical-align: bottom, use bottom_ instead of this.

left : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the left property.

left (px 10)

left (pct 50)

left auto

left zero

If you need to use left as a CSS value instead of as a property, for example in float: left, use left_ instead of this.

Logical insets

insetBlock : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset-block property.

inset-block sets the inset-block-start and inset-block-end properties.

insetBlock (px 10) -- block start and block end are both 10px.

insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%

insetBlock2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset-block property.

inset-block sets the inset-block-start and inset-block-end properties.

insetBlock (px 10) -- block start and block end are both 10px.

insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%

insetInline : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset-inline property.

inset-inline sets the inset-inline-start and inset-inline-end properties.

insetInline (px 10) -- inline start and inline end are both 10px.

insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%

insetInline2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset-inline property.

inset-inline sets the inset-inline-start and inset-inline-end properties.

insetInline (px 10) -- inline start and inline end are both 10px.

insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%

insetBlockStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset-block-start property.

insetBlockStart (px 10)

insetBlockStart (pct 50)

insetBlockStart auto

insetBlockStart zero

insetBlockEnd : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset-block-end property.

insetBlockEnd (px 10)

insetBlockEnd (pct 50)

insetBlockEnd auto

insetBlockEnd zero

insetInlineStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the inset-inline-start property.

insetInlineStart (px 10)

insetInlineStart (pct 50)

insetInlineStart auto

insetInlineStart zero

Margin

margin : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin property. The margin property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

If there is only one argument value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

margin (em 4) -- set all margins to 4em

margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px

margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

You may want to check out this article on collapsing margins!

margin2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin property. The margin2 property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

The top and bottom margins are set to the first value and the right and left margins are set to the second.

margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

You may want to check out this article on collapsing margins!

margin3 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin property. The margin3 property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

The top margin is set to the first value, the left and right are set to the second, and the bottom is set to the third.

margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px

You may want to check out this article on collapsing margins!

margin4 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin property. The margin4 property is a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in a single declaration.

The four values apply to the top, right, bottom, and left margins.

margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

You may want to check out this article on collapsing margins!

Absolute margin edges

marginTop : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-top property.

marginTop (px 4)

This article on margin-top versus margin-bottom may be useful.

marginRight : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-right property.

marginRight (px 4)

marginBottom : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-bottom property.

marginBottom (px 4)

This article on margin-top versus margin-bottom may be useful.

marginLeft : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-left property.

marginLeft (px 4)

Logical margin edges

marginBlock : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-block property. The margin-block property is a shorthand property for setting margin-block-start and margin-block-end in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the block start margin is set to the first value and the block end margin is set to the second.

marginBlock (em 4) -- set both block margins to 4em

marginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

You may want to check out this article on collapsing margins!

marginBlock2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-block property. The margin-block property is a shorthand property for setting margin-block-start and margin-block-end in a single declaration.

The block start margin is set to the first value and the block end margin is set to the second.

marginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

You may want to check out this article on collapsing margins!

marginBlockStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-block-start property.

marginBlockStart (px 4)

marginBlockEnd : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-block-end property.

marginBlockEnd (px 4)

marginInline : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-inline property. The margin-inline property is a shorthand property for setting margin-inline-start and margin-inline-end in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the inline start margin is set to the first value and the inline end margin is set to the second.

marginInline (em 4) -- set both inline margins to 4em

marginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

You may want to check out this article on collapsing margins!

marginInline2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-inline property. The margin-inline property is a shorthand property for setting margin-inline-start and margin-inline-end in a single declaration.

The inline start margin is set to the first value and the inline end margin is set to the second.

marginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

You may want to check out this article on collapsing margins!

marginInlineStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets margin-inline-start property.

marginInlineStart (px 4)

Padding

padding : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding property. The padding property is a shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left in a single declaration.

If there is only one argument value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

padding (em 4) -- set all margins to 4em

padding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

padding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px

padding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

padding2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets padding property. The padding2 property is a shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left in a single declaration.

The top and bottom margins are set to the first value and the right and left margins are set to the second.

padding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

padding3 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets padding property. The padding3 property is a shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left in a single declaration.

The top padding is set to the first value, the left and right are set to the second, and the bottom is set to the third.

padding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px

padding4 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets padding property. The padding4 property is a shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left in a single declaration.

The four values apply to the top, right, bottom, and left paddings.

padding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

Absolute padding edges

paddingTop : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-top property.

paddingTop (px 4)

paddingRight : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-right property.

paddingRight (px 4)

paddingBottom : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-bottom property.

paddingBottom (px 4)

paddingLeft : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-left property.

paddingLeft (px 4)

Logical padding edges

paddingBlock : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-block property. The padding-block property is a shorthand property for setting padding-block-start and padding-block-end in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the block start is set to the first value and the block end is set to the second.

paddingBlock (em 4) -- set both block start and block end to 4em

paddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

paddingBlock2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-block property.

The padding-block property is a shorthand property for setting padding-block-start and padding-block-end in a single declaration.

The block start value is set to the first value and the block end value is set to the second.

paddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

paddingBlockStart : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-block-start property.

paddingBlockStart (px 4)

paddingBlockEnd : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-block-end property.

paddingBlockEnd (px 4)

paddingInline : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-inline property.

The padding-inline property is a shorthand property for setting padding-inline-start and padding-inline-end and in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the inline start is set to the first value and the inline end is set to the second.

paddingInline (em 4) -- set both inline start and inline end to 4em

paddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

paddingInline2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-inline property.

The padding-inline property is a shorthand property for setting padding-inline-start and padding-inline-end in a single declaration.

The inline start value is set to the first value and the inline end value is set to the second.

paddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

paddingInlineStart : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets padding-inline-start property.

paddingInlineStart (px 4)

Borders

border : BaseValue LineWidth -> Style

Sets border property.

border (px 1)

border2 (px 1) solid

border3 (px 1) solid (hex "#f00")

border2 : Value LineWidth -> Value LineStyle -> Style

Sets border property.

border (px 1)

border2 (px 1) solid

border3 (px 1) solid (hex "#f00")

border3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border property.

border (px 1)

border2 (px 1) solid

border3 (px 1) solid (hex "#f00")

Absolute border edges

borderTop : BaseValue LineWidth -> Style

Sets border-top property.

borderTop (px 1)

borderTop2 (px 1) solid

borderTop3 (px 1) solid (hex "#f00")

borderTop2 : Value LineWidth -> Value LineStyle -> Style

Sets border-top property.

borderTop (px 1)

borderTop2 (px 1) solid

borderTop3 (px 1) solid (hex "#f00")

borderTop3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-top property.

borderTop (px 1)

borderTop2 (px 1) solid

borderTop3 (px 1) solid (hex "#f00")

borderRight : BaseValue LineWidth -> Style

Sets border-right property.

borderRight (px 1)

borderRight2 (px 1) solid

borderRight3 (px 1) solid (hex "#f00")

borderRight2 : Value LineWidth -> Value LineStyle -> Style

Sets border-right property.

borderRight (px 1)

borderRight2 (px 1) solid

borderRight3 (px 1) solid (hex "#f00")

borderRight3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-right property.

borderRight (px 1)

borderRight2 (px 1) solid

borderRight3 (px 1) solid (hex "#f00")

borderBottom : BaseValue LineWidth -> Style

Sets border-bottom property.

borderBottom (px 1)

borderBottom2 (px 1) solid

borderBottom3 (px 1) solid (hex "#f00")

borderBottom2 : Value LineWidth -> Value LineStyle -> Style

Sets border-bottom property.

borderBottom (px 1)

borderBottom2 (px 1) solid

borderBottom3 (px 1) solid (hex "#f00")

borderBottom3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-bottom property.

borderBottom (px 1)

borderBottom2 (px 1) solid

borderBottom3 (px 1) solid (hex "#f00")

borderLeft : BaseValue LineWidth -> Style

Sets border-left property.

borderLeft (px 1)

borderLeft2 (px 1) solid

borderLeft3 (px 1) solid (hex "#f00")

borderLeft2 : Value LineWidth -> Value LineStyle -> Style

Sets border-left property.

borderLeft (px 1)

borderLeft2 (px 1) solid

borderLeft3 (px 1) solid (hex "#f00")

borderLeft3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-left property.

borderLeft (px 1)

borderLeft2 (px 1) solid

borderLeft3 (px 1) solid (hex "#f00")

Logical border edges

borderBlock : BaseValue LineWidth -> Style

Sets border-block property.

borderBlock (px 1)

borderBlock2 (px 1) solid

borderBlock3 (px 1) solid (hex "#f00")

borderBlock2 : Value LineWidth -> Value LineStyle -> Style

Sets border-block property.

borderBlock (px 1)

borderBlock2 (px 1) solid

borderBlock3 (px 1) solid (hex "#f00")

borderBlock3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-block property.

borderBlock (px 1)

borderBlock2 (px 1) solid

borderBlock3 (px 1) solid (hex "#f00")

borderBlockStart : BaseValue LineWidth -> Style

Sets border-block-start property.

borderBlockStart (px 1)

borderBlockStart2 (px 1) solid

borderBlockStart3 (px 1) solid (hex "#f00")

borderBlockStart2 : Value LineWidth -> Value LineStyle -> Style

Sets border-block-start property.

borderBlockStart (px 1)

borderBlockStart2 (px 1) solid

borderBlockStart3 (px 1) solid (hex "#f00")

borderBlockStart3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-block-start property.

borderBlockStart (px 1)

borderBlockStart2 (px 1) solid

borderBlockStart3 (px 1) solid (hex "#f00")

borderBlockEnd : BaseValue LineWidth -> Style

Sets border-block-end property.

borderBlockEnd (px 1)

borderBlockEnd2 (px 1) solid

borderBlockEnd3 (px 1) solid (hex "#f00")

borderBlockEnd2 : Value LineWidth -> Value LineStyle -> Style

Sets border-block-end property.

borderBlockEnd (px 1)

borderBlockEnd2 (px 1) solid

borderBlockEnd3 (px 1) solid (hex "#f00")

borderBlockEnd3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-block-end property.

borderBlockEnd (px 1)

borderBlockEnd2 (px 1) solid

borderBlockEnd3 (px 1) solid (hex "#f00")

borderInline : BaseValue LineWidth -> Style

Sets border-inline property.

borderInline (px 1)

borderInline2 (px 1) solid

borderInline3 (px 1) solid (hex "#f00")

borderInline2 : Value LineWidth -> Value LineStyle -> Style

Sets border-inline property.

borderInline (px 1)

borderInline2 (px 1) solid

borderInline3 (px 1) solid (hex "#f00")

borderInline3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-inline property.

borderInline (px 1)

borderInline2 (px 1) solid

borderInline3 (px 1) solid (hex "#f00")

borderInlineStart : BaseValue LineWidth -> Style

Sets border-inline-start property.

borderInlineStart (px 1)

borderInlineStart2 (px 1) solid

borderInlineStart3 (px 1) solid (hex "#f00")

borderInlineStart2 : Value LineWidth -> Value LineStyle -> Style

Sets border-inline-start property.

borderInlineStart (px 1)

borderInlineStart2 (px 1) solid

borderInlineStart3 (px 1) solid (hex "#f00")

borderInlineStart3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-inline-start property.

borderInlineStart (px 1)

borderInlineStart2 (px 1) solid

borderInlineStart3 (px 1) solid (hex "#f00")

borderInlineEnd : BaseValue LineWidth -> Style

Sets border-inline-end property.

borderInlineEnd (px 1)

borderInlineEnd2 (px 1) solid

borderInlineEnd3 (px 1) solid (hex "#f00")

borderInlineEnd2 : Value LineWidth -> Value LineStyle -> Style

Sets border-inline-end property.

borderInlineEnd (px 1)

borderInlineEnd2 (px 1) solid

borderInlineEnd3 (px 1) solid (hex "#f00")

borderInlineEnd3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets border-inline-end property.

borderInlineEnd (px 1)

borderInlineEnd2 (px 1) solid

borderInlineEnd3 (px 1) solid (hex "#f00")

Border width

borderWidth : BaseValue LineWidth -> Style

Sets border-width property.

borderWidth (px 1)

borderWidth2 (px 1) thin

borderWidth3 (px 1) thin zero

borderWidth4 (px 1) thin zero (em 1)

borderWidth2 : Value LineWidth -> Value LineWidth -> Style

Sets border-width property.

borderWidth (px 1)

borderWidth2 (px 1) thin

borderWidth3 (px 1) thin zero

borderWidth4 (px 1) thin zero (em 1)

borderWidth3 : Value LineWidth -> Value LineWidth -> Value LineWidth -> Style

Sets border-width property.

borderWidth (px 1)

borderWidth2 (px 1) thin

borderWidth3 (px 1) thin zero

borderWidth4 (px 1) thin zero (em 1)

borderWidth4 : Value LineWidth -> Value LineWidth -> Value LineWidth -> Value LineWidth -> Style

Sets border-width property.

borderWidth (px 1)

borderWidth2 (px 1) thin

borderWidth3 (px 1) thin zero

borderWidth4 (px 1) thin zero (em 1)

borderTopWidth : BaseValue LineWidth -> Style

Sets border-top-width property.

borderTopWidth (px 1)

borderRightWidth : BaseValue LineWidth -> Style

Sets border-right-width property.

borderRightWidth (px 1)

borderBottomWidth : BaseValue LineWidth -> Style

Sets border-bottom-width property.

borderBottomWidth (px 1)

borderLeftWidth : BaseValue LineWidth -> Style

Sets border-left-width property.

borderLeftWidth (px 1)

borderBlockWidth : BaseValue LineWidth -> Style

Sets border-block-width property.

borderBlockWidth (px 1)

borderBlockStartWidth : BaseValue LineWidth -> Style

Sets border-block-start-width property.

borderBlockStartWidth (px 1)

borderBlockEndWidth : BaseValue LineWidth -> Style

Sets border-block-end-width property.

borderBlockEndWidth (px 1)

borderInlineWidth : BaseValue LineWidth -> Style

Sets border-inline-width property.

borderTopWidth (px 1)

borderInlineStartWidth : BaseValue LineWidth -> Style

Sets border-inline-start-width property.

borderInlineStartWidth (px 1)

borderInlineEndWidth : BaseValue LineWidth -> Style

Sets border-inline-end-width property.

borderInlineEndWidth (px 1)

Border style

borderStyle : BaseValue LineStyle -> Style

Sets border-style property.

borderStyle solid

borderStyle2 solid none

borderStyle3 solid none dotted

borderStyle4 solid none dotted groove

borderStyle2 : Value LineStyle -> Value LineStyle -> Style

Sets border-style property.

borderStyle solid

borderStyle3 : Value LineStyle -> Value LineStyle -> Value LineStyle -> Style

Sets border-style property.

borderStyle2 solid none

borderStyle4 : Value LineStyle -> Value LineStyle -> Value LineStyle -> Value LineStyle -> Style

Sets border-style property.

borderStyle4 solid none dotted groove

borderTopStyle : BaseValue LineStyle -> Style

Sets border-top-style property.

borderTopStyle solid

borderRightStyle : BaseValue LineStyle -> Style

Sets border-right-style property.

borderRightStyle solid

borderBottomStyle : BaseValue LineStyle -> Style

Sets border-bottom-style property.

borderBottomStyle solid

borderLeftStyle : BaseValue LineStyle -> Style

Sets border-left-style property.

borderLeftStyle solid

borderBlockStyle : BaseValue LineStyle -> Style

Sets border-block-style property.

borderBlockStyle solid

borderBlockStartStyle : BaseValue LineStyle -> Style

Sets border-block-start-style property.

borderBlockStartStyle solid

borderBlockEndStyle : BaseValue LineStyle -> Style

Sets border-block-end-style property.

borderBlockEndStyle solid

borderInlineStyle : BaseValue LineStyle -> Style

Sets border-inline-style property.

borderInlineStyle solid

borderInlineStartStyle : BaseValue LineStyle -> Style

Sets border-inline-start-style property.

borderInlineStartStyle solid

borderInlineEndStyle : BaseValue LineStyle -> Style

Sets border-inline-end-style property.

borderInlineEndStyle solid

dotted : Value { provides | dotted : Value.Supported }

The dotted value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle.

It represents a line that consists of dots.

borderStyle dotted

columnRuleStyle dotted

textDecorationStyle dotted

dashed : Value { provides | dashed : Value.Supported }

The dashed value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle.

borderStyle dashed

columnRuleStyle dashed

textDecorationStyle dashed

It represents a line that consists of dashes.

solid : Value { provides | solid : Value.Supported }

The solid value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle.

borderStyle solid

columnRuleStyle solid

textDecorationStyle solid

It represents a solid, continuous line.

double : Value { provides | double : Value.Supported }

The double value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle.

borderStyle double

columnRuleStyle double

textDecorationStyle double

It represents a double line: two lines side by side.

groove : Value { provides | groove : Value.Supported }

The groove value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle.

borderStyle groove

columnRuleStyle groove

textDecorationStyle groove

Adds a bevel based on the color value, which makes things appear pressed into the document.

ridge : Value { provides | ridge : Value.Supported }

The ridge value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle.

borderStyle ridge

columnRuleStyle ridge

textDecorationStyle ridge

Similar to groove, but reverses the color values in a way that makes things appear raised.

inset_ : Value { provides | inset_ : Value.Supported }

The inset value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle.

This is called inset_ rather than inset because inset is already a property function.

borderStyle inset_

columnRuleStyle inset_

textDecorationStyle inset_

Adds a split tone to the line that makes it appear slightly depressed.

Contrast with outset

outset : Value { provides | outset : Value.Supported }

The outset value used by properties such as borderStyle, columnRuleStyle, and textDecorationStyle, and strokeAlign.

borderStyle outset

columnRuleStyle outset

strokeAlign outset

textDecorationStyle outset

Similar to inset_, but reverses the colors in a way that makes it appear slightly raised.

Border color

borderColor : BaseValue Color -> Style

Sets border-color property.

borderColor (rgb 0 0 0)

borderColor2 (rgb 0 0 0) (hsl 10 10 10)

borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")

borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent

borderColor2 : Value Color -> Value Color -> Style

Sets border-color property.

borderColor (rgb 0 0 0)

borderColor2 (rgb 0 0 0) (hsl 10 10 10)

borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")

borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent

borderColor3 : Value Color -> Value Color -> Value Color -> Style

Sets border-color property.

borderColor (rgb 0 0 0)

borderColor2 (rgb 0 0 0) (hsl 10 10 10)

borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")

borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent

borderColor4 : Value Color -> Value Color -> Value Color -> Value Color -> Style

Sets border-color property.

borderColor (rgb 0 0 0)

borderColor2 (rgb 0 0 0) (hsl 10 10 10)

borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")

borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent

borderTopColor : BaseValue Color -> Style

Sets border-top-color property.

borderTopColor (rgb 0 0 0)

borderRightColor : BaseValue Color -> Style

Sets border-right-color property.

borderRightColor (rgb 0 0 0)

borderBottomColor : BaseValue Color -> Style

Sets border-bottom-color property.

borderBottomColor (rgb 0 0 0)

borderLeftColor : BaseValue Color -> Style

Sets border-left-color property.

borderLeftColor (rgb 0 0 0)

borderBlockColor : BaseValue Color -> Style

Sets border-block-color property.

borderBlockColor (rgb 0 0 0)

borderBlockStartColor : BaseValue Color -> Style

Sets border-block-start-color property.

borderBlockStartColor (rgb 0 0 0)

borderBlockEndColor : BaseValue Color -> Style

Sets border-block-end-color property.

borderBlockEndColor (rgb 0 0 0)

borderInlineColor : BaseValue Color -> Style

Sets border-inline-color property.

borderInlineColor (rgb 0 0 0)

borderInlineStartColor : BaseValue Color -> Style

Sets border-inline-start-color property.

borderInlineStartColor (rgb 0 0 0)

borderInlineEndColor : BaseValue Color -> Style

Sets border-inline-end-color property.

borderInlineEndColor (rgb 0 0 0)

Border radius

borderRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-radius property.

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 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-radius property.

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 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-radius property.

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 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-radius property.

borderRadius (em 4)

borderRadius2 (em 4) (px 2)

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

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

borderTopLeftRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-top-left-radius property.

borderTopLeftRadius (em 4)

borderTopLeftRadius2 (em 4) (px 2)

borderTopLeftRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-top-left-radius property.

borderTopLeftRadius (em 4)

borderTopLeftRadius2 (em 4) (px 2)

borderTopRightRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-top-right-radius property.

borderTopRightRadius (em 4)

borderTopRightRadius2 (em 4) (px 2)

borderTopRightRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-top-right-radius property.

borderTopRightRadius (em 4)

borderTopRightRadius2 (em 4) (px 2)

borderBottomRightRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-bottom-right-radius property.

borderBottomRightRadius (em 4)

borderBottomRightRadius2 (em 4) (px 2)

borderBottomRightRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-bottom-right-radius property.

borderBottomRightRadius (em 4)

borderBottomRightRadius2 (em 4) (px 2)

borderBottomLeftRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-bottom-left-radius property.

borderBottomLeftRadius (em 4)

borderBottomLeftRadius2 (em 4) (px 2)

borderBottomLeftRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-bottom-left-radius property.

borderBottomLeftRadius (em 4)

borderBottomLeftRadius2 (em 4) (px 2)

borderStartStartRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-start-start-radius property.

borderStartStartRadius (em 4)

borderStartStartRadius2 (em 4) (px 2)

borderStartStartRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-start-start-radius property.

borderStartStartRadius (em 4)

borderStartStartRadius2 (em 4) (px 2)

borderStartEndRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-start-end-radius property.

borderStartEndRadius (em 4)

borderStartEndRadius2 (em 4) (px 2)

borderStartEndRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-start-end-radius property.

borderStartEndRadius (em 4)

borderStartEndRadius2 (em 4) (px 2)

borderEndStartRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-end-start-radius property.

borderEndStartRadius (em 4)

borderEndStartRadius2 (em 4) (px 2)

borderEndStartRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-end-start-radius property.

borderEndStartRadius (em 4)

borderEndStartRadius2 (em 4) (px 2)

borderEndEndRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets border-end-end-radius property.

borderEndEndRadius (em 4)

borderEndEndRadius2 (em 4) (px 2)

borderEndEndRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets border-end-end-radius property.

borderEndEndRadius (em 4)

borderEndEndRadius2 (em 4) (px 2)

Border image

borderImageOutset : BaseValue (LengthSupported { num : Value.Supported }) -> Style

Sets border-image-outset property.

borderImageOutset (rem 1)

borderImageOutset2 (num 1) (num 1.2)

borderImageOutset3 (px 30) (num 2) (px 45)

borderImageOutset4 (px 7) (px 12) (px 14) (px 5)

Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.

borderImageOutset2 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style

Sets border-image-outset property.

borderImageOutset (rem 1)

borderImageOutset2 (num 1) (num 1.2)

borderImageOutset3 (px 30) (num 2) (px 45)

borderImageOutset4 (px 7) (px 12) (px 14) (px 5)

Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.

borderImageOutset3 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style

Sets border-image-outset property.

borderImageOutset (rem 1)

borderImageOutset2 (num 1) (num 1.2)

borderImageOutset3 (px 30) (num 2) (px 45)

borderImageOutset4 (px 7) (px 12) (px 14) (px 5)

Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.

borderImageOutset4 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style

Sets border-image-outset property.

borderImageOutset (rem 1)

borderImageOutset2 (num 1) (num 1.2)

borderImageOutset3 (px 30) (num 2) (px 45)

borderImageOutset4 (px 7) (px 12) (px 14) (px 5)

Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.

borderImageWidth : BaseValue (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Style

Sets border-image-width property.

borderImageWidth (rem 1)

borderImageWidth2 (num 1) (num 1.2)

borderImageWidth3 (pct 5) (pct 15) (pct 10)

borderImageWidth4 (px 7) (px 12) (px 14) (px 5)

Specifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.

borderImageWidth2 : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Style

Sets border-image-width property.

borderImageWidth (rem 1)

borderImageWidth2 (num 1) (num 1.2)

borderImageWidth3 (pct 5) (pct 15) (pct 10)

borderImageWidth4 (px 7) (px 12) (px 14) (px 5)

Specifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.

borderImageWidth3 : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Style

Sets border-image-width property.

borderImageWidth (rem 1)

borderImageWidth2 (num 1) (num 1.2)

borderImageWidth3 (pct 5) (pct 15) (pct 10)

borderImageWidth4 (px 7) (px 12) (px 14) (px 5)

Specifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.

Outlines

outline : BaseValue (LineWidthSupported (LineStyleSupported (ColorSupported { auto : Value.Supported, invert_ : Value.Supported }))) -> Style

Sets outline.

outline zero

outline none

outline3 : Value LineWidth -> Value (LineStyleSupported { auto : Value.Supported }) -> Value (ColorSupported { invert_ : Value.Supported }) -> Style

Sets outline.

outline3 (em 0.25) auto (rgb 120 250 32)

outlineWidth : BaseValue LineWidth -> Style

Sets outline-width.

outlineWidth (px 2)

outlineWidth thin

outlineColor : BaseValue (ColorSupported { invert_ : Value.Supported }) -> Style

Sets outline-color.

outlineColor (hex "eee")

outlineColor invert_

invert_ : Value { provides | invert_ : Value.Supported }

The invert value used by properties such as outlineColor

outlineColor invert_

Note: This is called invert_ instead of invert because invert is already used as a filter-function value.

outlineStyle : BaseValue (LineStyleSupported { auto : Value.Supported }) -> Style

Sets outline-style.

outlineStyle auto

outlineStyle dashed

Overflow and resizing

overflow : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style

Sets overflow.

overflow visible

overflow hidden

overflow scroll

overflow auto

overflow2 visible hidden -- x: visible, y: hidden

overflow2 : Value { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Value { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style

Sets overflow.

overflow visible

overflow hidden

overflow scroll

overflow auto

overflow2 visible hidden -- x: visible, y: hidden

overflowX : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style

Sets overflow-x.

overflowX visible

overflowX hidden

overflowX scroll

overflowX auto

overflowY : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style

Sets overflow-y.

overflowY visible

overflowY hidden

overflowY scroll

overflowY auto

overflowBlock : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported } -> Style

Sets overflow-block.

overflowBlock visible

overflowBlock hidden

overflowBlock scroll

overflowBlock auto

overflowInline : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported } -> Style

Sets overflow-inline.

overflowInline visible

overflowInline hidden

overflowInline scroll

overflowInline auto

overflowWrap : BaseValue { anywhere : Value.Supported, breakWord : Value.Supported, normal : Value.Supported } -> Style

Sets overflow-wrap

overflowWrap breakWord

overflowWrap normal

overflowAnchor : BaseValue { auto : Value.Supported, none : Value.Supported } -> Style

Sets overflow-anchor

overflowAnchor auto

overflowAnchor none

breakWord : Value { provides | breakWord : Value.Supported }

The break-word value, which can be used with such properties as overflow-wrap and word-break.

overflowWrap breakWord

wordBreak breakWord

anywhere : Value { provides | anywhere : Value.Supported }

The anywhere value used by overflowWrap and lineBreak.

overflowWrap anywhere

lineBreak anywhere

resize : BaseValue { none : Value.Supported, both : Value.Supported, horizontal : Value.Supported, vertical : Value.Supported, block : Value.Supported, inline : Value.Supported } -> Style

The resize property.

resize none

resize both

resize inline

horizontal : Value { provides | horizontal : Value.Supported }

The horizontal value used by resize.

resize horizontal

Flex

The CSS Flexible Box Layout Module. See this complete guide.

Basics

flex : BaseValue (WidthSupported { none : Value.Supported, content : Value.Supported, num : Value.Supported }) -> Style

The flex shorthand property.

flex none

flex auto

flex (num 1)

flex2 : Value { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Value (WidthSupported { content : Value.Supported, num : Value.Supported }) -> Style

The flex shorthand property.

flex2 zero auto

flex3 : Value { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Value { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Value (WidthSupported { content : Value.Supported }) -> Style

The flex shorthand property.

flex3 (num 1) zero (pct 50)

flexBasis : BaseValue (WidthSupported { content : Value.Supported }) -> Style

Sets flex-basis.

flexBasis (em 10)

flexBasis (px 3)

flexBasis (pct 100)

flexBasis auto

flexGrow : BaseValue { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Style

Sets flex-grow.

flexGrow (num 3)

flexGrow (num 0.6)

flexShrink : BaseValue { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Style

Sets flex-shrink.

flexShrink (num 2)

flexShrink (num 0.6)

Layout dynamics

flexDirection : BaseValue { row : Value.Supported, rowReverse : Value.Supported, column : Value.Supported, columnReverse : Value.Supported } -> Style

Sets flex-direction.

flexDirection column

flexWrap : BaseValue { nowrap : Value.Supported, wrap : Value.Supported, wrapReverse : Value.Supported } -> Style

Sets flex-wrap.

flexWrap wrap

flexWrap wrapReverse

flexWrap nowrap

flexFlow : BaseValue { row : Value.Supported, rowReverse : Value.Supported, column : Value.Supported, columnReverse : Value.Supported, nowrap : Value.Supported, wrap : Value.Supported, wrapReverse : Value.Supported } -> Style

The flex-flow shorthand property.

flexFlow rowReverse

flexFlow wrap

flexFlow inherit

flexFlow2 column wrapReverse

flexFlow2 : Value { row : Value.Supported, rowReverse : Value.Supported, column : Value.Supported, columnReverse : Value.Supported } -> Value { nowrap : Value.Supported, wrap : Value.Supported, wrapReverse : Value.Supported } -> Style

The flex-flow shorthand property.

flexFlow rowReverse

flexFlow wrap

flexFlow inherit

flexFlow2 column wrapReverse

Alignment

Other values you can use for flex item alignment:

alignContent : BaseValue { normal : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported } -> Style

Sets align-content.

alignContent flexStart

Note: This property has no effect when the flexbox has only a single line.

alignContent2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported } -> Style

Sets align-content.

alignContent2 unsafe start

Note: This property has no effect when the flexbox has only a single line.

alignItems : BaseValue { normal : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported } -> Style

Sets align-items.

alignItems firstBaseline

alignItems2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Style

Sets align-items.

alignItems2 unsafe selfStart

alignSelf : BaseValue { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Style

Sets align-self.

alignSelf firstBaseline

alignSelf2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Style

Sets align-self.

alignSelf2 unsafe flexStart

Justify

justifyContent : BaseValue { normal : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

Sets justify-content.

justifyContent flexStart

justifyContent2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

Sets justify-content.

justifyContent2 safe flexStart

justifyItems : BaseValue { normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, legacy : Value.Supported, legacyLeft : Value.Supported, legacyRight : Value.Supported, legacyCenter : Value.Supported } -> Style

The justify-items property.

justifyItems center

Note: This property is ignored when used in flexbox or table cell layouts.

justifyItems2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

The justify-items property.

justifyItems2 unsafe right_

Note: This property is ignored when used in flexbox or table cell layouts.

justifySelf : BaseValue { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

The justify-self property.

jusitfySelf left_

Note: This property is ignored when used in flexbox or table cell layouts.

justifySelf2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

The justify-self property.

justifySelf2 unsafe left_

Note: This property is ignored when used in flexbox or table cell layouts.

Place

placeContent : BaseValue {} -> Style

The place-content property.

placeContent is a shorthand for the alignContent and justifyContent properties in a single declaration.

This one-argument version only accepts global values.

placeContent inherit

placeContent2 flexStart flexEnd

placeContent2 : Value { normal : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported } -> Value { normal : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

The place-content property.

placeContent is a shorthand for the alignContent and justifyContent properties in a single declaration.

This two-argumant version accepts alignContent and justifyContent values.

placeContent inherit

placeContent2 flexStart flexEnd

placeItems : BaseValue { center : Value.Supported } -> Style

The place-items property.

placeItems is a shorthand for the alignItems and justifyItems properties in a single declaration.

This one-argument version only accepts global values.

placeItems inherit

placeItems2 center selfEnd

placeItems2 : Value { normal : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported } -> Value { normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, legacy : Value.Supported, legacyLeft : Value.Supported, legacyRight : Value.Supported, legacyCenter : Value.Supported } -> Style

The place-items property.

placeItems is a shorthand for the alignItems and justifyItems properties in a single declaration.

This one-argument version only accepts global values.

placeItems inherit

placeItems2 center selfEnd

placeSelf : BaseValue {} -> Style

The place-self property.

placeSelf is a shorthand for the alignSelf and justifySelf properties in a single declaration.

This one-argument version only accepts global values.

placeSelf inherit

placeSelf2 flexStart flexEnd

placeSelf2 : Value { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Value { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

The place-self property.

placeSelf is a shorthand for the alignSelf and justifySelf properties in a single declaration.

This one-argument version only accepts global values.

placeSelf inherit

placeSelf2 flexStart flexEnd

Order

order : BaseValue { int : Value.Supported, zero : Value.Supported } -> Style

Sets order

order (num 2)

order (num -2)

Flex value keywords

row : Value { provides | row : Value.Supported }

The row flex-direction value.

flexDirection row

rowReverse : Value { provides | rowReverse : Value.Supported }

The row-reverse flex-direction value.

flexDirection rowReverse

columnReverse : Value { provides | columnReverse : Value.Supported }

The column-reverse flex-direction value.

flexDirection columnReverse

flexStart : Value { provides | flexStart : Value.Supported }

The flex-start value used by alignItems, justifyContent, and alignContent.

alignItems flexStart

justifyContent flexStart

alignContent flexStart

flexEnd : Value { provides | flexEnd : Value.Supported }

The flex-end value used by alignItems, justifyContent, and alignContent.

alignItems flexEnd

justifyContent flexEnd

alignContent flexEnd

selfStart : Value { provides | selfStart : Value.Supported }

selfEnd : Value { provides | selfEnd : Value.Supported }

spaceBetween : Value { provides | spaceBetween : Value.Supported }

The space-between value used by justifyContent and alignContent.

justifyContent spaceBetween

alignContent spaceBetween

spaceAround : Value { provides | spaceAround : Value.Supported }

The space-around value used by justifyContent and alignContent.

justifyContent spaceAround

alignContent spaceAround

spaceEvenly : Value { provides | spaceEvenly : Value.Supported }

Distribute items evenly, with an equal size space between each element and the start and end.

justifyContent spaceEvenly

firstBaseline : Value { provides | firstBaseline : Value.Supported }

The first baseline value used for properties such as alignContent, alignItems, and alignSelf.

alignItems firstBaseline

lastBaseline : Value { provides | lastBaseline : Value.Supported }

The last baseline value used for properties such as alignContent, alignItems, and alignSelf.

alignItems lastBaseline

safe : Value { provides | safe : Value.Supported }

The safe value used for properties such as alignContent2.

alignContent2 safe center

unsafe : Value { provides | unsafe : Value.Supported }

The unsafe value used for properties such as alignContent2.

alignContent2 unsafe center

legacy : Value { provides | legacy : Value.Supported }

The legacy value used for properties such as justifyItems.

justifyItems legacy

legacyLeft : Value { provides | legacyLeft : Value.Supported }

The legacy left value used for properties such as justifyItems.

justifyItems legacyLeft

legacyRight : Value { provides | legacyRight : Value.Supported }

The legacy right value used for properties such as justifyItems.

justifyItems legacyRight

legacyCenter : Value { provides | legacyCenter : Value.Supported }

The legacy center value used for properties such as justifyItems.

justifyItems legacyCenter

wrap : Value { provides | wrap : Value.Supported }

The wrap flex-wrap value.

flexWrap wrap

wrapReverse : Value { provides | wrapReverse : Value.Supported }

The wrap-reverse flex-wrap value.

flexWrap wrapReverse

Grid

Types


type alias FixedSizeSupported supported =
TrackBreadthSupported { supported | minmax : Value.Supported
, fitContent : Value.Supported 
}

Extensible type representing the possibilities of the <fixed-size> type used in grids.


type alias TrackBreadthSupported supported =
LengthSupported { supported | pct : Value.Supported
, fr : Value.Supported
, auto : Value.Supported
, minContent : Value.Supported
, maxContent : Value.Supported 
}

Extensible type representing the possibilities of the <track-breadth> type used in grids.


type alias TrackSizeSupported supported =
TrackBreadthSupported { supported | minmax : Value.Supported
, fitContentTo : Value.Supported 
}

Extensible type representing the possibilities of the <track-size> type used in grids.

Grid auto

gridAutoRows : BaseValue TrackSize -> Style

The 1-argument version of the grid-auto-rows property.

gridAutoRows (px 100)

gridAutoRows (vmax 30)

gridAutoRows (fr 1)

gridAutoRows (minmax (fr 2) (pct 20))

gridAutoRowsMany : List (Value TrackSize) -> Style

The many-argument version of the grid-auto-rows property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

gridAutoRows (px 100)

gridAutoRows (vmax 30)

gridAutoRows (fr 1)

gridAutoRows (minmax (fr 2) (pct 20))

gridAutoRowsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]

gridAutoRowsMany [] -- unset

gridAutoColumns : BaseValue TrackSize -> Style

The 1-argument version of the grid-auto-columns property.

gridAutoColumns (px 100)

gridAutoColumns (vmax 30)

gridAutoColumns (fr 1)

gridAutoColumns (minmax (fr 2) (pct 20))

gridAutoColumnsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]

gridAutoColumnsMany [] -- unset

gridAutoColumnsMany : List (Value TrackSize) -> Style

The many-argument version of the grid-auto-columns property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

gridAutoColumns (px 100)

gridAutoColumns (vmax 30)

gridAutoColumns (fr 1)

gridAutoColumns (minmax (fr 2) (pct 20))

gridAutoColumnsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]

gridAutoColumnsMany [] -- unset

gridAutoFlow : BaseValue { row : Value.Supported, column : Value.Supported, dense : Value.Supported } -> Style

The 1-argument version of the grid-auto-flow property.

gridAutoFlow dense

gridAutoFlow column

gridAutoFlow2 row dense

gridAutoFlow2 : Value { row : Value.Supported, column : Value.Supported } -> Value { dense : Value.Supported } -> Style

The 1-argument version of the grid-auto-flow property.

gridAutoFlow2 row dense

(The last argument can only be dense but I thought this would be the most natural way to make it fit into Elm, even if it's a bit redundant.)

Grid areas


type alias GridLine =
{ auto : Value.Supported
, num : Value.Supported
, gridLineIdent : Value.Supported
, gridLineSpanNum : Value.Supported
, gridLineSpanIdent : Value.Supported 
}

A type encapsulating the possibilities for defining a <grid-line>, which are the lines around the spaces in a CSS grid.

gridLineIdent : String -> Maybe Basics.Int -> Value { provides | gridLineIdent : Value.Supported }

Creates a grid line value with a value and an optional integer.

gridLineIdent "footer" Nothing -- footer

gridLineIdent "header" (Just 1) -- header 1

gridLineSpanNum 4 -- span 4

gridLineSpanIdent "header" Nothing -- span header

gridLineSpanIdent "footer" (Just 1) -- span header 1

gridLineSpanNum : Basics.Int -> Value { provides | gridLineSpanNum : Value.Supported }

Creates a grid line value with a 'span' keyword value followed by an integer.

gridLineIdent "footer" Nothing -- footer

gridLineIdent "header" (Just 1) -- header 1

gridLineSpanNum 4 -- span 4

gridLineSpanIdent "header" Nothing -- span header

gridLineSpanIdent "footer" (Just 1) -- span header 1

gridLineSpanIdent : String -> Maybe Basics.Int -> Value { provides | gridLineSpanIdent : Value.Supported }

Creates a grid line value with a 'span' keyword value followed by an ident and an optional integer.

gridLineIdent "footer" Nothing -- footer

gridLineIdent "header" (Just 1) -- header 1

gridLineSpanNum 4 -- span 4

gridLineSpanIdent "header" Nothing -- span header

gridLineSpanIdent "footer" (Just 1) -- span header 1

gridArea : BaseValue GridLine -> Style

The grid-area property.

This variant is for keywords or for 1 <grid-line> (GridLine) that determines the start and end positions of this grid item.

Numbers used in this should not be zero, else they won't work.

gridArea auto

gridArea inherit

gridArea <| gridLineSpanNum 4

gridArea <| gridLineIdent "big-grid" (Just 4)

gridArea2
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )

gridArea3
    ( gridLineIdent "big-grid" (Just 4))
    ( gridLineSpanIdent "other-grid" Nothing)
    ( num 7 )

gridArea4
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )
    ( num 7 )
    ( gridLineSpanIdent "another-grid" (Just 12) )

gridArea2 : Value GridLine -> Value GridLine -> Style

The grid-area property.

This variant specifies 2 <grid-line>s (GridLine) that determines the start and end positions of this grid item.

Numbers used in this should not be zero, else they won't work.

gridArea auto

gridArea inherit

gridArea <| gridLineSpanNum 4

gridArea <| gridLineIdent "big-grid" (Just 4)

gridArea2
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )

gridArea3
    ( gridLineIdent "big-grid" (Just 4))
    ( gridLineSpanIdent "other-grid" Nothing)
    ( num 7 )

gridArea4
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )
    ( num 7 )
    ( gridLineSpanIdent "another-grid" (Just 12) )

gridArea3 : Value GridLine -> Value GridLine -> Value GridLine -> Style

The grid-area property.

This variant specifies 3 <grid-line>s (GridLine) that determines the start and end positions of this grid item.

Numbers used in this should not be zero, else they won't work.

gridArea auto

gridArea inherit

gridArea <| gridLineSpanNum 4

gridArea <| gridLineIdent "big-grid" (Just 4)

gridArea2
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )

gridArea3
    ( gridLineIdent "big-grid" (Just 4))
    ( gridLineSpanIdent "other-grid" Nothing)
    ( num 7 )

gridArea4
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )
    ( num 7 )
    ( gridLineSpanIdent "another-grid" (Just 12) )

gridArea4 : Value GridLine -> Value GridLine -> Value GridLine -> Value GridLine -> Style

The grid-area property.

This variant specifies 4 <grid-line>s (GridLine) that determines the start and end positions of this grid item.

Numbers used in this should not be zero, else they won't work.

gridArea auto

gridArea inherit

gridArea <| gridLineSpanNum 4

gridArea <| gridLineIdent "big-grid" (Just 4)

gridArea2
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )

gridArea3
    ( gridLineIdent "big-grid" (Just 4))
    ( gridLineSpanIdent "other-grid" Nothing)
    ( num 7 )

gridArea4
    ( gridLineIdent "big-grid" (Just 4) )
    ( gridLineSpanIdent "other-grid" Nothing )
    ( num 7 )
    ( gridLineSpanIdent "another-grid" (Just 12) )

gridRow : BaseValue GridLine -> Style

The grid-row property.

This variant is for single keyword arguments and specifying 1 <grid-line> (GridLine), which determines the start and end position of this grid item.

Numbers used in this should not be zero, else they won't work.

gridRow auto

gridRow inherit

gridRow <| gridLineIdent "main-grid" (Just 3)
-- grid-row: main-grid 3

gridRow2 auto ( gridLineSpanIdent "grid-thing" (Just 5) )
-- grid-row: auto / span grid-thing 5

gridRow2 : Value GridLine -> Value GridLine -> Style

The grid-row property.

This variant specifies 2 <grid-line>s (GridLine) that determine the start and end position of this grid item.

Numbers used in this should not be zero, else they won't work.

gridRow auto

gridRow inherit

gridRow <| gridLineIdent "main-grid" (Just 3)
-- grid-row: main-grid 3

gridRow2 auto ( gridLineSpanIdent "grid-thing" (Just 5) )
-- grid-row: auto / span grid-thing 5

gridRowStart : BaseValue GridLine -> Style

The 1-argument version of the grid-row-start property.

gridRowStart inherit

gridRowStart auto

gridRowStart <| gridLineSpanIdent "big-grid" Nothing

gridRowStart <| int 3

gridRowStart <| gridLineIdent "big-grid" (Just 2)

gridRowEnd : BaseValue GridLine -> Style

The 1-argument version of the grid-row-end property.

gridRowEnd inherit

gridRowEnd auto

gridRowEnd <| gridLineSpanIdent "big-grid" Nothing

gridRowEnd <| int 3

gridRowEnd <| gridLineIdent "big-grid" (Just 2)

gridColumn : BaseValue GridLine -> Style

The grid-column property.

This variant is for single keyword arguments and specifying 1 <grid-line> (GridLine), which determines the start and end position of this grid item.

Numbers used in this should not be zero, else they won't work.

gridColumn auto

gridColumn inherit

gridColumn <| gridLineIdent "main-grid" (Just 3)
-- grid-column: main-grid 3

gridColumn2 auto ( gridLineSpanIdent "grid-thing") (Just 5) )
-- grid-column: auto / span grid-thing 5

gridColumn2 : Value GridLine -> Value GridLine -> Style

The grid-column property.

This variant specifies 2 <grid-line>s (GridLine) that determine the start and end position of this grid item.

Numbers used in this should not be zero, else they won't work.

gridColumn auto

gridColumn inherit

gridColumn <| gridLineIdent "main-grid" (Just 3)
-- grid-column: main-grid 3

gridColumn2 auto ( gridLineSpanIdent "grid-thing") (Just 5) )
-- grid-column: auto / span grid-thing 5

gridColumnStart : BaseValue GridLine -> Style

The 1-argument version of the grid-column-start property.

gridColumnStart inherit

gridColumnStart auto

gridColumnStart <| gridLineSpanIdent "big-grid") Nothing

gridColumnStart <| int 3

gridColumnStart <| gridLineIdent "big-grid" (Just 2)

gridColumnEnd : BaseValue GridLine -> Style

The 1-argument version of the grid-column-end property.

gridColumnEnd inherit

gridColumnEnd auto

gridColumnEnd <| gridLineSpanIdent "big-grid") Nothing

gridColumnEnd <| int 3

gridColumnEnd <| gridLineIdent "big-grid" (Just 2)

Grid templates

gridTemplate : BaseValue { none : Value.Supported, templateRowsColumns : Value.Supported, templateAreasRowsColumns : Value.Supported } -> Style

Thegrid-template property.

gridTemplate initial

gridTemplate none

gridTemplate <|
    templateAreasRowsColumns
        [ templateAreaRow
            ( Just <| lineNames ["header-left"] )
            "head head"
            ( Just <| px 30 )
            ( Just <| lineNames ["header-right"] )

        , templateAreaRow
            ( Just <| lineNames ["main-left"] )
            "nav main"
            ( Just <| fr 1 )
            ( Just <| lineNames ["main-right"])

        , templateAreaRow
            ( Just <| lineNames ["footer-left"] )
            "nav foot"
            ( Just <| px 30 )
            ( Just <| lineNames ["footer-right"])
        ]
        ( Just <| templateColumns
            ( px 120 )
            [ fr 120
            ]
        )

gridTemplate <|
    templateRowsColumns
        ( trackList
            ( lineNames ["line1", "line2"] )
            [ px 300
            , lineNames ["line3"]
            ]
        )

        ( autoTrackList
            ( minmax (px 210) maxContent )
            [ autoRepeat autoFill [px 200]
            , pct 20
            ]
        )

gridTemplateAreas : BaseValue { none : Value.Supported } -> Style

The grid-template-areas property. Use the gridTemplateAreasMany function if you want to use multiple strings as a value.

gridTemplateAreas none

gridTemplateAreas inherit

gridTemplateAreasCells
    [ "c c b"
    , "c a b"
    , "c d e"
    ]

gridTemplateAreasCells : List String -> Style

A version of gridTemplateAreas that lets you input a list of strings as values, representing grid cells.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

gridTemplateAreasCells
    [ "c c b"
    , "c a b"
    , "c d e"
    ]

gridTemplateAreasCells [] -- unset

gridTemplateRows : BaseValue { none : Value.Supported, trackList : Value.Supported, autoTrackList : Value.Supported } -> Style

The grid-template-rows property.

gridTemplateRows inherit

gridTemplateRows none

gridTemplateRows <|
    trackList (px 200) [fr 1, px 180]

gridTemplateRows <|
    trackList 
        ( lineNames ["line1", "line2"] )
        [ px 300
        , lineNames ["line3"]
        ]

gridTemplateRows <|
    trackList [ fixedRepeat (num 4) [px 520] ]

gridTemplateRows <|
    autoTrackList
        ( minmax (px 210) maxContent )
        [ autoRepeat autoFill [px 200]
        , pct 20
        ]

gridTemplateColumns : BaseValue { none : Value.Supported, trackList : Value.Supported, autoTrackList : Value.Supported } -> Style

The grid-template-columns property.

gridTemplateColumns inherit

gridTemplateColumns none

gridTemplateColumns <|
    trackList (px 200) [fr 1, px 180]

gridTemplateColumns <|
    trackList 
        ( lineNames ["line1", "line2"] )
        [ px 300
        , lineNames ["line3"]
        ]

gridTemplateColumns <|
    trackList [ fixedRepeat (num 4) [px 520] ]

gridTemplateColumns <|
    autoTrackList
        ( minmax (px 210) maxContent )
        [ autoRepeat autoFill [px 200]
        , pct 20
        ]

templateRowsColumns : Value { trackList : Value.Supported, autoTrackList : Value.Supported } -> Value { trackList : Value.Supported, autoTrackList : Value.Supported } -> Value { provides | templateRowsColumns : Value.Supported }

Provides structured input for gridTemplate for inputting rows and columns, equivalent to inputting gridTemplateRows and [gridTemplateColumns] separately.

gridTemplate <|
    templateRowsColumns
        trackList
            ( lineNames ["line1", "line2"] )
            [ px 300
            , lineNames ["line3"]
            ]

        autoTrackList
            ( minmax (px 210) maxContent )
            [ autoRepeat autoFill [px 200]
            , pct 20
            ]

templateAreasRowsColumns : List (Value { templateAreaRow : Value.Supported }) -> Maybe (Value { templateColumns : Value.Supported }) -> Value { provides | templateAreasRowsColumns : Value.Supported }

Provides structured input for gridTemplate for inputting areas combined with rows, and then columns.

gridTemplate <|
    templateAreasRowsColumns
        [ templateAreaRow
            ( Just <| lineNames ["left"] )
            "nav foot"
            ( Just <| px 30 )
            ( Just <| lineNames ["right"])
        ]
        ( Just <| templateColumns
            ( px 120 )
            [ fr 120
            ]
        )

templateAreaRow : Maybe (Value { lineNames : Value.Supported }) -> String -> Maybe (Value TrackSize) -> Maybe (Value { lineNames : Value.Supported }) -> Value { provides | templateAreaRow : Value.Supported }

The portion of a possible way of giving a gridTemplate`a value that sets rows and areas.

gridTemplate <|
    templateAreasRowsColumns
        [ templateAreaRow
            ( Just <| lineNames ["header-left"] )
            "head head"
            ( Just <| px 30 )
            ( Just <| lineNames ["header-right"] )

        , templateAreaRow
            ( Just <| lineNames ["main-left"] )
            "nav main"
            ( Just <| fr 1 )
            ( Just <| lineNames ["main-right"])

        , templateAreaRow
            ( Just <| lineNames ["footer-left"] )
            "nav foot"
            ( Just <| px 30 )
            ( Just <| lineNames ["footer-right"])
        ]
        ( Just <| templateColumns
            ( px 120 )
            [ fr 120
            ]
        )

templateColumns : Value (TrackSizeSupported { lineNames : Value.Supported }) -> List (Value (TrackSizeSupported { lineNames : Value.Supported })) -> Value { provides | templateColumns : Value.Supported }

The portion of a possible way of giving a gridTemplate`a value that sets columns.

The first value is the head of the list. This function is structured in this way to prevent giving empty lists.

gridTemplate <|
    templateAreasRowsColumns
        [ templateAreaRow
            ( Just <| lineNames ["left"] )
            "nav foot"
            ( Just <| px 30 )
            ( Just <| lineNames ["right"])
        ]
        ( Just <| templateColumns
            ( px 120 )
            [ fr 120
            ]
        )

trackList : Value (TrackSizeSupported { fixedRepeat : Value.Supported, lineNames : Value.Supported }) -> List (Value (TrackSizeSupported { fixedRepeat : Value.Supported, lineNames : Value.Supported })) -> Value { provides | trackList : Value.Supported }

Creates a <track-list> value for use in creating grid tempolates.

gridTemplateColumns <|
    trackList [ fixedRepeat (num 4) [px 520] ]

autoTrackList : Value (FixedSizeSupported { fixedRepeat : Value.Supported, autoRepeat : Value.Supported, lineNames : Value.Supported }) -> List (Value (FixedSizeSupported { fixedRepeat : Value.Supported, autoRepeat : Value.Supported, lineNames : Value.Supported })) -> Value { provides | autoTrackList : Value.Supported }

Creates a <auto-track-list> value for use in creating grid templates.

gridTemplateColumns <|
    autoTrackList
        ( minmax (px 210) maxContent )
        [ autoRepeat autoFill [px 200]
        , pct 20
        ]

fixedRepeat : Value { num : Value.Supported } -> List (Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, minmax : Value.Supported, lineNames : Value.Supported })) -> Value { provides | fixedRepeat : Value.Supported }

Performs the repeat() function used in CSS Grid track lists. This lets you repeat a pattern of grid lines in CSS Grid without duplicating code.

This is the fixed variant of the repeat() function. In this variant, you must specify a num before specifying the track list pattern you want to repeat.

gridTemplate <|
    templateRowsColumns
        ( trackList
            ( lineNames ["line1", "line2"] )
            [ px 300
            , lineNames ["line3"]
            ]
        )

        ( autoTrackList
            ( minmax (px 210) maxContent )
            [ autoRepeat autoFill [px 200]
            , pct 20
            ]
        )

autoRepeat : Value { autoFill : Value.Supported, autoFit : Value.Supported } -> List (Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, minmax : Value.Supported, lineNames : Value.Supported })) -> Value { provides | autoRepeat : Value.Supported }

Performs the repeat() function used in CSS Grid track lists. This lets you repeat a pattern of grid lines in CSS Grid without duplicating code.

You must specify a autoFit, or autoFill before specifying the track list pattern you want to repeat.

gridTemplateRows <|
    autoTrackList
        [ lineNames ["linename1"]
        , px 100
        , lineNames ["linename2"]
        , autoRepeat autoFit
            (px 10)
            [ lineNames["row-start"]
            , px 250
            , lineNames["row-end"]
            ]
        , px 100
        ]

autoFill : Value { provides | autoFill : Value.Supported }

The auto-fill value used in the repeat() function.

gridTemplateColumnsList
    [ minmax (px 210) maxContent
    , repeatedTracks autoFill [px 200]
    , pct 20
    ]

(Note: due to a naming conflict, the repeat() function is called repeatedTracks in this package.)

autoFit : Value { provides | autoFit : Value.Supported }

The auto-fit value used in the repeat() function.

gridTemplateColumnsList
    [ minmax (px 210) maxContent
    , repeatedTracks autoFit [px 200]
    , pct 20
    ]

(Note: due to a naming conflict, the repeat() function is called repeatedTracks in this package.)

lineNames : List String -> Value { provides | lineNames : Value.Supported }

Custom ident(s) that are only used in grid area definitions, for naming lines of a grid layout. A line may have multiple names.

Line names are case sensitive.

gridTemplateColumnsList
    [ lineNames["line1", "line2"]
    , px 300
    , lineNames["line3"]
    ]

--- grid-template-colums: [line1 line2] 300px [line3];

dense : Value { provides | dense : Value.Supported }

The dense value for the grid-auto-flow property.

gridAutoFlow dense

gridAutoFlow2 row dense

Gap

gap : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets the gap property.

The gap property is a shorthand for setting row-gap and column-gap in a single declaration.

gap specifies the size of spacing between items within grid, flex and multi-column layouts.

gap initial

gap (px 20) -- 20px gap between all items.

gap2 (px 20) (px 40) -- 20px row gap, 40px column gap.

gap2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets the gap property.

The gap property is a shorthand for setting row-gap and column-gap in a single declaration.

gap specifies the size of spacing between items within grid, flex and multi-column layouts.

gap2 (px 20) (px 40) -- 20px row gap, 40px column gap.

rowGap : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

Sets the row-gap property.

row-gap specifies the size of spacing between rows of items within grid, flex and multi-column layouts.

rowGap normal

rowGap (px 20)

Background

backgroundColor : BaseValue (ColorSupported { transparent : Value.Supported }) -> Style

Sets background-color.

backgroundColor (hex "#60b5cc")

backgroundColor (rgb 96 181 204)

backgroundColor (rgba 96 181 204 0.5)

backgroundColor transparent

backgroundAttachment : BaseValue { fixed : Value.Supported, scroll : Value.Supported, local : Value.Supported } -> Style

Sets background-attachment.

backgroundAttachment local

backgroundAttachmentMany [ fixed, scroll, fixed ]

backgroundAttachmentMany [ fixed, scroll, fixed ]

backgroundAttachmentMany [] -- background-attachment: unset;

backgroundAttachmentMany : List (Value { fixed : Value.Supported, scroll : Value.Supported, local : Value.Supported }) -> Style

Sets background-attachment.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

backgroundAttachment local

backgroundAttachmentMany [ fixed, scroll, fixed ]

backgroundAttachmentMany [ fixed, scroll, fixed ]

backgroundAttachmentMany [] -- background-attachment: unset;

local : Value { provides | local : Value.Supported }

The local background-attachment value

backgroundAttachment local

backgroundBlendMode : BaseValue BlendMode -> Style

Sets background-blend-mode. Note that this takes an argument of color_, not color!

backgroundBlendMode color_

backgroundBlendMode darken

backgroundBlendMode colorBurn

backgroundBlendModeMany [ darken, color_ ]

backgroundBlendModeMany [] -- background-blend-mode: unset;

backgroundBlendModeMany : List (Value BlendMode) -> Style

Sets background-blend-mode.

Note that this takes an argument of color_, not color!

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

backgroundBlendMode color_

backgroundBlendMode darken

backgroundBlendMode colorBurn

backgroundBlendModeMany [ darken, color_ ]

backgroundBlendModeMany [] -- background-blend-mode: unset;

backgroundClip : BaseValue { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported, text : Value.Supported } -> Style

Sets background-clip. Note that this takes an argument of text, not color!

backgroundClip text

backgroundClip paddingBox

backgroundClip contentBox

backgroundClipMany [ text, borderBox, text ]

backgroundClipMany [] -- background-clip: unset;

backgroundClipMany : List (Value { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported, text : Value.Supported }) -> Style

Sets background-clip. Note that this takes an argument of text, not color!

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

backgroundClip text

backgroundClip paddingBox

backgroundClip contentBox

backgroundClipMany [ text, borderBox, text ]

backgroundClipMany [] -- background-clip: unset;

backgroundOrigin : BaseValue { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported } -> Style

Sets background-origin.

backgroundOrigin paddingBox

backgroundOrigin contentBox

backgroundOriginMany [ contentBox, borderBox, contentBox ]

backgroundOriginMany [] -- background-origin: unset;

backgroundOriginMany : List (Value { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported }) -> Style

Sets background-origin.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

backgroundOrigin paddingBox

backgroundOrigin contentBox

backgroundOriginMany [ contentBox, borderBox, contentBox ]

backgroundOriginMany [] -- background-origin: unset;

backgroundImage : BaseValue (ImageSupported { none : Value.Supported }) -> Style

Sets background-image.

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

backgroundImage (linearGradient (stop red) (stop blue))

See also backgroundImages if you need multiple images.

backgroundImageMany : List (Value Image) -> Style

Sets background-image for multiple images.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

backgroundImageMany
    (linearGradient (stop red) (stop blue))
    [ url "http://www.example.com/chicken.jpg" ]

backgroundImageMany [] -- background-image: unset;

See also backgroundImage if you need only one.

backgroundPosition : BaseValue (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style

Sets background-position.

backgroundPosition left_

backgroundPosition (px 45)

backgroundPosition sets the horizontal direction. If you need the vertical direction instead, use backgroundPosition2 like this:

backgroundPosition2 zero (px 45)

If you need to set the offsets from the right or bottom, use backgroundPosition4 like this:

backgroundPosition4 right_ (px 20) bottom_ (pct 30)

backgroundPosition2 : Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style

Sets background-position.

backgroundPosition2 left_ top_

backgroundPosition2 (px 45) (pct 50)

backgroundPosition2 sets both the horizontal and vertical directions (in that order, same as CSS.) If you need only the horizontal, you can use backgroundPosition instead:

backgroundPosition left_

If you need to set the offsets from the right or bottom, use backgroundPosition4.

backgroundPosition3 : Value { left_ : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Value { center : Value.Supported } -> Style

Sets background-position.

backgroundPosition3 right_ (px 20) center

The three-argument form of background position sets one side to center and the other to the specified offest. So the example above would position the background image 20px from the right, and center it vertically.

backgroundPosition4 : Value { left_ : Value.Supported, right_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Value { top_ : Value.Supported, bottom_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets background-position.

backgroundPosition4 right_ (px 20) bottom_ (pct 30)

The four-argument form of background position alternates sides and offets. So the example above would position the background image 20px from the right, and 30% from the bottom.

See also backgroundPosition for horizontal alignment and backgroundPosition2 for horizontal (from left) and vertical (from top) alignment.

backgroundRepeat : BaseValue { repeat : Value.Supported, repeatX : Value.Supported, repeatY : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style

Sets background-repeat

backgroundRepeat repeat

backgroundRepeat repeatX

If you need to set horizontal and vertical direction separately, see backgroundRepeat2

backgroundRepeat2 : Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style

Sets background-repeat along the horizontal axis, then the vertical axis.

backgroundRepeat2 repeat space

backgroundRepeat2 space round

If you only need to set one value for both, see backgroundRepeat instead.

backgroundSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, cover : Value.Supported, contain_ : Value.Supported }) -> Style

Sets background-size.

backgroundSize cover

backgroundSize (px 400)

If you give a length value, it will be used for the width. The height will be set proportional to the size of the background-image. If you need to set both width and height explicitly, use backgroundImage2 instead.

Basic typographic options

Sizing

fontSize : BaseValue (LengthSupported { xxSmall : Value.Supported, xSmall : Value.Supported, small : Value.Supported, medium : Value.Supported, large : Value.Supported, xLarge : Value.Supported, xxLarge : Value.Supported, xxxLarge : Value.Supported, smaller : Value.Supported, larger : Value.Supported, pct : Value.Supported }) -> Style

Sets font-size

fontSize xxSmall

fontSize (px 12)

Check out fluid typography for some cool stuff you can do with this.

xxSmall : Value { provides | xxSmall : Value.Supported }

The xx-small font-size value.

fontSize xxSmall

xSmall : Value { provides | xSmall : Value.Supported }

The x-small font-size value.

fontSize xSmall

small : Value { provides | small : Value.Supported }

The small font-size value.

fontSize small

medium : Value { provides | medium : Value.Supported }

The medium value used by properties such as fontSize, borderWidth, columnRuleWidth.

fontSize medium

borderWidth medium

columnRuleWidth medium

The value is equivalent of 3px when using for border-width.

large : Value { provides | large : Value.Supported }

The large font-size value.

fontSize large

xLarge : Value { provides | xLarge : Value.Supported }

The x-large font-size value.

fontSize xLarge

xxLarge : Value { provides | xxLarge : Value.Supported }

The xx-large font-size value.

fontSize xxLarge

xxxLarge : Value { provides | xxxLarge : Value.Supported }

The xxx-large font-size value.

fontSize xxxLarge

smaller : Value { provides | smaller : Value.Supported }

The smaller font-size value.

fontSize smaller

larger : Value { provides | larger : Value.Supported }

The larger font-size value.

fontSize larger

fontSizeAdjust : BaseValue { none : Value.Supported, zero : Value.Supported, num : Value.Supported } -> Style

Sets font-size-adjust

fontSizeAdjust zero

fontSizeAdjust none

fontSizeAdjust (num 0.5)

@font-face

fontDisplay : BaseValue { auto : Value.Supported, block : Value.Supported, swap : Value.Supported, fallback : Value.Supported, optional : Value.Supported } -> Style

Sets font-display

fontDisplay auto

fontDisplay block

fontDisplay swap

fontDisplay fallback

fontDisplay optional

fallback : Value { provides | fallback : Value.Supported }

Sets fallback value for usage with fontDisplay or strokeLinejoin.

  fontDisplay fallback

  strokeLinejoin2 miter fallback

swap : Value { provides | swap : Value.Supported }

Sets swap value for usage with fontDisplay.

fontDisplay swap

optional : Value { provides | optional : Value.Supported }

Sets optional value for usage with fontDisplay.

  fontDisplay optional

Font family

fontFamily : BaseValue { serif : Value.Supported, sansSerif : Value.Supported, monospace : Value.Supported, cursive : Value.Supported, fantasy : Value.Supported, systemUi : Value.Supported, uiSerif : Value.Supported, uiSansSerif : Value.Supported, uiMonospace : Value.Supported, uiRounded : Value.Supported, emoji : Value.Supported, math : Value.Supported, fangsong : Value.Supported } -> Style

For when your font is one of the six generic font family names - serif, sansSerif, monospace, cursive, fantasy, or systemUi.

If you want to refer to a font by its name (like Helvetica or Arial), use fontFamilyMany instead.

fontFamilyMany : List String -> Value { serif : Value.Supported, sansSerif : Value.Supported, monospace : Value.Supported, cursive : Value.Supported, fantasy : Value.Supported, systemUi : Value.Supported, uiSerif : Value.Supported, uiSansSerif : Value.Supported, uiMonospace : Value.Supported, uiRounded : Value.Supported, emoji : Value.Supported, math : Value.Supported, fangsong : Value.Supported } -> Style

Define multiple font families.

Per the CSS spec, a generic name must always be at the end of this list. (The generic names are serif, sansSerif, monospace, cursive or fantasy.)

fontFamilyMany [ "Gill Sans Extrabold", "Helvetica", "Arial" ] sansSerif

This function will automatically wrap each font family in quotation marks unless it is one of the six generic names (like sans-serif), which must never be quoted.

serif : Value { provides | serif : Value.Supported }

The serif generic font family name.

fontFamily serif

fontFamilyMany [ "Gill Sans", "Helvetica" ] serif

This can be used with fontFamily and fontFamilyMany.

sansSerif : Value { provides | sansSerif : Value.Supported }

The sans-serif generic font family name.

fontFamily sansSerif

fontFamilyMany [ "Georgia", "Times" ] sansSerif

This can be used with fontFamily and fontFamilyMany.

monospace : Value { provides | monospace : Value.Supported }

The monospace generic font family name.

fontFamily monospace

fontFamilyMany [ "Source Code Pro", "Lucida Console" ] monospace

This can be used with fontFamily and fontFamilyMany.

cursive : Value { provides | cursive : Value.Supported }

The cursive generic font family name.

fontFamily cursive

fontFamilyMany [ "Brush Script Std", "Lucida Calligraphy" ] cursive

This can be used with fontFamily and fontFamilyMany.

fantasy : Value { provides | fantasy : Value.Supported }

The fantasy generic font family name.

fontFamily fantasy
fontFamilyMany [ "Herculanum", "Harrington" ] fantasy

This can be used with fontFamily and fontFamilyMany.

systemUi : Value { provides | systemUi : Value.Supported }

The system-ui generic font family name.

You may want to read more about the system font stack before using this one.

fontFamily systemUi

fontFamilyMany [ "", "Segoe UI" ] systemUi

fontFamilyMany [ "system-ui", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ] sansSerif

This can be used with fontFamily and fontFamilyMany.

uiSerif : Value { provides | uiSerif : Value.Supported }

The ui-serif generic font family name.

fontFamily uiSerif

fontFamilyMany [ "New York" ] uiSerif

This can be used with fontFamily and fontFamilyMany.

uiSansSerif : Value { provides | uiSansSerif : Value.Supported }

The ui-sans-serif generic font family name.

fontFamily uiSansSerif

This can be used with fontFamily and fontFamilyMany.

uiMonospace : Value { provides | uiMonospace : Value.Supported }

The ui-monospace generic font family name.

fontFamily uiMonospace

This can be used with fontFamily and fontFamilyMany.

uiRounded : Value { provides | uiRounded : Value.Supported }

The ui-rounded generic font family name.

fontFamily uiRounded

This can be used with fontFamily and fontFamilyMany.

math : Value { provides | math : Value.Supported }

The math generic font family name.

fontFamily math

This can be used with fontFamily and fontFamilyMany.

fangsong : Value { provides | fangsong : Value.Supported }

The fangsong generic font family name.

fontFamily fangsong

This can be used with fontFamily and fontFamilyMany.

Font color, style, weight & stretch

color : BaseValue Color -> Style

Sets color.

color (hex "#60b5cc")

color (rgb 96 181 204)

color (rgba 96 181 204 0.5)

fontStyle : BaseValue { normal : Value.Supported, italic : Value.Supported, oblique : Value.Supported } -> Style

Sets font-style

fontStyle italic

italic : Value { provides | italic : Value.Supported }

oblique : Value { provides | oblique : Value.Supported }

fontWeight : BaseValue { normal : Value.Supported, bold : Value.Supported, bolder : Value.Supported, lighter : Value.Supported, int : Value.Supported } -> Style

Sets font-weight

fontWeight bold

fontWeight (int 300)

bold : Value { provides | bold : Value.Supported }

lighter : Value { provides | lighter : Value.Supported }

bolder : Value { provides | bolder : Value.Supported }

fontStretch : BaseValue { ultraCondensed : Value.Supported, extraCondensed : Value.Supported, condensed : Value.Supported, semiCondensed : Value.Supported, normal : Value.Supported, semiExpanded : Value.Supported, expanded : Value.Supported, extraExpanded : Value.Supported, ultraExpanded : Value.Supported, pct : Value.Supported } -> Style

Sets font-stretch

fontStretch ultraCondensed

fontStretch extraCondensed

fontStretch condensed

fontStretch semiCondensed

fontStretch normal

fontStretch semiExpanded

fontStretch expanded

fontStretch extraExpanded

fontStretch ultraExpanded

fontStretch (pct 100)

ultraCondensed : Value { provides | ultraCondensed : Value.Supported }

Sets ultra-condensed value for usage with fontStretch.

  fontDisplay ultraCondensed

extraCondensed : Value { provides | extraCondensed : Value.Supported }

Sets extra-condensed value for usage with fontStretch.

  fontDisplay extraCondensed

condensed : Value { provides | condensed : Value.Supported }

Sets condensed value for usage with fontStretch.

  fontDisplay Condensed

semiCondensed : Value { provides | semiCondensed : Value.Supported }

Sets semi-condensed value for usage with fontStretch.

  fontDisplay semiCondensed

semiExpanded : Value { provides | semiExpanded : Value.Supported }

Sets semi-expanded value for usage with fontStretch.

  fontDisplay semiExpanded

expanded : Value { provides | expanded : Value.Supported }

Sets expanded value for usage with fontStretch.

  fontDisplay Expanded

extraExpanded : Value { provides | extraExpanded : Value.Supported }

Sets extra-expanded value for usage with fontStretch.

  fontDisplay extraExpanded

Missing typeface synthesis

fontSynthesis : BaseValue { none : Value.Supported, weight : Value.Supported, style : Value.Supported, smallCaps : Value.Supported } -> Style

The font-synthesis property.

fontSynthesis none

fontSynthesis smallCaps

fontSynthesis2 smallCaps weight

fontSynthesis3 weight style smallCaps

fontSynthesis2 : Value { weight : Value.Supported, style : Value.Supported, smallCaps : Value.Supported } -> Value { weight : Value.Supported, style : Value.Supported, smallCaps : Value.Supported } -> Style

The font-synthesis property.

This is the two-argument variant, in which you can indicate two different font properties to be synthesised by the browser.

fontSynthesis2 smallCaps weight

fontSynthesis3 : Value { weight : Value.Supported } -> Value { style : Value.Supported } -> Value { smallCaps : Value.Supported } -> Style

The font-synthesis property.

This is the three-argument variant, in which you can indicate all three different font properties to be synthesised by the browser.

fontSynthesis3 weight style smallCaps

weight : Value { provides | weight : Value.Supported }

The weight value for the fontSynthesis property.

fontSynthesis weight

Variable fonts (not to be confused with font variants)

fontVariationSettings : BaseValue { normal : Value.Supported } -> Style

The 1-argument variant of the font-variation-settings property.

This lets you control variable font axes directly by their tag.

Use fontVariationSettingsMany to work with variable font tags.

fontVariationSettings normal

fontVariationSettings inherit

fontVariationSettingsMany [ ("XHGT", 0.7) ]

This is designed to let you set variable features where none exist already. If you've got a variable axis already covered by a property (eg. fontWeight, fontStyle), you should use those instead.

Typographic features

OpenType typographic features

fontFeatureSettings : BaseValue { featureTag : Value.Supported, normal : Value.Supported } -> Style

Sets font-feature-settings

fontFeatureSettings normal

fontFeatureSettings (featureTag "liga")

fontFeatureSettings (featureTag2 "swsh" 2)

fontFeatureSettingsMany : List (Value { featureTag : Value.Supported }) -> Style

Sets font-feature-settings in a way that lets you add a list of featureTags.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

fontFeatureSettingsMany featureTag "liga" [ featureTag2 "swsh" 2 ]

fontFeatureSettingsMany [] -- font-feature-settings: unset;

featureTag : String -> Value { provides | featureTag : Value.Supported }

Creates a feature-tag-value for use with fontFeatureSettings and fontFeatureSettingsMany

featureTag "smcp"

featureTag2 : String -> Basics.Int -> Value { provides | featureTag : Value.Supported }

Creates a feature-tag-value with an specific value for use with fontFeatureSettings and fontFeatureSettingsMany

featureTag2 "swsh" 2

Font Variants


type alias AllFontVariantsSupported supported =
FontVariantCapsSupported (FontVariantEastAsianSupported (FontVariantLigaturesSupported (FontVariantNumericSupported (FontVariantEmojiSupported (FontVariantPositionSupported supported)))))

A type that encapsulates all special font variant keywords plus additional types.


type alias AllFontVariants =
AllFontVariantsSupported {}

A type that encapsulates all special font variant keywords.

fontVariant : BaseValue (AllFontVariantsSupported { none : Value.Supported, normal : Value.Supported }) -> Style

The font-variant CSS property.

This is a shorthand property, encapsulating the following: - fontVariantCaps - fontVariantEastAsian - fontVariantLigatures - fontVariantNumeric - fontVariantEmoji - fontVariantPosition

fontVariant inherit

fontVariant normal

fontVariant jis83

fontVariant2 commonLigatures smallCaps

fontVariant2 noCommonLigatures slashedZero

fontVariant2 : Value AllFontVariants -> Value AllFontVariants -> Style

The font-variant CSS property.

This is a shorthand property, encapsulating the following: - fontVariantCaps - fontVariantEastAsian - fontVariantLigatures - fontVariantNumeric - fontVariantEmoji - fontVariantPosition

fontVariant inherit

fontVariant normal

fontVariant jis83

fontVariant2 commonLigatures smallCaps

fontVariant2 noCommonLigatures slashedZero

Alternative capitals


type alias FontVariantCapsSupported supported =
{ supported | smallCaps : Value.Supported
, allSmallCaps : Value.Supported
, petiteCaps : Value.Supported
, allPetiteCaps : Value.Supported
, unicase : Value.Supported
, titlingCaps : Value.Supported 
}

A type that encapsulates all caps font variant keywords plus additional types.

fontVariantCaps : BaseValue (FontVariantCapsSupported { normal : Value.Supported }) -> Style

Sets font-variant-caps.

fontVariantCaps normal

fontVariantCaps smallCaps

fontVariantCaps allSmallCaps

fontVariantCaps petiteCaps

fontVariantCaps allPetiteCaps

fontVariantCaps unicase

fontVariantCaps titlingCaps

smallCaps : Value { provides | smallCaps : Value.Supported }

The small-caps value used in

fontVariantCaps smallCaps

fontSynthesis2 smallCaps style

allSmallCaps : Value { provides | allSmallCaps : Value.Supported }

The all-small-caps font-variant-caps value.

fontVariantCaps allSmallCaps

petiteCaps : Value { provides | petiteCaps : Value.Supported }

The petite-caps font-variant-caps value.

fontVariantCaps petiteCaps

allPetiteCaps : Value { provides | allPetiteCaps : Value.Supported }

The all-petite-caps font-variant-caps value.

fontVariantCaps allPetiteCaps

unicase : Value { provides | unicase : Value.Supported }

The unicase font-variant-caps value.

fontVariantCaps unicase

titlingCaps : Value { provides | titlingCaps : Value.Supported }

The titling-caps font-variant-caps value.

fontVariantCaps titlingCaps

East Asian glyph variants


type alias FontVariantEastAsianSupported supported =
{ supported | ruby : Value.Supported
, jis78 : Value.Supported
, jis83 : Value.Supported
, jis90 : Value.Supported
, jis04 : Value.Supported
, simplified : Value.Supported
, traditional : Value.Supported
, fullWidth : Value.Supported
, proportionalWidth : Value.Supported 
}

A type that encapsulates all east asian font variant keywords plus additional types.


type alias FontVariantEastAsian =
FontVariantEastAsianSupported {}

A type that encapsulates all east asian font variant keywords.

fontVariantEastAsian : BaseValue (FontVariantEastAsianSupported { normal : Value.Supported }) -> Style

The font-variant-east-asian property.

This property controls the use of alternative glyphs for East Asian scripts.

fontVariantEastAsian normal

fontVariantEastAsian2 ruby jis83

fontVariantEastAsian3 ruby jis90 fullWidth

fontVariantEastAsian2 : Value FontVariantEastAsian -> Value FontVariantEastAsian -> Style

The font-variant-east-asian property.

This property controls the use of alternative glyphs for East Asian scripts.

fontVariantEastAsian2 ruby jis83

fontVariantEastAsian3 : Value { ruby : Value.Supported } -> Value { jis78 : Value.Supported, jis83 : Value.Supported, jis90 : Value.Supported, jis04 : Value.Supported, simplified : Value.Supported, traditional : Value.Supported } -> Value { fullWidth : Value.Supported, proportionalWidth : Value.Supported } -> Style

The font-variant-east-asian property.

This property controls the use of alternative glyphs for East Asian scripts.

fontVariantEastAsian3 ruby jis90 fullWidth

jis78 : Value { provides | jis78 : Value.Supported }

Sets the jis78 value for fontVariantEastAsian.

This specifies that the JIS X 0208:1978 standard for East Asian logographic glyphs should be used.

fontVariantEastAsian jis78

jis83 : Value { provides | jis83 : Value.Supported }

Sets the jis83 value for fontVariantEastAsian.

This specifies that the JIS X 0208:1983 standard for East Asian logographic glyphs should be used.

fontVariantEastAsian jis83

jis90 : Value { provides | jis90 : Value.Supported }

Sets the jis90 value for fontVariantEastAsian.

This specifies that the JIS X 0208:1990 standard for East Asian logographic glyphs should be used.

fontVariantEastAsian jis90

jis04 : Value { provides | jis04 : Value.Supported }

Sets the jis04 value for fontVariantEastAsian.

This specifies that the JIS X 0208:2004 standard for East Asian logographic glyphs should be used.

fontVariantEastAsian jis04

simplified : Value { provides | simplified : Value.Supported }

Sets the simplified value for fontVariantEastAsian.

This specifies that no particular standard should be used for East Asian logographic glyphs apart from them being simplified Chinese glyphs.

fontVariantEastAsian simplified

traditional : Value { provides | traditional : Value.Supported }

Sets the traditional value for fontVariantEastAsian.

This specifies that no particular standard should be used for East Asian logographic glyphs apart from them being traditional Chinese glyphs.

fontVariantEastAsian traditional

proportionalWidth : Value { provides | proportionalWidth : Value.Supported }

Sets the proportional-width value for fontVariantEastAsian.

This activates the East Asian characters that vary in width.

(As opposed to fullWidth, which specifies that they should roughly be the same width.)

fontVariantEastAsian proportionalWidth

Ligatures & contextual forms


type alias FontVariantLigaturesSupported supported =
{ supported | commonLigatures : Value.Supported
, noCommonLigatures : Value.Supported
, discretionaryLigatures : Value.Supported
, noDiscretionaryLigatures : Value.Supported
, historicalLigatures : Value.Supported
, noHistoricalLigatures : Value.Supported
, contextual : Value.Supported
, noContextual : Value.Supported 
}

A type that encapsulates all ligature font variant keywords plus additional types.

fontVariantLigatures : BaseValue (FontVariantLigaturesSupported { normal : Value.Supported, none : Value.Supported }) -> Style

Sets font-variant-ligatures.

fontVariantLigatures discretionaryLigatures

fontVariantLigatures none

commonLigatures : Value { provides | commonLigatures : Value.Supported }

The common-ligatures font-variant-ligatures value.

fontVariantLigatures commonLigatures

noCommonLigatures : Value { provides | noCommonLigatures : Value.Supported }

The no-common-ligatures font-variant-ligatures value.

fontVariantLigatures noCommonLigatures

discretionaryLigatures : Value { provides | discretionaryLigatures : Value.Supported }

The discretionary-ligatures font-variant-ligatures value.

fontVariantLigatures discretionaryLigatures

noDiscretionaryLigatures : Value { provides | noDiscretionaryLigatures : Value.Supported }

The no-discretionary-ligatures font-variant-ligatures value.

fontVariantLigatures noDiscretionaryLigatures

historicalLigatures : Value { provides | historicalLigatures : Value.Supported }

The historical-ligatures font-variant-ligatures value.

fontVariantLigatures historicalLigatures

noHistoricalLigatures : Value { provides | noHistoricalLigatures : Value.Supported }

The no-historical-ligatures font-variant-ligatures value.

fontVariantLigatures noHistoricalLigatures

contextual : Value { provides | contextual : Value.Supported }

The contextual font-variant-ligatures value.

fontVariantLigatures contextual

Numerical variants


type alias FontVariantNumericSupported supported =
{ supported | ordinal : Value.Supported
, slashedZero : Value.Supported
, liningNums : Value.Supported
, oldstyleNums : Value.Supported
, proportionalNums : Value.Supported
, tabularNums : Value.Supported
, diagonalFractions : Value.Supported
, stackedFractions : Value.Supported 
}

A type that encapsulates all numeric font variant keywords plus additional types.


type alias FontVariantNumeric =
FontVariantNumericSupported {}

A type that encapsulates all numeric font variant keywords.

fontVariantNumeric : BaseValue (FontVariantNumericSupported { normal : Value.Supported }) -> Style

Sets font-variant-numeric.

fontVariantNumeric ordinal

fontVariantNumericMany [ slashedZero liningNums ]

fontVariantNumeric4 : Maybe (Value { ordinal : Value.Supported, slashedZero : Value.Supported }) -> Maybe (Value { liningNums : Value.Supported, oldstyleNums : Value.Supported }) -> Maybe (Value { proportionalNums : Value.Supported, tabularNums : Value.Supported }) -> Maybe (Value { diagonalFractions : Value.Supported, stackedFractions : Value.Supported }) -> Style

Sets font-variant-numeric.

This one can be tricky to use because many of the options are mutually exclusive. For example, normal cannot be used with any of the others, so the only way to get it from this function is to pass Nothing for everything. The other arguments are chosen such that you can choose between the mutually exclusive values, or leave that value off.

fontVariantNumeric ordinal

fontVariantNumeric4 Nothing Nothing Nothing Nothing -- "normal"

fontVariantNumeric4
    (Just ordinal)
    Nothing
    (Just tabularNums)
    Nothing
    -- "ordinal tabular-nums"

ordinal : Value { provides | ordinal : Value.Supported }

The ordinal font-variant-numeric value.

fontVariantNumeric ordinal

slashedZero : Value { provides | slashedZero : Value.Supported }

The slashed-zero font-variant-numeric value.

fontVariantNumeric slashedZero

liningNums : Value { provides | liningNums : Value.Supported }

The lining-nums font-variant-numeric value.

fontVariantNumeric liningNums

oldstyleNums : Value { provides | oldstyleNums : Value.Supported }

The oldstyle-nums font-variant-numeric value.

fontVariantNumeric oldstyleNums

proportionalNums : Value { provides | proportionalNums : Value.Supported }

The proportional-nums font-variant-numeric value.

fontVariantNumeric proportionalNums

tabularNums : Value { provides | tabularNums : Value.Supported }

The tabular-nums font-variant-numeric value.

fontVariantNumeric tabularNums

diagonalFractions : Value { provides | diagonalFractions : Value.Supported }

The diagonal-fractions font-variant-numeric value.

fontVariantNumeric diagonalFractions

Emoji variants


type alias FontVariantEmojiSupported supported =
{ supported | text : Value.Supported
, emoji : Value.Supported
, unicode : Value.Supported 
}

A type that encapsulates all emoji font variant keywords plus additional types.

fontVariantEmoji : BaseValue (FontVariantEmojiSupported { normal : Value.Supported }) -> Style

The font-variant-emoji property.

fontVariantEmoji unset

fontVariantEmoji emoji

fontVariantEmoji normal

emoji : Value { provides | emoji : Value.Supported }

The emoji value used with fontFamily, fontFamilyMany and fontVariantEmoji.

fontFamily emoji

fontVariantEmoji emoji

unicode : Value { provides | unicode : Value.Supported }

The unicode value used with fontVariantEmoji.

fontVariantEmoji unicode

Superscript & subscript


type alias FontVariantPositionSupported supported =
{ supported | sub : Value.Supported
, super : Value.Supported 
}

A type that encapsulates all position font variant keywords plus additional types.

fontVariantPosition : BaseValue (FontVariantPositionSupported { normal : Value.Supported }) -> Style

The font-variant-position property.

fontVariantPosition sub

fontVariantPosition normal

Other typographic properties

Kerning

fontKerning : BaseValue { none : Value.Supported, auto : Value.Supported, normal : Value.Supported } -> Style

The font-kerning property.

fontKerning none

Language override

fontLanguageOverride : BaseValue { normal : Value.Supported, string : Value.Supported } -> Style

The font-language-override property.

fontLanguageOverride normal

fontLanguageOverride (string "ENG")

Optical sizing

fontOpticalSizing : BaseValue { none : Value.Supported, auto : Value.Supported } -> Style

The font-optical-sizing property.

fontOpticalSizing none

Typographic metrics

lineHeight : BaseValue (LengthSupported { pct : Value.Supported, normal : Value.Supported, num : Value.Supported }) -> Style

Sets line-height

lineHeight (pct 150)

lineHeight (em 2)

lineHeight (num 1.5)

lineHeight normal

letterSpacing : BaseValue (LengthSupported { normal : Value.Supported }) -> Style

Sets letter-spacing

letterSpacing (pct 150)

letterSpacing (em 2)

letterSpacing (num 1.5)

letterSpacing normal

textIndent : BaseValue (LengthSupported { pct : Value.Supported }) -> Style

The text-indent property.

textIndent (em 1.5)

textIndent2 : Value (LengthSupported { pct : Value.Supported }) -> Value { hanging : Value.Supported, eachLine : Value.Supported } -> Style

The text-indent property.

textIndent2 (em 1.5) hanging

textIndent3 : Value (LengthSupported { pct : Value.Supported }) -> Value { hanging : Value.Supported } -> Value { eachLine : Value.Supported } -> Style

The text-indent property.

textIndent3 (em 1.5) hanging eachLine

hanging : Value { provides | hanging : Value.Supported }

The hanging value used for properties such as textIdent2.

textIdent2 (px 20) hanging

eachLine : Value { provides | eachLine : Value.Supported }

The each-line value used for properties such as textIdent2.

textIdent2 (px 20) eachLine

wordSpacing : BaseValue (LengthSupported { normal : Value.Supported, pct : Value.Supported }) -> Style

Sets word-spacing.

wordSpacing normal

wordSpacing zero

wordSpacing (px 5)

tabSize : BaseValue (LengthSupported { int : Value.Supported }) -> Style

Sets tab-size Note: only positive integer values are allowed.

tabSize (int 4)

Text wrapping, overflow and newlines

wordBreak : BaseValue { normal : Value.Supported, breakAll : Value.Supported, keepAll : Value.Supported, breakWord : Value.Supported } -> Style

Sets word-break

Note: breakWord has been deprecated.

  wordBreak normal
  wordBreak breakAll
  wordBreak keepAll
  wordBreak breakWord

breakAll : Value { provides | breakAll : Value.Supported }

A breakAll value for the word-break property.

  wordBreak breakAll

keepAll : Value { provides | keepAll : Value.Supported }

A keepAll value for the word-break property.

  wordBreak keepAll

lineBreak : BaseValue { auto : Value.Supported, loose : Value.Supported, normal : Value.Supported, strict : Value.Supported, anywhere : Value.Supported } -> Style

Sets the lineBreak property.

lineBreak auto

lineBreak strict

loose : Value { provides | loose : Value.Supported }

Sets loose value for usage with lineBreak.

lineBreak loose

whiteSpace : BaseValue { normal : Value.Supported, nowrap : Value.Supported, pre : Value.Supported, preWrap : Value.Supported, preLine : Value.Supported, breakSpaces : Value.Supported } -> Style

Sets white-space

whiteSpace pre

whiteSpace nowrap

whiteSpace preWrap

whiteSpace preLine

pre : Value { provides | pre : Value.Supported }

A pre value for the white-space property.

whiteSpace pre

preWrap : Value { provides | preWrap : Value.Supported }

A pre-wrap value for the white-space property.

whiteSpace preWrap

preLine : Value { provides | preLine : Value.Supported }

A pre-line value for the white-space property.

whiteSpace preLine

textOverflow : BaseValue { clip : Value.Supported, ellipsis : Value.Supported } -> Style

Sets the text-overflow property.

text-overflow describes how text that gets cut off is signalled to users.

When the one-argument version is used, it sets the end of text (right end for LTR users) that is cut off.

textOverflow ellipsis

When the two-argument version is used, it specifies how the text cut-off is displayed at the start (left in LTR) and the end (right in LTR) of the text.

textOverflow2 ellipsis ellipsis

textOverflow2 : Value { clip : Value.Supported, ellipsis : Value.Supported } -> Value { clip : Value.Supported, ellipsis : Value.Supported } -> Style

Sets the text-overflow property.

text-overflow describes how text that gets cut off is signalled to users.

This version specifies how the text cut-off is displayed at the start (left in LTR) and at the end (right in LTR) of the text.

textOverflow2 ellipsis ellipsis

ellipsis : Value { provides | ellipsis : Value.Supported }

Sets ellipsis value for usage with textOverflow.

textOverflow ellipsis

hyphens : BaseValue { none : Value.Supported, manual : Value.Supported, auto : Value.Supported } -> Style

Sets hyphens

hyphens none

hyphens manual

hyphens auto

manual : Value { provides | manual : Value.Supported }

Sets manual value for usage with hyphens.

hyphens manual

hangingPunctuation : BaseValue { none : Value.Supported, first_ : Value.Supported, forceEnd : Value.Supported, allowEnd : Value.Supported, last : Value.Supported } -> Style

Sets hanging-punctuation

hangingPunctuation none

hangingPunctuation first_

hangingPunctuation2 first_ forceEnd

hangingPunctuation3 first_ allowEnd last

hangingPunctuation2 : Value { first_ : Value.Supported, last : Value.Supported } -> Value { first_ : Value.Supported, forceEnd : Value.Supported, allowEnd : Value.Supported, last : Value.Supported } -> Style

Sets hanging-punctuation

first_ first_, last first and last last are invalid combinations.

hangingPunctuation2 first_ forceEnd

hangingPunctuation3 : Value { first_ : Value.Supported } -> Value { forceEnd : Value.Supported, allowEnd : Value.Supported } -> Value { last : Value.Supported } -> Style

Sets hanging-punctuation

hangingPunctuation3 first_ allowEnd last

first_ : Value { provides | first_ : Value.Supported }

Sets first value for usage with hangingPunctuation.

  hangingPunctuation first_

This is called first_ instead of first because first is already a pseudo-class function.

last : Value { provides | last : Value.Supported }

Sets last value for usage with hangingPunctuation.

  hangingPunctuation last

forceEnd : Value { provides | forceEnd : Value.Supported }

Sets force-end value for usage with hangingPunctuation.

  hangingPunctuation forceEnd

Text decoration and transform

textDecoration : BaseValue (ColorSupported { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported, solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported }) -> Style

Sets text-decoration shorthand property.

textDecoration underline

textDecoration2 : Value { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Value { solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported } -> Style

Sets text-decoration property.

textDecoration2 underline dotted

textDecoration3 : Value { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Value { solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported } -> Value Color -> Style

Sets text-decoration property.

textDecoration3 underline dotted (hex "#cf0")

textDecorationLine : BaseValue { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Style

Sets text-decoration-line property.

textDecorationLine underline

textDecorationLine2 : Value { underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Value { underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Style

Sets text-decoration-line property.

textDecorationLine2 underline overline

Note: The first and second argument MUST NOT be the same.

textDecorationLine3 : Value { underline : Value.Supported } -> Value { overline : Value.Supported } -> Value { lineThrough : Value.Supported } -> Style

Sets text-decoration-line property.

textDecorationLine3 underline overline lineThrough

textDecorationStyle : BaseValue { solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported } -> Style

Sets text-decoration-style property.

textDecorationStyle wavy

wavy : Value { provides | wavy : Value.Supported }

The wavy text-decoration-style value.

textDecorationStyle wavy

underline : Value { provides | underline : Value.Supported }

The underline text-decoration-line value.

textDecorationLine underline

overline : Value { provides | overline : Value.Supported }

The overline text-decoration-line value.

textDecorationLine overline

lineThrough : Value { provides | lineThrough : Value.Supported }

The line-through text-decoration-line value.

textDecorationLine lineThrough

textDecorationColor : BaseValue (ColorSupported { transparent : Value.Supported }) -> Style

Sets text-decoration-color property.

textDecorationColor (hex "#0cf")

transparent : Value { provides | transparent : Value.Supported }

Sets the transparent value for usage with textDecorationColor.

textDecorationColor transparent

textDecorationThickness : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, fromFont : Value.Supported }) -> Style

Sets the text-decoration-thickness property.

textDecorationThickness (pct 10)

fromFont : Value { provides | fromFont : Value.Supported }

Sets the from-font value for usage with textDecorationThickness.

textDecorationThickness fromFont

textDecorationSkipInk : BaseValue { auto : Value.Supported, all_ : Value.Supported, none : Value.Supported } -> Style

Sets text-decoration-skip-ink property.

textDecorationSkipInk auto

textDecorationSkipInk all_

textDecorationSkipInk none

textUnderlinePosition : BaseValue { auto : Value.Supported, under : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

Sets text-underline-position

textUnderlinePosition auto

textUnderlinePosition under

textUnderlinePosition left_

textUnderlinePosition right_

textUnderlinePosition2 : Value { under : Value.Supported } -> Value { left_ : Value.Supported, right_ : Value.Supported } -> Style

Sets text-underline-position

textUnderlinePosition2 under left_

textUnderlinePosition2 under right_

textUnderlineOffset : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets the text-underline-offset property.

textUnderlineOffset (pct 5)

textEmphasis : BaseValue (ColorSupported { none : Value.Supported, filled : Value.Supported, open : Value.Supported, dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported, string : Value.Supported }) -> Style

Sets the text-emphasis property.

This is for drawing attention towards textual elements in a way that is commonly used in East Asian languages.

String values should only be one character in length.

textEmphasis (hex "ff0000")

textEmphasis sesame

textEmphasis2 triangle (hex "00ff00")

textEmphasis3 filled dot (hex "ff0000")

textEmphasis2 : Value { none : Value.Supported, filled : Value.Supported, open : Value.Supported, dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported, string : Value.Supported } -> Value Color -> Style

Sets the text-emphasis property.

This 2-argument form sets textEmphasisStyle and textEmphasisColor in a single declaration.

String values should only be one character in length.

textEmphasis (hex "ff0000")

textEmphasis sesame

textEmphasis2 triangle (hex "00ff00")

textEmphasis3 filled dot (hex "ff0000")

textEmphasis3 : BaseValue { filled : Value.Supported, open : Value.Supported } -> BaseValue { dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported } -> Value Color -> Style

Sets the text-emphasis property.

This 3-argument form sets textEmphasisStyle2 and a textEmphasisColor in a single declaration.

textEmphasis (hex "ff0000")

textEmphasis sesame

textEmphasis2 triangle (hex "00ff00")

textEmphasis3 filled dot (hex "ff0000")

textEmphasisStyle : BaseValue { none : Value.Supported, filled : Value.Supported, open : Value.Supported, dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported, string : Value.Supported } -> Style

Sets the text-emphasis-style property.

String values should only be one character in length.

textEmphasisStyle none

textEmphasisStyle open

textEmphasisStyle (string "🐯")

textEmphasisStyle2 : Value { filled : Value.Supported, open : Value.Supported } -> Value { dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported } -> Style

Sets the text-emphasis-style property when you want to use two arguments - one for filled or open, and one for the shape style.

textEmphasisStyle filled sesame

textEmphasisStyle open dot

textEmphasisColor : BaseValue (ColorSupported { transparent : Value.Supported }) -> Style

Sets the text-emphasis-color property.

textEmphasisColor currentcolor

textEmphasisColor (hex "0000ff")

textEmphasisColor transparent

textEmphasisPosition : BaseValue a -> Style

Sets the text-emphasis-position property.

This is the one argument version, which is limited to setting global values.

If you want to specify the positions of the text-emphasis, you must use the 2-argument form.

textEmphasisPosition inherit

textEmphasisPosition revert

textEmphasisPosition2 over left_

textEmphasisPosition2 under right_

textEmphasisPosition2 : BaseValue { over : Value.Supported, under : Value.Supported } -> BaseValue { left_ : Value.Supported, right_ : Value.Supported } -> Style

Sets the the text-emphasis-position property.

This is the 2-argument form that lets you specify the positions of the emphasis.

if you want to apply global values, you must use the 1-argument form.

textEmphasisPosition inherit

textEmphasisPosition revert

textEmphasisPosition2 over left_

textEmphasisPosition2 under right_

filled : Value { provides | filled : Value.Supported }

The filled value used in textEmphasis.

textEmphasis filled

open : Value { provides | open : Value.Supported }

The open value used in textEmphasis.

textEmphasis open

dot : Value { provides | dot : Value.Supported }

The dot value used in textEmphasis.

textEmphasis dot

doubleCircle : Value { provides | doubleCircle : Value.Supported }

The doubleCircle value used in textEmphasis.

textEmphasis doubleCircle

triangle : Value { provides | triangle : Value.Supported }

The triangle value used in textEmphasis.

textEmphasis triangle

sesame : Value { provides | sesame : Value.Supported }

The sesame value used in textEmphasis.

textEmphasis sesame

over : Value { provides | over : Value.Supported }

The over value used in textEmphasisPosition2.

textEmphasisPosition2 over left_

textTransform : BaseValue { capitalize : Value.Supported, uppercase : Value.Supported, lowercase : Value.Supported, fullWidth : Value.Supported, fullSizeKana : Value.Supported, none : Value.Supported } -> Style

Sets text-transform.

textTransform capitalize

textTransform uppercase

capitalize : Value { provides | capitalize : Value.Supported }

A capitalize value for the text-transform property.

textTransform capitalize

uppercase : Value { provides | uppercase : Value.Supported }

An uppercase value for the text-transform property.

textTransform uppercase

lowercase : Value { provides | lowercase : Value.Supported }

A lowercase value for the text-transform property.

textTransform lowercase

Text alignment and justification

textAlign : BaseValue { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, justify : Value.Supported, start : Value.Supported, end : Value.Supported, matchParent : Value.Supported } -> Style

Sets text-align

textAlign left_

textAlign justfy

justify : Value { provides | justify : Value.Supported }

A justify value for the text-align

textAlign justify

textJustify : BaseValue { interWord : Value.Supported, interCharacter : Value.Supported, auto : Value.Supported, none : Value.Supported } -> Style

Sets text-justify

textJustify interWord

textJustify interCharacter

textJustify auto

textJustify none

interWord : Value { provides | interWord : Value.Supported }

A inter-word value for the textJustify property.

textJustify interWord

Script handling

direction : BaseValue { rtl : Value.Supported, ltr : Value.Supported } -> Style

Sets direction

direction ltr

direction rtl

ltr : Value { provides | ltr : Value.Supported }

A ltr value for the direction property.

direction ltr

rtl : Value { provides | rtl : Value.Supported }

A rtl value for the direction property.

direction rtl

writingMode : BaseValue { horizontalTb : Value.Supported, verticalRl : Value.Supported, verticalLr : Value.Supported } -> Style

Sets writing-mode.

writingMode horizontalTb

writingMode verticalRl

writingMode verticalLr

verticalLr : Value { provides | verticalLr : Value.Supported }

Sets vertical-lr value for usage with writingMode.

writingMode verticalLr

verticalRl : Value { provides | verticalRl : Value.Supported }

Sets vertical-rl value for usage with writingMode.

writingMode verticalRl

horizontalTb : Value { provides | horizontalTb : Value.Supported }

Sets horizontal-tb value for usage with writingMode.

writingMode horizontalTb

unicodeBidi : BaseValue { normal : Value.Supported, embed : Value.Supported, isolate : Value.Supported, bidiOverride : Value.Supported, isolateOverride : Value.Supported, plaintext : Value.Supported } -> Style

Sets unicode-bidi

unicodeBidi normal

unicodeBidi embed

unicodeBidi isolate

unicodeBidi bidiOverride

unicodeBidi isolateOverride

unicodeBidi plaintext

embed : Value { provides | embed : Value.Supported }

Sets embed value for usage with unicodeBidi.

unicodeBidi embed

plaintext : Value { provides | plaintext : Value.Supported }

Sets plaintext value for usage with unicodeBidi.

unicodeBidi plaintext

bidiOverride : Value { provides | bidiOverride : Value.Supported }

Sets bidi-override value for usage with unicodeBidi.

unicodeBidi bidiOverride

isolateOverride : Value { provides | isolateOverride : Value.Supported }

Sets isolate-override value for usage with unicodeBidi.

unicodeBidi isolateOverride

textOrientation : BaseValue { mixed : Value.Supported, sideways : Value.Supported, sidewaysRight : Value.Supported, upright : Value.Supported, useGlyphOrientation : Value.Supported } -> Style

Sets text-orientation.

textOrientation sideways

textOrientation upright

mixed : Value { provides | mixed : Value.Supported }

A mixed value for the textOrientation property.

textOrientation mixed

sideways : Value { provides | sideways : Value.Supported }

A sideways value for the textOrientation property.

textOrientation sideways

sidewaysRight : Value { provides | sidewaysRight : Value.Supported }

A sideways-right value for the textOrientation property.

textOrientation sidewaysRight

upright : Value { provides | upright : Value.Supported }

A upright value for the textOrientation property.

textOrientation upright

useGlyphOrientation : Value { provides | useGlyphOrientation : Value.Supported }

A use-glyph-orientation value for the textOrientation property.

textOrientation useGlyphOrientation

quotes : BaseValue { none : Value.Supported, auto : Value.Supported } -> Style

Sets the quotes property.

This one-argument version can only use keyword or global values.

quotes none

quotes inherit

quotes2 (string "\"") (string "\"")

quotes4 (string "\"") (string "\"") (string "'") (string "'")

quotes2 : Value { string : Value.Supported } -> Value { string : Value.Supported } -> Style

Sets the quotes property.

This 2-argument version sets the starting and closing quotation marks for a top-level quote (a quote that is not nested within another quote). It only accepts string values.

quotes auto

quotes2 (string "\"") (string "\"") -- "Hey, this is a first-level quote."

quotes2 (string "'") (string "'") -- 'Hey, this is a first-level quote.'

quotes2 (string "«") (string "»") -- «Hey, this is a first-level quote.»

Text rendering

textRendering : BaseValue { auto : Value.Supported, geometricPrecision : Value.Supported, optimizeLegibility : Value.Supported, optimizeSpeed : Value.Supported } -> Style

Sets text-rendering.

textRendering geometricPrecision

textRendering optimizeSpeed

geometricPrecision : Value { provides | geometricPrecision : Value.Supported }

A geometricPrecision value for the text-rendering property.

textRendering geometricPrecision

optimizeLegibility : Value { provides | optimizeLegibility : Value.Supported }

An optimizeLegibility value for the text-rendering property.

textRendering optimizeLegibility

Text selection

userSelect : BaseValue { none : Value.Supported, auto : Value.Supported, text : Value.Supported, contain_ : Value.Supported, all_ : Value.Supported } -> Style

Sets user-select

userSelect none

userSelect auto

userSelect text

userSelect contain_

userSelect all_

Accessibility

speak : BaseValue { none : Value.Supported, normal : Value.Supported, spellOut : Value.Supported } -> Style

Sets speak

speak none

speak normal

speak spellOut

List styles


type alias ListStyleType =
ListStyleTypeSupported {}

A type alias used to accept a list-style-type


type alias ListStyleTypeSupported supported =
{ supported | customIdent : Value.Supported
, string : Value.Supported
, none : Value.Supported
, arabicIndic : Value.Supported
, armenian : Value.Supported
, bengali : Value.Supported
, cambodian : Value.Supported
, circle_ : Value.Supported
, cjkDecimal : Value.Supported
, cjkEarthlyBranch : Value.Supported
, cjkHeavenlyStem : Value.Supported
, cjkIdeographic : Value.Supported
, decimal : Value.Supported
, decimalLeadingZero : Value.Supported
, devanagari : Value.Supported
, disc : Value.Supported
, disclosureClosed : Value.Supported
, disclosureOpen : Value.Supported
, ethiopicNumeric : Value.Supported
, georgian : Value.Supported
, gujarati : Value.Supported
, gurmukhi : Value.Supported
, hebrew : Value.Supported
, hiragana : Value.Supported
, hiraganaIroha : Value.Supported
, japaneseFormal : Value.Supported
, japaneseInformal : Value.Supported
, kannada : Value.Supported
, katakana : Value.Supported
, katakanaIroha : Value.Supported
, khmer : Value.Supported
, koreanHangulFormal : Value.Supported
, koreanHanjaFormal : Value.Supported
, koreanHanjaInformal : Value.Supported
, lao : Value.Supported
, lowerAlpha : Value.Supported
, lowerArmenian : Value.Supported
, lowerGreek : Value.Supported
, lowerLatin : Value.Supported
, lowerRoman : Value.Supported
, malayalam : Value.Supported
, monogolian : Value.Supported
, myanmar : Value.Supported
, oriya : Value.Supported
, persian : Value.Supported
, simpChineseFormal : Value.Supported
, simpChineseInformal : Value.Supported
, square : Value.Supported
, tamil : Value.Supported
, telugu : Value.Supported
, thai : Value.Supported
, tibetan : Value.Supported
, tradChineseFormal : Value.Supported
, tradChineseInformal : Value.Supported
, upperAlpha : Value.Supported
, upperArmenian : Value.Supported
, upperLatin : Value.Supported
, upperRoman : Value.Supported 
}

A type alias used to accept a list-style-type among other values.

Note: The symbols() function is not supported. Use property instead.

listStyle : BaseValue (ListStyleTypeSupported (ImageSupported { inside : Value.Supported, outside : Value.Supported })) -> Style

The list-style shorthand property.

listStyle lowerAlpha

listStyle outside

listStyle (url "https://example.com")

listStyle2 : Value ListStyleType -> Value { inside : Value.Supported, outside : Value.Supported } -> Style

The list-style shorthand property.

listStlye2 lowerAlpha inside

For other combinations of two values please use the dedicated functions: listStyleType, listStlyePosition, and listStyleImage

listStyle3 : Value ListStyleType -> Value { inside : Value.Supported, outside : Value.Supported } -> Value (ImageSupported { none : Value.Supported }) -> Style

The list-style shorthand property.

listStyle3 arabic outside (url "https://example.com")

listStylePosition : BaseValue { inside : Value.Supported, outside : Value.Supported } -> Style

The list-style-position property

listStylePosition inside

listStylePosition outside

inside : Value { provides | inside : Value.Supported }

The inside value used for properties such as list-style-position, and listStyle.

listStylePosition inside

outside : Value { provides | outside : Value.Supported }

The inside value used for properties such as list-style-position, and listStyle.

listStylePosition outside

listStyleType : BaseValue ListStyleType -> Style

The list-style-type property.

listStyleType decimalLeadingZero

listStyleImage : BaseValue (ImageSupported { none : Value.Supported }) -> Style

The list-style-image property.

listStyleImage (url "https://example.com")

arabicIndic : Value { provides | arabicIndic : Value.Supported }

The arabic-indic value used by properties such as listStyle, and listStyleType

listStyleType arabicIndic

armenian : Value { provides | armenian : Value.Supported }

The armenian value used by properties such as listStyle, and listStyleType

listStyleType armenian

bengali : Value { provides | bengali : Value.Supported }

The bengali value used by properties such as listStyle, and listStyleType

listStyleType bengali

cambodian : Value { provides | cambodian : Value.Supported }

The cambodian value used by properties such as listStyle, and listStyleType

listStyleType cambodian

cjkDecimal : Value { provides | cjkDecimal : Value.Supported }

The cjk-decimal value used by properties such as listStyle, and listStyleType

listStyleType cjkDecimal

cjkEarthlyBranch : Value { provides | cjkEarthlyBranch : Value.Supported }

The cjk-earthly-branch value used by properties such as listStyle, and listStyleType

listStyleType cjkEarthlyBranch

cjkHeavenlyStem : Value { provides | cjkHeavenlyStem : Value.Supported }

The cjk-heavenly-stem value used by properties such as listStyle, and listStyleType

listStyleType cjkHeavenlyStem

cjkIdeographic : Value { provides | cjkIdeographic : Value.Supported }

The cjk-ideographic value used by properties such as listStyle, and listStyleType

listStyleType cjkIdeographic

decimal : Value { provides | decimal : Value.Supported }

The decimal value used by properties such as listStyle, and listStyleType

listStyleType decimal

decimalLeadingZero : Value { provides | decimalLeadingZero : Value.Supported }

The decimal-leading-zero value used by properties such as listStyle, and listStyleType

listStyleType decimalLeadingZero

devanagari : Value { provides | devanagari : Value.Supported }

The devanagari value used by properties such as listStyle, and listStyleType

listStyleType devanagari

disclosureClosed : Value { provides | disclosureClosed : Value.Supported }

The disclosure-closed value used by properties such as listStyle, and listStyleType

listStyleType disclosureClosed

disclosureOpen : Value { provides | disclosureOpen : Value.Supported }

The disclosure-open value used by properties such as listStyle, and listStyleType

listStyleType disclosureOpen

disc : Value { provides | disc : Value.Supported }

The disc value used by properties such as listStyle, and listStyleType

listStyleType disc

ethiopicNumeric : Value { provides | ethiopicNumeric : Value.Supported }

The ethiopic-numeric value used by properties such as listStyle, and listStyleType

listStyleType ethiopicNumeric

georgian : Value { provides | georgian : Value.Supported }

The georgian value used by properties such as listStyle, and listStyleType

listStyleType georgian

gujarati : Value { provides | gujarati : Value.Supported }

The gujarati value used by properties such as listStyle, and listStyleType

listStyleType gujarati

gurmukhi : Value { provides | gurmukhi : Value.Supported }

The gurmukhi value used by properties such as listStyle, and listStyleType

listStyleType gurmukhi

hebrew : Value { provides | hebrew : Value.Supported }

The hebrew value used by properties such as listStyle, and listStyleType

listStyleType hebrew

hiragana : Value { provides | hiragana : Value.Supported }

The hiragana value used by properties such as listStyle, and listStyleType

listStyleType hiragana

hiraganaIroha : Value { provides | hiraganaIroha : Value.Supported }

The hiragana-iroha value used by properties such as listStyle, and listStyleType

listStyleType hiraganaIroha

japaneseFormal : Value { provides | japaneseFormal : Value.Supported }

The japanese-formal value used by properties such as listStyle, and listStyleType

listStyleType japaneseFormal

japaneseInformal : Value { provides | japaneseInformal : Value.Supported }

The japanese-informal value used by properties such as listStyle, and listStyleType

listStyleType japaneseInformal

kannada : Value { provides | kannada : Value.Supported }

The kannada value used by properties such as listStyle, and listStyleType

listStyleType kannada

katakana : Value { provides | katakana : Value.Supported }

The katakana value used by properties such as listStyle, and listStyleType

listStyleType katakana

katakanaIroha : Value { provides | katakanaIroha : Value.Supported }

The katakana-iroha value used by properties such as listStyle, and listStyleType

listStyleType katakanaIroha

khmer : Value { provides | khmer : Value.Supported }

The khmer value used by properties such as listStyle, and listStyleType

listStyleType khmer

koreanHangulFormal : Value { provides | koreanHangulFormal : Value.Supported }

The korean-hangul-formal value used by properties such as listStyle, and listStyleType

listStyleType koreanHangulFormal

koreanHanjaFormal : Value { provides | koreanHanjaFormal : Value.Supported }

The korean-hanja-formal value used by properties such as listStyle, and listStyleType

listStyleType koreanHanjaFormal

koreanHanjaInformal : Value { provides | koreanHanjaInformal : Value.Supported }

The korean-hanja-informal value used by properties such as listStyle, and listStyleType

listStyleType koreanHanjaInformal

lao : Value { provides | lao : Value.Supported }

The lao value used by properties such as listStyle, and listStyleType

listStyleType lao

lowerAlpha : Value { provides | lowerAlpha : Value.Supported }

The lower-alpha value used by properties such as listStyle, and listStyleType

listStyleType lowerAlpha

lowerArmenian : Value { provides | lowerArmenian : Value.Supported }

The lower-armenian value used by properties such as listStyle, and listStyleType

listStyleType lowerArmenian

lowerGreek : Value { provides | lowerGreek : Value.Supported }

The lower-greek value used by properties such as listStyle, and listStyleType

listStyleType lowerGreek

lowerLatin : Value { provides | lowerLatin : Value.Supported }

The lower-latin value used by properties such as listStyle, and listStyleType

listStyleType lowerLatin

lowerRoman : Value { provides | lowerRoman : Value.Supported }

The lower-roman value used by properties such as listStyle, and listStyleType

listStyleType lowerRoman

malayalam : Value { provides | malayalam : Value.Supported }

The malayalam value used by properties such as listStyle, and listStyleType

listStyleType malayalam

monogolian : Value { provides | monogolian : Value.Supported }

The monogolian value used by properties such as listStyle, and listStyleType

listStyleType monogolian

myanmar : Value { provides | myanmar : Value.Supported }

The myanmar value used by properties such as listStyle, and listStyleType

listStyleType myanmar

oriya : Value { provides | oriya : Value.Supported }

The oriya value used by properties such as listStyle, and listStyleType

listStyleType oriya

persian : Value { provides | persian : Value.Supported }

The persian value used by properties such as listStyle, and listStyleType

listStyleType persian

simpChineseFormal : Value { provides | simpChineseFormal : Value.Supported }

The simp-chinese-formal value used by properties such as listStyle, and listStyleType

listStyleType simpChineseFormal

simpChineseInformal : Value { provides | simpChineseInformal : Value.Supported }

The simp-chinese-informal value used by properties such as listStyle, and listStyleType

listStyleType simpChineseInformal

tamil : Value { provides | tamil : Value.Supported }

The tamil value used by properties such as listStyle, and listStyleType

listStyleType tamil

telugu : Value { provides | telugu : Value.Supported }

The telugu value used by properties such as listStyle, and listStyleType

listStyleType telugu

thai : Value { provides | thai : Value.Supported }

The thai value used by properties such as listStyle, and listStyleType

listStyleType thai

tibetan : Value { provides | tibetan : Value.Supported }

The tibetan value used by properties such as listStyle, and listStyleType

listStyleType tibetan

tradChineseFormal : Value { provides | tradChineseFormal : Value.Supported }

The trad-chinese-formal value used by properties such as listStyle, and listStyleType

listStyleType tradChineseFormal

tradChineseInformal : Value { provides | tradChineseInformal : Value.Supported }

The trad-chinese-informal value used by properties such as listStyle, and listStyleType

listStyleType tradChineseInformal

upperAlpha : Value { provides | upperAlpha : Value.Supported }

The upper-alpha value used by properties such as listStyle, and listStyleType

listStyleType upperAlpha

upperArmenian : Value { provides | upperArmenian : Value.Supported }

The upper-armenian value used by properties such as listStyle, and listStyleType

listStyleType upperArmenian

upperLatin : Value { provides | upperLatin : Value.Supported }

The upper-latin value used by properties such as listStyle, and listStyleType

listStyleType upperLatin

Columns

columns : BaseValue (LengthSupported { auto : Value.Supported, num : Value.Supported }) -> Style

Sets columns

columns (px 300)

columns (num 2)

columns2 (px 300) (num 2)

columns2 : Value (LengthSupported { auto : Value.Supported }) -> Value { auto : Value.Supported, num : Value.Supported } -> Style

Sets columns

columns (px 300)

columns (num 2)

columns2 (px 300) (num 2)

columnWidth : BaseValue (LengthSupported { auto : Value.Supported }) -> Style

Sets column-width

columnWidth auto

columnWidth (px 200)

columnCount : BaseValue { auto : Value.Supported, int : Value.Supported } -> Style

Sets column-count

columnCount auto

columnCount (num 3)

columnFill : BaseValue { auto : Value.Supported, balance : Value.Supported, balanceAll : Value.Supported } -> Style

Sets column-fill

columnFill auto

columnFill balance

columnFill balanceAll

balance : Value { provides | balance : Value.Supported }

A balance value used in properties such as columnFill

columnFill balance

balanceAll : Value { provides | balanceAll : Value.Supported }

A balance-all value used in properties such as columnFill

columnFill balanceAll

columnSpan : BaseValue { none : Value.Supported, all_ : Value.Supported } -> Style

Sets column-span

columnSpan all_

columnSpan none

columnRule : BaseValue LineWidth -> Style

Sets column-rule. This is a shorthand for the columnRuleWidth, columnRuleStyle, and columnRuleColor properties.

columnRule thin

columnRule2 thin solid

columnRule3 thin solid (hex "#000000")

columnRule2 : Value LineWidth -> Value LineStyle -> Style

Sets column-rule. This is a shorthand for the columnRuleWidth, columnRuleStyle, and columnRuleColor properties.

columnRule thin

columnRule2 thin solid

columnRule3 thin solid (hex "#000000")

columnRule3 : Value LineWidth -> Value LineStyle -> Value Color -> Style

Sets column-rule. This is a shorthand for the columnRuleWidth, columnRuleStyle, and columnRuleColor properties.

columnRule thin

columnRule2 thin solid

columnRule3 thin solid (hex "#000000")

columnRuleWidth : BaseValue LineWidth -> Style

Sets column-rule-width

columnRuleWidth thin

columnRuleWidth (px 2)

columnRuleStyle : BaseValue LineStyle -> Style

Sets column-rule-style

columnRuleStyle solid

columnRuleStyle dotted

columnRuleStyle dashed

columnRuleColor : BaseValue Color -> Style

Sets column-rule-color

columnRuleColor (rgb 0 0 0)

columnRuleColor (hex "#fff")

Tables

borderCollapse : BaseValue { collapse : Value.Supported, separate : Value.Supported } -> Style

Sets border-collapse.

borderCollapse collapse

borderCollapse separate

collapse : Value { provides | collapse : Value.Supported }

A collapse value for the border-collapse and visibility property.

borderCollapse collapse

visibility collapse

separate : Value { provides | separate : Value.Supported }

A separate value for the border-separate property.

borderCollapse separate

borderSpacing : BaseValue Length -> Style

Sets border-spacing.

borderSpacing zero

borderSpacing (px 5)

borderSpacing2 : Value Length -> Value Length -> Style

Sets border-spacing, defining horizontal and vertical spacing separately.

borderSpacing2 (cm 1) (em 2)

captionSide : BaseValue { top_ : Value.Supported, bottom_ : Value.Supported, blockStart : Value.Supported, blockEnd : Value.Supported, inlineStart : Value.Supported, inlineEnd : Value.Supported } -> Style

Sets caption-side.

captionSide top_

captionSide bottom_

captionSide blockStart

captionSide inlineEnd

emptyCells : BaseValue { show : Value.Supported, hide : Value.Supported } -> Style

Sets empty-cells.

emptyCells show

emptyCells hide

show : Value { provides | show : Value.Supported }

A show value for the empty-cells property.

emptyCells show

hide : Value { provides | hide : Value.Supported }

A hide value for the empty-cells property.

emptyCells hide

tableLayout : BaseValue { auto : Value.Supported, fixed : Value.Supported } -> Style

Sets table-layout.

tableLayout auto

tableLayout fixed

Content fragmentation

breakBefore : BaseValue { auto : Value.Supported, avoid : Value.Supported, avoidPage : Value.Supported, page : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, avoidColumn : Value.Supported, column : Value.Supported } -> Style

Sets break-before.

breakBefore auto

breakAfter : BaseValue { auto : Value.Supported, avoid : Value.Supported, avoidPage : Value.Supported, page : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, avoidColumn : Value.Supported, column : Value.Supported } -> Style

Sets break-after.

breakAfter auto

breakInside : BaseValue { auto : Value.Supported, avoid : Value.Supported, avoidPage : Value.Supported, avoidColumn : Value.Supported } -> Style

Sets break-inside

breakInside auto

breakInside avoid

breakInside avoidPage

breakInside avoidColumn

avoid : Value { provides | avoid : Value.Supported }

Sets avoid value for usage with breakAfter, breakBefore and breakInside.

breakBefore avoid

breakAfter avoid

breakInside avoid

avoidPage : Value { provides | avoidPage : Value.Supported }

Sets avoid-page value for usage with breakAfter, breakBefore and breakInside.

breakBefore avoidPage

breakAfter avoidPage

breakInside avoidPage

avoidColumn : Value { provides | avoidColumn : Value.Supported }

Sets avoid-column value for usage with breakAfter, breakBefore and breakInside.

breakBefore avoidColumn

breakAfter avoidColumn

breakInside avoidColumn

page : Value { provides | page : Value.Supported }

Sets page value for usage with breakAfter and breakBefore.

breakBefore page

breakAfter page

pageBreakBefore : BaseValue { auto : Value.Supported, always : Value.Supported, avoid : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

Sets page-break-before

This property has been deprecated and replaced with breakBefore, but is still included for backwards compatibility.

pageBreakBefore auto

pageBreakBefore always

pageBreakBefore avoid

pageBreakBefore left_

pageBreakBefore right_

pageBreakAfter : BaseValue { auto : Value.Supported, always : Value.Supported, avoid : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style

Sets page-break-after

This property has been deprecated and replaced with breakAfter, but is still included for backwards compatibility.

pageBreakAfter auto

pageBreakAfter always

pageBreakAfter avoid

pageBreakAfter left_

pageBreakAfter right_

pageBreakInside : BaseValue { auto : Value.Supported, avoid : Value.Supported } -> Style

Sets page-break-inside

pageBreakInside auto

pageBreakInside avoid

orphans : BaseValue { int : Value.Supported } -> Style

Sets orphans Note: This function accepts only positive integers.

orphans (int 2)

widows : BaseValue { int : Value.Supported } -> Style

Sets widows Note: This function accepts only positive integers.

widows (int 2)

boxDecorationBreak : BaseValue { slice : Value.Supported, clone : Value.Supported } -> Style

Sets box-decoration-break

boxDecorationBreak slice

boxDecorationBreak clone

Arranging inline/block stuff

float : BaseValue { none : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, inlineStart : Value.Supported, inlineEnd : Value.Supported } -> Style

Sets float.

float none

float left_

float right_

float inlineStart

clear : BaseValue { none : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, both : Value.Supported, inlineStart : Value.Supported, inlineEnd : Value.Supported } -> Style

Sets clear property.

clear none

clear both

clear left_

clear right_

clear inlineStart

clear inlineEnd

verticalAlign : BaseValue (LengthSupported { baseline : Value.Supported, sub : Value.Supported, super : Value.Supported, textTop : Value.Supported, textBottom : Value.Supported, middle : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, pct : Value.Supported }) -> Style

Sets vertical-align.

verticalAlign textBottom

verticalAlign (em 1)

textTop : Value { provides | textTop : Value.Supported }

A textTop value for the vertical-align property.

verticalAlign textTop

textBottom : Value { provides | textBottom : Value.Supported }

A textBottom value for the vertical-align property.

verticalAlign textBottom

Replaced elements

objectFit : BaseValue { fill_ : Value.Supported, contain_ : Value.Supported, cover : Value.Supported, none : Value.Supported, scaleDown : Value.Supported } -> Style

Sets object-fit

objectFit fill_

objectFit contain_

objectFit cover

objectFit scaleDown

objectFit none

scaleDown : Value { provides | scaleDown : Value.Supported }

Sets scale-down value for usage with objectFit.

objectFit scaleDown

objectPosition : BaseValue (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style

Sets object-position.

objectPosition left_

objectPosition (px 45)

objectPosition sets the horizontal direction. If you need the vertical direction instead, use objectPosition2 like this:

objectPosition zero (px 45)

If you need to set the offsets from the right or bottom, use objectPosition4 like this:

objectPosition4 right_ (px 20) bottom_ (pct 25)

objectPosition2 : Value (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Style

Sets object-position.

objectPosition2 left_ top_

objectPosition2 (px 45) (pct 50)

objectPosition2 sets both the horizontal and vertical directions (in that order, same as CSS.) If you need only the horizontal, you can use objectPosition instead:

objectPosition left_

If you need to set the offsets from the right or bottom, use objectPosition4 like this:

objectPosition4 right_ (px 20) bottom_ (pct 25)

Pointer and touch

Pointer events

pointerEvents : BaseValue { auto : Value.Supported, none : Value.Supported, visiblePainted : Value.Supported, visibleFill : Value.Supported, visibleStroke : Value.Supported, visible : Value.Supported, painted : Value.Supported, fill_ : Value.Supported, stroke : Value.Supported, all_ : Value.Supported } -> Style

Sets pointer-events

pointerEvents none

pointerEvents auto

visiblePainted : Value { provides | visiblePainted : Value.Supported }

The visiblePainted value used by pointerEvents.

pointerEvents visiblePainted

visibleFill : Value { provides | visibleFill : Value.Supported }

The visibleFill value used by pointerEvents.

pointerEvents visibleFill

visibleStroke : Value { provides | visibleStroke : Value.Supported }

The visibleStroke value used by pointerEvents.

pointerEvents visibleStroke

painted : Value { provides | painted : Value.Supported }

The painted value used by pointerEvents.

pointerEvents painted

Touch action

touchAction : BaseValue { auto : Value.Supported, none : Value.Supported, panX : Value.Supported, panY : Value.Supported, pinchZoom : Value.Supported, manipulation : Value.Supported } -> Style

The touch-action property.

touchAction auto

touchAction panY

touchAction pinchZoom

panX : Value { provides | panX : Value.Supported }

The pan-x value used by touch-action.

touchAction panX

panY : Value { provides | panY : Value.Supported }

The pan-y value used by touch-action.

touchAction panY

pinchZoom : Value { provides | pinchZoom : Value.Supported }

The pinch-zoom value used by touch-action.

touchAction pinchZoom

Scrollbar customisation

scrollbarColor : BaseValue (ColorSupported { auto : Value.Supported }) -> Style

Sets the scrollbar-color property.

scrollbarColor auto

scrollbarColor (hex "f35d93")

scrollbarWidth : BaseValue { auto : Value.Supported, thin : Value.Supported, none : Value.Supported } -> Style

Sets the scrollbar-width property.

scrollbarWidth auto

scrollbarWidth thin

scrollbarGutter : BaseValue { auto : Value.Supported, stable : Value.Supported } -> Style

The scrollbar-gutter property.

This 1-argument variant can accept global values and some keywords.

scrollbarGutter auto

scrollbarGutter inherit

scrollbarGutter2 stable bothEdges

scrollbarGutter2 : Value { stable : Value.Supported } -> Value { bothEdges : Value.Supported } -> Style

The scrollbar-gutter property.

This 2-argument variant can only accept the keywords stable and bothEdges.

scrollbarGutter auto

scrollbarGutter inherit

scrollbarGutter2 stable bothEdges

stable : Value { provides | stable : Value.Supported }

The stable value used by scrollbarGutter.

scrollbarGutter stable

Scrolling behavior

scrollBehavior : BaseValue { auto : Value.Supported, smooth : Value.Supported } -> Style

Sets scroll-behavior

scrollBehavior auto

scrollBehavior smooth

smooth : Value { provides | smooth : Value.Supported }

Sets smooth value for usage with scrollBehavior.

scrollBehavior smooth

overscrollBehavior : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style

Sets the overscroll-behavior property.

This property is a shorthand for setting both overscroll-behavior-x and overscroll-behavior-y.

overscrollBehavior auto -- sets both X and Y to auto

overscrollBehavior2 auto contain -- X = auto, Y = contain.

overscrollBehavior2 : Value { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Value { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style

Sets the overscroll-behavior property.

This property is a shorthand for setting both overscroll-behavior-x and overscroll-behavior-y.

overscrollBehavior2 auto contain_ -- X = auto, Y = contain.

overscrollBehaviorX : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style

Sets the overscroll-behavior-x property.

overscrollBehaviorX auto

overscrollBehaviorX contain_

overscrollBehaviorY : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style

Sets the overscroll-behavior-y property.

overscrollBehaviorY auto

overscrollBehaviorY contain_

overscrollBehaviorBlock : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style

Sets the overscroll-behavior-block property.

overscrollBehaviorBlock auto

overscrollBehaviorBlock contain_

Scroll snapping

scrollSnapType : BaseValue { none : Value.Supported, x : Value.Supported, y : Value.Supported, block : Value.Supported, inline : Value.Supported, both : Value.Supported } -> Style

Sets scroll-snap-type

scrollSnapType none

scrollSnapType2 : Value { x : Value.Supported, y : Value.Supported, block : Value.Supported, inline : Value.Supported, both : Value.Supported } -> Value { mandatory : Value.Supported, proximity : Value.Supported } -> Style

Sets scroll-snap-type

scrollSnapType2 x mandatory

scrollSnapType2 both proximity

scrollSnapAlign : BaseValue { none : Value.Supported, start : Value.Supported, center : Value.Supported, end : Value.Supported } -> Style

Sets scroll-snap-align

scrollSnapAlign none

scrollSnapAlign start

scrollSnapAlign center

scrollSnapAlign end

scrollSnapStop : BaseValue { normal : Value.Supported, always : Value.Supported } -> Style

Sets scroll-snap-stop

scrollSnapStop normal

scrollSnapStop always

mandatory : Value { provides | mandatory : Value.Supported }

Sets mandatory value for usage with scrollSnapType2.

scrollSnapType2 x mandatory

proximity : Value { provides | proximity : Value.Supported }

Sets proximity value for usage with scrollSnapType2.

scrollSnapType2 x proximity

Margin

scrollMargin : BaseValue Length -> Style

Sets scroll-margin property. The scrollMargin property is a shorthand property for setting scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left in a single declaration.

If there is only one argument value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

scrollMargin (em 4) -- set all margins to 4em

scrollMargin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

scrollMargin3 (em 4) (px 2) (pt 5) -- top = 4em, right = 2px, bottom = 5pt, left = 2px

scrollMargin4 (em 4) (px 2) (pt 5) (px 3) -- top = 4em, right = 2px, bottom = 5pt, left = 3px

scrollMargin2 : Value Length -> Value Length -> Style

Sets scroll-margin property. The scrollMargin2 property is a shorthand property for setting scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left in a single declaration.

The top and bottom margins are set to the first value and the right and left margins are set to the second.

scrollMargin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

scrollMargin3 : Value Length -> Value Length -> Value Length -> Style

Sets scroll-margin property. The scrollMargin3 property is a shorthand property for setting scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left in a single declaration.

The top margin is set to the first value, the left and right are set to the second, and the bottom is set to the third.

scrollMargin3 (em 4) (px 2) (pt 5) -- top = 4em, right = 2px, bottom = 5pt, left = 2px

scrollMargin4 : Value Length -> Value Length -> Value Length -> Value Length -> Style

Sets scroll-margin property. The scrollMargin4 property is a shorthand property for setting scroll-margin-top, scroll-margin-right, scroll-margin-bottom, and scroll-margin-left in a single declaration.

The four values apply to the top, right, bottom, and left margins.

scrollMargin4 (em 4) (px 2) (pt 5) (px 3) -- top = 4em, right = 2px, bottom = 5pt, left = 3px

scrollMarginTop : BaseValue Length -> Style

Sets scroll-margin-top property.

scrollMarginTop (px 4)

scrollMarginLeft : BaseValue Length -> Style

Sets scroll-margin-left property.

scrollMarginLeft (px 4)

scrollMarginRight : BaseValue Length -> Style

Sets scroll-margin-right property.

scrollMarginRight (px 4)

scrollMarginBottom : BaseValue Length -> Style

Sets scroll-margin-bottom property.

scrollMarginBottom (px 4)

scrollMarginBlock : BaseValue Length -> Style

Sets scroll-margin-block property. The scrollMarginBlock property is a shorthand property for setting scroll-margin-block-start and scroll-margin-block-end in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the block start margin is set to the first value and the block end margin is set to the second.

scrollMarginBlock (em 4) -- set both block margins to 4em

scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

scrollMarginBlock2 : Value Length -> Value Length -> Style

Sets scroll-margin-block property. The scrollMarginBlock2 property is a shorthand property for setting scroll-margin-block-start and scroll-margin-block-end in a single declaration.

The block start margin is set to the first value and the block end margin is set to the second.

scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

scrollMarginInline : BaseValue Length -> Style

Sets scroll-margin-inline property. The scrollMarginInline property is a shorthand property for setting scroll-margin-inline-start and scroll-margin-inline-end in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the inline start margin is set to the first value and the inline end margin is set to the second.

scrollMarginInline (em 4) -- set both inline margins to 4em

scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

scrollMarginInline2 : Value Length -> Value Length -> Style

Sets scroll-margin-inline property. The scrollMarginInline2 property is a shorthand property for setting scroll-margin-inline-start and scroll-margin-inline-end in a single declaration.

The inline start margin is set to the first value and the inline end margin is set to the second.

scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

scrollMarginBlockStart : BaseValue Length -> Style

Sets scroll-margin-block-start property.

scrollMarginBlockStart (px 4)

scrollMarginBlockEnd : BaseValue Length -> Style

Sets scroll-margin-block-end property.

scrollMarginBlockEnd (px 4)

scrollMarginInlineStart : BaseValue Length -> Style

Sets scroll-margin-inline-start property.

scrollMarginInlineStart (px 4)

scrollMarginInlineEnd : BaseValue Length -> Style

Sets scroll-margin-inline-end property.

scrollMarginInlineEnd (px 4)

Padding

scrollPadding : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding property. The scrollPadding property is a shorthand property for setting scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left in a single declaration.

If there is only one argument value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.

scrollPadding (em 4) -- set all paddings to 4em

scrollPadding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

scrollPadding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px

scrollPadding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

scrollPadding2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding property. The scrollPadding2 property is a shorthand property for setting scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left in a single declaration.

The top and bottom margins are set to the first value and the right and left margins are set to the second.

scrollPadding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px

scrollPadding3 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding property. The scrollPadding3 property is a shorthand property for setting scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left in a single declaration.

The top padding is set to the first value, the left and right are set to the second, and the bottom is set to the third.

scrollPadding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px

scrollPadding4 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding property. The scrollPadding4 property is a shorthand property for setting scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left in a single declaration.

The four values apply to the top, right, bottom, and left paddings.

scrollPadding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px

scrollPaddingTop : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-top property.

scrollPaddingTop (px 4)

scrollPaddingLeft : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-left property.

scrollPaddingLeft (px 4)

scrollPaddingRight : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-right property.

scrollPaddingRight (px 4)

scrollPaddingBottom : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-bottom property.

scrollPaddingBottom (px 4)

scrollPaddingBlock : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-block property. The scroll-padding-block property is a shorthand property for setting scroll-padding-block-start and scroll-padding-block-end in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the block start padding is set to the first value and the block end padding is set to the second.

scrollPaddingBlock (em 4) -- set both block paddings to 4em

scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

scrollPaddingBlock2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-block property. The scroll-padding-block property is a shorthand property for setting scroll-padding-block-start and scroll-padding-block-end in a single declaration.

The block start padding is set to the first value and the block end padding is set to the second.

scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px

scrollPaddingInline : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-inline property. The scroll-padding-inline property is a shorthand property for setting scroll-padding-inline-start and scroll-padding-inline-end in a single declaration.

If there is only one argument value, it applies to both sides. If there are two values, the inline start padding is set to the first value and the inline end padding is set to the second.

scrollPaddingInline (em 4) -- set both inline paddings to 4em

scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

scrollPaddingInline2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-inline property. The scroll-padding-inline property is a shorthand property for setting scroll-padding-inline-start and scroll-padding-inline-end in a single declaration.

The inline start padding is set to the first value and the inline end padding is set to the second.

scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px

scrollPaddingBlockStart : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-block-start property.

scrollPaddingBlockStart (px 4)

scrollPaddingBlockEnd : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-block-end property.

scrollPaddingBlockEnd (px 4)

scrollPaddingInlineStart : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style

Sets scroll-padding-inline-start property.

scrollPaddingInlineStart (px 4)

Cursors


type alias CursorKeyword =
{ pointer : Value.Supported
, auto : Value.Supported
, default_ : Value.Supported
, none : Value.Supported
, contextMenu : Value.Supported
, help : Value.Supported
, progress : Value.Supported
, wait : Value.Supported
, cell : Value.Supported
, crosshair : Value.Supported
, text : Value.Supported
, verticalText : Value.Supported
, alias : Value.Supported
, copy : Value.Supported
, move : Value.Supported
, noDrop : Value.Supported
, notAllowed : Value.Supported
, allScroll : Value.Supported
, colResize : Value.Supported
, rowResize : Value.Supported
, nResize : Value.Supported
, eResize : Value.Supported
, sResize : Value.Supported
, wResize : Value.Supported
, neResize : Value.Supported
, nwResize : Value.Supported
, seResize : Value.Supported
, swResize : Value.Supported
, ewResize : Value.Supported
, nsResize : Value.Supported
, neswResize : Value.Supported
, nwseResize : Value.Supported
, zoomIn : Value.Supported
, zoomOut : Value.Supported
, grab : Value.Supported
, grabbing : Value.Supported 
}

A type alias used for the various cursor properties

cursor : BaseValue CursorKeyword -> Style

The cursor property.

cursor notAllowed

cursor2 : Value { url : Value.Supported } -> Value CursorKeyword -> Style

The cursor property.

cursor2 (url "https://example.com") move

cursor4 : Value { url : Value.Supported } -> Value { num : Value.Supported, zero : Value.Supported, default_ : Value.Supported } -> Value { num : Value.Supported, zero : Value.Supported } -> Value CursorKeyword -> Style

The cursor property.

cursor4 (url "https://example.com") (num 34) zero move

Cursor values

text is also a supported value for cursor.

pointer : Value { provides | pointer : Value.Supported }

The pointer value for the cursor property.

default_ : Value { provides | default_ : Value.Supported }

The default value for the cursor property.

This value is called default_ instead of default because default is already a pseudo-class function.

contextMenu : Value { provides | contextMenu : Value.Supported }

The context-menu value for the cursor property.

help : Value { provides | help : Value.Supported }

The help value for the cursor property.

progress : Value { provides | progress : Value.Supported }

The progress value for the cursor property.

wait : Value { provides | wait : Value.Supported }

The wait value for the cursor property.

cell : Value { provides | cell : Value.Supported }

The cell value for the cursor property.

crosshair : Value { provides | crosshair : Value.Supported }

The crosshair value for the cursor property.

verticalText : Value { provides | verticalText : Value.Supported }

The vertical-text value for the cursor property.

alias : Value { provides | alias : Value.Supported }

The alias value for the cursor property.

copy : Value { provides | copy : Value.Supported }

The copy value for the cursor property.

move : Value { provides | move : Value.Supported }

The move value for the cursor property.

noDrop : Value { provides | noDrop : Value.Supported }

The no-drop value for the cursor property.

notAllowed : Value { provides | notAllowed : Value.Supported }

The notAllowed value for the cursor property.

allScroll : Value { provides | allScroll : Value.Supported }

The all-scroll value for the cursor property.

colResize : Value { provides | colResize : Value.Supported }

The col-resize value for the cursor property.

rowResize : Value { provides | rowResize : Value.Supported }

The row-resize value for the cursor property.

nResize : Value { provides | nResize : Value.Supported }

The n-resize value for the cursor property.

eResize : Value { provides | eResize : Value.Supported }

The e-resize value for the cursor property.

sResize : Value { provides | sResize : Value.Supported }

The s-resize value for the cursor property.

wResize : Value { provides | wResize : Value.Supported }

The w-resize value for the cursor property.

neResize : Value { provides | neResize : Value.Supported }

The ne-resize value for the cursor property.

nwResize : Value { provides | nwResize : Value.Supported }

The nw-resize value for the cursor property.

seResize : Value { provides | seResize : Value.Supported }

The se-resize value for the cursor property.

swResize : Value { provides | swResize : Value.Supported }

The sw-resize value for the cursor property.

ewResize : Value { provides | ewResize : Value.Supported }

The ew-resize value for the cursor property.

nsResize : Value { provides | nsResize : Value.Supported }

The ns-resize value for the cursor property.

neswResize : Value { provides | neswResize : Value.Supported }

The nesw-resize value for the cursor property.

nwseResize : Value { provides | nwseResize : Value.Supported }

The nwse-resize value for the cursor property.

zoomIn : Value { provides | zoomIn : Value.Supported }

The zoom-in value for the cursor property.

zoomOut : Value { provides | zoomOut : Value.Supported }

The zoom-out value for the cursor property.

grab : Value { provides | grab : Value.Supported }

The grab value for the cursor property.

grabbing : Value { provides | grabbing : Value.Supported }

The grabbing value for the cursor property.

Caret color

caretColor : BaseValue (ColorSupported { auto : Value.Supported, transparent : Value.Supported }) -> Style

Sets caret-color

caretColor (hex "#60b5cc")

caretColor (rgb 96 181 204)

caretColor (rgba 96 181 204 0.5)

Gradients

linearGradient : Value { colorStop : Value.Supported } -> Value { colorStop : Value.Supported } -> List (Value { colorStop : Value.Supported }) -> Value { provides | linearGradient : Value.Supported }

Produces linear-gradient() values used by properties such as backgroundImage, and listStyleImage

linearGradient (stop red) (stop blue) []

linearGradient (stop red) (stop blue) [ stop green ]

linearGradient2 : Value (AngleSupported { toBottom : Value.Supported, toBottomLeft : Value.Supported, toBottomRight : Value.Supported, toLeft : Value.Supported, toRight : Value.Supported, toTop : Value.Supported, toTopLeft : Value.Supported, toTopRight : Value.Supported }) -> Value { colorStop : Value.Supported } -> Value { colorStop : Value.Supported } -> List (Value { colorStop : Value.Supported }) -> Value { provides | linearGradient : Value.Supported }

Produces linear-gradient() values used by properties such as backgroundImage, and listStyleImage

linearGradient2 toTop (stop red) (stop blue) []

linearGradient2 toTop (stop red) (stop blue) [ stop green ]

stop : Value Color -> Value { provides | colorStop : Value.Supported }

Provides a stop for a gradient.

linearGradient toTop (stop red) (stop blue) []

See also stop2 for controlling stop positioning.

stop2 : Value Color -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | colorStop : Value.Supported }

Provides a stop for a gradient.

linearGradient toTop (stop2 red (px 20)) (stop blue) []

See also stop if you don't need to control the stop position.

stop3 : Value Color -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | colorStop : Value.Supported }

Provides a stop for a gradient.

linearGradient (stop3 (hex "111") zero (pt 1)) (stop3 (hex "6454") (pt 2) (pct 45))

toBottom : Value { provides | toBottom : Value.Supported }

Provides the to bottom side angle for gradients.

linearGradient toBottom (stop red) (stop blue) []

If you want your gradient to go to a corner, use toBottomLeft or toBottomRight:

linearGradient toBottomLeft (stop red) (stop blue) []

linearGradient toBottomRight (stop red) (stop blue) []

toBottomLeft : Value { provides | toBottomLeft : Value.Supported }

Provides the to bottom left corner angle for gradients.

linearGradient toBottomLeft (stop red) (stop blue) []

If you want your gradient to go to a side, use toBottom or toLeft instead:

linearGradient toBottom (stop red) (stop blue) []

linearGradient toLeft (stop red) (stop blue) []

toBottomRight : Value { provides | toBottomRight : Value.Supported }

Provides the to bottom right corner angle for gradients.

linearGradient toBottomRight (stop red) (stop blue) []

If you want your gradient to go to a side, use toBottom or toRight instead:

linearGradient toBottom (stop red) (stop blue) []

linearGradient toRight (stop red) (stop blue) []

toLeft : Value { provides | toLeft : Value.Supported }

Provides the to left side angle for gradients.

linearGradient toLeft (stop red) (stop blue) []

If you want your gradient to go to a corner, use toTopLeft or toBottomLeft:

linearGradient toTopLeft (stop red) (stop blue) []

linearGradient toBottomLeft (stop red) (stop blue) []

toRight : Value { provides | toRight : Value.Supported }

Provides the to right side angle for gradients.

linearGradient toRight (stop red) (stop blue) []

If you want your gradient to go to a corner, use toTopRight or toBottomRight:

linearGradient toTopRight (stop red) (stop blue) []

linearGradient toBottomRight (stop red) (stop blue) []

toTop : Value { provides | toTop : Value.Supported }

Provides the to top side angle for gradients.

linearGradient toTop (stop red) (stop blue) []

If you want your gradient to go to a corner, use toTopLeft or toTopRight:

linearGradient toTopLeft (stop red) (stop blue) []

linearGradient toTopRight (stop red) (stop blue) []

toTopLeft : Value { provides | toTopLeft : Value.Supported }

Provides the to top left corner angle for gradients.

linearGradient toTopLeft (stop red) (stop blue) []

If you want your gradient to go to a side, use toTop or toLeft instead:

linearGradient toTop (stop red) (stop blue) []

linearGradient toLeft (stop red) (stop blue) []

Shadows


type alias BoxShadowConfig =
{ offsetX : Value (LengthSupported { pct : Value.Supported })
, offsetY : Value (LengthSupported { pct : Value.Supported })
, blurRadius : Maybe (Value (LengthSupported { pct : Value.Supported }))
, spreadRadius : Maybe (Value (LengthSupported { pct : Value.Supported }))
, color : Maybe (Value Color)
, inset : Basics.Bool 
}

Configuration for boxShadow.

boxShadow : BaseValue { none : Value.Supported } -> Style

The box-shadow property.

boxShadow initial

boxShadow none

For defining shadows look at boxShadowsMany.

boxShadowMany : List BoxShadowConfig -> Style

Sets box-shadow.

If you give an empty list, the value will be none. This is to make it impossible for it to have no values in the output.

boxShadowMany [] -- "box-shadow: none"

-- "box-shadow: 3px 5px #aabbcc"
button
    [ css
        [ boxShadowMany
            [ { defaultBoxShadow
                | offsetX = px 3
                , offsetY = px 5
                , color = Just (hex "#aabbcc")
              }
            ]
        ]
    ]
    [ text "Zap!" ]

defaultBoxShadow : BoxShadowConfig

Default boxShadow configuration.

It is equivalent to the following CSS:

box-shadow: 0 0;


type alias TextShadowConfig =
{ offsetX : Value (LengthSupported { pct : Value.Supported })
, offsetY : Value (LengthSupported { pct : Value.Supported })
, blurRadius : Maybe (Value (LengthSupported { pct : Value.Supported }))
, color : Maybe (Value Color) 
}

Configuration for textShadow.

textShadow : BaseValue { none : Value.Supported } -> Style

The text-shadow property.

boxShadow initial

boxShadow none

This 1-argument variant is for single keyword values only. For defining shadows look at textShadowMany.

textShadowMany : List TextShadowConfig -> Style

Sets text-shadow.

This multi-argument variant is for defining shadows only. For single keyword values, look at textShadow.

textShadowMany [] -- "text-shadow: unset"

-- "text-shadow: 3px 5px #aabbcc"
span
    [ css
        [ textShadow
            [ { defaultTextShadow
                | offsetX = px 3
                , offsetY = px 5
                , color = Just (hex "#aabbcc")
              }
            ]
        ]
    ]
    [ text "Zap!" ]

Transformation


type alias TransformFunction =
TransformFunctionSupported {}

A type alias used to accept a transform-function.


type alias TransformFunctionSupported supported =
{ supported | matrix : Value.Supported
, matrix3d : Value.Supported
, translate : Value.Supported
, translate2 : Value.Supported
, translateX : Value.Supported
, translateY : Value.Supported
, translateZ : Value.Supported
, translate3d : Value.Supported
, scale_ : Value.Supported
, scale2_ : Value.Supported
, scaleX : Value.Supported
, scaleY : Value.Supported
, scaleZ : Value.Supported
, scale3d : Value.Supported
, skew : Value.Supported
, skew2 : Value.Supported
, skewX : Value.Supported
, skewY : Value.Supported
, rotate_ : Value.Supported
, rotateX : Value.Supported
, rotateY : Value.Supported
, rotateZ : Value.Supported
, rotate3d : Value.Supported
, perspective_ : Value.Supported 
}

A type alias used to accept a transform-function among other values.

transform : BaseValue (TransformFunctionSupported { none : Value.Supported }) -> Style

The transform property.

transform <| matrix 1.0 2.0 3.0 4.0 5.0 6.0
transform <| matrix3d 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
transform <| translate (px 12)
transform <| translate2 (px 12) (pct 50)
transform <| translateX (em 2)
transform <| translateY (inch 3)
transform <| translateZ (px 2)
transform <| translate3d (px 12) (pct 50) (em 3)
transform <| scale_ 2
transform <| scale2_ 2 0.5
transform <| scaleX 2
transform <| scaleY 0.5
transform <| scaleZ 0.3
transform <| scale3d 2.5 1.2 0.3
transform <| skew (deg 20)
transform <| skew2 (deg 30)
transform <| skewX (deg 30)
transform <| skewY (rad 1.07)
transform <| rotate_ (turn 0.5)
transform <| rotateX (deg 10)
transform <| rotateY (deg 10)
transform <| rotateZ (deg 10)
transform <| rotate3d 1 2.0 3.0 (deg 10)
transform <| perspective_ (px 17)

transformMany : List (Value TransformFunction) -> Style

Sets transform with a series of transform-functions.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

transformMany [ translate (px 12), scale_ 2, skew (deg 20) ]

transformMany [] -- transform: unset;

transformOrigin : BaseValue (LengthSupported { top_ : Value.Supported, center : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, pct : Value.Supported }) -> Style

Sets transform-origin.

This is the 1-argument variant, which lets you set certain keywords and single lengths or percentages.

transformOrigin top_

transformOrigin center

transformOrigin bottom

transformOrigin (px 30)

transformOrigin (pct 50)

transformOrigin2 left_ top_

transformOrigin2 right_ center

transformOrigin2 right_ bottom_

transformOrigin2 (pct 50) (pct 50)

transformOrigin3 (pct 10) (px 2) (px 10)

transformOrigin3 left_ (px 5) (px -4)

transformOrigin3 right_ bottom_ (rem 2)

transformOrigin2 : Value (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Style

Sets transform-origin.

This 2-argument variant lets you set x and y offsets in a single declaration.

transformOrigin2 left_ top_

transformOrigin2 right_ center

transformOrigin2 right_ bottom_

transformOrigin2 (pct 50) (pct 50)

transformOrigin3 : Value (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value Length -> Style

Sets transform-origin.

This 3-argument variant lets you set x, y and z offsets in a single declaration.

transformOrigin3 (pct 10) (px 2) (px 10)

transformOrigin3 left_ (px 5) (px -4)

transformOrigin3 right_ bottom_ (rem 2)

transformBox : BaseValue { contentBox : Value.Supported, borderBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported } -> Style

Sets the transform-box property.

transformBox contentBox

transformBox fillBox

transformStyle : BaseValue { flat : Value.Supported, preserve3d : Value.Supported } -> Style

Sets the transform-style property.

transformStyle flat

transformStyle inherit

flat : Value { provides | flat : Value.Supported }

The flat value used in the transformStyle property.

transformStyle flat

preserve3d : Value { provides | preserve3d : Value.Supported }

The preserve-3d value used in the transformStyle property.

transformStyle preserve3d

Matrix transformation

matrix : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | matrix : Value.Supported }

Sets matrix value for usage with transform. The first four numeric values describe the linear transformation. The last two numeric values describe the translation to apply.

    transform (matrix 1 2 -1 1 80 80)

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 -> Value { provides | matrix3d : Value.Supported }

Sets matrix3d value for usage with transform. Every fourth number describes the translation to apply. All other describe the linear tranformation.

    transform (matrix3d 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1)

Scaling (resizing)

scale : BaseValue { num : Value.Supported, none : Value.Supported } -> Style

The scale property.

This one-argument version lets you set a global value, none or a num that will scale the element by both X and Y axes (equivalent to scale_).

scale none

scale (num 3)

scale2 (num 1) (num 3)

scale3 (num 1) (num 3) (num 4)

scale2 : Value { num : Value.Supported } -> Value { num : Value.Supported } -> Style

The scale property.

This two-argument version lets you specify scaling in X and Y axes (equivalent to scale2_).

scale2 (num 1) (num 3)

scale3 : Value { num : Value.Supported } -> Value { num : Value.Supported } -> Value { num : Value.Supported } -> Style

The scale property.

This three-argument version lets you specify scaling in X, Y and Z axes (equivalent to scale3d).

scale3 (num 1) (num 3) (num 4)

scale_ : Basics.Float -> Value { provides | scale_ : Value.Supported }

Sets scale value for usage with transform.

transform (scale_ 0.7)

This is called scale_ instead of scale because scale is already a property function.

scale2_ : Basics.Float -> Basics.Float -> Value { provides | scale2_ : Value.Supported }

Sets scale value for usage with transform.

transform (scale2_ 0.7 0.7)

This is called scale2_ instead of scale2 because scale2 is already a property function.

scaleX : Basics.Float -> Value { provides | scaleX : Value.Supported }

Sets scaleX value for usage with transform.

transform (scaleX 0.7)

scaleY : Basics.Float -> Value { provides | scaleY : Value.Supported }

Sets scaleY value for usage with transform.

transform (scaleY 0.7)

scaleZ : Basics.Float -> Value { provides | scaleZ : Value.Supported }

Sets scaleZ value for usage with transform.

transform (scaleZ 0.7)

scale3d : Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | scale3d : Value.Supported }

Sets scale3d value for usage with transform.

transform (scale3d 2 0.7 0.2)

Rotation

rotate : BaseValue (AngleSupported { none : Value.Supported }) -> Style

The rotate property.

This one-argument version lets you set a global variable, none, or angle.

rotate none

rotate inherit

rotate (deg 60)

rotate2 x (deg 50)

rotate2 y (deg 100)

rotate4 1 1 1 (deg 90)

rotate2 : Value { x : Value.Supported, y : Value.Supported, z : Value.Supported } -> Value Angle -> Style

The rotate property.

This 2-argument version lets you set an axis, then an angle value.

rotate2 x (deg 50)

rotate2 y (deg 100)

rotate4 : Basics.Float -> Basics.Float -> Basics.Float -> Value Angle -> Style

The rotate property.

This 4-argument version lets you set a 3D vector, than an angle value.

rotate4 1 1 1 (deg 90)

rotate_ : Value Angle -> Value { provides | rotate_ : Value.Supported }

Sets rotate value for usage with transform.

transform (rotate_ (deg 30))

This is called rotate_ instead of rotate because rotate is already a property function.

rotateX : Value Angle -> Value { provides | rotateX : Value.Supported }

Sets rotateX value for usage with transform.

transform (rotateX (deg 30))

rotateY : Value Angle -> Value { provides | rotateY : Value.Supported }

Sets rotateY value for usage with transform.

transform (rotateY (deg 30))

rotateZ : Value Angle -> Value { provides | rotateZ : Value.Supported }

Sets rotateZ value for usage with transform.

transform (rotateZ (deg 30))

rotate3d : Basics.Float -> Basics.Float -> Basics.Float -> Value Angle -> Value { provides | rotate3d : Value.Supported }

Sets rotate3d value for usage with transform.

transform (rotate3d 0 1 0 (deg 30))

Skewing (distortion)

skew : Value Angle -> Value { provides | skew : Value.Supported }

Sets skew value for usage with transform.

transform (skew (deg 30))

skew2 : Value Angle -> Value Angle -> Value { provides | skew2 : Value.Supported }

Sets skew value for usage with transform.

transform (skew2 (deg 30) (deg 10))

skewX : Value Angle -> Value { provides | skewX : Value.Supported }

Sets skewX value for usage with transform.

transform (skewX (deg 30))

skewY : Value Angle -> Value { provides | skewY : Value.Supported }

Sets skewY value for usage with transform.

transform (skewY (deg 30))

Translation (moving)

translate : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translate : Value.Supported }

Sets translate value for usage with transform.

transform (translate (px 10))

translate2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translate2 : Value.Supported }

Sets translate value for usage with transform.

transform (translate (px 10) (px 20))

translateX : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translateX : Value.Supported }

Sets translateX value for usage with transform.

transform (translateX (px 10))

translateY : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translateY : Value.Supported }

Sets translateY value for usage with transform.

transform (translateY (px 10))

translateZ : Value Length -> Value { provides | translateZ : Value.Supported }

Sets translateZ value for usage with transform.

transform (translateZ (px 10))

translate3d : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value Length -> Value { provides | translate3d : Value.Supported }

Sets translate3d value for usage with transform.

transform (translate3d (px 12) (pct 50) (em 3))

Perspective

perspective : BaseValue (LengthSupported { none : Value.Supported }) -> Style

The perspective property.

Negative values are not supported and any value smaller than 1px is clamped to 1px.

perspective none

perspective (px 100)

perspective (rem 50)

perspectiveOrigin : BaseValue (LengthSupported { pct : Value.Supported, left_ : Value.Supported, center : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported }) -> Style

The perspective-origin property.

This one-argument version either supports a global value or the x-position.

perspectiveOrigin inherit

perspectiveOrigin left_

perspectiveOrigin (pct 50)

perspectiveOrigin2 left_ center

perspectiveOrigin2 (rem 50) (pct 20)

perspectiveOrigin2 : Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, center : Value.Supported, right_ : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, center : Value.Supported, bottom_ : Value.Supported }) -> Style

The perspective-origin property.

This two-argument version takes an X position and then a Y position.

pperspectiveOrigin2 left_ center

perspectiveOrigin2 (rem 50) (pct 20)

perspective_ : Value Length -> Value { provides | perspective_ : Value.Supported }

Sets perspective value for usage with transform.

transform (perspective_ (px 17))

The value is called perspective_ instead of perspective because perspective is already a property function.

3D Rendering options

backfaceVisibility : BaseValue { visible : Value.Supported, hidden : Value.Supported } -> Style

Sets backface-visibility

backfaceVisibility visible

backfaceVisibility hidden

Animation

animationName : BaseValue { none : Value.Supported, string : Value.Supported, customIdent : Value.Supported } -> Style

The animation-name property.

animationName (customIdent "pulse") []

animationNameMany : List (Value { none : Value.Supported, string : Value.Supported, customIdent : Value.Supported }) -> Style

The animation-name property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationNameMany [customIdent "pulse"]

animationNameMany [] -- animation-name: unset;

animationDuration : BaseValue Time -> Style

The animation-duration property.

animationDuration (s 1)

animationDurationMany : List (Value Time) -> Style

The animation-duration property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationDurationMany [ s 1, ms 300, s 4.5 ]

animationDurationMany [] -- animation-duration: unset;

animationTimingFunction : BaseValue EasingFunction -> Style

The animation-timing-function property.

animationTimingFunction linear

animationTimingFunctionMany : List (Value EasingFunction) -> Style

The animation-timing-function property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationTimingFunctionMany linear [ cubicBezier 0.42 0 0.38 1, stepEnd ]

animationTimingFunctionMany [] -- animation-timing-function: unset;

animationIterationCount : BaseValue { infinite : Value.Supported, num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Style

The animation-iteration-count property.

animationIterationCount (num 3.5)

animationIterationCount infinite

animationIterationCountMany : List (Value { infinite : Value.Supported, num : Value.Supported, zero : Value.Supported, calc : Value.Supported }) -> Style

The animation-iteration-count property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationIterationCountMany [num 3.5, infinte, zero ]

animationIterationCountMany [] -- animation-iteration-count: unset;

animationDirection : BaseValue { normal : Value.Supported, reverse : Value.Supported, alternate : Value.Supported, alternateReverse : Value.Supported } -> Style

The animation-direction property.

animationDirection reverse

animationDirectionMany : List (Value { normal : Value.Supported, reverse : Value.Supported, alternate : Value.Supported, alternateReverse : Value.Supported }) -> Style

The animation-direction property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationDirectionMany [ reverse, normal, alternate, alternateReverse ]

animationDirectionMany [] -- animation-direction: unset;

animationPlayState : BaseValue { running : Value.Supported, paused : Value.Supported } -> Style

The animation-play-state property.

animationPlayState running

animationPlayStateMany : List (Value { running : Value.Supported, paused : Value.Supported }) -> Style

The animation-play-state property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationPlayStateMany [ running, paused ]

animationPlayStateMany [] -- animation-play-state: unset;

animationDelay : BaseValue Time -> Style

The animation-delay property.

animationDelay (s 1)

animationDelayMany : List (Value Time) -> Style

The animation-delay property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationDelayMany (s 1) [ ms 300, s 4.5 ]

animationDelayMany [] -- animation-delay: unset;

animationFillMode : BaseValue { none : Value.Supported, forwards : Value.Supported, backwards : Value.Supported, both : Value.Supported } -> Style

The animation-fill-mode property.

animationFillMode forwards

animationFillModeMany : List (Value { none : Value.Supported, forwards : Value.Supported, backwards : Value.Supported, both : Value.Supported }) -> Style

The animation-fill-mode property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

animationFillModeMany [ forwards, none, both, backwards ]

animationFillModeMany [] -- animation-fill-mode: unset;


type alias EasingFunction =
EasingFunctionSupported {}

A type alias used to accept an easing-function.


type alias EasingFunctionSupported supported =
{ supported | linear : Value.Supported
, ease : Value.Supported
, easeIn : Value.Supported
, easeOut : Value.Supported
, easeInOut : Value.Supported
, cubicBezier : Value.Supported
, stepStart : Value.Supported
, stepEnd : Value.Supported
, steps : Value.Supported 
}

A type alias used to accept an easing-function among other values.

linear : Value { provides | linear : Value.Supported }

The linear value used for properties such as animationTimingFunction.

animationTimingFunction linear

ease : Value { provides | ease : Value.Supported }

The ease value used for properties such as animationTimingFunction.

animationTimingFunction ease

easeIn : Value { provides | easeIn : Value.Supported }

The ease-in value used for properties such as animationTimingFunction.

animationTimingFunction easeIn

easeOut : Value { provides | easeOut : Value.Supported }

The ease-out value used for properties such as animationTimingFunction.

animationTimingFunction easeOut

easeInOut : Value { provides | easeInOut : Value.Supported }

The ease-in-out value used for properties such as animationTimingFunction.

animationTimingFunction easeInOut

cubicBezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | cubicBezier : Value.Supported }

Produces the cubic-bezier() value used for properties such as animationTimingFunction

animationTimingFunction (cubicBezier 0.2 0 0.5 1)

stepStart : Value { provides | stepStart : Value.Supported }

The step-start value used for properties such as animationTimingFunction.

animationTimingFunction stepStart

stepEnd : Value { provides | stepEnd : Value.Supported }

The step-end value used for properties such as animationTimingFunction.

animationTimingFunction stepEnd

steps : Basics.Int -> Value { provides | steps : Value.Supported }

Produces the steps() value used for properties such as animationTimingFunction.

animationTimingFunction (steps 3)

steps2 : Basics.Int -> Value { jumpStart : Value.Supported, jumpEnd : Value.Supported, jumpNone : Value.Supported, jumpBoth : Value.Supported, start : Value.Supported, end : Value.Supported } -> Value { provides | steps : Value.Supported }

Produces the steps() value used for properties such as animationTimingFunction.

animationTimingFunction (steps2 3 jumpStart)

jumpStart : Value { provides | jumpStart : Value.Supported }

The jump-start value used for functions like step2

steps2 3 jumpStart

jumpEnd : Value { provides | jumpEnd : Value.Supported }

The jump-end value used for functions like step2

steps2 3 jumpEnd

jumpNone : Value { provides | jumpNone : Value.Supported }

The jump-none value used for functions like step2

steps2 3 jumpNone

jumpBoth : Value { provides | jumpBoth : Value.Supported }

The jump-both value used for functions like step2

steps2 3 jumpBoth

infinite : Value { provides | infinite : Value.Supported }

The infinite value used for functions like animationIterationCount

animationIterationCount infinite

reverse : Value { provides | reverse : Value.Supported }

The reverse value used for functions like animationDirection

animationDirection reverse

alternate : Value { provides | alternate : Value.Supported }

The alternate value used for functions like animationDirection

animationDirection alternate

alternateReverse : Value { provides | alternateReverse : Value.Supported }

The alternate-reverse value used for functions like animationDirection

animationDirection alternateReverse

running : Value { provides | running : Value.Supported }

The running value used for functions like animationPlayState

animationPlayState running

paused : Value { provides | paused : Value.Supported }

The paused value used for functions like animationPlayState

animationPlayState paused

forwards : Value { provides | forwards : Value.Supported }

The forwards value used for functions like animationFillMode

animationFillMode forwards

Visual stuff

opacity : BaseValue { num : Value.Supported, zero : Value.Supported, calc : Value.Supported, pct : Value.Supported } -> Style

Sets opacity

opacity (num 0.5)

opacity (num 1.0)

opacity zero

visibility : BaseValue { visible : Value.Supported, hidden : Value.Supported, collapse : Value.Supported } -> Style

Sets visibility

  visibility visible
  visibility hidden
  visibility collapse

mixBlendMode : BaseValue BlendMode -> Style

Sets mix-blend-mode

mixBlendMode multiply

mixBlendMode saturation

imageRendering : BaseValue { auto : Value.Supported, crispEdges : Value.Supported, pixelated : Value.Supported } -> Style

Sets image-rendering

imageRendering auto

imageRendering crispEdges

imageRendering pixelated

crispEdges : Value { provides | crispEdges : Value.Supported }

Sets crisp-edges value for usage with imageRendering.

imageRendering crispEdges

pixelated : Value { provides | pixelated : Value.Supported }

Sets pixelated value for usage with imageRendering.

imageRendering pixelated

clipPath : BaseValue (BasicShapeSupported { none : Value.Supported, url : Value.Supported, marginBox : Value.Supported, borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported }) -> Style

The 1-argument variant of the clip-path property.

clipPath marginBox

clipPath inherit

clipPath (circle (pct 2))

clipPath (url "test-img.svg")

clipPath2 marginBox (circleAt2 farthestSide left top)

Masks

maskBorderMode : BaseValue { luminance : Value.Supported, alpha : Value.Supported } -> Style

Sets the mask-border-mode property.

maskBorderMode inherit

maskBorderMode luminance

maskBorderRepeat : BaseValue { stretch : Value.Supported, repeat : Value.Supported, round_ : Value.Supported, space : Value.Supported } -> Style

Sets the 1-argument variant of the mask-border-repeat property.

maskBorderRepeat stretch

maskBorderRepeat revert

maskBorderRepeat2 stretch repeat

maskBorderRepeat2 : Value { stretch : Value.Supported, repeat : Value.Supported, round_ : Value.Supported, space : Value.Supported } -> Value { stretch : Value.Supported, repeat : Value.Supported, round_ : Value.Supported, space : Value.Supported } -> Style

Sets the 2-argument variant of the mask-border-repeat property.

maskBorderRepeat2 stretch repeat

maskBorderOutset : BaseValue (LengthSupported { num : Value.Supported }) -> Style

Sets the 1-argument variant of the mask-border-outset property.

maskBorderOutset revert

maskBorderOutset (num 2.5)

maskBorderOutset (px 30)

--             top+bottom | left+right
maskBorderOutset2 (px 30) (px 10)

--               top | left+right | bottom
maskBorderOutset3 (px 12) (px 16) (px 4)

--                  top | right | bottom | left
maskBorderOutset4 (rem 2) (rem 1) (rem 3) (rem 4)

maskBorderOutset2 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style

Sets the 2-argument variant of the mask-border-outset property.

--             top+bottom | left+right
maskBorderOutset2 (px 30) (px 10)

maskBorderOutset3 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style

Sets the 3-argument variant of the mask-border-outset property.

--               top | left+right | bottom
maskBorderOutset3 (px 12) (px 16) (px 4)

maskBorderOutset4 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style

Sets the 4-argument variant of the mask-border-outset property.

--                  top | right | bottom | left
maskBorderOutset4 (rem 2) (rem 1) (rem 3) (rem 4)

maskBorderSlice : BaseValue { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style

Sets the 1-argument variant of the mask-border-slice property.

maskBorderSlice initial

maskBorderSlice (num 2.5)

maskBorderSlice (rem 3)

--           top+bottom | left+right
maskBorderSlice2 (num 30) (pct 10)

--              top | left+right | bottom
maskBorderSlice3 (px 12) (num 2) fill_

--                 top | right | bottom | left
maskBorderSlice4 (rem 2) (rem 1) fill_ (rem 4)

maskBorderSlice2 : Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style

Sets the 2-argument variant of the mask-border-slice property.

--           top+bottom | left+right
maskBorderSlice2 (num 30) (pct 10)

maskBorderSlice3 : Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style

Sets the 3-argument variant of the mask-border-slice property.

--              top | left+right | bottom
maskBorderSlice3 (px 12) (num 2) fill_

maskBorderSlice4 : Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style

Sets the 4-argument variant of the mask-border-slice property.

--                 top | right | bottom | left
maskBorderSlice4 (rem 2) (rem 1) fill_ (rem 4)

maskBorderWidth : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style

Sets the 1-argument variant of the mask-border-width property.

maskBorderWidth initial

maskBorderWidth auto

maskBorderWidth (rem 3)

--           top+bottom | left+right
maskBorderWidth2 (num 30) (pct 10)

--              top | left+right | bottom
maskBorderWidth3 (px 12) auto (px 20)

--                 top | right | bottom | left
maskBorderWidth4 (rem 2) (rem 1) auto (rem 4)

maskBorderWidth2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style

Sets the 2-argument variant of the mask-border-width property.

--           top+bottom | left+right
maskBorderWidth2 (num 30) (pct 10)

maskBorderWidth3 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style

Sets the 3-argument variant of the mask-border-width property.

--              top | left+right | bottom
maskBorderWidth3 (px 12) auto (px 20)

maskBorderWidth4 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style

Sets the 4-argument variant of the mask-border-width property.

--                 top | right | bottom | left
maskBorderWidth4 (rem 2) (rem 1) auto (rem 4)

maskClip : BaseValue { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported, noClip : Value.Supported } -> Style

The 1-argument variant of the mask-clip property.

This does not support non-standard keyword values such as border.

maskClip contentBox

maskClip revert

maskClipMany [contentBox, marginBox, noClip]

maskClipMany : List (Value { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported, noClip : Value.Supported }) -> Style

The multi-argument variant of the mask-clip property.

This does not support non-standard keyword values such as border.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

maskClipMany [contentBox, marginBox, noClip]

maskClipMany [] -- mask-clip: unset;

maskComposite : BaseValue { add : Value.Supported, subtract : Value.Supported, intersect : Value.Supported, exclude : Value.Supported } -> Style

The mask-composite property.

maskComposite add

maskComposite revert

maskMode : BaseValue { alpha : Value.Supported, luminance : Value.Supported, matchSource : Value.Supported } -> Style

The 1-argument variant of the mask-mode property.

maskMode inherit

maskMode alpha

maskModeMany [alpha, luminance, alpha, matchSource]

maskModeMany : List (Value { alpha : Value.Supported, luminance : Value.Supported, matchSource : Value.Supported }) -> Style

The multi-argument variant of the mask-mode property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

maskModeMany [alpha, luminance, alpha, matchSource]

maskModeMany [] -- mask-mode: unset;

maskOrigin : BaseValue { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported } -> Style

The 1-argument variant of the mask-origin property.

maskOrigin inherit

maskOrigin contentBox

maskOriginMany [paddingBox, borderBox]

maskOriginMany : List (Value { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported }) -> Style

The multi-argument variant of the mask-origin property.

If you give an empty list, the value will be unset. This is to make it impossible for it to have no values in the output.

maskOriginMany [paddingBox, borderBox]

maskOriginMany [] -- mask-origin: unset;

maskPosition : BaseValue { top_ : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported } -> Style

The 1-argument variant of the mask-position property.

maskPosition top_

maskPosition inherit

maskRepeat : BaseValue { repeat : Value.Supported, repeatX : Value.Supported, repeatY : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style

The 1-argument variant of the mask-repeat property.

maskRepeat revert

maskRepeat repeatX

maskRepeat Css.round

maskRepeat2 repeat space

maskRepeat2 : Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style

The 2-argument variant of the mask-repeat property.

maskRepeat2 repeat space

maskSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, cover : Value.Supported, contain_ : Value.Supported }) -> Style

The 1-argument variant of the mask-size property.

maskSize auto

maskSize (pct 20)

maskSize (rem 200)

maskSize2 auto (pct 10)

maskSize2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

The 2-argument variant of the mask-size property.

maskSize auto

maskSize (pct 20)

maskSize (rem 200)

maskSize2 auto (pct 10)

maskType : BaseValue { luminance : Value.Supported, alpha : Value.Supported } -> Style

Sets the mask-type property.

maskType inherit

maskType luminance

noClip : Value { provides | noClip : Value.Supported }

Sets no-clip value for usage with maskClip.

maskClip noClip

add : Value { provides | add : Value.Supported }

Sets add value for usage with maskComposite.

maskComposite add

subtract : Value { provides | subtract : Value.Supported }

Sets subtract value for usage with maskComposite.

maskComposite subtract

intersect : Value { provides | intersect : Value.Supported }

Sets intersect value for usage with maskComposite.

maskComposite intersect

exclude : Value { provides | exclude : Value.Supported }

Sets exclude value for usage with maskComposite.

maskComposite exclude

alpha : Value { provides | alpha : Value.Supported }

Sets alpha value for usage with maskMode, maskType and maskBorderMode.

maskMode alpha

maskType alpha

maskBorderMode alpha

luminance : Value { provides | luminance : Value.Supported }

Sets luminance value for usage with maskMode, maskType and maskBorderMode.

maskMode luminance

maskType luminance

maskBorderMode luminance

Filters

filter : BaseValue (FilterFunctionSupported { url : Value.Supported, none : Value.Supported }) -> Style

The filter property.

This single-argument version lets you use global value keywords, as well as none, URLs to SVG filters and single filter functions.

If you want to stack filter functions, use filterMany.

filter <| blur (px 6)

filter <| grayscale (pct 60)

filter <| url "thing.svg#filter1"

filter none

filter inherit

filterMany [] -- unset

filterMany [ invert (pct 70), sepia(pct 50) ]

filterMany : List (Value (FilterFunctionSupported { url : Value.Supported })) -> Style

The filter property.

This multi-argument version lets you stack multiple filter functions and URLs to SVG filters. An empty list will create an unset value.

filterMany [] -- unset

filterMany [ invert (pct 70), sepia(pct 50) ]

backdropFilter : BaseValue (FilterFunctionSupported { url : Value.Supported, none : Value.Supported }) -> Style

The backdrop-filter property.

This single-argument version lets you use global value keywords, as well as none, URLs to SVG filters and single filter functions.

If you want to stack filter functions, use backdropFilterMany.

backdropFilter <| blur (px 6)

backdropFilter <| grayscale (pct 60)

backdropFilter <| url "thing.svg#filter1"

backdropFilter none

backdropFilter inherit

backdropFilterMany [] -- unset

backdropFilterMany [ invert (pct 70), sepia(pct 50) ]

Rendering

paintOrder : BaseValue { normal : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Style

The paint-order property.

This one-argument version indicates which parts of text and shape graphics are painted first, followed by the other two in their relative default order.

paintOrder normal -- normal paint order.

paintOrder2 fill_ stroke -- fill, stroke, then markers.

paintOrder3 markers stroke fill_ -- markers, stroke, then fill.

paintOrder2 : Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Style

The paint-order property.

This two-argument version indicates which parts of text and shape graphics are painted first, followed by the other remaining one.

paintOrder2 fill_ stroke -- fill, stroke, then markers.

paintOrder3 : Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Style

The paint-order property.

This three-argument version explicitly indicates in which order should all the parts of text and shape graphics be painted.

paintOrder3 markers stroke fill_ -- markers, stroke, then fill.

Using a printer

bleed : BaseValue (LengthSupported { auto : Value.Supported }) -> Style

Sets bleed

bleed auto

bleed (pt 10)

SVG attributes that can be used as CSS presentation properties.

fill : BaseValue (ColorSupported { url : Value.Supported }) -> Style

Sets fill Note: fill also accepts the patterns of SVG shapes that are defined inside of a defs element.

fill (hex "#60b5cc")

fill (rgb 96 181 204)

fill (rgba 96 181 204 0.5)

fill (url "#pattern")

strokeDasharray : BaseValue (LengthSupported { num : Value.Supported, pct : Value.Supported }) -> Style

Sets stroke-dasharray

strokeDasharray (num 2)

strokeDasharray (num 2.5)

strokeDasharray (em 2)

strokeDasharray (pct 15)

strokeDashoffset : BaseValue { zero : Value.Supported, calc : Value.Supported, num : Value.Supported, pct : Value.Supported } -> Style

Sets stroke-dashoffset

strokeDashoffset zero

strokeDashoffset (num 100)

strokeDashoffset (pct 25)

strokeWidth : BaseValue (LengthSupported { num : Value.Supported, pct : Value.Supported }) -> Style

Sets stroke-width

strokeWidth zero

strokeWidth (px 2)

strokeWidth (em 2)

strokeWidth (num 2)

strokeWidth (num 2.5)

strokeWidth (pct 15)

strokeAlign : BaseValue { center : Value.Supported, inset_ : Value.Supported, outset : Value.Supported } -> Style

Sets stroke-align

Note: This function accepts inset_ rather than inset because inset is already a property function.

  strokeAlign center
  strokeAlign inset_
  strokeAlign outset

strokeColor : BaseValue Color -> Style

Sets stroke-color

strokeColor (rgb 0 100 44)

strokeColor (hex "#FF9E2C")

strokeImage : BaseValue { url : Value.Supported, none : Value.Supported } -> Style

Sets stroke-image

strokeImage (url "#svg-pattern")

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

strokeMiterlimit : BaseValue { num : Value.Supported } -> Style

Sets stroke-miterlimit

strokeMiterlimit (num 4)

strokeOpacity : BaseValue { num : Value.Supported } -> Style

Sets stroke-opacity

strokeOpacity (num 0.5)

strokePosition : BaseValue (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Style

Sets stroke-position.

strokePosition left_

strokePosition (px 45)

strokePosition sets the horizontal direction. If you need the vertical direction instead, use strokePosition2 like this:

strokePosition zero (px 45)

If you need to set the offsets from the right or bottom, use strokePosition4 like this:

strokePosition4 right_ (px 20) bottom_ (pct 25)

strokePosition2 : Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style

Sets stroke-position.

strokePosition2 left_ top_

strokePosition2 (px 45) (pct 50)

strokePosition2 sets both the horizontal and vertical directions (in that order, same as CSS.) If you need only the horizontal, you can use strokePosition instead:

strokePosition left_

If you need to set the offsets from the right or bottom, use strokePosition4 like this:

strokePosition4 right_ (px 20) bottom_ (pct 25)

strokePosition4 : Value { left_ : Value.Supported, right_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Value { top_ : Value.Supported, bottom_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Style

Sets stroke-position.

strokePosition4 right_ (px 20) bottom_ (pct 30)

The four-argument form of stroke-position alternates sides and offets. So the example above would position the stroke-image 20px from the right, and 30% from the bottom.

See also strokePosition for horizontal alignment and strokePosition2 for horizontal (from left) and vertical (from top) alignment.

strokeRepeat : BaseValue { repeat : Value.Supported, repeatX : Value.Supported, repeatY : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style

Sets stroke-repeat

strokeRepeat repeat

strokeRepeat repeatX

If you need to set horizontal and vertical direction separately, see strokeRepeat2

strokeRepeat2 : Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style

Sets stroke-repeat along the horizontal axis, then the vertical axis.

strokeRepeat2 repeat space

strokeRepeat2 space round

If you only need to set one value for both, see strokeRepeat instead.

strokeSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, cover : Value.Supported }) -> Style

Sets stroke-size.

strokeSize cover

strokeSize (px 400)

If you give a length value, it will be used for the width. The height will be set proportional to the size of the stroke-image. If you need to set both width and height explicitly, use strokeImage2 instead.

strokeSize2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style

Sets stroke-size.

strokeSize2 (px 300) (px 100)

strokeSize2 auto (px 400)

If you only want to set the width, use strokeImage instead.

strokeDashCorner : BaseValue (LengthSupported { none : Value.Supported, pct : Value.Supported, auto : Value.Supported, cover : Value.Supported }) -> Style

Sets stroke-dash-corner.

strokeDashCorner none

strokeDashCorner (px 10)

strokeDashCorner (em 5)

strokeLinecap : BaseValue { butt : Value.Supported, square : Value.Supported, round_ : Value.Supported } -> Style

Sets stroke-linecap

strokeLinecap butt

strokeLinecap square

strokeLinecap round

butt : Value { provides | butt : Value.Supported }

A butt value for the strokeLinecap property.

strokeLinecap butt

square : Value { provides | square : Value.Supported }

The square value used by properties such as strokeLinecap, listStyle, and listStyleType.

strokeLinecap square

listStyleType square

strokeBreak : BaseValue { boundingBox : Value.Supported, slice : Value.Supported, clone : Value.Supported } -> Style

Sets stroke-break

  strokeBreak boundingBox
  strokeBreak slice
  strokeBreak clone

boundingBox : Value { provides | boundingBox : Value.Supported }

A boundingBox value for the strokeBreak property.

  strokeBreak boundingBox

slice : Value { provides | slice : Value.Supported }

A slice value for the strokeBreak and boxDecorationBreak properties.

  strokeBreak slice

  boxDecorationbreak clone

clone : Value { provides | clone : Value.Supported }

A clone value for the strokeBreak and boxDecorationBreak properties.

  strokeBreak clone

  boxDecorationBreak clone

strokeOrigin : BaseValue { matchParent : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported } -> Style

Sets stroke-origin

strokeOrign matchParent

strokeOrign fillBox

strokeOrign strokeBox

strokeOrign contentBox

strokeOrign paddingBox

strokeOrign borderBox

strokeLinejoin : BaseValue { crop : Value.Supported, arcs : Value.Supported, miter : Value.Supported } -> Style

Sets stroke-linejoin.

strokeLinejoin crop

strokeLinejoin arcs

strokeLinejoin miter

Note: if you only want to specifiy the rendering of the cap of a corner you need to use strokeLinejoin2 and set it's first value to miter like so: strokeLinejoin2 miter bevel.

strokeLinejoin2 : Value { crop : Value.Supported, arcs : Value.Supported, miter : Value.Supported } -> Value { bevel : Value.Supported, round_ : Value.Supported, fallback : Value.Supported } -> Style

Sets stroke-linejoin.

strokeLinejoin crop bevel

strokeLinejoin arcs round

strokeLinejoin miter fallback

crop : Value { provides | crop : Value.Supported }

Sets crop value for usage with strokeLinejoin.

strokeLinejoin crop

arcs : Value { provides | arcs : Value.Supported }

Sets arcs value for usage with strokeLinejoin.

strokeLinejoin arcs

miter : Value { provides | miter : Value.Supported }

Sets miter value for usage with strokeLinejoin.

strokeLinejoin miter

bevel : Value { provides | bevel : Value.Supported }

Sets bevel value for usage with strokeLinejoin.

strokeLinejoin miter bevel

strokeDashJustify : BaseValue { none : Value.Supported, stretch : Value.Supported, compress : Value.Supported, dashes : Value.Supported, gaps : Value.Supported } -> Style

Sets stroke-dash-justify.

  strokeDashJustify none
  strokeDashJustify stretch
  strokeDashJustify compress
  strokeDashJustify dashes
  strokeDashJustify gaps

compress : Value { provides | compress : Value.Supported }

Sets compress value for usage with strokeDashJustify.

  strokeDashJustify compress

dashes : Value { provides | dashes : Value.Supported }

Sets dashes value for usage with strokeDashJustify.

  strokeDashJustify dashes

WebKit stuff that's standardised for legacy support

lineClamp : BaseValue { none : Value.Supported, zero : Value.Supported, int : Value.Supported } -> Style

Sets lineClamp

lineClamp none

lineClamp zero

lineClamp (int 3)