picasso 0.2.0 → 0.2.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/all.html +30 -15
- data/docs/build/md/changelog.md +4 -0
- data/docs/build/md/components/buttons.md +30 -15
- data/docs/buttons.html +30 -15
- data/docs/css/style.css +292 -102
- data/docs/img/picasso.png +0 -0
- data/lib/picasso/version.rb +1 -1
- data/stylesheets/picasso/components/_navs.scss +14 -0
- data/stylesheets/picasso/components/_pagination.scss +13 -6
- data/stylesheets/picasso/components/buttons/_3d.scss +45 -28
- data/stylesheets/picasso/components/buttons/_glossy.scss +8 -1
- data/stylesheets/picasso/components/buttons/_mini.scss +6 -1
- metadata +5 -4
|
Binary file
|
data/lib/picasso/version.rb
CHANGED
|
@@ -261,6 +261,20 @@ $nav-default-float: left !default;
|
|
|
261
261
|
|
|
262
262
|
}
|
|
263
263
|
|
|
264
|
+
.ie9 &{
|
|
265
|
+
@include box-shadow(none);
|
|
266
|
+
|
|
267
|
+
li:first-child{
|
|
268
|
+
@include border-left-radius(none);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
li:last-child{
|
|
272
|
+
@include border-right-radius(none);
|
|
273
|
+
border: none;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
}
|
|
277
|
+
|
|
264
278
|
}
|
|
265
279
|
|
|
266
280
|
}
|
|
@@ -13,6 +13,12 @@ $pagination-default-hover-color : #FFF !default;
|
|
|
13
13
|
$pagination-default-hover-background-color : #013D93 !default;
|
|
14
14
|
$pagination-default-size : 27px !default;
|
|
15
15
|
|
|
16
|
+
$pagination-default-active-class : "active" !default;
|
|
17
|
+
$pagination-default-prev-class : "prev" !default;
|
|
18
|
+
$pagination-default-next-class : "next" !default;
|
|
19
|
+
$pagination-default-dots-class : "dots" !default;
|
|
20
|
+
$pagination-default-disabled-class : "disabled" !default;
|
|
21
|
+
|
|
16
22
|
@mixin pagination(
|
|
17
23
|
|
|
18
24
|
$link-color : $pagination-default-link-color,
|
|
@@ -62,7 +68,7 @@ $pagination-default-size : 27px !default;
|
|
|
62
68
|
|
|
63
69
|
}
|
|
64
70
|
|
|
65
|
-
|
|
71
|
+
.#{$pagination-default-active-class}, .#{$pagination-default-prev-class}, .#{$pagination-default-next-class}, .#{$pagination-default-dots-class}{
|
|
66
72
|
background: none;
|
|
67
73
|
border: none;
|
|
68
74
|
|
|
@@ -80,7 +86,7 @@ $pagination-default-size : 27px !default;
|
|
|
80
86
|
|
|
81
87
|
}
|
|
82
88
|
|
|
83
|
-
|
|
89
|
+
.#{$pagination-default-prev-class}, .#{$pagination-default-next-class}{
|
|
84
90
|
|
|
85
91
|
&:hover{
|
|
86
92
|
text-decoration: underline;
|
|
@@ -88,7 +94,7 @@ $pagination-default-size : 27px !default;
|
|
|
88
94
|
|
|
89
95
|
}
|
|
90
96
|
|
|
91
|
-
|
|
97
|
+
.#{$pagination-default-active-class}, .#{$pagination-default-dots-class}{
|
|
92
98
|
|
|
93
99
|
a{
|
|
94
100
|
color: $page-color;
|
|
@@ -128,17 +134,18 @@ $pagination-default-size : 27px !default;
|
|
|
128
134
|
|
|
129
135
|
}
|
|
130
136
|
|
|
131
|
-
|
|
137
|
+
.#{$pagination-default-prev-class}{
|
|
132
138
|
margin: 0 10px 0 0;
|
|
133
139
|
}
|
|
134
140
|
|
|
135
|
-
|
|
141
|
+
.#{$pagination-default-next-class}{
|
|
136
142
|
margin: 0 0 0 10px;
|
|
137
143
|
}
|
|
138
144
|
|
|
139
|
-
|
|
145
|
+
.#{$pagination-default-disabled-class}{
|
|
140
146
|
display: none;
|
|
141
147
|
}
|
|
148
|
+
|
|
142
149
|
}
|
|
143
150
|
|
|
144
151
|
}
|
|
@@ -39,7 +39,8 @@ $button-3d-default-full-rounded : false !default;
|
|
|
39
39
|
}
|
|
40
40
|
|
|
41
41
|
@mixin button-3d-layout($font-size, $full-width, $full-rounded){
|
|
42
|
-
|
|
42
|
+
|
|
43
|
+
overflow: hidden;
|
|
43
44
|
|
|
44
45
|
@if $full-width == true {
|
|
45
46
|
display: block;
|
|
@@ -58,23 +59,24 @@ $button-3d-default-full-rounded : false !default;
|
|
|
58
59
|
top:1px;
|
|
59
60
|
}
|
|
60
61
|
|
|
62
|
+
span{
|
|
63
|
+
display: block;
|
|
64
|
+
padding: 0 $font-size;
|
|
65
|
+
}
|
|
66
|
+
|
|
61
67
|
}
|
|
62
68
|
|
|
63
69
|
|
|
64
70
|
@mixin button-3d-visual($background, $color, $font-size, $full-rounded){
|
|
71
|
+
|
|
65
72
|
color: $color;
|
|
66
73
|
border: 1px solid darken($background, 20);
|
|
67
74
|
font-family: sans-serif;
|
|
68
75
|
font-size: $font-size;
|
|
69
76
|
text-decoration:none;
|
|
70
|
-
background-color: $background;
|
|
71
77
|
text-align: center;
|
|
78
|
+
cursor: pointer;
|
|
72
79
|
@include text-shadow(0 1px 0 desaturate(invert($color), 100));
|
|
73
|
-
@include background-image(linear-gradient($background, darken($background, 30)));
|
|
74
|
-
@include box-shadow(
|
|
75
|
-
0 0.1em 0.1em rgba(0, 0, 0, 0.5),
|
|
76
|
-
inset 0 0.1em 0 rgba(255, 255, 255, 0.5)
|
|
77
|
-
);
|
|
78
80
|
|
|
79
81
|
@if $full-rounded == true {
|
|
80
82
|
@include border-radius(1.1em);
|
|
@@ -89,38 +91,53 @@ $button-3d-default-full-rounded : false !default;
|
|
|
89
91
|
&:hover {
|
|
90
92
|
text-decoration: none;
|
|
91
93
|
color: $color;
|
|
92
|
-
background-color: saturate($background, 10);
|
|
93
|
-
@include background-image(linear-gradient(rgba(255, 255, 255, 0), darken($background, 20)));
|
|
94
|
-
@include box-shadow(
|
|
95
|
-
0 0.1em 0.1em rgba(0, 0, 0, 0.5),
|
|
96
|
-
inset 0 0.1em 0 rgba(255, 255, 255, 0.5),
|
|
97
|
-
inset 0 0 1em saturate($background, 10)
|
|
98
|
-
);
|
|
99
|
-
|
|
100
94
|
}
|
|
101
95
|
|
|
102
|
-
|
|
96
|
+
span{
|
|
97
|
+
background-color: $background;
|
|
103
98
|
@include background-image(linear-gradient($background, darken($background, 30)));
|
|
104
|
-
@include text-shadow(0 -1px 0 desaturate(invert($color), 100));
|
|
105
99
|
@include box-shadow(
|
|
106
|
-
0 0.1em 0.1em rgba(0, 0, 0, 0.
|
|
107
|
-
inset 0 0.1em 0
|
|
108
|
-
inset 0 0.1em 0 rgba(0, 0, 0, 0.1),
|
|
109
|
-
inset 0 0 1em rgba(0, 0, 0, 0.75)
|
|
100
|
+
0 0.1em 0.1em rgba(0, 0, 0, 0.5),
|
|
101
|
+
inset 0 0.1em 0 rgba(255, 255, 255, 0.5)
|
|
110
102
|
);
|
|
103
|
+
|
|
104
|
+
&:hover{
|
|
105
|
+
background-color: saturate($background, 10);
|
|
106
|
+
@include background-image(linear-gradient(rgba(255, 255, 255, 0), darken($background, 20)));
|
|
107
|
+
@include box-shadow(
|
|
108
|
+
0 0.1em 0.1em rgba(0, 0, 0, 0.5),
|
|
109
|
+
inset 0 0.1em 0 rgba(255, 255, 255, 0.5),
|
|
110
|
+
inset 0 0 1em saturate($background, 10)
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:active{
|
|
115
|
+
@include text-shadow(0 -1px 0 desaturate(invert($color), 100));
|
|
116
|
+
@include background-image(linear-gradient($background, darken($background, 30)));
|
|
117
|
+
@include box-shadow(
|
|
118
|
+
0 0.1em 0.1em rgba(0, 0, 0, 0.1),
|
|
119
|
+
inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5),
|
|
120
|
+
inset 0 0.1em 0 rgba(0, 0, 0, 0.1),
|
|
121
|
+
inset 0 0 1em rgba(0, 0, 0, 0.75)
|
|
122
|
+
);
|
|
123
|
+
}
|
|
124
|
+
|
|
111
125
|
}
|
|
112
126
|
|
|
113
127
|
.ie7 &, .ie8 &, .ie9 &{
|
|
114
128
|
|
|
115
|
-
|
|
129
|
+
span{
|
|
130
|
+
@include filter-gradient(rgba(red($background), green($background), blue($background), 0), darken($background, 30));
|
|
116
131
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
132
|
+
&:hover {
|
|
133
|
+
@include filter-gradient(rgba(255, 255, 255, 0), darken($background, 20));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
&:active {
|
|
137
|
+
@include filter-gradient(rgba(red($background), green($background), blue($background), 0), darken($background, 30));
|
|
138
|
+
}
|
|
120
139
|
|
|
121
|
-
|
|
122
|
-
@include filter-gradient($background, darken($background, 30));
|
|
123
|
-
}
|
|
140
|
+
}
|
|
124
141
|
|
|
125
142
|
}
|
|
126
143
|
|
|
@@ -87,6 +87,7 @@ $button-glossy-ie-fallback: "sprites" !default;
|
|
|
87
87
|
font-family: $button-glossy-default-font-family;
|
|
88
88
|
font-size: $button-glossy-default-font-size;
|
|
89
89
|
text-decoration: none;
|
|
90
|
+
cursor: pointer;
|
|
90
91
|
|
|
91
92
|
$button-glossy-main-gradient: linear-gradient($background, darken($background, 5%)), linear-gradient(darken($background, 10%), darken($background, 25%));
|
|
92
93
|
$button-glossy-main-hover-gradient: linear-gradient(lighten($background, 15%), darken($background, 7%), saturate($background, 15%));
|
|
@@ -138,7 +139,8 @@ $button-glossy-ie-fallback: "sprites" !default;
|
|
|
138
139
|
}
|
|
139
140
|
|
|
140
141
|
.ie7 &, .ie8 &, .ie9 &{
|
|
141
|
-
|
|
142
|
+
@include border-radius(none);
|
|
143
|
+
|
|
142
144
|
@if $button-glossy-ie-fallback == "sprites" {
|
|
143
145
|
|
|
144
146
|
// Generacion del sprite con las imagenes del boton
|
|
@@ -215,6 +217,11 @@ $button-glossy-ie-fallback: "sprites" !default;
|
|
|
215
217
|
background-color: $background;
|
|
216
218
|
|
|
217
219
|
}
|
|
220
|
+
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
.ie9 &{
|
|
224
|
+
@include border-radius(none);
|
|
218
225
|
}
|
|
219
226
|
|
|
220
227
|
}
|
|
@@ -85,7 +85,7 @@ $button-mini-ie-fallback: "sprites" !default;
|
|
|
85
85
|
}
|
|
86
86
|
|
|
87
87
|
.ie7 &, .ie8 &, .ie9 &{
|
|
88
|
-
|
|
88
|
+
|
|
89
89
|
@if $button-mini-ie-fallback == "sprites" {
|
|
90
90
|
|
|
91
91
|
$button-mini-image: magick-canvas($button-mini-default-canvas-width, $button-mini-default-canvas-height * 2,
|
|
@@ -147,4 +147,9 @@ $button-mini-ie-fallback: "sprites" !default;
|
|
|
147
147
|
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
.ie9 &{
|
|
151
|
+
@include border-radius(none);
|
|
152
|
+
@include box-shadow(none);
|
|
153
|
+
}
|
|
154
|
+
|
|
150
155
|
}
|
metadata
CHANGED
|
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
7
|
- 2
|
|
8
|
-
-
|
|
9
|
-
version: 0.2.
|
|
8
|
+
- 1
|
|
9
|
+
version: 0.2.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-
|
|
17
|
+
date: 2012-07-19 00:00:00 -03:00
|
|
18
18
|
default_executable:
|
|
19
19
|
dependencies:
|
|
20
20
|
- !ruby/object:Gem::Dependency
|
|
@@ -96,6 +96,7 @@ files:
|
|
|
96
96
|
- docs/img/picasso-buttons-mini.png
|
|
97
97
|
- docs/img/picasso-nav.png
|
|
98
98
|
- docs/img/picasso-popup.png
|
|
99
|
+
- docs/img/picasso.png
|
|
99
100
|
- docs/index.html
|
|
100
101
|
- docs/inputs.html
|
|
101
102
|
- docs/intro.html
|
|
@@ -141,7 +142,7 @@ licenses: []
|
|
|
141
142
|
post_install_message: "\n\n\
|
|
142
143
|
##################################################\n\
|
|
143
144
|
## Picasso - Sass/Compass Framework\n\n\
|
|
144
|
-
## Versi\xC3\xB3n: 0.2.
|
|
145
|
+
## Versi\xC3\xB3n: 0.2.1\n\
|
|
145
146
|
## Documentaci\xC3\xB3n: http://dl.dropbox.com/u/54126/picasso/docs/all.html\n\
|
|
146
147
|
## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/changelog.html#changelog\n\
|
|
147
148
|
##################################################\n\n"
|