Our company's site utilizes typescript, Mithril js, Quill JS, (also quill renderer), and sass. Certain styling options that worked before changing to the quill renderer have stopped working. The codebase uses several style sheets, and I believe the styles are being overridden by another sheet, but can't seem to get anything to change when testing. I'm fairly new and this is my first time posting here.
Here is an example of the styling I am trying to achieve: bordered image
and the output: no border
I've tried several things to no avail. Copying an entire style sheet that works on another page from the same codebase. Adding the !important tag in styling. Creating custom inline/blots using parchment. When I use the styling in dev tools, the border appears, so I know the sheet is being recognized, it just isn't getting to the front end for some reason.
An example of custom parchment I have tried.
class BorderedFigure extends Block {
static blotName = 'bordered-figure';
static tagName = 'div';
static create() {
const node = super.create();
node.classList.add('bordered-figure')
return node;
}
static formats(domNode: HTMLElement) {
return domNode.classList.contains('overflow-figure');
}
remove() {
super.remove();
}
}
And an example from the SASS sheet:
.bordered-figure,
.bordered-figure-true
border: 4px solid $autosprink-blue
border-radius: 4px
box-shadow: 0 0 20px black
display: inline-block
line-height: 0
