diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index d8e0793b..5b636caa 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -360,7 +360,7 @@ hr.soften { background-color: #dceaf4; margin: 0 auto; width: 70%; - height: 240px; + height: 100%; } .mini-layout.fluid .mini-layout-sidebar, .mini-layout.fluid .mini-layout-header, @@ -370,13 +370,31 @@ hr.soften { .mini-layout.fluid .mini-layout-sidebar { background-color: #bbd8e9; width: 20%; - height: 240px; + height: 100%; } .mini-layout.fluid .mini-layout-body { width: 77.5%; margin-left: 2.5%; } - +.semifluid-layouts { + clear: both; + overflow: hidden; +} +.semifluid-layouts .mini-layout { + width: auto; + height: 160px; +} +.semifluid-layouts .mini-layout.desktop { + width: 62%; + float: left; +} +.semifluid-layouts .mini-layout.tablet { + width: 25%; + float: right; +} +.mini-layout.tablet .mini-layout-body { + width: 100%; +} /* Popover docs -------------------------------------------------- */ @@ -884,6 +902,11 @@ form.well { border-top-width: 0px; padding: 0; } + + /* Space out the show-grid examples */ + .row-desktop.show-grid [class*="span"] { + margin-bottom: 5px; + } } diff --git a/less/jasny/layouts-semifluid.less b/less/jasny/layouts-semifluid.less new file mode 100644 index 00000000..61d2903f --- /dev/null +++ b/less/jasny/layouts-semifluid.less @@ -0,0 +1,12 @@ +// +// Layouts +// Fixed-width and fluid (with sidebar) layouts +// -------------------------------------------- + +// Fluid container for small screens, fixed for big screens +.container-semifluid { + .container-fixed(); + padding-left: @gridGutterWidth; + padding-right: @gridGutterWidth; + max-width: @gridRowWidth; +} diff --git a/less/jasny/layouts-semifluid.responsive.less b/less/jasny/layouts-semifluid.responsive.less new file mode 100644 index 00000000..d6065882 --- /dev/null +++ b/less/jasny/layouts-semifluid.responsive.less @@ -0,0 +1,7 @@ +// RESPONSIVE CLASSES +// ------------------ + +// Semi-fluid container can grow up to size for big desktops +.container-semifluid { + max-width: 1170px; +}