fancy-buttons 0.5.5 → 0.6.0.pre1

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 (3) hide show
  1. data/fancy-buttons.gemspec +3 -3
  2. data/lib/stylesheets/_fancy-buttons.sass +93 -108
  3. metadata +13 -10
data/fancy-buttons.gemspec CHANGED
@@ -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.5"
8
+ s.version = "0.6.0.pre1"
9
9
 
10
- s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
10
+ s.required_rubygems_version = Gem::Requirement.new("> 1.3.1") if s.respond_to? :required_rubygems_version=
11
11
  s.authors = ["Brandon Mathis"]
12
- s.date = %q{2010-07-29}
12
+ s.date = %q{2010-08-17}
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 = [
data/lib/stylesheets/_fancy-buttons.sass CHANGED
@@ -1,30 +1,28 @@
1
1
  @import compass/css3
2
2
  @import fancy-gradient
3
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
- $fb_allow_disabled: true !default
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
+ $fb-allow-disabled: false !default
16
+ $fb-line-height: 1.2em !default
16
17
 
17
18
  // Make a fancy button.
18
- =fancy-button($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
19
- +fancy-button-structure($font_size, $radius, $border_width)
19
+ =fancy-button($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
20
+ +fancy-button-structure($font-size, $radius, $border-width)
20
21
  +fancy-button-colors($color)
21
22
 
22
23
  // Style the button's colors, picking the most appropriate color set for the base color.
23
- =fancy-button-colors($color: $fb_color, $hover: 0, $active: 0, $allow_disabled: $fb_allow_disabled)
24
+ =fancy-button-colors($color: $fb-color, $hover: 0, $active: 0, $allow-disabled: $fb-allow-disabled)
24
25
  +fb-color($color, "default")
25
- @if $allow_disabled
26
- &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
27
- +fb-color($color, "default")
28
26
  &:hover, &:focus
29
27
  @if $hover == 0
30
28
  +fb-color(darken($color, 3), "hover", $color)
@@ -35,132 +33,119 @@ $fb_allow_disabled: true !default
35
33
  +fb-color(darken($color, 6), "active", $color)
36
34
  @else
37
35
  +fb-color($active, "active")
36
+ @if $allow-disabled
37
+ &.disabled, &[disabled]
38
+ +disable-fancy-button($color)
39
+
40
+ =fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
41
+ $fb-disable-allowed: $fb-allow-disable
42
+ $fb-allow-disable: true
43
+ +fancy-button-structure($font-size, $radius, $border-width)
44
+ +fancy-button-colors-matte($color)
45
+ $fb-allow-disable: $fb-disable-allowed
38
46
 
39
- =fancy-button-matte($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
40
- +fancy-button-structure($font_size, $radius, $border_width)
47
+ =fancy-button-matte($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
48
+ +fancy-button-structure($font-size, $radius, $border-width)
41
49
  +fancy-button-colors-matte($color)
42
50
 
43
- =fancy-button-custom($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
44
- +fancy-button-structure($font_size, $radius, $border_width)
45
- +fancy-button-colors-custom($color, $font_size, $radius, $border_width)
51
+ =fancy-button-custom($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
52
+ +fancy-button-structure($font-size, $radius, $border-width)
53
+ +fancy-button-colors-custom($color, $font-size, $radius, $border-width)
46
54
 
47
- =fancy-button-colors-matte($color: $fb_color, $hover: 0, $active: 0)
48
- $fb_current_style: $fb_gradient_style
49
- $fb_gradient_style: matte
55
+ =fancy-button-colors-matte($color: $fb-color, $hover: 0, $active: 0)
56
+ $fb-current-style: $fb-gradient-style
57
+ $fb-gradient-style: matte
50
58
  +fancy-button-colors($color, $hover, $active)
51
- $fb_gradient_style: $fb_current_style
59
+ $fb-gradient-style: $fb-current-style
52
60
 
53
- =fancy-button-colors-custom($color: $fb_color, $hover: 0, $active: 0)
54
- $fb_current_style: $fb_gradient_style
55
- $fb_gradient_style: custom
61
+ =fancy-button-colors-custom($color: $fb-color, $hover: 0, $active: 0)
62
+ $fb-current-style: $fb-gradient-style
63
+ $fb-gradient-style: custom
56
64
  +fancy-button-colors($color, $hover, $active)
57
- $fb_gradient_style: $fb_current_style
65
+ $fb-gradient-style: $fb-current-style
58
66
 
59
67
  // Default state color settings
60
68
  =fb-color($color, $state, $lumins: $color)
61
- $gradient_top: lighten($color, 15)
62
- $gradient_bottom: darken($color, 6)
63
- $border_color: darken($color, 8)
64
- @if $fb_invert_on_click != 0
65
- $border_color: darken($color, 15)
69
+ $gradient-top: lighten($color, 15)
70
+ $gradient-bottom: darken($color, 6)
71
+ $border-color: darken($color, 8)
72
+ @if $fb-invert-on-click != 0
73
+ $border-color: darken($color, 15)
66
74
  @if saturation($color) > 0
67
75
  $color: saturate($color, 40)
68
76
  @else if lightness($lumins) >= lightness(#aaaaaa)
69
77
  $color: lighten($color, 20)
70
- +fb-state-colors($color, $gradient_top, $gradient_bottom, $border_color, $state, $lumins)
78
+ +fb-state-colors($color, $gradient-top, $gradient-bottom, $border-color, $state, $lumins)
71
79
 
72
80
  // Apply the button colors specified for the button state into which it is mixed.
73
- =fb-state-colors($color, $gradient_top, $gradient_bottom, $border, $state, $lumins: $color)
81
+ =fb-state-colors($color, $gradient-top, $gradient-bottom, $border, $state, $lumins: $color)
74
82
  background-color: $color
75
- @if $fb_gradient != 0
76
- @if $fb_gradient_style == "glossy"
77
- @if $fb_invert_on_click != 0 and $state == "active"
78
- +invert-fancy-gradient($gradient_top, $gradient_bottom)
83
+ @if $fb-gradient != 0
84
+ @if $fb-gradient-style == "glossy"
85
+ @if $fb-invert-on-click != 0 and $state == "active"
86
+ +invert-fancy-gradient($gradient-top, $gradient-bottom)
79
87
  @else
80
- +fancy-gradient($gradient_top, $gradient_bottom)
81
- @else if $fb_gradient_style == "matte"
82
- @if $fb_invert_on_click and $state == "active"
83
- +invert-fancy-matte-gradient($gradient_top, $gradient_bottom)
88
+ +fancy-gradient($gradient-top, $gradient-bottom)
89
+ @else if $fb-gradient-style == "matte"
90
+ @if $fb-invert-on-click and $state == "active"
91
+ +invert-fancy-matte-gradient($gradient-top, $gradient-bottom)
84
92
  @else
85
- +fancy-matte-gradient($gradient_top, $gradient_bottom)
86
- @else if $fb_gradient_style == "custom"
87
- @if $fb_invert_on_click and $state == "active"
88
- +invert-custom-fancy-gradient($gradient_top, $gradient_bottom)
93
+ +fancy-matte-gradient($gradient-top, $gradient-bottom)
94
+ @else if $fb-gradient-style == "custom"
95
+ @if $fb-invert-on-click and $state == "active"
96
+ +invert-custom-fancy-gradient($gradient-top, $gradient-bottom)
89
97
  @else
90
- +custom-fancy-gradient($gradient_top, $gradient_bottom)
98
+ +custom-fancy-gradient($gradient-top, $gradient-bottom)
91
99
  border:
92
100
  color: $border
93
- $text_shadow_settings: unquote("0px 1px 1px")
94
- @if $fb_invert_on_click != 0 and $state == "active"
95
- $text_shadow_settings: unquote("0px -1px -1px")
101
+ $text-shadow-settings: unquote("0px 1px 1px")
102
+ @if $fb-invert-on-click != 0 and $state == "active"
103
+ $text-shadow-settings: unquote("0px -1px -1px")
96
104
  @if lightness($lumins) < lightness(#aaaaaa)
97
- text-shadow: darken($color, 25) $text_shadow_settings
105
+ text-shadow: darken($color, 25) $text-shadow-settings
98
106
  &, &:visited
99
- color: $fb_light_text
107
+ color: $fb-light-text
100
108
  @else
101
- text-shadow: lighten($color, 15) $text_shadow_settings
109
+ text-shadow: lighten($color, 15) $text-shadow-settings
102
110
  &, &:visited
103
- color: $fb_dark_text
111
+ color: $fb-dark-text
104
112
 
105
113
  =fancy-button-text-colors($color, $hover, $active, $allow-disabled : $fb-allow-disabled)
106
- color: $color
114
+ &, &:visited
115
+ color: $color
107
116
  @if $hover != $color
108
117
  &:hover, &:focus
109
118
  color: $hover
110
119
  @if $active != $color
111
120
  &:active
112
121
  color: $active
113
- @if $allow-disabled and $active != $color
114
- &.disabled:active, &[disabled]:active
115
- color: $color
116
- @if $allow-disabled and $hover != $color
117
- &.disabled:hover, &[disabled]:hover
122
+ @if $allow-disabled
123
+ &.disabled, &[disabled]
118
124
  color: $color
119
125
 
120
- // Apply this mixin to a nested element to style an arrow
121
- =fancy-arrow($font_size)
122
- font-size: $font_size + 4px
123
- line-height: $font_size - 4px
124
- margin-left: 4px
125
-
126
126
  // Layout the button's box
127
- =fancy-button-structure($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2, $allow_disabled: $fb_allow_disabled)
128
- +fb-reset($fb_font_weight, $allow_disabled)
129
- +fancy-button-size($font_size, $radius, $border_width, $line_height, $allow_disabled)
127
+ =fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height)
128
+ @extend .fancy-button-reset-base-class
129
+ +fancy-button-size($font-size, $radius, $border-width, $line-height)
130
130
 
131
- =fancy-button-size($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2, $allow_disabled: $fb_allow_disabled)
131
+ =fancy-button-size($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height)
132
132
  // better padding for smaller buttons
133
- $v_padding: 0
134
- $h_padding: 0
135
- @if $font_size > 15
136
- $v_padding: floor($font_size / 3.5)
137
- $h_padding: $font_size
138
- @else
139
- $v_padding: floor($font_size / 5)
140
- $h_padding: floor($font_size / 1.2)
133
+ $v-padding: 0.3em
134
+ $h-padding: 1em
141
135
  @if $radius > 0
142
136
  +border-radius($radius)
143
- font-size: $font_size
144
- line-height: $line_height
145
- +fancy-button-padding($v_padding, $h_padding, $border_width, $allow_disabled)
146
-
147
- =fancy-button-padding($v_padding, $h_padding, $border_width: $fb_border_width, $allow_disabled: $fb_allow_disabled)
148
- $v_padding_active: $v_padding - 1px
149
- $h_padding_active: $h_padding - 1px
150
- padding: $v_padding $h_padding
151
- border-width: $border_width
152
- &:active
153
- padding: $v_padding_active $h_padding_active
154
- border-width: $border_width + 1px
155
- @if $allow_disabled
156
- &.disabled:active, &[disabled]
157
- padding: $v_padding $h_padding
158
- border-width: $border_width
137
+ font-size: $font-size
138
+ line-height: $line-height
139
+ +fancy-button-padding($v-padding, $h-padding, $border-width)
140
+
141
+ =fancy-button-padding($v-padding, $h-padding, $border-width: $fb-border-width)
142
+ padding: $v-padding $h-padding
143
+ border-width: $border-width
159
144
 
160
145
  // Reset the button's important properties to make sure they behave correctly
161
- =fb-reset($font_weight: $fb_font_weight, $allow_disabled: $fb_allow_disabled)
162
- font-family: "Lucida Grande", Lucida, Arial, sans_serif
163
- background: #{$fb_image_path} repeat-x bottom left
146
+ =fb-reset($font-weight: $fb-font-weight, $allow-disabled: $fb-allow-disabled)
147
+ font-family: "Lucida Grande", Lucida, Arial, sans-serif
148
+ background: #{$fb-image-path} repeat-x bottom left
164
149
  margin: 0
165
150
  width: auto
166
151
  overflow: visible
@@ -168,17 +153,17 @@ $fb_allow_disabled: true !default
168
153
  cursor: pointer
169
154
  text-decoration: none
170
155
  border-style: solid
171
- font-weight: $font_weight
156
+ font-weight: $font-weight
172
157
  &::-moz-focus-inner
173
158
  border: none
174
159
  padding: 0
175
160
  &:focus
176
161
  outline: none
177
- @if $fb_allow_disabled
178
- &.disabled, &[disabled]
179
- +disable-button
180
162
 
181
- =disable-button($opacity: 0.7)
163
+ =disable-fancy-button($color: $fb-color, $opacity: 0.7)
164
+ +fb-color($color, "default")
182
165
  +opacity($opacity)
183
- &:hover, &:focus
184
- cursor: default
166
+ cursor: default !important
167
+
168
+ .fancy-button-reset-base-class
169
+ +fb-reset
metadata CHANGED
@@ -1,13 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: fancy-buttons
3
3
  version: !ruby/object:Gem::Version
4
- hash: 1
5
- prerelease: false
4
+ hash: -1876988208
5
+ prerelease: true
6
6
  segments:
7
7
  - 0
8
- - 5
9
- - 5
10
- version: 0.5.5
8
+ - 6
9
+ - 0
10
+ - pre1
11
+ version: 0.6.0.pre1
11
12
  platform: ruby
12
13
  authors:
13
14
  - Brandon Mathis
@@ -15,7 +16,7 @@ autorequire:
15
16
  bindir: bin
16
17
  cert_chain: []
17
18
 
18
- date: 2010-07-29 00:00:00 -05:00
19
+ date: 2010-08-17 00:00:00 -05:00
19
20
  default_executable:
20
21
  dependencies:
21
22
  - !ruby/object:Gem::Dependency
@@ -90,12 +91,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
90
91
  required_rubygems_version: !ruby/object:Gem::Requirement
91
92
  none: false
92
93
  requirements:
93
- - - ">="
94
+ - - ">"
94
95
  - !ruby/object:Gem::Version
95
- hash: 3
96
+ hash: 25
96
97
  segments:
97
- - 0
98
- version: "0"
98
+ - 1
99
+ - 3
100
+ - 1
101
+ version: 1.3.1
99
102
  requirements: []
100
103
 
101
104
  rubyforge_project: