Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update _cim.scss #28

Closed
wants to merge 1 commit into from
Closed

Conversation

MacAhetti
Copy link

@MacAhetti MacAhetti commented Nov 26, 2023

added thicker border for answer icons in _cim.scss file for your wife .

added thicker border for answer icons in _cim.scss  file
@pganssle
Copy link
Owner

Haha, thanks, but this doesn't seem to fix the issue:

image

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!

@pganssle pganssle closed this Nov 26, 2023
@MacAhetti MacAhetti deleted the MacAhetti-answerBorder branch November 26, 2023 18:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants