From 3111b6fa81cea34c6933491ace636f4fdd1dade3 Mon Sep 17 00:00:00 2001 From: Yoshie Muranaka Date: Tue, 21 Apr 2020 19:48:38 -0700 Subject: Update layout fluid prop to set max-width Setting page container fluid prop to 'xl' to allow fluid/100% container width until reaching the xl breakpoint. After reaching the xl breakpoint, a max-width is set to the container. This will make sure that the page content doesn't stretch into an unreasonable layout on wide viewports. https://bootstrap-vue.org/docs/components/layout#fluid-width-container Signed-off-by: Yoshie Muranaka Change-Id: Ic50dd3b4339d532663279350afdcc30e59bb0c74 --- src/assets/styles/_bootstrap-grid.scss | 8 ++++++++ src/assets/styles/_obmc-custom.scss | 1 + 2 files changed, 9 insertions(+) create mode 100644 src/assets/styles/_bootstrap-grid.scss (limited to 'src/assets/styles') diff --git a/src/assets/styles/_bootstrap-grid.scss b/src/assets/styles/_bootstrap-grid.scss new file mode 100644 index 00000000..7ad7c81b --- /dev/null +++ b/src/assets/styles/_bootstrap-grid.scss @@ -0,0 +1,8 @@ +.container-xl { + // Fluid layout container class sets 100% + // width until xl breakpoint. Once a max-width + // is set, setting the left margin to 0 is needed + // so the content doesn't center align + // https://bootstrap-vue.org/docs/components/layout#fluid-width-container + margin-left: 0; +} \ No newline at end of file diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 4e0e1c55..7e43e62b 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -41,6 +41,7 @@ @import "./alerts"; @import "./badge"; +@import "./bootstrap-grid"; @import "./buttons"; @import "./dropdown"; @import "./form-components"; -- cgit v1.2.3