Custom Style Properties
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 |
border-image-tint | Color: multiplies the border 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 |
text-stroke | This will put an outline around text. This property is the same as the non-standard -webkit-text-stroke property, and follows the same syntax: text-stroke: size colour |
mask-scope | default will apply the mask normally / filter will use the mask to blend between unfiltered and filtered |
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 );
}
}