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

    change color site-wise conflicts with "text-color"

    Framework
    2
    4
    489
    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.
    • sandroden
      sandroden last edited by sandroden

      Hi,

      I’d like to set a color for fonts site-wise. I used to do that in App.vue in non scoped style section for p element, h* elem…
      I just realized that setting a non-scoped style section there will prevent the possibility to use eg: text-color class that will loose against the specificity of a p element. This is demostrated in this codepen (independent from quasar).

      Is there a working way to set a default color that does not brake the possibility to use text-color classes?

      sandro

      R 1 Reply Last reply Reply Quote 0
      • sandroden
        sandroden last edited by

        I solved it by setting color on body element. This curiously leave non styled the menu button (toolbar > div > router-link > q-btn) that gets a purple color on firefox and a blue color on chrome. I wasn’t able to find where does it come from and why. Any hints?

        1 Reply Last reply Reply Quote 0
        • R
          rab @sandroden last edited by

          @sandroden How about using app.sass file for site-wise fonts.

          Btw …

          p {
            color: green;
          }
          .text-red {
            color: red !important;
          }
          
          <div>
            <p class="text-red">This is red...</p>
          </div>
          
          sandroden 1 Reply Last reply Reply Quote 0
          • sandroden
            sandroden @rab last edited by

            Thanks @rab, I understand that setting the color on the p element makes a difference but is totally impracticable when the content comes from the user via an editor.

            I don’t use any app.sass con (btw I use stylus and quasar.variables.stylus), but that doesn’t seem a solution to me.

            The main problem is that text-color applied on the parent will have low impact in some circumtancies, links in particular as those are already directly styled by the user agent, so that to style them the only solution I see is to address them directly (a {color: ...}) or with the class text-color.

            In my original case I wanted to style buttons in a router-link in the toolbar and the only option I had was to attach color to each of them.
            I I use:

            * {
               color: brown ;
            }
            

            the style is set everywhere and you cannot almost override (unless inline). Even `<q-btn text-color=“red”> will fail. I you use

            body {
               color: brown ;
            }
            

            everything seems ok apart from ‘a’ element, in that case the color is blue… (I guess a browser’s default). Adding body a makes it almost ok with something I have not been able to understand. I cant undertand why a button within a router link and a button with to behave differently.
            7a019ac5-0376-4568-a1cc-124c954f1fe7-image.png
            Links in the drawer + q-list style correctly if using text-<color>. A codesandbox example can be found here.

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