mirror of https://github.com/rancher/dashboard.git
78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<script>
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
|
|
label: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
|
|
labelKey: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
|
|
mode: {
|
|
type: String,
|
|
default: 'edit'
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="color-input" :class="{[mode]:mode}">
|
|
<label class="text-label"><t v-if="labelKey" :k="labelKey" :raw="true" />{{ label }}</label>
|
|
<div class="preview-container" @click.stop="$refs.input.click">
|
|
<span :style="{'background-color': value}" class="color-display">
|
|
<input ref="input" type="color" :value="value" @input="$emit('input', $event.target.value)" />
|
|
</span>
|
|
<span class="text-muted">{{ value }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang='scss' scoped>
|
|
.color-input {
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--border-radius);
|
|
padding: 10px;
|
|
|
|
LABEL{
|
|
display: block;
|
|
}
|
|
.preview-container{
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
}
|
|
|
|
.color-display{
|
|
border: 1px solid var(--border);
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 var(--outline-width) var(--outline);
|
|
background: var(--input-focus-bg);
|
|
}
|
|
}
|
|
|
|
INPUT{
|
|
border: none;
|
|
padding: 0;
|
|
width: 23px;
|
|
height: 23px;
|
|
-webkit-appearance: none;
|
|
opacity: 0;
|
|
&:hover {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|