Css

Define CSS styles in Elm.

import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src, styled)
import Html.Styled.Events exposing (onClick)


{-| A logo image, with inline styles that change on hover.
-}
logo : Html msg
logo =
    img
        [ src "logo.png"
        , css
            [ display inlineBlock
            , padding (px 20)
            , border3 (px 5) solid (rgb 120 120 120)
            , hover
                [ borderColor theme.primary
                , borderRadius (px 10)
                ]
            ]
        ]
        []


{-| A plain old record holding a couple of theme colors.
-}
theme : { secondary : Color, primary : Color }
theme =
    { primary = hex "55af6a"
    , secondary = rgb 250 240 230
    }


{-| A reusable button which has some styles pre-applied to it.
-}
btn : List (Attribute msg) -> List (Html msg) -> Html msg
btn =
    styled button
        [ margin (px 12)
        , color (rgb 250 250 250)
        , hover
            [ backgroundColor theme.primary
            , textDecoration underline
            ]
        ]


{-| A reusable style. Css.batch combines multiple styles into one, much
like mixins in CSS preprocessors.
-}
paragraphFont : Style
paragraphFont =
    Css.batch
        [ fontFamilies [ "Palatino Linotype", "Georgia", "serif" ]
        , fontSize (px 16)
        , fontWeight normal
        ]


{-| Css.property lets you define custom properties, using strings as their values.
-}
legacyBorderRadius : String -> Style
legacyBorderRadius amount =
    Css.batch
        [ property "-moz-border-radius" amount
        , property "-webkit-border-top-left-radius" amount
        , property "-webkit-border-top-right-radius" amount
        , property "-webkit-border-bottom-right-radius" amount
        , property "-webkit-border-bottom-left-radius" amount
        , property "border-radius" amount
        ]


view : Model -> Html Msg
view model =
    nav []
        [ img [ src "assets/backdrop.jpg", css [ width (pct 100) ] ] []
        , btn [ onClick DoSomething ] [ text "Click me!" ]
        ]


main : Program Never Model Msg
main =
    Html.beginnerProgram
        { view = view >> toUnstyled
        , update = update
        , model = initialModel
        }

See examples/readme/ to play around with this example.

The css function accepts a list of Style values which roughly correspond to CSS properties.

css
    [ display inlineBlock
    , padding (px 20)
    , border3 (px 5) solid (rgb 120 120 120)
    , hover
        [ borderColor theme.primary
        , borderRadius (px 10)
        ]
    ]

Let's take a look at some of these declarations.

display inlineBlock

This compiles to the CSS declaration display: inline-block; -

Snake-case CSS names become camelCase names in elm-css.

The Css.display function only accepts values that are compatible with the CSS display property, such as inlineBlock, flex, none, inherit, etc. If you try to pass display an invalid value such as pointer, it will not compile!

padding (px 20)

This compiles to the CSS declaration padding: 20px;

Values with units such as px, em, and rem are implemented as functions. The num function compiles to unitless numbers; for example, flexGrow (num 1) compiles to flex-grow: 1;.

zero is compatible with declarations that either do or do not expect units, so you can write padding zero instead of something like padding (px 0). (padding zero compiles to padding: 0;.)

border3 (px 5) solid (rgb 120 120 120)

The border3 function shows a convention in elm-css: when a CSS property supports a variable number of arguments, as is the case with border, elm-css commonly provides multiple functions to support those alternatives. For example, border, border2, and border3.

hover
    [ borderColor theme.primary
    , borderRadius (px 10)
    ]

CSS pseudo-classes like :hover are implemented as functions that take a list of declarations.

The above compiles to something like this:

._c7f8ba:hover {
    border-color: #55af6a;
    border-raidus: 10px;
}

Where does that funky classname of _c7f8ba come from?

elm-css automatically generates this classname based on the declarations used, and uses it to generate a <style> element which applies your styles to the page.

When you write this:

button [ css [ borderRadius (px 10), hover [ textDecoration underline ] ] ]
    [ text "Reset" ]

The button is not a normal Html value from the elm-lang/html package, but a Html.Styled value which wraps a normal Html value and adds styling information. Later, when you call toUnstyled to convert this value to a normal Html value, it adds two elements to the DOM:

<button class="_df8ab1">Reset<button>


<style>
    ._df8ab1 {
        border-radius: 10px;
    }


    ._df8ab1:hover {
        text-decoration: underline;
    }
</style>

To sum up what's happening here:

When you define values using the css attribute, elm-css generates a classname and some style information.
That classname gets added to the element receiving the attiibute, and the style information gets stored in the Html.Styled value which wraps that element.
Calling toUnstyled converts this Html.Styled value to a normal Html value which represents both the requested element as well as a <style> element

This is how the css attribute is able to support things like hover and media queries.

If you give an element multiple css attributes, they will stack. This code:

button
    [ css [ backgroundColor (hex "FF0000") ]
    , css [ borderRadius (px 10), hover [ textDecoration underline ] ]
    ]
    [ text "Reset" ]

...compiles to this DOM structure:

<button class="_c34f8b _df8ab1">Reset<button>


<style>
    ._c34f8b {
        background-color: #FF0000;
    }


    ._df8ab1 {
        border-radius: 10px;
    }


    ._df8ab1:hover {
        text-decoration: underline;
    }
</style>

Note that toUnstyled avoids generating excess <style> elements and CSS declarations by building up a dictionary of styles you've passed to css. It will use that dictionary to add a single <style> to the DOM with the appropriate classname declarations.

Style Reuse

The easiest way to reuse styles (like mixins in other CSS systems) is through Style values.

greenBorder : Style
greenBorder =
    borderColor green


bigBold : Style
bigBold =
    Css.batch [ fontWeight bold, fontSize (px 48) ]


view : Model -> Html Msg
view model =
    button [ css [ bigBold, greenBorder ] ] [ text "Ok" ]

Another way to reuse styles is to compile them to attributes and then to mix and match those. This is less flexible than mixing and matching Style values, but it has a performance benefit: classname hashes are calculated when you call the css function, so you can avoid redoing that work by calling it at the top level.

greenBorder : Attribute msg
greenBorder =
    css [ borderColor green ]


bigBold : Attribute msg
bigBold =
    css [ fontWeight bold, fontSize (px 48) ]


view : Model -> Html Msg
view model =
    button [ bigBold, greenBorder ] [ text "Ok" ]

The greenBorder and bigBold attributes above will have their classname hashes calculated right when css is called, and never again. The button will have a green border, a bold font weight, and a font size of 48px.

You can also use Html.Styled.Lazy to avoid recomputing both hashes and Html nodes.

Unsupported Properties

The CSS spec is, ahem, not small. elm-css covers a lot of it, but not all of it. Some things are considered too experimental to support, usually because they do not have enough browser support. Others haven't been added yet because, well, we haven't gotten around to adding them!

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

Style

type alias Style =

Style

batch : List Style -> Style

Create a style from multiple other styles.

underlineOnHover =
    batch
        [ textDecoration none


        , hover
            [ textDecoration underline ]
        ]


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

...has the same result as:

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

Properties

property : String -> String -> Style

Define a custom property.

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

...outputs

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

flex : LengthOrNumberOrAutoOrNoneOrContent compatible -> Style

Sets flex property.

flex2 : Number compatibleA -> LengthOrNumber compatibleB -> Style

Sets flex property.

flex3 :

Number compatibleA

-> Number compatibleB

-> LengthOrNumber compatibleC

-> Style

Sets flex property.

medium : FontSize {}

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

Sets align-self.

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

property "align-self" "auto"

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

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

Sets align-items.

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

property "align-items" "auto"

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

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

Sets justify-content.

order : Number compatible -> Style

Sets order property.

flexDirection : FlexDirection compatible -> Style

Sets flex-direction property.

flexFlow1 : FlexDirectionOrWrap compatible -> Style

Sets flex-flow property.

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

flexFlow2 :

FlexDirectionOrWrap compatibleA

-> FlexDirectionOrWrap compatibleB

-> Style

Sets flex-flow property.

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

flexWrap : FlexWrap compatible -> Style

Sets flex-wrap property.

flexBasis : FlexBasis compatible -> Style

Sets flex-basis property.

flexGrow : Number compatible -> Style

Sets flex-grow property.

flexShrink : Number compatible -> Style

Sets flex-shrink property.

transformStyle : TransformStyle compatible -> Style

The transform-style property.

transformBox : TransformBox compatible -> Style

The transform-box property.

transform : Transform compatible -> Style

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

transform (scaleX 1.4)

transforms : List (Transform compatible) -> Style

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

transforms [] -- transform: none;

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

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

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

transforms [ perspective 1, scale2 1 1.4 ]

currentColor : ColorValue NonMixable

The currentColor value.

underline : TextDecorationLine {}

An underline text decoration line.

overline : TextDecorationLine {}

An overline text decoration line.

lineThrough : TextDecorationLine {}

A line-through text decoration line.

textOrientation : TextOrientation compatible -> Style

Sets text-orientation.

text-orientation mixed

textDecoration : TextDecorationLine a -> Style

Sets text-decoration

textDecoration  underline
textDecoration2 underline wavy
textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

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

textDecoration2 :

TextDecorationLine compatibleA

-> TextDecorationStyle compatibleB

-> Style

Sets text-decoration

textDecoration  underline
textDecoration2 underline wavy
textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

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

textDecoration3 :

TextDecorationLine compatibleA

-> TextDecorationStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets text-decoration

textDecoration  underline
textDecoration2 underline wavy
textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

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

textDecorationLine : TextDecorationLine compatible -> Style

Sets text-decoration-line

textDecorationLine underline

You can specify multiple line decorations with textDecorationLines.

textDecorationLines  [ underline, overline ]

textDecorations : List (TextDecorationLine compatible) -> Style

Sets text-decoration

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

textDecorations2 :

List (TextDecorationLine compatibleA)

-> TextDecorationStyle compatibleB

-> Style

Sets text-decoration

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

textDecorations3 :

List (TextDecorationLine compatibleA)

-> TextDecorationStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets text-decoration

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

textDecorationLine : TextDecorationLine compatible -> Style

Sets text-decoration-line

textDecorationLine underline

You can specify multiple line decorations with textDecorationLines.

textDecorationLines  [ underline, overline ]

textDecorationLines : List (TextDecorationLine compatible) -> Style

Sets text-decoration-line

textDecorationLines  [ underline, overline ]

textDecorationStyle : TextDecorationStyle compatible -> Style

Sets text-decoration-style

textDecorationStyle dotted

textEmphasisColor : ColorValue compatible -> Style

Sets 'text-emphasis-color'

 textEmphasisColor (rgb 100 100 100)

capitalize : TextTransform {}

capitalize text-transform value

uppercase : TextTransform {}

uppercase text-transform value

lowercase : TextTransform {}

lowercase text-transform value

fullWidth : TextTransform {}

full-width text-transform value

hanging : TextIndent {}

hanging hanging value

eachLine : TextIndent {}

each-line text-indent value

textIndent : Length compatible units -> Style

Sets text-indent.

textIndent  (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLine

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

Sets text-indent.

textIndent  (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLine

textIndent3 :

Length compatibleA unitsA

-> TextIndent compatibleB

-> TextIndent compatibleC

-> Style

Sets text-indent.

textIndent  (px 40)
textIndent2 (px 40) hanging
textIndent3 (px 40) hanging eachLine

clip : TextOverflow {}

clip text-overflow value

ellipsis : TextOverflow {}

ellipsis text-overflow value

textOverflow : TextOverflow compatible -> Style

Sets text-overflow.

textOverflow ellipsis

optimizeSpeed : TextRendering {}

optimizeSpeed text-rendering value

optimizeLegibility : TextRendering {}

optimizeLegibility text-rendering value

geometricPrecision : TextRendering {}

geometricPrecision text-rendering value

textRendering : TextRendering a -> Style

Sets text-rendering.

textTransform : TextTransform compatible -> Style

Sets text-transform.

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

Sets text-align.

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

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

property "text-align-last" "auto"


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

left : LengthOrAuto compatible -> Style

The left property.

position absolute
left (px 5)

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

textAlign left

It can also be used as a left float value :

float left

right : LengthOrAuto compatible -> Style

Sets right.

position absolute
right (px 5)

This can also be used as a right alignment value:

textAlign right

It can also be used as a right float value :

float right

center : TextAlign a b

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

justify : TextAlign a b

justify alignment.

justifyAll : TextAlign a b

justify-all alignment.

start : TextAlign a b

start alignment.

end : TextAlign a b

end alignment.

matchParent : TextAlign a b

match-parent alignment.

true : TextAlign a b

true alignment.

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

Sets vertical-align.

display : Display compatible -> Style

For display: flex, use displayFlex.

opacity : Number compatible -> Style

minContent : MinMaxDimension {}

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

maxContent : MinMaxDimension {}

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

fitContent : MinMaxDimension {}

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

fillAvailable : MinMaxDimension {}

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

width : LengthOrAuto compatible -> Style

Sets width

width (px 960)

minWidth : LengthOrMinMaxDimension compatible -> Style

Sets min-width

minWidth (px 100)

maxWidth : LengthOrNoneOrMinMaxDimension compatible -> Style

Sets max-width

maxWidth (px 960)

height : LengthOrAuto compatible -> Style

Sets height

height (px 800)

minHeight : LengthOrMinMaxDimension compatible -> Style

Sets min-height

minHeight (px 100)

maxHeight : LengthOrNoneOrMinMaxDimension compatible -> Style

Sets max-height

maxHeight (px 1024)

padding : Length compatible units -> Style

Sets padding

padding  (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)

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

Sets padding

padding  (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)

padding3 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Style

Sets padding

padding  (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)

padding4 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Length compatible units

-> Style

Sets padding

padding  (px 10)
padding2 (px 10) (px 10)
padding3 (px 10) (px 10) (px 10)
padding4 (px 10) (px 10) (px 10) (px 10)

paddingTop : Length compatible units -> Style

Sets padding-top

paddingTop (px 10)

paddingBottom : Length compatible units -> Style

Sets padding-bottom

paddingBottom (px 10)

paddingRight : Length compatible units -> Style

Sets padding-right

paddingRight (px 10)

paddingLeft : Length compatible units -> Style

Sets padding-left

paddingLeft (px 10)

paddingBlockStart : LengthOrAuto compatible -> Style

Sets padding-block-start

paddingBlockStart (px 10)

paddingBlockEnd : LengthOrAuto compatible -> Style

Sets padding-block-end

paddingBlockEnd (px 10)

paddingInlineStart : LengthOrAuto compatible -> Style

Sets padding-inline-start

paddingInlineStart (px 10)

paddingInlineEnd : LengthOrAuto compatible -> Style

Sets padding-inline-end

paddingInlineEnd (px 10)

margin : LengthOrAuto compatible -> Style

Sets margin

margin  (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)

margin2 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> Style

Sets margin

margin  (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)

margin3 :

LengthOrAuto compatibleA

-> LengthOrAuto compatibleB

-> LengthOrAuto compatibleC

-> Style

Sets margin

margin  (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)

margin4 :

LengthOrAuto compatibleA

-> LengthOrAuto compatibleB

-> LengthOrAuto compatibleC

-> LengthOrAuto compatibleD

-> Style

Sets margin

margin  (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)

marginTop : LengthOrAuto compatible -> Style

Sets margin-top

marginTop (px 10)

marginBottom : LengthOrAuto compatible -> Style

Sets margin-bottom

marginBottom (px 10)

marginRight : LengthOrAuto compatible -> Style

Sets margin-right

marginRight (px 10)

marginLeft : LengthOrAuto compatible -> Style

Sets margin-left

marginLeft (px 10)

marginBlockStart : LengthOrAuto compatible -> Style

Sets margin-block-start

marginBlockStart (px 10)

marginBlockEnd : LengthOrAuto compatible -> Style

Sets margin-block-end

marginBlockEnd (px 10)

marginInlineStart : LengthOrAuto compatible -> Style

Sets margin-inline-start

marginInlineStart (px 10)

marginInlineEnd : LengthOrAuto compatible -> Style

Sets margin-inline-end

marginInlineEnd (px 10)

boxSizing : BoxSizing compatible -> Style

Sets box-sizing

boxSizing borderBox

overflow : Overflow compatible -> Style

overflowX : Overflow compatible -> Style

overflowY : Overflow compatible -> Style

overflowWrap : Wrap compatible -> Style

whiteSpace : WhiteSpace compatible -> Style

backgroundColor : ColorValue compatible -> Style

color : ColorValue compatible -> Style

textShadow : None compatible -> Style

Sets text-shadow.

textShadow  none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

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

Sets text-shadow.

textShadow  none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

textShadow3 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> ColorValue compatibleC

-> Style

Sets text-shadow.

textShadow  none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

textShadow4 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> ColorValue compatibleD

-> Style

Sets text-shadow.

textShadow  none
textShadow2 (px 1) (px 2)
textShadow3 (px 1) (px 2) (rgb 211 121 112)
textShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)

boxShadow : None compatible -> Style

Sets box-shadow.

boxShadow  none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

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

Sets box-shadow.

boxShadow  none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

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

Sets box-shadow.

boxShadow  none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow4 :

Value a

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Value d

-> Style

Sets box-shadow.

boxShadow  none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow5 :

Value a

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Length compatibleD unitsD

-> ColorValue compatibleE

-> Style

Sets box-shadow.

boxShadow  none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

boxShadow6 :

Value a

-> Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Length compatibleD unitsD

-> ColorValue compatibleE

-> Style

Sets box-shadow.

boxShadow  none
boxShadow2 (px 1) (px 2)
boxShadow3 (px 1) (px 2) (rgb 211 121 112)
boxShadow3 (px 1) (px 2) (px 3)
boxShadow3 inset (px 2) (px 3)
boxShadow4 (px 1) (px 2) (px 3) (rgb 211 121 112)
boxShadow4 inset (px 2) (px 3) (rgb 211 121 112)
boxShadow4 (px 1) (px 2) (px 3) (px 4)
boxShadow4 inset (px 2) (px 3) (px 4)
boxShadow5 (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow5 inset (px 2) (px 3) (px 4) (rgb 211 121 112)
boxShadow6 inset (px 1) (px 2) (px 3) (px 4) (rgb 211 121 112)

lineHeight : LengthOrNumber compatible -> Style

Sets line-height

lineHeight (px 10)

letterSpacing : Length compatible units -> Style

Sets letter-spacing

letterSpacing (px 10)

fontFace : String -> String

fontFamily : FontFamily a -> Style

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

fontSize : FontSize a -> Style

Sets font-size

fontSize  xxSmall
fontSize  (px 12)

fontStyle : FontStyle a -> Style

Sets font-style

fontStyle  italic

fontWeight : FontWeight a -> Style

Sets font-weight

fontWeight  bold
fontWeight  (int 300)

fontVariant : FontVariant a -> Style

Sets font-variant

fontVariant   smallCaps
fontVariant2  commonLigatures smallCaps
fontVariant3  commonLigatures smallCaps slashedZero
fontVariants  [ oldstyleNums tabularNums stackedFractions ordinal slashedZero ]

fontVariant2 : FontVariant compatibleA -> FontVariant compatibleB -> Style

fontVariant3 :

FontVariant compatibleA

-> FontVariant compatibleB

-> FontVariant compatibleC

-> Style

fontVariantLigatures : FontVariantLigatures a -> Style

fontVariantCaps : FontVariantCaps a -> Style

fontVariantNumeric : FontVariantNumeric a -> Style

fontVariantNumeric2 :

FontVariantNumeric compatibleA

-> FontVariantNumeric compatibleB

-> Style

fontVariantNumeric3 :

FontVariantNumeric compatibleA

-> FontVariantNumeric compatibleB

-> FontVariantNumeric compatibleC

-> Style

fontFamilies : List String -> Style

For multiple font families:

fontFamilies  ["Verdana", "Arial"]
fontFamilies  [(qt "Gill Sans Extrabold"), "Helvetica", .value sansSerif]

fontVariantNumerics : List (FontVariantNumeric compatible) -> Style

fontFeatureSettings : FeatureTagValue a -> Style

Sets font-feature-settings

fontFeatureSettings (featureTag "hist")
fontFeatureSettings (featureTag2 "smcp" on)
fontFeatureSettings (featureTag2 "swsh" 2)

fontFeatureSettingsList : List (FeatureTagValue a) -> Style

Sets font-feature-settings

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

cursor : Cursor compatible -> Style

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

outline : Outline compatible -> Style

Sets outline

outline  zero
outline  initial
outline3 (px 10) dashed (rgb 11 14 17)

outline3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets outline

outline  zero
outline  initial
outline3 (px 10) dashed (rgb 11 14 17)

outlineColor : ColorValue compatible -> Style

Sets outline-color

outlineColor (rgb 11 14 17)
outlineColor (hex "#ffffff")
outlineColor (hsla 120 0.5 0.5 0.5)

outlineWidth : LengthOrNone compatible -> Style

Sets outline-width

outlineWidth (px 10)
outlineWidth (em 1.4)
outlineWidth none

outlineStyle : BorderStyle compatible -> Style

Sets outline-style

outlineStyle dashed
outlineStyle solid
outlineStyle outset

outlineOffset : Length compatible units -> Style

Sets outline-offset

outlineOffset (px 10)
outlineOffset (em 1.4)
outlineOffset (pct 50)

zIndex : IntOrAuto compatible -> Style

Sets z-index

zIndex (int 2)

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

spaceAround : JustifyContent a b

Thespace-around value for the justify-content property.

spaceBetween : JustifyContent a b

Thespace-between value for the justify-content property.

resize : Resize compatible -> Style

fill : ColorValue compatible -> Style

touchAction : TouchAction compatible -> Style

Sets touch-action property.

borderSpacing : Length compatible units -> Style

Sets border-spacing

borderSpacing  (em 4)
borderSpacing2 (em 4) (px 2)

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

Sets border-spacing

borderSpacing  (em 4)
borderSpacing2 (em 4) (px 2)

visibility : Visibility compatible -> Style

Values

Color values

type alias Color =

ColorValue

{ red : Int

, green : Int

, blue : Int

, alpha : Float

}

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

Font values

featureTag : String -> FeatureTagValue {}

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

fontFeatureSettings (featureTag "hist")

featureTag2 : String -> Int -> FeatureTagValue {}

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

fontFeatureSettings (featureTag2 "smcp" on)
fontFeatureSettings (featureTag2 "swsh" 2)

featureOn : Int

Alias for on value of font-feature-settings

featureOff : Int

Alias for off value of font-feature-settings

Other values

borderCollapse : BorderCollapse compatible -> Style

Sets border-collapse

borderCollapse collapse

borderColor : ColorValue compatible -> Style

Sets border-color

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

borderColor2 : ColorValue compatibleA -> ColorValue compatibleB -> Style

Sets border-color

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

borderColor3 :

ColorValue compatibleA

-> ColorValue compatibleB

-> ColorValue compatibleC

-> Style

Sets border-color

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

borderColor4 :

ColorValue compatibleA

-> ColorValue compatibleB

-> ColorValue compatibleC

-> ColorValue compatibleD

-> Style

Sets border-color

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

borderBottomLeftRadius : Length compatible units -> Style

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)

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

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)

borderBottomRightRadius : Length compatible units -> Style

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)

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

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)

borderTopLeftRadius : Length compatible units -> Style

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)

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

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)

borderTopRightRadius : Length compatible units -> Style

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)

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

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)

borderRadius : Length compatible units -> Style

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

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

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRadius3 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Style

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRadius4 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Length compatibleD unitsD

-> Style

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderWidth : Length compatible units -> Style

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

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

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderWidth3 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Style

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderWidth4 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Length compatibleD unitsD

-> Style

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderBottomWidth : Length compatible units -> Style

Sets border-bottom-width

borderBottomWidth (em 4)

borderInlineEndWidth : Length compatible units -> Style

Sets border-inline-end-width

borderInlineEndWidth (em 4)

borderLeftWidth : Length compatible units -> Style

Sets border-left-width

borderLeftWidth (em 4)

borderRightWidth : Length compatible units -> Style

Sets border-right-width

borderRightWidth (em 4)

borderTopWidth : Length compatible units -> Style

Sets border-top-width

borderTopWidth  (em 4)
borderTopWidth2 (em 4) (px 2)

borderBlockEndStyle : BorderStyle compatible -> Style

Sets border-block-end-style

borderBlockEndStyle dashed

borderBlockStartStyle : BorderStyle compatible -> Style

Sets border-block-start-style

borderBlockStartStyle dashed

borderInlineEndStyle : BorderStyle compatible -> Style

Sets border-inline-end-style

borderInlineEndStyle dashed

borderBottomStyle : BorderStyle compatible -> Style

Sets border-bottom-style

borderBottomStyle dashed

borderInlineStartStyle : BorderStyle compatible -> Style

Sets border-inline-start-style

borderInlineStartStyle dashed

borderLeftStyle : BorderStyle compatible -> Style

Sets border-left-style

borderLeftStyle dashed

borderRightStyle : BorderStyle compatible -> Style

Sets border-right-style

borderRightStyle dashed

borderTopStyle : BorderStyle compatible -> Style

Sets border-top-style

borderTopStyle dashed

borderStyle : BorderStyle compatible -> Style

Sets border-style

borderStyle dashed

borderBlockStartColor : ColorValue compatible -> Style

Sets border-block-start-color

borderBlockStartColor (rgb 101 202 0)

borderBlockEndColor : ColorValue compatible -> Style

Sets border-block-end-color

borderBlockEndColor (rgb 101 202 0)

borderBottomColor : ColorValue compatible -> Style

Sets border-bottom-color

borderBottomColor (rgb 101 202 0)

borderInlineStartColor : ColorValue compatible -> Style

Sets border-inline-start-color

borderInlineStartColor (rgb 101 202 0)

borderInlineEndColor : ColorValue compatible -> Style

Sets border-inline-end-color

borderInlineEndColor (rgb 101 202 0)

borderLeftColor : ColorValue compatible -> Style

Sets border-left-color

borderLeftColor (rgb 101 202 0)

borderRightColor : ColorValue compatible -> Style

Sets border-right-color

borderRightColor (rgb 101 202 0)

borderTopColor : ColorValue compatible -> Style

Sets border-top-color

borderTopColor (rgb 101 202 0)

borderBox : BoxSizing (BackgroundClip {})

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

contentBox : BoxSizing (BackgroundClip {})

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

border : Length compatible units -> Style

Sets border

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

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

Sets border

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

border3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border

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

borderTop : Length compatible units -> Style

Sets border-top

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

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

Sets border-top

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

borderTop3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-top

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

borderBottom : Length compatible units -> Style

Sets border-bottom

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

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

Sets border-bottom

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

borderBottom3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-bottom

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

borderLeft : Length compatible units -> Style

Sets border-left

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

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

Sets border-left

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

borderLeft3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-left

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

borderRight : Length compatible units -> Style

Sets border-right

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

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

Sets border-right

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

borderRight3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-right

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

borderBlockEnd : Length compatible units -> Style

Sets border-block-end

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

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

Sets border-block-end

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

borderBlockEnd3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-end

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

borderBlockStart : Length compatible units -> Style

Sets border-block-start

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

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

Sets border-block-start

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

borderBlockStart3 :

Length compatibleA units

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-start

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

borderInlineEnd : Length compatible units -> Style

Sets border-block-end

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

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

Sets border-block-end

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

borderInlineEnd3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-end

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

borderInlineStart : Length compatible units -> Style

Sets border-block-start

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

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

Sets border-block-start

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

borderInlineStart3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-start

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

borderImageOutset : LengthOrNumber compatible -> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset3 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset4 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> LengthOrNumber compatibleD

-> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageWidth : LengthOrNumber compatible -> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth3 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth4 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> LengthOrNumber compatibleD

-> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

scroll :

{ value : String

, scroll : Compatible

, overflow : Compatible

, backgroundAttachment : Compatible

, blockAxisOverflow : Compatible

, inlineAxisOverflow : Compatible

}

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

visible : Overflow (Visibility {})

The visible value for the overflow property. This can also represent a visible visibility.

block : Display {}

inlineBlock : Display {}

inlineFlex : Display {}

Sets the display style to inline-flex

inline : Display {}

none :

{ borderStyle : Compatible

, cursor : Compatible

, display : Compatible

, lengthOrNumberOrAutoOrNoneOrContent : Compatible

, none : Compatible

, lengthOrNone : Compatible

, lengthOrNoneOrMinMaxDimension : Compatible

, listStyleType : Compatible

, listStyleTypeOrPositionOrImage : Compatible

, outline : Compatible

, resize : Compatible

, textDecorationLine : Compatible

, transform : Compatible

, backgroundImage : Compatible

, value : String

, textTransform : Compatible

, touchAction : Compatible

, updateFrequency : Compatible

, blockAxisOverflow : Compatible

, inlineAxisOverflow : Compatible

, pointerDevice : Compatible

, hoverCapability : Compatible

, scriptingSupport : Compatible

}

auto :

{ lengthOrAuto : Compatible

, overflow : Compatible

, textRendering : Compatible

, flexBasis : Compatible

, lengthOrNumberOrAutoOrNoneOrContent : Compatible

, alignItemsOrAuto : Compatible

, justifyContentOrAuto : Compatible

, cursor : Compatible

, value : String

, lengthOrAutoOrCoverOrContain : Compatible

, intOrAuto : Compatible

, touchAction : Compatible

}

inherit : BasicProperty

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

unset : BasicProperty

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

initial : BasicProperty

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

noWrap : WhiteSpace (FlexDirectionOrWrap (FlexWrap {}))

top : LengthOrAuto compatible -> Style

The top property.

position absolute
top (px 5)

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

verticalAlign top

static : Position {}

A static position value.

position static

fixed : Position (BackgroundAttachment {})

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

position fixed

sticky : Position {}

A sticky position value.

position sticky

relative : Position {}

A relative position value.

position relative

absolute : Position {}

An absolute position value.

position absolute

position : Position compatible -> Style

The position property.

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

Sets 'float' float : Float compatible -> Style

float right

bottom : LengthOrAuto compatible -> Style

The bottom property.

position absolute
bottom (px 5)

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

verticalAlign bottom

middle : VerticalAlign a b

The middle vertical-align value.

verticalAlign middle

baseline : VerticalAlign a b

The baseline vertical-align value.

verticalAlign baseline

sub : VerticalAlign a b

The sub vertical-align value.

verticalAlign sub

super : VerticalAlign a b

The super vertical-align value.

verticalAlign super

textTop : VerticalAlign a b

The text-top vertical-align value.

verticalAlign textTop

textBottom : VerticalAlign a b

The text-bottom vertical-align value.

verticalAlign textBottom

hidden : Overflow (BorderStyle (Visibility {}))

hidden overflow value.

This can also represent a hidden border style, as well as a hidden visibility.

wavy : TextDecorationStyle {}

A wavy text decoration style.

dotted : BorderStyle (TextDecorationStyle {})

A dotted border style.

dashed : BorderStyle (TextDecorationStyle {})

A dashed border style.

solid : BorderStyle (TextDecorationStyle {})

A solid border style.

double : BorderStyle (TextDecorationStyle {})

A double border style.

groove : BorderStyle {}

A groove border style.

ridge : BorderStyle {}

A ridge border style.

inset : BorderStyle {}

An inset border style.

outset : BorderStyle {}

An outset border style.

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

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

transform (matrix 0.5 1 1.5 2 2.5 3)

matrix3d :

number

-> number

-> Transform {}

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

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

perspective : number -> Transform {}

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

 transform (perspective 0.5)

rotate3d : number -> number -> number -> Angle compatible -> Transform {}

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

 transform (rotate3d 1 1 1 (deg 90))

rotateX : Angle compatible -> Transform {}

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

 transform (rotateX (deg 90))

rotateY : Angle compatible -> Transform {}

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

 transform (rotateY (deg 90))

rotateZ : Angle compatible -> Transform {}

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

 transform (rotateZ (deg 90))

scale : number -> Transform {}

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

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

scale2 : number -> number -> Transform {}

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

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

scale3d : number -> number -> number -> Transform {}

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

 transform (scale3d 0.5 0.5 1)

scaleX : number -> Transform {}

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

 transform (scaleX 0.5)

scaleY : number -> Transform {}

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

 transform (scaleY 0.5)

skew : Angle compatible -> Transform {}

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

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

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

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

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

skewX : Angle compatible -> Transform {}

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

 transform (skewX (deg 90))

skewY : Angle compatible -> Transform {}

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

transform (skewY (deg 90))

translate : Length compatible units -> Transform {}

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

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

translate2 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Transform {}

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

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

translate3d :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Transform {}

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

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

translateX : Length compatible units -> Transform {}

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

transform (translateX (px 100))

translateY : Length compatible units -> Transform {}

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

transform (translateY (px 100))

translateZ : Length compatible units -> Transform {}

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

transform (translateZ (px 100))

rotate : Angle compatible -> Transform {}

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

 transform (rotate (deg 90))

fillBox : TransformBox {}

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

viewBox : TransformBox {}

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

flat : TransformStyle {}

The flat value for the transform-style property.

preserve3d : TransformStyle {}

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

content : LengthOrNumberOrAutoOrNoneOrContent (FlexBasis {})

The content value for the flex-basis property.

wrapReverse : FlexDirectionOrWrap (FlexWrap {})

Thewrap-reverse value for the flex-wrap property.

wrap : FlexDirectionOrWrap (FlexWrap {})

Thewrap value for the flex-wrap property.

flexStart : AlignItems a b

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

flexEnd : AlignItems a b

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

stretch : AlignItems a b

Thestretch value for the align-items property.

row : FlexDirectionOrWrap (FlexDirection {})

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

rowReverse : FlexDirectionOrWrap (FlexDirection {})

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

column : FlexDirectionOrWrap (FlexDirection {})

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

columnReverse : FlexDirectionOrWrap (FlexDirection {})

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

serif : FontFamily {}

sansSerif : FontFamily {}

monospace : FontFamily {}

cursive : FontFamily {}

fantasy : FontFamily {}

xxSmall : FontSize {}

xSmall : FontSize {}

small : FontSize {}

large : FontSize {}

xLarge : FontSize {}

xxLarge : FontSize {}

smaller : FontSize {}

larger : FontSize {}

normal : Normal

italic : FontStyle {}

oblique : FontStyle {}

bold : FontWeight {}

lighter : FontWeight {}

bolder : FontWeight {}

smallCaps : FontVariantCaps {}

allSmallCaps : FontVariantCaps {}

petiteCaps : FontVariantCaps {}

allPetiteCaps : FontVariantCaps {}

unicase : FontVariantCaps {}

titlingCaps : FontVariantCaps {}

commonLigatures : FontVariantLigatures {}

noCommonLigatures : FontVariantLigatures {}

discretionaryLigatures : FontVariantLigatures {}

noDiscretionaryLigatures : FontVariantLigatures {}

historicalLigatures : FontVariantLigatures {}

noHistoricalLigatures : FontVariantLigatures {}

contextual : FontVariantLigatures {}

noContextual : FontVariantLigatures {}

liningNums : FontVariantNumeric {}

oldstyleNums : FontVariantNumeric {}

proportionalNums : FontVariantNumeric {}

tabularNums : FontVariantNumeric {}

diagonalFractions : FontVariantNumeric {}

stackedFractions : FontVariantNumeric {}

ordinal : FontVariantNumeric {}

slashedZero : FontVariantNumeric {}

default : Cursor {}

pointer : Cursor {}

crosshair : Cursor {}

contextMenu : Cursor {}

help : Cursor {}

progress : Cursor {}

wait : Cursor {}

cell : Cursor {}

text_ : Cursor {}

verticalText : Cursor {}

cursorAlias : Cursor {}

copy : Cursor {}

move : Cursor {}

noDrop : Cursor {}

notAllowed : Cursor {}

eResize : Cursor {}

nResize : Cursor {}

neResize : Cursor {}

nwResize : Cursor {}

sResize : Cursor {}

seResize : Cursor {}

swResize : Cursor {}

wResize : Cursor {}

ewResize : Cursor {}

nsResize : Cursor {}

neswResize : Cursor {}

nwseResize : Cursor {}

colResize : Cursor {}

rowResize : Cursor {}

allScroll : Cursor {}

zoomIn : Cursor {}

zoomOut : Cursor {}

grab : Cursor {}

grabbing : Cursor {}

Length

type alias Length compatible units =

{ compatible

| value : String

, length : Compatible

, numericValue : Float

, units : units

, unitLabel : String

}

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

pct : Float -> Pct

pct units.

px : Float -> Px

px units.

em : Float -> Em

em units.

pt : Float -> Pt

pt units.

ex : Float -> Ex

ex units.

ch : Float -> Ch

ch units.

rem : Float -> Rem

rem units.

vh : Float -> Vh

vh units.

vw : Float -> Vw

vw units.

vmin : Float -> Vmin

vmin units.

vmax : Float -> Vmax

vmax units.

mm : Float -> Mm

``https://developer.mozilla.org/en-US/docs/Web/CSS/length#mm units.

cm : Float -> Cm

cm units.

inches : Float -> In

in units.

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

pc : Float -> Pc

pc units.

int :

Int

-> IntOrAuto

(LengthOrNumberOrAutoOrNoneOrContent

(LengthOrNumber

(FontWeight

(Number

{ numericValue : Float

, unitLabel : String

, units : UnitlessInteger

}

)

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

num :

Float

-> LengthOrNumberOrAutoOrNoneOrContent

(LengthOrNumber

(Number

{ numericValue : Float

, unitLabel : String

, units : UnitlessFloat

}

)

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

zero :

{ value : String

, length : Compatible

, lengthOrNumber : Compatible

, lengthOrNone : Compatible

, lengthOrAuto : Compatible

, lengthOrMinMaxDimension : Compatible

, lengthOrNoneOrMinMaxDimension : Compatible

, number : Compatible

, outline : Compatible

, units : UnitlessInteger

, unitLabel : String

, numericValue : Float

, lengthOrAutoOrCoverOrContain : Compatible

}

Convenience length value that compiles to 0 with no units.

stylesheet
  [ ul
      [ padding zero ]
  ]

...compiles to:

ul {
    padding: 0;
}

(|+|) :

Length compatible units

-> Length compatible units

Add two lengths.

>>> em 2 |+| em 3
em 5

(|-|) :

Length compatible units

-> Length compatible units

Subtract two lengths.

>>> em 7 |-| em 3
em 4

(|*|) :

Length compatible units

-> Length compatible units

Multiply two lengths.

>>> em 3 |*| em 6
em 18

(|/|) :

Length compatible units

-> Length compatible units

Divide two lengths.

>>> em 9 |/| em 2
em 4.5

calc :

Calc compatibleA

-> CalcExpression

-> Calc compatibleB

-> CalculatedLength

The css calc function.

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




-- calc(100vh - (2px + 2rem))


screenMinusBorderAndFooter =
    calc (vh 100) minus (calc (px 2) plus (rem 2))


myWidth =
    width almostPct100


myHeight =
    height screenMinusBorderAndFooter

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

plus : CalcExpression

Use with calc to add lengths together

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

minus : CalcExpression

Use with calc to subtract lengths from eachother

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

Length Units

type alias Px =

ExplicitLength PxUnits

px units.

type alias Em =

ExplicitLength EmUnits

em units.

type alias Rem =

ExplicitLength RemUnits

rem units.

type alias Pct =

ExplicitLength PercentageUnits

pct units.

type alias Ex =

ExplicitLength ExUnits

ex units.

type alias Ch =

ExplicitLength ChUnits

ch units.

type alias Vh =

ExplicitLength VhUnits

vh units.

type alias Vw =

ExplicitLength VwUnits

vw units.

type alias Vmin =

ExplicitLength VMinUnits

vmin units.

type alias Vmax =

ExplicitLength VMaxUnits

vmax units.

type alias Mm =

ExplicitLength MMUnits

``https://developer.mozilla.org/en-US/docs/Web/CSS/length#mm units.

type alias Cm =

ExplicitLength CMUnits

cm units.

type alias In =

ExplicitLength InchUnits

in units.

type alias Pt =

ExplicitLength PtUnits

pt units.

type alias Pc =

ExplicitLength PcUnits

pc units.

Angle

deg : number -> AngleOrDirection (Angle {})

deg units.

rad : number -> AngleOrDirection (Angle {})

rad units.

grad : number -> AngleOrDirection (Angle {})

grad units.

turn : number -> AngleOrDirection (Angle {})

turn units.

Pseudo-Classes

pseudoClass : String -> List Style -> Style

Define a custom pseudo-class.

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

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

...outputs

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

active : List Style -> Style

An :active pseudo-class.

any : String -> List Style -> Style

An :any pseudo-class.

checked : List Style -> Style

A :checked pseudo-class.

dir : Directionality -> List Style -> Style

A :dir pseudo-class.

disabled : List Style -> Style

A :disabled pseudo-class.

empty : List Style -> Style

An :empty pseudo-class.

enabled : List Style -> Style

An :enabled pseudo-class.

first : List Style -> Style

A :first pseudo-class.

firstChild : List Style -> Style

A :first-child pseudo-class.

firstOfType : List Style -> Style

A :first-of-type pseudo-class.

fullscreen : List Style -> Style

A :fullscreen pseudo-class.

focus : List Style -> Style

A :focus pseudo-class.

hover : List Style -> Style

An :hover pseudo-class.

visited : List Style -> Style

An :visited pseudo-class.

indeterminate : List Style -> Style

An :indeterminate pseudo-class.

invalid : List Style -> Style

An :invalid pseudo-class.

lang : String -> List Style -> Style

A :lang pseudo-class.

lastChild : List Style -> Style

A :last-child pseudo-class.

lastOfType : List Style -> Style

A :last-of-type pseudo-class.

link : List Style -> Style

A :link pseudo-class.

nthChild : String -> List Style -> Style

An :nth-child pseudo-class.

nthLastChild : String -> List Style -> Style

An :nth-last-child pseudo-class.

nthLastOfType : String -> List Style -> Style

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

nthOfType : String -> List Style -> Style

An :nth pseudo-class.

onlyChild : List Style -> Style

An :only-child pseudo-class.

onlyOfType : List Style -> Style

An :only-of-type pseudo-class.

optional : List Style -> Style

An :optional pseudo-class.

outOfRange : List Style -> Style

An :out-of-range pseudo-class.

readWrite : List Style -> Style

A :read-write pseudo-class.

required : List Style -> Style

A :required pseudo-class.

root : List Style -> Style

A :root pseudo-class.

scope : List Style -> Style

A :scope pseudo-class.

target : List Style -> Style

A :target pseudo-class.

valid : List Style -> Style

A :valid pseudo-class.

Pseudo-Elements

pseudoElement : String -> List Style -> Style

Define a custom pseudo-element.

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

...outputs

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

after : List Style -> Style

An ::after pseudo-element.

before : List Style -> Style

A ::before pseudo-element.

firstLetter : List Style -> Style

A ::first-letter pseudo-element.

firstLine : List Style -> Style

A ::first-line pseudo-element.

selection : List Style -> Style

A ::selection pseudo-element.

Source

src_ : ImportType compatible -> String

Quoting

qt : String -> String

For use with font-family

fontFamily    serif
fontFamilies  [(qt "Gill Sans Extrabold"), "Helvetica", .value sansSerif]

Misc

type alias Compatible =

Compatible

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

DEPRECATED in favor of Html.Styled.Attributes.css. This function will be removed in the next major release of elm-css.

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

styles = asPairs >> Html.Attributes.style


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

absolute : Position {}

An absolute position value.

position absolute

all : All compatible -> Style

An all property.

allPetiteCaps : FontVariantCaps {}

allSmallCaps : FontVariantCaps {}

auto :

{ lengthOrAuto : Compatible

, overflow : Compatible

, textRendering : Compatible

, flexBasis : Compatible

, lengthOrNumberOrAutoOrNoneOrContent : Compatible

, alignItemsOrAuto : Compatible

, justifyContentOrAuto : Compatible

, cursor : Compatible

, value : String

, lengthOrAutoOrCoverOrContain : Compatible

, intOrAuto : Compatible

, touchAction : Compatible

}

baseline : VerticalAlign a b

The baseline vertical-align value.

verticalAlign baseline

block : Display {}

bold : FontWeight {}

bolder : FontWeight {}

border : Length compatible units -> Style

Sets border

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

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

Sets border

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

border3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border

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

borderBlockEnd : Length compatible units -> Style

Sets border-block-end

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

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

Sets border-block-end

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

borderBlockEnd3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-end

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

borderBlockEndColor : ColorValue compatible -> Style

Sets border-block-end-color

borderBlockEndColor (rgb 101 202 0)

borderBlockEndStyle : BorderStyle compatible -> Style

Sets border-block-end-style

borderBlockEndStyle dashed

borderBlockStart : Length compatible units -> Style

Sets border-block-start

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

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

Sets border-block-start

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

borderBlockStart3 :

Length compatibleA units

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-start

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

borderBlockStartColor : ColorValue compatible -> Style

Sets border-block-start-color

borderBlockStartColor (rgb 101 202 0)

borderBlockStartStyle : BorderStyle compatible -> Style

Sets border-block-start-style

borderBlockStartStyle dashed

borderBottom : Length compatible units -> Style

Sets border-bottom

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

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

Sets border-bottom

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

borderBottom3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-bottom

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

borderBottomColor : ColorValue compatible -> Style

Sets border-bottom-color

borderBottomColor (rgb 101 202 0)

borderBottomLeftRadius : Length compatible units -> Style

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)

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

Sets border-bottom-left-radius

borderBottomLeftRadius  (em 4)
borderBottomLeftRadius2 (em 4) (px 2)

borderBottomRightRadius : Length compatible units -> Style

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)

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

Sets border-bottom-right-radius

borderBottomRightRadius  (em 4)
borderBottomRightRadius2 (em 4) (px 2)

borderBottomStyle : BorderStyle compatible -> Style

Sets border-bottom-style

borderBottomStyle dashed

borderWidth : Length compatible units -> Style

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

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

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderWidth3 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Style

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderWidth4 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Length compatibleD unitsD

-> Style

Sets border-width

borderWidth  (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)

borderBottomWidth : Length compatible units -> Style

Sets border-bottom-width

borderBottomWidth (em 4)

borderBox : BoxSizing (BackgroundClip {})

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

borderColor : ColorValue compatible -> Style

Sets border-color

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

borderColor2 : ColorValue compatibleA -> ColorValue compatibleB -> Style

Sets border-color

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

borderColor3 :

ColorValue compatibleA

-> ColorValue compatibleB

-> ColorValue compatibleC

-> Style

Sets border-color

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

borderColor4 :

ColorValue compatibleA

-> ColorValue compatibleB

-> ColorValue compatibleC

-> ColorValue compatibleD

-> Style

Sets border-color

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

borderImageOutset : LengthOrNumber compatible -> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset3 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageOutset4 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> LengthOrNumber compatibleD

-> Style

Sets border-image-outset

borderImageOutset  (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)

borderImageWidth : LengthOrNumber compatible -> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth3 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

borderImageWidth4 :

LengthOrNumber compatibleA

-> LengthOrNumber compatibleB

-> LengthOrNumber compatibleC

-> LengthOrNumber compatibleD

-> Style

Sets border-image-width

borderImageWidth  (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)

borderInlineEnd : Length compatible units -> Style

Sets border-block-end

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

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

Sets border-block-end

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

borderInlineEnd3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-end

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

borderInlineEndColor : ColorValue compatible -> Style

Sets border-inline-end-color

borderInlineEndColor (rgb 101 202 0)

borderInlineEndStyle : BorderStyle compatible -> Style

Sets border-inline-end-style

borderInlineEndStyle dashed

borderInlineEndWidth : Length compatible units -> Style

Sets border-inline-end-width

borderInlineEndWidth (em 4)

borderInlineStart : Length compatible units -> Style

Sets border-block-start

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

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

Sets border-block-start

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

borderInlineStart3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-block-start

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

borderInlineStartColor : ColorValue compatible -> Style

Sets border-inline-start-color

borderInlineStartColor (rgb 101 202 0)

borderInlineStartStyle : BorderStyle compatible -> Style

Sets border-inline-start-style

borderInlineStartStyle dashed

borderLeft : Length compatible units -> Style

Sets border-left

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

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

Sets border-left

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

borderLeft3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-left

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

borderLeftColor : ColorValue compatible -> Style

Sets border-left-color

borderLeftColor (rgb 101 202 0)

borderLeftStyle : BorderStyle compatible -> Style

Sets border-left-style

borderLeftStyle dashed

borderLeftWidth : Length compatible units -> Style

Sets border-left-width

borderLeftWidth (em 4)

borderRadius : Length compatible units -> Style

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

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

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRadius3 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Style

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRadius4 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Length compatibleD unitsD

-> Style

Sets border-radius

borderRadius  (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)

borderRight : Length compatible units -> Style

Sets border-right

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

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

Sets border-right

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

borderRight3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-right

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

borderRightColor : ColorValue compatible -> Style

Sets border-right-color

borderRightColor (rgb 101 202 0)

borderRightStyle : BorderStyle compatible -> Style

Sets border-right-style

borderRightStyle dashed

borderRightWidth : Length compatible units -> Style

Sets border-right-width

borderRightWidth (em 4)

borderStyle : BorderStyle compatible -> Style

Sets border-style

borderStyle dashed

borderCollapse : BorderCollapse compatible -> Style

Sets border-collapse

borderCollapse collapse

borderTop : Length compatible units -> Style

Sets border-top

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

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

Sets border-top

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

borderTop3 :

Length compatibleA unitsA

-> BorderStyle compatibleB

-> ColorValue compatibleC

-> Style

Sets border-top

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

borderTopColor : ColorValue compatible -> Style

Sets border-top-color

borderTopColor (rgb 101 202 0)

borderTopLeftRadius : Length compatible units -> Style

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)

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

Sets border-top-left-radius

borderTopLeftRadius  (em 4)
borderTopLeftRadius2 (em 4) (px 2)

borderTopRightRadius : Length compatible units -> Style

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)

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

Sets border-top-right-radius

borderTopRightRadius  (em 4)
borderTopRightRadius2 (em 4) (px 2)

borderTopStyle : BorderStyle compatible -> Style

Sets border-top-style

borderTopStyle dashed

borderTopWidth : Length compatible units -> Style

Sets border-top-width

borderTopWidth  (em 4)
borderTopWidth2 (em 4) (px 2)

bottom : LengthOrAuto compatible -> Style

The bottom property.

position absolute
bottom (px 5)

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

verticalAlign bottom

column : FlexDirectionOrWrap (FlexDirection {})

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

columnReverse : FlexDirectionOrWrap (FlexDirection {})

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

commonLigatures : FontVariantLigatures {}

content : LengthOrNumberOrAutoOrNoneOrContent (FlexBasis {})

The content value for the flex-basis property.

contentBox : BoxSizing (BackgroundClip {})

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

contextual : FontVariantLigatures {}

cursive : FontFamily {}

dashed : BorderStyle (TextDecorationStyle {})

A dashed border style.

diagonalFractions : FontVariantNumeric {}

discretionaryLigatures : FontVariantLigatures {}

dotted : BorderStyle (TextDecorationStyle {})

A dotted border style.

double : BorderStyle (TextDecorationStyle {})

A double border style.

fantasy : FontFamily {}

fillBox : TransformBox {}

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

fixed : Position (BackgroundAttachment {})

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

position fixed

flat : TransformStyle {}

The flat value for the transform-style property.

displayFlex : Style

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

flexEnd : AlignItems a b

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

flexStart : AlignItems a b

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

groove : BorderStyle {}

A groove border style.

hex : String -> Color

[RGB color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()) in hexadecimal notation. You can optionally include # as the first character, for benefits like syntax highlighting in editors, ease of copy/pasting from tools which express these as e.g. #abcdef0, etc.

hidden : Overflow (BorderStyle (Visibility {}))

hidden overflow value.

This can also represent a hidden border style, as well as a hidden visibility.

historicalLigatures : FontVariantLigatures {}

hsl : Float -> Float -> Float -> Color

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

hsla : Float -> Float -> Float -> Float -> Color

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

important : Style -> Style

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

inherit : BasicProperty

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

initial : BasicProperty

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

inline : Display {}

inlineBlock : Display {}

inlineFlex : Display {}

Sets the display style to inline-flex

table : Display {}

Sets the display style to table

inlineTable : Display {}

Sets the display style to inline-table

tableCell : Display {}

Sets the display style to table-cell

tableRow : Display {}

Sets the display style to table-row

tableColumn : Display {}

Sets the display style to table-column

tableCaption : Display {}

Sets the display style to table-caption

tableRowGroup : Display {}

Sets the display style to table-row-group

tableColumnGroup : Display {}

Sets the display style to table-column-group

tableHeaderGroup : Display {}

Sets the display style to table-header-group

tableFooterGroup : Display {}

Sets the display style to table-footer-group

inlineListItem : Display {}

inset : BorderStyle {}

An inset border style.

italic : FontStyle {}

large : FontSize {}

larger : FontSize {}

lighter : FontWeight {}

liningNums : FontVariantNumeric {}

listItem : Display {}

manipulation : TouchAction {}

The manipulation value for the touch-action property.

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

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

transform (matrix 0.5 1 1.5 2 2.5 3)

matrix3d :

number

-> number

-> Transform {}

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

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

middle : VerticalAlign a b

The middle vertical-align value.

verticalAlign middle

monospace : FontFamily {}

noCommonLigatures : FontVariantLigatures {}

noContextual : FontVariantLigatures {}

noDiscretionaryLigatures : FontVariantLigatures {}

noHistoricalLigatures : FontVariantLigatures {}

noWrap : WhiteSpace (FlexDirectionOrWrap (FlexWrap {}))

none :

{ borderStyle : Compatible

, cursor : Compatible

, display : Compatible

, lengthOrNumberOrAutoOrNoneOrContent : Compatible

, none : Compatible

, lengthOrNone : Compatible

, lengthOrNoneOrMinMaxDimension : Compatible

, listStyleType : Compatible

, listStyleTypeOrPositionOrImage : Compatible

, outline : Compatible

, resize : Compatible

, textDecorationLine : Compatible

, transform : Compatible

, backgroundImage : Compatible

, value : String

, textTransform : Compatible

, touchAction : Compatible

, updateFrequency : Compatible

, blockAxisOverflow : Compatible

, inlineAxisOverflow : Compatible

, pointerDevice : Compatible

, hoverCapability : Compatible

, scriptingSupport : Compatible

}

normal : Normal

oblique : FontStyle {}

oldstyleNums : FontVariantNumeric {}

ordinal : FontVariantNumeric {}

outset : BorderStyle {}

An outset border style.

panX : TouchAction {}

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

panLeft : TouchAction {}

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

panRight : TouchAction {}

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

panY : TouchAction {}

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

panUp : TouchAction {}

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

panDown : TouchAction {}

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

perspective : number -> Transform {}

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

 transform (perspective 0.5)

petiteCaps : FontVariantCaps {}

pinchZoom : TouchAction {}

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

position : Position compatible -> Style

The position property.

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

Sets 'float' float : Float compatible -> Style

float right

preserve3d : TransformStyle {}

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

proportionalNums : FontVariantNumeric {}

relative : Position {}

A relative position value.

position relative

rgb : Int -> Int -> Int -> Color

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

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

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

ridge : BorderStyle {}

A ridge border style.

rotate : Angle compatible -> Transform {}

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

 transform (rotate (deg 90))

rotate3d : number -> number -> number -> Angle compatible -> Transform {}

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

 transform (rotate3d 1 1 1 (deg 90))

rotateX : Angle compatible -> Transform {}

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

 transform (rotateX (deg 90))

rotateY : Angle compatible -> Transform {}

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

 transform (rotateY (deg 90))

rotateZ : Angle compatible -> Transform {}

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

 transform (rotateZ (deg 90))

row : FlexDirectionOrWrap (FlexDirection {})

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

rowReverse : FlexDirectionOrWrap (FlexDirection {})

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

sansSerif : FontFamily {}

scale : number -> Transform {}

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

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

scale2 : number -> number -> Transform {}

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

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

scale3d : number -> number -> number -> Transform {}

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

 transform (scale3d 0.5 0.5 1)

scaleX : number -> Transform {}

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

 transform (scaleX 0.5)

scaleY : number -> Transform {}

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

 transform (scaleY 0.5)

scroll :

{ value : String

, scroll : Compatible

, overflow : Compatible

, backgroundAttachment : Compatible

, blockAxisOverflow : Compatible

, inlineAxisOverflow : Compatible

}

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

serif : FontFamily {}

skew : Angle compatible -> Transform {}

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

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

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

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

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

skewX : Angle compatible -> Transform {}

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

 transform (skewX (deg 90))

skewY : Angle compatible -> Transform {}

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

transform (skewY (deg 90))

slashedZero : FontVariantNumeric {}

small : FontSize {}

smallCaps : FontVariantCaps {}

smaller : FontSize {}

solid : BorderStyle (TextDecorationStyle {})

A solid border style.

stackedFractions : FontVariantNumeric {}

static : Position {}

A static position value.

position static

sticky : Position {}

A sticky position value.

position sticky

stretch : AlignItems a b

Thestretch value for the align-items property.

sub : VerticalAlign a b

The sub vertical-align value.

verticalAlign sub

super : VerticalAlign a b

The super vertical-align value.

verticalAlign super

tabularNums : FontVariantNumeric {}

textBottom : VerticalAlign a b

The text-bottom vertical-align value.

verticalAlign textBottom

textTop : VerticalAlign a b

The text-top vertical-align value.

verticalAlign textTop

titlingCaps : FontVariantCaps {}

top : LengthOrAuto compatible -> Style

The top property.

position absolute
top (px 5)

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

verticalAlign top

translate : Length compatible units -> Transform {}

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

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

translate2 :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Transform {}

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

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

translate3d :

Length compatibleA unitsA

-> Length compatibleB unitsB

-> Length compatibleC unitsC

-> Transform {}

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

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

translateX : Length compatible units -> Transform {}

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

transform (translateX (px 100))

translateY : Length compatible units -> Transform {}

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

transform (translateY (px 100))

translateZ : Length compatible units -> Transform {}

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

transform (translateZ (px 100))

transparent : ColorValue NonMixable

A transparent color.

unicase : FontVariantCaps {}

unset : BasicProperty

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

viewBox : TransformBox {}

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

visible : Overflow (Visibility {})

The visible value for the overflow property. This can also represent a visible visibility.

wavy : TextDecorationStyle {}

A wavy text decoration style.

wrap : FlexDirectionOrWrap (FlexWrap {})

Thewrap value for the flex-wrap property.

wrapReverse : FlexDirectionOrWrap (FlexWrap {})

Thewrap-reverse value for the flex-wrap property.

xLarge : FontSize {}

xSmall : FontSize {}

xxLarge : FontSize {}

xxSmall : FontSize {}

backgroundRepeat : BackgroundRepeatShorthand compatible -> Style

Sets 'background-repeat'

backgroundRepeat repeatX

backgroundRepeat2 :

BackgroundRepeat compatibleA

-> BackgroundRepeat compatibleB

-> Style

Sets 'background-repeat'

backgroundRepeat2 repeat noRepeat

repeatX : BackgroundRepeatShorthand {}

The repeat-x background-repeat value.

repeatY : BackgroundRepeatShorthand {}

The repeat-y background-repeat value.

repeat : BackgroundRepeat {}

The repeat background-repeat value.

space : BackgroundRepeat {}

The space background-repeat value.

round : BackgroundRepeat {}

The round background-repeat value.

noRepeat : BackgroundRepeat {}

The no-repeat background-repeat value.

backgroundAttachment : BackgroundAttachment compatible -> Style

Sets 'background-attachment'

backgroundAttachment fixed

local : BackgroundAttachment {}

The local background-attachment value.

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

Sets 'background-blend-mode'

backgroundBlendMode darken

multiply : BackgroundBlendMode compatible

The multiply blend-mode.

overlay : BackgroundBlendMode compatible

The overlay blend-mode.

darken : BackgroundBlendMode compatible

The darken blend-mode.

lighten : BackgroundBlendMode compatible

The lighten blend-mode.

colorDodge : BackgroundBlendMode compatible

The color-dodge blend-mode.

colorBurn : BackgroundBlendMode compatible

The color-burn blend-mode.

hardLight : BackgroundBlendMode compatible

The hard-light blend-mode.

softLight : BackgroundBlendMode compatible

The soft-light blend-mode.

difference : BackgroundBlendMode compatible

The difference blend-mode.

exclusion : BackgroundBlendMode compatible

The exclusion blend-mode.

hue : BackgroundBlendMode compatible

The hue blend-mode.

saturation : BackgroundBlendMode compatible

The saturation blend-mode.

luminosity : BackgroundBlendMode compatible

The luminosity blend-mode.

screenBlendMode : BackgroundBlendMode compatible

The screen blend-mode.

backgroundClip : BackgroundClip compatible -> Style

Sets 'background-clip'

backgroundClip borderBox

paddingBox : BackgroundClip {}

The padding-box background-clip value.

backgroundImage : BackgroundImage compatible -> Style

Sets 'background-image'

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

url : String -> BackgroundImage {}

The url background-image value.

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

Sets 'background-position'

backgroundPosition top

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

backgroundPosition2 (px 10) zero

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

Sets 'background-position'

backgroundPosition2 (px 10) zero

backgroundOrigin : BackgroundOrigin compatible -> Style

Sets 'background-origin'

backgroundOrigin borderBox

backgroundSize : LengthOrAutoOrCoverOrContain compatible -> Style

Sets 'background-size'

backgroundSize cover

backgroundSize2 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> Style

Sets 'background-size'

backgroundSize2 50% auto

cover :

{ value : String

, lengthOrAutoOrCoverOrContain : Compatible

}

The cover background-size value.

contain :

{ value : String

, lengthOrAutoOrCoverOrContain : Compatible

}

The contain background-size value.

both : Resize {}

The both value for the resize property.

horizontal : Resize {}

The horizontal value for the resize property.

vertical : Resize {}

The vertical value for the resize property.

breakWord : Wrap {}

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

spaceAround : JustifyContent a b

Thespace-around value for the justify-content property.

spaceBetween : JustifyContent a b

Thespace-between value for the justify-content property.

separate : BorderCollapse {}

A separate border-collapse.

collapse : BorderCollapse (Visibility {})

A collapse border-collapse. This can also represent a collapse visibility.

listStyleType : ListStyleType compatible -> Style

The list-style-type property.

disc : ListStyle (ListStyleType {})

circle : ListStyle (ListStyleType {})

square : ListStyle (ListStyleType {})

decimal : ListStyle (ListStyleType {})

decimalLeadingZero : ListStyle (ListStyleType {})

lowerRoman : ListStyle (ListStyleType {})

upperRoman : ListStyle (ListStyleType {})

lowerGreek : ListStyle (ListStyleType {})

lowerAlpha : ListStyle (ListStyleType {})

lowerLatin : ListStyle (ListStyleType {})

upperAlpha : ListStyle (ListStyleType {})

upperLatin : ListStyle (ListStyleType {})

arabicIndic : ListStyle (ListStyleType {})

armenian : ListStyle (ListStyleType {})

bengali : ListStyle (ListStyleType {})

cjkEarthlyBranch : ListStyle (ListStyleType {})

cjkHeavenlyStem : ListStyle (ListStyleType {})

devanagari : ListStyle (ListStyleType {})

georgian : ListStyle (ListStyleType {})

gujarati : ListStyle (ListStyleType {})

gurmukhi : ListStyle (ListStyleType {})

kannada : ListStyle (ListStyleType {})

khmer : ListStyle (ListStyleType {})

lao : ListStyle (ListStyleType {})

malayalam : ListStyle (ListStyleType {})

myanmar : ListStyle (ListStyleType {})

oriya : ListStyle (ListStyleType {})

telugu : ListStyle (ListStyleType {})

thai : ListStyle (ListStyleType {})

listStylePosition : ListStylePosition compatible -> Style

The list-style-position property.

inside : ListStyle (ListStylePosition {})

outside : ListStyle (ListStylePosition {})

listStyle : ListStyle compatible -> Style

The list-style shorthand property.

listStyle2 : ListStyle compatible1 -> ListStyle compatible2 -> Style

The list-style shorthand property.

listStyle3 :

ListStyle compatible1

-> ListStyle compatible2

-> ListStyle compatible3

-> Style

The list-style shorthand property.

linearGradient :

ColorStop compatibleA compatibleB unit

-> ColorStop compatibleA compatibleB unit

-> List (ColorStop compatibleA compatibleB unit)

-> BackgroundImage (ListStyle {})

Sets linear-gradient

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

linearGradient2 :

AngleOrDirection compatible

-> ColorStop compatibleA compatibleB unit

-> List (ColorStop compatibleA compatibleB unit)

-> BackgroundImage (ListStyle {})

Sets linear-gradient

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

stop : ColorValue compatibleA -> ColorStop compatibleA compatibleB unit

ColorStop

stop2 :

ColorValue compatibleA

-> Length compatibleB unit

-> ColorStop compatibleA compatibleB unit

ColorStop

toBottom : AngleOrDirection {}

Sets the direction to bottom

toBottomLeft : AngleOrDirection {}

Sets the direction to bottom left

toBottomRight : AngleOrDirection {}

Sets the direction to bottom right

toLeft : AngleOrDirection {}

Sets the direction to left

toRight : AngleOrDirection {}

Sets the direction to right

toTop : AngleOrDirection {}

Sets the direction to top

toTopLeft : AngleOrDirection {}

Sets the direction to top left

toTopRight : AngleOrDirection {}

Sets the direction to top right

type alias AlignItems a b =

Length a b -> Style

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

type alias All compatible =

{ compatible | value : String, all : Compatible }

type alias Angle compatible =

{ compatible | value : String, angle : Compatible }

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

type alias AngleOrDirection compatible =

{ compatible | value : String, angleOrDirection : Compatible }

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

type alias BackgroundAttachment compatible =

{ compatible

| value : String

, backgroundAttachment : Compatible

}

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

type alias BackgroundBlendMode a =

ColorValue a -> Style

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

type alias BackgroundClip compatible =

{ compatible | value : String, backgroundClip : Compatible }

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

type alias BackgroundImage compatible =

{ compatible | value : String, backgroundImage : Compatible }

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

type alias BackgroundOrigin compatible =

BackgroundClip compatible

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

type alias BackgroundRepeat compatible =

{ compatible

| value : String

, backgroundRepeat : Compatible

, backgroundRepeatShorthand : Compatible

}

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

type alias BackgroundRepeatShorthand compatible =

{ compatible

| value : String

, backgroundRepeatShorthand : Compatible

}

type alias BasicProperty =

{ value : String

, all : Compatible

, alignItems : Compatible

, borderStyle : Compatible

, boxSizing : Compatible

, color : Compatible

, cursor : Compatible

, display : Compatible

, flexBasis : Compatible

, flexWrap : Compatible

, flexDirection : Compatible

, flexDirectionOrWrap : Compatible

, justifyContent : Compatible

, none : Compatible

, number : Compatible

, outline : Compatible

, overflow : Compatible

, visibility : Compatible

, textDecorationLine : Compatible

, textRendering : Compatible

, textIndent : Compatible

, textDecorationStyle : Compatible

, textTransform : Compatible

, length : Compatible

, lengthOrAuto : Compatible

, lengthOrNone : Compatible

, lengthOrNumber : Compatible

, lengthOrMinMaxDimension : Compatible

, lengthOrNoneOrMinMaxDimension : Compatible

, lengthOrNumberOrAutoOrNoneOrContent : Compatible

, listStyleType : Compatible

, listStylePosition : Compatible

, listStyleTypeOrPositionOrImage : Compatible

, fontFamily : Compatible

, fontSize : Compatible

, fontStyle : Compatible

, fontWeight : Compatible

, fontVariant : Compatible

, units : IncompatibleUnits

, numericValue : Float

, unitLabel : String

, warnings : List String

, backgroundRepeat : Compatible

, backgroundRepeatShorthand : Compatible

, backgroundAttachment : Compatible

, backgroundBlendMode : Compatible

, backgroundOrigin : Compatible

, backgroundImage : Compatible

, lengthOrAutoOrCoverOrContain : Compatible

, intOrAuto : Compatible

, touchAction : Compatible

, whiteSpace : Compatible

}

type alias BorderCollapse compatible =

{ compatible | value : String, borderCollapse : Compatible }

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

type alias BorderStyle compatible =

{ compatible | value : String, borderStyle : Compatible }

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

type alias BoxSizing compatible =

{ compatible | value : String, boxSizing : Compatible }

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

type alias Calc compatible =

{ compatible | value : String, calc : Compatible }

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

type CalcExpression

type alias Cursor compatible =

{ compatible | value : String, cursor : Compatible }

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

type Directionality

type alias Display compatible =

{ compatible | value : String, display : Compatible }

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

type alias ExplicitLength units =

{ value : String

, numericValue : Float

, units : units

, unitLabel : String

, length : Compatible

, lengthOrAuto : Compatible

, lengthOrNumber : Compatible

, lengthOrNone : Compatible

, lengthOrMinMaxDimension : Compatible

, lengthOrNoneOrMinMaxDimension : Compatible

, textIndent : Compatible

, flexBasis : Compatible

, absoluteLength : Compatible

, lengthOrNumberOrAutoOrNoneOrContent : Compatible

, fontSize : Compatible

, lengthOrAutoOrCoverOrContain : Compatible

, calc : Compatible

}

type alias FeatureTagValue compatible =

{ compatible

| value : String

, featureTagValue : Compatible

, warnings : List String

}

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

type alias FlexBasis compatible =

{ compatible | value : String, flexBasis : Compatible }

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

type alias FlexDirection compatible =

{ compatible | value : String, flexDirection : Compatible }

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

type alias FlexDirectionOrWrap compatible =

{ compatible

| value : String

, flexDirectionOrWrap : Compatible

}

type alias FlexWrap compatible =

{ compatible | value : String, flexWrap : Compatible }

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

type alias FontFamily compatible =

{ compatible | value : String, fontFamily : Compatible }

A font family

type alias FontStyle compatible =

{ compatible | value : String, fontStyle : Compatible }

type alias FontStyleOrFeatureTagValue compatible =

{ compatible

| value : String

, warnings : List String

, fontStyle : Compatible

, featureTagValue : Compatible

}

type alias FontVariant compatible =

{ compatible | value : String, fontVariant : Compatible }

type alias FontVariantCaps compatible =

{ compatible

| value : String

, fontVariant : Compatible

, fontVariantCaps : Compatible

}

type alias FontVariantLigatures compatible =

{ compatible

| value : String

, fontVariant : Compatible

, fontVariantLigatures : Compatible

}

type alias FontVariantNumeric compatible =

{ compatible

| value : String

, fontVariant : Compatible

, fontVariantNumeric : Compatible

}

type alias FontWeight compatible =

{ compatible | value : String, fontWeight : Compatible }

type alias ImportType compatible =

{ compatible | value : String, import_ : Compatible }

type IncompatibleUnits

type alias JustifyContent a b =

Length a b -> Style

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

type alias LengthOrAuto compatible =

{ compatible | value : String, lengthOrAuto : Compatible }

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

type alias LengthOrAutoOrCoverOrContain compatible =

{ compatible

| value : String

, lengthOrAutoOrCoverOrContain : Compatible

}

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

type alias LengthOrMinMaxDimension compatible =

{ compatible

| value : String

, lengthOrMinMaxDimension : Compatible

}

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

type alias LengthOrNone compatible =

{ compatible | value : String, lengthOrNone : Compatible }

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

type alias LengthOrNoneOrMinMaxDimension compatible =

{ compatible

| value : String

, lengthOrNoneOrMinMaxDimension : Compatible

}

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

type alias LengthOrNumber compatible =

{ compatible | value : String, lengthOrNumber : Compatible }

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

type alias LengthOrNumberOrAutoOrNoneOrContent compatible =

{ compatible

| value : String

, lengthOrNumberOrAutoOrNoneOrContent : Compatible

}

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

type alias ListStyle compatible =

{ compatible

| value : String

, listStyleTypeOrPositionOrImage : Compatible

}

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

type alias ListStylePosition compatible =

{ compatible | value : String, listStylePosition : Compatible }

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

type alias ListStyleType compatible =

{ compatible | value : String, listStyleType : Compatible }

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

type alias MinMaxDimension compatible =

{ compatible

| value : String

, minMaxDimension : Compatible

, lengthOrMinMaxDimension : Compatible

, lengthOrNoneOrMinMaxDimension : Compatible

}

type alias NonMixable =

{}

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

type alias None compatible =

{ compatible | value : String, none : Compatible }

type alias Number compatible =

{ compatible | value : String, number : Compatible }

type alias Outline compatible =

{ compatible | value : String, outline : Compatible }

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

type alias Overflow compatible =

{ compatible | value : String, overflow : Compatible }

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

type alias Visibility compatible =

{ compatible | value : String, visibility : Compatible }

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

type alias Position compatible =

{ compatible | value : String, position : Compatible }

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

type alias Resize compatible =

{ compatible | value : String, resize : Compatible }

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

type alias TextDecorationLine compatible =

{ compatible

| value : String

, textDecorationLine : Compatible

}

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

type alias TextDecorationStyle compatible =

{ compatible

| value : String

, textDecorationStyle : Compatible

}

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

type alias TextIndent compatible =

{ compatible | value : String, textIndent : Compatible }

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

type alias TextOrientation compatible =

{ compatible | value : String, textOrientation : Compatible }

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

type alias TextOverflow compatible =

{ compatible | value : String, textOverflow : Compatible }

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

type alias TextRendering compatible =

{ compatible | value : String, textRendering : Compatible }

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

type alias TextTransform compatible =

{ compatible | value : String, textTransform : Compatible }

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

type alias TouchAction compatible =

{ compatible | value : String, touchAction : Compatible }

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

type alias Transform compatible =

{ compatible | value : String, transform : Compatible }

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

type alias TransformBox compatible =

{ compatible | value : String, transformBox : Compatible }

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

type alias TransformStyle compatible =

{ compatible | value : String, transformStyle : Compatible }

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

type alias Value compatible =

{ compatible | value : String }

type alias VerticalAlign a b =

Length a b -> Style

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

type alias WhiteSpace compatible =

{ compatible | value : String, whiteSpace : Compatible }

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

type alias Wrap compatible =

{ compatible | value : String, overflowWrap : Compatible }

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

pre : WhiteSpace {}

The pre white-space value.

whiteSpace pre

preLine : WhiteSpace {}

The pre-line white-space value.

whiteSpace preLine

preWrap : WhiteSpace {}

The pre-wrap white-space value.

whiteSpace preWrap

Types

type alias FontSize compatible =

{ compatible | value : String, fontSize : Compatible }

A font size

type alias ColorValue compatible =

{ compatible

| value : String

, color : Compatible

, warnings : List String

}

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

type alias ColorStop compatibleA compatibleB unit =

( ColorValue compatibleA, Maybe (Length compatibleB unit) )

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

type alias IntOrAuto compatible =

{ compatible | value : String, intOrAuto : Compatible }

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

Intentionally Unsupported

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

thin : IntentionallyUnsupportedPleaseSeeDocs

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

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

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

medium : FontSize {}

thick : IntentionallyUnsupportedPleaseSeeDocs

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

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

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

blink : IntentionallyUnsupportedPleaseSeeDocs

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

rtfeldman/elm-css/12.0.1

Css

Style Reuse

Unsupported Properties

Style

Properties

Values

Color values

Font values

Other values

Length

Length Units

Angle

Pseudo-Classes

Pseudo-Elements

Source

Quoting

Misc

Types

Intentionally Unsupported

Modules