<cat>Dev.UI</cat> <title>Custom Style Properties</title> We've added a few custom style properties to our implementation of css. Your editor might complain that these don't exist, but they do. Here's what we added | Name | Description / Notes | |-------------------|-----| | 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 | | sound-in | The name of a sound to play when this style is applied to an element for the first time. This is useful to put on a:hover style to play a sound when hovering. | | sound-out | The name of a sound to play when this style is removed from an element for the first time | | pixel-snap | If set to 1 we'll snap the UI to pixels. If your element is on screen, you probably want to snap to pixels. If it's something like an over-head name tag, something that follows the position of something in the world, you want to set this to 0. This property cascades automatically and defaults to 1. | ⤶ ⤶ # Custom pseudo-classes⤶ ⤶ There are also some custom pseudo-classes for applying transitions when an element is created or deleted. ⤶ ⤶ * `:intro` - is removed when the element is created, things will transition away from this.⤶ * `:outro` - is 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 );⤶ }⤶ }⤶ ```⤶