picasso 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +1 -1
- data/docs/all.html +391 -0
- data/docs/arrows.html +130 -0
- data/docs/bubbles.html +126 -0
- data/docs/build/manifest.json +4 -0
- data/docs/build/md/arrows.md +43 -0
- data/docs/build/md/bubbles.md +43 -0
- data/docs/build/md/buttons.md +89 -0
- data/docs/build/md/components.md +1 -0
- data/docs/build/md/despegar.md +198 -0
- data/docs/build/md/intro.md +1 -0
- data/docs/build/md/utils.md +17 -0
- data/docs/build/templates/index.html +37 -0
- data/docs/build/templates/layout.html +39 -0
- data/docs/build/templates/page.html +24 -0
- data/docs/buttons.html +170 -0
- data/docs/components.html +93 -0
- data/docs/config.rb +6 -0
- data/docs/css/github.css +88 -0
- data/docs/css/markdown.css +100 -0
- data/docs/css/style.css +838 -0
- data/docs/despegar.html +281 -0
- data/docs/index.html +93 -0
- data/docs/intro.html +93 -0
- data/docs/js/docs.js +16 -0
- data/docs/js/rainbow-custom.min.js +13 -0
- data/docs/sass/style.scss +215 -0
- data/docs/utils.html +104 -0
- data/lib/picasso/version.rb +1 -1
- data/stylesheets/_picasso.scss +3 -0
- data/stylesheets/picasso/_components.scss +3 -0
- data/stylesheets/picasso/_despegar.scss +1 -0
- data/stylesheets/picasso/_utils.scss +1 -0
- data/stylesheets/picasso/components/_arrows.scss +54 -0
- data/stylesheets/picasso/components/_bubbles.scss +76 -0
- data/stylesheets/picasso/components/_buttons.scss +2 -0
- data/stylesheets/picasso/components/buttons/_buttons.scss +106 -0
- data/stylesheets/picasso/components/buttons/_mini-buttons.scss +66 -0
- data/stylesheets/{despegar → picasso/despegar}/_variables.scss +4 -2
- data/stylesheets/picasso/utils/_clearfix.scss +33 -0
- metadata +41 -4
data/README.md
CHANGED
data/docs/all.html
ADDED
|
@@ -0,0 +1,391 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
7
|
+
<title>Picasso Docs</title>
|
|
8
|
+
|
|
9
|
+
<link type="text/css" rel="stylesheet" href="./css/markdown.css">
|
|
10
|
+
<link type="text/css" rel="stylesheet" href="./css/github.css">
|
|
11
|
+
<link type="text/css" rel="stylesheet" href="./css/style.css">
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
<div id='content'><a name="picasso-framework-css-sass"></a><h1>Picasso. Framework CSS/Sass.</h1>
|
|
19
|
+
|
|
20
|
+
<a name="components"></a><h1>Components</h1>
|
|
21
|
+
|
|
22
|
+
<a name="buttons"></a><h2>Buttons</h2>
|
|
23
|
+
<a name="ejemplos"></a><a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
24
|
+
<p><a class="button-demo-1" href="#">
|
|
25
|
+
<span>Comprar</span>
|
|
26
|
+
</a>
|
|
27
|
+
|
|
28
|
+
</p>
|
|
29
|
+
<p><a class="button-demo-2" href="#">
|
|
30
|
+
<span>Buscar</span>
|
|
31
|
+
</a>
|
|
32
|
+
|
|
33
|
+
</p>
|
|
34
|
+
<p><a class="button-demo-3" href="#">
|
|
35
|
+
<span>Reservar</span>
|
|
36
|
+
</a>
|
|
37
|
+
|
|
38
|
+
</p>
|
|
39
|
+
<p><a class="button-demo-4" href="#">
|
|
40
|
+
<span>Un texto demasiado largo para este botón</span>
|
|
41
|
+
</a>
|
|
42
|
+
|
|
43
|
+
</p>
|
|
44
|
+
<a name="html"></a><a name="html"></a><h3>HTML</h3>
|
|
45
|
+
<pre><code class="lang-html"><a class="button" href="#">
|
|
46
|
+
<span>Comprar</span>
|
|
47
|
+
</a></code></pre>
|
|
48
|
+
<a name="sass"></a><a name="sass"></a><h3>Sass</h3>
|
|
49
|
+
<pre><code class="lang-css">@import "picasso/components/buttons";
|
|
50
|
+
|
|
51
|
+
// Con valores por defecto
|
|
52
|
+
.button{
|
|
53
|
+
@include button();
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Con todos los parametros: ancho, alto, background y color
|
|
57
|
+
.button{
|
|
58
|
+
@include button(100px, 30px, red, white);
|
|
59
|
+
}</code></pre>
|
|
60
|
+
<a name="mini-buttons"></a><h2>Mini-Buttons</h2>
|
|
61
|
+
<h3>Ejemplos</h3>
|
|
62
|
+
<p><a class="mini-button-demo-1" href="#">
|
|
63
|
+
<span>Limpiar</span>
|
|
64
|
+
</a>
|
|
65
|
+
|
|
66
|
+
</p>
|
|
67
|
+
<p><a class="mini-button-demo-2" href="#">
|
|
68
|
+
<span>Abrir</span>
|
|
69
|
+
</a>
|
|
70
|
+
|
|
71
|
+
</p>
|
|
72
|
+
<p><a class="mini-button-demo-3" href="#">
|
|
73
|
+
<span>Descargar</span>
|
|
74
|
+
</a>
|
|
75
|
+
|
|
76
|
+
</p>
|
|
77
|
+
<p><a class="mini-button-demo-4" href="#">
|
|
78
|
+
<span>Ir</span>
|
|
79
|
+
</a>
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
</p>
|
|
84
|
+
<h3>HTML</h3>
|
|
85
|
+
<pre><code class="lang-html"><a class="mini-button" href="#">
|
|
86
|
+
<span>Comprar</span>
|
|
87
|
+
</a></code></pre>
|
|
88
|
+
<h3>Sass</h3>
|
|
89
|
+
<pre><code class="lang-css">@import "picasso/components/buttons";
|
|
90
|
+
|
|
91
|
+
// Con valores por defecto
|
|
92
|
+
.mini-button{
|
|
93
|
+
@include mini-button();
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Con todos los parametros: background y color
|
|
97
|
+
.mini-button{
|
|
98
|
+
@include button(grey, blue);
|
|
99
|
+
}</code></pre>
|
|
100
|
+
|
|
101
|
+
<a name="arrows"></a><h2>Arrows</h2>
|
|
102
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
103
|
+
<p><em class="arrow-demo-1">
|
|
104
|
+
Información
|
|
105
|
+
</em>
|
|
106
|
+
|
|
107
|
+
</p>
|
|
108
|
+
<p><em class="arrow-demo-2">
|
|
109
|
+
Importante
|
|
110
|
+
</em>
|
|
111
|
+
|
|
112
|
+
</p>
|
|
113
|
+
<p><em class="arrow-demo-3">
|
|
114
|
+
Leer
|
|
115
|
+
</em>
|
|
116
|
+
|
|
117
|
+
</p>
|
|
118
|
+
<p><em class="arrow-demo-4">
|
|
119
|
+
Aceptado
|
|
120
|
+
</em>
|
|
121
|
+
|
|
122
|
+
</p>
|
|
123
|
+
<a name="html"></a><h3>HTML</h3>
|
|
124
|
+
<pre><code class="lang-html"><em class="arrow">
|
|
125
|
+
Beneficio
|
|
126
|
+
</em></code></pre>
|
|
127
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
128
|
+
<pre><code class="lang-css">@import "picasso/components/arrows";
|
|
129
|
+
|
|
130
|
+
//Arrows
|
|
131
|
+
.arrow{
|
|
132
|
+
@include arrow();
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
// Con todos los parametros: background y color
|
|
136
|
+
.arrow{
|
|
137
|
+
@include arrow(green, white);
|
|
138
|
+
}</code></pre>
|
|
139
|
+
|
|
140
|
+
<a name="bubbles"></a><h2>Bubbles</h2>
|
|
141
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
142
|
+
<div class="bubble-demo-1">
|
|
143
|
+
<blockquote>
|
|
144
|
+
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
|
|
145
|
+
</blockquote>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<div class="bubble-demo-2">
|
|
149
|
+
<a name="this-is-a-long-title-this-is-a-long-title-this-is-a-long-title-this-is-a-long-title-this-is-a-long-title"></a><h4>This is a long title. This is a long title. This is a long title. This is a long title. This is a long title.</h4>
|
|
150
|
+
<blockquote>
|
|
151
|
+
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
|
|
152
|
+
</blockquote>
|
|
153
|
+
</div>
|
|
154
|
+
|
|
155
|
+
<a name="html"></a><h3>HTML</h3>
|
|
156
|
+
<pre><code class="lang-html"><div class="bubble">
|
|
157
|
+
<h4>This is a optional title</h4>
|
|
158
|
+
<blockquote>
|
|
159
|
+
This is a long quotation. This is a long quotation.
|
|
160
|
+
</blockquote>
|
|
161
|
+
</div></code></pre>
|
|
162
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
163
|
+
<pre><code class="lang-css">@import "picasso/components/bubbles";
|
|
164
|
+
|
|
165
|
+
//Bubbles
|
|
166
|
+
.bubble{
|
|
167
|
+
@include bubble();
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// Con todos los parametros: ancho, background, color y ellipsis
|
|
171
|
+
.bubble{
|
|
172
|
+
@include bubble(200px, blue, white, true);
|
|
173
|
+
}</code></pre>
|
|
174
|
+
|
|
175
|
+
<a name="utils"></a><h1>Utils</h1>
|
|
176
|
+
<a name="clearfix"></a><h2>Clearfix</h2>
|
|
177
|
+
<p>Basado en <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>.
|
|
178
|
+
|
|
179
|
+
</p>
|
|
180
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
181
|
+
<pre><code class="lang-css">@import "picasso/utils/clearfix";
|
|
182
|
+
|
|
183
|
+
//Clearfix
|
|
184
|
+
.container{
|
|
185
|
+
@include clearfix;
|
|
186
|
+
}</code></pre>
|
|
187
|
+
|
|
188
|
+
<a name="despegar"></a><h1>Despegar</h1>
|
|
189
|
+
<a name="variables"></a><h2>Variables</h2>
|
|
190
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
191
|
+
<a name="cuerpos-tipograficos"></a><h4>Cuerpos tipograficos</h4>
|
|
192
|
+
<p class="despegar-size-1-demo">11px - Aliquam tincidunt mauris eu risus.</p>
|
|
193
|
+
|
|
194
|
+
<p class="despegar-size-2-demo">13px - Aliquam tincidunt mauris eu risus.</p>
|
|
195
|
+
|
|
196
|
+
<p class="despegar-size-3-demo">16px - Aliquam tincidunt mauris eu risus.</p>
|
|
197
|
+
|
|
198
|
+
<p class="despegar-size-4-demo">20px - Aliquam tincidunt mauris eu risus.</p>
|
|
199
|
+
|
|
200
|
+
<p class="despegar-size-5-demo">24px - Aliquam tincidunt mauris eu risus.</p>
|
|
201
|
+
|
|
202
|
+
<p class="despegar-size-6-demo">28px - Aliquam tincidunt mauris eu risus.</p>
|
|
203
|
+
|
|
204
|
+
<a name="colores-base"></a><h4>Colores base</h4>
|
|
205
|
+
<p class="despegar-black-demo">#000 - Aliquam tincidunt mauris eu risus.</p>
|
|
206
|
+
|
|
207
|
+
<p class="despegar-white-demo">#FFF - Aliquam tincidunt mauris eu risus.</p>
|
|
208
|
+
|
|
209
|
+
<p class="despegar-yellow-demo">#FF3 - Aliquam tincidunt mauris eu risus.</p>
|
|
210
|
+
|
|
211
|
+
<p class="despegar-red-demo">#F00 - Aliquam tincidunt mauris eu risus.</p>
|
|
212
|
+
|
|
213
|
+
<p class="despegar-blue-demo">#013D93 - Aliquam tincidunt mauris eu risus.</p>
|
|
214
|
+
|
|
215
|
+
<p class="despegar-gray-1-demo">#222 - Aliquam tincidunt mauris eu risus.</p>
|
|
216
|
+
|
|
217
|
+
<p class="despegar-gray-2-demo">#444 - Aliquam tincidunt mauris eu risus.</p>
|
|
218
|
+
|
|
219
|
+
<p class="despegar-gray-3-demo">#666 - Aliquam tincidunt mauris eu risus.</p>
|
|
220
|
+
|
|
221
|
+
<p class="despegar-gray-4-demo">#888 - Aliquam tincidunt mauris eu risus.</p>
|
|
222
|
+
|
|
223
|
+
<p class="despegar-gray-5-demo">#AAA - Aliquam tincidunt mauris eu risus.</p>
|
|
224
|
+
|
|
225
|
+
<p class="despegar-gray-6-demo">#CCC - Aliquam tincidunt mauris eu risus.</p>
|
|
226
|
+
|
|
227
|
+
<p class="despegar-gray-7-demo">#EEE - Aliquam tincidunt mauris eu risus.</p>
|
|
228
|
+
|
|
229
|
+
<a name="elementos"></a><h4>Elementos</h4>
|
|
230
|
+
<p class="despegar-searchbox-bg-demo">#FF3 Background Buscador - Aliquam tincidunt mauris eu risus.</p>
|
|
231
|
+
|
|
232
|
+
<p class="despegar-title-color-demo">#013D93 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
|
|
233
|
+
|
|
234
|
+
<p class="despegar-titlealt-color-demo">#F90 Color Titulos alternativos - Aliquam tincidunt mauris eu risus.</p>
|
|
235
|
+
|
|
236
|
+
<p class="despegar-link-color-demo">#319FDA Color links - Aliquam tincidunt mauris eu risus.</p>
|
|
237
|
+
|
|
238
|
+
<p class="despegar-link-color-hover-demo">#66CCFF Color links (hover) - Aliquam tincidunt mauris eu risus.</p>
|
|
239
|
+
|
|
240
|
+
<p class="despegar-error-bg-demo">#FFE6E6 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
|
|
241
|
+
|
|
242
|
+
<p class="despegar-error-border-demo">#F00 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.</p>
|
|
243
|
+
|
|
244
|
+
<p class="despegar-warning-bg-demo">#FFFFE1 Background mensajes - Aliquam tincidunt mauris eu risus.</p>
|
|
245
|
+
|
|
246
|
+
<p class="despegar-warning-border-demo">#FC3 Color borde mensajes - Aliquam tincidunt mauris eu risus.</p>
|
|
247
|
+
|
|
248
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
249
|
+
<pre><code class="lang-css">@import "picasso/despegar/variables";
|
|
250
|
+
|
|
251
|
+
//Size 1
|
|
252
|
+
.despegar-size-1-demo{
|
|
253
|
+
font-size: $despegar-size-1;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
//Size 2
|
|
257
|
+
.despegar-size-2-demo{
|
|
258
|
+
font-size: $despegar-size-2;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
//Size 3
|
|
262
|
+
.despegar-size-3-demo{
|
|
263
|
+
font-size: $despegar-size-3;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
//Size 4
|
|
267
|
+
.despegar-size-4-demo{
|
|
268
|
+
font-size: $despegar-size-4;
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
//Size 5
|
|
272
|
+
.despegar-size-5-demo{
|
|
273
|
+
font-size: $despegar-size-5;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
//Size 6
|
|
277
|
+
.despegar-size-6-demo{
|
|
278
|
+
font-size: $despegar-size-6;
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
//Black
|
|
282
|
+
.despegar-black-demo{
|
|
283
|
+
background: $despegar-black;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
//White
|
|
287
|
+
.despegar-white-demo{
|
|
288
|
+
background: $despegar-white;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
//Yellow
|
|
292
|
+
.despegar-yellow-demo{
|
|
293
|
+
background: $despegar-yellow;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
//Red
|
|
297
|
+
.despegar-red-demo{
|
|
298
|
+
background: $despegar-red;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
//Blue
|
|
302
|
+
.despegar-blue-demo{
|
|
303
|
+
background: $despegar-blue;
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
//Gray 1
|
|
307
|
+
.despegar-gray-1-demo{
|
|
308
|
+
color: $despegar-gray-1;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
//Gray 2
|
|
312
|
+
.despegar-gray-2-demo{
|
|
313
|
+
color: $despegar-gray-2;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
//Gray 3
|
|
317
|
+
.despegar-gray-3-demo{
|
|
318
|
+
color: $despegar-gray-3;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
//Gray 4
|
|
322
|
+
.despegar-gray-4-demo{
|
|
323
|
+
color: $despegar-gray-4;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
//Gray 5
|
|
327
|
+
.despegar-gray-5-demo{
|
|
328
|
+
color: $despegar-gray-5;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
//Gray 6
|
|
332
|
+
.despegar-gray-6-demo{
|
|
333
|
+
color: $despegar-gray-6;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
//Gray 7
|
|
337
|
+
.despegar-gray-7-demo{
|
|
338
|
+
color: $despegar-gray-7;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
//Searchbox
|
|
342
|
+
.despegar-searchbox-bg-demo{
|
|
343
|
+
background: $despegar-searchbox-bg;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
//Title
|
|
347
|
+
.despegar-title-color-demo{
|
|
348
|
+
color: $despegar-title-color;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
//Title Alt
|
|
352
|
+
.despegar-titlealt-color-demo{
|
|
353
|
+
color: $despegar-titlealt-color;
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
//Link
|
|
357
|
+
.despegar-link-color-demo{
|
|
358
|
+
color: $despegar-link-color;
|
|
359
|
+
|
|
360
|
+
&:hover{
|
|
361
|
+
color: $despegar-link-color-hover;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
//Error
|
|
367
|
+
.despegar-error-bg-demo{
|
|
368
|
+
background: $despegar-error-bg;
|
|
369
|
+
border: 1px solid $despegar-error-border;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
//Warning
|
|
373
|
+
.despegar-warning-bg-demo{
|
|
374
|
+
background: $despegar-warning-bg;
|
|
375
|
+
border: 1px solid $despegar-warning-border;
|
|
376
|
+
}</code></pre>
|
|
377
|
+
|
|
378
|
+
</div>
|
|
379
|
+
|
|
380
|
+
<footer>
|
|
381
|
+
<a href="./all.html">Everything on a single page</a>
|
|
382
|
+
|
|
383
|
+
</footer>
|
|
384
|
+
|
|
385
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
386
|
+
<script src="./js/docs.js"></script>
|
|
387
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
388
|
+
|
|
389
|
+
</body>
|
|
390
|
+
|
|
391
|
+
</html>
|
data/docs/arrows.html
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html>
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="utf-8">
|
|
6
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
7
|
+
<title>Picasso Docs</title>
|
|
8
|
+
|
|
9
|
+
<link type="text/css" rel="stylesheet" href="./css/markdown.css">
|
|
10
|
+
<link type="text/css" rel="stylesheet" href="./css/github.css">
|
|
11
|
+
<link type="text/css" rel="stylesheet" href="./css/style.css">
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
<aside>
|
|
20
|
+
<nav>
|
|
21
|
+
<ol>
|
|
22
|
+
|
|
23
|
+
<li>
|
|
24
|
+
<a href="./intro.html#picasso-framework-css-sass">Picasso. Framework CSS/Sass.</a>
|
|
25
|
+
|
|
26
|
+
<ol>
|
|
27
|
+
|
|
28
|
+
</ol>
|
|
29
|
+
|
|
30
|
+
</li>
|
|
31
|
+
|
|
32
|
+
<li>
|
|
33
|
+
<a href="./components.html#components">Components</a>
|
|
34
|
+
|
|
35
|
+
<ol>
|
|
36
|
+
|
|
37
|
+
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
38
|
+
|
|
39
|
+
<li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
|
|
40
|
+
|
|
41
|
+
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
42
|
+
|
|
43
|
+
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
44
|
+
|
|
45
|
+
</ol>
|
|
46
|
+
|
|
47
|
+
</li>
|
|
48
|
+
|
|
49
|
+
<li>
|
|
50
|
+
<a href="./utils.html#utils">Utils</a>
|
|
51
|
+
|
|
52
|
+
<ol>
|
|
53
|
+
|
|
54
|
+
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
55
|
+
|
|
56
|
+
</ol>
|
|
57
|
+
|
|
58
|
+
</li>
|
|
59
|
+
|
|
60
|
+
<li>
|
|
61
|
+
<a href="./despegar.html#despegar">Despegar</a>
|
|
62
|
+
|
|
63
|
+
<ol>
|
|
64
|
+
|
|
65
|
+
<li><a href="./despegar.html#variables">Variables</a></li>
|
|
66
|
+
|
|
67
|
+
</ol>
|
|
68
|
+
|
|
69
|
+
</li>
|
|
70
|
+
|
|
71
|
+
</ol>
|
|
72
|
+
</nav>
|
|
73
|
+
</aside>
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
<article>
|
|
77
|
+
<a name="arrows"></a><h2>Arrows</h2>
|
|
78
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
79
|
+
<p><em class="arrow-demo-1">
|
|
80
|
+
Información
|
|
81
|
+
</em>
|
|
82
|
+
|
|
83
|
+
</p>
|
|
84
|
+
<p><em class="arrow-demo-2">
|
|
85
|
+
Importante
|
|
86
|
+
</em>
|
|
87
|
+
|
|
88
|
+
</p>
|
|
89
|
+
<p><em class="arrow-demo-3">
|
|
90
|
+
Leer
|
|
91
|
+
</em>
|
|
92
|
+
|
|
93
|
+
</p>
|
|
94
|
+
<p><em class="arrow-demo-4">
|
|
95
|
+
Aceptado
|
|
96
|
+
</em>
|
|
97
|
+
|
|
98
|
+
</p>
|
|
99
|
+
<a name="html"></a><h3>HTML</h3>
|
|
100
|
+
<pre><code class="lang-html"><em class="arrow">
|
|
101
|
+
Beneficio
|
|
102
|
+
</em></code></pre>
|
|
103
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
104
|
+
<pre><code class="lang-css">@import "picasso/components/arrows";
|
|
105
|
+
|
|
106
|
+
//Arrows
|
|
107
|
+
.arrow{
|
|
108
|
+
@include arrow();
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Con todos los parametros: background y color
|
|
112
|
+
.arrow{
|
|
113
|
+
@include arrow(green, white);
|
|
114
|
+
}</code></pre>
|
|
115
|
+
|
|
116
|
+
</article>
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
<footer>
|
|
120
|
+
<a href="./all.html">Everything on a single page</a>
|
|
121
|
+
|
|
122
|
+
</footer>
|
|
123
|
+
|
|
124
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
|
125
|
+
<script src="./js/docs.js"></script>
|
|
126
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
127
|
+
|
|
128
|
+
</body>
|
|
129
|
+
|
|
130
|
+
</html>
|