Styling guide

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

• Container
• Grid
• Cell
• Reaction
• Reaction (hover)
• Reaction (active)

Container

.hr-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

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

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

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

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

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