-
-
Notifications
You must be signed in to change notification settings - Fork 6.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Add size-specific helper classes for padding, margin and elevation #1434
Comments
After merging #974 this should be possible to do using
Same with grid offsets, margins etc. Quite lengthy code but should work |
I've brought up that solution @jacekkarczmarczyk on the current PR for adding those specific breakpoints. It's a slippery slope though, there are tons of helper classes that could benefit from having viewport based logic, it just adds so much to the css package size. |
@smares Would the above proposed be a solution? |
Sure 👍 |
Awesome, I actually implemented that functionality in the new |
I'm sorry but this does not work as expected with Nuxt or SSR. The problem is that the calculation is made on the server which still has no clue about the window size. |
We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or reach out to us in our Discord community. Thank you for your contribution and interest in improving Vuetify. |
resolves #1434 fixes #5168 resolves #5272 resolves #6020 resolves #7733 * feat: create legacy-grid package * chore: output dev bundle * refactor: move VForm grid overrides to legacy-grid * feat: create new grid components * feat: add utilities * feat: create utility classes * refactor: move utilities css out of component folder * feat(VRow): add breakpoint align/justify props * chore: remove test script * feat: don't publish legacy-grid package It needs some customisation to lerna to play nicely with our monorepo setup. We can still publish manually if needed. * refactor: use generate-utility in more places * feat(VGrid): revert some breaking changes to classes * fix(build): remove mqpacker breaks ordering of grid breakpoints * feat(grid): add horizontal gutters * feat(spacers): use linear spacer progression BREAKING CHANGE: all ma-x etc. helpers need to be changed before: 0 4 8 16 24 48 after: 0 4 8 12 16 20 24 28 32 36 40 44 48 * refactor(VCol): remove redundant col prop * fix(VCol): apply class when breakpoints specified * feat: merge legacy-grid back into vuetify v-layout and v-flex now coexist with the new components some styles will still change from 1.x as there is some overlap between the two systems, but the overall upgrade workload should be less * docs: update classes * feat: add back start/end spacing helpers for rtl * feat: revert space-between -> between breaking change * style: fix lint * test: update snapshots * docs: revert space-between -> between breaking change partially reverts fc21169 * chore(ci): build before lint eslint-plugin-vuetify needs to import from dist * style: fix lint * fix(VDataTable): replace text-xs-start * style: fix lint * fix(VRow): add flex-grow for IE11
It would be nice to have size-specific helper classes for padding, margin and elevation, something like
mx-xs-0
orelevation-lg-2
, so that one can create a layout where a container has margins and elevation on desktop, but on mobile it's "full-screen" without margins.The text was updated successfully, but these errors were encountered: