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/docs/sass/style.scss CHANGED
@@ -42,6 +42,66 @@ body{
42
42
  @include mini-button(#414141, white);
43
43
  }
44
44
 
45
+ // inputs
46
+ .text-input-demo-1 {
47
+ @include input();
48
+ }
49
+
50
+ .text-input-demo-2 {
51
+ @include input(120px, 20px, red, green, 10px);
52
+ }
53
+
54
+ .text-input-demo-3 {
55
+ @include input(200px, 40px, #DDD, blue, 3px, blue, 25px);
56
+ }
57
+
58
+ .select-demo-1 {
59
+ @include input();
60
+ }
61
+
62
+ .select-demo-2 {
63
+ @include input(120px, 20px, red, green, 10px);
64
+ }
65
+
66
+ .select-demo-3 {
67
+ @include input(200px, 40px, #DDD, blue, 3px, blue, 25px);
68
+ }
69
+
70
+ //Nav
71
+ .nav-demo-1{
72
+ @include nav();
73
+ }
74
+
75
+ .nav-demo-2{
76
+ @include nav(435px, 30px, #1164BF, #083C78, black, right);
77
+
78
+ a, a:hover{
79
+ color: white;
80
+ }
81
+
82
+ }
83
+
84
+ //List grid
85
+ .list-grid-demo-1 {
86
+ @include list-grid();
87
+
88
+ .first-column {
89
+ width: 100px;
90
+ }
91
+ }
92
+
93
+ .list-grid-demo-2 {
94
+ @include list-grid(400px, 30px, transparent, white, white);
95
+ }
96
+
97
+ .list-grid-demo-3 {
98
+ @include list-grid(130px, 40px, #999999, white, #319fda);
99
+ }
100
+
101
+ .list-grid-demo-4 {
102
+ @include list-grid(130px, 15px, black, #CCCCCC, #EEEEEE, #ff0000);
103
+ }
104
+
45
105
  //Arrows
46
106
  .arrow-demo-1{
47
107
  @include arrow();
@@ -59,6 +119,14 @@ body{
59
119
  @include arrow(#468847, white);
60
120
  }
61
121
 
122
+ //Pagination
123
+ .pagination-demo-1{
124
+ @include pagination();
125
+ }
126
+
127
+ .pagination-demo-2{
128
+ @include pagination(black, blue, white, red, 10px, yellow, green);
129
+ }
62
130
 
63
131
  //Bubbles
64
132
  .bubble-demo-1{
@@ -73,6 +141,51 @@ body{
73
141
  margin: 20px 0;
74
142
  }
75
143
 
144
+ // Popups
145
+ .popup-demo-1, .popup-demo-2, .popup-demo-3, .popup-demo-4 {
146
+ @include popup();
147
+ }
148
+
149
+ .popup-demo-5 {
150
+ @include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgb(1, 61, 147), 0.7, red, black, rgba(1, 61, 147, 0.7), white);
151
+
152
+ .popup-bottom-arrow {
153
+ &:after {
154
+ left: 132px
155
+ }
156
+ }
157
+ }
158
+
159
+ .popup-demo-6 {
160
+ @include popup(white, 20px, rgba(0, 0, 0, 0.5) 10px -10px 10px, rgb(68, 137, 81), 0.7, rgba(68, 137, 81, 0.7));
161
+
162
+ .popup-bottom-arrow {
163
+ &:after {
164
+ left: 132px
165
+ }
166
+ }
167
+ }
168
+
169
+ .popup-demo-container {
170
+ float: left;
171
+ width: 330px;
172
+ height: 180px;
173
+ positon: relative;
174
+
175
+ .ie8 &, .ie7 & {
176
+ width: 240px;
177
+ }
178
+ }
179
+
180
+ //Accordions
181
+ .accordion-demo-1{
182
+ @include accordion();
183
+ }
184
+
185
+ .accordion-demo-2{
186
+ @include accordion(40px, #CCCCCC, #000000);
187
+ width: 300px;
188
+ }
76
189
 
77
190
  //Despegar
78
191
 
data/docs/todo.html CHANGED
@@ -52,6 +52,8 @@
52
52
 
53
53
  <ol>
54
54
 
55
+ <li><a href="./changelog.html#010">0.1.0</a></li>
56
+
55
57
  <li><a href="./changelog.html#003">0.0.3</a></li>
56
58
 
57
59
  <li><a href="./changelog.html#002">0.0.2</a></li>
@@ -67,15 +69,29 @@
67
69
 
68
70
  <ol>
69
71
 
72
+ <li><a href="./todo.html#componentes">Componentes</a></li>
73
+
74
+ <li><a href="./todo.html#utilidades">Utilidades</a></li>
75
+
76
+ <li><a href="./todo.html#otros">Otros</a></li>
77
+
70
78
  </ol>
71
79
 
72
80
  </li>
73
81
 
74
82
  <li>
75
- <a href="./docs.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a>
83
+ <a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&amp;ntilde;adidos</a>
76
84
 
77
85
  <ol>
78
86
 
87
+ <li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&amp;oacute;digo fuente</a></li>
88
+
89
+ <li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&amp;ntilde;adidos/cambios:</a></li>
90
+
91
+ <li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
92
+
93
+ <li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a></li>
94
+
79
95
  </ol>
80
96
 
81
97
  </li>
@@ -85,15 +101,27 @@
85
101
 
86
102
  <ol>
87
103
 
104
+ <li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
105
+
88
106
  <li><a href="./buttons.html#buttons">Buttons</a></li>
89
107
 
90
108
  <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
91
109
 
110
+ <li><a href="./inputs.html#inputs">Inputs</a></li>
111
+
112
+ <li><a href="./navs.html#navs">Navs</a></li>
113
+
114
+ <li><a href="./list-grids.html#list-grid">List Grid</a></li>
115
+
92
116
  <li><a href="./arrows.html#arrows">Arrows</a></li>
93
117
 
118
+ <li><a href="./pagination.html#pagination">Pagination</a></li>
119
+
94
120
  <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
95
121
 
96
- <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
122
+ <li><a href="./popups.html#popups">Popups</a></li>
123
+
124
+ <li><a href="./accordions.html#accordions">Accordions</a></li>
97
125
 
98
126
  </ol>
99
127
 
@@ -106,6 +134,10 @@
106
134
 
107
135
  <li><a href="./utils.html#clearfix">Clearfix</a></li>
108
136
 
137
+ <li><a href="./utils.html#ie">IE</a></li>
138
+
139
+ <li><a href="./utils.html#sprite">Sprite</a></li>
140
+
109
141
  </ol>
110
142
 
111
143
  </li>
@@ -131,7 +163,21 @@
131
163
 
132
164
  <article>
133
165
  <a name="todo"></a><h1>Todo</h1>
134
- <p>...</p>
166
+ <a name="componentes"></a><h2>Componentes</h2>
167
+ <ul>
168
+ <li>Tabs;</li>
169
+ <li>Tooltips;</li>
170
+ <li>Breadcrumbs;</li>
171
+ </ul>
172
+ <a name="utilidades"></a><h2>Utilidades</h2>
173
+ <ul>
174
+ <li>Grillas responsivas;</li>
175
+ <li>Tipografias con pictogramas comunes;</li>
176
+ </ul>
177
+ <a name="otros"></a><h2>Otros</h2>
178
+ <ul>
179
+ <li>Creaci&oacute;n de sprites: Implementar API para poder detectar si un archivo ya existe y obtener el path de im&aacute;genes especificado en el config.rb.</li>
180
+ </ul>
135
181
 
136
182
  </article>
137
183
 
data/docs/utils.html CHANGED
@@ -52,6 +52,8 @@
52
52
 
53
53
  <ol>
54
54
 
55
+ <li><a href="./changelog.html#010">0.1.0</a></li>
56
+
55
57
  <li><a href="./changelog.html#003">0.0.3</a></li>
56
58
 
57
59
  <li><a href="./changelog.html#002">0.0.2</a></li>
@@ -67,15 +69,29 @@
67
69
 
68
70
  <ol>
69
71
 
72
+ <li><a href="./todo.html#componentes">Componentes</a></li>
73
+
74
+ <li><a href="./todo.html#utilidades">Utilidades</a></li>
75
+
76
+ <li><a href="./todo.html#otros">Otros</a></li>
77
+
70
78
  </ol>
71
79
 
72
80
  </li>
73
81
 
74
82
  <li>
75
- <a href="./docs.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a>
83
+ <a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&amp;ntilde;adidos</a>
76
84
 
77
85
  <ol>
78
86
 
87
+ <li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&amp;oacute;digo fuente</a></li>
88
+
89
+ <li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&amp;ntilde;adidos/cambios:</a></li>
90
+
91
+ <li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
92
+
93
+ <li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a></li>
94
+
79
95
  </ol>
80
96
 
81
97
  </li>
@@ -85,15 +101,27 @@
85
101
 
86
102
  <ol>
87
103
 
104
+ <li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
105
+
88
106
  <li><a href="./buttons.html#buttons">Buttons</a></li>
89
107
 
90
108
  <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
91
109
 
110
+ <li><a href="./inputs.html#inputs">Inputs</a></li>
111
+
112
+ <li><a href="./navs.html#navs">Navs</a></li>
113
+
114
+ <li><a href="./list-grids.html#list-grid">List Grid</a></li>
115
+
92
116
  <li><a href="./arrows.html#arrows">Arrows</a></li>
93
117
 
118
+ <li><a href="./pagination.html#pagination">Pagination</a></li>
119
+
94
120
  <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
95
121
 
96
- <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
122
+ <li><a href="./popups.html#popups">Popups</a></li>
123
+
124
+ <li><a href="./accordions.html#accordions">Accordions</a></li>
97
125
 
98
126
  </ol>
99
127
 
@@ -106,6 +134,10 @@
106
134
 
107
135
  <li><a href="./utils.html#clearfix">Clearfix</a></li>
108
136
 
137
+ <li><a href="./utils.html#ie">IE</a></li>
138
+
139
+ <li><a href="./utils.html#sprite">Sprite</a></li>
140
+
109
141
  </ol>
110
142
 
111
143
  </li>
@@ -136,13 +168,46 @@
136
168
  <p>Basado en <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>.
137
169
 
138
170
  </p>
139
- <a name="sass"></a><h3>Sass</h3>
171
+ <a name="sass"></a><a name="sass"></a><h3>Sass</h3>
140
172
  <pre><code class="lang-css">@import &quot;picasso/utils/clearfix&quot;;
141
173
 
142
174
  //Clearfix
143
175
  .container{
144
176
  @include clearfix;
145
177
  }</code></pre>
178
+ <a name="ie"></a><h2>IE</h2>
179
+ <a name="after-before"></a><h3>After / Before</h3>
180
+ <p>Soporte de <code>:after</code> y <code>:before</code> para Internet Explorer 7.
181
+
182
+ </p>
183
+ <p>Basado en <a href="http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/">http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/</a>
184
+
185
+ </p>
186
+ <a name="sass"></a><h4>Sass</h4>
187
+ <pre><code class="lang-css">@import &quot;picasso/utils/ie&quot;;
188
+
189
+ .my-element {
190
+ @include after;
191
+ @include before;
192
+
193
+ //Para IE quedan disponibles las clases .after y .before
194
+ //para aplicar los mismos estilos como si fueran pseudoselectores
195
+ .ie7 &amp; {
196
+ .after{
197
+ }
198
+
199
+ .before{
200
+ }
201
+ }
202
+ }</code></pre>
203
+ <a name="sprite"></a><h2>Sprite</h2>
204
+ <p>Inserta din&aacute;micamente im&aacute;genes de un componente espec&iacute;fico dentro de un sprite y devuelve la posici&oacute;n vertical en donde se insert&oacute;.
205
+
206
+ </p>
207
+ <h3>Sass</h3>
208
+ <pre><code class="lang-css">@import &quot;picasso/utils/sprite&quot;;
209
+
210
+ $initial-position: insert-in-sprite($sprite-created, $sprite-name, $sprite, $sprite-width, $sprite-height);</code></pre>
146
211
 
147
212
  </article>
148
213
 
data/lib/picasso/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Picasso
2
- VERSION = "0.0.3"
2
+ VERSION = "0.1.0"
3
3
  end
data/picasso.gemspec CHANGED
@@ -17,4 +17,6 @@ Gem::Specification.new do |gem|
17
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/all.html\n## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/changelog.html#changelog\n##################################################\n\n"
18
18
 
19
19
  gem.add_dependency("compass", [">= 0.12.1"])
20
+ gem.add_dependency("compass-magick", [">= 0.1.6"])
21
+ gem.add_dependency("oily_png", [">= 1.0.2"])
20
22
  end
data/stylesheets/picasso/_components.scss CHANGED
@@ -1,3 +1,9 @@
1
1
  @import "components/buttons";
2
+ @import "components/inputs";
3
+ @import "components/list-grids";
2
4
  @import "components/arrows";
3
- @import "components/bubbles";
5
+ @import "components/pagination";
6
+ @import "components/bubbles";
7
+ @import "components/popups";
8
+ @import "components/accordions";
9
+ @import "components/navs";
data/stylesheets/picasso/_utils.scss CHANGED
@@ -1 +1,3 @@
1
- @import "utils/clearfix";
1
+ @import "utils/clearfix";
2
+ @import "utils/sprite";
3
+ @import "utils/ie";
data/stylesheets/picasso/components/_accordions.scss ADDED
@@ -0,0 +1,96 @@
1
+ //
2
+ // Accordions
3
+ //
4
+ $accordion-default-height: 20px;
5
+ $accordion-default-background-color: #013D93;
6
+ $accordion-default-text-color: #FFFFFF;
7
+
8
+ $arrow-height: 8px;
9
+ $arrow-width: 5px;
10
+
11
+ @mixin accordion(
12
+ $height: $accordion-default-height,
13
+ $background-color: $accordion-default-background-color,
14
+ $text-color: $accordion-default-text-color
15
+ ) {
16
+
17
+ @include accordion-layout($height);
18
+ @include accordion-visual($background-color, $text-color);
19
+ }
20
+
21
+ @mixin accordion-visual(
22
+ $background-color: $accordion-default-background-color,
23
+ $text-color: $accordion-default-text-color
24
+ ) {
25
+
26
+ .accordion-header {
27
+ cursor: pointer;
28
+ background: $background-color;
29
+ border-bottom: 1px solid white;
30
+
31
+ h4 {
32
+ color: $text-color;
33
+ font-size: 13px;
34
+ }
35
+
36
+ }
37
+
38
+ .accordion-header-open {
39
+ .arrow {
40
+ border-left: $arrow-width solid transparent;
41
+ border-right: $arrow-width solid transparent;
42
+ border-top: $arrow-height solid $text-color;
43
+ }
44
+ }
45
+
46
+ .accordion-header-close {
47
+ .arrow {
48
+ border-left: $arrow-height solid $text-color;
49
+ border-bottom: $arrow-width solid transparent;
50
+ border-top: $arrow-width solid transparent;
51
+ }
52
+ }
53
+
54
+ .accordion-content {
55
+ border: 1px solid #CCCCCC;
56
+ }
57
+
58
+ }
59
+
60
+ @mixin accordion-layout($height: $accordion-default-height) {
61
+ .accordion-header {
62
+ position: relative;
63
+ height: $height;
64
+ padding: 0 10px;
65
+ display: block;
66
+
67
+ h4 {
68
+ line-height: $height;
69
+ margin: 0px;
70
+ }
71
+
72
+ .arrow {
73
+ height: 0;
74
+ position: absolute;
75
+ right: 10px;
76
+ width: 0;
77
+ }
78
+ }
79
+
80
+ .accordion-header-open {
81
+ .arrow {
82
+ top: ($height - $arrow-width) / 2;
83
+ }
84
+ }
85
+
86
+ .accordion-header-close {
87
+ .arrow {
88
+ top: ($height - $arrow-height) / 2;
89
+ }
90
+ }
91
+
92
+ .accordion-content {
93
+ position: relative;
94
+ top: -1px;
95
+ }
96
+ }