diff options
author | Mark Otto <markdotto@gmail.com> | 2019-07-24 09:00:29 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-09-26 18:37:07 +0300 |
commit | d08567797f9da9fc8f3030a1ce5ba54b82df1824 (patch) | |
tree | 30b4742ef9a51d1d30eee33b40b0adaa050a1bad /scss | |
parent | acb2b7061c56f9c6e05aff17750a03334f6d70e8 (diff) |
Cleanup
- Rename and move the variable to variables file
- Move code to the grid file
- Use the mixin to generate our own classes
- Wrap in a grid classes enabled conditional
- Document the mixin
Diffstat (limited to 'scss')
-rw-r--r-- | scss/_card.scss | 12 | ||||
-rw-r--r-- | scss/_grid.scss | 10 | ||||
-rw-r--r-- | scss/_variables.scss | 1 | ||||
-rw-r--r-- | scss/mixins/_grid.scss | 11 |
4 files changed, 22 insertions, 12 deletions
diff --git a/scss/_card.scss b/scss/_card.scss index 5cca2ae283..fdbe95f404 100644 --- a/scss/_card.scss +++ b/scss/_card.scss @@ -168,18 +168,6 @@ } } -$row-columns: 6 !default; - -@each $breakpoint in map-keys($grid-breakpoints) { - $infix: breakpoint-infix($breakpoint, $grid-breakpoints); - - @for $i from 1 through $row-columns { - .row-cols#{$infix}-#{$i} > [class^="col"] { - flex: 0 0 calc(100% / #{$i}); - } - } -} - // // Card groups diff --git a/scss/_grid.scss b/scss/_grid.scss index d36ee75d88..5f25e38f18 100644 --- a/scss/_grid.scss +++ b/scss/_grid.scss @@ -46,6 +46,16 @@ @include make-row(); } + @each $breakpoint in map-keys($grid-breakpoints) { + $infix: breakpoint-infix($breakpoint, $grid-breakpoints); + + @for $i from 1 through $grid-row-columns { + .row-cols#{$infix}-#{$i} { + @include row-cols($i); + } + } + } + // Remove the negative margin from default .row, then the horizontal padding // from all immediate children columns (to prevent runaway style inheritance). .no-gutters { diff --git a/scss/_variables.scss b/scss/_variables.scss index 66875948de..3a1917ada4 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -227,6 +227,7 @@ $container-max-widths: ( $grid-columns: 12 !default; $grid-gutter-width: 30px !default; +$grid-row-columns: 6 !default; // Components diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 924eb0cfc0..8672e7c163 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -49,3 +49,14 @@ $num: $size / $columns; margin-left: if($num == 0, 0, percentage($num)); } + +// Row columns +// +// Specify on a parent element(e.g., .row) to force immediate children into NN +// numberof columns. Supports wrapping to new lines, but does not do a Masonry +// style grid. +@mixin row-cols($count) { + & > [class^="col"] { + flex: 0 0 calc(100% / #{$count}); + } +} |