computed color display support in color_input

2 files changed, 11 insertions, 0 deletions

diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index 92bf87c5..8e9923cf 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -31,11 +31,14 @@
         height: 100%;
       }
     }
+    .computedIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
       min-width: 2em;
       align-self: center;
       height: 100%;
+    }
+    .transparentIndicator {
       // forgot to install counter-strike source, ooops
       background-color: #FF00FF;
       position: relative;
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index e54409fe..8fb16113 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -38,6 +38,11 @@
         v-if="transparentColor"
         class="transparentIndicator"
       />
+      <div
+        v-if="computedColor"
+        class="computedIndicator"
+        :style="{backgroundColor: fallback}"
+      />
     </div>
   </div>
 </template>
@@ -95,6 +100,9 @@ export default {
     },
     transparentColor () {
       return this.value === 'transparent'
+    },
+    computedColor () {
+      return this.value && this.value.startsWith('--')
     }
   }
 }