Fix scss deprecation warnings

[nytamin]

About the Contributor

This pull request is posted on behalf of the NRK.

Type of Contribution

This is a:

Code improvement

Current Behavior

When starting up in development mode, there are a lot of warnings in the console:

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
[VITE] rules will be changing to match the behavior specified by CSS in an upcoming
[VITE] version. To keep the existing behavior, move the declaration above the nested
[VITE] rule. To opt into the new behavior, wrap the declaration in `& {}`.
[VITE]
[VITE] More info: https://sass-lang.com/d/mixed-decls

[...]

DEPRECATION WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
[VITE]
[VITE] Recommendation: math.div($segment-header-width, 2) or calc($segment-header-width / 2)
[VITE]
[VITE] More info and automated migrator: https://sass-lang.com/d/slash-div

New Behavior

No warnings, after I refactored the .scss files:

• moved up any declarations that where below any nested rules
• wrapped divisions in calc()

Testing

• I have added one or more unit tests for this PR
• I have updated the relevant unit tests
• No unit test changes are needed for this PR

Affected areas

(If done improperly) This PR affects the GUI of Sofie.

Time Frame

Not urgent, but we would like to get this merged into the in-development release asap, to improve developer experience.

Other Information

Status

• PR is ready to be reviewed.
• The functionality has been tested by the author.
• Relevant unit tests has been added / updated.
• Relevant documentation (code comments, system documentation) has been added / updated.
  "utf-8-validate" requires latest node-gyp-build

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 60.38%. Comparing base (d7a216d) to head (a96f615).
Report is 33 commits behind head on release52.

Additional details and impacted files

@@              Coverage Diff              @@
##           release52    #1339      +/-   ##
=============================================
- Coverage      60.39%   60.38%   -0.02%     
=============================================
  Files            461      461              
  Lines          79502    79534      +32     
  Branches        5055     4492     -563     
=============================================
+ Hits           48019    48027       +8     
- Misses         31338    31386      +48     
+ Partials         145      121      -24     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.