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/intro.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>
|
|
@@ -140,11 +172,12 @@
|
|
|
140
172
|
|
|
141
173
|
</p>
|
|
142
174
|
<pre><code class="lang-bash">$ (sudo) gem install picasso</code></pre>
|
|
143
|
-
<p>En el config.rb agregar:
|
|
175
|
+
<p>En el <code>config.rb</code> agregar:
|
|
144
176
|
|
|
145
177
|
</p>
|
|
146
178
|
<pre><code class="lang-bash">require 'picasso'
|
|
147
|
-
|
|
179
|
+
require 'magick'
|
|
180
|
+
gem 'picasso', '~> 0.1.0'</code></pre>
|
|
148
181
|
<p>Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
|
|
149
182
|
|
|
150
183
|
</p>
|
data/docs/js/docs.js
CHANGED
|
@@ -12,5 +12,21 @@ $(document).ready(function() {
|
|
|
12
12
|
$el.attr('data-language', lang);
|
|
13
13
|
|
|
14
14
|
});
|
|
15
|
+
|
|
16
|
+
// accordions
|
|
17
|
+
$('.accordion-header').click(function() {
|
|
18
|
+
var accordionHeader = $(this);
|
|
19
|
+
var content = accordionHeader.parent().find('.accordion-content');
|
|
20
|
+
|
|
21
|
+
content.slideToggle('fast');
|
|
22
|
+
|
|
23
|
+
if (accordionHeader.hasClass('accordion-header-open')) {
|
|
24
|
+
accordionHeader.removeClass('accordion-header-open');
|
|
25
|
+
accordionHeader.addClass('accordion-header-close');
|
|
26
|
+
} else {
|
|
27
|
+
accordionHeader.removeClass('accordion-header-close');
|
|
28
|
+
accordionHeader.addClass('accordion-header-open');
|
|
29
|
+
}
|
|
30
|
+
});
|
|
15
31
|
|
|
16
32
|
});
|
data/docs/js/viewer.js
ADDED
|
@@ -0,0 +1,341 @@
|
|
|
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="list-grid"></a><h2>List Grid</h2>
|
|
166
|
+
<p>Para mostrar datos en una grilla utilizando listas.
|
|
167
|
+
|
|
168
|
+
</p>
|
|
169
|
+
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
170
|
+
<a name="ejemplo-1"></a><h4>Ejemplo 1</h4>
|
|
171
|
+
<p>
|
|
172
|
+
<div class="list-grid-demo-1">
|
|
173
|
+
<ul class="first first-column">
|
|
174
|
+
<li class="first odd"></li>
|
|
175
|
+
<li>30 min</li>
|
|
176
|
+
<li class="odd">60 min</li>
|
|
177
|
+
<li>90 min</li>
|
|
178
|
+
</ul>
|
|
179
|
+
<ul>
|
|
180
|
+
<li class="first odd">Vuelo DL - 110</li>
|
|
181
|
+
<li class="hover-cell">0%</li>
|
|
182
|
+
<li class="odd hover-cell">10%</li>
|
|
183
|
+
<li class="hover-cell">0%</li>
|
|
184
|
+
</ul>
|
|
185
|
+
<ul>
|
|
186
|
+
<li class="first odd">Vuelo DD - 112</li>
|
|
187
|
+
<li class="hover-cell">10%</li>
|
|
188
|
+
<li class="odd hover-cell">10%</li>
|
|
189
|
+
<li class="hover-cell">0%</li>
|
|
190
|
+
</ul>
|
|
191
|
+
<ul>
|
|
192
|
+
<li class="first odd">Vuelo DL - 50</li>
|
|
193
|
+
<li class="hover-cell">30%</li>
|
|
194
|
+
<li class="odd hover-cell">20%</li>
|
|
195
|
+
<li class="hover-cell">5%</li>
|
|
196
|
+
</ul>
|
|
197
|
+
</div>
|
|
198
|
+
</p>
|
|
199
|
+
|
|
200
|
+
<a name="ejemplo-2"></a><h4>Ejemplo 2</h4>
|
|
201
|
+
<p>
|
|
202
|
+
<div class="list-grid-demo-2">
|
|
203
|
+
<ul>
|
|
204
|
+
<li class="hover-cell">Vuelo 1 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
205
|
+
<li class="hover-cell">Vuelo 2 - Sale <b>18:00</b> LLega <b>22:00</b> 2 Escala</li>
|
|
206
|
+
<li class="hover-cell">Vuelo 3 - Sale <b>18:00</b> LLega <b>20:00</b> Directo</li>
|
|
207
|
+
<li class="hover-cell">Vuelo 4 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
208
|
+
<li class="hover-cell">Vuelo 5 - Sale <b>18:00</b> LLega <b>20:30</b> Directo</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</div>
|
|
211
|
+
</p>
|
|
212
|
+
|
|
213
|
+
<a name="ejemplo-3"></a><h4>Ejemplo 3</h4>
|
|
214
|
+
<p>
|
|
215
|
+
<div class="list-grid-demo-3">
|
|
216
|
+
<ul class="first">
|
|
217
|
+
<li class="first"></li>
|
|
218
|
+
<li class="even">30 min</li>
|
|
219
|
+
<li>60 min</li>
|
|
220
|
+
<li class="even">90 min</li>
|
|
221
|
+
</ul>
|
|
222
|
+
<ul>
|
|
223
|
+
<li class="first">Vuelo DL - 110</li>
|
|
224
|
+
<li class="even">0%</li>
|
|
225
|
+
<li>10%</li>
|
|
226
|
+
<li class="even">0%</li>
|
|
227
|
+
</ul>
|
|
228
|
+
</div>
|
|
229
|
+
</p>
|
|
230
|
+
|
|
231
|
+
<a name="ejemplo-4"></a><h4>Ejemplo 4</h4>
|
|
232
|
+
<p>
|
|
233
|
+
<div class="list-grid-demo-4">
|
|
234
|
+
<ul class="first">
|
|
235
|
+
<li class="first"></li>
|
|
236
|
+
<li class="even">30 min</li>
|
|
237
|
+
<li>60 min</li>
|
|
238
|
+
<li class="even">90 min</li>
|
|
239
|
+
</ul>
|
|
240
|
+
<ul>
|
|
241
|
+
<li class="first">Vuelo DL - 110</li>
|
|
242
|
+
<li class="hover-cell even">0%</li>
|
|
243
|
+
<li class="hover-cell">10%</li>
|
|
244
|
+
<li class="hover-cell even">0%</li>
|
|
245
|
+
</ul>
|
|
246
|
+
<ul>
|
|
247
|
+
<li class="first">Vuelo DL - 25</li>
|
|
248
|
+
<li class="hover-cell even">10%</li>
|
|
249
|
+
<li></li>
|
|
250
|
+
<li class="hover-cell even">6%</li>
|
|
251
|
+
</ul>
|
|
252
|
+
</div>
|
|
253
|
+
</p>
|
|
254
|
+
|
|
255
|
+
<a name="html"></a><h3>HTML</h3>
|
|
256
|
+
<pre><code class="lang-html"><div class="list-grid">
|
|
257
|
+
<ul>
|
|
258
|
+
<li></li>
|
|
259
|
+
<li>Lorem</li>
|
|
260
|
+
<li>Ipsum</li>
|
|
261
|
+
<li>Dolorem</li>
|
|
262
|
+
</ul>
|
|
263
|
+
<ul>
|
|
264
|
+
<li>Donec</li>
|
|
265
|
+
<li class="hover-cell">Nullam</li>
|
|
266
|
+
<li class="hover-cell">Morbi</li>
|
|
267
|
+
<li class="hover-cell">Praesent</li>
|
|
268
|
+
</ul>
|
|
269
|
+
</div></code></pre>
|
|
270
|
+
<blockquote>
|
|
271
|
+
<p><strong>Nota</strong>: La clase "hover-cell" es utilizada para indicar cuando una celda reacciona ante el hover.
|
|
272
|
+
|
|
273
|
+
</p>
|
|
274
|
+
</blockquote>
|
|
275
|
+
<a name="sass"></a><h3>Sass</h3>
|
|
276
|
+
<pre><code class="lang-css">@import "picasso/components/list-grids";
|
|
277
|
+
|
|
278
|
+
// Con valores por defecto
|
|
279
|
+
.text-input {
|
|
280
|
+
@include list-grid();
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
// Con todos los parametros: cell-width, cell-height, border-color, odd-color, even-color, hover-color
|
|
284
|
+
|
|
285
|
+
.text-input {
|
|
286
|
+
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
287
|
+
}</code></pre>
|
|
288
|
+
<p>Importación:
|
|
289
|
+
|
|
290
|
+
</p>
|
|
291
|
+
<pre><code class="lang-css">@import "picasso/components/list-grids";</code></pre>
|
|
292
|
+
<p>Mixin con los parámetros por defecto:
|
|
293
|
+
|
|
294
|
+
</p>
|
|
295
|
+
<pre><code class="lang-css">.list{
|
|
296
|
+
@include list-grid();
|
|
297
|
+
}</code></pre>
|
|
298
|
+
<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:
|
|
299
|
+
|
|
300
|
+
</p>
|
|
301
|
+
<pre><code class="lang-css">.list{
|
|
302
|
+
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
303
|
+
}</code></pre>
|
|
304
|
+
<blockquote>
|
|
305
|
+
<p><strong>Nota</strong>: El color para el estado hover debe ser en hexadecimal.
|
|
306
|
+
|
|
307
|
+
</p>
|
|
308
|
+
</blockquote>
|
|
309
|
+
<a name="compatibilidad-con-ie-lt-9"></a><h3>Compatibilidad con IE < 9</h3>
|
|
310
|
+
<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>
|
|
311
|
+
|
|
312
|
+
</p>
|
|
313
|
+
<a name="html-compatible-con-ie-lt-9"></a><h3>HTML compatible con IE < 9</h3>
|
|
314
|
+
<pre><code class="lang-html"><div class="list-grid">
|
|
315
|
+
<ul class="first">
|
|
316
|
+
<li class="first odd"></li>
|
|
317
|
+
<li class="even">30 min</li>
|
|
318
|
+
<li class="odd">60 min</li>
|
|
319
|
+
<li class="even">90 min</li>
|
|
320
|
+
</ul>
|
|
321
|
+
<ul>
|
|
322
|
+
<li class="first odd">Vuelo DL - 110</li>
|
|
323
|
+
<li class="even">0%</li>
|
|
324
|
+
<li class="odd">10%</li>
|
|
325
|
+
<li class="even">0%</li>
|
|
326
|
+
</ul>
|
|
327
|
+
</div></code></pre>
|
|
328
|
+
|
|
329
|
+
</article>
|
|
330
|
+
|
|
331
|
+
|
|
332
|
+
<footer>
|
|
333
|
+
</footer>
|
|
334
|
+
|
|
335
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
336
|
+
<script src="./js/docs.js"></script>
|
|
337
|
+
<script src="./js/rainbow-custom.min.js"></script>
|
|
338
|
+
|
|
339
|
+
</body>
|
|
340
|
+
|
|
341
|
+
</html>
|