StyleProps

com.raquo.laminar.defs.styles.StyleProps
trait StyleProps

Attributes

Graph
Supertypes
class Object
trait Matchable
class Any
Known subtypes
trait Laminar

Members list

Type members

Types

protected type DSP[V] = DerivedStyleProp[V]
protected type SS = StyleSetter

Value members

Concrete methods

protected def alignContentStyle(key: String): StyleProp[String] & AlignContent
protected def autoStyle[V](key: String): StyleProp[V] & Auto
protected def backfaceVisibilityStyle(key: String): StyleProp[String] & BackfaceVisibility
protected def backgroundAttachmentStyle(key: String): StyleProp[String] & BackgroundAttachment
protected def backgroundSizeStyle(key: String): StyleProp[String] & BackgroundSize
protected def borderCollapseStyle(key: String): StyleProp[String] & BorderCollapse
protected def boxSizingStyle(key: String): StyleProp[String] & BoxSizing
protected def clearStyle(key: String): StyleProp[String] & Clear
protected def colorStyle(key: String): StyleProp[String] & Color & Color[SS, DSP]
protected def colorUrlStyle(key: String): StyleProp[String] & Color & Color[SS, DSP] & Url[DSP]
protected def cursorStyle(key: String): StyleProp[String] & Cursor
protected def directionStyle(key: String): StyleProp[String] & Direction
protected def displayStyle(key: String): StyleProp[String] & Display
protected def doubleStyle(key: String): StyleProp[Double]
protected def emptyCellsStyle(key: String): StyleProp[String] & EmptyCells
protected def flexDirectionStyle(key: String): StyleProp[String] & FlexDirection
protected def flexPositionStyle(key: String): StyleProp[String] & FlexPosition
protected def flexWrapStyle(key: String): StyleProp[String] & FlexWrap
protected def floatStyle(key: String): StyleProp[String] & Float
protected def fontSizeStyle(key: String): StyleProp[String] & FontSize
protected def fontStyleStyle(key: String): StyleProp[String] & FontStyle
protected def fontWeightStyle(key: String): StyleProp[String] & FontWeight
protected def intStyle(key: String): StyleProp[Int]
protected def justifyContentStyle(key: String): StyleProp[String] & JustifyContent
protected def lengthAutoStyle(key: String): StyleProp[String] & Auto & Length[DSP, Int]
protected def lengthNormalStyle(key: String): StyleProp[String] & Normal & Length[DSP, Int]
protected def lengthStyle(key: String): StyleProp[String] & Length[DSP, Int]
protected def lineStyle(key: String): StyleProp[String] & Line
protected def listStylePositionStyle(key: String): StyleProp[String] & ListStylePosition
protected def listStyleTypeStyle(key: String): StyleProp[String] & ListStyleType
protected def maxLengthStyle(key: String): StyleProp[String] & MinMaxLength & None
protected def minLengthStyle(key: String): StyleProp[String] & MinMaxLength & Auto
protected def mixBlendModeStyle(key: String): StyleProp[String] & MixBlendMode
protected def noneStyle[V](key: String): StyleProp[V] & None
protected def normalStyle[V](key: String): StyleProp[V] & Normal
protected def overflowStyle(key: String): StyleProp[String] & Overflow
protected def overflowWrapStyle(key: String): StyleProp[String] & OverflowWrap
protected def paddingBoxSizingStyle(key: String): StyleProp[String] & PaddingBoxSizing
protected def pageBreakStyle(key: String): StyleProp[String] & PageBreak
protected def pointerEventsStyle(key: String): StyleProp[String] & PointerEvents
protected def positionStyle(key: String): StyleProp[String] & Position
protected def stringStyle(key: String): StyleProp[String]
def styleProp[V](name: String): StyleProp[V]

Create custom CSS property

Create custom CSS property

Type parameters

V
  • type of values recognized by JS for this property, e.g. Int Note: String is always allowed regardless of the type you put here. If unsure, use String type as V.

Value parameters

name
  • name of CSS property, e.g. "font-weight"

Attributes

protected def tableLayoutStyle(key: String): StyleProp[String] & TableLayout
protected def textAlignStyle(key: String): StyleProp[String] & TextAlign
protected def textDecorationStyle(key: String): StyleProp[String] & TextDecoration
protected def textOverflowStyle(key: String): StyleProp[String] & TextOverflow
protected def textTransformStyle(key: String): StyleProp[String] & TextTransform
protected def textUnderlinePositionStyle(key: String): StyleProp[String] & TextUnderlinePosition
protected def timeStyle(key: String): StyleProp[String] & Time[DSP]
protected def urlNoneStyle(key: String): StyleProp[String] & None & Url[DSP]
protected def urlStyle(key: String): StyleProp[String] & Url[DSP]
protected def verticalAlignStyle(key: String): StyleProp[String] & VerticalAlign
protected def visibilityStyle(key: String): StyleProp[String] & Visibility
protected def whiteSpaceStyle(key: String): StyleProp[String] & WhiteSpace
protected def wordBreakStyle(key: String): StyleProp[String] & WordBreak

Concrete fields

lazy val alignContent: StyleProp[String] & AlignContent

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

The CSS align-content property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis.

Attributes

See also
lazy val alignItems: StyleProp[String] & FlexPosition

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.

Attributes

See also
lazy val alignSelf: StyleProp[String] & FlexPosition

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

The align-self CSS property overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.

Attributes

See also
lazy val all: StyleProp[String]

The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.

The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another stylesheet origin.

Note: IE does not support this property

Attributes

See also
lazy val animation: StyleProp[String]

The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction.

The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count and animation-direction.

Attributes

See also
lazy val animationDelay: StyleProp[String] & Time[DSP]

The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.

The animation-delay CSS property specifies when the animation should start. This lets the animation sequence begin some time after it's applied to an element.

A value of 0s, which is the default value of the property, indicates that the animation should begin as soon as it's applied. Otherwise, the value specifies an offset from the moment the animation is applied to the element; animation will begin that amount of time after being applied.

Specifying a negative value for the animation delay causes the animation to begin executing immediately. However, it will appear to have begun executing partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.

If you specify a negative value for the animation delay, but the starting value is implicit, the starting value is taken from the moment the animation is applied to the element.

Attributes

See also
lazy val animationDirection: StyleProp[String]

The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.

The animation-direction CSS property indicates whether the animation should play in reverse on alternate cycles.

Attributes

See also
lazy val animationDuration: StyleProp[String] & Time[DSP]

The animation-duration CSS property specifies the Length of time that an animation should take to complete one cycle.

The animation-duration CSS property specifies the Length of time that an animation should take to complete one cycle.

A value of 0s, which is the default value, indicates that no animation should occur.

Attributes

See also
lazy val animationFillMode: StyleProp[String]

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

The animation-fill-mode CSS property specifies how a CSS animation should apply styles to its target before and after it is executing.

Attributes

See also

The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.

The animation-iteration-count CSS property defines the number of times an animation cycle should be played before stopping.

Attributes

See also
lazy val animationName: StyleProp[String]

The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

The animation-name CSS property specifies a list of animations that should be applied to the selected element. Each name indicates a @keyframes at-rule that defines the property values for the animation sequence.

Attributes

See also
lazy val animationPlayState: StyleProp[String]

The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.

The animation-play-state CSS property determines whether an animation is running or paused. You can query this property's value to determine whether or not the animation is currently running; in addition, you can set its value to pause and resume playback of an animation.

Resuming a paused animation will start the animation from where it left off at the time it was paused, rather than starting over from the beginning of the animation sequence.

Attributes

See also

The CSS animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function>.

The CSS animation-timing-function property specifies how a CSS animation should progress over the duration of each cycle. The possible values are one or several <timing-function>.

For keyframed animations, the timing function applies between keyframes rather than over the entire animation. In other words, the timing function is applied at the start of the keyframe and at the end of the keyframe.

An animation timing function defined within a keyframe block applies to that keyframe; otherwise. If no timing function is specified for the keyframe, the timing function specified for the overall animation is used.

Attributes

See also

The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

The CSS backface-visibility property determines whether or not the back face of the element is visible when facing the user. The back face of an element always is a transparent background, letting, when visible, a mirror image of the front face be displayed.

Attributes

See also
lazy val background: StyleProp[String] & Color & Color[SS, DSP] & Url[DSP]

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

The background CSS property is a shorthand for setting the individual background values in a single place in the style sheet. background can be used to set the values for one or more of: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.

Attributes

See also

If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

Attributes

See also

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.

If there is no background image, this property has only visual effect when the border has transparent regions (because of border-style) or partially opaque regions; otherwise the border covers up the difference.

Attributes

See also
lazy val backgroundColor: StyleProp[String] & Color & Color[SS, DSP]

The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.

The background-color CSS property sets the background color of an element, either through a color value or the keyword transparent.

Attributes

See also
lazy val backgroundImage: StyleProp[String] & Url[DSP]

The background-image CSS property sets one or more background images on an element. The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.

The background-image CSS property sets one or more background images on an element. The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.

Attributes

See also

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.

Note that background-origin is ignored when background-attachment is fixed.

Attributes

See also
lazy val backgroundPosition: StyleProp[String]

The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

Attributes

See also
lazy val backgroundRepeat: StyleProp[String]

The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.

The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both, or not repeated at all. When the repetition of the image tiles doesn't let them exactly cover the background, the way adjustments are done can be controlled by the author: by default, the last image is clipped, but the different tiles can instead be re-sized, or space can be inserted between the tiles.

Attributes

See also

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

The background-size CSS property specifies the size of the background images. The size of the image can be fully constrained or only partially in order to preserve its intrinsic ratio.

Attributes

See also
lazy val border: StyleProp[String]

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width, border-style, border-color.

Attributes

See also
lazy val borderBottom: StyleProp[String]

The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.

The border-bottom CSS property is a shorthand that sets the values of border-bottom-color, border-bottom-style, and border-bottom-width. These properties describe the bottom border of elements.

Attributes

See also
lazy val borderBottomColor: StyleProp[String] & Color & Color[SS, DSP]

The border-bottom-color CSS property sets the color of the bottom border of an element.

The border-bottom-color CSS property sets the color of the bottom border of an element.

Attributes

See also
lazy val borderBottomLeftRadius: StyleProp[String] & Length[DSP, Int]

The border-bottom-left-radius CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

The border-bottom-left-radius CSS property sets the rounding of the bottom-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

Attributes

See also
lazy val borderBottomRightRadius: StyleProp[String] & Length[DSP, Int]

The border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

The border-bottom-right-radius CSS property sets the rounding of the bottom-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

Attributes

See also
lazy val borderBottomStyle: StyleProp[String] & Line

The border-bottom-style CSS property sets the line style of the bottom border of a box.

The border-bottom-style CSS property sets the line style of the bottom border of a box.

Attributes

See also
lazy val borderBottomWidth: StyleProp[String] & Length[DSP, Int]

The border-bottom-width CSS property sets the line width of the bottom border of a box.

The border-bottom-width CSS property sets the line width of the bottom border of a box.

Attributes

See also

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

Attributes

See also
lazy val borderColor: StyleProp[String] & Color & Color[SS, DSP]

The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color.

The border-color CSS property is a shorthand for setting the color of the four sides of an element's border: border-top-color, border-right-color, border-bottom-color, border-left-color.

Attributes

See also
lazy val borderImage: StyleProp[String] & Url[DSP]

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

The border-image CSS property draws an image around a given element. It replaces the element's regular border.

Attributes

See also
lazy val borderLeft: StyleProp[String]

The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.

The border-left CSS property is a shorthand that sets the values of border-left-color, border-left-style, and border-left-width. These properties describe the left border of elements.

Attributes

See also
lazy val borderLeftColor: StyleProp[String] & Color & Color[SS, DSP]

The border-left-color CSS property sets the color of the left border of an element.

The border-left-color CSS property sets the color of the left border of an element.

Attributes

See also
lazy val borderLeftStyle: StyleProp[String] & Line

The border-left-style CSS property sets the line style of the left border of a box.

The border-left-style CSS property sets the line style of the left border of a box.

Attributes

See also
lazy val borderLeftWidth: StyleProp[String] & Length[DSP, Int]

The border-left-width CSS property sets the line width of the left border of a box.

The border-left-width CSS property sets the line width of the left border of a box.

Attributes

See also
lazy val borderRadius: StyleProp[String] & Length[DSP, Int]

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

The border-radius CSS property allows Web authors to define how rounded border corners are. The curve of each corner is defined using one or two radii, defining its shape: circle or ellipse.

Attributes

See also
lazy val borderRight: StyleProp[String]

The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.

The border-right CSS property is a shorthand that sets the values of border-right-color, border-right-style, and border-right-width. These properties describe the right border of elements.

Attributes

See also
lazy val borderRightColor: StyleProp[String] & Color & Color[SS, DSP]

The border-right-color CSS property sets the color of the right border of an element.

The border-right-color CSS property sets the color of the right border of an element.

Attributes

See also
lazy val borderRightStyle: StyleProp[String] & Line

The border-right-style CSS property sets the line style of the right border of a box.

The border-right-style CSS property sets the line style of the right border of a box.

Attributes

See also
lazy val borderRightWidth: StyleProp[String] & Length[DSP, Int]

The border-right-width CSS property sets the line width of the right border of a box.

The border-right-width CSS property sets the line width of the right border of a box.

Attributes

See also
lazy val borderSpacing: StyleProp[String] & Length[DSP, Int]

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

The border-spacing CSS property specifies the distance between the borders of adjacent cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

Attributes

See also
lazy val borderStyle: StyleProp[String] & Line

The border-style CSS property is a shorthand property for setting the line style for all four sides of the element's border.

The border-style CSS property is a shorthand property for setting the line style for all four sides of the element's border.

Attributes

See also
lazy val borderTop: StyleProp[String]

The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.

The border-top CSS property is a shorthand that sets the values of border-top-color, border-top-style, and border-top-width. These properties describe the top border of elements.

Attributes

See also
lazy val borderTopColor: StyleProp[String] & Color & Color[SS, DSP]

The border-top-color CSS property sets the color of the top border of an element.

The border-top-color CSS property sets the color of the top border of an element.

Attributes

See also
lazy val borderTopLeftRadius: StyleProp[String] & Length[DSP, Int]

The border-top-left-radius CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

The border-top-left-radius CSS property sets the rounding of the top-left corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

Attributes

See also
lazy val borderTopRightRadius: StyleProp[String] & Length[DSP, Int]

The border-top-right-radius CSS property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

The border-top-right-radius CSS property sets the rounding of the top-right corner of the element. The rounding can be a circle or an ellipse, or if one of the value is 0 no rounding is done and the corner is square.

Attributes

See also
lazy val borderTopStyle: StyleProp[String] & Line

The border-top-style CSS property sets the line style of the top border of a box.

The border-top-style CSS property sets the line style of the top border of a box.

Attributes

See also
lazy val borderTopWidth: StyleProp[String] & Length[DSP, Int]

The border-top-width CSS property sets the line width of the top border of a box.

The border-top-width CSS property sets the line width of the top border of a box.

Attributes

See also
lazy val borderWidth: StyleProp[String] & Length[DSP, Int]

The border-width CSS property is a shorthand property for setting the width for all four sides of the element's border.

The border-width CSS property is a shorthand property for setting the width for all four sides of the element's border.

Attributes

See also
lazy val bottom: StyleProp[String] & Auto & Length[DSP, Int]

The bottom CSS property participates in specifying the position of positioned elements.

The bottom CSS property participates in specifying the position of positioned elements.

For absolutely positioned elements, that is those with position: absolute or position: fixed, it specifies the distance between the bottom margin edge of the element and the bottom edge of its containing block.

For relatively positioned elements, that is those with position: relative, it specifies the distance the element is moved above its normal position.

However, the top property overrides the bottom property, so if top is not auto, the computed value of bottom is the negative of the computed value of top.

Attributes

See also
lazy val boxShadow: StyleProp[String]

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

The box-shadow CSS property describes one or more shadow effects as a comma-separated list. It allows casting a drop shadow from the frame of almost any element. If a border-radius is specified on the element with a box shadow, the box shadow takes on the same rounded corners. The z-ordering of multiple box shadows is the same as multiple text shadows (the first specified shadow is on top).

Attributes

See also
lazy val boxSizing: StyleProp[String] & BoxSizing

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

Attributes

See also
lazy val captionSide: StyleProp[String]

The caption-side CSS property positions the content of a table's caption on the specified side (top or bottom).

The caption-side CSS property positions the content of a table's caption on the specified side (top or bottom).

Attributes

See also
lazy val clear: StyleProp[String] & Clear

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

The clear property applies to both floating and non-floating elements.

Attributes

See also
lazy val clip: StyleProp[String]

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

The clip CSS property defines what portion of an element is visible. The clip property applies only to elements with position:absolute.

Attributes

See also
lazy val color: StyleProp[String] & Color & Color[SS, DSP]

The CSS color property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons.

The CSS color property sets the foreground color of an element's text content, and its decorations. It doesn't affect any other characteristic of the element; it should really be called text-color and would have been named so, save for historical reasons.

Attributes

See also
lazy val columnCount: StyleProp[Int] & Auto

The column-count CSS property describes the number of columns of the element.

The column-count CSS property describes the number of columns of the element.

Attributes

See also
lazy val columnFill: StyleProp[String]

The column-fill CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs.

The column-fill CSS property controls how contents are partitioned into columns. Contents are either balanced, which means that contents in all columns will have the same height or, when using auto, just take up the room the content needs.

Attributes

See also
lazy val columnGap: StyleProp[String] & Length[DSP, Int]

The column-gap CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element.

The column-gap CSS property sets the size of the gap between columns for elements which are specified to display as a multi-column element.

Attributes

See also
lazy val columnRule: StyleProp[String]

In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.

In multi-column layouts, the column-rule CSS property specifies a straight line, or "rule", to be drawn between each column. It is a convenient shorthand to avoid setting each of the individual column-rule-* properties separately : column-rule-width, column-rule-style and column-rule-color.

Attributes

See also
lazy val columnRuleColor: StyleProp[String] & Color & Color[SS, DSP]

The column-rule-color CSS property lets you set the color of the rule drawn between columns in multi-column layouts.

The column-rule-color CSS property lets you set the color of the rule drawn between columns in multi-column layouts.

Attributes

See also
lazy val columnRuleStyle: StyleProp[String] & Line

The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts.

The column-rule-style CSS property lets you set the style of the rule drawn between columns in multi-column layouts.

Attributes

See also
lazy val columnRuleWidth: StyleProp[String] & Length[DSP, Int]

The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.

The column-rule-width CSS property lets you set the width of the rule drawn between columns in multi-column layouts.

Attributes

See also
lazy val columnSpan: StyleProp[Int]

The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.

The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.

Attributes

See also
lazy val columnWidth: StyleProp[String] & Auto & Length[DSP, Int]

The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all Length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width

The column-width CSS property suggests an optimal column width. This is not a absolute value but a mere hint. Browser will adjust the width of the column around that suggested value, allowing to achieve scalable designs that fit different screen size. Especially in presence of the column-count CSS property which has precedence, to set an exact column width, all Length values must be specified. In horizontal text these are width, column-width, column-gap, and column-rule-width

Attributes

See also
lazy val columns: StyleProp[String]

The columns CSS property is a shorthand property allowing to set both the column-width and the column-count properties at the same time.

The columns CSS property is a shorthand property allowing to set both the column-width and the column-count properties at the same time.

Attributes

See also
lazy val contentCss: StyleProp[String] & None & Url[DSP]

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

The content CSS property is used with the ::before and ::after pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

Attributes

See also
lazy val counterIncrement: StyleProp[String]

The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the counter-reset CSS property.

The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the counter-reset CSS property.

Attributes

See also
lazy val counterReset: StyleProp[String]

The counter-reset CSS property is used to reset CSS Counters to a given value.

The counter-reset CSS property is used to reset CSS Counters to a given value.

Attributes

See also
lazy val cursor: StyleProp[String] & Cursor

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.

Attributes

See also
lazy val direction: StyleProp[String] & Direction

Set the direction CSS property to match the direction of the text: rtl for Hebrew or Arabic text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

Set the direction CSS property to match the direction of the text: rtl for Hebrew or Arabic text and ltr for other scripts. This is typically done as part of the document (e.g., using the dir attribute in HTML) rather than through direct use of CSS.

The property sets the base text direction of block-level elements and the direction of embeddings created by the unicode-bidi property. It also sets the default alignment of text and block-level elements and the direction that cells flow within a table row.

Unlike the dir attribute in HTML, the direction property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of the rows but not inside of the columns.

The direction and unicode-bidi properties are the two only properties which are not affected by the all shorthand.

Attributes

See also
lazy val display: StyleProp[String] & Display

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline.

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.

Attributes

See also
lazy val emptyCells: StyleProp[String] & EmptyCells

The empty-cells CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content.

The empty-cells CSS property specifies how user agents should render borders and backgrounds around cells that have no visible content.

Attributes

See also
lazy val flex: StyleProp[String]

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.

Attributes

See also
lazy val flexBasis: StyleProp[String] & Auto & Length[DSP, Int]

The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item. The property determines the size of the content-box unless specified otherwise using box-sizing.

The CSS flex-basis property specifies the flex basis which is the initial main size of a flex item. The property determines the size of the content-box unless specified otherwise using box-sizing.

Attributes

See also
lazy val flexDirection: StyleProp[String] & FlexDirection

The CSS flex-direction property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

The CSS flex-direction property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

Note that the value row and row-reverse are affected by the directionality of the flex container. If its dir attribute is ltr, row represents the horizontal axis oriented from the left to the right, and row-reverse from the right to the left; if the dir attribute is rtl, row represents the axis oriented from the right to the left, and row-reverse from the left to the right.

Attributes

See also
lazy val flexGrow: StyleProp[Double]

The CSS flex-grow property specifies the flex grow factor of a flex item.

The CSS flex-grow property specifies the flex grow factor of a flex item.

Default value is 0.

Attributes

See also
lazy val flexShrink: StyleProp[Double]

The CSS flex-shrink property specifies the flex shrink factor of a flex item.

The CSS flex-shrink property specifies the flex shrink factor of a flex item.

Default value is 1.

Attributes

See also
lazy val flexWrap: StyleProp[String] & FlexWrap

The CSS flex-wrap property specifies whether the children are forced into a single line or if the items can be flowed on multiple lines.

The CSS flex-wrap property specifies whether the children are forced into a single line or if the items can be flowed on multiple lines.

Attributes

See also
lazy val float: StyleProp[String] & Float

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.

Attributes

See also
lazy val font: StyleProp[String]

The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element's font to a system font, using specific keywords.

The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height and font-family, or a way to set the element's font to a system font, using specific keywords.

Attributes

See also
lazy val fontFamily: StyleProp[String]

The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded using the information provided by a @font-face at-rule.

The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded using the information provided by a @font-face at-rule.

Attributes

See also
lazy val fontFeatureSettings: StyleProp[String]

The font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts.

The font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts.

Attributes

See also
lazy val fontSize: StyleProp[String] & FontSize

The font-size CSS property specifies the size of the font – specifically the desired height of glyphs from the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of em and ex Length units.

The font-size CSS property specifies the size of the font – specifically the desired height of glyphs from the font. Setting the font size may, in turn, change the size of other items, since it is used to compute the value of em and ex Length units.

Attributes

See also
lazy val fontSizeAdjust: StyleProp[Double] & None

The font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).

The font-size-adjust CSS property sets the size of lower-case letters relative to the current font size (which defines the size of upper-case letters).

This is useful since the legibility of fonts, especially at small sizes, is determined more by the size of lowercase letters than by the size of capital letters. This can cause problems when the first-choice font-family is unavailable and its replacement has a significantly different aspect ratio (the ratio of the size of lowercase letters to the size of the font).

Note: As of Dec 2021, only Firefox supports this

Attributes

See also
lazy val fontStyle: StyleProp[String] & FontStyle

The font-style CSS property allows italic or oblique faces to be selected within a font-family.

The font-style CSS property allows italic or oblique faces to be selected within a font-family.

Attributes

See also
lazy val fontWeight: StyleProp[String] & FontWeight

The font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

The font-weight CSS property specifies the weight or boldness of the font. However, some fonts are not available in all weights; some are available only on normal and bold.

Numeric font weights for fonts that provide more than just normal and bold. If the exact weight given is unavailable, then 600-900 use the closest available darker weight (or, if there is none, the closest available lighter weight), and 100-500 use the closest available lighter weight (or, if there is none, the closest available darker weight). This means that for fonts that provide only normal and bold, 100-500 are normal, and 600-900 are bold.

Attributes

See also
lazy val height: StyleProp[String] & Auto & Length[DSP, Int]

The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.

The min-height and max-height properties override height.

Attributes

See also
lazy val isolation: StyleProp[String] & Auto

This property determines whether an element must create a new stacking context. It is especially helpful when used in conjunction with mix-blend-mode and z-index.

This property determines whether an element must create a new stacking context. It is especially helpful when used in conjunction with mix-blend-mode and z-index.

Allowed values: "isolate", "auto"

Attributes

See also

The CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with flex-grow different than 0, it will have no effect as there won't be any available space.

The CSS justify-content property defines how a browser distributes available space between and around elements when aligning flex items in the main-axis of the current line. The alignment is done after the lengths and auto margins are applied, meaning that, if there is at least one flexible element, with flex-grow different than 0, it will have no effect as there won't be any available space.

Attributes

See also
lazy val left: StyleProp[String] & Auto & Length[DSP, Int]

The left CSS property specifies part of the position of positioned elements.

The left CSS property specifies part of the position of positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the left margin edge of the element and the left edge of its containing block.

Attributes

See also
lazy val letterSpacing: StyleProp[String] & Normal

The letter-spacing CSS property specifies spacing behavior between text characters.

The letter-spacing CSS property specifies spacing behavior between text characters.

Attributes

See also
lazy val lineHeight: StyleProp[String] & Normal & Length[DSP, Int]

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.

On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.

On replaced inline elements, like buttons or other input element, line-height has no effect.

Attributes

See also
lazy val listStyle: StyleProp[String]

The list-style CSS property is a shorthand property for setting list-style-type, list-style-image and list-style-position.

The list-style CSS property is a shorthand property for setting list-style-type, list-style-image and list-style-position.

Attributes

See also
lazy val listStyleImage: StyleProp[String] & None & Url[DSP]

The list-style-image CSS property sets the image that will be used as the list item marker.

The list-style-image CSS property sets the image that will be used as the list item marker.

Attributes

See also

The list-style-position CSS property specifies the position of the marker box in the principal block box.

The list-style-position CSS property specifies the position of the marker box in the principal block box.

Attributes

See also
lazy val listStyleType: StyleProp[String] & ListStyleType

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.

Attributes

See also
lazy val margin: StyleProp[String] & Auto & Length[DSP, Int]

The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.

The margin CSS property sets the margin for all four sides. It is a shorthand to avoid setting each side separately with the other margin properties: margin-top, margin-right, margin-bottom and margin-left.

Negative values are also allowed.

Attributes

See also
lazy val marginBottom: StyleProp[String] & Auto & Length[DSP, Int]

The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.

The margin-bottom CSS property of an element sets the margin space required on the bottom of an element. A negative value is also allowed.

Attributes

See also
lazy val marginLeft: StyleProp[String] & Auto & Length[DSP, Int]

The margin-left CSS property of an element sets the margin space required on the left of an element. A negative value is also allowed.

The margin-left CSS property of an element sets the margin space required on the left of an element. A negative value is also allowed.

Attributes

See also
lazy val marginRight: StyleProp[String] & Auto & Length[DSP, Int]

The margin-right CSS property of an element sets the margin space required on the right of an element. A negative value is also allowed.

The margin-right CSS property of an element sets the margin space required on the right of an element. A negative value is also allowed.

Attributes

See also
lazy val marginTop: StyleProp[String] & Auto & Length[DSP, Int]

The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.

The margin-top CSS property of an element sets the margin space required on the top of an element. A negative value is also allowed.

Attributes

See also
lazy val mask: StyleProp[String] & None & Url[DSP]

If the value is a URI value, the element pointed to by the URI is used as an SVG mask.

If the value is a URI value, the element pointed to by the URI is used as an SVG mask.

Attributes

See also
lazy val maxHeight: StyleProp[String] & MinMaxLength & None

The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height.

max-height overrides height, but min-height overrides max-height.

Attributes

See also
lazy val maxWidth: StyleProp[String] & MinMaxLength & None

The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.

The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.

max-width overrides width, but min-width overrides max-width.

Attributes

See also
lazy val minHeight: StyleProp[String] & MinMaxLength & Auto

The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

The value of min-height overrides both max-height and height.

Attributes

See also
lazy val minWidth: StyleProp[String] & MinMaxLength & Auto

The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The min-width CSS property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width.

The value of min-width overrides both max-width and width.

Attributes

See also
lazy val mixBlendMode: StyleProp[String] & MixBlendMode

This property sets how an element's content should blend with the content of the element's parent and the element's background.

This property sets how an element's content should blend with the content of the element's parent and the element's background.

Note: not supported by Chrome on Android and Safari

Attributes

See also
lazy val opacity: StyleProp[Double]

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

Using this property with a value different than 1 places the element in a new stacking context.

Attributes

See also
lazy val orphans: StyleProp[Int]

The orphans CSS property refers to the minimum number of lines in a block container that must be left at the bottom of the page. This property is normally used to control how page breaks occur.

The orphans CSS property refers to the minimum number of lines in a block container that must be left at the bottom of the page. This property is normally used to control how page breaks occur.

Note: Firefox does not support this property

Attributes

See also
lazy val outline: StyleProp[String]

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

The CSS outline property is a shorthand property for setting one or more of the individual outline properties outline-style, outline-width and outline-color in a single rule. In most cases the use of this shortcut is preferable and more convenient.

Outlines do not take up space, they are drawn above the content.

Attributes

See also
lazy val outlineColor: StyleProp[String] & Color & Color[SS, DSP]

The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

The outline-color CSS property sets the color of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

Note: "invert" is a special outline color you can use for high contrast.

Attributes

See also
lazy val outlineStyle: StyleProp[String] & Line

The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

The outline-style CSS property is used to set the style of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

Attributes

See also
lazy val outlineWidth: StyleProp[String] & Length[DSP, Int]

The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

The outline-width CSS property is used to set the width of the outline of an element. An outline is a line that is drawn around elements, outside the border edge, to make the element stand out.

Attributes

See also
lazy val overflow: StyleProp[String] & Overflow

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

Attributes

See also
lazy val overflowWrap: StyleProp[String] & OverflowWrap

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

The overflow-wrap CSS property specifies whether or not the browser should insert line breaks within words to prevent text from overflowing its content box.

Alias for: wordWrap

Attributes

See also
lazy val overflowX: StyleProp[String] & Overflow

The overflow-x CSS property specifies whether to clip content, render a scroll bar or display overflow content of a block-level element, when it overflows at the left and right edges.

The overflow-x CSS property specifies whether to clip content, render a scroll bar or display overflow content of a block-level element, when it overflows at the left and right edges.

Attributes

See also
lazy val overflowY: StyleProp[String] & Overflow

The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

Attributes

See also
lazy val padding: StyleProp[String] & Length[DSP, Int]

The padding CSS property sets the required padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

The padding CSS property sets the required padding space on all sides of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

The padding property is a shorthand to avoid setting each side separately (padding-top, padding-right, padding-bottom, padding-left).

Attributes

See also
lazy val paddingBottom: StyleProp[String] & Length[DSP, Int]

The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and it's border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.

The padding-bottom CSS property of an element sets the height of the padding area at the bottom of an element. The padding area is the space between the content of the element and it's border. Contrary to margin-bottom values, negative values of padding-bottom are invalid.

Attributes

See also
lazy val paddingLeft: StyleProp[String] & Length[DSP, Int]

The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.

The padding-left CSS property of an element sets the padding space required on the left side of an element. The padding area is the space between the content of the element and it's border. A negative value is not allowed.

Attributes

See also
lazy val paddingRight: StyleProp[String] & Length[DSP, Int]

The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

The padding-right CSS property of an element sets the padding space required on the right side of an element. The padding area is the space between the content of the element and its border. Negative values are not allowed.

Attributes

See also
lazy val paddingTop: StyleProp[String] & Length[DSP, Int]

The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.

The padding-top CSS property of an element sets the padding space required on the top of an element. The padding area is the space between the content of the element and its border. Contrary to margin-top values, negative values of padding-top are invalid.

Attributes

See also
lazy val pageBreakAfter: StyleProp[String] & PageBreak

The page-break-after CSS property adjusts page breaks after the current element.

The page-break-after CSS property adjusts page breaks after the current element.

Attributes

See also
lazy val pageBreakBefore: StyleProp[String] & PageBreak

The page-break-before CSS property adjusts page breaks before the current element.

The page-break-before CSS property adjusts page breaks before the current element.

This properties applies to block elements that generate a box. It won't apply on an empty div that won't generate a box.

Attributes

See also
lazy val pageBreakInside: StyleProp[String] & PageBreak

The page-break-inside CSS property adjusts page breaks inside the current element.

The page-break-inside CSS property adjusts page breaks inside the current element.

Attributes

See also
lazy val perspective: StyleProp[String] & None

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.

Attributes

See also
lazy val perspectiveOrigin: StyleProp[String]

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.

Attributes

See also
lazy val pointerEvents: StyleProp[String] & PointerEvents

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

The CSS property pointer-events allows authors to control under what circumstances (if any) a particular graphic element can become the target of mouse events. When this property is unspecified, the same characteristics of the visiblePainted value apply to SVG content.

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

Attributes

See also
lazy val position: StyleProp[String] & Position

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

The position CSS property chooses alternative rules for positioning elements, designed to be useful for scripted animation effects.

Attributes

See also
lazy val quotes: StyleProp[String]

The quotes CSS property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the CSS content property.

The quotes CSS property sets how the browser should render quotation marks that are added using the open-quotes or close-quotes values of the CSS content property.

Attributes

See also
lazy val resize: StyleProp[String]

The resize CSS property sets whether an element is resizable, and if so, in which direction(s).

The resize CSS property sets whether an element is resizable, and if so, in which direction(s).

Attributes

See also
lazy val right: StyleProp[String] & Auto & Length[DSP, Int]

The right CSS property specifies part of the position of positioned elements.

The right CSS property specifies part of the position of positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the right margin edge of the element and the right edge of its containing block.

The right property has no effect on non-positioned elements.

When both the right CSS property and the left CSS property are defined, the position of the element is overspecified. In that case, the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left), and the right value has precedence when the container is right-to-left (that is that the left computed value is set to -right).

Attributes

See also
lazy val tableLayout: StyleProp[String] & TableLayout

The table-layout CSS property sets the algorithm used to lay out <table> cells, rows, and columns.

The table-layout CSS property sets the algorithm used to lay out <table> cells, rows, and columns.

Attributes

See also
lazy val textAlign: StyleProp[String] & TextAlign

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

The text-align CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.

Attributes

See also
lazy val textAlignLast: StyleProp[String] & TextAlign

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.

The text-align-last CSS property describes how the last line of a block or a line, right before a forced line break, is aligned.

Attributes

See also

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink.

The text-decoration CSS property is used to set the text formatting to underline, overline, line-through or blink.

Attributes

See also
lazy val textIndent: StyleProp[String]

The text-indent CSS property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element. Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's box.

The text-indent CSS property specifies how much horizontal space should be left before the beginning of the first line of the text content of an element. Horizontal spacing is with respect to the left (or right, for right-to-left layout) edge of the containing block element's box.

Attributes

See also
lazy val textOverflow: StyleProp[String] & TextOverflow

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, or display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string.

The text-overflow CSS property determines how overflowed content that is not displayed is signaled to the users. It can be clipped, or display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) or a Web author-defined string.

Attributes

See also
lazy val textShadow: StyleProp[String] & None

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element.

The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and text-decorations of the element.

Each shadow is specified as an offset from the text, along with optional color and blur radius values.

Multiple shadows are applied front-to-back, with the first-specified shadow on top.

Attributes

See also
lazy val textTransform: StyleProp[String] & TextTransform

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

The text-transform CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized.

Attributes

See also

The CSS text-underline-position property specifies the position of the underline which is set using the text-decoration property underline value.

The CSS text-underline-position property specifies the position of the underline which is set using the text-decoration property underline value.

This property inherits and is not reset by the text-decoration shorthand, allowing to easily set it globally for a given document.

Attributes

See also
lazy val top: StyleProp[String] & Auto & Length[DSP, Int]

The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.

The top CSS property specifies part of the position of positioned elements. It has no effect on non-positioned elements.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

When both top and bottom are specified, the element position is over-constrained and the top property has precedence: the computed value of bottom is set to -top, while its specified value is ignored.

Attributes

See also
lazy val transform: StyleProp[String]

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

If the property has a value different than none, a stacking context will be created. In that case the object will act as a containing block for position: fixed elements that it contains.

Attributes

See also
lazy val transformOrigin: StyleProp[String]

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

The transform-origin CSS property lets you modify the origin for transformations of an element. For example, the transform-origin of the rotate() function is the centre of rotation. (This property is applied by first translating the element by the negated value of the property, then applying the element's transform, then translating by the property value.)

Not explicitly set values are reset to their corresponding values.

Attributes

See also
lazy val transformStyle: StyleProp[String]

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

The transform-style CSS property determines if the children of the element are positioned in the 3D-space or are flattened in the plane of the element.

Attributes

See also
lazy val transition: StyleProp[String]

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. Different states may be defined using pseudo-classes like :hover or :active or dynamically set using JavaScript.

Attributes

See also
lazy val transitionDelay: StyleProp[String] & Time[DSP]

The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.

The transition-delay CSS property specifies the amount of time to wait between a change being requested to a property that is to be transitioned and the start of the transition effect.

A value of 0s, or 0ms, indicates that the property will begin to animate its transition immediately when the value changes; positive values will delay the start of the transition effect for the corresponding number of seconds. Negative values cause the transition to begin immediately, but to cause the transition to seem to begin partway through the animation effect.

You may specify multiple delays; each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

Attributes

See also
lazy val transitionDuration: StyleProp[String] & Time[DSP]

The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

The transition-duration CSS property specifies the number of seconds or milliseconds a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

You may specify multiple durations; each duration will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer durations specified than in the master list, the user agent repeat the list of durations. If there are more durations, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

Attributes

See also
lazy val transitionProperty: StyleProp[String]

The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.

The transition-property CSS property is used to specify the names of CSS properties to which a transition effect should be applied.

Attributes

See also

The CSS transition-timing-function property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.

The CSS transition-timing-function property is used to describe how the intermediate values of the CSS properties being affected by a transition effect are calculated. This in essence lets you establish an acceleration curve, so that the speed of the transition can vary over its duration.

Attributes

See also
lazy val unicodeBidi: StyleProp[String]

The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.

The unicode-bidi CSS property together with the direction property relates to the handling of bidirectional text in a document. For example, if a block of text contains both left-to-right and right-to-left text then the user-agent uses a complex Unicode algorithm to decide how to display the text. This property overrides this algorithm and allows the developer to control the text embedding.

Attributes

See also
lazy val verticalAlign: StyleProp[String] & VerticalAlign

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. It does not apply to block-level elements.

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box. It does not apply to block-level elements.

Attributes

See also
lazy val visibility: StyleProp[String] & Visibility

The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.

The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table>.

Attributes

See also
lazy val whiteSpace: StyleProp[String] & WhiteSpace

The white-space CSS property is used to to describe how whitespace inside the element is handled.

The white-space CSS property is used to to describe how whitespace inside the element is handled.

Attributes

See also
lazy val widows: StyleProp[Int]

The widows CSS property defines how many minimum lines must be left on top of a new page, on a paged media. In typography, a widow is the last line of a paragraph appearing alone at the top of a page. Setting the widows property allows to prevent widows to be left.

The widows CSS property defines how many minimum lines must be left on top of a new page, on a paged media. In typography, a widow is the last line of a paragraph appearing alone at the top of a page. Setting the widows property allows to prevent widows to be left.

On a non-paged media, like screen, the widows CSS property has no effect.

Note: Firefox does not support this property.

Attributes

See also
lazy val width: StyleProp[String] & Auto & Length[DSP, Int]

The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.

The min-width and max-width properties override width.

Attributes

See also
lazy val wordBreak: StyleProp[String] & WordBreak

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.

Attributes

See also
lazy val wordSpacing: StyleProp[String] & Normal

The word-spacing CSS property specifies spacing behavior between tags and words.

The word-spacing CSS property specifies spacing behavior between tags and words.

Attributes

See also
lazy val wordWrap: StyleProp[String] & OverflowWrap
lazy val zIndex: StyleProp[Int] & Auto

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

The z-index CSS property specifies the z-order of an element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

Attributes

See also