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
data/lib/picasso/version.rb
CHANGED
data/picasso.gemspec
CHANGED
|
@@ -14,7 +14,7 @@ Gem::Specification.new do |gem|
|
|
|
14
14
|
gem.name = "picasso"
|
|
15
15
|
gem.require_paths = ["lib"]
|
|
16
16
|
gem.version = Picasso::VERSION
|
|
17
|
-
gem.post_install_message = "\n\n##################################################\n## Picasso - Sass/Compass Framework\n\n## Versión: " + Picasso::VERSION + "\n## Documentación: http://dl.dropbox.com/u/54126/picasso/docs/
|
|
17
|
+
gem.post_install_message = "\n\n##################################################\n## Picasso - Sass/Compass Framework\n\n## Versión: " + Picasso::VERSION + "\n## Documentación: http://dl.dropbox.com/u/54126/picasso/docs/index.html\n## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/index.html#changelog\n##################################################\n\n"
|
|
18
18
|
|
|
19
19
|
gem.add_dependency("compass", [">= 0.12.1"])
|
|
20
20
|
gem.add_dependency("compass-magick", [">= 0.1.6"])
|
data/stylesheets/_picasso.scss
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
// ## Picasso
|
|
2
|
+
|
|
3
|
+
// Módulo principal que importa los siguientes sub-módulos:
|
|
4
|
+
|
|
5
|
+
// * `utils` ([sección dedicada](picasso-_utils.html))
|
|
6
|
+
// * `components` ([sección dedicada](picasso-_components.html))
|
|
7
|
+
// * `despegar` ([sección dedicada](picasso-_utils.html))
|
|
8
|
+
|
|
9
|
+
// ### Sass
|
|
10
|
+
|
|
11
|
+
// #### Import
|
|
12
|
+
|
|
13
|
+
// `@import "picasso";`
|
|
14
|
+
|
|
1
15
|
@import "picasso/utils";
|
|
2
16
|
@import "picasso/components";
|
|
3
17
|
@import "picasso/despegar";
|
|
@@ -1,7 +1,61 @@
|
|
|
1
|
+
// ## Components
|
|
2
|
+
|
|
3
|
+
// Representan a elementos comunes/patrones utilizados a lo largo del sitio.
|
|
4
|
+
// Estan pensandos para ser flexibles y configurables para ser implementados en distintas situaciones.
|
|
5
|
+
// La gran mayoría de los componentes hacen uso intensivo de estilos CSS3 y ofrecen estrategías
|
|
6
|
+
// alternativas ([fallback](https://encrypted.google.com/search?hl=en&q=fallback%20definition)) para navegadores
|
|
7
|
+
// que no soportan dichos estilos (Internet Explorer <= 9).
|
|
8
|
+
// Para tener compatibilidad con Internet Explorer, el único requisito es que la página que
|
|
9
|
+
// carga los estilos generados por Picasso posean la [técnica de clases condicionales
|
|
10
|
+
// en la etiqueta html](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/):
|
|
11
|
+
|
|
12
|
+
// ```
|
|
13
|
+
// <!DOCTYPE html>
|
|
14
|
+
// <!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
15
|
+
// <!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
16
|
+
// <!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
17
|
+
// <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
|
|
18
|
+
// ```
|
|
19
|
+
|
|
20
|
+
// ### Estrategias y estilos de fallback para IE en componentes
|
|
21
|
+
|
|
22
|
+
// Para ciertos componentes, Picasso ofrece dos estrategias para aplicar estilos de fallback.
|
|
23
|
+
// Dichas estrategías se setean en variables individuales de cada componente,
|
|
24
|
+
// por ejemplo: `$<componente>-ie-fallback: <estrategia>`.
|
|
25
|
+
|
|
26
|
+
// Actualmente existen dos estrategías para determinados componentes:
|
|
27
|
+
|
|
28
|
+
// * `sprites`: Picasso generará dinamicamente un sprite para recrear los estilos de cada elemento
|
|
29
|
+
// y seteará los estilos para que Internet Explorer utilice el sprite generado.
|
|
30
|
+
// * `GD`: Picasso seteará estilos minimos, soportados por Internet Explorer, para que el
|
|
31
|
+
// componente siga siendo usable y funcional.
|
|
32
|
+
|
|
33
|
+
// ## Componentes disponibles
|
|
34
|
+
|
|
35
|
+
// El sub-módulo `components` importa los siguientes componentes:
|
|
36
|
+
|
|
37
|
+
// * `buttons` ([sección dedicada](picasso-components-_buttons.html))
|
|
38
|
+
// * `inputs` ([sección dedicada](picasso-components-_inputs.html))
|
|
39
|
+
// * `list-grids` ([sección dedicada](picasso-components-_list-grids.html))
|
|
40
|
+
// * `arrows` ([sección dedicada](picasso-components-_arrows.html))
|
|
41
|
+
// * `pagination` ([sección dedicada](picasso-components-_pagination.html))
|
|
42
|
+
// * `bubbles` ([sección dedicada](picasso-components-_bubbles.html))
|
|
43
|
+
// * `popups` ([sección dedicada](picasso-components-_popups.html))
|
|
44
|
+
// * `accordions` ([sección dedicada](picasso-components-_accordions.html))
|
|
45
|
+
// * `navs` ([sección dedicada](picasso-components-_navs.html))
|
|
46
|
+
|
|
47
|
+
// ### Sass
|
|
48
|
+
|
|
49
|
+
// #### Import
|
|
50
|
+
|
|
51
|
+
// `@import "picasso/components";`
|
|
52
|
+
|
|
53
|
+
|
|
1
54
|
@import "components/buttons";
|
|
2
55
|
@import "components/inputs";
|
|
3
56
|
@import "components/list-grids";
|
|
4
57
|
@import "components/arrows";
|
|
58
|
+
@import "components/mini-tooltips";
|
|
5
59
|
@import "components/pagination";
|
|
6
60
|
@import "components/bubbles";
|
|
7
61
|
@import "components/popups";
|
|
@@ -1 +1,13 @@
|
|
|
1
|
+
// ## Despegar
|
|
2
|
+
|
|
3
|
+
// Sub-módulo que importa las siguientes utilidades:
|
|
4
|
+
|
|
5
|
+
// * `variables` ([sección dedicada](picasso-despegar-_variables.html))
|
|
6
|
+
|
|
7
|
+
// ### Sass
|
|
8
|
+
|
|
9
|
+
// #### Import
|
|
10
|
+
|
|
11
|
+
// `@import "picasso/despegar";`
|
|
12
|
+
|
|
1
13
|
@import "despegar/variables";
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
// ## Utils
|
|
2
|
+
|
|
3
|
+
// Sub-módulo que importa las siguientes utilidades:
|
|
4
|
+
|
|
5
|
+
// * `clearfix` ([sección dedicada](picasso-utils-_clearfix.html))
|
|
6
|
+
// * `sprite` ([sección dedicada](picasso-utils-_sprite.html))
|
|
7
|
+
// * `ie` ([sección dedicada](picasso-utils-_ie.html))
|
|
8
|
+
// * `grid` ([sección dedicada](picasso-utils-_grid.html))
|
|
9
|
+
|
|
10
|
+
// ### Sass
|
|
11
|
+
|
|
12
|
+
// #### Import
|
|
13
|
+
|
|
14
|
+
// `@import "picasso/utils";`
|
|
15
|
+
|
|
1
16
|
@import "utils/clearfix";
|
|
2
17
|
@import "utils/sprite";
|
|
3
|
-
@import "utils/ie";
|
|
18
|
+
@import "utils/ie";
|
|
19
|
+
@import "utils/grid";
|
|
@@ -1,6 +1,56 @@
|
|
|
1
|
+
// ## Accordions
|
|
2
|
+
|
|
3
|
+
// Para mostrar información en espacios reducidos.
|
|
4
|
+
|
|
5
|
+
// ### Ejemplo
|
|
6
|
+
|
|
7
|
+
// ```
|
|
8
|
+
// <div class="accordion-demo-1">
|
|
9
|
+
// <div class="accordion-section">
|
|
10
|
+
// <div class="accordion-header accordion-header-open">
|
|
11
|
+
// <h4>Lorem</h4>
|
|
12
|
+
// <span class="arrow"></span>
|
|
13
|
+
// </div>
|
|
14
|
+
// <div class="accordion-content">
|
|
15
|
+
// <span>Lorem ipsum</span>
|
|
16
|
+
// </div>
|
|
17
|
+
// </div>
|
|
18
|
+
// <div class="accordion-section">
|
|
19
|
+
// <div class="accordion-header accordion-header-close">
|
|
20
|
+
// <h4>Ipsum</h4>
|
|
21
|
+
// <span class="arrow"></span>
|
|
22
|
+
// </div>
|
|
23
|
+
// <div class="accordion-content">
|
|
24
|
+
// <span>Lorem ipsum</span>
|
|
25
|
+
// </div>
|
|
26
|
+
// </div>
|
|
27
|
+
// </div>
|
|
28
|
+
// ```
|
|
29
|
+
|
|
30
|
+
// > **Nota**: Para tener un header cerrado se utiliza la clase `accordion-header-close`.
|
|
31
|
+
// El componente no incluye las funciones JavaScript para ocultar y mostrar el contenido de cada acordeón.
|
|
32
|
+
|
|
33
|
+
// ### Sass
|
|
34
|
+
|
|
35
|
+
// #### Import
|
|
36
|
+
|
|
37
|
+
// `@import "picasso/components/accordions";`
|
|
38
|
+
|
|
39
|
+
// #### Mixins
|
|
40
|
+
|
|
41
|
+
// Con los parámetros por defecto:
|
|
42
|
+
|
|
43
|
+
// `@include accordion();`
|
|
44
|
+
|
|
45
|
+
// Con todos los parámetros:
|
|
1
46
|
//
|
|
2
|
-
//
|
|
3
|
-
//
|
|
47
|
+
// * `height`
|
|
48
|
+
// * `background-color` (título)
|
|
49
|
+
// * `color` (título)
|
|
50
|
+
|
|
51
|
+
// `@include accordion(40px, #CCCCCC, #000000);`
|
|
52
|
+
|
|
53
|
+
|
|
4
54
|
$accordion-default-height: 20px !default;
|
|
5
55
|
$accordion-default-background-color: #013D93 !default;
|
|
6
56
|
$accordion-default-text-color: #FFFFFF !default;
|
|
@@ -1,6 +1,43 @@
|
|
|
1
|
+
// ## Arrows
|
|
2
|
+
|
|
3
|
+
// Excelentes para avisos importantes.
|
|
4
|
+
|
|
5
|
+
// ### Ejemplos
|
|
6
|
+
|
|
7
|
+
// ```
|
|
8
|
+
// <em class="arrow-demo-1">
|
|
9
|
+
// Información
|
|
10
|
+
// </em>
|
|
11
|
+
// <em class="arrow-demo-2">
|
|
12
|
+
// Importante
|
|
13
|
+
// </em>
|
|
14
|
+
// <em class="arrow-demo-3">
|
|
15
|
+
// Leer
|
|
16
|
+
// </em>
|
|
17
|
+
// <em class="arrow-demo-4">
|
|
18
|
+
// Aceptado
|
|
19
|
+
// </em>
|
|
20
|
+
// ```
|
|
21
|
+
|
|
22
|
+
// ### Sass
|
|
23
|
+
|
|
24
|
+
// #### Import
|
|
25
|
+
|
|
26
|
+
// `@import "picasso/components/arrows";`
|
|
27
|
+
|
|
28
|
+
// #### Mixins
|
|
29
|
+
|
|
30
|
+
// Con los parámetros por defecto:
|
|
31
|
+
|
|
32
|
+
// `@include arrow();`
|
|
33
|
+
|
|
34
|
+
// Con todos los parámetros:
|
|
1
35
|
//
|
|
2
|
-
//
|
|
3
|
-
//
|
|
36
|
+
// * `background-color`
|
|
37
|
+
// * `color`
|
|
38
|
+
|
|
39
|
+
// `@include arrow(green, white);`
|
|
40
|
+
|
|
4
41
|
|
|
5
42
|
@import "picasso/utils/ie";
|
|
6
43
|
|
|
@@ -1,6 +1,40 @@
|
|
|
1
|
+
// ## Bubbles
|
|
2
|
+
|
|
3
|
+
// Ideales para citar comentarios de clientes.
|
|
4
|
+
|
|
5
|
+
// ### Ejemplos
|
|
6
|
+
|
|
7
|
+
// ```
|
|
8
|
+
// <div class="bubble-demo-1">
|
|
9
|
+
// <h4>Lorem ipsum</h4>
|
|
10
|
+
// <blockquote>
|
|
11
|
+
// 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.
|
|
12
|
+
// </blockquote>
|
|
13
|
+
// </div>
|
|
14
|
+
// ```
|
|
15
|
+
|
|
16
|
+
// ### Sass
|
|
17
|
+
|
|
18
|
+
// #### Import
|
|
19
|
+
|
|
20
|
+
// `@import "picasso/components/bubbles";`
|
|
21
|
+
|
|
22
|
+
// #### Mixins
|
|
23
|
+
|
|
24
|
+
// Con los parámetros por defecto:
|
|
25
|
+
|
|
26
|
+
// `@include bubble();`
|
|
27
|
+
|
|
28
|
+
// Con todos los parámetros:
|
|
1
29
|
//
|
|
2
|
-
//
|
|
3
|
-
//
|
|
30
|
+
// * `width`
|
|
31
|
+
// * `background-color`
|
|
32
|
+
// * `color`
|
|
33
|
+
// * `ellipsis`
|
|
34
|
+
// * `ellipsis position`
|
|
35
|
+
|
|
36
|
+
// `@include bubble(200px, blue, white, true, left);`
|
|
37
|
+
|
|
4
38
|
|
|
5
39
|
@import "compass/css3/border-radius";
|
|
6
40
|
@import "compass/typography/text/ellipsis";
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
// ## Buttons
|
|
2
|
+
|
|
3
|
+
// Sub-módulo que importa los siguientes componentes:
|
|
4
|
+
|
|
5
|
+
// * `button-3d` ([sección dedicada](picasso-components-buttons-_3d.html))
|
|
6
|
+
// * `button-glossy` ([sección dedicada](picasso-components-buttons-_glossy.html))
|
|
7
|
+
// * `button-mini` ([sección dedicada](picasso-components-buttons-_mini.html))
|
|
8
|
+
|
|
9
|
+
// ### Sass
|
|
10
|
+
|
|
11
|
+
// #### Import
|
|
12
|
+
|
|
13
|
+
// `@import "picasso/components/buttons";`
|
|
14
|
+
|
|
1
15
|
@import "buttons/3d";
|
|
2
16
|
@import "buttons/glossy";
|
|
3
17
|
@import "buttons/mini";
|
|
@@ -1,6 +1,45 @@
|
|
|
1
|
+
// ## Inputs
|
|
2
|
+
|
|
3
|
+
// Estilos para inputs de textos y selects.
|
|
4
|
+
|
|
5
|
+
// ### Ejemplos
|
|
6
|
+
|
|
7
|
+
// ```
|
|
8
|
+
// <input type="text" class="text-input-demo-1">
|
|
9
|
+
//
|
|
10
|
+
// <select class="select-demo-1">
|
|
11
|
+
// <option value="1">1</option>
|
|
12
|
+
// <option value="2">2</option>
|
|
13
|
+
// <option value="3">3</option>
|
|
14
|
+
// </select>
|
|
15
|
+
// ```
|
|
16
|
+
|
|
17
|
+
// ### Sass
|
|
18
|
+
|
|
19
|
+
// #### Import
|
|
20
|
+
|
|
21
|
+
// `@import "picasso/components/inputs";`
|
|
22
|
+
|
|
23
|
+
// #### Mixins
|
|
24
|
+
|
|
25
|
+
// Con los parámetros por defecto:
|
|
26
|
+
|
|
27
|
+
// `@include input();`
|
|
28
|
+
|
|
29
|
+
// Con todos los parámetros:
|
|
1
30
|
//
|
|
2
|
-
//
|
|
3
|
-
//
|
|
31
|
+
// * `width`
|
|
32
|
+
// * `height`
|
|
33
|
+
// * `border-color`
|
|
34
|
+
// * `border-color` (al hacer foco)
|
|
35
|
+
// * `border-radius`
|
|
36
|
+
// * `color`
|
|
37
|
+
// * `font-size`
|
|
38
|
+
|
|
39
|
+
// `@include input(100px, 20px, #DDD, blue, 5px, black, 14px);`
|
|
40
|
+
|
|
41
|
+
// > **Nota**: El color del borde debe ser en formato hexadecimal.
|
|
42
|
+
|
|
4
43
|
|
|
5
44
|
@import "compass/css3/border-radius";
|
|
6
45
|
@import "compass/css3/box-sizing";
|
|
@@ -1,6 +1,87 @@
|
|
|
1
|
+
// ## List Grid
|
|
2
|
+
|
|
3
|
+
// Para mostrar datos en una grilla utilizando listas.
|
|
4
|
+
|
|
5
|
+
// ### Ejemplos
|
|
6
|
+
|
|
7
|
+
// ```
|
|
8
|
+
// <div class="list-grid-demo-1">
|
|
9
|
+
// <ul class="first first-column">
|
|
10
|
+
// <li></li>
|
|
11
|
+
// <li>30 min</li>
|
|
12
|
+
// <li>60 min</li>
|
|
13
|
+
// <li>90 min</li>
|
|
14
|
+
// </ul>
|
|
15
|
+
// <ul>
|
|
16
|
+
// <li>Vuelo DL - 110</li>
|
|
17
|
+
// <li class="cell-hover">0%</li>
|
|
18
|
+
// <li class="cell-hover">10%</li>
|
|
19
|
+
// <li class="cell-hover">0%</li>
|
|
20
|
+
// </ul>
|
|
21
|
+
// <ul>
|
|
22
|
+
// <li>Vuelo DD - 112</li>
|
|
23
|
+
// <li class="cell-hover">10%</li>
|
|
24
|
+
// <li class="cell-hover">10%</li>
|
|
25
|
+
// <li class="cell-hover">0%</li>
|
|
26
|
+
// </ul>
|
|
27
|
+
// <ul>
|
|
28
|
+
// <li>Vuelo DL - 50</li>
|
|
29
|
+
// <li class="cell-hover">30%</li>
|
|
30
|
+
// <li class="cell-hover">20%</li>
|
|
31
|
+
// <li class="cell-hover">5%</li>
|
|
32
|
+
// </ul>
|
|
33
|
+
// </div>
|
|
34
|
+
// ```
|
|
35
|
+
|
|
36
|
+
// > **Nota**: La clase "cell-hover" es utilizada para indicar cuando una celda reacciona ante el hover.
|
|
37
|
+
|
|
38
|
+
// ### Sass
|
|
39
|
+
|
|
40
|
+
// #### Import
|
|
41
|
+
|
|
42
|
+
// `@import "picasso/components/list-grids";`
|
|
43
|
+
|
|
44
|
+
// #### Mixins
|
|
45
|
+
|
|
46
|
+
// Con los parámetros por defecto:
|
|
47
|
+
|
|
48
|
+
// `@include list-grid();`
|
|
49
|
+
|
|
50
|
+
// Con todos los parámetros:
|
|
1
51
|
//
|
|
2
|
-
//
|
|
3
|
-
//
|
|
52
|
+
// * `width` (de cada celda)
|
|
53
|
+
// * `height` (de cada celda)
|
|
54
|
+
// * `border-color`
|
|
55
|
+
// * `background-color` (filas pares)
|
|
56
|
+
// * `background-color` (filas impares)
|
|
57
|
+
// * `background-color` (hover celda)
|
|
58
|
+
|
|
59
|
+
// `@include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);`
|
|
60
|
+
|
|
61
|
+
// > **Nota**: El color para el estado hover debe ser en formato hexadecimal.
|
|
62
|
+
|
|
63
|
+
// ### Compatibilidad con IE < 9
|
|
64
|
+
|
|
65
|
+
// Para la compatibilidad con Internet Explorer < 9 se deben agregar las siguientes clases al HTML: `even`, `odd`, `first`
|
|
66
|
+
|
|
67
|
+
// ### Ejemplo
|
|
68
|
+
|
|
69
|
+
// ```
|
|
70
|
+
// <div class="list-grid-demo-1">
|
|
71
|
+
// <ul class="first">
|
|
72
|
+
// <li class="first odd"></li>
|
|
73
|
+
// <li class="even">30 min</li>
|
|
74
|
+
// <li class="odd">60 min</li>
|
|
75
|
+
// <li class="even">90 min</li>
|
|
76
|
+
// </ul>
|
|
77
|
+
// <ul>
|
|
78
|
+
// <li class="first odd">Vuelo DL - 110</li>
|
|
79
|
+
// <li class="even">0%</li>
|
|
80
|
+
// <li class="odd">10%</li>
|
|
81
|
+
// <li class="even">0%</li>
|
|
82
|
+
// </ul>
|
|
83
|
+
// </div>
|
|
84
|
+
// ```
|
|
4
85
|
|
|
5
86
|
@import "picasso/utils/clearfix";
|
|
6
87
|
|
|
@@ -86,7 +167,7 @@ $list-grid-default-hover-color: #319fda !default;
|
|
|
86
167
|
|
|
87
168
|
}
|
|
88
169
|
|
|
89
|
-
& li.hover
|
|
170
|
+
& li.cell-hover:hover {
|
|
90
171
|
border: $cell-border solid $hover-color;
|
|
91
172
|
background: lighten($hover-color, 45%);
|
|
92
173
|
cursor: pointer;
|