Integrate new CSS into textComposer component

parent 7ab1deef
......@@ -8,9 +8,9 @@
@change='editorChange($event)'
></quill-editor>
</no-ssr>
<div class='compose-tools'>
<button @click='editorContent=""' ref='clearButton' class='button is-medium'>Clear</button>
<button ref='postButton' class='button is-medium is-primary'>Post</button>
<div class='compose-tools buttons'>
<button @click='editorContent=""' ref='clearButton' class='button'>Clear</button>
<button ref='postButton' class='button is-primary'>Post</button>
</div>
</div>
</template>
......@@ -55,54 +55,41 @@ export default {
</script>
<style>
.button.is-medium {
font-size: 1.5vmax;
.compose
{
margin-bottom: 1em;
}
.button.is-medium:not(:first-of-type)
.compose-tools
{
margin-left: 1vmax;
/* override Bulma default for .buttons to align to right */
justify-content: flex-end;
}
.compose {
margin-bottom: 2vmax;
.quill-editor
{
/* make editor window full-width by default */
margin-right: -1rem;
margin-left: -1rem;
margin-bottom: 1em;
}
.compose-tools {
height: 3.4vmax;
text-align: right;
.ql-editor
{
padding-top: 0;
}
.quill-editor {
margin-bottom: 1vmax;
margin-left: -2vmax;
margin-right: -2vmax;
.ql-container
{
/* reset so doesn’t use px for font size */
font-size: 1em;
}
.ql-editor {
font-size: 2vmax;
}
/* The editor only has a top and bottom border to mark its boundaries. Otherwise, it is styled exactly like the rest of the content to underscore its purpose. When a post is submitted, the minimal chrome around the editor simply fades away and the content becomes part of the page. */
/* The editor only has a top and bottom border to mark its boundaries. Otherwise,
it is styled exactly like the rest of the content to underscore its purpose.
When a post is submitted, the minimal chrome around the editor simply fades
away and the content becomes part of the page. */
.ql-container.ql-snow {
border-left: none;
.ql-container.ql-snow
{
border-right: none;
}
.ql-editor p, .ql-snow .ql-editor blockquote, .ql-snow .ql-editor img {
margin-bottom: 2vmax;
}
.ql-snow .ql-editor h1 {
font-size: 4vmax;
margin-bottom: 1.5vmax;
}
.ql-editor h2 {
margin-bottom: .75em;
border-left: none;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment