Improved ColorInput to showcase transparent color, improved global input styles

a bit
This commit is contained in:
Henry Jameson 2020-01-02 23:48:52 +02:00
parent c7e9f21da0
commit a2f676d317
3 changed files with 48 additions and 35 deletions

View file

@ -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;

View file

@ -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'
}
}
}

View file

@ -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;
}
}