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.
- data/docs/_picasso.html +2599 -1
- data/docs/config.rb +1 -1
- data/docs/css/picasso-demos.css +2598 -1
- data/docs/css/picasso-docs.css +93 -1
- data/docs/index.html +2599 -1
- data/docs/picasso-_components.html +2599 -1
- data/docs/picasso-_despegar.html +2599 -1
- data/docs/picasso-_utils.html +2601 -2
- data/docs/picasso-components-_accordions.html +2599 -1
- data/docs/picasso-components-_arrows.html +2643 -54
- data/docs/picasso-components-_bubbles.html +2665 -40
- data/docs/picasso-components-_buttons.html +2599 -1
- data/docs/picasso-components-_inputs.html +2599 -1
- data/docs/picasso-components-_list-grids.html +2599 -1
- data/docs/picasso-components-_navs.html +2599 -1
- data/docs/picasso-components-_pagination.html +2599 -2
- data/docs/picasso-components-_popups.html +2642 -19
- data/docs/picasso-components-_tooltips.html +2603 -1
- data/docs/picasso-components-buttons-_3d.html +2599 -1
- data/docs/picasso-components-buttons-_glossy.html +2599 -1
- data/docs/picasso-components-buttons-_mini.html +2599 -1
- data/docs/picasso-despegar-_variables.html +2599 -1
- data/docs/picasso-utils-_clearfix.html +2599 -1
- data/docs/picasso-utils-_grid.html +2599 -1
- data/docs/picasso-utils-_ie.html +2599 -1
- data/docs/picasso-utils-_rem.html +2756 -0
- data/docs/picasso-utils-_sprite.html +2599 -1
- data/docs/sass/picasso-demos.scss +19 -4
- data/docs/sass/picasso-docs.scss +14 -0
- data/lib/picasso/version.rb +1 -1
- data/stylesheets/picasso/_utils.scss +2 -1
- data/stylesheets/picasso/components/_arrows.scss +36 -48
- data/stylesheets/picasso/components/_bubbles.scss +58 -39
- data/stylesheets/picasso/components/_pagination.scss +0 -1
- data/stylesheets/picasso/components/_popups.scss +43 -18
- data/stylesheets/picasso/components/_tooltips.scss +2 -0
- data/stylesheets/picasso/utils/_rem.scss +137 -0
- 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,
|
161
|
+
@include arrow(black, white, 10px, "left");
|
147
162
|
}
|
148
163
|
|
149
164
|
.arrow-demo-3{
|
150
|
-
@include arrow(#5FC8FF, white,
|
165
|
+
@include arrow(#5FC8FF, white, 25px, "right");
|
151
166
|
}
|
152
167
|
|
153
168
|
.arrow-demo-4{
|
154
|
-
@include arrow(#5FC8FF, white,
|
169
|
+
@include arrow(#5FC8FF, white, 25px, "left");
|
155
170
|
}
|
156
171
|
|
157
172
|
//Grillas
|
data/docs/sass/picasso-docs.scss
CHANGED
data/lib/picasso/version.rb
CHANGED
@@ -8,10 +8,11 @@
|
|
8
8
|
|
9
9
|
|
10
10
|
// ```
|
11
|
-
// <em class="arrow-demo-1
|
11
|
+
// <em class="arrow-demo-1">
|
12
12
|
// Lorem ipsum
|
13
13
|
// </em>
|
14
|
-
//
|
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
|
24
|
+
// <em class="arrow-demo-3">
|
24
25
|
// Lorem ipsum
|
25
26
|
// </em>
|
26
|
-
//
|
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,
|
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:
|
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
|
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
|
-
|
88
|
-
|
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.
|
115
|
-
line-height: 1.
|
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
|
-
|
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
|
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ámetros:
|
29
50
|
//
|
30
|
-
// * `width`
|
31
51
|
// * `background-color`
|
32
52
|
// * `color`
|
33
|
-
// * `ellipsis`
|
34
|
-
// * `
|
53
|
+
// * `ellipsis` (booleano)
|
54
|
+
// * `side` (lado en que apunta el componente)
|
35
55
|
|
36
|
-
// `@include bubble(
|
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
|
-
|
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-
|
67
|
+
$bubble-default-side: "right" !default;
|
48
68
|
|
49
|
-
@mixin bubble(
|
50
69
|
|
51
|
-
|
52
|
-
|
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
|
-
//
|
64
|
-
$
|
84
|
+
// Posicion de la flecha
|
85
|
+
$side: $bubble-default-side
|
65
86
|
|
66
87
|
){
|
67
88
|
|
68
|
-
@include bubble-layout($
|
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(
|
97
|
+
@include border-radius($bubble-default-border-radius);
|
77
98
|
|
78
99
|
blockquote{
|
79
100
|
color: $color;
|
80
|
-
|
81
|
-
|
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
|
92
|
-
border-left:
|
93
|
-
border-right:
|
94
|
-
border-top:
|
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($
|
116
|
+
@mixin bubble-layout($ellipsis: $bubble-default-ellipsis, $side: $bubble-default-side){
|
100
117
|
|
101
|
-
padding:
|
102
|
-
display: block;
|
103
|
-
width: $width;
|
118
|
+
padding: $bubble-default-padding;
|
104
119
|
position: relative;
|
105
120
|
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
121
|
+
blockquote, h4{
|
122
|
+
margin: 0;
|
123
|
+
}
|
124
|
+
|
125
|
+
@if ($ellipsis == true) {
|
126
|
+
|
127
|
+
blockquote{
|
128
|
+
width: 100%;
|
112
129
|
}
|
113
|
-
|
114
|
-
height: 0;
|
130
|
+
|
115
131
|
}
|
116
132
|
|
117
|
-
|
118
|
-
|
133
|
+
&:after{
|
134
|
+
content: '';
|
135
|
+
position: absolute;
|
136
|
+
#{$side}: 1em;
|
137
|
+
bottom: -1em;
|
119
138
|
}
|
120
139
|
|
121
140
|
}
|
@@ -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)
|
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:
|
127
|
-
left:
|
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:
|
149
|
-
width:
|
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
|
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
|
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
|
-
.
|
200
|
-
|
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
|
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:
|
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
|
288
|
+
.ie7 &{
|
279
289
|
|
280
|
-
|
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:
|
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:
|
346
|
+
background-position: 0 ((-1) * $initial-position);
|
322
347
|
}
|
323
348
|
|
324
349
|
}
|