Skip to content

CSS Tips

Inline syntax

For simple use cases, the css property can be written as a HTML inline styles (without any CSS selector). CSS rules will apply to the widget element.

opacity: 0.5; /* make the widget's transparent */
font-size: 120%; /* increase font-size */

Selector syntax

CSS selectors can be used to apply styles to specific elements:

:host {
    /* style for the widget element
       & { } also works (deprecated)
    */
}

.label {
    /* style for the .label elements */
}

> .label {
    /* style for the direct child .label element */
}

Mixing Inline and Selector syntaxes doesn't work, once you use selectors, you have to use the :host selector to target the widget element.

Layering: z-index

Z-Axis ordering can be set using the z-index rule. Absolutely positionned widgets (when top or left is different from auto) have z-index:10; by default.

Layering: pointer-events

To make a widget ignore interactions (ie to be able to click through it), add pointer-events:none;.

This is always ignored when the editor is enabled.

Responsive sizing

In most cases, using percentages in height and width will do. CSS calc() function can help in some cases:

:host {

    width: calc(100% - 100rem);

}

Media queries can also be used:

@media screen and (min-width: 768px) {

    :host {

        /* style the widget if the screen is bigger than 768px */

    }

}

Size units

  • use rem instead of px (px values will not scale when zooming)
  • use % for font-size

CSS Variables

CSS Variables declared in the default theme can be overriden. Some widgets also use specific CSS variables (mostly to define colors) documented on their respective pages.