From 488d7bde49cd41aa001a5e9bce750a226a47a5db Mon Sep 17 00:00:00 2001 From: josdejong Date: Wed, 6 May 2020 14:18:31 +0200 Subject: [PATCH] Move styling into separate files --- src/App.sass | 24 +++++++ src/App.svelte | 27 +------- src/JSONEditor.sass | 31 +++++++++ src/JSONEditor.svelte | 34 +--------- src/JSONNode.sass | 150 ++++++++++++++++++++++++++++++++++++++++ src/JSONNode.svelte | 154 +----------------------------------------- 6 files changed, 208 insertions(+), 212 deletions(-) create mode 100644 src/App.sass create mode 100644 src/JSONEditor.sass create mode 100644 src/JSONNode.sass diff --git a/src/App.sass b/src/App.sass new file mode 100644 index 0000000..831d480 --- /dev/null +++ b/src/App.sass @@ -0,0 +1,24 @@ +html, body { + position: relative; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +body { + color: #333; + margin: 0; + padding: 8px; + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; +} + +h1 { + color: purple; +} + +.editor { + width: 800px; + height: 500px; +} \ No newline at end of file diff --git a/src/App.svelte b/src/App.svelte index edbbfc0..e0c8adb 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -125,29 +125,4 @@

- + diff --git a/src/JSONEditor.sass b/src/JSONEditor.sass new file mode 100644 index 0000000..3733435 --- /dev/null +++ b/src/JSONEditor.sass @@ -0,0 +1,31 @@ +@import './styles.scss'; + +.jsoneditor { + border: 1px solid gray; + width: 100%; + height: 100%; + min-height: 150px; + display: flex; + flex-direction: column; + + .menu { + font-family: $font-family-menu; + font-size: $font-size; + padding: $menu-padding; + background: $theme-color; + color: $white; + text-align: right; + + .search-input { + border: none; + font-family: $font-family-menu; + font-size: $font-size; + padding: $input-padding; + } + } + + .contents { + flex: 1; + overflow: auto; + } +} \ No newline at end of file diff --git a/src/JSONEditor.svelte b/src/JSONEditor.svelte index 19ca8da..7b60e27 100644 --- a/src/JSONEditor.svelte +++ b/src/JSONEditor.svelte @@ -69,36 +69,4 @@ - + diff --git a/src/JSONNode.sass b/src/JSONNode.sass new file mode 100644 index 0000000..72be6c0 --- /dev/null +++ b/src/JSONNode.sass @@ -0,0 +1,150 @@ +@import './styles.scss'; + +.json-node { + font-family: $font-family; + font-size: $font-size; + color: $black; + + .header { + position: relative; + } + + .header, + .contents { + display: table; + flex-direction: row; + + line-height: $line-height; + + > * { + display: table-cell; + } + } + + .contents { + padding-left: $line-height ; // must be the same as the width of the expand button + padding-right: 5px; + } + + .footer { + padding-left: $line-height + $input-padding; // must be the same as the width of the expand button + } +} + +.expand { + position: relative; + top: 2px; + width: $line-height; + height: $line-height; + padding: 0; + margin: 0; + border: none; + cursor: pointer; + background: transparent; + color: $gray-icon; + font-size: $font-size-icon; +} + +.key, +.value { + line-height: $line-height; + min-width: 16px; + word-break: normal; + padding: 0 $input-padding; + outline: none; + border-radius: 1px; + vertical-align: top; + + &:focus { + box-shadow: 0 0 3px 1px #008fd5; + z-index: 1; + } +} + +.separator, +.delimiter { + vertical-align: top; + color: $gray; +} + +.tag { + vertical-align: top; + border: none; + font-size: $font-size-small; + font-family: $font-family-menu; + color: white; + background: $light-gray; + border-radius: 2px; + padding: 1px 4px; + margin: 0 5px; + cursor: pointer; + position: relative; + top: 1px; + + &:hover { + background: lighten($light-gray, 5%); + } +} + +.items, +.props { + padding-left: $indentation-width; +} +.value { + + &.string { + color: #008000; + } + + &.object, + &.array { + min-width: 16px; + color: $gray; + } + + &.number { + color: #ee422e; + } + + &.boolean { + color: #ff8c00; + } + + &.null { + color: #004ED0; + } + + &.invalid { + color: #000000; + } + + &.url { + color: green; + text-decoration: underline; + } +} + +div.empty { + &:not(:focus) { + outline: 1px dotted lightgray; + -moz-outline-radius: 2px; + } + + &::after { + pointer-events: none; + color: lightgray; + } + + &.key::after { + content: 'key'; + } + + &.value::after { + content: 'value'; + } +} + +.key.search, +.value.search { + background-color: $highlight-color; +} \ No newline at end of file diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte index 98a1987..ad56d2f 100644 --- a/src/JSONNode.svelte +++ b/src/JSONNode.svelte @@ -11,7 +11,6 @@ import { compileJSONPointer } from './utils/jsonPointer' export let key = undefined // only applicable for object properties - export let index = undefined // only applicable for array items export let value export let searchResult export let onChange @@ -298,155 +297,4 @@ {/if} - +