Improve styling of the modal and select boxes

This commit is contained in:
Jos de Jong 2020-08-19 16:45:12 +02:00
parent 37fcdf85e2
commit 1ad834cf31
6 changed files with 33 additions and 16 deletions

View File

@ -1,6 +1,14 @@
@import '../../styles.scss';
.contents {
.jsoneditor-modal {
// styling for the select box,
// see docs: https://github.com/rob-balfre/svelte-select#styling
--height: 28px;
--clearSelectTop: 2px;
--clearSelectBottom: 2px;
--itemIsActiveBG: #3883fa; // theme-color
.contents {
padding: 20px;
.actions {
@ -10,4 +18,11 @@
padding-top: $padding;
}
}
}
// custom styling for the modal.
// FIXME: not neat to override global styles!
:global(.bg .window-wrap) {
margin-top: 10rem;
}

View File

@ -1,7 +1,7 @@
@import '../../styles.scss';
@import './Modal.scss';
.sort-modal {
.jsoneditor-modal.sort {
table {
width: 100%;
border-collapse: collapse;

View File

@ -21,11 +21,11 @@
const asc = {
value: 1,
label: 'asc'
label: 'ascending'
}
const desc = {
value: -1,
label: 'desc'
label: 'descending'
}
const directions = [ asc, desc ]
@ -83,7 +83,7 @@
}
</script>
<div class="sort-modal">
<div class="jsoneditor-modal sort">
<Header title={isArray ? 'Sort array items' : 'Sort object keys'} />
<div class="contents">
@ -115,6 +115,7 @@
<td>
<Select
items={directions}
containerClasses='test-class'
bind:selectedValue={selectedDirection}
isClearable={false}
/>

View File

@ -7,7 +7,7 @@
const {close} = getContext('simple-modal')
</script>
<div class="transform-modal">
<div class="jsoneditor-modal transform">
<Header title='Transform' />
<div class="contents">
TODO...

View File

@ -17,13 +17,14 @@ export const SIMPLE_MODAL_OPTIONS = {
styleBg: {
top: 0,
left: 0,
background: 'rgba(0, 0, 0, 0.3)'
background: 'rgba(0, 0, 0, 0.3)',
justifyContent: 'normal'
},
styleWindow: {
borderRadius: '2px'
},
styleContent: {
padding: '0px',
overflow: 'visible'
overflow: 'visible', // needed for select box dropdowns which are larger than the modal
}
}