css3buttons 0.9.1 → 0.9.2
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile +1 -1
- data/Gemfile.lock +3 -3
- data/lib/css3buttons/button_group.rb +13 -27
- data/lib/css3buttons/helpers/button_helper.rb +52 -28
- data/lib/css3buttons/version.rb +1 -1
- data/lib/generators/css3buttons/css3buttons_generator.rb +3 -4
- data/lib/generators/css3buttons/templates/public/images/css3-github-buttons-icons.png +0 -0
- data/lib/generators/css3buttons/templates/public/stylesheets/.DS_Store +0 -0
- data/lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css +384 -0
- data/readme.md +58 -26
- data/spec/button_group_spec.rb +15 -3
- data/spec/button_helper_spec.rb +76 -36
- metadata +7 -7
- data/lib/generators/css3buttons/templates/public/images/css3buttons_backgrounds.png +0 -0
- data/lib/generators/css3buttons/templates/public/images/css3buttons_icons.png +0 -0
- data/lib/generators/css3buttons/templates/public/stylesheets/css3buttons.css +0 -88
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
|
@@ -13,8 +13,8 @@ GIT
|
|
|
13
13
|
PATH
|
|
14
14
|
remote: .
|
|
15
15
|
specs:
|
|
16
|
-
css3buttons (0.
|
|
17
|
-
actionpack (>= 3.0.
|
|
16
|
+
css3buttons (0.9.2)
|
|
17
|
+
actionpack (>= 3.0.0)
|
|
18
18
|
|
|
19
19
|
GEM
|
|
20
20
|
remote: http://rubygems.org/
|
|
@@ -83,7 +83,7 @@ PLATFORMS
|
|
|
83
83
|
ruby
|
|
84
84
|
|
|
85
85
|
DEPENDENCIES
|
|
86
|
-
actionpack (>= 3.0.
|
|
86
|
+
actionpack (>= 3.0.0)
|
|
87
87
|
autotest
|
|
88
88
|
autotest-growl
|
|
89
89
|
capybara!
|
|
@@ -1,38 +1,24 @@
|
|
|
1
1
|
module Css3buttons
|
|
2
2
|
class ButtonGroup
|
|
3
|
-
|
|
3
|
+
include ActionView::Helpers::TagHelper
|
|
4
|
+
attr_reader :template, :button_count, :options
|
|
4
5
|
|
|
5
|
-
def initialize(template)
|
|
6
|
+
def initialize(template, options)
|
|
6
7
|
@button_count = 0
|
|
7
8
|
@template = template
|
|
9
|
+
@options = options
|
|
10
|
+
@options[:wrapper_tag] ||= :div
|
|
8
11
|
end
|
|
9
12
|
|
|
10
13
|
def render(&block)
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
html_options[:class] ||= ""
|
|
19
|
-
html_options[:class] += " __css3buttons_group_#{@button_count}__"
|
|
20
|
-
@button_count += 1
|
|
21
|
-
@template.send(method_name, name, options, html_options)
|
|
22
|
-
end
|
|
23
|
-
|
|
24
|
-
private
|
|
25
|
-
def add_group_classes(html)
|
|
26
|
-
(0...@button_count).to_a.each do |index|
|
|
27
|
-
if index == 0
|
|
28
|
-
html.gsub! /__css3buttons_group_#{index}__/, "left"
|
|
29
|
-
elsif index == @button_count - 1
|
|
30
|
-
html.gsub! /__css3buttons_group_#{index}__/, "right"
|
|
31
|
-
else
|
|
32
|
-
html.gsub! /__css3buttons_group_#{index}__/, "middle"
|
|
33
|
-
end
|
|
34
|
-
end
|
|
35
|
-
html
|
|
14
|
+
html_options = @options
|
|
15
|
+
html_options.delete(:wrapper_tag)
|
|
16
|
+
html_options.delete(:minor)
|
|
17
|
+
html_options[:class] ||= ''
|
|
18
|
+
html_options[:class] = (html_options[:class].split(" ") + ['button-group']).join(" ")
|
|
19
|
+
html_options[:class] = (html_options[:class].split(" ") + ['minor-group']).join(" ") if @options[:minor]
|
|
20
|
+
content_tag(:div, @template.capture(&block), html_options) if block_given?
|
|
36
21
|
end
|
|
37
22
|
end
|
|
38
23
|
end
|
|
24
|
+
|
|
@@ -1,45 +1,65 @@
|
|
|
1
1
|
module Css3buttons
|
|
2
2
|
module Helpers
|
|
3
3
|
module ButtonHelper
|
|
4
|
+
include ActionView::Helpers::UrlHelper
|
|
5
|
+
include ActionView::Helpers::FormTagHelper
|
|
6
|
+
def method_missing(method, *args)
|
|
7
|
+
if method.to_s.index("button_link_to") || method.to_s.index("button_submit_tag")
|
|
8
|
+
qualifiers = ["primary", "big", "positive", "negative", "pill", "danger", "safe", "button"]
|
|
9
|
+
color_map = {"positive" => "safe", "negative" => "danger"}
|
|
10
|
+
|
|
11
|
+
method_qualifiers = method.to_s.split("_")[0...-3] + ["button"]
|
|
12
|
+
method_qualifiers.map! do |qualifier|
|
|
13
|
+
if color_map.has_key?(qualifier)
|
|
14
|
+
qualifier = color_map[qualifier]
|
|
15
|
+
end
|
|
16
|
+
if qualifiers.index(qualifier).nil?
|
|
17
|
+
qualifier = [qualifier, "icon"]
|
|
18
|
+
end
|
|
19
|
+
qualifier
|
|
20
|
+
end.flatten!
|
|
21
|
+
|
|
22
|
+
if is_link_method?(method) && block_given?
|
|
23
|
+
link = args.first
|
|
24
|
+
options = args.extract_options!
|
|
25
|
+
link_to(link, options, &Proc.new)
|
|
26
|
+
else
|
|
27
|
+
label = args.first
|
|
28
|
+
link = args[1]
|
|
29
|
+
options = args.extract_options!
|
|
30
|
+
options = add_classes_to_html_options(method_qualifiers, options)
|
|
31
|
+
|
|
32
|
+
if is_link_method?(method)
|
|
33
|
+
link_to(label, link, options)
|
|
34
|
+
else
|
|
35
|
+
submit_tag(label, options)
|
|
36
|
+
end
|
|
37
|
+
end
|
|
38
|
+
else
|
|
39
|
+
super
|
|
40
|
+
end
|
|
41
|
+
end
|
|
4
42
|
|
|
5
43
|
def css3buttons_stylesheets(options = {})
|
|
6
44
|
options[:include_reset] = true unless options.has_key?(:include_reset)
|
|
7
45
|
if options[:include_reset] == true
|
|
8
|
-
stylesheet_link_tag "css3buttons/reset", "css3buttons/
|
|
46
|
+
stylesheet_link_tag "css3buttons/reset", "css3buttons/css3-github-buttons"
|
|
9
47
|
else
|
|
10
|
-
stylesheet_link_tag "css3buttons/
|
|
48
|
+
stylesheet_link_tag "css3buttons/css3-github-buttons"
|
|
11
49
|
end
|
|
12
50
|
end
|
|
13
51
|
|
|
14
|
-
def button_group(&block)
|
|
15
|
-
|
|
52
|
+
def button_group(*args, &block)
|
|
53
|
+
options = args.extract_options!
|
|
54
|
+
group = Css3buttons::ButtonGroup.new(self, options)
|
|
16
55
|
group.render(&block) if block_given?
|
|
17
56
|
end
|
|
18
57
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
icons.each do |icon|
|
|
25
|
-
method_name = (qualifier.split("_") + [icon, "button", "to"]).join("_")
|
|
26
|
-
define_method(:"#{method_name}") do |*args, &block|
|
|
27
|
-
icon_tag = (icon != icons.first) ? content_tag(:span, "", :class => "icon #{icon}") : ""
|
|
28
|
-
if block_given?
|
|
29
|
-
options = args.first || {}
|
|
30
|
-
html_options = args.second
|
|
31
|
-
html_options = add_classes_to_html_options [qualifier.split("_"), 'button'], html_options
|
|
32
|
-
link_to(icon_tag + capture(&block).html_safe, options, html_options)
|
|
33
|
-
else
|
|
34
|
-
name = args[0]
|
|
35
|
-
options = args[1] || {}
|
|
36
|
-
html_options = args[2] || {}
|
|
37
|
-
html_options = add_classes_to_html_options [qualifier.split("_"), 'button'], html_options
|
|
38
|
-
link_to(icon_tag + name.html_safe, options, html_options)
|
|
39
|
-
end
|
|
40
|
-
end
|
|
41
|
-
end
|
|
42
|
-
end
|
|
58
|
+
def minor_button_group(*args, &block)
|
|
59
|
+
options = args.extract_options!
|
|
60
|
+
options[:minor] = true
|
|
61
|
+
group = Css3buttons::ButtonGroup.new(self, options)
|
|
62
|
+
group.render(&block) if block_given?
|
|
43
63
|
end
|
|
44
64
|
|
|
45
65
|
protected
|
|
@@ -50,6 +70,10 @@ module Css3buttons
|
|
|
50
70
|
html_options[:class] = (html_options[:class].split(" ") + classes).join(" ")
|
|
51
71
|
html_options
|
|
52
72
|
end
|
|
73
|
+
|
|
74
|
+
def is_link_method?(method)
|
|
75
|
+
method.to_s.index("button_link_to")
|
|
76
|
+
end
|
|
53
77
|
end
|
|
54
78
|
end
|
|
55
79
|
end
|
data/lib/css3buttons/version.rb
CHANGED
|
@@ -3,10 +3,9 @@ class Css3buttonsGenerator < Rails::Generators::Base
|
|
|
3
3
|
source_root File.expand_path('../templates', __FILE__)
|
|
4
4
|
|
|
5
5
|
def copy_stylesheets_and_images
|
|
6
|
-
copy_file "public/images/
|
|
7
|
-
copy_file "public/
|
|
8
|
-
copy_file "public/stylesheets/css3buttons.css", "public/stylesheets/css3buttons/css3buttons.css"
|
|
6
|
+
copy_file "public/images/css3-github-buttons-icons.png", "public/images/css3buttons/css3-github-buttons-icons.png"
|
|
7
|
+
copy_file "public/stylesheets/css3-github-buttons.css", "public/stylesheets/css3buttons/css3-github-buttons.css"
|
|
9
8
|
copy_file "public/stylesheets/reset.css", "public/stylesheets/css3buttons/reset.css"
|
|
10
|
-
gsub_file "public/stylesheets/css3buttons/
|
|
9
|
+
gsub_file "public/stylesheets/css3buttons/css3-github-buttons.css", /\.\.\/images/, "/images/css3buttons"
|
|
11
10
|
end
|
|
12
11
|
end
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,384 @@
|
|
|
1
|
+
/* ------------------------------------------
|
|
2
|
+
CSS3 GITHUB BUTTONS
|
|
3
|
+
Licensed under Unlicense
|
|
4
|
+
------------------------------------------ */
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON */
|
|
8
|
+
|
|
9
|
+
.button {
|
|
10
|
+
position: relative;
|
|
11
|
+
overflow: visible;
|
|
12
|
+
display: inline-block;
|
|
13
|
+
padding: 0.5em 1em;
|
|
14
|
+
border: 1px solid #d4d4d4;
|
|
15
|
+
margin: 0;
|
|
16
|
+
text-decoration: none;
|
|
17
|
+
text-shadow: 1px 1px 0 #fff;
|
|
18
|
+
font:11px/normal sans-serif;
|
|
19
|
+
color: #333;
|
|
20
|
+
white-space: nowrap;
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
outline: none;
|
|
23
|
+
background-color: #ececec;
|
|
24
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
|
|
25
|
+
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
|
|
26
|
+
background-image: -o-linear-gradient(#f4f4f4, #ececec);
|
|
27
|
+
background-image: linear-gradient(#f4f4f4, #ececec);
|
|
28
|
+
-webkit-background-clip: padding;
|
|
29
|
+
-moz-background-clip: padding;
|
|
30
|
+
background-clip: padding-box;
|
|
31
|
+
-webkit-border-radius: 0.2em;
|
|
32
|
+
-moz-border-radius: 0.2em;
|
|
33
|
+
border-radius: 0.2em;
|
|
34
|
+
/* IE hacks */
|
|
35
|
+
zoom: 1;
|
|
36
|
+
*display: inline;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.button:hover,
|
|
40
|
+
.button:focus,
|
|
41
|
+
.button:active {
|
|
42
|
+
border-color: #3072b3;
|
|
43
|
+
border-bottom-color: #2a65a0;
|
|
44
|
+
text-decoration: none;
|
|
45
|
+
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
|
|
46
|
+
color: #fff;
|
|
47
|
+
background-color: #3072b3;
|
|
48
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
|
|
49
|
+
background-image: -moz-linear-gradient(#599bdc, #3072b3);
|
|
50
|
+
background-image: -o-linear-gradient(#599bdc, #3072b3);
|
|
51
|
+
background-image: linear-gradient(#599bdc, #3072b3);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.button:active,
|
|
55
|
+
.button.active {
|
|
56
|
+
border-color: #2a65a0;
|
|
57
|
+
border-bottom-color: #3884CF;
|
|
58
|
+
color: #fff;
|
|
59
|
+
background-color: #3072b3;
|
|
60
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
|
|
61
|
+
background-image: -moz-linear-gradient(#3072b3, #599bdc);
|
|
62
|
+
background-image: -o-linear-gradient(#3072b3, #599bdc);
|
|
63
|
+
background-image: linear-gradient(#3072b3, #599bdc);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* overrides extra padding on button elements in Firefox */
|
|
67
|
+
.button::-moz-focus-inner {
|
|
68
|
+
border: none;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
/* ............................................................................................................. Icons */
|
|
72
|
+
|
|
73
|
+
.button.icon:before {
|
|
74
|
+
content: "";
|
|
75
|
+
position: relative;
|
|
76
|
+
top: 1px;
|
|
77
|
+
float:left;
|
|
78
|
+
width: 12px;
|
|
79
|
+
height: 12px;
|
|
80
|
+
margin: 0 0.75em 0 -0.25em;
|
|
81
|
+
background: url(../images/css3-github-buttons-icons.png) 0 99px no-repeat;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.button.arrowup.icon:before { background-position: 0 0; }
|
|
85
|
+
.button.arrowup.icon:hover:before,
|
|
86
|
+
.button.arrowup.icon:focus:before,
|
|
87
|
+
.button.arrowup.icon:active:before { background-position: -12px 0; }
|
|
88
|
+
|
|
89
|
+
.button.arrowdown.icon:before { background-position: 0 -12px; }
|
|
90
|
+
.button.arrowdown.icon:hover:before,
|
|
91
|
+
.button.arrowdown.icon:focus:before,
|
|
92
|
+
.button.arrowdown.icon:active:before { background-position: -12px -12px; }
|
|
93
|
+
|
|
94
|
+
.button.arrowleft.icon:before { background-position: 0 -24px; }
|
|
95
|
+
.button.arrowleft.icon:hover:before,
|
|
96
|
+
.button.arrowleft.icon:focus:before,
|
|
97
|
+
.button.arrowleft.icon:active:before { background-position: -12px -24px; }
|
|
98
|
+
|
|
99
|
+
.button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -36px; }
|
|
100
|
+
.button.arrowright.icon:hover:before,
|
|
101
|
+
.button.arrowright.icon:focus:before,
|
|
102
|
+
.button.arrowright.icon:active:before { background-position: -12px -36px; }
|
|
103
|
+
|
|
104
|
+
.button.approve.icon:before { background-position: 0 -48px; }
|
|
105
|
+
.button.approve.icon:hover:before,
|
|
106
|
+
.button.approve.icon:focus:before,
|
|
107
|
+
.button.approve.icon:active:before { background-position: -12px -48px; }
|
|
108
|
+
|
|
109
|
+
.button.add.icon:before { background-position: 0 -288px; }
|
|
110
|
+
.button.add.icon:hover:before,
|
|
111
|
+
.button.add.icon:focus:before,
|
|
112
|
+
.button.add.icon:active:before { background-position: -12px -288px; }
|
|
113
|
+
|
|
114
|
+
.button.remove.icon:before { background-position: 0 -60px; }
|
|
115
|
+
.button.remove.icon:hover:before,
|
|
116
|
+
.button.remove.icon:focus:before,
|
|
117
|
+
.button.remove.icon:active:before { background-position: -12px -60px; }
|
|
118
|
+
|
|
119
|
+
.button.log.icon:before { background-position: 0 -72px; }
|
|
120
|
+
.button.log.icon:hover:before,
|
|
121
|
+
.button.log.icon:focus:before,
|
|
122
|
+
.button.log.icon:active:before { background-position: -12px -72px; }
|
|
123
|
+
|
|
124
|
+
.button.calendar.icon:before { background-position: 0 -84px; }
|
|
125
|
+
.button.calendar.icon:hover:before,
|
|
126
|
+
.button.calendar.icon:focus:before,
|
|
127
|
+
.button.calendar.icon:active:before { background-position: -12px -84px; }
|
|
128
|
+
|
|
129
|
+
.button.chat.icon:before { background-position: 0 -96px; }
|
|
130
|
+
.button.chat.icon:hover:before,
|
|
131
|
+
.button.chat.icon:focus:before,
|
|
132
|
+
.button.chat.icon:active:before { background-position: -12px -96px; }
|
|
133
|
+
|
|
134
|
+
.button.clock.icon:before { background-position: 0 -108px; }
|
|
135
|
+
.button.clock.icon:hover:before,
|
|
136
|
+
.button.clock.icon:focus:before,
|
|
137
|
+
.button.clock.icon:active:before { background-position: -12px -108px; }
|
|
138
|
+
|
|
139
|
+
.button.settings.icon:before { background-position: 0 -120px; }
|
|
140
|
+
.button.settings.icon:hover:before,
|
|
141
|
+
.button.settings.icon:focus:before,
|
|
142
|
+
.button.settings.icon:active:before { background-position: -12px -120px; }
|
|
143
|
+
|
|
144
|
+
.button.comment.icon:before { background-position: 0 -132px; }
|
|
145
|
+
.button.comment.icon:hover:before,
|
|
146
|
+
.button.comment.icon:focus:before,
|
|
147
|
+
.button.comment.icon:active:before { background-position: -12px -132px; }
|
|
148
|
+
|
|
149
|
+
.button.fork.icon:before { background-position: 0 -144px; }
|
|
150
|
+
.button.fork.icon:hover:before,
|
|
151
|
+
.button.fork.icon:focus:before,
|
|
152
|
+
.button.fork.icon:active:before { background-position: -12px -144px; }
|
|
153
|
+
|
|
154
|
+
.button.like.icon:before { background-position: 0 -156px; }
|
|
155
|
+
.button.like.icon:hover:before,
|
|
156
|
+
.button.like.icon:focus:before,
|
|
157
|
+
.button.like.icon:active:before { background-position: -12px -156px; }
|
|
158
|
+
|
|
159
|
+
.button.favorite.icon:before { background-position: 0 -348px; }
|
|
160
|
+
.button.favorite.icon:hover:before,
|
|
161
|
+
.button.favorite.icon:focus:before,
|
|
162
|
+
.button.favorite.icon:active:before { background-position: -12px -348px; }
|
|
163
|
+
|
|
164
|
+
.button.home.icon:before { background-position: 0 -168px; }
|
|
165
|
+
.button.home.icon:hover:before,
|
|
166
|
+
.button.home.icon:focus:before,
|
|
167
|
+
.button.home.icon:active:before { background-position: -12px -168px; }
|
|
168
|
+
|
|
169
|
+
.button.key.icon:before { background-position: 0 -180px; }
|
|
170
|
+
.button.key.icon:hover:before,
|
|
171
|
+
.button.key.icon:focus:before,
|
|
172
|
+
.button.key.icon:active:before { background-position: -12px -180px; }
|
|
173
|
+
|
|
174
|
+
.button.lock.icon:before { background-position: 0 -192px; }
|
|
175
|
+
.button.lock.icon:hover:before,
|
|
176
|
+
.button.lock.icon:focus:before,
|
|
177
|
+
.button.lock.icon:active:before { background-position: -12px -192px; }
|
|
178
|
+
|
|
179
|
+
.button.unlock.icon:before { background-position: 0 -204px; }
|
|
180
|
+
.button.unlock.icon:hover:before,
|
|
181
|
+
.button.unlock.icon:focus:before,
|
|
182
|
+
.button.unlock.icon:active:before { background-position: -12px -204px; }
|
|
183
|
+
|
|
184
|
+
.button.loop.icon:before { background-position: 0 -216px; }
|
|
185
|
+
.button.loop.icon:hover:before,
|
|
186
|
+
.button.loop.icon:focus:before,
|
|
187
|
+
.button.loop.icon:active:before { background-position: -12px -216px; }
|
|
188
|
+
|
|
189
|
+
.button.search.icon:before { background-position: 0 -228px; }
|
|
190
|
+
.button.search.icon:hover:before,
|
|
191
|
+
.button.search.icon:focus:before,
|
|
192
|
+
.button.search.icon:active:before { background-position: -12px -228px; }
|
|
193
|
+
|
|
194
|
+
.button.mail.icon:before { background-position: 0 -240px; }
|
|
195
|
+
.button.mail.icon:hover:before,
|
|
196
|
+
.button.mail.icon:focus:before,
|
|
197
|
+
.button.mail.icon:active:before { background-position: -12px -240px; }
|
|
198
|
+
|
|
199
|
+
.button.move.icon:before { background-position: 0 -252px; }
|
|
200
|
+
.button.move.icon:hover:before,
|
|
201
|
+
.button.move.icon:focus:before,
|
|
202
|
+
.button.move.icon:active:before { background-position: -12px -252px; }
|
|
203
|
+
|
|
204
|
+
.button.edit.icon:before { background-position: 0 -264px; }
|
|
205
|
+
.button.edit.icon:hover:before,
|
|
206
|
+
.button.edit.icon:focus:before,
|
|
207
|
+
.button.edit.icon:active:before { background-position: -12px -264px; }
|
|
208
|
+
|
|
209
|
+
.button.pin.icon:before { background-position: 0 -276px; }
|
|
210
|
+
.button.pin.icon:hover:before,
|
|
211
|
+
.button.pin.icon:focus:before,
|
|
212
|
+
.button.pin.icon:active:before { background-position: -12px -276px; }
|
|
213
|
+
|
|
214
|
+
.button.reload.icon:before { background-position: 0 -300px; }
|
|
215
|
+
.button.reload.icon:hover:before,
|
|
216
|
+
.button.reload.icon:focus:before,
|
|
217
|
+
.button.reload.icon:active:before { background-position: -12px -300px; }
|
|
218
|
+
|
|
219
|
+
.button.rss.icon:before { background-position: 0 -312px; }
|
|
220
|
+
.button.rss.icon:hover:before,
|
|
221
|
+
.button.rss.icon:focus:before,
|
|
222
|
+
.button.rss.icon:active:before { background-position: -12px -312px; }
|
|
223
|
+
|
|
224
|
+
.button.tag.icon:before { background-position: 0 -324px; }
|
|
225
|
+
.button.tag.icon:hover:before,
|
|
226
|
+
.button.tag.icon:focus:before,
|
|
227
|
+
.button.tag.icon:active:before { background-position: -12px -324px; }
|
|
228
|
+
|
|
229
|
+
.button.trash.icon:before { background-position: 0 -336px; }
|
|
230
|
+
.button.trash.icon:hover:before,
|
|
231
|
+
.button.trash.icon:focus:before,
|
|
232
|
+
.button.trash.icon:active:before { background-position: -12px -336px; }
|
|
233
|
+
|
|
234
|
+
.button.user.icon:before { background-position: 0 -360px; }
|
|
235
|
+
.button.user.icon:hover:before,
|
|
236
|
+
.button.user.icon:focus:before,
|
|
237
|
+
.button.user.icon:active:before { background-position: -12px -360px; }
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
|
|
241
|
+
|
|
242
|
+
/* ............................................................................................................. Primary */
|
|
243
|
+
|
|
244
|
+
.button.primary {
|
|
245
|
+
font-weight: bold;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
/* ............................................................................................................. Danger */
|
|
249
|
+
|
|
250
|
+
.button.danger {
|
|
251
|
+
color: #900;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.button.danger:hover,
|
|
255
|
+
.button.danger:focus,
|
|
256
|
+
.button.danger:active {
|
|
257
|
+
border-color: #b53f3a;
|
|
258
|
+
border-bottom-color: #a0302a;
|
|
259
|
+
color: #fff;
|
|
260
|
+
background-color: #dc5f59;
|
|
261
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
|
|
262
|
+
background-image: -moz-linear-gradient(#dc5f59, #b33630);
|
|
263
|
+
background-image: -o-linear-gradient(#dc5f59, #b33630);
|
|
264
|
+
background-image: linear-gradient(#dc5f59, #b33630);
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.button.danger:active,
|
|
268
|
+
.button.danger.active {
|
|
269
|
+
border-color: #a0302a;
|
|
270
|
+
border-bottom-color: #bf4843;
|
|
271
|
+
background-color: #b33630;
|
|
272
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
|
|
273
|
+
background-image: -moz-linear-gradient(#b33630, #dc5f59);
|
|
274
|
+
background-image: -o-linear-gradient(#b33630, #dc5f59);
|
|
275
|
+
background-image: linear-gradient(#b33630, #dc5f59);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
/* ............................................................................................................. Pill */
|
|
279
|
+
|
|
280
|
+
.button.pill {
|
|
281
|
+
-webkit-border-radius: 50em;
|
|
282
|
+
-moz-border-radius: 50em;
|
|
283
|
+
border-radius: 50em;
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
/* ............................................................................................................. Big */
|
|
287
|
+
|
|
288
|
+
.button.big {
|
|
289
|
+
font-size: 14px;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.button.big.icon:before { top: 0; }
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */
|
|
296
|
+
|
|
297
|
+
/* ............................................................................................................. Standard */
|
|
298
|
+
|
|
299
|
+
.button-group {
|
|
300
|
+
display: inline-block;
|
|
301
|
+
list-style: none;
|
|
302
|
+
padding: 0;
|
|
303
|
+
margin: 0;
|
|
304
|
+
/* IE hacks */
|
|
305
|
+
zoom: 1;
|
|
306
|
+
*display: inline;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.button + .button,
|
|
310
|
+
.button + .button-group,
|
|
311
|
+
.button-group + .button,
|
|
312
|
+
.button-group + .button-group {
|
|
313
|
+
margin-left: 15px;
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.button-group li {
|
|
317
|
+
float: left;
|
|
318
|
+
padding: 0;
|
|
319
|
+
margin: 0;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.button-group .button {
|
|
323
|
+
float: left;
|
|
324
|
+
margin-left: -1px;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.button-group > .button:not(:first-child):not(:last-child),
|
|
328
|
+
.button-group li:not(:first-child):not(:last-child) .button {
|
|
329
|
+
-webkit-border-radius: 0;
|
|
330
|
+
-moz-border-radius: 0;
|
|
331
|
+
border-radius: 0;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.button-group > .button:first-child,
|
|
335
|
+
.button-group li:first-child .button {
|
|
336
|
+
margin-left: 0;
|
|
337
|
+
-webkit-border-top-right-radius: 0;
|
|
338
|
+
-webkit-border-bottom-right-radius: 0;
|
|
339
|
+
-moz-border-radius-topright: 0;
|
|
340
|
+
-moz-border-radius-bottomright: 0;
|
|
341
|
+
border-top-right-radius: 0;
|
|
342
|
+
border-bottom-right-radius: 0;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.button-group > .button:last-child,
|
|
346
|
+
.button-group li:last-child > .button {
|
|
347
|
+
-webkit-border-top-left-radius: 0;
|
|
348
|
+
-webkit-border-bottom-left-radius: 0;
|
|
349
|
+
-moz-border-radius-topleft: 0;
|
|
350
|
+
-moz-border-radius-bottomleft: 0;
|
|
351
|
+
border-top-left-radius: 0;
|
|
352
|
+
border-bottom-left-radius: 0;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/* ............................................................................................................. Minor */
|
|
356
|
+
|
|
357
|
+
.button-group.minor-group .button {
|
|
358
|
+
border: 1px solid #d4d4d4;
|
|
359
|
+
text-shadow: none;
|
|
360
|
+
background-image: none;
|
|
361
|
+
background-color: #fff;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.button-group.minor-group .button:hover,
|
|
365
|
+
.button-group.minor-group .button:focus,
|
|
366
|
+
.button-group.minor-group .button:active {
|
|
367
|
+
background-color: #599bdc;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.button-group.minor-group .button:active,
|
|
371
|
+
.button-group.minor-group .button.active {
|
|
372
|
+
background-color: #3072b3;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.button-group.minor-group .button.icon:before {
|
|
376
|
+
opacity: 0.8;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
|
|
380
|
+
/* For mixing buttons and button groups, e.g., in a navigation bar */
|
|
381
|
+
|
|
382
|
+
.button-container .button {
|
|
383
|
+
vertical-align:top;
|
|
384
|
+
}
|
data/readme.md
CHANGED
|
@@ -1,11 +1,21 @@
|
|
|
1
1
|
# css3buttons gem - helper methods for css3buttons
|
|
2
2
|
|
|
3
3
|
The css3buttons gem is a small set of helper methods designed to work in
|
|
4
|
-
conjunction with the
|
|
4
|
+
conjunction with the __amazing__ [css3 github buttons by Nicolas Gallagher](http://nicolasgallagher.com/lab/css3-github-buttons/).
|
|
5
5
|
|
|
6
6
|
The helpers allow rails developers to quickly and easily leverage this
|
|
7
7
|
fantastic CSS library - without cluttering up your views and calls to
|
|
8
|
-
`link_to`.
|
|
8
|
+
`link_to`, `button_to` and `submit_tag`.
|
|
9
|
+
|
|
10
|
+
# What's new in version this version?
|
|
11
|
+
|
|
12
|
+
In this version we've updated the css to now work with the [css3 github buttons](http://nicolasgallagher.com/lab/css3-github-buttons/) as standard, instead of the original css3buttons, to take advantage of a few of the features not included in the original library.
|
|
13
|
+
|
|
14
|
+
Additionally, there was some serious re-tooling of the helper methods to make them more usable, more dynamic and less prone to error.
|
|
15
|
+
|
|
16
|
+
__Please note__: as part of changes, calls to `link_button_to` will need
|
|
17
|
+
to be updated to `button_link_to`. Everything else should work expected.
|
|
18
|
+
|
|
9
19
|
|
|
10
20
|
# Getting started
|
|
11
21
|
|
|
@@ -34,61 +44,83 @@ reset, you can skip it with:
|
|
|
34
44
|
|
|
35
45
|
<%= css3buttons_stylesheets :include_reset => false %>
|
|
36
46
|
|
|
47
|
+
|
|
37
48
|
# The basics
|
|
38
49
|
|
|
39
|
-
To change your `link_to` calls to buttons, simply use `
|
|
50
|
+
To change your `link_to` calls to buttons, simply use `button_link_to`.
|
|
40
51
|
For example:
|
|
41
52
|
|
|
42
|
-
<%=
|
|
53
|
+
<%= button_link_to "Search", search_path %>
|
|
43
54
|
|
|
44
|
-
The helper method accept all the same parameters as `link_to`
|
|
55
|
+
The helper method accept all the same parameters as `link_to` so
|
|
45
56
|
upgrading and downgrading so css3buttons should be a snap.
|
|
46
57
|
|
|
47
58
|
|
|
48
59
|
# Icons and pills and colours, oh my!
|
|
49
60
|
|
|
50
|
-
The gem also
|
|
51
|
-
icons, colours and styles to your buttons.
|
|
61
|
+
The gem also responds to a huge list of dynamic helper methods, to assist in adding
|
|
62
|
+
icons, colours and styles to your buttons. Unlike previous versions of
|
|
63
|
+
the gem, you can now add any of the features in any order.
|
|
64
|
+
|
|
52
65
|
|
|
53
66
|
## Icons
|
|
54
67
|
|
|
55
|
-
To add an icon from [the current icon list](http://
|
|
68
|
+
To add an icon from [the current icon list](http://nicolasgallagher.com/lab/css3-github-buttons/), simply prepend the helper method with the name of the icon you'd like to use. For example:
|
|
69
|
+
|
|
70
|
+
<%= magnifier_button_link_to "Search", search_path %>
|
|
71
|
+
<%= user_button_link_to "Account", edit_current_user_path %>
|
|
72
|
+
<%= pin_button_link_to "Mark on map", edit_map_path %>
|
|
56
73
|
|
|
57
|
-
<%= magnifier_button_to "Search", search_path %>
|
|
58
|
-
<%= user_button_to "Account", edit_current_user_path %>
|
|
59
|
-
<%= pin_button_to "Mark on map", edit_map_path %>
|
|
60
74
|
|
|
61
75
|
## Styles
|
|
62
76
|
|
|
63
|
-
Just like the icons,
|
|
77
|
+
Just like the icons, you can add options for `primary`, `big` and
|
|
78
|
+
`pill`.
|
|
79
|
+
|
|
80
|
+
<%= primary_button_link_to "Home", root_path %>
|
|
81
|
+
<%= pill_button_link_to "Archive", archive_path %>
|
|
82
|
+
<%= big_primary_pill_button_link_to "Super Important!", super_important_path %>
|
|
64
83
|
|
|
65
|
-
<%= pill_link_button_to "Archive", archive_path %>
|
|
66
84
|
|
|
67
85
|
## Colors
|
|
68
86
|
|
|
69
|
-
Again with colors - simply add `
|
|
70
|
-
of your method call:
|
|
87
|
+
Again with colors - simply add `positive` or `negative` to the front of your method call:
|
|
71
88
|
|
|
72
89
|
<%= negative_trash_button_to "Delete", delete_path %>
|
|
73
90
|
<%= positive_pill_reload_button_to "Reload", reload_path %>
|
|
74
91
|
|
|
92
|
+
In order to be compatible with the new css3 github buttons library, you are also able to use `safe` and `danger` - as an alternative.
|
|
93
|
+
|
|
94
|
+
|
|
75
95
|
## Button groups
|
|
76
96
|
|
|
77
|
-
|
|
78
|
-
`right` classes for grouped buttons.
|
|
97
|
+
Button groups are snap, you just need to wrap your buttons with `button_group`, like so:
|
|
79
98
|
|
|
80
|
-
<%= button_group do
|
|
81
|
-
<%=
|
|
82
|
-
<%=
|
|
83
|
-
<%=
|
|
84
|
-
<% end
|
|
99
|
+
<%= button_group do %>
|
|
100
|
+
<%= link_button_to "Show", @post %>
|
|
101
|
+
<%= link_button_to "Edit", edit_post_path(@post) %>
|
|
102
|
+
<%= negative_trash_button_to "Delete", @post, :confirm => "Are you sure? %>
|
|
103
|
+
<% end %>
|
|
85
104
|
|
|
86
|
-
|
|
105
|
+
And, of course, minor groups:
|
|
106
|
+
|
|
107
|
+
<%= minor_button_group => true do %>
|
|
108
|
+
You know the drill by now.
|
|
109
|
+
<% end %>
|
|
110
|
+
|
|
111
|
+
## Other stuff
|
|
112
|
+
|
|
113
|
+
Submit tags are also ushered in with this version. Everything works as it does above, except instead of `button_link_to` it's `button_submit_tag`. Example:
|
|
87
114
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
115
|
+
<%= positive_button_submit_tag "Publish" %>
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
# What's missing?
|
|
91
119
|
|
|
92
120
|
The `button_group` helper needs some proper tests, if anyone can point me
|
|
93
121
|
as to how to stub out a rails request template in RSpec, that would be much
|
|
94
122
|
appreciated!
|
|
123
|
+
|
|
124
|
+
I've noticed that this version of the css3 github buttons does not include any colours for the positive/safe styles - so this will appear as normal buttons, unless you add your own styling.
|
|
125
|
+
|
|
126
|
+
Forks and pull requests are always welcome.
|
data/spec/button_group_spec.rb
CHANGED
|
@@ -5,11 +5,23 @@ include Css3buttons::Helpers::ButtonHelper
|
|
|
5
5
|
|
|
6
6
|
describe Css3buttons::ButtonGroup do
|
|
7
7
|
before :each do
|
|
8
|
-
|
|
8
|
+
#@template = MockTemplate.new
|
|
9
|
+
#@template.button_group do
|
|
10
|
+
# pill_button_link_to "View", "/post/346"
|
|
11
|
+
# pill_button_link_to "Edit", "/post/346/edit"
|
|
12
|
+
# negative_trash_pill_button_link_to "Delete", "/post/346", :method => :delete, :confirm => "Are you sure?"
|
|
13
|
+
#end
|
|
9
14
|
end
|
|
10
15
|
|
|
11
16
|
it "should add a class of first to the first link" do
|
|
12
|
-
|
|
13
|
-
|
|
17
|
+
pending
|
|
18
|
+
#render
|
|
19
|
+
#puts rendered
|
|
14
20
|
end
|
|
15
21
|
end
|
|
22
|
+
|
|
23
|
+
class MockTemplate
|
|
24
|
+
#include Css3Buttons::Helpers::ButtonHelper
|
|
25
|
+
#include ActionView::Helpers::TagHelper
|
|
26
|
+
#requires the output buffer junk - blerg
|
|
27
|
+
end
|
data/spec/button_helper_spec.rb
CHANGED
|
@@ -5,13 +5,13 @@ include Css3buttons::Helpers::ButtonHelper
|
|
|
5
5
|
describe Css3buttons::Helpers::ButtonHelper do
|
|
6
6
|
before :each do
|
|
7
7
|
@icons = ["book","calendar","chat","check","clock","cog","comment","cross","downarrow","fork","heart","home","key","leftarrow","lock","loop","magnifier","mail","move","pen","pin","plus","reload","rightarrow","rss","tag","trash","unlock","uparrow","user"]
|
|
8
|
-
@qualifiers = ['pill', 'negative', 'positive']
|
|
8
|
+
@qualifiers = ['pill', 'negative', 'positive', 'danger', 'safe']
|
|
9
9
|
@label = "Search this site"
|
|
10
10
|
@path = "/search/site"
|
|
11
11
|
end
|
|
12
12
|
|
|
13
13
|
it "should create basic buttons" do
|
|
14
|
-
link = html(
|
|
14
|
+
link = html(button_link_to(@label, @path))
|
|
15
15
|
|
|
16
16
|
link.should have_selector("a.button[href='#{@path}']")
|
|
17
17
|
@qualifiers.each do |qualifier|
|
|
@@ -19,64 +19,94 @@ describe Css3buttons::Helpers::ButtonHelper do
|
|
|
19
19
|
end
|
|
20
20
|
end
|
|
21
21
|
|
|
22
|
+
it "should create basic submit buttons" do
|
|
23
|
+
button = html(button_submit_tag(@label))
|
|
24
|
+
|
|
25
|
+
button.should have_selector("input.button[type='submit']")
|
|
26
|
+
@qualifiers.each do |qualifier|
|
|
27
|
+
button.should_not have_selector("input.#{qualifier}")
|
|
28
|
+
end
|
|
29
|
+
end
|
|
30
|
+
|
|
22
31
|
it "should create basic buttons with valid icons" do
|
|
23
32
|
@icons.each do |icon|
|
|
24
|
-
link = html(send(:"#{icon}
|
|
25
|
-
link.should have_selector("a.button[href='#{@path}']")
|
|
26
|
-
link.should have_selector("a.button span.icon.#{icon}")
|
|
33
|
+
link = html(send(:"#{icon}_button_link_to", @label, @path))
|
|
34
|
+
link.should have_selector("a.button.icon.#{icon}[href='#{@path}']")
|
|
27
35
|
end
|
|
28
36
|
end
|
|
37
|
+
|
|
29
38
|
it "should create positive buttons" do
|
|
30
|
-
link = html(
|
|
31
|
-
link.should have_selector("a.button.
|
|
39
|
+
link = html(positive_button_link_to(@label, @path))
|
|
40
|
+
link.should have_selector("a.button.safe[href='#{@path}']")
|
|
41
|
+
@qualifiers.each do |qualifier|
|
|
42
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "safe"
|
|
43
|
+
end
|
|
44
|
+
end
|
|
45
|
+
|
|
46
|
+
it "should create positive submit buttons" do
|
|
47
|
+
button = html(positive_button_submit_tag(@label))
|
|
48
|
+
button.should have_selector("input.button.safe[type='submit']")
|
|
32
49
|
@qualifiers.each do |qualifier|
|
|
33
|
-
|
|
50
|
+
button.should_not have_selector("input.#{qualifier}") unless qualifier == "safe"
|
|
34
51
|
end
|
|
35
52
|
end
|
|
36
53
|
|
|
37
54
|
it "should create negative buttons" do
|
|
38
|
-
link = html(
|
|
39
|
-
link.should have_selector("a.button.
|
|
55
|
+
link = html(negative_button_link_to(@label, @path))
|
|
56
|
+
link.should have_selector("a.button.danger[href='#{@path}']")
|
|
57
|
+
@qualifiers.each do |qualifier|
|
|
58
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "danger"
|
|
59
|
+
end
|
|
60
|
+
end
|
|
61
|
+
|
|
62
|
+
it "should create positive submit buttons" do
|
|
63
|
+
button = html(negative_button_submit_tag(@label))
|
|
64
|
+
button.should have_selector("input.button.danger[type='submit']")
|
|
40
65
|
@qualifiers.each do |qualifier|
|
|
41
|
-
|
|
66
|
+
button.should_not have_selector("a.#{qualifier}") unless qualifier == "danger"
|
|
42
67
|
end
|
|
43
68
|
end
|
|
44
69
|
|
|
45
70
|
it "should create positive buttons with valid icons" do
|
|
46
71
|
@icons.each do |icon|
|
|
47
|
-
link = html(send(:"positive_#{icon}
|
|
48
|
-
link.should have_selector("a.button.
|
|
49
|
-
link.should have_selector("a.button.positive span.icon.#{icon}")
|
|
72
|
+
link = html(send(:"positive_#{icon}_button_link_to", @label, @path))
|
|
73
|
+
link.should have_selector("a.button.safe.icon.#{icon}[href='#{@path}']")
|
|
50
74
|
@qualifiers.each do |qualifier|
|
|
51
|
-
link.should_not have_selector("a.#{qualifier}") unless qualifier == "
|
|
75
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "safe"
|
|
52
76
|
end
|
|
53
77
|
end
|
|
54
78
|
end
|
|
55
79
|
|
|
56
80
|
it "should create negative buttons with valid icons" do
|
|
57
81
|
@icons.each do |icon|
|
|
58
|
-
link = html(send(:"negative_#{icon}
|
|
59
|
-
link.should have_selector("a.button.
|
|
60
|
-
link.should have_selector("a.button.negative span.icon.#{icon}")
|
|
82
|
+
link = html(send(:"negative_#{icon}_button_link_to", @label, @path))
|
|
83
|
+
link.should have_selector("a.button.danger.icon.#{icon}[href='#{@path}']")
|
|
61
84
|
@qualifiers.each do |qualifier|
|
|
62
|
-
link.should_not have_selector("a.#{qualifier}") unless qualifier == "
|
|
85
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "danger"
|
|
63
86
|
end
|
|
64
87
|
end
|
|
65
88
|
end
|
|
66
89
|
|
|
67
90
|
it "should create pill buttons" do
|
|
68
|
-
link = html(
|
|
91
|
+
link = html(pill_button_link_to(@label, @path))
|
|
69
92
|
link.should have_selector("a.button.pill[href='#{@path}']")
|
|
70
93
|
@qualifiers.each do |qualifier|
|
|
71
94
|
link.should_not have_selector("a.#{qualifier}") unless qualifier == "pill"
|
|
72
95
|
end
|
|
73
96
|
end
|
|
74
97
|
|
|
98
|
+
it "should create pill submit buttons" do
|
|
99
|
+
button = html(pill_button_submit_tag(@label))
|
|
100
|
+
button.should have_selector("input.button.pill[type='submit']")
|
|
101
|
+
@qualifiers.each do |qualifier|
|
|
102
|
+
button.should_not have_selector("input.#{qualifier}") unless qualifier == "pill"
|
|
103
|
+
end
|
|
104
|
+
end
|
|
105
|
+
|
|
75
106
|
it "should create pill buttons with valid icons" do
|
|
76
107
|
@icons.each do |icon|
|
|
77
|
-
link = html(send(:"pill_#{icon}
|
|
78
|
-
link.should have_selector("a.button.pill[href='#{@path}']")
|
|
79
|
-
link.should have_selector("a.button.pill span.icon.#{icon}")
|
|
108
|
+
link = html(send(:"pill_#{icon}_button_link_to", @label, @path))
|
|
109
|
+
link.should have_selector("a.button.pill.icon.#{icon}[href='#{@path}']")
|
|
80
110
|
@qualifiers.each do |qualifier|
|
|
81
111
|
link.should_not have_selector("a.#{qualifier}") unless qualifier == "pill"
|
|
82
112
|
end
|
|
@@ -84,31 +114,41 @@ describe Css3buttons::Helpers::ButtonHelper do
|
|
|
84
114
|
end
|
|
85
115
|
|
|
86
116
|
it "should create positive pill buttons" do
|
|
87
|
-
link = html(
|
|
88
|
-
link.should have_selector("a.button.pill.
|
|
89
|
-
link.should_not have_selector("a.
|
|
117
|
+
link = html(positive_pill_button_link_to(@label, @path))
|
|
118
|
+
link.should have_selector("a.button.pill.safe[href='#{@path}']")
|
|
119
|
+
link.should_not have_selector("a.danger")
|
|
120
|
+
end
|
|
121
|
+
|
|
122
|
+
it "should create positive pill submit buttons" do
|
|
123
|
+
button = html(positive_pill_button_submit_tag(@label))
|
|
124
|
+
button.should have_selector("input.button.pill.safe[type='submit']")
|
|
125
|
+
button.should_not have_selector("input.danger")
|
|
90
126
|
end
|
|
91
127
|
|
|
92
128
|
it "should create negative pill buttons" do
|
|
93
|
-
link = html(
|
|
94
|
-
link.should have_selector("a.button.pill.
|
|
95
|
-
link.should_not have_selector("a.
|
|
129
|
+
link = html(negative_pill_button_link_to(@label, @path))
|
|
130
|
+
link.should have_selector("a.button.pill.danger[href='#{@path}']")
|
|
131
|
+
link.should_not have_selector("a.safe")
|
|
132
|
+
end
|
|
133
|
+
|
|
134
|
+
it "should create negative pill submit buttons" do
|
|
135
|
+
button = html(negative_pill_button_submit_tag(@label))
|
|
136
|
+
button.should have_selector("input.button.pill.danger[type='submit']")
|
|
137
|
+
button.should_not have_selector("input.safe")
|
|
96
138
|
end
|
|
97
139
|
|
|
98
140
|
it "should create positive pill buttons with valid icons" do
|
|
99
141
|
@icons.each do |icon|
|
|
100
|
-
link = html(send(:"positive_pill_#{icon}
|
|
101
|
-
link.should have_selector("a.button.
|
|
102
|
-
link.
|
|
103
|
-
link.should_not have_selector("a.negative")
|
|
142
|
+
link = html(send(:"positive_pill_#{icon}_button_link_to", @label, @path))
|
|
143
|
+
link.should have_selector("a.button.safe.pill.icon.#{icon}[href='#{@path}']")
|
|
144
|
+
link.should_not have_selector("a.danger")
|
|
104
145
|
end
|
|
105
146
|
end
|
|
106
147
|
|
|
107
148
|
it "should create negative pill buttons with valid icons" do
|
|
108
149
|
@icons.each do |icon|
|
|
109
|
-
link = html(send(:"negative_pill_#{icon}
|
|
110
|
-
link.should have_selector("a.button.
|
|
111
|
-
link.should have_selector("a.button.negative.pill span.icon.#{icon}")
|
|
150
|
+
link = html(send(:"negative_pill_#{icon}_button_link_to", @label, @path))
|
|
151
|
+
link.should have_selector("a.button.danger.pill.icon.#{icon}[href='#{@path}']")
|
|
112
152
|
link.should_not have_selector("a.positive")
|
|
113
153
|
end
|
|
114
154
|
end
|
metadata
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: css3buttons
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
hash:
|
|
4
|
+
hash: 63
|
|
5
5
|
prerelease: false
|
|
6
6
|
segments:
|
|
7
7
|
- 0
|
|
8
8
|
- 9
|
|
9
|
-
-
|
|
10
|
-
version: 0.9.
|
|
9
|
+
- 2
|
|
10
|
+
version: 0.9.2
|
|
11
11
|
platform: ruby
|
|
12
12
|
authors:
|
|
13
13
|
- Nicholas Bruning
|
|
@@ -15,7 +15,7 @@ autorequire:
|
|
|
15
15
|
bindir: bin
|
|
16
16
|
cert_chain: []
|
|
17
17
|
|
|
18
|
-
date: 2011-
|
|
18
|
+
date: 2011-04-04 00:00:00 +10:00
|
|
19
19
|
default_executable:
|
|
20
20
|
dependencies:
|
|
21
21
|
- !ruby/object:Gem::Dependency
|
|
@@ -59,9 +59,9 @@ files:
|
|
|
59
59
|
- lib/css3buttons/version.rb
|
|
60
60
|
- lib/generators/css3buttons/USAGE
|
|
61
61
|
- lib/generators/css3buttons/css3buttons_generator.rb
|
|
62
|
-
- lib/generators/css3buttons/templates/public/images/
|
|
63
|
-
- lib/generators/css3buttons/templates/public/
|
|
64
|
-
- lib/generators/css3buttons/templates/public/stylesheets/
|
|
62
|
+
- lib/generators/css3buttons/templates/public/images/css3-github-buttons-icons.png
|
|
63
|
+
- lib/generators/css3buttons/templates/public/stylesheets/.DS_Store
|
|
64
|
+
- lib/generators/css3buttons/templates/public/stylesheets/css3-github-buttons.css
|
|
65
65
|
- lib/generators/css3buttons/templates/public/stylesheets/reset.css
|
|
66
66
|
- readme.md
|
|
67
67
|
- spec/button_group_spec.rb
|
|
Binary file
|
|
Binary file
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
a.button, button { display: inline-block; padding: 6px 5px 5px 5px; font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 12px; color: #3C3C3D; text-shadow: 1px 1px 0 #FFFFFF; background: #ECECEC url('../images/css3buttons_backgrounds.png') 0 0 no-repeat; white-space: nowrap; overflow: visible; cursor: pointer; text-decoration: none; border: 1px solid #CACACA; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; outline: none; position: relative; zoom: 1; line-height: 1.11; *display: inline; *vertical-align: middle; }
|
|
2
|
-
button { margin-left: 0; margin-right: 0; *padding: 5px 5px 3px 5px; }
|
|
3
|
-
button::-moz-focus-inner { border: 0; padding:0px; }
|
|
4
|
-
a.button.primary, button.primary { font-weight: bold }
|
|
5
|
-
a.button:focus, button:focus,
|
|
6
|
-
a.button:hover, button:hover { color: #FFFFFF; border-color: #388AD4; text-decoration: none; text-shadow: -1px -1px 0 rgba(0,0,0,0.3); background-position: 0 -40px; background-color: #2D7DC5; }
|
|
7
|
-
a.button:active, button:active,
|
|
8
|
-
a.button.active, button.active { background-position: 0 -81px; border-color: #347BBA; background-color: #0F5EA2; color: #FFFFFF; text-shadow: none; }
|
|
9
|
-
a.button:active, button:active { top: 1px }
|
|
10
|
-
a.button.negative:focus, button.negative:focus,
|
|
11
|
-
a.button.negative:hover, button.negative:hover { color: #FFFFFF; background-position: 0 -121px; background-color: #D84743; border-color: #911D1B; }
|
|
12
|
-
a.button.negative:active, button.negative:active,
|
|
13
|
-
a.button.negative.active, button.negative.active { background-position: 0 -161px; background-color: #A5211E; border-color: #911D1B; }
|
|
14
|
-
a.button.positive:focus, button.positive:focus,
|
|
15
|
-
a.button.positive:hover, button.positive:hover { background-position: 0 -280px; background-color: #96ED89; border-color: #45BF55; }
|
|
16
|
-
a.button.positive:active, button.positive:active,
|
|
17
|
-
a.button.positive.active, button.positive.active { background-position: 0 -320px; background-color: #45BF55; }
|
|
18
|
-
a.button.pill, button.pill { -webkit-border-radius: 19px; -moz-border-radius: 19px; border-radius: 19px; padding: 5px 10px 4px 10px; *padding: 4px 10px; }
|
|
19
|
-
a.button.left, button.left { -webkit-border-bottom-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topright: 0px; border-bottom-right-radius: 0px; border-top-right-radius: 0px; margin-right: 0px; }
|
|
20
|
-
a.button.middle, button.middle { margin-right: 0px; margin-left: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-right: none; border-left: none; }
|
|
21
|
-
a.button.right, button.right { -webkit-border-bottom-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-bottomleft: 0px; -moz-border-radius-topleft: 0px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; margin-left: 0px; }
|
|
22
|
-
a.button.left:active, button.left:active,
|
|
23
|
-
a.button.middle:active, button.middle:active,
|
|
24
|
-
a.button.right:active, button.right:active { top: 0px }
|
|
25
|
-
a.button.big, button.big { font-size: 16px; padding-left: 17px; padding-right: 17px; }
|
|
26
|
-
button.big { *padding: 4px 17px 2px 17px; }
|
|
27
|
-
a.button span.icon, button span.icon { display: inline-block; width: 14px; height: 12px; margin: auto 7px auto auto; position: relative; top: 2px; *top: 0px; background-image: url('../images/css3buttons_icons.png'); background-repeat: no-repeat; }
|
|
28
|
-
a.big.button span.icon, button.big span.icon, { top: 0px }
|
|
29
|
-
a.button span.icon.book, button span.icon.book { background-position: 0 0 }
|
|
30
|
-
a.button:hover span.icon.book, button:hover span.icon.book { background-position: 0 -15px }
|
|
31
|
-
a.button span.icon.calendar, button span.icon.calendar { background-position: 0 -30px }
|
|
32
|
-
a.button:hover span.icon.calendar, button:hover span.icon.calendar { background-position: 0 -45px }
|
|
33
|
-
a.button span.icon.chat, button span.icon.chat { background-position: 0 -60px }
|
|
34
|
-
a.button:hover span.icon.chat, button:hover span.icon.chat { background-position: 0 -75px }
|
|
35
|
-
a.button span.icon.check, button span.icon.check { background-position: 0 -90px }
|
|
36
|
-
a.button:hover span.icon.check, button:hover span.icon.check { background-position: 0 -103px }
|
|
37
|
-
a.button span.icon.clock, button span.icon.clock { background-position: 0 -116px }
|
|
38
|
-
a.button:hover span.icon.clock, button:hover span.icon.clock { background-position: 0 -131px }
|
|
39
|
-
a.button span.icon.cog, button span.icon.cog { background-position: 0 -146px }
|
|
40
|
-
a.button:hover span.icon.cog, button:hover span.icon.cog { background-position: 0 -161px }
|
|
41
|
-
a.button span.icon.comment, button span.icon.comment { background-position: 0 -176px }
|
|
42
|
-
a.button:hover span.icon.comment, button:hover span.icon.comment { background-position: 0 -190px }
|
|
43
|
-
a.button span.icon.cross, button span.icon.cross { background-position: 0 -204px }
|
|
44
|
-
a.button:hover span.icon.cross, button:hover span.icon.cross { background-position: 0 -219px }
|
|
45
|
-
a.button span.icon.downarrow, button span.icon.downarrow { background-position: 0 -234px }
|
|
46
|
-
a.button:hover span.icon.downarrow, button:hover span.icon.downarrow { background-position: 0 -249px }
|
|
47
|
-
a.button span.icon.fork, button span.icon.fork { background-position: 0 -264px }
|
|
48
|
-
a.button:hover span.icon.fork, button:hover span.icon.fork { background-position: 0 -279px }
|
|
49
|
-
a.button span.icon.heart, button span.icon.heart { background-position: 0 -294px }
|
|
50
|
-
a.button:hover span.icon.heart, button:hover span.icon.heart { background-position: 0 -308px }
|
|
51
|
-
a.button span.icon.home, button span.icon.home { background-position: 0 -322px }
|
|
52
|
-
a.button:hover span.icon.home, button:hover span.icon.home { background-position: 0 -337px }
|
|
53
|
-
a.button span.icon.key, button span.icon.key { background-position: 0 -352px }
|
|
54
|
-
a.button:hover span.icon.key, button:hover span.icon.key { background-position: 0 -367px }
|
|
55
|
-
a.button span.icon.leftarrow, button span.icon.leftarrow { background-position: 0 -382px }
|
|
56
|
-
a.button:hover span.icon.leftarrow, button:hover span.icon.leftarrow { background-position: 0 -397px }
|
|
57
|
-
a.button span.icon.lock, button span.icon.lock { background-position: 0 -412px }
|
|
58
|
-
a.button:hover span.icon.lock, button:hover span.icon.lock { background-position: 0 -427px }
|
|
59
|
-
a.button span.icon.loop, button span.icon.loop { background-position: 0 -442px }
|
|
60
|
-
a.button:hover span.icon.loop, button:hover span.icon.loop { background-position: 0 -457px }
|
|
61
|
-
a.button span.icon.magnifier, button span.icon.magnifier { background-position: 0 -472px }
|
|
62
|
-
a.button:hover span.icon.magnifier, button:hover span.icon.magnifier { background-position: 0 -487px }
|
|
63
|
-
a.button span.icon.mail, button span.icon.mail { background-position: 0 -502px }
|
|
64
|
-
a.button:hover span.icon.mail, button:hover span.icon.mail { background-position: 0 -514px }
|
|
65
|
-
a.button span.icon.move, button span.icon.move { background-position: 0 -526px }
|
|
66
|
-
a.button:hover span.icon.move, button:hover span.icon.move { background-position: 0 -541px }
|
|
67
|
-
a.button span.icon.pen, button span.icon.pen { background-position: 0 -556px }
|
|
68
|
-
a.button:hover span.icon.pen, button:hover span.icon.pen { background-position: 0 -571px }
|
|
69
|
-
a.button span.icon.pin, button span.icon.pin { background-position: 0 -586px }
|
|
70
|
-
a.button:hover span.icon.pin, button:hover span.icon.pin { background-position: 0 -601px }
|
|
71
|
-
a.button span.icon.plus, button span.icon.plus { background-position: 0 -616px }
|
|
72
|
-
a.button:hover span.icon.plus, button:hover span.icon.plus { background-position: 0 -631px }
|
|
73
|
-
a.button span.icon.reload, button span.icon.reload { background-position: 0 -646px }
|
|
74
|
-
a.button:hover span.icon.reload, button:hover span.icon.reload { background-position: 0 -660px }
|
|
75
|
-
a.button span.icon.rightarrow, button span.icon.rightarrow { background-position: 0 -674px }
|
|
76
|
-
a.button:hover span.icon.rightarrow, button:hover span.icon.rightarrow { background-position: 0 -689px }
|
|
77
|
-
a.button span.icon.rss, button span.icon.rss { background-position: 0 -704px }
|
|
78
|
-
a.button:hover span.icon.rss, button:hover span.icon.rss { background-position: 0 -719px }
|
|
79
|
-
a.button span.icon.tag, button span.icon.tag { background-position: 0 -734px }
|
|
80
|
-
a.button:hover span.icon.tag, button:hover span.icon.tag { background-position: 0 -749px }
|
|
81
|
-
a.button span.icon.trash, button span.icon.trash { background-position: 0 -764px }
|
|
82
|
-
a.button:hover span.icon.trash, button:hover span.icon.trash { background-position: 0 -779px }
|
|
83
|
-
a.button span.icon.unlock, button span.icon.unlock { background-position: 0 -794px }
|
|
84
|
-
a.button:hover span.icon.unlock, button:hover span.icon.unlock { background-position: 0 -809px }
|
|
85
|
-
a.button span.icon.uparrow, button span.icon.uparrow { background-position: 0 -824px }
|
|
86
|
-
a.button:hover span.icon.uparrow, button:hover span.icon.uparrow { background-position: 0 -839px }
|
|
87
|
-
a.button span.icon.user, button span.icon.user { background-position: 0 -854px }
|
|
88
|
-
a.button:hover span.icon.user, button:hover span.icon.user { background-position: 0 -869px }
|