picasso 0.0.1 → 0.0.2

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 (41) hide show
  1. data/README.md +1 -1
  2. data/docs/all.html +391 -0
  3. data/docs/arrows.html +130 -0
  4. data/docs/bubbles.html +126 -0
  5. data/docs/build/manifest.json +4 -0
  6. data/docs/build/md/arrows.md +43 -0
  7. data/docs/build/md/bubbles.md +43 -0
  8. data/docs/build/md/buttons.md +89 -0
  9. data/docs/build/md/components.md +1 -0
  10. data/docs/build/md/despegar.md +198 -0
  11. data/docs/build/md/intro.md +1 -0
  12. data/docs/build/md/utils.md +17 -0
  13. data/docs/build/templates/index.html +37 -0
  14. data/docs/build/templates/layout.html +39 -0
  15. data/docs/build/templates/page.html +24 -0
  16. data/docs/buttons.html +170 -0
  17. data/docs/components.html +93 -0
  18. data/docs/config.rb +6 -0
  19. data/docs/css/github.css +88 -0
  20. data/docs/css/markdown.css +100 -0
  21. data/docs/css/style.css +838 -0
  22. data/docs/despegar.html +281 -0
  23. data/docs/index.html +93 -0
  24. data/docs/intro.html +93 -0
  25. data/docs/js/docs.js +16 -0
  26. data/docs/js/rainbow-custom.min.js +13 -0
  27. data/docs/sass/style.scss +215 -0
  28. data/docs/utils.html +104 -0
  29. data/lib/picasso/version.rb +1 -1
  30. data/stylesheets/_picasso.scss +3 -0
  31. data/stylesheets/picasso/_components.scss +3 -0
  32. data/stylesheets/picasso/_despegar.scss +1 -0
  33. data/stylesheets/picasso/_utils.scss +1 -0
  34. data/stylesheets/picasso/components/_arrows.scss +54 -0
  35. data/stylesheets/picasso/components/_bubbles.scss +76 -0
  36. data/stylesheets/picasso/components/_buttons.scss +2 -0
  37. data/stylesheets/picasso/components/buttons/_buttons.scss +106 -0
  38. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +66 -0
  39. data/stylesheets/{despegar → picasso/despegar}/_variables.scss +4 -2
  40. data/stylesheets/picasso/utils/_clearfix.scss +33 -0
  41. metadata +41 -4
@@ -0,0 +1,2 @@
1
+ @import "buttons/buttons";
2
+ @import "buttons/mini-buttons";
@@ -0,0 +1,106 @@
1
+ //
2
+ // Buttons
3
+ //
4
+
5
+ @import "compass/css3/images";
6
+ @import "compass/css3/border-radius";
7
+ //@import "compass/css3/pie";
8
+
9
+ $button-default-width : 90px;
10
+ $button-default-height: 30px;
11
+ $button-default-background: red;
12
+ $button-default-color: white;
13
+ $button-default-font-size: 12px;
14
+
15
+ @mixin button(
16
+
17
+ // Ancho del boton
18
+ $width: $button-default-width,
19
+
20
+ // Alto del boton
21
+ $height: $button-default-height,
22
+
23
+ // Background del boton
24
+ $background: $button-default-background,
25
+
26
+ // Color del texto del boton
27
+ $color: $button-default-color){
28
+
29
+ @include button-layout($width, $height);
30
+ @include button-visual($background, $color);
31
+
32
+ }
33
+
34
+ @mixin button-visual($background, $color){
35
+
36
+ font-family: sans-serif;
37
+ font-size: $button-default-font-size;
38
+ text-decoration: none;
39
+ @include background(linear-gradient($background 30%, darken($background, 30%)));
40
+ @include border-radius(5px);
41
+
42
+ span{
43
+ color: $color;
44
+ }
45
+
46
+ &:after, &:before{
47
+ @include border-radius(4px);
48
+ }
49
+
50
+ &:after{
51
+ @include background(linear-gradient(lighten($background, 40%) 20%, darken($background, 35%)));
52
+ }
53
+
54
+ &:before{
55
+ @include background(linear-gradient($background 30%, darken($background, 30%)));
56
+ }
57
+
58
+ &:hover{
59
+ @include background(linear-gradient($background 30%, lighten($background, 1%)));
60
+
61
+ &:before{
62
+ @include background(linear-gradient($background 30%, lighten($background, 1%)));
63
+ }
64
+
65
+ }
66
+
67
+ }
68
+
69
+ @mixin button-layout($width, $height){
70
+
71
+ width: $width;
72
+ height: $height;
73
+ display: inline-block;
74
+ text-align: center;
75
+ position: relative;
76
+ z-index: 1;
77
+
78
+ &:after, &:before{
79
+ content: "";
80
+ position: absolute;
81
+ display: inline-block;
82
+ }
83
+
84
+ &:after{
85
+ width: ($width - 2);
86
+ height: ($height - 2);
87
+ left: 1px;
88
+ top: 1px;
89
+ z-index: 2;
90
+ }
91
+
92
+ &:before{
93
+ width: ($width - 4);
94
+ height: ($height - 4);
95
+ left: 2px;
96
+ top: 2px;
97
+ z-index: 3;
98
+ }
99
+
100
+ span{
101
+ position: relative;
102
+ z-index: 4;
103
+ line-height: $height;
104
+ }
105
+
106
+ }
@@ -0,0 +1,66 @@
1
+ //
2
+ // Mini-Buttons
3
+ //
4
+
5
+ @import "compass/css3/images";
6
+ @import "compass/css3/box-shadow";
7
+ @import "compass/css3/border-radius";
8
+ //@import "compass/css3/pie";
9
+
10
+ $mini-button-default-height : 20px;
11
+ $mini-button-default-font-size: 11px;
12
+ $mini-button-default-background: #F0F0F0;
13
+ $mini-button-default-color: #0E6695;
14
+
15
+ @mixin mini-button(
16
+
17
+ // Background del boton
18
+ $background: $mini-button-default-background,
19
+
20
+ // Color del botón
21
+ $color: $mini-button-default-color){
22
+
23
+ @include mini-button-layout();
24
+ @include mini-button-visual($background, $color);
25
+
26
+ }
27
+
28
+ @mixin mini-button-visual($background, $color){
29
+
30
+ font-family: sans-serif;
31
+ text-decoration: none;
32
+ text-align: center;
33
+ @include background(linear-gradient(top, $background 0%, darken($background, 5%) 50%, darken($background, 10%) 51%, darken($background, 15%) 100%));
34
+ @include border-radius($mini-button-default-height);
35
+ @include box-shadow(#333 0px 1px 2px 0px);
36
+
37
+ &:hover{
38
+ background: darken($background, 5%);
39
+ }
40
+
41
+ &:active{
42
+ background: darken($background, 15%);
43
+ @include box-shadow(#999 0px 0px 3px 3px inset);
44
+ }
45
+
46
+ span{
47
+ color: $color;
48
+ display: block;
49
+ font-size: $mini-button-default-font-size;
50
+ }
51
+
52
+ }
53
+
54
+ @mixin mini-button-layout(){
55
+
56
+ display: inline-block;
57
+ height: $mini-button-default-height;
58
+ padding-right: $mini-button-default-height;
59
+
60
+ span{
61
+ height: $mini-button-default-height;
62
+ padding: 0 0 0 $mini-button-default-height;
63
+ line-height: $mini-button-default-height;
64
+ }
65
+
66
+ }
@@ -36,6 +36,8 @@ $despegar-size-6 : 28px;
36
36
  $despegar-black : #000;
37
37
  $despegar-white : #FFF;
38
38
  $despegar-yellow : #FF3;
39
+ $despegar-red : #F00;
40
+ $despegar-blue : #013D93;
39
41
 
40
42
  //
41
43
  // Escala de grises
@@ -61,7 +63,7 @@ $despegar-searchbox-bg : $despegar-yellow;
61
63
  //
62
64
  // Titulos y destacados
63
65
  //
64
- $despegar-title-color : #013D93;
66
+ $despegar-title-color : $despegar-blue;
65
67
 
66
68
  //
67
69
  // Titulos y destacados (alt)
@@ -87,7 +89,7 @@ $despegar-error-bg : #FFE6E6;
87
89
  //
88
90
  // Errores: borde
89
91
  //
90
- $despegar-error-border : #F00;
92
+ $despegar-error-border : $despegar-red;
91
93
 
92
94
  //
93
95
  // Warning: fondo
@@ -0,0 +1,33 @@
1
+ //
2
+ // Clearfix
3
+ //
4
+
5
+
6
+ //
7
+ // Permite aplicar la tecnica clearfix en determinados elementos, sin utilizar overflow: hidden o un elemento demas
8
+ //
9
+ // @example
10
+ // .my-element {
11
+ // @include clearfix;
12
+ // }
13
+ //
14
+ // @see http://nicolasgallagher.com/micro-clearfix-hack/
15
+ //
16
+ //
17
+
18
+ @mixin clearfix{
19
+
20
+ &:before, &:after{
21
+ content:"";
22
+ display:table;
23
+ }
24
+
25
+ &:after{
26
+ clear:both;
27
+ }
28
+
29
+ .ie6 &, .ie7 & {
30
+ zoom:1;
31
+ }
32
+
33
+ }
metadata CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
5
5
  segments:
6
6
  - 0
7
7
  - 0
8
- - 1
9
- version: 0.0.1
8
+ - 2
9
+ version: 0.0.2
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-05-09 00:00:00 -03:00
17
+ date: 2012-06-01 00:00:00 -03:00
18
18
  default_executable:
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency
@@ -46,10 +46,47 @@ files:
46
46
  - LICENSE
47
47
  - README.md
48
48
  - Rakefile
49
+ - docs/all.html
50
+ - docs/arrows.html
51
+ - docs/bubbles.html
52
+ - docs/build/manifest.json
53
+ - docs/build/md/arrows.md
54
+ - docs/build/md/bubbles.md
55
+ - docs/build/md/buttons.md
56
+ - docs/build/md/components.md
57
+ - docs/build/md/despegar.md
58
+ - docs/build/md/intro.md
59
+ - docs/build/md/utils.md
60
+ - docs/build/templates/index.html
61
+ - docs/build/templates/layout.html
62
+ - docs/build/templates/page.html
63
+ - docs/buttons.html
64
+ - docs/components.html
65
+ - docs/config.rb
66
+ - docs/css/github.css
67
+ - docs/css/markdown.css
68
+ - docs/css/style.css
69
+ - docs/despegar.html
70
+ - docs/index.html
71
+ - docs/intro.html
72
+ - docs/js/docs.js
73
+ - docs/js/rainbow-custom.min.js
74
+ - docs/sass/style.scss
75
+ - docs/utils.html
49
76
  - lib/picasso.rb
50
77
  - lib/picasso/version.rb
51
78
  - picasso.gemspec
52
- - stylesheets/despegar/_variables.scss
79
+ - stylesheets/_picasso.scss
80
+ - stylesheets/picasso/_components.scss
81
+ - stylesheets/picasso/_despegar.scss
82
+ - stylesheets/picasso/_utils.scss
83
+ - stylesheets/picasso/components/_arrows.scss
84
+ - stylesheets/picasso/components/_bubbles.scss
85
+ - stylesheets/picasso/components/_buttons.scss
86
+ - stylesheets/picasso/components/buttons/_buttons.scss
87
+ - stylesheets/picasso/components/buttons/_mini-buttons.scss
88
+ - stylesheets/picasso/despegar/_variables.scss
89
+ - stylesheets/picasso/utils/_clearfix.scss
53
90
  has_rdoc: true
54
91
  homepage: http://www.despegar.com/
55
92
  licenses: []