From a655bdd1d65c6ee52abbf6a038a8710d05dbf282 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sat, 12 Aug 2017 23:03:15 -0600
Subject: [PATCH] init css vars implementation

---
 ui/scss/_global.scss | 74 +++++++++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 35 deletions(-)

diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss
index b554b77a1..d9ffa3949 100644
--- a/ui/scss/_global.scss
+++ b/ui/scss/_global.scss
@@ -1,46 +1,50 @@
 @charset "UTF-8";
 
-$spacing-vertical: 24px;
+:root {
 
-$padding-button: 12px;
-$padding-text-link: 4px;
+  --spacing-vertical: 24px;
 
-$color-primary: #155B4A;
-$color-primary-light: saturate(lighten($color-primary, 50%), 20%);
-$color-light-alt: hsl(hue($color-primary), 15, 85);
-$color-text-dark: #000;
-$color-black-transparent: rgba(32,32,32,0.9);
-$color-help: rgba(0,0,0,.6);
-$color-notice: #8a6d3b;
-$color-error: #a94442;
-$color-load-screen-text: #c3c3c3;
-$color-canvas: #f5f5f5;
-$color-bg: #ffffff;
-$color-bg-alt: #D9D9D9;
-$color-money: #216C2A;
-$color-meta-light: #505050;
-$color-form-border: rgba(160,160,160,.5);
+  --padding-button: 12px;
+  --padding-text-link: 4px;
 
-$font-size: 16px;
-$font-line-height: 1.3333;
+  --color-primary: #155B4A;
+  /* --color-primary-light: saturate(lighten(--color-primary, 50%), 20%); */
+  /* --color-light-alt: hsl(hue(--color-primary), 15, 85); */
+  --color-text-dark: #000;
+  --color-black-transparent: rgba(32,32,32,0.9);
+  --color-help: rgba(0,0,0,.6);
+  --color-notice: #8a6d3b;
+  --color-error: #a94442;
+  --color-load-screen-text: #c3c3c3;
+  --color-canvas: #f5f5f5;
+  --color-bg: #ffffff;
+  --color-bg-alt: #D9D9D9;
+  --color-money: #216C2A;
+  --color-meta-light: #505050;
+  --color-form-border: rgba(160,160,160,.5);
 
-$mobile-width-threshold: 801px;
-$max-content-width: 1000px;
-$max-text-width: 660px;
+  --font-size: 16px;
+  --font-line-height: 1.3333;
 
-$width-page-constrained: 800px;
-$width-input-text: 330px;
+  --mobile-width-threshold: 801px;
+  --max-content-width: 1000px;
+  --max-text-width: 660px;
 
-$height-button: $spacing-vertical * 1.5;
-$height-header: $spacing-vertical * 2.5;
-$height-video-embedded: $width-page-constrained * 9 / 16;
+  --width-page-constrained: 800px;
+  --width-input-text: 330px;
 
-$box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
-$box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
+  --height-button: --spacing-vertical * 1.5;
+  --height-header: --spacing-vertical * 2.5;
+  --height-video-embedded: --width-page-constrained * 9 / 16;
 
-$transition-standard: .225s ease;
+  --box-shadow-layer: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
+  --box-shadow-focus: 2px 4px 4px 0 rgba(0,0,0,.14),2px 5px 3px -2px rgba(0,0,0,.2),2px 3px 7px 0 rgba(0,0,0,.12);
 
-$blur-intensity-nsfw: 20px;
+  --transition-standard: .225s ease;
+
+  --blur-intensity-nsfw: 20px;
+
+}
 
 @mixin clearfix()
 {
@@ -163,7 +167,7 @@ $blur-intensity-nsfw: 20px;
   overflow:hidden;
 }
 
-@mixin text-link($color: $color-primary, $hover-opacity: 0.70) {
+@mixin text-link($color: var(--color-primary), $hover-opacity: 0.70) {
   .icon
   {
     &:first-child {
@@ -183,7 +187,7 @@ $blur-intensity-nsfw: 20px;
   &:hover
   {
     opacity: $hover-opacity;
-    transition: opacity $transition-standard;
+    transition: opacity var(--transition-standard);
     text-decoration: underline;
     .icon {
       text-decoration: none;
@@ -192,4 +196,4 @@ $blur-intensity-nsfw: 20px;
 
   color: $color;
   cursor: pointer;
-}
\ No newline at end of file
+}