-
Notifications
You must be signed in to change notification settings - Fork 0
/
simple-flex.scss
102 lines (86 loc) · 2.83 KB
/
simple-flex.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
/*******************/
// SF - Simple Flex
/*******************/
.sf {
display: flex;
&.inline {
display: inline-flex;
}
&.column {
flex-direction: column;
}
&.wrap {
flex-wrap: wrap;
}
/*******************/
// Flex Layout
/*******************/
// Basics
&.t {align-items: flex-start;}
&.m {align-items: center;}
&.b {align-items: flex-end;}
&.l {justify-content: flex-end;}
&.c {justify-content: center;}
&.r {justify-content: flex-start;}
// Combos
&.tl {align-items: flex-start; justify-content: flex-start;}
&.tc {align-items: flex-start; justify-content: center;}
&.tr {align-items: flex-start; justify-content: flex-end;}
&.ml {align-items: center; justify-content: flex-start;}
&.mc {align-items: center; justify-content: center;}
&.mr {align-items: center; justify-content: flex-end;}
&.bl {align-items: flex-end; justify-content: flex-start;}
&.bc {align-items: flex-end; justify-content: center;}
&.br {align-items: flex-end; justify-content: flex-end;}
// Advanced combos
&.sb {justify-content: space-between;}
&.sa {justify-content: space-around;}
&.tsb {align-items: flex-start; justify-content: space-between;}
&.tsa {align-items: flex-start; justify-content: space-around;}
&.msb {align-items: center; justify-content: space-between;}
&.msa {align-items: center; justify-content: space-around;}
&.bsb {align-items: flex-end; justify-content: space-between;}
&.bsa {align-items: flex-end; justify-content: space-around;}
}
/*******************/
// Columns
/*******************/
@for $i from 1 through 12 {
.c#{$i} {
flex: $i;
}
}
/*******************/
// SA - Simple Align
/*******************/
.sa-left { text-align: left; }
.sa-center { text-align: center; }
.sa-right { text-align: right; }
/*******************/
// Spacing
/*******************/
$spacing: (
none: 0rem,
xs: 0.333rem,
sm: 0.666rem,
md: 1rem,
lg: 1.333rem,
xl: 1.666rem,
xxl: 2rem
);
$sides: top, right, bottom, left;
$properties: padding, margin;
@each $property in $properties {
@each $size, $val in $spacing {
.#{$property}-all-#{$size} { #{$property}: $val; }
.#{$property}-tb-#{$size} { #{$property}-top: $val; #{$property}-bottom: $val; }
.#{$property}-lr-#{$size} { #{$property}-left: $val; #{$property}-right: $val; }
.#{$property}-children-all-#{$size} { > *:not(:last-child) { #{$property}: $val; } }
.#{$property}-children-tb-#{$size} { > *:not(:last-child) { #{$property}-top: $val; #{$property}-bottom: $val; } }
.#{$property}-children-lr-#{$size} { > *:not(:last-child) { #{$property}-left: $val; #{$property}-right: $val; } }
@each $side in $sides {
.#{$property}-#{$side}-#{$size} { #{$property}-#{$side}: $val; }
.#{$property}-children-#{$side}-#{$size} { > *:not(:last-child) { #{$property}-#{$side}: $val; } }
}
}
}