fancy-buttons 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +33 -0
- data/Rakefile +19 -0
- data/fancy-buttons.gemspec +46 -0
- data/lib/fancy-buttons.rb +3 -0
- data/lib/sass/_border_radius.sass +47 -0
- data/lib/sass/_fancy_buttons.sass +99 -0
- data/lib/sass/_fancy_gradient.sass +28 -0
- data/lib/templates/project/button_bg.png +0 -0
- data/lib/templates/project/buttons.sass +31 -0
- data/lib/templates/project/index.html +48 -0
- data/lib/templates/project/manifest.rb +3 -0
- metadata +66 -0
data/README.markdown
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
# Project Goals:
|
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
|
14
|
+
![Demo](http://s3.imathis.com/dev/compass/fancy-buttons/demo.png)
|
15
|
+
|
16
|
+
## Install
|
17
|
+
|
18
|
+
Install the plugin:
|
19
|
+
|
20
|
+
sudo gem install imathis-fancy-buttons
|
21
|
+
|
22
|
+
Create a new project based on fancy-buttons:
|
23
|
+
|
24
|
+
compass -r compass-colors -r fancy-buttons -f fancy-buttons my_project_name
|
25
|
+
|
26
|
+
Add fancy-buttons to an existing compass project:
|
27
|
+
|
28
|
+
# Add the following lines to your compass configuration file:
|
29
|
+
require 'compass-colors'
|
30
|
+
require 'fancy-buttons'
|
31
|
+
|
32
|
+
# Then run the following command:
|
33
|
+
compass --install -f fancy-buttons
|
data/Rakefile
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
begin
|
2
|
+
require 'jeweler'
|
3
|
+
Jeweler::Tasks.new do |gemspec|
|
4
|
+
gemspec.name = "fancy-buttons"
|
5
|
+
gemspec.summary = "Make fancy buttons with the Compass stylesheet authoring framework."
|
6
|
+
gemspec.description = "Make fancy buttons with the Compass stylesheet authoring framework."
|
7
|
+
gemspec.email = "imathis@me.com"
|
8
|
+
gemspec.homepage = "http://github.com/imathis/fancy-buttons"
|
9
|
+
gemspec.authors = ["Brandon Mathis", "Chris Eppstein"]
|
10
|
+
gemspec.files = []
|
11
|
+
gemspec.files << "fancy-buttons.gemspec"
|
12
|
+
gemspec.files << "README.markdown"
|
13
|
+
gemspec.files << "Rakefile"
|
14
|
+
gemspec.files << "VERSION"
|
15
|
+
gemspec.files += Dir.glob("lib/**/*")
|
16
|
+
end
|
17
|
+
rescue LoadError
|
18
|
+
puts "Jeweler not available. Install it with: sudo gem install technicalpickles-jeweler -s http://gems.github.com"
|
19
|
+
end
|
@@ -0,0 +1,46 @@
|
|
1
|
+
# Generated by jeweler
|
2
|
+
# DO NOT EDIT THIS FILE
|
3
|
+
# Instead, edit Jeweler::Tasks in Rakefile, and run `rake gemspec`
|
4
|
+
# -*- encoding: utf-8 -*-
|
5
|
+
|
6
|
+
Gem::Specification.new do |s|
|
7
|
+
s.name = %q{fancy-buttons}
|
8
|
+
s.version = "0.2.0"
|
9
|
+
|
10
|
+
s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
|
11
|
+
s.authors = ["Brandon Mathis", "Chris Eppstein"]
|
12
|
+
s.date = %q{2009-11-10}
|
13
|
+
s.description = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
|
14
|
+
s.email = %q{imathis@me.com}
|
15
|
+
s.extra_rdoc_files = [
|
16
|
+
"README.markdown"
|
17
|
+
]
|
18
|
+
s.files = [
|
19
|
+
"README.markdown",
|
20
|
+
"Rakefile",
|
21
|
+
"fancy-buttons.gemspec",
|
22
|
+
"lib/fancy-buttons.rb",
|
23
|
+
"lib/sass/_border_radius.sass",
|
24
|
+
"lib/sass/_fancy_buttons.sass",
|
25
|
+
"lib/sass/_fancy_gradient.sass",
|
26
|
+
"lib/templates/project/button_bg.png",
|
27
|
+
"lib/templates/project/buttons.sass",
|
28
|
+
"lib/templates/project/index.html",
|
29
|
+
"lib/templates/project/manifest.rb"
|
30
|
+
]
|
31
|
+
s.homepage = %q{http://github.com/imathis/fancy-buttons}
|
32
|
+
s.rdoc_options = ["--charset=UTF-8"]
|
33
|
+
s.require_paths = ["lib"]
|
34
|
+
s.rubygems_version = %q{1.3.5}
|
35
|
+
s.summary = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
|
36
|
+
|
37
|
+
if s.respond_to? :specification_version then
|
38
|
+
current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
|
39
|
+
s.specification_version = 3
|
40
|
+
|
41
|
+
if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
|
42
|
+
else
|
43
|
+
end
|
44
|
+
else
|
45
|
+
end
|
46
|
+
end
|
@@ -0,0 +1,47 @@
|
|
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)
|
@@ -0,0 +1,99 @@
|
|
1
|
+
@import _fancy_gradient.sass
|
2
|
+
|
3
|
+
!default_buton_font_size ||= 18px
|
4
|
+
!default_button_color ||= #444
|
5
|
+
!default_button_font_weight ||= "bold"
|
6
|
+
!default_button_border_width ||= 1px
|
7
|
+
!default_button_radius ||= 6px
|
8
|
+
|
9
|
+
// Make a fancy button.
|
10
|
+
=fancy-button(!base= !default_button_color, !radius= !default_button_radius, !font_size= !default_buton_font_size, !border_width= !default_button_border_width)
|
11
|
+
+button-structure(!radius, !font_size, !border_width)
|
12
|
+
+fancy-button-colors(!base)
|
13
|
+
|
14
|
+
// Style the button's colors, picking the most appropriate color set for the base color.
|
15
|
+
=fancy-button-colors(!base, !hover = !base, !active = !base)
|
16
|
+
+button-color(!base)
|
17
|
+
|
18
|
+
&:hover, &:focus
|
19
|
+
+hover-button-color(!hover)
|
20
|
+
|
21
|
+
&:active
|
22
|
+
+active-button-color(!active)
|
23
|
+
|
24
|
+
// Default state color settings
|
25
|
+
=button-color(!color)
|
26
|
+
!gradient_top = lighten(!color, 30)
|
27
|
+
!gradient_bottom = darken(!color, 20)
|
28
|
+
!border_color = darken(!color, 25)
|
29
|
+
+button-state-colors(!color, !gradient_top, !gradient_bottom, !border_color)
|
30
|
+
|
31
|
+
// Hover state color settings
|
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)
|
40
|
+
|
41
|
+
// Apply the button colors specified for the button state into which it is mixed.
|
42
|
+
=button-state-colors(!base, !gradient_top, !gradient_bottom, !border)
|
43
|
+
!text_shadow = darken(!base, 25)
|
44
|
+
background= !base url(/images/button_bg.png) "repeat-x bottom left"
|
45
|
+
background: #{!base} #{image_url("/images/btn_shade.png")} repeat-x bottom left
|
46
|
+
+fancy-button-gradient(!gradient_top, !gradient_bottom)
|
47
|
+
text-shadow= !text_shadow "1px 1px 1px"
|
48
|
+
border:
|
49
|
+
color= !border
|
50
|
+
|
51
|
+
// Apply this mixin to a nested element to style an arrow
|
52
|
+
=button-arrow(!font_size)
|
53
|
+
font-family: "Lucida Grande", Lucida, Arial, sans_serif
|
54
|
+
font-size= !font_size + 4px
|
55
|
+
line-height= !font_size - 4px
|
56
|
+
margin-left= 4px
|
57
|
+
|
58
|
+
// Layout the button's box
|
59
|
+
=button-structure(!radius, !font_size, !border_width, !line_height = !font_size * 1.2)
|
60
|
+
+button-reset
|
61
|
+
background= url(/images/button_bg.png) "repeat-x bottom left"
|
62
|
+
!v_padding = floor(!font_size/2.5)
|
63
|
+
!h_padding = floor(!font_size)
|
64
|
+
!v_padding_active = !v_padding - 1px
|
65
|
+
!h_padding_active = !h_padding - 1px
|
66
|
+
@if !radius > 0
|
67
|
+
+border-radius(!radius)
|
68
|
+
border-width= !border_width
|
69
|
+
font-size= !font_size
|
70
|
+
padding= !v_padding !h_padding
|
71
|
+
line-height= !line_height
|
72
|
+
&:active
|
73
|
+
border-width= !border_width + 1px
|
74
|
+
padding= !v_padding_active !h_padding_active
|
75
|
+
&.disabled:active
|
76
|
+
border-width= !border_width
|
77
|
+
padding= !v_padding !h_padding
|
78
|
+
|
79
|
+
// Reset the button's important properties to make sure they behave correctly
|
80
|
+
=button-reset(!font_weight = !default_button_font_weight)
|
81
|
+
margin: 0
|
82
|
+
padding: 0
|
83
|
+
display: inline-block
|
84
|
+
border: none
|
85
|
+
background: none
|
86
|
+
cursor: pointer
|
87
|
+
text-decoration: none
|
88
|
+
border-style: solid
|
89
|
+
font-weight= !font_weight
|
90
|
+
&:-moz-focus-inner
|
91
|
+
border: none
|
92
|
+
padding: 0
|
93
|
+
&:focus
|
94
|
+
outline: none
|
95
|
+
|
96
|
+
=disable-button(!opacity = .7)
|
97
|
+
+opacity(!opacity)
|
98
|
+
&:hover
|
99
|
+
cursor: default
|
@@ -0,0 +1,28 @@
|
|
1
|
+
=fb-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})"
|
9
|
+
background= "-webkit-gradient(linear, #{!gradient})"
|
10
|
+
background= "-moz-linear-gradient(#{!gradient})"
|
11
|
+
|
12
|
+
=fb-v-gradient(!color1, !color2)
|
13
|
+
+fb-linear-gradient("left top", "left bottom", !color1, !color2)
|
14
|
+
|
15
|
+
=fb-h-gradient(!color1, !color2)
|
16
|
+
+fb-linear-gradient("left top", "right top", !color1, !color2)
|
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)
|
24
|
+
!stop_pos_1 = .1
|
25
|
+
!color3 = mix(!color1, !color2, 30)
|
26
|
+
!stop_pos_2 = .5
|
27
|
+
!stop_pos_3 = .95
|
28
|
+
+fb-linear-gradient("left top", "left bottom", !start, !end, !color1, !stop_pos_1, !color2, !stop_pos_2, !color2, !stop_pos_3)
|
Binary file
|
@@ -0,0 +1,31 @@
|
|
1
|
+
@import compass/reset.sass
|
2
|
+
@import compass/css3.sass
|
3
|
+
@import fancy_buttons.sass
|
4
|
+
|
5
|
+
a.button
|
6
|
+
margin: 0 2px
|
7
|
+
a.button.default
|
8
|
+
+fancy-button
|
9
|
+
a.button.small
|
10
|
+
+fancy-button(#fff, 20px, 12px, 1px)
|
11
|
+
a.button.grey
|
12
|
+
+fancy-button(#666, 0px)
|
13
|
+
a.button.grey.dark
|
14
|
+
+fancy-button(#333)
|
15
|
+
+glossy-button
|
16
|
+
a.button.yellow
|
17
|
+
+fancy-button(#f0ec62)
|
18
|
+
a.button.light.yellow
|
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)
|
@@ -0,0 +1,48 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
2
|
+
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
3
|
+
<head>
|
4
|
+
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
|
5
|
+
<title>Fancy Buttons - Demo</title>
|
6
|
+
<link href="./stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
7
|
+
<!--[if lte IE6]>
|
8
|
+
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
|
9
|
+
<![endif]-->
|
10
|
+
</head>
|
11
|
+
<body>
|
12
|
+
<p>
|
13
|
+
How about a fancy button?
|
14
|
+
</p>
|
15
|
+
<p>
|
16
|
+
<a href="#" class="button default">That's Fancy!</a><a href="#" class="button small">Here's a Smaller Button</a><a href="#" class="button grey">Dark Button</a><a href="#" class="button dark grey">Darker Button</a>
|
17
|
+
</p>
|
18
|
+
<p>
|
19
|
+
In color:
|
20
|
+
</p>
|
21
|
+
<p>
|
22
|
+
<a href="#" class="button light yellow">Light Yellow</a><a href="#" class="button yellow">Darker Yellow</a>
|
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>
|
47
|
+
</body>
|
48
|
+
</html>
|
metadata
ADDED
@@ -0,0 +1,66 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: fancy-buttons
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.2.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Brandon Mathis
|
8
|
+
- Chris Eppstein
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
|
13
|
+
date: 2009-11-10 00:00:00 -08:00
|
14
|
+
default_executable:
|
15
|
+
dependencies: []
|
16
|
+
|
17
|
+
description: Make fancy buttons with the Compass stylesheet authoring framework.
|
18
|
+
email: imathis@me.com
|
19
|
+
executables: []
|
20
|
+
|
21
|
+
extensions: []
|
22
|
+
|
23
|
+
extra_rdoc_files:
|
24
|
+
- README.markdown
|
25
|
+
files:
|
26
|
+
- README.markdown
|
27
|
+
- Rakefile
|
28
|
+
- fancy-buttons.gemspec
|
29
|
+
- lib/fancy-buttons.rb
|
30
|
+
- lib/sass/_border_radius.sass
|
31
|
+
- lib/sass/_fancy_buttons.sass
|
32
|
+
- lib/sass/_fancy_gradient.sass
|
33
|
+
- lib/templates/project/button_bg.png
|
34
|
+
- lib/templates/project/buttons.sass
|
35
|
+
- lib/templates/project/index.html
|
36
|
+
- lib/templates/project/manifest.rb
|
37
|
+
has_rdoc: true
|
38
|
+
homepage: http://github.com/imathis/fancy-buttons
|
39
|
+
licenses: []
|
40
|
+
|
41
|
+
post_install_message:
|
42
|
+
rdoc_options:
|
43
|
+
- --charset=UTF-8
|
44
|
+
require_paths:
|
45
|
+
- lib
|
46
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
47
|
+
requirements:
|
48
|
+
- - ">="
|
49
|
+
- !ruby/object:Gem::Version
|
50
|
+
version: "0"
|
51
|
+
version:
|
52
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
53
|
+
requirements:
|
54
|
+
- - ">="
|
55
|
+
- !ruby/object:Gem::Version
|
56
|
+
version: "0"
|
57
|
+
version:
|
58
|
+
requirements: []
|
59
|
+
|
60
|
+
rubyforge_project:
|
61
|
+
rubygems_version: 1.3.5
|
62
|
+
signing_key:
|
63
|
+
specification_version: 3
|
64
|
+
summary: Make fancy buttons with the Compass stylesheet authoring framework.
|
65
|
+
test_files: []
|
66
|
+
|