# `ElementorexCms.Style`
[🔗](https://github.com/rocket4ce/elementorex_cms/blob/v0.1.0/lib/elementorex_cms/style.ex#L1)

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.

# `base_css`

The base stylesheet of rich text (`.exr-rich`), included with every document.

# `css`

```elixir
@spec css(ElementorexCms.Document.t(), keyword()) :: String.t()
```

The stylesheet of a document. Options:

  * `:mode` - `:public` (default) or `:editor`
  * `:base` - include `base_css/0` (default `true`)

# `doc_selector`

```elixir
@spec doc_selector(ElementorexCms.Document.t()) :: String.t()
```

CSS selector of a document (its root carries `data-ex-doc`).

# `media`

Media queries of the responsive states: `%{"tablet" => ..., "mobile" => ...}`.

# `node_css`

```elixir
@spec node_css(map(), keyword()) :: String.t()
```

CSS of a single node (its states, visibility, animation and custom CSS),
formatted for reading. Used by the editor's code panel.

# `pretty`

```elixir
@spec pretty(String.t()) :: String.t()
```

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}"

# `selector`

```elixir
@spec selector(map() | String.t()) :: String.t()
```

CSS selector of a node.

---

*Consult [api-reference.md](api-reference.md) for complete listing*