Framework - Firefox display of *-title-inner elements when using outline

[guywillis]

Subject of the issue

If a parent element, such as .component, .block, or .menu, has an outline CSS property applied to it, the display of the outline does not sync up with the parent elements width and height. See screenshot below.

This issue seems localised to Firefox but for consistent visual application I would propose that the fix be applied to all browsers.

It seems like there was a fix for this previously in the Vanilla theme but I misunderstood this to be a requirement for the correct display of pageLevelProgress indicators rather than a general fix for Firefox and the indicators.

Previous issue: #2523
Previous PR: https://github.com/adaptlearning/adapt-contrib-vanilla/pull/265/files

Your environment

• FW master
• Firefox 80.0.1 (64-bit)
• Mac OSX + Windows

Proposed solution

• Remove the pageLevelProgress specificity from *-title-inner elements in .pageLevelProgressIndicator.less in Vanilla
• Move *-title-inner CSS properties to a new file, global.less in Core > Less > Core rather than having it part of the theme.

Screenshots

Firefox

Red = component dimensions
Black line = component outline dimensions