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.
Files changed (68) hide show
  1. data/.gitignore +1 -0
  2. data/docs/accordions.html +267 -0
  3. data/docs/all.html +934 -56
  4. data/docs/arrows.html +45 -8
  5. data/docs/bubbles.html +49 -10
  6. data/docs/build/manifest.json +19 -2
  7. data/docs/build/md/changelog.md +16 -0
  8. data/docs/build/md/components/accordions.md +97 -0
  9. data/docs/build/md/{arrows.md → components/arrows.md} +10 -2
  10. data/docs/build/md/{bubbles.md → components/bubbles.md} +16 -4
  11. data/docs/build/md/{buttons.md → components/buttons.md} +50 -5
  12. data/docs/build/md/components/components.md +37 -0
  13. data/docs/build/md/components/inputs.md +73 -0
  14. data/docs/build/md/components/list-grids.md +180 -0
  15. data/docs/build/md/components/navs.md +107 -0
  16. data/docs/build/md/components/pagination.md +112 -0
  17. data/docs/build/md/components/popups.md +162 -0
  18. data/docs/build/md/{despegar.md → despegar/despegar.md} +0 -0
  19. data/docs/build/md/intro.md +3 -2
  20. data/docs/build/md/mejoras.md +69 -0
  21. data/docs/build/md/todo.md +11 -1
  22. data/docs/build/md/utils/utils.md +62 -0
  23. data/docs/buttons.html +80 -14
  24. data/docs/changelog.html +74 -2
  25. data/docs/components.html +65 -2
  26. data/docs/config.rb +14 -6
  27. data/docs/css/markdown.css +8 -0
  28. data/docs/css/style.css +1508 -64
  29. data/docs/despegar.html +34 -2
  30. data/docs/ie.html +42 -11
  31. data/docs/img/picasso-buttons.png +0 -0
  32. data/docs/img/picasso-mini-buttons.png +0 -0
  33. data/docs/img/picasso-nav.png +0 -0
  34. data/docs/img/picasso-popup.png +0 -0
  35. data/docs/index.html +37 -4
  36. data/docs/{docs.html → inputs.html} +95 -21
  37. data/docs/intro.html +37 -4
  38. data/docs/js/docs.js +16 -0
  39. data/docs/js/viewer.js +12 -0
  40. data/docs/list-grids.html +341 -0
  41. data/docs/mejoras.html +241 -0
  42. data/docs/navs.html +272 -0
  43. data/docs/pagination.html +277 -0
  44. data/docs/popups.html +328 -0
  45. data/docs/sass/style.scss +113 -0
  46. data/docs/todo.html +49 -3
  47. data/docs/utils.html +68 -3
  48. data/lib/picasso/version.rb +1 -1
  49. data/picasso.gemspec +2 -0
  50. data/stylesheets/picasso/_components.scss +7 -1
  51. data/stylesheets/picasso/_utils.scss +3 -1
  52. data/stylesheets/picasso/components/_accordions.scss +96 -0
  53. data/stylesheets/picasso/components/_arrows.scss +9 -3
  54. data/stylesheets/picasso/components/_bubbles.scss +28 -17
  55. data/stylesheets/picasso/components/_inputs.scss +59 -0
  56. data/stylesheets/picasso/components/_list-grids.scss +118 -0
  57. data/stylesheets/picasso/components/_navs.scss +266 -0
  58. data/stylesheets/picasso/components/_pagination.scss +144 -0
  59. data/stylesheets/picasso/components/_popups.scss +257 -0
  60. data/stylesheets/picasso/components/buttons/_buttons.scss +124 -54
  61. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +87 -19
  62. data/stylesheets/picasso/utils/_ie.scss +36 -0
  63. data/stylesheets/picasso/utils/_sprite.scss +32 -0
  64. metadata +65 -13
  65. data/docs/build/md/components.md +0 -3
  66. data/docs/build/md/docs.md +0 -21
  67. data/docs/build/md/ie.md +0 -32
  68. data/docs/build/md/utils.md +0 -19
data/stylesheets/picasso/components/buttons/_mini-buttons.scss CHANGED
@@ -5,13 +5,23 @@
5
5
  @import "compass/css3/images";
6
6
  @import "compass/css3/box-shadow";
7
7
  @import "compass/css3/border-radius";
8
- @import "compass/css3/pie";
8
+ @import "picasso/utils/sprite";
9
+
9
10
 
10
- $mini-button-default-height : 20px;
11
- $mini-button-default-font-size: 11px;
12
11
  $mini-button-default-background: #F0F0F0;
13
12
  $mini-button-default-color: #0E6695;
14
- $experimental-support-for-pie: false;
13
+
14
+ $mini-button-font-family: sans-serif;
15
+ $mini-button-default-height : 20px;
16
+ $mini-button-default-canvas-height : $mini-button-default-height;
17
+ $mini-button-default-canvas-width: 200px;
18
+ $mini-button-default-font-size: 11px;
19
+ $mini-button-default-padding: 10px;
20
+ $mini-button-default-image-dir: '';
21
+
22
+ $mini-button-sprite-created: false !default;
23
+ $mini-button-sprite-name: "picasso-mini-buttons";
24
+ $mini-button-ie-fallback: "sprites" !default;
15
25
 
16
26
  @mixin mini-button(
17
27
 
@@ -19,18 +29,26 @@ $experimental-support-for-pie: false;
19
29
  $background: $mini-button-default-background,
20
30
 
21
31
  // Color del botón
22
- $color: $mini-button-default-color){
32
+ $color: $mini-button-default-color
33
+ ){
23
34
 
24
35
  @include mini-button-layout();
25
36
  @include mini-button-visual($background, $color);
26
37
 
27
38
  }
28
39
 
29
- @mixin mini-button-visual($background, $color){
40
+ @mixin mini-button-visual(
41
+
42
+ // Background del boton
43
+ $background: $mini-button-default-background,
44
+
45
+ // Color del botón
46
+ $color: $mini-button-default-color
47
+ ){
30
48
 
31
- font-family: sans-serif;
49
+ font-family: $mini-button-font-family;
32
50
  text-decoration: none;
33
- text-align: center;
51
+ cursor: pointer;
34
52
  @include background(linear-gradient(top, $background 0%, darken($background, 5%) 50%, darken($background, 10%) 51%, darken($background, 15%) 100%));
35
53
  @include border-radius($mini-button-default-height);
36
54
  @include box-shadow(#333 0px 1px 2px 0px);
@@ -50,16 +68,65 @@ $experimental-support-for-pie: false;
50
68
  font-size: $mini-button-default-font-size;
51
69
  }
52
70
 
53
- .ie9 &, .ie8 &, .ie7 &{
54
-
55
- @if $experimental-support-for-pie == true {
56
-
57
- @include pie;
58
-
71
+ .ie7 &, .ie8 &, .ie9 &{
72
+
73
+ @if $mini-button-ie-fallback == "sprites" {
74
+
75
+ $mini-button-image: magick-canvas($mini-button-default-canvas-width, $mini-button-default-canvas-height * 2,
76
+
77
+ //Normal
78
+ magick-compose(
79
+ magick-canvas($mini-button-default-canvas-width, $mini-button-default-canvas-height,
80
+ magick-compose(
81
+ magick-canvas($mini-button-default-canvas-width, $mini-button-default-canvas-height - 2,
82
+ magick-fill(magick-linear-gradient($background 0%, darken($background, 5%) 50%, darken($background, 10%) 51%, darken($background, 15%) 100%)),
83
+ magick-corners($mini-button-default-canvas-height / 2)
84
+ )
85
+ ),
86
+ magick-drop-shadow(270deg, 2px, 2px, #333)
87
+ )
88
+ ),
89
+
90
+ //Hover
91
+ magick-compose(
92
+
93
+ magick-canvas($mini-button-default-canvas-width, $mini-button-default-canvas-height,
94
+ magick-compose(
95
+ magick-canvas($mini-button-default-canvas-width, $mini-button-default-canvas-height - 2,
96
+ magick-fill(magick-linear-gradient(darken($background, 5%))),
97
+ magick-corners($mini-button-default-canvas-height / 2)
98
+ )
99
+ ),
100
+ magick-drop-shadow(270deg, 2px, 2px, #333)
101
+ ),
102
+
103
+ 0, $mini-button-default-canvas-height
104
+ )
105
+
106
+ );
107
+
108
+ $initial-position: insert-in-sprite($mini-button-sprite-created, $mini-button-sprite-name, $mini-button-image, $mini-button-default-canvas-width, ($mini-button-default-canvas-height * 2));
109
+ $mini-button-sprite-created: true;
110
+
111
+ background: generated-image-url($mini-button-sprite-name + ".png");
112
+ background-position: right ((-1) * $initial-position);
113
+
114
+ &:hover{
115
+ background-position: right ((-1) * ($initial-position + $mini-button-default-height));
116
+ }
117
+
118
+ span {
119
+ background-image: generated-image-url($mini-button-sprite-name + ".png");
120
+ background-color: white;
121
+ background-position: 0 ((-1) * $initial-position);
122
+
123
+ &:hover{
124
+ background-position: 0 ((-1) * ($initial-position + $mini-button-default-height));
125
+ }
126
+ }
127
+
59
128
  } @else {
60
-
61
- background-color: $background;
62
-
129
+ background-color: $background;
63
130
  }
64
131
 
65
132
  }
@@ -70,12 +137,13 @@ $experimental-support-for-pie: false;
70
137
 
71
138
  display: inline-block;
72
139
  height: $mini-button-default-height;
73
- padding-right: $mini-button-default-height;
140
+ padding-right: $mini-button-default-padding;
141
+ padding-right: $mini-button-default-padding;
74
142
 
75
143
  span{
76
144
  height: $mini-button-default-height;
77
- padding: 0 0 0 $mini-button-default-height;
78
145
  line-height: $mini-button-default-height;
146
+ padding-left: $mini-button-default-padding;
79
147
  }
80
148
 
81
149
  }
data/stylesheets/picasso/utils/_ie.scss ADDED
@@ -0,0 +1,36 @@
1
+ //
2
+ // IE
3
+ //
4
+
5
+
6
+ //
7
+ // Permite crear un elemento HTML para poder simular el uso de after y before.
8
+ //
9
+ // @example
10
+ // .my-element {
11
+ // @include after;
12
+ // @include before;
13
+ //
14
+ // .ie7 & {
15
+ // .after{
16
+ // ...
17
+ // }
18
+ //
19
+ // .before{
20
+ // ...
21
+ // }
22
+ // }
23
+ //
24
+ // }
25
+ //
26
+ // @see http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/9369163
27
+ //
28
+ //
29
+
30
+ @mixin after{
31
+ zoom: expression( this.runtimeStyle.zoom="1", this.appendChild( document.createElement("i") ).className="after" );
32
+ }
33
+
34
+ @mixin before{
35
+ zoom: expression( this.runtimeStyle.zoom="1", this.insertBefore( document.createElement("i"), this.firstChild ).className="before" );
36
+ }
data/stylesheets/picasso/utils/_sprite.scss ADDED
@@ -0,0 +1,32 @@
1
+ //
2
+ // Sprite
3
+ //
4
+
5
+ $sprite-image: '';
6
+
7
+ @function insert-in-sprite($create-new, $sprite-name, $image, $width, $height) {
8
+ @if $create-new == false {
9
+ $sprite: magick-sprite($sprite-name, magick-canvas(1px, 1px));
10
+ }
11
+
12
+ $sprite-height: image-height($sprite-name + ".png");
13
+ $sprite-width: image-width($sprite-name + ".png");
14
+
15
+ @if $sprite-width < $width {
16
+ $sprite-width: $width;
17
+ }
18
+
19
+ $sprite-image: magick-sprite($sprite-name,
20
+ magick-canvas($sprite-width, $sprite-height + $height,
21
+ magick-compose(
22
+ magick-canvas($sprite-name + ".png")
23
+ ),
24
+
25
+ magick-compose(
26
+ $image, 0px, $sprite-height
27
+ )
28
+ )
29
+ );
30
+
31
+ @return $sprite-height;
32
+ }
metadata CHANGED
@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
4
4
  prerelease: false
5
5
  segments:
6
6
  - 0
7
+ - 1
7
8
  - 0
8
- - 3
9
- version: 0.0.3
9
+ version: 0.1.0
10
10
  platform: ruby
11
11
  authors:
12
12
  - Leandro D'Onofrio
@@ -14,7 +14,7 @@ autorequire:
14
14
  bindir: bin
15
15
  cert_chain: []
16
16
 
17
- date: 2012-06-22 00:00:00 -03:00
17
+ date: 2012-07-13 00:00:00 -03:00
18
18
  default_executable:
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency
@@ -31,6 +31,34 @@ dependencies:
31
31
  version: 0.12.1
32
32
  type: :runtime
33
33
  version_requirements: *id001
34
+ - !ruby/object:Gem::Dependency
35
+ name: compass-magick
36
+ prerelease: false
37
+ requirement: &id002 !ruby/object:Gem::Requirement
38
+ requirements:
39
+ - - ">="
40
+ - !ruby/object:Gem::Version
41
+ segments:
42
+ - 0
43
+ - 1
44
+ - 6
45
+ version: 0.1.6
46
+ type: :runtime
47
+ version_requirements: *id002
48
+ - !ruby/object:Gem::Dependency
49
+ name: oily_png
50
+ prerelease: false
51
+ requirement: &id003 !ruby/object:Gem::Requirement
52
+ requirements:
53
+ - - ">="
54
+ - !ruby/object:Gem::Version
55
+ segments:
56
+ - 1
57
+ - 0
58
+ - 2
59
+ version: 1.0.2
60
+ type: :runtime
61
+ version_requirements: *id003
34
62
  description: Picasso - Sass/Compass Framework
35
63
  email:
36
64
  - ldonofrio@despegar.com
@@ -46,21 +74,27 @@ files:
46
74
  - LICENSE
47
75
  - README.md
48
76
  - Rakefile
77
+ - docs/accordions.html
49
78
  - docs/all.html
50
79
  - docs/arrows.html
51
80
  - docs/bubbles.html
52
81
  - docs/build/manifest.json
53
- - docs/build/md/arrows.md
54
- - docs/build/md/bubbles.md
55
- - docs/build/md/buttons.md
56
82
  - docs/build/md/changelog.md
57
- - docs/build/md/components.md
58
- - docs/build/md/despegar.md
59
- - docs/build/md/docs.md
60
- - docs/build/md/ie.md
83
+ - docs/build/md/components/accordions.md
84
+ - docs/build/md/components/arrows.md
85
+ - docs/build/md/components/bubbles.md
86
+ - docs/build/md/components/buttons.md
87
+ - docs/build/md/components/components.md
88
+ - docs/build/md/components/inputs.md
89
+ - docs/build/md/components/list-grids.md
90
+ - docs/build/md/components/navs.md
91
+ - docs/build/md/components/pagination.md
92
+ - docs/build/md/components/popups.md
93
+ - docs/build/md/despegar/despegar.md
61
94
  - docs/build/md/intro.md
95
+ - docs/build/md/mejoras.md
62
96
  - docs/build/md/todo.md
63
- - docs/build/md/utils.md
97
+ - docs/build/md/utils/utils.md
64
98
  - docs/build/templates/index.html
65
99
  - docs/build/templates/layout.html
66
100
  - docs/build/templates/page.html
@@ -72,12 +106,22 @@ files:
72
106
  - docs/css/markdown.css
73
107
  - docs/css/style.css
74
108
  - docs/despegar.html
75
- - docs/docs.html
76
109
  - docs/ie.html
110
+ - docs/img/picasso-buttons.png
111
+ - docs/img/picasso-mini-buttons.png
112
+ - docs/img/picasso-nav.png
113
+ - docs/img/picasso-popup.png
77
114
  - docs/index.html
115
+ - docs/inputs.html
78
116
  - docs/intro.html
79
117
  - docs/js/docs.js
80
118
  - docs/js/rainbow-custom.min.js
119
+ - docs/js/viewer.js
120
+ - docs/list-grids.html
121
+ - docs/mejoras.html
122
+ - docs/navs.html
123
+ - docs/pagination.html
124
+ - docs/popups.html
81
125
  - docs/sass/style.scss
82
126
  - docs/todo.html
83
127
  - docs/utils.html
@@ -88,13 +132,21 @@ files:
88
132
  - stylesheets/picasso/_components.scss
89
133
  - stylesheets/picasso/_despegar.scss
90
134
  - stylesheets/picasso/_utils.scss
135
+ - stylesheets/picasso/components/_accordions.scss
91
136
  - stylesheets/picasso/components/_arrows.scss
92
137
  - stylesheets/picasso/components/_bubbles.scss
93
138
  - stylesheets/picasso/components/_buttons.scss
139
+ - stylesheets/picasso/components/_inputs.scss
140
+ - stylesheets/picasso/components/_list-grids.scss
141
+ - stylesheets/picasso/components/_navs.scss
142
+ - stylesheets/picasso/components/_pagination.scss
143
+ - stylesheets/picasso/components/_popups.scss
94
144
  - stylesheets/picasso/components/buttons/_buttons.scss
95
145
  - stylesheets/picasso/components/buttons/_mini-buttons.scss
96
146
  - stylesheets/picasso/despegar/_variables.scss
97
147
  - stylesheets/picasso/utils/_clearfix.scss
148
+ - stylesheets/picasso/utils/_ie.scss
149
+ - stylesheets/picasso/utils/_sprite.scss
98
150
  - templates/project/manifest.rb
99
151
  has_rdoc: true
100
152
  homepage: http://www.despegar.com/
@@ -103,7 +155,7 @@ licenses: []
103
155
  post_install_message: "\n\n\
104
156
  ##################################################\n\
105
157
  ## Picasso - Sass/Compass Framework\n\n\
106
- ## Versi\xC3\xB3n: 0.0.3\n\
158
+ ## Versi\xC3\xB3n: 0.1.0\n\
107
159
  ## Documentaci\xC3\xB3n: http://dl.dropbox.com/u/54126/picasso/docs/all.html\n\
108
160
  ## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/changelog.html#changelog\n\
109
161
  ##################################################\n\n"
data/docs/build/md/components.md DELETED
@@ -1,3 +0,0 @@
1
- ----------------
2
-
3
- # Components
data/docs/build/md/docs.md DELETED
@@ -1,21 +0,0 @@
1
- # Generar la documentaci&oacute;n
2
-
3
- * Para generar una nueva versi&oacute;n de la documentaci&oacute;n es necesario tener instalado node.js: http://nodejs.org/#download
4
-
5
- * Abrir una terminal e instalar [Beautiful docs](http://beautifuldocs.com/):
6
-
7
- ```bash
8
- $ npm install beautiful-docs -g
9
- ```
10
-
11
- * Crear (o actualizar) los archivos `.md` (`docs/build/md`) con la documentaci&oacute;n pertinente. En caso de agregar un nuevo archivo `.md`, actualizar el `manifest.json`.
12
-
13
- Nota: Cada `.md` es un archivo de texto plano escrito con la sintaxis [markdown](http://daringfireball.net/projects/markdown/basics).
14
-
15
- * Pararse sobre la carpeta raiz del proyecto y ejecutar:
16
-
17
- ```bash
18
- bfdocs --base-url='.' --templates-dir='docs/build/templates/' docs/build/manifest.json docs
19
- ```
20
-
21
- * Revisar que la documentaci&oacute;n se haya generado correctamente abriendo el archivo `.html` pertinente.
data/docs/build/md/ie.md DELETED
@@ -1,32 +0,0 @@
1
- ## Internet Explorer
2
-
3
- La gran mayor&iacute;a de los componentes hacen uso intensivo de estilos CSS3 no soportados por versiones de Internet Explorer iguales o menores a 9. De manera predeterminada los componentes tienen estilos de fallback para tener compatibilidad con dicho navegador, el &uacute;nico requisito es que la p&aacute;gina que carga los estilos generados por Picasso posean la [t&eacute;cnica de clases condicionales en la etiqueta html](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/):
4
-
5
- ```html
6
- <!DOCTYPE html>
7
- <!--[if IE 7]> <html class="ie7"> <![endif]-->
8
- <!--[if IE 8]> <html class="ie8"> <![endif]-->
9
- <!--[if IE 9]> <html class="ie9"> <![endif]-->
10
- <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
11
- ```
12
-
13
- ### CSS3 Pie
14
-
15
- Picasso adem&aacute;s ofrece soporte para [CSS3 Pie](http://css3pie.com/). Su soporte esta apagado de forma predeterminada. Para habilitarlo, en el archivo Sass que hace uso de los mixins, agregar la siguiente variable:
16
-
17
- ```css
18
- $experimental-support-for-pie: true;
19
- ```
20
-
21
- Notas:
22
- - Tambi&eacute;n es requisito que la p&aacute;gina posea la t&eacute;cnica de clases condicionales en la etiqueta html.
23
- - Cuando el soporte de CSS3 Pie esta activado, los estilos de fallback no son cargados.
24
-
25
- Un punto importante a tener en cuenta es la definici&oacute; de la variable `$pie-behavior` con la ruta del archivo `.htc`:
26
-
27
- ```css
28
- $pie-behavior stylesheet-url("PIE.htc")
29
- ```
30
-
31
- Para otras opciones relacionadas, consultar la documentaci&oacute;n pertinente de Compass: http://compass-style.org/reference/compass/css3/pie/
32
-
data/docs/build/md/utils.md DELETED
@@ -1,19 +0,0 @@
1
- -------------------
2
-
3
- # Utils
4
-
5
- ## Clearfix
6
-
7
- Basado en http://nicolasgallagher.com/micro-clearfix-hack/.
8
-
9
- ### Sass
10
-
11
- ```css
12
- @import "picasso/utils/clearfix";
13
-
14
- //Clearfix
15
- .container{
16
- @include clearfix;
17
- }
18
-
19
- ```