make json-editor more compact

lhns · Feb 28, 2023 · 5e5adda · 5e5adda
1 parent eb855e9
commit 5e5adda
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/src/JsonEditorComponent.tsx b/src/JsonEditorComponent.tsx
@@ -75,7 +75,7 @@ class InternalJsonEditorComponent extends React.Component<{
  }
 
  render() {
- return <div ref={this.root}/>
+ return <div ref={this.root} className="json-editor compact"/>
  }
 }
 

diff --git a/src/style.scss b/src/style.scss
@@ -66,6 +66,24 @@ html, body, #root {
  outline: 0;
 }
 
+.json-editor.compact .card {
+ --bs-card-spacer-y: .5rem;
+ --bs-card-spacer-x: .5rem;
+}
+
+.json-editor.compact div[data-theme="bootstrap5"] .form-group {
+ margin-bottom: .5rem;
+}
+
+.json-editor.compact .form-label {
+ margin-bottom: .2rem;
+}
+
+.json-editor.compact .my-3 {
+ margin-top: .5rem !important;
+ margin-bottom: .5rem !important;
+}
+
 /*.btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {
  margin-left: -1px;
 }*/