css3buttons-rails 1.0.0
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/.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
|