diff --git a/src/components/FilterEditorBlock.tsx b/src/components/FilterEditorBlock.tsx index f19933cb..5e546686 100644 --- a/src/components/FilterEditorBlock.tsx +++ b/src/components/FilterEditorBlock.tsx @@ -11,6 +11,9 @@ class FilterEditorBlockInternal extends React.Component +
+ {this.props.children} +
-
- {this.props.children} -
} } diff --git a/src/styles/_filtereditor.scss b/src/styles/_filtereditor.scss index 766eeac9..9dadce4b 100644 --- a/src/styles/_filtereditor.scss +++ b/src/styles/_filtereditor.scss @@ -14,26 +14,18 @@ color: vars.$color-lowgray; } -.maputnik-filter-editor-property { - display: inline-block; - width: 25%; +.maputnik-filter-editor-single { + display: flex; + column-gap: 6px; } .maputnik-filter-editor-operator { - margin: 0 2%; - display: inline-block; - width: 17%; - .maputnik-select { width: 100%; } } .maputnik-filter-editor-args { - display: inline-block; - width: 54%; - margin: 0 2%; - .maputnik-string, .maputnik-number { width: 100%; @@ -67,17 +59,10 @@ @extend .maputnik-icon-button !optional; /* stylelint-disable-line */ } -.maputnik-filter-editor-block-action { - margin-top: vars.$margin-2; - margin-bottom: vars.$margin-2; - display: inline-block; - width: 6%; - margin-right: 1.5%; -} - -.maputnik-filter-editor-block-content { - display: inline-block; - width: 92.5%; +.maputnik-filter-editor-block { + display: flex; + column-gap: 6px; + margin-bottom: 2px; } .maputnik-radio-as-button {