I recently incorporated a Vue component (available at ):
<vue-editor id="description" name="description"
:class="{'uk-form-danger': errors.has('description') }"
v-model="description"
:editorToolbar="customToolbar" v-validate="'required'">
</vue-editor>
This code generates the following HTML structure:
<div class="quillWrapper" name="description" aria-required="true" aria-invalid="false">
<div class="ql-toolbar ql-snow"><span class="ql-formats"></span></div>
<div id="description" class="ql-container ql-snow">
<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true"><p><br></p></div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a>
<input
type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">
<a
class="ql-action"></a><a class="ql-remove"></a></div>
</div>
</div>
My goal is to include the class uk-form-danger (refer to ) in the parent div.
Despite binding the class on error, I noticed that the uk-form-danger does not apply a red border color to the text editor section.
The CSS for .ql-toolbar.ql-snow appears as follows:
.ql-toolbar.ql-snow {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
padding: 8px;
Here's the CSS definition for uk-form-danger:
*
* Error
*/
.uk-form-danger,
.uk-form-danger:focus {
color: #f0506e;
border-color: #f0506e;
}
To address this issue, one option could be adding custom SCSS to the project – but what modifications should be made there?
Your assistance in resolving this matter would be greatly appreciated. Thank you!