-
Notifications
You must be signed in to change notification settings - Fork 18
/
Copy path_f-column.scss
145 lines (121 loc) · 4.08 KB
/
_f-column.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
@use "sass:meta";
@use "../01-abstract/variables";
@use "sass:map";
@use "sass:math";
/**
* 1/ Column - Make a column that return a percent value
*
* @author Nicolas Langle
*
* @param $device (based on $column-preset variable)
* @param $nb-column
* @param $nb-gutter
* @param $total-column
* @param $total-gutter
*
* Examples :
* column(6) -> return 6 column + 5 gutter of desktop preset
* column('m', 6) -> return 6 column + 5 gutter of mobile preset
* column(6, 5, 8) -> return 6 column + 5 gutter of 8 grid size of desktop
*
* ------------------------------------------------------------------------------------
*
* 2/ Column px - Make a column that return a pixel value
*
* @author Nicolas Langle
*
* @param $device (based on $column-preset variable)
* @param $nb-column
* @param $nb-gutter
* @param $unitless
*
* Examples :
* column(6) -> return 6 column + 5 gutter of desktop preset with px unit
* column(6, true) -> return 6 column + 5 gutter of desktop preset without px unit
*
* ------------------------------------------------------------------------------------
*
* 3/ Column full - Make a column that return a percent value of the full width container (100%) minus mobile external gutter width * 2
*
* @author Nicolas Langle
*
* @param $device (based on $column-preset variable)
* @param $nb-column
* @param $nb-gutter
*
* Examples :
* column(6) -> return 6 column + 5 gutter of desktop preset
*
*/
// ----
// column-set-var
// ----
@function column-set-var($var, $device, $prop) {
@if not $var {
@return map.get(map.get(variables.$column-preset, $device), $prop);
} @else {
@return $var;
}
}
// ----
// column - return a percent value
// ----
@function column($device, $nb-column: null, $nb-gutter: null, $total-column: null, $total-gutter: null) {
// shift vars if $device is number
@if meta.type-of($device) == "number" {
$total-gutter: $total-column;
$total-column: $nb-gutter;
$nb-gutter: $nb-column;
$nb-column: $device;
$device: d;
}
$preset: map.get(variables.$column-preset, $device);
$gutter-width: map.get($preset, gutter-width);
$column-width: map.get($preset, column-width);
$total-column: column-set-var($total-column, $device, total-column);
@if not $nb-gutter {
$nb-gutter: $nb-column - 1;
}
@if not $total-gutter {
$total-gutter: $total-column - 1;
}
@return math.div($nb-column * $column-width + $nb-gutter * $gutter-width, $total-column * $column-width + $total-gutter * $gutter-width) * 100%;
}
// ----
// column px, return a pixel value
// ----
@function column-px($device, $nb-column: null, $nb-gutter: null, $unitless: false) {
// shift vars if $device is number
@if meta.type-of($device) == "number" {
$nb-gutter: $nb-column;
$nb-column: $device;
$device: d;
}
$preset: map.get(variables.$column-preset, $device);
$gutter-width: map.get($preset, gutter-width);
$column-width: map.get($preset, column-width);
@if not $nb-gutter {
$nb-gutter: $nb-column - 1;
}
@if $unitless == true {
@return $nb-column * $column-width + $nb-gutter * $gutter-width;
}
@return #{$nb-column * $column-width + $nb-gutter * $gutter-width}px;
}
// ----
// column full - return a percent value of the full width container (100%) minus mobile external gutter width * 2
// ----
@function column-full($device, $nb-column: null, $nb-gutter: null) {
// shift vars if $device is number
@if meta.type-of($device) == "number" {
$nb-gutter: $nb-column;
$nb-column: $device;
$device: d;
}
$preset: map.get(variables.$column-preset, $device);
$gutter-width: map.get($preset, gutter-width);
$column-width: map.get($preset, column-width);
$total-column: map.get($preset, total-column);
$width: column-px($device, $nb-column, $nb-gutter, true);
@return calc((100% - calc(var(--responsive--gutter) * 2)) * #{math.div($width, ($gutter-width * ($total-column - 1) + $column-width * $total-column))});
}