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
|
@@ -0,0 +1,277 @@
|
|
|
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="pagination"></a><h2>Pagination</h2>
|
|
166
|
+
<p>Implementación tradicional del paginador.
|
|
167
|
+
|
|
168
|
+
</p>
|
|
169
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
170
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
171
|
+
<div class="pagination-demo-1">
|
|
172
|
+
<ul>
|
|
173
|
+
<li class="prev">
|
|
174
|
+
<a href="#">Anterior</a>
|
|
175
|
+
</li>
|
|
176
|
+
<li>
|
|
177
|
+
<a href="#">1</a>
|
|
178
|
+
</li>
|
|
179
|
+
<li>
|
|
180
|
+
<a href="#">2</a>
|
|
181
|
+
</li>
|
|
182
|
+
<li class="active">
|
|
183
|
+
<a>3</a>
|
|
184
|
+
</li>
|
|
185
|
+
<li>
|
|
186
|
+
<a href="#">4</a>
|
|
187
|
+
</li>
|
|
188
|
+
<li class="disabled">
|
|
189
|
+
<a href="#">5</a>
|
|
190
|
+
</li>
|
|
191
|
+
<li class="dots">
|
|
192
|
+
<a>...</a>
|
|
193
|
+
</li>
|
|
194
|
+
<li>
|
|
195
|
+
<a href="#">12</a>
|
|
196
|
+
</li>
|
|
197
|
+
<li class="next">
|
|
198
|
+
<a href="#">Siguiente</a>
|
|
199
|
+
</li>
|
|
200
|
+
</ul>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
204
|
+
<div class="pagination-demo-2">
|
|
205
|
+
<ul>
|
|
206
|
+
<li>
|
|
207
|
+
<a href="#">1</a>
|
|
208
|
+
</li>
|
|
209
|
+
<li>
|
|
210
|
+
<a href="#">2</a>
|
|
211
|
+
</li>
|
|
212
|
+
<li class="active">
|
|
213
|
+
<a>3</a>
|
|
214
|
+
</li>
|
|
215
|
+
<li>
|
|
216
|
+
<a href="#">4</a>
|
|
217
|
+
</li>
|
|
218
|
+
<li>
|
|
219
|
+
<a href="#">5</a>
|
|
220
|
+
</li>
|
|
221
|
+
</ul>
|
|
222
|
+
</div>
|
|
223
|
+
|
|
224
|
+
<a name="html"></a><h3>HTML</h3>
|
|
225
|
+
<pre><code class="lang-html"><div class="pagination">
|
|
226
|
+
<ul>
|
|
227
|
+
<li class="prev">
|
|
228
|
+
<a href="#">Anterior</a>
|
|
229
|
+
</li>
|
|
230
|
+
<li>
|
|
231
|
+
<a href="#">1</a>
|
|
232
|
+
</li>
|
|
233
|
+
<li class="active">
|
|
234
|
+
<a>2</a>
|
|
235
|
+
</li>
|
|
236
|
+
<li class="disabled">
|
|
237
|
+
<a href="#">3</a>
|
|
238
|
+
</li>
|
|
239
|
+
<li class="dots">
|
|
240
|
+
<a>...</a>
|
|
241
|
+
</li>
|
|
242
|
+
<li class="next">
|
|
243
|
+
<a href="#">Siguiente</a>
|
|
244
|
+
</li>
|
|
245
|
+
</ul>
|
|
246
|
+
</div></code></pre>
|
|
247
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
248
|
+
<p>Importación:
|
|
249
|
+
|
|
250
|
+
</p>
|
|
251
|
+
<pre><code class="lang-css">@import "picasso/components/pagination";</code></pre>
|
|
252
|
+
<p>Mixin con los parámetros por defecto:
|
|
253
|
+
|
|
254
|
+
</p>
|
|
255
|
+
<pre><code class="lang-css">.pagination{
|
|
256
|
+
@include pagination();
|
|
257
|
+
}</code></pre>
|
|
258
|
+
<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:
|
|
259
|
+
|
|
260
|
+
</p>
|
|
261
|
+
<pre><code class="lang-css">.pagination{
|
|
262
|
+
@include pagination(black, blue, white, red, 10px, yellow, green);
|
|
263
|
+
}</code></pre>
|
|
264
|
+
|
|
265
|
+
</article>
|
|
266
|
+
|
|
267
|
+
|
|
268
|
+
<footer>
|
|
269
|
+
</footer>
|
|
270
|
+
|
|
271
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
272
|
+
<script src="./js/docs.js"></script>
|
|
273
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
274
|
+
|
|
275
|
+
</body>
|
|
276
|
+
|
|
277
|
+
</html>
|
data/docs/popups.html
ADDED
|
@@ -0,0 +1,328 @@
|
|
|
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="popups"></a><h2>Popups</h2>
|
|
166
|
+
<p>Estilos para recrear popups.
|
|
167
|
+
|
|
168
|
+
</p>
|
|
169
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
170
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
171
|
+
<div class="popup-demo-container">
|
|
172
|
+
<div class="popup-demo-1">
|
|
173
|
+
<div class="popup-container">
|
|
174
|
+
<div class="popup-header">
|
|
175
|
+
<a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><a name="aeropuerto"></a><h4>Aeropuerto</h4>
|
|
176
|
+
</div>
|
|
177
|
+
<div class="popup-content">
|
|
178
|
+
<p>Miami</p>
|
|
179
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
<span class="popup-close">x</span>
|
|
183
|
+
<span class="popup-arrow popup-arrow-bottom"></span>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="popup-demo-container">
|
|
188
|
+
<div class="popup-demo-2">
|
|
189
|
+
<div class="popup-container">
|
|
190
|
+
<div class="popup-header">
|
|
191
|
+
<h4>Aeropuerto</h4>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="popup-content">
|
|
194
|
+
<p>Miami</p>
|
|
195
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
<span class="popup-close">x</span>
|
|
199
|
+
<span class="popup-arrow popup-arrow-top"></span>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<div class="popup-demo-container">
|
|
204
|
+
<div class="popup-demo-3">
|
|
205
|
+
<div class="popup-container">
|
|
206
|
+
<div class="popup-header">
|
|
207
|
+
<h4>Aeropuerto</h4>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="popup-content">
|
|
210
|
+
<p>Miami</p>
|
|
211
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<span class="popup-close">x</span>
|
|
215
|
+
<span class="popup-arrow popup-arrow-left"></span>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
|
|
219
|
+
<div class="popup-demo-container">
|
|
220
|
+
<div class="popup-demo-4">
|
|
221
|
+
<div class="popup-container">
|
|
222
|
+
<div class="popup-header">
|
|
223
|
+
<h4>Aeropuerto</h4>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="popup-content">
|
|
226
|
+
<p>Miami</p>
|
|
227
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
<span class="popup-close">x</span>
|
|
231
|
+
<span class="popup-arrow popup-arrow-right"></span>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
236
|
+
<div class="popup-demo-container">
|
|
237
|
+
<div class="popup-demo-5">
|
|
238
|
+
<div class="popup-container">
|
|
239
|
+
<div class="popup-header">
|
|
240
|
+
<h4>Aeropuerto</h4>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="popup-content">
|
|
243
|
+
<p>Miami</p>
|
|
244
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
<span class="popup-close">x</span>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<a name="ejemplo-3"></a><h4>Ejemplo 3</h4>
|
|
252
|
+
<div class="popup-demo-container">
|
|
253
|
+
<div class="popup-demo-6">
|
|
254
|
+
<div class="popup-container">
|
|
255
|
+
<div class="popup-content">
|
|
256
|
+
<p>Miami</p>
|
|
257
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
<a name="html"></a><h3>HTML</h3>
|
|
264
|
+
<pre><code class="lang-html"><div class="popup">
|
|
265
|
+
<div class="popup-container">
|
|
266
|
+
<div class="popup-header">
|
|
267
|
+
<h4>Aeropuerto</h4>
|
|
268
|
+
</div>
|
|
269
|
+
<div class="popup-content">
|
|
270
|
+
<p>Miami</p>
|
|
271
|
+
<p>Aeropuerto Internacional Miami</p>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
<span class="popup-close">x</span>
|
|
275
|
+
<span class="popup-arrow popup-arrow-right"></span>
|
|
276
|
+
</div></code></pre>
|
|
277
|
+
<p>Las clases para los 4 tipos de flecha son:
|
|
278
|
+
|
|
279
|
+
</p>
|
|
280
|
+
<ul>
|
|
281
|
+
<li><code>popup-arrow-top</code></li>
|
|
282
|
+
<li><code>popup-arrow-bottom</code></li>
|
|
283
|
+
<li><code>popup-arrow-left</code></li>
|
|
284
|
+
<li><code>popup-arrow-right</code></li>
|
|
285
|
+
</ul>
|
|
286
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
287
|
+
<p>Importación:
|
|
288
|
+
|
|
289
|
+
</p>
|
|
290
|
+
<pre><code class="lang-css">@import "picasso/components/popups";</code></pre>
|
|
291
|
+
<p>Mixin con los parámetros por defecto:
|
|
292
|
+
|
|
293
|
+
</p>
|
|
294
|
+
<pre><code class="lang-css">.popup {
|
|
295
|
+
@include popup();
|
|
296
|
+
}</code></pre>
|
|
297
|
+
<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:
|
|
298
|
+
|
|
299
|
+
</p>
|
|
300
|
+
<pre><code class="lang-css">.popup {
|
|
301
|
+
@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgba(1, 61, 147, 0.7), blue, white, black, red);
|
|
302
|
+
}</code></pre>
|
|
303
|
+
<a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
|
|
304
|
+
<p>Variable y valor por defecto:
|
|
305
|
+
|
|
306
|
+
</p>
|
|
307
|
+
<pre><code class="lang-css">$popup-ie-fallback: "sprites" !default;</code></pre>
|
|
308
|
+
<p>Estrategias soportadas:
|
|
309
|
+
|
|
310
|
+
</p>
|
|
311
|
+
<ul>
|
|
312
|
+
<li><code>sprites</code></li>
|
|
313
|
+
<li><code>GD</code></li>
|
|
314
|
+
</ul>
|
|
315
|
+
|
|
316
|
+
</article>
|
|
317
|
+
|
|
318
|
+
|
|
319
|
+
<footer>
|
|
320
|
+
</footer>
|
|
321
|
+
|
|
322
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
323
|
+
<script src="./js/docs.js"></script>
|
|
324
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
325
|
+
|
|
326
|
+
</body>
|
|
327
|
+
|
|
328
|
+
</html>
|