User tests: Successful: Unsuccessful:
Pull Request for Issue #40306
Changes some code in _global.scss file
Text NOT continues to be read.
Text continues to be read.
Please select:
Documentation link for docs.joomla.org:
No documentation changes for docs.joomla.org needed
Pull Request link for manual.joomla.org:
No documentation changes for manual.joomla.org needed
Thanks @joomlaphp and @dgrammatiko
Category | ⇒ | Repository NPM Change |
Status | New | ⇒ | Pending |
I have tested this item
Drone: Build is failing
Does this have to do with this pr or just ignore this message?
I made the changes in the templates/site/cassiopeia/scss/blocks/_global.scss file. Do I need to make changes to another file as well?
Browser cookies + Joomla cookies cleared.
Please, give your comment here #40435
Here you will find information about testing: https://docs.joomla.org/Testing_Joomla!_patches
Labels |
Added:
NPM Resource Changed
bug
PR-4.3-dev
|
I would benefit from testing this pr, thanks in advance.
I would benefit from testing this pr, thanks in advance.
Hi @sandewt ,
No problem as there is no link:: <button type="button" class="btn btn-primary">Primary</button>
The problem persists after the link is given. All cookies etc. I cleaned: <a class="btn btn-primary" href="#" role="button">Link</a>
I'm good at CSS and I can fix it with user.css but it's so annoying :)
Regards
The problem persists after the link is given. All cookies etc. I cleaned:
Did you run npm ci after installing the patch ?
[EDIT @joomlaphp does the thumb mean that you run npm ci ? Yes or no ?]
I have tested this item
Status | Pending | ⇒ | Ready to Commit |
RTC
Labels |
Added:
?
|
Status | Ready to Commit | ⇒ | Fixed in Code Base |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-07-02 00:07:01 |
Closed_By | ⇒ | obuisard |
Thanks all.
I'm looking for a solution, my finding is the following:
The :not() CSS pseudo-class represents elements that do not match a list of selectors. See: https://developer.mozilla.org/en-US/docs/Web/CSS/:not
In this case these are the buttons (.btn) that are excluded, what the desired behavior is. See the code below.
a:not(.btn):hover, a:not(.btn):focus {
color: var(--cassiopeia-color-hover);
}
So it's strange (irrelevant) that elements in the footer that have nothing to do with a button, act on it.
This justifies not undoing this pr.
@brianteeman what is your opinion ? Do you have another solution for this pr ?
you misunderstood the css
a:not(.btn):hover, a:not(.btn):focus {
color: var(--cassiopeia-color-hover);
}
in english that says
when you hover over any link that is not a button then set the color to blue
So the color of the links in the footer and the back-to-top (which is a link not a button) change to blue when you hover.
They did not before because they were set by the css
.footer a {
color: currentColor;
}
but the change made in this PR override that
but the change made in this PR override that
That's why I want to extend the css, because I have no other solution for this PR.
.footer a, .footer a:focus, .footer a:hover {
color: currentColor;
}
Have you tried to add?
.footer a:not(.btn):hover, .footer a:not(.btn):focus {
color: currentColor;
}
Have you tried to add?
Yes, I have replaced this pr with your code proposal.
And it works. ?
[EDIT It doesn't work on any other website ? ]
That's just the question. These both issues (#41153 and #41172) are easy to solve with some extra css code.
Hello, i have those two also after upgrade to 4.3.3 - can you please help me with the workaround in user.css? I am new to css and joomla so that fixing myself will take some time... thanks a lot!
also any idea, when these two will be fixed? in 4.4.4?,,,
Have you tried to add?
Yes, but not with the desired result.
No, I meant to add the specific code for the footer to complement this PR and fix all related issues at once.
Sorry @obuisard , it's not quite clear to me what you mean. If you would like to make the PR in question. I'll test.
also any idea, when these two will be fixed? in 4.3.4?
No, it won't, the version is already in RC phase, any fix will have to go to 4.3.5.
I was starting to look for a solution to fix this, but, to be honest, I cannot even replicate the initial issue stated in #40306.
My fix, in this instance, would be to revert this PR, as suggested by Brian @brianteeman early on.
Ugur @joomlaphp, before we do such a thing, could you share the URL of the site where you had the issue in the first place? I don't want to dismiss any issue and I need to see if your initial issue was not related to something else.
I think this is the overall solution:
Change the code of this pr
a:not(.btn):hover, a:not(.btn):focus {
color: var(--cassiopeia-color-hover);
}
in
a:not([class]):hover, a:not([class]):focus {
color: currentColor;
}
We (@RickR2H and I) have tested this code in the PBF.
[EDIT I have tested in 4.4.0-alpha5-dev + 4.3.5-dev]
I was starting to look for a solution to fix this, but, to be honest, I cannot even replicate the initial issue stated in #40306.
@obuisard I can reproduce this issue in J4.3.5-dev, see:
Method:
Create a custom module in the banner position, with the following button code:
<p><a class="btn btn-success" href="#!">Get started</a></p>
I changed the code to the original one:
\joomla\build\media_source\templates\site\cassiopeia\scss\blocks_global.scss
Line 63:
&:hover,
&:focus {
color: var(--cassiopeia-color-hover);
}
Run: npm ci
I think this is the overall solution:
I am waiting for response(s), if ok then I will make a new PR.
@dgrammatiko for clarity
I used this code:
Instead of the code from your comment, see #40306 (comment)
Because this last one caused an npm error.