style-properties.md

Reference

property	type	default
background-color	$color	transparent
z-index	auto|$local|$global	auto
align-content	$ident	stretch
align-items	$ident	stretch
flex-direction	$ident	row
flex-wrap	$ident	no-wrap
justify-content	$ident	flex-start
align-self	$ident	auto
flex-basis	$val	auto
flex-grow	$num	0.0
flex-shrink	$num	1.0
display	$ident	flex
overflow	$ident	visible
position	$rect	-
position-type	$ident	relative
bottom	$val	undefined
left	$val	undefined
right	$val	undefined
top	$val	undefined
aspect-ratio	none|$num	none
height	$val	undefined
max-height	$val	undefined
max-width	$val	undefined
min-height	$val	undefined
min-width	$val	undefined
width	$val	undefined
border-width	$rect	-
border-width-bottom	$val	undefined
border-width-left	$val	undefined
border-width-right	$val	undefined
border-width-top	$val	undefined
margin	$rect	-
margin-bottom	$val	undefined
margin-left	$val	undefined
margin-right	$val	undefined
margin-top	$val	undefined
padding	$rect	-
padding-bottom	$val	undefined
padding-left	$val	undefined
padding-right	$val	undefined
padding-top	$val	undefined
stylebox	source, slice, region, width, modulate	-
stylebox-modulate	$color	white
stylebox-region	$rect	0px
stylebox-slice	$rect	50%
stylebox-source	none|$string	none
stylebox-width	$rect	100%
color	$color	#cfcfcf
font	regular|bold|italic|bold-italic|$string	regular
font-size	$num	24

Types

$color

Describes the Color value. Accepts color names (white, red) or hex codes (#3fde1a). List of predefined colors can be found here (coming soon).

$ident

Custom identifier: no-wrap, none, auto, etc. Each property accepts its own set of identifiers and describes them in the docs.

$num

Numeric literal:

flex-grow: 2.0

$rect

Shorthand for describing bevy::prelude::UiRect using single line. Accepts 1 to 4 $val items related to edges of a box, like margin or padding.

• 1 value: specifies all edges: margin: 10px
• 2 values: the first value specifies vertical edges (top & bottom), the second value specifies horisontal edges (left & right): padding: 5px 30%
• 3 values: the first value specifies the top edge, the second specifies horisontal edges (left & right), the last one specifies the bottom edge: border: 2px auto 5px
• 4 values specifies all edges in top, right, bottom, left order (clock-wise): margin: 5px 4px 3% auto

$string

String literal in double quotes:

stylebox-source: "images/stylebox.png"

$val

Size type representing bevy::prelude::Val type. Possible values:

• auto for Val::Auto
• undefined for Val::Px(0.)
• px suffixed for Val::Px (25px)
• % suffixed for Val::Percent (25%)

Properties

General

background-color

type: $color

default: transparent

TODO: write BacgroundColor description

z-index

type: auto|$local|$global

default: auto

TODO: write ZIndex description

Flex Container

align-content

type: $ident

default: stretch

TODO: write AlignContent description

align-items

type: $ident

default: stretch

Specify element items alignment by providing value to Style.align_items:

align-items: center;

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

Supported values:

• flex-start: The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
• flex-end: The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
• center: The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.
• baseline: All flex items are aligned such that their flex container baselines align
• stretch: Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.

flex-direction

type: $ident

default: row

Specify element flex direction by providing value to Style.direction:

flex-direction: column;

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

Supported values:

• row: The flex container's main-axis is defined to be the same as the text direction.
• column: The flex container's main-axies is defined to be vertical, items are placed from top to bottom.
• row-reverse: Behaves the same as row but opposite to the content direction.
• column-reverse: Behaves the same as row but items are placed from bottom to top.

flex-wrap

type: $ident

default: no-wrap

Specify element flex wrap by providing value to Style.flex_wrap:

flex-wrap: wrap;

The flex-wrap property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Supported values:

• no-wrap: The flex items are laid out in a single line which may cause the flex container to overflow.
• wrap: The flex items break into multiple lines.
• wrap-reverse: Behaves the same as wrap but the new line is placed before the previous

justify-content

type: $ident

default: flex-start

TODO: write JustifyContent description

Flex Item

align-self

type: $ident

default: auto

TODO: write AlignSelf description

flex-basis

type: $val

default: auto

Specify element flex basis by providing value to Style.flex_basis using val syntax:

flex-basis: 5px;

The flex-basis specifies the initial size of the flex item, before any available space is distributed according to the flex factors.

flex-grow

type: $num

default: 0.0

Specify element flex grow by providing value to Style.flex_grow:

flex-grow: 2.0;

The flex-grow defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

flex-shrink

type: $num

default: 1.0

Specify element flex shrink by providing value to Style.flex_shrink:

flex-shrink: 3.0;

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

Layout Control

display

type: $ident

default: flex

Specify element display by providing value to Style.display:

display: none;

Supported values:

• none: turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything
• flex: display element according to the Flexbox.

overflow

type: $ident

default: visible

TODO: add OverflowProperty descripion

position

type: $rect

Specify element position by providing values to style:

position: 2px 20% 10px auto;

position-type

type: $ident

default: relative

Specify how an element is positioned in a document acording to the top, right, bottom, and left by providing value to style_type:

position-type: absolute;

Supported values:

• absolute: the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor. Its final position is determined by the values of top, right, bottom, and left.
• relative: the element is positioned according to the normal flow of the document and then offset relative to itself based on the values of top, right, bottom and left. The offset does not affect the position of any other elements.

Layout Control Positioning

bottom

type: $val

default: undefined

Specify element bottom position by providing value to style.bottom:

bottom: 5px;

left

type: $val

default: undefined

Specify element left position by providing value to style.left:

left: 5px;

right

type: $val

default: undefined

Specify element right position by providing value to style.right:

right: 5px;

top

type: $val

default: undefined

Specify element top position by providing value to style.top:

top: 5px;

Size Constraints

aspect-ratio

type: none|$num

default: none

Specify element preferred aspect ratio by providing value to Style.aspect_ratio:

aspect-ratio: 2.0;

The aspect-ratio property sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

height

type: $val

default: undefined

Specify element preferred height by providing value to style.height:

height: 5px;

max-height

type: $val

default: undefined

Specify element maximum height by providing value to Style.max_size.height:

max-height: 5px;

max-width

type: $val

default: undefined

Specify element maximum width by providing value to Style.max_size.width:

max-width: 5px;

min-height

type: $val

default: undefined

Specify element minimum height by providing value to Style.min_size.height:

min-height: 5px;

min-width

type: $val

default: undefined

Specify element minimum width by providing value to Style.min_size.width:

min-width: 5px;

width

type: $val

default: undefined

Specify element preferred width by providing value to style.width:

width: 5px;

Spacing

border-width

type: $rect

Specify element border width by providing values to Style.border:

border-width: 2px 20% 10px auto;

The border-width property specifies the width of the four borders.

border-width-bottom

type: $val

default: undefined

Specify element bottom border width by providing value to Style.border.bottom:

border-width-bottom: 5px;

border-width-left

type: $val

default: undefined

Specify element left border width by providing value to Style.border.left:

border-width-left: 5px;

border-width-right

type: $val

default: undefined

Specify element right border width by providing value to Style.border.right:

border-width-right: 5px;

border-width-top

type: $val

default: undefined

Specify element top border width by providing value to Style.border.top:

border-width-top: 5px;

margin

type: $rect

Specify element margin by providing values to Style.margin:

margin: 2px 20% 10px auto;

Margins are used to create space around elements, outside of any defined borders.

margin-bottom

type: $val

default: undefined

Specify element bottom margin by providing value to Style.margin.bottom:

margin-bottom: 5px;

Margins are used to create space around elements, outside of any defined borders.

margin-left

type: $val

default: undefined

Specify element left margin by providing value to Style.margin.left:

margin-left: 5px;

Margins are used to create space around elements, outside of any defined borders.

margin-right

type: $val

default: undefined

Specify element right margin by providing value to Style.margin.right:

margin-right: 5px;

Margins are used to create space around elements, outside of any defined borders.

margin-top

type: $val

default: undefined

Specify element top margin by providing value to Style.margin.top:

margin-top: 5px;

Margins are used to create space around elements, outside of any defined borders.

padding

type: $rect

Specify element padding by providing values to Style.padding:

padding: 2px 20% 10px auto;

Padding is used to create space around an element's content, inside of any defined borders.

padding-bottom

type: $val

default: undefined

Specify element bottom padding by providing value to Style.padding.bottom:

padding-bottom: 5px;

Padding is used to create space around an element's content, inside of any defined borders.

padding-left

type: $val

default: undefined

Specify element left padding by providing value to Style.padding.left:

padding-left: 5px;

Padding is used to create space around an element's content, inside of any defined borders.

padding-right

type: $val

default: undefined

Specify element right padding by providing value to Style.padding.right:

padding-right: 5px;

Padding is used to create space around an element's content, inside of any defined borders.

padding-top

type: $val

default: undefined

Specify element top padding by providing value to Style.padding.top:

padding-top: 5px;

Padding is used to create space around an element's content, inside of any defined borders.

Stylebox

stylebox

type: source, slice, region, width, modulate

Specify how to fill the element with region of image sliced by 9 parts. The stylebox property is shorthand property for:

• stylebox-source specifies the source of the image
• stylebox-slice specifies how to slice the image
• stylebox-region specifies the region of the image
• stylebox-width specifies how to resize edges
• stylebox-modulate specifies what color the image should be multiplied by

The format of property is:

source, slice, width, region, modulate

Every tail element is optional (you can omit modulate for example. If you do, you can ompit region then. And so on.)

Example:

  stylebox: "background.png", 16px 12px, 100%, 0px, blue
  stylebox: "background.png", 5px 20%

stylebox-modulate

type: $color

default: white

The stylebox-modulate property specifies what color the original image should be multiplied by.

stylebox-region

type: $rect

default: 0px

The stylebox-region property specifies which region of the image should be sliced. By default the hole area of image defined by stylebox-source is used. Property accepts $rect:

• px values defines exact offset from the edges in pixels
• % values defines offset from the edges relative to the image size
• auto & undefined treated as 0px

stylebox-slice

type: $rect

default: 50%

The stylebox-slice property specifies how to slice the image region specified by stylebox-source and stylebox-region. The image is always sliced into nine sections: four corners, four edges and the middle. Property accepts $rect:

• when px specified, region sliced to the exact amount of pixels
• when % specified, region sliced relative to it size
• auto & undefined treated as 50%

stylebox-source

type: none|$string

default: none

The stylebox-source property specifies the path to the image to be used as a stylebox. The property accepts String values.

stylebox-width

type: $rect

default: 100%

The stylebox-width property specifies the width of the edgets of sliced region. Property accepts $rect:

• edges specified by px values resizes to exact amout of pixels
• edges specified by % resized relative to width provided by stylebox-slice
• auto & undefined treated as 100%

Text

color

type: $color

default: #cfcfcf

TODO: remove depricate ColorProperty

font

type: regular|bold|italic|bold-italic|$string

default: regular

TODO: wtite FontProperty description

font-size

type: $num

default: 24

TODO: write FontSizeProperty description