{"version":3,"file":"display-l9bKxChg.js","sources":["../../src/pages/en/styles/display.md"],"sourcesContent":["\n<script setup lang=\"ts\">\nconst meta = {\"title\":\"Display\",\"description\":\"Display helper classes allow you to control when elements should display based upon viewport.\",\"keywords\":\"display helper classes, display classes, vuetify display\"}\n const assets = undefined\n const backmatter = undefined\n const features = {\"report\":true}\n const fluid = undefined\n const related = [\"/styles/text-and-typography/\",\"/directives/resize/\",\"/features/display-and-platform/\"]\n const toc = [{\"text\":\"Usage\",\"to\":\"#usage\",\"level\":2},{\"text\":\"Visibility\",\"to\":\"#visibility\",\"level\":2},{\"text\":\"Caveats\",\"to\":\"#caveats\",\"level\":3},{\"text\":\"Display in print\",\"to\":\"#display-in-print\",\"level\":2},{\"text\":\"Accessibility\",\"to\":\"#accessibility\",\"level\":2},{\"text\":\"Screen readers\",\"to\":\"#screen-readers\",\"level\":3}]\n  defineExpose({ frontmatter: {\"meta\":{\"title\":\"Display\",\"description\":\"Display helper classes allow you to control when elements should display based upon viewport.\",\"keywords\":\"display helper classes, display classes, vuetify display\"},\"features\":{\"report\":true},\"related\":[\"/styles/text-and-typography/\",\"/directives/resize/\",\"/features/display-and-platform/\"],\"toc\":[{\"text\":\"Usage\",\"to\":\"#usage\",\"level\":2},{\"text\":\"Visibility\",\"to\":\"#visibility\",\"level\":2},{\"text\":\"Caveats\",\"to\":\"#caveats\",\"level\":3},{\"text\":\"Display in print\",\"to\":\"#display-in-print\",\"level\":2},{\"text\":\"Accessibility\",\"to\":\"#accessibility\",\"level\":2},{\"text\":\"Screen readers\",\"to\":\"#screen-readers\",\"level\":3}]}, excerpt: undefined })\n</script>\n<script lang=\"ts\">\n/** frontmatter meta-data for MD page **/\nexport interface Frontmatter {\n  title?: string\n  description?: string\n  subject?: string\n  category?: string\n  name?: string\n  excerpt?: string\n  image?: string\n  layout?: string\n  requiredAuth?: boolean\n  meta?: Record<string, any>[]\n  [key: string]: unknown\n}\nexport const frontmatter: Frontmatter = {\"meta\":{\"title\":\"Display\",\"description\":\"Display helper classes allow you to control when elements should display based upon viewport.\",\"keywords\":\"display helper classes, display classes, vuetify display\"},\"features\":{\"report\":true},\"related\":[\"/styles/text-and-typography/\",\"/directives/resize/\",\"/features/display-and-platform/\"],\"toc\":[{\"text\":\"Usage\",\"to\":\"#usage\",\"level\":2},{\"text\":\"Visibility\",\"to\":\"#visibility\",\"level\":2},{\"text\":\"Caveats\",\"to\":\"#caveats\",\"level\":3},{\"text\":\"Display in print\",\"to\":\"#display-in-print\",\"level\":2},{\"text\":\"Accessibility\",\"to\":\"#accessibility\",\"level\":2},{\"text\":\"Screen readers\",\"to\":\"#screen-readers\",\"level\":3}]}\nexport const excerpt: string | undefined = \"\"\n\n</script>\n<template>\n<div><section id=\"display\">\n<app-heading href=\"#display\" level=\"1\">Display</app-heading>\n<p>Display helpers control content visibility and display type based on the viewport.</p>\n<page-features></page-features>\n<app-table style=\"max-height: 420px;\" fixed-header=\"\">\n<thead>\n<tr>\n<th>Class</th>\n<th>Properties</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>d-none</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-sm-none</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-md-none</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-lg-none</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-xl-none</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-none</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-sm-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-md-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-lg-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-xl-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-sm-inline</strong></td>\n<td>display: inline;</td>\n</tr>\n<tr>\n<td><strong>d-md-inline</strong></td>\n<td>display: inline;</td>\n</tr>\n<tr>\n<td><strong>d-lg-inline</strong></td>\n<td>display: inline;</td>\n</tr>\n<tr>\n<td><strong>d-xl-inline</strong></td>\n<td>display: inline;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-inline</strong></td>\n<td>display: inline;</td>\n</tr>\n<tr>\n<td><strong>d-sm-inline-block</strong></td>\n<td>display: inline-block;</td>\n</tr>\n<tr>\n<td><strong>d-md-inline-block</strong></td>\n<td>display: inline-block;</td>\n</tr>\n<tr>\n<td><strong>d-lg-inline-block</strong></td>\n<td>display: inline-block;</td>\n</tr>\n<tr>\n<td><strong>d-xl-inline-block</strong></td>\n<td>display: inline-block;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-inline-block</strong></td>\n<td>display: inline-block;</td>\n</tr>\n<tr>\n<td><strong>d-sm-table</strong></td>\n<td>display: table;</td>\n</tr>\n<tr>\n<td><strong>d-md-table</strong></td>\n<td>display: table;</td>\n</tr>\n<tr>\n<td><strong>d-lg-table</strong></td>\n<td>display: table;</td>\n</tr>\n<tr>\n<td><strong>d-xl-table</strong></td>\n<td>display: table;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-table</strong></td>\n<td>display: table;</td>\n</tr>\n<tr>\n<td><strong>d-sm-table-cell</strong></td>\n<td>display: table-cell;</td>\n</tr>\n<tr>\n<td><strong>d-md-table-cell</strong></td>\n<td>display: table-cell;</td>\n</tr>\n<tr>\n<td><strong>d-lg-table-cell</strong></td>\n<td>display: table-cell;</td>\n</tr>\n<tr>\n<td><strong>d-xl-table-cell</strong></td>\n<td>display: table-cell;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-table-cell</strong></td>\n<td>display: table-cell;</td>\n</tr>\n<tr>\n<td><strong>d-sm-table-row</strong></td>\n<td>display: table-row;</td>\n</tr>\n<tr>\n<td><strong>d-md-table-row</strong></td>\n<td>display: table-row;</td>\n</tr>\n<tr>\n<td><strong>d-lg-table-row</strong></td>\n<td>display: table-row;</td>\n</tr>\n<tr>\n<td><strong>d-xl-table-row</strong></td>\n<td>display: table-row;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-table-row</strong></td>\n<td>display: table-row;</td>\n</tr>\n<tr>\n<td><strong>d-sm-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-md-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-lg-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-xl-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-sm-inline-flex</strong></td>\n<td>display: inline-flex;</td>\n</tr>\n<tr>\n<td><strong>d-md-inline-flex</strong></td>\n<td>display: inline-flex;</td>\n</tr>\n<tr>\n<td><strong>d-lg-inline-flex</strong></td>\n<td>display: inline-flex;</td>\n</tr>\n<tr>\n<td><strong>d-xl-inline-flex</strong></td>\n<td>display: inline-flex;</td>\n</tr>\n<tr>\n<td><strong>d-xxl-inline-flex</strong></td>\n<td>display: inline-flex;</td>\n</tr>\n<tr>\n<td><strong>d-print-none</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-print-inline</strong></td>\n<td>display: inline;</td>\n</tr>\n<tr>\n<td><strong>d-print-inline-block</strong></td>\n<td>display: inline-block;</td>\n</tr>\n<tr>\n<td><strong>d-print-block</strong></td>\n<td>display: block;</td>\n</tr>\n<tr>\n<td><strong>d-print-table</strong></td>\n<td>display: table;</td>\n</tr>\n<tr>\n<td><strong>d-print-table-cell</strong></td>\n<td>display: table-cell;</td>\n</tr>\n<tr>\n<td><strong>d-print-table-row</strong></td>\n<td>display: table-row;</td>\n</tr>\n<tr>\n<td><strong>d-print-flex</strong></td>\n<td>display: flex;</td>\n</tr>\n<tr>\n<td><strong>d-print-inline-flex</strong></td>\n<td>display: inline-flex;</td>\n</tr>\n<tr>\n<td><strong>d-sr-only</strong></td>\n<td>display: none;</td>\n</tr>\n<tr>\n<td><strong>d-sr-only-focusable</strong></td>\n<td>display: none;</td>\n</tr>\n</tbody>\n</app-table>\n<promoted-entry></promoted-entry>\n<features-breakpoints-table></features-breakpoints-table>\n<section id=\"usage\">\n<app-heading href=\"#usage\" level=\"2\">Usage</app-heading>\n<p>Specify the element’s <v-code>display</v-code> property. These classes can be applied to all breakpoints from <v-code>xs</v-code> to <v-code>xxl</v-code>. When using a base class,<v-code>.d-{value}</v-code>, it is inferred to be <v-code>.d-xs-{value}</v-code>.</p>\n<ul>\n<li><v-code>.d-{value}</v-code> for <v-code>xs</v-code></li>\n<li><v-code>.d-{breakpoint}-{value}</v-code> for <v-code>sm</v-code>, <v-code>md</v-code>, <v-code>lg</v-code>, <v-code>xl</v-code>, and <v-code>xxl</v-code></li>\n</ul>\n<p>The <span style=\"text-decoration: underline;\">value</span> property is one of:</p>\n<ul>\n<li><v-code>none</v-code></li>\n<li><v-code>inline</v-code></li>\n<li><v-code>inline-block</v-code></li>\n<li><v-code>block</v-code></li>\n<li><v-code>table</v-code></li>\n<li><v-code>table-cell</v-code></li>\n<li><v-code>table-row</v-code></li>\n<li><v-code>flex</v-code></li>\n<li><v-code>inline-flex</v-code></li>\n</ul>\n<p>When setting a specific breakpoint for a display helper class, it will apply to all screen widths from the designation and up. For example, <v-code>d-lg-flex</v-code> will apply to <v-code>lg</v-code>, <v-code>xl</v-code> and <v-code>xxl</v-code> size screens.</p>\n<examples-example file=\"display/display-inline\"></examples-example>\n<examples-example file=\"display/display-block\"></examples-example>\n</section>\n<section id=\"visibility\">\n<app-heading href=\"#visibility\" level=\"2\">Visibility</app-heading>\n<p>Conditionally display an element based upon the current <strong>viewport</strong>. Breakpoint utility classes always apply from the bottom up. That means if you have <v-code>.d-none</v-code>, it will apply to all breakpoints. However, <v-code>.d-md-none</v-code> will apply to only <v-code>md</v-code> and up.</p>\n<app-table>\n<thead>\n<tr>\n<th>Screen size</th>\n<th>Class</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Hidden on all</td>\n<td><v-code>.d-none</v-code></td>\n</tr>\n<tr>\n<td>Hidden only on xs</td>\n<td><v-code>.d-none .d-sm-flex</v-code></td>\n</tr>\n<tr>\n<td>Hidden only on sm</td>\n<td><v-code>.d-sm-none .d-md-flex</v-code></td>\n</tr>\n<tr>\n<td>Hidden only on md</td>\n<td><v-code>.d-md-none .d-lg-flex</v-code></td>\n</tr>\n<tr>\n<td>Hidden only on lg</td>\n<td><v-code>.d-lg-none .d-xl-flex</v-code></td>\n</tr>\n<tr>\n<td>Hidden only on xl</td>\n<td><v-code>.d-xl-none .d-xxl-flex</v-code></td>\n</tr>\n<tr>\n<td>Hidden only on xxl</td>\n<td><v-code>.d-xxl-none</v-code></td>\n</tr>\n<tr>\n<td>Visible on all</td>\n<td><v-code>.d-flex</v-code></td>\n</tr>\n<tr>\n<td>Visible only on xs</td>\n<td><v-code>.d-flex .d-sm-none</v-code></td>\n</tr>\n<tr>\n<td>Visible only on sm</td>\n<td><v-code>.d-none .d-sm-flex .d-md-none</v-code></td>\n</tr>\n<tr>\n<td>Visible only on md</td>\n<td><v-code>.d-none .d-md-flex .d-lg-none</v-code></td>\n</tr>\n<tr>\n<td>Visible only on lg</td>\n<td><v-code>.d-none .d-lg-flex .d-xl-none</v-code></td>\n</tr>\n<tr>\n<td>Visible only on xl</td>\n<td><v-code>.d-none .d-xl-flex .d-xxl-none</v-code></td>\n</tr>\n<tr>\n<td>Visible only on xxl</td>\n<td><v-code>.d-none .d-xxl-flex</v-code></td>\n</tr>\n</tbody>\n</app-table>\n<examples-example file=\"display/visibility\"></examples-example>\n<p>Alternatively you can hide an element based upon the current <strong>viewport</strong> using lateral display helper classes. These classes can be applied using the following format <v-code>hidden-{breakpoint}-{condition?}</v-code></p>\n<p>The <span style=\"text-decoration: underline;\">condition</span> applies the class base on:</p>\n<ul>\n<li>nothing - hide the element only on the specified breakpoint</li>\n<li><v-code>and-down</v-code> - hide the element on the specified breakpoint and down - <v-code>sm</v-code> through <v-code>xl</v-code> only</li>\n<li><v-code>and-up</v-code> - hide the element on the specified breakpoint and up - <v-code>sm</v-code> through <v-code>xl</v-code> only</li>\n</ul>\n<p><v-code>hidden-{breakpoint}-and-up</v-code> is equivalent to <v-code>d-{breakpoint}-none</v-code>.</p>\n<p><strong>Media types</strong> can also be targeted using the <v-code>only</v-code> condition. Both <v-code>hidden-screen-only</v-code> and <v-code>hidden-print-only</v-code> are currently supported.</p>\n<section id=\"caveats\">\n<app-heading href=\"#caveats\" level=\"3\">Caveats</app-heading>\n<alert type=\"info\">\n<p>It is important to note that using any of the display classes above will result in any display style previously added being overwritten. This is because of the classes using <v-code>!important</v-code> in their display styling.</p>\n</alert>\n</section>\n</section>\n<section id=\"display-in-print\">\n<app-heading href=\"#display-in-print\" level=\"2\">Display in print</app-heading>\n<p>You can also change the display property when printing. Print utility classes can also be combined with none print display utilities.</p>\n<examples-example file=\"display/print\"></examples-example>\n</section>\n<section id=\"accessibility\">\n<app-heading href=\"#accessibility\" level=\"2\">Accessibility</app-heading>\n<section id=\"screen-readers\">\n<app-heading href=\"#screen-readers\" level=\"3\">Screen readers</app-heading>\n<p>Use the <v-code>d-sr</v-code> utility classes to conditionally hide content on all devices <span style=\"text-decoration: underline;\">except</span> screen readers.</p>\n<ul>\n<li><v-code>d-sr-only</v-code> visually hides elements but will still announce to <strong>screen readers</strong>.</li>\n<li><v-code>d-sr-only-focusable</v-code> visually hides an element until it is focused. This is useful when implementing <span style=\"text-decoration: underline;\">skip links</span>.</li>\n</ul>\n</section>\n</section>\n</section>\n</div>\n</template>\n"],"names":["frontmatter","excerpt","__expose"],"mappings":";;;;;;;ymBA0BaA,GAA2B,CAAC,KAAO,CAAC,MAAQ,UAAU,YAAc,gGAAgG,SAAW,0DAA4D,EAAA,SAAW,CAAC,OAAS,EAAM,EAAA,QAAU,CAAC,+BAA+B,sBAAsB,iCAAiC,EAAE,IAAM,CAAC,CAAC,KAAO,QAAQ,GAAK,SAAS,MAAQ,CAAA,EAAG,CAAC,KAAO,aAAa,GAAK;AAAA,aAAc,MAAQ,CAAC,EAAE,CAAC,KAAO,UAAU,GAAK,WAAW,MAAQ,CAAA,EAAG,CAAC,KAAO,mBAAmB,GAAK,oBAAoB,MAAQ,CAAA,EAAG,CAAC,KAAO,gBAAgB,GAAK,iBAAiB,MAAQ,CAAC,EAAE,CAAC,KAAO,iBAAiB,GAAK,kBAAkB,MAAQ,CAAA,CAAE,CAAC,EAC5qBC,GAA8B,+CAlBzC,OAAAC,EAAa,CAAE,YAAa,CAAC,KAAO,CAAC,MAAQ,UAAU,YAAc,gGAAgG,SAAW,4DAA4D,SAAW,CAAC,OAAS,IAAM,QAAU,CAAC,+BAA+B,sBAAsB,iCAAiC,EAAE,IAAM,CAAC,CAAC,KAAO,QAAQ,GAAK,SAAS,MAAQ,CAAC,EAAE,CAAC,KAAO,aAAa,GAAK,cAAc,MAAQ,CAAA,EAAG,CAAC,KAAO,UAAU,GAAK,WAAW,MAAQ,CAAG,EAAA,CAAC,KAAO,mBAAmB,GAAK,oBAAoB,MAAQ,GAAG,CAAC,KAAO,gBAAgB,GAAK,iBAAiB,MAAQ,CAAC,EAAE,CAAC,KAAO,iBAAiB,GAAK,kBAAkB,MAAQ,CAAC,CAAC,GAAI,QAAS,OAAW;;;;;;;"}