From 6455f499562d7d4d2f19b08ab948b92c3a0e6896 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Fri, 18 Aug 2017 18:06:53 -0600
Subject: [PATCH] minor fix for broken styles / animation

---
 ui/scss/_global.scss               | 2 +-
 ui/scss/_vars.scss                 | 8 ++++++--
 ui/scss/component/_button.scss     | 2 +-
 ui/scss/component/_form-field.scss | 7 +++----
 ui/scss/component/_header.scss     | 6 +++---
 ui/scss/component/_video.scss      | 2 +-
 6 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/ui/scss/_global.scss b/ui/scss/_global.scss
index 5e25adf46..f3ce3fea0 100644
--- a/ui/scss/_global.scss
+++ b/ui/scss/_global.scss
@@ -144,7 +144,7 @@ $width-page-constrained: 800px;
   &:hover
   {
     opacity: $hover-opacity;
-    transition: opacity var(--transition-standard);
+    transition: opacity  var(--transition-duration) var(--transition-type);
     text-decoration: underline;
     .icon {
       text-decoration: none;
diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
index 5d9e3a75c..22f992f6f 100644
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@@ -28,10 +28,13 @@
 
   /* Misc */
   --content-max-width: 1000px;
-  --standard-transition: .225s ease;
   --nsfw-blur-intensity: 20px;
   --height-video-embedded: $width-page-constrained * 9 / 16 ;
 
+  /* Transitions */
+  --transition-duration: .225s;
+  --transition-type: ease;
+
   /* Text */
   --text-color: #000;
   --text-max-width: 660px;
@@ -47,9 +50,10 @@
   --button-height: $spacing-vertical * 1.5;
 
   /* Header */
-  --header-bg: #FFF;
+  --header-bg: var(--color-bg);
   --header-color: #666;
   --header-height: $spacing-vertical * 2.5;
+  --header-shadow: var(--box-shadow-layer);
 
   /* Window */
   --window-bg: var(--color-canvas);
diff --git a/ui/scss/component/_button.scss b/ui/scss/component/_button.scss
index 9f8646f54..8a2d945f0 100644
--- a/ui/scss/component/_button.scss
+++ b/ui/scss/component/_button.scss
@@ -52,7 +52,7 @@ $button-focus-shift: 12%;
 .button-primary
 {
 
-  color: inherit;
+  color: var(--button-primary-color);
   background-color: var(--button-primary-bg);
   box-shadow: var(--box-shadow-layer);
   &:focus {
diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss
index ab0656f1f..050a4cd27 100644
--- a/ui/scss/component/_form-field.scss
+++ b/ui/scss/component/_form-field.scss
@@ -44,8 +44,7 @@ input[type="text"].input-copyable {
   }
 
   select {
-    transition: outline var(--standar-transition);
-    cursor: pointer;
+    transition: outline var(--transition-duration) var(--transition-type);
     box-sizing: border-box;
     padding-left: 5px;
     padding-right: 5px;
@@ -65,7 +64,7 @@ input[type="text"].input-copyable {
     @include placeholder {
       //color: lighten($color-text-dark, 60%);
     }
-    transition: all var(--standar-transition);
+    transition: all  var(--transition-duration) var(--transition-type);
     cursor: pointer;
     padding-left: 1px;
     padding-right: 1px;
@@ -154,7 +153,7 @@ input[type="text"].input-copyable {
 .form-field__error, .form-field__helper {
   margin-top: $spacing-vertical * 1/3;
   font-size: 0.8em;
-  transition: opacity var(--standar-transition);
+  transition: opacity  var(--transition-duration) var(--transition-type);
 }
 
 .form-field__error {
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index f107d991b..9e6498c8e 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -50,7 +50,7 @@ $color-header-active: darken($color-header, 20%);
   @include border-radius(2px);
   border: 1px solid #ccc;
   &:focus {
-    color: var(--color-header-active);
+    color: $color-header-active;
     box-shadow: var(--box-shadow-focus);
     border-color: var(--color-primary);
   }
@@ -81,12 +81,12 @@ nav.sub-header
     }
     &.sub-header-selected
     {
-      border-bottom: $sub-header-selected-underline-height solid var(--color-header-active);
+      border-bottom: $sub-header-selected-underline-height solid $color-header-active;
       color: $color-header-active;
     }
     &:hover
     {
-      color:  var(--color-header-active);
+      color: $color-header-active;
     }
   }
 }
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss
index 0f7f860ff..563e726d1 100644
--- a/ui/scss/component/_video.scss
+++ b/ui/scss/component/_video.scss
@@ -125,6 +125,6 @@ video {
   top: 0;
   &:hover {
     opacity: 1;
-    transition: opacity var(--standar-transition);
+    transition: opacity var(--transition-duration) var(--transition-type);
   }
 }