Improved ColorInput to showcase transparent color, improved global input styles

a bit

3 files changed, 48 insertions, 35 deletions

diff --git a/src/App.scss b/src/App.scss
index b6d4943a..7c9c91af 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -122,12 +122,15 @@ button {
   }
 }
 
-label.select {
-  padding: 0;
+input, textarea, .select, .input {
 
-}
+  &.unstyled {
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+    height: unset;
+  }
 
-input, textarea, .select {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
@@ -141,13 +144,17 @@ input, textarea, .select {
   font-family: var(--inputFont, sans-serif);
   font-size: 14px;
   margin: 0;
-  padding: 8px .5em;
   box-sizing: border-box;
   display: inline-block;
   position: relative;
   height: 28px;
   line-height: 16px;
   hyphens: none;
+  padding: 8px .5em;
+
+  &.select {
+    padding: 0;
+  }
 
   &:disabled, &[disabled=disabled] {
     cursor: not-allowed;
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index aa289288..7fe04433 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="color-control style-control"
+    class="color-input style-control"
     :class="{ disabled: !present || disabled }"
   >
     <label
@@ -16,27 +16,35 @@
       @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
       class="opt"
     />
-    <input
-      :id="name"
-      class="color-input"
-      type="color"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      @input="$emit('input', $event.target.value)"
-    >
-    <input
-      :id="name + '-t'"
-      class="text-input"
-      type="text"
-      :value="value || fallback"
-      :disabled="!present || disabled"
-      @input="$emit('input', $event.target.value)"
-    >
+    <div class="input color-input-field">
+      <input
+        :id="name + '-t'"
+        class="textColor unstyled"
+        type="text"
+        :value="value || fallback"
+        :disabled="!present || disabled"
+        @input="$emit('input', $event.target.value)"
+      >
+      <input
+        v-if="validColor"
+        :id="name"
+        class="nativeColor unstyled"
+        type="color"
+        :value="value || fallback"
+        :disabled="!present || disabled"
+        @input="$emit('input', $event.target.value)"
+      >
+      <div
+        v-if="transparentColor"
+        class="transparentIndicator"
+      />
+    </div>
   </div>
 </template>
-
+<style lang="scss" src="./color_input.scss"></style>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
+import { hex2rgb } from '../../services/color_convert/color_convert.js'
 export default {
   props: {
     // Name of color, used for identifying
@@ -81,6 +89,12 @@ export default {
   computed: {
     present () {
       return typeof this.value !== 'undefined'
+    },
+    validColor () {
+      return hex2rgb(this.value || this.fallback)
+    },
+    transparentColor () {
+      return this.value === 'transparent'
     }
   }
 }
diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss
index 7291a884..987245a2 100644
--- a/src/components/style_switcher/style_switcher.scss
+++ b/src/components/style_switcher/style_switcher.scss
@@ -23,20 +23,15 @@
       margin: .5em;
     }
 
+    .color-input {
+      flex: 0 0 0;
+    }
+
     input, select {
       min-width: 3em;
       margin: 0;
       flex: 0;
 
-      &[type=color] {
-        padding: 1px;
-        cursor: pointer;
-        height: 29px;
-        min-width: 2em;
-        border: none;
-        align-self: stretch;
-      }
-
       &[type=number] {
         min-width: 5em;
       }
@@ -44,9 +39,6 @@
       &[type=range] {
         flex: 1;
         min-width: 3em;
-      }
-
-      &:not([type=number]):not([type=text]) {
         align-self: flex-start;
       }
     }