proda-ai / elm-css / Css

Define CSS styles in Elm.

import Css exposing (..)
import Html
import Html.Styled exposing (..)
import Html.Styled.Attributes exposing (css, href, src)
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; -

Kebab-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:

  1. When you define values using the css attribute, elm-css generates a classname and some style information.
  2. That classname gets added to the element receiving the attribute, and the style information gets stored in the Html.Styled value which wraps that element.
  3. 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 not stack. For example, in this code, only the second css attribute will be used. The first one will be ignored.

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

This code compiles to the following DOM structure:

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

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

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

With the exception of Lazy, you can expect toUnstyled to create one <style> element total, not one per element that uses css.

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 all the appropriate classname declarations.

Style Reuse

To reuse styles (like mixins in other CSS systems) use 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" ]

Because only one css attribute per element has any effect, you cannot reuse styles after compiling them to attributes. Trying to reuse styles by using multiple attributes will not not work:

greenBorder : Attribute msg
greenBorder =
    css [ borderColor green ]

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

view : Model -> Html Msg
view model =
    -- Doesn't work!
    button [ bigBold, greenBorder ] [ text "Ok" ]

In this case, the bigBold attribute will be completely ignored in favor of the greenBorder attribute, because it came last in the attribute list. If you want to mix and match styles, use Style values!

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.Global.selector functions let you define custom properties and selectors, respectively.

Style


type alias Style =
Preprocess.Style

batch : List Style -> Style

Create a style from multiple other styles.

underlineOnHover =
    batch
        [ textDecoration none

        , hover
            [ textDecoration underline ]
        ]

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

...has the same result as:

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

Properties

property : String -> String -> Style

Define a custom property.

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

...outputs

-webkit-font-smoothing: none;

flex : LengthOrNumberOrAutoOrNoneOrContent compatible -> Style

Sets flex property.

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

flex2 : Number compatibleA -> LengthOrNumber compatibleB -> Style

Sets flex property.

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

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

Sets flex property.

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

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.

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

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

flexFlow2 : FlexDirectionOrWrap compatibleA -> FlexDirectionOrWrap compatibleB -> Style

Sets flex-flow property.

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

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

flexWrap : FlexWrap compatible -> Style

Sets flex-wrap property.

flexBasis : FlexBasis compatible -> Style

Sets flex-basis property.

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

flexGrow : Number compatible -> Style

Sets flex-grow property.

flexShrink : Number compatible -> Style

Sets flex-shrink property.

transformStyle : TransformStyle compatible -> Style

The transform-style property.

transformBox : TransformBox compatible -> Style

The transform-box property.

transform : Transform compatible -> Style

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

transform (scaleX 1.4)

transforms : List (Transform compatible) -> Style

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

transforms [] -- transform: none;

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

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

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

transforms [ perspective 1, scale2 1 1.4 ]

currentColor : ColorValue NonMixable

The currentColor value.

underline : TextDecorationLine {}

An underline text decoration line.

overline : TextDecorationLine {}

An overline text decoration line.

lineThrough : TextDecorationLine {}

A line-through text decoration line.

textOrientation : TextOrientation compatible -> Style

Sets text-orientation.

text - orientation mixed

textDecoration : TextDecorationLine a -> Style

Sets text-decoration

textDecoration underline

textDecoration2 underline wavy

textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

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

textDecoration2 : TextDecorationLine compatibleA -> TextDecorationStyle compatibleB -> Style

Sets text-decoration

textDecoration underline

textDecoration2 underline wavy

textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

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

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

Sets text-decoration

textDecoration underline

textDecoration2 underline wavy

textDecoration3 underline wavy (rgb 128 64 32)

You can specify multiple line decorations with textDecorations.

textDecorations [ underline, overline ]

textDecorations2 [ underline, overline ] wavy

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

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)

pointerEvents : PointerEvents compatible -> Style

The pointer-events property specifies under what circumstances (if any) a particular graphic element can become the target of mouse events.

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.

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

borderSpacing : Length compatible units -> Style

Sets border-spacing

borderSpacing (em 4)

borderSpacing2 (em 4) (px 2)

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

Sets border-spacing

borderSpacing (em 4)

borderSpacing2 (em 4) (px 2)

visibility : Visibility compatible -> Style

Values

Color values


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

all : All compatible -> Style

An all property.

important : Style -> Style

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

solid : BorderStyle (TextDecorationStyle {})

A solid border style.

transparent : ColorValue NonMixable

A transparent color.

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

RGB color value in functional notation.

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

RGBA color value.

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

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

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

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

hex : String -> Color

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

Font values

featureTag : String -> FeatureTagValue {}

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

fontFeatureSettings (featureTag "hist")

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

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

fontFeatureSettings (featureTag2 "smcp" on)

fontFeatureSettings (featureTag2 "swsh" 2)

featureOn : Basics.Int

Alias for on value of font-feature-settings

featureOff : Basics.Int

Alias for off value of font-feature-settings

Other values

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)

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)

borderBottomStyle : BorderStyle compatible -> Style

Sets border-bottom-style

borderBottomStyle 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

borderBottomColor : ColorValue compatible -> Style

Sets border-bottom-color

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

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 : { value : String, overflow : Compatible, visibility : Compatible, pointerEvents : Compatible }

This can represent: a visible visibility, a visible overflow, or a visible pointer-events value.

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, keyframes : Compatible, lengthOrNone : Compatible, lengthOrNoneOrMinMaxDimension : Compatible, listStyleType : Compatible, listStyleTypeOrPositionOrImage : Compatible, outline : Compatible, pointerEvents : 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, pointerEvents : Compatible, touchAction : Compatible, tableLayout : 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 : { value : String, position : Compatible, backgroundAttachment : Compatible, tableLayout : Compatible }

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

position fixed

This can also be the fixed value for table-layout.

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.

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 : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Transform {}

The matrix() transform-function.

transform (matrix 0.5 1 1.5 2 2.5 3)

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

The matrix3d() transform-function.

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

perspective : Basics.Float -> Transform {}

The perspective() transform-function.

 transform (perspective 0.5)

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

The rotate3d transform-function.

 transform (rotate3d 1 1 1 (deg 90))

rotateX : Angle compatible -> Transform {}

The rotateX transform-function.

 transform (rotateX (deg 90))

rotateY : Angle compatible -> Transform {}

The rotateY transform-function.

 transform (rotateY (deg 90))

rotateZ : Angle compatible -> Transform {}

The rotateZ transform-function.

 transform (rotateZ (deg 90))

scale : Basics.Float -> Transform {}

The scale transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

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

The scale transform-function.

 transform (scale 0.5)
 transform (scale2 0.5 0.7)

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

The scale3d transform-function.

 transform (scale3d 0.5 0.5 1)

scaleX : Basics.Float -> Transform {}

The scaleX transform-function.

 transform (scaleX 0.5)

scaleY : Basics.Float -> Transform {}

The scaleY transform-function.

 transform (scaleY 0.5)

skew : Angle compatible -> Transform {}

The skew transform-function.

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

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

The skew transform-function.

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

skewX : Angle compatible -> Transform {}

The skewX transform-function.

 transform (skewX (deg 90))

skewY : Angle compatible -> Transform {}

The skewY transform-function.

transform (skewY (deg 90))

translate : Length compatible units -> Transform {}

The translate transform-function.

transform (translate (px 100))

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

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

The translate transform-function.

transform (translate (px 100))

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

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

The translateX transform-function.

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

translateX : Length compatible units -> Transform {}

The translateX transform-function.

transform (translateX (px 100))

translateY : Length compatible units -> Transform {}

The translateY transform-function.

transform (translateY (px 100))

translateZ : Length compatible units -> Transform {}

The translateZ transform-function.

transform (translateZ (px 100))

rotate : Angle compatible -> Transform {}

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

Therow value for the flex-direction property.

rowReverse : FlexDirectionOrWrap (FlexDirection {})

Therow-reverse value for the flex-direction property.

column : FlexDirectionOrWrap (FlexDirection {})

Thecolumn value for the flex-direction property.

columnReverse : FlexDirectionOrWrap (FlexDirection {})

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

visiblePainted : PointerEvents {}

A visiblePainted pointer-events value.

pointer-events: visiblePainted

visibleFill : PointerEvents {}

A visibleFill pointer-events value.

pointer-events: visibleFill

visibleStroke : PointerEvents {}

A visibleStroke pointer-events value.

pointer-events: visibleStroke

painted : PointerEvents {}

A painted pointer-events value.

pointer-events: painted

stroke : PointerEvents {}

A stroke pointer-events value.

pointer-events: stroke

Length


type alias Length compatible units =
Internal.Length compatible units

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

pct : Basics.Float -> Pct

pct units.

px : Basics.Float -> Px

px units.

em : Basics.Float -> Em

em units.

pt : Basics.Float -> Pt

pt units.

ex : Basics.Float -> Ex

ex units.

ch : Basics.Float -> Ch

ch units.

rem : Basics.Float -> Rem

rem units.

vh : Basics.Float -> Vh

vh units.

vw : Basics.Float -> Vw

vw units.

vmin : Basics.Float -> Vmin

vmin units.

vmax : Basics.Float -> Vmax

vmax units.

mm : Basics.Float -> Mm

mm units.

cm : Basics.Float -> Cm

cm units.

inches : Basics.Float -> In

in units.

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

pc : Basics.Float -> Pc

pc units.

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

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

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

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

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

Convenience length value that compiles to 0 with no units.

css [ padding zero ]

...compiles to:

padding: 0;

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

The css calc function.

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

-- calc(100vh - (2px + 2rem))
screenMinusBorderAndFooter =
    calc (vh 100) minus (calc (px 2) plus (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

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 : Basics.Float -> AngleOrDirection (Angle {})

deg units.

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

rad units.

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

grad units.

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

turn units.

Duration


type alias Duration compatible =
{ compatible | value : String
, duration : Compatible 
}

A CSS time duration.

The spec says that a unitless zero is not allowed for these. You must specify either ms or sec!

sec : Basics.Float -> Duration {}

A duration in seconds.

ms : Basics.Float -> Duration {}

A duration in milliseconds.

Pseudo-Classes

pseudoClass : String -> List Style -> Style

Define a custom pseudo-class.

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

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

...outputs

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

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

active : List Style -> Style

An :active pseudo-class.

any : String -> List Style -> Style

An :any pseudo-class.

checked : List Style -> Style

A :checked 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.

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

...outputs

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

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

after : List Style -> Style

An ::after pseudo-element.

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

listStyleType : ListStyleType compatible -> Style

The list-style-type property.

disc : ListStyle (ListStyleType {})

circle : ListStyle (ListStyleType {})

square : ListStyle (ListStyleType {})

decimal : ListStyle (ListStyleType {})

decimalLeadingZero : ListStyle (ListStyleType {})

lowerRoman : ListStyle (ListStyleType {})

upperRoman : ListStyle (ListStyleType {})

lowerGreek : ListStyle (ListStyleType {})

lowerAlpha : ListStyle (ListStyleType {})

lowerLatin : ListStyle (ListStyleType {})

upperAlpha : ListStyle (ListStyleType {})

upperLatin : ListStyle (ListStyleType {})

arabicIndic : ListStyle (ListStyleType {})

armenian : ListStyle (ListStyleType {})

bengali : ListStyle (ListStyleType {})

cjkEarthlyBranch : ListStyle (ListStyleType {})

cjkHeavenlyStem : ListStyle (ListStyleType {})

devanagari : ListStyle (ListStyleType {})

georgian : ListStyle (ListStyleType {})

gujarati : ListStyle (ListStyleType {})

gurmukhi : ListStyle (ListStyleType {})

kannada : ListStyle (ListStyleType {})

khmer : ListStyle (ListStyleType {})

lao : ListStyle (ListStyleType {})

malayalam : ListStyle (ListStyleType {})

myanmar : ListStyle (ListStyleType {})

oriya : ListStyle (ListStyleType {})

telugu : ListStyle (ListStyleType {})

thai : ListStyle (ListStyleType {})

listStylePosition : ListStylePosition compatible -> Style

The list-style-position property.

inside : ListStyle (ListStylePosition {})

outside : ListStyle (ListStylePosition {})

listStyle : ListStyle compatible -> Style

The list-style shorthand property.

listStyle2 : ListStyle compatible1 -> ListStyle compatible2 -> Style

The list-style shorthand property.

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

The list-style shorthand property.

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

Sets linear-gradient

linearGradient (stop2 red <| pct 75) (stop <| hex "222") []

linearGradient (stop red) (stop <| hex "222") [ stop green, stop blue ]

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

Sets linear-gradient

linearGradient2 toBottomLeft (stop2 red <| pct 75) (stop <| hex "222") []

linearGradient2 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
, keyframes : Compatible
, outline : Compatible
, overflow : Compatible
, pointerEvents : 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 : Basics.Float
, unitLabel : String
, backgroundRepeat : Compatible
, backgroundRepeatShorthand : Compatible
, backgroundAttachment : Compatible
, backgroundBlendMode : Compatible
, backgroundOrigin : Compatible
, backgroundImage : Compatible
, lengthOrAutoOrCoverOrContain : Compatible
, intOrAuto : Compatible
, touchAction : Compatible
, whiteSpace : Compatible
, tableLayout : 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 alias Display compatible =
{ compatible | value : String
, display : Compatible 
}

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


type alias ExplicitLength units =
Internal.ExplicitLength units


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

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
, 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 alias IncompatibleUnits =
Internal.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 =
Internal.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 Infinite =
{ value : String
, numberOrInfinite : Compatible
, infinite : Compatible 
}


type alias NumberOrInfinite compatible =
Number { compatible | numberOrInfinite : 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 TableLayout compatible =
{ compatible | value : String
, tableLayout : Compatible 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout?v=control#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

infinite : Infinite

The infinite value.

url : String -> BackgroundImage {}

The url background-image value.

vertical : Resize {}

The vertical value for the resize property.

tableRowGroup : Display {}

Sets the display style to table-row-group

tableRow : Display {}

Sets the display style to table-row

tableLayout : TableLayout compatible -> Style

Sets table-layout property.

tableLayout (auto | fixed | inherit | initial | unset)

tableHeaderGroup : Display {}

Sets the display style to table-header-group

tableFooterGroup : Display {}

Sets the display style to table-footer-group

tableColumnGroup : Display {}

Sets the display style to table-column-group

tableCell : Display {}

Sets the display style to table-cell

tableColumn : Display {}

Sets the display style to table-column

tableCaption : Display {}

Sets the display style to table-caption

table : Display {}

Sets the display style to table

space : BackgroundRepeat {}

The space background-repeat value.

softLight : BackgroundBlendMode compatible

The soft-light blend-mode.

separate : BorderCollapse {}

A separate border-collapse.

screenBlendMode : BackgroundBlendMode compatible

The screen blend-mode.

saturation : BackgroundBlendMode compatible

The saturation blend-mode.

round : BackgroundRepeat {}

The round background-repeat value.

repeatY : BackgroundRepeatShorthand {}

The repeat-y background-repeat value.

repeatX : BackgroundRepeatShorthand {}

The repeat-x background-repeat value.

repeat : BackgroundRepeat {}

The repeat background-repeat value.

pointerEventsFill : Style

property-events: fill. This works around the fact that fill is already taken.

pointerEventsAll : Style

property-events: all. This works around the fact that all is already taken.


type alias Compatible =
Structure.Compatible

backgroundAttachment : BackgroundAttachment compatible -> Style

Sets 'background-attachment'

backgroundAttachment fixed

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

Sets 'background-blend-mode'

backgroundBlendMode darken

backgroundClip : BackgroundClip compatible -> Style

Sets 'background-clip'

backgroundClip borderBox

backgroundImage : BackgroundImage compatible -> Style

Sets 'background-image'

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

backgroundOrigin : BackgroundOrigin compatible -> Style

Sets 'background-origin'

backgroundOrigin borderBox

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

backgroundRepeat : BackgroundRepeatShorthand compatible -> Style

Sets 'background-repeat'

backgroundRepeat repeatX

backgroundRepeat2 : BackgroundRepeat compatibleA -> BackgroundRepeat compatibleB -> Style

Sets 'background-repeat'

backgroundRepeat2 repeat noRepeat

backgroundSize : LengthOrAutoOrCoverOrContain compatible -> Style

Sets 'background-size'

backgroundSize cover

backgroundSize2 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> Style

Sets 'background-size'

backgroundSize2 50 % auto

both : Resize {}

The both value for the resize property.

breakWord : Wrap {}

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

collapse : BorderCollapse (Visibility {})

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

colorBurn : BackgroundBlendMode compatible

The color-burn blend-mode.

colorDodge : BackgroundBlendMode compatible

The color-dodge blend-mode.

contain : { value : String, lengthOrAutoOrCoverOrContain : Compatible }

The contain background-size value.

cover : { value : String, lengthOrAutoOrCoverOrContain : Compatible }

The cover background-size value.

darken : BackgroundBlendMode compatible

The darken blend-mode.

difference : BackgroundBlendMode compatible

The difference blend-mode.

displayFlex : Style

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

exclusion : BackgroundBlendMode compatible

The exclusion blend-mode.

hardLight : BackgroundBlendMode compatible

The hard-light blend-mode.

horizontal : Resize {}

The horizontal value for the resize property.

hue : BackgroundBlendMode compatible

The hue blend-mode.

inlineListItem : Display {}

inlineTable : Display {}

Sets the display style to inline-table

lighten : BackgroundBlendMode compatible

The lighten blend-mode.

listItem : Display {}

local : BackgroundAttachment {}

The local background-attachment value.

luminosity : BackgroundBlendMode compatible

The luminosity blend-mode.

manipulation : TouchAction {}

The manipulation value for the touch-action property.

multiply : BackgroundBlendMode compatible

The multiply blend-mode.

noRepeat : BackgroundRepeat {}

The no-repeat background-repeat value.

overlay : BackgroundBlendMode compatible

The overlay blend-mode.

paddingBox : BackgroundClip {}

The padding-box background-clip value.

panDown : TouchAction {}

The pan-down 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.

panUp : TouchAction {}

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

panX : TouchAction {}

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

panY : TouchAction {}

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

pinchZoom : TouchAction {}

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

animationName : Animations.Keyframes compatible -> Style

See keyframes in the Css.Animations module.

animationDelay : Duration compatible -> Style

An animation-delay property.

animationDuration : Duration compatible -> Style

An animation-duration ) property.

animationIterationCount : NumberOrInfinite compatible -> Style

An animation-iteration-count ) property.

Types


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

A font size


type alias ColorValue compatible =
Internal.ColorValue compatible

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:

css [ property "border-left" "thin" ]

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:

css [ property "border-left" "thick" ]

blink : IntentionallyUnsupportedPleaseSeeDocs

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