Builds the stylesheet of a document from the styles of its nodes.
Each node's declarations are scoped to its id. Desktop styles are the base;
tablet and mobile override them below their breakpoints, which match
Tailwind's lg and md (so max-lg:/max-md: classes and these styles agree):
| State | Applies |
|---|---|
desktop | always (base) |
tablet | max-width: 1023.98px |
mobile | max-width: 767.98px |
hover | :hover of the element |
Also written here: Hide on (per device), entrance animations (only when the
visitor has no reduced-motion preference) and the hand-written CSS of nodes and
of the document, nested in their scope (see ElementorexCms.CSS.scope/2).
On the editor canvas hidden elements are dimmed instead of removed, so they can still be selected.
Summary
Functions
The base stylesheet of rich text (.exr-rich), included with every document.
The stylesheet of a document. Options
CSS selector of a document (its root carries data-ex-doc).
Media queries of the responsive states: %{"tablet" => ..., "mobile" => ...}.
CSS of a single node (its states, visibility, animation and custom CSS), formatted for reading. Used by the editor's code panel.
Formats a stylesheet one declaration per line, for display.
CSS selector of a node.
Functions
The base stylesheet of rich text (.exr-rich), included with every document.
@spec css(ElementorexCms.Document.t(), keyword()) :: String.t()
The stylesheet of a document. Options:
:mode-:public(default) or:editor:base- includebase_css/0(defaulttrue)
@spec doc_selector(ElementorexCms.Document.t()) :: String.t()
CSS selector of a document (its root carries data-ex-doc).
Media queries of the responsive states: %{"tablet" => ..., "mobile" => ...}.
CSS of a single node (its states, visibility, animation and custom CSS), formatted for reading. Used by the editor's code panel.
Formats a stylesheet one declaration per line, for display.
iex> ElementorexCms.Style.pretty("a{color:red;margin:0}")
"a {\n color: red;\n margin: 0;\n}"CSS selector of a node.