Light-client: Update scss in components to use & instead of repeating containing class name

[kelsos]

Description

New styles follow the & notation to include the containing class and follow a nested structure.
Styles that were in the past were using a different flat style.

This causes an inconsistency on the templates

Acceptance criteria

• All styles follow the nested structure where the sub styles start with &
• Linting tool is in place
• All rules are in place
• Rules are enforced in the CI

Tasks

• [ ]

Additional

• Check if there is a way to enforce that automatically with some tool

[nephix]

I think we should go with https://github.com/sasstools/sass-lint because it seems to use packages that we already use. The following rules sound interesting:

• force-element-nesting
• no-color-hex
• bem-depth and nesting-depth (so we don't go overboard with nesting, probably a depth of 3 or 4 is sufficient?)
• class-name-format with some BEM convention option

[kelsos]

Sounds good :) thanks for taking time to look at it.

[andrevmatos]

Seems sass-lint is unmaintained!
I decided to go with stylelint plus stylelint-scss instead. They have rules to enforce nesting, which I'm working on.

[nephix]

Weird I guess I pasted the wrong link, meant to post something other but sass-lint. I think it was stylelint :)