-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsassil.scss
130 lines (100 loc) · 3.45 KB
/
sassil.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
$space-1: .5rem !default;
$space-2: 1rem !default;
$space-3: 2rem !default;
$space-4: 4rem !default;
// VALIGN
.valign { display: table; table-layout: fixed;}
.valign-top { display: table-cell; vertical-align: top; }
.valign-middle { display: table-cell; vertical-align: middle; }
.valign-baseline { display: table-cell; vertical-align: baseline; }
.valign-bottom { display: table-cell; vertical-align: bottom; }
// UTILS
.fw-l, .text-light { font-weight: 300; }
.fw-n, .text-normal { font-weight: 500; }
.fw-b, .text-bold { font-weight: 700; }
.text-overflow,
.text-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// MARGINS
.m0 { margin: 0 }
.mt0 { margin-top: 0 }
.mr0 { margin-right: 0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left: 0 }
.m1 { margin: $space-1 }
.mt1 { margin-top: $space-1 }
.mr1 { margin-right: $space-1 }
.mb1 { margin-bottom: $space-1 }
.ml1 { margin-left: $space-1 }
.m2 { margin: $space-2 }
.mt2 { margin-top: $space-2 }
.mr2 { margin-right: $space-2 }
.mb2 { margin-bottom: $space-2 }
.ml2 { margin-left: $space-2 }
.m3 { margin: $space-3 }
.mt3 { margin-top: $space-3 }
.mr3 { margin-right: $space-3 }
.mb3 { margin-bottom: $space-3 }
.ml3 { margin-left: $space-3 }
.m4 { margin: $space-4 }
.mt4 { margin-top: $space-4 }
.mr4 { margin-right: $space-4 }
.mb4 { margin-bottom: $space-4 }
.ml4 { margin-left: $space-4 }
.mxn1 { margin-left: -$space-1; margin-right: -$space-1; }
.mxn2 { margin-left: -$space-2; margin-right: -$space-2; }
.mxn3 { margin-left: -$space-3; margin-right: -$space-3; }
.mxn4 { margin-left: -$space-4; margin-right: -$space-4; }
.mx-auto { margin-left: auto; margin-right: auto; }
// PADDINGS
.p0 { padding: 0 }
.p1 { padding: $space-1 }
.pt1 { padding-top: $space-1 }
.py1 { padding-top: $space-1; padding-bottom: $space-1 }
.px1 { padding-left: $space-1; padding-right: $space-1 }
.p2 { padding: $space-2 }
.pt2 { padding-top: $space-2 }
.py2 { padding-top: $space-2; padding-bottom: $space-2 }
.px2 { padding-left: $space-2; padding-right: $space-2 }
.p3 { padding: $space-3 }
.pt3 { padding-top: $space-3 }
.py3 { padding-top: $space-3; padding-bottom: $space-3 }
.px3 { padding-left: $space-3; padding-right: $space-3 }
.p4 { padding: $space-4 }
.pt4 { padding-top: $space-4 }
.py4 { padding-top: $space-4; padding-bottom: $space-4 }
.px4 { padding-left: $space-4; padding-right: $space-4 }
// TYPE SCALE
.fs-h1 { font-size: $font-size-h1 }
.fs-h2 { font-size: $font-size-h2 }
.fs-h3 { font-size: $font-size-h3 }
.fs-h4 { font-size: $font-size-h4 }
.fs-h5 { font-size: $font-size-h5 }
.fs-h6 { font-size: $font-size-h6 }
// POSITIONS
.relative { position: relative; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.z1 { z-index: 1 }
.z2 { z-index: 2 }
.z3 { z-index: 3 }
.z4 { z-index: 4 }
// POSITIONS (from UIKit)
[class*='pin-cover'],
[class*='pin-top'],
[class*='pin-bottom'] { position: absolute }
.pin-top { top: 0; }
.pin-top-right { top: 0; right: 0; }
.pin-top-left { top: 0; left: 0; }
.pin-bottom { bottom: 0; }
.pin-bottom-right { bottom: 0; right: 0; }
.pin-bottom-left { bottom: 0; left: 0; }
.pin-cover { top: 0; right: 0; bottom: 0; left: 0; }
.pin-cover-inner { width: 100%; height: 100%; }
// DIMENSIONS
.full-w-h { width: 100%; height: 100%; }
.full-w { width: 100%; }
.full-h { height: 100%; }