From 2369f2e4cba2df8bb1dda431f193130bbf290d2c Mon Sep 17 00:00:00 2001 From: Henry Jameson <me@hjkos.com> Date: Wed, 14 Nov 2018 22:20:42 +0300 Subject: [PATCH] fixed webkit appearance of the UI --- src/components/color_input/color_input.vue | 5 +++-- src/components/contrast_ratio/contrast_ratio.vue | 2 +- src/components/opacity_input/opacity_input.vue | 5 ++--- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index 49d9bed7..60a62fa8 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -47,6 +47,7 @@ export default { <style lang="scss"> .color-control { display: flex; + align-items: baseline; &.disabled *:not(.opt-l){ opacity: .5 @@ -75,10 +76,10 @@ export default { flex: 0; padding: 1px; cursor: pointer; - height: 100%; - max-height: 29px; + height: 29px; min-width: 2em; border: none; + align-self: stretch; } } </style> diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index cb65c371..9a93dcd0 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -36,7 +36,7 @@ export default { <style lang="scss"> .contrast-ratio { display: flex; - justify-content: end; + justify-content: flex-end; .label { margin-right: 1em; diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue index efa6c449..4057dcca 100644 --- a/src/components/opacity_input/opacity_input.vue +++ b/src/components/opacity_input/opacity_input.vue @@ -41,6 +41,7 @@ export default { <style lang="scss"> .opacity-control { display: flex; + align-items: baseline; &.disabled *:not(.opt-l) { opacity: .5 @@ -48,7 +49,6 @@ export default { .opt-l { align-self: center; - line-height: 0; &::before { width: 14px; height: 14px; @@ -61,7 +61,6 @@ export default { } .input-range { - align-self: center; background: none; border: none; margin: 0; @@ -70,8 +69,8 @@ export default { min-width: 7em; flex: 1; } + .input-number { - align-self: center; margin: 0; min-width: 4em; flex: 0;