skillbox/client/src/components/ContentBlockTitleInput.vue

37 lines
914 B
Vue

<template>
<div class="content-block-title-input">
<input placeholder="Titel für Inhaltsblock erfassen"
class="content-block-title-input__inputfield skillbox-input"
:class="{'skillbox-input--error': error}"
:value="title"
v-on:input="$emit('update-title', $event.target.value)">
<div class="content-block-title-input__error" v-if="error">
Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
</div>
</div>
</template>
<script>
export default {
props: ['title', 'error']
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
.content-block-title-input {
&__inputfield {
width: $modal-input-width;
}
&__error {
font-family: sans-serif;
font-size: toRem(14px);
color: $color-accent-3-dark;
padding: 10px 0;
}
}
</style>