No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Card shadow

    Framework
    3
    6
    964
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • I
      Incremental last edited by Incremental

      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.

      dobbel 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel @Incremental last edited by

        @Incremental

        https://codepen.io/ontwikkelfabriek/pen/abNKdEd

        this css does not seem to work with a flat q-card

        metalsadman 1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @dobbel last edited by

          @dobbel just add !important.

          dobbel 1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel @metalsadman last edited by dobbel

            @metalsadman

            Thanx , I have updated the codepen.

            I was wondering: is there a way to know if you need to use !important to 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 scoped property in the style section ) will always overrule predefined Quasar/Vue components styles? Or is this (technically) not possible/wanted in Quasar/Vue ?

            Your thoughts?

            metalsadman 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @dobbel last edited by metalsadman

              @dobbel other than inspecting the element, or looking into the source, no i don’t. imo, this is overriding core css, 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 ::deep selector 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.

              1 Reply Last reply Reply Quote 0
              • I
                Incremental last edited by

                Thanks both of you, it’s working perfectly !

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post