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`.

docs/presentation.md

@@ -10,11 +10,16 @@
   - [**`bootstrapping/`**](./../src/presentation/bootstrapping/): Registers Vue global objects including components and plugins.
   - [**`components/`**](./../src/presentation/components/): Contains all Vue components and their helper classes.
     - [**`Shared/`**](./../src/presentation/components/Shared): Contains Vue components and component helpers that are shared across other components.
-  - [**`styles/`**](./../src/presentation/styles/): Contains shared styles used throughout different components.
+  - [**`assets/`**](./../src/presentation/assets/styles/): Contains assets that will be processed by webpack.
+    - [**`fonts/`**](./../src/presentation/assets/fonts/): Contains fonts
+    - [**`styles/`**](./../src/presentation/assets/styles/): Contains shared styles used throughout different components.
+      - [**`components/`**](./../src/presentation/assets/styles/components): Contains styles that are reusable and tightly coupled a Vue/HTML component.
+      - [**`vendors-extensions/`**](./../src/presentation/assets/styles/third-party-extensions): Contains styles that override third-party components used.
+      - [**`main.scss`**](./../src/presentation/assets/styles/main.scss): Primary Sass file, passes along all other styles, should be the only file used from other components.
   - [**`main.ts`**](./../src/presentation/main.ts): Application entry point that mounts and starts Vue application.
-  - [`electron/`](./../src/presentation/electron/): Electron configuration for the desktop application.
+  - [**`electron/`**](./../src/presentation/electron/): Electron configuration for the desktop application.
     - [**`main.ts`**](./../src/presentation/main.ts): Main process of Electron, started as first thing when app starts.
-- [**`/public/`**](./../public/): Contains static assets that will simply be copied and not go through webpack.
+- [**`/public/`**](./../public/): Contains static assets that will directly be copied and not go through webpack.
 - [**`/vue.config.js`**](./../vue.config.js): Global Vue CLI configurations loaded by `@vue/cli-service`
 - [**`/postcss.config.js`**](./../postcss.config.js): PostCSS configurations that are used by Vue CLI internally
 - [**`/babel.config.js`**](./../babel.config.js): Babel configurations for polyfills used by `@vue/cli-plugin-babel`
@@ -50,3 +55,18 @@
     </Dialog>
     <div @click="$refs.testDialog.show()">Show dialog</div>
   ```
+
+## Sass naming convention
+
+- Use lowercase for variables/functions/mixins e.g.
+  - Variable: `$variable: value;`
+  - Function: `@function function() {}`
+  - Mixin: `@mixin mixin() {}`
+- Use - for a phrase/compound word e.g.
+  - Variable: `$some-variable: value;`
+  - Function: `@function some-function() {}`
+  - Mixin: `@mixin some-mixin() {}`
+- Grouping and name variables from generic to specific e.g.
+  - ✅ `$border-blue`, `$border-blue-light`, `$border-blue-lightest`, `$border-red`
+  - ❌ `$blue-border`, `$light-blue-border`, `$lightest-blue-border`, `$red-border`
+  

package-lock.json

@@ -5,7 +5,8 @@
   "requires": true,
   "packages": {
     "": {
-      "version": "0.11.0",
+      "name": "privacy.sexy",
+      "version": "0.11.1",
       "hasInstallScript": true,
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
@@ -27936,6 +27937,7 @@
       "integrity": "sha512-P13AJv5FDt2XnpZ92K0VMxBS7Pe+gnibxtXMsa8rXLBkEE1NkmtaG5pyXh3fulkmF2/21efOcuh6yFP7k0KuZg==",
       "dev": true,
       "requires": {
+        "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -27948,6 +27950,7 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.2.4",
         "babel-plugin-dynamic-import-node": "^2.3.3",
+        "core-js": "^3.6.5",
         "core-js-compat": "^3.6.5",
         "semver": "^6.1.0"
       }

src/presentation/assets/styles/_fonts.scss

@@ -5,13 +5,13 @@
   font-family: 'Slabo 27px';
   font-style: normal;
   font-weight: 400;
-  src: url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
+  src: url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
   src: local('Slabo 27px'), local('Slabo27px-Regular'),
-       url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('~@/presentation/styles/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */
+       url('~@/presentation/assets/fonts/slabo-27px-v6-latin-ext_latin-regular.svg#Slabo27px') format('svg'); /* Legacy iOS */
 }
 
 /* yesteryear-regular - latin */
@@ -19,15 +19,15 @@
   font-family: 'Yesteryear';
   font-style: normal;
   font-weight: 400;
-  src: url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */
+  src: url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.eot'); /* IE9 Compat Modes */
   src: local('Yesteryear'), local('Yesteryear-Regular'),
-       url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('~@/presentation/styles/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */
+       url('~@/presentation/assets/fonts/yesteryear-v8-latin-regular.svg#Yesteryear') format('svg'); /* Legacy iOS */
 }
 
-$normal-font: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+$font-normal    : 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
-$artistic-font: 'Yesteryear', cursive;
+$font-artistic  : 'Yesteryear', cursive;
-$main-font: 'Slabo 27px';
+$font-main      : 'Slabo 27px';

src/presentation/assets/styles/_globals.scss

@@ -0,0 +1,25 @@
+/* 
+    Defines global styles that applies to globally defined tags by default (body, main, article, div etc.)
+*/
+
+@use "@/presentation/assets/styles/colors" as *;
+@use "@/presentation/assets/styles/fonts" as *;
+
+
+* {
+    box-sizing: border-box;
+}
+
+a {
+    color:inherit;
+    text-decoration: underline;
+    cursor: pointer;
+    &:hover {
+        color: $color-primary;
+    }
+}
+
+body {
+    background: $color-background;
+    font-family: $font-main;
+}

src/presentation/assets/styles/_media.scss

@@ -0,0 +1,5 @@
+$media-screen-big-width         : 992px;
+$media-screen-medium-width      : 768px;
+$media-screen-small-width       : 380px;
+
+$media-vertical-view-breakpoint : 992px;

src/presentation/assets/styles/main.scss

@@ -0,0 +1,11 @@
+/* This class is not supposed to more than forwarding other styles */
+
+@forward "./fonts";
+@forward "./media";
+@forward "./colors";
+@forward "./globals";
+
+@forward "./components/card";
+
+@forward "./third-party-extensions/tooltip.scss";
+@forward "./third-party-extensions/tree.scss";

src/presentation/assets/styles/third-party-extensions/_tooltip.scss

@@ -1,5 +1,5 @@
 // Based on https://github.com/Akryum/v-tooltip/blob/83615e394c96ca491a4df04b892ae87e833beb97/demo-src/src/App.vue#L179-L303
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/colors" as *;
 
 .tooltip {
     display: block !important;

src/presentation/assets/styles/third-party-extensions/_tree.scss

@@ -0,0 +1,58 @@
+// Overrides base styling for LiquorTree
+@use "@/presentation/assets/styles/colors" as *;
+
+$color-tree-bg                          : $color-primary-darker;
+$color-node-arrow                       : $color-on-primary;
+$color-node-fg                          : $color-on-primary;
+$color-node-hover-bg                    : $color-primary-dark;
+$color-node-keyboard-bg                 : $color-surface;
+$color-node-keyboard-fg                 : $color-on-surface;
+$color-node-checkbox-bg-checked         : $color-secondary;
+$color-node-checkbox-bg-unchecked       : $color-primary-darkest;
+$color-node-checkbox-border-checked     : $color-secondary;
+$color-node-checkbox-border-unchecked   : $color-on-primary;
+$color-node-checkbox-tick-checked       : $color-on-secondary;
+
+.tree {
+    background: $color-tree-bg;
+    &-node { 
+        white-space: normal !important;
+        > .tree-content {
+            > .tree-anchor > span {
+                color: $color-node-fg;
+                text-transform: uppercase;
+                font-size: 1.5em;
+            }
+            &:hover {
+                background: $color-node-hover-bg !important;
+            }
+        }
+        &.selected { // When using keyboard navigation it highlights current item and its child items
+            background: $color-node-keyboard-bg;
+            .tree-text {
+                color: $color-node-keyboard-fg !important; //  $block
+            }
+        }
+    }
+    &-checkbox {
+        border-color: $color-node-checkbox-border-unchecked !important;
+        &.checked {
+            background: $color-node-checkbox-bg-checked !important;
+            border-color: $color-node-checkbox-border-checked !important;
+            &:after {
+                border-color: $color-node-checkbox-tick-checked !important;
+            }
+        }
+        &.indeterminate {
+            border-color: $color-node-checkbox-border-unchecked !important;
+        }
+        background: $color-node-checkbox-bg-unchecked !important;
+    }
+    &-arrow {
+        &.has-child {
+            &.rtl:after, &:after {
+                border-color: $color-node-arrow !important;
+            }
+        }
+    }
+}

src/presentation/components/App.vue

@@ -33,27 +33,7 @@ export default class App extends Vue {
 </script>
 
 <style lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
-@import "@/presentation/styles/media.scss";
-
-* {
-  box-sizing: border-box;
-}
-
-a {
-    color:inherit;
-    text-decoration: underline;
-    cursor: pointer;
-    &:hover {
-        color: $color-primary;
-    }
-}
-
-body {
-  background: $color-background;
-  font-family: $main-font;
-}
 
 #app {
   margin-right: auto;
@@ -76,6 +56,4 @@ body {
   }
 }
 
-@import "@/presentation/styles/tooltip.scss";
-@import "@/presentation/styles/tree.scss";
 </style>

src/presentation/components/Code/CodeButtons/Code.vue

@@ -25,13 +25,12 @@ export default class Code extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
 
 .code-wrapper {
     white-space: nowrap;
     justify-content: space-between;
-    font-family: $normal-font;
+    font-family: $font-normal;
     background-color: $color-primary-darker;
     color: $color-on-primary;
     padding-left: 0.3rem;

src/presentation/components/Code/CodeButtons/IconButton.vue

@@ -24,8 +24,7 @@ export default class IconButton extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
 
 .button {
     display: flex;
@@ -57,7 +56,7 @@ export default class IconButton extends Vue {
     }
     &__text {
         display: none;
-        font-family: $artistic-font;
+        font-family: $font-artistic;
         font-size: 1.5em;
         color: $color-primary;
         font-weight: 500;

src/presentation/components/Code/CodeButtons/MacOsInstructions.vue

@@ -104,8 +104,7 @@ export default class MacOsInstructions extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
 
 li {
   margin: 10px 0;

src/presentation/components/Code/TheCodeArea.vue

@@ -150,7 +150,8 @@ function getDefaultCode(language: ScriptingLanguage): string {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
+
 ::v-deep .code-area {
   min-height: 200px;
   width: 100%;

src/presentation/components/Scripts/Menu/MenuOptionList.vue

@@ -17,11 +17,11 @@ export default class MenuOptionList extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/fonts.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 $gap: 0.25rem;
 .list {
-  font-family: $normal-font;
+  font-family: $font-normal;
   display: flex;
   align-items: center;
   .items {

src/presentation/components/Scripts/Menu/MenuOptionListItem.vue

@@ -22,7 +22,7 @@ export default class MenuOptionListItem extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
 
 .enabled {
     cursor: pointer;

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;

src/presentation/components/Scripts/View/Cards/CardList.vue

@@ -105,13 +105,12 @@ function isClickable(element: Element) {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/fonts.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/components/card.scss";
 
 .cards {
   display: flex;
   flex-flow: row wrap;
-  font-family: $main-font;
+  font-family: $font-main;
   gap: $card-gap;
   /* 
     Padding is used to allow scale animation (growing size) for cards on hover.
@@ -124,6 +123,6 @@ function isClickable(element: Element) {
   width: 100%;
   text-align: center;
   font-size: 3.5em;
-  font-family: $normal-font;
+  font-family: $font-normal;
 }
 </style>

src/presentation/components/Scripts/View/Cards/CardListItem.vue

@@ -95,9 +95,7 @@ export default class CardListItem extends StatefulVue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/media.scss";
-@import "@/presentation/styles/components/card.scss";
 
 $card-inner-padding     : 30px;
 $arrow-size             : 15px;

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/DocumentationUrls.vue

@@ -24,7 +24,8 @@
 
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
+
 .documentationUrls {
     display: flex;
     flex-direction: row;

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/Node.vue

@@ -32,7 +32,8 @@
 
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
+
 #node {
   display:flex;
   flex-direction: row;

src/presentation/components/Scripts/View/ScriptsTree/SelectableTree/Node/RevertToggle.vue

@@ -52,14 +52,14 @@ export default class RevertToggle extends StatefulVue {
 
 <style scoped lang="scss">
 @use 'sass:math';
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
 
-$color-unchecked-bullet : $color-primary-darker;
+$color-bullet-unchecked : $color-primary-darker;
-$color-unchecked-text   : $color-on-primary;
+$color-bullet-checked   : $color-on-secondary;
-$color-unchecked-bg     : $color-primary;
+$color-text-unchecked   : $color-on-primary;
-$color-checked-bg       : $color-secondary;
+$color-text-checked     : $color-on-secondary;
-$color-checked-text     : $color-on-secondary;
+$color-bg-unchecked     : $color-primary;
-$color-checked-bullet   : $color-on-secondary;
+$color-bg-checked       : $color-secondary;
 $size-width             : 85px;
 $size-height            : 30px;
 
@@ -94,7 +94,7 @@ $size-height            : 30px;
         position: relative;
         width: $size-width;
         height: $size-height;
-        background-color: $color-unchecked-bg;
+        background-color: $color-bg-unchecked;
         -webkit-transition: background-color 0.25s ease-out 0s;
         transition: background-color 0.25s ease-out 0s;
 
@@ -109,7 +109,7 @@ $size-height            : 30px;
             height: $circle-size;
             border-radius: $circle-size * 2;
             -webkit-border-radius: $circle-size * 2;
-            background-color: $color-unchecked-bullet;
+            background-color: $color-bullet-unchecked;
             top: $size-height * 0.16;
             left: $size-width * 0.05;
             -webkit-transition: left 0.3s ease-out 0s;
@@ -120,11 +120,11 @@ $size-height            : 30px;
 
     input.input-checkbox:checked {
         + .checkbox-animate {
-            background-color: $color-checked-bg;
+            background-color: $color-bg-checked;
         }
         + .checkbox-animate:before {
             left: ($size-width - math.div($size-width, 3.5));
-            background-color: $color-checked-bullet;
+            background-color: $color-bullet-checked;
         }
         + .checkbox-animate .checkbox-off {
             display: none;
@@ -146,7 +146,7 @@ $size-height            : 30px;
     .checkbox-off {
         margin-left: math.div($size-width, 3);
         opacity: 1;
-        color: $color-unchecked-text;
+        color: $color-text-unchecked;
     }
 
     .checkbox-on {
@@ -154,7 +154,7 @@ $size-height            : 30px;
         float: right;
         margin-right: math.div($size-width, 3);
         opacity: 0;
-        color: $color-checked-text;
+        color: $color-text-checked;
     }
 }
 </style>

src/presentation/components/Scripts/View/TheScriptsView.vue

@@ -95,15 +95,13 @@ export default class TheScriptsView extends StatefulVue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
-@import "@/presentation/styles/media.scss";
 
-$inner-margin: 4px;
+$margin-inner: 4px;
 
 .scripts {
-    margin-top: $inner-margin;
+    margin-top: $margin-inner;
-    @media screen and (min-width: $vertical-view-breakpoint) { // so the current code is always visible
+    @media screen and (min-width: $media-vertical-view-breakpoint) { // so the current code is always visible
         overflow: auto;
         max-height: 70vh;
     }

src/presentation/components/Shared/Dialog.vue

@@ -31,12 +31,11 @@ export default class Dialog extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/fonts.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/colors.scss";
 
 .dialog {
   color: $color-surface;
-  font-family: $normal-font;
+  font-family: $font-normal;
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;

src/presentation/components/TheFooter/DownloadUrlList.vue

@@ -38,8 +38,7 @@ export default class DownloadUrlList extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/media.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/colors.scss";
 
 .container {
   display:flex;

src/presentation/components/TheFooter/PrivacyPolicy.vue

@@ -56,11 +56,12 @@ export default class PrivacyPolicy extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/fonts.scss";
+@use "@/presentation/assets/styles/main" as *;
+
 .privacy-policy {
     display: flex;
     flex-direction: column;
-    font-family: $normal-font;
+    font-family: $font-normal;
     text-align:center;
 
     .line {

src/presentation/components/TheFooter/TheFooter.vue

@@ -81,9 +81,7 @@ export default class TheFooter extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
-@import "@/presentation/styles/media.scss";
 
 .icon {
   margin-right: 0.5em;
@@ -93,13 +91,13 @@ export default class TheFooter extends Vue {
 .footer {
   display: flex;
   justify-content: space-between;
-  @media screen and (max-width: $big-screen-width) {  
+  @media screen and (max-width: $media-screen-big-width) {  
     flex-direction: column;
     align-items: center;
   }
   &__section {
     display: flex;
-    @media screen and (max-width: $big-screen-width) {  
+    @media screen and (max-width: $media-screen-big-width) {  
       justify-content: space-around;
       width:100%;  
       &:not(:first-child) {
@@ -108,13 +106,13 @@ export default class TheFooter extends Vue {
     }
     flex-wrap: wrap;
     font-size: 1rem;
-    font-family: $normal-font;
+    font-family: $font-normal;
     &__item:not(:first-child) {
       &::before {
         content: "|";
         padding: 0 5px;
       }
-      @media screen and (max-width: $big-screen-width) {  
+      @media screen and (max-width: $media-screen-big-width) {  
         margin-top: 3px;
         &::before {
           content: "";

src/presentation/components/TheHeader.vue

@@ -22,8 +22,8 @@ export default class TheHeader extends Vue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
+
 #container {
   display: flex;
   align-items: center;
@@ -37,7 +37,7 @@ export default class TheHeader extends Vue {
   .title {
     margin: 0;
     text-transform: uppercase;
-    font-family: $main-font;
+    font-family: $font-main;
     font-size: 2.5em;
     line-height: 1.1;
   }
@@ -45,7 +45,7 @@ export default class TheHeader extends Vue {
     margin: 0;
     font-size: 1.5em;
     color: $color-primary;
-    font-family: $artistic-font;
+    font-family: $font-artistic;
     font-weight: 500;
     line-height: 1.2;
   }

src/presentation/components/TheSearchBar.vue

@@ -58,8 +58,7 @@ export default class TheSearchBar extends StatefulVue {
 </script>
 
 <style scoped lang="scss">
-@import "@/presentation/styles/colors.scss";
+@use "@/presentation/assets/styles/main" as *;
-@import "@/presentation/styles/fonts.scss";
 
 .search {
   width: 100%;
@@ -81,7 +80,7 @@ export default class TheSearchBar extends StatefulVue {
   padding-right:10px;
   outline: none;
   color: $color-primary;
-  font-family: $normal-font;
+  font-family: $font-normal;
   font-size:1em;
   &:focus {
     color: $color-primary-darker;

src/presentation/styles/media.scss

@@ -1,5 +0,0 @@
-$big-screen-width: 992px;
-$medium-screen-width: 768px;
-$small-screen-width: 380px;
-
-$vertical-view-breakpoint: 992px;

src/presentation/styles/tree.scss

@@ -1,58 +0,0 @@
-// Overrides base styling for LiquorTree
-@import "@/presentation/styles/colors.scss";
-
-$color-tree-bg                              : $color-primary-darker;
-$color-node-arrow                           : $color-on-primary;
-$color-node-fg                              : $color-on-primary;
-$color-node-hover-bg                        : $color-primary-dark;
-$color-node-keyboard-bg                     : $color-surface;
-$color-node-keyboard-fg                     : $color-on-surface;
-$color-node-checkbox-checked-bg             : $color-secondary;
-$color-node-checkbox-checked-border         : $color-secondary;
-$color-node-checkbox-checked-checked-tick   : $color-on-secondary;
-$color-node-checkbox-unchecked-bg           : $color-primary-darkest;
-$color-node-checkbox-unchecked-border       : $color-on-primary;
-
-.tree {
-    background: $color-tree-bg;
-    &-node { 
-        white-space: normal !important;
-        > .tree-content {
-            > .tree-anchor > span {
-                color: $color-node-fg;
-                text-transform: uppercase;
-                font-size: 1.5em;
-            }
-            &:hover {
-                background: $color-node-hover-bg !important;
-            }
-        }
-        &.selected { // When using keyboard navigation it highlights current item and its child items
-            background: $color-node-keyboard-bg;
-            .tree-text {
-                color: $color-node-keyboard-fg !important; //  $block
-            }
-        }
-    }
-    &-checkbox {
-        border-color: $color-node-checkbox-unchecked-border !important;
-        &.checked {
-            background: $color-node-checkbox-checked-bg !important;
-            border-color: $color-node-checkbox-checked-border !important;
-            &:after {
-                border-color: $color-node-checkbox-checked-checked-tick !important;
-            }
-        }
-        &.indeterminate {
-            border-color: $color-node-checkbox-unchecked-border !important;
-        }
-        background: $color-node-checkbox-unchecked-bg !important;
-    }
-    &-arrow {
-        &.has-child {
-            &.rtl:after, &:after {
-                border-color: $color-node-arrow !important;
-            }
-        }
-    }
-}