Fixed vars.scss being imported multiple times (#528)

- Seperated breakpoints into a different file

ui/scss/all.scss

@@ -1,6 +1,7 @@
 @charset "utf-8";
 
 @import 'init/reset';
+@import 'init/breakpoints';
 @import 'init/vars';
 @import 'init/mixins';
 @import 'init/gui';

ui/scss/component/_animation.scss

@@ -5,7 +5,7 @@
   }
 
   100% {
-    margin-top: $spacing-vertical;
+    margin-top: var(--spacing-vertical);
     opacity: 1;
   }
 }

ui/scss/component/_comment-create.scss

@@ -1,4 +1,4 @@
-@import '../init/vars';
+@import '../init/breakpoints';
 
 $thumbnailWidth: 1.5rem;
 $thumbnailWidthSmall: 1rem;

ui/scss/component/_emote-selector.scss

@@ -1,4 +1,4 @@
-@import '../init/vars';
+@import '../init/breakpoints';
 
 .emoteSelector {
   animation: menu-animate-in var(--animation-duration) var(--animation-style);

ui/scss/component/_file-price.scss

@@ -1,4 +1,4 @@
-@import '../init/vars.scss';
+@import '../init/breakpoints';
 
 .filePrice {
   position: relative;

ui/scss/component/_sticker-selector.scss

@@ -1,4 +1,4 @@
-@import '../init/vars';
+@import '../init/breakpoints';
 
 .stickerSelector {
   animation: menu-animate-in var(--animation-duration) var(--animation-style);

ui/scss/component/_view_count.scss

@@ -1,4 +1,4 @@
-@import '../init/vars';
+@import '../init/breakpoints';
 
 .contains_view_count {
   // accommodating for large view counts on channel overview

ui/scss/component/claim-preview-reset.scss

@@ -1,4 +1,4 @@
-@import '../init/vars';
+@import '../init/breakpoints';
 
 .claimPreviewReset {
   display: flex;

ui/scss/component/notifications-banner.scss

@@ -1,4 +1,4 @@
-@import '../init/vars';
+@import '../init/breakpoints';
 
 .browserNotificationsBanner {
   display: flex;

ui/scss/init/_breakpoints.scss

@@ -0,0 +1,5 @@
+$breakpoint-xxsmall: 450px;
+$breakpoint-xsmall: 600px;
+$breakpoint-small: 900px;
+$breakpoint-medium: 1150px;
+$breakpoint-large: 1600px;

ui/scss/init/_gui.scss

@@ -228,7 +228,7 @@ textarea {
   display: flex;
 
   .column__item:not(:first-child) {
-    padding-left: $spacing-width * 2/3;
+    padding-left: calc(var(--spacing-width) * 2 / 3);
     flex: 1;
   }
 
@@ -361,11 +361,11 @@ textarea {
   border: 3px solid white;
 
   &.qr-code--right-padding {
-    margin-right: $spacing-vertical * 2/3;
+    margin-right: calc(var(--spacing-vertical) * 2 / 3);
   }
 
   &.qr-code--top-padding {
-    margin-top: $spacing-vertical * 2/3;
+    margin-top: calc(var(--spacing-vertical) * 2 / 3);
   }
 }
 

ui/scss/init/_vars.scss

@@ -1,12 +1,4 @@
-// Both of these should probably die and become variables as well
-$spacing-vertical: 2rem;
-$spacing-width: 36px;
-
-$breakpoint-xxsmall: 450px;
-$breakpoint-xsmall: 600px;
-$breakpoint-small: 900px;
-$breakpoint-medium: 1150px;
-$breakpoint-large: 1600px;
+@import 'breakpoints';
 
 :root {
   --border-radius: 10px;
@@ -24,6 +16,8 @@ $breakpoint-large: 1600px;
   --spacing-l: 2rem;
   --spacing-xl: 3rem;
   --spacing-xxl: 4rem;
+  --spacing-vertical: 2rem;
+  --spacing-width: 36px;
 
   // Aspect ratio
   --aspect-ratio-bluray: 41.6666666667%; // 12:5