picasso 0.2.0 → 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- 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"
|