css3buttons 0.9.1 → 0.9.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/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 }
|