Card shadow
-
Hello, I’m a beginner on Vue and started with MDBootstrap Framework.
Then I discovered by chance Quasar with Dashblocks…Well I’m convinced by your fantastic framework and I’d like to migrate now my MDB app with nice effects when hovering cards, like the Shadow Effect : https://vue.mdbootstrap.com/#/css/hover
I saw posts about hovering, but nothing about the shadow.
I made a card with “shadow-N” class, but was not able to have an hover effect even with “shadow-transition”.
Is there something I’m missing ?
Thanks for help.
-
https://codepen.io/ontwikkelfabriek/pen/abNKdEd
this css does not seem to work with a
flatq-card
-
@dobbel just add
!important.
-
Thanx , I have updated the codepen.
I was wondering: is there a way to know if you need to use
!importantto overrule a predefined Quasar style? Because right now it looks to me like it is more of a trial and error.Is it not better if all styles defined in ‘your’ components ( probably only with
scopedproperty in the style section ) will always overrule predefined Quasar/Vue components styles? Or is this (technically) not possible/wanted in Quasar/Vue ?Your thoughts?
-
@dobbel other than inspecting the element, or looking into the source, no i don’t. imo, this is overriding
corecss, so it’s a given that peeps know what they’re doing, some core css use !important to override native css (i think). trial and error is a norm in dev’ing, “at least for me”, since i don’t expect everything to be documented nor i am able to understand everything just by reading it without trying it, or learning by doing. Even if something was documented you still ought to try it, to see some results, then trial and error gets eliminated gradually as you learn.about scope that’s more of a vue thing, and some css in child components are unreachable if
::deepselector aren’t used, but that’s why it is there, as to not leak the css globally, and looks like it’s gonna be better when we hit Vue 3.
-
Thanks both of you, it’s working perfectly !
