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;