color input improvements
This commit is contained in:
parent
dd4867d8de
commit
e8159164e3
@ -9,6 +9,7 @@
|
|||||||
padding: 0.2em 8px;
|
padding: 0.2em 8px;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
color: var(--text);
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -19,21 +20,38 @@
|
|||||||
min-width: 3em;
|
min-width: 3em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.nativeColor {
|
.nativeColor {
|
||||||
flex: 0 0 2em;
|
cursor: pointer;
|
||||||
min-width: 2em;
|
flex: 0 0 auto;
|
||||||
align-self: stretch;
|
|
||||||
min-height: 100%;
|
input {
|
||||||
|
appearance: none;
|
||||||
|
max-width: 0;
|
||||||
|
min-width: 0;
|
||||||
|
max-height: 0;
|
||||||
|
/* stylelint-disable-next-line declaration-no-important */
|
||||||
|
opacity: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.computedIndicator,
|
.computedIndicator,
|
||||||
|
.validIndicator,
|
||||||
|
.invalidIndicator,
|
||||||
.transparentIndicator {
|
.transparentIndicator {
|
||||||
flex: 0 0 2em;
|
flex: 0 0 2em;
|
||||||
|
margin: 0 0.5em;
|
||||||
min-width: 2em;
|
min-width: 2em;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
min-height: 100%;
|
min-height: 1.5em;
|
||||||
|
border-radius: var(--roundness);
|
||||||
|
}
|
||||||
|
|
||||||
|
.invalidIndicator {
|
||||||
|
background: transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid var(--cRed);
|
||||||
}
|
}
|
||||||
|
|
||||||
.transparentIndicator {
|
.transparentIndicator {
|
||||||
@ -54,11 +72,13 @@
|
|||||||
&::after {
|
&::after {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
border-top-left-radius: var(--roundness);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
border-bottom-right-radius: var(--roundness);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -25,30 +25,51 @@
|
|||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('update:modelValue', $event.target.value)"
|
||||||
>
|
>
|
||||||
<input
|
<div
|
||||||
v-if="validColor"
|
v-if="validColor"
|
||||||
|
class="validIndicator"
|
||||||
|
:style="{backgroundColor: modelValue || fallback}"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else-if="transparentColor"
|
||||||
|
class="transparentIndicator"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else-if="computedColor"
|
||||||
|
class="computedIndicator"
|
||||||
|
:style="{backgroundColor: fallback}"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="invalidIndicator"
|
||||||
|
/>
|
||||||
|
<label class="nativeColor">
|
||||||
|
<FAIcon icon="eye-dropper"/>
|
||||||
|
<input
|
||||||
:id="name"
|
:id="name"
|
||||||
class="nativeColor unstyled"
|
class="unstyled"
|
||||||
type="color"
|
type="color"
|
||||||
:value="modelValue || fallback"
|
:value="modelValue || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="$emit('update:modelValue', $event.target.value)"
|
||||||
>
|
>
|
||||||
<div
|
</label>
|
||||||
v-if="transparentColor"
|
|
||||||
class="transparentIndicator"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
v-if="computedColor"
|
|
||||||
class="computedIndicator"
|
|
||||||
:style="{backgroundColor: fallback}"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Checkbox from '../checkbox/checkbox.vue'
|
import Checkbox from '../checkbox/checkbox.vue'
|
||||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||||
|
|
||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import {
|
||||||
|
faEyeDropper
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
|
library.add(
|
||||||
|
faEyeDropper
|
||||||
|
)
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Checkbox
|
Checkbox
|
||||||
@ -108,12 +129,3 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" src="./color_input.scss"></style>
|
<style lang="scss" src="./color_input.scss"></style>
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.color-control {
|
|
||||||
input.text-input {
|
|
||||||
max-width: 7em;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
Loading…
Reference in New Issue
Block a user