Hover, Focus, and Other States

Every element you can find in OHASIS, be it fields, buttons, forms, tables, etc., has its own unique look. In addition to the way they normally look like, they also have alternative designs to indicate specific status' such as success, errors, infos, etc.

We call these "designs" as their state. Let's have a look at the various types of states that you will encounter.

#Default

The normal way that the various elements look like in OHASIS. Whether you just wanna look at the pretty colors, or opening up a blank form, this is what you wil usually see.

#Disabled

You shall not pass! Seriously though, this will indicate that you cannot interact with that element. This could be because you don't have the necessary permissions or that there are other requirements for the element.

Usually, you'll encounter greyed out fields that signal this state.

#Focus

Most evident in forms, when you press the Tab button. This is when your cursor is currently inside the element. Useful to know so that you're always aware where you are editing.

Elements that are focused will have their borders highlighted in teal, the color of OHASIS.

#Error

So you know when you did something wrong! Every time you submit data that doesn't align with some of the logic OHASIS adheres to, it will throw of an error and tell you what that error is and what you should change.

Mostly on inputs, their colors will change to red accents so that they're easy to spot.