From 35fec8ea6aa222572224a11b50c7fbf5fd35e5ec Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 9 Nov 2020 13:34:13 +0300
Subject: [PATCH] Convert basic scss vars to css vars

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/app.scss         | 14 +++++++++++++-
 src/renderer/components/radio/radio.scss |  2 +-
 src/renderer/components/vars.scss        | 18 +++++++++---------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/app.scss b/src/renderer/components/app.scss
index 20ca08df66..5d3b65f5e9 100755
--- a/src/renderer/components/app.scss
+++ b/src/renderer/components/app.scss
@@ -11,6 +11,18 @@
 }
 
 :root {
+  --unit: 8px;
+  --padding: var(--unit);
+  --margin: var(--unit);
+  --border-radius: 3px;
+  --font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+  --font-monospace: Lucida Console, Monaco, Consolas, monospace;
+  --font-size-small: calc(1.5 * var(--unit));
+  --font-size: calc(1.75 * var(--unit));
+  --font-size-big: calc(2 * var(--unit));
+  --font-weight-thin: 300;
+  --font-weight-normal: 400;
+  --font-weight-bold: 500;
   --mainBackground: #1e2124;
   --main-layout-header: 40px;
   --drag-region-height: 22px
@@ -122,7 +134,7 @@ code {
   vertical-align: middle;
   border-radius: $radius;
   font-family: $font-monospace;
-  font-size: $font-size * .9;
+  font-size: calc($font-size * .9);
   color: #b4b5b4;
 
   &.block {
diff --git a/src/renderer/components/radio/radio.scss b/src/renderer/components/radio/radio.scss
index a2ff7e26bb..5da04047be 100644
--- a/src/renderer/components/radio/radio.scss
+++ b/src/renderer/components/radio/radio.scss
@@ -97,7 +97,7 @@
 
   .tick {
     color: $tickColor;
-    font: $font-size * 1.3 "Material Icons";
+    font: calc($font-size * 1.3) "Material Icons";
 
     &:after {
       content: "radio_button_unchecked";
diff --git a/src/renderer/components/vars.scss b/src/renderer/components/vars.scss
index bdf49aa08c..d96b9d248f 100755
--- a/src/renderer/components/vars.scss
+++ b/src/renderer/components/vars.scss
@@ -5,17 +5,17 @@
 $unit: 8px;
 $padding: $unit;
 $margin: $unit;
-$radius: ceil($unit * .3);
+$radius: var(--border-radius);
 
 // Fonts
-$font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;
-$font-monospace: Lucida Console, Monaco, Consolas, monospace;
-$font-size-small: floor(1.5 * $unit);
-$font-size: floor(1.75 * $unit);
-$font-size-big: floor(2 * $unit);
-$font-weight-thin: 300;
-$font-weight-normal: 400;
-$font-weight-bold: 500;
+$font-main: var(--font-main);
+$font-monospace: var(--font-monospace);
+$font-size-small: var(--font-size-small);
+$font-size: var(--font-size);
+$font-size-big: var(--font-size-big);
+$font-weight-thin: var(--font-weight-thin);
+$font-weight-normal: var(--font-weight-normal);
+$font-weight-bold: var(--font-weight-bold);
 
 // Z-index correlations
 $zIndex-sidebar-hover: 500;