This repository has been archived by the owner on Dec 12, 2023. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.styl
294 lines (272 loc) · 5.58 KB
/
style.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
// Import all partials
@require './_*.styl'
header.top
text-align center
h1
font-size 14.4rem
line-height 0.7 // this font has a wacky baseline
display flex
justify-content: center;
// This is a bunch of goofy CSS to make the logo look decent
.ofThe
display flex
font-size 3rem
color orange
justify-content: center;
align-items: center;
background url('images/anchor.svg') center no-repeat;
background-size cover
padding 0 1rem
.of
padding-right 2rem
position relative
right -0.5rem
h3
margin 0
font-size 2rem
color orange
position relative
display inline-block
span
background white
position relative
z-index 2
padding-left 1rem
padding-right 1rem
&:before, &:after
display block
z-index 1
background black
position absolute
width 130%
height 1px
content ''
top 5px
margin-left -15%
&:after
top auto
bottom 7px
.catch-of-the-day
display flex
height 90vh
max-width:1500px
margin 0 auto
margin-top 5vh
perspective: 1000px;
transform-style preserve-3d
& > *
flex 1 4 auto
padding 2rem
border 1rem double lighten(black,10%)
position relative
background white
transition all 0.3s
box-shadow 0 5px 5px rgba(0,0,0,0.1)
overflow scroll
&:first-child
flex-shrink 1 // take 4x the extra room
flex-basis 50%
transform translateX(50%) rotateY(6deg) translateX(-50%)
&:nth-child(2)
transform translateX(-50%) rotateY(-14deg) translateX(50%)
border-left 0
border-right 0
min-width 300px
&:last-child
flex-shrink 1 // take 4x the extra room
flex-basis 50%
transform translateX(-50%) rotateY(10deg) translateX(50%) scale(1.08) translateX(24px)
// Folding Transforms
// Take off folding when not checked
input#fold:not(:checked) ~ #main
.catch-of-the-day > *
transform none
label[for="fold"]
position absolute
top 1rem
left 1rem
text-transform uppercase
font-size 1.3rem
background black
color white
border 2px solid black
cursor pointer
padding 0.5rem 1rem
input#fold
display none
&:checked + label
background white
color black
ul
list-style none
margin 0
padding 0
ul.order
// Default state
li
border-bottom 1px solid black
padding 2rem 0
display flex
font-size 1.4rem
justify-content space-between
align-items center
&:hover
// padding 1rem 0
button
display inline
button
border 0
display none
line-height 1
padding 0
&.total
font-weight 600
border-bottom 3px solid black
border-top 3px double black
&.unavailable
text-decoration line-through
background lighten(red, 80%)
.price
font-size 1.2rem
span.count
position relative
overflow hidden
float left // only works if it's floated?!
span
display inline-block
// transition all 0.5s
.order-title
text-align center
.fish-edit
margin-bottom 20px
border 2px solid black
overflow hidden
display flex
flex-wrap wrap
input, textarea, select
width 33.33%
padding 10px
line-height 1
font-size 1.2rem
border 0
border-bottom 1px solid black
border-right 1px solid black
appearance none
border-radius 0
background white
&:focus
outline 0
background lighten(orange, 85%)
textarea
width 100%
input:last-of-type
width 100%
button
width 100%
border 0
// Menu Styles
.list-of-fish
border-top 2px solid black
border-bottom 1px solid black
padding-top 5px
margin-top 2rem
transform translateZ(0);
.menu-fish
border-bottom 2px solid black
border-top 1px solid black
padding-bottom 2rem
padding-top 2rem
margin-bottom 5px
clear both
overflow hidden
p
margin 0
font-size 1.8rem
.fish-name
margin 0
display flex
justify-content space-between
align-items center
.price
font-size 1.4rem
// color orange
justify-content flex-end
// font-family 'Open Sans Condensed'
img
float left
width 150px
margin-right 1rem
button, input[type=submit]
text-transform uppercase
background none
border 1px solid black
font-weight 600
font-size 1.5rem
font-family 'Open Sans'
transition all 0.2s
position relative
z-index 2
&[disabled]
color red
background white
border-color red
transform rotate(-10deg) scale(2) translateX(50%) translateY(-50%)
&:hover
color red
cursor not-allowed
&:after
display none
&:after
content ''
z-index -1
display block
background black
position absolute
width 100%
height 0
left 0
top 0
transition all 0.2s
&:hover, &:focus
color white
outline 0
&:after
height 100%
// variants
&.warning
&:after
background red
&.success
&:after
background green
&.github, &.facebook, &.twitter
border 0
display block
margin-bottom 2rem
width 100%
color white
padding 2rem
&.github
background #82D465
&:after
background darken(#82D465, 20%)
&.facebook
background #3864A3
&:after
background darken(#3864A3, 20%)
&.twitter
background #5EA9DD
&:after
background darken(#5EA9DD, 20%)
// Store Selector
.store-selector
background white
max-width 500px
margin 50px auto
padding 2rem
border 2px solid black
input, button
width 100%
&[type="text"]
text-align center
font-size 3rem