Classes

Oxygen’s design system is centered around classes. After you add a class to an element, you’ll then be able to modify the styles of the class. Classes may be applied to more than one element, and an element may have more than one class.

All classes added in Oxygen may be managed through the Selectors Panel.

Adding a Class

To add a class to an element:

1. Click into the Classes control or click the ∨ icon in the Properties panel.
2. Type in a class name.
3. Press enter.

Styling a Class

When a class is selected, there will be various styling options available in the Controls List of the Properties panel.

Class Actions

There are several Class Actions available when clicking the ∨ icon next to the Class.

• Rename: Change the name of the class.
• Duplicate: Create a new class with the same design settings as the current class.
• Remove: Removes the class from the currently selected element.
• Delete: This will delete the class from Oxygen entirely.
• Lock/Unlock: Locks the class so it is no longer editable.
• States: States will allow you to work with pseudo-classes for the selected class.
  • &:hover: This state will allow you to set the hover styles for the class.
  • &:active: This state allows you to control the class when the element is activated by the user.
  • &:focus: This state lets you set the class design when it has focus.
  • &:focus-within: matches an element if the element or any of its descendants are focused.
  • &:focus-visible: Useful for when an element has focus and the user agent identifies that the element should be visibly focused.
• Nested Selectors: Nested selectors allow you to create and manage nested selectors for the class. Nested selectors are useful for creating additional pseudo-classes or targeting classes of sub elements within a container.