forked from 1000ch/grd-sass
-
Notifications
You must be signed in to change notification settings - Fork 0
/
grd.scss
36 lines (31 loc) · 969 Bytes
/
grd.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
$total-columns: 12 !default;
@mixin grid {
display: flex;
flex-wrap: wrap;
}
@mixin cell {
box-sizing: border-box;
flex-shrink: 0;
}
.Grid { @include grid; }
.Grid.\-top { align-items: flex-start; }
.Grid.\-middle { align-items: center; }
.Grid.\-bottom { align-items: flex-end; }
.Grid.\-stretch { align-items: stretch; }
.Grid.\-baseline { align-items: baseline; }
.Grid.\-left { justify-content: flex-start; }
.Grid.\-center { justify-content: center; }
.Grid.\-right { justify-content: flex-end; }
.Grid.\-between { justify-content: space-between; }
.Grid.\-around { justify-content: space-around; }
.Cell { @include cell; }
.Cell.\-fill { width: 0; min-width: 0; flex-grow: 1; }
@for $index from 1 through $total-columns {
.Cell.\-#{$index}of#{$total-columns} {
@if ($index != $total-columns) {
width: calc(100% * #{$index} / #{$total-columns});
} @else {
width: 100%;
}
}
}