fancy-buttons 0.5.1 → 0.5.2

Sign up to get free protection for your applications and to get access to all the features.
data/Rakefile CHANGED
@@ -7,8 +7,8 @@ begin
7
7
  gemspec.email = "brandon@imathis.com"
8
8
  gemspec.homepage = "http://github.com/imathis/fancy-buttons"
9
9
  gemspec.author = "Brandon Mathis"
10
- gemspec.add_dependency('haml', '>= 3.0.0.beta.3')
11
- gemspec.add_dependency('compass', '>= 0.10.0.rc3')
10
+ gemspec.add_dependency('haml', '>= 3.0.2')
11
+ gemspec.add_dependency('compass', '>= 0.10.0')
12
12
  gemspec.files = []
13
13
  gemspec.files << "fancy-buttons.gemspec"
14
14
  gemspec.files << "README.markdown"
@@ -5,11 +5,11 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = %q{fancy-buttons}
8
- s.version = "0.5.1"
8
+ s.version = "0.5.2"
9
9
 
10
10
  s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
11
11
  s.authors = ["Brandon Mathis"]
12
- s.date = %q{2010-04-24}
12
+ s.date = %q{2010-05-13}
13
13
  s.description = %q{Easily style buttons with beautiful CSS3 features like gradients, rounded corners, etc. Don't worry the buttons also degrade nicely for browsers with no support. This requires the Compass stylesheet authoring framework.}
14
14
  s.email = %q{brandon@imathis.com}
15
15
  s.extra_rdoc_files = [
@@ -20,8 +20,9 @@ Gem::Specification.new do |s|
20
20
  "Rakefile",
21
21
  "fancy-buttons.gemspec",
22
22
  "lib/fancy-buttons.rb",
23
+ "lib/stylesheets/_fancy-buttons.sass",
24
+ "lib/stylesheets/_fancy-gradient.sass",
23
25
  "lib/stylesheets/_fancy_buttons.sass",
24
- "lib/stylesheets/_fancy_gradient.sass",
25
26
  "lib/templates/project/button_bg.png",
26
27
  "lib/templates/project/buttons.sass",
27
28
  "lib/templates/project/ie6.sass",
@@ -39,15 +40,15 @@ Gem::Specification.new do |s|
39
40
  s.specification_version = 3
40
41
 
41
42
  if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
42
- s.add_runtime_dependency(%q<haml>, [">= 3.0.0.beta.3"])
43
- s.add_runtime_dependency(%q<compass>, [">= 0.10.0.rc3"])
43
+ s.add_runtime_dependency(%q<haml>, [">= 3.0.2"])
44
+ s.add_runtime_dependency(%q<compass>, [">= 0.10.0"])
44
45
  else
45
- s.add_dependency(%q<haml>, [">= 3.0.0.beta.3"])
46
- s.add_dependency(%q<compass>, [">= 0.10.0.rc3"])
46
+ s.add_dependency(%q<haml>, [">= 3.0.2"])
47
+ s.add_dependency(%q<compass>, [">= 0.10.0"])
47
48
  end
48
49
  else
49
- s.add_dependency(%q<haml>, [">= 3.0.0.beta.3"])
50
- s.add_dependency(%q<compass>, [">= 0.10.0.rc3"])
50
+ s.add_dependency(%q<haml>, [">= 3.0.2"])
51
+ s.add_dependency(%q<compass>, [">= 0.10.0"])
51
52
  end
52
53
  end
53
54
 
@@ -0,0 +1,174 @@
1
+ @import compass/css3
2
+ @import fancy-gradient
3
+
4
+ $fb_gradient_style: glossy !default
5
+ $fb_invert_on_click: 1 !default
6
+ $fb_font_size: 18px !default
7
+ $fb_color: #444444 !default
8
+ $fb_font_weight: bold !default
9
+ $fb_border_width: 1px !default
10
+ $fb_radius: 6px !default
11
+ $fb_light_text: white !default
12
+ $fb_dark_text: #222222 !default
13
+ $fb_gradient: 1 !default
14
+ $fb_image_path: image_url("button_bg.png") !default
15
+
16
+ // Make a fancy button.
17
+ =fancy-button($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
18
+ +fancy-button-structure($font_size, $radius, $border_width)
19
+ +fancy-button-colors($color)
20
+
21
+ // Style the button's colors, picking the most appropriate color set for the base color.
22
+ =fancy-button-colors($color: $fb_color, $hover: 0, $active: 0)
23
+ +fb-color($color, "default")
24
+ &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
25
+ +fb-color($color, "default")
26
+ &:hover, &:focus
27
+ @if $hover == 0
28
+ +fb-color(darken($color, 3), "hover", $color)
29
+ @else
30
+ +fb-color($hover, "hover")
31
+ &:active
32
+ @if $active == 0
33
+ +fb-color(darken($color, 6), "active", $color)
34
+ @else
35
+ +fb-color($active, "active")
36
+
37
+ =fancy-button-matte($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
38
+ +fancy-button-structure($font_size, $radius, $border_width)
39
+ +fancy-button-colors-matte($color)
40
+
41
+ =fancy-button-custom($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
42
+ +fancy-button-structure($font_size, $radius, $border_width)
43
+ +fancy-button-colors-custom($color, $font_size, $radius, $border_width)
44
+
45
+ =fancy-button-colors-matte($color: $fb_color, $hover: 0, $active: 0)
46
+ $fb_current_style: $fb_gradient_style
47
+ $fb_gradient_style: matte
48
+ +fancy-button-colors($color, $hover, $active)
49
+ $fb_gradient_style: $fb_current_style
50
+
51
+ =fancy-button-colors-custom($color: $fb_color, $hover: 0, $active: 0)
52
+ $fb_current_style: $fb_gradient_style
53
+ $fb_gradient_style: custom
54
+ +fancy-button-colors($color, $hover, $active)
55
+ $fb_gradient_style: $fb_current_style
56
+
57
+ // Default state color settings
58
+ =fb-color($color, $state, $lumins: $color)
59
+ $gradient_top: lighten($color, 15)
60
+ $gradient_bottom: darken($color, 6)
61
+ $border_color: darken($color, 8)
62
+ @if $fb_invert_on_click != 0
63
+ $border_color: darken($color, 15)
64
+ @if saturation($color) > 0
65
+ $color: saturate($color, 40)
66
+ @else if lightness($lumins) >= lightness(#aaaaaa)
67
+ $color: lighten($color, 20)
68
+ +fb-state-colors($color, $gradient_top, $gradient_bottom, $border_color, $state, $lumins)
69
+
70
+ // Apply the button colors specified for the button state into which it is mixed.
71
+ =fb-state-colors($color, $gradient_top, $gradient_bottom, $border, $state, $lumins: $color)
72
+ background-color: $color
73
+ @if $fb_gradient != 0
74
+ @if $fb_gradient_style == "glossy"
75
+ @if $fb_invert_on_click != 0 and $state == "active"
76
+ +invert-fancy-gradient($gradient_top, $gradient_bottom)
77
+ @else
78
+ +fancy-gradient($gradient_top, $gradient_bottom)
79
+ @else if $fb_gradient_style == "matte"
80
+ @if $fb_invert_on_click and $state == "active"
81
+ +invert-fancy-matte-gradient($gradient_top, $gradient_bottom)
82
+ @else
83
+ +fancy-matte-gradient($gradient_top, $gradient_bottom)
84
+ @else if $fb_gradient_style == "custom"
85
+ @if $fb_invert_on_click and $state == "active"
86
+ +invert-custom-fancy-gradient($gradient_top, $gradient_bottom)
87
+ @else
88
+ +custom-fancy-gradient($gradient_top, $gradient_bottom)
89
+ border:
90
+ color: $border
91
+ $text_shadow_settings: unquote("0px 1px 1px")
92
+ @if $fb_invert_on_click != 0 and $state == "active"
93
+ $text_shadow_settings: unquote("0px -1px -1px")
94
+ @if lightness($lumins) < lightness(#aaaaaa)
95
+ text-shadow: darken($color, 25) $text_shadow_settings
96
+ &, &:visited
97
+ color: $fb_light_text
98
+ @else
99
+ text-shadow: lighten($color, 15) $text_shadow_settings
100
+ &, &:visited
101
+ color: $fb_dark_text
102
+
103
+ =fancy-button-text-colors($color, $hover, $active)
104
+ color: $color
105
+ &:hover, &:focus
106
+ color: $hover
107
+ &:active
108
+ color: $active
109
+ &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
110
+ color: $color
111
+
112
+ // Apply this mixin to a nested element to style an arrow
113
+ =fancy-arrow($font_size)
114
+ font-size: $font_size + 4px
115
+ line-height: $font_size - 4px
116
+ margin-left: 4px
117
+
118
+ // Layout the button's box
119
+ =fancy-button-structure($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
120
+ +fb-reset
121
+ +fancy-button-size($font_size, $radius, $border_width, $line_height)
122
+
123
+ =fancy-button-size($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
124
+ // better padding for smaller buttons
125
+ $v_padding: 0
126
+ $h_padding: 0
127
+ @if $font_size > 15
128
+ $v_padding: floor($font_size / 3.5)
129
+ $h_padding: $font_size
130
+ @else
131
+ $v_padding: floor($font_size / 5)
132
+ $h_padding: floor($font_size / 1.2)
133
+ @if $radius > 0
134
+ +border-radius($radius)
135
+ font-size: $font_size
136
+ line-height: $line_height
137
+ +fancy-button-padding($v_padding, $h_padding, $border_width)
138
+
139
+ =fancy-button-padding($v_padding, $h_padding, $border_width: $fb_border_width)
140
+ $v_padding_active: $v_padding - 1px
141
+ $h_padding_active: $h_padding - 1px
142
+ padding: $v_padding $h_padding
143
+ border-width: $border_width
144
+ &:active
145
+ padding: $v_padding_active $h_padding_active
146
+ border-width: $border_width + 1px
147
+ &.disabled:active, &[disabled]
148
+ padding: $v_padding $h_padding
149
+ border-width: $border_width
150
+
151
+ // Reset the button's important properties to make sure they behave correctly
152
+ =fb-reset($font_weight: $fb_font_weight)
153
+ font-family: "Lucida Grande", Lucida, Arial, sans_serif
154
+ background: #{$fb_image_path} repeat-x bottom left
155
+ margin: 0
156
+ width: auto
157
+ overflow: visible
158
+ display: inline-block
159
+ cursor: pointer
160
+ text-decoration: none
161
+ border-style: solid
162
+ font-weight: $font_weight
163
+ &::-moz-focus-inner
164
+ border: none
165
+ padding: 0
166
+ &:focus
167
+ outline: none
168
+ &.disabled, &[disabled]
169
+ +disable-button
170
+
171
+ =disable-button($opacity: 0.7)
172
+ +opacity($opacity)
173
+ &:hover, &:focus
174
+ cursor: default
@@ -1,172 +1,2 @@
1
- @import compass/css3
2
- @import fancy_gradient
3
-
4
- $fb_gradient_style: glossy !default
5
- $fb_invert_on_click: 1 !default
6
- $fb_font_size: 18px !default
7
- $fb_color: #444444 !default
8
- $fb_font_weight: bold !default
9
- $fb_border_width: 1px !default
10
- $fb_radius: 6px !default
11
- $fb_light_text: white !default
12
- $fb_dark_text: #222222 !default
13
- $fb_gradient: 1 !default
14
- $fb_image_path: image_url("button_bg.png") !default
15
-
16
- // Make a fancy button.
17
- =fancy-button($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
18
- +fancy-button-structure($font_size, $radius, $border_width)
19
- +fancy-button-colors($color)
20
-
21
- // Style the button's colors, picking the most appropriate color set for the base color.
22
- =fancy-button-colors($color: $fb_color, $hover: 0, $active: 0)
23
- +fb-color($color, "default")
24
- &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
25
- +fb-color($color, "default")
26
- &:hover, &:focus
27
- @if $hover == 0
28
- +fb-color(darken($color, 3), "hover", $color)
29
- @else
30
- +fb-color($hover, "hover")
31
- &:active
32
- @if $active == 0
33
- +fb-color(darken($color, 6), "active", $color)
34
- @else
35
- +fb-color($active, "active")
36
-
37
- =fancy-button-matte($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
38
- +fancy-button-structure($font_size, $radius, $border_width)
39
- +fancy-button-colors-matte($color)
40
-
41
- =fancy-button-custom($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
42
- +fancy-button-structure($font_size, $radius, $border_width)
43
- +fancy-button-colors-custom($color, $font_size, $radius, $border_width)
44
-
45
- =fancy-button-colors-matte($color: $fb_color, $hover: 0, $active: 0)
46
- $fb_current_style: $fb_gradient_style
47
- $fb_gradient_style: matte
48
- +fancy-button-colors($color, $hover, $active)
49
- $fb_gradient_style: $fb_current_style
50
-
51
- =fancy-button-colors-custom($color: $fb_color, $hover: 0, $active: 0)
52
- $fb_current_style: $fb_gradient_style
53
- $fb_gradient_style: custom
54
- +fancy-button-colors($color, $hover, $active)
55
- $fb_gradient_style: $fb_current_style
56
-
57
- // Default state color settings
58
- =fb-color($color, $state, $lumins: $color)
59
- $gradient_top: lighten($color, 15)
60
- $gradient_bottom: darken($color, 6)
61
- $border_color: darken($color, 8)
62
- @if $fb_invert_on_click != 0
63
- $border_color: darken($color, 15)
64
- @if saturation($color) > 0
65
- $color: saturate($color, 40)
66
- @else if lightness($lumins) >= lightness(#aaaaaa)
67
- $color: lighten($color, 20)
68
- +fb-state-colors($color, $gradient_top, $gradient_bottom, $border_color, $state, $lumins)
69
-
70
- // Apply the button colors specified for the button state into which it is mixed.
71
- =fb-state-colors($color, $gradient_top, $gradient_bottom, $border, $state, $lumins: $color)
72
- background-color: $color
73
- @if $fb_gradient != 0
74
- @if $fb_gradient_style == "glossy"
75
- @if $fb_invert_on_click != 0 and $state == "active"
76
- +invert-fancy-gradient($gradient_top, $gradient_bottom)
77
- @else
78
- +fancy-gradient($gradient_top, $gradient_bottom)
79
- @else if $fb_gradient_style == "matte"
80
- @if $fb_invert_on_click and $state == "active"
81
- +invert-fancy-matte-gradient($gradient_top, $gradient_bottom)
82
- @else
83
- +fancy-matte-gradient($gradient_top, $gradient_bottom)
84
- @else if $fb_gradient_style == "custom"
85
- @if $fb_invert_on_click and $state == "active"
86
- +invert-custom-fancy-gradient($gradient_top, $gradient_bottom)
87
- @else
88
- +custom-fancy-gradient($gradient_top, $gradient_bottom)
89
- border:
90
- color: $border
91
- $text_shadow_settings: unquote("0px 1px 1px")
92
- @if $fb_invert_on_click != 0 and $state == "active"
93
- $text_shadow_settings: unquote("0px -1px -1px")
94
- @if lightness($lumins) < lightness(#aaaaaa)
95
- text-shadow: darken($color, 25) $text_shadow_settings
96
- color: $fb_light_text
97
- @else
98
- text-shadow: lighten($color, 15) $text_shadow_settings
99
- color: $fb_dark_text
100
-
101
- =fancy-button-text-colors($color, $hover, $active)
102
- color: $color
103
- &:hover, &:focus
104
- color: $hover
105
- &:active
106
- color: $active
107
- &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
108
- color: $color
109
-
110
- // Apply this mixin to a nested element to style an arrow
111
- =fancy-arrow($font_size)
112
- font-size: $font_size + 4px
113
- line-height: $font_size - 4px
114
- margin-left: 4px
115
-
116
- // Layout the button's box
117
- =fancy-button-structure($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
118
- +fb-reset
119
- +fancy-button-size($font_size, $radius, $border_width, $line_height)
120
-
121
- =fancy-button-size($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2)
122
- // better padding for smaller buttons
123
- $v_padding: 0
124
- $h_padding: 0
125
- @if $font_size > 15
126
- $v_padding: floor($font_size / 3.5)
127
- $h_padding: $font_size
128
- @else
129
- $v_padding: floor($font_size / 5)
130
- $h_padding: floor($font_size / 1.2)
131
- @if $radius > 0
132
- +border-radius($radius)
133
- font-size: $font_size
134
- line-height: $line_height
135
- +fancy-button-padding($v_padding, $h_padding, $border_width)
136
-
137
- =fancy-button-padding($v_padding, $h_padding, $border_width: $fb_border_width)
138
- $v_padding_active: $v_padding - 1px
139
- $h_padding_active: $h_padding - 1px
140
- padding: $v_padding $h_padding
141
- border-width: $border_width
142
- &:active
143
- padding: $v_padding_active $h_padding_active
144
- border-width: $border_width + 1px
145
- &.disabled:active, &[disabled]
146
- padding: $v_padding $h_padding
147
- border-width: $border_width
148
-
149
- // Reset the button's important properties to make sure they behave correctly
150
- =fb-reset($font_weight: $fb_font_weight)
151
- font-family: "Lucida Grande", Lucida, Arial, sans_serif
152
- background: #{$fb_image_path} repeat-x bottom left
153
- margin: 0
154
- width: auto
155
- overflow: visible
156
- display: inline-block
157
- cursor: pointer
158
- text-decoration: none
159
- border-style: solid
160
- font-weight: $font_weight
161
- &::-moz-focus-inner
162
- border: none
163
- padding: 0
164
- &:focus
165
- outline: none
166
- &.disabled, &[disabled]
167
- +disable-button
168
-
169
- =disable-button($opacity: 0.7)
170
- +opacity($opacity)
171
- &:hover, &:focus
172
- cursor: default
1
+ @warn "DEPRECATED: Please change your @import of fancy_buttons.sass to: @import \"fancy-buttons\""
2
+ @import fancy-buttons
@@ -1,4 +1,4 @@
1
- @import fancy_buttons.sass
1
+ @import fancy-buttons
2
2
 
3
3
  body
4
4
  text-align: center
metadata CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
5
5
  segments:
6
6
  - 0
7
7
  - 5
8
- - 1
9
- version: 0.5.1
8
+ - 2
9
+ version: 0.5.2
10
10
  platform: ruby
11
11
  authors:
12
12
  - Brandon Mathis
@@ -14,7 +14,7 @@ autorequire:
14
14
  bindir: bin
15
15
  cert_chain: []
16
16
 
17
- date: 2010-04-24 00:00:00 -05:00
17
+ date: 2010-05-13 00:00:00 -05:00
18
18
  default_executable:
19
19
  dependencies:
20
20
  - !ruby/object:Gem::Dependency
@@ -27,10 +27,8 @@ dependencies:
27
27
  segments:
28
28
  - 3
29
29
  - 0
30
- - 0
31
- - beta
32
- - 3
33
- version: 3.0.0.beta.3
30
+ - 2
31
+ version: 3.0.2
34
32
  type: :runtime
35
33
  version_requirements: *id001
36
34
  - !ruby/object:Gem::Dependency
@@ -44,8 +42,7 @@ dependencies:
44
42
  - 0
45
43
  - 10
46
44
  - 0
47
- - rc3
48
- version: 0.10.0.rc3
45
+ version: 0.10.0
49
46
  type: :runtime
50
47
  version_requirements: *id002
51
48
  description: Easily style buttons with beautiful CSS3 features like gradients, rounded corners, etc. Don't worry the buttons also degrade nicely for browsers with no support. This requires the Compass stylesheet authoring framework.
@@ -61,8 +58,9 @@ files:
61
58
  - Rakefile
62
59
  - fancy-buttons.gemspec
63
60
  - lib/fancy-buttons.rb
61
+ - lib/stylesheets/_fancy-buttons.sass
62
+ - lib/stylesheets/_fancy-gradient.sass
64
63
  - lib/stylesheets/_fancy_buttons.sass
65
- - lib/stylesheets/_fancy_gradient.sass
66
64
  - lib/templates/project/button_bg.png
67
65
  - lib/templates/project/buttons.sass
68
66
  - lib/templates/project/ie6.sass