|
56 | 56 |
|
57 | 57 | @function column-set-var($var, $device, $prop) { |
58 | 58 |
|
59 | | - @if not $var { |
| 59 | + @if not $var { |
60 | 60 |
|
61 | | - @return map.get(map.get($column-preset, $device), $prop); |
62 | | - } @else { |
| 61 | + @return map.get(map.get($column-preset, $device), $prop); |
| 62 | + } @else { |
63 | 63 |
|
64 | | - @return $var; |
65 | | - } |
| 64 | + @return $var; |
| 65 | + } |
66 | 66 | } |
67 | 67 |
|
68 | 68 | // ---- |
69 | 69 | // column - return a percent value |
70 | 70 | // ---- |
71 | 71 |
|
72 | 72 | @function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) { |
73 | | - // shift vars if $device is number |
74 | | - @if meta.type-of($device) == "number" { |
75 | | - $total-gutter: $total-column; |
76 | | - $total-column: $nb-gutter; |
77 | | - $nb-gutter: $nb-column; |
78 | | - $nb-column: $device; |
79 | | - $device: d; |
80 | | - } |
81 | | - |
82 | | - $preset: map.get($column-preset, $device); |
83 | | - $gutter-width: map.get($preset, gutter-width); |
84 | | - $column-width: map.get($preset, column-width); |
85 | | - $total-column: column-set-var($total-column, $device, total-column); |
86 | | - |
87 | | - @if not $nb-gutter { |
88 | | - $nb-gutter: $nb-column - 1; |
89 | | - } |
90 | | - |
91 | | - @if not $total-gutter { |
92 | | - $total-gutter: $total-column - 1; |
93 | | - } |
94 | | - |
95 | | - @return math.div($nb-column * $column-width + $nb-gutter * $gutter-width, $total-column * $column-width + $total-gutter * $gutter-width) * 100%; |
| 73 | + // shift vars if $device is number |
| 74 | + @if meta.type-of($device) == "number" { |
| 75 | + $total-gutter: $total-column; |
| 76 | + $total-column: $nb-gutter; |
| 77 | + $nb-gutter: $nb-column; |
| 78 | + $nb-column: $device; |
| 79 | + $device: d; |
| 80 | + } |
| 81 | + |
| 82 | + $preset: map.get($column-preset, $device); |
| 83 | + $gutter-width: map.get($preset, gutter-width); |
| 84 | + $column-width: map.get($preset, column-width); |
| 85 | + $total-column: column-set-var($total-column, $device, total-column); |
| 86 | + |
| 87 | + @if not $nb-gutter { |
| 88 | + $nb-gutter: $nb-column - 1; |
| 89 | + } |
| 90 | + |
| 91 | + @if not $total-gutter { |
| 92 | + $total-gutter: $total-column - 1; |
| 93 | + } |
| 94 | + |
| 95 | + @return math.div($nb-column * $column-width + $nb-gutter * $gutter-width, $total-column * $column-width + $total-gutter * $gutter-width) * 100%; |
96 | 96 | } |
97 | 97 |
|
98 | 98 | // ---- |
99 | 99 | // column px, return a pixel value |
100 | 100 | // ---- |
101 | 101 |
|
102 | 102 | @function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) { |
103 | | - // shift vars if $device is number |
104 | | - @if meta.type-of($device) == "number" { |
105 | | - $nb-gutter: $nb-column; |
106 | | - $nb-column: $device; |
107 | | - $device: d; |
108 | | - } |
109 | | - |
110 | | - $preset: map.get($column-preset, $device); |
111 | | - $gutter-width: map.get($preset, gutter-width); |
112 | | - $column-width: map.get($preset, column-width); |
113 | | - |
114 | | - @if not $nb-gutter { |
115 | | - $nb-gutter: $nb-column - 1; |
116 | | - } |
117 | | - |
118 | | - @if $unitless == true { |
119 | | - @return $nb-column * $column-width + $nb-gutter * $gutter-width; |
120 | | - } |
121 | | - |
122 | | - @return #{$nb-column * $column-width + $nb-gutter * $gutter-width}px; |
| 103 | + // shift vars if $device is number |
| 104 | + @if meta.type-of($device) == "number" { |
| 105 | + $nb-gutter: $nb-column; |
| 106 | + $nb-column: $device; |
| 107 | + $device: d; |
| 108 | + } |
| 109 | + |
| 110 | + $preset: map.get($column-preset, $device); |
| 111 | + $gutter-width: map.get($preset, gutter-width); |
| 112 | + $column-width: map.get($preset, column-width); |
| 113 | + |
| 114 | + @if not $nb-gutter { |
| 115 | + $nb-gutter: $nb-column - 1; |
| 116 | + } |
| 117 | + |
| 118 | + @if $unitless == true { |
| 119 | + @return $nb-column * $column-width + $nb-gutter * $gutter-width; |
| 120 | + } |
| 121 | + |
| 122 | + @return #{$nb-column * $column-width + $nb-gutter * $gutter-width}px; |
123 | 123 | } |
124 | 124 |
|
125 | 125 | // ---- |
126 | 126 | // column full - return a percent value of the full width container (100%) minus mobile external gutter width * 2 |
127 | 127 | // ---- |
128 | 128 |
|
129 | 129 | @function column-full($device, $nb-column: null, $nb-gutter: null) { |
130 | | - // shift vars if $device is number |
131 | | - @if meta.type-of($device) == "number" { |
132 | | - $nb-gutter: $nb-column; |
133 | | - $nb-column: $device; |
134 | | - $device: d; |
135 | | - } |
| 130 | + // shift vars if $device is number |
| 131 | + @if meta.type-of($device) == "number" { |
| 132 | + $nb-gutter: $nb-column; |
| 133 | + $nb-column: $device; |
| 134 | + $device: d; |
| 135 | + } |
136 | 136 |
|
137 | | - $preset: map.get($column-preset, $device); |
138 | | - $gutter-width: map.get($preset, gutter-width); |
139 | | - $column-width: map.get($preset, column-width); |
140 | | - $total-column: map.get($preset, total-column); |
| 137 | + $preset: map.get($column-preset, $device); |
| 138 | + $gutter-width: map.get($preset, gutter-width); |
| 139 | + $column-width: map.get($preset, column-width); |
| 140 | + $total-column: map.get($preset, total-column); |
141 | 141 |
|
142 | | - $width: column-px($device, $nb-column, $nb-gutter, true); |
| 142 | + $width: column-px($device, $nb-column, $nb-gutter, true); |
143 | 143 |
|
144 | | - @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); |
| 144 | + @return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))}); |
145 | 145 | } |
0 commit comments