From 5aa54c1ce47992b78630113c7b25f1c19edf3884 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Mon, 27 Nov 2023 22:17:23 -0800
Subject: [PATCH] Extract input style to common CSS and remove raw uses of
 var(--x).

The mixin handles the fallback gracefully on browsers where it's not
supported.
---
 assets/scss/mixins.scss    | 19 +++++++++++++++++++
 assets/scss/search.scss    | 28 ++++++----------------------
 assets/scss/style.scss     |  4 ++++
 assets/scss/variables.scss |  2 ++
 4 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/assets/scss/mixins.scss b/assets/scss/mixins.scss
index ee4f75d..b9662f8 100644
--- a/assets/scss/mixins.scss
+++ b/assets/scss/mixins.scss
@@ -11,3 +11,22 @@
     }
 }
 
+@mixin green-shadow {
+    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
+}
+
+@mixin textual-input {
+  @include bordered-block;
+  box-sizing: border-box;
+  @include var(background-color, background-color);
+  @include var(color, text-color);
+  font-family: $font-body;
+  padding: $input-padding;
+
+  &:active, &:focus {
+      @include green-shadow;
+      border-color: $primary-color;
+  }
+
+  flex-grow: 1;
+}
diff --git a/assets/scss/search.scss b/assets/scss/search.scss
index 39ad120..04c878e 100644
--- a/assets/scss/search.scss
+++ b/assets/scss/search.scss
@@ -1,13 +1,8 @@
 @import "variables.scss";
 @import "mixins.scss";
 
-$search-input-padding: 0.5rem;
 $search-element-padding: 0.5rem 1rem 0.5rem 1rem;
 
-@mixin green-shadow {
-    box-shadow: 0px 0px 5px rgba($primary-color, 0.7);
-}
-
 .stork-wrapper {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
@@ -20,26 +15,15 @@ $search-element-padding: 0.5rem 1rem 0.5rem 1rem;
 }
 
 input.stork-input {
-    @include bordered-block;
-    background-color: var(--code-color);
-    color: var(--text-color);
-    font-family: $font-body;
-    padding: $search-input-padding;
-
-    &:active, &:focus {
-        @include green-shadow;
-        border-color: $primary-color;
-    }
-
-    flex-grow: 1;
+    @include textual-input;
 }
 
 .stork-close-button {
     @include bordered-block;
-    background-color: var(--code-color);
-    color: var(--text-color);
+    @include var(background-color, background-color);
+    @include var(color, text-color);
     font-family: $font-body;
-    padding: $search-input-padding;
+    padding: $input-padding;
 
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -72,11 +56,11 @@ input.stork-input {
     list-style: none;
 
     &.selected {
-        background-color: var(--code-color);
+        @include var(background-color, code-color);
     }
 
     a:hover {
-        color: var(--text-color);
+        @include var(color, text-color);
     }
 }
 
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
index 3590a78..9a984f8 100755
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@@ -78,6 +78,10 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.input[type="text"], textarea {
+  @include textual-input;
+}
+
 nav {
   width: 100%;
   margin: 0rem 0rem 1rem 0rem;
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 6fd109c..cf1d406 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -32,6 +32,8 @@ $code-lineno-color: grey;
 $code-comment-color: grey;
 $code-border: $standard-border-width solid $code-border-color;
 
+$input-padding: 0.5rem;
+
 $sidenote-padding: 1rem;
 $sidenote-highlight-border-width: .2rem;