picasso 0.0.3 → 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
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
- ```