css3buttons-rails 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.autotest +1 -0
- data/.gitignore +3 -0
- data/.rspec +2 -0
- data/Gemfile +16 -0
- data/Gemfile.lock +92 -0
- data/LICENSE +19 -0
- data/Rakefile +2 -0
- data/css3buttons-rails.gemspec +23 -0
- data/lib/assets/images/css3buttons/css3-github-buttons-icons.png +0 -0
- data/lib/assets/stylesheets/css3buttons/css3-github-buttons.css +388 -0
- data/lib/assets/stylesheets/css3buttons/index.css +5 -0
- data/lib/assets/stylesheets/css3buttons/reset.css +67 -0
- data/lib/assets/stylesheets/css3buttons/without-reset.css +4 -0
- data/lib/css3buttons-rails.rb +7 -0
- data/lib/css3buttons.rb +10 -0
- data/lib/css3buttons/.DS_Store +0 -0
- data/lib/css3buttons/button_group.rb +24 -0
- data/lib/css3buttons/helpers/button_helper.rb +93 -0
- data/lib/css3buttons/version.rb +3 -0
- data/readme.md +144 -0
- data/spec/button_group_spec.rb +27 -0
- data/spec/button_helper_spec.rb +264 -0
- data/spec/spec_helper.rb +10 -0
- metadata +93 -0
data/.autotest
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require 'autotest/growl'
|
data/.gitignore
ADDED
data/.rspec
ADDED
data/Gemfile
ADDED
@@ -0,0 +1,16 @@
|
|
1
|
+
source "http://rubygems.org"
|
2
|
+
|
3
|
+
# Specify your gem's dependencies in css3buttons.gemspec
|
4
|
+
gemspec
|
5
|
+
|
6
|
+
gem 'actionpack', '>= 3.0.0'
|
7
|
+
|
8
|
+
group :test do
|
9
|
+
#gem 'rails'
|
10
|
+
gem 'rspec'
|
11
|
+
#gem 'rspec-rails'
|
12
|
+
gem 'autotest'
|
13
|
+
gem 'autotest-growl'
|
14
|
+
gem 'capybara', :git => 'https://github.com/jnicklas/capybara.git'
|
15
|
+
gem 'webrat'
|
16
|
+
end
|
data/Gemfile.lock
ADDED
@@ -0,0 +1,92 @@
|
|
1
|
+
GIT
|
2
|
+
remote: https://github.com/jnicklas/capybara.git
|
3
|
+
revision: 549e67336c712a1ef2119ce5ff64dbbc7542480f
|
4
|
+
specs:
|
5
|
+
capybara (0.4.1.1)
|
6
|
+
mime-types (>= 1.16)
|
7
|
+
nokogiri (>= 1.3.3)
|
8
|
+
rack (>= 1.0.0)
|
9
|
+
rack-test (>= 0.5.4)
|
10
|
+
selenium-webdriver (>= 0.0.27)
|
11
|
+
xpath (~> 0.1.3)
|
12
|
+
|
13
|
+
PATH
|
14
|
+
remote: .
|
15
|
+
specs:
|
16
|
+
css3buttons (0.9.4)
|
17
|
+
actionpack (>= 3.0.0)
|
18
|
+
|
19
|
+
GEM
|
20
|
+
remote: http://rubygems.org/
|
21
|
+
specs:
|
22
|
+
ZenTest (4.5.0)
|
23
|
+
abstract (1.0.0)
|
24
|
+
actionpack (3.0.5)
|
25
|
+
activemodel (= 3.0.5)
|
26
|
+
activesupport (= 3.0.5)
|
27
|
+
builder (~> 2.1.2)
|
28
|
+
erubis (~> 2.6.6)
|
29
|
+
i18n (~> 0.4)
|
30
|
+
rack (~> 1.2.1)
|
31
|
+
rack-mount (~> 0.6.13)
|
32
|
+
rack-test (~> 0.5.7)
|
33
|
+
tzinfo (~> 0.3.23)
|
34
|
+
activemodel (3.0.5)
|
35
|
+
activesupport (= 3.0.5)
|
36
|
+
builder (~> 2.1.2)
|
37
|
+
i18n (~> 0.4)
|
38
|
+
activesupport (3.0.5)
|
39
|
+
autotest (4.4.6)
|
40
|
+
ZenTest (>= 4.4.1)
|
41
|
+
autotest-growl (0.2.9)
|
42
|
+
builder (2.1.2)
|
43
|
+
childprocess (0.1.7)
|
44
|
+
ffi (~> 0.6.3)
|
45
|
+
diff-lcs (1.1.2)
|
46
|
+
erubis (2.6.6)
|
47
|
+
abstract (>= 1.0.0)
|
48
|
+
ffi (0.6.3)
|
49
|
+
rake (>= 0.8.7)
|
50
|
+
i18n (0.5.0)
|
51
|
+
json_pure (1.5.1)
|
52
|
+
mime-types (1.16)
|
53
|
+
nokogiri (1.4.4)
|
54
|
+
rack (1.2.2)
|
55
|
+
rack-mount (0.6.13)
|
56
|
+
rack (>= 1.0.0)
|
57
|
+
rack-test (0.5.7)
|
58
|
+
rack (>= 1.0)
|
59
|
+
rake (0.8.7)
|
60
|
+
rspec (2.5.0)
|
61
|
+
rspec-core (~> 2.5.0)
|
62
|
+
rspec-expectations (~> 2.5.0)
|
63
|
+
rspec-mocks (~> 2.5.0)
|
64
|
+
rspec-core (2.5.1)
|
65
|
+
rspec-expectations (2.5.0)
|
66
|
+
diff-lcs (~> 1.1.2)
|
67
|
+
rspec-mocks (2.5.0)
|
68
|
+
rubyzip (0.9.4)
|
69
|
+
selenium-webdriver (0.1.3)
|
70
|
+
childprocess (~> 0.1.5)
|
71
|
+
ffi (~> 0.6.3)
|
72
|
+
json_pure
|
73
|
+
rubyzip
|
74
|
+
tzinfo (0.3.25)
|
75
|
+
webrat (0.7.2)
|
76
|
+
nokogiri (>= 1.2.0)
|
77
|
+
rack (>= 1.0)
|
78
|
+
rack-test (>= 0.5.3)
|
79
|
+
xpath (0.1.3)
|
80
|
+
nokogiri (~> 1.3)
|
81
|
+
|
82
|
+
PLATFORMS
|
83
|
+
ruby
|
84
|
+
|
85
|
+
DEPENDENCIES
|
86
|
+
actionpack (>= 3.0.0)
|
87
|
+
autotest
|
88
|
+
autotest-growl
|
89
|
+
capybara!
|
90
|
+
css3buttons!
|
91
|
+
rspec
|
92
|
+
webrat
|
data/LICENSE
ADDED
@@ -0,0 +1,19 @@
|
|
1
|
+
Copyright (c) 2011, Nicholas Bruning
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
4
|
+
of this software and associated documentation files (the "Software"), to deal
|
5
|
+
in the Software without restriction, including without limitation the rights
|
6
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
7
|
+
copies of the Software, and to permit persons to whom the Software is
|
8
|
+
furnished to do so, subject to the following conditions:
|
9
|
+
|
10
|
+
The above copyright notice and this permission notice shall be included in
|
11
|
+
all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
14
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
15
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
16
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
17
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
18
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
19
|
+
THE SOFTWARE.
|
data/Rakefile
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "css3buttons/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "css3buttons-rails"
|
7
|
+
s.version = Css3buttons::VERSION
|
8
|
+
s.platform = Gem::Platform::RUBY
|
9
|
+
s.authors = ["Nicholas Bruning", "Florian Günther"]
|
10
|
+
s.email = ["nicholas@bruning.com.au", "mail@gee-f.de"]
|
11
|
+
s.homepage = "https://github.com/florianguenther/css3buttons-rails"
|
12
|
+
s.summary = %q{Easy, beautiful buttons, the CSS3 way.}
|
13
|
+
s.description = %q{Rails3.1+ helper methods for the css3buttons by Michael Henriksen.}
|
14
|
+
|
15
|
+
# s.rubyforge_project = "css3buttons"
|
16
|
+
|
17
|
+
s.add_dependency 'actionpack', '>= 3.0.0'
|
18
|
+
|
19
|
+
s.files = `git ls-files`.split("\n")
|
20
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
21
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
22
|
+
s.require_paths = ["lib"]
|
23
|
+
end
|
Binary file
|
@@ -0,0 +1,388 @@
|
|
1
|
+
/* ------------------------------------------
|
2
|
+
CSS3 GITHUB BUTTONS (Nicolas Gallagher)
|
3
|
+
Licensed under Unlicense
|
4
|
+
http://github.com/necolas/css3-github-buttons
|
5
|
+
------------------------------------------ */
|
6
|
+
|
7
|
+
|
8
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON */
|
9
|
+
|
10
|
+
.button {
|
11
|
+
position: relative;
|
12
|
+
overflow: visible;
|
13
|
+
display: inline-block;
|
14
|
+
padding: 0.5em 1em;
|
15
|
+
border: 1px solid #d4d4d4;
|
16
|
+
margin: 0;
|
17
|
+
text-decoration: none;
|
18
|
+
text-shadow: 1px 1px 0 #fff;
|
19
|
+
font:11px/normal sans-serif;
|
20
|
+
color: #333;
|
21
|
+
white-space: nowrap;
|
22
|
+
cursor: pointer;
|
23
|
+
outline: none;
|
24
|
+
background-color: #ececec;
|
25
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
|
26
|
+
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
|
27
|
+
background-image: -o-linear-gradient(#f4f4f4, #ececec);
|
28
|
+
background-image: linear-gradient(#f4f4f4, #ececec);
|
29
|
+
-webkit-background-clip: padding;
|
30
|
+
-moz-background-clip: padding;
|
31
|
+
-o-background-clip: padding-box;
|
32
|
+
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
|
33
|
+
-webkit-border-radius: 0.2em;
|
34
|
+
-moz-border-radius: 0.2em;
|
35
|
+
border-radius: 0.2em;
|
36
|
+
/* IE hacks */
|
37
|
+
zoom: 1;
|
38
|
+
*display: inline;
|
39
|
+
}
|
40
|
+
|
41
|
+
.button:hover,
|
42
|
+
.button:focus,
|
43
|
+
.button:active {
|
44
|
+
border-color: #3072b3;
|
45
|
+
border-bottom-color: #2a65a0;
|
46
|
+
text-decoration: none;
|
47
|
+
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
|
48
|
+
color: #fff;
|
49
|
+
background-color: #3072b3;
|
50
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
|
51
|
+
background-image: -moz-linear-gradient(#599bdc, #3072b3);
|
52
|
+
background-image: -o-linear-gradient(#599bdc, #3072b3);
|
53
|
+
background-image: linear-gradient(#599bdc, #3072b3);
|
54
|
+
}
|
55
|
+
|
56
|
+
.button:active,
|
57
|
+
.button.active {
|
58
|
+
border-color: #2a65a0;
|
59
|
+
border-bottom-color: #3884CF;
|
60
|
+
color: #fff;
|
61
|
+
background-color: #3072b3;
|
62
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
|
63
|
+
background-image: -moz-linear-gradient(#3072b3, #599bdc);
|
64
|
+
background-image: -o-linear-gradient(#3072b3, #599bdc);
|
65
|
+
background-image: linear-gradient(#3072b3, #599bdc);
|
66
|
+
}
|
67
|
+
|
68
|
+
/* overrides extra padding on button elements in Firefox */
|
69
|
+
.button::-moz-focus-inner {
|
70
|
+
padding: 0;
|
71
|
+
border: 0;
|
72
|
+
}
|
73
|
+
|
74
|
+
/* ............................................................................................................. Icons */
|
75
|
+
|
76
|
+
.button.icon:before {
|
77
|
+
content: "";
|
78
|
+
position: relative;
|
79
|
+
top: 1px;
|
80
|
+
float:left;
|
81
|
+
width: 12px;
|
82
|
+
height: 12px;
|
83
|
+
margin: 0 0.75em 0 -0.25em;
|
84
|
+
background: url(css3buttons/css3-github-buttons-icons.png) 0 99px no-repeat;
|
85
|
+
}
|
86
|
+
|
87
|
+
.button.arrowup.icon:before { background-position: 0 0; }
|
88
|
+
.button.arrowup.icon:hover:before,
|
89
|
+
.button.arrowup.icon:focus:before,
|
90
|
+
.button.arrowup.icon:active:before { background-position: -12px 0; }
|
91
|
+
|
92
|
+
.button.arrowdown.icon:before { background-position: 0 -12px; }
|
93
|
+
.button.arrowdown.icon:hover:before,
|
94
|
+
.button.arrowdown.icon:focus:before,
|
95
|
+
.button.arrowdown.icon:active:before { background-position: -12px -12px; }
|
96
|
+
|
97
|
+
.button.arrowleft.icon:before { background-position: 0 -24px; }
|
98
|
+
.button.arrowleft.icon:hover:before,
|
99
|
+
.button.arrowleft.icon:focus:before,
|
100
|
+
.button.arrowleft.icon:active:before { background-position: -12px -24px; }
|
101
|
+
|
102
|
+
.button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -36px; }
|
103
|
+
.button.arrowright.icon:hover:before,
|
104
|
+
.button.arrowright.icon:focus:before,
|
105
|
+
.button.arrowright.icon:active:before { background-position: -12px -36px; }
|
106
|
+
|
107
|
+
.button.approve.icon:before { background-position: 0 -48px; }
|
108
|
+
.button.approve.icon:hover:before,
|
109
|
+
.button.approve.icon:focus:before,
|
110
|
+
.button.approve.icon:active:before { background-position: -12px -48px; }
|
111
|
+
|
112
|
+
.button.add.icon:before { background-position: 0 -288px; }
|
113
|
+
.button.add.icon:hover:before,
|
114
|
+
.button.add.icon:focus:before,
|
115
|
+
.button.add.icon:active:before { background-position: -12px -288px; }
|
116
|
+
|
117
|
+
.button.remove.icon:before { background-position: 0 -60px; }
|
118
|
+
.button.remove.icon:hover:before,
|
119
|
+
.button.remove.icon:focus:before,
|
120
|
+
.button.remove.icon:active:before { background-position: -12px -60px; }
|
121
|
+
|
122
|
+
.button.log.icon:before { background-position: 0 -72px; }
|
123
|
+
.button.log.icon:hover:before,
|
124
|
+
.button.log.icon:focus:before,
|
125
|
+
.button.log.icon:active:before { background-position: -12px -72px; }
|
126
|
+
|
127
|
+
.button.calendar.icon:before { background-position: 0 -84px; }
|
128
|
+
.button.calendar.icon:hover:before,
|
129
|
+
.button.calendar.icon:focus:before,
|
130
|
+
.button.calendar.icon:active:before { background-position: -12px -84px; }
|
131
|
+
|
132
|
+
.button.chat.icon:before { background-position: 0 -96px; }
|
133
|
+
.button.chat.icon:hover:before,
|
134
|
+
.button.chat.icon:focus:before,
|
135
|
+
.button.chat.icon:active:before { background-position: -12px -96px; }
|
136
|
+
|
137
|
+
.button.clock.icon:before { background-position: 0 -108px; }
|
138
|
+
.button.clock.icon:hover:before,
|
139
|
+
.button.clock.icon:focus:before,
|
140
|
+
.button.clock.icon:active:before { background-position: -12px -108px; }
|
141
|
+
|
142
|
+
.button.settings.icon:before { background-position: 0 -120px; }
|
143
|
+
.button.settings.icon:hover:before,
|
144
|
+
.button.settings.icon:focus:before,
|
145
|
+
.button.settings.icon:active:before { background-position: -12px -120px; }
|
146
|
+
|
147
|
+
.button.comment.icon:before { background-position: 0 -132px; }
|
148
|
+
.button.comment.icon:hover:before,
|
149
|
+
.button.comment.icon:focus:before,
|
150
|
+
.button.comment.icon:active:before { background-position: -12px -132px; }
|
151
|
+
|
152
|
+
.button.fork.icon:before { background-position: 0 -144px; }
|
153
|
+
.button.fork.icon:hover:before,
|
154
|
+
.button.fork.icon:focus:before,
|
155
|
+
.button.fork.icon:active:before { background-position: -12px -144px; }
|
156
|
+
|
157
|
+
.button.like.icon:before { background-position: 0 -156px; }
|
158
|
+
.button.like.icon:hover:before,
|
159
|
+
.button.like.icon:focus:before,
|
160
|
+
.button.like.icon:active:before { background-position: -12px -156px; }
|
161
|
+
|
162
|
+
.button.favorite.icon:before { background-position: 0 -348px; }
|
163
|
+
.button.favorite.icon:hover:before,
|
164
|
+
.button.favorite.icon:focus:before,
|
165
|
+
.button.favorite.icon:active:before { background-position: -12px -348px; }
|
166
|
+
|
167
|
+
.button.home.icon:before { background-position: 0 -168px; }
|
168
|
+
.button.home.icon:hover:before,
|
169
|
+
.button.home.icon:focus:before,
|
170
|
+
.button.home.icon:active:before { background-position: -12px -168px; }
|
171
|
+
|
172
|
+
.button.key.icon:before { background-position: 0 -180px; }
|
173
|
+
.button.key.icon:hover:before,
|
174
|
+
.button.key.icon:focus:before,
|
175
|
+
.button.key.icon:active:before { background-position: -12px -180px; }
|
176
|
+
|
177
|
+
.button.lock.icon:before { background-position: 0 -192px; }
|
178
|
+
.button.lock.icon:hover:before,
|
179
|
+
.button.lock.icon:focus:before,
|
180
|
+
.button.lock.icon:active:before { background-position: -12px -192px; }
|
181
|
+
|
182
|
+
.button.unlock.icon:before { background-position: 0 -204px; }
|
183
|
+
.button.unlock.icon:hover:before,
|
184
|
+
.button.unlock.icon:focus:before,
|
185
|
+
.button.unlock.icon:active:before { background-position: -12px -204px; }
|
186
|
+
|
187
|
+
.button.loop.icon:before { background-position: 0 -216px; }
|
188
|
+
.button.loop.icon:hover:before,
|
189
|
+
.button.loop.icon:focus:before,
|
190
|
+
.button.loop.icon:active:before { background-position: -12px -216px; }
|
191
|
+
|
192
|
+
.button.search.icon:before { background-position: 0 -228px; }
|
193
|
+
.button.search.icon:hover:before,
|
194
|
+
.button.search.icon:focus:before,
|
195
|
+
.button.search.icon:active:before { background-position: -12px -228px; }
|
196
|
+
|
197
|
+
.button.mail.icon:before { background-position: 0 -240px; }
|
198
|
+
.button.mail.icon:hover:before,
|
199
|
+
.button.mail.icon:focus:before,
|
200
|
+
.button.mail.icon:active:before { background-position: -12px -240px; }
|
201
|
+
|
202
|
+
.button.move.icon:before { background-position: 0 -252px; }
|
203
|
+
.button.move.icon:hover:before,
|
204
|
+
.button.move.icon:focus:before,
|
205
|
+
.button.move.icon:active:before { background-position: -12px -252px; }
|
206
|
+
|
207
|
+
.button.edit.icon:before { background-position: 0 -264px; }
|
208
|
+
.button.edit.icon:hover:before,
|
209
|
+
.button.edit.icon:focus:before,
|
210
|
+
.button.edit.icon:active:before { background-position: -12px -264px; }
|
211
|
+
|
212
|
+
.button.pin.icon:before { background-position: 0 -276px; }
|
213
|
+
.button.pin.icon:hover:before,
|
214
|
+
.button.pin.icon:focus:before,
|
215
|
+
.button.pin.icon:active:before { background-position: -12px -276px; }
|
216
|
+
|
217
|
+
.button.reload.icon:before { background-position: 0 -300px; }
|
218
|
+
.button.reload.icon:hover:before,
|
219
|
+
.button.reload.icon:focus:before,
|
220
|
+
.button.reload.icon:active:before { background-position: -12px -300px; }
|
221
|
+
|
222
|
+
.button.rss.icon:before { background-position: 0 -312px; }
|
223
|
+
.button.rss.icon:hover:before,
|
224
|
+
.button.rss.icon:focus:before,
|
225
|
+
.button.rss.icon:active:before { background-position: -12px -312px; }
|
226
|
+
|
227
|
+
.button.tag.icon:before { background-position: 0 -324px; }
|
228
|
+
.button.tag.icon:hover:before,
|
229
|
+
.button.tag.icon:focus:before,
|
230
|
+
.button.tag.icon:active:before { background-position: -12px -324px; }
|
231
|
+
|
232
|
+
.button.trash.icon:before { background-position: 0 -336px; }
|
233
|
+
.button.trash.icon:hover:before,
|
234
|
+
.button.trash.icon:focus:before,
|
235
|
+
.button.trash.icon:active:before { background-position: -12px -336px; }
|
236
|
+
|
237
|
+
.button.user.icon:before { background-position: 0 -360px; }
|
238
|
+
.button.user.icon:hover:before,
|
239
|
+
.button.user.icon:focus:before,
|
240
|
+
.button.user.icon:active:before { background-position: -12px -360px; }
|
241
|
+
|
242
|
+
|
243
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON EXTENSIONS */
|
244
|
+
|
245
|
+
/* ............................................................................................................. Primary */
|
246
|
+
|
247
|
+
.button.primary {
|
248
|
+
font-weight: bold;
|
249
|
+
}
|
250
|
+
|
251
|
+
/* ............................................................................................................. Danger */
|
252
|
+
|
253
|
+
.button.danger {
|
254
|
+
color: #900;
|
255
|
+
}
|
256
|
+
|
257
|
+
.button.danger:hover,
|
258
|
+
.button.danger:focus,
|
259
|
+
.button.danger:active {
|
260
|
+
border-color: #b53f3a;
|
261
|
+
border-bottom-color: #a0302a;
|
262
|
+
color: #fff;
|
263
|
+
background-color: #dc5f59;
|
264
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
|
265
|
+
background-image: -moz-linear-gradient(#dc5f59, #b33630);
|
266
|
+
background-image: -o-linear-gradient(#dc5f59, #b33630);
|
267
|
+
background-image: linear-gradient(#dc5f59, #b33630);
|
268
|
+
}
|
269
|
+
|
270
|
+
.button.danger:active,
|
271
|
+
.button.danger.active {
|
272
|
+
border-color: #a0302a;
|
273
|
+
border-bottom-color: #bf4843;
|
274
|
+
background-color: #b33630;
|
275
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
|
276
|
+
background-image: -moz-linear-gradient(#b33630, #dc5f59);
|
277
|
+
background-image: -o-linear-gradient(#b33630, #dc5f59);
|
278
|
+
background-image: linear-gradient(#b33630, #dc5f59);
|
279
|
+
}
|
280
|
+
|
281
|
+
/* ............................................................................................................. Pill */
|
282
|
+
|
283
|
+
.button.pill {
|
284
|
+
-webkit-border-radius: 50em;
|
285
|
+
-moz-border-radius: 50em;
|
286
|
+
border-radius: 50em;
|
287
|
+
}
|
288
|
+
|
289
|
+
/* ............................................................................................................. Big */
|
290
|
+
|
291
|
+
.button.big {
|
292
|
+
font-size: 14px;
|
293
|
+
}
|
294
|
+
|
295
|
+
.button.big.icon:before { top: 0; }
|
296
|
+
|
297
|
+
|
298
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */
|
299
|
+
|
300
|
+
/* ............................................................................................................. Standard */
|
301
|
+
|
302
|
+
.button-group {
|
303
|
+
display: inline-block;
|
304
|
+
list-style: none;
|
305
|
+
padding: 0;
|
306
|
+
margin: 0;
|
307
|
+
/* IE hacks */
|
308
|
+
zoom: 1;
|
309
|
+
*display: inline;
|
310
|
+
}
|
311
|
+
|
312
|
+
.button + .button,
|
313
|
+
.button + .button-group,
|
314
|
+
.button-group + .button,
|
315
|
+
.button-group + .button-group {
|
316
|
+
margin-left: 15px;
|
317
|
+
}
|
318
|
+
|
319
|
+
.button-group li {
|
320
|
+
float: left;
|
321
|
+
padding: 0;
|
322
|
+
margin: 0;
|
323
|
+
}
|
324
|
+
|
325
|
+
.button-group .button {
|
326
|
+
float: left;
|
327
|
+
margin-left: -1px;
|
328
|
+
}
|
329
|
+
|
330
|
+
.button-group > .button:not(:first-child):not(:last-child),
|
331
|
+
.button-group li:not(:first-child):not(:last-child) .button {
|
332
|
+
-webkit-border-radius: 0;
|
333
|
+
-moz-border-radius: 0;
|
334
|
+
border-radius: 0;
|
335
|
+
}
|
336
|
+
|
337
|
+
.button-group > .button:first-child,
|
338
|
+
.button-group li:first-child .button {
|
339
|
+
margin-left: 0;
|
340
|
+
-webkit-border-top-right-radius: 0;
|
341
|
+
-webkit-border-bottom-right-radius: 0;
|
342
|
+
-moz-border-radius-topright: 0;
|
343
|
+
-moz-border-radius-bottomright: 0;
|
344
|
+
border-top-right-radius: 0;
|
345
|
+
border-bottom-right-radius: 0;
|
346
|
+
}
|
347
|
+
|
348
|
+
.button-group > .button:last-child,
|
349
|
+
.button-group li:last-child > .button {
|
350
|
+
-webkit-border-top-left-radius: 0;
|
351
|
+
-webkit-border-bottom-left-radius: 0;
|
352
|
+
-moz-border-radius-topleft: 0;
|
353
|
+
-moz-border-radius-bottomleft: 0;
|
354
|
+
border-top-left-radius: 0;
|
355
|
+
border-bottom-left-radius: 0;
|
356
|
+
}
|
357
|
+
|
358
|
+
/* ............................................................................................................. Minor */
|
359
|
+
|
360
|
+
.button-group.minor-group .button {
|
361
|
+
border: 1px solid #d4d4d4;
|
362
|
+
text-shadow: none;
|
363
|
+
background-image: none;
|
364
|
+
background-color: #fff;
|
365
|
+
}
|
366
|
+
|
367
|
+
.button-group.minor-group .button:hover,
|
368
|
+
.button-group.minor-group .button:focus,
|
369
|
+
.button-group.minor-group .button:active {
|
370
|
+
background-color: #599bdc;
|
371
|
+
}
|
372
|
+
|
373
|
+
.button-group.minor-group .button:active,
|
374
|
+
.button-group.minor-group .button.active {
|
375
|
+
background-color: #3072b3;
|
376
|
+
}
|
377
|
+
|
378
|
+
.button-group.minor-group .button.icon:before {
|
379
|
+
opacity: 0.8;
|
380
|
+
}
|
381
|
+
|
382
|
+
/* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */
|
383
|
+
/* For mixing buttons and button groups, e.g., in a navigation bar */
|
384
|
+
|
385
|
+
.button-container .button,
|
386
|
+
.button-container .button-group {
|
387
|
+
vertical-align: top;
|
388
|
+
}
|
@@ -0,0 +1,67 @@
|
|
1
|
+
/* --------------------------------------------------------------
|
2
|
+
|
3
|
+
reset.css
|
4
|
+
* Resets default browser CSS.
|
5
|
+
|
6
|
+
-------------------------------------------------------------- */
|
7
|
+
|
8
|
+
html {
|
9
|
+
margin:0;
|
10
|
+
padding:0;
|
11
|
+
border:0;
|
12
|
+
}
|
13
|
+
|
14
|
+
body, div, span, object, iframe,
|
15
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
16
|
+
a, abbr, acronym, address, code,
|
17
|
+
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
|
18
|
+
fieldset, form, label, legend,
|
19
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
20
|
+
article, aside, dialog, figure, footer, header,
|
21
|
+
hgroup, nav, section {
|
22
|
+
margin: 0;
|
23
|
+
padding: 0;
|
24
|
+
border: 0;
|
25
|
+
font-weight: inherit;
|
26
|
+
font-style: inherit;
|
27
|
+
font-size: 100%;
|
28
|
+
font-family: inherit;
|
29
|
+
vertical-align: baseline;
|
30
|
+
}
|
31
|
+
|
32
|
+
/* This helps to make newer HTML5 elements behave like DIVs in older browers */
|
33
|
+
article, aside, dialog, figure, footer, header,
|
34
|
+
hgroup, nav, section {
|
35
|
+
display:block;
|
36
|
+
}
|
37
|
+
|
38
|
+
/* Line-height should always be unitless! */
|
39
|
+
body {
|
40
|
+
line-height: 1.5;
|
41
|
+
background: white;
|
42
|
+
}
|
43
|
+
|
44
|
+
/* Tables still need 'cellspacing="0"' in the markup. */
|
45
|
+
table {
|
46
|
+
border-collapse: separate;
|
47
|
+
border-spacing: 0;
|
48
|
+
}
|
49
|
+
/* float:none prevents the span-x classes from breaking table-cell display */
|
50
|
+
caption, th, td {
|
51
|
+
text-align: left;
|
52
|
+
font-weight: normal;
|
53
|
+
float:none !important;
|
54
|
+
}
|
55
|
+
table, th, td {
|
56
|
+
vertical-align: middle;
|
57
|
+
}
|
58
|
+
|
59
|
+
/* Remove possible quote marks (") from <q>, <blockquote>. */
|
60
|
+
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
|
61
|
+
blockquote, q { quotes: "" ""; }
|
62
|
+
|
63
|
+
/* Remove annoying border on linked images. */
|
64
|
+
a img { border: none; }
|
65
|
+
|
66
|
+
/* Remember to define your own focus styles! */
|
67
|
+
:focus { outline: 0; }
|
data/lib/css3buttons.rb
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
require 'action_controller'
|
2
|
+
require 'action_view'
|
3
|
+
|
4
|
+
module Css3buttons
|
5
|
+
module Helpers
|
6
|
+
autoload :ButtonHelper, 'css3buttons/helpers/button_helper'
|
7
|
+
end
|
8
|
+
autoload :ButtonGroup, 'css3buttons/button_group'
|
9
|
+
ActionController::Base.helper(Css3buttons::Helpers::ButtonHelper)
|
10
|
+
end
|
Binary file
|
@@ -0,0 +1,24 @@
|
|
1
|
+
module Css3buttons
|
2
|
+
class ButtonGroup
|
3
|
+
include ActionView::Helpers::TagHelper
|
4
|
+
attr_reader :template, :button_count, :options
|
5
|
+
|
6
|
+
def initialize(template, options)
|
7
|
+
@button_count = 0
|
8
|
+
@template = template
|
9
|
+
@options = options
|
10
|
+
@options[:wrapper_tag] ||= :div
|
11
|
+
end
|
12
|
+
|
13
|
+
def render(&block)
|
14
|
+
html_options = @options.clone
|
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(@options[:wrapper_tag], @template.capture(&block), html_options) if block_given?
|
21
|
+
end
|
22
|
+
end
|
23
|
+
end
|
24
|
+
|
@@ -0,0 +1,93 @@
|
|
1
|
+
module Css3buttons
|
2
|
+
module Helpers
|
3
|
+
module ButtonHelper
|
4
|
+
include ActionView::Helpers::UrlHelper
|
5
|
+
include ActionView::Helpers::FormTagHelper
|
6
|
+
def method_missing(method, *args)
|
7
|
+
if is_link_method?(method) || is_submit_method?(method) || is_button_method?(method)
|
8
|
+
qualifiers = ["primary", "big", "positive", "negative", "pill", "danger", "safe", "button"]
|
9
|
+
color_map = {"positive" => "safe", "negative" => "danger"}
|
10
|
+
|
11
|
+
method_qualifiers = strip_method_name(method).split("_") + ["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
|
+
elsif is_button_method?(method)
|
35
|
+
content_tag :button, label, { "type" => "submit", "name" => "commit", "value" => "commit" }.merge(options.stringify_keys)
|
36
|
+
else
|
37
|
+
submit_tag(label, options)
|
38
|
+
end
|
39
|
+
end
|
40
|
+
else
|
41
|
+
super
|
42
|
+
end
|
43
|
+
end
|
44
|
+
|
45
|
+
def css3buttons_stylesheets(options = {})
|
46
|
+
options[:include_reset] = true unless options.has_key?(:include_reset)
|
47
|
+
if options[:include_reset] == true
|
48
|
+
stylesheet_link_tag "css3buttons/reset", "css3buttons/css3-github-buttons"
|
49
|
+
else
|
50
|
+
stylesheet_link_tag "css3buttons/css3-github-buttons"
|
51
|
+
end
|
52
|
+
end
|
53
|
+
|
54
|
+
def button_group(*args, &block)
|
55
|
+
options = args.extract_options!
|
56
|
+
group = Css3buttons::ButtonGroup.new(self, options)
|
57
|
+
group.render(&block) if block_given?
|
58
|
+
end
|
59
|
+
|
60
|
+
def minor_button_group(*args, &block)
|
61
|
+
options = args.extract_options!
|
62
|
+
options[:minor] = true
|
63
|
+
group = Css3buttons::ButtonGroup.new(self, options)
|
64
|
+
group.render(&block) if block_given?
|
65
|
+
end
|
66
|
+
|
67
|
+
protected
|
68
|
+
def add_classes_to_html_options(classes, html_options = {})
|
69
|
+
classes = classes.delete_if{|c| c.blank?}
|
70
|
+
html_options ||= {}
|
71
|
+
html_options[:class] ||= ""
|
72
|
+
html_options[:class] = (html_options[:class].split(" ") + classes).join(" ")
|
73
|
+
html_options
|
74
|
+
end
|
75
|
+
|
76
|
+
def is_link_method?(method)
|
77
|
+
method.to_s.index("button_link_to")
|
78
|
+
end
|
79
|
+
|
80
|
+
def is_button_method?(method)
|
81
|
+
method.to_s.index("button_tag")
|
82
|
+
end
|
83
|
+
|
84
|
+
def is_submit_method?(method)
|
85
|
+
method.to_s.index("button_submit_tag")
|
86
|
+
end
|
87
|
+
|
88
|
+
def strip_method_name(method)
|
89
|
+
method.to_s.gsub("button_link_to", "").gsub("button_tag", "").gsub("button_submit_tag", "")
|
90
|
+
end
|
91
|
+
end
|
92
|
+
end
|
93
|
+
end
|
data/readme.md
ADDED
@@ -0,0 +1,144 @@
|
|
1
|
+
# css3buttons-rails gem
|
2
|
+
|
3
|
+
Integrate Nicholas Bruning's css3buttons_rails_helpers into Rails3.1+ via the asset pipeline.
|
4
|
+
|
5
|
+
The css3buttons-rails gem is a small set of helper methods designed to work in
|
6
|
+
conjunction with the __amazing__ [css3 github buttons by Nicolas Gallagher](http://nicolasgallagher.com/lab/css3-github-buttons/).
|
7
|
+
|
8
|
+
The helpers allow rails developers to quickly and easily leverage this
|
9
|
+
fantastic CSS library - without cluttering up your views and calls to
|
10
|
+
`link_to`, `button_to` and `submit_tag`.
|
11
|
+
|
12
|
+
# What's new in version this version?
|
13
|
+
|
14
|
+
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, in order to take advantage of a few of the features not included in the original library.
|
15
|
+
|
16
|
+
Additionally, there was some serious re-tooling of the helper methods to make them more usable, more dynamic and less prone to error.
|
17
|
+
|
18
|
+
__Please note__: as part of changes, calls to `link_button_to` will need
|
19
|
+
to be updated to `button_link_to`. Everything else should work expected.
|
20
|
+
|
21
|
+
|
22
|
+
# Getting started
|
23
|
+
|
24
|
+
Include the gem in your gemfile and rum *bundle*
|
25
|
+
|
26
|
+
gem 'css3buttons-rails'
|
27
|
+
|
28
|
+
Require the assets (stylesheets) in your *app/asstes/stylesheets/application.css*
|
29
|
+
|
30
|
+
*= require css3buttons
|
31
|
+
*= require_self
|
32
|
+
...
|
33
|
+
|
34
|
+
You should require the css3buttons stylesheet before any other styles because it loads a css reset script. If you don't want to load the reset script, just require this instead
|
35
|
+
|
36
|
+
*= require css3buttons/without-reset
|
37
|
+
*= require_self
|
38
|
+
...
|
39
|
+
|
40
|
+
|
41
|
+
# The basics
|
42
|
+
|
43
|
+
To change your `link_to` calls to buttons, simply use `button_link_to`.
|
44
|
+
For example:
|
45
|
+
|
46
|
+
<%= button_link_to "Search", search_path %>
|
47
|
+
|
48
|
+
The helper methods accept all the same parameters as `link_to` so
|
49
|
+
upgrading and downgrading to css3buttons should be a snap.
|
50
|
+
|
51
|
+
|
52
|
+
# Icons and pills and colours, oh my!
|
53
|
+
|
54
|
+
The gem also responds to a huge list of dynamic helper methods, to assist in adding
|
55
|
+
icons, colours and styles to your buttons. Unlike previous versions of
|
56
|
+
the gem, you can now add any of the features in any order.
|
57
|
+
|
58
|
+
|
59
|
+
## Icons
|
60
|
+
|
61
|
+
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:
|
62
|
+
|
63
|
+
<%= magnifier_button_link_to "Search", search_path %>
|
64
|
+
<%= user_button_link_to "Account", edit_current_user_path %>
|
65
|
+
<%= pin_button_link_to "Mark on map", edit_map_path %>
|
66
|
+
|
67
|
+
|
68
|
+
## Styles
|
69
|
+
|
70
|
+
Just like the icons, you can add options for `primary`, `big` and
|
71
|
+
`pill`.
|
72
|
+
|
73
|
+
<%= primary_button_link_to "Home", root_path %>
|
74
|
+
<%= pill_button_link_to "Archive", archive_path %>
|
75
|
+
<%= big_primary_pill_button_link_to "Super Important!", super_important_path %>
|
76
|
+
|
77
|
+
|
78
|
+
## Colors
|
79
|
+
|
80
|
+
Again with colors - simply add `positive` or `negative` to the front of your method call:
|
81
|
+
|
82
|
+
<%= negative_trash_button_link_to "Delete", delete_path %>
|
83
|
+
<%= positive_pill_reload_button_link_to "Reload", reload_path %>
|
84
|
+
|
85
|
+
In order to be compatible with the new css3 github buttons library, you can also use `danger` and `safe` - as alternatives.
|
86
|
+
|
87
|
+
|
88
|
+
## Button groups
|
89
|
+
|
90
|
+
Button groups are snap, you just need to wrap your buttons with `button_group`, like so:
|
91
|
+
|
92
|
+
<%= button_group do %>
|
93
|
+
<%= button_link_to "Show", @post %>
|
94
|
+
<%= button_link_to "Edit", edit_post_path(@post) %>
|
95
|
+
<%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %>
|
96
|
+
<% end %>
|
97
|
+
|
98
|
+
And, of course, minor groups:
|
99
|
+
|
100
|
+
<%= minor_button_group do %>
|
101
|
+
You know the drill by now.
|
102
|
+
<% end %>
|
103
|
+
|
104
|
+
|
105
|
+
## Submit tags, button tags and using icons on form buttons
|
106
|
+
|
107
|
+
Submit tags were ushered in with version 0.9.2. Everything works as it does above, except instead of `button_link_to` it's `button_submit_tag`. Example:
|
108
|
+
|
109
|
+
<%= positive_button_submit_tag "Publish" %>
|
110
|
+
|
111
|
+
Keep in mind however, that icons do not work on `<submit>` tags. If you're wanting to include icons in your forms there is also a helper method to insert `<button>` tags instead. The method suffix in this case is `button_tag`. Examples:
|
112
|
+
|
113
|
+
<%= approve_button_tag "Update profile" %>
|
114
|
+
<%= negative_trash_button_tag "Deactivate account" %>
|
115
|
+
|
116
|
+
|
117
|
+
# Formtastic compatibility
|
118
|
+
|
119
|
+
If you're using
|
120
|
+
[formtastic](https://github.com/justinfrench/formtastic), you may
|
121
|
+
experience issues with using css3buttons in your forms, due to the
|
122
|
+
way the built-in formtastic styles modify default form buttons. In this
|
123
|
+
instance, you can insert the following into your
|
124
|
+
`formtastic_changes.css` stylesheet.
|
125
|
+
|
126
|
+
form.formtastic input.button, form.formtastic.button.button {
|
127
|
+
height: 25px;
|
128
|
+
padding: 0.2em 1em 0.2em 2.5em;
|
129
|
+
font-family: sans-serif;
|
130
|
+
font-size: 11px;
|
131
|
+
margin-left: 5px;
|
132
|
+
}
|
133
|
+
|
134
|
+
CSS Snippet courtesy of [vitobotta](https://github.com/vitobotta).
|
135
|
+
|
136
|
+
|
137
|
+
|
138
|
+
# What's missing?
|
139
|
+
|
140
|
+
The `button_group` helper needs some proper tests, if anyone can point me as to how to stub out a rails request template in RSpec (or the right way to approach this test at all), that would be much appreciated!
|
141
|
+
|
142
|
+
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.
|
143
|
+
|
144
|
+
Forks and pull requests are always welcome.
|
@@ -0,0 +1,27 @@
|
|
1
|
+
require 'spec_helper'
|
2
|
+
|
3
|
+
include ActionView::Helpers::UrlHelper
|
4
|
+
include Css3buttons::Helpers::ButtonHelper
|
5
|
+
|
6
|
+
describe Css3buttons::ButtonGroup do
|
7
|
+
before :each do
|
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
|
14
|
+
end
|
15
|
+
|
16
|
+
it "should add a class of first to the first link" do
|
17
|
+
pending
|
18
|
+
#render
|
19
|
+
#puts rendered
|
20
|
+
end
|
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
|
@@ -0,0 +1,264 @@
|
|
1
|
+
require 'spec_helper'
|
2
|
+
include ActionView::Helpers::UrlHelper
|
3
|
+
include Css3buttons::Helpers::ButtonHelper
|
4
|
+
|
5
|
+
describe Css3buttons::Helpers::ButtonHelper do
|
6
|
+
before :each do
|
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', 'danger', 'safe']
|
9
|
+
@label = "Search this site"
|
10
|
+
@path = "/search/site"
|
11
|
+
end
|
12
|
+
|
13
|
+
#--- basic buttons
|
14
|
+
|
15
|
+
it "should create basic buttons" do
|
16
|
+
link = html(button_link_to(@label, @path))
|
17
|
+
|
18
|
+
link.should have_selector("a.button[href='#{@path}']")
|
19
|
+
@qualifiers.each do |qualifier|
|
20
|
+
link.should_not have_selector("a.#{qualifier}")
|
21
|
+
end
|
22
|
+
end
|
23
|
+
it "should create basic submit buttons" do
|
24
|
+
button = html(button_submit_tag(@label))
|
25
|
+
|
26
|
+
button.should have_selector("input.button[type='submit']")
|
27
|
+
@qualifiers.each do |qualifier|
|
28
|
+
button.should_not have_selector("input.#{qualifier}")
|
29
|
+
end
|
30
|
+
end
|
31
|
+
it "should create basic button tags" do
|
32
|
+
button = html(button_tag(@label))
|
33
|
+
button.should have_selector("button.button")
|
34
|
+
@qualifiers.each do |qualifier|
|
35
|
+
button.should_not have_selector("button.#{qualifier}")
|
36
|
+
end
|
37
|
+
end
|
38
|
+
|
39
|
+
#--- basic buttons with icons
|
40
|
+
|
41
|
+
it "should create basic buttons with valid icons" do
|
42
|
+
@icons.each do |icon|
|
43
|
+
link = html(send(:"#{icon}_button_link_to", @label, @path))
|
44
|
+
link.should have_selector("a.button.icon.#{icon}[href='#{@path}']")
|
45
|
+
end
|
46
|
+
end
|
47
|
+
it "should create basic button tags with valid icons" do
|
48
|
+
@icons.each do |icon|
|
49
|
+
button = html(send(:"#{icon}_button_tag", @label))
|
50
|
+
button.should have_selector("button.button.icon.#{icon}[type='submit']")
|
51
|
+
end
|
52
|
+
end
|
53
|
+
|
54
|
+
#--- positive buttons
|
55
|
+
|
56
|
+
it "should create positive buttons" do
|
57
|
+
link = html(positive_button_link_to(@label, @path))
|
58
|
+
link.should have_selector("a.button.safe[href='#{@path}']")
|
59
|
+
@qualifiers.each do |qualifier|
|
60
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "safe"
|
61
|
+
end
|
62
|
+
end
|
63
|
+
it "should create positive submit buttons" do
|
64
|
+
button = html(positive_button_submit_tag(@label))
|
65
|
+
button.should have_selector("input.button.safe[type='submit']")
|
66
|
+
@qualifiers.each do |qualifier|
|
67
|
+
button.should_not have_selector("input.#{qualifier}") unless qualifier == "safe"
|
68
|
+
end
|
69
|
+
end
|
70
|
+
it "should create positive button tags" do
|
71
|
+
button = html(positive_button_tag(@label))
|
72
|
+
button.should have_selector("button.button.safe[type='submit']")
|
73
|
+
@qualifiers.each do |qualifier|
|
74
|
+
button.should_not have_selector("button.#{qualifier}") unless qualifier == "safe"
|
75
|
+
end
|
76
|
+
end
|
77
|
+
|
78
|
+
#--- negative buttons
|
79
|
+
|
80
|
+
it "should create negative buttons" do
|
81
|
+
link = html(negative_button_link_to(@label, @path))
|
82
|
+
link.should have_selector("a.button.danger[href='#{@path}']")
|
83
|
+
@qualifiers.each do |qualifier|
|
84
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "danger"
|
85
|
+
end
|
86
|
+
end
|
87
|
+
it "should create negative submit buttons" do
|
88
|
+
button = html(negative_button_submit_tag(@label))
|
89
|
+
button.should have_selector("input.button.danger[type='submit']")
|
90
|
+
@qualifiers.each do |qualifier|
|
91
|
+
button.should_not have_selector("input.#{qualifier}") unless qualifier == "danger"
|
92
|
+
end
|
93
|
+
end
|
94
|
+
it "should create negative button tags" do
|
95
|
+
button = html(negative_button_tag(@label))
|
96
|
+
button.should have_selector("button.button.danger[type='submit']")
|
97
|
+
@qualifiers.each do |qualifier|
|
98
|
+
button.should_not have_selector("button.#{qualifier}") unless qualifier == "danger"
|
99
|
+
end
|
100
|
+
end
|
101
|
+
|
102
|
+
#--- positive buttons with icons
|
103
|
+
|
104
|
+
it "should create positive buttons with valid icons" do
|
105
|
+
@icons.each do |icon|
|
106
|
+
link = html(send(:"positive_#{icon}_button_link_to", @label, @path))
|
107
|
+
link.should have_selector("a.button.safe.icon.#{icon}[href='#{@path}']")
|
108
|
+
@qualifiers.each do |qualifier|
|
109
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "safe"
|
110
|
+
end
|
111
|
+
end
|
112
|
+
end
|
113
|
+
it "should create positive button tags with valid icons" do
|
114
|
+
@icons.each do |icon|
|
115
|
+
button = html(send(:"positive_#{icon}_button_tag", @label))
|
116
|
+
button.should have_selector("button.button.safe.icon.#{icon}[type='submit']")
|
117
|
+
@qualifiers.each do |qualifier|
|
118
|
+
button.should_not have_selector("button.#{qualifier}") unless qualifier == "safe"
|
119
|
+
end
|
120
|
+
end
|
121
|
+
end
|
122
|
+
|
123
|
+
#--- negative buttons with icons
|
124
|
+
|
125
|
+
it "should create negative buttons with valid icons" do
|
126
|
+
@icons.each do |icon|
|
127
|
+
link = html(send(:"negative_#{icon}_button_link_to", @label, @path))
|
128
|
+
link.should have_selector("a.button.danger.icon.#{icon}[href='#{@path}']")
|
129
|
+
@qualifiers.each do |qualifier|
|
130
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "danger"
|
131
|
+
end
|
132
|
+
end
|
133
|
+
end
|
134
|
+
it "should create negative button tags with valid icons" do
|
135
|
+
@icons.each do |icon|
|
136
|
+
button = html(send(:"negative_#{icon}_button_tag"))
|
137
|
+
button.should have_selector("button.button.danger.icon.#{icon}[type='submit']")
|
138
|
+
@qualifiers.each do |qualifier|
|
139
|
+
button.should_not have_selector("button.#{qualifier}") unless qualifier == "danger"
|
140
|
+
end
|
141
|
+
end
|
142
|
+
end
|
143
|
+
|
144
|
+
#--- pill buttons
|
145
|
+
|
146
|
+
it "should create pill buttons" do
|
147
|
+
link = html(pill_button_link_to(@label, @path))
|
148
|
+
link.should have_selector("a.button.pill[href='#{@path}']")
|
149
|
+
@qualifiers.each do |qualifier|
|
150
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "pill"
|
151
|
+
end
|
152
|
+
end
|
153
|
+
it "should create pill submit buttons" do
|
154
|
+
button = html(pill_button_submit_tag(@label))
|
155
|
+
button.should have_selector("input.button.pill[type='submit']")
|
156
|
+
@qualifiers.each do |qualifier|
|
157
|
+
button.should_not have_selector("input.#{qualifier}") unless qualifier == "pill"
|
158
|
+
end
|
159
|
+
end
|
160
|
+
it "should create pill button tags" do
|
161
|
+
button = html(pill_button_tag(@label))
|
162
|
+
button.should have_selector("button.button.pill[type='submit']")
|
163
|
+
@qualifiers.each do |qualifier|
|
164
|
+
button.should_not have_selector("button.#{qualifier}") unless qualifier == "pill"
|
165
|
+
end
|
166
|
+
end
|
167
|
+
|
168
|
+
#--- pill buttons with icons
|
169
|
+
|
170
|
+
it "should create pill buttons with valid icons" do
|
171
|
+
@icons.each do |icon|
|
172
|
+
link = html(send(:"pill_#{icon}_button_link_to", @label, @path))
|
173
|
+
link.should have_selector("a.button.pill.icon.#{icon}[href='#{@path}']")
|
174
|
+
@qualifiers.each do |qualifier|
|
175
|
+
link.should_not have_selector("a.#{qualifier}") unless qualifier == "pill"
|
176
|
+
end
|
177
|
+
end
|
178
|
+
end
|
179
|
+
it "should create pill button tags with valid icons" do
|
180
|
+
@icons.each do |icon|
|
181
|
+
button = html(send(:"pill_#{icon}_button_tag", @label))
|
182
|
+
button.should have_selector("button.button.pill.icon.#{icon}[type='submit']")
|
183
|
+
@qualifiers.each do |qualifier|
|
184
|
+
button.should_not have_selector("button.#{qualifier}") unless qualifier == "pill"
|
185
|
+
end
|
186
|
+
end
|
187
|
+
end
|
188
|
+
|
189
|
+
#--- positive pill buttons
|
190
|
+
|
191
|
+
it "should create positive pill buttons" do
|
192
|
+
link = html(positive_pill_button_link_to(@label, @path))
|
193
|
+
link.should have_selector("a.button.pill.safe[href='#{@path}']")
|
194
|
+
link.should_not have_selector("a.danger")
|
195
|
+
end
|
196
|
+
it "should create positive pill submit buttons" do
|
197
|
+
button = html(positive_pill_button_submit_tag(@label))
|
198
|
+
button.should have_selector("input.button.pill.safe[type='submit']")
|
199
|
+
button.should_not have_selector("input.danger")
|
200
|
+
end
|
201
|
+
it "should create positive pill button tags" do
|
202
|
+
button = html(positive_pill_button_tag(@label))
|
203
|
+
button.should have_selector("button.button.pill.safe[type='submit']")
|
204
|
+
button.should_not have_selector("button.danger")
|
205
|
+
end
|
206
|
+
|
207
|
+
#--- negative pill buttons
|
208
|
+
|
209
|
+
it "should create negative pill buttons" do
|
210
|
+
link = html(negative_pill_button_link_to(@label, @path))
|
211
|
+
link.should have_selector("a.button.pill.danger[href='#{@path}']")
|
212
|
+
link.should_not have_selector("a.safe")
|
213
|
+
end
|
214
|
+
it "should create negative pill submit buttons" do
|
215
|
+
button = html(negative_pill_button_submit_tag(@label))
|
216
|
+
button.should have_selector("input.button.pill.danger[type='submit']")
|
217
|
+
button.should_not have_selector("input.safe")
|
218
|
+
end
|
219
|
+
it "should create negative pill button tags" do
|
220
|
+
button = html(negative_pill_button_tag(@label))
|
221
|
+
button.should have_selector("button.button.pill.danger[type='submit']")
|
222
|
+
button.should_not have_selector("button.safe")
|
223
|
+
end
|
224
|
+
|
225
|
+
#--- positive pill buttons with icons
|
226
|
+
|
227
|
+
it "should create positive pill buttons with valid icons" do
|
228
|
+
@icons.each do |icon|
|
229
|
+
link = html(send(:"positive_pill_#{icon}_button_link_to", @label, @path))
|
230
|
+
link.should have_selector("a.button.safe.pill.icon.#{icon}[href='#{@path}']")
|
231
|
+
link.should_not have_selector("a.danger")
|
232
|
+
end
|
233
|
+
end
|
234
|
+
it "should create positive pill button tags with valid icons" do
|
235
|
+
@icons.each do |icon|
|
236
|
+
button = html(send(:"positive_pill_#{icon}_button_tag", @label))
|
237
|
+
button.should have_selector("button.button.safe.pill.icon.#{icon}[type='submit']")
|
238
|
+
button.should_not have_selector("button.danger")
|
239
|
+
end
|
240
|
+
end
|
241
|
+
|
242
|
+
#--- negative pill buttons with icons
|
243
|
+
|
244
|
+
it "should create negative pill buttons with valid icons" do
|
245
|
+
@icons.each do |icon|
|
246
|
+
link = html(send(:"negative_pill_#{icon}_button_link_to", @label, @path))
|
247
|
+
link.should have_selector("a.button.danger.pill.icon.#{icon}[href='#{@path}']")
|
248
|
+
link.should_not have_selector("a.safe")
|
249
|
+
end
|
250
|
+
end
|
251
|
+
it "should create negative pill button tags with valid icons" do
|
252
|
+
@icons.each do |icon|
|
253
|
+
button = html(send(:"negative_pill_#{icon}_button_tag", @label))
|
254
|
+
button.should have_selector("button.button.danger.pill.icon.#{icon}[type='submit']")
|
255
|
+
button.should_not have_selector("button.safe")
|
256
|
+
end
|
257
|
+
end
|
258
|
+
|
259
|
+
#--- end
|
260
|
+
|
261
|
+
def html(text)
|
262
|
+
Capybara::string(text)
|
263
|
+
end
|
264
|
+
end
|
data/spec/spec_helper.rb
ADDED
metadata
ADDED
@@ -0,0 +1,93 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: css3buttons-rails
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
prerelease:
|
5
|
+
version: 1.0.0
|
6
|
+
platform: ruby
|
7
|
+
authors:
|
8
|
+
- Nicholas Bruning
|
9
|
+
- "Florian G\xC3\xBCnther"
|
10
|
+
autorequire:
|
11
|
+
bindir: bin
|
12
|
+
cert_chain: []
|
13
|
+
|
14
|
+
date: 2011-05-20 00:00:00 +02:00
|
15
|
+
default_executable:
|
16
|
+
dependencies:
|
17
|
+
- !ruby/object:Gem::Dependency
|
18
|
+
name: actionpack
|
19
|
+
prerelease: false
|
20
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
21
|
+
none: false
|
22
|
+
requirements:
|
23
|
+
- - ">="
|
24
|
+
- !ruby/object:Gem::Version
|
25
|
+
version: 3.0.0
|
26
|
+
type: :runtime
|
27
|
+
version_requirements: *id001
|
28
|
+
description: Rails3.1+ helper methods for the css3buttons by Michael Henriksen.
|
29
|
+
email:
|
30
|
+
- nicholas@bruning.com.au
|
31
|
+
- mail@gee-f.de
|
32
|
+
executables: []
|
33
|
+
|
34
|
+
extensions: []
|
35
|
+
|
36
|
+
extra_rdoc_files: []
|
37
|
+
|
38
|
+
files:
|
39
|
+
- .autotest
|
40
|
+
- .gitignore
|
41
|
+
- .rspec
|
42
|
+
- Gemfile
|
43
|
+
- Gemfile.lock
|
44
|
+
- LICENSE
|
45
|
+
- Rakefile
|
46
|
+
- css3buttons-rails.gemspec
|
47
|
+
- lib/assets/images/css3buttons/css3-github-buttons-icons.png
|
48
|
+
- lib/assets/stylesheets/css3buttons/css3-github-buttons.css
|
49
|
+
- lib/assets/stylesheets/css3buttons/index.css
|
50
|
+
- lib/assets/stylesheets/css3buttons/reset.css
|
51
|
+
- lib/assets/stylesheets/css3buttons/without-reset.css
|
52
|
+
- lib/css3buttons-rails.rb
|
53
|
+
- lib/css3buttons.rb
|
54
|
+
- lib/css3buttons/.DS_Store
|
55
|
+
- lib/css3buttons/button_group.rb
|
56
|
+
- lib/css3buttons/helpers/button_helper.rb
|
57
|
+
- lib/css3buttons/version.rb
|
58
|
+
- readme.md
|
59
|
+
- spec/button_group_spec.rb
|
60
|
+
- spec/button_helper_spec.rb
|
61
|
+
- spec/spec_helper.rb
|
62
|
+
has_rdoc: true
|
63
|
+
homepage: https://github.com/florianguenther/css3buttons-rails
|
64
|
+
licenses: []
|
65
|
+
|
66
|
+
post_install_message:
|
67
|
+
rdoc_options: []
|
68
|
+
|
69
|
+
require_paths:
|
70
|
+
- lib
|
71
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
72
|
+
none: false
|
73
|
+
requirements:
|
74
|
+
- - ">="
|
75
|
+
- !ruby/object:Gem::Version
|
76
|
+
version: "0"
|
77
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
78
|
+
none: false
|
79
|
+
requirements:
|
80
|
+
- - ">="
|
81
|
+
- !ruby/object:Gem::Version
|
82
|
+
version: "0"
|
83
|
+
requirements: []
|
84
|
+
|
85
|
+
rubyforge_project:
|
86
|
+
rubygems_version: 1.6.2
|
87
|
+
signing_key:
|
88
|
+
specification_version: 3
|
89
|
+
summary: Easy, beautiful buttons, the CSS3 way.
|
90
|
+
test_files:
|
91
|
+
- spec/button_group_spec.rb
|
92
|
+
- spec/button_helper_spec.rb
|
93
|
+
- spec/spec_helper.rb
|