Refactor Saas naming, structure and modules

- Add more documentation.
- Use `main.scss` instead of importing components individually. This
  improves productivity without compilation errors due to missing
  imports and allows for easier future file/folder changes and
  refactorings inside `./styles`.
- Use partials with underscored naming. Because it documents that the
  files should not be individually imported.
- Introduce `third-party-extensions` folder to group styles that
  overwrites third party components.
- Refactor variable names from generic to specific.
- Use Sass modules (`@use` and `@forward`) over depreciated `@import`
  syntax.
- Separate font assets from Sass files (`styles/`). Create `assets/`
  folder that will contain both.
- Create `_globals.css` for global styling of common element instead of
  using `App.vue`.

src/presentation/components/Scripts/Slider/Handle.vue

@@ -43,7 +43,7 @@ export default class Handle extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 $color          : $color-primary-dark;
 $color-hover    : $color-primary;

src/presentation/components/Scripts/Slider/HorizontalResizeSlider.vue

@@ -40,7 +40,7 @@ export default class HorizontalResizeSlider extends Vue {
 </script>
 
 <style lang="scss" scoped>
-@import "@/presentation/styles/media.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 .slider {
     display: flex;
@@ -53,7 +53,7 @@ export default class HorizontalResizeSlider extends Vue {
         flex: 1;
         min-width: var(--second-min-width);
     }
-    @media screen and (max-width: $vertical-view-breakpoint) {
+    @media screen and (max-width: $media-vertical-view-breakpoint) {
         flex-direction: column;
         .first {
             width: auto !important;