18d129109SYoshie Muranaka<template> 274f8687dSYoshie Muranaka <main id="main-content" class="page-container"> 38d129109SYoshie Muranaka <slot /> 48d129109SYoshie Muranaka </main> 58d129109SYoshie Muranaka</template> 68d129109SYoshie Muranaka 78d129109SYoshie Muranaka<script> 8*dc6b3cdeSDixsie Wolmersimport JumpLinkMixin from '@/components/Mixins/JumpLinkMixin'; 98d129109SYoshie Muranakaexport default { 10602e98aaSDerick Montague name: 'PageContainer', 11*dc6b3cdeSDixsie Wolmers mixins: [JumpLinkMixin], 1280267970SDerick Montague created() { 1380267970SDerick Montague this.$root.$on('skip-navigation', () => { 1480267970SDerick Montague this.setFocus(this.$el); 1580267970SDerick Montague }); 1680267970SDerick Montague }, 178d129109SYoshie Muranaka}; 188d129109SYoshie Muranaka</script> 198d129109SYoshie Muranaka<style lang="scss" scoped> 208d129109SYoshie Muranakamain { 2174f8687dSYoshie Muranaka width: 100%; 2274f8687dSYoshie Muranaka height: 100%; 238d129109SYoshie Muranaka padding-top: $spacer * 1.5; 248d129109SYoshie Muranaka padding-bottom: $spacer * 3; 2574f8687dSYoshie Muranaka padding-left: $spacer; 268d129109SYoshie Muranaka padding-right: $spacer; 2780267970SDerick Montague 2880267970SDerick Montague &:focus-visible { 2980267970SDerick Montague box-shadow: inset 0 0 0 2px theme-color('primary'); 3080267970SDerick Montague outline: none; 3180267970SDerick Montague } 3280267970SDerick Montague 3374f8687dSYoshie Muranaka @include media-breakpoint-up($responsive-layout-bp) { 3474f8687dSYoshie Muranaka padding-left: $spacer * 2; 3574f8687dSYoshie Muranaka } 368d129109SYoshie Muranaka} 378d129109SYoshie Muranaka</style> 38