picasso 0.3.3 → 0.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. data/.gitignore +2 -1
  2. data/README.md +33 -29
  3. data/docs/_picasso.html +12 -9
  4. data/docs/all.html +57 -43
  5. data/docs/config.rb +1 -2
  6. data/docs/css/picasso-demos.css +1 -0
  7. data/docs/css/picasso-docs.css +1 -2502
  8. data/docs/docs.css +476 -0
  9. data/docs/docs.js +4 -0
  10. data/docs/img/picasso-popup.png +0 -0
  11. data/docs/index.html +44 -43
  12. data/docs/js/html5shiv.js +5 -0
  13. data/docs/picasso-_components.html +14 -11
  14. data/docs/picasso-_despegar.html +11 -8
  15. data/docs/picasso-_utils.html +12 -9
  16. data/docs/picasso-components-_accordions.html +13 -38
  17. data/docs/picasso-components-_arrows.html +13 -10
  18. data/docs/picasso-components-_bubbles.html +14 -11
  19. data/docs/picasso-components-_buttons.html +12 -9
  20. data/docs/picasso-components-_inputs.html +13 -10
  21. data/docs/picasso-components-_list-grids.html +14 -11
  22. data/docs/picasso-components-_navs.html +14 -11
  23. data/docs/picasso-components-_pagination.html +13 -10
  24. data/docs/picasso-components-_popups.html +17 -14
  25. data/docs/picasso-components-_tooltips.html +14 -11
  26. data/docs/picasso-components-buttons-_3d.html +17 -14
  27. data/docs/picasso-components-buttons-_glossy.html +14 -11
  28. data/docs/picasso-components-buttons-_mini.html +14 -11
  29. data/docs/picasso-despegar-_variables.html +15 -12
  30. data/docs/picasso-utils-_clearfix.html +13 -10
  31. data/docs/picasso-utils-_grid.html +17 -14
  32. data/docs/picasso-utils-_ie.html +12 -9
  33. data/docs/picasso-utils-_sprite.html +12 -9
  34. data/docs/previews.js +33 -0
  35. data/docs/resources/docs.jade +52 -26
  36. data/docs/sass/picasso-demos.scss +330 -0
  37. data/docs/sass/picasso-docs.scss +75 -300
  38. data/lib/picasso/version.rb +1 -1
  39. data/package.json +7 -0
  40. data/stylesheets/picasso/_components.scss +1 -1
  41. data/stylesheets/picasso/components/_accordions.scss +0 -28
  42. data/stylesheets/picasso/components/_arrows.scss +1 -1
  43. data/stylesheets/picasso/components/_bubbles.scss +1 -1
  44. data/stylesheets/picasso/components/_list-grids.scss +1 -1
  45. data/stylesheets/picasso/components/_navs.scss +1 -1
  46. data/stylesheets/picasso/components/_popups.scss +3 -3
  47. data/stylesheets/picasso/components/buttons/_3d.scss +1 -1
  48. data/stylesheets/picasso/components/buttons/_glossy.scss +1 -1
  49. data/stylesheets/picasso/components/buttons/_mini.scss +1 -1
  50. data/stylesheets/picasso/utils/_grid.scss +1 -1
  51. metadata +11 -5
  52. data/docs/resources/docs.js +0 -52
@@ -1,350 +1,125 @@
1
- @import "compass";
2
- @import "picasso";
3
-
4
- .styledocco-docs{
5
-
6
- img{
7
- width: 100%;
8
- }
9
-
10
- .styledocco-example{
11
- font-family: sans-serif;
12
- font-size: 16px;
13
- }
1
+ @import "compass/css3";
14
2
 
3
+ body{
4
+ padding: 20px;
15
5
  }
16
6
 
17
- //Tooltips
7
+ [class^="picasso-"] {
18
8
 
19
- .styledocco-example{
20
-
21
- .tooltip-demo-1, .tooltip-demo-2, .tooltip-demo-3, .tooltip-demo-4{
22
- margin: 10px;
9
+ .content{
10
+ width: 80%;
11
+ float: right;
23
12
  }
24
13
 
25
- }
26
-
27
- .tooltip-demo-1{
28
- @include tooltip();
29
- }
30
-
31
- .tooltip-demo-2{
32
- @include tooltip(black, white, 0.8em, "right");
33
- left: 140px;
34
- }
35
-
36
- .tooltip-demo-3{
37
- @include tooltip(#0074CC, white, 1.2em, "left");
38
- }
39
-
40
- .tooltip-demo-4{
41
- @include tooltip(#FAA732, white, 1.2em, "right");
42
- left: 300px;
43
- }
44
-
45
- //Glossy Buttons
46
- .button-glossy-demo-1{
47
- @include button-glossy();
48
- }
49
-
50
- .button-glossy-demo-2{
51
- @include button-glossy(70px, 30px, #0088CC, white);
52
- }
53
-
54
- .button-glossy-demo-3{
55
- @include button-glossy(80px, 30px, #FBB450, white);
56
- }
57
-
58
- //3D Buttons
59
- .button-3d-demo-1{
60
- @include button-3d();
61
- }
62
-
63
- .button-3d-demo-2{
64
- @include button-3d(#0088CC, white);
65
- }
66
-
67
- .button-3d-demo-3{
68
- @include button-3d(#FBB450, white);
69
- }
70
-
71
- .button-3d-demo-4 {
72
- @include button-3d(#013d93, #FFF, 24px, true, false);
73
- }
74
-
75
- .button-3d-demo-5 {
76
- @include button-3d(#EEE, #013d93, 11px, false, true);
77
- }
78
-
79
- //Mini-Buttons
80
- .button-mini-demo-1{
81
- @include button-mini();
82
- }
83
-
84
- .button-mini-demo-2{
85
- @include button-mini(#0088CC, white);
86
- }
87
-
88
- .button-mini-demo-3{
89
- @include button-mini(#DA4F49, white);
90
- }
91
-
92
- .button-mini-demo-4{
93
- @include button-mini(#414141, white);
94
- }
95
-
96
- //List grid
97
- .list-grid-demo-1 {
98
- @include list-grid();
99
- }
100
-
101
- //Nav
102
- .nav-demo-1{
103
- @include nav();
104
- }
105
-
106
- // Popups
107
-
108
- .picasso-_popups{
109
-
110
- .styledocco-example{
14
+ aside{
15
+ width: 18%;
16
+ margin-right: 2%;
17
+ float: left;
18
+ background-clip: padding-box;
19
+ background-color: #FFFFFF;
20
+ border: 1px solid rgba(0, 0, 0, 0.1);
21
+ @include border-radius (5px 5px 5px 5px);
22
+ @include box-shadow(0 0 3px rgba(0, 0, 0, 0.1));
111
23
  position: relative;
112
- height: 150px;
113
- }
114
-
115
- }
116
-
117
- .popup-demo-1{
118
- @include popup();
119
- }
24
+ z-index: 2;
120
25
 
121
- .popup-demo-2 {
122
- @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);
123
- }
26
+ ul{
27
+ list-style: none;
28
+ padding: 0;
124
29
 
125
- //Bubbles
126
- .bubble-demo-1{
127
- @include bubble();
128
- }
30
+ ul, ul:last-child{
31
+ margin: 0 10px;
32
+ }
129
33
 
130
- //Accordions
131
- .accordion-demo-1{
132
- @include accordion();
133
- }
34
+ }
134
35
 
135
- //Pagination
136
- .pagination-demo-1{
137
- @include pagination();
138
- }
139
-
140
- // inputs
141
- .text-input-demo-1 {
142
- @include input();
143
- }
36
+ p{
37
+ margin: 10px 0 0 0;
38
+ font-weight: bold;
39
+ color: #535E68;
144
40
 
145
- .select-demo-1 {
146
- @include input();
147
- }
41
+ &:first-letter{
42
+ text-transform: uppercase;
43
+ }
148
44
 
149
- //Arrows
150
- .picasso-_tooltips{
45
+ }
151
46
 
152
- .styledocco-example{
153
- height: 50px;
154
47
  }
155
48
 
156
- }
157
-
158
- .arrow-demo-1, .arrow-demo-2, .arrow-demo-3, .arrow-demo-4{
159
- margin: 0 10px 0 0;
160
- }
161
-
162
- .arrow-demo-1{
163
- @include arrow();
164
- }
165
-
166
- .arrow-demo-2{
167
- @include arrow(#B94A48, white);
168
- }
169
-
170
- .arrow-demo-3{
171
- @include arrow(#F89406, white);
172
- }
173
-
174
- .arrow-demo-4{
175
- @include arrow(#468847, white);
176
- }
177
-
178
- //Grillas
179
- @include grid();
180
-
181
- .row-col {
182
- margin: 10px 0;
183
- }
184
-
185
- [class^="col"] {
186
- @include border-radius(5px);
187
- background: #CCC;
188
- }
189
-
190
- [class^="col"] [class^="col"] {
191
- background: #AAA;
192
- }
49
+ blockquote{
50
+ background: #F8F9FB;
51
+ padding: 5px;
52
+ @include border-radius(5px);
193
53
 
194
- [class^="col"] [class^="col"] [class^="col"] {
195
- background: #696969;
196
- color: #C0C0C0;
197
- }
54
+ p{
198
55
 
199
- //Clearfix
56
+ &:last-child{
57
+ margin: 0;
58
+ }
200
59
 
201
- .clearfix-demo{
202
- background: #58608D;
203
- width: 100%;
204
- padding: 10px;
205
- @include clearfix();
60
+ }
206
61
 
207
- div{
208
- background: white;
209
62
  }
210
63
 
211
- }
212
-
213
- //Despegar
214
-
215
- .despegar-size-1-demo{
216
- font-size: $despegar-size-1;
217
- }
218
-
219
- .despegar-size-2-demo{
220
- font-size: $despegar-size-2;
221
- }
222
-
223
- .despegar-size-3-demo{
224
- font-size: $despegar-size-3;
225
- }
226
-
227
- .despegar-size-4-demo{
228
- font-size: $despegar-size-4;
229
- }
64
+ .bar.bottom{
65
+ display: none;
66
+ }
230
67
 
231
- .despegar-size-5-demo{
232
- font-size: $despegar-size-5;
233
68
  }
234
69
 
235
- .despegar-size-6-demo{
236
- font-size: $despegar-size-6;
237
- }
70
+ .picasso-{
238
71
 
239
- .despegar-black-demo{
240
- padding: 10px;
241
- background: $despegar-black;
242
- color: white;
243
- }
72
+ .container{
73
+ max-width: 960px;
74
+ }
244
75
 
245
- .despegar-white-demo{
246
- padding: 10px;
247
- background: $despegar-white;
248
- }
76
+ .section{
249
77
 
250
- .despegar-yellow-demo{
251
- padding: 10px;
252
- background: $despegar-yellow;
253
- }
78
+ &:first-child{
254
79
 
255
- .despegar-red-demo{
256
- padding: 10px;
257
- background: $despegar-red;
258
- }
80
+ img{
81
+ display: block;
82
+ margin: 0 auto;
83
+ }
259
84
 
260
- .despegar-blue-demo{
261
- padding: 10px;
262
- background: $despegar-blue;
263
- color: white;
264
- }
85
+ }
265
86
 
266
- .despegar-gray-1-demo{
267
- padding: 10px;
268
- background: $despegar-gray-1;
269
- color: white;
270
- }
87
+ }
271
88
 
272
- .despegar-gray-2-demo{
273
- padding: 10px;
274
- background: $despegar-gray-2;
275
- color: white;
276
- }
89
+ .docs{
90
+ width: 100%;
91
+ }
277
92
 
278
- .despegar-gray-3-demo{
279
- padding: 10px;
280
- background: $despegar-gray-3;
281
- color: white;
282
93
  }
283
94
 
284
- .despegar-gray-4-demo{
285
- padding: 10px;
286
- background: $despegar-gray-4;
287
- color: white;
288
- }
95
+ .picasso-_grid{
289
96
 
290
- .despegar-gray-5-demo{
291
- padding: 10px;
292
- background: $despegar-gray-5;
293
- color: white;
294
- }
97
+ .bar.bottom{
98
+ display: block;
99
+ }
295
100
 
296
- .despegar-gray-6-demo{
297
- padding: 10px;
298
- background: $despegar-gray-6;
299
101
  }
300
102
 
301
- .despegar-gray-7-demo{
302
- padding: 10px;
303
- background: $despegar-gray-7;
304
- }
103
+ .picasso-_components{
305
104
 
306
- .despegar-searchbox-bg-demo{
307
- padding: 10px;
308
- background: $despegar-searchbox-bg;
309
- }
105
+ .preview{
106
+ display: none;
107
+ }
310
108
 
311
- .despegar-title-color-demo{
312
- padding: 10px;
313
- background: $despegar-title-color;
314
- color: white;
315
109
  }
316
110
 
317
- .despegar-titlealt-color-demo{
318
- padding: 10px;
319
- background: $despegar-titlealt-color;
320
- }
111
+ .picasso-_popups{
321
112
 
322
- .despegar-link-color-demo{
323
- padding: 10px;
324
- background: $despegar-link-color;
325
- }
113
+ .resizeable{
114
+ height: 220px!important;
115
+ }
326
116
 
327
- .despegar-link-color-hover-demo{
328
- padding: 10px;
329
- background: $despegar-link-color-hover;
330
117
  }
331
118
 
332
- .despegar-error-bg-demo{
333
- padding: 10px;
334
- background: $despegar-error-bg;
335
- }
119
+ .picasso-_tooltips{
336
120
 
337
- .despegar-error-border-demo{
338
- padding: 10px;
339
- background: $despegar-error-border;
340
- }
121
+ .resizeable{
122
+ height: 100px!important;
123
+ }
341
124
 
342
- .despegar-warning-bg-demo{
343
- padding: 10px;
344
- background: $despegar-warning-bg;
345
125
  }
346
-
347
- .despegar-warning-border-demo{
348
- padding: 10px;
349
- background: $despegar-warning-border;
350
- }
@@ -1,3 +1,3 @@
1
1
  module Picasso
2
- VERSION = "0.3.3"
2
+ VERSION = "0.3.4"
3
3
  end
@@ -0,0 +1,7 @@
1
+ {
2
+ "name": "picasso",
3
+ "version": "0.3.4",
4
+ "dependencies": {
5
+ "styledocco": "0.5.x"
6
+ }
7
+ }
@@ -9,7 +9,7 @@
9
9
  // carga los estilos generados por Picasso posean la [técnica de clases condicionales
10
10
  // en la etiqueta html](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/):
11
11
 
12
- // ```
12
+ // ```html
13
13
  // <!DOCTYPE html>
14
14
  // <!--[if IE 7]> <html class="ie7"> <![endif]-->
15
15
  // <!--[if IE 8]> <html class="ie8"> <![endif]-->
@@ -129,32 +129,4 @@ $accordion-default-font-size: 0.8em !default;
129
129
 
130
130
  }
131
131
 
132
- .ie7 &{
133
-
134
- .accordion-header{
135
-
136
- .accordion-arrow{
137
- zoom: expression( this.runtimeStyle.zoom="1", this.innerHTML="<span class='open'>&#9660;</span><span class='close'>&#9658;</span>" );
138
- }
139
-
140
- &.accordion-header-open{
141
-
142
- .close{
143
- display: none;
144
- }
145
-
146
- }
147
-
148
- &.accordion-header-close{
149
-
150
- .open{
151
- display: none;
152
- }
153
-
154
- }
155
-
156
- }
157
-
158
- }
159
-
160
132
  }