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

    For components provide a stylus alternative file that uses (more) variables

    Framework
    classes css elements focus stylus
    2
    2
    284
    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.
    • D
      dgk last edited by dgk

      The components were developed with a bunch of styling in mind like the field component

            <q-field color="purple-12" label="Label" stack-label>
              <template v-slot:prepend>
                <q-icon name="event" />
              </template>
              <template v-slot:control>
                <div class="self-center full-width no-outline" tabindex="0">{{text}}</div>
              </template>
            </q-field>
      

      Here the color prop is used to color the active/focused state. Which is great. One can even bind to it. But what one can’t do is bind to a stylus variable. Which means if you want to control the color outside of the script then you have to find the particular element/class in the field component that controls that element in the component. Then you can style it in stylus (i.e. theme it).

      The time consuming activity for me has been to track down the tricky the classes. Especially painful are the ones that come and go. For example in the field component the label element has a no-pointer-events class added and removed as you click in the field. If you want to style that then you have to do this.

      .q-field__label
        rfs($rfs-base-font-size * $field-font-factor)
        color $field-label-color
        padding-bottom .7em // needs to be dynamic based on font size
        &.no-pointer-events
          rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor)
          padding-bottom .5em // needs to be dynamic based on font size
      

      So what then is the class that goes with that color prop. Good question. If you fire up the inspector and then click into the field you may or may not keep that focused so you can see that class that is added/removed.

      There be my point. I’m sure for static theming everyone is happy they can color things like some color in a component with a prop but to theme an entire front end requires knowing most of the classes.

      so could you find out in the code? Sure

      https://github.com/quasarframework/quasar/blob/dev/ui/src/components/field/QField.styl

      so with a bit of investigating you can come up with the selector from the above file

      .q-field--focused
        .q-field__control-container
          background red
      

      BUT, that doesn’t help to set the color of that transition line at the bottom on the control container.

      So I am suggesting that stylus sheets for quasar use more variables to allow users to theme without the pain of
      discovering all the classes/selectors to make it so like I have done. Not everyone can be or wants to be a css guru.

      Those variables can have defaults just like what is more static coded now.

      I’ve already done this for the critical ones (item, field, expansion, list) already that I now have pretty fine grain control using stylus variables. The effort is well worth it cause now with changing a couple stylus variables and/or my branding colors I can totally change the look.

      for example here is my q-field stylus file

      // QUASAR COMPONENT DEFAULT STYLING
      // ===================== Q FIELD COMPPONENT ============================
      
      $field-font-factor = 1.5  // relative to base font size
      $field-label-font-factor = 1 // relative to field font size
      
      $field-label-color  = $secondary-1
      $field-text-color   = white
      $field-color        = $secondary-5
      
      // Classes
      .q-field__native
        rfs($rfs-base-font-size * $field-font-factor)
        .q-checkbox__label
          color $field-text-color
      
      .q-field__label
        rfs($rfs-base-font-size * $field-font-factor)
        color $field-label-color
        padding-bottom .7em // needs to be dynamic based on font size
        &.no-pointer-events
          rfs($rfs-base-font-size * $field-font-factor * $field-label-font-factor)
          padding-bottom .5em // needs to be dynamic based on font size
      
      .q-field
        // margin .5em
        padding .2em 1em
        background $field-color
      
        &.checkbox
          padding 0
          .q-field__control-container
            padding-top 0
      
      .q-field--focused
        .q-field__control-container
          background red
      

      here is how it looks.

      d37b4ae0-8e1c-480a-b1d7-612931dbde81-image.png

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        Hi dgk. Thanks for the input and feedback. If I may ask, would you be interested in creating an RFC for your thoughts to improve Quasar in terms of Design/ Styling/ Theming for v2.0? Don’t keep yourself reduced to this situation, but go “hog wild” in imagining a new way of designing with Quasar.

        This is just me, but my wish would be that components aren’t styled in any one way to begin with. But rather, they are first “styleless”. Then, there would be a “core Design” that can be added to your app (i.e. Material, Bootstrap, Tailwind, etc.). Then there would be a “Theme” choice or even set of choices that can be added. But, that is just me and my ideas. I’m not a designer. 😁

        We can continue this discussion here, if you’d like. I guess bottom line is, this suggestion more than likely won’t be done. But, for v2.0, we can make designing in Quasar even better.

        Scott

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