diff options
| author | stephanchrst <stephanchrst@gmail.com> | 2022-05-10 21:51:50 +0700 |
|---|---|---|
| committer | stephanchrst <stephanchrst@gmail.com> | 2022-05-10 21:51:50 +0700 |
| commit | 3751379f1e9a4c215fb6eb898b4ccc67659b9ace (patch) | |
| tree | a44932296ef4a9b71d5f010906253d8c53727726 /addons/web/static/lib/bootstrap/scss/mixins/_grid.scss | |
| parent | 0a15094050bfde69a06d6eff798e9a8ddf2b8c21 (diff) | |
initial commit 2
Diffstat (limited to 'addons/web/static/lib/bootstrap/scss/mixins/_grid.scss')
| -rw-r--r-- | addons/web/static/lib/bootstrap/scss/mixins/_grid.scss | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/addons/web/static/lib/bootstrap/scss/mixins/_grid.scss b/addons/web/static/lib/bootstrap/scss/mixins/_grid.scss new file mode 100644 index 00000000..924eb0cf --- /dev/null +++ b/addons/web/static/lib/bootstrap/scss/mixins/_grid.scss @@ -0,0 +1,51 @@ +/// Grid system +// +// Generate semantic grid columns with these mixins. + +@mixin make-container($gutter: $grid-gutter-width) { + width: 100%; + padding-right: $gutter / 2; + padding-left: $gutter / 2; + margin-right: auto; + margin-left: auto; +} + + +// For each breakpoint, define the maximum width of the container in a media query +@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { + @each $breakpoint, $container-max-width in $max-widths { + @include media-breakpoint-up($breakpoint, $breakpoints) { + max-width: $container-max-width; + } + } +} + +@mixin make-row($gutter: $grid-gutter-width) { + display: flex; + flex-wrap: wrap; + margin-right: -$gutter / 2; + margin-left: -$gutter / 2; +} + +@mixin make-col-ready($gutter: $grid-gutter-width) { + position: relative; + // Prevent columns from becoming too narrow when at smaller grid tiers by + // always setting `width: 100%;`. This works because we use `flex` values + // later on to override this initial width. + width: 100%; + padding-right: $gutter / 2; + padding-left: $gutter / 2; +} + +@mixin make-col($size, $columns: $grid-columns) { + flex: 0 0 percentage($size / $columns); + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($size / $columns); +} + +@mixin make-col-offset($size, $columns: $grid-columns) { + $num: $size / $columns; + margin-left: if($num == 0, 0, percentage($num)); +} |
