xref: /openbmc/webui-vue/src/components/Global/PageContainer.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b)
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>
8dc6b3cdeSDixsie Wolmersimport JumpLinkMixin from '@/components/Mixins/JumpLinkMixin';
98d129109SYoshie Muranakaexport default {
10602e98aaSDerick Montague  name: 'PageContainer',
11dc6b3cdeSDixsie 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>
20*7d6b44cbSEd Tanous@import '@/assets/styles/bmc/helpers/_index.scss';
21*7d6b44cbSEd Tanous@import '@/assets/styles/bootstrap/_helpers.scss';
22*7d6b44cbSEd Tanous
23*7d6b44cbSEd Tanous@import 'bootstrap/dist/css/bootstrap.css';
248d129109SYoshie Muranakamain {
2574f8687dSYoshie Muranaka  width: 100%;
2674f8687dSYoshie Muranaka  height: 100%;
278d129109SYoshie Muranaka  padding-top: $spacer * 1.5;
288d129109SYoshie Muranaka  padding-bottom: $spacer * 3;
2974f8687dSYoshie Muranaka  padding-left: $spacer;
308d129109SYoshie Muranaka  padding-right: $spacer;
3180267970SDerick Montague
3280267970SDerick Montague  &:focus-visible {
3380267970SDerick Montague    box-shadow: inset 0 0 0 2px theme-color('primary');
3480267970SDerick Montague    outline: none;
3580267970SDerick Montague  }
3680267970SDerick Montague
3774f8687dSYoshie Muranaka  @include media-breakpoint-up($responsive-layout-bp) {
3874f8687dSYoshie Muranaka    padding-left: $spacer * 2;
3974f8687dSYoshie Muranaka  }
408d129109SYoshie Muranaka}
418d129109SYoshie Muranaka</style>
42