-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyles.styl
391 lines (360 loc) · 7.77 KB
/
styles.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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
normalize-css()
// Material Shadows
shadow-level(l = 1)
if l == -1
box-shadow: inset -2px 7px 9px -7px rgba(0,0,0,0.7);
if l == 0
box-shadow: none;
if l == 1
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
if l == 2
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
if l == 3
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
if l == 4
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
if l == 5
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
// Common Transition
trans($sec = 0.3s)
transition: all $sec ease
// Grid
$xsmall = 340px
$small = 500px
$med = 700px
$large = 960px
$wide = 1200px
// Colors
black = #222
grey = #D8D8D8
light-grey = #EEE
purp = #524763
dark-purp = #373142
red = #E54B4B
teal = #82D8D8
dark-teal = #66A6A6
green = #CBE56C
blue = #16528E
bright-blue = #0082C8
maroon = #6A2140
light-red = #CA5765
pink = #CF256D
orange = #E8846B
z = {
neg: -7,
lowest: 1,
low: 4,
mid: 5,
video: 6,
header: 7,
nav: 8,
mini: 9,
modal: 10,
highest: 11
}
social = {
twitter: #00aced,
facebook: #3b5998,
google: #dd4b39,
youtube: #bb0000
}
$side-nav = 100px
$side-nav-large = 200px
html
box-sizing: border-box
*, *:before, *:after
box-sizing: inherit
body
background light-grey
padding: 70px 0 150px
header
color #FFF
background: purp
padding 20px
fixed top left
width 100%
height 70px
z-index: z.header
shadow-level(2)
clearfix()
h1
margin 0
font-size 1.6em
float left
.login-buttons-dropdown-align-
float right
a
color #FFF
text-decoration none
p
color #333
.page-title
text-transform uppercase
text-align center
margin-bottom 30px
.billboard
background dark-purp
color #FFF
font-size 2em
text-align center
padding 60px
h2
margin 0
.main-layout
lost-center 90%
margin-top 20px
+above($med)
lost-center 90%
padding-left $side-nav
+above($large)
lost-center 80%
margin-top 40px
padding-left $side-nav-large
.new-recipe
margin-bottom 20px
.new-recipe-container
position relative
background #FFF
padding 20px
margin-bottom 20px
shadow-level(2)
.fa-close
position absolute
top 0
right 0
padding 20px
label
display block
margin-bottom 10px
textarea, input
width 100%
.btn, button
display inline-block
cursor pointer
background purp
color #FFF
text-decoration none
text-transform uppercase
padding 5px 15px
border solid 3px purp
border-radius 2px
font-weight 800
shadow-level(1)
trans()
&:hover
background @background - 20
border-color @background
shadow-level(2)
&.btn-primary
background teal
border-color teal
color dark-purp
&:hover
background @background - 40
border-color @background
&.btn-deny
background red
border solid 3px @background
&:hover
background @background - 20
border-color @background
&.btn-text
color purp
background transparent
border solid 2px purp
shadow-level(0)
&:hover
background teal
border-color @background
shadow-level(1)
&.btn-text-dark
color #FFF
background transparent
border solid 2px #FFF
shadow-level(0)
&:hover
background #FFF
color dark-purp
border-color @background
shadow-level(1)
&.btn-confirmation
color black
background green
border solid 2px @background
&:hover
background @background - 20
border-color dark-purp
&.btn-cancel
color #FFF
background transparent
border solid 2px #FFF
opacity 0.4
shadow-level(-1)
&:hover
background red
color #FFF
opacity 1
shadow-level(2)
border-color @background
input, select, textarea
color purp
background #FFF
border solid 2px light-grey
border-radius 2px
font-weight 800
width 100%
padding 6px 10px
margin-bottom 10px
&.static-input
border none
background transparent
.list-group
list-style none
padding 0
.panel-body
.form-group
lost-column 1/2
.autoform-remove-item.btn
background light-grey
box-shadow none
border none
border-radius 50%
font-size 1em
height: 25px
width: 25px
text-align: center
display: block
padding: 0
.autoform-add-item.btn
width 100%
border-radius 0
border none
box-shadow none
background light-grey
.autoform-remove-item-wrap
vertical-align middle
.side-nav
fixed bottom left
height 100px
width 100%
overflow hidden
background dark-purp
color #FFF
z-index: z.header
shadow-level(2)
ul
margin 0
padding 0
display flex
justify-content space-between
list-style none
a
color #FFF
text-decoration none
padding 20px 20px
display block
text-align center
trans()
&:hover, &.active
background purp
i
display block
font-size 2em
margin-bottom 10px
+above($med)
height 100%
z-index: z.mid
padding 120px 0
fixed top left
width $side-nav
ul
display block
shadow-level(-1)
a
padding 20px 10px
&:hover, &.active
border-left 4px solid teal
+above($large)
width $side-nav-large
a
padding 20px 20px
&:hover, &.active
border-left 10px solid teal
.recipe
background #FFF
padding 0 20px 20px
margin-bottom 20px
position relative
z-index 1
shadow-level(1)
trans()
.remove-from-menu
display none
&.in-menu
background teal
color #FFF
h3
border-bottom: rgba(255,255,255, 0.6) solid 3px
.add-to-menu
display none
.remove-from-menu
display block
h3
font-size: 3em;
opacity: 0.3;
border-bottom: rgba(0,0,0, 0.3) solid 3px
margin-top 0
margin-bottom 10px
button
margin-top 20px
.fa-trash
opacity 0.3
cursor pointer
position absolute
top 0
right 0
font-size 1.6em
display block
padding 20px
color black
trans()
&:hover
color red
opacity 0.6
.ingredient
display inline-block
margin-right 10px
font-size 1.2em
&:hover
shadow-level(3)
// animation card 0.6s ease 1 forwards
@keyframes card
0%
transform translate3d(0, 0, 0)
50%
transform translate3d(0, -135px, 0)
51%
z-index 10
transform translate3d(0, -135px, 0)
100%
z-index 10
transform translate3d(0, 0, 0)
.menu-item
@extend .recipe
.shopping-list
@extend .recipe
padding 50px 5%
list-style none
li
font-size 2em
padding 20px
border-bottom 1px solid light-grey
border-top 1px solid light-grey
& + li
border-top none
.login-buttons-dropdown-align-
#login-dropdown-list
right 0
left auto
a
color dark-purp