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
A CSS property (such as color
), or multiple properties grouped into one.
invisible : Style
invisible =
display none
This corresponds to the CSS display: none
.
boldAndUnderlineOnHover : Style
boldAndUnderlineOnHover =
hover [ textDecoration underline, fontWeight bold ]
This (roughly) corresponds to the CSS :hover { text-decoration: underline; font-weight: bold; }
.
You can use Style
values to reuse styles (like mixins
in other CSS systems). batch
comes in handy for this!
batch : List Style -> Style
Create a style from multiple other styles.
underlineOnHover =
batch
[ textDecoration none
, hover
[ textDecoration underline ]
]
css
[ color (rgb 128 64 32)
, underlineOnHover
]
...has the same result as:
css
[ color (rgb 128 64 32)
, textDecoration none
, hover
[ textDecoration underline ]
]
property : String -> String -> Style
Define a custom property.
css [ property "-webkit-font-smoothing" "none" ]
...outputs
-webkit-font-smoothing: none;
!important
important : Style -> Style
Transforms the given property by adding !important to the end of its declaration.
pseudoClass : String -> List Style -> Style
Define a custom pseudo-class.
This can be useful for deprecated pseudo-classes such as -moz-any-link
, which
has been deprecated and removed
in modern browsers.
button
[ css [ pseudoClass "-moz-any-link" [ color (hex "f00") ] ] ]
[ text "Whee!" ]
...outputs
<button class="f9fcb2">Whee!</button>
<style>
.f9fcb2:-moz-any-link {
color: #f00;
}
</style>
active : List Style -> Style
An :active
pseudo-class.
button [ active [ color (rgb 12 160 190) ] ]
checked : List Style -> Style
This pseudo-class is for any checkbox, option or radio input that is checked or toggled on.
checked
[ backgroundColor (rgb 0 0 255)
]
default : List Style -> Style
default [ color (hex "#ff0000") ]
defined : List Style -> Style
defined [ fontStyle italic ]
disabled : List Style -> Style
button [ disabled [ color (rgb 194 194 194) ] ]
empty : List Style -> Style
An :empty
pseudo-class.
empty
[ backgroundColor (rgb 20 20 20)
]
enabled : List Style -> Style
An :enabled
pseudo-class.
enabled
[ borderColor (rgba 150 150 0 0.5)
]
first : List Style -> Style
first
[ marginTop (pct 30)
]
firstChild : List Style -> Style
A :first-of-type
pseudo-class.
firstChild
[ fontWeight bold
]
firstOfType : List Style -> Style
A :first-of-type
pseudo-class.
firstOfType
[ color (rgb 255 0 0)
]
focus : List Style -> Style
focus
[ border3 (px 2) solid (rgb 0 0 0)
]
fullscreen : List Style -> Style
fullscreen
[ backgroundColor (rgb 0 0 0)
]
hover : List Style -> Style
hover
[ fontWeight bold
, color (rgb 255 50 0)
]
inRange : List Style -> Style
inRange
[ backgroundColor (rgb 0 255 0)
]
indeterminate : List Style -> Style
An :indeterminate
pseudo-class.
indeterminate
[ backgroundColor (rgb 100 100 100)
]
invalid : List Style -> Style
An :invalid
pseudo-class.
invalid
[ color (rgb 255 0 0)
, fontWeight bold
]
lastChild : List Style -> Style
lastChild
[ backgroundColor (rgb 0 0 255)
]
lastOfType : List Style -> Style
lastOfType
[ color (rgb 100 100 100)
]
leftHandPage : List Style -> Style
leftHandPage
[ color (rgb 100 100 100)
]
Note: This is called leftHandPage
instead of left
or left_
is
because both of those are taken by property and value keyword functions.
link : List Style -> Style
link
[ color (rgb 0 0 255)
]
onlyChild : List Style -> Style
onlyChild
[ backgroundColor (rgb 255 255 255)
]
onlyOfType : List Style -> Style
An :only-of-type
pseudo-class.
onlyOfType
[ color (rgb 255 0 0)
, fontStyle italic
]
outOfRange : List Style -> Style
An :out-of-range
pseudo-class.
outOfRange
[ color (rgb 255 0 0)
]
readOnly : List Style -> Style
readOnly
[ color (rgb 50 50 50)
]
readWrite : List Style -> Style
readWrite
[ backgroundColor (rgb 0 50 150)
]
required : List Style -> Style
required
[ border (px 2) solid (rgb 100 100 100)
]
rightHandPage : List Style -> Style
rightHandPage
[ color (rgb 100 100 100)
]
Note: This is called rightHandPage
instead of right
or right_
is
because both of those are taken by property and value keyword functions.
root : List Style -> Style
root
[ backgroundColor (rgb 0 200 200)
]
scope : List Style -> Style
scope
[ backgroundColor (rgb 0 200 200)
]
target : List Style -> Style
target
[ fontWeight bold
, border3 (px 2) dotted (rgb 255 0 0)
]
valid : List Style -> Style
valid
[ border3 (px 1) solid (rgb 0 255 0)
]
visited : List Style -> Style
visited
[ color (rgb 150 0 255)
]
dir : Value { ltr : Value.Supported, rtl : Value.Supported } -> List Style -> Style
dir rtl
[ backgroundColor (hex "#ff0000")
]
lang : String -> List Style -> Style
lang "en-GB"
[ backgroundColor (hex "#ff0000")
]
not : List String -> List Style -> Style
The first argument is a list of selectors to not select.
not ["p.notthis", ".notthat"]
[ backgroundColor (hex "#ff0000")
]
nthChild : String -> List Style -> Style
nthChild "3"
[ backgroundColor (hex "#ff0000")
]
nthLastChild : String -> List Style -> Style
An :nth-last-child()
pseudo-class.
This is the same as nthChild
, but counting from the end rather than the start.
nthLastChild "3n+4"
[ backgroundColor (hex "#ff0000")
]
nthOfType : String -> List Style -> Style
An :nth-of-type()
pseudo-class.
nthOfType "odd"
[ backgroundColor (hex "#ff0000")
]
nthLastOfType : String -> List Style -> Style
An :nth-last-of-type()
pseudo-class.
nthLastOfType "0n+1"
[ backgroundColor (hex "#ff0000")
]
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
div [ after [ content "hi!" ] ]
--TODO : Introduce a way to do content
- lots of options there, not just text. Also it's overloaded with flexBasis content
.
backdrop : List Style -> Style
backdrop
[ background (rgba 255 0 0 0.25)
]
before : List Style -> Style
div [ before [ content "hi!" ] ]
--TODO : Introduce a way to do content
- lots of options there, not just text. Also it's overloaded with flexBasis content
.
cue : List Style -> Style
cue
[ color (rgba 255 255 0 1)
, fontWeight (int 600)
]
firstLetter : List Style -> Style
A ::first-letter
pseudo-element.
firstLetter
[ fontSize (rem 2)
]
firstLine : List Style -> Style
A ::first-line
pseudo-element.
firstLine
[ fontWeight (int 600)
]
marker : List Style -> Style
marker
[ color (rgba 255 255 0 1)
, fontWeight (int 600)
]
placeholder : List Style -> Style
A ::placeholder
pseudo-element.
Be careful when using placeholders as they can negatively impact accessibility.
placeholder
[ opacity (num 1) <| important
, color (rgb 90 90 90)
, fontWeight (int 400)
]
]
selection : List Style -> Style
selection
[ backgroundColor (rgb 200 140 15)
]
slotted : String -> List Style -> Style
slotted "*"
[ backgroundColor (rgb 200 140 15)
]
LengthSupported {}
A type alias used to accept a length.
{ supported | ch : Value.Supported
, em : Value.Supported
, ex : Value.Supported
, rem : Value.Supported
, vh : Value.Supported
, vw : Value.Supported
, vmin : Value.Supported
, vmax : Value.Supported
, px : Value.Supported
, cm : Value.Supported
, mm : Value.Supported
, inch : Value.Supported
, pc : Value.Supported
, pt : Value.Supported
, q : Value.Supported
, zero : Value.Supported
, calc : Value.Supported
}
A type alias used to accept a length among other values.
zero : Value { provides | zero : Value.Supported }
Compiles to a 0
value with no units.
css [ padding zero ]
...compiles to:
padding: 0;
This conveniently lets you avoid doing things like padding (px 0)
px : Basics.Float -> Value { provides | px : Value.Supported }
px
length units.
borderWidth (px 5)
em : Basics.Float -> Value { provides | em : Value.Supported }
em
length units.
borderWidth (em 5)
ex : Basics.Float -> Value { provides | ex : Value.Supported }
ex
length units.
borderWidth (ex 5)
ch : Basics.Float -> Value { provides | ch : Value.Supported }
ch
length units.
borderWidth (ch 5)
rem : Basics.Float -> Value { provides | rem : Value.Supported }
rem
length units.
borderWidth (rem 5)
vh : Basics.Float -> Value { provides | vh : Value.Supported }
vh
length units.
borderWidth (vh 5)
vw : Basics.Float -> Value { provides | vw : Value.Supported }
vw
length units.
borderWidth (vw 5)
vmin : Basics.Float -> Value { provides | vmin : Value.Supported }
vmin
length units.
borderWidth (vmin 5)
vmax : Basics.Float -> Value { provides | vmax : Value.Supported }
vmax
length units.
borderWidth (vmax 5)
mm : Basics.Float -> Value { provides | mm : Value.Supported }
mm
length units.
borderWidth (mm 5)
cm : Basics.Float -> Value { provides | cm : Value.Supported }
cm
length units.
borderWidth (cm 5)
q : Basics.Float -> Value { provides | q : Value.Supported }
Q
length units.
borderWidth (q 2.5)
inch : Basics.Float -> Value { provides | inch : Value.Supported }
in
length units.
borderWidth (inch 5)
(This is inch
instead of in
because in
is a reserved keyword in Elm.)
pt : Basics.Float -> Value { provides | pt : Value.Supported }
pt
length units.
borderWidth (pt 5)
pc : Basics.Float -> Value { provides | pc : Value.Supported }
pc
length units.
borderWidth (pc 5)
pct : Basics.Float -> Value { provides | pct : Value.Supported }
pct
length units.
borderWidth (pct 5)
num : Basics.Float -> Value { provides | num : Value.Supported }
A unitless number. Useful with properties like
flexGrow
,
and order
which accept unitless numbers.
flexGrow (num 2)
order (num -2)
int : Basics.Int -> Value { provides | int : Value.Supported }
A unitless integer. Useful with properties like zIndex
which accept unitless integers.
zIndex (int 3)
AngleSupported {}
A type alias used to accept an angle.
{ supported | deg : Value.Supported
, grad : Value.Supported
, rad : Value.Supported
, turn : Value.Supported
, zero : Value.Supported
, calc : Value.Supported
}
A type alias used to accept an angle among other values.
WidthSupported {}
A type alias used to accept a 'width'.
LengthSupported { supported | auto : Value.Supported
, pct : Value.Supported
, minContent : Value.Supported
, maxContent : Value.Supported
, fitContent : Value.Supported
}
A type alias used to accept a 'width' among other values.
deg : Basics.Float -> Value { provides | deg : Value.Supported }
deg 360 -- one full circle
deg 14.23
grad : Basics.Float -> Value { provides | grad : Value.Supported }
grad 400 -- one full circle
grad 38.8
rad : Basics.Float -> Value { provides | rad : Value.Supported }
rad 6.2832 -- approximately one full circle
rad 1
turn : Basics.Float -> Value { provides | turn : Value.Supported }
turn 1 -- one full circle
turn 0.25
TimeSupported {}
A type alias used to accept an time.
{ supported | s : Value.Supported
, ms : Value.Supported
}
A type alias used to accept an time among other values.
s : Basics.Float -> Value { provides | s : Value.Supported }
The s
time unit.
animationDuration (s 1)
ms : Basics.Float -> Value { provides | ms : Value.Supported }
The ms
time unit.
animationDuration (ms 120)
fr : Basics.Float -> Value { provides | fr : Value.Supported }
fr
flex units.
gridAutoColumns (fr 1)
minmax : Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, auto : Value.Supported }) -> Value { provides | minmax : Value.Supported }
The minmax()
value for grid properties.
gridAutoRows (minmax (px 2) (pct 100))
fitContentTo : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | fitContentTo : Value.Supported }
The fit-content()
value that can have a length or percentage value that you want the property to be clamped to.
Not to be confused with the fitContent
value for flex properties.
gridAutoColumns (fitContentTo (pct 100))
height (fitContentTo (rem 20))
customIdent : String -> Value { provides | customIdent : Value.Supported }
Produces an custom-ident
value used by properties such as (but not limited to) listStyle
and
listStyleType
.
listStyleType (customIdent "hello-world")
Note: This method does not do any checking if the identifierer supplied is valid.
string : String -> Value { provides | string : Value.Supported }
Produces a string
value used by properties such as:
listStyleType (string "> ")
quotes2 (string "«") (string "»")
fontLanguageOverride (string "ENG")
url : String -> Value { provides | url : Value.Supported }
The url
value for the cursor
,
fill
,
strokeImage
,
and backgroundImage
properties.
ColorSupported {}
A type alias used to accept a color.
{ supported | rgb : Value.Supported
, rgba : Value.Supported
, hsl : Value.Supported
, hsla : Value.Supported
, hex : Value.Supported
, currentcolor : Value.Supported
}
A type alias used to accept a color among other values.
hex : String -> Value { provides | hex : Value.Supported }
RGB color value in hexadecimal notation.
You can optionally include #
as the first character, for benefits like syntax highlighting in editors, ease of copy/pasting from tools which express these as e.g. #abcdef0
, etc.
color (hex "#60b5cc")
color (hex "60b5cc")
rgb : Basics.Int -> Basics.Int -> Basics.Int -> Value { provides | rgb : Value.Supported }
RGB color value in functional notation.
color (rgb 96 181 204)
rgba : Basics.Int -> Basics.Int -> Basics.Int -> Basics.Float -> Value { provides | rgba : Value.Supported }
color (rgba 96 181 204 0.25)
hsl : Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | hsl : Value.Supported }
The s
and l
values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.
color (hsl 193 0.51 0.59) -- hsl(193, 51%, 59%)
hsla : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | hsla : Value.Supported }
The s
and l
values are expressed as a number between 0 and 1 and are converted to the appropriate percentage.
color (hsla 193 0.51 0.59 0.25) -- hsl(193, 51%, 59%, 0.25)
currentcolor : Value { provides | currentcolor : Value.Supported }
The currentcolor
value used by properties such as color
, backgroundColor
color currentcolor
ImageSupported {}
A type alias used to accept an image.
{ supported | url : Value.Supported
, linearGradient : Value.Supported
, radialGradient : Value.Supported
, repeatingLinearGradient : Value.Supported
, repeatingRadialGradient : Value.Supported
}
A type alias used to accept an image among other values.
BasicShapeSupported {}
A type alias used to accept a basic shape.
{ supported | insetRect : Value.Supported
, insetRect2 : Value.Supported
, insetRect3 : Value.Supported
, insetRect4 : Value.Supported
, circle : Value.Supported
, circleAt : Value.Supported
, circleAt2 : Value.Supported
, ellipse : Value.Supported
, ellipseAt : Value.Supported
, ellipseAt2 : Value.Supported
, polygon : Value.Supported
, path : Value.Supported
}
A type alias used to accept a basic shape among other values.
insetRect : Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }
Provides a one-argument inset()
value. (Which creates an
inset rectangle shape.)
clipPath <| insetRect (px 20) Nothing, "inset(20px)" )
clipPath <| insetRect (px 20) (Just <| insetRound (px 2))
clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))
clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))
clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing
clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))
clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))
Note: This is called insetRect
instead of inset
because inset
and inset_
are already property and value functions handling other areas of CSS.
insetRect2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }
Provides a 2-argument inset()
value. (Which creates an
inset rectangle shape.)
clipPath <| insetRect (px 20) Nothing, "inset(20px)" )
clipPath <| insetRect (px 20) (Just <| insetRound (px 2))
clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))
clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))
clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing
clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))
clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))
Note: This is called insetRect2
instead of inset2
because inset
and inset_
are already property and value functions handling other areas of CSS.
insetRect3 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }
Provides a 2-argument inset()
value. (Which creates an
inset rectangle shape.)
clipPath <| insetRect (px 20) Nothing, "inset(20px)" )
clipPath <| insetRect (px 20) (Just <| insetRound (px 2))
clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))
clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))
clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing
clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))
clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))
Note: This is called insetRect3
instead of inset3
because inset
and inset_
are already property and value functions handling other areas of CSS.
insetRect4 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Maybe (Value { insetRound : Value.Supported, insetRound2 : Value.Supported, insetRound3 : Value.Supported, insetRound4 : Value.Supported }) -> Value { provides | insetRect : Value.Supported }
Provides a 2-argument inset()
value. (Which creates an
inset rectangle shape.)
clipPath <| insetRect (px 20) Nothing, "inset(20px)" )
clipPath <| insetRect (px 20) (Just <| insetRound (px 2))
clipPath <| insetRect2 (pct 40) (pct 20) (Just <| insetRound4 (px 1) (px 2) (px 3) (px 1))
clipPath <| insetRect3 (px 20) (px 10) (pct 10) (Just <| insetRound (px 4))
clipPath <| insetRect3 (em 4) (em 1) (px 2) Nothing
clipPath <| insetRect4 (cm 4) (cm 5) (cm 2) (cm 1) (Just <| insetRound3 (mm 12) (mm 3) (mm 8))
clipPath <| insetRect4 (pt 20) (pt 10) (pt 30) (pt 40) (Just <| insetRound2 (pt 2) (pt 5))
Note: This is called insetRect4
instead of inset4
because inset
and inset_
are already property and value functions handling other areas of CSS.
insetRound : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound : Value.Supported }
Provides a 1-value border radius for use with insetRect
(#insetRect) (inset()
).
insetRect (px 40) (Just <| insetRound (px 2))
insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))
insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))
insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))
insetRound2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound2 : Value.Supported }
Provides a 2-value border radius for use with insetRect
(#insetRect) (inset()
).
insetRect (px 40) (Just <| insetRound (px 2))
insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))
insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))
insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))
insetRound3 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound3 : Value.Supported }
Provides a 3-value border radius for use with insetRect
(#insetRect) (inset()
).
insetRect (px 40) (Just <| insetRound (px 2))
insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))
insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))
insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))
insetRound4 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | insetRound3 : Value.Supported }
Provides a 4-value border radius for use with insetRect
(#insetRect) (inset()
).
insetRect (px 40) (Just <| insetRound (px 2))
insetRect (px 40) (Just <| insetRound2 (px 2) (px 5))
insetRect (px 40) (Just <| insetRound3 (px 2) (px 3) (px 4))
insetRect (px 40) (Just <| insetRound4 (px 2) (px 5) (px 1) (px 3))
circle : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value { provides | circle : Value.Supported }
Provides a one-argument circle()
value.
clipPath (circle (pct 10))
clipPath (circle closestSide)
clipPath (circleAt (pct 10) left)
clipPath (circleAt closestSide (rem 5))
clipPath (circleAt2 closestSide (rem 5) (rem 1))
Note: This is not to be confused with circle_
,
which is a keyword value for properties such as listStyleType
.
circleAt : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value { provides | circleAt : Value.Supported }
Provides a 2-argument circle(<rad> at <pos>)
value.
clipPath (circleAt (pct 10) left_)
clipPath (circleAt closestSide (rem 5))
clipPath (circleAt2 closestSide (rem 5) (rem 1))
circleAt2 : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Value { provides | circleAt2 : Value.Supported }
Provides a 3-argument circle(<rad> at <posX> <posY>)
value.
clipPath (circleAt2 closestSide (rem 5) (rem 1))
clipPath (circleAt2 (pct 10) top_ left_)
ellipse : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value { provides | ellipse : Value.Supported }
Provides a one-argument ellipse()
value.
clipPath (ellipse (px 20) (px 10))
clipPath (ellipse closestSide farthestSide)
clipPath (ellipseAt closestSide (pct 10) left_)
clipPath (ellipseAt (pct 20) (pct 10) (rem 5))
clipPath (ellipseAt2 (rem 5) closestSide (rem 5) (rem 1))
ellipseAt : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value { provides | ellipseAt : Value.Supported }
Provides a 3-argument ellipse(<radiusX> <radiusY> at <pos>)
value.
clipPath (ellipseAt (pct 50) (pct 10) left_)
clipPath (ellipseAt (rem 5) closestSide (rem 5))
ellipseAt2 : Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, closestSide : Value.Supported, farthestSide : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Value { provides | ellipseAt2 : Value.Supported }
Provides a 4-argument ellipse(<radiusX> <radiusY> at <posX> <posY>)
value.
clipPath (ellipseAt2 (rem 6) closestSide (rem 5) (rem 1))
clipPath (ellipseAt2 farthestSide (pct 10) left_ top_)
closestSide : Value { provides | closestSide : Value.Supported }
The closest-side
value for use in circle and ellipse shapes.
clipPath (circle closestSide)
clipPath (ellipse farthestSide (px 20))
farthestSide : Value { provides | farthestSide : Value.Supported }
The farthest-side
value for use in circle and ellipse shapes.
clipPath (circleAt farthestSide (pct 20))
clipPath (ellipseAt farthestSide (px 2) (pct 20))
polygon : List ( Basics.Float, Basics.Float ) -> Value { provides | polygon : Value.Supported }
Creates a polygon()
value for CSS
properties that accept a <basic-shape>
value.
Each numerical argument is a Float that represents a percentage.
clipPath <| polygon [ (20, 30), (40, 80.3), (14, 50) ]
path : String -> Value { provides | path : Value.Supported }
Creates a path()
value for CSS properties that accept a
<basic-shape>
value.
The input string needs to be a valid SVG path string.
clipPath <| path "M161.693,39.249C94.047,39.249 39.127,94.169 39.127,161.816C39.127,229.462 94.047,284.382 161.693,284.382C229.34,284.382 284.26,229.462 284.26,161.816C284.26,94.169 229.34,39.249 161.693,39.249ZM161.693,71.382C211.605,71.382 211.605,252.249 161.693,252.249C111.782,252.249 71.26,211.727 71.26,161.816C71.26,111.904 111.782,71.382 161.693,71.382Z"
BlendModeSupported {}
A type alias used to accept a blend mode.
{ supported | normal : Value.Supported
, multiply : Value.Supported
, screen : Value.Supported
, overlay : Value.Supported
, darken : Value.Supported
, lighten : Value.Supported
, colorDodge : Value.Supported
, colorBurn : Value.Supported
, hardLight : Value.Supported
, softLight : Value.Supported
, difference : Value.Supported
, exclusion : Value.Supported
, hue : Value.Supported
, saturation : Value.Supported
, color_ : Value.Supported
, luminosity : Value.Supported
}
A type alias used to accept a blend mode among other values.
multiply : Value { provides | multiply : Value.Supported }
The multiply
background-blend-mode
value.
backgroundBlendMode multiply
screen : Value { provides | screen : Value.Supported }
The screen
background-blend-mode
value.
backgroundBlendMode screen
overlay : Value { provides | overlay : Value.Supported }
The overlay
background-blend-mode
value.
backgroundBlendMode overlay
darken : Value { provides | darken : Value.Supported }
The darken
background-blend-mode
value.
backgroundBlendMode darken
lighten : Value { provides | lighten : Value.Supported }
The lighten
background-blend-mode
value.
backgroundBlendMode lighten
colorDodge : Value { provides | colorDodge : Value.Supported }
The color-dodge
background-blend-mode
value.
backgroundBlendMode color - colorDodge
colorBurn : Value { provides | colorBurn : Value.Supported }
The color-burn
background-blend-mode
value.
backgroundBlendMode colorBurn
hardLight : Value { provides | hardLight : Value.Supported }
The hard-light
background-blend-mode
value.
backgroundBlendMode hardLight
softLight : Value { provides | softLight : Value.Supported }
The soft-light
background-blend-mode
value.
backgroundBlendMode softLight
difference : Value { provides | difference : Value.Supported }
The difference
background-blend-mode
value.
backgroundBlendMode difference
exclusion : Value { provides | exclusion : Value.Supported }
The exclusion
background-blend-mode
value.
backgroundBlendMode exclusion
hue : Value { provides | hue : Value.Supported }
The hue
background-blend-mode
value.
backgroundBlendMode hue
saturation : Value { provides | saturation : Value.Supported }
The saturation
background-blend-mode
value.
backgroundBlendMode saturation
color_ : Value { provides | color_ : Value.Supported }
The color
background-blend-mode
value.
backgroundBlendMode color_
Not to be confused with color
.
luminosity : Value { provides | luminosity : Value.Supported }
The luminosity
background-blend-mode
value.
backgroundBlendMode luminosity
FilterFunctionSupported {}
A type alias used to accept a filter function.
{ supported | blur : Value.Supported
, brightness : Value.Supported
, contrast : Value.Supported
, dropShadow : Value.Supported
, grayscale : Value.Supported
, hueRotate : Value.Supported
, invert : Value.Supported
, opacity_ : Value.Supported
, saturate : Value.Supported
, sepia : Value.Supported
}
A type alias used to accept a filter function, among other values.
blur : Value Length -> Value { provides | blur : Value.Supported }
Provides a blur()
filter function value.
backdropFilter <| blur (px 20)
-- backdrop-filter: blur(20px);
brightness : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | brightness : Value.Supported }
Provides a brightness()
filter function value.
filter <| brightness (pct 20)
-- backdrop-filter: brightness(20%);
filter <| brightness zero -- completely black
backdropFilter <| contrast (num 1) -- no effect
filter <| brightness (num 0.4)
contrast : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | contrast : Value.Supported }
Provides a contrast()
filter function value.
backdropFilter <| contrast (pct 20)
-- backdrop-filter: contrast(20%);
backdropFilter <| contrast zero -- completely gray
backdropFilter <| contrast (num 1) -- no effect
backdropFilter <| contrast (num 0.4)
dropShadow : Value Length -> Value Length -> Maybe (Value Length) -> Maybe (Value Color) -> Value { provides | dropShadow : Value.Supported }
Provides a drop-shadow()
filter function value.
filter <| dropShadow (px 20) (px 3) (Just <| px 30) (Just <| hex "#fff")
-- filter: drop-shadow(20px 4px 30px #fff);
grayscale : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | grayscale : Value.Supported }
Provides a grayscale()
filter function value.
backdropFilter <| grayscale (pct 20)
-- backdrop-filter: grayscale(20%);
backdropFilter <| grayscale zero -- no effect
backdropFilter <| grayscale (num 1) -- completely grayscale
backdropFilter <| grayscale (num 0.4) -- 40% grayscale
hueRotate : Value Angle -> Value { provides | hueRotate : Value.Supported }
Provides a hue-rotate()
filter function value.
backdropFilter <| hueRotate (deg -180)
-- backdrop-filter: hue-rotate(-180deg);
invert : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | invert : Value.Supported }
Provides a invert()
filter function value.
backdropFilter <| invert (pct 20)
-- backdrop-filter: invert(20%);
backdropFilter <| invert zero -- no effect
backdropFilter <| invert (num 1) -- completely inverted
backdropFilter <| invert (num 0.4) -- 40% inversion
opacity_ : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | opacity_ : Value.Supported }
Provides a opacity()
filter function value.
backdropFilter <| opacity_ (pct 20)
-- backdrop-filter: opacity(20%);
backdropFilter <| opacity_ zero -- completely transparent
backdropFilter <| opacity_ (num 1) -- no effect
backdropFilter <| opacity_ (num 0.4) -- 40% transparent
Note: This is called opacity_
instead of opacity
because opacity
is already used as a property function.
saturate : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | saturate : Value.Supported }
Provides a saturate()
filter function value.
filter <| saturate (pct 20)
-- filter: saturate(20%);
filter <| saturate zero -- completely desaturated
filter <| saturate (num 1) -- no effect
filter <| saturate (num 2) -- double saturation
filter <| saturate (num 0.4) -- 40% saturated
sepia : Value { zero : Value.Supported, pct : Value.Supported, num : Value.Supported } -> Value { provides | sepia : Value.Supported }
Provides a sepia()
filter function value.
filter <| sepia (pct 20)
-- filter: sepia(20%);
filter <| sepia zero -- no effect
filter <| sepia (num 1) -- completely sepia
filter <| sepia (num 0.4) -- 40% sepia
LineStyleSupported { hidden : Value.Supported }
A type alias used to accept a line-style.
This includes hidden
as a possible value.
{ supported | none : Value.Supported
, dotted : Value.Supported
, dashed : Value.Supported
, solid : Value.Supported
, double : Value.Supported
, groove : Value.Supported
, ridge : Value.Supported
, inset_ : Value.Supported
, outset : Value.Supported
}
A type alias used to accept a line-style
(without the hidden
) value among other values.
LineWidthSupported {}
A type alias used to accept a line-width.
LengthSupported { supported | thin : Value.Supported
, medium : Value.Supported
, thick : Value.Supported
}
A type alias used to accept a line-width among other values.
calc : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, int : Value.Supported }) -> CalcOperation -> Value { provides | calc : Value.Supported }
The css calc
function.
almostPct100 =
calc (pct 100) (minus (px 2))
-- The following compiles to: calc(100vh - (2px + 2rem))
screenMinusBorderAndFooter =
calc (vh 100) (minus (calc (px 2) (plus (rem 2))))
myWidth =
width almostPct100
myHeight =
height screenMinusBorderAndFooter
CAUTION: calc
can easily be used to create invalid CSS values! For example,
zIndex (calc (pct 100) (minus (px 5)))
compiles to z-index: calc(100% - 5px);
which is invalid. According to the spec, calc
may return values that have no
relation to its arguments, so unfortunately there's not much elm-css
can do
to make calc
more reliable. Use with caution!
See calc
for how to use this.
minus : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, int : Value.Supported }) -> CalcOperation
Use with calc
to subtract one value from another.
calc (pct 100) (minus (px 2))
-- calc: (100% - 2px)
plus : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, int : Value.Supported }) -> CalcOperation
Use with calc
to add one numeric value to another.
calc (pct 100) (plus (px 2))
-- calc: (100% + 2px)
times : Value { num : Value.Supported, int : Value.Supported, zero : Value.Supported } -> CalcOperation
Use with calc
to multiply a value by a unitless number.
calc (pct 100) (times (int 2))
-- calc: (100% * 2px)
Many different kinds of CSS properties use the same keyword values, so they're put in this place for easier understanding.
Some of these keywords are used only in one property but they fit into a group of functionality (like Logical Values), so they're also grouped here.
All CSS properties can have the values unset
, initial
, inherit
and revert
.
Value { supported | initial : Value.Supported
, inherit : Value.Supported
, unset : Value.Supported
, revert : Value.Supported
}
A type that is used in properties for CSS wide values. See CSS-wide values.
unset : Value { provides | unset : Value.Supported }
The unset
value.
Any CSS property can be set to this value.
display unset
borderStyle unset
initial : Value { provides | initial : Value.Supported }
The initial
value.
Any CSS property can be set to this value.
display initial
borderStyle initial
inherit : Value { provides | inherit : Value.Supported }
The inherit
value.
Any CSS property can be set to this value.
display inherit
revert : Value { provides | revert : Value.Supported }
The revert
value.
Any CSS property can be set to this value.
all revert
color revert
auto : Value { provides | auto : Value.Supported }
The auto
value used in many properties such as (but not limited to) width
,
zoom
,
outlineStyle
,
and flexBasis
.
width auto
zoom auto
flexBasis auto
none : Value { provides | none : Value.Supported }
The none
value used in many properties such as (but not limited to) display
,
borderStyle
,
maxWidth
,
clear
,
strokeDashJustify
,
and flex
.
display none
borderStyle none
strokeDashJustify none
flex none
left_ : Value { provides | left_ : Value.Supported }
The left
value, used in many properties such as:
backgroundPosition left_
clear left_
float left_
justifyContent left_
justifyItems left_
justifySelf left_
pageBreakAfter left_
textAlign left_
The value is called left_
instead of left
because left
is already a property function.
right_ : Value { provides | right_ : Value.Supported }
The right
value, used in many properties such as:
backgroundPosition right_
clear right_
float right_
justifyContent right_
justifyItems right_
justifySelf right_
pageBreakAfter right_
textAlign right_
The value is called right_
instead of right
because right
is already a property function.
top_ : Value { provides | top_ : Value.Supported }
The top
value, used in the following properties:
backgroundPosition
captionSide
objectPosition2
perspectiveOrigin2
strokePosition2
transformOrigin
verticalAlign
backgroundPosition top_
captionSide top_
objectPosition2 right_ top_
perspectiveOrigin2 left_ top_
transformOrigin top_
verticalAlign top_
The value is called top_
instead of top
because top
is already a property function.
bottom_ : Value { provides | bottom_ : Value.Supported }
The bottom
value, used in the following properties:
backgroundPosition
captionSide
objectPosition2
perspectiveOrigin2
strokePosition2
transformOrigin
verticalAlign
backgroundPosition bottom_
captionSide bottom_
objectPosition2 right_ bottom_
perspectiveOrigin2 left_ bottom_
transformOrigin bottom_
verticalAlign bottom_
The value is called bottom_
instead of bottom
because bottom
is already a property function.
Logical values are those that set properties by their relation to the user's reading direction.
Sometimes these keywords mean other things too.
block : Value { provides | block : Value.Supported }
The block
value.
This is a CSS Logical value used by display
and resize
.
display block
resize block
inline : Value { provides | inline : Value.Supported }
The inline
value.
This is a CSS Logical value used by display
and resize
.
display inline
resize inline
start : Value { provides | start : Value.Supported }
The start
value.
It's used in the following properties as a CSS Logical value:
alignContent start
justifyItems start
It's also used as an animation keyword used in steps2
.
steps2 3 start
end : Value { provides | end : Value.Supported }
The end
value.
It's used in the following properties as a CSS Logical value:
alignContent end
justifyItems end
It's also used as an animation keyword used in steps2
.
steps2 3 end
blockStart : Value { provides | blockEnd : Value.Supported }
The block-start
value, which is a CSS Logical value.
It can be used with captionSide
.
captionSide blockStart
blockEnd : Value { provides | blockEnd : Value.Supported }
The block-end
value, which is a CSS Logical value.
It can be used with captionSide
.
captionSide blockEnd
inlineStart : Value { provides | inlineStart : Value.Supported }
Sets inline-start
, which is a CSS Logical value.
It can be used with the following properties:
clear inlineStart
captionSide inlineStart
float inlineStart
inlineEnd : Value { provides | inlineEnd : Value.Supported }
Sets inline-end
, which is a CSS Logical value.
It can be used with the following properties:
clear inlineEnd
captionSide inlineEnd
float inlineEnd
minContent : Value { provides | minContent : Value.Supported }
The min-content
value used for properties such as:
sizing (eg. width
, height
, inlineSize
)
min/max sizing (eg. minWidth
, maxBlockWidth
)
width minContent
maxContent : Value { provides | maxContent : Value.Supported }
The max-content
value used for properties such as:
sizing (eg. width
, height
, inlineSize
)
min/max sizing (eg. minWidth
, maxBlockWidth
)
width maxContent
fitContent : Value { provides | fitContent : Value.Supported }
The fit-content
value used for properties such as:
sizing (eg. width
, height
, inlineSize
)
min/max sizing (eg. minWidth
, maxBlockWidth
)
width fitContent
x : Value { provides | x : Value.Supported }
Sets x
value for usage with scrollSnapType2
and rotate2
.
scrollSnapType2 x mandatory
rotate x (deg 10)
y : Value { provides | y : Value.Supported }
Sets y
value for usage with scrollSnapType2
and rotate2
.
scrollSnapType2 y mandatory
rotate y (deg 50)
z : Value { provides | z : Value.Supported }
Sets z
value for usage with rotate2
.
rotate z (deg 100)
stretch : Value { provides | stretch : Value.Supported }
The stretch
value used in the following properties:
alignContent stretch
strokeDashJustify stretch
center : Value { provides | center : Value.Supported }
The center
value, used in many properties such as:
alignContent
alignItems
alignSelf
backgroundPosition
justifyContent
justifyItems
justifySelf
scrollSnapAlign
backgroundPosition enter
justifyContent center
marginBox : Value { provides | marginBox : Value.Supported }
The margin-box
value, used in clipPath
.
clipPath marginBox
borderBox : Value { provides | borderBox : Value.Supported }
The border-box
value, used in the following properties:
boxSizing borderBox
backgroundClip borderBox
backgroundOrigin borderBox
strokeOrigin borderBox
paddingBox : Value { provides | paddingBox : Value.Supported }
The padding-box
value, used with backgroundClip
,
backgroundOrigin
,
and strokeOrigin
.
backgroundClip paddingBox
backgroundOrigin paddingBox
strokeOrigin paddingBox
contentBox : Value { provides | contentBox : Value.Supported }
The content-box
value, used in the following properties:
boxSizing contentBox
backgroundClip contentBox
backgroundOrigin contentBox
strokeOrigin contentBox
fillBox : Value { provides | fillBox : Value.Supported }
The fill-box
value used by strokeOrigin
and transformBox
.
strokeOrigin fillBox
transformBox fillBox
strokeBox : Value { provides | strokeBox : Value.Supported }
The stroke-box
value used by strokeOrigin
and transformBox
.
strokeOrigin strokeBoxx
transformBox strokeBox
viewBox : Value { provides | viewBox : Value.Supported }
The view-box
value used by transformBox
.
transformBox viewBox
baseline : Value { provides | baseline : Value.Supported }
The baseline
value, used in the following properties:
alignItems baseline
verticalAlign baseline
sub : Value { provides | sub : Value.Supported }
A sub
value for the following properties:
fontVariantPosition sub
verticalAlign sub
super : Value { provides | super : Value.Supported }
A super
value for the following properties:
fontVariantPosition super
verticalAlign super
ruby : Value { provides | ruby : Value.Supported }
The ruby
value used by display
and fontVariantEastAsian
.
display ruby
fontVariantEastAsian2 ruby jis83
fullWidth : Value { provides | fullWidth : Value.Supported }
A full-width
value for:
textTransform
Forces the writing of characters in a square so they can be aligned in East Asian scripts.
fontVariantEastAsian
Activates the East Asian characters that are roughly be the same width.
textTransform fullWidth
fontVariantEastAsian fullWidth
under : Value { provides | under : Value.Supported }
A under
value for the textUnderlinePosition
property and the textEmphasisPosition2
property.
textUnderlinePosition under
textEmphasisPosition2 under left_
circle_ : Value { provides | circle_ : Value.Supported }
The circle
value used by properties such as listStyle
,
listStyleType
, textEmphasis
and textEmphasisStyle
.
listStyleType circle_
textEmphasis2 circle_ (hex "ff0000")
textEmphasisStyle circle_
Note: This is not to be confused with circle
,
circleAt
or circleAt2
, which are
<basic-shape>
data types.
hidden : Value { provides | hidden : Value.Supported }
The hidden
value used for properties such as visibility
, overflow
and borderStyle
.
visibility hidden
overflow hidden
borderStyle hidden
visible : Value { provides | visible : Value.Supported }
The visible
value used for properties such as visibility
, overflow
and pointer-events
.
visibility visible
overflow visible
pointerEvents visible
thin : Value { provides | thin : Value.Supported }
The thin
value used by various properties.
In borderWidth
and
columnRuleWidth
, the value is
equivalent to 1px.
borderWidth thin
columnRuleWidth thin
It's also used in scrollbarWidth
.
scrollbarWidth thin
thick : Value { provides | thick : Value.Supported }
The thick
value used by properties such as borderWidth
,
and columnRuleWidth
.
borderWidth thick
columnRuleWidth thick
The value is equivalent of 5px.
normal : Value { provides | normal : Value.Supported }
The normal
value, which can be used with such properties as:
fontVariantCaps
fontKerning
fontLanguageOverride
whiteSpace
wordBreak
columnGap
zoom
animationDirection
alignItems
lineBreak
alignItems normal
columnGap normal
fontVariantCaps normal
whiteSpace normal
wordBreak normal
zoom normal
strict : Value { provides | strict : Value.Supported }
Sets strict
value for usage with lineBreak
and contain
.
contain strict
lineBreak strict
all_ : Value { provides | all_ : Value.Supported }
The all
value used in properties such as columnSpan
and pointerEvents
.
columnSpan all_
pointerEvents all_
This value function has an underscore because all
is already a property function.
both : Value { provides | both : Value.Supported }
Sets both
value for usage with clear
and resize
.
clear both
resize both
always : Value { provides | always : Value.Supported }
Sets always
value for usage with scrollSnapStop
, pageBreakBefore
, and pageBreakAfter
.
scrollSnapStop always
pageBreakBefore always
pageBreakAfter always
scroll : Value { provides | scroll : Value.Supported }
The scroll
value used for properties such as overflow
and background-attachment
.
overflow scroll
backgroundAttachment scroll
column : Value { provides | column : Value.Supported }
The column
value, used in flex-direction
,
break-before
and break-after
properties.
flexDirection column
breakBefore column
breakAfter column
content : Value { provides | content : Value.Supported }
The content
value used in the following properties:
flexBasis content
contain content
fill_ : Value { provides | fill_ : Value.Supported }
The fill
value used in properties such as objectFit
,
pointerEvents
, paintOrder
and maskBorderSlice
.
objectFit fill_
pointerEvents fill_
paintOrder2 fill_ markers
maskBorderSlice4 fill_ (num 20) (pct 10) (num 45)
The value is called fill_
instead of fill
because fill
is already a property function.
stroke : Value { provides | stroke : Value.Supported }
The stroke
value used by pointerEvents
and paintOrder
.
pointerEvents stroke
paintOrder2 stroke markers
text : Value { provides | text : Value.Supported }
The text
value for the cursor
,
backgroundClip
,
and user-select
properties.
backgroundClip text
cursor text
userSelect text
style : Value { provides | style : Value.Supported }
Sets the style
value for:
contain
. (This value is considered at-risk from being deprecated for this property.)fontSynthesis
contain style
fontSynthesis style
clip : Value { provides | clip : Value.Supported }
The clip
value used by overflow
and textOverflow
.
overflow clip
overflowX clip
overflowY clip
textOverflow clip
Looking for the clip
property? It's been deprecated and not supported in this version of elm-css. You should use clipPath
instead.
cover : Value { provides | cover : Value.Supported }
Sets cover
for the following properties:
backgroundSize cover
strokeSize cover
contain_ : Value { provides | contain_ : Value.Supported }
Sets contain
for the following properties:
backgroundSize
(It always show the whole background
image, even if it leaves empty spaces on the sides.)objectFit
(Replaced content is scaled to maintain proportions within the element's content box.)userSelect
(Lets selection start within the element but that selection will be contained within that element's bounds.)overscrollBehavior
(This means that default scroll overflow behavior
is observed inside the element, but scroll chaining will not happen to neighbouring elements.)backgroundSize contain_
overscrollBehavior contain_
The value is called contain_
instead of contain
because contain
is already a property function.
repeat : Value { provides | repeat : Value.Supported }
The repeat
value for background properties
and strokeRepeat
.
backgroundRepeat repeat
strokeRepeat repeat
noRepeat : Value { provides | repeat : Value.Supported }
The no-repeat
value for background properties
and strokeRepeat
.
backgroundRepeat noRepeat
strokeRpeat noRepeat
repeatX : Value { provides | repeatX : Value.Supported }
The repeat-x
value for repeating backgrounds
and strokeRepeat
.
backgroundRepeat repeatX
strokeRepeat repeatX
repeatY : Value { provides | repeatY : Value.Supported }
The repeat-y
value for repeating backgrounds
and strokeRepeat
.
backgroundRepeat repeatY
strokeRepeat repeatY
space : Value { provides | space : Value.Supported }
The space
value for repeating backgrounds
and strokeRepeat
.
backgroundRepeat space
strokeRepeat space
round_ : Value { provides | round_ : Value.Supported }
The round
value used for properties such as:
This is called round_
because round
is a function
word used in Elm Core's Basics
module.
backgroundRepeat round_
strokeLineCap round_
strokeLinejoin2 miter round_
strokeRepeat round_
isolate : Value { provides | isolate : Value.Supported }
Sets isolate
value for usage with isolation
, and
unicodeBidi
.
isolation isolate
unicodeBidi isolate
matchParent : Value { provides | matchParent : Value.Supported }
A match-parent
value for the text-align
,
and strokeOrigin
properties.
textAlign matchParent
strokeOrigin matchParent
all : BaseValue a -> Style
Sets an all
property.
all inherit
display : BaseValue { block : Value.Supported, flex_ : Value.Supported, flow : Value.Supported, flowRoot : Value.Supported, grid_ : Value.Supported, listItem : Value.Supported, inline : Value.Supported, inlineBlock : Value.Supported, inlineFlex : Value.Supported, inlineGrid : Value.Supported, inlineTable : Value.Supported, none : Value.Supported, contents : Value.Supported, ruby : Value.Supported, rubyBase : Value.Supported, rubyBaseContainer : Value.Supported, rubyText : Value.Supported, rubyTextContainer : Value.Supported, runIn : Value.Supported, table : Value.Supported, tableCaption : Value.Supported, tableCell : Value.Supported, tableColumn : Value.Supported, tableColumnGroup : Value.Supported, tableFooterGroup : Value.Supported, tableHeaderGroup : Value.Supported, tableRow : Value.Supported, tableRowGroup : Value.Supported } -> Style
Sets display
.
display block
Note: This function accepts flex_
and grid_
ather than flex
and grid
because
flex
and grid
are already property functions.
display2 : Value { block : Value.Supported, inline : Value.Supported, runIn : Value.Supported } -> Value { flow : Value.Supported, flowRoot : Value.Supported, table : Value.Supported, flex_ : Value.Supported, grid_ : Value.Supported, ruby : Value.Supported } -> Style
Sets display
.
display2 block flex_
Note: This function accepts flex_
and grid_
ather than flex
and grid
because
flex
and grid
are already property functions.
For display: inline list-item
and similar property values that include list-item
look at displayListItem2
and displayListItem3
.
displayListItem2 : Value { block : Value.Supported, inline : Value.Supported, runIn : Value.Supported, flow : Value.Supported, flowRoot : Value.Supported } -> Style
The display
property.
This function is used to generate complex display: list-item
properties
such as display: block list-item
.
displayListItem2 block
displayListItem3 : Value { block : Value.Supported, inline : Value.Supported, runIn : Value.Supported } -> Value { flow : Value.Supported, flowRoot : Value.Supported } -> Style
The display
property.
This function is used to generate complex display: list-item
properties
such as display: block flow-root list-item
.
displayListItem3 block flowRoot
flex_ : Value { provides | flex_ : Value.Supported }
The flex
value used by display
.
display flex_
The value is called flex_
instead of flex
because flex
is already a property function.
flow : Value { provides | flow : Value.Supported }
The flow
value used by display
.
display flow
flowRoot : Value { provides | flowRoot : Value.Supported }
The flow-root
value used by display
.
display flowRoot
grid_ : Value { provides | grid_ : Value.Supported }
The grid
value used by display
.
The value is called grid_
instead of grid
because
grid
is already a property function.
display grid_
contents : Value { provides | contents : Value.Supported }
The contents
value used by display
.
display contents
listItem : Value { provides | listItem : Value.Supported }
The list-item
value used by display
.
display listItem
inlineBlock : Value { provides | inlineBlock : Value.Supported }
The inline-block
value used by display
.
display inlineBlock
inlineFlex : Value { provides | inlineFlex : Value.Supported }
The inline-flex
value used by display
.
display inlineFlex
inlineTable : Value { provides | inlineTable : Value.Supported }
The inline-table
value used by display
.
display inlineTable
inlineGrid : Value { provides | inlineGrid : Value.Supported }
The inline-grid
value used by display
.
display inlineGrid
rubyBase : Value { provides | rubyBase : Value.Supported }
The ruby-base
value used by display
.
display rubyBase
rubyBaseContainer : Value { provides | rubyBaseContainer : Value.Supported }
The ruby-base-container
value used by display
.
display rubyBaseContainer
rubyText : Value { provides | rubyText : Value.Supported }
The ruby-text
value used by display
.
display rubyText
rubyTextContainer : Value { provides | rubyTextContainer : Value.Supported }
The ruby-text-container
value used by display
.
display rubyTextContainer
runIn : Value { provides | runIn : Value.Supported }
The run-in
value used by display
.
display runIn
table : Value { provides | table : Value.Supported }
The table
value used by display
.
display table
tableCaption : Value { provides | tableCaption : Value.Supported }
The table-caption
value used by display
.
display tableCaption
tableCell : Value { provides | tableCell : Value.Supported }
The table-cell
value used by display
.
display tableCell
tableColumn : Value { provides | tableColumn : Value.Supported }
The table-column
value used by display
.
display tableColumn
tableColumnGroup : Value { provides | tableColumnGroup : Value.Supported }
The table-column-group
value used by display
.
display tableColumnGroup
tableFooterGroup : Value { provides | tableFooterGroup : Value.Supported }
The table-footer-group
value used by display
.
display tableFooterGroup
tableHeaderGroup : Value { provides | tableHeaderGroup : Value.Supported }
The table-header-group
value used by display
.
display tableHeaderGroup
tableRow : Value { provides | tableRow : Value.Supported }
The table-row
value used by display
.
display tableRow
position : BaseValue { absolute : Value.Supported, fixed : Value.Supported, relative : Value.Supported, static : Value.Supported, sticky : Value.Supported } -> Style
Sets the position
of an element.
position absolute
position relative
absolute : Value { provides | absolute : Value.Supported }
position absolute
The default position
value is static
. See also position: sticky
, and [the differences between absolute, relative, and fixed positioning](https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
fixed : Value { provides | fixed : Value.Supported }
A fixed
position
or fixed
background-attachment
or fixed
table-layout
.
position fixed
backgroundAttachment fixed
tableLayout fixed
The default position
value is static
. See also position: sticky
, and the differences between absolute, relative, and fixed positioning
relative : Value { provides | relative : Value.Supported }
position relative
The default position
value is static
. See also position: sticky
, and the differences between absolute, relative, and fixed positioning.
static : Value { provides | static : Value.Supported }
position static
This is the default position
value. See also position: sticky
, and the differences between absolute, relative, and fixed positioning.
zIndex : BaseValue { int : Value.Supported, auto : Value.Supported } -> Style
Sets z-index
zIndex (int 10)
zIndex auto
NOTE: Z-index is not as simple as it looks! Make sure to read about stacking contexts if you're not already familiar with them.
isolation : BaseValue { auto : Value.Supported, isolate : Value.Supported } -> Style
Sets isolation
isolation auto
isolation isolate
contain : BaseValue { none : Value.Supported, strict : Value.Supported, content : Value.Supported, size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style
The contain
property.
contain none
contain content
contain2 size layout
contain3 size layout style
contain4 -- all multiple choice values in use, no value entry needed
contain2 : Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style
The contain
property.
This two-argument version lets you use 2 of the 4 multiple choice values you can use for this property.
contain2 size layout
contain3 : Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style
The contain
property.
This two-argument version lets you use 3 of the 4 multiple choice values you can use for this property.
contain3 size layout style
contain4 : Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Value { size : Value.Supported, inlineSize_ : Value.Supported, layout : Value.Supported, style : Value.Supported, paint : Value.Supported } -> Style
The contain
property.
This 4-argument version lets you use all 4 multiple choice values you can use for this property.
contain4 size layout style paint
Note: The style
value is considered at-risk from being deprecated.
size : Value { provides | size : Value.Supported }
Sets the size
value for contain
.
This indicates that the element can be sized without needing to look at the size of its descendants.
contain size
inlineSize_ : Value { provides | inlineSize_ : Value.Supported }
Sets the inline-size
value for contain
.
Indicates that inline size containment is applied to the element.
contain inlineSize_
Note: This is named inlineSize_
instead of inlineSize
because
it is already a property function.
layout : Value { provides | layout : Value.Supported }
Sets the layout
value for contain
.
This indicates that nothing outside the element may affect its internal layout and vice versa.
contain layout
paint : Value { provides | paint : Value.Supported }
Sets the paint
value for contain
.
Indicates that descendants of the element will not display outside its bounds and will not be painted by the browser if the containing box is offscreen.
contain paint
containIntrinsicSize : BaseValue (LengthSupported { none : Value.Supported }) -> Style
The contain-intrinsic-size
property.
This 1-argument variant lets you use global values, none
and lengths for width and height.
containIntrinsicSize revert
containIntrinsicSize none
-- width + height
containIntrinsicSize (px 500)
-- width | height
containIntrinsicSize2 (rem 5) (px 800)
-- width + height w/ auto
containIntrinsicSize2 auto (px 800)
-- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)
containIntrinsicSize2 : Value (LengthSupported { auto : Value.Supported }) -> Value Length -> Style
The contain-intrinsic-size
property.
This 2-argument variant lets you use separate lengths for
width and height or joined with and height with auto
.
containIntrinsicSize revert
containIntrinsicSize none
-- width + height
containIntrinsicSize (px 500)
-- width | height
containIntrinsicSize2 (rem 5) (px 800)
-- width + height w/ auto
containIntrinsicSize2 auto (px 800)
-- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)
containIntrinsicSize4 : Value { auto : Value.Supported } -> Value Length -> Value { auto : Value.Supported } -> Value Length -> Style
The contain-intrinsic-size
property.
This 4-argument variant lets you use separate lengths for
width and height with auto
.
Note: The 1st and 3rd argument can only be auto
.
containIntrinsicSize revert
containIntrinsicSize none
-- width + height
containIntrinsicSize (px 500)
-- width | height
containIntrinsicSize2 (rem 5) (px 800)
-- width + height w/ auto
containIntrinsicSize2 auto (px 800)
-- width w/ auto | height w/ auto
containIntrinsicSize4 auto (rem 50) auto (px 250)
containIntrinsicWidth : BaseValue (LengthSupported { none : Value.Supported }) -> Style
The contain-intrinsic-width
property.
This 1-argument variant lets you use global values, none
and lengths.
containIntrinsicWidth revert
containIntrinsicWidth none
-- specified width
containIntrinsicWidth (px 500)
-- specified width w/ auto
containIntrinsicWidth2 auto (px 800)
containIntrinsicWidth2 : Value { auto : Value.Supported } -> Value Length -> Style
The contain-intrinsic-width
property.
This 2-argument variant lets you use lengths with auto
.
Note: The 1st argument can only be auto
.
containIntrinsicWidth revert
containIntrinsicWidth none
-- specified width
containIntrinsicWidth (px 500)
-- specified width w/ auto
containIntrinsicWidth2 auto (px 800)
containIntrinsicHeight : BaseValue (LengthSupported { none : Value.Supported }) -> Style
The contain-intrinsic-height
property.
This 1-argument variant lets you use global values, none
and lengths.
containIntrinsicHeight revert
containIntrinsicHeight none
-- specified height
containIntrinsicHeight (px 500)
-- specified height w/ auto
containIntrinsicHeight2 auto (px 800)
containIntrinsicHeight2 : Value { auto : Value.Supported } -> Value Length -> Style
The contain-intrinsic-height
property.
This 2-argument variant lets you use lengths with auto
.
Note: The 1st argument can only be auto
.
containIntrinsicHeight revert
containIntrinsicHeight none
-- specified height
containIntrinsicHeight (px 500)
-- specified height w/ auto
containIntrinsicHeight2 auto (px 800)
containIntrinsicInlineSize : BaseValue (LengthSupported { none : Value.Supported }) -> Style
The contain-intrinsic-inline-size
property.
This 1-argument variant lets you use global values, none
and lengths.
containIntrinsicInlineSize revert
containIntrinsicInlineSize none
-- specified inline size
containIntrinsicInlineSize (px 500)
-- specified inline size w/ auto
containIntrinsicInlineSize2 auto (px 800)
containIntrinsicInlineSize2 : Value { auto : Value.Supported } -> Value Length -> Style
The contain-intrinsic-inline-size
property.
This 2-argument variant lets you use lengths with auto
.
Note: The 1st argument can only be auto
.
containIntrinsicInlineSize revert
containIntrinsicInlineSize none
-- specified inline size
containIntrinsicInlineSize (px 500)
-- specified inline size w/ auto
containIntrinsicInlineSize2 auto (px 800)
containIntrinsicBlockSize : BaseValue (LengthSupported { none : Value.Supported }) -> Style
The contain-intrinsic-block-size
property.
This 1-argument variant lets you use global values, none
and lengths.
containIntrinsicBlockSize revert
containIntrinsicBlockSize none
-- specified block size
containIntrinsicBlockSize (px 500)
-- specified block size w/ auto
containIntrinsicBlockSize2 auto (px 800)
width : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The width
property.
width (px 150)
width (em 1.5)
width auto
width minContent
minWidth : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The min-width
property.
minWidth (px 150)
minWidth (em 1.5)
minWidth auto
maxWidth : BaseValue (LengthSupported { pct : Value.Supported, none : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The max-width
property.
maxWidth (px 150)
maxWidth (em 1.5)
maxWidth auto
height : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The height
property.
height (px 34)
minHeight : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The min-height
property.
minHeight (px 20)
maxHeight : BaseValue (LengthSupported { pct : Value.Supported, none : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The max-height
property.
maxHeight (px 20)
blockSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The block-size
property.
blockSize (px 20)
minBlockSize : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The min-block-size
property.
minBlockSize (px 20)
maxBlockSize : BaseValue (LengthSupported { pct : Value.Supported, none : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The max-block-size
property.
maxBlockSize (px 20)
inlineSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The inline-size
property.
inlineSize (px 20)
minInlineSize : BaseValue (LengthSupported { pct : Value.Supported, maxContent : Value.Supported, minContent : Value.Supported, fitContent : Value.Supported, fitContentTo : Value.Supported }) -> Style
The min-inline-size
property.
minInlineSize (px 20)
inset : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset
property.
inset
sets the top
, bottom
, left
and right
properties.
inset (px 10) -- top, bottom, left and right are all 10px.
inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%
inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px
inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px
inset2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset
property.
inset
sets the top
, bottom
, left
and right
properties.
inset (px 10) -- top, bottom, left and right are all 10px.
inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%
inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px
inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px
inset3 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset
property.
inset
sets the top
, bottom
, left
and right
properties.
inset (px 10) -- top, bottom, left and right are all 10px.
inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%
inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px
inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px
inset4 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset
property.
inset
sets the top
, bottom
, left
and right
properties.
inset (px 10) -- top, bottom, left and right are all 10px.
inset2 (pct 5) (pct 5) -- top & bottom = 5%, left & right = 5%
inset3 (px 20) (px 20) (px 20) -- top = 20px, left & right = 20px, bottom = 20px
inset4 (px 20) (px 20) (px 40) (px 20) -- top = 20px, right = 20px, bottom = 40px, left = 20px
top : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the top
property.
top (px 10)
top (pct 50)
top auto
top zero
If you need to use top
as a CSS value instead of as a property,
for example in vertical-align: top
, use top_
instead of this.
right : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the right
property.
right (px 10)
right (pct 50)
right auto
right zero
If you need to use right
as a CSS value instead of as a property,
for example in float: right
, use right_
instead of this.
bottom : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the bottom
property.
bottom (px 10)
bottom (pct 50)
bottom auto
bottom zero
If you need to use bottom
as a CSS value instead of as a property,
for example in vertical-align: bottom
, use bottom_
instead of this.
left : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the left
property.
left (px 10)
left (pct 50)
left auto
left zero
If you need to use left
as a CSS value instead of as a property,
for example in float: left
, use left_
instead of this.
insetBlock : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset-block
property.
inset-block
sets the inset-block-start
and inset-block-end
properties.
insetBlock (px 10) -- block start and block end are both 10px.
insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%
insetBlock2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset-block
property.
inset-block
sets the inset-block-start
and inset-block-end
properties.
insetBlock (px 10) -- block start and block end are both 10px.
insetBlock2 (pct 5) (pct 5) -- block start = 5%, block end = 5%
insetInline : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset-inline
property.
inset-inline
sets the inset-inline-start
and inset-inline-end
properties.
insetInline (px 10) -- inline start and inline end are both 10px.
insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%
insetInline2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset-inline
property.
inset-inline
sets the inset-inline-start
and inset-inline-end
properties.
insetInline (px 10) -- inline start and inline end are both 10px.
insetInline2 (pct 5) (pct 5) -- inline start = 5%, inline end = 5%
insetBlockStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset-block-start
property.
insetBlockStart (px 10)
insetBlockStart (pct 50)
insetBlockStart auto
insetBlockStart zero
insetBlockEnd : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset-block-end
property.
insetBlockEnd (px 10)
insetBlockEnd (pct 50)
insetBlockEnd auto
insetBlockEnd zero
insetInlineStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the inset-inline-start
property.
insetInlineStart (px 10)
insetInlineStart (pct 50)
insetInlineStart auto
insetInlineStart zero
margin : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin
property.
The margin
property is a shorthand property for setting margin-top
,
margin-right
, margin-bottom
, and margin-left
in a single declaration.
If there is only one argument value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.
margin (em 4) -- set all margins to 4em
margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px
margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px
You may want to check out this article on collapsing margins!
margin2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin
property.
The margin2
property is a shorthand property for setting margin-top
,
margin-right
, margin-bottom
, and margin-left
in a single declaration.
The top and bottom margins are set to the first value and the right and left margins are set to the second.
margin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
You may want to check out this article on collapsing margins!
margin3 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin
property.
The margin3
property is a shorthand property for setting margin-top
,
margin-right
, margin-bottom
, and margin-left
in a single declaration.
The top margin is set to the first value, the left and right are set to the second, and the bottom is set to the third.
margin3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px
You may want to check out this article on collapsing margins!
margin4 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin
property.
The margin4
property is a shorthand property for setting margin-top
,
margin-right
, margin-bottom
, and margin-left
in a single declaration.
The four values apply to the top, right, bottom, and left margins.
margin4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px
You may want to check out this article on collapsing margins!
marginTop : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-top
property.
marginTop (px 4)
This article on margin-top
versus margin-bottom
may be useful.
marginRight : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-right
property.
marginRight (px 4)
marginBottom : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-bottom
property.
marginBottom (px 4)
This article on margin-top
versus margin-bottom
may be useful.
marginLeft : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-left
property.
marginLeft (px 4)
marginBlock : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-block
property.
The margin-block
property is a shorthand property for setting margin-block-start
and
margin-block-end
in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the block start margin is set to the first value and the block end margin is set to the second.
marginBlock (em 4) -- set both block margins to 4em
marginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
You may want to check out this article on collapsing margins!
marginBlock2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-block
property.
The margin-block
property is a shorthand property for setting margin-block-start
and
margin-block-end
in a single declaration.
The block start margin is set to the first value and the block end margin is set to the second.
marginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
You may want to check out this article on collapsing margins!
marginBlockStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-block-start
property.
marginBlockStart (px 4)
marginBlockEnd : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-block-end
property.
marginBlockEnd (px 4)
marginInline : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-inline
property.
The margin-inline
property is a shorthand property for setting margin-inline-start
and
margin-inline-end
in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the inline start margin is set to the first value and the inline end margin is set to the second.
marginInline (em 4) -- set both inline margins to 4em
marginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
You may want to check out this article on collapsing margins!
marginInline2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-inline
property.
The margin-inline
property is a shorthand property for setting margin-inline-start
and
margin-inline-end
in a single declaration.
The inline start margin is set to the first value and the inline end margin is set to the second.
marginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
You may want to check out this article on collapsing margins!
marginInlineStart : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets margin-inline-start
property.
marginInlineStart (px 4)
padding : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding
property.
The padding
property is a shorthand property for setting padding-top
,
padding-right
, padding-bottom
, and padding-left
in a single declaration.
If there is only one argument value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.
padding (em 4) -- set all margins to 4em
padding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
padding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px
padding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px
padding2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets padding
property.
The padding2
property is a shorthand property for setting padding-top
,
padding-right
, padding-bottom
, and padding-left
in a single declaration.
The top and bottom margins are set to the first value and the right and left margins are set to the second.
padding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
padding3 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets padding
property.
The padding3
property is a shorthand property for setting padding-top
,
padding-right
, padding-bottom
, and padding-left
in a single declaration.
The top padding is set to the first value, the left and right are set to the second, and the bottom is set to the third.
padding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px
padding4 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets padding
property.
The padding4
property is a shorthand property for setting padding-top
,
padding-right
, padding-bottom
, and padding-left
in a single declaration.
The four values apply to the top, right, bottom, and left paddings.
padding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px
paddingTop : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-top
property.
paddingTop (px 4)
paddingRight : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-right
property.
paddingRight (px 4)
paddingBottom : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-bottom
property.
paddingBottom (px 4)
paddingLeft : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-left
property.
paddingLeft (px 4)
paddingBlock : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-block
property.
The padding-block
property is a shorthand property for setting padding-block-start
and
padding-block-end
in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the block start is set to the first value and the block end is set to the second.
paddingBlock (em 4) -- set both block start and block end to 4em
paddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
paddingBlock2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-block
property.
The padding-block
property is a shorthand property for setting padding-block-start
and
padding-block-end
in a single declaration.
The block start value is set to the first value and the block end value is set to the second.
paddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
paddingBlockStart : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-block-start
property.
paddingBlockStart (px 4)
paddingBlockEnd : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-block-end
property.
paddingBlockEnd (px 4)
paddingInline : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-inline
property.
The padding-inline
property is a shorthand property for setting padding-inline-start
and
padding-inline-end
and in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the inline start is set to the first value and the inline end is set to the second.
paddingInline (em 4) -- set both inline start and inline end to 4em
paddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
paddingInline2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-inline
property.
The padding-inline
property is a shorthand property for setting padding-inline-start
and
padding-inline-end
in a single declaration.
The inline start value is set to the first value and the inline end value is set to the second.
paddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
paddingInlineStart : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets padding-inline-start
property.
paddingInlineStart (px 4)
border : BaseValue LineWidth -> Style
Sets border
property.
border (px 1)
border2 (px 1) solid
border3 (px 1) solid (hex "#f00")
border2 : Value LineWidth -> Value LineStyle -> Style
Sets border
property.
border (px 1)
border2 (px 1) solid
border3 (px 1) solid (hex "#f00")
border3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border
property.
border (px 1)
border2 (px 1) solid
border3 (px 1) solid (hex "#f00")
borderTop : BaseValue LineWidth -> Style
Sets border-top
property.
borderTop (px 1)
borderTop2 (px 1) solid
borderTop3 (px 1) solid (hex "#f00")
borderTop2 : Value LineWidth -> Value LineStyle -> Style
Sets border-top
property.
borderTop (px 1)
borderTop2 (px 1) solid
borderTop3 (px 1) solid (hex "#f00")
borderTop3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-top
property.
borderTop (px 1)
borderTop2 (px 1) solid
borderTop3 (px 1) solid (hex "#f00")
borderRight : BaseValue LineWidth -> Style
Sets border-right
property.
borderRight (px 1)
borderRight2 (px 1) solid
borderRight3 (px 1) solid (hex "#f00")
borderRight2 : Value LineWidth -> Value LineStyle -> Style
Sets border-right
property.
borderRight (px 1)
borderRight2 (px 1) solid
borderRight3 (px 1) solid (hex "#f00")
borderRight3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-right
property.
borderRight (px 1)
borderRight2 (px 1) solid
borderRight3 (px 1) solid (hex "#f00")
borderBottom : BaseValue LineWidth -> Style
Sets border-bottom
property.
borderBottom (px 1)
borderBottom2 (px 1) solid
borderBottom3 (px 1) solid (hex "#f00")
borderBottom2 : Value LineWidth -> Value LineStyle -> Style
Sets border-bottom
property.
borderBottom (px 1)
borderBottom2 (px 1) solid
borderBottom3 (px 1) solid (hex "#f00")
borderBottom3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-bottom
property.
borderBottom (px 1)
borderBottom2 (px 1) solid
borderBottom3 (px 1) solid (hex "#f00")
borderLeft : BaseValue LineWidth -> Style
Sets border-left
property.
borderLeft (px 1)
borderLeft2 (px 1) solid
borderLeft3 (px 1) solid (hex "#f00")
borderLeft2 : Value LineWidth -> Value LineStyle -> Style
Sets border-left
property.
borderLeft (px 1)
borderLeft2 (px 1) solid
borderLeft3 (px 1) solid (hex "#f00")
borderLeft3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-left
property.
borderLeft (px 1)
borderLeft2 (px 1) solid
borderLeft3 (px 1) solid (hex "#f00")
borderBlock : BaseValue LineWidth -> Style
Sets border-block
property.
borderBlock (px 1)
borderBlock2 (px 1) solid
borderBlock3 (px 1) solid (hex "#f00")
borderBlock2 : Value LineWidth -> Value LineStyle -> Style
Sets border-block
property.
borderBlock (px 1)
borderBlock2 (px 1) solid
borderBlock3 (px 1) solid (hex "#f00")
borderBlock3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-block
property.
borderBlock (px 1)
borderBlock2 (px 1) solid
borderBlock3 (px 1) solid (hex "#f00")
borderBlockStart : BaseValue LineWidth -> Style
Sets border-block-start
property.
borderBlockStart (px 1)
borderBlockStart2 (px 1) solid
borderBlockStart3 (px 1) solid (hex "#f00")
borderBlockStart2 : Value LineWidth -> Value LineStyle -> Style
Sets border-block-start
property.
borderBlockStart (px 1)
borderBlockStart2 (px 1) solid
borderBlockStart3 (px 1) solid (hex "#f00")
borderBlockStart3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-block-start
property.
borderBlockStart (px 1)
borderBlockStart2 (px 1) solid
borderBlockStart3 (px 1) solid (hex "#f00")
borderBlockEnd : BaseValue LineWidth -> Style
Sets border-block-end
property.
borderBlockEnd (px 1)
borderBlockEnd2 (px 1) solid
borderBlockEnd3 (px 1) solid (hex "#f00")
borderBlockEnd2 : Value LineWidth -> Value LineStyle -> Style
Sets border-block-end
property.
borderBlockEnd (px 1)
borderBlockEnd2 (px 1) solid
borderBlockEnd3 (px 1) solid (hex "#f00")
borderBlockEnd3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-block-end
property.
borderBlockEnd (px 1)
borderBlockEnd2 (px 1) solid
borderBlockEnd3 (px 1) solid (hex "#f00")
borderInline : BaseValue LineWidth -> Style
Sets border-inline
property.
borderInline (px 1)
borderInline2 (px 1) solid
borderInline3 (px 1) solid (hex "#f00")
borderInline2 : Value LineWidth -> Value LineStyle -> Style
Sets border-inline
property.
borderInline (px 1)
borderInline2 (px 1) solid
borderInline3 (px 1) solid (hex "#f00")
borderInline3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-inline
property.
borderInline (px 1)
borderInline2 (px 1) solid
borderInline3 (px 1) solid (hex "#f00")
borderInlineStart : BaseValue LineWidth -> Style
Sets border-inline-start
property.
borderInlineStart (px 1)
borderInlineStart2 (px 1) solid
borderInlineStart3 (px 1) solid (hex "#f00")
borderInlineStart2 : Value LineWidth -> Value LineStyle -> Style
Sets border-inline-start
property.
borderInlineStart (px 1)
borderInlineStart2 (px 1) solid
borderInlineStart3 (px 1) solid (hex "#f00")
borderInlineStart3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-inline-start
property.
borderInlineStart (px 1)
borderInlineStart2 (px 1) solid
borderInlineStart3 (px 1) solid (hex "#f00")
borderInlineEnd : BaseValue LineWidth -> Style
Sets border-inline-end
property.
borderInlineEnd (px 1)
borderInlineEnd2 (px 1) solid
borderInlineEnd3 (px 1) solid (hex "#f00")
borderInlineEnd2 : Value LineWidth -> Value LineStyle -> Style
Sets border-inline-end
property.
borderInlineEnd (px 1)
borderInlineEnd2 (px 1) solid
borderInlineEnd3 (px 1) solid (hex "#f00")
borderInlineEnd3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets border-inline-end
property.
borderInlineEnd (px 1)
borderInlineEnd2 (px 1) solid
borderInlineEnd3 (px 1) solid (hex "#f00")
borderWidth : BaseValue LineWidth -> Style
Sets border-width
property.
borderWidth (px 1)
borderWidth2 (px 1) thin
borderWidth3 (px 1) thin zero
borderWidth4 (px 1) thin zero (em 1)
borderWidth2 : Value LineWidth -> Value LineWidth -> Style
Sets border-width
property.
borderWidth (px 1)
borderWidth2 (px 1) thin
borderWidth3 (px 1) thin zero
borderWidth4 (px 1) thin zero (em 1)
borderWidth3 : Value LineWidth -> Value LineWidth -> Value LineWidth -> Style
Sets border-width
property.
borderWidth (px 1)
borderWidth2 (px 1) thin
borderWidth3 (px 1) thin zero
borderWidth4 (px 1) thin zero (em 1)
borderWidth4 : Value LineWidth -> Value LineWidth -> Value LineWidth -> Value LineWidth -> Style
Sets border-width
property.
borderWidth (px 1)
borderWidth2 (px 1) thin
borderWidth3 (px 1) thin zero
borderWidth4 (px 1) thin zero (em 1)
borderTopWidth : BaseValue LineWidth -> Style
Sets border-top-width
property.
borderTopWidth (px 1)
borderRightWidth : BaseValue LineWidth -> Style
Sets border-right-width
property.
borderRightWidth (px 1)
borderBottomWidth : BaseValue LineWidth -> Style
Sets border-bottom-width
property.
borderBottomWidth (px 1)
borderLeftWidth : BaseValue LineWidth -> Style
Sets border-left-width
property.
borderLeftWidth (px 1)
borderBlockWidth : BaseValue LineWidth -> Style
Sets border-block-width
property.
borderBlockWidth (px 1)
borderBlockStartWidth : BaseValue LineWidth -> Style
Sets border-block-start-width
property.
borderBlockStartWidth (px 1)
borderBlockEndWidth : BaseValue LineWidth -> Style
Sets border-block-end-width
property.
borderBlockEndWidth (px 1)
borderInlineWidth : BaseValue LineWidth -> Style
Sets border-inline-width
property.
borderTopWidth (px 1)
borderInlineStartWidth : BaseValue LineWidth -> Style
Sets border-inline-start-width
property.
borderInlineStartWidth (px 1)
borderInlineEndWidth : BaseValue LineWidth -> Style
Sets border-inline-end-width
property.
borderInlineEndWidth (px 1)
borderStyle : BaseValue LineStyle -> Style
Sets border-style
property.
borderStyle solid
borderStyle2 solid none
borderStyle3 solid none dotted
borderStyle4 solid none dotted groove
borderStyle2 : Value LineStyle -> Value LineStyle -> Style
Sets border-style
property.
borderStyle solid
borderStyle3 : Value LineStyle -> Value LineStyle -> Value LineStyle -> Style
Sets border-style
property.
borderStyle2 solid none
borderStyle4 : Value LineStyle -> Value LineStyle -> Value LineStyle -> Value LineStyle -> Style
Sets border-style
property.
borderStyle4 solid none dotted groove
borderTopStyle : BaseValue LineStyle -> Style
Sets border-top-style
property.
borderTopStyle solid
borderRightStyle : BaseValue LineStyle -> Style
Sets border-right-style
property.
borderRightStyle solid
borderBottomStyle : BaseValue LineStyle -> Style
Sets border-bottom-style
property.
borderBottomStyle solid
borderLeftStyle : BaseValue LineStyle -> Style
Sets border-left-style
property.
borderLeftStyle solid
borderBlockStyle : BaseValue LineStyle -> Style
Sets border-block-style
property.
borderBlockStyle solid
borderBlockStartStyle : BaseValue LineStyle -> Style
Sets border-block-start-style
property.
borderBlockStartStyle solid
borderBlockEndStyle : BaseValue LineStyle -> Style
Sets border-block-end-style
property.
borderBlockEndStyle solid
borderInlineStyle : BaseValue LineStyle -> Style
Sets border-inline-style
property.
borderInlineStyle solid
borderInlineStartStyle : BaseValue LineStyle -> Style
Sets border-inline-start-style
property.
borderInlineStartStyle solid
borderInlineEndStyle : BaseValue LineStyle -> Style
Sets border-inline-end-style
property.
borderInlineEndStyle solid
dotted : Value { provides | dotted : Value.Supported }
The dotted
value used by properties such as borderStyle
,
columnRuleStyle
, and textDecorationStyle
.
It represents a line that consists of dots.
borderStyle dotted
columnRuleStyle dotted
textDecorationStyle dotted
dashed : Value { provides | dashed : Value.Supported }
The dashed
value used by properties such as borderStyle
,
columnRuleStyle
, and textDecorationStyle
.
borderStyle dashed
columnRuleStyle dashed
textDecorationStyle dashed
It represents a line that consists of dashes.
solid : Value { provides | solid : Value.Supported }
The solid
value used by properties such as borderStyle
,
columnRuleStyle
, and textDecorationStyle
.
borderStyle solid
columnRuleStyle solid
textDecorationStyle solid
It represents a solid, continuous line.
double : Value { provides | double : Value.Supported }
The double
value used by properties such as borderStyle
,
columnRuleStyle
, and textDecorationStyle
.
borderStyle double
columnRuleStyle double
textDecorationStyle double
It represents a double line: two lines side by side.
groove : Value { provides | groove : Value.Supported }
The groove
value used by properties such as borderStyle
,
columnRuleStyle
, and textDecorationStyle
.
borderStyle groove
columnRuleStyle groove
textDecorationStyle groove
Adds a bevel based on the color value, which makes things appear pressed into the document.
ridge : Value { provides | ridge : Value.Supported }
The ridge
value used by properties such as borderStyle
,
columnRuleStyle
, and textDecorationStyle
.
borderStyle ridge
columnRuleStyle ridge
textDecorationStyle ridge
Similar to groove
, but reverses the color values in a way that makes things appear raised.
inset_ : Value { provides | inset_ : Value.Supported }
The inset
value used by properties such as borderStyle
,
columnRuleStyle
, and textDecorationStyle
.
This is called inset_
rather than inset
because inset
is already a property function.
borderStyle inset_
columnRuleStyle inset_
textDecorationStyle inset_
Adds a split tone to the line that makes it appear slightly depressed.
Contrast with outset
outset : Value { provides | outset : Value.Supported }
The outset
value used by properties such as borderStyle
,
columnRuleStyle
,
and textDecorationStyle
,
and strokeAlign
.
borderStyle outset
columnRuleStyle outset
strokeAlign outset
textDecorationStyle outset
Similar to inset_
, but reverses the colors in a way that makes it appear slightly raised.
borderColor : BaseValue Color -> Style
Sets border-color
property.
borderColor (rgb 0 0 0)
borderColor2 (rgb 0 0 0) (hsl 10 10 10)
borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")
borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent
borderColor2 : Value Color -> Value Color -> Style
Sets border-color
property.
borderColor (rgb 0 0 0)
borderColor2 (rgb 0 0 0) (hsl 10 10 10)
borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")
borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent
borderColor3 : Value Color -> Value Color -> Value Color -> Style
Sets border-color
property.
borderColor (rgb 0 0 0)
borderColor2 (rgb 0 0 0) (hsl 10 10 10)
borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")
borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent
borderColor4 : Value Color -> Value Color -> Value Color -> Value Color -> Style
Sets border-color
property.
borderColor (rgb 0 0 0)
borderColor2 (rgb 0 0 0) (hsl 10 10 10)
borderColor3 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff")
borderColor4 (rgb 0 0 0) (hsl 10 10 10) (hex "#fff") transparent
borderTopColor : BaseValue Color -> Style
Sets border-top-color
property.
borderTopColor (rgb 0 0 0)
borderRightColor : BaseValue Color -> Style
Sets border-right-color
property.
borderRightColor (rgb 0 0 0)
borderBottomColor : BaseValue Color -> Style
Sets border-bottom-color
property.
borderBottomColor (rgb 0 0 0)
borderLeftColor : BaseValue Color -> Style
Sets border-left-color
property.
borderLeftColor (rgb 0 0 0)
borderBlockColor : BaseValue Color -> Style
Sets border-block-color
property.
borderBlockColor (rgb 0 0 0)
borderBlockStartColor : BaseValue Color -> Style
Sets border-block-start-color
property.
borderBlockStartColor (rgb 0 0 0)
borderBlockEndColor : BaseValue Color -> Style
Sets border-block-end-color
property.
borderBlockEndColor (rgb 0 0 0)
borderInlineColor : BaseValue Color -> Style
Sets border-inline-color
property.
borderInlineColor (rgb 0 0 0)
borderInlineStartColor : BaseValue Color -> Style
Sets border-inline-start-color
property.
borderInlineStartColor (rgb 0 0 0)
borderInlineEndColor : BaseValue Color -> Style
Sets border-inline-end-color
property.
borderInlineEndColor (rgb 0 0 0)
borderRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-radius
property.
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-radius
property.
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderRadius3 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-radius
property.
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderRadius4 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-radius
property.
borderRadius (em 4)
borderRadius2 (em 4) (px 2)
borderRadius3 (em 4) (px 2) (pct 5)
borderRadius4 (em 4) (px 2) (pct 5) (px 3)
borderTopLeftRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-top-left-radius
property.
borderTopLeftRadius (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopLeftRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-top-left-radius
property.
borderTopLeftRadius (em 4)
borderTopLeftRadius2 (em 4) (px 2)
borderTopRightRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-top-right-radius
property.
borderTopRightRadius (em 4)
borderTopRightRadius2 (em 4) (px 2)
borderTopRightRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-top-right-radius
property.
borderTopRightRadius (em 4)
borderTopRightRadius2 (em 4) (px 2)
borderBottomRightRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-bottom-right-radius
property.
borderBottomRightRadius (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderBottomRightRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-bottom-right-radius
property.
borderBottomRightRadius (em 4)
borderBottomRightRadius2 (em 4) (px 2)
borderBottomLeftRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-bottom-left-radius
property.
borderBottomLeftRadius (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderBottomLeftRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-bottom-left-radius
property.
borderBottomLeftRadius (em 4)
borderBottomLeftRadius2 (em 4) (px 2)
borderStartStartRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-start-start-radius
property.
borderStartStartRadius (em 4)
borderStartStartRadius2 (em 4) (px 2)
borderStartStartRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-start-start-radius
property.
borderStartStartRadius (em 4)
borderStartStartRadius2 (em 4) (px 2)
borderStartEndRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-start-end-radius
property.
borderStartEndRadius (em 4)
borderStartEndRadius2 (em 4) (px 2)
borderStartEndRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-start-end-radius
property.
borderStartEndRadius (em 4)
borderStartEndRadius2 (em 4) (px 2)
borderEndStartRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-end-start-radius
property.
borderEndStartRadius (em 4)
borderEndStartRadius2 (em 4) (px 2)
borderEndStartRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-end-start-radius
property.
borderEndStartRadius (em 4)
borderEndStartRadius2 (em 4) (px 2)
borderEndEndRadius : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets border-end-end-radius
property.
borderEndEndRadius (em 4)
borderEndEndRadius2 (em 4) (px 2)
borderEndEndRadius2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets border-end-end-radius
property.
borderEndEndRadius (em 4)
borderEndEndRadius2 (em 4) (px 2)
borderImageOutset : BaseValue (LengthSupported { num : Value.Supported }) -> Style
Sets border-image-outset
property.
borderImageOutset (rem 1)
borderImageOutset2 (num 1) (num 1.2)
borderImageOutset3 (px 30) (num 2) (px 45)
borderImageOutset4 (px 7) (px 12) (px 14) (px 5)
Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.
borderImageOutset2 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style
Sets border-image-outset
property.
borderImageOutset (rem 1)
borderImageOutset2 (num 1) (num 1.2)
borderImageOutset3 (px 30) (num 2) (px 45)
borderImageOutset4 (px 7) (px 12) (px 14) (px 5)
Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.
borderImageOutset3 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style
Sets border-image-outset
property.
borderImageOutset (rem 1)
borderImageOutset2 (num 1) (num 1.2)
borderImageOutset3 (px 30) (num 2) (px 45)
borderImageOutset4 (px 7) (px 12) (px 14) (px 5)
Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.
borderImageOutset4 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style
Sets border-image-outset
property.
borderImageOutset (rem 1)
borderImageOutset2 (num 1) (num 1.2)
borderImageOutset3 (px 30) (num 2) (px 45)
borderImageOutset4 (px 7) (px 12) (px 14) (px 5)
Specifies the distance by which an element's border image is set out from its border box. Supports values specified as length units or unitless numbers. Negative values are invalid.
borderImageWidth : BaseValue (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Style
Sets border-image-width
property.
borderImageWidth (rem 1)
borderImageWidth2 (num 1) (num 1.2)
borderImageWidth3 (pct 5) (pct 15) (pct 10)
borderImageWidth4 (px 7) (px 12) (px 14) (px 5)
Specifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.
borderImageWidth2 : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Style
Sets border-image-width
property.
borderImageWidth (rem 1)
borderImageWidth2 (num 1) (num 1.2)
borderImageWidth3 (pct 5) (pct 15) (pct 10)
borderImageWidth4 (px 7) (px 12) (px 14) (px 5)
Specifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.
borderImageWidth3 : Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, num : Value.Supported, auto : Value.Supported }) -> Style
Sets border-image-width
property.
borderImageWidth (rem 1)
borderImageWidth2 (num 1) (num 1.2)
borderImageWidth3 (pct 5) (pct 15) (pct 10)
borderImageWidth4 (px 7) (px 12) (px 14) (px 5)
Specifies the width of an element's border image. Supports values specified as length units, percentages, unitless numbers or auto. Negative values are invalid.
outline : BaseValue (LineWidthSupported (LineStyleSupported (ColorSupported { auto : Value.Supported, invert_ : Value.Supported }))) -> Style
Sets outline
.
outline zero
outline none
outline3 : Value LineWidth -> Value (LineStyleSupported { auto : Value.Supported }) -> Value (ColorSupported { invert_ : Value.Supported }) -> Style
Sets outline
.
outline3 (em 0.25) auto (rgb 120 250 32)
outlineWidth : BaseValue LineWidth -> Style
Sets outline-width
.
outlineWidth (px 2)
outlineWidth thin
outlineColor : BaseValue (ColorSupported { invert_ : Value.Supported }) -> Style
Sets outline-color
.
outlineColor (hex "eee")
outlineColor invert_
invert_ : Value { provides | invert_ : Value.Supported }
The invert
value used by properties such as outlineColor
outlineColor invert_
Note: This is called invert_
instead of invert
because invert
is already used as a filter-function value.
outlineStyle : BaseValue (LineStyleSupported { auto : Value.Supported }) -> Style
Sets outline-style
.
outlineStyle auto
outlineStyle dashed
overflow : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style
Sets overflow
.
overflow visible
overflow hidden
overflow scroll
overflow auto
overflow2 visible hidden -- x: visible, y: hidden
overflow2 : Value { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Value { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style
Sets overflow
.
overflow visible
overflow hidden
overflow scroll
overflow auto
overflow2 visible hidden -- x: visible, y: hidden
overflowX : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style
Sets overflow-x
.
overflowX visible
overflowX hidden
overflowX scroll
overflowX auto
overflowY : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported, clip : Value.Supported } -> Style
Sets overflow-y
.
overflowY visible
overflowY hidden
overflowY scroll
overflowY auto
overflowBlock : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported } -> Style
Sets overflow-block
.
overflowBlock visible
overflowBlock hidden
overflowBlock scroll
overflowBlock auto
overflowInline : BaseValue { visible : Value.Supported, hidden : Value.Supported, scroll : Value.Supported, auto : Value.Supported } -> Style
Sets overflow-inline
.
overflowInline visible
overflowInline hidden
overflowInline scroll
overflowInline auto
overflowWrap : BaseValue { anywhere : Value.Supported, breakWord : Value.Supported, normal : Value.Supported } -> Style
Sets overflow-wrap
overflowWrap breakWord
overflowWrap normal
overflowAnchor : BaseValue { auto : Value.Supported, none : Value.Supported } -> Style
Sets overflow-anchor
overflowAnchor auto
overflowAnchor none
breakWord : Value { provides | breakWord : Value.Supported }
The break-word
value, which can be used with such properties as
overflow-wrap
and word-break
.
overflowWrap breakWord
wordBreak breakWord
anywhere : Value { provides | anywhere : Value.Supported }
The anywhere
value used by overflowWrap
and lineBreak
.
overflowWrap anywhere
lineBreak anywhere
resize : BaseValue { none : Value.Supported, both : Value.Supported, horizontal : Value.Supported, vertical : Value.Supported, block : Value.Supported, inline : Value.Supported } -> Style
The resize
property.
resize none
resize both
resize inline
horizontal : Value { provides | horizontal : Value.Supported }
The horizontal
value used by resize
.
resize horizontal
The CSS Flexible Box Layout Module. See this complete guide.
flex : BaseValue (WidthSupported { none : Value.Supported, content : Value.Supported, num : Value.Supported }) -> Style
The flex
shorthand property.
flex none
flex auto
flex (num 1)
flex2 : Value { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Value (WidthSupported { content : Value.Supported, num : Value.Supported }) -> Style
The flex
shorthand property.
flex2 zero auto
flex3 : Value { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Value { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Value (WidthSupported { content : Value.Supported }) -> Style
The flex
shorthand property.
flex3 (num 1) zero (pct 50)
flexBasis : BaseValue (WidthSupported { content : Value.Supported }) -> Style
Sets flex-basis
.
flexBasis (em 10)
flexBasis (px 3)
flexBasis (pct 100)
flexBasis auto
flexGrow : BaseValue { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Style
Sets flex-grow
.
flexGrow (num 3)
flexGrow (num 0.6)
flexShrink : BaseValue { num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Style
Sets flex-shrink
.
flexShrink (num 2)
flexShrink (num 0.6)
flexDirection : BaseValue { row : Value.Supported, rowReverse : Value.Supported, column : Value.Supported, columnReverse : Value.Supported } -> Style
Sets flex-direction
.
flexDirection column
flexWrap : BaseValue { nowrap : Value.Supported, wrap : Value.Supported, wrapReverse : Value.Supported } -> Style
Sets flex-wrap
.
flexWrap wrap
flexWrap wrapReverse
flexWrap nowrap
flexFlow : BaseValue { row : Value.Supported, rowReverse : Value.Supported, column : Value.Supported, columnReverse : Value.Supported, nowrap : Value.Supported, wrap : Value.Supported, wrapReverse : Value.Supported } -> Style
The flex-flow
shorthand property.
flexFlow rowReverse
flexFlow wrap
flexFlow inherit
flexFlow2 column wrapReverse
flexFlow2 : Value { row : Value.Supported, rowReverse : Value.Supported, column : Value.Supported, columnReverse : Value.Supported } -> Value { nowrap : Value.Supported, wrap : Value.Supported, wrapReverse : Value.Supported } -> Style
The flex-flow
shorthand property.
flexFlow rowReverse
flexFlow wrap
flexFlow inherit
flexFlow2 column wrapReverse
Other values you can use for flex item alignment:
alignContent : BaseValue { normal : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported } -> Style
Sets align-content
.
alignContent flexStart
Note: This property has no effect when the flexbox has only a single line.
alignContent2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported } -> Style
Sets align-content
.
alignContent2 unsafe start
Note: This property has no effect when the flexbox has only a single line.
alignItems : BaseValue { normal : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported } -> Style
Sets align-items
.
alignItems firstBaseline
alignItems2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Style
Sets align-items
.
alignItems2 unsafe selfStart
alignSelf : BaseValue { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Style
Sets align-self
.
alignSelf firstBaseline
alignSelf2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Style
Sets align-self
.
alignSelf2 unsafe flexStart
justifyContent : BaseValue { normal : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
Sets justify-content
.
justifyContent flexStart
justifyContent2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
Sets justify-content
.
justifyContent2 safe flexStart
justifyItems : BaseValue { normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, legacy : Value.Supported, legacyLeft : Value.Supported, legacyRight : Value.Supported, legacyCenter : Value.Supported } -> Style
The justify-items
property.
justifyItems center
Note: This property is ignored when used in flexbox or table cell layouts.
justifyItems2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
The justify-items
property.
justifyItems2 unsafe right_
Note: This property is ignored when used in flexbox or table cell layouts.
justifySelf : BaseValue { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
The justify-self
property.
jusitfySelf left_
Note: This property is ignored when used in flexbox or table cell layouts.
justifySelf2 : Value { safe : Value.Supported, unsafe : Value.Supported } -> Value { center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
The justify-self
property.
justifySelf2 unsafe left_
Note: This property is ignored when used in flexbox or table cell layouts.
placeContent : BaseValue {} -> Style
The place-content
property.
placeContent
is a shorthand for the alignContent
and
justifyContent
properties in a single declaration.
This one-argument version only accepts global values.
placeContent inherit
placeContent2 flexStart flexEnd
placeContent2 : Value { normal : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported } -> Value { normal : Value.Supported, spaceBetween : Value.Supported, spaceAround : Value.Supported, spaceEvenly : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
The place-content
property.
placeContent
is a shorthand for the alignContent
and
justifyContent
properties in a single declaration.
This two-argumant version accepts alignContent
and justifyContent
values.
placeContent inherit
placeContent2 flexStart flexEnd
placeItems : BaseValue { center : Value.Supported } -> Style
The place-items
property.
placeItems
is a shorthand for the alignItems
and
justifyItems
properties in a single declaration.
This one-argument version only accepts global values.
placeItems inherit
placeItems2 center selfEnd
placeItems2 : Value { normal : Value.Supported, stretch : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported } -> Value { normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, legacy : Value.Supported, legacyLeft : Value.Supported, legacyRight : Value.Supported, legacyCenter : Value.Supported } -> Style
The place-items
property.
placeItems
is a shorthand for the alignItems
and
justifyItems
properties in a single declaration.
This one-argument version only accepts global values.
placeItems inherit
placeItems2 center selfEnd
placeSelf : BaseValue {} -> Style
The place-self
property.
placeSelf
is a shorthand for the alignSelf
and
justifySelf
properties in a single declaration.
This one-argument version only accepts global values.
placeSelf inherit
placeSelf2 flexStart flexEnd
placeSelf2 : Value { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported } -> Value { auto : Value.Supported, normal : Value.Supported, stretch : Value.Supported, baseline : Value.Supported, firstBaseline : Value.Supported, lastBaseline : Value.Supported, center : Value.Supported, start : Value.Supported, end : Value.Supported, flexStart : Value.Supported, flexEnd : Value.Supported, selfStart : Value.Supported, selfEnd : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
The place-self
property.
placeSelf
is a shorthand for the alignSelf
and
justifySelf
properties in a single declaration.
This one-argument version only accepts global values.
placeSelf inherit
placeSelf2 flexStart flexEnd
order : BaseValue { int : Value.Supported, zero : Value.Supported } -> Style
Sets order
order (num 2)
order (num -2)
row : Value { provides | row : Value.Supported }
The row
flex-direction
value.
flexDirection row
rowReverse : Value { provides | rowReverse : Value.Supported }
The row-reverse
flex-direction
value.
flexDirection rowReverse
columnReverse : Value { provides | columnReverse : Value.Supported }
The column-reverse
flex-direction
value.
flexDirection columnReverse
flexStart : Value { provides | flexStart : Value.Supported }
The flex-start
value used by alignItems
,
justifyContent
,
and alignContent
.
alignItems flexStart
justifyContent flexStart
alignContent flexStart
flexEnd : Value { provides | flexEnd : Value.Supported }
The flex-end
value used by alignItems
,
justifyContent
,
and alignContent
.
alignItems flexEnd
justifyContent flexEnd
alignContent flexEnd
selfStart : Value { provides | selfStart : Value.Supported }
selfEnd : Value { provides | selfEnd : Value.Supported }
spaceBetween : Value { provides | spaceBetween : Value.Supported }
The space-between
value used by justifyContent
and alignContent
.
justifyContent spaceBetween
alignContent spaceBetween
spaceAround : Value { provides | spaceAround : Value.Supported }
The space-around
value used by justifyContent
and alignContent
.
justifyContent spaceAround
alignContent spaceAround
spaceEvenly : Value { provides | spaceEvenly : Value.Supported }
Distribute items evenly, with an equal size space between each element and the start and end.
justifyContent spaceEvenly
firstBaseline : Value { provides | firstBaseline : Value.Supported }
The first baseline
value used for properties such as alignContent
,
alignItems
,
and alignSelf
.
alignItems firstBaseline
lastBaseline : Value { provides | lastBaseline : Value.Supported }
The last baseline
value used for properties such as alignContent
,
alignItems
,
and alignSelf
.
alignItems lastBaseline
safe : Value { provides | safe : Value.Supported }
The safe
value used for properties such as alignContent2
.
alignContent2 safe center
unsafe : Value { provides | unsafe : Value.Supported }
The unsafe
value used for properties such as alignContent2
.
alignContent2 unsafe center
legacy : Value { provides | legacy : Value.Supported }
The legacy
value used for properties such as justifyItems
.
justifyItems legacy
legacyLeft : Value { provides | legacyLeft : Value.Supported }
The legacy left
value used for properties such as justifyItems
.
justifyItems legacyLeft
legacyRight : Value { provides | legacyRight : Value.Supported }
The legacy right
value used for properties such as justifyItems
.
justifyItems legacyRight
legacyCenter : Value { provides | legacyCenter : Value.Supported }
The legacy center
value used for properties such as justifyItems
.
justifyItems legacyCenter
wrap : Value { provides | wrap : Value.Supported }
The wrap
flex-wrap
value.
flexWrap wrap
wrapReverse : Value { provides | wrapReverse : Value.Supported }
The wrap-reverse
flex-wrap
value.
flexWrap wrapReverse
TrackBreadthSupported { supported | minmax : Value.Supported
, fitContent : Value.Supported
}
Extensible type representing the possibilities of the
<fixed-size>
type used in grids.
LengthSupported { supported | pct : Value.Supported
, fr : Value.Supported
, auto : Value.Supported
, minContent : Value.Supported
, maxContent : Value.Supported
}
Extensible type representing the possibilities of the
<track-breadth>
type used in grids.
TrackBreadthSupported { supported | minmax : Value.Supported
, fitContentTo : Value.Supported
}
Extensible type representing the possibilities of the
<track-size>
type used in grids.
gridAutoRows : BaseValue TrackSize -> Style
The 1-argument version of the grid-auto-rows
property.
gridAutoRows (px 100)
gridAutoRows (vmax 30)
gridAutoRows (fr 1)
gridAutoRows (minmax (fr 2) (pct 20))
gridAutoRowsMany : List (Value TrackSize) -> Style
The many-argument version of the grid-auto-rows
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
gridAutoRows (px 100)
gridAutoRows (vmax 30)
gridAutoRows (fr 1)
gridAutoRows (minmax (fr 2) (pct 20))
gridAutoRowsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]
gridAutoRowsMany [] -- unset
gridAutoColumns : BaseValue TrackSize -> Style
The 1-argument version of the grid-auto-columns
property.
gridAutoColumns (px 100)
gridAutoColumns (vmax 30)
gridAutoColumns (fr 1)
gridAutoColumns (minmax (fr 2) (pct 20))
gridAutoColumnsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]
gridAutoColumnsMany [] -- unset
gridAutoColumnsMany : List (Value TrackSize) -> Style
The many-argument version of the grid-auto-columns
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
gridAutoColumns (px 100)
gridAutoColumns (vmax 30)
gridAutoColumns (fr 1)
gridAutoColumns (minmax (fr 2) (pct 20))
gridAutoColumnsMany [ fr 1, px 100, minmax (fr 2) (pct 20) ]
gridAutoColumnsMany [] -- unset
gridAutoFlow : BaseValue { row : Value.Supported, column : Value.Supported, dense : Value.Supported } -> Style
The 1-argument version of the grid-auto-flow
property.
gridAutoFlow dense
gridAutoFlow column
gridAutoFlow2 row dense
gridAutoFlow2 : Value { row : Value.Supported, column : Value.Supported } -> Value { dense : Value.Supported } -> Style
The 1-argument version of the grid-auto-flow
property.
gridAutoFlow2 row dense
(The last argument can only be dense
but I thought this
would be the most natural way to make it fit into Elm,
even if it's a bit redundant.)
{ auto : Value.Supported
, num : Value.Supported
, gridLineIdent : Value.Supported
, gridLineSpanNum : Value.Supported
, gridLineSpanIdent : Value.Supported
}
A type encapsulating the possibilities for defining a <grid-line>
,
which are the lines around the spaces in a CSS grid.
gridLineIdent : String -> Maybe Basics.Int -> Value { provides | gridLineIdent : Value.Supported }
Creates a grid line value with a
gridLineIdent "footer" Nothing -- footer
gridLineIdent "header" (Just 1) -- header 1
gridLineSpanNum 4 -- span 4
gridLineSpanIdent "header" Nothing -- span header
gridLineSpanIdent "footer" (Just 1) -- span header 1
gridLineSpanNum : Basics.Int -> Value { provides | gridLineSpanNum : Value.Supported }
Creates a grid line value with a 'span' keyword value followed by an integer.
gridLineIdent "footer" Nothing -- footer
gridLineIdent "header" (Just 1) -- header 1
gridLineSpanNum 4 -- span 4
gridLineSpanIdent "header" Nothing -- span header
gridLineSpanIdent "footer" (Just 1) -- span header 1
gridLineSpanIdent : String -> Maybe Basics.Int -> Value { provides | gridLineSpanIdent : Value.Supported }
Creates a grid line value with a 'span' keyword value followed by an ident and an optional integer.
gridLineIdent "footer" Nothing -- footer
gridLineIdent "header" (Just 1) -- header 1
gridLineSpanNum 4 -- span 4
gridLineSpanIdent "header" Nothing -- span header
gridLineSpanIdent "footer" (Just 1) -- span header 1
gridArea : BaseValue GridLine -> Style
The grid-area
property.
This variant is for keywords or for 1 <grid-line>
(GridLine
) that determines
the start and end positions of this grid item.
Numbers used in this should not be zero, else they won't work.
gridArea auto
gridArea inherit
gridArea <| gridLineSpanNum 4
gridArea <| gridLineIdent "big-grid" (Just 4)
gridArea2
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
gridArea3
( gridLineIdent "big-grid" (Just 4))
( gridLineSpanIdent "other-grid" Nothing)
( num 7 )
gridArea4
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
( num 7 )
( gridLineSpanIdent "another-grid" (Just 12) )
gridArea2 : Value GridLine -> Value GridLine -> Style
The grid-area
property.
This variant specifies 2 <grid-line>
s (GridLine
) that determines
the start and end positions of this grid item.
Numbers used in this should not be zero, else they won't work.
gridArea auto
gridArea inherit
gridArea <| gridLineSpanNum 4
gridArea <| gridLineIdent "big-grid" (Just 4)
gridArea2
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
gridArea3
( gridLineIdent "big-grid" (Just 4))
( gridLineSpanIdent "other-grid" Nothing)
( num 7 )
gridArea4
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
( num 7 )
( gridLineSpanIdent "another-grid" (Just 12) )
gridArea3 : Value GridLine -> Value GridLine -> Value GridLine -> Style
The grid-area
property.
This variant specifies 3 <grid-line>
s (GridLine
) that determines
the start and end positions of this grid item.
Numbers used in this should not be zero, else they won't work.
gridArea auto
gridArea inherit
gridArea <| gridLineSpanNum 4
gridArea <| gridLineIdent "big-grid" (Just 4)
gridArea2
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
gridArea3
( gridLineIdent "big-grid" (Just 4))
( gridLineSpanIdent "other-grid" Nothing)
( num 7 )
gridArea4
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
( num 7 )
( gridLineSpanIdent "another-grid" (Just 12) )
gridArea4 : Value GridLine -> Value GridLine -> Value GridLine -> Value GridLine -> Style
The grid-area
property.
This variant specifies 4 <grid-line>
s (GridLine
) that determines
the start and end positions of this grid item.
Numbers used in this should not be zero, else they won't work.
gridArea auto
gridArea inherit
gridArea <| gridLineSpanNum 4
gridArea <| gridLineIdent "big-grid" (Just 4)
gridArea2
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
gridArea3
( gridLineIdent "big-grid" (Just 4))
( gridLineSpanIdent "other-grid" Nothing)
( num 7 )
gridArea4
( gridLineIdent "big-grid" (Just 4) )
( gridLineSpanIdent "other-grid" Nothing )
( num 7 )
( gridLineSpanIdent "another-grid" (Just 12) )
gridRow : BaseValue GridLine -> Style
The grid-row
property.
This variant is for single keyword arguments and
specifying 1 <grid-line>
(GridLine
), which determines
the start and end position of this grid item.
Numbers used in this should not be zero, else they won't work.
gridRow auto
gridRow inherit
gridRow <| gridLineIdent "main-grid" (Just 3)
-- grid-row: main-grid 3
gridRow2 auto ( gridLineSpanIdent "grid-thing" (Just 5) )
-- grid-row: auto / span grid-thing 5
gridRow2 : Value GridLine -> Value GridLine -> Style
The grid-row
property.
This variant specifies 2 <grid-line>
s (GridLine
) that determine
the start and end position of this grid item.
Numbers used in this should not be zero, else they won't work.
gridRow auto
gridRow inherit
gridRow <| gridLineIdent "main-grid" (Just 3)
-- grid-row: main-grid 3
gridRow2 auto ( gridLineSpanIdent "grid-thing" (Just 5) )
-- grid-row: auto / span grid-thing 5
gridRowStart : BaseValue GridLine -> Style
The 1-argument version of the grid-row-start
property.
gridRowStart inherit
gridRowStart auto
gridRowStart <| gridLineSpanIdent "big-grid" Nothing
gridRowStart <| int 3
gridRowStart <| gridLineIdent "big-grid" (Just 2)
gridRowEnd : BaseValue GridLine -> Style
The 1-argument version of the grid-row-end
property.
gridRowEnd inherit
gridRowEnd auto
gridRowEnd <| gridLineSpanIdent "big-grid" Nothing
gridRowEnd <| int 3
gridRowEnd <| gridLineIdent "big-grid" (Just 2)
gridColumn : BaseValue GridLine -> Style
The grid-column
property.
This variant is for single keyword arguments and
specifying 1 <grid-line>
(GridLine
), which determines
the start and end position of this grid item.
Numbers used in this should not be zero, else they won't work.
gridColumn auto
gridColumn inherit
gridColumn <| gridLineIdent "main-grid" (Just 3)
-- grid-column: main-grid 3
gridColumn2 auto ( gridLineSpanIdent "grid-thing") (Just 5) )
-- grid-column: auto / span grid-thing 5
gridColumn2 : Value GridLine -> Value GridLine -> Style
The grid-column
property.
This variant specifies 2 <grid-line>
s (GridLine
) that determine
the start and end position of this grid item.
Numbers used in this should not be zero, else they won't work.
gridColumn auto
gridColumn inherit
gridColumn <| gridLineIdent "main-grid" (Just 3)
-- grid-column: main-grid 3
gridColumn2 auto ( gridLineSpanIdent "grid-thing") (Just 5) )
-- grid-column: auto / span grid-thing 5
gridColumnStart : BaseValue GridLine -> Style
The 1-argument version of the grid-column-start
property.
gridColumnStart inherit
gridColumnStart auto
gridColumnStart <| gridLineSpanIdent "big-grid") Nothing
gridColumnStart <| int 3
gridColumnStart <| gridLineIdent "big-grid" (Just 2)
gridColumnEnd : BaseValue GridLine -> Style
The 1-argument version of the grid-column-end
property.
gridColumnEnd inherit
gridColumnEnd auto
gridColumnEnd <| gridLineSpanIdent "big-grid") Nothing
gridColumnEnd <| int 3
gridColumnEnd <| gridLineIdent "big-grid" (Just 2)
gridTemplate : BaseValue { none : Value.Supported, templateRowsColumns : Value.Supported, templateAreasRowsColumns : Value.Supported } -> Style
Thegrid-template
property.
gridTemplate initial
gridTemplate none
gridTemplate <|
templateAreasRowsColumns
[ templateAreaRow
( Just <| lineNames ["header-left"] )
"head head"
( Just <| px 30 )
( Just <| lineNames ["header-right"] )
, templateAreaRow
( Just <| lineNames ["main-left"] )
"nav main"
( Just <| fr 1 )
( Just <| lineNames ["main-right"])
, templateAreaRow
( Just <| lineNames ["footer-left"] )
"nav foot"
( Just <| px 30 )
( Just <| lineNames ["footer-right"])
]
( Just <| templateColumns
( px 120 )
[ fr 120
]
)
gridTemplate <|
templateRowsColumns
( trackList
( lineNames ["line1", "line2"] )
[ px 300
, lineNames ["line3"]
]
)
( autoTrackList
( minmax (px 210) maxContent )
[ autoRepeat autoFill [px 200]
, pct 20
]
)
gridTemplateAreas : BaseValue { none : Value.Supported } -> Style
The grid-template-areas
property. Use the gridTemplateAreasMany
function if you want
to use multiple strings as a value.
gridTemplateAreas none
gridTemplateAreas inherit
gridTemplateAreasCells
[ "c c b"
, "c a b"
, "c d e"
]
gridTemplateAreasCells : List String -> Style
A version of gridTemplateAreas
that
lets you input a list of strings as values, representing grid cells.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
gridTemplateAreasCells
[ "c c b"
, "c a b"
, "c d e"
]
gridTemplateAreasCells [] -- unset
gridTemplateRows : BaseValue { none : Value.Supported, trackList : Value.Supported, autoTrackList : Value.Supported } -> Style
The grid-template-rows
property.
gridTemplateRows inherit
gridTemplateRows none
gridTemplateRows <|
trackList (px 200) [fr 1, px 180]
gridTemplateRows <|
trackList
( lineNames ["line1", "line2"] )
[ px 300
, lineNames ["line3"]
]
gridTemplateRows <|
trackList [ fixedRepeat (num 4) [px 520] ]
gridTemplateRows <|
autoTrackList
( minmax (px 210) maxContent )
[ autoRepeat autoFill [px 200]
, pct 20
]
gridTemplateColumns : BaseValue { none : Value.Supported, trackList : Value.Supported, autoTrackList : Value.Supported } -> Style
The grid-template-columns
property.
gridTemplateColumns inherit
gridTemplateColumns none
gridTemplateColumns <|
trackList (px 200) [fr 1, px 180]
gridTemplateColumns <|
trackList
( lineNames ["line1", "line2"] )
[ px 300
, lineNames ["line3"]
]
gridTemplateColumns <|
trackList [ fixedRepeat (num 4) [px 520] ]
gridTemplateColumns <|
autoTrackList
( minmax (px 210) maxContent )
[ autoRepeat autoFill [px 200]
, pct 20
]
templateRowsColumns : Value { trackList : Value.Supported, autoTrackList : Value.Supported } -> Value { trackList : Value.Supported, autoTrackList : Value.Supported } -> Value { provides | templateRowsColumns : Value.Supported }
Provides structured input for gridTemplate
for
inputting rows and columns, equivalent to inputting gridTemplateRows
and [gridTemplateColumns
] separately.
gridTemplate <|
templateRowsColumns
trackList
( lineNames ["line1", "line2"] )
[ px 300
, lineNames ["line3"]
]
autoTrackList
( minmax (px 210) maxContent )
[ autoRepeat autoFill [px 200]
, pct 20
]
templateAreasRowsColumns : List (Value { templateAreaRow : Value.Supported }) -> Maybe (Value { templateColumns : Value.Supported }) -> Value { provides | templateAreasRowsColumns : Value.Supported }
Provides structured input for gridTemplate
for
inputting areas combined with rows, and then columns.
gridTemplate <|
templateAreasRowsColumns
[ templateAreaRow
( Just <| lineNames ["left"] )
"nav foot"
( Just <| px 30 )
( Just <| lineNames ["right"])
]
( Just <| templateColumns
( px 120 )
[ fr 120
]
)
templateAreaRow : Maybe (Value { lineNames : Value.Supported }) -> String -> Maybe (Value TrackSize) -> Maybe (Value { lineNames : Value.Supported }) -> Value { provides | templateAreaRow : Value.Supported }
The portion of a possible way of giving a
gridTemplate
`a value that sets rows and areas.
gridTemplate <|
templateAreasRowsColumns
[ templateAreaRow
( Just <| lineNames ["header-left"] )
"head head"
( Just <| px 30 )
( Just <| lineNames ["header-right"] )
, templateAreaRow
( Just <| lineNames ["main-left"] )
"nav main"
( Just <| fr 1 )
( Just <| lineNames ["main-right"])
, templateAreaRow
( Just <| lineNames ["footer-left"] )
"nav foot"
( Just <| px 30 )
( Just <| lineNames ["footer-right"])
]
( Just <| templateColumns
( px 120 )
[ fr 120
]
)
templateColumns : Value (TrackSizeSupported { lineNames : Value.Supported }) -> List (Value (TrackSizeSupported { lineNames : Value.Supported })) -> Value { provides | templateColumns : Value.Supported }
The portion of a possible way of giving a
gridTemplate
`a value that sets columns.
The first value is the head of the list. This function is structured in this way to prevent giving empty lists.
gridTemplate <|
templateAreasRowsColumns
[ templateAreaRow
( Just <| lineNames ["left"] )
"nav foot"
( Just <| px 30 )
( Just <| lineNames ["right"])
]
( Just <| templateColumns
( px 120 )
[ fr 120
]
)
trackList : Value (TrackSizeSupported { fixedRepeat : Value.Supported, lineNames : Value.Supported }) -> List (Value (TrackSizeSupported { fixedRepeat : Value.Supported, lineNames : Value.Supported })) -> Value { provides | trackList : Value.Supported }
Creates a <track-list>
value for use in creating grid tempolates.
gridTemplateColumns <|
trackList [ fixedRepeat (num 4) [px 520] ]
autoTrackList : Value (FixedSizeSupported { fixedRepeat : Value.Supported, autoRepeat : Value.Supported, lineNames : Value.Supported }) -> List (Value (FixedSizeSupported { fixedRepeat : Value.Supported, autoRepeat : Value.Supported, lineNames : Value.Supported })) -> Value { provides | autoTrackList : Value.Supported }
Creates a <auto-track-list>
value for use in creating grid templates.
gridTemplateColumns <|
autoTrackList
( minmax (px 210) maxContent )
[ autoRepeat autoFill [px 200]
, pct 20
]
fixedRepeat : Value { num : Value.Supported } -> List (Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, minmax : Value.Supported, lineNames : Value.Supported })) -> Value { provides | fixedRepeat : Value.Supported }
Performs the repeat()
function used in CSS Grid track lists. This lets you
repeat a pattern of grid lines in CSS Grid without duplicating code.
This is the fixed variant of the repeat() function. In this variant, you must
specify a num
before specifying the track list pattern you want to repeat.
gridTemplate <|
templateRowsColumns
( trackList
( lineNames ["line1", "line2"] )
[ px 300
, lineNames ["line3"]
]
)
( autoTrackList
( minmax (px 210) maxContent )
[ autoRepeat autoFill [px 200]
, pct 20
]
)
autoRepeat : Value { autoFill : Value.Supported, autoFit : Value.Supported } -> List (Value (LengthSupported { pct : Value.Supported, fr : Value.Supported, minmax : Value.Supported, lineNames : Value.Supported })) -> Value { provides | autoRepeat : Value.Supported }
Performs the repeat()
function used in CSS Grid track lists. This lets you
repeat a pattern of grid lines in CSS Grid without duplicating code.
You must specify a autoFit
, or autoFill
before specifying the track
list pattern you want to repeat.
gridTemplateRows <|
autoTrackList
[ lineNames ["linename1"]
, px 100
, lineNames ["linename2"]
, autoRepeat autoFit
(px 10)
[ lineNames["row-start"]
, px 250
, lineNames["row-end"]
]
, px 100
]
autoFill : Value { provides | autoFill : Value.Supported }
The auto-fill
value used in the repeat()
function.
gridTemplateColumnsList
[ minmax (px 210) maxContent
, repeatedTracks autoFill [px 200]
, pct 20
]
(Note: due to a naming conflict, the repeat()
function is
called repeatedTracks
in this package.)
autoFit : Value { provides | autoFit : Value.Supported }
The auto-fit
value used in the repeat()
function.
gridTemplateColumnsList
[ minmax (px 210) maxContent
, repeatedTracks autoFit [px 200]
, pct 20
]
(Note: due to a naming conflict, the repeat()
function is
called repeatedTracks
in this package.)
lineNames : List String -> Value { provides | lineNames : Value.Supported }
Custom ident(s) that are only used in grid area definitions, for naming lines of a grid layout. A line may have multiple names.
Line names are case sensitive.
gridTemplateColumnsList
[ lineNames["line1", "line2"]
, px 300
, lineNames["line3"]
]
--- grid-template-colums: [line1 line2] 300px [line3];
dense : Value { provides | dense : Value.Supported }
The dense
value for the grid-auto-flow
property.
gridAutoFlow dense
gridAutoFlow2 row dense
gap : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets the gap
property.
The gap
property is a shorthand for setting row-gap
and column-gap
in a single declaration.
gap
specifies the size of spacing between items within grid, flex
and multi-column layouts.
gap initial
gap (px 20) -- 20px gap between all items.
gap2 (px 20) (px 40) -- 20px row gap, 40px column gap.
gap2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets the gap
property.
The gap
property is a shorthand for setting row-gap
and column-gap
in a single declaration.
gap
specifies the size of spacing between items within grid, flex
and multi-column layouts.
gap2 (px 20) (px 40) -- 20px row gap, 40px column gap.
rowGap : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
Sets the row-gap
property.
row-gap
specifies the size of spacing between rows of items within grid, flex
and multi-column layouts.
rowGap normal
rowGap (px 20)
backgroundColor : BaseValue (ColorSupported { transparent : Value.Supported }) -> Style
Sets background-color
.
backgroundColor (hex "#60b5cc")
backgroundColor (rgb 96 181 204)
backgroundColor (rgba 96 181 204 0.5)
backgroundColor transparent
backgroundAttachment : BaseValue { fixed : Value.Supported, scroll : Value.Supported, local : Value.Supported } -> Style
Sets background-attachment
.
backgroundAttachment local
backgroundAttachmentMany [ fixed, scroll, fixed ]
backgroundAttachmentMany [ fixed, scroll, fixed ]
backgroundAttachmentMany [] -- background-attachment: unset;
backgroundAttachmentMany : List (Value { fixed : Value.Supported, scroll : Value.Supported, local : Value.Supported }) -> Style
Sets background-attachment
.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
backgroundAttachment local
backgroundAttachmentMany [ fixed, scroll, fixed ]
backgroundAttachmentMany [ fixed, scroll, fixed ]
backgroundAttachmentMany [] -- background-attachment: unset;
local : Value { provides | local : Value.Supported }
The local
background-attachment
value
backgroundAttachment local
backgroundBlendMode : BaseValue BlendMode -> Style
Sets background-blend-mode
.
Note that this takes an argument of color_
, not color
!
backgroundBlendMode color_
backgroundBlendMode darken
backgroundBlendMode colorBurn
backgroundBlendModeMany [ darken, color_ ]
backgroundBlendModeMany [] -- background-blend-mode: unset;
backgroundBlendModeMany : List (Value BlendMode) -> Style
Sets background-blend-mode
.
Note that this takes an argument of color_
, not color
!
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
backgroundBlendMode color_
backgroundBlendMode darken
backgroundBlendMode colorBurn
backgroundBlendModeMany [ darken, color_ ]
backgroundBlendModeMany [] -- background-blend-mode: unset;
backgroundClip : BaseValue { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported, text : Value.Supported } -> Style
Sets background-clip
.
Note that this takes an argument of text
, not color
!
backgroundClip text
backgroundClip paddingBox
backgroundClip contentBox
backgroundClipMany [ text, borderBox, text ]
backgroundClipMany [] -- background-clip: unset;
backgroundClipMany : List (Value { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported, text : Value.Supported }) -> Style
Sets background-clip
.
Note that this takes an argument of text
, not color
!
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
backgroundClip text
backgroundClip paddingBox
backgroundClip contentBox
backgroundClipMany [ text, borderBox, text ]
backgroundClipMany [] -- background-clip: unset;
backgroundOrigin : BaseValue { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported } -> Style
Sets background-origin
.
backgroundOrigin paddingBox
backgroundOrigin contentBox
backgroundOriginMany [ contentBox, borderBox, contentBox ]
backgroundOriginMany [] -- background-origin: unset;
backgroundOriginMany : List (Value { borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported }) -> Style
Sets background-origin
.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
backgroundOrigin paddingBox
backgroundOrigin contentBox
backgroundOriginMany [ contentBox, borderBox, contentBox ]
backgroundOriginMany [] -- background-origin: unset;
backgroundImage : BaseValue (ImageSupported { none : Value.Supported }) -> Style
Sets background-image
.
backgroundImage (url "http://www.example.com/chicken.jpg")
backgroundImage (linearGradient (stop red) (stop blue))
See also backgroundImages
if you need multiple images.
backgroundImageMany : List (Value Image) -> Style
Sets background-image
for multiple images.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
backgroundImageMany
(linearGradient (stop red) (stop blue))
[ url "http://www.example.com/chicken.jpg" ]
backgroundImageMany [] -- background-image: unset;
See also backgroundImage
if you need only one.
backgroundPosition : BaseValue (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style
Sets background-position
.
backgroundPosition left_
backgroundPosition (px 45)
backgroundPosition
sets the horizontal direction. If you need the vertical
direction instead, use backgroundPosition2
like this:
backgroundPosition2 zero (px 45)
If you need to set the offsets from the right or bottom, use
backgroundPosition4
like this:
backgroundPosition4 right_ (px 20) bottom_ (pct 30)
backgroundPosition2 : Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style
Sets background-position
.
backgroundPosition2 left_ top_
backgroundPosition2 (px 45) (pct 50)
backgroundPosition2
sets both the horizontal and vertical directions (in that
order, same as CSS.) If you need only the horizontal, you can use
backgroundPosition
instead:
backgroundPosition left_
If you need to set the offsets from the right or bottom, use
backgroundPosition4
.
backgroundPosition3 : Value { left_ : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Value { center : Value.Supported } -> Style
Sets background-position
.
backgroundPosition3 right_ (px 20) center
The three-argument form of background position sets one side to center and the other to the specified offest. So the example above would position the background image 20px from the right, and center it vertically.
backgroundPosition4 : Value { left_ : Value.Supported, right_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Value { top_ : Value.Supported, bottom_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets background-position
.
backgroundPosition4 right_ (px 20) bottom_ (pct 30)
The four-argument form of background position alternates sides and offets. So the example above would position the background image 20px from the right, and 30% from the bottom.
See also backgroundPosition
for horizontal alignment and
backgroundPosition2
for horizontal (from left) and
vertical (from top) alignment.
backgroundRepeat : BaseValue { repeat : Value.Supported, repeatX : Value.Supported, repeatY : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style
Sets background-repeat
backgroundRepeat repeat
backgroundRepeat repeatX
If you need to set horizontal and vertical direction separately, see
backgroundRepeat2
backgroundRepeat2 : Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style
Sets background-repeat
along the horizontal axis, then the vertical axis.
backgroundRepeat2 repeat space
backgroundRepeat2 space round
If you only need to set one value for both, see
backgroundRepeat
instead.
backgroundSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, cover : Value.Supported, contain_ : Value.Supported }) -> Style
Sets background-size
.
backgroundSize cover
backgroundSize (px 400)
If you give a length value, it will be used for the width. The height will be set
proportional to the size of the background-image
. If you
need to set both width and height explicitly, use
backgroundImage2
instead.
fontSize : BaseValue (LengthSupported { xxSmall : Value.Supported, xSmall : Value.Supported, small : Value.Supported, medium : Value.Supported, large : Value.Supported, xLarge : Value.Supported, xxLarge : Value.Supported, xxxLarge : Value.Supported, smaller : Value.Supported, larger : Value.Supported, pct : Value.Supported }) -> Style
Sets font-size
fontSize xxSmall
fontSize (px 12)
Check out fluid typography for some cool stuff you can do with this.
xxSmall : Value { provides | xxSmall : Value.Supported }
The xx-small
font-size
value.
fontSize xxSmall
xSmall : Value { provides | xSmall : Value.Supported }
The x-small
font-size
value.
fontSize xSmall
small : Value { provides | small : Value.Supported }
The small
font-size
value.
fontSize small
medium : Value { provides | medium : Value.Supported }
The medium
value used by properties such as fontSize
,
borderWidth
,
columnRuleWidth
.
fontSize medium
borderWidth medium
columnRuleWidth medium
The value is equivalent of 3px when using for border-width
.
large : Value { provides | large : Value.Supported }
The large
font-size
value.
fontSize large
xLarge : Value { provides | xLarge : Value.Supported }
The x-large
font-size
value.
fontSize xLarge
xxLarge : Value { provides | xxLarge : Value.Supported }
The xx-large
font-size
value.
fontSize xxLarge
xxxLarge : Value { provides | xxxLarge : Value.Supported }
The xxx-large
font-size
value.
fontSize xxxLarge
smaller : Value { provides | smaller : Value.Supported }
The smaller
font-size
value.
fontSize smaller
larger : Value { provides | larger : Value.Supported }
The larger
font-size
value.
fontSize larger
fontSizeAdjust : BaseValue { none : Value.Supported, zero : Value.Supported, num : Value.Supported } -> Style
Sets font-size-adjust
fontSizeAdjust zero
fontSizeAdjust none
fontSizeAdjust (num 0.5)
fontDisplay : BaseValue { auto : Value.Supported, block : Value.Supported, swap : Value.Supported, fallback : Value.Supported, optional : Value.Supported } -> Style
Sets font-display
fontDisplay auto
fontDisplay block
fontDisplay swap
fontDisplay fallback
fontDisplay optional
fallback : Value { provides | fallback : Value.Supported }
Sets fallback
value for usage with fontDisplay
or strokeLinejoin
.
fontDisplay fallback
strokeLinejoin2 miter fallback
swap : Value { provides | swap : Value.Supported }
Sets swap
value for usage with fontDisplay
.
fontDisplay swap
optional : Value { provides | optional : Value.Supported }
Sets optional
value for usage with fontDisplay
.
fontDisplay optional
fontFamily : BaseValue { serif : Value.Supported, sansSerif : Value.Supported, monospace : Value.Supported, cursive : Value.Supported, fantasy : Value.Supported, systemUi : Value.Supported, uiSerif : Value.Supported, uiSansSerif : Value.Supported, uiMonospace : Value.Supported, uiRounded : Value.Supported, emoji : Value.Supported, math : Value.Supported, fangsong : Value.Supported } -> Style
For when your font is one of the six generic font family names - serif
, sansSerif
, monospace
, cursive
, fantasy
, or systemUi
.
If you want to refer to a font by its name (like Helvetica or Arial), use fontFamilyMany
instead.
fontFamilyMany : List String -> Value { serif : Value.Supported, sansSerif : Value.Supported, monospace : Value.Supported, cursive : Value.Supported, fantasy : Value.Supported, systemUi : Value.Supported, uiSerif : Value.Supported, uiSansSerif : Value.Supported, uiMonospace : Value.Supported, uiRounded : Value.Supported, emoji : Value.Supported, math : Value.Supported, fangsong : Value.Supported } -> Style
Define multiple font families.
Per the CSS spec, a generic name must always be at the end of this list. (The generic names are serif
, sansSerif
, monospace
, cursive
or fantasy
.)
fontFamilyMany [ "Gill Sans Extrabold", "Helvetica", "Arial" ] sansSerif
This function will automatically wrap each font family in quotation marks unless it is one of the six generic names (like sans-serif
), which must never be quoted.
serif : Value { provides | serif : Value.Supported }
The serif
generic font family name.
fontFamily serif
fontFamilyMany [ "Gill Sans", "Helvetica" ] serif
This can be used with fontFamily
and fontFamilyMany
.
sansSerif : Value { provides | sansSerif : Value.Supported }
The sans-serif
generic font family name.
fontFamily sansSerif
fontFamilyMany [ "Georgia", "Times" ] sansSerif
This can be used with fontFamily
and fontFamilyMany
.
monospace : Value { provides | monospace : Value.Supported }
The monospace
generic font family name.
fontFamily monospace
fontFamilyMany [ "Source Code Pro", "Lucida Console" ] monospace
This can be used with fontFamily
and fontFamilyMany
.
cursive : Value { provides | cursive : Value.Supported }
The cursive
generic font family name.
fontFamily cursive
fontFamilyMany [ "Brush Script Std", "Lucida Calligraphy" ] cursive
This can be used with fontFamily
and fontFamilyMany
.
fantasy : Value { provides | fantasy : Value.Supported }
The fantasy
generic font family name.
fontFamily fantasy
fontFamilyMany [ "Herculanum", "Harrington" ] fantasy
This can be used with fontFamily
and fontFamilyMany
.
systemUi : Value { provides | systemUi : Value.Supported }
The system-ui
generic font family name.
You may want to read more about the system font stack before using this one.
fontFamily systemUi
fontFamilyMany [ "", "Segoe UI" ] systemUi
fontFamilyMany [ "system-ui", "Segoe UI", "Roboto", "Helvetica", "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ] sansSerif
This can be used with fontFamily
and fontFamilyMany
.
uiSerif : Value { provides | uiSerif : Value.Supported }
The ui-serif
generic font family name.
fontFamily uiSerif
fontFamilyMany [ "New York" ] uiSerif
This can be used with fontFamily
and fontFamilyMany
.
uiSansSerif : Value { provides | uiSansSerif : Value.Supported }
The ui-sans-serif
generic font family name.
fontFamily uiSansSerif
This can be used with fontFamily
and fontFamilyMany
.
uiMonospace : Value { provides | uiMonospace : Value.Supported }
The ui-monospace
generic font family name.
fontFamily uiMonospace
This can be used with fontFamily
and fontFamilyMany
.
uiRounded : Value { provides | uiRounded : Value.Supported }
The ui-rounded
generic font family name.
fontFamily uiRounded
This can be used with fontFamily
and fontFamilyMany
.
math : Value { provides | math : Value.Supported }
The math
generic font family name.
fontFamily math
This can be used with fontFamily
and fontFamilyMany
.
fangsong : Value { provides | fangsong : Value.Supported }
The fangsong
generic font family name.
fontFamily fangsong
This can be used with fontFamily
and fontFamilyMany
.
color : BaseValue Color -> Style
Sets color
.
color (hex "#60b5cc")
color (rgb 96 181 204)
color (rgba 96 181 204 0.5)
fontStyle : BaseValue { normal : Value.Supported, italic : Value.Supported, oblique : Value.Supported } -> Style
Sets font-style
fontStyle italic
italic : Value { provides | italic : Value.Supported }
oblique : Value { provides | oblique : Value.Supported }
fontWeight : BaseValue { normal : Value.Supported, bold : Value.Supported, bolder : Value.Supported, lighter : Value.Supported, int : Value.Supported } -> Style
Sets font-weight
fontWeight bold
fontWeight (int 300)
bold : Value { provides | bold : Value.Supported }
lighter : Value { provides | lighter : Value.Supported }
bolder : Value { provides | bolder : Value.Supported }
fontStretch : BaseValue { ultraCondensed : Value.Supported, extraCondensed : Value.Supported, condensed : Value.Supported, semiCondensed : Value.Supported, normal : Value.Supported, semiExpanded : Value.Supported, expanded : Value.Supported, extraExpanded : Value.Supported, ultraExpanded : Value.Supported, pct : Value.Supported } -> Style
Sets font-stretch
fontStretch ultraCondensed
fontStretch extraCondensed
fontStretch condensed
fontStretch semiCondensed
fontStretch normal
fontStretch semiExpanded
fontStretch expanded
fontStretch extraExpanded
fontStretch ultraExpanded
fontStretch (pct 100)
ultraCondensed : Value { provides | ultraCondensed : Value.Supported }
Sets ultra-condensed
value for usage with fontStretch
.
fontDisplay ultraCondensed
extraCondensed : Value { provides | extraCondensed : Value.Supported }
Sets extra-condensed
value for usage with fontStretch
.
fontDisplay extraCondensed
condensed : Value { provides | condensed : Value.Supported }
Sets condensed
value for usage with fontStretch
.
fontDisplay Condensed
semiCondensed : Value { provides | semiCondensed : Value.Supported }
Sets semi-condensed
value for usage with fontStretch
.
fontDisplay semiCondensed
semiExpanded : Value { provides | semiExpanded : Value.Supported }
Sets semi-expanded
value for usage with fontStretch
.
fontDisplay semiExpanded
expanded : Value { provides | expanded : Value.Supported }
Sets expanded
value for usage with fontStretch
.
fontDisplay Expanded
extraExpanded : Value { provides | extraExpanded : Value.Supported }
Sets extra-expanded
value for usage with fontStretch
.
fontDisplay extraExpanded
fontSynthesis : BaseValue { none : Value.Supported, weight : Value.Supported, style : Value.Supported, smallCaps : Value.Supported } -> Style
The font-synthesis
property.
fontSynthesis none
fontSynthesis smallCaps
fontSynthesis2 smallCaps weight
fontSynthesis3 weight style smallCaps
fontSynthesis2 : Value { weight : Value.Supported, style : Value.Supported, smallCaps : Value.Supported } -> Value { weight : Value.Supported, style : Value.Supported, smallCaps : Value.Supported } -> Style
The font-synthesis
property.
This is the two-argument variant, in which you can indicate two different font properties to be synthesised by the browser.
fontSynthesis2 smallCaps weight
fontSynthesis3 : Value { weight : Value.Supported } -> Value { style : Value.Supported } -> Value { smallCaps : Value.Supported } -> Style
The font-synthesis
property.
This is the three-argument variant, in which you can indicate all three different font properties to be synthesised by the browser.
fontSynthesis3 weight style smallCaps
weight : Value { provides | weight : Value.Supported }
The weight
value for the fontSynthesis
property.
fontSynthesis weight
fontVariationSettings : BaseValue { normal : Value.Supported } -> Style
The 1-argument variant of the font-variation-settings
property.
This lets you control variable font axes directly by their tag.
Use fontVariationSettingsMany
to work with variable font tags.
fontVariationSettings normal
fontVariationSettings inherit
fontVariationSettingsMany [ ("XHGT", 0.7) ]
This is designed to let you set variable features where none exist already. If you've
got a variable axis already covered by a property (eg. fontWeight
,
fontStyle
), you should use those instead.
fontFeatureSettings : BaseValue { featureTag : Value.Supported, normal : Value.Supported } -> Style
fontFeatureSettings normal
fontFeatureSettings (featureTag "liga")
fontFeatureSettings (featureTag2 "swsh" 2)
fontFeatureSettingsMany : List (Value { featureTag : Value.Supported }) -> Style
Sets font-feature-settings
in a way that lets you add a list of featureTag
s.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
fontFeatureSettingsMany featureTag "liga" [ featureTag2 "swsh" 2 ]
fontFeatureSettingsMany [] -- font-feature-settings: unset;
featureTag : String -> Value { provides | featureTag : Value.Supported }
Creates a feature-tag-value
for use with fontFeatureSettings
and fontFeatureSettingsMany
featureTag "smcp"
featureTag2 : String -> Basics.Int -> Value { provides | featureTag : Value.Supported }
Creates a feature-tag-value
with an specific value
for use with fontFeatureSettings
and fontFeatureSettingsMany
featureTag2 "swsh" 2
FontVariantCapsSupported (FontVariantEastAsianSupported (FontVariantLigaturesSupported (FontVariantNumericSupported (FontVariantEmojiSupported (FontVariantPositionSupported supported)))))
A type that encapsulates all special font variant keywords plus additional types.
AllFontVariantsSupported {}
A type that encapsulates all special font variant keywords.
fontVariant : BaseValue (AllFontVariantsSupported { none : Value.Supported, normal : Value.Supported }) -> Style
The font-variant
CSS property.
This is a shorthand property, encapsulating the following:
- fontVariantCaps
- fontVariantEastAsian
- fontVariantLigatures
- fontVariantNumeric
- fontVariantEmoji
- fontVariantPosition
fontVariant inherit
fontVariant normal
fontVariant jis83
fontVariant2 commonLigatures smallCaps
fontVariant2 noCommonLigatures slashedZero
fontVariant2 : Value AllFontVariants -> Value AllFontVariants -> Style
The font-variant
CSS property.
This is a shorthand property, encapsulating the following:
- fontVariantCaps
- fontVariantEastAsian
- fontVariantLigatures
- fontVariantNumeric
- fontVariantEmoji
- fontVariantPosition
fontVariant inherit
fontVariant normal
fontVariant jis83
fontVariant2 commonLigatures smallCaps
fontVariant2 noCommonLigatures slashedZero
{ supported | smallCaps : Value.Supported
, allSmallCaps : Value.Supported
, petiteCaps : Value.Supported
, allPetiteCaps : Value.Supported
, unicase : Value.Supported
, titlingCaps : Value.Supported
}
A type that encapsulates all caps font variant keywords plus additional types.
fontVariantCaps : BaseValue (FontVariantCapsSupported { normal : Value.Supported }) -> Style
Sets font-variant-caps
.
fontVariantCaps normal
fontVariantCaps smallCaps
fontVariantCaps allSmallCaps
fontVariantCaps petiteCaps
fontVariantCaps allPetiteCaps
fontVariantCaps unicase
fontVariantCaps titlingCaps
smallCaps : Value { provides | smallCaps : Value.Supported }
The small-caps
value used in
fontVariantCaps smallCaps
fontSynthesis2 smallCaps style
allSmallCaps : Value { provides | allSmallCaps : Value.Supported }
The all-small-caps
font-variant-caps
value.
fontVariantCaps allSmallCaps
petiteCaps : Value { provides | petiteCaps : Value.Supported }
The petite-caps
font-variant-caps
value.
fontVariantCaps petiteCaps
allPetiteCaps : Value { provides | allPetiteCaps : Value.Supported }
The all-petite-caps
font-variant-caps
value.
fontVariantCaps allPetiteCaps
unicase : Value { provides | unicase : Value.Supported }
The unicase
font-variant-caps
value.
fontVariantCaps unicase
titlingCaps : Value { provides | titlingCaps : Value.Supported }
The titling-caps
font-variant-caps
value.
fontVariantCaps titlingCaps
{ supported | ruby : Value.Supported
, jis78 : Value.Supported
, jis83 : Value.Supported
, jis90 : Value.Supported
, jis04 : Value.Supported
, simplified : Value.Supported
, traditional : Value.Supported
, fullWidth : Value.Supported
, proportionalWidth : Value.Supported
}
A type that encapsulates all east asian font variant keywords plus additional types.
FontVariantEastAsianSupported {}
A type that encapsulates all east asian font variant keywords.
fontVariantEastAsian : BaseValue (FontVariantEastAsianSupported { normal : Value.Supported }) -> Style
The font-variant-east-asian
property.
This property controls the use of alternative glyphs for East Asian scripts.
fontVariantEastAsian normal
fontVariantEastAsian2 ruby jis83
fontVariantEastAsian3 ruby jis90 fullWidth
fontVariantEastAsian2 : Value FontVariantEastAsian -> Value FontVariantEastAsian -> Style
The font-variant-east-asian
property.
This property controls the use of alternative glyphs for East Asian scripts.
fontVariantEastAsian2 ruby jis83
fontVariantEastAsian3 : Value { ruby : Value.Supported } -> Value { jis78 : Value.Supported, jis83 : Value.Supported, jis90 : Value.Supported, jis04 : Value.Supported, simplified : Value.Supported, traditional : Value.Supported } -> Value { fullWidth : Value.Supported, proportionalWidth : Value.Supported } -> Style
The font-variant-east-asian
property.
This property controls the use of alternative glyphs for East Asian scripts.
fontVariantEastAsian3 ruby jis90 fullWidth
jis78 : Value { provides | jis78 : Value.Supported }
Sets the jis78
value for fontVariantEastAsian
.
This specifies that the JIS X 0208:1978 standard for East Asian logographic glyphs should be used.
fontVariantEastAsian jis78
jis83 : Value { provides | jis83 : Value.Supported }
Sets the jis83
value for fontVariantEastAsian
.
This specifies that the JIS X 0208:1983 standard for East Asian logographic glyphs should be used.
fontVariantEastAsian jis83
jis90 : Value { provides | jis90 : Value.Supported }
Sets the jis90
value for fontVariantEastAsian
.
This specifies that the JIS X 0208:1990 standard for East Asian logographic glyphs should be used.
fontVariantEastAsian jis90
jis04 : Value { provides | jis04 : Value.Supported }
Sets the jis04
value for fontVariantEastAsian
.
This specifies that the JIS X 0208:2004 standard for East Asian logographic glyphs should be used.
fontVariantEastAsian jis04
simplified : Value { provides | simplified : Value.Supported }
Sets the simplified
value for fontVariantEastAsian
.
This specifies that no particular standard should be used for East Asian logographic glyphs apart from them being simplified Chinese glyphs.
fontVariantEastAsian simplified
traditional : Value { provides | traditional : Value.Supported }
Sets the traditional
value for fontVariantEastAsian
.
This specifies that no particular standard should be used for East Asian logographic glyphs apart from them being traditional Chinese glyphs.
fontVariantEastAsian traditional
proportionalWidth : Value { provides | proportionalWidth : Value.Supported }
Sets the proportional-width
value for fontVariantEastAsian
.
This activates the East Asian characters that vary in width.
(As opposed to fullWidth
, which specifies that they should roughly be the same width.)
fontVariantEastAsian proportionalWidth
{ supported | commonLigatures : Value.Supported
, noCommonLigatures : Value.Supported
, discretionaryLigatures : Value.Supported
, noDiscretionaryLigatures : Value.Supported
, historicalLigatures : Value.Supported
, noHistoricalLigatures : Value.Supported
, contextual : Value.Supported
, noContextual : Value.Supported
}
A type that encapsulates all ligature font variant keywords plus additional types.
fontVariantLigatures : BaseValue (FontVariantLigaturesSupported { normal : Value.Supported, none : Value.Supported }) -> Style
Sets font-variant-ligatures
.
fontVariantLigatures discretionaryLigatures
fontVariantLigatures none
commonLigatures : Value { provides | commonLigatures : Value.Supported }
The common-ligatures
font-variant-ligatures
value.
fontVariantLigatures commonLigatures
noCommonLigatures : Value { provides | noCommonLigatures : Value.Supported }
The no-common-ligatures
font-variant-ligatures
value.
fontVariantLigatures noCommonLigatures
discretionaryLigatures : Value { provides | discretionaryLigatures : Value.Supported }
The discretionary-ligatures
font-variant-ligatures
value.
fontVariantLigatures discretionaryLigatures
noDiscretionaryLigatures : Value { provides | noDiscretionaryLigatures : Value.Supported }
The no-discretionary-ligatures
font-variant-ligatures
value.
fontVariantLigatures noDiscretionaryLigatures
historicalLigatures : Value { provides | historicalLigatures : Value.Supported }
The historical-ligatures
font-variant-ligatures
value.
fontVariantLigatures historicalLigatures
noHistoricalLigatures : Value { provides | noHistoricalLigatures : Value.Supported }
The no-historical-ligatures
font-variant-ligatures
value.
fontVariantLigatures noHistoricalLigatures
contextual : Value { provides | contextual : Value.Supported }
The contextual
font-variant-ligatures
value.
fontVariantLigatures contextual
{ supported | ordinal : Value.Supported
, slashedZero : Value.Supported
, liningNums : Value.Supported
, oldstyleNums : Value.Supported
, proportionalNums : Value.Supported
, tabularNums : Value.Supported
, diagonalFractions : Value.Supported
, stackedFractions : Value.Supported
}
A type that encapsulates all numeric font variant keywords plus additional types.
FontVariantNumericSupported {}
A type that encapsulates all numeric font variant keywords.
fontVariantNumeric : BaseValue (FontVariantNumericSupported { normal : Value.Supported }) -> Style
Sets font-variant-numeric
.
fontVariantNumeric ordinal
fontVariantNumericMany [ slashedZero liningNums ]
fontVariantNumeric4 : Maybe (Value { ordinal : Value.Supported, slashedZero : Value.Supported }) -> Maybe (Value { liningNums : Value.Supported, oldstyleNums : Value.Supported }) -> Maybe (Value { proportionalNums : Value.Supported, tabularNums : Value.Supported }) -> Maybe (Value { diagonalFractions : Value.Supported, stackedFractions : Value.Supported }) -> Style
Sets font-variant-numeric
.
This one can be tricky to use because many of the options are mutually exclusive.
For example, normal
cannot be used with any of the others, so the only way
to get it from this function is to pass Nothing
for everything. The other
arguments are chosen such that you can choose between the mutually exclusive
values, or leave that value off.
fontVariantNumeric ordinal
fontVariantNumeric4 Nothing Nothing Nothing Nothing -- "normal"
fontVariantNumeric4
(Just ordinal)
Nothing
(Just tabularNums)
Nothing
-- "ordinal tabular-nums"
ordinal : Value { provides | ordinal : Value.Supported }
The ordinal
font-variant-numeric
value.
fontVariantNumeric ordinal
slashedZero : Value { provides | slashedZero : Value.Supported }
The slashed-zero
font-variant-numeric
value.
fontVariantNumeric slashedZero
liningNums : Value { provides | liningNums : Value.Supported }
The lining-nums
font-variant-numeric
value.
fontVariantNumeric liningNums
oldstyleNums : Value { provides | oldstyleNums : Value.Supported }
The oldstyle-nums
font-variant-numeric
value.
fontVariantNumeric oldstyleNums
proportionalNums : Value { provides | proportionalNums : Value.Supported }
The proportional-nums
font-variant-numeric
value.
fontVariantNumeric proportionalNums
tabularNums : Value { provides | tabularNums : Value.Supported }
The tabular-nums
font-variant-numeric
value.
fontVariantNumeric tabularNums
diagonalFractions : Value { provides | diagonalFractions : Value.Supported }
The diagonal-fractions
font-variant-numeric
value.
fontVariantNumeric diagonalFractions
{ supported | text : Value.Supported
, emoji : Value.Supported
, unicode : Value.Supported
}
A type that encapsulates all emoji font variant keywords plus additional types.
fontVariantEmoji : BaseValue (FontVariantEmojiSupported { normal : Value.Supported }) -> Style
The font-variant-emoji
property.
fontVariantEmoji unset
fontVariantEmoji emoji
fontVariantEmoji normal
emoji : Value { provides | emoji : Value.Supported }
The emoji
value used with fontFamily
, fontFamilyMany
and fontVariantEmoji
.
fontFamily emoji
fontVariantEmoji emoji
unicode : Value { provides | unicode : Value.Supported }
The unicode
value used with fontVariantEmoji
.
fontVariantEmoji unicode
{ supported | sub : Value.Supported
, super : Value.Supported
}
A type that encapsulates all position font variant keywords plus additional types.
fontVariantPosition : BaseValue (FontVariantPositionSupported { normal : Value.Supported }) -> Style
The font-variant-position
property.
fontVariantPosition sub
fontVariantPosition normal
fontKerning : BaseValue { none : Value.Supported, auto : Value.Supported, normal : Value.Supported } -> Style
The font-kerning
property.
fontKerning none
fontLanguageOverride : BaseValue { normal : Value.Supported, string : Value.Supported } -> Style
The font-language-override
property.
fontLanguageOverride normal
fontLanguageOverride (string "ENG")
fontOpticalSizing : BaseValue { none : Value.Supported, auto : Value.Supported } -> Style
The font-optical-sizing
property.
fontOpticalSizing none
lineHeight : BaseValue (LengthSupported { pct : Value.Supported, normal : Value.Supported, num : Value.Supported }) -> Style
Sets line-height
lineHeight (pct 150)
lineHeight (em 2)
lineHeight (num 1.5)
lineHeight normal
letterSpacing : BaseValue (LengthSupported { normal : Value.Supported }) -> Style
Sets letter-spacing
letterSpacing (pct 150)
letterSpacing (em 2)
letterSpacing (num 1.5)
letterSpacing normal
textIndent : BaseValue (LengthSupported { pct : Value.Supported }) -> Style
The text-indent
property.
textIndent (em 1.5)
textIndent2 : Value (LengthSupported { pct : Value.Supported }) -> Value { hanging : Value.Supported, eachLine : Value.Supported } -> Style
The text-indent
property.
textIndent2 (em 1.5) hanging
textIndent3 : Value (LengthSupported { pct : Value.Supported }) -> Value { hanging : Value.Supported } -> Value { eachLine : Value.Supported } -> Style
The text-indent
property.
textIndent3 (em 1.5) hanging eachLine
hanging : Value { provides | hanging : Value.Supported }
The hanging
value used for properties such as textIdent2
.
textIdent2 (px 20) hanging
eachLine : Value { provides | eachLine : Value.Supported }
The each-line
value used for properties such as textIdent2
.
textIdent2 (px 20) eachLine
wordSpacing : BaseValue (LengthSupported { normal : Value.Supported, pct : Value.Supported }) -> Style
Sets word-spacing
.
wordSpacing normal
wordSpacing zero
wordSpacing (px 5)
tabSize : BaseValue (LengthSupported { int : Value.Supported }) -> Style
Sets tab-size
Note: only positive integer values are allowed.
tabSize (int 4)
wordBreak : BaseValue { normal : Value.Supported, breakAll : Value.Supported, keepAll : Value.Supported, breakWord : Value.Supported } -> Style
Sets word-break
Note: breakWord
has been deprecated.
wordBreak normal
wordBreak breakAll
wordBreak keepAll
wordBreak breakWord
breakAll : Value { provides | breakAll : Value.Supported }
A breakAll
value for the word-break
property.
wordBreak breakAll
keepAll : Value { provides | keepAll : Value.Supported }
A keepAll
value for the word-break
property.
wordBreak keepAll
lineBreak : BaseValue { auto : Value.Supported, loose : Value.Supported, normal : Value.Supported, strict : Value.Supported, anywhere : Value.Supported } -> Style
Sets the lineBreak
property.
lineBreak auto
lineBreak strict
loose : Value { provides | loose : Value.Supported }
Sets loose
value for usage with lineBreak
.
lineBreak loose
whiteSpace : BaseValue { normal : Value.Supported, nowrap : Value.Supported, pre : Value.Supported, preWrap : Value.Supported, preLine : Value.Supported, breakSpaces : Value.Supported } -> Style
Sets white-space
whiteSpace pre
whiteSpace nowrap
whiteSpace preWrap
whiteSpace preLine
pre : Value { provides | pre : Value.Supported }
A pre
value for the white-space
property.
whiteSpace pre
preWrap : Value { provides | preWrap : Value.Supported }
A pre-wrap
value for the white-space
property.
whiteSpace preWrap
preLine : Value { provides | preLine : Value.Supported }
A pre-line
value for the white-space
property.
whiteSpace preLine
textOverflow : BaseValue { clip : Value.Supported, ellipsis : Value.Supported } -> Style
Sets the text-overflow
property.
text-overflow
describes how text that gets cut off is signalled to users.
When the one-argument version is used, it sets the end of text (right end for LTR users) that is cut off.
textOverflow ellipsis
When the two-argument version is used, it specifies how the text cut-off is displayed at the start (left in LTR) and the end (right in LTR) of the text.
textOverflow2 ellipsis ellipsis
textOverflow2 : Value { clip : Value.Supported, ellipsis : Value.Supported } -> Value { clip : Value.Supported, ellipsis : Value.Supported } -> Style
Sets the text-overflow
property.
text-overflow
describes how text that gets cut off is signalled to users.
This version specifies how the text cut-off is displayed at the start (left in LTR) and at the end (right in LTR) of the text.
textOverflow2 ellipsis ellipsis
ellipsis : Value { provides | ellipsis : Value.Supported }
Sets ellipsis
value for usage with textOverflow
.
textOverflow ellipsis
hyphens : BaseValue { none : Value.Supported, manual : Value.Supported, auto : Value.Supported } -> Style
Sets hyphens
hyphens none
hyphens manual
hyphens auto
manual : Value { provides | manual : Value.Supported }
Sets manual
value for usage with hyphens
.
hyphens manual
hangingPunctuation : BaseValue { none : Value.Supported, first_ : Value.Supported, forceEnd : Value.Supported, allowEnd : Value.Supported, last : Value.Supported } -> Style
Sets hanging-punctuation
hangingPunctuation none
hangingPunctuation first_
hangingPunctuation2 first_ forceEnd
hangingPunctuation3 first_ allowEnd last
hangingPunctuation2 : Value { first_ : Value.Supported, last : Value.Supported } -> Value { first_ : Value.Supported, forceEnd : Value.Supported, allowEnd : Value.Supported, last : Value.Supported } -> Style
Sets hanging-punctuation
first_ first_
, last first
and last last
are invalid combinations.
hangingPunctuation2 first_ forceEnd
hangingPunctuation3 : Value { first_ : Value.Supported } -> Value { forceEnd : Value.Supported, allowEnd : Value.Supported } -> Value { last : Value.Supported } -> Style
Sets hanging-punctuation
hangingPunctuation3 first_ allowEnd last
first_ : Value { provides | first_ : Value.Supported }
Sets first
value for usage with hangingPunctuation
.
hangingPunctuation first_
This is called first_
instead of first
because
first
is already a pseudo-class function.
last : Value { provides | last : Value.Supported }
Sets last
value for usage with hangingPunctuation
.
hangingPunctuation last
forceEnd : Value { provides | forceEnd : Value.Supported }
Sets force-end
value for usage with hangingPunctuation
.
hangingPunctuation forceEnd
textDecoration : BaseValue (ColorSupported { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported, solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported }) -> Style
Sets text-decoration
shorthand property.
textDecoration underline
textDecoration2 : Value { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Value { solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported } -> Style
Sets text-decoration
property.
textDecoration2 underline dotted
textDecoration3 : Value { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Value { solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported } -> Value Color -> Style
Sets text-decoration
property.
textDecoration3 underline dotted (hex "#cf0")
textDecorationLine : BaseValue { none : Value.Supported, underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Style
Sets text-decoration-line
property.
textDecorationLine underline
textDecorationLine2 : Value { underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Value { underline : Value.Supported, overline : Value.Supported, lineThrough : Value.Supported } -> Style
Sets text-decoration-line
property.
textDecorationLine2 underline overline
Note: The first and second argument MUST NOT be the same.
textDecorationLine3 : Value { underline : Value.Supported } -> Value { overline : Value.Supported } -> Value { lineThrough : Value.Supported } -> Style
Sets text-decoration-line
property.
textDecorationLine3 underline overline lineThrough
textDecorationStyle : BaseValue { solid : Value.Supported, double : Value.Supported, dotted : Value.Supported, dashed : Value.Supported, wavy : Value.Supported } -> Style
Sets text-decoration-style
property.
textDecorationStyle wavy
wavy : Value { provides | wavy : Value.Supported }
The wavy
text-decoration-style
value.
textDecorationStyle wavy
underline : Value { provides | underline : Value.Supported }
The underline
text-decoration-line
value.
textDecorationLine underline
overline : Value { provides | overline : Value.Supported }
The overline
text-decoration-line
value.
textDecorationLine overline
lineThrough : Value { provides | lineThrough : Value.Supported }
The line-through
text-decoration-line
value.
textDecorationLine lineThrough
textDecorationColor : BaseValue (ColorSupported { transparent : Value.Supported }) -> Style
Sets text-decoration-color
property.
textDecorationColor (hex "#0cf")
transparent : Value { provides | transparent : Value.Supported }
Sets the transparent
value for usage with textDecorationColor
.
textDecorationColor transparent
textDecorationThickness : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, fromFont : Value.Supported }) -> Style
Sets the text-decoration-thickness
property.
textDecorationThickness (pct 10)
fromFont : Value { provides | fromFont : Value.Supported }
Sets the from-font
value for usage with textDecorationThickness
.
textDecorationThickness fromFont
textDecorationSkipInk : BaseValue { auto : Value.Supported, all_ : Value.Supported, none : Value.Supported } -> Style
Sets text-decoration-skip-ink
property.
textDecorationSkipInk auto
textDecorationSkipInk all_
textDecorationSkipInk none
textUnderlinePosition : BaseValue { auto : Value.Supported, under : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
textUnderlinePosition auto
textUnderlinePosition under
textUnderlinePosition left_
textUnderlinePosition right_
textUnderlinePosition2 : Value { under : Value.Supported } -> Value { left_ : Value.Supported, right_ : Value.Supported } -> Style
textUnderlinePosition2 under left_
textUnderlinePosition2 under right_
textUnderlineOffset : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets the text-underline-offset property.
textUnderlineOffset (pct 5)
textEmphasis : BaseValue (ColorSupported { none : Value.Supported, filled : Value.Supported, open : Value.Supported, dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported, string : Value.Supported }) -> Style
Sets the text-emphasis
property.
This is for drawing attention towards textual elements in a way that is commonly used in East Asian languages.
String values should only be one character in length.
textEmphasis (hex "ff0000")
textEmphasis sesame
textEmphasis2 triangle (hex "00ff00")
textEmphasis3 filled dot (hex "ff0000")
textEmphasis2 : Value { none : Value.Supported, filled : Value.Supported, open : Value.Supported, dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported, string : Value.Supported } -> Value Color -> Style
Sets the text-emphasis
property.
This 2-argument form sets textEmphasisStyle
and textEmphasisColor
in a single declaration.
String values should only be one character in length.
textEmphasis (hex "ff0000")
textEmphasis sesame
textEmphasis2 triangle (hex "00ff00")
textEmphasis3 filled dot (hex "ff0000")
textEmphasis3 : BaseValue { filled : Value.Supported, open : Value.Supported } -> BaseValue { dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported } -> Value Color -> Style
Sets the text-emphasis
property.
This 3-argument form sets textEmphasisStyle2
and a textEmphasisColor
in a single declaration.
textEmphasis (hex "ff0000")
textEmphasis sesame
textEmphasis2 triangle (hex "00ff00")
textEmphasis3 filled dot (hex "ff0000")
textEmphasisStyle : BaseValue { none : Value.Supported, filled : Value.Supported, open : Value.Supported, dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported, string : Value.Supported } -> Style
Sets the text-emphasis-style
property.
String values should only be one character in length.
textEmphasisStyle none
textEmphasisStyle open
textEmphasisStyle (string "🐯")
textEmphasisStyle2 : Value { filled : Value.Supported, open : Value.Supported } -> Value { dot : Value.Supported, circle_ : Value.Supported, doubleCircle : Value.Supported, triangle : Value.Supported, sesame : Value.Supported } -> Style
Sets the text-emphasis-style
property when you want to use two arguments - one for filled
or open
, and one for the shape style.
textEmphasisStyle filled sesame
textEmphasisStyle open dot
textEmphasisColor : BaseValue (ColorSupported { transparent : Value.Supported }) -> Style
Sets the text-emphasis-color
property.
textEmphasisColor currentcolor
textEmphasisColor (hex "0000ff")
textEmphasisColor transparent
textEmphasisPosition : BaseValue a -> Style
Sets the text-emphasis-position
property.
This is the one argument version, which is limited to setting global values.
If you want to specify the positions of the text-emphasis, you must use the 2-argument form.
textEmphasisPosition inherit
textEmphasisPosition revert
textEmphasisPosition2 over left_
textEmphasisPosition2 under right_
textEmphasisPosition2 : BaseValue { over : Value.Supported, under : Value.Supported } -> BaseValue { left_ : Value.Supported, right_ : Value.Supported } -> Style
Sets the the text-emphasis-position
property.
This is the 2-argument form that lets you specify the positions of the emphasis.
if you want to apply global values, you must use the 1-argument form.
textEmphasisPosition inherit
textEmphasisPosition revert
textEmphasisPosition2 over left_
textEmphasisPosition2 under right_
filled : Value { provides | filled : Value.Supported }
The filled
value used in textEmphasis
.
textEmphasis filled
open : Value { provides | open : Value.Supported }
The open
value used in textEmphasis
.
textEmphasis open
dot : Value { provides | dot : Value.Supported }
The dot
value used in textEmphasis
.
textEmphasis dot
doubleCircle : Value { provides | doubleCircle : Value.Supported }
The doubleCircle
value used in textEmphasis
.
textEmphasis doubleCircle
triangle : Value { provides | triangle : Value.Supported }
The triangle
value used in textEmphasis
.
textEmphasis triangle
sesame : Value { provides | sesame : Value.Supported }
The sesame
value used in textEmphasis
.
textEmphasis sesame
over : Value { provides | over : Value.Supported }
The over
value used in textEmphasisPosition2
.
textEmphasisPosition2 over left_
textTransform : BaseValue { capitalize : Value.Supported, uppercase : Value.Supported, lowercase : Value.Supported, fullWidth : Value.Supported, fullSizeKana : Value.Supported, none : Value.Supported } -> Style
Sets text-transform
.
textTransform capitalize
textTransform uppercase
capitalize : Value { provides | capitalize : Value.Supported }
A capitalize
value for the text-transform
property.
textTransform capitalize
uppercase : Value { provides | uppercase : Value.Supported }
An uppercase
value for the text-transform
property.
textTransform uppercase
lowercase : Value { provides | lowercase : Value.Supported }
A lowercase
value for the text-transform
property.
textTransform lowercase
textAlign : BaseValue { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, justify : Value.Supported, start : Value.Supported, end : Value.Supported, matchParent : Value.Supported } -> Style
Sets text-align
textAlign left_
textAlign justfy
justify : Value { provides | justify : Value.Supported }
A justify
value for the text-align
textAlign justify
textJustify : BaseValue { interWord : Value.Supported, interCharacter : Value.Supported, auto : Value.Supported, none : Value.Supported } -> Style
Sets text-justify
textJustify interWord
textJustify interCharacter
textJustify auto
textJustify none
interWord : Value { provides | interWord : Value.Supported }
A inter-word
value for the textJustify
property.
textJustify interWord
direction : BaseValue { rtl : Value.Supported, ltr : Value.Supported } -> Style
Sets direction
direction ltr
direction rtl
ltr : Value { provides | ltr : Value.Supported }
A ltr
value for the direction
property.
direction ltr
rtl : Value { provides | rtl : Value.Supported }
A rtl
value for the direction
property.
direction rtl
writingMode : BaseValue { horizontalTb : Value.Supported, verticalRl : Value.Supported, verticalLr : Value.Supported } -> Style
Sets writing-mode
.
writingMode horizontalTb
writingMode verticalRl
writingMode verticalLr
verticalLr : Value { provides | verticalLr : Value.Supported }
Sets vertical-lr
value for usage with writingMode
.
writingMode verticalLr
verticalRl : Value { provides | verticalRl : Value.Supported }
Sets vertical-rl
value for usage with writingMode
.
writingMode verticalRl
horizontalTb : Value { provides | horizontalTb : Value.Supported }
Sets horizontal-tb
value for usage with writingMode
.
writingMode horizontalTb
unicodeBidi : BaseValue { normal : Value.Supported, embed : Value.Supported, isolate : Value.Supported, bidiOverride : Value.Supported, isolateOverride : Value.Supported, plaintext : Value.Supported } -> Style
Sets unicode-bidi
unicodeBidi normal
unicodeBidi embed
unicodeBidi isolate
unicodeBidi bidiOverride
unicodeBidi isolateOverride
unicodeBidi plaintext
embed : Value { provides | embed : Value.Supported }
Sets embed
value for usage with unicodeBidi
.
unicodeBidi embed
plaintext : Value { provides | plaintext : Value.Supported }
Sets plaintext
value for usage with unicodeBidi
.
unicodeBidi plaintext
bidiOverride : Value { provides | bidiOverride : Value.Supported }
Sets bidi-override
value for usage with unicodeBidi
.
unicodeBidi bidiOverride
isolateOverride : Value { provides | isolateOverride : Value.Supported }
Sets isolate-override
value for usage with unicodeBidi
.
unicodeBidi isolateOverride
textOrientation : BaseValue { mixed : Value.Supported, sideways : Value.Supported, sidewaysRight : Value.Supported, upright : Value.Supported, useGlyphOrientation : Value.Supported } -> Style
Sets text-orientation
.
textOrientation sideways
textOrientation upright
mixed : Value { provides | mixed : Value.Supported }
A mixed
value for the
textOrientation
property.
textOrientation mixed
sideways : Value { provides | sideways : Value.Supported }
A sideways
value for the
textOrientation
property.
textOrientation sideways
sidewaysRight : Value { provides | sidewaysRight : Value.Supported }
A sideways-right
value for the
textOrientation
property.
textOrientation sidewaysRight
upright : Value { provides | upright : Value.Supported }
A upright
value for the
textOrientation
property.
textOrientation upright
useGlyphOrientation : Value { provides | useGlyphOrientation : Value.Supported }
A use-glyph-orientation
value for the
textOrientation
property.
textOrientation useGlyphOrientation
quotes : BaseValue { none : Value.Supported, auto : Value.Supported } -> Style
Sets the quotes
property.
This one-argument version can only use keyword or global values.
quotes none
quotes inherit
quotes2 (string "\"") (string "\"")
quotes4 (string "\"") (string "\"") (string "'") (string "'")
quotes2 : Value { string : Value.Supported } -> Value { string : Value.Supported } -> Style
Sets the quotes
property.
This 2-argument version sets the starting and closing quotation marks for a top-level quote (a quote that is not nested within another quote). It only accepts string values.
quotes auto
quotes2 (string "\"") (string "\"") -- "Hey, this is a first-level quote."
quotes2 (string "'") (string "'") -- 'Hey, this is a first-level quote.'
quotes2 (string "«") (string "»") -- «Hey, this is a first-level quote.»
textRendering : BaseValue { auto : Value.Supported, geometricPrecision : Value.Supported, optimizeLegibility : Value.Supported, optimizeSpeed : Value.Supported } -> Style
Sets text-rendering
.
textRendering geometricPrecision
textRendering optimizeSpeed
geometricPrecision : Value { provides | geometricPrecision : Value.Supported }
A geometricPrecision
value for the text-rendering
property.
textRendering geometricPrecision
optimizeLegibility : Value { provides | optimizeLegibility : Value.Supported }
An optimizeLegibility
value for the text-rendering
property.
textRendering optimizeLegibility
userSelect : BaseValue { none : Value.Supported, auto : Value.Supported, text : Value.Supported, contain_ : Value.Supported, all_ : Value.Supported } -> Style
Sets user-select
userSelect none
userSelect auto
userSelect text
userSelect contain_
userSelect all_
speak : BaseValue { none : Value.Supported, normal : Value.Supported, spellOut : Value.Supported } -> Style
Sets speak
speak none
speak normal
speak spellOut
ListStyleTypeSupported {}
A type alias used to accept a list-style-type
{ supported | customIdent : Value.Supported
, string : Value.Supported
, none : Value.Supported
, arabicIndic : Value.Supported
, armenian : Value.Supported
, bengali : Value.Supported
, cambodian : Value.Supported
, circle_ : Value.Supported
, cjkDecimal : Value.Supported
, cjkEarthlyBranch : Value.Supported
, cjkHeavenlyStem : Value.Supported
, cjkIdeographic : Value.Supported
, decimal : Value.Supported
, decimalLeadingZero : Value.Supported
, devanagari : Value.Supported
, disc : Value.Supported
, disclosureClosed : Value.Supported
, disclosureOpen : Value.Supported
, ethiopicNumeric : Value.Supported
, georgian : Value.Supported
, gujarati : Value.Supported
, gurmukhi : Value.Supported
, hebrew : Value.Supported
, hiragana : Value.Supported
, hiraganaIroha : Value.Supported
, japaneseFormal : Value.Supported
, japaneseInformal : Value.Supported
, kannada : Value.Supported
, katakana : Value.Supported
, katakanaIroha : Value.Supported
, khmer : Value.Supported
, koreanHangulFormal : Value.Supported
, koreanHanjaFormal : Value.Supported
, koreanHanjaInformal : Value.Supported
, lao : Value.Supported
, lowerAlpha : Value.Supported
, lowerArmenian : Value.Supported
, lowerGreek : Value.Supported
, lowerLatin : Value.Supported
, lowerRoman : Value.Supported
, malayalam : Value.Supported
, monogolian : Value.Supported
, myanmar : Value.Supported
, oriya : Value.Supported
, persian : Value.Supported
, simpChineseFormal : Value.Supported
, simpChineseInformal : Value.Supported
, square : Value.Supported
, tamil : Value.Supported
, telugu : Value.Supported
, thai : Value.Supported
, tibetan : Value.Supported
, tradChineseFormal : Value.Supported
, tradChineseInformal : Value.Supported
, upperAlpha : Value.Supported
, upperArmenian : Value.Supported
, upperLatin : Value.Supported
, upperRoman : Value.Supported
}
A type alias used to accept a list-style-type among other values.
Note: The symbols()
function is not supported.
Use property
instead.
listStyle : BaseValue (ListStyleTypeSupported (ImageSupported { inside : Value.Supported, outside : Value.Supported })) -> Style
The list-style
shorthand property.
listStyle lowerAlpha
listStyle outside
listStyle (url "https://example.com")
listStyle2 : Value ListStyleType -> Value { inside : Value.Supported, outside : Value.Supported } -> Style
The list-style
shorthand property.
listStlye2 lowerAlpha inside
For other combinations of two values please use the dedicated functions:
listStyleType
,
listStlyePosition
,
and listStyleImage
listStyle3 : Value ListStyleType -> Value { inside : Value.Supported, outside : Value.Supported } -> Value (ImageSupported { none : Value.Supported }) -> Style
The list-style
shorthand property.
listStyle3 arabic outside (url "https://example.com")
listStylePosition : BaseValue { inside : Value.Supported, outside : Value.Supported } -> Style
The list-style-position
property
listStylePosition inside
listStylePosition outside
inside : Value { provides | inside : Value.Supported }
The inside
value used for properties such as list-style-position
,
and listStyle
.
listStylePosition inside
outside : Value { provides | outside : Value.Supported }
The inside
value used for properties such as list-style-position
,
and listStyle
.
listStylePosition outside
listStyleType : BaseValue ListStyleType -> Style
The list-style-type
property.
listStyleType decimalLeadingZero
listStyleImage : BaseValue (ImageSupported { none : Value.Supported }) -> Style
The list-style-image
property.
listStyleImage (url "https://example.com")
arabicIndic : Value { provides | arabicIndic : Value.Supported }
The arabic-indic
value used by properties such as listStyle
,
and listStyleType
listStyleType arabicIndic
armenian : Value { provides | armenian : Value.Supported }
The armenian
value used by properties such as listStyle
,
and listStyleType
listStyleType armenian
bengali : Value { provides | bengali : Value.Supported }
The bengali
value used by properties such as listStyle
,
and listStyleType
listStyleType bengali
cambodian : Value { provides | cambodian : Value.Supported }
The cambodian
value used by properties such as listStyle
,
and listStyleType
listStyleType cambodian
cjkDecimal : Value { provides | cjkDecimal : Value.Supported }
The cjk-decimal
value used by properties such as listStyle
,
and listStyleType
listStyleType cjkDecimal
cjkEarthlyBranch : Value { provides | cjkEarthlyBranch : Value.Supported }
The cjk-earthly-branch
value used by properties such as listStyle
,
and listStyleType
listStyleType cjkEarthlyBranch
cjkHeavenlyStem : Value { provides | cjkHeavenlyStem : Value.Supported }
The cjk-heavenly-stem
value used by properties such as listStyle
,
and listStyleType
listStyleType cjkHeavenlyStem
cjkIdeographic : Value { provides | cjkIdeographic : Value.Supported }
The cjk-ideographic
value used by properties such as listStyle
,
and listStyleType
listStyleType cjkIdeographic
decimal : Value { provides | decimal : Value.Supported }
The decimal
value used by properties such as listStyle
,
and listStyleType
listStyleType decimal
decimalLeadingZero : Value { provides | decimalLeadingZero : Value.Supported }
The decimal-leading-zero
value used by properties such as listStyle
,
and listStyleType
listStyleType decimalLeadingZero
devanagari : Value { provides | devanagari : Value.Supported }
The devanagari
value used by properties such as listStyle
,
and listStyleType
listStyleType devanagari
disclosureClosed : Value { provides | disclosureClosed : Value.Supported }
The disclosure-closed
value used by properties such as listStyle
,
and listStyleType
listStyleType disclosureClosed
disclosureOpen : Value { provides | disclosureOpen : Value.Supported }
The disclosure-open
value used by properties such as listStyle
,
and listStyleType
listStyleType disclosureOpen
disc : Value { provides | disc : Value.Supported }
The disc
value used by properties such as listStyle
,
and listStyleType
listStyleType disc
ethiopicNumeric : Value { provides | ethiopicNumeric : Value.Supported }
The ethiopic-numeric
value used by properties such as listStyle
,
and listStyleType
listStyleType ethiopicNumeric
georgian : Value { provides | georgian : Value.Supported }
The georgian
value used by properties such as listStyle
,
and listStyleType
listStyleType georgian
gujarati : Value { provides | gujarati : Value.Supported }
The gujarati
value used by properties such as listStyle
,
and listStyleType
listStyleType gujarati
gurmukhi : Value { provides | gurmukhi : Value.Supported }
The gurmukhi
value used by properties such as listStyle
,
and listStyleType
listStyleType gurmukhi
hebrew : Value { provides | hebrew : Value.Supported }
The hebrew
value used by properties such as listStyle
,
and listStyleType
listStyleType hebrew
hiragana : Value { provides | hiragana : Value.Supported }
The hiragana
value used by properties such as listStyle
,
and listStyleType
listStyleType hiragana
hiraganaIroha : Value { provides | hiraganaIroha : Value.Supported }
The hiragana-iroha
value used by properties such as listStyle
,
and listStyleType
listStyleType hiraganaIroha
japaneseFormal : Value { provides | japaneseFormal : Value.Supported }
The japanese-formal
value used by properties such as listStyle
,
and listStyleType
listStyleType japaneseFormal
japaneseInformal : Value { provides | japaneseInformal : Value.Supported }
The japanese-informal
value used by properties such as listStyle
,
and listStyleType
listStyleType japaneseInformal
kannada : Value { provides | kannada : Value.Supported }
The kannada
value used by properties such as listStyle
,
and listStyleType
listStyleType kannada
katakana : Value { provides | katakana : Value.Supported }
The katakana
value used by properties such as listStyle
,
and listStyleType
listStyleType katakana
katakanaIroha : Value { provides | katakanaIroha : Value.Supported }
The katakana-iroha
value used by properties such as listStyle
,
and listStyleType
listStyleType katakanaIroha
khmer : Value { provides | khmer : Value.Supported }
The khmer
value used by properties such as listStyle
,
and listStyleType
listStyleType khmer
koreanHangulFormal : Value { provides | koreanHangulFormal : Value.Supported }
The korean-hangul-formal
value used by properties such as listStyle
,
and listStyleType
listStyleType koreanHangulFormal
koreanHanjaFormal : Value { provides | koreanHanjaFormal : Value.Supported }
The korean-hanja-formal
value used by properties such as listStyle
,
and listStyleType
listStyleType koreanHanjaFormal
koreanHanjaInformal : Value { provides | koreanHanjaInformal : Value.Supported }
The korean-hanja-informal
value used by properties such as listStyle
,
and listStyleType
listStyleType koreanHanjaInformal
lao : Value { provides | lao : Value.Supported }
The lao
value used by properties such as listStyle
,
and listStyleType
listStyleType lao
lowerAlpha : Value { provides | lowerAlpha : Value.Supported }
The lower-alpha
value used by properties such as listStyle
,
and listStyleType
listStyleType lowerAlpha
lowerArmenian : Value { provides | lowerArmenian : Value.Supported }
The lower-armenian
value used by properties such as listStyle
,
and listStyleType
listStyleType lowerArmenian
lowerGreek : Value { provides | lowerGreek : Value.Supported }
The lower-greek
value used by properties such as listStyle
,
and listStyleType
listStyleType lowerGreek
lowerLatin : Value { provides | lowerLatin : Value.Supported }
The lower-latin
value used by properties such as listStyle
,
and listStyleType
listStyleType lowerLatin
lowerRoman : Value { provides | lowerRoman : Value.Supported }
The lower-roman
value used by properties such as listStyle
,
and listStyleType
listStyleType lowerRoman
malayalam : Value { provides | malayalam : Value.Supported }
The malayalam
value used by properties such as listStyle
,
and listStyleType
listStyleType malayalam
monogolian : Value { provides | monogolian : Value.Supported }
The monogolian
value used by properties such as listStyle
,
and listStyleType
listStyleType monogolian
myanmar : Value { provides | myanmar : Value.Supported }
The myanmar
value used by properties such as listStyle
,
and listStyleType
listStyleType myanmar
oriya : Value { provides | oriya : Value.Supported }
The oriya
value used by properties such as listStyle
,
and listStyleType
listStyleType oriya
persian : Value { provides | persian : Value.Supported }
The persian
value used by properties such as listStyle
,
and listStyleType
listStyleType persian
simpChineseFormal : Value { provides | simpChineseFormal : Value.Supported }
The simp-chinese-formal
value used by properties such as listStyle
,
and listStyleType
listStyleType simpChineseFormal
simpChineseInformal : Value { provides | simpChineseInformal : Value.Supported }
The simp-chinese-informal
value used by properties such as listStyle
,
and listStyleType
listStyleType simpChineseInformal
tamil : Value { provides | tamil : Value.Supported }
The tamil
value used by properties such as listStyle
,
and listStyleType
listStyleType tamil
telugu : Value { provides | telugu : Value.Supported }
The telugu
value used by properties such as listStyle
,
and listStyleType
listStyleType telugu
thai : Value { provides | thai : Value.Supported }
The thai
value used by properties such as listStyle
,
and listStyleType
listStyleType thai
tibetan : Value { provides | tibetan : Value.Supported }
The tibetan
value used by properties such as listStyle
,
and listStyleType
listStyleType tibetan
tradChineseFormal : Value { provides | tradChineseFormal : Value.Supported }
The trad-chinese-formal
value used by properties such as listStyle
,
and listStyleType
listStyleType tradChineseFormal
tradChineseInformal : Value { provides | tradChineseInformal : Value.Supported }
The trad-chinese-informal
value used by properties such as listStyle
,
and listStyleType
listStyleType tradChineseInformal
upperAlpha : Value { provides | upperAlpha : Value.Supported }
The upper-alpha
value used by properties such as listStyle
,
and listStyleType
listStyleType upperAlpha
upperArmenian : Value { provides | upperArmenian : Value.Supported }
The upper-armenian
value used by properties such as listStyle
,
and listStyleType
listStyleType upperArmenian
upperLatin : Value { provides | upperLatin : Value.Supported }
The upper-latin
value used by properties such as listStyle
,
and listStyleType
listStyleType upperLatin
columns : BaseValue (LengthSupported { auto : Value.Supported, num : Value.Supported }) -> Style
Sets columns
columns (px 300)
columns (num 2)
columns2 (px 300) (num 2)
columns2 : Value (LengthSupported { auto : Value.Supported }) -> Value { auto : Value.Supported, num : Value.Supported } -> Style
Sets columns
columns (px 300)
columns (num 2)
columns2 (px 300) (num 2)
columnWidth : BaseValue (LengthSupported { auto : Value.Supported }) -> Style
Sets column-width
columnWidth auto
columnWidth (px 200)
columnCount : BaseValue { auto : Value.Supported, int : Value.Supported } -> Style
Sets column-count
columnCount auto
columnCount (num 3)
columnFill : BaseValue { auto : Value.Supported, balance : Value.Supported, balanceAll : Value.Supported } -> Style
Sets column-fill
columnFill auto
columnFill balance
columnFill balanceAll
balance : Value { provides | balance : Value.Supported }
A balance
value used in properties such as columnFill
columnFill balance
balanceAll : Value { provides | balanceAll : Value.Supported }
A balance-all
value used in properties such as columnFill
columnFill balanceAll
columnSpan : BaseValue { none : Value.Supported, all_ : Value.Supported } -> Style
Sets column-span
columnSpan all_
columnSpan none
columnRule : BaseValue LineWidth -> Style
Sets column-rule
.
This is a shorthand for the columnRuleWidth
,
columnRuleStyle
, and columnRuleColor
properties.
columnRule thin
columnRule2 thin solid
columnRule3 thin solid (hex "#000000")
columnRule2 : Value LineWidth -> Value LineStyle -> Style
Sets column-rule
.
This is a shorthand for the columnRuleWidth
,
columnRuleStyle
, and columnRuleColor
properties.
columnRule thin
columnRule2 thin solid
columnRule3 thin solid (hex "#000000")
columnRule3 : Value LineWidth -> Value LineStyle -> Value Color -> Style
Sets column-rule
.
This is a shorthand for the columnRuleWidth
,
columnRuleStyle
, and columnRuleColor
properties.
columnRule thin
columnRule2 thin solid
columnRule3 thin solid (hex "#000000")
columnRuleWidth : BaseValue LineWidth -> Style
Sets column-rule-width
columnRuleWidth thin
columnRuleWidth (px 2)
columnRuleStyle : BaseValue LineStyle -> Style
Sets column-rule-style
columnRuleStyle solid
columnRuleStyle dotted
columnRuleStyle dashed
columnRuleColor : BaseValue Color -> Style
Sets column-rule-color
columnRuleColor (rgb 0 0 0)
columnRuleColor (hex "#fff")
borderCollapse : BaseValue { collapse : Value.Supported, separate : Value.Supported } -> Style
Sets border-collapse
.
borderCollapse collapse
borderCollapse separate
collapse : Value { provides | collapse : Value.Supported }
A collapse
value for the border-collapse
and
visibility
property.
borderCollapse collapse
visibility collapse
separate : Value { provides | separate : Value.Supported }
A separate
value for the border-separate
property.
borderCollapse separate
borderSpacing : BaseValue Length -> Style
Sets border-spacing
.
borderSpacing zero
borderSpacing (px 5)
borderSpacing2 : Value Length -> Value Length -> Style
Sets border-spacing
, defining horizontal and vertical spacing separately.
borderSpacing2 (cm 1) (em 2)
captionSide : BaseValue { top_ : Value.Supported, bottom_ : Value.Supported, blockStart : Value.Supported, blockEnd : Value.Supported, inlineStart : Value.Supported, inlineEnd : Value.Supported } -> Style
Sets caption-side
.
captionSide top_
captionSide bottom_
captionSide blockStart
captionSide inlineEnd
emptyCells : BaseValue { show : Value.Supported, hide : Value.Supported } -> Style
Sets empty-cells
.
emptyCells show
emptyCells hide
show : Value { provides | show : Value.Supported }
A show
value for the empty-cells
property.
emptyCells show
hide : Value { provides | hide : Value.Supported }
A hide
value for the empty-cells
property.
emptyCells hide
tableLayout : BaseValue { auto : Value.Supported, fixed : Value.Supported } -> Style
Sets table-layout
.
tableLayout auto
tableLayout fixed
breakBefore : BaseValue { auto : Value.Supported, avoid : Value.Supported, avoidPage : Value.Supported, page : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, avoidColumn : Value.Supported, column : Value.Supported } -> Style
Sets break-before
.
breakBefore auto
breakAfter : BaseValue { auto : Value.Supported, avoid : Value.Supported, avoidPage : Value.Supported, page : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, avoidColumn : Value.Supported, column : Value.Supported } -> Style
Sets break-after
.
breakAfter auto
breakInside : BaseValue { auto : Value.Supported, avoid : Value.Supported, avoidPage : Value.Supported, avoidColumn : Value.Supported } -> Style
Sets break-inside
breakInside auto
breakInside avoid
breakInside avoidPage
breakInside avoidColumn
avoid : Value { provides | avoid : Value.Supported }
Sets avoid
value for usage with breakAfter
,
breakBefore
and breakInside
.
breakBefore avoid
breakAfter avoid
breakInside avoid
avoidPage : Value { provides | avoidPage : Value.Supported }
Sets avoid-page
value for usage with breakAfter
,
breakBefore
and breakInside
.
breakBefore avoidPage
breakAfter avoidPage
breakInside avoidPage
avoidColumn : Value { provides | avoidColumn : Value.Supported }
Sets avoid-column
value for usage with breakAfter
,
breakBefore
and breakInside
.
breakBefore avoidColumn
breakAfter avoidColumn
breakInside avoidColumn
page : Value { provides | page : Value.Supported }
Sets page
value for usage with breakAfter
and
breakBefore
.
breakBefore page
breakAfter page
pageBreakBefore : BaseValue { auto : Value.Supported, always : Value.Supported, avoid : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
Sets page-break-before
This property has been deprecated and replaced with
breakBefore
, but is still included for backwards
compatibility.
pageBreakBefore auto
pageBreakBefore always
pageBreakBefore avoid
pageBreakBefore left_
pageBreakBefore right_
pageBreakAfter : BaseValue { auto : Value.Supported, always : Value.Supported, avoid : Value.Supported, left_ : Value.Supported, right_ : Value.Supported } -> Style
Sets page-break-after
This property has been deprecated and replaced with
breakAfter
, but is still included for backwards
compatibility.
pageBreakAfter auto
pageBreakAfter always
pageBreakAfter avoid
pageBreakAfter left_
pageBreakAfter right_
pageBreakInside : BaseValue { auto : Value.Supported, avoid : Value.Supported } -> Style
Sets page-break-inside
pageBreakInside auto
pageBreakInside avoid
orphans : BaseValue { int : Value.Supported } -> Style
Sets orphans
Note: This function accepts only positive integers.
orphans (int 2)
widows : BaseValue { int : Value.Supported } -> Style
Sets widows
Note: This function accepts only positive integers.
widows (int 2)
boxDecorationBreak : BaseValue { slice : Value.Supported, clone : Value.Supported } -> Style
Sets box-decoration-break
boxDecorationBreak slice
boxDecorationBreak clone
float : BaseValue { none : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, inlineStart : Value.Supported, inlineEnd : Value.Supported } -> Style
Sets float
.
float none
float left_
float right_
float inlineStart
clear : BaseValue { none : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, both : Value.Supported, inlineStart : Value.Supported, inlineEnd : Value.Supported } -> Style
Sets clear
property.
clear none
clear both
clear left_
clear right_
clear inlineStart
clear inlineEnd
verticalAlign : BaseValue (LengthSupported { baseline : Value.Supported, sub : Value.Supported, super : Value.Supported, textTop : Value.Supported, textBottom : Value.Supported, middle : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, pct : Value.Supported }) -> Style
Sets vertical-align
.
verticalAlign textBottom
verticalAlign (em 1)
textTop : Value { provides | textTop : Value.Supported }
A textTop
value for the vertical-align
property.
verticalAlign textTop
textBottom : Value { provides | textBottom : Value.Supported }
A textBottom
value for the vertical-align
property.
verticalAlign textBottom
objectFit : BaseValue { fill_ : Value.Supported, contain_ : Value.Supported, cover : Value.Supported, none : Value.Supported, scaleDown : Value.Supported } -> Style
Sets object-fit
objectFit fill_
objectFit contain_
objectFit cover
objectFit scaleDown
objectFit none
scaleDown : Value { provides | scaleDown : Value.Supported }
Sets scale-down
value for usage with objectFit
.
objectFit scaleDown
objectPosition : BaseValue (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style
Sets object-position
.
objectPosition left_
objectPosition (px 45)
objectPosition
sets the horizontal direction. If you need the vertical
direction instead, use objectPosition2
like this:
objectPosition zero (px 45)
If you need to set the offsets from the right or bottom, use
objectPosition4
like this:
objectPosition4 right_ (px 20) bottom_ (pct 25)
objectPosition2 : Value (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Style
Sets object-position
.
objectPosition2 left_ top_
objectPosition2 (px 45) (pct 50)
objectPosition2
sets both the horizontal and vertical directions (in that
order, same as CSS.) If you need only the horizontal, you can use
objectPosition
instead:
objectPosition left_
If you need to set the offsets from the right or bottom, use
objectPosition4
like this:
objectPosition4 right_ (px 20) bottom_ (pct 25)
pointerEvents : BaseValue { auto : Value.Supported, none : Value.Supported, visiblePainted : Value.Supported, visibleFill : Value.Supported, visibleStroke : Value.Supported, visible : Value.Supported, painted : Value.Supported, fill_ : Value.Supported, stroke : Value.Supported, all_ : Value.Supported } -> Style
Sets pointer-events
pointerEvents none
pointerEvents auto
visiblePainted : Value { provides | visiblePainted : Value.Supported }
The visiblePainted
value used by pointerEvents
.
pointerEvents visiblePainted
visibleFill : Value { provides | visibleFill : Value.Supported }
The visibleFill
value used by pointerEvents
.
pointerEvents visibleFill
visibleStroke : Value { provides | visibleStroke : Value.Supported }
The visibleStroke
value used by pointerEvents
.
pointerEvents visibleStroke
painted : Value { provides | painted : Value.Supported }
The painted
value used by pointerEvents
.
pointerEvents painted
touchAction : BaseValue { auto : Value.Supported, none : Value.Supported, panX : Value.Supported, panY : Value.Supported, pinchZoom : Value.Supported, manipulation : Value.Supported } -> Style
The touch-action
property.
touchAction auto
touchAction panY
touchAction pinchZoom
panX : Value { provides | panX : Value.Supported }
The pan-x
value used by touch-action
.
touchAction panX
panY : Value { provides | panY : Value.Supported }
The pan-y
value used by touch-action
.
touchAction panY
pinchZoom : Value { provides | pinchZoom : Value.Supported }
The pinch-zoom
value used by touch-action
.
touchAction pinchZoom
scrollbarColor : BaseValue (ColorSupported { auto : Value.Supported }) -> Style
Sets the
scrollbar-color
property.
scrollbarColor auto
scrollbarColor (hex "f35d93")
scrollbarWidth : BaseValue { auto : Value.Supported, thin : Value.Supported, none : Value.Supported } -> Style
Sets the scrollbar-width
property.
scrollbarWidth auto
scrollbarWidth thin
scrollbarGutter : BaseValue { auto : Value.Supported, stable : Value.Supported } -> Style
The scrollbar-gutter
property.
This 1-argument variant can accept global values and some keywords.
scrollbarGutter auto
scrollbarGutter inherit
scrollbarGutter2 stable bothEdges
scrollbarGutter2 : Value { stable : Value.Supported } -> Value { bothEdges : Value.Supported } -> Style
The scrollbar-gutter
property.
This 2-argument variant can only accept the keywords stable
and bothEdges
.
scrollbarGutter auto
scrollbarGutter inherit
scrollbarGutter2 stable bothEdges
stable : Value { provides | stable : Value.Supported }
The stable
value used by scrollbarGutter
.
scrollbarGutter stable
scrollBehavior : BaseValue { auto : Value.Supported, smooth : Value.Supported } -> Style
Sets scroll-behavior
scrollBehavior auto
scrollBehavior smooth
smooth : Value { provides | smooth : Value.Supported }
Sets smooth
value for usage with scrollBehavior
.
scrollBehavior smooth
overscrollBehavior : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style
Sets the overscroll-behavior
property.
This property is a shorthand for setting both overscroll-behavior-x
and overscroll-behavior-y
.
overscrollBehavior auto -- sets both X and Y to auto
overscrollBehavior2 auto contain -- X = auto, Y = contain.
overscrollBehavior2 : Value { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Value { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style
Sets the overscroll-behavior
property.
This property is a shorthand for setting both overscroll-behavior-x
and overscroll-behavior-y
.
overscrollBehavior2 auto contain_ -- X = auto, Y = contain.
overscrollBehaviorX : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style
Sets the overscroll-behavior-x
property.
overscrollBehaviorX auto
overscrollBehaviorX contain_
overscrollBehaviorY : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style
Sets the overscroll-behavior-y
property.
overscrollBehaviorY auto
overscrollBehaviorY contain_
overscrollBehaviorBlock : BaseValue { auto : Value.Supported, contain_ : Value.Supported, none : Value.Supported } -> Style
Sets the overscroll-behavior-block
property.
overscrollBehaviorBlock auto
overscrollBehaviorBlock contain_
scrollSnapType : BaseValue { none : Value.Supported, x : Value.Supported, y : Value.Supported, block : Value.Supported, inline : Value.Supported, both : Value.Supported } -> Style
Sets scroll-snap-type
scrollSnapType none
scrollSnapType2 : Value { x : Value.Supported, y : Value.Supported, block : Value.Supported, inline : Value.Supported, both : Value.Supported } -> Value { mandatory : Value.Supported, proximity : Value.Supported } -> Style
Sets scroll-snap-type
scrollSnapType2 x mandatory
scrollSnapType2 both proximity
scrollSnapAlign : BaseValue { none : Value.Supported, start : Value.Supported, center : Value.Supported, end : Value.Supported } -> Style
Sets scroll-snap-align
scrollSnapAlign none
scrollSnapAlign start
scrollSnapAlign center
scrollSnapAlign end
scrollSnapStop : BaseValue { normal : Value.Supported, always : Value.Supported } -> Style
Sets scroll-snap-stop
scrollSnapStop normal
scrollSnapStop always
mandatory : Value { provides | mandatory : Value.Supported }
Sets mandatory
value for usage with scrollSnapType2
.
scrollSnapType2 x mandatory
proximity : Value { provides | proximity : Value.Supported }
Sets proximity
value for usage with scrollSnapType2
.
scrollSnapType2 x proximity
scrollMargin : BaseValue Length -> Style
Sets scroll-margin
property.
The scrollMargin
property is a shorthand property for setting
scroll-margin-top
, scroll-margin-right
, scroll-margin-bottom
,
and scroll-margin-left
in a single declaration.
If there is only one argument value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.
scrollMargin (em 4) -- set all margins to 4em
scrollMargin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
scrollMargin3 (em 4) (px 2) (pt 5) -- top = 4em, right = 2px, bottom = 5pt, left = 2px
scrollMargin4 (em 4) (px 2) (pt 5) (px 3) -- top = 4em, right = 2px, bottom = 5pt, left = 3px
scrollMargin2 : Value Length -> Value Length -> Style
Sets scroll-margin
property.
The scrollMargin2
property is a shorthand property for setting
scroll-margin-top
, scroll-margin-right
, scroll-margin-bottom
,
and scroll-margin-left
in a single declaration.
The top and bottom margins are set to the first value and the right and left margins are set to the second.
scrollMargin2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
scrollMargin3 : Value Length -> Value Length -> Value Length -> Style
Sets scroll-margin
property.
The scrollMargin3
property is a shorthand property for setting
scroll-margin-top
, scroll-margin-right
, scroll-margin-bottom
,
and scroll-margin-left
in a single declaration.
The top margin is set to the first value, the left and right are set to the second, and the bottom is set to the third.
scrollMargin3 (em 4) (px 2) (pt 5) -- top = 4em, right = 2px, bottom = 5pt, left = 2px
scrollMargin4 : Value Length -> Value Length -> Value Length -> Value Length -> Style
Sets scroll-margin
property.
The scrollMargin4
property is a shorthand property for setting
scroll-margin-top
, scroll-margin-right
, scroll-margin-bottom
,
and scroll-margin-left
in a single declaration.
The four values apply to the top, right, bottom, and left margins.
scrollMargin4 (em 4) (px 2) (pt 5) (px 3) -- top = 4em, right = 2px, bottom = 5pt, left = 3px
scrollMarginTop : BaseValue Length -> Style
Sets scroll-margin-top
property.
scrollMarginTop (px 4)
scrollMarginLeft : BaseValue Length -> Style
Sets scroll-margin-left
property.
scrollMarginLeft (px 4)
scrollMarginRight : BaseValue Length -> Style
Sets scroll-margin-right
property.
scrollMarginRight (px 4)
scrollMarginBottom : BaseValue Length -> Style
Sets scroll-margin-bottom
property.
scrollMarginBottom (px 4)
scrollMarginBlock : BaseValue Length -> Style
Sets scroll-margin-block
property.
The scrollMarginBlock
property is a shorthand property for setting
scroll-margin-block-start
and scroll-margin-block-end
in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the block start margin is set to the first value and the block end margin is set to the second.
scrollMarginBlock (em 4) -- set both block margins to 4em
scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
scrollMarginBlock2 : Value Length -> Value Length -> Style
Sets scroll-margin-block
property.
The scrollMarginBlock2
property is a shorthand property for setting
scroll-margin-block-start
and scroll-margin-block-end
in a single declaration.
The block start margin is set to the first value and the block end margin is set to the second.
scrollMarginBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
scrollMarginInline : BaseValue Length -> Style
Sets scroll-margin-inline
property.
The scrollMarginInline
property is a shorthand property for setting
scroll-margin-inline-start
and scroll-margin-inline-end
in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the inline start margin is set to the first value and the inline end margin is set to the second.
scrollMarginInline (em 4) -- set both inline margins to 4em
scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
scrollMarginInline2 : Value Length -> Value Length -> Style
Sets scroll-margin-inline
property.
The scrollMarginInline2
property is a shorthand property for setting
scroll-margin-inline-start
and scroll-margin-inline-end
in a single declaration.
The inline start margin is set to the first value and the inline end margin is set to the second.
scrollMarginInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
scrollMarginBlockStart : BaseValue Length -> Style
Sets scroll-margin-block-start
property.
scrollMarginBlockStart (px 4)
scrollMarginBlockEnd : BaseValue Length -> Style
Sets scroll-margin-block-end
property.
scrollMarginBlockEnd (px 4)
scrollMarginInlineStart : BaseValue Length -> Style
Sets scroll-margin-inline-start
property.
scrollMarginInlineStart (px 4)
scrollMarginInlineEnd : BaseValue Length -> Style
Sets scroll-margin-inline-end
property.
scrollMarginInlineEnd (px 4)
scrollPadding : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding
property.
The scrollPadding
property is a shorthand property for setting
scroll-padding-top
, scroll-padding-right
, scroll-padding-bottom
,
and scroll-padding-left
in a single declaration.
If there is only one argument value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values they apply to the top, right, bottom, and left, respectively.
scrollPadding (em 4) -- set all paddings to 4em
scrollPadding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
scrollPadding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px
scrollPadding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px
scrollPadding2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding
property.
The scrollPadding2
property is a shorthand property for setting
scroll-padding-top
, scroll-padding-right
, scroll-padding-bottom
,
and scroll-padding-left
in a single declaration.
The top and bottom margins are set to the first value and the right and left margins are set to the second.
scrollPadding2 (em 4) (px 2) -- top & bottom = 4em, right & left = 2px
scrollPadding3 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding
property.
The scrollPadding3
property is a shorthand property for setting
scroll-padding-top
, scroll-padding-right
, scroll-padding-bottom
,
and scroll-padding-left
in a single declaration.
The top padding is set to the first value, the left and right are set to the second, and the bottom is set to the third.
scrollPadding3 (em 4) (px 2) (pct 5) -- top = 4em, right = 2px, bottom = 5%, left = 2px
scrollPadding4 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding
property.
The scrollPadding4
property is a shorthand property for setting
scroll-padding-top
, scroll-padding-right
, scroll-padding-bottom
,
and scroll-padding-left
in a single declaration.
The four values apply to the top, right, bottom, and left paddings.
scrollPadding4 (em 4) (px 2) (pct 5) (px 3) -- top = 4em, right = 2px, bottom = 5%, left = 3px
scrollPaddingTop : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-top
property.
scrollPaddingTop (px 4)
scrollPaddingLeft : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-left
property.
scrollPaddingLeft (px 4)
scrollPaddingRight : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-right
property.
scrollPaddingRight (px 4)
scrollPaddingBottom : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-bottom
property.
scrollPaddingBottom (px 4)
scrollPaddingBlock : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-block
property.
The scroll-padding-block
property is a shorthand property for setting
scroll-padding-block-start
and scroll-padding-block-end
in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the block start padding is set to the first value and the block end padding is set to the second.
scrollPaddingBlock (em 4) -- set both block paddings to 4em
scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
scrollPaddingBlock2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-block
property.
The scroll-padding-block
property is a shorthand property for setting
scroll-padding-block-start
and scroll-padding-block-end
in a single declaration.
The block start padding is set to the first value and the block end padding is set to the second.
scrollPaddingBlock2 (em 4) (px 2) -- block start = 4em, block end = 2px
scrollPaddingInline : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-inline
property.
The scroll-padding-inline
property is a shorthand property for setting
scroll-padding-inline-start
and scroll-padding-inline-end
in a single declaration.
If there is only one argument value, it applies to both sides. If there are two values, the inline start padding is set to the first value and the inline end padding is set to the second.
scrollPaddingInline (em 4) -- set both inline paddings to 4em
scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
scrollPaddingInline2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-inline
property.
The scroll-padding-inline
property is a shorthand property for setting
scroll-padding-inline-start
and scroll-padding-inline-end
in a single declaration.
The inline start padding is set to the first value and the inline end padding is set to the second.
scrollPaddingInline2 (em 4) (px 2) -- inline start = 4em, inline end = 2px
scrollPaddingBlockStart : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-block-start
property.
scrollPaddingBlockStart (px 4)
scrollPaddingBlockEnd : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-block-end
property.
scrollPaddingBlockEnd (px 4)
scrollPaddingInlineStart : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported }) -> Style
Sets scroll-padding-inline-start
property.
scrollPaddingInlineStart (px 4)
{ pointer : Value.Supported
, auto : Value.Supported
, default_ : Value.Supported
, none : Value.Supported
, contextMenu : Value.Supported
, help : Value.Supported
, progress : Value.Supported
, wait : Value.Supported
, cell : Value.Supported
, crosshair : Value.Supported
, text : Value.Supported
, verticalText : Value.Supported
, alias : Value.Supported
, copy : Value.Supported
, move : Value.Supported
, noDrop : Value.Supported
, notAllowed : Value.Supported
, allScroll : Value.Supported
, colResize : Value.Supported
, rowResize : Value.Supported
, nResize : Value.Supported
, eResize : Value.Supported
, sResize : Value.Supported
, wResize : Value.Supported
, neResize : Value.Supported
, nwResize : Value.Supported
, seResize : Value.Supported
, swResize : Value.Supported
, ewResize : Value.Supported
, nsResize : Value.Supported
, neswResize : Value.Supported
, nwseResize : Value.Supported
, zoomIn : Value.Supported
, zoomOut : Value.Supported
, grab : Value.Supported
, grabbing : Value.Supported
}
A type alias used for the various cursor
properties
cursor : BaseValue CursorKeyword -> Style
The cursor
property.
cursor notAllowed
cursor2 : Value { url : Value.Supported } -> Value CursorKeyword -> Style
The cursor
property.
cursor2 (url "https://example.com") move
cursor4 : Value { url : Value.Supported } -> Value { num : Value.Supported, zero : Value.Supported, default_ : Value.Supported } -> Value { num : Value.Supported, zero : Value.Supported } -> Value CursorKeyword -> Style
The cursor
property.
cursor4 (url "https://example.com") (num 34) zero move
text
is also a supported value for cursor
.
pointer : Value { provides | pointer : Value.Supported }
The pointer
value for the cursor
property.
default_ : Value { provides | default_ : Value.Supported }
The default
value for the cursor
property.
This value is called default_
instead of default
because
default
is already a pseudo-class function.
contextMenu : Value { provides | contextMenu : Value.Supported }
The context-menu
value for the cursor
property.
help : Value { provides | help : Value.Supported }
The help
value for the cursor
property.
progress : Value { provides | progress : Value.Supported }
The progress
value for the cursor
property.
wait : Value { provides | wait : Value.Supported }
The wait
value for the cursor
property.
cell : Value { provides | cell : Value.Supported }
The cell
value for the cursor
property.
crosshair : Value { provides | crosshair : Value.Supported }
The crosshair
value for the cursor
property.
verticalText : Value { provides | verticalText : Value.Supported }
The vertical-text
value for the cursor
property.
alias : Value { provides | alias : Value.Supported }
The alias
value for the cursor
property.
copy : Value { provides | copy : Value.Supported }
The copy
value for the cursor
property.
move : Value { provides | move : Value.Supported }
The move
value for the cursor
property.
noDrop : Value { provides | noDrop : Value.Supported }
The no-drop
value for the cursor
property.
notAllowed : Value { provides | notAllowed : Value.Supported }
The notAllowed
value for the cursor
property.
allScroll : Value { provides | allScroll : Value.Supported }
The all-scroll
value for the cursor
property.
colResize : Value { provides | colResize : Value.Supported }
The col-resize
value for the cursor
property.
rowResize : Value { provides | rowResize : Value.Supported }
The row-resize
value for the cursor
property.
nResize : Value { provides | nResize : Value.Supported }
The n-resize
value for the cursor
property.
eResize : Value { provides | eResize : Value.Supported }
The e-resize
value for the cursor
property.
sResize : Value { provides | sResize : Value.Supported }
The s-resize
value for the cursor
property.
wResize : Value { provides | wResize : Value.Supported }
The w-resize
value for the cursor
property.
neResize : Value { provides | neResize : Value.Supported }
The ne-resize
value for the cursor
property.
nwResize : Value { provides | nwResize : Value.Supported }
The nw-resize
value for the cursor
property.
seResize : Value { provides | seResize : Value.Supported }
The se-resize
value for the cursor
property.
swResize : Value { provides | swResize : Value.Supported }
The sw-resize
value for the cursor
property.
ewResize : Value { provides | ewResize : Value.Supported }
The ew-resize
value for the cursor
property.
nsResize : Value { provides | nsResize : Value.Supported }
The ns-resize
value for the cursor
property.
neswResize : Value { provides | neswResize : Value.Supported }
The nesw-resize
value for the cursor
property.
nwseResize : Value { provides | nwseResize : Value.Supported }
The nwse-resize
value for the cursor
property.
zoomIn : Value { provides | zoomIn : Value.Supported }
The zoom-in
value for the cursor
property.
zoomOut : Value { provides | zoomOut : Value.Supported }
The zoom-out
value for the cursor
property.
grab : Value { provides | grab : Value.Supported }
The grab
value for the cursor
property.
grabbing : Value { provides | grabbing : Value.Supported }
The grabbing
value for the cursor
property.
caretColor : BaseValue (ColorSupported { auto : Value.Supported, transparent : Value.Supported }) -> Style
Sets caret-color
caretColor (hex "#60b5cc")
caretColor (rgb 96 181 204)
caretColor (rgba 96 181 204 0.5)
linearGradient : Value { colorStop : Value.Supported } -> Value { colorStop : Value.Supported } -> List (Value { colorStop : Value.Supported }) -> Value { provides | linearGradient : Value.Supported }
Produces linear-gradient()
values used by properties such as backgroundImage
,
and listStyleImage
linearGradient (stop red) (stop blue) []
linearGradient (stop red) (stop blue) [ stop green ]
linearGradient2 : Value (AngleSupported { toBottom : Value.Supported, toBottomLeft : Value.Supported, toBottomRight : Value.Supported, toLeft : Value.Supported, toRight : Value.Supported, toTop : Value.Supported, toTopLeft : Value.Supported, toTopRight : Value.Supported }) -> Value { colorStop : Value.Supported } -> Value { colorStop : Value.Supported } -> List (Value { colorStop : Value.Supported }) -> Value { provides | linearGradient : Value.Supported }
Produces linear-gradient()
values used by properties such as backgroundImage
,
and listStyleImage
linearGradient2 toTop (stop red) (stop blue) []
linearGradient2 toTop (stop red) (stop blue) [ stop green ]
stop : Value Color -> Value { provides | colorStop : Value.Supported }
Provides a stop for a gradient.
linearGradient toTop (stop red) (stop blue) []
See also stop2
for controlling stop positioning.
stop2 : Value Color -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | colorStop : Value.Supported }
Provides a stop for a gradient.
linearGradient toTop (stop2 red (px 20)) (stop blue) []
See also stop
if you don't need to control the stop position.
stop3 : Value Color -> Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | colorStop : Value.Supported }
Provides a stop for a gradient.
linearGradient (stop3 (hex "111") zero (pt 1)) (stop3 (hex "6454") (pt 2) (pct 45))
toBottom : Value { provides | toBottom : Value.Supported }
Provides the to bottom
side angle for gradients.
linearGradient toBottom (stop red) (stop blue) []
If you want your gradient to go to a corner, use toBottomLeft
or toBottomRight
:
linearGradient toBottomLeft (stop red) (stop blue) []
linearGradient toBottomRight (stop red) (stop blue) []
toBottomLeft : Value { provides | toBottomLeft : Value.Supported }
Provides the to bottom left
corner angle for gradients.
linearGradient toBottomLeft (stop red) (stop blue) []
If you want your gradient to go to a side, use toBottom
or toLeft
instead:
linearGradient toBottom (stop red) (stop blue) []
linearGradient toLeft (stop red) (stop blue) []
toBottomRight : Value { provides | toBottomRight : Value.Supported }
Provides the to bottom right
corner angle for gradients.
linearGradient toBottomRight (stop red) (stop blue) []
If you want your gradient to go to a side, use toBottom
or toRight
instead:
linearGradient toBottom (stop red) (stop blue) []
linearGradient toRight (stop red) (stop blue) []
toLeft : Value { provides | toLeft : Value.Supported }
Provides the to left
side angle for gradients.
linearGradient toLeft (stop red) (stop blue) []
If you want your gradient to go to a corner, use toTopLeft
or toBottomLeft
:
linearGradient toTopLeft (stop red) (stop blue) []
linearGradient toBottomLeft (stop red) (stop blue) []
toRight : Value { provides | toRight : Value.Supported }
Provides the to right
side angle for gradients.
linearGradient toRight (stop red) (stop blue) []
If you want your gradient to go to a corner, use toTopRight
or toBottomRight
:
linearGradient toTopRight (stop red) (stop blue) []
linearGradient toBottomRight (stop red) (stop blue) []
toTop : Value { provides | toTop : Value.Supported }
Provides the to top
side angle for gradients.
linearGradient toTop (stop red) (stop blue) []
If you want your gradient to go to a corner, use toTopLeft
or toTopRight
:
linearGradient toTopLeft (stop red) (stop blue) []
linearGradient toTopRight (stop red) (stop blue) []
toTopLeft : Value { provides | toTopLeft : Value.Supported }
Provides the to top left
corner angle for gradients.
linearGradient toTopLeft (stop red) (stop blue) []
If you want your gradient to go to a side, use toTop
or toLeft
instead:
linearGradient toTop (stop red) (stop blue) []
linearGradient toLeft (stop red) (stop blue) []
{ offsetX : Value (LengthSupported { pct : Value.Supported })
, offsetY : Value (LengthSupported { pct : Value.Supported })
, blurRadius : Maybe (Value (LengthSupported { pct : Value.Supported }))
, spreadRadius : Maybe (Value (LengthSupported { pct : Value.Supported }))
, color : Maybe (Value Color)
, inset : Basics.Bool
}
Configuration for boxShadow
.
boxShadow : BaseValue { none : Value.Supported } -> Style
The box-shadow
property.
boxShadow initial
boxShadow none
For defining shadows look at boxShadowsMany
.
boxShadowMany : List BoxShadowConfig -> Style
Sets box-shadow
.
If you give an empty list, the value will be none
. This is to make it impossible for it
to have no values in the output.
boxShadowMany [] -- "box-shadow: none"
-- "box-shadow: 3px 5px #aabbcc"
button
[ css
[ boxShadowMany
[ { defaultBoxShadow
| offsetX = px 3
, offsetY = px 5
, color = Just (hex "#aabbcc")
}
]
]
]
[ text "Zap!" ]
defaultBoxShadow : BoxShadowConfig
Default boxShadow
configuration.
It is equivalent to the following CSS:
box-shadow: 0 0;
{ offsetX : Value (LengthSupported { pct : Value.Supported })
, offsetY : Value (LengthSupported { pct : Value.Supported })
, blurRadius : Maybe (Value (LengthSupported { pct : Value.Supported }))
, color : Maybe (Value Color)
}
Configuration for textShadow
.
textShadow : BaseValue { none : Value.Supported } -> Style
The text-shadow
property.
boxShadow initial
boxShadow none
This 1-argument variant is for single keyword values only.
For defining shadows look at textShadowMany
.
textShadowMany : List TextShadowConfig -> Style
Sets text-shadow
.
This multi-argument variant is for defining shadows only.
For single keyword values, look at textShadow
.
textShadowMany [] -- "text-shadow: unset"
-- "text-shadow: 3px 5px #aabbcc"
span
[ css
[ textShadow
[ { defaultTextShadow
| offsetX = px 3
, offsetY = px 5
, color = Just (hex "#aabbcc")
}
]
]
]
[ text "Zap!" ]
TransformFunctionSupported {}
A type alias used to accept a transform-function.
{ supported | matrix : Value.Supported
, matrix3d : Value.Supported
, translate : Value.Supported
, translate2 : Value.Supported
, translateX : Value.Supported
, translateY : Value.Supported
, translateZ : Value.Supported
, translate3d : Value.Supported
, scale_ : Value.Supported
, scale2_ : Value.Supported
, scaleX : Value.Supported
, scaleY : Value.Supported
, scaleZ : Value.Supported
, scale3d : Value.Supported
, skew : Value.Supported
, skew2 : Value.Supported
, skewX : Value.Supported
, skewY : Value.Supported
, rotate_ : Value.Supported
, rotateX : Value.Supported
, rotateY : Value.Supported
, rotateZ : Value.Supported
, rotate3d : Value.Supported
, perspective_ : Value.Supported
}
A type alias used to accept a transform-function among other values.
transform : BaseValue (TransformFunctionSupported { none : Value.Supported }) -> Style
The transform
property.
transform <| matrix 1.0 2.0 3.0 4.0 5.0 6.0
transform <| matrix3d 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1
transform <| translate (px 12)
transform <| translate2 (px 12) (pct 50)
transform <| translateX (em 2)
transform <| translateY (inch 3)
transform <| translateZ (px 2)
transform <| translate3d (px 12) (pct 50) (em 3)
transform <| scale_ 2
transform <| scale2_ 2 0.5
transform <| scaleX 2
transform <| scaleY 0.5
transform <| scaleZ 0.3
transform <| scale3d 2.5 1.2 0.3
transform <| skew (deg 20)
transform <| skew2 (deg 30)
transform <| skewX (deg 30)
transform <| skewY (rad 1.07)
transform <| rotate_ (turn 0.5)
transform <| rotateX (deg 10)
transform <| rotateY (deg 10)
transform <| rotateZ (deg 10)
transform <| rotate3d 1 2.0 3.0 (deg 10)
transform <| perspective_ (px 17)
transformMany : List (Value TransformFunction) -> Style
Sets transform
with a series of transform-functions.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
transformMany [ translate (px 12), scale_ 2, skew (deg 20) ]
transformMany [] -- transform: unset;
transformOrigin : BaseValue (LengthSupported { top_ : Value.Supported, center : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, pct : Value.Supported }) -> Style
Sets transform-origin
.
This is the 1-argument variant, which lets you set certain keywords and single lengths or percentages.
transformOrigin top_
transformOrigin center
transformOrigin bottom
transformOrigin (px 30)
transformOrigin (pct 50)
transformOrigin2 left_ top_
transformOrigin2 right_ center
transformOrigin2 right_ bottom_
transformOrigin2 (pct 50) (pct 50)
transformOrigin3 (pct 10) (px 2) (px 10)
transformOrigin3 left_ (px 5) (px -4)
transformOrigin3 right_ bottom_ (rem 2)
transformOrigin2 : Value (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Style
Sets transform-origin
.
This 2-argument variant lets you set x and y offsets in a single declaration.
transformOrigin2 left_ top_
transformOrigin2 right_ center
transformOrigin2 right_ bottom_
transformOrigin2 (pct 50) (pct 50)
transformOrigin3 : Value (LengthSupported { left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value (LengthSupported { top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported, pct : Value.Supported }) -> Value Length -> Style
Sets transform-origin
.
This 3-argument variant lets you set x, y and z offsets in a single declaration.
transformOrigin3 (pct 10) (px 2) (px 10)
transformOrigin3 left_ (px 5) (px -4)
transformOrigin3 right_ bottom_ (rem 2)
transformBox : BaseValue { contentBox : Value.Supported, borderBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported } -> Style
Sets the transform-box
property.
transformBox contentBox
transformBox fillBox
transformStyle : BaseValue { flat : Value.Supported, preserve3d : Value.Supported } -> Style
Sets the transform-style
property.
transformStyle flat
transformStyle inherit
flat : Value { provides | flat : Value.Supported }
The flat
value used in the transformStyle
property.
transformStyle flat
preserve3d : Value { provides | preserve3d : Value.Supported }
The preserve-3d
value used in the transformStyle
property.
transformStyle preserve3d
matrix : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | matrix : Value.Supported }
Sets matrix
value for usage with transform
.
The first four numeric values describe the linear transformation.
The last two numeric values describe the translation to apply.
transform (matrix 1 2 -1 1 80 80)
matrix3d : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | matrix3d : Value.Supported }
Sets matrix3d
value for usage with transform
.
Every fourth number describes the translation to apply. All other describe the
linear tranformation.
transform (matrix3d 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1)
scale : BaseValue { num : Value.Supported, none : Value.Supported } -> Style
The scale
property.
This one-argument version lets you set a global value, none
or
a num
that will scale the element by both X and Y axes
(equivalent to scale_
).
scale none
scale (num 3)
scale2 (num 1) (num 3)
scale3 (num 1) (num 3) (num 4)
scale2 : Value { num : Value.Supported } -> Value { num : Value.Supported } -> Style
The scale
property.
This two-argument version lets you specify scaling in X and Y axes
(equivalent to scale2_
).
scale2 (num 1) (num 3)
scale3 : Value { num : Value.Supported } -> Value { num : Value.Supported } -> Value { num : Value.Supported } -> Style
The scale
property.
This three-argument version lets you specify scaling in X, Y and Z axes
(equivalent to scale3d
).
scale3 (num 1) (num 3) (num 4)
scale_ : Basics.Float -> Value { provides | scale_ : Value.Supported }
Sets scale
value for usage with transform
.
transform (scale_ 0.7)
This is called scale_
instead of scale
because scale
is already a property function.
scale2_ : Basics.Float -> Basics.Float -> Value { provides | scale2_ : Value.Supported }
Sets scale
value for usage with transform
.
transform (scale2_ 0.7 0.7)
This is called scale2_
instead of scale2
because scale2
is already a property function.
scaleX : Basics.Float -> Value { provides | scaleX : Value.Supported }
Sets scaleX
value for usage with transform
.
transform (scaleX 0.7)
scaleY : Basics.Float -> Value { provides | scaleY : Value.Supported }
Sets scaleY
value for usage with transform
.
transform (scaleY 0.7)
scaleZ : Basics.Float -> Value { provides | scaleZ : Value.Supported }
Sets scaleZ
value for usage with transform
.
transform (scaleZ 0.7)
scale3d : Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | scale3d : Value.Supported }
Sets scale3d
value for usage with transform
.
transform (scale3d 2 0.7 0.2)
rotate : BaseValue (AngleSupported { none : Value.Supported }) -> Style
The rotate
property.
This one-argument version lets you set a global variable, none
, or angle.
rotate none
rotate inherit
rotate (deg 60)
rotate2 x (deg 50)
rotate2 y (deg 100)
rotate4 1 1 1 (deg 90)
rotate2 : Value { x : Value.Supported, y : Value.Supported, z : Value.Supported } -> Value Angle -> Style
The rotate
property.
This 2-argument version lets you set an axis, then an angle value.
rotate2 x (deg 50)
rotate2 y (deg 100)
rotate4 : Basics.Float -> Basics.Float -> Basics.Float -> Value Angle -> Style
The rotate
property.
This 4-argument version lets you set a 3D vector, than an angle value.
rotate4 1 1 1 (deg 90)
rotate_ : Value Angle -> Value { provides | rotate_ : Value.Supported }
Sets rotate
value for usage with transform
.
transform (rotate_ (deg 30))
This is called rotate_
instead of rotate
because rotate
is already a property function.
rotateX : Value Angle -> Value { provides | rotateX : Value.Supported }
Sets rotateX
value for usage with transform
.
transform (rotateX (deg 30))
rotateY : Value Angle -> Value { provides | rotateY : Value.Supported }
Sets rotateY
value for usage with transform
.
transform (rotateY (deg 30))
rotateZ : Value Angle -> Value { provides | rotateZ : Value.Supported }
Sets rotateZ
value for usage with transform
.
transform (rotateZ (deg 30))
rotate3d : Basics.Float -> Basics.Float -> Basics.Float -> Value Angle -> Value { provides | rotate3d : Value.Supported }
Sets rotate3d
value for usage with transform
.
transform (rotate3d 0 1 0 (deg 30))
skew : Value Angle -> Value { provides | skew : Value.Supported }
Sets skew
value for usage with transform
.
transform (skew (deg 30))
skew2 : Value Angle -> Value Angle -> Value { provides | skew2 : Value.Supported }
Sets skew
value for usage with transform
.
transform (skew2 (deg 30) (deg 10))
skewX : Value Angle -> Value { provides | skewX : Value.Supported }
Sets skewX
value for usage with transform
.
transform (skewX (deg 30))
skewY : Value Angle -> Value { provides | skewY : Value.Supported }
Sets skewY
value for usage with transform
.
transform (skewY (deg 30))
translate : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translate : Value.Supported }
Sets translate
value for usage with transform
.
transform (translate (px 10))
translate2 : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translate2 : Value.Supported }
Sets translate
value for usage with transform
.
transform (translate (px 10) (px 20))
translateX : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translateX : Value.Supported }
Sets translateX
value for usage with transform
.
transform (translateX (px 10))
translateY : Value (LengthSupported { pct : Value.Supported }) -> Value { provides | translateY : Value.Supported }
Sets translateY
value for usage with transform
.
transform (translateY (px 10))
translateZ : Value Length -> Value { provides | translateZ : Value.Supported }
Sets translateZ
value for usage with transform
.
transform (translateZ (px 10))
translate3d : Value (LengthSupported { pct : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported }) -> Value Length -> Value { provides | translate3d : Value.Supported }
Sets translate3d
value for usage with transform
.
transform (translate3d (px 12) (pct 50) (em 3))
perspective : BaseValue (LengthSupported { none : Value.Supported }) -> Style
The perspective
property.
Negative values are not supported and any value smaller than 1px is clamped to 1px.
perspective none
perspective (px 100)
perspective (rem 50)
perspectiveOrigin : BaseValue (LengthSupported { pct : Value.Supported, left_ : Value.Supported, center : Value.Supported, right_ : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported }) -> Style
The perspective-origin
property.
This one-argument version either supports a global value or the x-position.
perspectiveOrigin inherit
perspectiveOrigin left_
perspectiveOrigin (pct 50)
perspectiveOrigin2 left_ center
perspectiveOrigin2 (rem 50) (pct 20)
perspectiveOrigin2 : Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, center : Value.Supported, right_ : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, center : Value.Supported, bottom_ : Value.Supported }) -> Style
The perspective-origin
property.
This two-argument version takes an X position and then a Y position.
pperspectiveOrigin2 left_ center
perspectiveOrigin2 (rem 50) (pct 20)
perspective_ : Value Length -> Value { provides | perspective_ : Value.Supported }
Sets perspective
value for usage with transform
.
transform (perspective_ (px 17))
The value is called perspective_
instead of perspective
because
perspective
is already a property function.
backfaceVisibility : BaseValue { visible : Value.Supported, hidden : Value.Supported } -> Style
Sets backface-visibility
backfaceVisibility visible
backfaceVisibility hidden
animationName : BaseValue { none : Value.Supported, string : Value.Supported, customIdent : Value.Supported } -> Style
The animation-name
property.
animationName (customIdent "pulse") []
animationNameMany : List (Value { none : Value.Supported, string : Value.Supported, customIdent : Value.Supported }) -> Style
The animation-name
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationNameMany [customIdent "pulse"]
animationNameMany [] -- animation-name: unset;
animationDuration : BaseValue Time -> Style
The animation-duration
property.
animationDuration (s 1)
animationDurationMany : List (Value Time) -> Style
The animation-duration
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationDurationMany [ s 1, ms 300, s 4.5 ]
animationDurationMany [] -- animation-duration: unset;
animationTimingFunction : BaseValue EasingFunction -> Style
The animation-timing-function
property.
animationTimingFunction linear
animationTimingFunctionMany : List (Value EasingFunction) -> Style
The animation-timing-function
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationTimingFunctionMany linear [ cubicBezier 0.42 0 0.38 1, stepEnd ]
animationTimingFunctionMany [] -- animation-timing-function: unset;
animationIterationCount : BaseValue { infinite : Value.Supported, num : Value.Supported, zero : Value.Supported, calc : Value.Supported } -> Style
The animation-iteration-count
property.
animationIterationCount (num 3.5)
animationIterationCount infinite
animationIterationCountMany : List (Value { infinite : Value.Supported, num : Value.Supported, zero : Value.Supported, calc : Value.Supported }) -> Style
The animation-iteration-count
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationIterationCountMany [num 3.5, infinte, zero ]
animationIterationCountMany [] -- animation-iteration-count: unset;
animationDirection : BaseValue { normal : Value.Supported, reverse : Value.Supported, alternate : Value.Supported, alternateReverse : Value.Supported } -> Style
The animation-direction
property.
animationDirection reverse
animationDirectionMany : List (Value { normal : Value.Supported, reverse : Value.Supported, alternate : Value.Supported, alternateReverse : Value.Supported }) -> Style
The animation-direction
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationDirectionMany [ reverse, normal, alternate, alternateReverse ]
animationDirectionMany [] -- animation-direction: unset;
animationPlayState : BaseValue { running : Value.Supported, paused : Value.Supported } -> Style
The animation-play-state
property.
animationPlayState running
animationPlayStateMany : List (Value { running : Value.Supported, paused : Value.Supported }) -> Style
The animation-play-state
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationPlayStateMany [ running, paused ]
animationPlayStateMany [] -- animation-play-state: unset;
animationDelay : BaseValue Time -> Style
The animation-delay
property.
animationDelay (s 1)
animationDelayMany : List (Value Time) -> Style
The animation-delay
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationDelayMany (s 1) [ ms 300, s 4.5 ]
animationDelayMany [] -- animation-delay: unset;
animationFillMode : BaseValue { none : Value.Supported, forwards : Value.Supported, backwards : Value.Supported, both : Value.Supported } -> Style
The animation-fill-mode
property.
animationFillMode forwards
animationFillModeMany : List (Value { none : Value.Supported, forwards : Value.Supported, backwards : Value.Supported, both : Value.Supported }) -> Style
The animation-fill-mode
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
animationFillModeMany [ forwards, none, both, backwards ]
animationFillModeMany [] -- animation-fill-mode: unset;
EasingFunctionSupported {}
A type alias used to accept an easing-function.
{ supported | linear : Value.Supported
, ease : Value.Supported
, easeIn : Value.Supported
, easeOut : Value.Supported
, easeInOut : Value.Supported
, cubicBezier : Value.Supported
, stepStart : Value.Supported
, stepEnd : Value.Supported
, steps : Value.Supported
}
A type alias used to accept an easing-function among other values.
linear : Value { provides | linear : Value.Supported }
The linear
value used for properties such as animationTimingFunction
.
animationTimingFunction linear
ease : Value { provides | ease : Value.Supported }
The ease
value used for properties such as animationTimingFunction
.
animationTimingFunction ease
easeIn : Value { provides | easeIn : Value.Supported }
The ease-in
value used for properties such as animationTimingFunction
.
animationTimingFunction easeIn
easeOut : Value { provides | easeOut : Value.Supported }
The ease-out
value used for properties such as animationTimingFunction
.
animationTimingFunction easeOut
easeInOut : Value { provides | easeInOut : Value.Supported }
The ease-in-out
value used for properties such as animationTimingFunction
.
animationTimingFunction easeInOut
cubicBezier : Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Value { provides | cubicBezier : Value.Supported }
Produces the cubic-bezier()
value used for properties such as animationTimingFunction
animationTimingFunction (cubicBezier 0.2 0 0.5 1)
stepStart : Value { provides | stepStart : Value.Supported }
The step-start
value used for properties such as animationTimingFunction
.
animationTimingFunction stepStart
stepEnd : Value { provides | stepEnd : Value.Supported }
The step-end
value used for properties such as animationTimingFunction
.
animationTimingFunction stepEnd
steps : Basics.Int -> Value { provides | steps : Value.Supported }
Produces the steps()
value used for properties such as animationTimingFunction
.
animationTimingFunction (steps 3)
steps2 : Basics.Int -> Value { jumpStart : Value.Supported, jumpEnd : Value.Supported, jumpNone : Value.Supported, jumpBoth : Value.Supported, start : Value.Supported, end : Value.Supported } -> Value { provides | steps : Value.Supported }
Produces the steps()
value used for properties such as animationTimingFunction
.
animationTimingFunction (steps2 3 jumpStart)
jumpStart : Value { provides | jumpStart : Value.Supported }
The jump-start
value used for functions like step2
steps2 3 jumpStart
jumpEnd : Value { provides | jumpEnd : Value.Supported }
The jump-end
value used for functions like step2
steps2 3 jumpEnd
jumpNone : Value { provides | jumpNone : Value.Supported }
The jump-none
value used for functions like step2
steps2 3 jumpNone
jumpBoth : Value { provides | jumpBoth : Value.Supported }
The jump-both
value used for functions like step2
steps2 3 jumpBoth
infinite : Value { provides | infinite : Value.Supported }
The infinite
value used for functions like animationIterationCount
animationIterationCount infinite
reverse : Value { provides | reverse : Value.Supported }
The reverse
value used for functions like animationDirection
animationDirection reverse
alternate : Value { provides | alternate : Value.Supported }
The alternate
value used for functions like animationDirection
animationDirection alternate
alternateReverse : Value { provides | alternateReverse : Value.Supported }
The alternate-reverse
value used for functions like animationDirection
animationDirection alternateReverse
running : Value { provides | running : Value.Supported }
The running
value used for functions like animationPlayState
animationPlayState running
paused : Value { provides | paused : Value.Supported }
The paused
value used for functions like animationPlayState
animationPlayState paused
forwards : Value { provides | forwards : Value.Supported }
The forwards
value used for functions like animationFillMode
animationFillMode forwards
opacity : BaseValue { num : Value.Supported, zero : Value.Supported, calc : Value.Supported, pct : Value.Supported } -> Style
Sets opacity
opacity (num 0.5)
opacity (num 1.0)
opacity zero
visibility : BaseValue { visible : Value.Supported, hidden : Value.Supported, collapse : Value.Supported } -> Style
Sets visibility
visibility visible
visibility hidden
visibility collapse
mixBlendMode : BaseValue BlendMode -> Style
Sets mix-blend-mode
mixBlendMode multiply
mixBlendMode saturation
imageRendering : BaseValue { auto : Value.Supported, crispEdges : Value.Supported, pixelated : Value.Supported } -> Style
Sets image-rendering
imageRendering auto
imageRendering crispEdges
imageRendering pixelated
crispEdges : Value { provides | crispEdges : Value.Supported }
Sets crisp-edges
value for usage with imageRendering
.
imageRendering crispEdges
pixelated : Value { provides | pixelated : Value.Supported }
Sets pixelated
value for usage with imageRendering
.
imageRendering pixelated
clipPath : BaseValue (BasicShapeSupported { none : Value.Supported, url : Value.Supported, marginBox : Value.Supported, borderBox : Value.Supported, paddingBox : Value.Supported, contentBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported }) -> Style
The 1-argument variant of the
clip-path
property.
clipPath marginBox
clipPath inherit
clipPath (circle (pct 2))
clipPath (url "test-img.svg")
clipPath2 marginBox (circleAt2 farthestSide left top)
maskBorderMode : BaseValue { luminance : Value.Supported, alpha : Value.Supported } -> Style
Sets the mask-border-mode
property.
maskBorderMode inherit
maskBorderMode luminance
maskBorderRepeat : BaseValue { stretch : Value.Supported, repeat : Value.Supported, round_ : Value.Supported, space : Value.Supported } -> Style
Sets the 1-argument variant of the mask-border-repeat
property.
maskBorderRepeat stretch
maskBorderRepeat revert
maskBorderRepeat2 stretch repeat
maskBorderRepeat2 : Value { stretch : Value.Supported, repeat : Value.Supported, round_ : Value.Supported, space : Value.Supported } -> Value { stretch : Value.Supported, repeat : Value.Supported, round_ : Value.Supported, space : Value.Supported } -> Style
Sets the 2-argument variant of the mask-border-repeat
property.
maskBorderRepeat2 stretch repeat
maskBorderOutset : BaseValue (LengthSupported { num : Value.Supported }) -> Style
Sets the 1-argument variant of the mask-border-outset
property.
maskBorderOutset revert
maskBorderOutset (num 2.5)
maskBorderOutset (px 30)
-- top+bottom | left+right
maskBorderOutset2 (px 30) (px 10)
-- top | left+right | bottom
maskBorderOutset3 (px 12) (px 16) (px 4)
-- top | right | bottom | left
maskBorderOutset4 (rem 2) (rem 1) (rem 3) (rem 4)
maskBorderOutset2 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style
Sets the 2-argument variant of the mask-border-outset
property.
-- top+bottom | left+right
maskBorderOutset2 (px 30) (px 10)
maskBorderOutset3 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style
Sets the 3-argument variant of the mask-border-outset
property.
-- top | left+right | bottom
maskBorderOutset3 (px 12) (px 16) (px 4)
maskBorderOutset4 : Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Value (LengthSupported { num : Value.Supported }) -> Style
Sets the 4-argument variant of the mask-border-outset
property.
-- top | right | bottom | left
maskBorderOutset4 (rem 2) (rem 1) (rem 3) (rem 4)
maskBorderSlice : BaseValue { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style
Sets the 1-argument variant of the mask-border-slice
property.
maskBorderSlice initial
maskBorderSlice (num 2.5)
maskBorderSlice (rem 3)
-- top+bottom | left+right
maskBorderSlice2 (num 30) (pct 10)
-- top | left+right | bottom
maskBorderSlice3 (px 12) (num 2) fill_
-- top | right | bottom | left
maskBorderSlice4 (rem 2) (rem 1) fill_ (rem 4)
maskBorderSlice2 : Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style
Sets the 2-argument variant of the mask-border-slice
property.
-- top+bottom | left+right
maskBorderSlice2 (num 30) (pct 10)
maskBorderSlice3 : Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style
Sets the 3-argument variant of the mask-border-slice
property.
-- top | left+right | bottom
maskBorderSlice3 (px 12) (num 2) fill_
maskBorderSlice4 : Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Value { num : Value.Supported, pct : Value.Supported, fill_ : Value.Supported } -> Style
Sets the 4-argument variant of the mask-border-slice
property.
-- top | right | bottom | left
maskBorderSlice4 (rem 2) (rem 1) fill_ (rem 4)
maskBorderWidth : BaseValue (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style
Sets the 1-argument variant of the mask-border-width
property.
maskBorderWidth initial
maskBorderWidth auto
maskBorderWidth (rem 3)
-- top+bottom | left+right
maskBorderWidth2 (num 30) (pct 10)
-- top | left+right | bottom
maskBorderWidth3 (px 12) auto (px 20)
-- top | right | bottom | left
maskBorderWidth4 (rem 2) (rem 1) auto (rem 4)
maskBorderWidth2 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style
Sets the 2-argument variant of the mask-border-width
property.
-- top+bottom | left+right
maskBorderWidth2 (num 30) (pct 10)
maskBorderWidth3 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style
Sets the 3-argument variant of the mask-border-width
property.
-- top | left+right | bottom
maskBorderWidth3 (px 12) auto (px 20)
maskBorderWidth4 : Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Value (LengthSupported { auto : Value.Supported, pct : Value.Supported, num : Value.Supported }) -> Style
Sets the 4-argument variant of the mask-border-width
property.
-- top | right | bottom | left
maskBorderWidth4 (rem 2) (rem 1) auto (rem 4)
maskClip : BaseValue { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported, noClip : Value.Supported } -> Style
The 1-argument variant of the mask-clip
property.
This does not support non-standard keyword values such as border
.
maskClip contentBox
maskClip revert
maskClipMany [contentBox, marginBox, noClip]
maskClipMany : List (Value { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, viewBox : Value.Supported, noClip : Value.Supported }) -> Style
The multi-argument variant of the mask-clip
property.
This does not support non-standard keyword values such as border
.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
maskClipMany [contentBox, marginBox, noClip]
maskClipMany [] -- mask-clip: unset;
maskComposite : BaseValue { add : Value.Supported, subtract : Value.Supported, intersect : Value.Supported, exclude : Value.Supported } -> Style
The mask-composite
property.
maskComposite add
maskComposite revert
maskMode : BaseValue { alpha : Value.Supported, luminance : Value.Supported, matchSource : Value.Supported } -> Style
The 1-argument variant of the mask-mode
property.
maskMode inherit
maskMode alpha
maskModeMany [alpha, luminance, alpha, matchSource]
maskModeMany : List (Value { alpha : Value.Supported, luminance : Value.Supported, matchSource : Value.Supported }) -> Style
The multi-argument variant of the mask-mode
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
maskModeMany [alpha, luminance, alpha, matchSource]
maskModeMany [] -- mask-mode: unset;
maskOrigin : BaseValue { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported } -> Style
The 1-argument variant of the mask-origin
property.
maskOrigin inherit
maskOrigin contentBox
maskOriginMany [paddingBox, borderBox]
maskOriginMany : List (Value { contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported, marginBox : Value.Supported }) -> Style
The multi-argument variant of the mask-origin
property.
If you give an empty list, the value will be unset
. This is to make it impossible for it
to have no values in the output.
maskOriginMany [paddingBox, borderBox]
maskOriginMany [] -- mask-origin: unset;
maskPosition : BaseValue { top_ : Value.Supported, bottom_ : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported } -> Style
The 1-argument variant of the mask-position
property.
maskPosition top_
maskPosition inherit
maskRepeat : BaseValue { repeat : Value.Supported, repeatX : Value.Supported, repeatY : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style
The 1-argument variant of the mask-repeat
property.
maskRepeat revert
maskRepeat repeatX
maskRepeat Css.round
maskRepeat2 repeat space
maskRepeat2 : Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style
The 2-argument variant of the mask-repeat
property.
maskRepeat2 repeat space
maskSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, cover : Value.Supported, contain_ : Value.Supported }) -> Style
The 1-argument variant of the mask-size
property.
maskSize auto
maskSize (pct 20)
maskSize (rem 200)
maskSize2 auto (pct 10)
maskSize2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
The 2-argument variant of the mask-size
property.
maskSize auto
maskSize (pct 20)
maskSize (rem 200)
maskSize2 auto (pct 10)
maskType : BaseValue { luminance : Value.Supported, alpha : Value.Supported } -> Style
Sets the mask-type
property.
maskType inherit
maskType luminance
noClip : Value { provides | noClip : Value.Supported }
Sets no-clip
value for usage with maskClip
.
maskClip noClip
add : Value { provides | add : Value.Supported }
Sets add
value for usage with maskComposite
.
maskComposite add
subtract : Value { provides | subtract : Value.Supported }
Sets subtract
value for usage with maskComposite
.
maskComposite subtract
intersect : Value { provides | intersect : Value.Supported }
Sets intersect
value for usage with maskComposite
.
maskComposite intersect
exclude : Value { provides | exclude : Value.Supported }
Sets exclude
value for usage with maskComposite
.
maskComposite exclude
alpha : Value { provides | alpha : Value.Supported }
Sets alpha
value for usage with maskMode
, maskType
and maskBorderMode
.
maskMode alpha
maskType alpha
maskBorderMode alpha
luminance : Value { provides | luminance : Value.Supported }
Sets luminance
value for usage with maskMode
, maskType
and maskBorderMode
.
maskMode luminance
maskType luminance
maskBorderMode luminance
filter : BaseValue (FilterFunctionSupported { url : Value.Supported, none : Value.Supported }) -> Style
The filter
property.
This single-argument version lets you use global value keywords, as
well as none
, URLs to SVG filters and single filter functions.
If you want to stack filter functions, use filterMany
.
filter <| blur (px 6)
filter <| grayscale (pct 60)
filter <| url "thing.svg#filter1"
filter none
filter inherit
filterMany [] -- unset
filterMany [ invert (pct 70), sepia(pct 50) ]
filterMany : List (Value (FilterFunctionSupported { url : Value.Supported })) -> Style
The filter
property.
This multi-argument version lets you stack multiple filter functions and URLs to SVG filters.
An empty list will create an unset
value.
filterMany [] -- unset
filterMany [ invert (pct 70), sepia(pct 50) ]
backdropFilter : BaseValue (FilterFunctionSupported { url : Value.Supported, none : Value.Supported }) -> Style
The backdrop-filter
property.
This single-argument version lets you use global value keywords, as
well as none
, URLs to SVG filters and single filter functions.
If you want to stack filter functions, use backdropFilterMany
.
backdropFilter <| blur (px 6)
backdropFilter <| grayscale (pct 60)
backdropFilter <| url "thing.svg#filter1"
backdropFilter none
backdropFilter inherit
backdropFilterMany [] -- unset
backdropFilterMany [ invert (pct 70), sepia(pct 50) ]
paintOrder : BaseValue { normal : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Style
The paint-order
property.
This one-argument version indicates which parts of text and shape graphics are painted first, followed by the other two in their relative default order.
paintOrder normal -- normal paint order.
paintOrder2 fill_ stroke -- fill, stroke, then markers.
paintOrder3 markers stroke fill_ -- markers, stroke, then fill.
paintOrder2 : Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Style
The paint-order
property.
This two-argument version indicates which parts of text and shape graphics are painted first, followed by the other remaining one.
paintOrder2 fill_ stroke -- fill, stroke, then markers.
paintOrder3 : Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Value { fill_ : Value.Supported, stroke : Value.Supported, markers : Value.Supported } -> Style
The paint-order
property.
This three-argument version explicitly indicates in which order should all the parts of text and shape graphics be painted.
paintOrder3 markers stroke fill_ -- markers, stroke, then fill.
bleed : BaseValue (LengthSupported { auto : Value.Supported }) -> Style
Sets bleed
bleed auto
bleed (pt 10)
fill : BaseValue (ColorSupported { url : Value.Supported }) -> Style
Sets fill
Note: fill
also accepts the patterns of SVG shapes that are defined inside of a defs
element.
fill (hex "#60b5cc")
fill (rgb 96 181 204)
fill (rgba 96 181 204 0.5)
fill (url "#pattern")
strokeDasharray : BaseValue (LengthSupported { num : Value.Supported, pct : Value.Supported }) -> Style
Sets stroke-dasharray
strokeDasharray (num 2)
strokeDasharray (num 2.5)
strokeDasharray (em 2)
strokeDasharray (pct 15)
strokeDashoffset : BaseValue { zero : Value.Supported, calc : Value.Supported, num : Value.Supported, pct : Value.Supported } -> Style
Sets stroke-dashoffset
strokeDashoffset zero
strokeDashoffset (num 100)
strokeDashoffset (pct 25)
strokeWidth : BaseValue (LengthSupported { num : Value.Supported, pct : Value.Supported }) -> Style
Sets stroke-width
strokeWidth zero
strokeWidth (px 2)
strokeWidth (em 2)
strokeWidth (num 2)
strokeWidth (num 2.5)
strokeWidth (pct 15)
strokeAlign : BaseValue { center : Value.Supported, inset_ : Value.Supported, outset : Value.Supported } -> Style
Sets stroke-align
Note: This function accepts inset_
rather than inset
because
inset
is already a property function.
strokeAlign center
strokeAlign inset_
strokeAlign outset
strokeColor : BaseValue Color -> Style
Sets stroke-color
strokeColor (rgb 0 100 44)
strokeColor (hex "#FF9E2C")
strokeImage : BaseValue { url : Value.Supported, none : Value.Supported } -> Style
Sets stroke-image
strokeImage (url "#svg-pattern")
strokeImage (url "http://www.example.com/chicken.jpg")
strokeMiterlimit : BaseValue { num : Value.Supported } -> Style
Sets stroke-miterlimit
strokeMiterlimit (num 4)
strokeOpacity : BaseValue { num : Value.Supported } -> Style
Sets stroke-opacity
strokeOpacity (num 0.5)
strokePosition : BaseValue (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Style
Sets stroke-position
.
strokePosition left_
strokePosition (px 45)
strokePosition
sets the horizontal direction. If you need the vertical
direction instead, use strokePosition2
like this:
strokePosition zero (px 45)
If you need to set the offsets from the right or bottom, use
strokePosition4
like this:
strokePosition4 right_ (px 20) bottom_ (pct 25)
strokePosition2 : Value (LengthSupported { pct : Value.Supported, left_ : Value.Supported, right_ : Value.Supported, center : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, top_ : Value.Supported, bottom_ : Value.Supported, center : Value.Supported }) -> Style
Sets stroke-position
.
strokePosition2 left_ top_
strokePosition2 (px 45) (pct 50)
strokePosition2
sets both the horizontal and vertical directions (in that
order, same as CSS.) If you need only the horizontal, you can use
strokePosition
instead:
strokePosition left_
If you need to set the offsets from the right or bottom, use
strokePosition4
like this:
strokePosition4 right_ (px 20) bottom_ (pct 25)
strokePosition4 : Value { left_ : Value.Supported, right_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Value { top_ : Value.Supported, bottom_ : Value.Supported } -> Value (LengthSupported { pct : Value.Supported }) -> Style
Sets stroke-position
.
strokePosition4 right_ (px 20) bottom_ (pct 30)
The four-argument form of stroke-position alternates sides and offets. So the example above would position the stroke-image 20px from the right, and 30% from the bottom.
See also strokePosition
for horizontal alignment and
strokePosition2
for horizontal (from left) and
vertical (from top) alignment.
strokeRepeat : BaseValue { repeat : Value.Supported, repeatX : Value.Supported, repeatY : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style
Sets stroke-repeat
strokeRepeat repeat
strokeRepeat repeatX
If you need to set horizontal and vertical direction separately, see
strokeRepeat2
strokeRepeat2 : Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Value { repeat : Value.Supported, space : Value.Supported, round_ : Value.Supported, noRepeat : Value.Supported } -> Style
Sets stroke-repeat
along the horizontal axis, then the vertical axis.
strokeRepeat2 repeat space
strokeRepeat2 space round
If you only need to set one value for both, see
strokeRepeat
instead.
strokeSize : BaseValue (LengthSupported { pct : Value.Supported, auto : Value.Supported, cover : Value.Supported }) -> Style
Sets stroke-size
.
strokeSize cover
strokeSize (px 400)
If you give a length value, it will be used for the width. The height will be set
proportional to the size of the stroke-image
. If you
need to set both width and height explicitly, use
strokeImage2
instead.
strokeSize2 : Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Value (LengthSupported { pct : Value.Supported, auto : Value.Supported }) -> Style
Sets stroke-size
.
strokeSize2 (px 300) (px 100)
strokeSize2 auto (px 400)
If you only want to set the width, use strokeImage
instead.
strokeDashCorner : BaseValue (LengthSupported { none : Value.Supported, pct : Value.Supported, auto : Value.Supported, cover : Value.Supported }) -> Style
Sets stroke-dash-corner
.
strokeDashCorner none
strokeDashCorner (px 10)
strokeDashCorner (em 5)
strokeLinecap : BaseValue { butt : Value.Supported, square : Value.Supported, round_ : Value.Supported } -> Style
Sets stroke-linecap
strokeLinecap butt
strokeLinecap square
strokeLinecap round
butt : Value { provides | butt : Value.Supported }
A butt
value for the strokeLinecap
property.
strokeLinecap butt
square : Value { provides | square : Value.Supported }
The square
value used by properties such as strokeLinecap
,
listStyle
,
and listStyleType
.
strokeLinecap square
listStyleType square
strokeBreak : BaseValue { boundingBox : Value.Supported, slice : Value.Supported, clone : Value.Supported } -> Style
Sets stroke-break
strokeBreak boundingBox
strokeBreak slice
strokeBreak clone
boundingBox : Value { provides | boundingBox : Value.Supported }
A boundingBox
value for the strokeBreak
property.
strokeBreak boundingBox
slice : Value { provides | slice : Value.Supported }
A slice
value for the strokeBreak
and boxDecorationBreak
properties.
strokeBreak slice
boxDecorationbreak clone
clone : Value { provides | clone : Value.Supported }
A clone
value for the strokeBreak
and boxDecorationBreak
properties.
strokeBreak clone
boxDecorationBreak clone
strokeOrigin : BaseValue { matchParent : Value.Supported, fillBox : Value.Supported, strokeBox : Value.Supported, contentBox : Value.Supported, paddingBox : Value.Supported, borderBox : Value.Supported } -> Style
Sets stroke-origin
strokeOrign matchParent
strokeOrign fillBox
strokeOrign strokeBox
strokeOrign contentBox
strokeOrign paddingBox
strokeOrign borderBox
strokeLinejoin : BaseValue { crop : Value.Supported, arcs : Value.Supported, miter : Value.Supported } -> Style
Sets stroke-linejoin
.
strokeLinejoin crop
strokeLinejoin arcs
strokeLinejoin miter
Note: if you only want to specifiy the rendering of the cap of a corner you need to use strokeLinejoin2
and set it's first value to miter
like so: strokeLinejoin2 miter bevel
.
strokeLinejoin2 : Value { crop : Value.Supported, arcs : Value.Supported, miter : Value.Supported } -> Value { bevel : Value.Supported, round_ : Value.Supported, fallback : Value.Supported } -> Style
Sets stroke-linejoin
.
strokeLinejoin crop bevel
strokeLinejoin arcs round
strokeLinejoin miter fallback
crop : Value { provides | crop : Value.Supported }
Sets crop
value for usage with strokeLinejoin
.
strokeLinejoin crop
arcs : Value { provides | arcs : Value.Supported }
Sets arcs
value for usage with strokeLinejoin
.
strokeLinejoin arcs
miter : Value { provides | miter : Value.Supported }
Sets miter
value for usage with strokeLinejoin
.
strokeLinejoin miter
bevel : Value { provides | bevel : Value.Supported }
Sets bevel
value for usage with strokeLinejoin
.
strokeLinejoin miter bevel
strokeDashJustify : BaseValue { none : Value.Supported, stretch : Value.Supported, compress : Value.Supported, dashes : Value.Supported, gaps : Value.Supported } -> Style
Sets stroke-dash-justify
.
strokeDashJustify none
strokeDashJustify stretch
strokeDashJustify compress
strokeDashJustify dashes
strokeDashJustify gaps
compress : Value { provides | compress : Value.Supported }
Sets compress
value for usage with strokeDashJustify
.
strokeDashJustify compress
dashes : Value { provides | dashes : Value.Supported }
Sets dashes
value for usage with strokeDashJustify
.
strokeDashJustify dashes
lineClamp : BaseValue { none : Value.Supported, zero : Value.Supported, int : Value.Supported } -> Style
Sets lineClamp
lineClamp none
lineClamp zero
lineClamp (int 3)