CSS modifiers applied incorrectly

[timkinnane]

@ggazzo I found a CSS bug that I don't quite understand, regarding the use of a CSS protocol I only just learned is called BEM. This bug relates to syntax modifiers on the header.

The file changes seem to track to your PR #10300 but I'm not sure if that's the source of the css or maybe you just modified something else in the file.

In the header CSS, there's a __block modifier, which I assume is applied by JS to change the display mode for different views / device versions? It's removing the padding from the unmodified class. See source here:

https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/rocketchat-theme/client/imports/components/header.css#L2

Example here:

I think it's incorrectly replacing instead of adding to to the base class styles. I'm not sure if all the BEM modifiers are broken or just this one. There's quite a few weird UI display alignment issues showing up lately.

[timkinnane]

Ping @MartinSchoeler - lots of your changes in that file too, maybe you know what's up?

[tassoevan]

there's a __block modifier

Actually, it is an element; modifiers in BEM are delimited by --.

The header.rc-header element is not losing its padding, but I'm seeing two problems with the hamburger menu:

1. The .rc-header--burger class should implement some padding respecting RTL and LTR text directions;
2. The .rc-header--burger class should be, to keep BEM semantics, .rc-header__burger.