Flex CSS XXL size?

Nicholas

Hiya!
Wondering if we could have an xxl flex size which could be around 1500px?
I want to specify a specific grid size that works nicely on full hd+ displays (in my case, xl isn’t enough).
If not, is there an easy CSS workaround for this?

leon

@Nicholas I have the same need.

Nicholas

@leon
Created a workaround for now. Add the following to your quasar.variables.styl file:

@media (min-width: 1500px) {
  .col-xxl {
    max-width: 100%;
    flex-basis: 0;
    flex-grow: 1;
  }
  .col-xxl-auto {
    width: auto;
    flex: 0 0 auto;
  }
  .col-xxl-1 {
    flex: 0 0 8.3333%;
  }
  .row > .col-xxl-1 {
    max-width: 8.3333%;
  }
  .offset-xxl-1 {
    margin-left: 8.3333%;
  }
  .col-xxl-2 {
    flex: 0 0 16.6667%;
  }
  .row > .col-xxl-2 {
    max-width: 16.6667%;
  }
  .offset-xxl-2 {
    margin-left: 16.6667%;
  }
  .col-xxl-3 {
    flex: 0 0 25%;
  }
  .row > .col-xxl-3 {
    max-width: 25%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 33.3333%;
  }
  .row > .col-xxl-4 {
    max-width: 33.3333%;
  }
  .offset-xxl-4 {
    margin-left: 33.3333%;
  }
  .col-xxl-5 {
    flex: 0 0 41.6667%;
  }
  .row > .col-xxl-5 {
    max-width: 41.6667%;
  }
  .offset-xxl-5 {
    margin-left: 41.6667%;
  }
  .col-xxl-6 {
    flex: 0 0 50%;
  }
  .row > .col-xxl-6 {
    max-width: 50%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 58.3333%;
  }
  .row > .col-xxl-7 {
    max-width: 58.3333%;
  }
  .offset-xxl-7 {
    margin-left: 58.3333%;
  }
  .col-xxl-8 {
    flex: 0 0 66.6667%;
  }
  .row > .col-xxl-8 {
    max-width: 66.6667%;
  }
  .offset-xxl-8 {
    margin-left: 66.6667%;
  }
  .col-xxl-9 {
    flex: 0 0 75%;
  }
  .row > .col-xxl-9 {
    max-width: 75%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 83.3333%;
  }
  .row > .col-xxl-10 {
    max-width: 83.3333%;
  }
  .offset-xxl-10 {
    margin-left: 83.3333%;
  }
  .col-xxl-11 {
    flex: 0 0 91.6667%;
  }
  .row > .col-xxl-11 {
    max-width: 91.6667%;
  }
  .offset-xxl-11 {
    margin-left: 91.6667%;
  }
  .col-xxl-12 {
    flex: 0 0 100%;
  }
  .row > .col-xxl-12 {
    max-width: 100%;
  }
  .offset-xxl-12 {
    margin-left: 100%;
  }
}

benoitranque

Does this follow the same pattern as the other quasar sizing classes? If so could you make a PR? Thanks!

Nicholas

@benoitranque I took the xl style from quasar and basically just made it 1500px and modified all the class names to xxl.
So it should follow the other sizing classes.

leon

@Nicholas Very nice man. Tks a lot \o/\o/\o/\o/\o/\o/\o/\o/\o/\o/\o/\o/\o/

No More Posting New Topics!

Flex CSS XXL size?