/
Guides
/
Styling widget

Styling guide

You can use classes or css variables to manipulate widget styling.

Container

.hr-container

Happy React widget container

Supported CSS variables:

  • --hr-container-color - change container css color property

  • --hr-container-background - change container css background property

Example:

.my-widget {
  --hr-container-color: skyblue;
}

or

.my-widget .hr-container {
  color: skyblue;
}

Grid

.hr-grid

Happy React widget grid

Supported CSS variables:

  • --hr-grid-color - change grid css color property

  • --hr-grid-background - change grid css background property

  • --hr-grid-gap - (default: 15px) change grid css gap property used to space grid items

Example:

.my-widget {
  --hr-grid-gap: 20px;
}

or

.my-widget .hr-grid {
  gap: 20px;
}

Cell

.hr-cell

Happy React widget cells

Supported CSS variables:

  • --hr-cell-color - change cell css color property

  • --hr-cell-background - change cell css background property

Example:

.my-widget {
  --hr-cell-background: ultraviolet;
}

or

.my-widget .hr-cell {
  background: ultraviolet;
}

Reaction

.hr-reaction

Happy React widget reactions

Supported CSS variables:

  • --hr-reaction-color - change reaction css color property

  • --hr-reaction-background - change reaction css background property

  • --hr-reaction-border - change reaction css border property

  • --hr-reaction-border-radius - change reaction css border-radius property

Example:

.my-widget {
  --hr-reaction-border-radius: 50%;
}

or

.my-widget .hr-reaction {
  border-radius: 50%;
}

Reaction (hover)

.hr-reaction:hover

Happy React widget reactions

Supported CSS variables:

  • --hr-reaction-hover-color - change reaction css color property when its state is hovered

  • --hr-reaction-hover-background - change reaction css background property when its state is hovered

  • --hr-reaction-hover-border - change reaction css border property when its state is hovered

  • --hr-reaction-hover-border-radius - change reaction css border-radius property when its state is hovered

Example:

.my-widget {
  --hr-reaction-hover-border-radius: 50%;
}

or

.my-widget .hr-reaction:hover {
  border-radius: 50%;
}

Reaction (active)

.hr-reaction:active / .hr-reaction-active

Happy React widget reactions

Supported CSS variables:

  • --hr-reaction-active-color - change reaction css color property when its state is active

  • --hr-reaction-active-background - change reaction css background property when its state is active

  • --hr-reaction-active-border - change reaction css border property when its state is active

  • --hr-reaction-active-border-radius - change reaction css border-radius property when its state is active

Example:

.my-widget {
  --hr-reaction-active-border: 2px dotted skyblue;
}

or

.my-widget .hr-reaction:active,
.my-widget .hr-reaction-active {
  border: 2px dotted skyblue;
}
Was this page helpful?
Happy React is loading...
Last updated on November 27, 2022