diff options
| author | Mark Otto <markd.otto@gmail.com> | 2021-06-14 19:35:30 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-14 19:35:30 +0300 |
| commit | be17444756c48e3a892c36507f859cd841bd8c1f (patch) | |
| tree | 0fae73c54f82eda6321bea3e759cc184690710e9 /scss/mixins | |
| parent | e9da490e510298086e93fe829949a67657443be5 (diff) | |
Replace `/` division with multiplication and custom `divide()` function (#34245)
* Convert bulk of division to multiplication
* Use custom divide() function instead of Dart Sass math module for greater compatibility
* Apply suggestions from code review
* Fix functions
Diffstat (limited to 'scss/mixins')
| -rw-r--r-- | scss/mixins/_grid.scss | 13 |
1 files changed, 8 insertions, 5 deletions
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss index 36031df796..f108b447b3 100644 --- a/scss/mixins/_grid.scss +++ b/scss/mixins/_grid.scss @@ -1,3 +1,5 @@ +@use "sass:math"; + /// Grid system // // Generate semantic grid columns with these mixins. @@ -8,8 +10,8 @@ display: flex; flex-wrap: wrap; margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list - margin-right: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list - margin-left: calc(var(--#{$variable-prefix}gutter-x) / -2); // stylelint-disable-line function-disallowed-list + margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list + margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list } @mixin make-col-ready($gutter: $grid-gutter-width) { @@ -21,15 +23,16 @@ flex-shrink: 0; width: 100%; max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid - padding-right: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list - padding-left: calc(var(--#{$variable-prefix}gutter-x) / 2); // stylelint-disable-line function-disallowed-list + padding-right: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list + padding-left: calc(var(--#{$variable-prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list margin-top: var(--#{$variable-prefix}gutter-y); } @mixin make-col($size: false, $columns: $grid-columns) { @if $size { flex: 0 0 auto; - width: percentage($size / $columns); + width: percentage(divide($size, $columns)); + } @else { flex: 1 1 0; max-width: 100%; |