Closed MacAhetti closed 9 months ago
Haha, thanks, but this doesn't seem to fix the issue:
The border we are using is actually a fake border provided by text-shadow
.
text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.540302px 0.841471px 0px, rgb(0, 0, 0) -0.416147px 0.909297px 0px, rgb(0, 0, 0) -0.989993px 0.14112px 0px, rgb(0, 0, 0) -0.653644px -0.756803px 0px, rgb(0, 0, 0) 0.283662px -0.958924px 0px, rgb(0, 0, 0) 0.96017px -0.279416px 0px;
}
In the original system, we were applying a class to flag
that would add a ::before
pseudo-element to it, like so:
div.flag-incorrect::before {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
content: "\f00d";
color: red;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: black;
font-weight: bold;
font-size: 5rem;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
But this required that all of our flags be fa
classes. In the new system, we have hidden divs that we show when a selection is made and importantly those hidden divs are using the standard fork-awesome CSS, so they look like this:
<i class="answer-icon correct fa fa-check"></i>
<i class="answer-icon incorrect fa fa-times"></i>
And fa-check
and fa-times
are bringing with them their own :before
psuedo-selector, which I cannot figure out how to modify to add the --webkit-text-stroke-width
attribute.
So I think we either need to just thicken the text-shadow created pseudo-border or go back to manually specifying the :before
content.
Having written this out to understand the problem, I realized that it's probably pretty easy to do the latter, so I created #32.
Thanks for helping out!
added thicker border for answer icons in _cim.scss file for your wife .