picasso 0.0.3 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- 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/.gitignore
CHANGED
|
@@ -0,0 +1,267 @@
|
|
|
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="accordions"></a><h2>Accordions</h2>
|
|
166
|
+
<p>Para mostrar información en espacios reducidos.
|
|
167
|
+
|
|
168
|
+
</p>
|
|
169
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
170
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
171
|
+
<div class="accordion-demo-1">
|
|
172
|
+
|
|
173
|
+
<div class="accordion-section">
|
|
174
|
+
<div class="accordion-header accordion-header-open">
|
|
175
|
+
<a name="precio"></a><a name="precio"></a><h4>Precio</h4>
|
|
176
|
+
<span class="arrow"></span>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="accordion-content">
|
|
179
|
+
<span>aca van los filtros de precio</span>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="accordion-section">
|
|
183
|
+
<div class="accordion-header accordion-header-open">
|
|
184
|
+
<a name="paradas"></a><a name="paradas"></a><h4>Paradas</h4>
|
|
185
|
+
<span class="arrow"></span>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="accordion-content">
|
|
188
|
+
<span>aca van los filtros de paradas</span>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<p></div>
|
|
193
|
+
|
|
194
|
+
</p>
|
|
195
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
196
|
+
<div class="accordion-demo-2">
|
|
197
|
+
|
|
198
|
+
<div class="accordion-section">
|
|
199
|
+
<div class="accordion-header accordion-header-open">
|
|
200
|
+
<h4>Precio</h4>
|
|
201
|
+
<span class="arrow"></span>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="accordion-content">
|
|
204
|
+
<span>aca van los filtros de precio</span>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="accordion-section">
|
|
208
|
+
<div class="accordion-header accordion-header-open">
|
|
209
|
+
<h4>Paradas</h4>
|
|
210
|
+
<span class="arrow"></span>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="accordion-content">
|
|
213
|
+
<span>aca van los filtros de paradas</span>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<p></div>
|
|
218
|
+
|
|
219
|
+
</p>
|
|
220
|
+
<a name="html"></a><h3>HTML</h3>
|
|
221
|
+
<pre><code class="lang-html"><div class="accordion">
|
|
222
|
+
<div class="accordion-section">
|
|
223
|
+
<div class="accordion-header accordion-header-open">
|
|
224
|
+
<h4>Precio</h4>
|
|
225
|
+
<span class="arrow"></span>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="accordion-content">
|
|
228
|
+
<span>aca van los filtros de precio</span>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div></code></pre>
|
|
232
|
+
<blockquote>
|
|
233
|
+
<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.
|
|
234
|
+
|
|
235
|
+
</p>
|
|
236
|
+
</blockquote>
|
|
237
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
238
|
+
<p>Importación:
|
|
239
|
+
|
|
240
|
+
</p>
|
|
241
|
+
<pre><code class="lang-css">@import "picasso/components/accordions";</code></pre>
|
|
242
|
+
<p>Mixin con los parámetros por defecto:
|
|
243
|
+
|
|
244
|
+
</p>
|
|
245
|
+
<pre><code class="lang-css">.accordion {
|
|
246
|
+
@include accordion();
|
|
247
|
+
}</code></pre>
|
|
248
|
+
<p>Mixin con parámetros personalizados. Disponibles: alto, background del título, color del título:
|
|
249
|
+
|
|
250
|
+
</p>
|
|
251
|
+
<pre><code class="lang-css">.accordion {
|
|
252
|
+
@include accordion(40px, #CCCCCC, #000000);
|
|
253
|
+
}</code></pre>
|
|
254
|
+
|
|
255
|
+
</article>
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
<footer>
|
|
259
|
+
</footer>
|
|
260
|
+
|
|
261
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
262
|
+
<script src="./js/docs.js"></script>
|
|
263
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
264
|
+
|
|
265
|
+
</body>
|
|
266
|
+
|
|
267
|
+
</html>
|
data/docs/all.html
CHANGED
|
@@ -52,6 +52,8 @@
|
|
|
52
52
|
|
|
53
53
|
<ol>
|
|
54
54
|
|
|
55
|
+
<li><a href="./changelog.html#010">0.1.0</a></li>
|
|
56
|
+
|
|
55
57
|
<li><a href="./changelog.html#003">0.0.3</a></li>
|
|
56
58
|
|
|
57
59
|
<li><a href="./changelog.html#002">0.0.2</a></li>
|
|
@@ -67,15 +69,29 @@
|
|
|
67
69
|
|
|
68
70
|
<ol>
|
|
69
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
|
+
|
|
70
78
|
</ol>
|
|
71
79
|
|
|
72
80
|
</li>
|
|
73
81
|
|
|
74
82
|
<li>
|
|
75
|
-
<a href="./
|
|
83
|
+
<a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&ntilde;adidos</a>
|
|
76
84
|
|
|
77
85
|
<ol>
|
|
78
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
|
+
|
|
79
95
|
</ol>
|
|
80
96
|
|
|
81
97
|
</li>
|
|
@@ -85,15 +101,27 @@
|
|
|
85
101
|
|
|
86
102
|
<ol>
|
|
87
103
|
|
|
104
|
+
<li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
|
|
105
|
+
|
|
88
106
|
<li><a href="./buttons.html#buttons">Buttons</a></li>
|
|
89
107
|
|
|
90
108
|
<li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
|
|
91
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
|
+
|
|
92
116
|
<li><a href="./arrows.html#arrows">Arrows</a></li>
|
|
93
117
|
|
|
118
|
+
<li><a href="./pagination.html#pagination">Pagination</a></li>
|
|
119
|
+
|
|
94
120
|
<li><a href="./bubbles.html#bubbles">Bubbles</a></li>
|
|
95
121
|
|
|
96
|
-
<li><a href="./
|
|
122
|
+
<li><a href="./popups.html#popups">Popups</a></li>
|
|
123
|
+
|
|
124
|
+
<li><a href="./accordions.html#accordions">Accordions</a></li>
|
|
97
125
|
|
|
98
126
|
</ol>
|
|
99
127
|
|
|
@@ -106,6 +134,10 @@
|
|
|
106
134
|
|
|
107
135
|
<li><a href="./utils.html#clearfix">Clearfix</a></li>
|
|
108
136
|
|
|
137
|
+
<li><a href="./utils.html#ie">IE</a></li>
|
|
138
|
+
|
|
139
|
+
<li><a href="./utils.html#sprite">Sprite</a></li>
|
|
140
|
+
|
|
109
141
|
</ol>
|
|
110
142
|
|
|
111
143
|
</li>
|
|
@@ -139,11 +171,12 @@
|
|
|
139
171
|
|
|
140
172
|
</p>
|
|
141
173
|
<pre><code class="lang-bash">$ (sudo) gem install picasso</code></pre>
|
|
142
|
-
<p>En el config.rb agregar:
|
|
174
|
+
<p>En el <code>config.rb</code> agregar:
|
|
143
175
|
|
|
144
176
|
</p>
|
|
145
177
|
<pre><code class="lang-bash">require 'picasso'
|
|
146
|
-
|
|
178
|
+
require 'magick'
|
|
179
|
+
gem 'picasso', '~> 0.1.0'</code></pre>
|
|
147
180
|
<p>Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
|
|
148
181
|
|
|
149
182
|
</p>
|
|
@@ -160,6 +193,46 @@ gem 'picasso', '~> 0.0.3'</code></pre>
|
|
|
160
193
|
<pre><code class="lang-bash">$ (sudo) gem update picasso</code></pre>
|
|
161
194
|
|
|
162
195
|
<a name="changelog"></a><h1>Changelog</h1>
|
|
196
|
+
<a name="010"></a><h2>0.1.0</h2>
|
|
197
|
+
<ul>
|
|
198
|
+
<li>Agregados nuevos componentes:</li>
|
|
199
|
+
<li><ul>
|
|
200
|
+
<li>Popups</li>
|
|
201
|
+
</ul>
|
|
202
|
+
</li>
|
|
203
|
+
<li><ul>
|
|
204
|
+
<li>Pagination</li>
|
|
205
|
+
</ul>
|
|
206
|
+
</li>
|
|
207
|
+
<li><ul>
|
|
208
|
+
<li>Navs</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</li>
|
|
211
|
+
<li><ul>
|
|
212
|
+
<li>List Grids</li>
|
|
213
|
+
</ul>
|
|
214
|
+
</li>
|
|
215
|
+
<li><ul>
|
|
216
|
+
<li>Inputs</li>
|
|
217
|
+
</ul>
|
|
218
|
+
</li>
|
|
219
|
+
<li><ul>
|
|
220
|
+
<li>Accordions</li>
|
|
221
|
+
</ul>
|
|
222
|
+
</li>
|
|
223
|
+
<li>Agregadas nuevas utilidades:</li>
|
|
224
|
+
<li><ul>
|
|
225
|
+
<li>Sprite: <code>insert-in-sprite()</code></li>
|
|
226
|
+
</ul>
|
|
227
|
+
</li>
|
|
228
|
+
<li><ul>
|
|
229
|
+
<li>IE: <code>after()</code> / <code>before()</code></li>
|
|
230
|
+
</ul>
|
|
231
|
+
</li>
|
|
232
|
+
<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>
|
|
233
|
+
<li>Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.</li>
|
|
234
|
+
<li>Reorganizaci&ooacute;n interna de la documentaci&ooacute;n.</li>
|
|
235
|
+
</ul>
|
|
163
236
|
<a name="003"></a><h2>0.0.3</h2>
|
|
164
237
|
<ul>
|
|
165
238
|
<li>Agregados estilos de fallback para Internet Explorer.</li>
|
|
@@ -179,30 +252,119 @@ gem 'picasso', '~> 0.0.3'</code></pre>
|
|
|
179
252
|
</ul>
|
|
180
253
|
|
|
181
254
|
<a name="todo"></a><h1>Todo</h1>
|
|
182
|
-
<
|
|
255
|
+
<a name="componentes"></a><h2>Componentes</h2>
|
|
256
|
+
<ul>
|
|
257
|
+
<li>Tabs;</li>
|
|
258
|
+
<li>Tooltips;</li>
|
|
259
|
+
<li>Breadcrumbs;</li>
|
|
260
|
+
</ul>
|
|
261
|
+
<a name="utilidades"></a><h2>Utilidades</h2>
|
|
262
|
+
<ul>
|
|
263
|
+
<li>Grillas responsivas;</li>
|
|
264
|
+
<li>Tipografias con pictogramas comunes;</li>
|
|
265
|
+
</ul>
|
|
266
|
+
<a name="otros"></a><h2>Otros</h2>
|
|
267
|
+
<ul>
|
|
268
|
+
<li>Creación de sprites: Implementar API para poder detectar si un archivo ya existe y obtener el path de imágenes especificado en el config.rb.</li>
|
|
269
|
+
</ul>
|
|
270
|
+
|
|
271
|
+
<a name="mejoras-antildeadidos"></a><h1>Mejoras / Añadidos</h1>
|
|
272
|
+
<a name="utilizar-el-coacutedigo-fuente"></a><h2>Utilizar el código fuente</h2>
|
|
273
|
+
<ul>
|
|
274
|
+
<li>Clonar el repositorio de Picasso:</li>
|
|
275
|
+
</ul>
|
|
276
|
+
<pre><code class="lang-bash">$ git clone git@gitorious.despegar.it:picasso/picasso.git</code></pre>
|
|
277
|
+
<ul>
|
|
278
|
+
<li>Pasarse al branch <code>development</code>:</li>
|
|
279
|
+
</ul>
|
|
280
|
+
<pre><code class="lang-bash">$ cd picasso
|
|
281
|
+
$ git checkout --track origin/development</code></pre>
|
|
282
|
+
<ul>
|
|
283
|
+
<li>Verificar que se esta parado en dicho branch:</li>
|
|
284
|
+
</ul>
|
|
285
|
+
<pre><code class="lang-bash">$ git branch</code></pre>
|
|
286
|
+
<a name="pruebas-locales-de-nuevos-antildeadidos-cambios"></a><h2>Pruebas locales de nuevos añadidos/cambios:</h2>
|
|
287
|
+
<ul>
|
|
288
|
+
<li>En la carpeta del proyecto donde se encuentra el archivo <code>config.rb</code>, crear una carpeta <code>extensions</code>.</li>
|
|
289
|
+
<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>
|
|
290
|
+
<li>En caso que el proyecto este configurado para usar Picasso, comentar dichas lineas en el <code>config.rb</code>.</li>
|
|
291
|
+
<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>
|
|
292
|
+
</ul>
|
|
293
|
+
<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.
|
|
294
|
+
En caso de agregar alguna funcionalidad nueva, tomar de ejemplo algún componente ya existente para entender su lógica interna.
|
|
183
295
|
|
|
184
|
-
|
|
296
|
+
</p>
|
|
297
|
+
<a name="subidas-en-el-repositorio"></a><h2>Subidas en el repositorio</h2>
|
|
298
|
+
<ul>
|
|
299
|
+
<li>Una vez realizados los cambios o añadidos, subirlos al repositorio:</li>
|
|
300
|
+
</ul>
|
|
301
|
+
<pre><code class="lang-bash">$ git status
|
|
302
|
+
$ git add <archivos a subir>;
|
|
303
|
+
$ git commit -m "<un mensaje descriptivo del commit>"
|
|
304
|
+
$ git push</code></pre>
|
|
305
|
+
<blockquote>
|
|
306
|
+
<p><strong>Nota</strong>: Toda mejora o cambio debe tener su documentación pertinente, caso contrario, no se incorporarán en Picasso.
|
|
307
|
+
|
|
308
|
+
|
|
309
|
+
</p>
|
|
310
|
+
</blockquote>
|
|
311
|
+
<a name="generar-la-documentacioacuten"></a><h2>Generar la documentación</h2>
|
|
185
312
|
<ul>
|
|
186
313
|
<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>
|
|
187
314
|
</li>
|
|
188
315
|
<li><p>Abrir una terminal e instalar <a href="http://beautifuldocs.com/">Beautiful docs</a>:</p>
|
|
189
316
|
</li>
|
|
190
317
|
</ul>
|
|
191
|
-
<pre><code class="lang-bash">$ npm install beautiful-docs -g</code></pre>
|
|
318
|
+
<pre><code class="lang-bash">$ npm install https://github.com/dzignus/beautiful-docs/tarball/master -g</code></pre>
|
|
192
319
|
<ul>
|
|
193
|
-
<li
|
|
194
|
-
<pre><code> Nota: Cada `.md` es un archivo de texto plano escrito con la sintaxis [markdown](http://daringfireball.net/projects/markdown/basics).</code></pre>
|
|
195
|
-
</li>
|
|
196
|
-
<li><p>Pararse sobre la carpeta raiz del proyecto y ejecutar:</p>
|
|
197
|
-
</li>
|
|
320
|
+
<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>
|
|
198
321
|
</ul>
|
|
199
|
-
<
|
|
322
|
+
<blockquote>
|
|
323
|
+
<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>.
|
|
324
|
+
|
|
325
|
+
</p>
|
|
326
|
+
</blockquote>
|
|
327
|
+
<ul>
|
|
328
|
+
<li>Pararse sobre la carpeta raiz del proyecto y ejecutar:</li>
|
|
329
|
+
</ul>
|
|
330
|
+
<pre><code class="lang-bash">$ bfdocs --base-url='.' --templates-dir='docs/build/templates/' docs/build/manifest.json docs</code></pre>
|
|
200
331
|
<ul>
|
|
201
332
|
<li>Revisar que la documentación se haya generado correctamente abriendo el archivo <code>.html</code> pertinente.</li>
|
|
202
333
|
</ul>
|
|
203
334
|
|
|
204
335
|
<hr>
|
|
205
336
|
<a name="components"></a><h1>Components</h1>
|
|
337
|
+
<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.
|
|
338
|
+
|
|
339
|
+
</p>
|
|
340
|
+
<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).
|
|
341
|
+
|
|
342
|
+
</p>
|
|
343
|
+
<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>:
|
|
344
|
+
|
|
345
|
+
</p>
|
|
346
|
+
<pre><code class="lang-html"><!DOCTYPE html>
|
|
347
|
+
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
348
|
+
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
349
|
+
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
350
|
+
<!--[if gt IE 9]><!--> <html> <!--<![endif]--></code></pre>
|
|
351
|
+
<a name="estrategias-y-estilos-de-fallback-para-ie-en-componentes"></a><h3>Estrategias y estilos de fallback para IE en componentes</h3>
|
|
352
|
+
<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:
|
|
353
|
+
|
|
354
|
+
</p>
|
|
355
|
+
<pre><code class="lang-css">$<componente>-ie-fallback: "sprites"|"GD"</code></pre>
|
|
356
|
+
<p>Los valores admitidos son <code>sprites</code> y <code>GD</code> (Graceful Degradation).
|
|
357
|
+
|
|
358
|
+
</p>
|
|
359
|
+
<a name="estrategiacutea-de-sprites"></a><h4>Estrategía de sprites</h4>
|
|
360
|
+
<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.
|
|
361
|
+
|
|
362
|
+
</p>
|
|
363
|
+
<a name="estrategiacutea-gd"></a><h4>Estrategía GD</h4>
|
|
364
|
+
<p>Por cada componente, Picasso seteará estilos minimos, soportados por Internet Explorer, para que el componente siga siendo usable y funcional.
|
|
365
|
+
|
|
366
|
+
</p>
|
|
367
|
+
<a name="componentes-disponibles"></a><h2>Componentes disponibles</h2>
|
|
206
368
|
|
|
207
369
|
<a name="buttons"></a><h2>Buttons</h2>
|
|
208
370
|
<p>Ideales para situaciones en que se necesita un call-to-action.
|
|
@@ -234,17 +396,34 @@ gem 'picasso', '~> 0.0.3'</code></pre>
|
|
|
234
396
|
<span>Comprar</span>
|
|
235
397
|
</a></code></pre>
|
|
236
398
|
<a name="sass"></a><a name="sass"></a><h3>Sass</h3>
|
|
237
|
-
<
|
|
399
|
+
<p>Importación:
|
|
238
400
|
|
|
239
|
-
|
|
240
|
-
|
|
401
|
+
</p>
|
|
402
|
+
<pre><code class="lang-css">@import "picasso/components/buttons";</code></pre>
|
|
403
|
+
<p>Mixin con los parámetros por defecto:
|
|
404
|
+
|
|
405
|
+
</p>
|
|
406
|
+
<pre><code class="lang-css">.button{
|
|
241
407
|
@include button();
|
|
242
|
-
}
|
|
408
|
+
}</code></pre>
|
|
409
|
+
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, background y color:
|
|
243
410
|
|
|
244
|
-
|
|
245
|
-
|
|
411
|
+
</p>
|
|
412
|
+
<pre><code class="lang-css">.button{
|
|
246
413
|
@include button(100px, 30px, red, white);
|
|
247
414
|
}</code></pre>
|
|
415
|
+
<a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
|
|
416
|
+
<p>Variable y valor por defecto:
|
|
417
|
+
|
|
418
|
+
</p>
|
|
419
|
+
<pre><code class="lang-css">$button-ie-fallback: "sprites" !default;</code></pre>
|
|
420
|
+
<p>Estrategias soportadas:
|
|
421
|
+
|
|
422
|
+
</p>
|
|
423
|
+
<ul>
|
|
424
|
+
<li><code>sprites</code></li>
|
|
425
|
+
<li><code>GD</code></li>
|
|
426
|
+
</ul>
|
|
248
427
|
<a name="mini-buttons"></a><h2>Mini-Buttons</h2>
|
|
249
428
|
<p>Perfectos para acciones simples que influyen en la interfaz.
|
|
250
429
|
|
|
@@ -277,17 +456,355 @@ gem 'picasso', '~> 0.0.3'</code></pre>
|
|
|
277
456
|
<span>Comprar</span>
|
|
278
457
|
</a></code></pre>
|
|
279
458
|
<h3>Sass</h3>
|
|
280
|
-
<
|
|
459
|
+
<p>Importación:
|
|
281
460
|
|
|
282
|
-
|
|
283
|
-
|
|
461
|
+
</p>
|
|
462
|
+
<pre><code class="lang-css">@import "picasso/components/buttons";</code></pre>
|
|
463
|
+
<p>Mixin con los parámetros por defecto:
|
|
464
|
+
|
|
465
|
+
</p>
|
|
466
|
+
<pre><code class="lang-css">.mini-button{
|
|
284
467
|
@include mini-button();
|
|
285
|
-
}
|
|
468
|
+
}</code></pre>
|
|
469
|
+
<p>Mixin con parámetros personalizados. Disponibles: background y color:
|
|
286
470
|
|
|
287
|
-
|
|
288
|
-
|
|
471
|
+
</p>
|
|
472
|
+
<pre><code class="lang-css">.mini-button{
|
|
289
473
|
@include button(grey, blue);
|
|
290
474
|
}</code></pre>
|
|
475
|
+
<h3>Fallback para IE</h3>
|
|
476
|
+
<p>Variable y valor por defecto:
|
|
477
|
+
|
|
478
|
+
</p>
|
|
479
|
+
<pre><code class="lang-css">$mini-button-ie-fallback: "sprites" !default;</code></pre>
|
|
480
|
+
<p>Estrategias soportadas:
|
|
481
|
+
|
|
482
|
+
</p>
|
|
483
|
+
<ul>
|
|
484
|
+
<li><code>sprites</code></li>
|
|
485
|
+
<li><code>GD</code></li>
|
|
486
|
+
</ul>
|
|
487
|
+
|
|
488
|
+
<a name="inputs"></a><h2>Inputs</h2>
|
|
489
|
+
<p>Estilos inputs de textos y selects.
|
|
490
|
+
|
|
491
|
+
</p>
|
|
492
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
493
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
494
|
+
<input type="text" class="text-input-demo-1">
|
|
495
|
+
|
|
496
|
+
<p>
|
|
497
|
+
<select class="select-demo-1">
|
|
498
|
+
<option value="1">1</option>
|
|
499
|
+
<option value="2">2</option>
|
|
500
|
+
<option value="3">3</option>
|
|
501
|
+
</select>
|
|
502
|
+
</p>
|
|
503
|
+
|
|
504
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
505
|
+
<input type="text" class="text-input-demo-2">
|
|
506
|
+
|
|
507
|
+
<p>
|
|
508
|
+
<select class="select-demo-2">
|
|
509
|
+
<option value="1">1</option>
|
|
510
|
+
<option value="2">2</option>
|
|
511
|
+
<option value="3">3</option>
|
|
512
|
+
</select>
|
|
513
|
+
</p>
|
|
514
|
+
|
|
515
|
+
<a name="html"></a><h3>HTML</h3>
|
|
516
|
+
<p><strong>Text inputs</strong>
|
|
517
|
+
|
|
518
|
+
</p>
|
|
519
|
+
<pre><code class="lang-html"><input type="text" class="text-input"></code></pre>
|
|
520
|
+
<p><strong>Selects</strong>
|
|
521
|
+
|
|
522
|
+
</p>
|
|
523
|
+
<pre><code class="lang-html"><select class="select">
|
|
524
|
+
<option value="1">1</option>
|
|
525
|
+
<option value="2">2</option>
|
|
526
|
+
<option value="3">3</option>
|
|
527
|
+
</select></code></pre>
|
|
528
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
529
|
+
<p>Importación:
|
|
530
|
+
|
|
531
|
+
</p>
|
|
532
|
+
<pre><code class="lang-css">@import "picasso/components/inputs";</code></pre>
|
|
533
|
+
<p>Mixin con los parámetros por defecto:
|
|
534
|
+
|
|
535
|
+
</p>
|
|
536
|
+
<pre><code class="lang-css">.text-input {
|
|
537
|
+
@include input();
|
|
538
|
+
}</code></pre>
|
|
539
|
+
<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:
|
|
540
|
+
|
|
541
|
+
</p>
|
|
542
|
+
<pre><code class="lang-css">.text-input {
|
|
543
|
+
@include input(100px, 20px, #DDD, blue, 5px, black, 14px);
|
|
544
|
+
}</code></pre>
|
|
545
|
+
<blockquote>
|
|
546
|
+
<p><strong>Nota</strong>: El color del borde debe ser en hexadecimal.
|
|
547
|
+
</p>
|
|
548
|
+
</blockquote>
|
|
549
|
+
|
|
550
|
+
<a name="navs"></a><h2>Navs</h2>
|
|
551
|
+
<p>Barras de navegación.
|
|
552
|
+
|
|
553
|
+
</p>
|
|
554
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
555
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
556
|
+
<div class="nav-demo-1">
|
|
557
|
+
<ul>
|
|
558
|
+
<li>
|
|
559
|
+
<a href="#">Hoteles</a>
|
|
560
|
+
</li>
|
|
561
|
+
<li>
|
|
562
|
+
<a href="#">Vuelos</a>
|
|
563
|
+
</li>
|
|
564
|
+
<li>
|
|
565
|
+
<a href="#">Paquetes</a>
|
|
566
|
+
</li>
|
|
567
|
+
<li>
|
|
568
|
+
<a href="#">Cruceros</a>
|
|
569
|
+
</li>
|
|
570
|
+
<li class="last active">
|
|
571
|
+
<a href="#">Autos</a>
|
|
572
|
+
</li>
|
|
573
|
+
</ul>
|
|
574
|
+
</div>
|
|
575
|
+
|
|
576
|
+
|
|
577
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
578
|
+
<div class="nav-demo-2">
|
|
579
|
+
<ul>
|
|
580
|
+
<li>
|
|
581
|
+
<a href="#">Hoteles</a>
|
|
582
|
+
</li>
|
|
583
|
+
<li class="active">
|
|
584
|
+
<a href="#">Vuelos</a>
|
|
585
|
+
</li>
|
|
586
|
+
<li>
|
|
587
|
+
<a href="#">Paquetes</a>
|
|
588
|
+
</li>
|
|
589
|
+
<li>
|
|
590
|
+
<a href="#">Cruceros</a>
|
|
591
|
+
</li>
|
|
592
|
+
<li class="last">
|
|
593
|
+
<a href="#">Autos</a>
|
|
594
|
+
</li>
|
|
595
|
+
</ul>
|
|
596
|
+
</div>
|
|
597
|
+
|
|
598
|
+
<a name="html"></a><h3>HTML</h3>
|
|
599
|
+
<pre><code class="lang-html"><div class="nav">
|
|
600
|
+
<ul>
|
|
601
|
+
<li>
|
|
602
|
+
<a href="#">Item</a>
|
|
603
|
+
</li>
|
|
604
|
+
<li class="active">
|
|
605
|
+
<a href="#">Item</a>
|
|
606
|
+
</li>
|
|
607
|
+
<li class="last">
|
|
608
|
+
<a href="#">Item</a>
|
|
609
|
+
</li>
|
|
610
|
+
</ul>
|
|
611
|
+
</div></code></pre>
|
|
612
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
613
|
+
<p>Importación:
|
|
614
|
+
|
|
615
|
+
</p>
|
|
616
|
+
<pre><code class="lang-css">@import "picasso/components/navs";</code></pre>
|
|
617
|
+
<p>Mixin con los parámetros por defecto:
|
|
618
|
+
|
|
619
|
+
</p>
|
|
620
|
+
<pre><code class="lang-css">.nav{
|
|
621
|
+
@include nav();
|
|
622
|
+
}</code></pre>
|
|
623
|
+
<p>Mixin con parámetros personalizados. Disponibles: ancho, alto, background, borde, sombra y float:
|
|
624
|
+
|
|
625
|
+
</p>
|
|
626
|
+
<pre><code class="lang-css">.nav{
|
|
627
|
+
@include nav(435px, 30px, #1164BF, #083C78, black, right);
|
|
628
|
+
}</code></pre>
|
|
629
|
+
<a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
|
|
630
|
+
<p>Variable y valor por defecto:
|
|
631
|
+
|
|
632
|
+
</p>
|
|
633
|
+
<pre><code class="lang-css">$nav-ie-fallback: "sprites" !default;</code></pre>
|
|
634
|
+
<p>Estrategias soportadas:
|
|
635
|
+
|
|
636
|
+
</p>
|
|
637
|
+
<ul>
|
|
638
|
+
<li><code>sprites</code></li>
|
|
639
|
+
<li><code>GD</code></li>
|
|
640
|
+
</ul>
|
|
641
|
+
<blockquote>
|
|
642
|
+
<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>
|
|
643
|
+
</blockquote>
|
|
644
|
+
|
|
645
|
+
<a name="list-grid"></a><h2>List Grid</h2>
|
|
646
|
+
<p>Para mostrar datos en una grilla utilizando listas.
|
|
647
|
+
|
|
648
|
+
</p>
|
|
649
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
650
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
651
|
+
<p>
|
|
652
|
+
<div class="list-grid-demo-1">
|
|
653
|
+
<ul class="first first-column">
|
|
654
|
+
<li class="first odd"></li>
|
|
655
|
+
<li>30 min</li>
|
|
656
|
+
<li class="odd">60 min</li>
|
|
657
|
+
<li>90 min</li>
|
|
658
|
+
</ul>
|
|
659
|
+
<ul>
|
|
660
|
+
<li class="first odd">Vuelo DL - 110</li>
|
|
661
|
+
<li class="hover-cell">0%</li>
|
|
662
|
+
<li class="odd hover-cell">10%</li>
|
|
663
|
+
<li class="hover-cell">0%</li>
|
|
664
|
+
</ul>
|
|
665
|
+
<ul>
|
|
666
|
+
<li class="first odd">Vuelo DD - 112</li>
|
|
667
|
+
<li class="hover-cell">10%</li>
|
|
668
|
+
<li class="odd hover-cell">10%</li>
|
|
669
|
+
<li class="hover-cell">0%</li>
|
|
670
|
+
</ul>
|
|
671
|
+
<ul>
|
|
672
|
+
<li class="first odd">Vuelo DL - 50</li>
|
|
673
|
+
<li class="hover-cell">30%</li>
|
|
674
|
+
<li class="odd hover-cell">20%</li>
|
|
675
|
+
<li class="hover-cell">5%</li>
|
|
676
|
+
</ul>
|
|
677
|
+
</div>
|
|
678
|
+
</p>
|
|
679
|
+
|
|
680
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
681
|
+
<p>
|
|
682
|
+
<div class="list-grid-demo-2">
|
|
683
|
+
<ul>
|
|
684
|
+
<li class="hover-cell">Vuelo 1 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
685
|
+
<li class="hover-cell">Vuelo 2 - Sale <b>18:00</b> LLega <b>22:00</b> 2 Escala</li>
|
|
686
|
+
<li class="hover-cell">Vuelo 3 - Sale <b>18:00</b> LLega <b>20:00</b> Directo</li>
|
|
687
|
+
<li class="hover-cell">Vuelo 4 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
688
|
+
<li class="hover-cell">Vuelo 5 - Sale <b>18:00</b> LLega <b>20:30</b> Directo</li>
|
|
689
|
+
</ul>
|
|
690
|
+
</div>
|
|
691
|
+
</p>
|
|
692
|
+
|
|
693
|
+
<a name="ejemplo-3"></a><h4>Ejemplo 3</h4>
|
|
694
|
+
<p>
|
|
695
|
+
<div class="list-grid-demo-3">
|
|
696
|
+
<ul class="first">
|
|
697
|
+
<li class="first"></li>
|
|
698
|
+
<li class="even">30 min</li>
|
|
699
|
+
<li>60 min</li>
|
|
700
|
+
<li class="even">90 min</li>
|
|
701
|
+
</ul>
|
|
702
|
+
<ul>
|
|
703
|
+
<li class="first">Vuelo DL - 110</li>
|
|
704
|
+
<li class="even">0%</li>
|
|
705
|
+
<li>10%</li>
|
|
706
|
+
<li class="even">0%</li>
|
|
707
|
+
</ul>
|
|
708
|
+
</div>
|
|
709
|
+
</p>
|
|
710
|
+
|
|
711
|
+
<a name="ejemplo-4"></a><h4>Ejemplo 4</h4>
|
|
712
|
+
<p>
|
|
713
|
+
<div class="list-grid-demo-4">
|
|
714
|
+
<ul class="first">
|
|
715
|
+
<li class="first"></li>
|
|
716
|
+
<li class="even">30 min</li>
|
|
717
|
+
<li>60 min</li>
|
|
718
|
+
<li class="even">90 min</li>
|
|
719
|
+
</ul>
|
|
720
|
+
<ul>
|
|
721
|
+
<li class="first">Vuelo DL - 110</li>
|
|
722
|
+
<li class="hover-cell even">0%</li>
|
|
723
|
+
<li class="hover-cell">10%</li>
|
|
724
|
+
<li class="hover-cell even">0%</li>
|
|
725
|
+
</ul>
|
|
726
|
+
<ul>
|
|
727
|
+
<li class="first">Vuelo DL - 25</li>
|
|
728
|
+
<li class="hover-cell even">10%</li>
|
|
729
|
+
<li></li>
|
|
730
|
+
<li class="hover-cell even">6%</li>
|
|
731
|
+
</ul>
|
|
732
|
+
</div>
|
|
733
|
+
</p>
|
|
734
|
+
|
|
735
|
+
<a name="html"></a><h3>HTML</h3>
|
|
736
|
+
<pre><code class="lang-html"><div class="list-grid">
|
|
737
|
+
<ul>
|
|
738
|
+
<li></li>
|
|
739
|
+
<li>Lorem</li>
|
|
740
|
+
<li>Ipsum</li>
|
|
741
|
+
<li>Dolorem</li>
|
|
742
|
+
</ul>
|
|
743
|
+
<ul>
|
|
744
|
+
<li>Donec</li>
|
|
745
|
+
<li class="hover-cell">Nullam</li>
|
|
746
|
+
<li class="hover-cell">Morbi</li>
|
|
747
|
+
<li class="hover-cell">Praesent</li>
|
|
748
|
+
</ul>
|
|
749
|
+
</div></code></pre>
|
|
750
|
+
<blockquote>
|
|
751
|
+
<p><strong>Nota</strong>: La clase "hover-cell" es utilizada para indicar cuando una celda reacciona ante el hover.
|
|
752
|
+
|
|
753
|
+
</p>
|
|
754
|
+
</blockquote>
|
|
755
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
756
|
+
<pre><code class="lang-css">@import "picasso/components/list-grids";
|
|
757
|
+
|
|
758
|
+
// Con valores por defecto
|
|
759
|
+
.text-input {
|
|
760
|
+
@include list-grid();
|
|
761
|
+
}
|
|
762
|
+
|
|
763
|
+
// Con todos los parametros: cell-width, cell-height, border-color, odd-color, even-color, hover-color
|
|
764
|
+
|
|
765
|
+
.text-input {
|
|
766
|
+
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
767
|
+
}</code></pre>
|
|
768
|
+
<p>Importación:
|
|
769
|
+
|
|
770
|
+
</p>
|
|
771
|
+
<pre><code class="lang-css">@import "picasso/components/list-grids";</code></pre>
|
|
772
|
+
<p>Mixin con los parámetros por defecto:
|
|
773
|
+
|
|
774
|
+
</p>
|
|
775
|
+
<pre><code class="lang-css">.list{
|
|
776
|
+
@include list-grid();
|
|
777
|
+
}</code></pre>
|
|
778
|
+
<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:
|
|
779
|
+
|
|
780
|
+
</p>
|
|
781
|
+
<pre><code class="lang-css">.list{
|
|
782
|
+
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
783
|
+
}</code></pre>
|
|
784
|
+
<blockquote>
|
|
785
|
+
<p><strong>Nota</strong>: El color para el estado hover debe ser en hexadecimal.
|
|
786
|
+
|
|
787
|
+
</p>
|
|
788
|
+
</blockquote>
|
|
789
|
+
<a name="compatibilidad-con-ie-lt-9"></a><h3>Compatibilidad con IE < 9</h3>
|
|
790
|
+
<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>
|
|
791
|
+
|
|
792
|
+
</p>
|
|
793
|
+
<a name="html-compatible-con-ie-lt-9"></a><h3>HTML compatible con IE < 9</h3>
|
|
794
|
+
<pre><code class="lang-html"><div class="list-grid">
|
|
795
|
+
<ul class="first">
|
|
796
|
+
<li class="first odd"></li>
|
|
797
|
+
<li class="even">30 min</li>
|
|
798
|
+
<li class="odd">60 min</li>
|
|
799
|
+
<li class="even">90 min</li>
|
|
800
|
+
</ul>
|
|
801
|
+
<ul>
|
|
802
|
+
<li class="first odd">Vuelo DL - 110</li>
|
|
803
|
+
<li class="even">0%</li>
|
|
804
|
+
<li class="odd">10%</li>
|
|
805
|
+
<li class="even">0%</li>
|
|
806
|
+
</ul>
|
|
807
|
+
</div></code></pre>
|
|
291
808
|
|
|
292
809
|
<a name="arrows"></a><h2>Arrows</h2>
|
|
293
810
|
<p>Excelentes para avisos importantes.
|
|
@@ -319,29 +836,136 @@ gem 'picasso', '~> 0.0.3'</code></pre>
|
|
|
319
836
|
Beneficio
|
|
320
837
|
</em></code></pre>
|
|
321
838
|
<a name="sass"></a><h3>Sass</h3>
|
|
322
|
-
<
|
|
839
|
+
<p>Importación:
|
|
323
840
|
|
|
324
|
-
|
|
325
|
-
|
|
841
|
+
</p>
|
|
842
|
+
<pre><code class="lang-css">@import "picasso/components/arrows";</code></pre>
|
|
843
|
+
<p>Mixin con los parámetros por defecto:
|
|
844
|
+
|
|
845
|
+
</p>
|
|
846
|
+
<pre><code class="lang-css">.arrow{
|
|
326
847
|
@include arrow();
|
|
327
|
-
}
|
|
848
|
+
}</code></pre>
|
|
849
|
+
<p>Mixin con parámetros personalizados. Disponibles: background y color:
|
|
328
850
|
|
|
329
|
-
|
|
330
|
-
|
|
851
|
+
</p>
|
|
852
|
+
<pre><code class="lang-css">.arrow{
|
|
331
853
|
@include arrow(green, white);
|
|
332
854
|
}</code></pre>
|
|
333
855
|
|
|
856
|
+
<a name="pagination"></a><h2>Pagination</h2>
|
|
857
|
+
<p>Implementación tradicional del paginador.
|
|
858
|
+
|
|
859
|
+
</p>
|
|
860
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
861
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
862
|
+
<div class="pagination-demo-1">
|
|
863
|
+
<ul>
|
|
864
|
+
<li class="prev">
|
|
865
|
+
<a href="#">Anterior</a>
|
|
866
|
+
</li>
|
|
867
|
+
<li>
|
|
868
|
+
<a href="#">1</a>
|
|
869
|
+
</li>
|
|
870
|
+
<li>
|
|
871
|
+
<a href="#">2</a>
|
|
872
|
+
</li>
|
|
873
|
+
<li class="active">
|
|
874
|
+
<a>3</a>
|
|
875
|
+
</li>
|
|
876
|
+
<li>
|
|
877
|
+
<a href="#">4</a>
|
|
878
|
+
</li>
|
|
879
|
+
<li class="disabled">
|
|
880
|
+
<a href="#">5</a>
|
|
881
|
+
</li>
|
|
882
|
+
<li class="dots">
|
|
883
|
+
<a>...</a>
|
|
884
|
+
</li>
|
|
885
|
+
<li>
|
|
886
|
+
<a href="#">12</a>
|
|
887
|
+
</li>
|
|
888
|
+
<li class="next">
|
|
889
|
+
<a href="#">Siguiente</a>
|
|
890
|
+
</li>
|
|
891
|
+
</ul>
|
|
892
|
+
</div>
|
|
893
|
+
|
|
894
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
895
|
+
<div class="pagination-demo-2">
|
|
896
|
+
<ul>
|
|
897
|
+
<li>
|
|
898
|
+
<a href="#">1</a>
|
|
899
|
+
</li>
|
|
900
|
+
<li>
|
|
901
|
+
<a href="#">2</a>
|
|
902
|
+
</li>
|
|
903
|
+
<li class="active">
|
|
904
|
+
<a>3</a>
|
|
905
|
+
</li>
|
|
906
|
+
<li>
|
|
907
|
+
<a href="#">4</a>
|
|
908
|
+
</li>
|
|
909
|
+
<li>
|
|
910
|
+
<a href="#">5</a>
|
|
911
|
+
</li>
|
|
912
|
+
</ul>
|
|
913
|
+
</div>
|
|
914
|
+
|
|
915
|
+
<a name="html"></a><h3>HTML</h3>
|
|
916
|
+
<pre><code class="lang-html"><div class="pagination">
|
|
917
|
+
<ul>
|
|
918
|
+
<li class="prev">
|
|
919
|
+
<a href="#">Anterior</a>
|
|
920
|
+
</li>
|
|
921
|
+
<li>
|
|
922
|
+
<a href="#">1</a>
|
|
923
|
+
</li>
|
|
924
|
+
<li class="active">
|
|
925
|
+
<a>2</a>
|
|
926
|
+
</li>
|
|
927
|
+
<li class="disabled">
|
|
928
|
+
<a href="#">3</a>
|
|
929
|
+
</li>
|
|
930
|
+
<li class="dots">
|
|
931
|
+
<a>...</a>
|
|
932
|
+
</li>
|
|
933
|
+
<li class="next">
|
|
934
|
+
<a href="#">Siguiente</a>
|
|
935
|
+
</li>
|
|
936
|
+
</ul>
|
|
937
|
+
</div></code></pre>
|
|
938
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
939
|
+
<p>Importación:
|
|
940
|
+
|
|
941
|
+
</p>
|
|
942
|
+
<pre><code class="lang-css">@import "picasso/components/pagination";</code></pre>
|
|
943
|
+
<p>Mixin con los parámetros por defecto:
|
|
944
|
+
|
|
945
|
+
</p>
|
|
946
|
+
<pre><code class="lang-css">.pagination{
|
|
947
|
+
@include pagination();
|
|
948
|
+
}</code></pre>
|
|
949
|
+
<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:
|
|
950
|
+
|
|
951
|
+
</p>
|
|
952
|
+
<pre><code class="lang-css">.pagination{
|
|
953
|
+
@include pagination(black, blue, white, red, 10px, yellow, green);
|
|
954
|
+
}</code></pre>
|
|
955
|
+
|
|
334
956
|
<a name="bubbles"></a><h2>Bubbles</h2>
|
|
335
|
-
<p>Ideales para
|
|
957
|
+
<p>Ideales para citar comentarios de clientes.
|
|
336
958
|
|
|
337
959
|
</p>
|
|
338
960
|
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
961
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
339
962
|
<div class="bubble-demo-1">
|
|
340
963
|
<blockquote>
|
|
341
964
|
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.
|
|
342
965
|
</blockquote>
|
|
343
966
|
</div>
|
|
344
967
|
|
|
968
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
345
969
|
<div class="bubble-demo-2">
|
|
346
970
|
<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>
|
|
347
971
|
<blockquote>
|
|
@@ -357,42 +981,263 @@ gem 'picasso', '~> 0.0.3'</code></pre>
|
|
|
357
981
|
</blockquote>
|
|
358
982
|
</div></code></pre>
|
|
359
983
|
<a name="sass"></a><h3>Sass</h3>
|
|
360
|
-
<
|
|
984
|
+
<p>Importación:
|
|
985
|
+
|
|
986
|
+
</p>
|
|
987
|
+
<pre><code class="lang-css">@import "picasso/components/bubbles";</code></pre>
|
|
988
|
+
<p>Mixin con los parámetros por defecto:
|
|
361
989
|
|
|
362
|
-
|
|
363
|
-
|
|
990
|
+
</p>
|
|
991
|
+
<pre><code class="lang-css">.bubble{
|
|
364
992
|
@include bubble();
|
|
365
|
-
}
|
|
993
|
+
}</code></pre>
|
|
994
|
+
<p>Mixin con parámetros personalizados. Disponibles: ancho, background, color, utilizar ellipsis, posición de la ellipsis:
|
|
366
995
|
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
@include bubble(200px, blue, white, true);
|
|
996
|
+
</p>
|
|
997
|
+
<pre><code class="lang-css">.bubble{
|
|
998
|
+
@include bubble(200px, blue, white, true, left);
|
|
370
999
|
}</code></pre>
|
|
371
1000
|
|
|
372
|
-
<a name="
|
|
373
|
-
<p>
|
|
1001
|
+
<a name="popups"></a><h2>Popups</h2>
|
|
1002
|
+
<p>Estilos para recrear popups.
|
|
374
1003
|
|
|
375
1004
|
</p>
|
|
376
|
-
<
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
<
|
|
382
|
-
<
|
|
1005
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
1006
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
1007
|
+
<div class="popup-demo-container">
|
|
1008
|
+
<div class="popup-demo-1">
|
|
1009
|
+
<div class="popup-container">
|
|
1010
|
+
<div class="popup-header">
|
|
1011
|
+
<a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><h4>Aeropuerto</h4>
|
|
1012
|
+
</div>
|
|
1013
|
+
<div class="popup-content">
|
|
1014
|
+
<p>Miami</p>
|
|
1015
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
1016
|
+
</div>
|
|
1017
|
+
</div>
|
|
1018
|
+
<span class="popup-close">x</span>
|
|
1019
|
+
<span class="popup-arrow popup-arrow-bottom"></span>
|
|
1020
|
+
</div>
|
|
1021
|
+
</div>
|
|
1022
|
+
|
|
1023
|
+
<div class="popup-demo-container">
|
|
1024
|
+
<div class="popup-demo-2">
|
|
1025
|
+
<div class="popup-container">
|
|
1026
|
+
<div class="popup-header">
|
|
1027
|
+
<h4>Aeropuerto</h4>
|
|
1028
|
+
</div>
|
|
1029
|
+
<div class="popup-content">
|
|
1030
|
+
<p>Miami</p>
|
|
1031
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
1032
|
+
</div>
|
|
1033
|
+
</div>
|
|
1034
|
+
<span class="popup-close">x</span>
|
|
1035
|
+
<span class="popup-arrow popup-arrow-top"></span>
|
|
1036
|
+
</div>
|
|
1037
|
+
</div>
|
|
1038
|
+
|
|
1039
|
+
<div class="popup-demo-container">
|
|
1040
|
+
<div class="popup-demo-3">
|
|
1041
|
+
<div class="popup-container">
|
|
1042
|
+
<div class="popup-header">
|
|
1043
|
+
<h4>Aeropuerto</h4>
|
|
1044
|
+
</div>
|
|
1045
|
+
<div class="popup-content">
|
|
1046
|
+
<p>Miami</p>
|
|
1047
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
1048
|
+
</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
<span class="popup-close">x</span>
|
|
1051
|
+
<span class="popup-arrow popup-arrow-left"></span>
|
|
1052
|
+
</div>
|
|
1053
|
+
</div>
|
|
1054
|
+
|
|
1055
|
+
<div class="popup-demo-container">
|
|
1056
|
+
<div class="popup-demo-4">
|
|
1057
|
+
<div class="popup-container">
|
|
1058
|
+
<div class="popup-header">
|
|
1059
|
+
<h4>Aeropuerto</h4>
|
|
1060
|
+
</div>
|
|
1061
|
+
<div class="popup-content">
|
|
1062
|
+
<p>Miami</p>
|
|
1063
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
1064
|
+
</div>
|
|
1065
|
+
</div>
|
|
1066
|
+
<span class="popup-close">x</span>
|
|
1067
|
+
<span class="popup-arrow popup-arrow-right"></span>
|
|
1068
|
+
</div>
|
|
1069
|
+
</div>
|
|
1070
|
+
|
|
1071
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
1072
|
+
<div class="popup-demo-container">
|
|
1073
|
+
<div class="popup-demo-5">
|
|
1074
|
+
<div class="popup-container">
|
|
1075
|
+
<div class="popup-header">
|
|
1076
|
+
<h4>Aeropuerto</h4>
|
|
1077
|
+
</div>
|
|
1078
|
+
<div class="popup-content">
|
|
1079
|
+
<p>Miami</p>
|
|
1080
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
1081
|
+
</div>
|
|
1082
|
+
</div>
|
|
1083
|
+
<span class="popup-close">x</span>
|
|
1084
|
+
</div>
|
|
1085
|
+
</div>
|
|
1086
|
+
|
|
1087
|
+
<a name="ejemplo-3"></a><h4>Ejemplo 3</h4>
|
|
1088
|
+
<div class="popup-demo-container">
|
|
1089
|
+
<div class="popup-demo-6">
|
|
1090
|
+
<div class="popup-container">
|
|
1091
|
+
<div class="popup-content">
|
|
1092
|
+
<p>Miami</p>
|
|
1093
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
1094
|
+
</div>
|
|
1095
|
+
</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
</div>
|
|
1098
|
+
|
|
1099
|
+
<a name="html"></a><h3>HTML</h3>
|
|
1100
|
+
<pre><code class="lang-html"><div class="popup">
|
|
1101
|
+
<div class="popup-container">
|
|
1102
|
+
<div class="popup-header">
|
|
1103
|
+
<h4>Aeropuerto</h4>
|
|
1104
|
+
</div>
|
|
1105
|
+
<div class="popup-content">
|
|
1106
|
+
<p>Miami</p>
|
|
1107
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
1108
|
+
</div>
|
|
1109
|
+
</div>
|
|
1110
|
+
<span class="popup-close">x</span>
|
|
1111
|
+
<span class="popup-arrow popup-arrow-right"></span>
|
|
1112
|
+
</div></code></pre>
|
|
1113
|
+
<p>Las clases para los 4 tipos de flecha son:
|
|
1114
|
+
|
|
1115
|
+
</p>
|
|
1116
|
+
<ul>
|
|
1117
|
+
<li><code>popup-arrow-top</code></li>
|
|
1118
|
+
<li><code>popup-arrow-bottom</code></li>
|
|
1119
|
+
<li><code>popup-arrow-left</code></li>
|
|
1120
|
+
<li><code>popup-arrow-right</code></li>
|
|
1121
|
+
</ul>
|
|
1122
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
1123
|
+
<p>Importación:
|
|
383
1124
|
|
|
384
1125
|
</p>
|
|
385
|
-
<pre><code class="lang-css"
|
|
386
|
-
<
|
|
387
|
-
- Tambi&eacute;n es requisito que la p&aacute;gina posea la t&eacute;cnica de clases condicionales en la etiqueta html.
|
|
388
|
-
- Cuando el soporte de CSS3 Pie esta activado, los estilos de fallback no son cargados.</code></pre>
|
|
389
|
-
<p>Un punto importante a tener en cuenta es la definició de la variable <code>$pie-behavior</code> con la ruta del archivo <code>.htc</code>:
|
|
1126
|
+
<pre><code class="lang-css">@import "picasso/components/popups";</code></pre>
|
|
1127
|
+
<p>Mixin con los parámetros por defecto:
|
|
390
1128
|
|
|
391
1129
|
</p>
|
|
392
|
-
<pre><code class="lang-css"
|
|
393
|
-
|
|
1130
|
+
<pre><code class="lang-css">.popup {
|
|
1131
|
+
@include popup();
|
|
1132
|
+
}</code></pre>
|
|
1133
|
+
<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:
|
|
1134
|
+
|
|
1135
|
+
</p>
|
|
1136
|
+
<pre><code class="lang-css">.popup {
|
|
1137
|
+
@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgba(1, 61, 147, 0.7), blue, white, black, red);
|
|
1138
|
+
}</code></pre>
|
|
1139
|
+
<a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
|
|
1140
|
+
<p>Variable y valor por defecto:
|
|
394
1141
|
|
|
395
1142
|
</p>
|
|
1143
|
+
<pre><code class="lang-css">$popup-ie-fallback: "sprites" !default;</code></pre>
|
|
1144
|
+
<p>Estrategias soportadas:
|
|
1145
|
+
|
|
1146
|
+
</p>
|
|
1147
|
+
<ul>
|
|
1148
|
+
<li><code>sprites</code></li>
|
|
1149
|
+
<li><code>GD</code></li>
|
|
1150
|
+
</ul>
|
|
1151
|
+
|
|
1152
|
+
<a name="accordions"></a><h2>Accordions</h2>
|
|
1153
|
+
<p>Para mostrar información en espacios reducidos.
|
|
1154
|
+
|
|
1155
|
+
</p>
|
|
1156
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
1157
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
1158
|
+
<div class="accordion-demo-1">
|
|
1159
|
+
|
|
1160
|
+
<div class="accordion-section">
|
|
1161
|
+
<div class="accordion-header accordion-header-open">
|
|
1162
|
+
<a name="precio"></a><a name="precio"></a><h4>Precio</h4>
|
|
1163
|
+
<span class="arrow"></span>
|
|
1164
|
+
</div>
|
|
1165
|
+
<div class="accordion-content">
|
|
1166
|
+
<span>aca van los filtros de precio</span>
|
|
1167
|
+
</div>
|
|
1168
|
+
</div>
|
|
1169
|
+
<div class="accordion-section">
|
|
1170
|
+
<div class="accordion-header accordion-header-open">
|
|
1171
|
+
<a name="paradas"></a><a name="paradas"></a><h4>Paradas</h4>
|
|
1172
|
+
<span class="arrow"></span>
|
|
1173
|
+
</div>
|
|
1174
|
+
<div class="accordion-content">
|
|
1175
|
+
<span>aca van los filtros de paradas</span>
|
|
1176
|
+
</div>
|
|
1177
|
+
</div>
|
|
1178
|
+
|
|
1179
|
+
<p></div>
|
|
1180
|
+
|
|
1181
|
+
</p>
|
|
1182
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
1183
|
+
<div class="accordion-demo-2">
|
|
1184
|
+
|
|
1185
|
+
<div class="accordion-section">
|
|
1186
|
+
<div class="accordion-header accordion-header-open">
|
|
1187
|
+
<h4>Precio</h4>
|
|
1188
|
+
<span class="arrow"></span>
|
|
1189
|
+
</div>
|
|
1190
|
+
<div class="accordion-content">
|
|
1191
|
+
<span>aca van los filtros de precio</span>
|
|
1192
|
+
</div>
|
|
1193
|
+
</div>
|
|
1194
|
+
<div class="accordion-section">
|
|
1195
|
+
<div class="accordion-header accordion-header-open">
|
|
1196
|
+
<h4>Paradas</h4>
|
|
1197
|
+
<span class="arrow"></span>
|
|
1198
|
+
</div>
|
|
1199
|
+
<div class="accordion-content">
|
|
1200
|
+
<span>aca van los filtros de paradas</span>
|
|
1201
|
+
</div>
|
|
1202
|
+
</div>
|
|
1203
|
+
|
|
1204
|
+
<p></div>
|
|
1205
|
+
|
|
1206
|
+
</p>
|
|
1207
|
+
<a name="html"></a><h3>HTML</h3>
|
|
1208
|
+
<pre><code class="lang-html"><div class="accordion">
|
|
1209
|
+
<div class="accordion-section">
|
|
1210
|
+
<div class="accordion-header accordion-header-open">
|
|
1211
|
+
<h4>Precio</h4>
|
|
1212
|
+
<span class="arrow"></span>
|
|
1213
|
+
</div>
|
|
1214
|
+
<div class="accordion-content">
|
|
1215
|
+
<span>aca van los filtros de precio</span>
|
|
1216
|
+
</div>
|
|
1217
|
+
</div>
|
|
1218
|
+
</div></code></pre>
|
|
1219
|
+
<blockquote>
|
|
1220
|
+
<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.
|
|
1221
|
+
|
|
1222
|
+
</p>
|
|
1223
|
+
</blockquote>
|
|
1224
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
1225
|
+
<p>Importación:
|
|
1226
|
+
|
|
1227
|
+
</p>
|
|
1228
|
+
<pre><code class="lang-css">@import "picasso/components/accordions";</code></pre>
|
|
1229
|
+
<p>Mixin con los parámetros por defecto:
|
|
1230
|
+
|
|
1231
|
+
</p>
|
|
1232
|
+
<pre><code class="lang-css">.accordion {
|
|
1233
|
+
@include accordion();
|
|
1234
|
+
}</code></pre>
|
|
1235
|
+
<p>Mixin con parámetros personalizados. Disponibles: alto, background del título, color del título:
|
|
1236
|
+
|
|
1237
|
+
</p>
|
|
1238
|
+
<pre><code class="lang-css">.accordion {
|
|
1239
|
+
@include accordion(40px, #CCCCCC, #000000);
|
|
1240
|
+
}</code></pre>
|
|
396
1241
|
|
|
397
1242
|
<hr>
|
|
398
1243
|
<a name="utils"></a><h1>Utils</h1>
|
|
@@ -400,13 +1245,46 @@ gem 'picasso', '~> 0.0.3'</code></pre>
|
|
|
400
1245
|
<p>Basado en <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>.
|
|
401
1246
|
|
|
402
1247
|
</p>
|
|
403
|
-
<a name="sass"></a><h3>Sass</h3>
|
|
1248
|
+
<a name="sass"></a><a name="sass"></a><h3>Sass</h3>
|
|
404
1249
|
<pre><code class="lang-css">@import "picasso/utils/clearfix";
|
|
405
1250
|
|
|
406
1251
|
//Clearfix
|
|
407
1252
|
.container{
|
|
408
1253
|
@include clearfix;
|
|
409
1254
|
}</code></pre>
|
|
1255
|
+
<a name="ie"></a><h2>IE</h2>
|
|
1256
|
+
<a name="after-before"></a><h3>After / Before</h3>
|
|
1257
|
+
<p>Soporte de <code>:after</code> y <code>:before</code> para Internet Explorer 7.
|
|
1258
|
+
|
|
1259
|
+
</p>
|
|
1260
|
+
<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>
|
|
1261
|
+
|
|
1262
|
+
</p>
|
|
1263
|
+
<a name="sass"></a><h4>Sass</h4>
|
|
1264
|
+
<pre><code class="lang-css">@import "picasso/utils/ie";
|
|
1265
|
+
|
|
1266
|
+
.my-element {
|
|
1267
|
+
@include after;
|
|
1268
|
+
@include before;
|
|
1269
|
+
|
|
1270
|
+
//Para IE quedan disponibles las clases .after y .before
|
|
1271
|
+
//para aplicar los mismos estilos como si fueran pseudoselectores
|
|
1272
|
+
.ie7 & {
|
|
1273
|
+
.after{
|
|
1274
|
+
}
|
|
1275
|
+
|
|
1276
|
+
.before{
|
|
1277
|
+
}
|
|
1278
|
+
}
|
|
1279
|
+
}</code></pre>
|
|
1280
|
+
<a name="sprite"></a><h2>Sprite</h2>
|
|
1281
|
+
<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ó.
|
|
1282
|
+
|
|
1283
|
+
</p>
|
|
1284
|
+
<h3>Sass</h3>
|
|
1285
|
+
<pre><code class="lang-css">@import "picasso/utils/sprite";
|
|
1286
|
+
|
|
1287
|
+
$initial-position: insert-in-sprite($sprite-created, $sprite-name, $sprite, $sprite-width, $sprite-height);</code></pre>
|
|
410
1288
|
|
|
411
1289
|
<hr>
|
|
412
1290
|
<a name="despegar"></a><h1>Despegar</h1>
|