From 5a9fdcdd26b4b28d1ab9bbed792a86a8f48ecf70 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Fri, 18 Aug 2017 17:35:52 -0600
Subject: [PATCH] import css vars

---
 ui/scss/all.scss             | 1 +
 ui/scss/component/_card.scss | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index d899566ab..a63c6ec13 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -1,4 +1,5 @@
 @import "_reset";
+@import "_vars";
 @import "_icons";
 @import "_gui";
 @import "component/_table";
diff --git a/ui/scss/component/_card.scss b/ui/scss/component/_card.scss
index 65179d7ac..29869925b 100644
--- a/ui/scss/component/_card.scss
+++ b/ui/scss/component/_card.scss
@@ -75,7 +75,7 @@ $font-size-subtext-multiple: 0.82;
   top: 0px;
   bottom: 0px;
   padding: 20px;
-  background-color: rgba(128, 128, 128, 0.8);
+  background-color: var(--color-dark-overlay);
   color: #fff;
   display: flex;
   align-items: center;
@@ -98,7 +98,7 @@ $font-size-subtext-multiple: 0.82;
   overflow-y: visible
 }
 .card--link:hover ~ .card--link {
-  transform: translateX(calc(var(--translate-card-hover) * 2));
+  transform: translateX(calc(var(--card-hover-translate) * 2));
 }
 
 .card__media {
@@ -162,7 +162,7 @@ $font-size-subtext-multiple: 0.82;
 }
 
 .card--form {
-  width: calc( var(--input-width) + var(--card-padding * 2);
+  width: calc( var(--input-width) + var(--card-padding) * 2);
 }
 
 .card__subtitle {