fancy-buttons 0.2.0 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +14 -14
- data/Rakefile +2 -2
- data/fancy-buttons.gemspec +4 -4
- data/lib/sass/_border_radius.sass +0 -0
- data/lib/sass/_fancy_buttons.sass +48 -46
- data/lib/sass/_fancy_gradient.sass +10 -17
- data/lib/templates/project/buttons.sass +30 -28
- data/lib/templates/project/index.html +12 -39
- metadata +3 -4
data/README.markdown
CHANGED
@@ -1,16 +1,4 @@
|
|
1
|
-
#
|
2
|
-
|
3
|
-
- Generate a color palette from the base color
|
4
|
-
- Discern sensible palette variations based on a base color (dark, medium, light)
|
5
|
-
- Allow button style types (subtle gradient, shiny gradient)
|
6
|
-
- Make it easy to override/modify styles
|
7
|
-
- Reduce weight of generated styles (define button base, add color through additional classes)
|
8
|
-
- Create good defaults
|
9
|
-
- Ensure approximate consistency for browsers that don't support CSS gradients
|
10
|
-
- Style the button element
|
11
|
-
- Provide a decent alternative styling for ie6
|
12
|
-
|
13
|
-
## Screenshot of Demo
|
1
|
+
# Demo
|
14
2
|
![Demo](http://s3.imathis.com/dev/compass/fancy-buttons/demo.png)
|
15
3
|
|
16
4
|
## Install
|
@@ -30,4 +18,16 @@ Add fancy-buttons to an existing compass project:
|
|
30
18
|
require 'fancy-buttons'
|
31
19
|
|
32
20
|
# Then run the following command:
|
33
|
-
compass
|
21
|
+
compass -i -f fancy-buttons
|
22
|
+
|
23
|
+
# Project Goals:
|
24
|
+
|
25
|
+
- Generate a color palette from the base color
|
26
|
+
- Discern sensible palette variations based on a base color (dark, medium, light)
|
27
|
+
- Allow button style types (subtle gradient, shiny gradient)
|
28
|
+
- Make it easy to override/modify styles
|
29
|
+
- Reduce weight of generated styles (define button base, add color through additional classes)
|
30
|
+
- Create good defaults
|
31
|
+
- Ensure approximate consistency for browsers that don't support CSS gradients
|
32
|
+
- Style the button element
|
33
|
+
- Provide a decent alternative styling for ie6
|
data/Rakefile
CHANGED
@@ -4,9 +4,9 @@ begin
|
|
4
4
|
gemspec.name = "fancy-buttons"
|
5
5
|
gemspec.summary = "Make fancy buttons with the Compass stylesheet authoring framework."
|
6
6
|
gemspec.description = "Make fancy buttons with the Compass stylesheet authoring framework."
|
7
|
-
gemspec.email = "imathis
|
7
|
+
gemspec.email = "brandon@imathis.com"
|
8
8
|
gemspec.homepage = "http://github.com/imathis/fancy-buttons"
|
9
|
-
gemspec.
|
9
|
+
gemspec.author = "Brandon Mathis"
|
10
10
|
gemspec.files = []
|
11
11
|
gemspec.files << "fancy-buttons.gemspec"
|
12
12
|
gemspec.files << "README.markdown"
|
data/fancy-buttons.gemspec
CHANGED
@@ -5,13 +5,13 @@
|
|
5
5
|
|
6
6
|
Gem::Specification.new do |s|
|
7
7
|
s.name = %q{fancy-buttons}
|
8
|
-
s.version = "0.
|
8
|
+
s.version = "0.3.0"
|
9
9
|
|
10
10
|
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
|
-
s.authors = ["Brandon Mathis"
|
12
|
-
s.date = %q{2009-11-
|
11
|
+
s.authors = ["Brandon Mathis"]
|
12
|
+
s.date = %q{2009-11-19}
|
13
13
|
s.description = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
|
14
|
-
s.email = %q{imathis
|
14
|
+
s.email = %q{brandon@imathis.com}
|
15
15
|
s.extra_rdoc_files = [
|
16
16
|
"README.markdown"
|
17
17
|
]
|
File without changes
|
@@ -1,93 +1,95 @@
|
|
1
|
-
@import
|
1
|
+
@import border_radius.sass
|
2
|
+
@import fancy_gradient.sass
|
2
3
|
|
3
|
-
!
|
4
|
+
!default_button_font_size ||= 18px
|
4
5
|
!default_button_color ||= #444
|
5
6
|
!default_button_font_weight ||= "bold"
|
6
7
|
!default_button_border_width ||= 1px
|
7
8
|
!default_button_radius ||= 6px
|
8
9
|
|
9
10
|
// Make a fancy button.
|
10
|
-
=fancy-button(!
|
11
|
-
+button-structure(!
|
12
|
-
+fancy-button-colors(!
|
11
|
+
=fancy-button(!color= !default_button_color, !font_size= !default_button_font_size, !radius= !default_button_radius, !border_width= !default_button_border_width)
|
12
|
+
+fancy-button-structure(!font_size, !radius, !border_width)
|
13
|
+
+fancy-button-colors(!color)
|
13
14
|
|
14
15
|
// Style the button's colors, picking the most appropriate color set for the base color.
|
15
|
-
=fancy-button-colors(!
|
16
|
-
|
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)
|
17
21
|
|
22
|
+
+fb-color(!color)
|
18
23
|
&:hover, &:focus
|
19
|
-
+
|
20
|
-
|
24
|
+
+fb-color(!hover)
|
21
25
|
&:active
|
22
|
-
+
|
26
|
+
+fb-color(!active)
|
23
27
|
|
24
28
|
// Default state color settings
|
25
|
-
=
|
26
|
-
!gradient_top = lighten(!color,
|
27
|
-
!gradient_bottom = darken(!color,
|
28
|
-
!border_color = darken(!color,
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
=hover-button-color(!color)
|
33
|
-
!hover = darken(!color, 10)
|
34
|
-
+button-color(!hover)
|
35
|
-
|
36
|
-
// Active state color settings
|
37
|
-
=active-button-color(!color)
|
38
|
-
!active = darken(!color, 20)
|
39
|
-
+button-color(!active)
|
29
|
+
=fb-color(!color)
|
30
|
+
!gradient_top = lighten(!color, 15)
|
31
|
+
!gradient_bottom = darken(!color, 06)
|
32
|
+
!border_color = darken(!color, 08)
|
33
|
+
@if saturation(!color) > 0
|
34
|
+
!color = saturate(!color, 40)
|
35
|
+
+fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color)
|
40
36
|
|
41
37
|
// Apply the button colors specified for the button state into which it is mixed.
|
42
|
-
=
|
43
|
-
!text_shadow = darken(!
|
44
|
-
|
45
|
-
background
|
46
|
-
+fancy-
|
47
|
-
|
38
|
+
=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border)
|
39
|
+
!text_shadow = darken(!color, 25)
|
40
|
+
color: #fff
|
41
|
+
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
|
48
48
|
border:
|
49
49
|
color= !border
|
50
50
|
|
51
51
|
// Apply this mixin to a nested element to style an arrow
|
52
|
-
=
|
53
|
-
font-family: "Lucida Grande", Lucida, Arial, sans_serif
|
52
|
+
=fancy-arrow(!font_size)
|
54
53
|
font-size= !font_size + 4px
|
55
54
|
line-height= !font_size - 4px
|
56
55
|
margin-left= 4px
|
57
56
|
|
58
57
|
// Layout the button's box
|
59
|
-
=button-structure(!
|
60
|
-
+
|
61
|
-
|
62
|
-
|
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)
|
59
|
+
+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)
|
68
|
+
!v_padding = floor(!font_size/3.5)
|
63
69
|
!h_padding = floor(!font_size)
|
64
70
|
!v_padding_active = !v_padding - 1px
|
65
71
|
!h_padding_active = !h_padding - 1px
|
66
72
|
@if !radius > 0
|
67
73
|
+border-radius(!radius)
|
68
|
-
border-width= !border_width
|
69
|
-
font-size= !font_size
|
70
74
|
padding= !v_padding !h_padding
|
75
|
+
font-size= !font_size
|
71
76
|
line-height= !line_height
|
72
77
|
&:active
|
73
|
-
border-width= !border_width + 1px
|
74
78
|
padding= !v_padding_active !h_padding_active
|
75
79
|
&.disabled:active
|
76
|
-
border-width= !border_width
|
77
80
|
padding= !v_padding !h_padding
|
78
81
|
|
79
82
|
// Reset the button's important properties to make sure they behave correctly
|
80
|
-
=
|
83
|
+
=fb-reset(!font_weight = !default_button_font_weight)
|
84
|
+
font-family: "Lucida Grande", Lucida, Arial, sans_serif
|
85
|
+
background: #{image_url("button_bg.png")} repeat-x bottom left
|
81
86
|
margin: 0
|
82
|
-
padding: 0
|
83
87
|
display: inline-block
|
84
|
-
border: none
|
85
|
-
background: none
|
86
88
|
cursor: pointer
|
87
89
|
text-decoration: none
|
88
90
|
border-style: solid
|
89
91
|
font-weight= !font_weight
|
90
|
-
|
92
|
+
&::-moz-focus-inner
|
91
93
|
border: none
|
92
94
|
padding: 0
|
93
95
|
&:focus
|
@@ -1,28 +1,21 @@
|
|
1
|
-
=
|
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
2
|
!gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})"
|
3
3
|
@if !color_stop_1 != 0
|
4
4
|
!gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1})"
|
5
5
|
@if !color_stop_2 != 0
|
6
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
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})"
|
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
9
|
background= "-webkit-gradient(linear, #{!gradient})"
|
10
10
|
background= "-moz-linear-gradient(#{!gradient})"
|
11
11
|
|
12
|
-
=
|
13
|
-
|
14
|
-
|
15
|
-
=
|
16
|
-
|
17
|
-
|
18
|
-
=fb-v-gradient-3color(!color1, !color2, !stop_pos=.5, !color3=mix(!color1, !color2, 30))
|
19
|
-
+fb-linear-gradient("left top", "left bottom", !color1, !color2, !color3, !stop_pos)
|
20
|
-
|
21
|
-
=fancy-button-gradient(!color1, !color2)
|
22
|
-
!start = lighten(!color1, 25)
|
23
|
-
!end = mix(!color1, !color2, 60)
|
12
|
+
=fancy-gradient(!color1, !color2)
|
13
|
+
!top_shine = lighten(!color1, 18)
|
14
|
+
!top_middle = !color1
|
15
|
+
!middle = lighten(!color2, 3)
|
16
|
+
!bottom_middle = !color2
|
17
|
+
!bottom_glow = lighten(!color2, 10)
|
24
18
|
!stop_pos_1 = .1
|
25
|
-
!color3 = mix(!color1, !color2, 30)
|
26
19
|
!stop_pos_2 = .5
|
27
|
-
!stop_pos_3 = .
|
28
|
-
+
|
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)
|
@@ -1,31 +1,33 @@
|
|
1
|
-
@import compass/reset.sass
|
2
|
-
@import compass/css3.sass
|
3
1
|
@import fancy_buttons.sass
|
4
2
|
|
5
|
-
|
3
|
+
body
|
4
|
+
text-align: center
|
5
|
+
padding-top: 10px
|
6
|
+
h1
|
7
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
|
8
|
+
font-size: 50px
|
9
|
+
color: #333
|
10
|
+
letter-spacing: -1px
|
11
|
+
div
|
12
|
+
margin-top: 15px
|
13
|
+
|
14
|
+
!green = darken(#57b42c, 8)
|
15
|
+
!blue = adjust_hue(!green, 110)
|
16
|
+
!red = adjust_hue(!green, -100)
|
17
|
+
|
18
|
+
a.button, button
|
19
|
+
+fancy-button-structure
|
20
|
+
+fancy-button-colors
|
6
21
|
margin: 0 2px
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
+fancy-button(#fafdcc)
|
20
|
-
a.button.light.blue
|
21
|
-
+fancy-button(#007ab5)
|
22
|
-
a.button.blue
|
23
|
-
+fancy-button(#00529b)
|
24
|
-
a.button.green
|
25
|
-
+fancy-button(#017406)
|
26
|
-
a.button.red
|
27
|
-
+fancy-button(#740A00)
|
28
|
-
a.button.dark.blue
|
29
|
-
+fancy-button(#002473)
|
30
|
-
a.button.big.orange
|
31
|
-
+fancy-button(#C94101, 100px, 25px, 3px)
|
22
|
+
vertical-align: middle
|
23
|
+
&.light
|
24
|
+
+fancy-button-colors(#bbb)
|
25
|
+
&.green
|
26
|
+
+fancy-button-colors(!green)
|
27
|
+
&.blue
|
28
|
+
+fancy-button-colors(!blue)
|
29
|
+
+fancy-button-size(32px, 32px)
|
30
|
+
&.red
|
31
|
+
+fancy-button-colors(!red)
|
32
|
+
&.yellow
|
33
|
+
+fancy-button-colors(darken(desaturate(yellow, 35), 5))
|
@@ -3,46 +3,19 @@
|
|
3
3
|
<head>
|
4
4
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
5
5
|
<title>Fancy Buttons - Demo</title>
|
6
|
-
<link href="./stylesheets/
|
7
|
-
<!--[if lte IE6]>
|
8
|
-
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
9
|
-
<![endif]-->
|
6
|
+
<link href="./stylesheets/buttons.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
10
7
|
</head>
|
11
8
|
<body>
|
12
|
-
<
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
<a href="#" class="button
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
</p>
|
24
|
-
<p>
|
25
|
-
How about some blues?
|
26
|
-
</p><p>
|
27
|
-
<a href="#" class="button light blue">Light Blue</a><a href="#" class="button blue">Medium Blue</a><a href="#" class="button dark blue">Dark Blue</a>
|
28
|
-
</p>
|
29
|
-
<p>
|
30
|
-
Green?
|
31
|
-
</p>
|
32
|
-
<p>
|
33
|
-
<a href="#" class="button green">Green Button</a>
|
34
|
-
</p>
|
35
|
-
<p>
|
36
|
-
Red?
|
37
|
-
</p>
|
38
|
-
<p>
|
39
|
-
<a href="#" class="button red">Red Button</a>
|
40
|
-
</p>
|
41
|
-
<p>
|
42
|
-
Big and Orange?
|
43
|
-
</p>
|
44
|
-
<p>
|
45
|
-
<a href="#" class="button orange big">Big Orange Button</a>
|
46
|
-
</p>
|
9
|
+
<h1>Fancy Buttons</h1>
|
10
|
+
<button class="light">Click Me</button>
|
11
|
+
<div>
|
12
|
+
<button class="green">Click Me</button>
|
13
|
+
<a href="#" class="button blue">Click Me</a>
|
14
|
+
<button class="red">Click Me</button>
|
15
|
+
</div>
|
16
|
+
<div>
|
17
|
+
<button>Click Me</button>
|
18
|
+
<button class="yellow">Click Me</button>
|
19
|
+
</div>
|
47
20
|
</body>
|
48
21
|
</html>
|
metadata
CHANGED
@@ -1,21 +1,20 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: fancy-buttons
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Brandon Mathis
|
8
|
-
- Chris Eppstein
|
9
8
|
autorequire:
|
10
9
|
bindir: bin
|
11
10
|
cert_chain: []
|
12
11
|
|
13
|
-
date: 2009-11-
|
12
|
+
date: 2009-11-19 00:00:00 -06:00
|
14
13
|
default_executable:
|
15
14
|
dependencies: []
|
16
15
|
|
17
16
|
description: Make fancy buttons with the Compass stylesheet authoring framework.
|
18
|
-
email: imathis
|
17
|
+
email: brandon@imathis.com
|
19
18
|
executables: []
|
20
19
|
|
21
20
|
extensions: []
|