picasso 0.2.3 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/README.md +216 -3
- data/docs/_picasso.html +38 -0
- data/docs/config.rb +1 -1
- data/docs/css/{style.css → picasso-docs.css} +797 -1331
- data/docs/img/picasso-buttons-glossy.png +0 -0
- data/docs/img/picasso-nav.png +0 -0
- data/docs/img/picasso-popup.png +0 -0
- data/docs/index.html +201 -198
- data/docs/picasso-_components.html +83 -0
- data/docs/picasso-_despegar.html +34 -0
- data/docs/picasso-_utils.html +40 -0
- data/docs/picasso-components-_accordions.html +183 -0
- data/docs/picasso-components-_arrows.html +124 -0
- data/docs/picasso-components-_bubbles.html +142 -0
- data/docs/picasso-components-_buttons.html +38 -0
- data/docs/picasso-components-_inputs.html +122 -0
- data/docs/picasso-components-_list-grids.html +253 -0
- data/docs/picasso-components-_mini-tooltips.html +152 -0
- data/docs/picasso-components-_navs.html +360 -0
- data/docs/picasso-components-_pagination.html +258 -0
- data/docs/picasso-components-_popups.html +359 -0
- data/docs/picasso-components-buttons-_3d.html +284 -0
- data/docs/picasso-components-buttons-_glossy.html +290 -0
- data/docs/picasso-components-buttons-_mini.html +224 -0
- data/docs/picasso-despegar-_variables.html +145 -0
- data/docs/picasso-utils-_clearfix.html +56 -0
- data/docs/picasso-utils-_grid.html +390 -0
- data/docs/picasso-utils-_ie.html +50 -0
- data/docs/picasso-utils-_sprite.html +62 -0
- data/docs/resources/docs.jade +46 -0
- data/docs/resources/docs.js +52 -0
- data/docs/sass/{style.scss → picasso-docs.scss} +71 -96
- data/lib/picasso/version.rb +1 -1
- data/picasso.gemspec +1 -1
- data/stylesheets/_picasso.scss +14 -0
- data/stylesheets/picasso/_components.scss +54 -0
- data/stylesheets/picasso/_despegar.scss +12 -0
- data/stylesheets/picasso/_utils.scss +17 -1
- data/stylesheets/picasso/components/_accordions.scss +52 -2
- data/stylesheets/picasso/components/_arrows.scss +39 -2
- data/stylesheets/picasso/components/_bubbles.scss +36 -2
- data/stylesheets/picasso/components/_buttons.scss +14 -0
- data/stylesheets/picasso/components/_inputs.scss +41 -2
- data/stylesheets/picasso/components/_list-grids.scss +84 -3
- data/stylesheets/picasso/components/_mini-tooltips.scss +128 -0
- data/stylesheets/picasso/components/_navs.scss +52 -2
- data/stylesheets/picasso/components/_pagination.scss +63 -2
- data/stylesheets/picasso/components/_popups.scss +73 -2
- data/stylesheets/picasso/components/buttons/_3d.scss +75 -2
- data/stylesheets/picasso/components/buttons/_glossy.scss +41 -2
- data/stylesheets/picasso/components/buttons/_mini.scss +44 -2
- data/stylesheets/picasso/despegar/_variables.scss +61 -60
- data/stylesheets/picasso/utils/_clearfix.scss +24 -16
- data/stylesheets/picasso/utils/_grid.scss +269 -0
- data/stylesheets/picasso/utils/_ie.scss +23 -28
- data/stylesheets/picasso/utils/_sprite.scss +15 -3
- metadata +34 -50
- data/docs/accordions.html +0 -276
- data/docs/all.html +0 -1588
- data/docs/arrows.html +0 -233
- data/docs/bubbles.html +0 -231
- data/docs/build/manifest.json +0 -21
- data/docs/build/md/changelog.md +0 -53
- data/docs/build/md/components/accordions.md +0 -97
- data/docs/build/md/components/arrows.md +0 -53
- data/docs/build/md/components/bubbles.md +0 -57
- data/docs/build/md/components/buttons.md +0 -205
- data/docs/build/md/components/components.md +0 -37
- data/docs/build/md/components/inputs.md +0 -73
- data/docs/build/md/components/list-grids.md +0 -180
- data/docs/build/md/components/navs.md +0 -107
- data/docs/build/md/components/pagination.md +0 -112
- data/docs/build/md/components/popups.md +0 -162
- data/docs/build/md/despegar/despegar.md +0 -200
- data/docs/build/md/intro.md +0 -59
- data/docs/build/md/mejoras.md +0 -69
- data/docs/build/md/todo.md +0 -14
- data/docs/build/md/utils/utils.md +0 -62
- data/docs/build/templates/index.html +0 -37
- data/docs/build/templates/layout.html +0 -68
- data/docs/build/templates/page.html +0 -3
- data/docs/buttons.html +0 -357
- data/docs/changelog.html +0 -264
- data/docs/components.html +0 -220
- data/docs/css/github.css +0 -88
- data/docs/css/markdown.css +0 -108
- data/docs/despegar.html +0 -377
- data/docs/inputs.html +0 -248
- data/docs/intro.html +0 -233
- data/docs/js/docs.js +0 -32
- data/docs/js/rainbow-custom.min.js +0 -13
- data/docs/js/viewer.js +0 -12
- data/docs/list-grids.html +0 -350
- data/docs/mejoras.html +0 -250
- data/docs/navs.html +0 -281
- data/docs/pagination.html +0 -286
- data/docs/popups.html +0 -337
- data/docs/todo.html +0 -204
- data/docs/utils.html +0 -233
data/docs/all.html
DELETED
|
@@ -1,1588 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
3
|
-
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
4
|
-
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
5
|
-
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
|
|
6
|
-
|
|
7
|
-
<head>
|
|
8
|
-
<meta charset="utf-8">
|
|
9
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
10
|
-
<title>Picasso. Framework CSS/Sass.</title>
|
|
11
|
-
|
|
12
|
-
<link type="text/css" rel="stylesheet" href="./css/markdown.css">
|
|
13
|
-
<link type="text/css" rel="stylesheet" href="./css/github.css">
|
|
14
|
-
<link type="text/css" rel="stylesheet" href="./css/style.css">
|
|
15
|
-
</head>
|
|
16
|
-
|
|
17
|
-
<body>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
<header>
|
|
21
|
-
<img src="img/picasso.png" />
|
|
22
|
-
<h1 class="title">Framework CSS/Sass.</h1>
|
|
23
|
-
</header>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<hr>
|
|
29
|
-
|
|
30
|
-
<h2>Contenidos</h2>
|
|
31
|
-
|
|
32
|
-
<aside>
|
|
33
|
-
<nav>
|
|
34
|
-
<ol>
|
|
35
|
-
|
|
36
|
-
<li>
|
|
37
|
-
<a href="./intro.html#introduccioacuten">Introducci&oacute;n</a>
|
|
38
|
-
|
|
39
|
-
<ol>
|
|
40
|
-
|
|
41
|
-
<li><a href="./intro.html#repositorio">Repositorio</a></li>
|
|
42
|
-
|
|
43
|
-
<li><a href="./intro.html#instalacioacuten">Instalaci&oacute;n</a></li>
|
|
44
|
-
|
|
45
|
-
<li><a href="./intro.html#actualizacioacuten">Actualizaci&oacute;n</a></li>
|
|
46
|
-
|
|
47
|
-
<li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&oacute;n de oily_png</a></li>
|
|
48
|
-
|
|
49
|
-
</ol>
|
|
50
|
-
|
|
51
|
-
</li>
|
|
52
|
-
|
|
53
|
-
<li>
|
|
54
|
-
<a href="./changelog.html#changelog">Changelog</a>
|
|
55
|
-
|
|
56
|
-
<ol>
|
|
57
|
-
|
|
58
|
-
<li><a href="./changelog.html#023">0.2.3</a></li>
|
|
59
|
-
|
|
60
|
-
<li><a href="./changelog.html#022">0.2.2</a></li>
|
|
61
|
-
|
|
62
|
-
<li><a href="./changelog.html#021">0.2.1</a></li>
|
|
63
|
-
|
|
64
|
-
<li><a href="./changelog.html#020">0.2.0</a></li>
|
|
65
|
-
|
|
66
|
-
<li><a href="./changelog.html#010">0.1.0</a></li>
|
|
67
|
-
|
|
68
|
-
<li><a href="./changelog.html#003">0.0.3</a></li>
|
|
69
|
-
|
|
70
|
-
<li><a href="./changelog.html#002">0.0.2</a></li>
|
|
71
|
-
|
|
72
|
-
<li><a href="./changelog.html#001">0.0.1</a></li>
|
|
73
|
-
|
|
74
|
-
</ol>
|
|
75
|
-
|
|
76
|
-
</li>
|
|
77
|
-
|
|
78
|
-
<li>
|
|
79
|
-
<a href="./todo.html#todo">Todo</a>
|
|
80
|
-
|
|
81
|
-
<ol>
|
|
82
|
-
|
|
83
|
-
<li><a href="./todo.html#componentes">Componentes</a></li>
|
|
84
|
-
|
|
85
|
-
<li><a href="./todo.html#utilidades">Utilidades</a></li>
|
|
86
|
-
|
|
87
|
-
<li><a href="./todo.html#otros">Otros</a></li>
|
|
88
|
-
|
|
89
|
-
</ol>
|
|
90
|
-
|
|
91
|
-
</li>
|
|
92
|
-
|
|
93
|
-
<li>
|
|
94
|
-
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
|
95
|
-
|
|
96
|
-
<ol>
|
|
97
|
-
|
|
98
|
-
<li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&oacute;digo fuente</a></li>
|
|
99
|
-
|
|
100
|
-
<li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&ntilde;adidos/cambios:</a></li>
|
|
101
|
-
|
|
102
|
-
<li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
|
|
103
|
-
|
|
104
|
-
<li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&oacute;n</a></li>
|
|
105
|
-
|
|
106
|
-
</ol>
|
|
107
|
-
|
|
108
|
-
</li>
|
|
109
|
-
|
|
110
|
-
<li>
|
|
111
|
-
<a href="./components.html#components">Components</a>
|
|
112
|
-
|
|
113
|
-
<ol>
|
|
114
|
-
|
|
115
|
-
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
|
116
|
-
|
|
117
|
-
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
118
|
-
|
|
119
|
-
<li><a href="./inputs.html#inputs">Inputs</a></li>
|
|
120
|
-
|
|
121
|
-
<li><a href="./navs.html#navs">Navs</a></li>
|
|
122
|
-
|
|
123
|
-
<li><a href="./list-grids.html#list-grid">List Grid</a></li>
|
|
124
|
-
|
|
125
|
-
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
126
|
-
|
|
127
|
-
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
|
128
|
-
|
|
129
|
-
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
130
|
-
|
|
131
|
-
<li><a href="./popups.html#popups">Popups</a></li>
|
|
132
|
-
|
|
133
|
-
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
|
134
|
-
|
|
135
|
-
</ol>
|
|
136
|
-
|
|
137
|
-
</li>
|
|
138
|
-
|
|
139
|
-
<li>
|
|
140
|
-
<a href="./utils.html#utils">Utils</a>
|
|
141
|
-
|
|
142
|
-
<ol>
|
|
143
|
-
|
|
144
|
-
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
145
|
-
|
|
146
|
-
<li><a href="./utils.html#ie">IE</a></li>
|
|
147
|
-
|
|
148
|
-
<li><a href="./utils.html#sprite">Sprite</a></li>
|
|
149
|
-
|
|
150
|
-
</ol>
|
|
151
|
-
|
|
152
|
-
</li>
|
|
153
|
-
|
|
154
|
-
<li>
|
|
155
|
-
<a href="./despegar.html#despegar">Despegar</a>
|
|
156
|
-
|
|
157
|
-
<ol>
|
|
158
|
-
|
|
159
|
-
<li><a href="./despegar.html#variables">Variables</a></li>
|
|
160
|
-
|
|
161
|
-
</ol>
|
|
162
|
-
|
|
163
|
-
</li>
|
|
164
|
-
|
|
165
|
-
</ol>
|
|
166
|
-
</nav>
|
|
167
|
-
</aside>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
<hr>
|
|
172
|
-
|
|
173
|
-
<div id='content'><a name="introduccioacuten"></a><h1>Introducción</h1>
|
|
174
|
-
<a name="repositorio"></a><h2>Repositorio</h2>
|
|
175
|
-
<p><a href="http://gitorious.despegar.it/picasso/picasso">http://gitorious.despegar.it/picasso/picasso</a>
|
|
176
|
-
|
|
177
|
-
</p>
|
|
178
|
-
<a name="instalacioacuten"></a><h2>Instalación</h2>
|
|
179
|
-
<p>Ejecutar:
|
|
180
|
-
|
|
181
|
-
</p>
|
|
182
|
-
<pre><code class="lang-bash">$ (sudo) gem install picasso</code></pre>
|
|
183
|
-
<blockquote>
|
|
184
|
-
<p>Opcional: <a href="#opcional-instalacioacuten-de-oily-png">Instalación de oily_png</a>.
|
|
185
|
-
|
|
186
|
-
</p>
|
|
187
|
-
</blockquote>
|
|
188
|
-
<p>En el <code>config.rb</code> agregar:
|
|
189
|
-
|
|
190
|
-
</p>
|
|
191
|
-
<pre><code class="lang-bash">require 'picasso'
|
|
192
|
-
require 'magick'
|
|
193
|
-
gem 'picasso', '~> 0.2.3'</code></pre>
|
|
194
|
-
<p>Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
|
|
195
|
-
|
|
196
|
-
</p>
|
|
197
|
-
<p>Finalmente, en el archivo Sass importar el framework completo:
|
|
198
|
-
|
|
199
|
-
</p>
|
|
200
|
-
<pre><code class="lang-bash">@import "picasso";</code></pre>
|
|
201
|
-
<p>o sólo lo necesario:
|
|
202
|
-
|
|
203
|
-
</p>
|
|
204
|
-
<pre><code class="lang-bash">@import "picasso/components/buttons";
|
|
205
|
-
@import "picasso/despegar/variables";</code></pre>
|
|
206
|
-
<a name="actualizacioacuten"></a><h2>Actualización</h2>
|
|
207
|
-
<pre><code class="lang-bash">$ (sudo) gem update picasso</code></pre>
|
|
208
|
-
<a name="opcional-instalacioacuten-de-oily-png"></a><h2>Opcional: Instalación de oily_png</h2>
|
|
209
|
-
<p><a href="https://github.com/wvanbergen/oily_png/">oily_png</a> es una gema que permite acelerar la creación de imágenes dinámicas. Se recomienda su instalación en caso de utilizar Picasso para la creación de sprites.
|
|
210
|
-
|
|
211
|
-
</p>
|
|
212
|
-
<a name="windows"></a><h3>Windows</h3>
|
|
213
|
-
<p>Bajar el paquete <a href="http://rubyinstaller.org/downloads/">Development Kit</a>. Extraer dicho paquete en una ruta conocida (por ejemplo <code>C:\DevKit</code>). Abrir una consola, ir a la ruta en donde se pusieron los archivos del <em>Development Kit</em> y ejecutar <code>ruby dk.rb init</code> y luego <code>ruby dk.rb install</code>.
|
|
214
|
-
|
|
215
|
-
</p>
|
|
216
|
-
<a name="linux"></a><h3>Linux</h3>
|
|
217
|
-
<pre><code class="lang-bash">$ (sudo) apt-get update
|
|
218
|
-
$ (sudo) apt-get install ruby-oily-png</code></pre>
|
|
219
|
-
|
|
220
|
-
<a name="changelog"></a><h1>Changelog</h1>
|
|
221
|
-
<a name="023"></a><h2>0.2.3</h2>
|
|
222
|
-
<ul>
|
|
223
|
-
<li>Fix estado estado <code>disabled</code> para IE;</li>
|
|
224
|
-
</ul>
|
|
225
|
-
<a name="022"></a><h2>0.2.2</h2>
|
|
226
|
-
<ul>
|
|
227
|
-
<li>Se agrega estado <code>disabled</code> para los botones 3D;</li>
|
|
228
|
-
</ul>
|
|
229
|
-
<a name="021"></a><h2>0.2.1</h2>
|
|
230
|
-
<ul>
|
|
231
|
-
<li>Fix sombras, gradientes y bordes de botones y nav de IE9;</li>
|
|
232
|
-
</ul>
|
|
233
|
-
<a name="020"></a><h2>0.2.0</h2>
|
|
234
|
-
<ul>
|
|
235
|
-
<li>Fix degradados de botones en Chrome;</li>
|
|
236
|
-
<li>Separación de botones por tipo;</li>
|
|
237
|
-
<li>Nuevos botones 3D;</li>
|
|
238
|
-
<li>Se quita a oily_png como dependencia;</li>
|
|
239
|
-
</ul>
|
|
240
|
-
<a name="010"></a><h2>0.1.0</h2>
|
|
241
|
-
<ul>
|
|
242
|
-
<li>Agregados nuevos componentes:</li>
|
|
243
|
-
<li><ul>
|
|
244
|
-
<li>Popups</li>
|
|
245
|
-
</ul>
|
|
246
|
-
</li>
|
|
247
|
-
<li><ul>
|
|
248
|
-
<li>Pagination</li>
|
|
249
|
-
</ul>
|
|
250
|
-
</li>
|
|
251
|
-
<li><ul>
|
|
252
|
-
<li>Navs</li>
|
|
253
|
-
</ul>
|
|
254
|
-
</li>
|
|
255
|
-
<li><ul>
|
|
256
|
-
<li>List Grids</li>
|
|
257
|
-
</ul>
|
|
258
|
-
</li>
|
|
259
|
-
<li><ul>
|
|
260
|
-
<li>Inputs</li>
|
|
261
|
-
</ul>
|
|
262
|
-
</li>
|
|
263
|
-
<li><ul>
|
|
264
|
-
<li>Accordions</li>
|
|
265
|
-
</ul>
|
|
266
|
-
</li>
|
|
267
|
-
<li>Agregadas nuevas utilidades:</li>
|
|
268
|
-
<li><ul>
|
|
269
|
-
<li>Sprite: <code>insert-in-sprite()</code></li>
|
|
270
|
-
</ul>
|
|
271
|
-
</li>
|
|
272
|
-
<li><ul>
|
|
273
|
-
<li>IE: <code>after()</code> / <code>before()</code></li>
|
|
274
|
-
</ul>
|
|
275
|
-
</li>
|
|
276
|
-
<li>Nuevo fallback para IE: Generación dinámica de sprites para componentes a través de <a href="https://github.com/StanAngeloff/compass-magick">compass-magick</a>.</li>
|
|
277
|
-
<li>Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.</li>
|
|
278
|
-
<li>Reorganización interna de la documentación.</li>
|
|
279
|
-
</ul>
|
|
280
|
-
<a name="003"></a><h2>0.0.3</h2>
|
|
281
|
-
<ul>
|
|
282
|
-
<li>Agregados estilos de fallback para Internet Explorer.</li>
|
|
283
|
-
<li>Soporte para CSS3 Pie (de manera predeterminado apagado).</li>
|
|
284
|
-
<li>Agregada la documentación sobre la generación de docs.</li>
|
|
285
|
-
</ul>
|
|
286
|
-
<a name="002"></a><h2>0.0.2</h2>
|
|
287
|
-
<ul>
|
|
288
|
-
<li>Modularización del componente.</li>
|
|
289
|
-
<li>Agregados: buttons, mini-buttons, bubbles y arrows.</li>
|
|
290
|
-
<li>Creación de la documentación.</li>
|
|
291
|
-
</ul>
|
|
292
|
-
<a name="001"></a><h2>0.0.1</h2>
|
|
293
|
-
<ul>
|
|
294
|
-
<li>Versión inicial.</li>
|
|
295
|
-
<li>Agregadas las variables de la marca Despegar y clearfix.</li>
|
|
296
|
-
</ul>
|
|
297
|
-
|
|
298
|
-
<a name="todo"></a><h1>Todo</h1>
|
|
299
|
-
<a name="componentes"></a><h2>Componentes</h2>
|
|
300
|
-
<ul>
|
|
301
|
-
<li>Tabs;</li>
|
|
302
|
-
<li>Tooltips;</li>
|
|
303
|
-
<li>Breadcrumbs;</li>
|
|
304
|
-
</ul>
|
|
305
|
-
<a name="utilidades"></a><h2>Utilidades</h2>
|
|
306
|
-
<ul>
|
|
307
|
-
<li>Grillas responsivas;</li>
|
|
308
|
-
<li>Tipografias con pictogramas comunes;</li>
|
|
309
|
-
</ul>
|
|
310
|
-
<a name="otros"></a><h2>Otros</h2>
|
|
311
|
-
<ul>
|
|
312
|
-
<li>Creación de sprites: Implementar API para poder detectar si un archivo ya existe.</li>
|
|
313
|
-
<li>Mejoras en la documentación especificando variables por defecto de cada componente y mejor descripción de sus parámetros.</li>
|
|
314
|
-
</ul>
|
|
315
|
-
|
|
316
|
-
<a name="mejoras-antildeadidos"></a><h1>Mejoras / Añadidos</h1>
|
|
317
|
-
<a name="utilizar-el-coacutedigo-fuente"></a><h2>Utilizar el código fuente</h2>
|
|
318
|
-
<ul>
|
|
319
|
-
<li>Clonar el repositorio de Picasso:</li>
|
|
320
|
-
</ul>
|
|
321
|
-
<pre><code class="lang-bash">$ git clone git@gitorious.despegar.it:picasso/picasso.git</code></pre>
|
|
322
|
-
<ul>
|
|
323
|
-
<li>Pasarse al branch <code>development</code>:</li>
|
|
324
|
-
</ul>
|
|
325
|
-
<pre><code class="lang-bash">$ cd picasso
|
|
326
|
-
$ git checkout --track origin/development</code></pre>
|
|
327
|
-
<ul>
|
|
328
|
-
<li>Verificar que se esta parado en dicho branch:</li>
|
|
329
|
-
</ul>
|
|
330
|
-
<pre><code class="lang-bash">$ git branch</code></pre>
|
|
331
|
-
<a name="pruebas-locales-de-nuevos-antildeadidos-cambios"></a><h2>Pruebas locales de nuevos añadidos/cambios:</h2>
|
|
332
|
-
<ul>
|
|
333
|
-
<li>En la carpeta del proyecto donde se encuentra el archivo <code>config.rb</code>, crear una carpeta <code>extensions</code>.</li>
|
|
334
|
-
<li>En dicha lugar copiar la carpeta <code>picasso</code> tal cual se la clonó del repositorio, de manera tal que quede <code>extensiones\picasso\<archivos de picasso></code>.</li>
|
|
335
|
-
<li>En caso que el proyecto este configurado para usar Picasso, comentar dichas lineas en el <code>config.rb</code>.</li>
|
|
336
|
-
<li>Compass de manera predeterminada detecta las extensiones que sean guardadas en la carpeta <code>extensions</code>, por lo tanto, las directivas <code>@import "picasso";</code> deberían funcionar sin problemas.</li>
|
|
337
|
-
</ul>
|
|
338
|
-
<p>El núcleo de Picasso se encuentra en la carpeta <code>stylesheets</code>. Allí mismo existen tres carpetas <code>components</code>, <code>utils</code> y <code>despegar</code> en donde se alojan, de manera modularizada, los mixins y variables de cada sección.
|
|
339
|
-
En caso de agregar alguna funcionalidad nueva, tomar de ejemplo algún componente ya existente para entender su lógica interna.
|
|
340
|
-
|
|
341
|
-
</p>
|
|
342
|
-
<a name="subidas-en-el-repositorio"></a><h2>Subidas en el repositorio</h2>
|
|
343
|
-
<ul>
|
|
344
|
-
<li>Una vez realizados los cambios o añadidos, subirlos al repositorio:</li>
|
|
345
|
-
</ul>
|
|
346
|
-
<pre><code class="lang-bash">$ git status
|
|
347
|
-
$ git add <archivos a subir>;
|
|
348
|
-
$ git commit -m "<un mensaje descriptivo del commit>"
|
|
349
|
-
$ git push</code></pre>
|
|
350
|
-
<blockquote>
|
|
351
|
-
<p><strong>Nota</strong>: Toda mejora o cambio debe tener su documentación pertinente, caso contrario, no se incorporarán en Picasso.
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
</p>
|
|
355
|
-
</blockquote>
|
|
356
|
-
<a name="generar-la-documentacioacuten"></a><h2>Generar la documentación</h2>
|
|
357
|
-
<ul>
|
|
358
|
-
<li><p>Para generar una nueva versión de la documentación es necesario tener instalado node.js: <a href="http://nodejs.org/#download">http://nodejs.org/#download</a></p>
|
|
359
|
-
</li>
|
|
360
|
-
<li><p>Abrir una terminal e instalar <a href="http://beautifuldocs.com/">Beautiful docs</a>:</p>
|
|
361
|
-
</li>
|
|
362
|
-
</ul>
|
|
363
|
-
<pre><code class="lang-bash">$ npm install https://github.com/dzignus/beautiful-docs/tarball/master -g</code></pre>
|
|
364
|
-
<ul>
|
|
365
|
-
<li>Crear (o actualizar) los archivos <code>.md</code> (<code>docs/build/md</code>) con la documentación pertinente. En caso de agregar un nuevo archivo <code>.md</code>, actualizar el <code>manifest.json</code>. </li>
|
|
366
|
-
</ul>
|
|
367
|
-
<blockquote>
|
|
368
|
-
<p><strong>Nota</strong>: Cada <code>.md</code> es un archivo de texto plano escrito con la sintaxis <a href="http://daringfireball.net/projects/markdown/basics">markdown</a>.
|
|
369
|
-
|
|
370
|
-
</p>
|
|
371
|
-
</blockquote>
|
|
372
|
-
<ul>
|
|
373
|
-
<li>Pararse sobre la carpeta raiz del proyecto y ejecutar:</li>
|
|
374
|
-
</ul>
|
|
375
|
-
<pre><code class="lang-bash">$ bfdocs --base-url='.' --templates-dir='docs/build/templates/' docs/build/manifest.json docs</code></pre>
|
|
376
|
-
<ul>
|
|
377
|
-
<li>Revisar que la documentación se haya generado correctamente abriendo el archivo <code>.html</code> pertinente.</li>
|
|
378
|
-
</ul>
|
|
379
|
-
|
|
380
|
-
<hr>
|
|
381
|
-
<a name="components"></a><h1>Components</h1>
|
|
382
|
-
<p>Representan a elementos comunes/patrones utilizados a lo largo del sitio. Estan pensandos para ser flexibles y configurables para ser implementados en distintas situaciones.
|
|
383
|
-
|
|
384
|
-
</p>
|
|
385
|
-
<p>La gran mayoría de los componentes hacen uso intensivo de estilos CSS3 y ofrecen estrategías alternativas (<a href="https://encrypted.google.com/search?hl=en&q=fallback%20definition">fallback</a>) para navegadores que no soportan dichos estilos (Internet Explorer <= 9).
|
|
386
|
-
|
|
387
|
-
</p>
|
|
388
|
-
<p>Para tener compatibilidad con Internet Explorer, el único requisito es que la página que carga los estilos generados por Picasso posean la <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">técnica de clases condicionales en la etiqueta html</a>:
|
|
389
|
-
|
|
390
|
-
</p>
|
|
391
|
-
<pre><code class="lang-html"><!DOCTYPE html>
|
|
392
|
-
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
393
|
-
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
394
|
-
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
395
|
-
<!--[if gt IE 9]><!--> <html> <!--<![endif]--></code></pre>
|
|
396
|
-
<a name="estrategias-y-estilos-de-fallback-para-ie-en-componentes"></a><h3>Estrategias y estilos de fallback para IE en componentes</h3>
|
|
397
|
-
<p>Para ciertos componentes, Picasso ofrece dos estrategias para aplicar estilos de fallback. Dichas estrategías se setean en variables individuales de cada componente, por ejemplo:
|
|
398
|
-
|
|
399
|
-
</p>
|
|
400
|
-
<pre><code class="lang-css">$<componente>-ie-fallback: "sprites"|"GD"</code></pre>
|
|
401
|
-
<p>Los valores admitidos son <code>sprites</code> y <code>GD</code> (Graceful Degradation).
|
|
402
|
-
|
|
403
|
-
</p>
|
|
404
|
-
<a name="estrategiacutea-de-sprites"></a><h4>Estrategía de sprites</h4>
|
|
405
|
-
<p>Por cada componente, Picasso generará dinamicamente un sprite para recrear los estilos de cada elemento y seteará los estilos para que Internet Explorer utilice el sprite generado.
|
|
406
|
-
|
|
407
|
-
</p>
|
|
408
|
-
<a name="estrategiacutea-gd"></a><h4>Estrategía GD</h4>
|
|
409
|
-
<p>Por cada componente, Picasso seteará estilos minimos, soportados por Internet Explorer, para que el componente siga siendo usable y funcional.
|
|
410
|
-
|
|
411
|
-
</p>
|
|
412
|
-
<a name="componentes-disponibles"></a><h2>Componentes disponibles</h2>
|
|
413
|
-
|
|
414
|
-
<a name="buttons"></a><h2>Buttons</h2>
|
|
415
|
-
<p>Disponibles en 3 versiones: 3D, Glossy y Mini.
|
|
416
|
-
|
|
417
|
-
</p>
|
|
418
|
-
<a name="sass"></a><a name="sass"></a><a name="sass"></a><h4>Sass</h4>
|
|
419
|
-
<p>Importación:
|
|
420
|
-
|
|
421
|
-
</p>
|
|
422
|
-
<pre><code class="lang-css">@import "picasso/components/buttons";</code></pre>
|
|
423
|
-
<a name="3d-buttons"></a><h3>3D Buttons</h3>
|
|
424
|
-
<a name="ejemplos"></a><a name="ejemplos"></a><a name="ejemplos"></a><h4>Ejemplos</h4>
|
|
425
|
-
<a name="normales"></a><h5>Normales</h5>
|
|
426
|
-
<p><a class="button-3d-demo-1">
|
|
427
|
-
<span>Comprar</span>
|
|
428
|
-
</a>
|
|
429
|
-
<a class="button-3d-demo-2">
|
|
430
|
-
<span>Buscar</span>
|
|
431
|
-
</a>
|
|
432
|
-
<a class="button-3d-demo-3">
|
|
433
|
-
<span>Reservar</span>
|
|
434
|
-
</a>
|
|
435
|
-
|
|
436
|
-
</p>
|
|
437
|
-
<a name="desactivados"></a><h5>Desactivados</h5>
|
|
438
|
-
<p><a class="button-3d-demo-1 disabled">
|
|
439
|
-
<span>Comprar</span>
|
|
440
|
-
</a>
|
|
441
|
-
<a class="button-3d-demo-2 disabled">
|
|
442
|
-
<span>Buscar</span>
|
|
443
|
-
</a>
|
|
444
|
-
<a class="button-3d-demo-3 disabled">
|
|
445
|
-
<span>Reservar</span>
|
|
446
|
-
</a>
|
|
447
|
-
|
|
448
|
-
</p>
|
|
449
|
-
<a name="variante-ancho-100"></a><h5>Variante: ancho 100%</h5>
|
|
450
|
-
<p><a class="button-3d-demo-4">
|
|
451
|
-
<span>Botón full-width</span>
|
|
452
|
-
</a>
|
|
453
|
-
|
|
454
|
-
</p>
|
|
455
|
-
<a name="variante-bordes-redondeados-100"></a><h5>Variante: bordes redondeados 100%</h5>
|
|
456
|
-
<p><a class="button-3d-demo-5">
|
|
457
|
-
<span>Botón redondeado</span>
|
|
458
|
-
</a>
|
|
459
|
-
<a class="button-3d-demo-5 disabled">
|
|
460
|
-
<span>Botón redondeado disabled</span>
|
|
461
|
-
</a>
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
</p>
|
|
465
|
-
<a name="html"></a><a name="html"></a><a name="html"></a><h4>HTML</h4>
|
|
466
|
-
<pre><code class="lang-html"><a class="button" href="#">
|
|
467
|
-
<span>Comprar</span>
|
|
468
|
-
</a>
|
|
469
|
-
|
|
470
|
-
<a class="button disabled" href="#">
|
|
471
|
-
<span>Agotado</span>
|
|
472
|
-
</a></code></pre>
|
|
473
|
-
<h4>Sass</h4>
|
|
474
|
-
<p>Mixin con los parámetros por defecto:
|
|
475
|
-
|
|
476
|
-
</p>
|
|
477
|
-
<pre><code class="lang-css">.button{
|
|
478
|
-
@include button-3d();
|
|
479
|
-
}</code></pre>
|
|
480
|
-
<p>Mixin con parámetros personalizados. Disponibles: background, color, font-size, full-width y rounded:
|
|
481
|
-
|
|
482
|
-
</p>
|
|
483
|
-
<pre><code class="lang-css">.button{
|
|
484
|
-
@include button-3d(red, white, 24px, true, true);
|
|
485
|
-
}</code></pre>
|
|
486
|
-
<a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h4>Fallback para IE</h4>
|
|
487
|
-
<p>La estrategia de los botones es siempre graceful degradation.
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
</p>
|
|
492
|
-
<a name="glossy-buttons"></a><h3>Glossy Buttons</h3>
|
|
493
|
-
<h4>Ejemplos</h4>
|
|
494
|
-
<p><a class="button-glossy-demo-1">
|
|
495
|
-
<span>Comprar</span>
|
|
496
|
-
</a>
|
|
497
|
-
<a class="button-glossy-demo-2">
|
|
498
|
-
<span>Buscar</span>
|
|
499
|
-
</a>
|
|
500
|
-
<a class="button-glossy-demo-3">
|
|
501
|
-
<span>Reservar</span>
|
|
502
|
-
</a>
|
|
503
|
-
<a class="button-glossy-demo-4">
|
|
504
|
-
<span>Un texto demasiado largo para este botón</span>
|
|
505
|
-
</a>
|
|
506
|
-
|
|
507
|
-
</p>
|
|
508
|
-
<h4>HTML</h4>
|
|
509
|
-
<pre><code class="lang-html"><a class="button" href="#">
|
|
510
|
-
<span>Comprar</span>
|
|
511
|
-
</a></code></pre>
|
|
512
|
-
<p>Mixin con los parámetros por defecto:
|
|
513
|
-
|
|
514
|
-
</p>
|
|
515
|
-
<pre><code class="lang-css">.button{
|
|
516
|
-
@include button-glossy();
|
|
517
|
-
}</code></pre>
|
|
518
|
-
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, background y color:
|
|
519
|
-
|
|
520
|
-
</p>
|
|
521
|
-
<pre><code class="lang-css">.button{
|
|
522
|
-
@include button-glossy(100px, 30px, red, white);
|
|
523
|
-
}</code></pre>
|
|
524
|
-
<h4>Fallback para IE</h4>
|
|
525
|
-
<p>Variable y valor por defecto:
|
|
526
|
-
|
|
527
|
-
</p>
|
|
528
|
-
<pre><code class="lang-css">$button-glossy-ie-fallback: "sprites";</code></pre>
|
|
529
|
-
<p>Estrategias soportadas:
|
|
530
|
-
|
|
531
|
-
</p>
|
|
532
|
-
<ul>
|
|
533
|
-
<li><code>sprites</code></li>
|
|
534
|
-
<li><code>GD</code></li>
|
|
535
|
-
</ul>
|
|
536
|
-
<a name="mini-buttons"></a><h3>Mini Buttons</h3>
|
|
537
|
-
<p>Perfectos para acciones simples en la interfaz.
|
|
538
|
-
|
|
539
|
-
</p>
|
|
540
|
-
<h4>Ejemplos</h4>
|
|
541
|
-
<p><a class="button-mini-demo-1">
|
|
542
|
-
<span>Limpiar</span>
|
|
543
|
-
</a>
|
|
544
|
-
<a class="button-mini-demo-2">
|
|
545
|
-
<span>Abrir</span>
|
|
546
|
-
</a>
|
|
547
|
-
<a class="button-mini-demo-3">
|
|
548
|
-
<span>Descargar</span>
|
|
549
|
-
</a>
|
|
550
|
-
<a class="button-mini-demo-4">
|
|
551
|
-
<span>Ir</span>
|
|
552
|
-
</a>
|
|
553
|
-
|
|
554
|
-
</p>
|
|
555
|
-
<h4>HTML</h4>
|
|
556
|
-
<pre><code class="lang-html"><a class="button" href="#">
|
|
557
|
-
<span>Limpiar</span>
|
|
558
|
-
</a></code></pre>
|
|
559
|
-
<h4>Sass</h4>
|
|
560
|
-
<p>Mixin con los parámetros por defecto:
|
|
561
|
-
|
|
562
|
-
</p>
|
|
563
|
-
<pre><code class="lang-css">.button{
|
|
564
|
-
@include button-mini();
|
|
565
|
-
}</code></pre>
|
|
566
|
-
<p>Mixin con parámetros personalizados. Disponibles: background y color:
|
|
567
|
-
|
|
568
|
-
</p>
|
|
569
|
-
<pre><code class="lang-css">.button{
|
|
570
|
-
@include button-mini(grey, blue);
|
|
571
|
-
}</code></pre>
|
|
572
|
-
<h4>Fallback para IE</h4>
|
|
573
|
-
<p>Variable y valor por defecto:
|
|
574
|
-
|
|
575
|
-
</p>
|
|
576
|
-
<pre><code class="lang-css">$button-mini-ie-fallback: "sprites";</code></pre>
|
|
577
|
-
<p>Estrategias soportadas:
|
|
578
|
-
|
|
579
|
-
</p>
|
|
580
|
-
<ul>
|
|
581
|
-
<li><code>sprites</code></li>
|
|
582
|
-
<li><code>GD</code></li>
|
|
583
|
-
</ul>
|
|
584
|
-
|
|
585
|
-
<a name="inputs"></a><h2>Inputs</h2>
|
|
586
|
-
<p>Estilos inputs de textos y selects.
|
|
587
|
-
|
|
588
|
-
</p>
|
|
589
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
590
|
-
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
591
|
-
<input type="text" class="text-input-demo-1">
|
|
592
|
-
|
|
593
|
-
<p>
|
|
594
|
-
<select class="select-demo-1">
|
|
595
|
-
<option value="1">1</option>
|
|
596
|
-
<option value="2">2</option>
|
|
597
|
-
<option value="3">3</option>
|
|
598
|
-
</select>
|
|
599
|
-
</p>
|
|
600
|
-
|
|
601
|
-
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
602
|
-
<input type="text" class="text-input-demo-2">
|
|
603
|
-
|
|
604
|
-
<p>
|
|
605
|
-
<select class="select-demo-2">
|
|
606
|
-
<option value="1">1</option>
|
|
607
|
-
<option value="2">2</option>
|
|
608
|
-
<option value="3">3</option>
|
|
609
|
-
</select>
|
|
610
|
-
</p>
|
|
611
|
-
|
|
612
|
-
<a name="html"></a><h3>HTML</h3>
|
|
613
|
-
<p><strong>Text inputs</strong>
|
|
614
|
-
|
|
615
|
-
</p>
|
|
616
|
-
<pre><code class="lang-html"><input type="text" class="text-input"></code></pre>
|
|
617
|
-
<p><strong>Selects</strong>
|
|
618
|
-
|
|
619
|
-
</p>
|
|
620
|
-
<pre><code class="lang-html"><select class="select">
|
|
621
|
-
<option value="1">1</option>
|
|
622
|
-
<option value="2">2</option>
|
|
623
|
-
<option value="3">3</option>
|
|
624
|
-
</select></code></pre>
|
|
625
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
626
|
-
<p>Importación:
|
|
627
|
-
|
|
628
|
-
</p>
|
|
629
|
-
<pre><code class="lang-css">@import "picasso/components/inputs";</code></pre>
|
|
630
|
-
<p>Mixin con los parámetros por defecto:
|
|
631
|
-
|
|
632
|
-
</p>
|
|
633
|
-
<pre><code class="lang-css">.text-input {
|
|
634
|
-
@include input();
|
|
635
|
-
}</code></pre>
|
|
636
|
-
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, color del borde, color del borde al hacer foco, radio del borde, color del texto, tamaño de la fuente:
|
|
637
|
-
|
|
638
|
-
</p>
|
|
639
|
-
<pre><code class="lang-css">.text-input {
|
|
640
|
-
@include input(100px, 20px, #DDD, blue, 5px, black, 14px);
|
|
641
|
-
}</code></pre>
|
|
642
|
-
<blockquote>
|
|
643
|
-
<p><strong>Nota</strong>: El color del borde debe ser en hexadecimal.
|
|
644
|
-
</p>
|
|
645
|
-
</blockquote>
|
|
646
|
-
|
|
647
|
-
<a name="navs"></a><h2>Navs</h2>
|
|
648
|
-
<p>Barras de navegación.
|
|
649
|
-
|
|
650
|
-
</p>
|
|
651
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
652
|
-
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
653
|
-
<div class="nav-demo-1">
|
|
654
|
-
<ul>
|
|
655
|
-
<li>
|
|
656
|
-
<a href="#">Hoteles</a>
|
|
657
|
-
</li>
|
|
658
|
-
<li>
|
|
659
|
-
<a href="#">Vuelos</a>
|
|
660
|
-
</li>
|
|
661
|
-
<li>
|
|
662
|
-
<a href="#">Paquetes</a>
|
|
663
|
-
</li>
|
|
664
|
-
<li>
|
|
665
|
-
<a href="#">Cruceros</a>
|
|
666
|
-
</li>
|
|
667
|
-
<li class="last active">
|
|
668
|
-
<a href="#">Autos</a>
|
|
669
|
-
</li>
|
|
670
|
-
</ul>
|
|
671
|
-
</div>
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
675
|
-
<div class="nav-demo-2">
|
|
676
|
-
<ul>
|
|
677
|
-
<li>
|
|
678
|
-
<a href="#">Hoteles</a>
|
|
679
|
-
</li>
|
|
680
|
-
<li class="active">
|
|
681
|
-
<a href="#">Vuelos</a>
|
|
682
|
-
</li>
|
|
683
|
-
<li>
|
|
684
|
-
<a href="#">Paquetes</a>
|
|
685
|
-
</li>
|
|
686
|
-
<li>
|
|
687
|
-
<a href="#">Cruceros</a>
|
|
688
|
-
</li>
|
|
689
|
-
<li class="last">
|
|
690
|
-
<a href="#">Autos</a>
|
|
691
|
-
</li>
|
|
692
|
-
</ul>
|
|
693
|
-
</div>
|
|
694
|
-
|
|
695
|
-
<a name="html"></a><h3>HTML</h3>
|
|
696
|
-
<pre><code class="lang-html"><div class="nav">
|
|
697
|
-
<ul>
|
|
698
|
-
<li>
|
|
699
|
-
<a href="#">Item</a>
|
|
700
|
-
</li>
|
|
701
|
-
<li class="active">
|
|
702
|
-
<a href="#">Item</a>
|
|
703
|
-
</li>
|
|
704
|
-
<li class="last">
|
|
705
|
-
<a href="#">Item</a>
|
|
706
|
-
</li>
|
|
707
|
-
</ul>
|
|
708
|
-
</div></code></pre>
|
|
709
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
710
|
-
<p>Importación:
|
|
711
|
-
|
|
712
|
-
</p>
|
|
713
|
-
<pre><code class="lang-css">@import "picasso/components/navs";</code></pre>
|
|
714
|
-
<p>Mixin con los parámetros por defecto:
|
|
715
|
-
|
|
716
|
-
</p>
|
|
717
|
-
<pre><code class="lang-css">.nav{
|
|
718
|
-
@include nav();
|
|
719
|
-
}</code></pre>
|
|
720
|
-
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, background, borde, sombra y float:
|
|
721
|
-
|
|
722
|
-
</p>
|
|
723
|
-
<pre><code class="lang-css">.nav{
|
|
724
|
-
@include nav(435px, 30px, #1164BF, #083C78, black, right);
|
|
725
|
-
}</code></pre>
|
|
726
|
-
<a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
|
|
727
|
-
<p>Variable y valor por defecto:
|
|
728
|
-
|
|
729
|
-
</p>
|
|
730
|
-
<pre><code class="lang-css">$nav-ie-fallback: "sprites";</code></pre>
|
|
731
|
-
<p>Estrategias soportadas:
|
|
732
|
-
|
|
733
|
-
</p>
|
|
734
|
-
<ul>
|
|
735
|
-
<li><code>sprites</code></li>
|
|
736
|
-
<li><code>GD</code></li>
|
|
737
|
-
</ul>
|
|
738
|
-
<blockquote>
|
|
739
|
-
<p><strong>Nota</strong>: Para compatibilidad con versiones anteriores a Internet Explorer 9, se debe agregar la clase <code>last</code> al HTML del último item de la navegación.</p>
|
|
740
|
-
</blockquote>
|
|
741
|
-
|
|
742
|
-
<a name="list-grid"></a><h2>List Grid</h2>
|
|
743
|
-
<p>Para mostrar datos en una grilla utilizando listas.
|
|
744
|
-
|
|
745
|
-
</p>
|
|
746
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
747
|
-
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
748
|
-
<p>
|
|
749
|
-
<div class="list-grid-demo-1">
|
|
750
|
-
<ul class="first first-column">
|
|
751
|
-
<li class="first odd"></li>
|
|
752
|
-
<li>30 min</li>
|
|
753
|
-
<li class="odd">60 min</li>
|
|
754
|
-
<li>90 min</li>
|
|
755
|
-
</ul>
|
|
756
|
-
<ul>
|
|
757
|
-
<li class="first odd">Vuelo DL - 110</li>
|
|
758
|
-
<li class="hover-cell">0%</li>
|
|
759
|
-
<li class="odd hover-cell">10%</li>
|
|
760
|
-
<li class="hover-cell">0%</li>
|
|
761
|
-
</ul>
|
|
762
|
-
<ul>
|
|
763
|
-
<li class="first odd">Vuelo DD - 112</li>
|
|
764
|
-
<li class="hover-cell">10%</li>
|
|
765
|
-
<li class="odd hover-cell">10%</li>
|
|
766
|
-
<li class="hover-cell">0%</li>
|
|
767
|
-
</ul>
|
|
768
|
-
<ul>
|
|
769
|
-
<li class="first odd">Vuelo DL - 50</li>
|
|
770
|
-
<li class="hover-cell">30%</li>
|
|
771
|
-
<li class="odd hover-cell">20%</li>
|
|
772
|
-
<li class="hover-cell">5%</li>
|
|
773
|
-
</ul>
|
|
774
|
-
</div>
|
|
775
|
-
</p>
|
|
776
|
-
|
|
777
|
-
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
778
|
-
<p>
|
|
779
|
-
<div class="list-grid-demo-2">
|
|
780
|
-
<ul>
|
|
781
|
-
<li class="hover-cell">Vuelo 1 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
782
|
-
<li class="hover-cell">Vuelo 2 - Sale <b>18:00</b> LLega <b>22:00</b> 2 Escala</li>
|
|
783
|
-
<li class="hover-cell">Vuelo 3 - Sale <b>18:00</b> LLega <b>20:00</b> Directo</li>
|
|
784
|
-
<li class="hover-cell">Vuelo 4 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
785
|
-
<li class="hover-cell">Vuelo 5 - Sale <b>18:00</b> LLega <b>20:30</b> Directo</li>
|
|
786
|
-
</ul>
|
|
787
|
-
</div>
|
|
788
|
-
</p>
|
|
789
|
-
|
|
790
|
-
<a name="ejemplo-3"></a><h4>Ejemplo 3</h4>
|
|
791
|
-
<p>
|
|
792
|
-
<div class="list-grid-demo-3">
|
|
793
|
-
<ul class="first">
|
|
794
|
-
<li class="first"></li>
|
|
795
|
-
<li class="even">30 min</li>
|
|
796
|
-
<li>60 min</li>
|
|
797
|
-
<li class="even">90 min</li>
|
|
798
|
-
</ul>
|
|
799
|
-
<ul>
|
|
800
|
-
<li class="first">Vuelo DL - 110</li>
|
|
801
|
-
<li class="even">0%</li>
|
|
802
|
-
<li>10%</li>
|
|
803
|
-
<li class="even">0%</li>
|
|
804
|
-
</ul>
|
|
805
|
-
</div>
|
|
806
|
-
</p>
|
|
807
|
-
|
|
808
|
-
<a name="ejemplo-4"></a><h4>Ejemplo 4</h4>
|
|
809
|
-
<p>
|
|
810
|
-
<div class="list-grid-demo-4">
|
|
811
|
-
<ul class="first">
|
|
812
|
-
<li class="first"></li>
|
|
813
|
-
<li class="even">30 min</li>
|
|
814
|
-
<li>60 min</li>
|
|
815
|
-
<li class="even">90 min</li>
|
|
816
|
-
</ul>
|
|
817
|
-
<ul>
|
|
818
|
-
<li class="first">Vuelo DL - 110</li>
|
|
819
|
-
<li class="hover-cell even">0%</li>
|
|
820
|
-
<li class="hover-cell">10%</li>
|
|
821
|
-
<li class="hover-cell even">0%</li>
|
|
822
|
-
</ul>
|
|
823
|
-
<ul>
|
|
824
|
-
<li class="first">Vuelo DL - 25</li>
|
|
825
|
-
<li class="hover-cell even">10%</li>
|
|
826
|
-
<li></li>
|
|
827
|
-
<li class="hover-cell even">6%</li>
|
|
828
|
-
</ul>
|
|
829
|
-
</div>
|
|
830
|
-
</p>
|
|
831
|
-
|
|
832
|
-
<a name="html"></a><h3>HTML</h3>
|
|
833
|
-
<pre><code class="lang-html"><div class="list-grid">
|
|
834
|
-
<ul>
|
|
835
|
-
<li></li>
|
|
836
|
-
<li>Lorem</li>
|
|
837
|
-
<li>Ipsum</li>
|
|
838
|
-
<li>Dolorem</li>
|
|
839
|
-
</ul>
|
|
840
|
-
<ul>
|
|
841
|
-
<li>Donec</li>
|
|
842
|
-
<li class="hover-cell">Nullam</li>
|
|
843
|
-
<li class="hover-cell">Morbi</li>
|
|
844
|
-
<li class="hover-cell">Praesent</li>
|
|
845
|
-
</ul>
|
|
846
|
-
</div></code></pre>
|
|
847
|
-
<blockquote>
|
|
848
|
-
<p><strong>Nota</strong>: La clase "hover-cell" es utilizada para indicar cuando una celda reacciona ante el hover.
|
|
849
|
-
|
|
850
|
-
</p>
|
|
851
|
-
</blockquote>
|
|
852
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
853
|
-
<pre><code class="lang-css">@import "picasso/components/list-grids";
|
|
854
|
-
|
|
855
|
-
// Con valores por defecto
|
|
856
|
-
.text-input {
|
|
857
|
-
@include list-grid();
|
|
858
|
-
}
|
|
859
|
-
|
|
860
|
-
// Con todos los parametros: cell-width, cell-height, border-color, odd-color, even-color, hover-color
|
|
861
|
-
|
|
862
|
-
.text-input {
|
|
863
|
-
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
864
|
-
}</code></pre>
|
|
865
|
-
<p>Importación:
|
|
866
|
-
|
|
867
|
-
</p>
|
|
868
|
-
<pre><code class="lang-css">@import "picasso/components/list-grids";</code></pre>
|
|
869
|
-
<p>Mixin con los parámetros por defecto:
|
|
870
|
-
|
|
871
|
-
</p>
|
|
872
|
-
<pre><code class="lang-css">.list{
|
|
873
|
-
@include list-grid();
|
|
874
|
-
}</code></pre>
|
|
875
|
-
<p>Mixin con parámetros personalizados. Disponibles: ancho de la celda, alto de la celda, color del borde, color para celdas impares, color para celdas pares, color para el estado hover:
|
|
876
|
-
|
|
877
|
-
</p>
|
|
878
|
-
<pre><code class="lang-css">.list{
|
|
879
|
-
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
880
|
-
}</code></pre>
|
|
881
|
-
<blockquote>
|
|
882
|
-
<p><strong>Nota</strong>: El color para el estado hover debe ser en hexadecimal.
|
|
883
|
-
|
|
884
|
-
</p>
|
|
885
|
-
</blockquote>
|
|
886
|
-
<a name="compatibilidad-con-ie-lt-9"></a><h3>Compatibilidad con IE < 9</h3>
|
|
887
|
-
<p>Para la compatibilidad con Internet Explorer < 9 se deben agregar las siguientes clases al HTML: <code>even</code>, <code>odd</code>, <code>first</code>
|
|
888
|
-
|
|
889
|
-
</p>
|
|
890
|
-
<a name="html-compatible-con-ie-lt-9"></a><h3>HTML compatible con IE < 9</h3>
|
|
891
|
-
<pre><code class="lang-html"><div class="list-grid">
|
|
892
|
-
<ul class="first">
|
|
893
|
-
<li class="first odd"></li>
|
|
894
|
-
<li class="even">30 min</li>
|
|
895
|
-
<li class="odd">60 min</li>
|
|
896
|
-
<li class="even">90 min</li>
|
|
897
|
-
</ul>
|
|
898
|
-
<ul>
|
|
899
|
-
<li class="first odd">Vuelo DL - 110</li>
|
|
900
|
-
<li class="even">0%</li>
|
|
901
|
-
<li class="odd">10%</li>
|
|
902
|
-
<li class="even">0%</li>
|
|
903
|
-
</ul>
|
|
904
|
-
</div></code></pre>
|
|
905
|
-
|
|
906
|
-
<a name="arrows"></a><h2>Arrows</h2>
|
|
907
|
-
<p>Excelentes para avisos importantes.
|
|
908
|
-
|
|
909
|
-
</p>
|
|
910
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
911
|
-
<p><em class="arrow-demo-1">
|
|
912
|
-
Información
|
|
913
|
-
</em>
|
|
914
|
-
|
|
915
|
-
</p>
|
|
916
|
-
<p><em class="arrow-demo-2">
|
|
917
|
-
Importante
|
|
918
|
-
</em>
|
|
919
|
-
|
|
920
|
-
</p>
|
|
921
|
-
<p><em class="arrow-demo-3">
|
|
922
|
-
Leer
|
|
923
|
-
</em>
|
|
924
|
-
|
|
925
|
-
</p>
|
|
926
|
-
<p><em class="arrow-demo-4">
|
|
927
|
-
Aceptado
|
|
928
|
-
</em>
|
|
929
|
-
|
|
930
|
-
</p>
|
|
931
|
-
<a name="html"></a><h3>HTML</h3>
|
|
932
|
-
<pre><code class="lang-html"><em class="arrow">
|
|
933
|
-
Beneficio
|
|
934
|
-
</em></code></pre>
|
|
935
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
936
|
-
<p>Importación:
|
|
937
|
-
|
|
938
|
-
</p>
|
|
939
|
-
<pre><code class="lang-css">@import "picasso/components/arrows";</code></pre>
|
|
940
|
-
<p>Mixin con los parámetros por defecto:
|
|
941
|
-
|
|
942
|
-
</p>
|
|
943
|
-
<pre><code class="lang-css">.arrow{
|
|
944
|
-
@include arrow();
|
|
945
|
-
}</code></pre>
|
|
946
|
-
<p>Mixin con parámetros personalizados. Disponibles: background y color:
|
|
947
|
-
|
|
948
|
-
</p>
|
|
949
|
-
<pre><code class="lang-css">.arrow{
|
|
950
|
-
@include arrow(green, white);
|
|
951
|
-
}</code></pre>
|
|
952
|
-
|
|
953
|
-
<a name="pagination"></a><h2>Pagination</h2>
|
|
954
|
-
<p>Implementación tradicional del paginador.
|
|
955
|
-
|
|
956
|
-
</p>
|
|
957
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
958
|
-
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
959
|
-
<div class="pagination-demo-1">
|
|
960
|
-
<ul>
|
|
961
|
-
<li class="prev">
|
|
962
|
-
<a href="#">Anterior</a>
|
|
963
|
-
</li>
|
|
964
|
-
<li>
|
|
965
|
-
<a href="#">1</a>
|
|
966
|
-
</li>
|
|
967
|
-
<li>
|
|
968
|
-
<a href="#">2</a>
|
|
969
|
-
</li>
|
|
970
|
-
<li class="active">
|
|
971
|
-
<a>3</a>
|
|
972
|
-
</li>
|
|
973
|
-
<li>
|
|
974
|
-
<a href="#">4</a>
|
|
975
|
-
</li>
|
|
976
|
-
<li class="disabled">
|
|
977
|
-
<a href="#">5</a>
|
|
978
|
-
</li>
|
|
979
|
-
<li class="dots">
|
|
980
|
-
<a>...</a>
|
|
981
|
-
</li>
|
|
982
|
-
<li>
|
|
983
|
-
<a href="#">12</a>
|
|
984
|
-
</li>
|
|
985
|
-
<li class="next">
|
|
986
|
-
<a href="#">Siguiente</a>
|
|
987
|
-
</li>
|
|
988
|
-
</ul>
|
|
989
|
-
</div>
|
|
990
|
-
|
|
991
|
-
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
992
|
-
<div class="pagination-demo-2">
|
|
993
|
-
<ul>
|
|
994
|
-
<li>
|
|
995
|
-
<a href="#">1</a>
|
|
996
|
-
</li>
|
|
997
|
-
<li>
|
|
998
|
-
<a href="#">2</a>
|
|
999
|
-
</li>
|
|
1000
|
-
<li class="active">
|
|
1001
|
-
<a>3</a>
|
|
1002
|
-
</li>
|
|
1003
|
-
<li>
|
|
1004
|
-
<a href="#">4</a>
|
|
1005
|
-
</li>
|
|
1006
|
-
<li>
|
|
1007
|
-
<a href="#">5</a>
|
|
1008
|
-
</li>
|
|
1009
|
-
</ul>
|
|
1010
|
-
</div>
|
|
1011
|
-
|
|
1012
|
-
<a name="html"></a><h3>HTML</h3>
|
|
1013
|
-
<pre><code class="lang-html"><div class="pagination">
|
|
1014
|
-
<ul>
|
|
1015
|
-
<li class="prev">
|
|
1016
|
-
<a href="#">Anterior</a>
|
|
1017
|
-
</li>
|
|
1018
|
-
<li>
|
|
1019
|
-
<a href="#">1</a>
|
|
1020
|
-
</li>
|
|
1021
|
-
<li class="active">
|
|
1022
|
-
<a>2</a>
|
|
1023
|
-
</li>
|
|
1024
|
-
<li class="disabled">
|
|
1025
|
-
<a href="#">3</a>
|
|
1026
|
-
</li>
|
|
1027
|
-
<li class="dots">
|
|
1028
|
-
<a>...</a>
|
|
1029
|
-
</li>
|
|
1030
|
-
<li class="next">
|
|
1031
|
-
<a href="#">Siguiente</a>
|
|
1032
|
-
</li>
|
|
1033
|
-
</ul>
|
|
1034
|
-
</div></code></pre>
|
|
1035
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
1036
|
-
<p>Importación:
|
|
1037
|
-
|
|
1038
|
-
</p>
|
|
1039
|
-
<pre><code class="lang-css">@import "picasso/components/pagination";</code></pre>
|
|
1040
|
-
<p>Mixin con los parámetros por defecto:
|
|
1041
|
-
|
|
1042
|
-
</p>
|
|
1043
|
-
<pre><code class="lang-css">.pagination{
|
|
1044
|
-
@include pagination();
|
|
1045
|
-
}</code></pre>
|
|
1046
|
-
<p>Mixin con parámetros personalizados. Disponibles: color para la página activa, color para las páginas no activas, background para las páginas no activas, color del borde para los items, radio del borde para los items, color para el estado hover, background para el estado hover:
|
|
1047
|
-
|
|
1048
|
-
</p>
|
|
1049
|
-
<pre><code class="lang-css">.pagination{
|
|
1050
|
-
@include pagination(black, blue, white, red, 10px, yellow, green);
|
|
1051
|
-
}</code></pre>
|
|
1052
|
-
|
|
1053
|
-
<a name="bubbles"></a><h2>Bubbles</h2>
|
|
1054
|
-
<p>Ideales para citar comentarios de clientes.
|
|
1055
|
-
|
|
1056
|
-
</p>
|
|
1057
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
1058
|
-
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
1059
|
-
<div class="bubble-demo-1">
|
|
1060
|
-
<blockquote>
|
|
1061
|
-
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.
|
|
1062
|
-
</blockquote>
|
|
1063
|
-
</div>
|
|
1064
|
-
|
|
1065
|
-
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
1066
|
-
<div class="bubble-demo-2">
|
|
1067
|
-
<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>
|
|
1068
|
-
<blockquote>
|
|
1069
|
-
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.
|
|
1070
|
-
</blockquote>
|
|
1071
|
-
</div>
|
|
1072
|
-
|
|
1073
|
-
<a name="html"></a><h3>HTML</h3>
|
|
1074
|
-
<pre><code class="lang-html"><div class="bubble">
|
|
1075
|
-
<h4>This is a optional title</h4>
|
|
1076
|
-
<blockquote>
|
|
1077
|
-
This is a long quotation. This is a long quotation.
|
|
1078
|
-
</blockquote>
|
|
1079
|
-
</div></code></pre>
|
|
1080
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
1081
|
-
<p>Importación:
|
|
1082
|
-
|
|
1083
|
-
</p>
|
|
1084
|
-
<pre><code class="lang-css">@import "picasso/components/bubbles";</code></pre>
|
|
1085
|
-
<p>Mixin con los parámetros por defecto:
|
|
1086
|
-
|
|
1087
|
-
</p>
|
|
1088
|
-
<pre><code class="lang-css">.bubble{
|
|
1089
|
-
@include bubble();
|
|
1090
|
-
}</code></pre>
|
|
1091
|
-
<p>Mixin con parámetros personalizados. Disponibles: ancho, background, color, utilizar ellipsis, posición de la ellipsis:
|
|
1092
|
-
|
|
1093
|
-
</p>
|
|
1094
|
-
<pre><code class="lang-css">.bubble{
|
|
1095
|
-
@include bubble(200px, blue, white, true, left);
|
|
1096
|
-
}</code></pre>
|
|
1097
|
-
|
|
1098
|
-
<a name="popups"></a><h2>Popups</h2>
|
|
1099
|
-
<p>Estilos para recrear popups.
|
|
1100
|
-
|
|
1101
|
-
</p>
|
|
1102
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
1103
|
-
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
1104
|
-
<div class="popup-demo-container">
|
|
1105
|
-
<div class="popup-demo-1">
|
|
1106
|
-
<div class="popup-container">
|
|
1107
|
-
<div class="popup-header">
|
|
1108
|
-
<a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><h4>Aeropuerto</h4>
|
|
1109
|
-
</div>
|
|
1110
|
-
<div class="popup-content">
|
|
1111
|
-
<p>Miami</p>
|
|
1112
|
-
<p>Aeropuerto Internacional Miami</p>
|
|
1113
|
-
</div>
|
|
1114
|
-
</div>
|
|
1115
|
-
<span class="popup-close">x</span>
|
|
1116
|
-
<span class="popup-arrow popup-arrow-bottom"></span>
|
|
1117
|
-
</div>
|
|
1118
|
-
</div>
|
|
1119
|
-
|
|
1120
|
-
<div class="popup-demo-container">
|
|
1121
|
-
<div class="popup-demo-2">
|
|
1122
|
-
<div class="popup-container">
|
|
1123
|
-
<div class="popup-header">
|
|
1124
|
-
<h4>Aeropuerto</h4>
|
|
1125
|
-
</div>
|
|
1126
|
-
<div class="popup-content">
|
|
1127
|
-
<p>Miami</p>
|
|
1128
|
-
<p>Aeropuerto Internacional Miami</p>
|
|
1129
|
-
</div>
|
|
1130
|
-
</div>
|
|
1131
|
-
<span class="popup-close">x</span>
|
|
1132
|
-
<span class="popup-arrow popup-arrow-top"></span>
|
|
1133
|
-
</div>
|
|
1134
|
-
</div>
|
|
1135
|
-
|
|
1136
|
-
<div class="popup-demo-container">
|
|
1137
|
-
<div class="popup-demo-3">
|
|
1138
|
-
<div class="popup-container">
|
|
1139
|
-
<div class="popup-header">
|
|
1140
|
-
<h4>Aeropuerto</h4>
|
|
1141
|
-
</div>
|
|
1142
|
-
<div class="popup-content">
|
|
1143
|
-
<p>Miami</p>
|
|
1144
|
-
<p>Aeropuerto Internacional Miami</p>
|
|
1145
|
-
</div>
|
|
1146
|
-
</div>
|
|
1147
|
-
<span class="popup-close">x</span>
|
|
1148
|
-
<span class="popup-arrow popup-arrow-left"></span>
|
|
1149
|
-
</div>
|
|
1150
|
-
</div>
|
|
1151
|
-
|
|
1152
|
-
<div class="popup-demo-container">
|
|
1153
|
-
<div class="popup-demo-4">
|
|
1154
|
-
<div class="popup-container">
|
|
1155
|
-
<div class="popup-header">
|
|
1156
|
-
<h4>Aeropuerto</h4>
|
|
1157
|
-
</div>
|
|
1158
|
-
<div class="popup-content">
|
|
1159
|
-
<p>Miami</p>
|
|
1160
|
-
<p>Aeropuerto Internacional Miami</p>
|
|
1161
|
-
</div>
|
|
1162
|
-
</div>
|
|
1163
|
-
<span class="popup-close">x</span>
|
|
1164
|
-
<span class="popup-arrow popup-arrow-right"></span>
|
|
1165
|
-
</div>
|
|
1166
|
-
</div>
|
|
1167
|
-
|
|
1168
|
-
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
1169
|
-
<div class="popup-demo-container">
|
|
1170
|
-
<div class="popup-demo-5">
|
|
1171
|
-
<div class="popup-container">
|
|
1172
|
-
<div class="popup-header">
|
|
1173
|
-
<h4>Aeropuerto</h4>
|
|
1174
|
-
</div>
|
|
1175
|
-
<div class="popup-content">
|
|
1176
|
-
<p>Miami</p>
|
|
1177
|
-
<p>Aeropuerto Internacional Miami</p>
|
|
1178
|
-
</div>
|
|
1179
|
-
</div>
|
|
1180
|
-
<span class="popup-close">x</span>
|
|
1181
|
-
</div>
|
|
1182
|
-
</div>
|
|
1183
|
-
|
|
1184
|
-
<a name="ejemplo-3"></a><h4>Ejemplo 3</h4>
|
|
1185
|
-
<div class="popup-demo-container">
|
|
1186
|
-
<div class="popup-demo-6">
|
|
1187
|
-
<div class="popup-container">
|
|
1188
|
-
<div class="popup-content">
|
|
1189
|
-
<p>Miami</p>
|
|
1190
|
-
<p>Aeropuerto Internacional Miami</p>
|
|
1191
|
-
</div>
|
|
1192
|
-
</div>
|
|
1193
|
-
</div>
|
|
1194
|
-
</div>
|
|
1195
|
-
|
|
1196
|
-
<a name="html"></a><h3>HTML</h3>
|
|
1197
|
-
<pre><code class="lang-html"><div class="popup">
|
|
1198
|
-
<div class="popup-container">
|
|
1199
|
-
<div class="popup-header">
|
|
1200
|
-
<h4>Aeropuerto</h4>
|
|
1201
|
-
</div>
|
|
1202
|
-
<div class="popup-content">
|
|
1203
|
-
<p>Miami</p>
|
|
1204
|
-
<p>Aeropuerto Internacional Miami</p>
|
|
1205
|
-
</div>
|
|
1206
|
-
</div>
|
|
1207
|
-
<span class="popup-close">x</span>
|
|
1208
|
-
<span class="popup-arrow popup-arrow-right"></span>
|
|
1209
|
-
</div></code></pre>
|
|
1210
|
-
<p>Las clases para los 4 tipos de flecha son:
|
|
1211
|
-
|
|
1212
|
-
</p>
|
|
1213
|
-
<ul>
|
|
1214
|
-
<li><code>popup-arrow-top</code></li>
|
|
1215
|
-
<li><code>popup-arrow-bottom</code></li>
|
|
1216
|
-
<li><code>popup-arrow-left</code></li>
|
|
1217
|
-
<li><code>popup-arrow-right</code></li>
|
|
1218
|
-
</ul>
|
|
1219
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
1220
|
-
<p>Importación:
|
|
1221
|
-
|
|
1222
|
-
</p>
|
|
1223
|
-
<pre><code class="lang-css">@import "picasso/components/popups";</code></pre>
|
|
1224
|
-
<p>Mixin con los parámetros por defecto:
|
|
1225
|
-
|
|
1226
|
-
</p>
|
|
1227
|
-
<pre><code class="lang-css">.popup {
|
|
1228
|
-
@include popup();
|
|
1229
|
-
}</code></pre>
|
|
1230
|
-
<p>Mixin con parámetros personalizados. Disponibles: background, radio del borde, sombra, color del borde, background para el botón cerrar, color para el botón cerrar, background para el título, color para el título:
|
|
1231
|
-
|
|
1232
|
-
</p>
|
|
1233
|
-
<pre><code class="lang-css">.popup {
|
|
1234
|
-
@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgba(1, 61, 147, 0.7), blue, white, black, red);
|
|
1235
|
-
}</code></pre>
|
|
1236
|
-
<a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
|
|
1237
|
-
<p>Variable y valor por defecto:
|
|
1238
|
-
|
|
1239
|
-
</p>
|
|
1240
|
-
<pre><code class="lang-css">$popup-ie-fallback: "sprites";</code></pre>
|
|
1241
|
-
<p>Estrategias soportadas:
|
|
1242
|
-
|
|
1243
|
-
</p>
|
|
1244
|
-
<ul>
|
|
1245
|
-
<li><code>sprites</code></li>
|
|
1246
|
-
<li><code>GD</code></li>
|
|
1247
|
-
</ul>
|
|
1248
|
-
|
|
1249
|
-
<a name="accordions"></a><h2>Accordions</h2>
|
|
1250
|
-
<p>Para mostrar información en espacios reducidos.
|
|
1251
|
-
|
|
1252
|
-
</p>
|
|
1253
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
1254
|
-
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
1255
|
-
<div class="accordion-demo-1">
|
|
1256
|
-
|
|
1257
|
-
<div class="accordion-section">
|
|
1258
|
-
<div class="accordion-header accordion-header-open">
|
|
1259
|
-
<a name="precio"></a><a name="precio"></a><h4>Precio</h4>
|
|
1260
|
-
<span class="arrow"></span>
|
|
1261
|
-
</div>
|
|
1262
|
-
<div class="accordion-content">
|
|
1263
|
-
<span>aca van los filtros de precio</span>
|
|
1264
|
-
</div>
|
|
1265
|
-
</div>
|
|
1266
|
-
<div class="accordion-section">
|
|
1267
|
-
<div class="accordion-header accordion-header-open">
|
|
1268
|
-
<a name="paradas"></a><a name="paradas"></a><h4>Paradas</h4>
|
|
1269
|
-
<span class="arrow"></span>
|
|
1270
|
-
</div>
|
|
1271
|
-
<div class="accordion-content">
|
|
1272
|
-
<span>aca van los filtros de paradas</span>
|
|
1273
|
-
</div>
|
|
1274
|
-
</div>
|
|
1275
|
-
|
|
1276
|
-
<p></div>
|
|
1277
|
-
|
|
1278
|
-
</p>
|
|
1279
|
-
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
1280
|
-
<div class="accordion-demo-2">
|
|
1281
|
-
|
|
1282
|
-
<div class="accordion-section">
|
|
1283
|
-
<div class="accordion-header accordion-header-open">
|
|
1284
|
-
<h4>Precio</h4>
|
|
1285
|
-
<span class="arrow"></span>
|
|
1286
|
-
</div>
|
|
1287
|
-
<div class="accordion-content">
|
|
1288
|
-
<span>aca van los filtros de precio</span>
|
|
1289
|
-
</div>
|
|
1290
|
-
</div>
|
|
1291
|
-
<div class="accordion-section">
|
|
1292
|
-
<div class="accordion-header accordion-header-open">
|
|
1293
|
-
<h4>Paradas</h4>
|
|
1294
|
-
<span class="arrow"></span>
|
|
1295
|
-
</div>
|
|
1296
|
-
<div class="accordion-content">
|
|
1297
|
-
<span>aca van los filtros de paradas</span>
|
|
1298
|
-
</div>
|
|
1299
|
-
</div>
|
|
1300
|
-
|
|
1301
|
-
<p></div>
|
|
1302
|
-
|
|
1303
|
-
</p>
|
|
1304
|
-
<a name="html"></a><h3>HTML</h3>
|
|
1305
|
-
<pre><code class="lang-html"><div class="accordion">
|
|
1306
|
-
<div class="accordion-section">
|
|
1307
|
-
<div class="accordion-header accordion-header-open">
|
|
1308
|
-
<h4>Precio</h4>
|
|
1309
|
-
<span class="arrow"></span>
|
|
1310
|
-
</div>
|
|
1311
|
-
<div class="accordion-content">
|
|
1312
|
-
<span>aca van los filtros de precio</span>
|
|
1313
|
-
</div>
|
|
1314
|
-
</div>
|
|
1315
|
-
</div></code></pre>
|
|
1316
|
-
<blockquote>
|
|
1317
|
-
<p><strong>Nota</strong>: Para tener un header cerrado se utiliza la clase <code>accordion-header-close</code>. El componente no incluye las funciones JavaScript para ocultar y mostrar el contenido de cada acordeón.
|
|
1318
|
-
|
|
1319
|
-
</p>
|
|
1320
|
-
</blockquote>
|
|
1321
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
1322
|
-
<p>Importación:
|
|
1323
|
-
|
|
1324
|
-
</p>
|
|
1325
|
-
<pre><code class="lang-css">@import "picasso/components/accordions";</code></pre>
|
|
1326
|
-
<p>Mixin con los parámetros por defecto:
|
|
1327
|
-
|
|
1328
|
-
</p>
|
|
1329
|
-
<pre><code class="lang-css">.accordion {
|
|
1330
|
-
@include accordion();
|
|
1331
|
-
}</code></pre>
|
|
1332
|
-
<p>Mixin con parámetros personalizados. Disponibles: alto, background del título, color del título:
|
|
1333
|
-
|
|
1334
|
-
</p>
|
|
1335
|
-
<pre><code class="lang-css">.accordion {
|
|
1336
|
-
@include accordion(40px, #CCCCCC, #000000);
|
|
1337
|
-
}</code></pre>
|
|
1338
|
-
|
|
1339
|
-
<hr>
|
|
1340
|
-
<a name="utils"></a><h1>Utils</h1>
|
|
1341
|
-
<a name="clearfix"></a><h2>Clearfix</h2>
|
|
1342
|
-
<p>Basado en <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>.
|
|
1343
|
-
|
|
1344
|
-
</p>
|
|
1345
|
-
<a name="sass"></a><a name="sass"></a><h3>Sass</h3>
|
|
1346
|
-
<pre><code class="lang-css">@import "picasso/utils/clearfix";
|
|
1347
|
-
|
|
1348
|
-
//Clearfix
|
|
1349
|
-
.container{
|
|
1350
|
-
@include clearfix;
|
|
1351
|
-
}</code></pre>
|
|
1352
|
-
<a name="ie"></a><h2>IE</h2>
|
|
1353
|
-
<a name="after-before"></a><h3>After / Before</h3>
|
|
1354
|
-
<p>Soporte de <code>:after</code> y <code>:before</code> para Internet Explorer 7.
|
|
1355
|
-
|
|
1356
|
-
</p>
|
|
1357
|
-
<p>Basado en <a href="http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/">http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/</a>
|
|
1358
|
-
|
|
1359
|
-
</p>
|
|
1360
|
-
<a name="sass"></a><h4>Sass</h4>
|
|
1361
|
-
<pre><code class="lang-css">@import "picasso/utils/ie";
|
|
1362
|
-
|
|
1363
|
-
.my-element {
|
|
1364
|
-
@include after;
|
|
1365
|
-
@include before;
|
|
1366
|
-
|
|
1367
|
-
//Para IE quedan disponibles las clases .after y .before
|
|
1368
|
-
//para aplicar los mismos estilos como si fueran pseudoselectores
|
|
1369
|
-
.ie7 & {
|
|
1370
|
-
.after{
|
|
1371
|
-
}
|
|
1372
|
-
|
|
1373
|
-
.before{
|
|
1374
|
-
}
|
|
1375
|
-
}
|
|
1376
|
-
}</code></pre>
|
|
1377
|
-
<a name="sprite"></a><h2>Sprite</h2>
|
|
1378
|
-
<p>Inserta dinámicamente imágenes de un componente específico dentro de un sprite y devuelve la posición vertical en donde se insertó.
|
|
1379
|
-
|
|
1380
|
-
</p>
|
|
1381
|
-
<h3>Sass</h3>
|
|
1382
|
-
<pre><code class="lang-css">@import "picasso/utils/sprite";
|
|
1383
|
-
|
|
1384
|
-
$initial-position: insert-in-sprite($sprite-created, $sprite-name, $sprite, $sprite-width, $sprite-height);</code></pre>
|
|
1385
|
-
|
|
1386
|
-
<hr>
|
|
1387
|
-
<a name="despegar"></a><h1>Despegar</h1>
|
|
1388
|
-
<a name="variables"></a><h2>Variables</h2>
|
|
1389
|
-
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
1390
|
-
<a name="cuerpos-tipograficos"></a><h4>Cuerpos tipograficos</h4>
|
|
1391
|
-
<p class="despegar-size-1-demo">11px - Aliquam tincidunt mauris eu risus.</p>
|
|
1392
|
-
|
|
1393
|
-
<p class="despegar-size-2-demo">13px - Aliquam tincidunt mauris eu risus.</p>
|
|
1394
|
-
|
|
1395
|
-
<p class="despegar-size-3-demo">16px - Aliquam tincidunt mauris eu risus.</p>
|
|
1396
|
-
|
|
1397
|
-
<p class="despegar-size-4-demo">20px - Aliquam tincidunt mauris eu risus.</p>
|
|
1398
|
-
|
|
1399
|
-
<p class="despegar-size-5-demo">24px - Aliquam tincidunt mauris eu risus.</p>
|
|
1400
|
-
|
|
1401
|
-
<p class="despegar-size-6-demo">28px - Aliquam tincidunt mauris eu risus.</p>
|
|
1402
|
-
|
|
1403
|
-
<a name="colores-base"></a><h4>Colores base</h4>
|
|
1404
|
-
<p class="despegar-black-demo">#000 - Aliquam tincidunt mauris eu risus.</p>
|
|
1405
|
-
|
|
1406
|
-
<p class="despegar-white-demo">#FFF - Aliquam tincidunt mauris eu risus.</p>
|
|
1407
|
-
|
|
1408
|
-
<p class="despegar-yellow-demo">#FF3 - Aliquam tincidunt mauris eu risus.</p>
|
|
1409
|
-
|
|
1410
|
-
<p class="despegar-red-demo">#F00 - Aliquam tincidunt mauris eu risus.</p>
|
|
1411
|
-
|
|
1412
|
-
<p class="despegar-blue-demo">#013D93 - Aliquam tincidunt mauris eu risus.</p>
|
|
1413
|
-
|
|
1414
|
-
<p class="despegar-gray-1-demo">#222 - Aliquam tincidunt mauris eu risus.</p>
|
|
1415
|
-
|
|
1416
|
-
<p class="despegar-gray-2-demo">#444 - Aliquam tincidunt mauris eu risus.</p>
|
|
1417
|
-
|
|
1418
|
-
<p class="despegar-gray-3-demo">#666 - Aliquam tincidunt mauris eu risus.</p>
|
|
1419
|
-
|
|
1420
|
-
<p class="despegar-gray-4-demo">#888 - Aliquam tincidunt mauris eu risus.</p>
|
|
1421
|
-
|
|
1422
|
-
<p class="despegar-gray-5-demo">#AAA - Aliquam tincidunt mauris eu risus.</p>
|
|
1423
|
-
|
|
1424
|
-
<p class="despegar-gray-6-demo">#CCC - Aliquam tincidunt mauris eu risus.</p>
|
|
1425
|
-
|
|
1426
|
-
<p class="despegar-gray-7-demo">#EEE - Aliquam tincidunt mauris eu risus.</p>
|
|
1427
|
-
|
|
1428
|
-
<a name="elementos"></a><h4>Elementos</h4>
|
|
1429
|
-
<p class="despegar-searchbox-bg-demo">#FF3 Background Buscador - Aliquam tincidunt mauris eu risus.</p>
|
|
1430
|
-
|
|
1431
|
-
<p class="despegar-title-color-demo">#013D93 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
|
|
1432
|
-
|
|
1433
|
-
<p class="despegar-titlealt-color-demo">#F90 Color Titulos alternativos - Aliquam tincidunt mauris eu risus.</p>
|
|
1434
|
-
|
|
1435
|
-
<p class="despegar-link-color-demo">#319FDA Color links - Aliquam tincidunt mauris eu risus.</p>
|
|
1436
|
-
|
|
1437
|
-
<p class="despegar-link-color-hover-demo">#66CCFF Color links (hover) - Aliquam tincidunt mauris eu risus.</p>
|
|
1438
|
-
|
|
1439
|
-
<p class="despegar-error-bg-demo">#FFE6E6 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
|
|
1440
|
-
|
|
1441
|
-
<p class="despegar-error-border-demo">#F00 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.</p>
|
|
1442
|
-
|
|
1443
|
-
<p class="despegar-warning-bg-demo">#FFFFE1 Background mensajes - Aliquam tincidunt mauris eu risus.</p>
|
|
1444
|
-
|
|
1445
|
-
<p class="despegar-warning-border-demo">#FC3 Color borde mensajes - Aliquam tincidunt mauris eu risus.</p>
|
|
1446
|
-
|
|
1447
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
1448
|
-
<pre><code class="lang-css">@import "picasso/despegar/variables";
|
|
1449
|
-
|
|
1450
|
-
//Size 1
|
|
1451
|
-
.despegar-size-1-demo{
|
|
1452
|
-
font-size: $despegar-size-1;
|
|
1453
|
-
}
|
|
1454
|
-
|
|
1455
|
-
//Size 2
|
|
1456
|
-
.despegar-size-2-demo{
|
|
1457
|
-
font-size: $despegar-size-2;
|
|
1458
|
-
}
|
|
1459
|
-
|
|
1460
|
-
//Size 3
|
|
1461
|
-
.despegar-size-3-demo{
|
|
1462
|
-
font-size: $despegar-size-3;
|
|
1463
|
-
}
|
|
1464
|
-
|
|
1465
|
-
//Size 4
|
|
1466
|
-
.despegar-size-4-demo{
|
|
1467
|
-
font-size: $despegar-size-4;
|
|
1468
|
-
}
|
|
1469
|
-
|
|
1470
|
-
//Size 5
|
|
1471
|
-
.despegar-size-5-demo{
|
|
1472
|
-
font-size: $despegar-size-5;
|
|
1473
|
-
}
|
|
1474
|
-
|
|
1475
|
-
//Size 6
|
|
1476
|
-
.despegar-size-6-demo{
|
|
1477
|
-
font-size: $despegar-size-6;
|
|
1478
|
-
}
|
|
1479
|
-
|
|
1480
|
-
//Black
|
|
1481
|
-
.despegar-black-demo{
|
|
1482
|
-
background: $despegar-black;
|
|
1483
|
-
}
|
|
1484
|
-
|
|
1485
|
-
//White
|
|
1486
|
-
.despegar-white-demo{
|
|
1487
|
-
background: $despegar-white;
|
|
1488
|
-
}
|
|
1489
|
-
|
|
1490
|
-
//Yellow
|
|
1491
|
-
.despegar-yellow-demo{
|
|
1492
|
-
background: $despegar-yellow;
|
|
1493
|
-
}
|
|
1494
|
-
|
|
1495
|
-
//Red
|
|
1496
|
-
.despegar-red-demo{
|
|
1497
|
-
background: $despegar-red;
|
|
1498
|
-
}
|
|
1499
|
-
|
|
1500
|
-
//Blue
|
|
1501
|
-
.despegar-blue-demo{
|
|
1502
|
-
background: $despegar-blue;
|
|
1503
|
-
}
|
|
1504
|
-
|
|
1505
|
-
//Gray 1
|
|
1506
|
-
.despegar-gray-1-demo{
|
|
1507
|
-
color: $despegar-gray-1;
|
|
1508
|
-
}
|
|
1509
|
-
|
|
1510
|
-
//Gray 2
|
|
1511
|
-
.despegar-gray-2-demo{
|
|
1512
|
-
color: $despegar-gray-2;
|
|
1513
|
-
}
|
|
1514
|
-
|
|
1515
|
-
//Gray 3
|
|
1516
|
-
.despegar-gray-3-demo{
|
|
1517
|
-
color: $despegar-gray-3;
|
|
1518
|
-
}
|
|
1519
|
-
|
|
1520
|
-
//Gray 4
|
|
1521
|
-
.despegar-gray-4-demo{
|
|
1522
|
-
color: $despegar-gray-4;
|
|
1523
|
-
}
|
|
1524
|
-
|
|
1525
|
-
//Gray 5
|
|
1526
|
-
.despegar-gray-5-demo{
|
|
1527
|
-
color: $despegar-gray-5;
|
|
1528
|
-
}
|
|
1529
|
-
|
|
1530
|
-
//Gray 6
|
|
1531
|
-
.despegar-gray-6-demo{
|
|
1532
|
-
color: $despegar-gray-6;
|
|
1533
|
-
}
|
|
1534
|
-
|
|
1535
|
-
//Gray 7
|
|
1536
|
-
.despegar-gray-7-demo{
|
|
1537
|
-
color: $despegar-gray-7;
|
|
1538
|
-
}
|
|
1539
|
-
|
|
1540
|
-
//Searchbox
|
|
1541
|
-
.despegar-searchbox-bg-demo{
|
|
1542
|
-
background: $despegar-searchbox-bg;
|
|
1543
|
-
}
|
|
1544
|
-
|
|
1545
|
-
//Title
|
|
1546
|
-
.despegar-title-color-demo{
|
|
1547
|
-
color: $despegar-title-color;
|
|
1548
|
-
}
|
|
1549
|
-
|
|
1550
|
-
//Title Alt
|
|
1551
|
-
.despegar-titlealt-color-demo{
|
|
1552
|
-
color: $despegar-titlealt-color;
|
|
1553
|
-
}
|
|
1554
|
-
|
|
1555
|
-
//Link
|
|
1556
|
-
.despegar-link-color-demo{
|
|
1557
|
-
color: $despegar-link-color;
|
|
1558
|
-
|
|
1559
|
-
&:hover{
|
|
1560
|
-
color: $despegar-link-color-hover;
|
|
1561
|
-
}
|
|
1562
|
-
|
|
1563
|
-
}
|
|
1564
|
-
|
|
1565
|
-
//Error
|
|
1566
|
-
.despegar-error-bg-demo{
|
|
1567
|
-
background: $despegar-error-bg;
|
|
1568
|
-
border: 1px solid $despegar-error-border;
|
|
1569
|
-
}
|
|
1570
|
-
|
|
1571
|
-
//Warning
|
|
1572
|
-
.despegar-warning-bg-demo{
|
|
1573
|
-
background: $despegar-warning-bg;
|
|
1574
|
-
border: 1px solid $despegar-warning-border;
|
|
1575
|
-
}</code></pre>
|
|
1576
|
-
|
|
1577
|
-
</div>
|
|
1578
|
-
|
|
1579
|
-
<footer>
|
|
1580
|
-
</footer>
|
|
1581
|
-
|
|
1582
|
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
1583
|
-
<script src="./js/docs.js"></script>
|
|
1584
|
-
<script src="./js/rainbow-custom.min.js"></script>
|
|
1585
|
-
|
|
1586
|
-
</body>
|
|
1587
|
-
|
|
1588
|
-
</html>
|