From 090d41f8d9cd42bc67acbd019e1257a1180e8f8f Mon Sep 17 00:00:00 2001
From: Jos de Jong <wjosdejong@gmail.com>
Date: Sat, 4 Jan 2020 16:05:25 +0100
Subject: [PATCH] Fix #877: Some CSS styling issues when used in combination
 with Materialize

---
 HISTORY.md                   |  1 +
 src/js/showTransformModal.js |  2 +-
 src/scss/contextmenu.scss    |  3 ++
 src/scss/jsoneditor.scss     | 17 ++++++++++-
 src/scss/reset.scss          | 57 +++++++++++++++++++++++++++---------
 src/scss/searchbox.scss      |  1 +
 6 files changed, 65 insertions(+), 16 deletions(-)

diff --git a/HISTORY.md b/HISTORY.md
index 818b2f0..9c78ba7 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -7,6 +7,7 @@ https://github.com/josdejong/jsoneditor
 
 - Fix #873: buttons Format, Compact, and Repair not supporting 
   internationalization.
+- Fix #877: Some CSS styling issues when used in combination with Materialize.
 
 
 ## 2019-12-28, version 8.1.1
diff --git a/src/js/showTransformModal.js b/src/js/showTransformModal.js
index 3dca223..2482b1f 100644
--- a/src/js/showTransformModal.js
+++ b/src/js/showTransformModal.js
@@ -45,7 +45,7 @@ export function showTransformModal (container, json, onTransform) {
       '            </select>' +
       '          </div>' +
       '          <div class="jsoneditor-inline jsoneditor-jmespath-filter-value" >' +
-      '            <input placeholder="value..." id="filterValue" />' +
+      '            <input type="text" class="value" placeholder="value..." id="filterValue" />' +
       '          </div>' +
       '        </td>' +
       '      </tr>' +
diff --git a/src/scss/contextmenu.scss b/src/scss/contextmenu.scss
index 15b1c4a..0a2d8be 100644
--- a/src/scss/contextmenu.scss
+++ b/src/scss/contextmenu.scss
@@ -400,6 +400,8 @@
 .jsoneditor-modal select,
 .jsoneditor-modal textarea,
 .jsoneditor-modal input,
+.jsoneditor-modal input[type="text"],
+.jsoneditor-modal input[type="text"]:focus,
 .jsoneditor-modal #query {
   background: #ffffff;
   border: 1px solid $jse-bar-border;
@@ -414,6 +416,7 @@
 .jsoneditor-modal option,
 .jsoneditor-modal textarea,
 .jsoneditor-modal input,
+.jsoneditor-modal input[type="text"],
 .jsoneditor-modal #query {
   font-size: 10.5pt;
   font-family: $jse-font;
diff --git a/src/scss/jsoneditor.scss b/src/scss/jsoneditor.scss
index 15eb310..1da0491 100644
--- a/src/scss/jsoneditor.scss
+++ b/src/scss/jsoneditor.scss
@@ -567,4 +567,19 @@ pre.jsoneditor-preview,
   100% {
     opacity: 1;
   }
-}
\ No newline at end of file
+}
+
+// override some styles which where cleared in reset.scss
+.jsoneditor-modal {
+  input[type="search"].selectr-input {
+    border: 1px solid #d3d3d3;
+    width: calc(100% - 4px);
+    margin: 2px;
+    padding: 4px;
+    box-sizing: border-box;
+  }
+
+  button.selectr-input-clear {
+    right: 8px;
+  }
+}
diff --git a/src/scss/reset.scss b/src/scss/reset.scss
index d814fb3..3bc2a06 100644
--- a/src/scss/reset.scss
+++ b/src/scss/reset.scss
@@ -1,24 +1,53 @@
 @import "styles";
 
-.jsoneditor {
-  .search {
-    input {
-      height: auto;
+.jsoneditor,
+.jsoneditor-modal {
+  input,
+  input:not([type]),
+  input[type="text"],
+  input[type="search"], {
+    height: auto;
+    border: inherit;
+    box-shadow: none;
+    font-size: inherit;
+    box-sizing: inherit;
+    padding: inherit;
+    font-family: inherit;
+    transition: none;
+    line-height: inherit;
+
+    &:focus {
       border: inherit;
-      border: none;
-      box-shadow: none;
+      box-shadow: inherit;
     }
   }
+
+  textarea {
+    height: inherit;
+  }
+
+  select {
+    display: inherit;
+    height: inherit;
+  }
+
+  label {
+    font-size: inherit;
+    font-weight: inherit;
+    color: inherit;
+  }
+
   table {
     border-collapse: collapse;
     width: auto;
   }
-}
-.jsoneditor td,
-.jsoneditor th {
-  padding: 0;
-  display: table-cell;
-  text-align: left;
-  vertical-align: inherit;
-  border-radius: inherit;
+
+  td,
+  th {
+    padding: 0;
+    display: table-cell;
+    text-align: left;
+    vertical-align: inherit;
+    border-radius: inherit;
+  }
 }
diff --git a/src/scss/searchbox.scss b/src/scss/searchbox.scss
index ab1ce96..a707c95 100644
--- a/src/scss/searchbox.scss
+++ b/src/scss/searchbox.scss
@@ -16,6 +16,7 @@
       outline: none;
       margin: 1px;
       line-height: 20px;
+      font-family: $jse-font;
     }
 
     button {