Fix #877: Some CSS styling issues when used in combination with Materialize

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

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>' +

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;

src/scss/jsoneditor.scss

@@ -568,3 +568,18 @@ pre.jsoneditor-preview,
     opacity: 1;
   }
 }
+
+// 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;
+  }
+}

src/scss/reset.scss

@@ -1,24 +1,53 @@
 @import "styles";
 
-.jsoneditor {
+.jsoneditor,
-  .search {
+.jsoneditor-modal {
-    input {
+  input,
-      height: auto;
+  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: inherit;
-      box-shadow: none;
     }
   }
+
+  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,
+  td,
-.jsoneditor th {
+  th {
-  padding: 0;
+    padding: 0;
-  display: table-cell;
+    display: table-cell;
-  text-align: left;
+    text-align: left;
-  vertical-align: inherit;
+    vertical-align: inherit;
-  border-radius: inherit;
+    border-radius: inherit;
+  }
 }

src/scss/searchbox.scss

@@ -16,6 +16,7 @@
       outline: none;
       margin: 1px;
       line-height: 20px;
+      font-family: $jse-font;
     }
 
     button {