CSS

The Brizy's CSS mechanism empowers users with the ability to dynamically customize the appearance of elements on their website without the need for coding expertise. With this feature, users can effortlessly adjust various CSS properties, such as colors, fonts, margins, and more, to achieve their desired visual style .

It supports two approaches: using selector for predefined CSS properties in combination with others controls and style for custom CSS generation.

States

In Brizy controls have 3 states that can be used to generate CSS:

• normal - is the default state and returns the simple CSS
• hover - the CSS for hover
• active - CSS for styling the active/selected item (often in lists)

Usage

To specify which states we want to have in the control, we just need to pass them to the states parameter in control definition.

type States = "normal" | "hover" | "active"

Example with only the normal state (when we don't specify a state, control works in `normal).

{
  id: "color",
  type: "colorPicker"
}

Example with normal and hover:

{
  id: "color",
  type: "colorPicker",
  states: ["normal", "hover"]
}

Example with normal, hover and active:

{
  id: "color",
  type: "colorPicker",
  states: ["normal", "hover", "active"]
}

WRAPPER placeholder

WRAPPER placeholder: {{WRAPPER}}.
This placeholder specifies where the dynamically generated CSS class name will be inserted within the selector. It is used to avoid CSS styles conflicts with other elements on the page.

Example:

{
  id: "color",
  type: "colorPicker",
  selector: "{{WRAPPER}} .brz-component"
}

In CSS output we will have:

.brz-css-gpVzg .brz-component {}

Here, the class .brz-css-gpVzg replaces the initial {{WRAPPER}} placeholder.

Selector

The selector parameter work in conjunction with other controls to apply predefined CSS properties to the selected element. The Brizy's controls that allow this functionality are :

• backgroundColor
• border
• boxShadow
• colorPicker
• corners
• filters
• margin
• padding
• textShadow
• typography

Usage

 {
  id: "backgroundCSS",
  type: "backgroundColor",
  states: ["normal", "hover"],
  selector: "{{WRAPPER}}:hover .brz-video-content"
 }

This code will apply the background color to the selected element with the selector .brz-video-content when the user interacts with the control. It will generate a similar CSS output as below:

 .brz-css-gpWLU .brz-video-content {
  background-color: #000000;
}

 .brz-css-gpWLU:hover .brz-video-content {
  background-color: #ffffff;
}

If the states array contains ACTIVE or HOVER but in the selector they won't be provided, then the control will add the pseudo class :hover (for HOVER) at the end of selector and the class ".active"(for ACTIVE) to the selector.

 {
  id: "backgroundCSS",
  type: "backgroundColor",
  states: ["normal", "active", "hover"],
  selector: "{{WRAPPER}} .brz-video-content"
 }

The CSS output will be like below:

  .brz-css-gpWLU .brz-video-content {
  background-color: #000000;
}

  .brz-css-gpWLU .brz-video-content.active {
  background-color: #ffffff;
}

  .brz-css-gpWLU .brz-video-content:hover {
  background-color: #ff0e0e;
}

Manual specification of :hover and .active

{
  id: "colorCSS",
  type: "colorPicker",
  states: ["normal", "hover", "active"]
  selector: "{{WRAPPER}} .brz-list:hover .brz-list-item.active"
}

This code will apply the color to the selected element with the selector .brz-list:hover .brz-list-item.active. The CSS output will be like below:

 .brz-css-dfEb .brz-list:hover .brz-list-item.active {
  color: #000000;
}

Multiple selectors

Multiple selectors are passed in the same string, separated by commas.

{
  id: "colorCSS",
  type: "colorPicker",
  selector: ".brz-text, .brz-title, .brz-accordion"
}

The CSS mechanism also allows you to apply the same CSS properties to multiple elements. In this case, the CSS output will be like below:

 .brz-text,
 .brz-title,
 .brz-accordion {
  color: #000000;
}

Multiple selectors with manual specification of :hover and .active

{
  id: "colorCSS",
  type: "colorPicker",
  states: ["normal", "hover", "active"],
  selector: "{{WRAPPER}}:hover .brz-text, {{WRAPPER}} .brz-title:hover.active, {{WRAPPER}} .brz-accordion.active"
}

The CSS output:

.brz-css-qfEb .brz-text {
  color: red;
}

.brz-css-qfEb:hover .brz-text {
  color: blue;
}

.brz-css-qfEb .brz-title {
  color: black;
}

.brz-css-qfEb .brz-title:hover {
  color: gray;
}

.brz-css-qfEb .brz-title.active {
  color: yellow;
}

Style

This style property allows you to create custom CSS. It's used when you need to:

• Apply your custom styles
• Return styles by some conditions
• Return styles after some logic

Usage

{
  id: "size",
  label: "Width",
  type: "slider",
  style: ({ value }) => {
    return {
      "{{WRAPPER}}.brz-map": {
        width: `${value.value}${value.unit}`
      }
    };
  }
}

This code will apply the width to the selected element with the selector .brz-map based on the value of the control. By example if the value will be equal with {value: 75, unit: "%"}, the CSS output will be like below

 .brz-css-rfeU.brz-map {
  width: 75%;
}

With multiple selectors

{
  id: "size",
  label: "Width",
  type: "slider",
  style: ({ value }) => {
    return {
      "{{WRAPPER}}:after, {{WRAPPER}}:before, {{WRAPPER}}.content": {
        width: `${value.value}${value.unit}`
      }
    };
  }
}

The CSS output will be like below:

 .brz-css-sduE:after,
 .brz-css-sduE:before,
 .brz-css-sduE.content {
  width: 20%;
}

With some logic

{
  id: "height",
  label: "Height",
  type: "slider",
  config: {
    min: 5,
    max: 100,
    units: [
      { value: "px", title: "px" },
      { value: "%", title: "%" }
    ]
  },
  style: ({ value }) => {
    const height = `${value.value}${value.unit}`;

    const percentOutput = {
      "{{WRAPPER}}:after": {
        content: "",
        display: "block",
        width: 0,
        "padding-top": height
      },

      "{{WRAPPER}} > .brz-ui-ed-map-content": {
        height
      }
    };

    if (value.unit === "%") {
      return percentOutput;
    }

    return {
      "{{WRAPPER}}.brz-map": {
        height
      }
    };
  }
}

Note

The style and selector parameters can't be used together in the same control. If both are used, the selector parameter will be ignored.