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.
Anything marked in bold* may behave differently to how you'd expect on web.
Common Types
| Name | Description | Examples |
|---|---|---|
| Float | A standard float | flex-grow: 2.5; |
| String | A string with or without quotes | font-family: Poppins;,content: "Back to Menu"; |
| int | A standard int | font-weight: 600; |
| Color | Can have alpha | color: #fff;,color: #ffffffaa;,color: rgba(red, 0.5); |
| Length | A dimension, pixel or relative. | left: 10px;,left: 10%;,left: 10em;,left: 10vw;,mask-angle: 10deg; |
Value Syntax & Units
These work across most properties:
| Feature | Description | Examples |
|---|---|---|
min() / max() / clamp() | Math functions usable anywhere a Length is accepted. | width: min(100px, 50%);,width: clamp(10px, 50%, 200px); |
| CSS-wide keywords | inherit, initial, unset and revert are accepted on single-value properties and most shorthands (margin, border, background, filter, animation, …). Not on box-shadow, text-shadow, filter-drop-shadow, background-image, mask-image, border-image, transition* or flex. | color: inherit;,margin: unset; |
currentColor | Resolves to the element's current color value. | border-color: currentColor; |
oklch() / lab() / hwb() | Additional color syntaxes, on top of hex / rgb() / rgba(). | color: oklch(0.7 0.15 200); |
| Viewport units | dvh, svh, lvh and dvw are treated the same as vh / vw. | height: 100dvh; |
| Time units | Durations accept ms as well as s. | transition: opacity 200ms ease;,animation-duration: 500ms; |
Custom Style Properties
| Name | Parameters | Examples / Notes |
|---|---|---|
| aspect-ratio | Float, Float (Optional) / auto | aspect-ratio: 1;,aspect-ratio: 16/9;,aspect-ratio: auto; |
| background-image-tint | Color | Multiplies the background-image by this Color. Not a replacement for filter or backdrop-filter. background-tint is an alias. |
| background-playback-state | running (default) / paused | Pauses an animated or video background-image. |
| border-image-tint | Color | Multiplies the border-image by this Color. |
| border-shape | none / polygon(x y, ...) / circle(radius at x y) | Replaces the rounded rectangle with a polygon (3-8 points) or a circle, for backgrounds, borders and hit testing. See Border Shape. |
| mask-scope | default / filter | default will apply the mask normally, filter will use the mask to blend between unfiltered and filtered. |
| sound-in | String | The name of the sound to play when this style is applied to an element. This is useful to put on a :hover or :active style to play a sound on hover/click |
| sound-out | String | The name of a sound to play when this style is removed from an element. |
| text-filter | bilinear (default) / linear / point / trilinear / anisotropic | Texture filtering for text. point is good for pixel fonts. |
| text-stroke | Length, Color | This will put an outline |
| text-stroke-color | Color | |
| text-stroke-width | Length |
Supported Style Properties
| Name | Parameters | Examples / Notes |
|---|---|---|
| align-content | auto / flex-start / flex-end / center / stretch / space-between / space-around / space-evenly / start / end / self-start / self-end / normal / baseline | start/self-start map to flex-start, end/self-end to flex-end, normal to stretch. |
| align-items | Same as align-content | |
| align-self | Same as align-content | |
| animation | Fills in the properties below | |
| animation-delay | Time (s / ms) | A unit is required. eg. animation-delay: 200ms; |
| animation-direction | normal (default) / reverse / alternate / alternate-reverse | |
| animation-duration | Time (s / ms) | A unit is required. eg. animation-duration: 0.5s; |
| animation-fill-mode | none (default) / forwards / backwards / both | |
| animation-iteration-count | int / infinite | |
| animation-name | String | |
| animation-play-state | running (default) / paused | |
| animation-timing-function | Same as transition-timing-function | |
| backdrop-filter | blur(Length) <br>saturate(Length) <br>contrast(Length) <br>brightness(Length) <br>grayscale(Length) <br>sepia(Length) <br>hue-rotate(Length) <br>invert(Length) / none | backdrop-filter: blur(10px) saturate(80%); none clears any backdrop filters. |
| backdrop-filter-blur | Length | |
| backdrop-filter-brightness | Length | |
| backdrop-filter-contrast | Length | |
| backdrop-filter-hue-rotate | Length | |
| backdrop-filter-invert | Length | |
| backdrop-filter-saturate | Length | |
| backdrop-filter-sepia | Length | |
| background | Fills in the properties below | |
| background-angle | Length | |
| background-blend-mode | normal (default) / lighten / multiply | |
| background-clip | border-box (default) / padding-box / content-box / text | text paints the background only where the text is, so it shows through the glyphs. |
| background-color | Color | |
| background-image | url(string) <br>linear-gradient(Color, Color) <br>radial-gradient(Color, Color) <br>conic-gradient(Color, Color) | |
| background-position | Length, Length (optional) | background-position: 10px``background-position: 10px 15px |
| background-position-x | Length | |
| background-position-y | Length | |
| background-repeat | no-repeat / repeat-x / repeat-y / repeat / round / clamp | |
| background-size | Length, Length (optional) | background-size: 10px background-size: 10px 15px |
| background-size-x | Length | |
| background-size-y | Length | |
| border | border-width, border-style, border-color | border: 10px solid black; |
| border-bottom | Same as border | |
| border-bottom-color | Color | |
| border-bottom-left-radius | Length | |
| border-bottom-right-radius | Length | |
| border-bottom-width | Length | |
| border-color | Color | |
| border-image | url(String) / gradient (as background-image), Length (slice, 1–4, optional) / Length (width, 1–4, optional), stretch / round, fill | border-image: url( border.png ) 20px / 10px round fill; The slice defaults to a third of the image. |
| border-image-tint | Color | |
| border-image-width-bottom | Length | |
| border-image-width-left | Length | |
| border-image-width-right | Length | |
| border-image-width-top | Length | |
| border-left | Same as border | |
| border-left-color | Color | |
| border-left-width | Length | |
| border-radius | Length | border-radius: 8px;<br>border-radius: 8px 0px 8px 8px; |
| border-right | Same as border | |
| border-right-color | Color | |
| border-right-width | Length | |
| border-top | Same as border | |
| border-top-color | Color | |
| border-top-left-radius | Length | |
| border-top-right-radius | Length | |
| border-top-width | Length | |
| border-width | Length (1–4 values) | Accepts 1–4 values like the CSS shorthand. eg. border-width: 1px;,border-width: 1px 2px;,border-width: 1px 2px 3px 4px; |
| bottom | Length | |
| box-shadow | Length (x),<br>Length (y),<br>Length (blur, optional),<br>Length (spread, optional),<br>Color | box-shadow: 2px 2px 4px black; |
| caret-color | Color | The text cursor in a TextEntry. Defaults to the text colour. |
| color | Color /<br>linear-gradient(Color, Color) /<br>radial-gradient(Color, Color) | |
| column-gap | Length | |
| content | string | Sets the text of a Label.<br>eg. content: "Loading…"; |
| cursor | none / pointer / progress / wait / crosshair / text / move / not-allowed / any custom cursors | |
| display* | flex (default) / none / contents | Everything is flex by default |
| filter | Same as backdrop-filter, plus <br>tint(Color) <br>drop-shadow(Same as box-shadow) <br>border-wrap(Length, Color) / none | filter: blur(2px) tint(#f00); none clears any filters. |
| filter-blur | Length | |
| filter-border-color | Color | |
| filter-border-width | Length | |
| filter-brightness | Length | |
| filter-contrast | Length | |
| filter-drop-shadow | Same as box-shadow | |
| filter-hue-rotate | Length | |
| filter-invert | Length | |
| filter-saturate | Length | |
| filter-sepia | Length | |
| filter-tint | Color | |
| flex-basis | Length | |
| flex-direction | row (default) / row-reverse / column / column-reverse | |
| flex-flow | flex-direction, flex-wrap | Shorthand for flex-direction and flex-wrap. eg. flex-flow: row wrap; |
| flex-grow | Float | |
| flex-shrink | Float | |
| flex-wrap | nowrap (Default) / wrap / wrap-reverse | |
| font | Fills in the font properties below | Shorthand for font-style, font-weight, font-size, line-height and font-family. eg. font: italic bold 16px/1.4 Poppins; |
| font-color | Color | |
| font-family* | String | Specify a single font, based on the name of the font itself, not the filename.<br>eg. font-family: Comic Sans MS;<br>Generic families (serif, sans-serif, monospace) are mapped to a default font. |
| font-size | Length / xx-small / x-small / small / medium / large / x-large / xx-large / xxx-large | |
| font-smooth | auto / always / never / none | never is good for pixel fonts |
| font-style | normal (default) / italic / oblique | |
| font-variant-numeric | normal / tabular-nums | |
| font-weight | int / hairline / thin / ultralight / extralight / light / regular / normal (default) / medium / demibold / semibold / bold / extrabold / heavy / black / extrablack / ultrablack / bolder / lighter | font-weight: bold;,font-weight: 300; |
| gap | Length, Length (optional) / normal | Shorthand for row-gap and column-gap, specified the size of gutters. |
| height | Length | |
| image-rendering | auto (default) / anisotropic / bilinear / trilinear / point / pixelated / nearest-neighbor / crisp-edges | crisp-edges uses point sampling. |
| inset | Length (1–4 values) | Shorthand for top, right, bottom and left. |
| inset-block | Length, Length (optional) | Shorthand for inset-block-start and inset-block-end. |
| inset-block-end | Length | |
| inset-block-start | Length | |
| inset-inline | Length, Length (optional) | Shorthand for inset-inline-start and inset-inline-end. |
| inset-inline-end | Length | |
| inset-inline-start | Length | |
| isolation | auto (default) / isolate | isolate forces a new stacking context. |
| justify-content | flex-start (default) / flex-end / center / stretch / space-between / space-around / space-evenly / start / end / left / right / normal | start/left/normal/stretch map to flex-start, end/right to flex-end. |
| left | Length | |
| letter-spacing | Length / normal | |
| line-height | Length | |
| margin | Fills in the properties below | |
| margin-block | Length, Length (optional) | Shorthand for margin-block-start and margin-block-end. |
| margin-block-end | Length | |
| margin-block-start | Length | |
| margin-bottom | Length | |
| margin-inline | Length, Length (optional) | Shorthand for margin-inline-start and margin-inline-end. |
| margin-inline-end | Length | |
| margin-inline-start | Length | |
| margin-left | Length | |
| margin-right | Length | |
| margin-top | Length | |
| mask | Shorthand for other mask properties | |
| mask-angle | Length | |
| mask-image | Same as background-image | |
| mask-mode | alpha / luminance / match-source | |
| mask-position | Length, Length (optional) | |
| mask-position-x | Length | |
| mask-position-y | Length | |
| mask-repeat | same as background-repeat | |
| mask-size | Length, Length (optional) | |
| mask-size-x | Length | |
| mask-size-y | Length | |
| max-height | Length | |
| max-width | Length | |
| min-height | Length | |
| min-width | Length | |
| mix-blend-mode | normal / lighten / multiply | |
| object-fit | fill / contain / cover (default) / none / scale-down | scale-down is treated as contain. |
| opacity | Float / Percentage | opacity: 0.5;,opacity: 50%; |
| order | int | |
| outline | outline-width, outline-style, outline-color | Same syntax as border. Drawn outside the box, offset by outline-offset. eg. outline: 2px solid #08f; |
| outline-color | Color | |
| outline-offset | Length | |
| outline-width | Length | |
| overflow | visible (default) / hidden / scroll / auto / clip / clip-whole | auto maps to scroll. clip clips like hidden without making a scroll container. clip-whole hides any child that extends outside the box entirely, rather than clipping it. |
| overflow-x | Same as overflow | |
| overflow-y | Same as overflow | |
| padding | Fills in the properties below | |
| padding-block | Length, Length (optional) | Shorthand for padding-block-start and padding-block-end. |
| padding-block-end | Length | |
| padding-block-start | Length | |
| padding-bottom | Length | |
| padding-inline | Length, Length (optional) | Shorthand for padding-inline-start and padding-inline-end. |
| padding-inline-end | Length | |
| padding-inline-start | Length | |
| padding-left | Length | |
| padding-right | Length | |
| padding-top | Length | |
| perspective-origin | Length, Length (optional) | |
| perspective-origin-x | Length | |
| perspective-origin-y | Length | |
| pointer-events | none (default) / all / auto | |
| position* | static (default) / relative / absolute | See how it works: https://yogalayout.com/docs/absolute-relative-layout/ |
| right | Length | |
| row-gap | Length | |
| scrollbar-color* | Color, Color (optional) / auto | Thumb colour then track colour. auto clears both. Inherited. |
| scrollbar-gutter | auto (default) / stable / stable both-edges | stable reserves the vertical bar's width so content is laid out beside it instead of under it. |
| scrollbar-width* | auto / thin / none (default) / Length | Zero or none means no bar. Unlike the web it's inherited, so one rule on a root turns bars on for a whole tree, and a child can opt out with none. |
| text-align | left (default) / center / right / justify / start / end | |
| text-background-angle | Length | |
| text-decoration | Color / Length / LineStyle, Line | Properties can be in any order and you can have multiple lines. |
| text-decoration-color | Color | |
| text-decoration-line | none / underline / line-through / overline | Multiple properties can be set. eg. text-decoration-line: overline underline; |
| text-decoration-skip-ink | auto / all / none | Decides whether the line decoration should draw above glyphs or not |
| text-decoration-style | solid (default) / double / dotted / dashed / wavy | |
| text-decoration-thickness | Length | |
| text-line-through-offset | Length | |
| text-overflow | clip / ellipsis | |
| text-overline-offset | Length | |
| text-shadow | Same as box-shadow | |
| text-transform | none (default) / capitalize / lowercase / uppercase | |
| text-underline-offset | Length | |
| top | Length | |
| transform | Fills in the properties below | scale() accepts comma-separated arguments. eg. transform: scale(2, 0.5); |
| transform-origin | Length, Length (optional) | |
| transform-origin-x | Length | |
| transform-origin-y | Length | |
| transition | Fills in the properties below | transition: all 0.1s ease;,transition: opacity 0.1s, transform 0.2s ease-out; |
| transition-delay | Time (s / ms) | A unit is required. eg. transition-delay: 200ms; |
| transition-duration | Time (s / ms) | A unit is required. eg. transition-duration: 0.5s; |
| transition-property | String | |
| transition-timing-function | ease (default) / linear / ease-in / ease-out / ease-in-out / bounce-in / bounce-out / bounce-in-out / sin-ease-in / sin-ease-out / sin-ease-in-out / step-start / step-end / cubic-bezier(x1, y1, x2, y2) / steps(n, start / end) | Use cubic-bezier() and steps(n, end) in the transition / animation shorthands or animation-timing-function; this longhand splits its value on commas, so they don't parse here. |
| white-space | normal / nowrap / pre / pre-wrap / pre-line / break-spaces | Use pre to format tabs and newlines. |
| width | Length | |
| word-break | normal / break-all / break-word / keep-all | |
| word-spacing | Length / normal | |
| z-index | int |
Custom Pseudo-Classes
These are some s&box-specific pseudo-classes which are useful for applying transitions when an element is created or deleted.
:introis removed when the element is created, things will transition away from this:outrois added when Panel.Delete() is called. The Panel waits for all transitions to finish before actually deleting itself.
MyPanel {
transition: all 2s ease-out;
transform: scale( 1 );
// When the element is created make it expand from nothing.
&:intro {
transform: scale( 0 );
}
// When the element is deleted make it double in size before being deleted.
&:outro {
transform: scale( 2 );
}
}