diff options
| author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-04-22 05:48:38 +0300 |
|---|---|---|
| committer | Derick Montague <derick.montague@ibm.com> | 2020-04-25 00:47:16 +0300 |
| commit | 3111b6fa81cea34c6933491ace636f4fdd1dade3 (patch) | |
| tree | c41a307216b94eb0540cd9b147d01209bf0440e6 /src/assets | |
| parent | 077e4a8093e4e1a30b8483d5bfa9b08cbaf6368d (diff) | |
| download | webui-vue-3111b6fa81cea34c6933491ace636f4fdd1dade3.tar.xz | |
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 <yoshiemuranaka@gmail.com>
Change-Id: Ic50dd3b4339d532663279350afdcc30e59bb0c74
Diffstat (limited to 'src/assets')
| -rw-r--r-- | src/assets/styles/_bootstrap-grid.scss | 8 | ||||
| -rw-r--r-- | src/assets/styles/_obmc-custom.scss | 1 |
2 files changed, 9 insertions, 0 deletions
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"; |