picasso 0.3.0 → 0.3.1

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 (39) hide show
  1. data/README.md +9 -2
  2. data/docs/_picasso.html +3 -3
  3. data/docs/{picasso-components-_mini-tooltips.html → all.html} +200 -116
  4. data/docs/css/picasso-docs.css +177 -181
  5. data/docs/index.html +14 -5
  6. data/docs/picasso-_components.html +5 -4
  7. data/docs/picasso-_despegar.html +3 -3
  8. data/docs/picasso-_utils.html +3 -3
  9. data/docs/picasso-components-_accordions.html +100 -86
  10. data/docs/picasso-components-_arrows.html +3 -3
  11. data/docs/picasso-components-_bubbles.html +4 -4
  12. data/docs/picasso-components-_buttons.html +3 -3
  13. data/docs/picasso-components-_inputs.html +3 -3
  14. data/docs/picasso-components-_list-grids.html +3 -3
  15. data/docs/picasso-components-_navs.html +12 -12
  16. data/docs/picasso-components-_pagination.html +3 -3
  17. data/docs/picasso-components-_popups.html +10 -10
  18. data/docs/picasso-components-_tooltips.html +163 -0
  19. data/docs/picasso-components-buttons-_3d.html +3 -3
  20. data/docs/picasso-components-buttons-_glossy.html +3 -3
  21. data/docs/picasso-components-buttons-_mini.html +8 -8
  22. data/docs/picasso-despegar-_variables.html +3 -3
  23. data/docs/picasso-utils-_clearfix.html +3 -3
  24. data/docs/picasso-utils-_grid.html +3 -3
  25. data/docs/picasso-utils-_ie.html +3 -3
  26. data/docs/picasso-utils-_sprite.html +3 -3
  27. data/docs/resources/docs.jade +1 -0
  28. data/docs/resources/docs.js +26 -26
  29. data/docs/sass/picasso-docs.scss +41 -14
  30. data/lib/picasso/version.rb +1 -1
  31. data/stylesheets/picasso/_components.scss +2 -1
  32. data/stylesheets/picasso/components/_accordions.scss +92 -78
  33. data/stylesheets/picasso/components/_bubbles.scss +1 -1
  34. data/stylesheets/picasso/components/_navs.scss +9 -9
  35. data/stylesheets/picasso/components/_popups.scss +6 -6
  36. data/stylesheets/picasso/components/_tooltips.scss +142 -0
  37. data/stylesheets/picasso/components/buttons/_mini.scss +5 -5
  38. metadata +7 -6
  39. data/stylesheets/picasso/components/_mini-tooltips.scss +0 -128
data/stylesheets/picasso/components/_bubbles.scss CHANGED
@@ -60,7 +60,7 @@ $bubble-default-ellipsis-position : right !default;
60
60
  // Seteo de ellipsis
61
61
  $ellipsis: $bubble-default-ellipsis,
62
62
 
63
- // Seteo de posición de ellipsis
63
+ // Seteo de posicion de ellipsis
64
64
  $ellipsis-position: $bubble-default-ellipsis-position
65
65
 
66
66
  ){
data/stylesheets/picasso/components/_navs.scss CHANGED
@@ -236,50 +236,50 @@ $nav-default-float: left !default;
236
236
  border-left: none;
237
237
  border-top: none;
238
238
  border-bottom: none;
239
- background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat center ((-1) * $initial-position);
239
+ background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat center ((-1) * $initial-position);
240
240
 
241
241
  a{
242
242
  border-left: 1px solid $border;
243
243
  }
244
244
 
245
245
  &:hover{
246
- background: transparent generated-image-url($nav-sprite-name + ".png") center ((-1) * ($initial-position + $height + 6)) no-repeat;
246
+ background: transparent image-url($nav-sprite-name + ".png", false, false) center ((-1) * ($initial-position + $height + 6)) no-repeat;
247
247
  }
248
248
 
249
249
  &:first-child {
250
- background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat left ((-1) * $initial-position);
250
+ background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat left ((-1) * $initial-position);
251
251
 
252
252
  a{
253
253
  border-left: none;
254
254
  }
255
255
 
256
256
  &:hover{
257
- background: transparent generated-image-url($nav-sprite-name + ".png") left ((-1) * ($initial-position + $height + 6)) no-repeat;
257
+ background: transparent image-url($nav-sprite-name + ".png", false, false) left ((-1) * ($initial-position + $height + 6)) no-repeat;
258
258
  }
259
259
 
260
260
  }
261
261
 
262
262
  &:first-child.#{$nav-active-item-class}{
263
- background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat left ((-1) * ($initial-position + $height + 6));
263
+ background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat left ((-1) * ($initial-position + $height + 6));
264
264
  }
265
265
 
266
266
  }
267
267
 
268
268
  .#{$nav-last-item-class}{
269
- background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat right ((-1) * ($initial-position + $height + 6));
269
+ background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat right ((-1) * ($initial-position + $height + 6));
270
270
 
271
271
  &:hover{
272
- background: transparent generated-image-url($nav-sprite-name + ".png") right ((-1) * ($initial-position + $height + 6)) no-repeat;
272
+ background: transparent image-url($nav-sprite-name + ".png", false, false) right ((-1) * ($initial-position + $height + 6)) no-repeat;
273
273
  }
274
274
 
275
275
  }
276
276
 
277
277
  .#{$nav-active-item-class}{
278
- background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat center ((-1) * ($initial-position + $height + 6));
278
+ background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat center ((-1) * ($initial-position + $height + 6));
279
279
  }
280
280
 
281
281
  .#{$nav-last-item-class}.#{$nav-active-item-class}{
282
- background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat right ((-1) * ($initial-position + $height + 6));
282
+ background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat right ((-1) * ($initial-position + $height + 6));
283
283
  }
284
284
 
285
285
  } @else {
data/stylesheets/picasso/components/_popups.scss CHANGED
@@ -17,7 +17,7 @@
17
17
  // <p>Aeropuerto Internacional Miami</p>
18
18
  // </div>
19
19
  // </div>
20
- // <span class="popup-close">x</span>
20
+ // <span class="popup-close">&times;</span>
21
21
  // <span class="popup-arrow popup-arrow-bottom"></span>
22
22
  // </div>
23
23
  // ```
@@ -60,10 +60,10 @@
60
60
  // * `border-radius`
61
61
  // * `shadow`
62
62
  // * `border-color`
63
- // * `background-color` (botón cerrar)
64
- // * `color` (botón cerrar)
65
- // * `background-color` (título)
66
- // * `color` (título)
63
+ // * `background-color` (bot&oacute;n cerrar)
64
+ // * `color` (bot&oacute;n cerrar)
65
+ // * `background-color` (t&iacute;tulo)
66
+ // * `color` (t&iacute;tulo)
67
67
 
68
68
  // `@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgba(1, 61, 147, 0.7), blue, white, black, red);`
69
69
 
@@ -317,7 +317,7 @@ $popup-ie-fallback: "sprites" !default;
317
317
  $initial-position: insert-in-sprite($popup-sprite-created, $popup-sprite-name, $popup-close-image, $popup-default-close-button-size, $popup-default-close-button-size);
318
318
  $popup-sprite-created: true;
319
319
 
320
- background-image: generated-image-url($popup-sprite-name + ".png");
320
+ background: image-url($popup-sprite-name + ".png", false, false);
321
321
  background-position: 0px ((-1) * $initial-position);
322
322
  }
323
323
 
data/stylesheets/picasso/components/_tooltips.scss ADDED
@@ -0,0 +1,142 @@
1
+ // ## Tooltips
2
+
3
+ // Excelentes para mostrar informaci&oacute;n extra.
4
+
5
+ // ### Ejemplos
6
+
7
+ // #### Ejemplo 1
8
+
9
+ // ```
10
+ // <span class="tooltip-demo-1 tooltip-left">
11
+ // Lorem ipsum
12
+ // </span>
13
+ // <span class="tooltip-demo-2 tooltip-right">
14
+ // Lorem ipsum
15
+ // </span>
16
+ // ```
17
+
18
+ // #### Ejemplo 2
19
+
20
+ // ```
21
+ // <span class="tooltip-demo-3 tooltip-left">
22
+ // Aliquam tincidunt mauris.
23
+ // </span>
24
+ // <span class="tooltip-demo-4 tooltip-right">
25
+ // Aliquam tincidunt mauris.
26
+ // </span>
27
+ // ```
28
+
29
+ // ### Sass
30
+
31
+ // #### Import
32
+
33
+ // `@import "picasso/components/tooltips";`
34
+
35
+ // #### Mixins
36
+
37
+ // Con los par&aacute;metros por defecto:
38
+
39
+ // `@include tooltip();`
40
+
41
+ // Con todos los par&aacute;metros:
42
+ //
43
+ // * `background-color`
44
+ // * `color`
45
+ // * `font-size`
46
+ // * `side` (lado en que se muestra el indicador)
47
+
48
+ // `@include tooltip(black, white, 1em, "right");`
49
+
50
+
51
+ @import "compass/css3/border-radius";
52
+ @import "compass/css3/box-shadow";
53
+
54
+ $tooltip-default-background: black;
55
+ $tooltip-default-color: white;
56
+ $tooltip-default-font-size: 0.8em;
57
+ $tooltip-default-arrow-side: "left";
58
+
59
+ $tooltip-default-border-radius: 2px;
60
+
61
+ @mixin tooltip(
62
+ $background-color: $tooltip-default-background,
63
+ $color: $tooltip-default-color,
64
+ $font-size: $tooltip-default-font-size,
65
+ $side: $tooltip-default-arrow-side
66
+ ){
67
+
68
+ @include tooltip-layout($font-size, $side);
69
+ @include tooltip-visual($background-color, $color, $font-size, $side);
70
+
71
+ }
72
+
73
+
74
+ @mixin tooltip-layout(
75
+ $font-size: $tooltip-default-font-size,
76
+ $side: $tooltip-default-arrow-side
77
+ ){
78
+
79
+ display: block;
80
+ position: absolute;
81
+ padding: ($font-size / 3);
82
+
83
+ &.tooltip-#{$side}{
84
+
85
+ &:after, .ie7 & span{
86
+ position: absolute;
87
+ top: 0.3em;
88
+ #{$side}: -0.75em;
89
+
90
+ @if $side == "left" {
91
+ content: "\25C4";
92
+ } @else {
93
+ content: "\25BA";
94
+ }
95
+
96
+ }
97
+
98
+ }
99
+
100
+ .ie7 &{
101
+
102
+ &.tooltip-#{$side}{
103
+
104
+ @if $side == "left" {
105
+ zoom: expression(this.runtimeStyle.zoom="1", this.insertBefore(document.createElement("span"), this.firstChild).innerHTML="&#9668;");
106
+ } @else {
107
+ zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("span")).innerHTML="&#9658;");
108
+ }
109
+
110
+ }
111
+
112
+ }
113
+
114
+ };
115
+
116
+ @mixin tooltip-visual(
117
+ $background-color: $tooltip-default-background,
118
+ $color: $tooltip-default-color,
119
+ $font-size: $tooltip-default-font-size,
120
+ $side: $tooltip-default-arrow-side
121
+ ){
122
+
123
+ font-size: $font-size;
124
+ background-color: $background-color;
125
+ color: $color;
126
+ @include border-radius($tooltip-default-border-radius);
127
+ @include box-shadow($background-color 0 0 3px);
128
+
129
+ &.tooltip-#{$side}:after, .ie7 & span{
130
+ font-size: $font-size;
131
+ color: $background-color;
132
+ }
133
+
134
+ .ie8 & {
135
+
136
+ &.tooltip-#{$side}:after{
137
+ font-size: $font-size;
138
+ }
139
+
140
+ }
141
+
142
+ };
data/stylesheets/picasso/components/buttons/_mini.scss CHANGED
@@ -67,10 +67,10 @@ $button-mini-ie-fallback: "sprites" !default;
67
67
 
68
68
  @mixin button-mini(
69
69
 
70
- // Background del boton
70
+ // Background del componente
71
71
  $background: $button-mini-default-background,
72
72
 
73
- // Color del botón
73
+ // Color del componente
74
74
  $color: $button-mini-default-color
75
75
  ){
76
76
 
@@ -97,10 +97,10 @@ $button-mini-ie-fallback: "sprites" !default;
97
97
 
98
98
  @mixin button-mini-visual(
99
99
 
100
- // Background del boton
100
+ // Background del componente
101
101
  $background: $button-mini-default-background,
102
102
 
103
- // Color del botón
103
+ // Color del componente
104
104
  $color: $button-mini-default-color
105
105
  ){
106
106
 
@@ -166,7 +166,7 @@ $button-mini-ie-fallback: "sprites" !default;
166
166
  $initial-position: insert-in-sprite($button-mini-sprite-created, $button-mini-sprite-name, $button-mini-image, $button-mini-default-canvas-width, ($button-mini-default-canvas-height * 2));
167
167
  $button-mini-sprite-created: true;
168
168
 
169
- background: generated-image-url($button-mini-sprite-name + ".png");
169
+ background: image-url($button-mini-sprite-name + ".png", false, false);
170
170
  background-position: right ((-1) * $initial-position);
171
171
 
172
172
  &:hover{
metadata CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
5
5
  segments:
6
6
  - 0
7
7
  - 3
8
- - 0
9
- version: 0.3.0
8
+ - 1
9
+ version: 0.3.1
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-07-23 00:00:00 -03:00
17
+ date: 2012-07-25 00:00:00 -03:00
18
18
  default_executable:
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency
@@ -61,6 +61,7 @@ files:
61
61
  - README.md
62
62
  - Rakefile
63
63
  - docs/_picasso.html
64
+ - docs/all.html
64
65
  - docs/config.rb
65
66
  - docs/css/picasso-docs.css
66
67
  - docs/img/picasso-buttons-glossy.png
@@ -78,10 +79,10 @@ files:
78
79
  - docs/picasso-components-_buttons.html
79
80
  - docs/picasso-components-_inputs.html
80
81
  - docs/picasso-components-_list-grids.html
81
- - docs/picasso-components-_mini-tooltips.html
82
82
  - docs/picasso-components-_navs.html
83
83
  - docs/picasso-components-_pagination.html
84
84
  - docs/picasso-components-_popups.html
85
+ - docs/picasso-components-_tooltips.html
85
86
  - docs/picasso-components-buttons-_3d.html
86
87
  - docs/picasso-components-buttons-_glossy.html
87
88
  - docs/picasso-components-buttons-_mini.html
@@ -106,10 +107,10 @@ files:
106
107
  - stylesheets/picasso/components/_buttons.scss
107
108
  - stylesheets/picasso/components/_inputs.scss
108
109
  - stylesheets/picasso/components/_list-grids.scss
109
- - stylesheets/picasso/components/_mini-tooltips.scss
110
110
  - stylesheets/picasso/components/_navs.scss
111
111
  - stylesheets/picasso/components/_pagination.scss
112
112
  - stylesheets/picasso/components/_popups.scss
113
+ - stylesheets/picasso/components/_tooltips.scss
113
114
  - stylesheets/picasso/components/buttons/_3d.scss
114
115
  - stylesheets/picasso/components/buttons/_glossy.scss
115
116
  - stylesheets/picasso/components/buttons/_mini.scss
@@ -126,7 +127,7 @@ licenses: []
126
127
  post_install_message: "\n\n\
127
128
  ##################################################\n\
128
129
  ## Picasso - Sass/Compass Framework\n\n\
129
- ## Versi\xC3\xB3n: 0.3.0\n\
130
+ ## Versi\xC3\xB3n: 0.3.1\n\
130
131
  ## Documentaci\xC3\xB3n: http://dl.dropbox.com/u/54126/picasso/docs/index.html\n\
131
132
  ## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/index.html#changelog\n\
132
133
  ##################################################\n\n"
data/stylesheets/picasso/components/_mini-tooltips.scss DELETED
@@ -1,128 +0,0 @@
1
- // ## Mini Tooltips
2
-
3
- // Excelentes para tooltips peque&ntilde;os.
4
-
5
- // ### Ejemplos
6
-
7
- // ```
8
- // <div class="mini-tooltip-demo-1">
9
- // Informaci&oacute;n
10
- // </div>
11
- // <div class="mini-tooltip-demo-2">
12
- // Tarifa bebe
13
- // </div>
14
- // <div class="mini-tooltip-demo-3">
15
- // Datos
16
- // </div>
17
- // ```
18
-
19
- // ### Sass
20
-
21
- // #### Import
22
-
23
- // `@import "picasso/components/mini-tooltips";`
24
-
25
- // #### Mixins
26
-
27
- // Con los par&aacute;metros por defecto:
28
-
29
- // `@include mini-tooltip();`
30
-
31
- // Con todos los par&aacute;metros:
32
- //
33
- // * `background`
34
- // * `background-opacity`
35
- // * `color`
36
- // * `height`
37
-
38
- // `@include mini-tooltip(red, 0.4, black, 31px);`
39
-
40
-
41
- @import "picasso/utils/ie";
42
- @import "compass/css3/opacity";
43
-
44
- $mini-tooltip-default-background: black;
45
- $mini-tooltip-default-background-opacity: 0.5;
46
- $mini-tooltip-default-color: white;
47
- $mini-tooltip-default-height: 20px;
48
- $mini-tooltip-default-arrow-size: 7px;
49
-
50
- @mixin mini-tooltip(
51
- $background: $mini-tooltip-default-background,
52
- $background-opacity: $mini-tooltip-default-background-opacity,
53
- $color: $mini-tooltip-default-color,
54
- $height: $mini-tooltip-default-height
55
- ) {
56
-
57
- @include mini-tooltip-visual($background, $background-opacity, $color);
58
- @include mini-tooltip-layout($height);
59
- }
60
-
61
- @mixin mini-tooltip-visual(
62
- $background: $mini-tooltip-default-background,
63
- $background-opacity: $mini-tooltip-default-background-opacity,
64
- $color: $mini-tooltip-default-color
65
- ) {
66
-
67
- color: $color;
68
- font-size: 11px;
69
-
70
- &:after, .ie7 & .after {
71
- opacity: $background-opacity;
72
-
73
- border-top: $mini-tooltip-default-arrow-size solid transparent;
74
- border-bottom: $mini-tooltip-default-arrow-size solid transparent;
75
- border-right: $mini-tooltip-default-arrow-size solid $background;
76
- }
77
-
78
- &:before, .ie7 & .before {
79
- background: $background;
80
- opacity: $background-opacity;
81
- }
82
-
83
- .ie7 &, .ie8 & {
84
-
85
- &:before, & .before {
86
- @include opacity($background-opacity);
87
- }
88
-
89
- }
90
- }
91
-
92
- @mixin mini-tooltip-layout($height: $mini-tooltip-default-height) {
93
-
94
- float: left;
95
- position: relative;
96
- padding: 0px 10px;
97
- margin-left: 10px;
98
- z-index: 0;
99
- line-height: $height;
100
-
101
- &:after, .ie7 & .after {
102
- content: "";
103
- position: absolute;
104
- width: 0;
105
- height: 0;
106
- left: (-1) * $mini-tooltip-default-arrow-size;
107
- top: (($height - ($mini-tooltip-default-arrow-size * 2)) / 2);
108
- }
109
-
110
- &:before, .ie7 & .before {
111
- content: "";
112
- position: absolute;
113
- width: 100%;
114
- height: $height;
115
- top: 0px;
116
- left: 0px;
117
- z-index: -1;
118
- }
119
-
120
- .ie7 & {
121
- @include before;
122
-
123
- & .before {
124
- @include after;
125
- }
126
- }
127
-
128
- }