mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 17:11:48 +02:00
Code Issues Releases Wiki Activity

Replace / division with multiplication and custom divide() function (#34245)

Browse Source 
* 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
This commit is contained in:
Mark Otto
2021-06-14 09:35:30 -07:00
committed by GitHub
parent e9da490e51
commit be17444756
15 changed files with 86 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
scss/mixins/_grid.scss
View File

@@ -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%;