diff options
author | Joas Schilling <coding@schilljs.com> | 2022-08-08 13:57:14 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2022-08-08 13:57:14 +0300 |
commit | fb53842a6103570eb6d9b4d9efd5d2ab717e52fe (patch) | |
tree | 818aa5613064397b262978340997eabc407c3872 /apps | |
parent | 05d034a6dad7eeac19244621157689476887875d (diff) |
Fix inverting on darkmode and spacing
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'apps')
4 files changed, 23 insertions, 6 deletions
diff --git a/apps/workflowengine/src/components/Checks/FileMimeType.vue b/apps/workflowengine/src/components/Checks/FileMimeType.vue index 1b227fb549a..4a920e4c889 100644 --- a/apps/workflowengine/src/components/Checks/FileMimeType.vue +++ b/apps/workflowengine/src/components/Checks/FileMimeType.vue @@ -32,12 +32,12 @@ @input="setValue"> <template slot="singleLabel" slot-scope="props"> <span v-if="props.option.icon" class="option__icon" :class="props.option.icon" /> - <img v-else :src="props.option.iconUrl"> + <img v-else class="option__icon-img" :src="props.option.iconUrl"> <span class="option__title option__title_single">{{ props.option.label }}</span> </template> <template slot="option" slot-scope="props"> <span v-if="props.option.icon" class="option__icon" :class="props.option.icon" /> - <img v-else :src="props.option.iconUrl"> + <img v-else class="option__icon-img" :src="props.option.iconUrl"> <span class="option__title">{{ props.option.label }}</span> </template> </Multiselect> @@ -137,7 +137,7 @@ export default { }, } </script> -<style scoped> +<style scoped lang="scss"> .multiselect, input[type='text'] { width: 100%; } @@ -148,4 +148,14 @@ export default { overflow: hidden; text-overflow: ellipsis; } + + .option__icon { + display: inline-block; + min-width: 30px; + background-position: left; + } + + .option__icon-img { + margin-right: 14px; + } </style> diff --git a/apps/workflowengine/src/components/Checks/RequestURL.vue b/apps/workflowengine/src/components/Checks/RequestURL.vue index c9b241eddfa..85283a2a14f 100644 --- a/apps/workflowengine/src/components/Checks/RequestURL.vue +++ b/apps/workflowengine/src/components/Checks/RequestURL.vue @@ -136,8 +136,14 @@ export default { }, } </script> -<style scoped> +<style scoped lang="scss"> .multiselect, input[type='text'] { width: 100%; } + + .option__icon { + display: inline-block; + min-width: 30px; + background-position: left; + } </style> diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue index 5f4b8dd87b0..fd35f61290c 100644 --- a/apps/workflowengine/src/components/Event.vue +++ b/apps/workflowengine/src/components/Event.vue @@ -131,6 +131,7 @@ export default { .option__icon { width: 16px; height: 16px; + filter: var(--background-invert-if-dark); } .eventlist img, diff --git a/apps/workflowengine/src/styles/operation.scss b/apps/workflowengine/src/styles/operation.scss index d936c64e2de..860258f2851 100644 --- a/apps/workflowengine/src/styles/operation.scss +++ b/apps/workflowengine/src/styles/operation.scss @@ -68,11 +68,11 @@ small { margin: 0; margin-right: 10px; &:not(.icon-invert) { - filter: invert(1); + filter: var(--background-invert-if-bright); } } } .colored .icon-invert { - filter: invert(1); + filter: var(--background-invert-if-bright); } |