picasso 0.0.3 → 0.1.0
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/.gitignore +1 -0
- data/docs/accordions.html +267 -0
- data/docs/all.html +934 -56
- data/docs/arrows.html +45 -8
- data/docs/bubbles.html +49 -10
- data/docs/build/manifest.json +19 -2
- data/docs/build/md/changelog.md +16 -0
- data/docs/build/md/components/accordions.md +97 -0
- data/docs/build/md/{arrows.md → components/arrows.md} +10 -2
- data/docs/build/md/{bubbles.md → components/bubbles.md} +16 -4
- data/docs/build/md/{buttons.md → components/buttons.md} +50 -5
- data/docs/build/md/components/components.md +37 -0
- data/docs/build/md/components/inputs.md +73 -0
- data/docs/build/md/components/list-grids.md +180 -0
- data/docs/build/md/components/navs.md +107 -0
- data/docs/build/md/components/pagination.md +112 -0
- data/docs/build/md/components/popups.md +162 -0
- data/docs/build/md/{despegar.md → despegar/despegar.md} +0 -0
- data/docs/build/md/intro.md +3 -2
- data/docs/build/md/mejoras.md +69 -0
- data/docs/build/md/todo.md +11 -1
- data/docs/build/md/utils/utils.md +62 -0
- data/docs/buttons.html +80 -14
- data/docs/changelog.html +74 -2
- data/docs/components.html +65 -2
- data/docs/config.rb +14 -6
- data/docs/css/markdown.css +8 -0
- data/docs/css/style.css +1508 -64
- data/docs/despegar.html +34 -2
- data/docs/ie.html +42 -11
- data/docs/img/picasso-buttons.png +0 -0
- data/docs/img/picasso-mini-buttons.png +0 -0
- data/docs/img/picasso-nav.png +0 -0
- data/docs/img/picasso-popup.png +0 -0
- data/docs/index.html +37 -4
- data/docs/{docs.html → inputs.html} +95 -21
- data/docs/intro.html +37 -4
- data/docs/js/docs.js +16 -0
- data/docs/js/viewer.js +12 -0
- data/docs/list-grids.html +341 -0
- data/docs/mejoras.html +241 -0
- data/docs/navs.html +272 -0
- data/docs/pagination.html +277 -0
- data/docs/popups.html +328 -0
- data/docs/sass/style.scss +113 -0
- data/docs/todo.html +49 -3
- data/docs/utils.html +68 -3
- data/lib/picasso/version.rb +1 -1
- data/picasso.gemspec +2 -0
- data/stylesheets/picasso/_components.scss +7 -1
- data/stylesheets/picasso/_utils.scss +3 -1
- data/stylesheets/picasso/components/_accordions.scss +96 -0
- data/stylesheets/picasso/components/_arrows.scss +9 -3
- data/stylesheets/picasso/components/_bubbles.scss +28 -17
- data/stylesheets/picasso/components/_inputs.scss +59 -0
- data/stylesheets/picasso/components/_list-grids.scss +118 -0
- data/stylesheets/picasso/components/_navs.scss +266 -0
- data/stylesheets/picasso/components/_pagination.scss +144 -0
- data/stylesheets/picasso/components/_popups.scss +257 -0
- data/stylesheets/picasso/components/buttons/_buttons.scss +124 -54
- data/stylesheets/picasso/components/buttons/_mini-buttons.scss +87 -19
- data/stylesheets/picasso/utils/_ie.scss +36 -0
- data/stylesheets/picasso/utils/_sprite.scss +32 -0
- metadata +65 -13
- data/docs/build/md/components.md +0 -3
- data/docs/build/md/docs.md +0 -21
- data/docs/build/md/ie.md +0 -32
- data/docs/build/md/utils.md +0 -19
data/docs/mejoras.html
ADDED
|
@@ -0,0 +1,241 @@
|
|
|
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
|
+
<h1>Picasso. Framework CSS/Sass.</h1>
|
|
22
|
+
</header>
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<hr>
|
|
28
|
+
|
|
29
|
+
<h2>Contenidos</h2>
|
|
30
|
+
|
|
31
|
+
<aside>
|
|
32
|
+
<nav>
|
|
33
|
+
<ol>
|
|
34
|
+
|
|
35
|
+
<li>
|
|
36
|
+
<a href="./intro.html#introduccioacuten">Introducci&oacute;n</a>
|
|
37
|
+
|
|
38
|
+
<ol>
|
|
39
|
+
|
|
40
|
+
<li><a href="./intro.html#repositorio">Repositorio</a></li>
|
|
41
|
+
|
|
42
|
+
<li><a href="./intro.html#instalacioacuten">Instalaci&oacute;n</a></li>
|
|
43
|
+
|
|
44
|
+
<li><a href="./intro.html#actualizacioacuten">Actualizaci&oacute;n</a></li>
|
|
45
|
+
|
|
46
|
+
</ol>
|
|
47
|
+
|
|
48
|
+
</li>
|
|
49
|
+
|
|
50
|
+
<li>
|
|
51
|
+
<a href="./changelog.html#changelog">Changelog</a>
|
|
52
|
+
|
|
53
|
+
<ol>
|
|
54
|
+
|
|
55
|
+
<li><a href="./changelog.html#010">0.1.0</a></li>
|
|
56
|
+
|
|
57
|
+
<li><a href="./changelog.html#003">0.0.3</a></li>
|
|
58
|
+
|
|
59
|
+
<li><a href="./changelog.html#002">0.0.2</a></li>
|
|
60
|
+
|
|
61
|
+
<li><a href="./changelog.html#001">0.0.1</a></li>
|
|
62
|
+
|
|
63
|
+
</ol>
|
|
64
|
+
|
|
65
|
+
</li>
|
|
66
|
+
|
|
67
|
+
<li>
|
|
68
|
+
<a href="./todo.html#todo">Todo</a>
|
|
69
|
+
|
|
70
|
+
<ol>
|
|
71
|
+
|
|
72
|
+
<li><a href="./todo.html#componentes">Componentes</a></li>
|
|
73
|
+
|
|
74
|
+
<li><a href="./todo.html#utilidades">Utilidades</a></li>
|
|
75
|
+
|
|
76
|
+
<li><a href="./todo.html#otros">Otros</a></li>
|
|
77
|
+
|
|
78
|
+
</ol>
|
|
79
|
+
|
|
80
|
+
</li>
|
|
81
|
+
|
|
82
|
+
<li>
|
|
83
|
+
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
|
84
|
+
|
|
85
|
+
<ol>
|
|
86
|
+
|
|
87
|
+
<li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&oacute;digo fuente</a></li>
|
|
88
|
+
|
|
89
|
+
<li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&ntilde;adidos/cambios:</a></li>
|
|
90
|
+
|
|
91
|
+
<li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
|
|
92
|
+
|
|
93
|
+
<li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&oacute;n</a></li>
|
|
94
|
+
|
|
95
|
+
</ol>
|
|
96
|
+
|
|
97
|
+
</li>
|
|
98
|
+
|
|
99
|
+
<li>
|
|
100
|
+
<a href="./components.html#components">Components</a>
|
|
101
|
+
|
|
102
|
+
<ol>
|
|
103
|
+
|
|
104
|
+
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
|
105
|
+
|
|
106
|
+
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
107
|
+
|
|
108
|
+
<li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
|
|
109
|
+
|
|
110
|
+
<li><a href="./inputs.html#inputs">Inputs</a></li>
|
|
111
|
+
|
|
112
|
+
<li><a href="./navs.html#navs">Navs</a></li>
|
|
113
|
+
|
|
114
|
+
<li><a href="./list-grids.html#list-grid">List Grid</a></li>
|
|
115
|
+
|
|
116
|
+
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
117
|
+
|
|
118
|
+
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
|
119
|
+
|
|
120
|
+
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
121
|
+
|
|
122
|
+
<li><a href="./popups.html#popups">Popups</a></li>
|
|
123
|
+
|
|
124
|
+
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
|
125
|
+
|
|
126
|
+
</ol>
|
|
127
|
+
|
|
128
|
+
</li>
|
|
129
|
+
|
|
130
|
+
<li>
|
|
131
|
+
<a href="./utils.html#utils">Utils</a>
|
|
132
|
+
|
|
133
|
+
<ol>
|
|
134
|
+
|
|
135
|
+
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
136
|
+
|
|
137
|
+
<li><a href="./utils.html#ie">IE</a></li>
|
|
138
|
+
|
|
139
|
+
<li><a href="./utils.html#sprite">Sprite</a></li>
|
|
140
|
+
|
|
141
|
+
</ol>
|
|
142
|
+
|
|
143
|
+
</li>
|
|
144
|
+
|
|
145
|
+
<li>
|
|
146
|
+
<a href="./despegar.html#despegar">Despegar</a>
|
|
147
|
+
|
|
148
|
+
<ol>
|
|
149
|
+
|
|
150
|
+
<li><a href="./despegar.html#variables">Variables</a></li>
|
|
151
|
+
|
|
152
|
+
</ol>
|
|
153
|
+
|
|
154
|
+
</li>
|
|
155
|
+
|
|
156
|
+
</ol>
|
|
157
|
+
</nav>
|
|
158
|
+
</aside>
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
<hr>
|
|
163
|
+
|
|
164
|
+
<article>
|
|
165
|
+
<a name="mejoras-antildeadidos"></a><h1>Mejoras / Añadidos</h1>
|
|
166
|
+
<a name="utilizar-el-coacutedigo-fuente"></a><h2>Utilizar el código fuente</h2>
|
|
167
|
+
<ul>
|
|
168
|
+
<li>Clonar el repositorio de Picasso:</li>
|
|
169
|
+
</ul>
|
|
170
|
+
<pre><code class="lang-bash">$ git clone git@gitorious.despegar.it:picasso/picasso.git</code></pre>
|
|
171
|
+
<ul>
|
|
172
|
+
<li>Pasarse al branch <code>development</code>:</li>
|
|
173
|
+
</ul>
|
|
174
|
+
<pre><code class="lang-bash">$ cd picasso
|
|
175
|
+
$ git checkout --track origin/development</code></pre>
|
|
176
|
+
<ul>
|
|
177
|
+
<li>Verificar que se esta parado en dicho branch:</li>
|
|
178
|
+
</ul>
|
|
179
|
+
<pre><code class="lang-bash">$ git branch</code></pre>
|
|
180
|
+
<a name="pruebas-locales-de-nuevos-antildeadidos-cambios"></a><h2>Pruebas locales de nuevos añadidos/cambios:</h2>
|
|
181
|
+
<ul>
|
|
182
|
+
<li>En la carpeta del proyecto donde se encuentra el archivo <code>config.rb</code>, crear una carpeta <code>extensions</code>.</li>
|
|
183
|
+
<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>
|
|
184
|
+
<li>En caso que el proyecto este configurado para usar Picasso, comentar dichas lineas en el <code>config.rb</code>.</li>
|
|
185
|
+
<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>
|
|
186
|
+
</ul>
|
|
187
|
+
<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.
|
|
188
|
+
En caso de agregar alguna funcionalidad nueva, tomar de ejemplo algún componente ya existente para entender su lógica interna.
|
|
189
|
+
|
|
190
|
+
</p>
|
|
191
|
+
<a name="subidas-en-el-repositorio"></a><h2>Subidas en el repositorio</h2>
|
|
192
|
+
<ul>
|
|
193
|
+
<li>Una vez realizados los cambios o añadidos, subirlos al repositorio:</li>
|
|
194
|
+
</ul>
|
|
195
|
+
<pre><code class="lang-bash">$ git status
|
|
196
|
+
$ git add <archivos a subir>;
|
|
197
|
+
$ git commit -m "<un mensaje descriptivo del commit>"
|
|
198
|
+
$ git push</code></pre>
|
|
199
|
+
<blockquote>
|
|
200
|
+
<p><strong>Nota</strong>: Toda mejora o cambio debe tener su documentación pertinente, caso contrario, no se incorporarán en Picasso.
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
</p>
|
|
204
|
+
</blockquote>
|
|
205
|
+
<a name="generar-la-documentacioacuten"></a><h2>Generar la documentación</h2>
|
|
206
|
+
<ul>
|
|
207
|
+
<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>
|
|
208
|
+
</li>
|
|
209
|
+
<li><p>Abrir una terminal e instalar <a href="http://beautifuldocs.com/">Beautiful docs</a>:</p>
|
|
210
|
+
</li>
|
|
211
|
+
</ul>
|
|
212
|
+
<pre><code class="lang-bash">$ npm install https://github.com/dzignus/beautiful-docs/tarball/master -g</code></pre>
|
|
213
|
+
<ul>
|
|
214
|
+
<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>
|
|
215
|
+
</ul>
|
|
216
|
+
<blockquote>
|
|
217
|
+
<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>.
|
|
218
|
+
|
|
219
|
+
</p>
|
|
220
|
+
</blockquote>
|
|
221
|
+
<ul>
|
|
222
|
+
<li>Pararse sobre la carpeta raiz del proyecto y ejecutar:</li>
|
|
223
|
+
</ul>
|
|
224
|
+
<pre><code class="lang-bash">$ bfdocs --base-url='.' --templates-dir='docs/build/templates/' docs/build/manifest.json docs</code></pre>
|
|
225
|
+
<ul>
|
|
226
|
+
<li>Revisar que la documentación se haya generado correctamente abriendo el archivo <code>.html</code> pertinente.</li>
|
|
227
|
+
</ul>
|
|
228
|
+
|
|
229
|
+
</article>
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
<footer>
|
|
233
|
+
</footer>
|
|
234
|
+
|
|
235
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
236
|
+
<script src="./js/docs.js"></script>
|
|
237
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
238
|
+
|
|
239
|
+
</body>
|
|
240
|
+
|
|
241
|
+
</html>
|
data/docs/navs.html
ADDED
|
@@ -0,0 +1,272 @@
|
|
|
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
|
+
<h1>Picasso. Framework CSS/Sass.</h1>
|
|
22
|
+
</header>
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<hr>
|
|
28
|
+
|
|
29
|
+
<h2>Contenidos</h2>
|
|
30
|
+
|
|
31
|
+
<aside>
|
|
32
|
+
<nav>
|
|
33
|
+
<ol>
|
|
34
|
+
|
|
35
|
+
<li>
|
|
36
|
+
<a href="./intro.html#introduccioacuten">Introducci&oacute;n</a>
|
|
37
|
+
|
|
38
|
+
<ol>
|
|
39
|
+
|
|
40
|
+
<li><a href="./intro.html#repositorio">Repositorio</a></li>
|
|
41
|
+
|
|
42
|
+
<li><a href="./intro.html#instalacioacuten">Instalaci&oacute;n</a></li>
|
|
43
|
+
|
|
44
|
+
<li><a href="./intro.html#actualizacioacuten">Actualizaci&oacute;n</a></li>
|
|
45
|
+
|
|
46
|
+
</ol>
|
|
47
|
+
|
|
48
|
+
</li>
|
|
49
|
+
|
|
50
|
+
<li>
|
|
51
|
+
<a href="./changelog.html#changelog">Changelog</a>
|
|
52
|
+
|
|
53
|
+
<ol>
|
|
54
|
+
|
|
55
|
+
<li><a href="./changelog.html#010">0.1.0</a></li>
|
|
56
|
+
|
|
57
|
+
<li><a href="./changelog.html#003">0.0.3</a></li>
|
|
58
|
+
|
|
59
|
+
<li><a href="./changelog.html#002">0.0.2</a></li>
|
|
60
|
+
|
|
61
|
+
<li><a href="./changelog.html#001">0.0.1</a></li>
|
|
62
|
+
|
|
63
|
+
</ol>
|
|
64
|
+
|
|
65
|
+
</li>
|
|
66
|
+
|
|
67
|
+
<li>
|
|
68
|
+
<a href="./todo.html#todo">Todo</a>
|
|
69
|
+
|
|
70
|
+
<ol>
|
|
71
|
+
|
|
72
|
+
<li><a href="./todo.html#componentes">Componentes</a></li>
|
|
73
|
+
|
|
74
|
+
<li><a href="./todo.html#utilidades">Utilidades</a></li>
|
|
75
|
+
|
|
76
|
+
<li><a href="./todo.html#otros">Otros</a></li>
|
|
77
|
+
|
|
78
|
+
</ol>
|
|
79
|
+
|
|
80
|
+
</li>
|
|
81
|
+
|
|
82
|
+
<li>
|
|
83
|
+
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
|
84
|
+
|
|
85
|
+
<ol>
|
|
86
|
+
|
|
87
|
+
<li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&oacute;digo fuente</a></li>
|
|
88
|
+
|
|
89
|
+
<li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&ntilde;adidos/cambios:</a></li>
|
|
90
|
+
|
|
91
|
+
<li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
|
|
92
|
+
|
|
93
|
+
<li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&oacute;n</a></li>
|
|
94
|
+
|
|
95
|
+
</ol>
|
|
96
|
+
|
|
97
|
+
</li>
|
|
98
|
+
|
|
99
|
+
<li>
|
|
100
|
+
<a href="./components.html#components">Components</a>
|
|
101
|
+
|
|
102
|
+
<ol>
|
|
103
|
+
|
|
104
|
+
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
|
105
|
+
|
|
106
|
+
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
107
|
+
|
|
108
|
+
<li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
|
|
109
|
+
|
|
110
|
+
<li><a href="./inputs.html#inputs">Inputs</a></li>
|
|
111
|
+
|
|
112
|
+
<li><a href="./navs.html#navs">Navs</a></li>
|
|
113
|
+
|
|
114
|
+
<li><a href="./list-grids.html#list-grid">List Grid</a></li>
|
|
115
|
+
|
|
116
|
+
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
117
|
+
|
|
118
|
+
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
|
119
|
+
|
|
120
|
+
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
121
|
+
|
|
122
|
+
<li><a href="./popups.html#popups">Popups</a></li>
|
|
123
|
+
|
|
124
|
+
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
|
125
|
+
|
|
126
|
+
</ol>
|
|
127
|
+
|
|
128
|
+
</li>
|
|
129
|
+
|
|
130
|
+
<li>
|
|
131
|
+
<a href="./utils.html#utils">Utils</a>
|
|
132
|
+
|
|
133
|
+
<ol>
|
|
134
|
+
|
|
135
|
+
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
136
|
+
|
|
137
|
+
<li><a href="./utils.html#ie">IE</a></li>
|
|
138
|
+
|
|
139
|
+
<li><a href="./utils.html#sprite">Sprite</a></li>
|
|
140
|
+
|
|
141
|
+
</ol>
|
|
142
|
+
|
|
143
|
+
</li>
|
|
144
|
+
|
|
145
|
+
<li>
|
|
146
|
+
<a href="./despegar.html#despegar">Despegar</a>
|
|
147
|
+
|
|
148
|
+
<ol>
|
|
149
|
+
|
|
150
|
+
<li><a href="./despegar.html#variables">Variables</a></li>
|
|
151
|
+
|
|
152
|
+
</ol>
|
|
153
|
+
|
|
154
|
+
</li>
|
|
155
|
+
|
|
156
|
+
</ol>
|
|
157
|
+
</nav>
|
|
158
|
+
</aside>
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
<hr>
|
|
163
|
+
|
|
164
|
+
<article>
|
|
165
|
+
<a name="navs"></a><h2>Navs</h2>
|
|
166
|
+
<p>Barras de navegación.
|
|
167
|
+
|
|
168
|
+
</p>
|
|
169
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
170
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
171
|
+
<div class="nav-demo-1">
|
|
172
|
+
<ul>
|
|
173
|
+
<li>
|
|
174
|
+
<a href="#">Hoteles</a>
|
|
175
|
+
</li>
|
|
176
|
+
<li>
|
|
177
|
+
<a href="#">Vuelos</a>
|
|
178
|
+
</li>
|
|
179
|
+
<li>
|
|
180
|
+
<a href="#">Paquetes</a>
|
|
181
|
+
</li>
|
|
182
|
+
<li>
|
|
183
|
+
<a href="#">Cruceros</a>
|
|
184
|
+
</li>
|
|
185
|
+
<li class="last active">
|
|
186
|
+
<a href="#">Autos</a>
|
|
187
|
+
</li>
|
|
188
|
+
</ul>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
193
|
+
<div class="nav-demo-2">
|
|
194
|
+
<ul>
|
|
195
|
+
<li>
|
|
196
|
+
<a href="#">Hoteles</a>
|
|
197
|
+
</li>
|
|
198
|
+
<li class="active">
|
|
199
|
+
<a href="#">Vuelos</a>
|
|
200
|
+
</li>
|
|
201
|
+
<li>
|
|
202
|
+
<a href="#">Paquetes</a>
|
|
203
|
+
</li>
|
|
204
|
+
<li>
|
|
205
|
+
<a href="#">Cruceros</a>
|
|
206
|
+
</li>
|
|
207
|
+
<li class="last">
|
|
208
|
+
<a href="#">Autos</a>
|
|
209
|
+
</li>
|
|
210
|
+
</ul>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<a name="html"></a><h3>HTML</h3>
|
|
214
|
+
<pre><code class="lang-html"><div class="nav">
|
|
215
|
+
<ul>
|
|
216
|
+
<li>
|
|
217
|
+
<a href="#">Item</a>
|
|
218
|
+
</li>
|
|
219
|
+
<li class="active">
|
|
220
|
+
<a href="#">Item</a>
|
|
221
|
+
</li>
|
|
222
|
+
<li class="last">
|
|
223
|
+
<a href="#">Item</a>
|
|
224
|
+
</li>
|
|
225
|
+
</ul>
|
|
226
|
+
</div></code></pre>
|
|
227
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
228
|
+
<p>Importación:
|
|
229
|
+
|
|
230
|
+
</p>
|
|
231
|
+
<pre><code class="lang-css">@import "picasso/components/navs";</code></pre>
|
|
232
|
+
<p>Mixin con los parámetros por defecto:
|
|
233
|
+
|
|
234
|
+
</p>
|
|
235
|
+
<pre><code class="lang-css">.nav{
|
|
236
|
+
@include nav();
|
|
237
|
+
}</code></pre>
|
|
238
|
+
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, background, borde, sombra y float:
|
|
239
|
+
|
|
240
|
+
</p>
|
|
241
|
+
<pre><code class="lang-css">.nav{
|
|
242
|
+
@include nav(435px, 30px, #1164BF, #083C78, black, right);
|
|
243
|
+
}</code></pre>
|
|
244
|
+
<a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
|
|
245
|
+
<p>Variable y valor por defecto:
|
|
246
|
+
|
|
247
|
+
</p>
|
|
248
|
+
<pre><code class="lang-css">$nav-ie-fallback: "sprites" !default;</code></pre>
|
|
249
|
+
<p>Estrategias soportadas:
|
|
250
|
+
|
|
251
|
+
</p>
|
|
252
|
+
<ul>
|
|
253
|
+
<li><code>sprites</code></li>
|
|
254
|
+
<li><code>GD</code></li>
|
|
255
|
+
</ul>
|
|
256
|
+
<blockquote>
|
|
257
|
+
<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>
|
|
258
|
+
</blockquote>
|
|
259
|
+
|
|
260
|
+
</article>
|
|
261
|
+
|
|
262
|
+
|
|
263
|
+
<footer>
|
|
264
|
+
</footer>
|
|
265
|
+
|
|
266
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
267
|
+
<script src="./js/docs.js"></script>
|
|
268
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
269
|
+
|
|
270
|
+
</body>
|
|
271
|
+
|
|
272
|
+
</html>
|