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 { input, textarea, .select, .input {
padding: 0;
} &.unstyled {
border-radius: 0;
background: none;
box-shadow: none;
height: unset;
}
input, textarea, .select {
border: none; border: none;
border-radius: $fallback--inputRadius; border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
@ -141,13 +144,17 @@ input, textarea, .select {
font-family: var(--inputFont, sans-serif); font-family: var(--inputFont, sans-serif);
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 8px .5em;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
position: relative; position: relative;
height: 28px; height: 28px;
line-height: 16px; line-height: 16px;
hyphens: none; hyphens: none;
padding: 8px .5em;
&.select {
padding: 0;
}
&:disabled, &[disabled=disabled] { &:disabled, &[disabled=disabled] {
cursor: not-allowed; cursor: not-allowed;

View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="color-control style-control" class="color-input style-control"
:class="{ disabled: !present || disabled }" :class="{ disabled: !present || disabled }"
> >
<label <label
@ -16,27 +16,35 @@
@change="$emit('input', typeof value === 'undefined' ? fallback : undefined)" @change="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
class="opt" class="opt"
/> />
<input <div class="input color-input-field">
:id="name" <input
class="color-input" :id="name + '-t'"
type="color" class="textColor unstyled"
:value="value || fallback" type="text"
:disabled="!present || disabled" :value="value || fallback"
@input="$emit('input', $event.target.value)" :disabled="!present || disabled"
> @input="$emit('input', $event.target.value)"
<input >
:id="name + '-t'" <input
class="text-input" v-if="validColor"
type="text" :id="name"
:value="value || fallback" class="nativeColor unstyled"
:disabled="!present || disabled" type="color"
@input="$emit('input', $event.target.value)" :value="value || fallback"
> :disabled="!present || disabled"
@input="$emit('input', $event.target.value)"
>
<div
v-if="transparentColor"
class="transparentIndicator"
/>
</div>
</div> </div>
</template> </template>
<style lang="scss" src="./color_input.scss"></style>
<script> <script>
import Checkbox from '../checkbox/checkbox.vue' import Checkbox from '../checkbox/checkbox.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
export default { export default {
props: { props: {
// Name of color, used for identifying // Name of color, used for identifying
@ -81,6 +89,12 @@ export default {
computed: { computed: {
present () { present () {
return typeof this.value !== 'undefined' 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; margin: .5em;
} }
.color-input {
flex: 0 0 0;
}
input, select { input, select {
min-width: 3em; min-width: 3em;
margin: 0; margin: 0;
flex: 0; flex: 0;
&[type=color] {
padding: 1px;
cursor: pointer;
height: 29px;
min-width: 2em;
border: none;
align-self: stretch;
}
&[type=number] { &[type=number] {
min-width: 5em; min-width: 5em;
} }
@ -44,9 +39,6 @@
&[type=range] { &[type=range] {
flex: 1; flex: 1;
min-width: 3em; min-width: 3em;
}
&:not([type=number]):not([type=text]) {
align-self: flex-start; align-self: flex-start;
} }
} }