Leaving no element UnStyled

This week finished up pretty good with four PRs made (although a bit late :)

Continuing with the UI redesign, I did redesigned Project Details, Group Details, Search and Edit Profile pages.

The User Interface segment feels like eternity sometimes. With opening and working with every new view, there just seems so many files everytime (some of which I hadn’t even known existed on the website before).
But, making the UI completely optimized and more robust is one of the key portion of my proposal and therefore I am not gonna leave any view file unopened.

This week, although there were a couple of mini tweaks I learnt to surpass the limits of styling an element. The one most intriguing to me was redesigning the Checkboxes.

So, styling the default CSS checkbox isn’t supported. But that isn’t a reason to stop customizing them.

The trick is to hide the original checkbox and recreate another one on top of it. It starts with creating a box with background of your choice, adding an empty context element inside it using ::after selector.
Then finally around the empty context element, create an inverted L-shaped border. Looking something like this:

Now, the best part. Rotate this border (or more specifically the entire context element, to make it look like a checkbox):

And Ta-Da! Here you have your completely customizable checkbox. What more is, I have centralized the code for this checkbox; so now any contributor requires just addition of two classes in the default checkbox element to make it look like this (choosing DRY everywhere).

Moving forward, I will be working on couple more screens (trying to increase the PR count :p) this week.

Till then, Sayōnara !