Add responsive layout
The main navigation will be collapsed until the viewport
minimum width reaches the Bootstrap defined 'lg' breakpoint
(defaults to 992px).
- Adding motion variables and updating some CSS values to
use existing Sass variables
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Id159b84da6adf55fdb15842b0e33b1ede4eeceb4
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 8efbf7b..8396bd5 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -1,5 +1,5 @@
<template>
- <main id="main-content">
+ <main id="main-content" class="page-container">
<slot />
</main>
</template>
@@ -12,12 +12,14 @@
<style lang="scss" scoped>
main {
+ width: 100%;
+ height: 100%;
padding-top: $spacer * 1.5;
padding-bottom: $spacer * 3;
- padding-left: $spacer * 2;
+ padding-left: $spacer;
padding-right: $spacer;
- background-color: $gray-100;
- height: 100%;
- min-height: calc(100vh - 60px /*header height*/);
+ @include media-breakpoint-up($responsive-layout-bp) {
+ padding-left: $spacer * 2;
+ }
}
</style>