Styles

Styles are what Elodin is all about and thus the main building blocks of any Elodin file.
Simply put, they are a map of visual properties for a single specific component.

button.elo

style Button {
  paddingLeft: 10
  paddingRight: 10
  width: percentage(50)
  fontSize: 15
  lineHeight: 1.3
}

Properties

Type-safety: The compiler will automatically throw an error and skip compilation if invalid properties are found.
This helps to ensure solid and type-safe styles.

Most properties are ported from React Native and can be implemented in most platforms as they're quite basic.
Layout is built using the flexbox layout model. If you're not familiar with that, make sure to check out React Native's flexbox documentation which is a great resource.
All properties are also available in CSS, so if you're coming from a web background - lucky you!

Property	Value
alignContent	`flexStart` , `flexEnd` , `center` , `stretch` , `spaceBetween` , `spaceAround`
alignItems	`flexStart` , `flexEnd` , `center` , `stretch` , `baseline`
alignSelf	`auto` , `flexStart` , `flexEnd` , `center` , `stretch` , `baseline`
backgroundColor	Identifier, `rgb()` , `rgba()` , `hsl()` , `hsla()`
borderBottomColor	Identifier, `rgb()` , `rgba()` , `hsl()` , `hsla()`
borderBottomLeftRadius	Integer, Float, `percentage()`
borderBottomRightRadius	Integer, Float, `percentage()`
borderBottomWidth	Integer, Float, `percentage()`
borderColor	Identifier, `rgb()` , `rgba()` , `hsl()` , `hsla()`
borderLeftColor	Identifier, `rgb()` , `rgba()` , `hsl()` , `hsla()`
borderLeftWidth	Integer, Float, `percentage()`
borderRadius	Integer, Float, `percentage()`
borderRightColor	Identifier, `rgb()` , `rgba()` , `hsl()` , `hsla()`
borderRightWidth	Integer, Float, `percentage()`
borderStyle	`solid` , `dashed` , `dotted` , `none`
borderTopColor	Identifier, `rgb()` , `rgba()` , `hsl()` , `hsla()`
borderTopLeftRadius	Integer, Float, `percentage()`
borderTopRightRadius	Integer, Float, `percentage()`
borderTopWidth	Integer, Float, `percentage()`
borderWidth	Integer, Float, `percentage()`
bottom	Integer, Float, `percentage()`
direction	`ltr` , `rtl`
flexBasis	Integer, Float, `percentage()` , `auto`
flexDirection	`row` , `rowReverse` , `column` , `columnReverse`
flexGrow	Integer
flexShrink	Integer
flexWrap	`wrap` , `nowrap`
height	Integer, Float, `percentage()`
justifyContent	`flexStart` , `flexEnd` , `center` , `spaceBetween` , `spaceAround` , `spaceEvenly`
left	Integer, Float, `percentage()`
margin	Integer, Float, `percentage()`
marginBottom	Integer, Float, `percentage()`
marginLeft	Integer, Float, `percentage()`
marginRight	Integer, Float, `percentage()`
marginTop	Integer, Float, `percentage()`
maxHeight	Integer, Float, `percentage()`
maxWidth	Integer, Float, `percentage()`
minHeight	Integer, Float, `percentage()`
minWidth	Integer, Float, `percentage()`
opacity	`percentage()`
padding	Integer, Float, `percentage()`
paddingBottom	Integer, Float, `percentage()`
paddingLeft	Integer, Float, `percentage()`
paddingRight	Integer, Float, `percentage()`
paddingTop	Integer, Float, `percentage()`
position	`relative` , `absolute`
right	Integer, Float, `percentage()`
top	Integer, Float, `percentage()`
width	Integer, Float, `percentage()`
color	Identifier, `rgb()` , `rgba()` , `hsl()` , `hsla()`
fontFamily	String
fontStyle	`normal` , `italic`
fontWeight	`100` , `200` , `300` , `400` , `500` , `600` , `700` , `800` , `900`
letterSpacing	Integer, Float
lineHeight	Integer, Float
textAlign	`auto` , `left` , `right` , `center` , `justify`
textAlign	`none` , `underline` , `lineThrough`

Raw Properties

Apart from built-in properties, we sometimes want to specify a platform specific property.
For example, the CSS

box-shadow

property is not available in Elodin, but if we know that we're building something for the web, we still might want to use it. This can be achieved by using raw properties.

Warning: Do not abuse raw properties. They're an escape hatch rather than a solid feature.
Keep in mind that they lack type-safety and might break other targets.

Raw properties are specified by a leading

__

and always take a RawValue value.

button.elo

style Button {
  __boxShadow: raw("0 2px 6px rgb(80, 80, 80)")
  paddingLeft: 10
  paddingRight: 10
}