From bf3c8e6a698dd4d300ff95b8b5ab05022697d285 Mon Sep 17 00:00:00 2001
From: Jed Fox <git@twopointzero.us>
Date: Sun, 12 Aug 2018 07:38:33 -0400
Subject: [PATCH] Remove illegal usages of CSS variables in SCSS functions

This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me.
---
 assets/stylesheets/components/_content.scss     | 4 +---
 assets/stylesheets/components/_header.scss      | 2 +-
 assets/stylesheets/global/_variables-dark.scss  | 1 +
 assets/stylesheets/global/_variables-light.scss | 1 +
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/stylesheets/components/_content.scss b/assets/stylesheets/components/_content.scss
index 01c5f0d6..c2387836 100644
--- a/assets/stylesheets/components/_content.scss
+++ b/assets/stylesheets/components/_content.scss
@@ -416,14 +416,12 @@
   line-height: normal;
   white-space: nowrap;
   padding: .375rem .675rem;
-  background-image: linear-gradient(lighten(var(--boxBackground), 4%), darken(var(--boxBackground), 2%));
+  background-color: var(--boxBackground);
   border: 1px solid var(--boxBorder);
   border-radius: 3px;
-  box-shadow: 0 1px rgba(var(--boxBorder), .08);
   cursor: pointer;
 
   &:active {
-    background-color: var(--boxBackground);
     box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder);
   }
 }
diff --git a/assets/stylesheets/components/_header.scss b/assets/stylesheets/components/_header.scss
index 1ac9d78a..5bae8901 100644
--- a/assets/stylesheets/components/_header.scss
+++ b/assets/stylesheets/components/_header.scss
@@ -164,7 +164,7 @@
   font-size: .875rem;
   background: var(--contentBackground);
   border: 1px solid;
-  border-color: darken(var(--headerBorder), 2%);
+  border-color: var(--searchBorder);
   border-radius: 3px;
 
   &:focus {
diff --git a/assets/stylesheets/global/_variables-dark.scss b/assets/stylesheets/global/_variables-dark.scss
index d2343705..5b735a37 100644
--- a/assets/stylesheets/global/_variables-dark.scss
+++ b/assets/stylesheets/global/_variables-dark.scss
@@ -28,6 +28,7 @@ html.dark {
   --headerBackground: #1c1c1c;
   --headerBorder: #000;
   --searchTagBackground: darken(#1c1c1c, 5%);
+  --searchBorder: darken(#000, 2%)
 
   --sidebarBackground: #24282a;
   --transparentSidebarBackground: rgba(#24282a, 0);
diff --git a/assets/stylesheets/global/_variables-light.scss b/assets/stylesheets/global/_variables-light.scss
index ae07d9b0..13b74b3a 100644
--- a/assets/stylesheets/global/_variables-light.scss
+++ b/assets/stylesheets/global/_variables-light.scss
@@ -28,6 +28,7 @@ html:not(.dark) {
   --headerBackground: #eee;
   --headerBorder: #d7d7d7;
   --searchTagBackground: darken(#eee, 5%);
+  --searchBorder: darken(#d7d7d7, 2%)
 
   --sidebarBackground: #f9f9f9;
   --transparentSidebarBackground: rgba(#f9f9f9, 0);