INTRODUCTION
IntroductionCore ConceptsGETTING STARTED
InstallationQuick startWhirl Compiler SettingsCORE CONCEPTS
Using Utility ClassesStyle FunctionsPseudo-Classes and statesResponsive DesignResponsive Base ElementThemeArbitrary ValuesLAYOUT
aspect-ratiodisplayoverflowpositionvisibilityobject-fittop / right / bottom / leftFLEXBOX
flex-basisflex-directionflex-wrapflexflex-growflex-shrinkgapjustify-contentalign-contentalign-itemsalign-selfSPACING
paddingmarginSIZING
widthmin-widthmax-widthheightmin-heightmax-heightTYPOGRAPHY
font-sizefont-styleauto-sizetext-outlineletter-spacingtext-aligncolorword-spacingparagraph-spacingtext-overflowoverflow-positionwhite-spaceBACKGROUND
background-colorbackground-imagebackground-positionbackground-repeatbackground-sizeBORDER
border-radiusborder-widthborder-colorEFFECTS
text-shadowopacityFILTER
Filterblurbrightnesscontrastgrayscalehue-rotateinvertsaturatesepiaTRANSITION
transition-propertytransition-durationtransition-timing-functiondelayTRANSFORM
rotatescaletransform-origintranslatetransition-property
| Class | Styles |
|---|---|
| transition | transition-property: color, background-color, margin, width, height, border-width, border-color, opacity, transform, translate, scale, rotate, filter, display; transition-timing-function: ease-in-out; transition-duration: 150ms; |
| transition-all | transition-property: all; transition-timing-function: ease-in-out; transition-duration: 150ms; |
| transition-colors | transition-property: color, background-color, border-color; transition-timing-function: ease-in-out; transition-duration: 150ms; |
| transition-opacity | transition-property: opacity; transition-timing-function: ease-in-out; transition-duration: 150ms; |
| transition-transform | transition-property: transform, translate, scale, rotate; transition-timing-function: ease-in-out; transition-duration: 150ms; |
| transition-none | transition-property: none; transition-timing-function: ease-in-out; transition-duration: 150ms; |
| transition-(<custom-property>) | transition-property: var(<custom-property>); transition-timing-function: ease-in-out; transition-duration: 150ms; |
| transition-[<value>] | transition-property: <value>; transition-timing-function: ease-in-out; transition-duration: 150ms; |