picasso 0.2.3 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +1 -0
- data/README.md +216 -3
- data/docs/_picasso.html +38 -0
- data/docs/config.rb +1 -1
- data/docs/css/{style.css → picasso-docs.css} +797 -1331
- data/docs/img/picasso-buttons-glossy.png +0 -0
- data/docs/img/picasso-nav.png +0 -0
- data/docs/img/picasso-popup.png +0 -0
- data/docs/index.html +201 -198
- data/docs/picasso-_components.html +83 -0
- data/docs/picasso-_despegar.html +34 -0
- data/docs/picasso-_utils.html +40 -0
- data/docs/picasso-components-_accordions.html +183 -0
- data/docs/picasso-components-_arrows.html +124 -0
- data/docs/picasso-components-_bubbles.html +142 -0
- data/docs/picasso-components-_buttons.html +38 -0
- data/docs/picasso-components-_inputs.html +122 -0
- data/docs/picasso-components-_list-grids.html +253 -0
- data/docs/picasso-components-_mini-tooltips.html +152 -0
- data/docs/picasso-components-_navs.html +360 -0
- data/docs/picasso-components-_pagination.html +258 -0
- data/docs/picasso-components-_popups.html +359 -0
- data/docs/picasso-components-buttons-_3d.html +284 -0
- data/docs/picasso-components-buttons-_glossy.html +290 -0
- data/docs/picasso-components-buttons-_mini.html +224 -0
- data/docs/picasso-despegar-_variables.html +145 -0
- data/docs/picasso-utils-_clearfix.html +56 -0
- data/docs/picasso-utils-_grid.html +390 -0
- data/docs/picasso-utils-_ie.html +50 -0
- data/docs/picasso-utils-_sprite.html +62 -0
- data/docs/resources/docs.jade +46 -0
- data/docs/resources/docs.js +52 -0
- data/docs/sass/{style.scss → picasso-docs.scss} +71 -96
- data/lib/picasso/version.rb +1 -1
- data/picasso.gemspec +1 -1
- data/stylesheets/_picasso.scss +14 -0
- data/stylesheets/picasso/_components.scss +54 -0
- data/stylesheets/picasso/_despegar.scss +12 -0
- data/stylesheets/picasso/_utils.scss +17 -1
- data/stylesheets/picasso/components/_accordions.scss +52 -2
- data/stylesheets/picasso/components/_arrows.scss +39 -2
- data/stylesheets/picasso/components/_bubbles.scss +36 -2
- data/stylesheets/picasso/components/_buttons.scss +14 -0
- data/stylesheets/picasso/components/_inputs.scss +41 -2
- data/stylesheets/picasso/components/_list-grids.scss +84 -3
- data/stylesheets/picasso/components/_mini-tooltips.scss +128 -0
- data/stylesheets/picasso/components/_navs.scss +52 -2
- data/stylesheets/picasso/components/_pagination.scss +63 -2
- data/stylesheets/picasso/components/_popups.scss +73 -2
- data/stylesheets/picasso/components/buttons/_3d.scss +75 -2
- data/stylesheets/picasso/components/buttons/_glossy.scss +41 -2
- data/stylesheets/picasso/components/buttons/_mini.scss +44 -2
- data/stylesheets/picasso/despegar/_variables.scss +61 -60
- data/stylesheets/picasso/utils/_clearfix.scss +24 -16
- data/stylesheets/picasso/utils/_grid.scss +269 -0
- data/stylesheets/picasso/utils/_ie.scss +23 -28
- data/stylesheets/picasso/utils/_sprite.scss +15 -3
- metadata +34 -50
- data/docs/accordions.html +0 -276
- data/docs/all.html +0 -1588
- data/docs/arrows.html +0 -233
- data/docs/bubbles.html +0 -231
- data/docs/build/manifest.json +0 -21
- data/docs/build/md/changelog.md +0 -53
- data/docs/build/md/components/accordions.md +0 -97
- data/docs/build/md/components/arrows.md +0 -53
- data/docs/build/md/components/bubbles.md +0 -57
- data/docs/build/md/components/buttons.md +0 -205
- data/docs/build/md/components/components.md +0 -37
- data/docs/build/md/components/inputs.md +0 -73
- data/docs/build/md/components/list-grids.md +0 -180
- data/docs/build/md/components/navs.md +0 -107
- data/docs/build/md/components/pagination.md +0 -112
- data/docs/build/md/components/popups.md +0 -162
- data/docs/build/md/despegar/despegar.md +0 -200
- data/docs/build/md/intro.md +0 -59
- data/docs/build/md/mejoras.md +0 -69
- data/docs/build/md/todo.md +0 -14
- data/docs/build/md/utils/utils.md +0 -62
- data/docs/build/templates/index.html +0 -37
- data/docs/build/templates/layout.html +0 -68
- data/docs/build/templates/page.html +0 -3
- data/docs/buttons.html +0 -357
- data/docs/changelog.html +0 -264
- data/docs/components.html +0 -220
- data/docs/css/github.css +0 -88
- data/docs/css/markdown.css +0 -108
- data/docs/despegar.html +0 -377
- data/docs/inputs.html +0 -248
- data/docs/intro.html +0 -233
- data/docs/js/docs.js +0 -32
- data/docs/js/rainbow-custom.min.js +0 -13
- data/docs/js/viewer.js +0 -12
- data/docs/list-grids.html +0 -350
- data/docs/mejoras.html +0 -250
- data/docs/navs.html +0 -281
- data/docs/pagination.html +0 -286
- data/docs/popups.html +0 -337
- data/docs/todo.html +0 -204
- data/docs/utils.html +0 -233
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
----------------
|
|
2
|
-
|
|
3
|
-
# Components
|
|
4
|
-
|
|
5
|
-
Representan a elementos comunes/patrones utilizados a lo largo del sitio. Estan pensandos para ser flexibles y configurables para ser implementados en distintas situaciones.
|
|
6
|
-
|
|
7
|
-
La gran mayoría de los componentes hacen uso intensivo de estilos CSS3 y ofrecen estrategías alternativas ([fallback](https://encrypted.google.com/search?hl=en&q=fallback%20definition)) para navegadores que no soportan dichos estilos (Internet Explorer <= 9).
|
|
8
|
-
|
|
9
|
-
Para tener compatibilidad con Internet Explorer, el único requisito es que la página que carga los estilos generados por Picasso posean la [técnica de clases condicionales en la etiqueta html](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/):
|
|
10
|
-
|
|
11
|
-
```html
|
|
12
|
-
<!DOCTYPE html>
|
|
13
|
-
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
14
|
-
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
15
|
-
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
16
|
-
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
### Estrategias y estilos de fallback para IE en componentes
|
|
20
|
-
|
|
21
|
-
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:
|
|
22
|
-
|
|
23
|
-
```css
|
|
24
|
-
$<componente>-ie-fallback: "sprites"|"GD"
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
Los valores admitidos son `sprites` y `GD` (Graceful Degradation).
|
|
28
|
-
|
|
29
|
-
#### Estrategía de sprites
|
|
30
|
-
|
|
31
|
-
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.
|
|
32
|
-
|
|
33
|
-
#### Estrategía GD
|
|
34
|
-
|
|
35
|
-
Por cada componente, Picasso seteará estilos minimos, soportados por Internet Explorer, para que el componente siga siendo usable y funcional.
|
|
36
|
-
|
|
37
|
-
## Componentes disponibles
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
## Inputs
|
|
2
|
-
|
|
3
|
-
Estilos inputs de textos y selects.
|
|
4
|
-
|
|
5
|
-
### Ejemplos
|
|
6
|
-
|
|
7
|
-
#### Ejemplo 1
|
|
8
|
-
|
|
9
|
-
<input type="text" class="text-input-demo-1">
|
|
10
|
-
|
|
11
|
-
<p>
|
|
12
|
-
<select class="select-demo-1">
|
|
13
|
-
<option value="1">1</option>
|
|
14
|
-
<option value="2">2</option>
|
|
15
|
-
<option value="3">3</option>
|
|
16
|
-
</select>
|
|
17
|
-
</p>
|
|
18
|
-
|
|
19
|
-
#### Ejemplo 2
|
|
20
|
-
|
|
21
|
-
<input type="text" class="text-input-demo-2">
|
|
22
|
-
|
|
23
|
-
<p>
|
|
24
|
-
<select class="select-demo-2">
|
|
25
|
-
<option value="1">1</option>
|
|
26
|
-
<option value="2">2</option>
|
|
27
|
-
<option value="3">3</option>
|
|
28
|
-
</select>
|
|
29
|
-
</p>
|
|
30
|
-
|
|
31
|
-
### HTML
|
|
32
|
-
|
|
33
|
-
**Text inputs**
|
|
34
|
-
|
|
35
|
-
```html
|
|
36
|
-
<input type="text" class="text-input">
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
**Selects**
|
|
40
|
-
|
|
41
|
-
```html
|
|
42
|
-
<select class="select">
|
|
43
|
-
<option value="1">1</option>
|
|
44
|
-
<option value="2">2</option>
|
|
45
|
-
<option value="3">3</option>
|
|
46
|
-
</select>
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Sass
|
|
50
|
-
|
|
51
|
-
Importación:
|
|
52
|
-
|
|
53
|
-
```css
|
|
54
|
-
@import "picasso/components/inputs";
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Mixin con los parámetros por defecto:
|
|
58
|
-
|
|
59
|
-
```css
|
|
60
|
-
.text-input {
|
|
61
|
-
@include input();
|
|
62
|
-
}
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
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:
|
|
66
|
-
|
|
67
|
-
```css
|
|
68
|
-
.text-input {
|
|
69
|
-
@include input(100px, 20px, #DDD, blue, 5px, black, 14px);
|
|
70
|
-
}
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
> **Nota**: El color del borde debe ser en hexadecimal.
|
|
@@ -1,180 +0,0 @@
|
|
|
1
|
-
## List Grid
|
|
2
|
-
|
|
3
|
-
Para mostrar datos en una grilla utilizando listas.
|
|
4
|
-
|
|
5
|
-
### Ejemplos
|
|
6
|
-
|
|
7
|
-
#### Ejemplo 1
|
|
8
|
-
|
|
9
|
-
<p>
|
|
10
|
-
<div class="list-grid-demo-1">
|
|
11
|
-
<ul class="first first-column">
|
|
12
|
-
<li class="first odd"></li>
|
|
13
|
-
<li>30 min</li>
|
|
14
|
-
<li class="odd">60 min</li>
|
|
15
|
-
<li>90 min</li>
|
|
16
|
-
</ul>
|
|
17
|
-
<ul>
|
|
18
|
-
<li class="first odd">Vuelo DL - 110</li>
|
|
19
|
-
<li class="hover-cell">0%</li>
|
|
20
|
-
<li class="odd hover-cell">10%</li>
|
|
21
|
-
<li class="hover-cell">0%</li>
|
|
22
|
-
</ul>
|
|
23
|
-
<ul>
|
|
24
|
-
<li class="first odd">Vuelo DD - 112</li>
|
|
25
|
-
<li class="hover-cell">10%</li>
|
|
26
|
-
<li class="odd hover-cell">10%</li>
|
|
27
|
-
<li class="hover-cell">0%</li>
|
|
28
|
-
</ul>
|
|
29
|
-
<ul>
|
|
30
|
-
<li class="first odd">Vuelo DL - 50</li>
|
|
31
|
-
<li class="hover-cell">30%</li>
|
|
32
|
-
<li class="odd hover-cell">20%</li>
|
|
33
|
-
<li class="hover-cell">5%</li>
|
|
34
|
-
</ul>
|
|
35
|
-
</div>
|
|
36
|
-
</p>
|
|
37
|
-
|
|
38
|
-
#### Ejemplo 2
|
|
39
|
-
|
|
40
|
-
<p>
|
|
41
|
-
<div class="list-grid-demo-2">
|
|
42
|
-
<ul>
|
|
43
|
-
<li class="hover-cell">Vuelo 1 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
44
|
-
<li class="hover-cell">Vuelo 2 - Sale <b>18:00</b> LLega <b>22:00</b> 2 Escala</li>
|
|
45
|
-
<li class="hover-cell">Vuelo 3 - Sale <b>18:00</b> LLega <b>20:00</b> Directo</li>
|
|
46
|
-
<li class="hover-cell">Vuelo 4 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
|
|
47
|
-
<li class="hover-cell">Vuelo 5 - Sale <b>18:00</b> LLega <b>20:30</b> Directo</li>
|
|
48
|
-
</ul>
|
|
49
|
-
</div>
|
|
50
|
-
</p>
|
|
51
|
-
|
|
52
|
-
#### Ejemplo 3
|
|
53
|
-
|
|
54
|
-
<p>
|
|
55
|
-
<div class="list-grid-demo-3">
|
|
56
|
-
<ul class="first">
|
|
57
|
-
<li class="first"></li>
|
|
58
|
-
<li class="even">30 min</li>
|
|
59
|
-
<li>60 min</li>
|
|
60
|
-
<li class="even">90 min</li>
|
|
61
|
-
</ul>
|
|
62
|
-
<ul>
|
|
63
|
-
<li class="first">Vuelo DL - 110</li>
|
|
64
|
-
<li class="even">0%</li>
|
|
65
|
-
<li>10%</li>
|
|
66
|
-
<li class="even">0%</li>
|
|
67
|
-
</ul>
|
|
68
|
-
</div>
|
|
69
|
-
</p>
|
|
70
|
-
|
|
71
|
-
#### Ejemplo 4
|
|
72
|
-
|
|
73
|
-
<p>
|
|
74
|
-
<div class="list-grid-demo-4">
|
|
75
|
-
<ul class="first">
|
|
76
|
-
<li class="first"></li>
|
|
77
|
-
<li class="even">30 min</li>
|
|
78
|
-
<li>60 min</li>
|
|
79
|
-
<li class="even">90 min</li>
|
|
80
|
-
</ul>
|
|
81
|
-
<ul>
|
|
82
|
-
<li class="first">Vuelo DL - 110</li>
|
|
83
|
-
<li class="hover-cell even">0%</li>
|
|
84
|
-
<li class="hover-cell">10%</li>
|
|
85
|
-
<li class="hover-cell even">0%</li>
|
|
86
|
-
</ul>
|
|
87
|
-
<ul>
|
|
88
|
-
<li class="first">Vuelo DL - 25</li>
|
|
89
|
-
<li class="hover-cell even">10%</li>
|
|
90
|
-
<li></li>
|
|
91
|
-
<li class="hover-cell even">6%</li>
|
|
92
|
-
</ul>
|
|
93
|
-
</div>
|
|
94
|
-
</p>
|
|
95
|
-
|
|
96
|
-
### HTML
|
|
97
|
-
|
|
98
|
-
```html
|
|
99
|
-
<div class="list-grid">
|
|
100
|
-
<ul>
|
|
101
|
-
<li></li>
|
|
102
|
-
<li>Lorem</li>
|
|
103
|
-
<li>Ipsum</li>
|
|
104
|
-
<li>Dolorem</li>
|
|
105
|
-
</ul>
|
|
106
|
-
<ul>
|
|
107
|
-
<li>Donec</li>
|
|
108
|
-
<li class="hover-cell">Nullam</li>
|
|
109
|
-
<li class="hover-cell">Morbi</li>
|
|
110
|
-
<li class="hover-cell">Praesent</li>
|
|
111
|
-
</ul>
|
|
112
|
-
</div>
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
> **Nota**: La clase "hover-cell" es utilizada para indicar cuando una celda reacciona ante el hover.
|
|
116
|
-
|
|
117
|
-
### Sass
|
|
118
|
-
|
|
119
|
-
```css
|
|
120
|
-
@import "picasso/components/list-grids";
|
|
121
|
-
|
|
122
|
-
// Con valores por defecto
|
|
123
|
-
.text-input {
|
|
124
|
-
@include list-grid();
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
// Con todos los parametros: cell-width, cell-height, border-color, odd-color, even-color, hover-color
|
|
128
|
-
|
|
129
|
-
.text-input {
|
|
130
|
-
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
Importación:
|
|
136
|
-
|
|
137
|
-
```css
|
|
138
|
-
@import "picasso/components/list-grids";
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
Mixin con los parámetros por defecto:
|
|
142
|
-
|
|
143
|
-
```css
|
|
144
|
-
.list{
|
|
145
|
-
@include list-grid();
|
|
146
|
-
}
|
|
147
|
-
```
|
|
148
|
-
|
|
149
|
-
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:
|
|
150
|
-
|
|
151
|
-
```css
|
|
152
|
-
.list{
|
|
153
|
-
@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
|
|
154
|
-
}
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
> **Nota**: El color para el estado hover debe ser en hexadecimal.
|
|
158
|
-
|
|
159
|
-
### Compatibilidad con IE < 9
|
|
160
|
-
|
|
161
|
-
Para la compatibilidad con Internet Explorer < 9 se deben agregar las siguientes clases al HTML: `even`, `odd`, `first`
|
|
162
|
-
|
|
163
|
-
### HTML compatible con IE < 9
|
|
164
|
-
|
|
165
|
-
```html
|
|
166
|
-
<div class="list-grid">
|
|
167
|
-
<ul class="first">
|
|
168
|
-
<li class="first odd"></li>
|
|
169
|
-
<li class="even">30 min</li>
|
|
170
|
-
<li class="odd">60 min</li>
|
|
171
|
-
<li class="even">90 min</li>
|
|
172
|
-
</ul>
|
|
173
|
-
<ul>
|
|
174
|
-
<li class="first odd">Vuelo DL - 110</li>
|
|
175
|
-
<li class="even">0%</li>
|
|
176
|
-
<li class="odd">10%</li>
|
|
177
|
-
<li class="even">0%</li>
|
|
178
|
-
</ul>
|
|
179
|
-
</div>
|
|
180
|
-
```
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
## Navs
|
|
2
|
-
|
|
3
|
-
Barras de navegación.
|
|
4
|
-
|
|
5
|
-
### Ejemplos
|
|
6
|
-
|
|
7
|
-
#### Ejemplo 1
|
|
8
|
-
|
|
9
|
-
<div class="nav-demo-1">
|
|
10
|
-
<ul>
|
|
11
|
-
<li>
|
|
12
|
-
<a href="#">Hoteles</a>
|
|
13
|
-
</li>
|
|
14
|
-
<li>
|
|
15
|
-
<a href="#">Vuelos</a>
|
|
16
|
-
</li>
|
|
17
|
-
<li>
|
|
18
|
-
<a href="#">Paquetes</a>
|
|
19
|
-
</li>
|
|
20
|
-
<li>
|
|
21
|
-
<a href="#">Cruceros</a>
|
|
22
|
-
</li>
|
|
23
|
-
<li class="last active">
|
|
24
|
-
<a href="#">Autos</a>
|
|
25
|
-
</li>
|
|
26
|
-
</ul>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
#### Ejemplo 2
|
|
31
|
-
|
|
32
|
-
<div class="nav-demo-2">
|
|
33
|
-
<ul>
|
|
34
|
-
<li>
|
|
35
|
-
<a href="#">Hoteles</a>
|
|
36
|
-
</li>
|
|
37
|
-
<li class="active">
|
|
38
|
-
<a href="#">Vuelos</a>
|
|
39
|
-
</li>
|
|
40
|
-
<li>
|
|
41
|
-
<a href="#">Paquetes</a>
|
|
42
|
-
</li>
|
|
43
|
-
<li>
|
|
44
|
-
<a href="#">Cruceros</a>
|
|
45
|
-
</li>
|
|
46
|
-
<li class="last">
|
|
47
|
-
<a href="#">Autos</a>
|
|
48
|
-
</li>
|
|
49
|
-
</ul>
|
|
50
|
-
</div>
|
|
51
|
-
|
|
52
|
-
### HTML
|
|
53
|
-
|
|
54
|
-
```html
|
|
55
|
-
<div class="nav">
|
|
56
|
-
<ul>
|
|
57
|
-
<li>
|
|
58
|
-
<a href="#">Item</a>
|
|
59
|
-
</li>
|
|
60
|
-
<li class="active">
|
|
61
|
-
<a href="#">Item</a>
|
|
62
|
-
</li>
|
|
63
|
-
<li class="last">
|
|
64
|
-
<a href="#">Item</a>
|
|
65
|
-
</li>
|
|
66
|
-
</ul>
|
|
67
|
-
</div>
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### Sass
|
|
71
|
-
|
|
72
|
-
Importación:
|
|
73
|
-
|
|
74
|
-
```css
|
|
75
|
-
@import "picasso/components/navs";
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
Mixin con los parámetros por defecto:
|
|
79
|
-
|
|
80
|
-
```css
|
|
81
|
-
.nav{
|
|
82
|
-
@include nav();
|
|
83
|
-
}
|
|
84
|
-
```
|
|
85
|
-
|
|
86
|
-
Mixin con parámetros personalizados. Disponibles: ancho, alto, background, borde, sombra y float:
|
|
87
|
-
|
|
88
|
-
```css
|
|
89
|
-
.nav{
|
|
90
|
-
@include nav(435px, 30px, #1164BF, #083C78, black, right);
|
|
91
|
-
}
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
### Fallback para IE
|
|
95
|
-
|
|
96
|
-
Variable y valor por defecto:
|
|
97
|
-
|
|
98
|
-
```css
|
|
99
|
-
$nav-ie-fallback: "sprites";
|
|
100
|
-
```
|
|
101
|
-
|
|
102
|
-
Estrategias soportadas:
|
|
103
|
-
|
|
104
|
-
* `sprites`
|
|
105
|
-
* `GD`
|
|
106
|
-
|
|
107
|
-
> **Nota**: Para compatibilidad con versiones anteriores a Internet Explorer 9, se debe agregar la clase `last` al HTML del último item de la navegación.
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
## Pagination
|
|
2
|
-
|
|
3
|
-
Implementación tradicional del paginador.
|
|
4
|
-
|
|
5
|
-
### Ejemplos
|
|
6
|
-
|
|
7
|
-
#### Ejemplo 1
|
|
8
|
-
|
|
9
|
-
<div class="pagination-demo-1">
|
|
10
|
-
<ul>
|
|
11
|
-
<li class="prev">
|
|
12
|
-
<a href="#">Anterior</a>
|
|
13
|
-
</li>
|
|
14
|
-
<li>
|
|
15
|
-
<a href="#">1</a>
|
|
16
|
-
</li>
|
|
17
|
-
<li>
|
|
18
|
-
<a href="#">2</a>
|
|
19
|
-
</li>
|
|
20
|
-
<li class="active">
|
|
21
|
-
<a>3</a>
|
|
22
|
-
</li>
|
|
23
|
-
<li>
|
|
24
|
-
<a href="#">4</a>
|
|
25
|
-
</li>
|
|
26
|
-
<li class="disabled">
|
|
27
|
-
<a href="#">5</a>
|
|
28
|
-
</li>
|
|
29
|
-
<li class="dots">
|
|
30
|
-
<a>...</a>
|
|
31
|
-
</li>
|
|
32
|
-
<li>
|
|
33
|
-
<a href="#">12</a>
|
|
34
|
-
</li>
|
|
35
|
-
<li class="next">
|
|
36
|
-
<a href="#">Siguiente</a>
|
|
37
|
-
</li>
|
|
38
|
-
</ul>
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
#### Ejemplo 2
|
|
42
|
-
|
|
43
|
-
<div class="pagination-demo-2">
|
|
44
|
-
<ul>
|
|
45
|
-
<li>
|
|
46
|
-
<a href="#">1</a>
|
|
47
|
-
</li>
|
|
48
|
-
<li>
|
|
49
|
-
<a href="#">2</a>
|
|
50
|
-
</li>
|
|
51
|
-
<li class="active">
|
|
52
|
-
<a>3</a>
|
|
53
|
-
</li>
|
|
54
|
-
<li>
|
|
55
|
-
<a href="#">4</a>
|
|
56
|
-
</li>
|
|
57
|
-
<li>
|
|
58
|
-
<a href="#">5</a>
|
|
59
|
-
</li>
|
|
60
|
-
</ul>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
### HTML
|
|
64
|
-
|
|
65
|
-
```html
|
|
66
|
-
<div class="pagination">
|
|
67
|
-
<ul>
|
|
68
|
-
<li class="prev">
|
|
69
|
-
<a href="#">Anterior</a>
|
|
70
|
-
</li>
|
|
71
|
-
<li>
|
|
72
|
-
<a href="#">1</a>
|
|
73
|
-
</li>
|
|
74
|
-
<li class="active">
|
|
75
|
-
<a>2</a>
|
|
76
|
-
</li>
|
|
77
|
-
<li class="disabled">
|
|
78
|
-
<a href="#">3</a>
|
|
79
|
-
</li>
|
|
80
|
-
<li class="dots">
|
|
81
|
-
<a>...</a>
|
|
82
|
-
</li>
|
|
83
|
-
<li class="next">
|
|
84
|
-
<a href="#">Siguiente</a>
|
|
85
|
-
</li>
|
|
86
|
-
</ul>
|
|
87
|
-
</div>
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
### Sass
|
|
91
|
-
|
|
92
|
-
Importación:
|
|
93
|
-
|
|
94
|
-
```css
|
|
95
|
-
@import "picasso/components/pagination";
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
Mixin con los parámetros por defecto:
|
|
99
|
-
|
|
100
|
-
```css
|
|
101
|
-
.pagination{
|
|
102
|
-
@include pagination();
|
|
103
|
-
}
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
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:
|
|
107
|
-
|
|
108
|
-
```css
|
|
109
|
-
.pagination{
|
|
110
|
-
@include pagination(black, blue, white, red, 10px, yellow, green);
|
|
111
|
-
}
|
|
112
|
-
```
|