Functions for building stylesheets.
Structure.Compatible
Preprocess.Stylesheet
asPairs : List Style -> List ( String, String )
Take a list of styles and return a list of key-value pairs that
can then be passed to a style
attribute.
styled = asPairs >> Html.Attributes.style
button
[ styled [ position absolute, left (px 5) ] ]
[ text "Whee!" ]
absolute : Position {}
An absolute
position
value.
position absolute
all : All compatible -> Style
An all
property.
allPetiteCaps : FontVariantCaps {}
allSmallCaps : FontVariantCaps {}
withClass : String -> List Style -> Style
auto : { lengthOrAuto : Compatible, overflow : Compatible, textRendering : Compatible, flexBasis : Compatible, lengthOrNumberOrAutoOrNoneOrContent : Compatible, alignItemsOrAuto : Compatible, justifyContentOrAuto : Compatible, cursor : Compatible, value : String, lengthOrAutoOrCoverOrContain : Compatible, intOrAuto : Compatible, touchAction : Compatible }
baseline : VerticalAlign a b
The baseline
vertical-align
value.
verticalAlign baseline
block : Display {}
bold : FontWeight {}
bolder : FontWeight {}
border : Length compatible units -> Style
Sets border
border (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
border2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border
border (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
border3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border
border (px 10)
border2 (px 10) dashed
border3 (px 10) dashed (rgb 11 14 17)
borderBlockEnd : Length compatible units -> Style
Sets border-block-end
borderBlockEnd (px 5)
borderBlockEnd2 (px 5) dashed
borderBlockEnd3 (px 5) dashed (rgb 11 14 17)
borderBlockEnd2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-block-end
borderBlockEnd (px 5)
borderBlockEnd2 (px 5) dashed
borderBlockEnd3 (px 5) dashed (rgb 11 14 17)
borderBlockEnd3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-block-end
borderBlockEnd (px 5)
borderBlockEnd2 (px 5) dashed
borderBlockEnd3 (px 5) dashed (rgb 11 14 17)
borderBlockEndColor : ColorValue compatible -> Style
borderBlockEndColor (rgb 101 202 0)
borderBlockEndStyle : BorderStyle compatible -> Style
borderBlockEndStyle dashed
borderBlockStart : Length compatible units -> Style
Sets border-block-start
borderBlockStart (px 5)
borderBlockStart2 (px 5) dashed
borderBlockStart3 (px 5) dashed (rgb 11 14 17)
borderBlockStart2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-block-start
borderBlockStart (px 5)
borderBlockStart2 (px 5) dashed
borderBlockStart3 (px 5) dashed (rgb 11 14 17)
borderBlockStart3 : Length compatibleA units -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-block-start
borderBlockStart (px 5)
borderBlockStart2 (px 5) dashed
borderBlockStart3 (px 5) dashed (rgb 11 14 17)
borderBlockStartColor : ColorValue compatible -> Style
borderBlockStartColor (rgb 101 202 0)
borderBlockStartStyle : BorderStyle compatible -> Style
borderBlockStartStyle dashed
borderBottom : Length compatible units -> Style
Sets border-bottom
borderBottom (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
borderBottom2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-bottom
borderBottom (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
borderBottom3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-bottom
borderBottom (px 5)
borderBottom2 (px 5) dashed
borderBottom3 (px 5) dashed (rgb 11 14 17)
borderBottomColor : ColorValue compatible -> Style
Sets border-bottom-color
borderBottomColor (rgb 101 202 0)
borderBottomLeftRadius : Length compatible units -> Style
Sets border-bottom-left-radius
borderBottomLeftRadius (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderBottomLeftRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style
Sets border-bottom-left-radius
borderBottomLeftRadius (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderBottomRightRadius : Length compatible units -> Style
Sets border-bottom-right-radius
borderBottomRightRadius (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderBottomRightRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style
Sets border-bottom-right-radius
borderBottomRightRadius (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderBottomStyle : BorderStyle compatible -> Style
Sets border-bottom-style
borderBottomStyle dashed
borderWidth : Length compatible units -> Style
Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)
borderWidth2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style
Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)
borderWidth3 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Style
Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)
borderWidth4 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Length compatibleD unitsD -> Style
Sets border-width
borderWidth (em 4)
borderWidth2 (em 4) (px 2)
borderWidth3 (em 4) (px 2) (pct 5)
borderWidth4 (em 4) (px 2) (pct 5) (px 3)
borderBottomWidth : Length compatible units -> Style
Sets border-bottom-width
borderBottomWidth (em 4)
borderBox : BoxSizing (BackgroundClip {})
The border-box
value for the box-sizing
property.
Can also be used as border-box
value for the background-clip
property.
borderColor : ColorValue compatible -> Style
Sets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)
borderColor2 : ColorValue compatibleA -> ColorValue compatibleB -> Style
Sets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)
borderColor3 : ColorValue compatibleA -> ColorValue compatibleB -> ColorValue compatibleC -> Style
Sets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)
borderColor4 : ColorValue compatibleA -> ColorValue compatibleB -> ColorValue compatibleC -> ColorValue compatibleD -> Style
Sets border-color
borderColor (rgb 12 11 10)
borderColor2 (rgb 12 11 10) (hex "FFBBCC")
borderColor3 (rgb 12 11 10) (hex "FFBBCC") inherit
borderColor4 (rgb 12 11 10) (hex "FFBBCC") inherit (rgb 1 2 3)
borderImageOutset : LengthOrNumber compatible -> Style
Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)
borderImageOutset2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style
Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)
borderImageOutset3 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> Style
Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)
borderImageOutset4 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> LengthOrNumber compatibleD -> Style
Sets border-image-outset
borderImageOutset (int 2)
borderImageOutset2 (int 2) (px 15)
borderImageOutset3 (int 2) (px 15) (int 1.5)
borderImageOutset4 (int 2) (px 15) (int 14) (em 3)
borderImageWidth : LengthOrNumber compatible -> Style
Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)
borderImageWidth2 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> Style
Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)
borderImageWidth3 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> Style
Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)
borderImageWidth4 : LengthOrNumber compatibleA -> LengthOrNumber compatibleB -> LengthOrNumber compatibleC -> LengthOrNumber compatibleD -> Style
Sets border-image-width
borderImageWidth (int 3)
borderImageWidth2 (int 3) (px 15)
borderImageWidth3 (int 3) (px 15) auto
borderImageWidth4 (int 3) (px 15) auto (int 2)
borderInlineEnd : Length compatible units -> Style
Sets border-block-end
borderInlineEnd (px 5)
borderInlineEnd2 (px 5) dashed
borderInlineEnd3 (px 5) dashed (rgb 11 14 17)
borderInlineEnd2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-block-end
borderInlineEnd (px 5)
borderInlineEnd2 (px 5) dashed
borderInlineEnd3 (px 5) dashed (rgb 11 14 17)
borderInlineEnd3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-block-end
borderInlineEnd (px 5)
borderInlineEnd2 (px 5) dashed
borderInlineEnd3 (px 5) dashed (rgb 11 14 17)
borderInlineEndColor : ColorValue compatible -> Style
borderInlineEndColor (rgb 101 202 0)
borderInlineEndStyle : BorderStyle compatible -> Style
borderInlineEndStyle dashed
borderInlineEndWidth : Length compatible units -> Style
borderInlineEndWidth (em 4)
borderInlineStart : Length compatible units -> Style
Sets border-block-start
borderInlineStart (px 5)
borderInlineStart2 (px 5) dashed
borderInlineStart3 (px 5) dashed (rgb 11 14 17)
borderInlineStart2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-block-start
borderInlineStart (px 5)
borderInlineStart2 (px 5) dashed
borderInlineStart3 (px 5) dashed (rgb 11 14 17)
borderInlineStart3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-block-start
borderInlineStart (px 5)
borderInlineStart2 (px 5) dashed
borderInlineStart3 (px 5) dashed (rgb 11 14 17)
borderInlineStartColor : ColorValue compatible -> Style
Sets border-inline-start-color
borderInlineStartColor (rgb 101 202 0)
borderInlineStartStyle : BorderStyle compatible -> Style
Sets border-inline-start-style
borderInlineStartStyle dashed
borderLeft : Length compatible units -> Style
Sets border-left
borderLeft (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
borderLeft2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-left
borderLeft (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
borderLeft3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-left
borderLeft (px 5)
borderLeft2 (px 5) dashed
borderLeft3 (px 5) dashed (rgb 11 14 17)
borderLeftColor : ColorValue compatible -> Style
Sets border-left-color
borderLeftColor (rgb 101 202 0)
borderLeftStyle : BorderStyle compatible -> Style
Sets border-left-style
borderLeftStyle dashed
borderLeftWidth : Length compatible units -> Style
Sets border-left-width
borderLeftWidth (em 4)
borderRadius : Length compatible units -> Style
Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderRadius2 : Length compatibleA unitsA -> Length compatibleB unitsB -> Style
Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderRadius3 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Style
Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderRadius4 : Length compatibleA unitsA -> Length compatibleB unitsB -> Length compatibleC unitsC -> Length compatibleD unitsD -> Style
Sets border-radius
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderRight : Length compatible units -> Style
Sets border-right
borderRight (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
borderRight2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-right
borderRight (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
borderRight3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-right
borderRight (px 5)
borderRight2 (px 5) dashed
borderRight3 (px 5) dashed (rgb 11 14 17)
borderRightColor : ColorValue compatible -> Style
Sets border-right-color
borderRightColor (rgb 101 202 0)
borderRightStyle : BorderStyle compatible -> Style
Sets border-right-style
borderRightStyle dashed
borderRightWidth : Length compatible units -> Style
Sets border-right-width
borderRightWidth (em 4)
borderStyle : BorderStyle compatible -> Style
Sets border-style
borderStyle dashed
borderCollapse : BorderCollapse compatible -> Style
Sets border-collapse
borderCollapse collapse
borderTop : Length compatible units -> Style
Sets border-top
borderTop (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
borderTop2 : Length compatibleA unitsA -> BorderStyle compatibleB -> Style
Sets border-top
borderTop (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
borderTop3 : Length compatibleA unitsA -> BorderStyle compatibleB -> ColorValue compatibleC -> Style
Sets border-top
borderTop (px 5)
borderTop2 (px 5) dashed
borderTop3 (px 5) dashed (rgb 11 14 17)
borderTopColor : ColorValue compatible -> Style
Sets border-top-color
borderTopColor (rgb 101 202 0)
borderTopLeftRadius : Length compatible units -> Style
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)
borderTopStyle : BorderStyle compatible -> Style
Sets border-top-style
borderTopStyle dashed
borderTopWidth : Length compatible units -> Style
Sets border-top-width
borderTopWidth (em 4)
borderTopWidth2 (em 4) (px 2)
bottom : LengthOrAuto compatible -> Style
The bottom
property.
position absolute
bottom (px 5)
This can also be used as a bottom
vertical-align value:
verticalAlign bottom
column : FlexDirectionOrWrap (FlexDirection {})
Thecolumn
value for the
flex-direction property.
columnReverse : FlexDirectionOrWrap (FlexDirection {})
Thecolumn-reverse
value for the
flex-direction property.
commonLigatures : FontVariantLigatures {}
content : LengthOrNumberOrAutoOrNoneOrContent (FlexBasis {})
The content
value for the
flex-basis property.
contentBox : BoxSizing (BackgroundClip {})
The content-box
value for the box-sizing
property.
Can also be used as content-box
value for the background-clip
property.
contextual : FontVariantLigatures {}
cursive : FontFamily {}
dashed : BorderStyle (TextDecorationStyle {})
A dashed
border style.
diagonalFractions : FontVariantNumeric {}
discretionaryLigatures : FontVariantLigatures {}
dotted : BorderStyle (TextDecorationStyle {})
A dotted
border style.
double : BorderStyle (TextDecorationStyle {})
A double
border style.
fantasy : FontFamily {}
fillBox : TransformBox {}
The fill-box
value for the transform-box
property.
fixed : Position (BackgroundAttachment {})
A fixed
position
value.
This can also represent a fixed
background-attachment
value.
position fixed
flat : TransformStyle {}
The flat
value for the transform-style
property.
displayFlex : Style
display: flex
. This works around the fact that
flex
is already taken.
flexEnd : AlignItems a b
Theflex-end
value for the
align-items property.
Can also be used with flex-box's justify-content property to apply the value of flex-end.
flexStart : AlignItems a b
Theflex-start
value for the
align-items property.
Can also be used with flex-box's justify-content property to apply the value of flex-start.
groove : BorderStyle {}
A groove
border style.
hidden : Overflow (BorderStyle {})
hidden
overflow
value.
This can also represent a hidden
border style.
historicalLigatures : FontVariantLigatures {}
important : Style -> Style
Transforms the given property by adding !important to the end of its declaration.
inherit : BasicProperty
The inherit
value.
Any CSS property can be set to this value.
initial : BasicProperty
The initial
value.
Any CSS property can be set to this value.
inline : Display {}
inlineBlock : Display {}
inlineFlex : Display {}
Sets the display style to inline-flex
table : Display {}
Sets the display style to table
inlineTable : Display {}
Sets the display style to inline-table
tableCell : Display {}
Sets the display style to table-cell
tableRow : Display {}
Sets the display style to table-row
tableColumn : Display {}
Sets the display style to table-column
tableCaption : Display {}
Sets the display style to table-caption
tableRowGroup : Display {}
Sets the display style to table-row-group
tableColumnGroup : Display {}
Sets the display style to table-column-group
tableHeaderGroup : Display {}
Sets the display style to table-header-group
tableFooterGroup : Display {}
Sets the display style to table-footer-group
inlineListItem : Display {}
inset : BorderStyle {}
An inset
border style.
italic : FontStyle {}
large : FontSize {}
larger : FontSize {}
lighter : FontWeight {}
liningNums : FontVariantNumeric {}
listItem : Display {}
manipulation : TouchAction {}
The manipulation
value for the touch-action
property.
matrix : 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)
middle : VerticalAlign a b
The middle
vertical-align
value.
verticalAlign middle
monospace : FontFamily {}
noCommonLigatures : FontVariantLigatures {}
noContextual : FontVariantLigatures {}
noDiscretionaryLigatures : FontVariantLigatures {}
noHistoricalLigatures : FontVariantLigatures {}
noWrap : WhiteSpace (FlexDirectionOrWrap (FlexWrap {}))
none : { borderStyle : Compatible, cursor : Compatible, display : Compatible, lengthOrNumberOrAutoOrNoneOrContent : Compatible, none : Compatible, lengthOrNone : Compatible, lengthOrNoneOrMinMaxDimension : Compatible, listStyleType : Compatible, listStyleTypeOrPositionOrImage : Compatible, outline : Compatible, resize : Compatible, textDecorationLine : Compatible, transform : Compatible, backgroundImage : Compatible, value : String, textTransform : Compatible, touchAction : Compatible, updateFrequency : Compatible, blockAxisOverflow : Compatible, inlineAxisOverflow : Compatible, pointerDevice : Compatible, hoverCapability : Compatible, scriptingSupport : Compatible }
normal : Normal
oblique : FontStyle {}
oldstyleNums : FontVariantNumeric {}
ordinal : FontVariantNumeric {}
outset : BorderStyle {}
An outset
border style.
panX : TouchAction {}
The pan-x
value for the touch-action
property.
panLeft : TouchAction {}
The pan-left
value for the touch-action
property.
panRight : TouchAction {}
The pan-right
value for the touch-action
property.
panY : TouchAction {}
The pan-y
value for the touch-action
property.
panUp : TouchAction {}
The pan-up
value for the touch-action
property.
panDown : TouchAction {}
The pan-down
value for the touch-action
property.
perspective : Basics.Float -> Transform {}
The perspective()
transform-function.
transform (perspective 0.5)
petiteCaps : FontVariantCaps {}
pinchZoom : TouchAction {}
The pinch-zoom
value for the touch-action
property.
position : Position compatible -> Style
The position
property.
float : (ExplicitLength IncompatibleUnits -> Style) -> Style
Sets 'float' float : Float compatible -> Style
float right
preserve3d : TransformStyle {}
The preserve-3d
value for the transform-style
property.
proportionalNums : FontVariantNumeric {}
relative : Position {}
A relative
position
value.
position relative
ridge : BorderStyle {}
A ridge
border style.
rotate : Angle compatible -> Transform {}
The rotate
transform-function.
transform (rotate (deg 90))
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))
row : FlexDirectionOrWrap (FlexDirection {})
Therow
value for the
flex-direction property.
rowReverse : FlexDirectionOrWrap (FlexDirection {})
Therow-reverse
value for the
flex-direction property.
sansSerif : FontFamily {}
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)
scroll : { value : String, scroll : Compatible, overflow : Compatible, backgroundAttachment : Compatible, blockAxisOverflow : Compatible, inlineAxisOverflow : Compatible }
The scroll
overflow
value.
This can also represent a scroll
background-attachment
value.
It can also be used in the overflow-block and oveflow-line media features.
serif : FontFamily {}
skew : Angle compatible -> Transform {}
The skew
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))
slashedZero : FontVariantNumeric {}
small : FontSize {}
smallCaps : FontVariantCaps {}
smaller : FontSize {}
stackedFractions : FontVariantNumeric {}
static : Position {}
A static
position
value.
position static
sticky : Position {}
A sticky
position
value.
position sticky
stretch : AlignItems a b
Thestretch
value for the
align-items property.
sub : VerticalAlign a b
The sub
vertical-align
value.
verticalAlign sub
super : VerticalAlign a b
The super
vertical-align
value.
verticalAlign super
tabularNums : FontVariantNumeric {}
textBottom : VerticalAlign a b
The text-bottom
vertical-align
value.
verticalAlign textBottom
textTop : VerticalAlign a b
The text-top
vertical-align
value.
verticalAlign textTop
titlingCaps : FontVariantCaps {}
top : LengthOrAuto compatible -> Style
The top
property.
position absolute
top (px 5)
This can also be used as a top
vertical-align value:
verticalAlign top
translate : Length compatible units -> Transform {}
The translate
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))
unicase : FontVariantCaps {}
unset : BasicProperty
The unset
value.
Any CSS property can be set to this value.
viewBox : TransformBox {}
The view-box
value for the transform-box
property.
visible : Overflow {}
The visible
value for the overflow
property.
wavy : TextDecorationStyle {}
A wavy
text decoration style.
wrap : FlexDirectionOrWrap (FlexWrap {})
Thewrap
value for the
flex-wrap property.
wrapReverse : FlexDirectionOrWrap (FlexWrap {})
Thewrap-reverse
value for the
flex-wrap property.
xLarge : FontSize {}
xSmall : FontSize {}
xxLarge : FontSize {}
xxSmall : FontSize {}
backgroundRepeat : BackgroundRepeatShorthand compatible -> Style
Sets 'background-repeat'
backgroundRepeat repeatX
backgroundRepeat2 : BackgroundRepeat compatibleA -> BackgroundRepeat compatibleB -> Style
Sets 'background-repeat'
backgroundRepeat2 repeat noRepeat
repeatX : BackgroundRepeatShorthand {}
The repeat-x
background-repeat
value.
repeatY : BackgroundRepeatShorthand {}
The repeat-y
background-repeat
value.
repeat : BackgroundRepeat {}
The repeat
background-repeat
value.
space : BackgroundRepeat {}
The space
background-repeat
value.
round : BackgroundRepeat {}
The round
background-repeat
value.
noRepeat : BackgroundRepeat {}
The no-repeat
background-repeat
value.
backgroundAttachment : BackgroundAttachment compatible -> Style
backgroundAttachment fixed
local : BackgroundAttachment {}
The local
background-attachment
value.
backgroundBlendMode : (ColorValue NonMixable -> Style) -> Style
backgroundBlendMode darken
multiply : BackgroundBlendMode compatible
The multiply
blend-mode
.
overlay : BackgroundBlendMode compatible
The overlay
blend-mode
.
darken : BackgroundBlendMode compatible
The darken
blend-mode
.
lighten : BackgroundBlendMode compatible
The lighten
blend-mode
.
colorDodge : BackgroundBlendMode compatible
The color-dodge
blend-mode
.
colorBurn : BackgroundBlendMode compatible
The color-burn
blend-mode
.
hardLight : BackgroundBlendMode compatible
The hard-light
blend-mode
.
softLight : BackgroundBlendMode compatible
The soft-light
blend-mode
.
difference : BackgroundBlendMode compatible
The difference
blend-mode
.
exclusion : BackgroundBlendMode compatible
The exclusion
blend-mode
.
hue : BackgroundBlendMode compatible
The hue
blend-mode
.
saturation : BackgroundBlendMode compatible
The saturation
blend-mode
.
luminosity : BackgroundBlendMode compatible
The luminosity
blend-mode
.
screenBlendMode : BackgroundBlendMode compatible
The screen
blend-mode
.
backgroundClip : BackgroundClip compatible -> Style
Sets 'background-clip'
backgroundClip borderBox
paddingBox : BackgroundClip {}
The padding-box
background-clip
value.
backgroundImage : BackgroundImage compatible -> Style
Sets 'background-image'
backgroundImage (url "http://www.example.com/chicken.jpg")
url : String -> BackgroundImage {}
The url
background-image
value.
backgroundPosition : (ExplicitLength IncompatibleUnits -> Style) -> Style
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
backgroundOrigin : BackgroundOrigin compatible -> Style
Sets 'background-origin'
backgroundOrigin borderBox
backgroundSize : LengthOrAutoOrCoverOrContain compatible -> Style
Sets 'background-size'
backgroundSize cover
backgroundSize2 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> Style
Sets 'background-size'
modBy auto (backgroundSize2 50)
cover : { value : String, lengthOrAutoOrCoverOrContain : Compatible }
The cover
background-size
value.
contain : { value : String, lengthOrAutoOrCoverOrContain : Compatible }
The contain
background-size
value.
both : Resize {}
The both
value for the resize
property.
horizontal : Resize {}
The horizontal
value for the resize
property.
vertical : Resize {}
The vertical
value for the resize
property.
breakWord : Wrap {}
The break-word
value for the overflow-wrap
property.
separate : BorderCollapse {}
A separate
border-collapse.
collapse : BorderCollapse {}
A collapse
border-collapse.
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
linearGradient toBottomLeft (stop2 red <| pct 75%) (stop <| hex "222") []
linearGradient toTop (stop red) (stop <| hex "222") [ stop green, stop blue ]
stop : ColorValue compatibleA -> ColorStop compatibleA compatibleB unit
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
, outline : Compatible
, overflow : 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
, warnings : List String
, backgroundRepeat : Compatible
, backgroundRepeatShorthand : Compatible
, backgroundAttachment : Compatible
, backgroundBlendMode : Compatible
, backgroundOrigin : Compatible
, backgroundImage : Compatible
, lengthOrAutoOrCoverOrContain : Compatible
, intOrAuto : Compatible
, touchAction : Compatible
, whiteSpace : 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
{ value : String
, numericValue : Basics.Float
, units : units
, unitLabel : String
, length : Compatible
, lengthOrAuto : Compatible
, lengthOrNumber : Compatible
, lengthOrNone : Compatible
, lengthOrMinMaxDimension : Compatible
, lengthOrNoneOrMinMaxDimension : Compatible
, textIndent : Compatible
, flexBasis : Compatible
, absoluteLength : Compatible
, lengthOrNumberOrAutoOrNoneOrContent : Compatible
, fontSize : Compatible
, lengthOrAutoOrCoverOrContain : Compatible
, calc : Compatible
}
{ compatible | value : String
, featureTagValue : Compatible
, warnings : List String
}
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
, warnings : List 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
}
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
{ compatible | value : String
, 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
}
{ 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
, 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
, 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
Preprocess.Snippet
Preprocess.Style
batch : List Style -> Style
Create a style from multiple other styles.
underlineOnHover =
batch
[ textDecoration none
, hover
[ textDecoration underline ]
]
stylesheet
[ class FancyLink
[ color (rgb 128 64 32)
, underlineOnHover
]
]
...has the same result as:
stylesheet
[ class FancyLink
[ color (rgb 128 64 32)
, textDecoration none
, hover
[ textDecoration underline ]
]
]
stylesheet : List Snippet -> Stylesheet
A stylesheet.
stylesheet
[ body
[ width (px 960)
, color (rgb 7 7 7)
]
]
compile : List Stylesheet -> { css : String, warnings : List String }
Compile the given stylesheets to a CSS string, or to an error message if it could not be compiled.
class : String -> List Style -> Snippet
stylesheet
[ class LoginFormButton
[ fontWeight normal
, color (rgb 128 64 32)
]
]
id : String -> List Style -> Snippet
An id selector.
stylesheet
[ id NavBar
[ width 960 px
, backgroundColor (rgb 123 42 208)
]
]
selector : String -> List Style -> Snippet
A custom selector. Use this for things like attribute selectors and universal selectors.
stylesheet "homepage"
[ selector "* [lang^=en]"
[ textDecoration underline
, color (rgb 7 7 7)
]
]
everything : List Style -> Snippet
A *
selector.
class Foo
[ children
[ everything
[ color (rgb 14 15 16)
, borderRadius (px 5)
]
]
]
...compiles to:
.Foo > * {
color: rgb(14, 15, 16);
border-radius: 5px;
}
children : List Snippet -> Style
descendants : List Snippet -> Style
adjacentSiblings : List Snippet -> Style
generalSiblings : List Snippet -> Style
property : String -> String -> Style
Define a custom property.
stylesheet
[ body
[ property "-webkit-font-smoothing" "none" ]
]
...outputs
body {
-webkit-font-smoothing: none;
}
flex : LengthOrNumberOrAutoOrNoneOrContent compatible -> Style
Sets flex
property.
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))
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)
textDecorationLine : TextDecorationLine compatible -> Style
Sets text-decoration-line
textDecorationLine underline
You can specify multiple line decorations with textDecorationLines
.
textDecorationLines [ underline, overline ]
textDecorations : List (TextDecorationLine compatible) -> Style
Sets text-decoration
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)
textDecorations2 : List (TextDecorationLine compatibleA) -> TextDecorationStyle compatibleB -> Style
Sets text-decoration
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)
textDecorations3 : List (TextDecorationLine compatibleA) -> TextDecorationStyle compatibleB -> ColorValue compatibleC -> Style
Sets text-decoration
textDecorations [ underline, overline ]
textDecorations2 [ underline, overline ] wavy
textDecorations3 [ underline, overline ] wavy (rgb 128 64 32)
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)
paddingBlockStart : LengthOrAuto compatible -> Style
Sets padding-block-start
paddingBlockStart (px 10)
paddingBlockEnd : LengthOrAuto compatible -> Style
Sets padding-block-end
paddingBlockEnd (px 10)
paddingInlineStart : LengthOrAuto compatible -> Style
Sets padding-inline-start
paddingInlineStart (px 10)
paddingInlineEnd : LengthOrAuto compatible -> Style
Sets padding-inline-end
paddingInlineEnd (px 10)
margin : LengthOrAuto compatible -> Style
Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)
margin2 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> Style
Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)
margin3 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> LengthOrAuto compatibleC -> Style
Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)
margin4 : LengthOrAuto compatibleA -> LengthOrAuto compatibleB -> LengthOrAuto compatibleC -> LengthOrAuto compatibleD -> Style
Sets margin
margin (px 10)
margin2 (px 10) (px 10)
margin3 (px 10) (px 10) (px 10)
margin4 (px 10) (px 10) (px 10) (px 10)
marginTop : LengthOrAuto compatible -> Style
Sets margin-top
marginTop (px 10)
marginBottom : LengthOrAuto compatible -> Style
Sets margin-bottom
marginBottom (px 10)
marginRight : LengthOrAuto compatible -> Style
Sets margin-right
marginRight (px 10)
marginLeft : LengthOrAuto compatible -> Style
Sets margin-left
marginLeft (px 10)
marginBlockStart : LengthOrAuto compatible -> Style
Sets margin-block-start
marginBlockStart (px 10)
marginBlockEnd : LengthOrAuto compatible -> Style
Sets margin-block-end
marginBlockEnd (px 10)
marginInlineStart : LengthOrAuto compatible -> Style
Sets margin-inline-start
marginInlineStart (px 10)
marginInlineEnd : LengthOrAuto compatible -> Style
Sets margin-inline-end
marginInlineEnd (px 10)
boxSizing : BoxSizing compatible -> Style
Sets box-sizing
boxSizing borderBox
overflow : Overflow compatible -> Style
overflowX : Overflow compatible -> Style
overflowY : Overflow compatible -> Style
overflowWrap : Wrap compatible -> Style
whiteSpace : WhiteSpace compatible -> Style
backgroundColor : ColorValue compatible -> Style
color : ColorValue compatible -> Style
each : List (List Style -> Snippet) -> List Style -> Snippet
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)
ColorValue { red : Basics.Int
, green : Basics.Int
, blue : Basics.Int
, alpha : Basics.Float
}
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
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 {}
{ compatible | value : String
, length : Compatible
, numericValue : Basics.Float
, units : units
, unitLabel : String
}
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
`` 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 (Number { 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 (Number { 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.
stylesheet
[ ul
[ padding zero ]
]
...compiles to:
ul {
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 (\divisor -> remainderBy divisor 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)
addLengths : Length compatible units -> Length compatible units -> Length compatible units
Add two lengths.
>>> addLengths (em 2) (em 3)
em 5
subtractLengths : Length compatible units -> Length compatible units -> Length compatible units
Subtract two lengths.
>>> subtractLengths (em 7) (em 3)
em 4
multiplyLengths : Length compatible units -> Length compatible units -> Length compatible units
Multiply two lengths.
>>> multiplyLengths (em 3) (em 6)
em 18
divideLengths : Length compatible units -> Length compatible units -> Length compatible units
Divide two lengths.
>>> divideLengths (em 9) (em 2)
em 4.5
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
`` 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.
pseudoClass : String -> List Style -> Style
Define a custom pseudo-class.
This can be useful for deprecated pseudo-classes such as -moz-any-link
, which
has been deprecated and removed
in modern browsers.
stylesheet
[ body
[ pseudoClass "-moz-any-link" [ color (hex "f00") ] ]
]
...outputs
body:-moz-any-link {
color: #f00;
}
active : List Style -> Style
An :active
pseudo-class.
any : String -> List Style -> Style
An :any
pseudo-class.
checked : List Style -> Style
dir : Directionality -> List Style -> Style
A :dir
pseudo-class.
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.
stylesheet
[ body
[ pseudoElement "-webkit-scrollbar" [ display none ] ]
]
...outputs
body::-webkit-scrollbar {
display: none;
}
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 ]
{ compatible | value : String
, fontSize : Compatible
}
A font size
{ compatible | value : String
, color : Compatible
, warnings : List String
}
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:
stylesheet
[ button
[ property "border-left" "thin" ]
]
medium : FontSize {}
thick : IntentionallyUnsupportedPleaseSeeDocs
The
border width values
of thin
, medium
, and thick
have unspecified behavior according to the
CSS specification, and as such are intentionally unsupported.
Using them is a bad idea, but if the fate of the world depends on it, you can fall back on something like this:
stylesheet
[ button
[ property "border-left" "thick" ]
]
blink : IntentionallyUnsupportedPleaseSeeDocs
blink
is ~~totally rad~~ deprecated, and as such has been ~~reluctantly~~ omitted
from elm-css.