S&box Wiki

Revision Difference

supported-style-properties#529679

<cat>Dev.UI</cat>⤶ <title>Supported Style Properties</title>⤶ ⤶ We try to keep as close to standard web styles as possible - but not every property is implemented. We'll use this page to highlight any differences.⤶ ⤶ # Common Types⤶ ⤶ | Name | Description / Notes | Examples |⤶ |-------------------|-----|⤶ | float | A standard float | `flex-grow: 10`⤶ | Color | Can have alpha. | `color: #fff`, `color: #ffffffaa`, `color: rgba( red, 0.5 )` |⤶ | Length | A dimension, pixel or relative. | `left: 10px`, `left: 10%` |⤶ ⤶ # Supported Properties⤶ ⤶ | Name | Description / Notes | Examples |⤶ |-------------------|-----|⤶ | color | Color |⤶ | width | Length|⤶ | min-width | Length|⤶ | max-width | Length|⤶ | height | Length|⤶ | min-height | Length|⤶ | max-height | Length|⤶ | left | Length|⤶ | right | Length|⤶ | top | Length|⤶ | bottom | Length|⤶ | opacity | Float |⤶ | background-color | Color |⤶ | padding | Sugar |⤶ | padding-left | Length |⤶ | padding-right | Length |⤶ | padding-top | Length |⤶ | padding-bottom | Length |⤶ | margin-left | Length |⤶ | margin-right | Length |⤶ | margin-top | Length |⤶ | margin-bottom | Length |⤶ | border-radius | Fills in the properties below | `border-radius: 10px`, `border-radius: 10px 0px 10px 10px`⤶ | border-top-left-radius | Length |⤶ | border-top-right-radius | Length |⤶ | border-bottom-right-radius | Length |⤶ | border-bottom-left-radius | Length |⤶ | border | Fills in the properties below | `border: 10px solid white`⤶ | border-left-width | Length | ⤶ | border-top-width | Length | ⤶ | border-right-width | Length | ⤶ | border-bottom-width | Length | ⤶ | border-left-color | Color | ⤶ | border-top-color | Color | ⤶ | border-right-color | Color | ⤶ | border-bottom-color | Color | ⤶ | font-size | Length | ⤶ | font-color | Length | ⤶ | font-weight | int | ⤶ | flex-basis | Length | ⤶ | flex-grow | float | ⤶ | flex-shrink | float | ⤶ | transform-origin-x | Length | ⤶ | transform-origin-y | Length | ⤶ | z-index | float | ⤶ | font-family | string | ⤶ | cursor | none / text / progress / wait / pointer | ⤶ | pointer-events| all / none | ⤶ | mix-blend-mode | normal / lighten / multiply | ⤶ ⤶ # New Properties⤶ ⤶ ⤶ | Name | Description / Notes | Examples |⤶ |-------------------|-----|⤶ | aspect-ratio | float: Added by Facebook Flexbox. Element tries to keep its aspect ratio. | ⤶ | background-image-tint | Color: multiplies the background image by this color | ⤶ ⤶