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:
css
attribute, elm-css generates a classname and some style information.Html.Styled
value which wraps that element.toUnstyled
converts this Html.Styled
value to a normal Html
value which represents both the requested element as well as a <style>
elementThis 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.
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!
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.
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 ]
]
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
textDecorationStyle dotted
textEmphasisColor : ColorValue compatible -> Style
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
fontFeatureSettings (featureTag "hist")
fontFeatureSettings (featureTag2 "smcp" on)
fontFeatureSettings (featureTag2 "swsh" 2)
fontFeatureSettingsList : List (FeatureTagValue a) -> Style
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
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
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.
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
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
borderTopLeftRadius (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style
borderTopLeftRadius (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopRightRadius : Length compatible units -> Style
borderTopRightRadius (em 4)
borderTopRightRadius2 (em 4) (px 2)
borderTopRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style
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
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)
ExplicitLength PxUnits
px
units.
ExplicitLength EmUnits
em
units.
ExplicitLength RemUnits
rem
units.
ExplicitLength PercentageUnits
pct
units.
ExplicitLength ExUnits
ex
units.
ExplicitLength ChUnits
ch
units.
ExplicitLength VhUnits
vh
units.
ExplicitLength VwUnits
vw
units.
ExplicitLength VMinUnits
vmin
units.
ExplicitLength VMaxUnits
vmax
units.
ExplicitLength MMUnits
mm
units.
ExplicitLength CMUnits
cm
units.
ExplicitLength InchUnits
in
units.
ExplicitLength PtUnits
pt
units.
ExplicitLength PcUnits
pc
units.
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.
{ 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.
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
disabled : List Style -> Style
empty : List Style -> Style
An :empty
pseudo-class.
enabled : List Style -> Style
An :enabled
pseudo-class.
first : List Style -> Style
firstChild : List Style -> Style
firstOfType : List Style -> Style
A :first-of-type
pseudo-class.
fullscreen : List Style -> Style
focus : List Style -> Style
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
lastChild : List Style -> Style
lastOfType : List Style -> Style
link : List Style -> Style
nthChild : String -> List Style -> Style
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
onlyOfType : List Style -> Style
An :only-of-type
pseudo-class.
optional : List Style -> Style
outOfRange : List Style -> Style
An :out-of-range
pseudo-class.
readWrite : List Style -> Style
required : List Style -> Style
root : List Style -> Style
scope : List Style -> Style
target : List Style -> Style
valid : List Style -> Style
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
before : List Style -> Style
firstLetter : List Style -> Style
A ::first-letter
pseudo-element.
firstLine : List Style -> Style
A ::first-line
pseudo-element.
selection : List Style -> Style
src_ : ImportType compatible -> String
qt : String -> String
For use with font-family
fontFamily serif
fontFamilies [ qt "Gill Sans Extrabold", "Helvetica", .value sansSerif ]
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
stop2 : ColorValue compatibleA -> Length compatibleB unit -> ColorStop compatibleA compatibleB unit
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
Length a b -> Style
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items#Values
{ compatible | value : String
, all : Compatible
}
{ compatible | value : String
, angle : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/angle
{ compatible | value : String
, angleOrDirection : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values
{ compatible | value : String
, backgroundAttachment : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
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
.)
{ compatible | value : String
, backgroundClip : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
{ compatible | value : String
, backgroundImage : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
BackgroundClip compatible
https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
{ compatible | value : String
, backgroundRepeat : Compatible
, backgroundRepeatShorthand : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat#repeat-style
{ compatible | value : String
, backgroundRepeatShorthand : Compatible
}
{ 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
}
{ compatible | value : String
, borderCollapse : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse
{ compatible | value : String
, borderStyle : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values
{ compatible | value : String
, boxSizing : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing#Values
{ compatible | value : String
, calc : Compatible
}
https://developer.mozilla.org/en/docs/Web/CSS/calc
{ compatible | value : String
, cursor : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Values
{ compatible | value : String
, display : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/display#Values
Internal.ExplicitLength units
{ compatible | value : String
, featureTagValue : Compatible
}
https://www.microsoft.com/typography/otspec/featurelist.htm
{ compatible | value : String
, flexBasis : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
{ compatible | value : String
, flexDirection : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction#Values
{ compatible | value : String
, flexDirectionOrWrap : Compatible
}
{ compatible | value : String
, flexWrap : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap#Values
{ compatible | value : String
, fontFamily : Compatible
}
A font family
{ compatible | value : String
, fontStyle : Compatible
}
{ compatible | value : String
, fontStyle : Compatible
, featureTagValue : Compatible
}
{ compatible | value : String
, fontVariant : Compatible
}
{ compatible | value : String
, fontVariant : Compatible
, fontVariantCaps : Compatible
}
{ compatible | value : String
, fontVariant : Compatible
, fontVariantLigatures : Compatible
}
{ compatible | value : String
, fontVariant : Compatible
, fontVariantNumeric : Compatible
}
{ compatible | value : String
, fontWeight : Compatible
}
{ compatible | value : String
, import_ : Compatible
}
Internal.IncompatibleUnits
Length a b -> Style
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#Values
{ compatible | value : String
, lengthOrAuto : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/length
Internal.LengthOrAutoOrCoverOrContain compatible
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
{ compatible | value : String
, lengthOrMinMaxDimension : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/length
{ compatible | value : String
, lengthOrNone : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/length
{ compatible | value : String
, lengthOrNoneOrMinMaxDimension : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/length
{ compatible | value : String
, lengthOrNumber : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/length
{ compatible | value : String
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/flex#Values
{ compatible | value : String
, listStyleTypeOrPositionOrImage : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#Values
{ compatible | value : String
, listStylePosition : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position#Values
{ compatible | value : String
, listStyleType : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type#Values
{ compatible | value : String
, minMaxDimension : Compatible
, lengthOrMinMaxDimension : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible
}
{}
A ColorValue
that does not have red
, green
, or blue
values.
{ compatible | value : String
, none : Compatible
}
{ compatible | value : String
, number : Compatible
}
{ value : String
, numberOrInfinite : Compatible
, infinite : Compatible
}
Number { compatible | numberOrInfinite : Compatible }
{ compatible | value : String
, outline : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/outline#Values
{ compatible | value : String
, overflow : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Values
{ compatible | value : String
, visibility : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values
{ compatible | value : String
, position : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values
{ compatible | value : String
, resize : Compatible
}
https://developer.mozilla.org/en/docs/Web/CSS/resize#Values
{ compatible | value : String
, tableLayout : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout?v=control#Values
{ compatible | value : String
, textDecorationLine : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-line#Values
{ compatible | value : String
, textDecorationStyle : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style#Values
{ compatible | value : String
, textIndent : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent#Values
{ compatible | value : String
, textOrientation : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation#Values
{ compatible | value : String
, textOverflow : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Values
{ compatible | value : String
, textRendering : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering#Values
{ compatible | value : String
, textTransform : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform#Values
{ compatible | value : String
, touchAction : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action?v=control#Values
{ compatible | value : String
, transform : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Values
{ compatible | value : String
, transformBox : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box#Values
{ compatible | value : String
, transformStyle : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style#Values
{ compatible | value : String }
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.)
{ compatible | value : String
, whiteSpace : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space#Values
{ 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.
Structure.Compatible
backgroundAttachment : BackgroundAttachment compatible -> Style
backgroundAttachment fixed
backgroundBlendMode : (ColorValue NonMixable -> Style) -> Style
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
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
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.
{ compatible | value : String
, fontSize : Compatible
}
A font size
Internal.ColorValue compatible
https://developer.mozilla.org/en-US/docs/Web/CSS/color#Values
( ColorValue compatibleA
, Maybe (Length compatibleB unit)
)
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values
{ compatible | value : String
, intOrAuto : Compatible
}
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
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.