picasso 0.3.5 → 0.3.6.beta.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 (38) hide show
  1. data/docs/_picasso.html +2599 -1
  2. data/docs/config.rb +1 -1
  3. data/docs/css/picasso-demos.css +2598 -1
  4. data/docs/css/picasso-docs.css +93 -1
  5. data/docs/index.html +2599 -1
  6. data/docs/picasso-_components.html +2599 -1
  7. data/docs/picasso-_despegar.html +2599 -1
  8. data/docs/picasso-_utils.html +2601 -2
  9. data/docs/picasso-components-_accordions.html +2599 -1
  10. data/docs/picasso-components-_arrows.html +2643 -54
  11. data/docs/picasso-components-_bubbles.html +2665 -40
  12. data/docs/picasso-components-_buttons.html +2599 -1
  13. data/docs/picasso-components-_inputs.html +2599 -1
  14. data/docs/picasso-components-_list-grids.html +2599 -1
  15. data/docs/picasso-components-_navs.html +2599 -1
  16. data/docs/picasso-components-_pagination.html +2599 -2
  17. data/docs/picasso-components-_popups.html +2642 -19
  18. data/docs/picasso-components-_tooltips.html +2603 -1
  19. data/docs/picasso-components-buttons-_3d.html +2599 -1
  20. data/docs/picasso-components-buttons-_glossy.html +2599 -1
  21. data/docs/picasso-components-buttons-_mini.html +2599 -1
  22. data/docs/picasso-despegar-_variables.html +2599 -1
  23. data/docs/picasso-utils-_clearfix.html +2599 -1
  24. data/docs/picasso-utils-_grid.html +2599 -1
  25. data/docs/picasso-utils-_ie.html +2599 -1
  26. data/docs/picasso-utils-_rem.html +2756 -0
  27. data/docs/picasso-utils-_sprite.html +2599 -1
  28. data/docs/sass/picasso-demos.scss +19 -4
  29. data/docs/sass/picasso-docs.scss +14 -0
  30. data/lib/picasso/version.rb +1 -1
  31. data/stylesheets/picasso/_utils.scss +2 -1
  32. data/stylesheets/picasso/components/_arrows.scss +36 -48
  33. data/stylesheets/picasso/components/_bubbles.scss +58 -39
  34. data/stylesheets/picasso/components/_pagination.scss +0 -1
  35. data/stylesheets/picasso/components/_popups.scss +43 -18
  36. data/stylesheets/picasso/components/_tooltips.scss +2 -0
  37. data/stylesheets/picasso/utils/_rem.scss +137 -0
  38. metadata +14 -8
@@ -2,9 +2,12 @@
2
2
  @import "../../stylesheets/picasso";
3
3
 
4
4
  //General
5
+ html{
6
+ font-size: 16px;
7
+ }
8
+
5
9
  body{
6
10
  font-family: sans-serif;
7
- font-size: 16px;
8
11
  padding: 20px 0;
9
12
  }
10
13
 
@@ -110,10 +113,22 @@ body{
110
113
  }
111
114
 
112
115
  //Bubbles
116
+ .bubble-demo-1{
117
+ margin: 0 0 30px 0;
118
+ }
119
+
113
120
  .bubble-demo-1{
114
121
  @include bubble();
115
122
  }
116
123
 
124
+ .bubble-demo-2{
125
+ @include bubble(#EEE, #999, false, "left");
126
+ }
127
+
128
+ .bubble-demo-3{
129
+ @include bubble(#EEE, #999, true, "right");
130
+ }
131
+
117
132
  //Accordions
118
133
  .accordion-demo-1{
119
134
  @include accordion();
@@ -143,15 +158,15 @@ body{
143
158
  }
144
159
 
145
160
  .arrow-demo-2{
146
- @include arrow(black, white, 0.563em, "left");
161
+ @include arrow(black, white, 10px, "left");
147
162
  }
148
163
 
149
164
  .arrow-demo-3{
150
- @include arrow(#5FC8FF, white, 1.313em, "right");
165
+ @include arrow(#5FC8FF, white, 25px, "right");
151
166
  }
152
167
 
153
168
  .arrow-demo-4{
154
- @include arrow(#5FC8FF, white, 1.500em, "left");
169
+ @include arrow(#5FC8FF, white, 25px, "left");
155
170
  }
156
171
 
157
172
  //Grillas
@@ -123,3 +123,17 @@ body{
123
123
  }
124
124
 
125
125
  }
126
+
127
+ .picasso-_bubbles{
128
+
129
+ .ie7 &, .ie8 &, .ie9 &{
130
+
131
+ blockquote{
132
+ background: transparent;
133
+ padding: 0;
134
+ @include border-radius(none);
135
+ }
136
+
137
+ }
138
+
139
+ }
@@ -1,3 +1,3 @@
1
1
  module Picasso
2
- VERSION = "0.3.5"
2
+ VERSION = "0.3.6.beta.1"
3
3
  end
@@ -16,4 +16,5 @@
16
16
  @import "utils/clearfix";
17
17
  @import "utils/sprite";
18
18
  @import "utils/ie";
19
- @import "utils/grid";
19
+ @import "utils/grid";
20
+ @import "utils/rem";
@@ -8,10 +8,11 @@
8
8
 
9
9
 
10
10
  // ```
11
- // <em class="arrow-demo-1 arrow-right">
11
+ // <em class="arrow-demo-1">
12
12
  // Lorem ipsum
13
13
  // </em>
14
- // <em class="arrow-demo-2 arrow-left">
14
+ //
15
+ // <em class="arrow-demo-2">
15
16
  // Ipsum lorem
16
17
  // </em>
17
18
  // ```
@@ -20,10 +21,11 @@
20
21
 
21
22
 
22
23
  // ```
23
- // <em class="arrow-demo-3 arrow-right">
24
+ // <em class="arrow-demo-3">
24
25
  // Lorem ipsum
25
26
  // </em>
26
- // <em class="arrow-demo-4 arrow-left">
27
+ //
28
+ // <em class="arrow-demo-4">
27
29
  // Ipsum lorem
28
30
  // </em>
29
31
  // ```
@@ -47,16 +49,15 @@
47
49
  // * `font-size`
48
50
  // * `size` (lado para el cual apunta el componente)
49
51
 
50
- // `@include arrow(#5FC8FF, white, 1.500em, "left");`
52
+ // `@include arrow(#5FC8FF, white, 15px, "left");`
51
53
 
54
+ @import "../utils/rem";
52
55
 
53
56
  $arrow-default-background: black !default;
54
57
  $arrow-default-color: white !default;
55
- $arrow-default-font-size: 0.563em !default;
58
+ $arrow-default-font-size: 10px !default;
56
59
  $arrow-default-arrow-side: "right" !default;
57
60
 
58
- $arrow-default-class : "arrow" !default;
59
-
60
61
  @mixin arrow(
61
62
 
62
63
  // Background del elemento
@@ -80,30 +81,26 @@ $arrow-default-class : "arrow" !default;
80
81
  @mixin arrow-visual($background: $arrow-default-background, $color: $arrow-default-color, $font-size: $arrow-default-font-size, $side: $arrow-default-arrow-side) {
81
82
 
82
83
  font-style: normal;
83
- font-size: $font-size;
84
+ @include rem(font-size, $font-size);
84
85
  background: $background;
85
86
  color: $color;
87
+ @if($side == "right"){
88
+ @include border-left-radius(0.1em);
89
+ } @else {
90
+ @include border-right-radius(0.1em);
91
+ }
86
92
 
87
- &.#{$arrow-default-class}-#{$side}{
88
- @include border-radius(0.1em);
89
-
90
- &:after{
91
- border-top: 0.778em solid transparent;
92
- border-bottom: 0.778em solid transparent;
93
-
94
- @if($side == "right"){
95
-
96
- border-left: 0.778em solid $background;
97
-
98
- } @else {
99
-
100
- border-right: 0.778em solid $background;
101
-
102
- }
93
+ &:after{
94
+ border-top: 0.8em solid transparent;
95
+ border-bottom: 0.8em solid transparent;
103
96
 
104
-
97
+ @if($side == "right"){
98
+ border-left: 0.8em solid $background;
99
+ } @else {
100
+ border-right: 0.8em solid $background;
105
101
  }
106
102
 
103
+
107
104
  }
108
105
 
109
106
  }
@@ -111,39 +108,30 @@ $arrow-default-class : "arrow" !default;
111
108
  @mixin arrow-layout($font-size: $arrow-default-font-size, $side: $arrow-default-arrow-side) {
112
109
 
113
110
  position: relative;
114
- height: 1.556em;
115
- line-height: 1.556em;
111
+ height: 1.6em;
112
+ line-height: 1.6em;
116
113
  display: inline-block;
117
114
 
115
+ @if($side == "right"){
116
+ padding: 0 0 0 0.5em;
117
+ } @else {
118
+ padding: 0 0.5em 0 0;
119
+ }
120
+
118
121
  &:after{
119
122
  content: '';
120
123
  position: absolute;
121
- }
122
-
123
- &.#{$arrow-default-class}-#{$side}{
124
124
 
125
125
  @if($side == "right"){
126
-
127
- padding: 0 0 0 0.5em;
128
-
129
- &:after{
130
- left: 100%;
131
- }
132
-
126
+ left: 100%;
133
127
  } @else {
134
-
135
- padding: 0 0.5em 0 0;
136
-
137
- &:after{
138
- right: 100%;
139
- }
140
-
128
+ right: 100%;
141
129
  }
142
130
 
143
- .ie7 &{
144
- padding: 0 0.5em;
145
- }
131
+ }
146
132
 
133
+ .ie7 &{
134
+ padding: 0 0.5em;
147
135
  }
148
136
 
149
137
  }
@@ -1,9 +1,11 @@
1
1
  // ## Bubbles
2
2
 
3
- // Ideales para citar comentarios de clientes.
3
+ // Ideales para citas de texto.
4
4
 
5
5
  // ### Ejemplos
6
6
 
7
+ // #### Ejemplo 1
8
+
7
9
  // ```
8
10
  // <div class="bubble-demo-1">
9
11
  // <h4>Lorem ipsum</h4>
@@ -11,6 +13,25 @@
11
13
  // This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
12
14
  // </blockquote>
13
15
  // </div>
16
+ //
17
+ // <div class="bubble-demo-2">
18
+ // <h4>Lorem ipsum</h4>
19
+ // <blockquote>
20
+ // This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
21
+ // </blockquote>
22
+ // </div>
23
+ // ```
24
+
25
+ // #### Ejemplo 2.
26
+ // Con ellipsis.
27
+
28
+ // ```
29
+ // <div class="bubble-demo-3">
30
+ // <h4>Lorem ipsum</h4>
31
+ // <blockquote>
32
+ // This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
33
+ // </blockquote>
34
+ // </div>
14
35
  // ```
15
36
 
16
37
  // ### Sass
@@ -27,29 +48,29 @@
27
48
 
28
49
  // Con todos los par&aacute;metros:
29
50
  //
30
- // * `width`
31
51
  // * `background-color`
32
52
  // * `color`
33
- // * `ellipsis`
34
- // * `ellipsis position`
53
+ // * `ellipsis` (booleano)
54
+ // * `side` (lado en que apunta el componente)
35
55
 
36
- // `@include bubble(200px, blue, white, true, left);`
56
+ // `@include bubble(#EEE, #999, true, "left");`
37
57
 
38
58
 
39
59
  @import "compass/css3/border-radius";
40
60
  @import "compass/typography/text/ellipsis";
41
61
  @import "../utils/ie";
42
62
 
43
- $bubble-default-width : auto !default;
63
+
44
64
  $bubble-default-background : #EEE !default;
45
65
  $bubble-default-color : #999 !default;
46
66
  $bubble-default-ellipsis : false !default;
47
- $bubble-default-ellipsis-position : right !default;
67
+ $bubble-default-side: "right" !default;
48
68
 
49
- @mixin bubble(
50
69
 
51
- // Ancho del elemento
52
- $width: $bubble-default-width,
70
+ $bubble-default-border-radius : 0.5em !default;
71
+ $bubble-default-padding : 0.7em !default;
72
+
73
+ @mixin bubble(
53
74
 
54
75
  // Background del elemento
55
76
  $background: $bubble-default-background,
@@ -60,12 +81,12 @@ $bubble-default-ellipsis-position : right !default;
60
81
  // Seteo de ellipsis
61
82
  $ellipsis: $bubble-default-ellipsis,
62
83
 
63
- // Seteo de posicion de ellipsis
64
- $ellipsis-position: $bubble-default-ellipsis-position
84
+ // Posicion de la flecha
85
+ $side: $bubble-default-side
65
86
 
66
87
  ){
67
88
 
68
- @include bubble-layout($width, $ellipsis-position);
89
+ @include bubble-layout($ellipsis, $side);
69
90
  @include bubble-visual($background, $color, $ellipsis);
70
91
 
71
92
  }
@@ -73,49 +94,47 @@ $bubble-default-ellipsis-position : right !default;
73
94
  @mixin bubble-visual($background: $bubble-default-background, $color: $bubble-default-color, $ellipsis: $bubble-default-ellipsis){
74
95
 
75
96
  background: $background;
76
- @include border-radius(5px);
97
+ @include border-radius($bubble-default-border-radius);
77
98
 
78
99
  blockquote{
79
100
  color: $color;
80
- @if $ellipsis {
81
- @include ellipsis(true);
101
+
102
+ @if ($ellipsis == true) {
103
+ @include ellipsis();
82
104
  }
83
- }
84
105
 
85
- h4{
86
- @if $ellipsis {
87
- @include ellipsis(true);
88
- }
89
106
  }
90
107
 
91
- &:after, .ie7 & .after{
92
- border-left: 10px solid transparent;
93
- border-right: 10px solid transparent;
94
- border-top: 15px solid $background;
108
+ &:after{
109
+ border-left: 0.7em solid transparent;
110
+ border-right: 0.7em solid transparent;
111
+ border-top: 1em solid $background;
95
112
  }
96
113
 
97
114
  }
98
115
 
99
- @mixin bubble-layout($width: $bubble-default-width, $ellipsis-position: $bubble-default-ellipsis-position){
116
+ @mixin bubble-layout($ellipsis: $bubble-default-ellipsis, $side: $bubble-default-side){
100
117
 
101
- padding: 10px;
102
- display: block;
103
- width: $width;
118
+ padding: $bubble-default-padding;
104
119
  position: relative;
105
120
 
106
- &:after, .ie7 & .after{
107
- content: "";
108
- position: absolute;
109
- bottom: -15px;
110
- @if $ellipsis-position {
111
- #{$ellipsis-position}: 20px;
121
+ blockquote, h4{
122
+ margin: 0;
123
+ }
124
+
125
+ @if ($ellipsis == true) {
126
+
127
+ blockquote{
128
+ width: 100%;
112
129
  }
113
- width: 0;
114
- height: 0;
130
+
115
131
  }
116
132
 
117
- .ie7 &{
118
- @include after;
133
+ &:after{
134
+ content: '';
135
+ position: absolute;
136
+ #{$side}: 1em;
137
+ bottom: -1em;
119
138
  }
120
139
 
121
140
  }
@@ -209,7 +209,6 @@ $pagination-default-disabled-class : "disabled" !default;
209
209
  display: inline-block;
210
210
 
211
211
  li{
212
- display: inline-block;
213
212
  height: $size;
214
213
  text-align: center;
215
214
  float: left;
@@ -80,7 +80,7 @@
80
80
 
81
81
  $popup-default-background: white !default;
82
82
  $popup-default-border-radius: 3px !default;
83
- $popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px !default;
83
+ $popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px !default;
84
84
  $popup-default-background-border: #000000 !default;
85
85
  $popup-default-background-border-opacity: 0.7 !default;
86
86
  $popup-default-close-button-background: #319FDA !default;
@@ -123,8 +123,8 @@ $popup-ie-fallback: "sprites" !default;
123
123
  &:after, .ie7 & .after {
124
124
  content: "";
125
125
  position: absolute;
126
- top: 0px;
127
- left: 0px;
126
+ top: 0;
127
+ left: 0;
128
128
  width: 100%;
129
129
  height: 100%;
130
130
  z-index: 0;
@@ -136,6 +136,7 @@ $popup-ie-fallback: "sprites" !default;
136
136
  line-height: 20px;
137
137
  padding: 10px;
138
138
  }
139
+
139
140
  }
140
141
 
141
142
  .popup-container {
@@ -145,8 +146,8 @@ $popup-ie-fallback: "sprites" !default;
145
146
 
146
147
  .popup-arrow{
147
148
  position: absolute;
148
- height: 0px;
149
- width: 0px;
149
+ height: 0;
150
+ width: 0;
150
151
  }
151
152
 
152
153
  .popup-arrow-bottom {
@@ -173,19 +174,23 @@ $popup-ie-fallback: "sprites" !default;
173
174
  position: absolute;
174
175
  z-index: 10;
175
176
  text-align: center;
176
- line-height: $popup-default-close-button-height - $popup-default-close-button-border;
177
+ line-height: $popup-default-close-button-height;
177
178
  height: $popup-default-close-button-height;
178
179
  width: $popup-default-close-button-height;
179
180
  top: (-1) * (($popup-default-close-button-height / 2) + $popup-default-close-button-border);
180
181
  right: (-1) * (($popup-default-close-button-height / 2) + $popup-default-close-button-border);
181
182
  }
182
183
 
184
+ .ie7 & {
185
+ @include after;
186
+ }
187
+
183
188
  .ie7 &, .ie8 & {
184
189
 
185
190
  @if $popup-ie-fallback == "sprites" {
186
191
 
187
192
  .popup-close {
188
- line-height: $popup-default-close-button-size - $popup-default-close-button-border;
193
+ line-height: $popup-default-close-button-size;
189
194
  height: $popup-default-close-button-size;
190
195
  width: $popup-default-close-button-size;
191
196
  top: (-1) * (($popup-default-close-button-size / 2));
@@ -195,9 +200,14 @@ $popup-ie-fallback: "sprites" !default;
195
200
  }
196
201
 
197
202
  }
198
-
199
- .ie7 & {
200
- @include after;
203
+
204
+ .ie9 & {
205
+
206
+ .popup-close {
207
+ height: $popup-default-close-button-height + 5;
208
+ width: $popup-default-close-button-height + 5;
209
+ }
210
+
201
211
  }
202
212
 
203
213
  }
@@ -214,12 +224,12 @@ $popup-ie-fallback: "sprites" !default;
214
224
  $title-color: $popup-default-title-color
215
225
  ) {
216
226
 
217
- &:after, .ie7 & .after {
227
+ &:after{
228
+ background: $background-border;
218
229
  background: rgba($background-border, $background-border-opacity);
219
230
  @include border-radius($border-radius);
220
231
  @include box-shadow($box-shadow);
221
232
  }
222
-
223
233
  .popup-header{
224
234
  background: $title-background;
225
235
  display: block;
@@ -269,18 +279,33 @@ $popup-ie-fallback: "sprites" !default;
269
279
  color: $close-button-color;
270
280
  font-weight: bold;
271
281
  font-family: sans-serif;
272
- font-size: 16px;
282
+ font-size: $popup-default-close-button-height;
273
283
  background: $close-button-background;
274
284
  @include border-radius($popup-default-close-button-height);
275
285
  @include box-shadow($box-shadow);
276
286
  }
277
287
 
278
- .ie7 &, .ie8 & {
288
+ .ie7 &{
279
289
 
280
- &:after, & .after {
281
- background: $background-border;
290
+ & .after {
282
291
  filter: alpha(opacity = ($background-border-opacity * 100));
283
292
  }
293
+
294
+ }
295
+
296
+ .ie8 &{
297
+
298
+ &:after {
299
+ $ie-background : magick-canvas(2px, 2px,
300
+ magick-fill($background-border)
301
+ magick-effect(fade, (1 - $background-border-opacity))
302
+ );
303
+ background: $ie-background;
304
+ }
305
+
306
+ }
307
+
308
+ .ie7 &, .ie8 & {
284
309
 
285
310
  .popup-arrow {
286
311
  filter: alpha(opacity = ($background-border-opacity * 100));
@@ -305,7 +330,7 @@ $popup-ie-fallback: "sprites" !default;
305
330
  @if $popup-ie-fallback == "sprites" {
306
331
 
307
332
  .popup-close {
308
- border-width: 0px;
333
+ border-width: 0;
309
334
  background-color: transparent;
310
335
 
311
336
  $popup-close-image: magick-canvas($popup-default-close-button-size, $popup-default-close-button-size,
@@ -318,7 +343,7 @@ $popup-ie-fallback: "sprites" !default;
318
343
  $popup-sprite-created: true;
319
344
 
320
345
  background: image-url($popup-sprite-name + ".png", false, false);
321
- background-position: 0px ((-1) * $initial-position);
346
+ background-position: 0 ((-1) * $initial-position);
322
347
  }
323
348
 
324
349
  }