diff --git a/src/components/modals/Modal.scss b/src/components/modals/Modal.scss index 5d284ce..13e5a70 100644 --- a/src/components/modals/Modal.scss +++ b/src/components/modals/Modal.scss @@ -4,6 +4,10 @@ // styling for the select box, // see docs: https://github.com/rob-balfre/svelte-select#styling --height: 36px; + --multiItemHeight: 28px; + --multiItemMargin: 2px; + --multiItemPadding: 2px 8px; + --multiClearTop: 6px; --clearSelectTop: 2px; --clearSelectBottom: 2px; --itemIsActiveBG: #3883fa; // theme-color diff --git a/src/components/modals/TransformWizard.scss b/src/components/modals/TransformWizard.scss index 1c91dea..c508b9c 100644 --- a/src/components/modals/TransformWizard.scss +++ b/src/components/modals/TransformWizard.scss @@ -9,6 +9,7 @@ table.transform-wizard { th { font-weight: normal; text-align: left; + width: 60px; } td { @@ -16,21 +17,45 @@ table.transform-wizard { width: 100%; display: flex; flex-direction: row; - - .selectContainer.filter-field { - flex: 4; - margin-right: $padding; - } - - .selectContainer.filter-relation { - flex: 1; - margin-right: $padding; - } - + margin-bottom: $padding/2; + + :global(.selectContainer) { + &.filter-field { + flex: 4; + margin-right: $padding/2; + } + + &.filter-relation { + flex: 1; + margin-right: $padding/2; + } + + &.sort-field { + flex: 3; + margin-right: $padding/2; + } + + &.sort-direction { + flex: 1; + } + + &.pick-fields { + flex: 1; + } + } + .filter-value { flex: 4; + padding: $padding; + border: 1px solid $border-gray; + border-radius: $border-radius; + outline: none; + + &:focus { + border-color: $theme-color; + } } } } } -} \ No newline at end of file +}