picasso 0.1.0 → 0.2.0

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 (49) hide show
  1. data/docs/accordions.html +6 -3
  2. data/docs/all.html +105 -60
  3. data/docs/arrows.html +6 -3
  4. data/docs/bubbles.html +6 -3
  5. data/docs/build/md/changelog.md +9 -2
  6. data/docs/build/md/components/buttons.md +167 -137
  7. data/docs/build/md/components/navs.md +1 -1
  8. data/docs/build/md/components/popups.md +1 -1
  9. data/docs/build/md/intro.md +17 -1
  10. data/docs/build/md/todo.md +2 -1
  11. data/docs/build/templates/layout.html +2 -1
  12. data/docs/buttons.html +75 -54
  13. data/docs/changelog.html +15 -5
  14. data/docs/components.html +6 -3
  15. data/docs/css/markdown.css +1 -1
  16. data/docs/css/style.css +720 -220
  17. data/docs/despegar.html +6 -3
  18. data/docs/img/picasso-buttons-glossy.png +0 -0
  19. data/docs/img/{picasso-mini-buttons.png → picasso-buttons-mini.png} +0 -0
  20. data/docs/index.html +23 -4
  21. data/docs/inputs.html +6 -3
  22. data/docs/intro.html +23 -4
  23. data/docs/list-grids.html +6 -3
  24. data/docs/mejoras.html +6 -3
  25. data/docs/navs.html +7 -4
  26. data/docs/pagination.html +6 -3
  27. data/docs/popups.html +7 -4
  28. data/docs/sass/style.scss +43 -19
  29. data/docs/todo.html +8 -4
  30. data/docs/utils.html +6 -3
  31. data/lib/picasso/version.rb +1 -1
  32. data/picasso.gemspec +0 -1
  33. data/stylesheets/picasso/components/_accordions.scss +13 -13
  34. data/stylesheets/picasso/components/_arrows.scss +2 -2
  35. data/stylesheets/picasso/components/_bubbles.scss +5 -5
  36. data/stylesheets/picasso/components/_buttons.scss +3 -2
  37. data/stylesheets/picasso/components/_inputs.scss +7 -7
  38. data/stylesheets/picasso/components/_list-grids.scss +6 -6
  39. data/stylesheets/picasso/components/_navs.scss +10 -10
  40. data/stylesheets/picasso/components/_pagination.scss +8 -8
  41. data/stylesheets/picasso/components/_popups.scss +15 -15
  42. data/stylesheets/picasso/components/buttons/_3d.scss +127 -0
  43. data/stylesheets/picasso/components/buttons/_glossy.scss +220 -0
  44. data/stylesheets/picasso/components/buttons/_mini.scss +150 -0
  45. metadata +9 -23
  46. data/docs/ie.html +0 -201
  47. data/docs/img/picasso-buttons.png +0 -0
  48. data/stylesheets/picasso/components/buttons/_buttons.scss +0 -191
  49. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +0 -149
data/docs/todo.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
@@ -176,7 +179,8 @@
176
179
  </ul>
177
180
  <a name="otros"></a><h2>Otros</h2>
178
181
  <ul>
179
- <li>Creaci&oacute;n de sprites: Implementar API para poder detectar si un archivo ya existe y obtener el path de im&aacute;genes especificado en el config.rb.</li>
182
+ <li>Creaci&oacute;n de sprites: Implementar API para poder detectar si un archivo ya existe.</li>
183
+ <li>Mejoras en la documentaci&oacute;n especificando variables por defecto de cada componente y mejor descripci&oacute;n de sus par&aacute;metros.</li>
180
184
  </ul>
181
185
 
182
186
  </article>
data/docs/utils.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
data/lib/picasso/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Picasso
2
- VERSION = "0.1.0"
2
+ VERSION = "0.2.0"
3
3
  end
data/picasso.gemspec CHANGED
@@ -18,5 +18,4 @@ Gem::Specification.new do |gem|
18
18
 
19
19
  gem.add_dependency("compass", [">= 0.12.1"])
20
20
  gem.add_dependency("compass-magick", [">= 0.1.6"])
21
- gem.add_dependency("oily_png", [">= 1.0.2"])
22
21
  end
data/stylesheets/picasso/components/_accordions.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  //
2
2
  // Accordions
3
3
  //
4
- $accordion-default-height: 20px;
5
- $accordion-default-background-color: #013D93;
6
- $accordion-default-text-color: #FFFFFF;
4
+ $accordion-default-height: 20px !default;
5
+ $accordion-default-background-color: #013D93 !default;
6
+ $accordion-default-text-color: #FFFFFF !default;
7
7
 
8
- $arrow-height: 8px;
9
- $arrow-width: 5px;
8
+ $accordion-default-arrow-height: 8px !default;
9
+ $accordion-default-arrow-width: 5px !default;
10
10
 
11
11
  @mixin accordion(
12
12
  $height: $accordion-default-height,
@@ -37,17 +37,17 @@ $arrow-width: 5px;
37
37
 
38
38
  .accordion-header-open {
39
39
  .arrow {
40
- border-left: $arrow-width solid transparent;
41
- border-right: $arrow-width solid transparent;
42
- border-top: $arrow-height solid $text-color;
40
+ border-left: $accordion-default-arrow-width solid transparent;
41
+ border-right: $accordion-default-arrow-width solid transparent;
42
+ border-top: $accordion-default-arrow-height solid $text-color;
43
43
  }
44
44
  }
45
45
 
46
46
  .accordion-header-close {
47
47
  .arrow {
48
- border-left: $arrow-height solid $text-color;
49
- border-bottom: $arrow-width solid transparent;
50
- border-top: $arrow-width solid transparent;
48
+ border-left: $accordion-default-arrow-height solid $text-color;
49
+ border-bottom: $accordion-default-arrow-width solid transparent;
50
+ border-top: $accordion-default-arrow-width solid transparent;
51
51
  }
52
52
  }
53
53
 
@@ -79,13 +79,13 @@ $arrow-width: 5px;
79
79
 
80
80
  .accordion-header-open {
81
81
  .arrow {
82
- top: ($height - $arrow-width) / 2;
82
+ top: ($height - $accordion-default-arrow-width) / 2;
83
83
  }
84
84
  }
85
85
 
86
86
  .accordion-header-close {
87
87
  .arrow {
88
- top: ($height - $arrow-height) / 2;
88
+ top: ($height - $accordion-default-arrow-height) / 2;
89
89
  }
90
90
  }
91
91
 
data/stylesheets/picasso/components/_arrows.scss CHANGED
@@ -4,8 +4,8 @@
4
4
 
5
5
  @import "picasso/utils/ie";
6
6
 
7
- $arrow-default-background: #888;
8
- $arrow-default-color: white;
7
+ $arrow-default-background: #888 !default;
8
+ $arrow-default-color: white !default;
9
9
 
10
10
  @mixin arrow(
11
11
 
data/stylesheets/picasso/components/_bubbles.scss CHANGED
@@ -6,11 +6,11 @@
6
6
  @import "compass/typography/text/ellipsis";
7
7
  @import "picasso/utils/ie";
8
8
 
9
- $bubble-default-width : auto;
10
- $bubble-default-background : #EEE;
11
- $bubble-default-color : #999;
12
- $bubble-default-ellipsis : false;
13
- $bubble-default-ellipsis-position : right;
9
+ $bubble-default-width : auto !default;
10
+ $bubble-default-background : #EEE !default;
11
+ $bubble-default-color : #999 !default;
12
+ $bubble-default-ellipsis : false !default;
13
+ $bubble-default-ellipsis-position : right !default;
14
14
 
15
15
  @mixin bubble(
16
16
 
data/stylesheets/picasso/components/_buttons.scss CHANGED
@@ -1,2 +1,3 @@
1
- @import "buttons/buttons";
2
- @import "buttons/mini-buttons";
1
+ @import "buttons/3d";
2
+ @import "buttons/glossy";
3
+ @import "buttons/mini";
data/stylesheets/picasso/components/_inputs.scss CHANGED
@@ -6,13 +6,13 @@
6
6
  @import "compass/css3/box-sizing";
7
7
  @import "compass/css3/box-shadow";
8
8
 
9
- $text-input-default-width: 200px;
10
- $text-input-default-height: 20px;
11
- $text-input-default-border-color: #DDD;
12
- $text-input-default-border-focus-color: #319fda;
13
- $text-input-default-border-radius: 3px 3px 3px 3px;
14
- $text-input-default-text-color: #333333;
15
- $text-input-default-font-size: 11px;
9
+ $text-input-default-width: 200px !default;
10
+ $text-input-default-height: 20px !default;
11
+ $text-input-default-border-color: #DDD !default;
12
+ $text-input-default-border-focus-color: #319fda !default;
13
+ $text-input-default-border-radius: 3px 3px 3px 3px !default;
14
+ $text-input-default-text-color: #333333 !default;
15
+ $text-input-default-font-size: 11px !default;
16
16
 
17
17
  @mixin input(
18
18
  $width: $text-input-default-width,
data/stylesheets/picasso/components/_list-grids.scss CHANGED
@@ -4,12 +4,12 @@
4
4
 
5
5
  @import "picasso/utils/clearfix";
6
6
 
7
- $list-grid-default-cell-width: 130px;
8
- $list-grid-default-cell-height: 30px;
9
- $list-grid-default-border-color: #CCCCCC;
10
- $list-grid-default-odd-color: #EEEEEE;
11
- $list-grid-default-even-color: #FFFFFF;
12
- $list-grid-default-hover-color: #319fda;
7
+ $list-grid-default-cell-width: 130px !default;
8
+ $list-grid-default-cell-height: 30px !default;
9
+ $list-grid-default-border-color: #CCCCCC !default;
10
+ $list-grid-default-odd-color: #EEEEEE !default;
11
+ $list-grid-default-even-color: #FFFFFF !default;
12
+ $list-grid-default-hover-color: #319fda !default;
13
13
 
14
14
  @mixin list-grid(
15
15
  $cell-width: $list-grid-default-cell-width,
data/stylesheets/picasso/components/_navs.scss CHANGED
@@ -7,21 +7,21 @@
7
7
  @import "compass/css3/border-radius";
8
8
  @import "picasso/utils/sprite";
9
9
 
10
- $nav-default-font-size: 16px;
11
- $nav-default-font-family: sans-serif;
12
- $nav-default-image-dir: '';
10
+ $nav-default-font-size: 16px !default;
11
+ $nav-default-font-family: sans-serif !default;
12
+ $nav-default-image-dir: '' !default;
13
13
  $nav-sprite-created: false !default;
14
- $nav-sprite-name: "picasso-nav";
14
+ $nav-sprite-name: "picasso-nav" !default;
15
15
  $nav-ie-fallback: "sprites" !default;
16
16
  $nav-active-item-class: "active" !default;
17
17
  $nav-last-item-class: "last" !default;
18
18
 
19
- $nav-default-height : 40px;
20
- $nav-default-width : 435px;
21
- $nav-default-background: white;
22
- $nav-default-border-color: #ACACAC;
23
- $nav-default-shadow-color: black;
24
- $nav-default-float: left;
19
+ $nav-default-height : 40px !default;
20
+ $nav-default-width : 435px !default;
21
+ $nav-default-background: white !default;
22
+ $nav-default-border-color: #ACACAC !default;
23
+ $nav-default-shadow-color: black !default;
24
+ $nav-default-float: left !default;
25
25
 
26
26
  @mixin nav(
27
27
 
data/stylesheets/picasso/components/_pagination.scss CHANGED
@@ -4,14 +4,14 @@
4
4
 
5
5
  @import "compass/css3/border-radius";
6
6
 
7
- $pagination-default-link-color : #319FDA;
8
- $pagination-default-page-color : #888;
9
- $pagination-default-background-page-color : #EEE;
10
- $pagination-default-border-color : #CCC;
11
- $pagination-default-border-radius : 5px;
12
- $pagination-default-hover-color : #FFF;
13
- $pagination-default-hover-background-color : #013D93;
14
- $pagination-default-size : 27px;
7
+ $pagination-default-link-color : #319FDA !default;
8
+ $pagination-default-page-color : #888 !default;
9
+ $pagination-default-background-page-color : #EEE !default;
10
+ $pagination-default-border-color : #CCC !default;
11
+ $pagination-default-border-radius : 5px !default;
12
+ $pagination-default-hover-color : #FFF !default;
13
+ $pagination-default-hover-background-color : #013D93 !default;
14
+ $pagination-default-size : 27px !default;
15
15
 
16
16
  @mixin pagination(
17
17
 
data/stylesheets/picasso/components/_popups.scss CHANGED
@@ -7,23 +7,23 @@
7
7
  @import "picasso/utils/sprite";
8
8
  @import "picasso/utils/ie";
9
9
 
10
- $popup-default-background: white;
11
- $popup-default-border-radius: 3px;
12
- $popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
13
- $popup-default-background-border: #000000;
14
- $popup-default-background-border-opacity: 0.7;
15
- $popup-default-close-button-background: #319FDA;
16
- $popup-default-close-button-color: white;
17
- $popup-default-title-background: none repeat scroll 0 0 #F7F7F7;
18
- $popup-default-title-color: #003770;
10
+ $popup-default-background: white !default;
11
+ $popup-default-border-radius: 3px !default;
12
+ $popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px !default;
13
+ $popup-default-background-border: #000000 !default;
14
+ $popup-default-background-border-opacity: 0.7 !default;
15
+ $popup-default-close-button-background: #319FDA !default;
16
+ $popup-default-close-button-color: white !default;
17
+ $popup-default-title-background: none repeat scroll 0 0 #F7F7F7 !default;
18
+ $popup-default-title-color: #003770 !default;
19
19
 
20
- $popup-default-arrow-height: 10px;
21
- $popup-default-arrow-padding: 10px;
22
- $popup-default-close-button-height: 20px;
23
- $popup-default-close-button-border: 3px;
24
- $popup-default-close-button-size: $popup-default-close-button-height + ($popup-default-close-button-border * 2);
20
+ $popup-default-arrow-height: 10px !default;
21
+ $popup-default-arrow-padding: 10px !default;
22
+ $popup-default-close-button-height: 20px !default;
23
+ $popup-default-close-button-border: 3px !default;
24
+ $popup-default-close-button-size: $popup-default-close-button-height + ($popup-default-close-button-border * 2) !default;
25
25
  $popup-sprite-created: false !default;
26
- $popup-sprite-name: "picasso-popup";
26
+ $popup-sprite-name: "picasso-popup" !default;
27
27
  $popup-ie-fallback: "sprites" !default;
28
28
 
29
29
  @mixin popup(
data/stylesheets/picasso/components/buttons/_3d.scss ADDED
@@ -0,0 +1,127 @@
1
+ //
2
+ // 3D Buttons
3
+ //
4
+
5
+ @import "compass/css3/images";
6
+ @import "compass/css3/border-radius";
7
+ @import "compass/css3/text-shadow";
8
+ @import "compass/css3/box-shadow";
9
+ @import "picasso/utils/sprite";
10
+
11
+ $button-3d-default-background : #F73741 !default;
12
+ $button-3d-default-color : white !default;
13
+ $button-3d-default-font-size : 13px !default;
14
+ $button-3d-default-full-width : false !default;
15
+ $button-3d-default-full-rounded : false !default;
16
+
17
+ @mixin button-3d(
18
+
19
+ // Background del boton
20
+ $background: $button-3d-default-background,
21
+
22
+ // Color del botón
23
+ $color: $button-3d-default-color,
24
+
25
+ // Tamaño de la fuente del botón
26
+ $font-size: $button-3d-default-font-size,
27
+
28
+ // Boton ancho al 100%
29
+ $full-width: $button-3d-default-full-width,
30
+
31
+ // Boton con bordes al 100%
32
+ $full-rounded: $button-3d-default-full-rounded
33
+
34
+ ){
35
+
36
+ @include button-3d-layout($font-size, $full-width, $full-rounded);
37
+ @include button-3d-visual($background, $color, $font-size, $full-rounded);
38
+
39
+ }
40
+
41
+ @mixin button-3d-layout($font-size, $full-width, $full-rounded){
42
+ padding: 0 $font-size;
43
+
44
+ @if $full-width == true {
45
+ display: block;
46
+ } @else {
47
+ display: inline-block;
48
+ }
49
+
50
+ @if $full-rounded == true {
51
+ line-height: 1.75em;
52
+ } @else {
53
+ line-height: 2.2em;
54
+ }
55
+
56
+ &:active {
57
+ position:relative;
58
+ top:1px;
59
+ }
60
+
61
+ }
62
+
63
+
64
+ @mixin button-3d-visual($background, $color, $font-size, $full-rounded){
65
+ color: $color;
66
+ border: 1px solid darken($background, 20);
67
+ font-family: sans-serif;
68
+ font-size: $font-size;
69
+ text-decoration:none;
70
+ background-color: $background;
71
+ text-align: center;
72
+ @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
+
79
+ @if $full-rounded == true {
80
+ @include border-radius(1.1em);
81
+ } @else {
82
+ @include border-radius(0.4em);
83
+ }
84
+
85
+ &:visited {
86
+ color: $color;
87
+ }
88
+
89
+ &:hover {
90
+ text-decoration: none;
91
+ 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
+ }
101
+
102
+ &:active {
103
+ @include background-image(linear-gradient($background, darken($background, 30)));
104
+ @include text-shadow(0 -1px 0 desaturate(invert($color), 100));
105
+ @include box-shadow(
106
+ 0 0.1em 0.1em rgba(0, 0, 0, 0.1),
107
+ inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5),
108
+ inset 0 0.1em 0 rgba(0, 0, 0, 0.1),
109
+ inset 0 0 1em rgba(0, 0, 0, 0.75)
110
+ );
111
+ }
112
+
113
+ .ie7 &, .ie8 &, .ie9 &{
114
+
115
+ @include filter-gradient($background, darken($background, 30));
116
+
117
+ &:hover {
118
+ @include filter-gradient(rgba(255, 255, 255, 0), darken($background, 20));
119
+ }
120
+
121
+ &:active {
122
+ @include filter-gradient($background, darken($background, 30));
123
+ }
124
+
125
+ }
126
+
127
+ }