Hello,
I am writing a package and one of the things the package does it add in markers onto a text buffer. I then want to show the markers to the user.
I have created the markers and can see that they are there as I have the following in my DOM:
<div class="highlights">
<div class="highlight my-marker">
<div class="region" style="box-sizing: border-box; top: 19px; left: 14px; width: 65px; height: 19px;"/>
</div>
<div class="highlight my-marker">
<div class="region" style="box-sizing: border-box; top: 38px; left: 21px; width: 65px; height: 19px;"/>
</div>
<div class="highlight my-marker">
<div class="region" style="box-sizing: border-box; top: 57px; left: 29px; width: 85px; height: 19px;"/>
</div>
<div class="highlight my-marker">
<div class="region" style="box-sizing: border-box; top: 57px; left: 207px; width: 93px; height: 19px;"/>
</div>
</div>
However, they don’t seem to have my css applied. I have a less file within my package styes directory, my-styles.less
@import "ui-variables";
.highlight .my-marker {
background-color: #FF0000;
}
For some reason they don’t seem to pick it up. I’m pretty new to this stuff but what am I doing wrong?