picasso 0.3.0 → 0.3.1

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