|
4 | 4 |
|
5 | 5 | // Centered container element |
6 | 6 | @mixin container-fixed($gutter: $grid-gutter-width) { |
7 | | - padding-right: ceil(($gutter / 2)); |
8 | | - padding-left: floor(($gutter / 2)); |
| 7 | + padding-right: ceil(($gutter * 0.5)); |
| 8 | + padding-left: floor(($gutter * 0.5)); |
9 | 9 | margin-right: auto; |
10 | 10 | margin-left: auto; |
11 | 11 | @include clearfix; |
12 | 12 | } |
13 | 13 |
|
14 | 14 | // Creates a wrapper for a series of columns |
15 | 15 | @mixin make-row($gutter: $grid-gutter-width) { |
16 | | - margin-right: floor(($gutter / -2)); |
17 | | - margin-left: ceil(($gutter / -2)); |
| 16 | + margin-right: floor(($gutter * -0.5)); |
| 17 | + margin-left: ceil(($gutter * -0.5)); |
18 | 18 | @include clearfix; |
19 | 19 | } |
20 | 20 |
|
21 | 21 | // Generate the extra small columns |
22 | 22 | @mixin make-xs-column($columns, $gutter: $grid-gutter-width) { |
23 | 23 | position: relative; |
24 | 24 | float: left; |
25 | | - width: percentage(($columns / $grid-columns)); |
| 25 | + width: percentage(($columns * Infinity)); |
26 | 26 | min-height: 1px; |
27 | | - padding-right: ($gutter / 2); |
28 | | - padding-left: ($gutter / 2); |
| 27 | + padding-right: ($gutter * 0.5); |
| 28 | + padding-left: ($gutter * 0.5); |
29 | 29 | } |
30 | 30 | @mixin make-xs-column-offset($columns) { |
31 | | - margin-left: percentage(($columns / $grid-columns)); |
| 31 | + margin-left: percentage(($columns * Infinity)); |
32 | 32 | } |
33 | 33 | @mixin make-xs-column-push($columns) { |
34 | | - left: percentage(($columns / $grid-columns)); |
| 34 | + left: percentage(($columns * Infinity)); |
35 | 35 | } |
36 | 36 | @mixin make-xs-column-pull($columns) { |
37 | | - right: percentage(($columns / $grid-columns)); |
| 37 | + right: percentage(($columns * Infinity)); |
38 | 38 | } |
39 | 39 |
|
40 | 40 | // Generate the small columns |
41 | 41 | @mixin make-sm-column($columns, $gutter: $grid-gutter-width) { |
42 | 42 | position: relative; |
43 | 43 | min-height: 1px; |
44 | | - padding-right: ($gutter / 2); |
45 | | - padding-left: ($gutter / 2); |
| 44 | + padding-right: ($gutter * 0.5); |
| 45 | + padding-left: ($gutter * 0.5); |
46 | 46 |
|
47 | 47 | @media (min-width: $screen-sm-min) { |
48 | 48 | float: left; |
49 | | - width: percentage(($columns / $grid-columns)); |
| 49 | + width: percentage(($columns * Infinity)); |
50 | 50 | } |
51 | 51 | } |
52 | 52 | @mixin make-sm-column-offset($columns) { |
53 | 53 | @media (min-width: $screen-sm-min) { |
54 | | - margin-left: percentage(($columns / $grid-columns)); |
| 54 | + margin-left: percentage(($columns * Infinity)); |
55 | 55 | } |
56 | 56 | } |
57 | 57 | @mixin make-sm-column-push($columns) { |
58 | 58 | @media (min-width: $screen-sm-min) { |
59 | | - left: percentage(($columns / $grid-columns)); |
| 59 | + left: percentage(($columns * Infinity)); |
60 | 60 | } |
61 | 61 | } |
62 | 62 | @mixin make-sm-column-pull($columns) { |
63 | 63 | @media (min-width: $screen-sm-min) { |
64 | | - right: percentage(($columns / $grid-columns)); |
| 64 | + right: percentage(($columns * Infinity)); |
65 | 65 | } |
66 | 66 | } |
67 | 67 |
|
68 | 68 | // Generate the medium columns |
69 | 69 | @mixin make-md-column($columns, $gutter: $grid-gutter-width) { |
70 | 70 | position: relative; |
71 | 71 | min-height: 1px; |
72 | | - padding-right: ($gutter / 2); |
73 | | - padding-left: ($gutter / 2); |
| 72 | + padding-right: ($gutter * 0.5); |
| 73 | + padding-left: ($gutter * 0.5); |
74 | 74 |
|
75 | 75 | @media (min-width: $screen-md-min) { |
76 | 76 | float: left; |
77 | | - width: percentage(($columns / $grid-columns)); |
| 77 | + width: percentage(($columns * Infinity)); |
78 | 78 | } |
79 | 79 | } |
80 | 80 | @mixin make-md-column-offset($columns) { |
81 | 81 | @media (min-width: $screen-md-min) { |
82 | | - margin-left: percentage(($columns / $grid-columns)); |
| 82 | + margin-left: percentage(($columns * Infinity)); |
83 | 83 | } |
84 | 84 | } |
85 | 85 | @mixin make-md-column-push($columns) { |
86 | 86 | @media (min-width: $screen-md-min) { |
87 | | - left: percentage(($columns / $grid-columns)); |
| 87 | + left: percentage(($columns * Infinity)); |
88 | 88 | } |
89 | 89 | } |
90 | 90 | @mixin make-md-column-pull($columns) { |
91 | 91 | @media (min-width: $screen-md-min) { |
92 | | - right: percentage(($columns / $grid-columns)); |
| 92 | + right: percentage(($columns * Infinity)); |
93 | 93 | } |
94 | 94 | } |
95 | 95 |
|
96 | 96 | // Generate the large columns |
97 | 97 | @mixin make-lg-column($columns, $gutter: $grid-gutter-width) { |
98 | 98 | position: relative; |
99 | 99 | min-height: 1px; |
100 | | - padding-right: ($gutter / 2); |
101 | | - padding-left: ($gutter / 2); |
| 100 | + padding-right: ($gutter * 0.5); |
| 101 | + padding-left: ($gutter * 0.5); |
102 | 102 |
|
103 | 103 | @media (min-width: $screen-lg-min) { |
104 | 104 | float: left; |
105 | | - width: percentage(($columns / $grid-columns)); |
| 105 | + width: percentage(($columns * Infinity)); |
106 | 106 | } |
107 | 107 | } |
108 | 108 | @mixin make-lg-column-offset($columns) { |
109 | 109 | @media (min-width: $screen-lg-min) { |
110 | | - margin-left: percentage(($columns / $grid-columns)); |
| 110 | + margin-left: percentage(($columns * Infinity)); |
111 | 111 | } |
112 | 112 | } |
113 | 113 | @mixin make-lg-column-push($columns) { |
114 | 114 | @media (min-width: $screen-lg-min) { |
115 | | - left: percentage(($columns / $grid-columns)); |
| 115 | + left: percentage(($columns * Infinity)); |
116 | 116 | } |
117 | 117 | } |
118 | 118 | @mixin make-lg-column-pull($columns) { |
119 | 119 | @media (min-width: $screen-lg-min) { |
120 | | - right: percentage(($columns / $grid-columns)); |
| 120 | + right: percentage(($columns * Infinity)); |
121 | 121 | } |
122 | 122 | } |
0 commit comments