StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling fixes

This commit is contained in:
josdejong 2020-04-27 13:38:55 +02:00
parent 581e64bd73
commit c03353845e
2 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/JSONNode.svelte
View File

@ -108,18 +108,31 @@
font-family: $font-family; font-family: $font-family;
font-size: $font-size; font-size: $font-size;
color: $black; color: $black;
line-height: $line-height;
.header {
position: relative;
}
.header, .header,
.contents { .contents {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
line-height: $line-height;
}
.contents {
padding-left: $line-height ; // must be the same as the width of the expand button
}
.footer {
padding-left: $line-height + $input-padding; // must be the same as the width of the expand button
} }
} }
.expand { .expand {
position: relative; position: relative;
top: 2px;
width: $line-height; width: $line-height;
height: $line-height; height: $line-height;
padding: 0; padding: 0;
@ -164,9 +177,15 @@
color: white; color: white;
background: $light-gray; background: $light-gray;
border-radius: 2px; border-radius: 2px;
padding: 2px 4px; padding: 1px 4px;
margin: 0 5px; margin: 0 5px;
cursor: pointer; cursor: pointer;
position: relative;
top: 1px;
&:hover {
background: lighten($light-gray, 5%);
}
} }
.items, .items,
@ -253,14 +272,14 @@
> >
{escapedKey} {escapedKey}
</div> </div>
<span class="separator">:</span> <div class="separator">:</div>
{/if} {/if}
{#if expanded} {#if expanded}
<span class="delimiter">[</span> <div class="delimiter">[</div>
{:else} {:else}
<span class="delimiter">[</span> <div class="delimiter">[</div>
<button class="tag" on:click={() => expanded = true}>{value.length} items</button> <button class="tag" on:click={() => expanded = true}>{value.length} items</button>
<span class="delimiter">]</span> <div class="delimiter">]</div>
{/if} {/if}
</div> </div>
{#if expanded} {#if expanded}

5
src/styles.scss
View File

@ -5,7 +5,6 @@ $font-size-small: 8pt;
$font-family-menu: arial, "sans-serif"; $font-family-menu: arial, "sans-serif";
$font-size-icon: 16px; $font-size-icon: 16px;
$line-height: 20px;
$white: #fff; $white: #fff;
$black: #1A1A1A; $black: #1A1A1A;
@ -27,5 +26,7 @@ $gray-icon: $gray;
$light-gray: #c0c0c0; $light-gray: #c0c0c0;
$input-padding: 5px; $input-padding: 5px;
$indentation-width: 24px;
$line-height: 18px;
$indentation-width: 18px;
$input-padding: 5px; $input-padding: 5px;