Filtered: Use less instead of css

[s7eph4n]

Filtered: Use less instead of css

This PR includes:

• Update of RELEASE-NOTES.md
• Tests (unit/integration)
• CI build passed

[gesinn-it-gea]

@s7eph4n could it be, that this changed the order, when the styles are loaded? We encounter issues, that custom less styles defined via Chameleon now get's loaded before the SRF styles, overrriding our custom styles.

Starting with SRF 2.5.3, our custom styles do not work as before.

[s7eph4n]

I think the problem here is not the order of loading, but the specificity, that has changed for some rules.
E.g. in CSS there was this

.filtered {
...
}

.filtered-filters {
...
}

.filtered-filters .filtered-filter-spinner {
...
}

Now in Less we have

.filtered {
...
	.filtered-filters {
	...

		.filtered-filter-spinner {
		...
		}
	}
}

This compiles to

.filtered {
...
}

.filtered .filtered-filters {
...
}
.filtered .filtered-filters .filtered-filter-spinner {
...
}

So the solution is to also raise the specificity of your custom styles by wrapping everything in a rule targeting the filtered class, e.g.

.filtered {
  // YOUR STYLES HERE
}

[s7eph4n]

Or alternatively we could modify the SRF Less files to restore the less specific rules, which may be a good idea. Patches welcome. 😉

[gesinn-it-gea]

Ah, indeed, must have overlooked the nesting. We had

.panel {
  .filtered-filters {

After changing to

.panel {
  .filtered {
    .filtered-filters {

everything works as expected. Thx @s7eph4n .