fancy-buttons 0.3.3 → 0.3.5

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/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', '>= 2.2')
11
- gemspec.add_dependency('compass', '>= 0.8')
10
+ gemspec.add_dependency('haml', '>= 2.2.14')
11
+ gemspec.add_dependency('compass', '>= 0.10.0.pre2')
12
12
  gemspec.add_dependency('compass-colors', '>= 0.3.1')
13
13
  gemspec.files = []
14
14
  gemspec.files << "fancy-buttons.gemspec"
@@ -5,11 +5,11 @@
5
5
 
6
6
  Gem::Specification.new do |s|
7
7
  s.name = %q{fancy-buttons}
8
- s.version = "0.3.3"
8
+ s.version = "0.3.5"
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{2009-11-23}
12
+ s.date = %q{2009-12-09}
13
13
  s.description = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
14
14
  s.email = %q{brandon@imathis.com}
15
15
  s.extra_rdoc_files = [
@@ -20,7 +20,6 @@ Gem::Specification.new do |s|
20
20
  "Rakefile",
21
21
  "fancy-buttons.gemspec",
22
22
  "lib/fancy-buttons.rb",
23
- "lib/sass/_border_radius.sass",
24
23
  "lib/sass/_fancy_buttons.sass",
25
24
  "lib/sass/_fancy_gradient.sass",
26
25
  "lib/templates/project/button_bg.png",
@@ -39,17 +38,17 @@ Gem::Specification.new do |s|
39
38
  s.specification_version = 3
40
39
 
41
40
  if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
42
- s.add_runtime_dependency(%q<haml>, [">= 2.2"])
43
- s.add_runtime_dependency(%q<compass>, [">= 0.8"])
41
+ s.add_runtime_dependency(%q<haml>, [">= 2.2.14"])
42
+ s.add_runtime_dependency(%q<compass>, [">= 0.10.0.pre2"])
44
43
  s.add_runtime_dependency(%q<compass-colors>, [">= 0.3.1"])
45
44
  else
46
- s.add_dependency(%q<haml>, [">= 2.2"])
47
- s.add_dependency(%q<compass>, [">= 0.8"])
45
+ s.add_dependency(%q<haml>, [">= 2.2.14"])
46
+ s.add_dependency(%q<compass>, [">= 0.10.0.pre2"])
48
47
  s.add_dependency(%q<compass-colors>, [">= 0.3.1"])
49
48
  end
50
49
  else
51
- s.add_dependency(%q<haml>, [">= 2.2"])
52
- s.add_dependency(%q<compass>, [">= 0.8"])
50
+ s.add_dependency(%q<haml>, [">= 2.2.14"])
51
+ s.add_dependency(%q<compass>, [">= 0.10.0.pre2"])
53
52
  s.add_dependency(%q<compass-colors>, [">= 0.3.1"])
54
53
  end
55
54
  end
@@ -1,52 +1,95 @@
1
- @import border_radius.sass
1
+ @import compass/css3.sass
2
2
  @import fancy_gradient.sass
3
3
 
4
- !default_button_font_size ||= 18px
5
- !default_button_color ||= #444
6
- !default_button_font_weight ||= "bold"
7
- !default_button_border_width ||= 1px
8
- !default_button_radius ||= 6px
4
+ !fb_gradient_style ||= "glossy"
5
+ !fb_invert_on_click ||= 1
6
+ !fb_font_size ||= 18px
7
+ !fb_color ||= #444
8
+ !fb_font_weight ||= "bold"
9
+ !fb_border_width ||= 1px
10
+ !fb_radius ||= 6px
11
+ !fb_light_text ||= #fff
12
+ !fb_dark_text ||= #222
9
13
 
10
14
  // Make a fancy button.
11
- =fancy-button(!color= !default_button_color, !font_size= !default_button_font_size, !radius= !default_button_radius, !border_width= !default_button_border_width)
15
+ =fancy-button(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
12
16
  +fancy-button-structure(!font_size, !radius, !border_width)
13
17
  +fancy-button-colors(!color)
14
18
 
15
19
  // Style the button's colors, picking the most appropriate color set for the base color.
16
- =fancy-button-colors(!color = !default_button_color, !hover = 0, !active = 0)
17
- @if !hover == 0
18
- !hover = darken(!color, 3)
19
- @if !active == 0
20
- !active = darken(!color, 6)
21
-
22
- +fb-color(!color)
20
+ =fancy-button-colors(!color = !fb_color, !hover = 0, !active = 0)
21
+ +fb-color(!color, "default")
23
22
  &:hover, &:focus
24
- +fb-color(!hover)
23
+ @if !hover == 0
24
+ +fb-color(darken(!color, 3), "hover", !color)
25
+ @else
26
+ +fb-color(!hover, "hover")
25
27
  &:active
26
- +fb-color(!active)
28
+ @if !active == 0
29
+ +fb-color(darken(!color, 6), "active", !color)
30
+ @else
31
+ +fb-color(!active, "active")
32
+
33
+ =fancy-button-matte(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
34
+ +fancy-button-structure(!font_size, !radius, !border_width)
35
+ +fancy-button-colors-matte(!color)
36
+
37
+ =fancy-button-custom(!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-custom(!color, !font_size, !radius, !border_width)
40
+
41
+ =fancy-button-colors-matte(!color = !fb_color, !hover = 0, !active = 0)
42
+ !fb_current_style = !fb_gradient_style
43
+ !fb_gradient_style = "matte"
44
+ +fancy-button-colors(!color, !hover, !active)
45
+ !fb_gradient_style = !fb_current_style
46
+
47
+ =fancy-button-colors-custom(!color = !fb_color, !hover = 0, !active = 0)
48
+ !fb_current_style = !fb_gradient_style
49
+ !fb_gradient_style = "custom"
50
+ +fancy-button-colors(!color, !hover, !active)
51
+ !fb_gradient_style = !fb_current_style
27
52
 
28
53
  // Default state color settings
29
- =fb-color(!color)
54
+ =fb-color(!color, !state, !lumins = !color)
30
55
  !gradient_top = lighten(!color, 15)
31
56
  !gradient_bottom = darken(!color, 06)
32
57
  !border_color = darken(!color, 08)
58
+ @if !fb_invert_on_click != 0
59
+ !border_color = darken(!color, 15)
33
60
  @if saturation(!color) > 0
34
61
  !color = saturate(!color, 40)
35
- +fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color)
62
+ +fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color, !state, !lumins)
36
63
 
37
64
  // Apply the button colors specified for the button state into which it is mixed.
38
- =fb-state-colors(!color, !gradient_top, !gradient_bottom, !border)
39
- !text_shadow = darken(!color, 25)
40
- color: #fff
65
+ =fb-state-colors(!color, !gradient_top, !gradient_bottom, !border, !state, !lumins = !color)
41
66
  background-color= !color
42
- +fancy-gradient(!gradient_top, !gradient_bottom)
43
- @if luminosity(!color) < luminosity(#aaa)
44
- text-shadow= !text_shadow "1px 1px 1px"
45
- @else
46
- text-shadow= lighten(!color, 10) "1px 1px 1px"
47
- color: #333
67
+ @if !fb_gradient_style == "glossy"
68
+ @if !fb_invert_on_click != 0 and !state == "active"
69
+ +invert-fancy-gradient(!gradient_top, !gradient_bottom)
70
+ @else
71
+ +fancy-gradient(!gradient_top, !gradient_bottom)
72
+ @else if !fb_gradient_style == "matte"
73
+ @if !fb_invert_on_click and !state == "active"
74
+ +invert-fancy-matte-gradient(!gradient_top, !gradient_bottom)
75
+ @else
76
+ +fancy-matte-gradient(!gradient_top, !gradient_bottom)
77
+ @else if !fb_gradient_style == "custom"
78
+ @if !fb_invert_on_click and !state == "active"
79
+ +invert-custom-fancy-gradient(!gradient_top, !gradient_bottom)
80
+ @else
81
+ +custom-fancy-gradient(!gradient_top, !gradient_bottom)
48
82
  border:
49
83
  color= !border
84
+ !text_shadow_settings = "0px 1px 1px"
85
+ @if !fb_invert_on_click != 0 and !state == "active"
86
+ !text_shadow_settings = "0px -1px -1px"
87
+ @if luminosity(!lumins) < luminosity(#aaa)
88
+ text-shadow= darken(!color, 25) !text_shadow_settings
89
+ color= !fb_light_text
90
+ @else
91
+ text-shadow= lighten(!color, 15) !text_shadow_settings
92
+ color= !fb_dark_text
50
93
 
51
94
  // Apply this mixin to a nested element to style an arrow
52
95
  =fancy-arrow(!font_size)
@@ -55,17 +98,11 @@
55
98
  margin-left= 4px
56
99
 
57
100
  // Layout the button's box
58
- =fancy-button-structure(!font_size = !default_button_font_size, !radius = !default_button_radius, !border_width = !default_button_border_width, !line_height = !font_size * 1.2)
101
+ =fancy-button-structure(!font_size = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
59
102
  +fb-reset
60
- +fancy-button-size(!font_size, !radius, !line_height)
61
- border-width= !border_width
62
- &:active
63
- border-width= !border_width + 1px
64
- &.disabled:active
65
- border-width= !border_width
66
-
67
- =fancy-button-size(!font_size = !default_button_font_size, !radius = !default_button_radius, !line_height = !font_size * 1.2)
103
+ +fancy-button-size(!font_size, !radius, !border_width, !line_height)
68
104
 
105
+ =fancy-button-size(!font_size = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
69
106
  // better padding for smaller buttons
70
107
  !v_padding = 0
71
108
  !h_padding = 0
@@ -76,23 +113,31 @@
76
113
  !v_padding = floor(!font_size/5)
77
114
  !h_padding = floor(!font_size/1.2)
78
115
 
79
- !v_padding_active = !v_padding - 1px
80
- !h_padding_active = !h_padding - 1px
81
116
  @if !radius > 0
82
117
  +border-radius(!radius)
83
- padding= !v_padding !h_padding
84
118
  font-size= !font_size
85
119
  line-height= !line_height
120
+ +fancy-button-padding(!v_padding, !h_padding, !border_width)
121
+
122
+ =fancy-button-padding(!v_padding, !h_padding, !border_width = !fb_border_width)
123
+ !v_padding_active = !v_padding - 1px
124
+ !h_padding_active = !h_padding - 1px
125
+ padding= !v_padding !h_padding
126
+ border-width= !border_width
86
127
  &:active
87
128
  padding= !v_padding_active !h_padding_active
129
+ border-width= !border_width + 1px
88
130
  &.disabled:active
89
131
  padding= !v_padding !h_padding
132
+ border-width= !border_width
90
133
 
91
134
  // Reset the button's important properties to make sure they behave correctly
92
- =fb-reset(!font_weight = !default_button_font_weight)
135
+ =fb-reset(!font_weight = !fb_font_weight)
93
136
  font-family: "Lucida Grande", Lucida, Arial, sans_serif
94
137
  background: #{image_url("button_bg.png")} repeat-x bottom left
95
138
  margin: 0
139
+ width: auto
140
+ overflow: visible
96
141
  display: inline-block
97
142
  cursor: pointer
98
143
  text-decoration: none
@@ -107,4 +152,4 @@
107
152
  =disable-button(!opacity = .7)
108
153
  +opacity(!opacity)
109
154
  &:hover
110
- cursor: default
155
+ cursor: default
@@ -1,21 +1,28 @@
1
- =fancy-linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop_1 = 0, !color_stop_1_pos = .3, !color_stop_2 = 0, !color_stop_2_pos = .6, !color_stop_3 = 0, !color_stop_3_pos = .9)
2
- !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})"
3
- @if !color_stop_1 != 0
4
- !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1})"
5
- @if !color_stop_2 != 0
6
- !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1}), color-stop(#{!color_stop_2_pos}, #{!color_stop_2})"
7
- @if !color_stop_3 != 0
8
- !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1}), color-stop(#{!color_stop_2_pos}, #{!color_stop_2}), color-stop(#{!color_stop_3_pos}, #{!color_stop_3})"
9
- background= "-webkit-gradient(linear, #{!gradient})"
10
- background= "-moz-linear-gradient(#{!gradient})"
11
-
12
1
  =fancy-gradient(!color1, !color2)
13
2
  !top_shine = lighten(!color1, 18)
3
+ !bottom_glow = lighten(!color2, 10)
14
4
  !top_middle = !color1
15
5
  !middle = lighten(!color2, 3)
16
6
  !bottom_middle = !color2
17
- !bottom_glow = lighten(!color2, 10)
18
- !stop_pos_1 = .1
19
- !stop_pos_2 = .5
20
- !stop_pos_3 = .5
21
- +fancy-linear-gradient("left top", "left bottom", !top_shine, !bottom_glow, !top_middle, !stop_pos_1, !middle, !stop_pos_2, !bottom_middle, !stop_pos_3)
7
+ +v-gradient(!top_shine, !bottom_glow, color_stop(10%, !top_middle, 50%, !middle, 50%, !bottom_middle))
8
+
9
+ =invert-fancy-gradient(!color1, !color2)
10
+ !top = lighten(!color2, 6)
11
+ !bottom = lighten(!color2, 14)
12
+ !top_middle = lighten(!color2, 8)
13
+ !middle = lighten(!color2, 4)
14
+ !bottom_middle = lighten(!color2, 1)
15
+ +v-gradient(!top, !bottom, color_stop(30%, !top_middle, 50%, !middle, 50%, !bottom_middle))
16
+
17
+ =fancy-matte-gradient(!color1, !color2)
18
+ +v-gradient(!color1, !color2)
19
+
20
+ =invert-fancy-matte-gradient(!color1, !color2)
21
+ !top = lighten(!color2, 5)
22
+ !bottom = lighten(!color2, 15)
23
+ !middle = lighten(!color2, 8)
24
+ +v-gradient(!top, !bottom, color_stop(85%, !middle, 40%, !middle))
25
+
26
+ /* incase an inverted custom gradient isn't specified */
27
+ =invert-custom-fancy-gradient(!color1, !color2)
28
+ +custom-fancy-gradient(!color1, !color2)
@@ -3,31 +3,55 @@
3
3
  body
4
4
  text-align: center
5
5
  padding-top: 10px
6
- h1
6
+ h1, h2, h3
7
7
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
8
- font-size: 50px
9
8
  color: #333
10
9
  letter-spacing: -1px
10
+ h1
11
+ font-size: 50px
12
+ h2
13
+ font-size: 30px
11
14
  div
12
15
  margin-top: 15px
13
16
 
14
17
  !green = darken(#57b42c, 8)
15
18
  !blue = adjust_hue(!green, 110)
16
19
  !red = adjust_hue(!green, -100)
20
+ !heart_button = saturate(lighten(!red, 2), 20)
17
21
 
22
+ =custom-fancy-gradient(!color1, !color2)
23
+ +radial-gradient("50% 10%, 10, 50% 10%, 30", !color1, darken(!color2, 5))
24
+ =invert-custom-fancy-gradient(!color1, !color2)
25
+ +custom-fancy-gradient(lighten(!color2, 10), lighten(!color2, 25))
26
+
18
27
  a.button, button
19
28
  +fancy-button-structure
20
29
  +fancy-button-colors
21
30
  margin: 0 2px
22
31
  vertical-align: middle
23
32
  &.light
24
- +fancy-button-colors(#bbb)
33
+ +fancy-button-colors-matte(#ddd)
34
+ &.matte-blue
35
+ +fancy-button-colors-matte(!blue)
25
36
  &.green
26
37
  +fancy-button-colors(!green)
27
38
  &.blue
39
+ +fancy-button-size(32px, 32px, 3px)
28
40
  +fancy-button-colors(!blue)
29
- +fancy-button-size(32px, 32px)
30
41
  &.red
31
42
  +fancy-button-colors(!red)
32
43
  &.yellow
33
- +fancy-button-colors(darken(desaturate(yellow, 35), 5))
44
+ +fancy-button-colors(darken(desaturate(yellow, 35), 5))
45
+ &.custom
46
+ +fancy-button-size(30px, 10px)
47
+ +fancy-button-padding(2px, 12px, 2px)
48
+ &.heart
49
+ +fancy-button-colors-custom(!heart_button)
50
+ &.arrow
51
+ +fancy-button-size(30px, 30px)
52
+ +fancy-button-colors-custom(#ddd)
53
+ +fancy-button-padding(2px, 6px, 2px)
54
+ &.spade
55
+ +fancy-button-colors-custom(!blue)
56
+ +fancy-button-padding(2px, 8px, 2px)
57
+ //color: #333 !important
@@ -7,7 +7,6 @@
7
7
  </head>
8
8
  <body>
9
9
  <h1>Fancy Buttons</h1>
10
- <button class="light">Click Me</button>
11
10
  <div>
12
11
  <button class="green">Click Me</button>
13
12
  <a href="#" class="button blue">Click Me</a>
@@ -17,5 +16,16 @@
17
16
  <button>Click Me</button>
18
17
  <button class="yellow">Click Me</button>
19
18
  </div>
19
+ <h2>Matte Gradient</h2>
20
+ <div>
21
+ <button class="light">Click Me</button>
22
+ <button class="matte-blue">Click Me</button>
23
+ </div>
24
+ <h2>Custom Radial Gradient</h2>
25
+ <div>
26
+ <button class="custom heart">&hearts;</button>
27
+ <button class="custom arrow">&rarr;</button>
28
+ <button class="custom spade">&Omega;</button>
29
+ </div>
20
30
  </body>
21
31
  </html>
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: fancy-buttons
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.3.3
4
+ version: 0.3.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Brandon Mathis
@@ -9,7 +9,7 @@ autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
11
 
12
- date: 2009-11-23 00:00:00 -06:00
12
+ date: 2009-12-09 00:00:00 -06:00
13
13
  default_executable:
14
14
  dependencies:
15
15
  - !ruby/object:Gem::Dependency
@@ -20,7 +20,7 @@ dependencies:
20
20
  requirements:
21
21
  - - ">="
22
22
  - !ruby/object:Gem::Version
23
- version: "2.2"
23
+ version: 2.2.14
24
24
  version:
25
25
  - !ruby/object:Gem::Dependency
26
26
  name: compass
@@ -30,7 +30,7 @@ dependencies:
30
30
  requirements:
31
31
  - - ">="
32
32
  - !ruby/object:Gem::Version
33
- version: "0.8"
33
+ version: 0.10.0.pre2
34
34
  version:
35
35
  - !ruby/object:Gem::Dependency
36
36
  name: compass-colors
@@ -55,7 +55,6 @@ files:
55
55
  - Rakefile
56
56
  - fancy-buttons.gemspec
57
57
  - lib/fancy-buttons.rb
58
- - lib/sass/_border_radius.sass
59
58
  - lib/sass/_fancy_buttons.sass
60
59
  - lib/sass/_fancy_gradient.sass
61
60
  - lib/templates/project/button_bg.png
@@ -1,47 +0,0 @@
1
- !default_border_radius ||= 5px
2
-
3
- // Round all borders by amount
4
- =border-radius(!radius = !default_border_radius)
5
- border-radius= !radius
6
- -moz-border-radius= !radius
7
- -webkit-border-radius= !radius
8
-
9
- // Round radius at position by amount.
10
- // values for !vert: "top", "bottom"
11
- // values for !horz: "left", "right
12
- =border-corner-radius(!vert, !horz, !radius = !default_border_radius)
13
- border-#{!vert}-#{!horz}-radius= !radius
14
- -moz-border-radius-#{!vert}#{!horz}= !radius
15
- -webkit-border-#{!vert}-#{!horz}-radius= !radius
16
-
17
- =border-top-left-radius(!radius = !default_border_radius)
18
- +border-corner-radius("top", "left", !radius)
19
-
20
- =border-top-right-radius(!radius = !default_border_radius)
21
- +border-corner-radius("top", "right", !radius)
22
-
23
- =border-bottom-left-radius(!radius = !default_border_radius)
24
- +border-corner-radius("bottom", "left", !radius)
25
-
26
- =border-bottom-right-radius(!radius = !default_border_radius)
27
- +border-corner-radius("bottom", "right", !radius)
28
-
29
- // Round top corners by amount
30
- =border-top-radius(!radius = !default_border_radius)
31
- +border-top-left-radius(!radius)
32
- +border-top-right-radius(!radius)
33
-
34
- // Round right corners by amount
35
- =border-right-radius(!radius = !default_border_radius)
36
- +border-top-right-radius(!radius)
37
- +border-bottom-right-radius(!radius)
38
-
39
- // Round bottom corners by amount
40
- =border-bottom-radius(!radius = !default_border_radius)
41
- +border-bottom-left-radius(!radius)
42
- +border-bottom-right-radius(!radius)
43
-
44
- // Round left corners by amount
45
- =border-left-radius(!radius = !default_border_radius)
46
- +border-top-left-radius(!radius)
47
- +border-bottom-left-radius(!radius)