-
Notifications
You must be signed in to change notification settings - Fork 43
/
Copy path_positioning.scss
83 lines (67 loc) · 2.83 KB
/
_positioning.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
// ====================================================
// Basic Positioning Properties
// ====================================================
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
// ====================================================
// Positioning for Flex Items
// ====================================================
// Columns & Rows need reversed styles to create the same effect
.center { align-items: center; justify-content: center; }
.top-left { align-items: flex-start; justify-content: flex-start; }
.bottom-right { align-items: flex-end; justify-content: flex-end; }
.column.top-center { align-items: center; justify-content: flex-start; }
.column.top-right { align-items: flex-end; justify-content: flex-start; }
.column.center-left { align-items: flex-start; justify-content: center; }
.column.center-right { align-items: flex-end; justify-content: center; }
.column.bottom-left { align-items: flex-start; justify-content: flex-end; }
.column.bottom-center { align-items: center; justify-content: flex-end; }
.row.top-center { align-items: flex-start; justify-content: center; }
.row.top-right { align-items: flex-start; justify-content: flex-end; }
.row.center-left { align-items: center; justify-content: flex-start; }
.row.center-right { align-items: center; justify-content: flex-end; }
.row.bottom-left { align-items: flex-end; justify-content: flex-start; }
.row.bottom-center { align-items: flex-end; justify-content: center; }
// ====================================================
// Flex Item Alignment
// ====================================================
.space-around { justify-content: space-around; }
.space-between { justify-content: space-between; }
.align-top { align-items: flex-start; }
.align-middle { align-items: middle; }
.align-baseline { align-items: baseline; }
.align-stretch { align-items: stretch; }
//====================================================
// Flex Order
//====================================================
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
// ====================================================
// Absolute Positioning
// ====================================================
.top { top: 0; }
.right { right: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
.absolute-center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto
}
// ====================================================
// Floats
// ====================================================
.float-left { float: left; }
.float-right { float: right; }