Problem/Motivation

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

Grimreaper created an issue. See original summary.

grimreaper’s picture

Assigned: grimreaper » pdureau

Not possible to use CSS variable directly inside url() because it is a new whole virtual file that is manipulated so CSS variables of the current document are not available.

The MR provides UI Skins integration as well as an example in the example subtheme for compiled CSS in custom theme.

@pdureau: are you ok with that? Especially the machine names of CSS variables.

grimreaper’s picture

Status: Active » Needs review
pdureau’s picture

Assigned: pdureau » grimreaper
Status: Needs review » Needs work

Hello,

I disagree about the introduction of a new CSS variable which doesn't belong to the Bootstrap API, and it is not ui_suite_bootstrap job to create or extend an API.

Because the color of the required mark is already the one, I suggest to hardcode the initial value:

background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%23dc3545'/%3E%3C/svg%3E%0A");

And add a UI Ssins related hook/event/alter which "listen" the change of the primary color CSS variable and inject an inline CSS code if different from default.

Example if primary === navy:

<style>
.required-mark::after {
background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='navy'/%3E%3C/svg%3E%0A");
}
</style>
grimreaper’s picture

Assigned: grimreaper » pdureau
Status: Needs work » Needs review

Thanks,

Review taken into account. Ready for new review.

pdureau’s picture

Assigned: pdureau » grimreaper

Reviewed

pdureau’s picture

Status: Needs review » Reviewed & tested by the community

  • Grimreaper committed 5bf097a5 on 5.0.x
    Issue #3349734 by Grimreaper, pdureau: Be able to override required mark...
grimreaper’s picture

Assigned: grimreaper » Unassigned
Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.