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
|
$context-id: 'grid' !default;
@include iro-context-stack-create($grid-context-id);
@mixin native-grid {
@supports (display: grid) {
@content;
}
}
@mixin grid($columns: 12, $h-spacing: 0, $v-spacing: 0, $reverse: false) {
display: flex;
flex-flow: row wrap;
align-items: stretch;
justify-content: flex-start;
margin: (-.5 * $v-spacing) (-.5 * $h-spacing);
@if $reverse {
flex-direction: row-reverse;
}
@include iro-context-push($grid-context-id, 'grid', (
--h-spacing: $h-spacing,
--v-spacing: $v-spacing,
--columns: $columns,
--reverse: $reverse
));
@content;
@include iro-context-pop($grid-context-id);
}
@mixin grid-col {
@include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
$data: nth(iro-context-get($grid-context-id, 'grid'), 2);
$v-spacing: map-get($data, --v-spacing);
$h-spacing: map-get($data, --h-spacing);
box-sizing: border-box;
flex: 0 0 auto;
margin: .5 * $v-spacing .5 * $h-spacing;
@include iro-context-push($grid-context-id, 'grid__col');
@content;
@include iro-context-pop($grid-context-id);
}
@mixin grid-col-span($i) {
@include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
$data: nth(iro-context-get($grid-context-id, 'grid'), 2);
$columns: map-get($data, --columns);
$h-spacing: map-get($data, --h-spacing);
@if $h-spacing != 0 {
width: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{($i - 1) * $h-spacing});
// ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
} @else {
width: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
}
}
@mixin grid-col-shift($i) {
@include iro-context-assert-stack-must-contain($grid-context-id, 'grid');
$data: nth(iro-context-get($grid-context-id, 'grid'), 2);
$columns: map-get($data, --columns);
$h-spacing: map-get($data, --h-spacing);
$reverse: map-get($data, --reverse);
$prop: if($reverse, margin-right, margin-left);
@if $i == 0 {
#{$prop}: 0;
} @else {
@if $h-spacing != 0 {
#{$prop}: calc((100% - #{$columns * $h-spacing}) * #{floor($i / $columns * 10000 - 1) / 10000} + #{$i * $h-spacing + $h-spacing / 2});
// ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
} @else {
#{$prop}: calc(100% * #{floor($i / $columns * 10000 - 1) / 10000});
// ^^^^^^^^^^ Bugfix for Firefox ^^^^^^^^^^
}
}
}
|
