Hover transition styles not working, because "page-loading" is never removed
Hi,
I am trying to add a simple .hover-elevate-up class to a component, but the transition styles are not applied.
It seems that in _page-loader.scss they are overwritten:
// CSS3 Transitions only after page load(data-kt-app-page-loading="on" attribute added to body tag and removed with JS on page loaded)
[data-kt-app-page-loading="on"] {
overflow: hidden;
}
[data-kt-app-page-loading="on"] * {
transition: none !important;
}The .page-loading is never removed from the body as you can see in react demo2 preview as well.
Can you please advise on this?
Best wishes,
Tamas
Replies (6)
This is great news, thank you Lauris!
This question is not related, but wouldn't worth opening a new ticket so I just post it here:
Would you consider updating Yup to v1.0.0 in the upcoming releases? All other package latest versions seem to be working fine with the theme.
Thanks for your fantastic work.
Best wishes,
Tamas
Hi Tamas,
Yes, we will check the latest Yup version and consider including it in the next release.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Your Support Matters!
One more bug I found in index.html for react demo2:
It seems that this is a left-over from the previous theme as well. I was wondering why the fonts looked odd, and it turns out that Inter, which is the new default, is not loaded anywhere, hence it falls back to Helvetica.
I think Poppins is not used anymore and can be removed:
<link href="//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" />And Inter should be added instead:
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700" rel="stylesheet" />It would be great if you could incorporate this in the next update along with removing other obsolete code.
Thanks!
Best wishes,
Tamas
Hi Tamas,
Yes, the font link should be updated in all demos, it looks like right now it is updated only in demo1.
Here is our font URL which we are using in the latest Metronic.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700">I already fixed this issue and included it in the next release with other bug fixes you reported.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
Good to know it can be safely removed.
Thanks!
Best wishes,
Tamas
Hi Tamas,
The page-loading class is a left over from the previous Metronic versions, you can just remove it from public/index.html. In React version to enable and disable splash screen you can use class splash-screen.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
