From ff72999da239ab03116de9f928211147e7326c5e Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 25 Oct 2017 17:09:09 +0300 Subject: [PATCH] Universal padding for grid Added universal padding to grid, cleaned up the rest of the things that were important in the module. It seems like it's complete. --- dist/mini-default.css | 368 ++++++++++++++++++++++++++++++++++ dist/mini-default.min.css | 2 +- docs/v3/DEVLOG.md | 4 + docs/v3/style.min.css | 2 +- src/flavors/mini-default.scss | 1 + src/flavors/mini-doc.scss | 3 - src/mini/_grid.scss | 29 ++- 7 files changed, 393 insertions(+), 16 deletions(-) diff --git a/dist/mini-default.css b/dist/mini-default.css index a3e13b8..a4c33e7 100644 --- a/dist/mini-default.css +++ b/dist/mini-default.css @@ -222,3 +222,371 @@ a:visited { a:hover, a:focus { text-decoration: underline; } + +/* + Definitions for the grid system. +*/ +.container { + margin: 0 auto; + padding: 0 calc(1.5 * var(--universal-padding)); +} + +.row { + box-sizing: border-box; + display: flex; + flex: 0 1 auto; + flex-flow: row wrap; +} + +.col-sm, +[class^='col-sm-'], +[class^='col-sm-offset-'], +.row[class*='cols-sm-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); +} + +.col-sm, +.row.cols-sm > * { + flex-grow: 1; + flex-basis: 0; +} + +.col-sm-1, +.row.cols-sm-1 > * { + flex-basis: 8.33333%; +} + +.col-sm-offset-0 { + margin-left: 0; +} + +.col-sm-2, +.row.cols-sm-2 > * { + flex-basis: 16.66667%; +} + +.col-sm-offset-1 { + margin-left: 8.33333%; +} + +.col-sm-3, +.row.cols-sm-3 > * { + flex-basis: 25%; +} + +.col-sm-offset-2 { + margin-left: 16.66667%; +} + +.col-sm-4, +.row.cols-sm-4 > * { + flex-basis: 33.33333%; +} + +.col-sm-offset-3 { + margin-left: 25%; +} + +.col-sm-5, +.row.cols-sm-5 > * { + flex-basis: 41.66667%; +} + +.col-sm-offset-4 { + margin-left: 33.33333%; +} + +.col-sm-6, +.row.cols-sm-6 > * { + flex-basis: 50%; +} + +.col-sm-offset-5 { + margin-left: 41.66667%; +} + +.col-sm-7, +.row.cols-sm-7 > * { + flex-basis: 58.33333%; +} + +.col-sm-offset-6 { + margin-left: 50%; +} + +.col-sm-8, +.row.cols-sm-8 > * { + flex-basis: 66.66667%; +} + +.col-sm-offset-7 { + margin-left: 58.33333%; +} + +.col-sm-9, +.row.cols-sm-9 > * { + flex-basis: 75%; +} + +.col-sm-offset-8 { + margin-left: 66.66667%; +} + +.col-sm-10, +.row.cols-sm-10 > * { + flex-basis: 83.33333%; +} + +.col-sm-offset-9 { + margin-left: 75%; +} + +.col-sm-11, +.row.cols-sm-11 > * { + flex-basis: 91.66667%; +} + +.col-sm-offset-10 { + margin-left: 83.33333%; +} + +.col-sm-12, +.row.cols-sm-12 > * { + flex-basis: 100%; +} + +.col-sm-offset-11 { + margin-left: 91.66667%; +} + +.col-sm-normal { + order: initial; +} + +.col-sm-first { + order: -999; +} + +.col-sm-last { + order: 999; +} + +@media screen and (min-width: 768px) { + .col-md, + [class^='col-md-'], + [class^='col-md-offset-'], + .row[class*='cols-md-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-md, + .row.cols-md > * { + flex-grow: 1; + flex-basis: 0; + } + .col-md-1, + .row.cols-md-1 > * { + flex-basis: 8.33333%; + } + .col-md-offset-0 { + margin-left: 0; + } + .col-md-2, + .row.cols-md-2 > * { + flex-basis: 16.66667%; + } + .col-md-offset-1 { + margin-left: 8.33333%; + } + .col-md-3, + .row.cols-md-3 > * { + flex-basis: 25%; + } + .col-md-offset-2 { + margin-left: 16.66667%; + } + .col-md-4, + .row.cols-md-4 > * { + flex-basis: 33.33333%; + } + .col-md-offset-3 { + margin-left: 25%; + } + .col-md-5, + .row.cols-md-5 > * { + flex-basis: 41.66667%; + } + .col-md-offset-4 { + margin-left: 33.33333%; + } + .col-md-6, + .row.cols-md-6 > * { + flex-basis: 50%; + } + .col-md-offset-5 { + margin-left: 41.66667%; + } + .col-md-7, + .row.cols-md-7 > * { + flex-basis: 58.33333%; + } + .col-md-offset-6 { + margin-left: 50%; + } + .col-md-8, + .row.cols-md-8 > * { + flex-basis: 66.66667%; + } + .col-md-offset-7 { + margin-left: 58.33333%; + } + .col-md-9, + .row.cols-md-9 > * { + flex-basis: 75%; + } + .col-md-offset-8 { + margin-left: 66.66667%; + } + .col-md-10, + .row.cols-md-10 > * { + flex-basis: 83.33333%; + } + .col-md-offset-9 { + margin-left: 75%; + } + .col-md-11, + .row.cols-md-11 > * { + flex-basis: 91.66667%; + } + .col-md-offset-10 { + margin-left: 83.33333%; + } + .col-md-12, + .row.cols-md-12 > * { + flex-basis: 100%; + } + .col-md-offset-11 { + margin-left: 91.66667%; + } + .col-md-normal { + order: initial; + } + .col-md-first { + order: -999; + } + .col-md-last { + order: 999; + } +} + +@media screen and (min-width: 1280px) { + .col-lg, + [class^='col-lg-'], + [class^='col-lg-offset-'], + .row[class*='cols-lg-'] > * { + box-sizing: border-box; + flex: 0 0 auto; + padding: 0 calc(var(--universal-padding) / 2); + } + .col-lg, + .row.cols-lg > * { + flex-grow: 1; + flex-basis: 0; + } + .col-lg-1, + .row.cols-lg-1 > * { + flex-basis: 8.33333%; + } + .col-lg-offset-0 { + margin-left: 0; + } + .col-lg-2, + .row.cols-lg-2 > * { + flex-basis: 16.66667%; + } + .col-lg-offset-1 { + margin-left: 8.33333%; + } + .col-lg-3, + .row.cols-lg-3 > * { + flex-basis: 25%; + } + .col-lg-offset-2 { + margin-left: 16.66667%; + } + .col-lg-4, + .row.cols-lg-4 > * { + flex-basis: 33.33333%; + } + .col-lg-offset-3 { + margin-left: 25%; + } + .col-lg-5, + .row.cols-lg-5 > * { + flex-basis: 41.66667%; + } + .col-lg-offset-4 { + margin-left: 33.33333%; + } + .col-lg-6, + .row.cols-lg-6 > * { + flex-basis: 50%; + } + .col-lg-offset-5 { + margin-left: 41.66667%; + } + .col-lg-7, + .row.cols-lg-7 > * { + flex-basis: 58.33333%; + } + .col-lg-offset-6 { + margin-left: 50%; + } + .col-lg-8, + .row.cols-lg-8 > * { + flex-basis: 66.66667%; + } + .col-lg-offset-7 { + margin-left: 58.33333%; + } + .col-lg-9, + .row.cols-lg-9 > * { + flex-basis: 75%; + } + .col-lg-offset-8 { + margin-left: 66.66667%; + } + .col-lg-10, + .row.cols-lg-10 > * { + flex-basis: 83.33333%; + } + .col-lg-offset-9 { + margin-left: 75%; + } + .col-lg-11, + .row.cols-lg-11 > * { + flex-basis: 91.66667%; + } + .col-lg-offset-10 { + margin-left: 83.33333%; + } + .col-lg-12, + .row.cols-lg-12 > * { + flex-basis: 100%; + } + .col-lg-offset-11 { + margin-left: 91.66667%; + } + .col-lg-normal { + order: initial; + } + .col-lg-first { + order: -999; + } + .col-lg-last { + order: 999; + } +} diff --git a/dist/mini-default.min.css b/dist/mini-default.min.css index 64ea5c0..71507dc 100644 --- a/dist/mini-default.min.css +++ b/dist/mini-default.min.css @@ -1 +1 @@ -:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline} +:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}} diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 1cfe648..4afa7fa 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -73,3 +73,7 @@ - Improved the `grid` module by creating a simple `@mixin` to generate each grid step. Complexity is significantly lower now. - Properly configured the `grid` module for defaults, without anything stored in CSS variables it now weighs a nice `750bytes`. This will probably grow ever so slightly as soon as I get to add CSS variables. +- Started using variables in `grid`, namely `--universal-padding`. Size increased only by `26bytes`. +- Made `$_include-parent-layout` a hidden variable in `grid`. +- Added scaffolding code in `grid` module, just in case someone decides to use it without any other modules. +- Oddly enough, a flavor file with the default values and clean code is `1.82KB` gzipped, compared to `1.83KB` gzipped in **Fermion**, which means the variables and changes didn't really mess up size so far. Some changes need to be made and some things added, so it's quite probable that this will not be the final number, but still I am very happy about the results so far. diff --git a/docs/v3/style.min.css b/docs/v3/style.min.css index 9534217..159c2d7 100644 --- a/docs/v3/style.min.css +++ b/docs/v3/style.min.css @@ -1 +1 @@ -:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 20px}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 4px}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 4px}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 4px}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:not(.doc){font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif}code:not(.doc),kbd:not(.doc),pre:not(.doc),samp:not(.doc){font-family:'Inconsolata', Menlo, Consolas, monospace}.index-splash{width:100%;height:100vh}.index-splash-image{background-image:url("./index-splash.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}.index-splash-image:not(.no-filter){filter:blur(2px)}h1.splash{position:absolute;margin:0;width:100%;text-align:center;height:100%;line-height:60vh;font-size:3rem;font-weight:400;color:#f22f21}h1.splash small{display:initial;font-size:0.5em;color:#222}h1.splash::first-letter{font-size:1.33em;color:#fff;background:#f22f21;border-radius:6px;padding:0 10px}p.splash{margin:0;position:absolute;width:100%;text-align:center;padding-top:40vh}#version-info{position:absolute;bottom:0;background:rgba(0,0,0,0.25);padding:2px 6px;border-radius:4px;color:#dc2b1e;right:8px;font-weight:500}header{display:block;height:3.25rem;background:#f8f8f8;color:#444;padding:0.125rem 0.5rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;position:sticky;border-bottom:1px solid #ddd;top:0;text-transform:uppercase;line-height:3.5rem;font-weight:500;cursor:pointer}header:hover{color:#111}.row.padded{padding-top:16px;padding-bottom:16px} +:root{--fore-color:#111;--secondary-fore-color:#444;--back-color:#f8f8f8;--secondary-back-color:#eee;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#aaa;--secondary-border-color:#ddd;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--universal-margin)) var(--universal-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace;font-size:.85em}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}sup,sub,code,kbd{line-height:0;position:relative;vertical-align:baseline}small,sup,sub,figcaption{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}figcaption{color:var(--secondary-fore-color)}a{text-decoration:none}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{text-decoration:underline}.container{margin:0 auto;padding:0 calc(1.5 * var(--universal-padding))}.row{box-sizing:border-box;display:flex;flex:0 1 auto;flex-flow:row wrap}.col-sm,[class^='col-sm-'],[class^='col-sm-offset-'],.row[class*='cols-sm-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-sm,.row.cols-sm>*{flex-grow:1;flex-basis:0}.col-sm-1,.row.cols-sm-1>*{flex-basis:8.33333%}.col-sm-offset-0{margin-left:0}.col-sm-2,.row.cols-sm-2>*{flex-basis:16.66667%}.col-sm-offset-1{margin-left:8.33333%}.col-sm-3,.row.cols-sm-3>*{flex-basis:25%}.col-sm-offset-2{margin-left:16.66667%}.col-sm-4,.row.cols-sm-4>*{flex-basis:33.33333%}.col-sm-offset-3{margin-left:25%}.col-sm-5,.row.cols-sm-5>*{flex-basis:41.66667%}.col-sm-offset-4{margin-left:33.33333%}.col-sm-6,.row.cols-sm-6>*{flex-basis:50%}.col-sm-offset-5{margin-left:41.66667%}.col-sm-7,.row.cols-sm-7>*{flex-basis:58.33333%}.col-sm-offset-6{margin-left:50%}.col-sm-8,.row.cols-sm-8>*{flex-basis:66.66667%}.col-sm-offset-7{margin-left:58.33333%}.col-sm-9,.row.cols-sm-9>*{flex-basis:75%}.col-sm-offset-8{margin-left:66.66667%}.col-sm-10,.row.cols-sm-10>*{flex-basis:83.33333%}.col-sm-offset-9{margin-left:75%}.col-sm-11,.row.cols-sm-11>*{flex-basis:91.66667%}.col-sm-offset-10{margin-left:83.33333%}.col-sm-12,.row.cols-sm-12>*{flex-basis:100%}.col-sm-offset-11{margin-left:91.66667%}.col-sm-normal{order:initial}.col-sm-first{order:-999}.col-sm-last{order:999}@media screen and (min-width: 768px){.col-md,[class^='col-md-'],[class^='col-md-offset-'],.row[class*='cols-md-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-md,.row.cols-md>*{flex-grow:1;flex-basis:0}.col-md-1,.row.cols-md-1>*{flex-basis:8.33333%}.col-md-offset-0{margin-left:0}.col-md-2,.row.cols-md-2>*{flex-basis:16.66667%}.col-md-offset-1{margin-left:8.33333%}.col-md-3,.row.cols-md-3>*{flex-basis:25%}.col-md-offset-2{margin-left:16.66667%}.col-md-4,.row.cols-md-4>*{flex-basis:33.33333%}.col-md-offset-3{margin-left:25%}.col-md-5,.row.cols-md-5>*{flex-basis:41.66667%}.col-md-offset-4{margin-left:33.33333%}.col-md-6,.row.cols-md-6>*{flex-basis:50%}.col-md-offset-5{margin-left:41.66667%}.col-md-7,.row.cols-md-7>*{flex-basis:58.33333%}.col-md-offset-6{margin-left:50%}.col-md-8,.row.cols-md-8>*{flex-basis:66.66667%}.col-md-offset-7{margin-left:58.33333%}.col-md-9,.row.cols-md-9>*{flex-basis:75%}.col-md-offset-8{margin-left:66.66667%}.col-md-10,.row.cols-md-10>*{flex-basis:83.33333%}.col-md-offset-9{margin-left:75%}.col-md-11,.row.cols-md-11>*{flex-basis:91.66667%}.col-md-offset-10{margin-left:83.33333%}.col-md-12,.row.cols-md-12>*{flex-basis:100%}.col-md-offset-11{margin-left:91.66667%}.col-md-normal{order:initial}.col-md-first{order:-999}.col-md-last{order:999}}@media screen and (min-width: 1280px){.col-lg,[class^='col-lg-'],[class^='col-lg-offset-'],.row[class*='cols-lg-']>*{box-sizing:border-box;flex:0 0 auto;padding:0 calc(var(--universal-padding) / 2)}.col-lg,.row.cols-lg>*{flex-grow:1;flex-basis:0}.col-lg-1,.row.cols-lg-1>*{flex-basis:8.33333%}.col-lg-offset-0{margin-left:0}.col-lg-2,.row.cols-lg-2>*{flex-basis:16.66667%}.col-lg-offset-1{margin-left:8.33333%}.col-lg-3,.row.cols-lg-3>*{flex-basis:25%}.col-lg-offset-2{margin-left:16.66667%}.col-lg-4,.row.cols-lg-4>*{flex-basis:33.33333%}.col-lg-offset-3{margin-left:25%}.col-lg-5,.row.cols-lg-5>*{flex-basis:41.66667%}.col-lg-offset-4{margin-left:33.33333%}.col-lg-6,.row.cols-lg-6>*{flex-basis:50%}.col-lg-offset-5{margin-left:41.66667%}.col-lg-7,.row.cols-lg-7>*{flex-basis:58.33333%}.col-lg-offset-6{margin-left:50%}.col-lg-8,.row.cols-lg-8>*{flex-basis:66.66667%}.col-lg-offset-7{margin-left:58.33333%}.col-lg-9,.row.cols-lg-9>*{flex-basis:75%}.col-lg-offset-8{margin-left:66.66667%}.col-lg-10,.row.cols-lg-10>*{flex-basis:83.33333%}.col-lg-offset-9{margin-left:75%}.col-lg-11,.row.cols-lg-11>*{flex-basis:91.66667%}.col-lg-offset-10{margin-left:83.33333%}.col-lg-12,.row.cols-lg-12>*{flex-basis:100%}.col-lg-offset-11{margin-left:91.66667%}.col-lg-normal{order:initial}.col-lg-first{order:-999}.col-lg-last{order:999}}:not(.doc){font-family:'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif}code:not(.doc),kbd:not(.doc),pre:not(.doc),samp:not(.doc){font-family:'Inconsolata', Menlo, Consolas, monospace}.index-splash{width:100%;height:100vh}.index-splash-image{background-image:url("./index-splash.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;width:100%;height:100%;position:absolute}.index-splash-image:not(.no-filter){filter:blur(2px)}h1.splash{position:absolute;margin:0;width:100%;text-align:center;height:100%;line-height:60vh;font-size:3rem;font-weight:400;color:#f22f21}h1.splash small{display:initial;font-size:0.5em;color:#222}h1.splash::first-letter{font-size:1.33em;color:#fff;background:#f22f21;border-radius:6px;padding:0 10px}p.splash{margin:0;position:absolute;width:100%;text-align:center;padding-top:40vh}#version-info{position:absolute;bottom:0;background:rgba(0,0,0,0.25);padding:2px 6px;border-radius:4px;color:#dc2b1e;right:8px;font-weight:500}header{display:block;height:3.25rem;background:#f8f8f8;color:#444;padding:0.125rem 0.5rem;white-space:nowrap;overflow-x:auto;overflow-y:hidden;position:sticky;border-bottom:1px solid #ddd;top:0;text-transform:uppercase;line-height:3.5rem;font-weight:500;cursor:pointer}header:hover{color:#111}.row.padded{padding-top:16px;padding-bottom:16px} diff --git a/src/flavors/mini-default.scss b/src/flavors/mini-default.scss index 7f8695f..ad49252 100644 --- a/src/flavors/mini-default.scss +++ b/src/flavors/mini-default.scss @@ -9,3 +9,4 @@ */ @import '../mini/core'; +@import '../mini/grid'; diff --git a/src/flavors/mini-doc.scss b/src/flavors/mini-doc.scss index eee5314..06dcfaa 100644 --- a/src/flavors/mini-doc.scss +++ b/src/flavors/mini-doc.scss @@ -1,9 +1,6 @@ /* DO NOT USE - THIS IS A FLAVOR BUILT FOR THE DOCUMENTATION AND CONTAINS A LOT OF EXTRA CODE!!! */ @import '../mini/core'; - -// Use the old grid for a little bit - TODO: Replace when grid is done - @import '../mini/grid'; :not(.doc) { diff --git a/src/mini/_grid.scss b/src/mini/_grid.scss index 7080e42..f2b4551 100644 --- a/src/mini/_grid.scss +++ b/src/mini/_grid.scss @@ -2,27 +2,34 @@ Definitions for the grid system. */ // The grid system uses the flexbox module, meaning it might be incompatible with certain browsers. -$include-parent-layout: true !default; // Flag for rows defining column layouts (`true`/`false`). +$_include-parent-layout: true !default; // [Hidden] Flag for rows defining column layouts (`true`/`false`). +$grid-column-count: 12 !default; // Number of columns in the grid (integer value only). $grid-container-name: 'container' !default; // Class name for the grid system container. -$grid-container-side-padding: 0.75rem !default; // Padding for the grid container (left and right only). $grid-row-name: 'row' !default; // Class name for the grid system rows. $grid-row-parent-layout-prefix:'cols' !default; // Class name prefix for the grid's row parents. $grid-column-prefix: 'col' !default; // Class name prefix for the grid's columns. $grid-column-offset-suffix: 'offset' !default; // Class name suffix for the grid's offsets. -$grid-column-count: 12 !default; // Number of columns in the grid (integer value only). -$grid-column-padding: 0 0.25rem !default; // Padding for the columns of the grid. $grid-order-normal-suffix: 'normal' !default; // Class name suffix for grid columns with normal priority. $grid-order-first-suffix: 'first' !default; // Class name suffix for grid columns with highest priority. $grid-order-last-suffix: 'last' !default; // Class name suffix for grid columns with lowest priorty. $grid-small-prefix: 'sm' !default; // Small screen class prefix for grid. -$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid. $grid-medium-prefix: 'md' !default; // Medium screen class prefix for grid. -$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid. $grid-large-prefix: 'lg' !default; // Large screen class prefix for grid. +$grid-medium-breakpoint: 768px !default; // Medium screen breakpoint for grid. +$grid-large-breakpoint: 1280px !default; // Large screen breakpoint for grid. +// == Uncomment below code if this module is used on its own == +// +// $universal-padding: 0.5rem !default; +// $universal-padding-var: '--universal-padding' !default; +// :root { +// #{$universal-padding-var}: $universal-padding; +// } +// +// ============================================================ // Fluid grid system container definition. .#{$grid-container-name} { margin: 0 auto; - padding: 0 $grid-container-side-padding; + padding: 0 calc(1.5 * var(#{$universal-padding-var})); } // Grid row definition. .#{$grid-row-name} { @@ -33,14 +40,14 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref } // Inline mixin, used to generate class definitions for each grid step. @mixin generate-grid-size ($size-prefix){ - @if $include-parent-layout { + @if $_include-parent-layout { .#{$grid-column-prefix}-#{$size-prefix}, [class^='#{$grid-column-prefix}-#{$size-prefix}-'], [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'], .#{$grid-row-name}[class*='#{$grid-row-parent-layout-prefix}-#{$size-prefix}-'] > * { box-sizing: border-box; flex: 0 0 auto; - padding: $grid-column-padding; + padding: 0 calc(var(#{$universal-padding-var}) / 2); } // Grid column specific definition for flexible column. .#{$grid-column-prefix}-#{$size-prefix}, @@ -56,7 +63,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref [class^='#{$grid-column-prefix}-#{$size-prefix}-'], [class^='#{$grid-column-prefix}-#{$size-prefix}-#{$grid-column-offset-suffix}-'] { flex: 0 0 auto; - padding: $grid-column-padding; + padding: 0 calc(var(#{$universal-padding-var}) / 2); } // Grid column specific definition for flexible column. .#{$grid-column-prefix}-#{$size-prefix} { @@ -67,7 +74,7 @@ $grid-large-prefix: 'lg' !default; // Large screen class pref } // Grid column specific definitions for predefined columns. @for $i from 1 through $grid-column-count { - @if $include-parent-layout { + @if $_include-parent-layout { .#{$grid-column-prefix}-#{$size-prefix}-#{$i}, .#{$grid-row-name}.#{$grid-row-parent-layout-prefix}-#{$size-prefix}-#{$i} > * { flex-basis: #{($i * 100% / $grid-column-count)};