picasso 0.2.3 → 0.3.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/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;
|