-
Notifications
You must be signed in to change notification settings - Fork 45
/
layout.styl
182 lines (153 loc) · 4.29 KB
/
layout.styl
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
// Mixin: group
// Clearfix with a better name. Excellent for wrangling floats. Taken from
// https://www.cssmojo.com/latest_new_clearfix_so_far/
// Does not support IE 6 and 7 because you should not support them either.
group()
&:after
content: ""
display: block
clear: both
// Alias: clearfix
// Group with a worse name. If you need really can't break the habit.
clearfix()
group()
// Function: pos
// Backs position helpers, found below
-pos(type, args)
i = 0
position: unquote(type)
for j in (1..4)
if length(args) > i
{args[i]}: args[i + 1] is a 'unit' or 'auto' ? args[i += 1] : 0
i += 1
// Mixin: Positions
// Syntax shortcuts for absolute, relative, and fixed positioning. Ported
// from nib: https://github.com/tj/nib/blob/master/lib/nib/positions.styl
fixed()
-pos('fixed', arguments)
absolute()
-pos('absolute', arguments)
relative()
-pos('relative', arguments)
// Mixin: Size
// Shortcut for setting width and height quickly. If passed one value, sets this
// value as both width and height.
//
// ex. size: 10px 30px
// ex. size: 10px
size()
if length(arguments) == 1
width: arguments[0]
height: arguments[0]
else
width: arguments[0]
height: arguments[1]
// Mixin: Columns
//
// For css3 columns. Takes column count (int), column gap (px, em), column width
// (px, em), and a border-like declaration if you want a column rule. This
// follows exactly with the css3 spec, it's just quicker.
//
// ex. columns()
// ex. columns: 5
// ex. columns(8, 15px, 200px, '1px solid red')
columns($count = 3, $gap = 30px, $width = null, $rule = null)
column-count: $count
column-gap: $gap
column-width: $width if $width
column-rule: unquote($rule) if $rule
// Mixin: Avoid Column Break
//
// If you have a list that is broken into columns, this will make sure that the
// list item is not split across columns awkwardly. Works only in webkit at the
// moment.
//
// ex. avoid-column-break()
avoid-column-break()
column-break-inside: avoid
// Mixin: Vertically Align
// Cross browser vertical align. Works down to IE9.
//
// ex. vertically-align() or reset it with vertically-align(false)
vertically-align($reset = null)
if $reset != false
position: relative
top: 50%
transform: translateY(-50%)
else
position: relative
top: 0
transform: translateY(0)
// Mixin: Media
//
// Based on Nicole Sullivan's media class, made famous by Facebook
// https://www.stubbornella.org/content/2010/06/25/the-media-object-saves-
// hundreds-of-lines-of-code
//
// Put this on a parent and it will split the first two children left and right,
// like you would with perhaps a comment with an avatar to the left. Pass it a
// margin between the two. Explained fully here:
// https://carrotblog.com/css-patterns-evolved/
//
// This mixin works right when the element you apply it to has two or three
// direct children. The first one will float to the left, the second one will be
// to the right of the first, and third will go farthest right.
//
// ex. media-object()
// ex. media-object: 15px
// ex. media-object: 15px 10px
media-object($margin = 10px)
$left-margin = $margin
$right-margin = $margin
if length(arguments) > 1
$left-margin = arguments[0]
$right-margin = arguments[1]
overflow: hidden
zoom: 1
& > *
display: inline-block
overflow: hidden
& > *:first-child
float: left
margin-right: $right-margin
& > *:nth-child(3)
float: right
margin-left: $left-margin
// Mixin: Ratio Box
// Set a specific width/height ratio. Useful on background images and iframes.
ratio-box($ratio = 1/1)
$ratio = remove-unit($ratio)
overflow: hidden
position: relative
&:before
content: ''
display: block
height: 0
padding-top: (1 / $ratio) * 100%
// Mixin: Horizontal Rule
//
// Clean reset for divider lines.
//
// ex: rule()
// ex rule(blue)
rule($color = rgba(#000, .15), $spacing = 1.5em)
border: 0
border-bottom: 1px solid $color
height: 0
padding: 0
margin: $spacing 0
// Mixin: Table Layout
//
// Sometimes you just need a good old-fashioned table layout.
// Read more: https://colintoh.com/blog/display-table-anti-hero
//
// ex: tl()
// ex: tl(auto)
tl($layout-type = fixed)
display: table
table-layout: $layout-type // "fixed" or "auto"
margin: 0
padding: 0
width: 100%
> *
display: table-cell