Documentation

Module: rgjs/css

RGJS6 CSS module.

Methods

<static> addClass(selector, css)

Define a css class. Replaces previously defined class if the selector matches.
Note: this does not add a class to the selector element, it defines a css class in a &lt;style /&gt; tag.

Parameters:
Name Type Description
selector string

The selector for the class.
css string | array | object

The css rules for the class.
Returns:

The id of the <style> tag.

Type
string
Examples
// Using string
rgjs.css.addClass('div.header', 'margin: 5px; padding: 10px;');
// Using array
rgjs.css.addClass('div.header', [
  'margin: 5px',
  'padding: 10px',
]);
// Using object
rgjs.css.addClass('div.header', {
  'margin': '5px',
  'padding': '10px',
});

<static> addTransition(selector, transprop, transparams)

Add transitions without overriding other transition attributes on the same element.

Parameters:
Name Type Description
selector string

The selector for the element.
transprop string

The css property to add a transition for.
transparams string

The transition parameters.
Example
// Results in: `transition: transform 100ms ease 0s, opacity 100ms ease 50ms`
rgjs.css.addTransition('div.header', 'transform', '100ms ease');
rgjs.css.addTransition('div.header', 'opacity', '100ms ease 50ms');

<static> getCustomProperty(name [, opts])

Get the value of a CSS custom property.

Parameters:
Name Type Argument Default Description
name string

The name of the property, e.g. --color.
opts object <optional>
 {}

Options.

Properties
Name Type Argument Description
element HTMLElement <optional>

The element to resolve the custom property value against. Defaults to document.documentElement.
Returns:

The computed value of the CSS custom property.

Type
string
Examples
// Results in `#f00`
// CSS: `:root { --color: #f00 }`.
rgjs.css.getCustomProperty('--color');
// Results in `#fff`
// CSS: `
// root: { --color: #000; }
// .element { --color: #fff; }
// `
const element = document.querySelector('.element');
rgjs.css.getCustomProperty('--color', { element });

<static> removeTransition(selector, transprop [, force])

Remove transitions without overriding other transition attributes on the same element.
Note: If the transition was declared in a css class you need to use force = true, this will disable the rule.

Parameters:
Name Type Argument Description
selector string

The selector for the element.
transprop string

The css property to remove from the transitions.
force string <optional>

Force disable the transition, even if it's declared in a css class.
Examples
// Style: div.header { transform: color 100ms; }
// Results in: `transition: color 100ms ease 0s, transform 100ms ease 0s`, then `transition: color 100ms ease 0s`
rgjs.css.addTransition('div.header', 'transform', '100ms ease');
rgjs.css.removeTransition('div.header', 'transform');
// Style: div.header { transform: color 100ms; }
// Results in: `transition: opacity 0s linear 0s`
rgjs.css.removeTransition('div.header', 'opacity', true);