MAINT update dependencies

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Upcoming version
 
-
+- MAINT update dependencies
 
 ### Version 3.21.0
 

package.json

@@ -17,9 +17,9 @@
     "@fortawesome/vue-fontawesome": "^0.1.10",
     "@vue/cli-service": "^5.0.8",
     "prom-client": "^13.0.0",
-    "vue": "^2.6.12",
+    "vue": "^2.7.16",
     "vue-template-compiler": "^2.7.15",
-    "vuex": "^3.6.0",
+    "vuex": "^3.6.2",
     "ws": "^7.4.6"
   },
   "devDependencies": {

src/App.vue

@@ -145,7 +145,8 @@ export default {
 </script>
 
 <style lang="scss">
-@import "vars";
+@use "vars" as *;
+@use "media" as *;
 
 @font-face {
   font-family: "Papyrus";
@@ -181,8 +182,6 @@ body {
   overflow: hidden;
 }
 
-@import "media";
-
 * {
   box-sizing: border-box;
   position: relative;

src/components/Menu.vue

@@ -412,7 +412,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../vars.scss";
+@use "../vars.scss" as *;
 
 // success animation
 @keyframes greenToWhite {

src/components/Player.vue

@@ -419,7 +419,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../vars.scss";
+@use "../vars.scss" as *;
 
 .fold-enter-active,
 .fold-leave-active {

src/components/TownInfo.vue

@@ -140,7 +140,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../vars.scss";
+@use "../vars.scss" as *;
 
 .info {
   position: absolute;

src/components/TownSquare.vue

@@ -495,7 +495,7 @@ export default {
 
 <style lang="scss">
 @use "sass:math";
-@import "../vars.scss";
+@use "../vars.scss" as *;
 
 #townsquare {
   width: 100%;

src/components/Vote.vue

@@ -345,7 +345,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../vars.scss";
+@use "../vars.scss" as *;
 
 #vote {
   position: absolute;

src/components/modals/EditionModal.vue

@@ -333,7 +333,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 ul {
   width: 100%;
 }

src/components/modals/FabledModal.vue

@@ -46,7 +46,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 
 ul.tokens li {
   border-radius: 50%;

src/components/modals/GameStateModal.vue

@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 
 h3 {
   margin: 0 40px;

src/components/modals/NightOrderModal.vue

@@ -280,7 +280,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 
 .toggle {
   position: absolute;

src/components/modals/ReferenceModal.vue

@@ -153,7 +153,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 
 .toggle {
   position: absolute;

src/components/modals/RoleModal.vue

@@ -113,7 +113,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 
 ul.tokens li {
   border-radius: 50%;

src/components/modals/RolesModal.vue

@@ -190,7 +190,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 
 ul.tokens {
   padding-left: 5vmin;

src/components/modals/VoteHistoryModal.vue

@@ -114,7 +114,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../vars.scss";
+@use "../../vars.scss" as *;
 
 .clear {
   position: absolute;