├── .autotest ├── .gitignore ├── .rspec ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── Rakefile ├── css3buttons.gemspec ├── lib ├── assets │ ├── images │ │ └── css3buttons │ │ │ └── icons.png │ └── stylesheets │ │ └── css3buttons │ │ ├── index.css │ │ ├── reset.css │ │ ├── styles.css.scss │ │ └── without-reset.css ├── css3buttons.rb └── css3buttons │ ├── button_group.rb │ ├── engine.rb │ ├── helpers │ └── button_helper.rb │ └── version.rb ├── readme.md └── spec ├── button_group_spec.rb ├── button_helper_spec.rb └── spec_helper.rb /.autotest: -------------------------------------------------------------------------------- 1 | require 'autotest/growl' 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | pkg/* 2 | *.gem 3 | .bundle 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /.rspec: -------------------------------------------------------------------------------- 1 | --color 2 | --format documentation 3 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 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 17 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 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 (1.0.0) 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 93 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 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. 20 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require 'bundler' 2 | Bundler::GemHelper.install_tasks 3 | -------------------------------------------------------------------------------- /css3buttons.gemspec: -------------------------------------------------------------------------------- 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" 7 | s.version = Css3buttons::VERSION 8 | s.platform = Gem::Platform::RUBY 9 | s.authors = ["Nicholas Bruning"] 10 | s.email = ["nicholas@bruning.com.au"] 11 | s.homepage = "https://github.com/thetron/css3buttons_rails_helpers" 12 | s.summary = %q{Easy, beautiful buttons, the CSS3 way.} 13 | s.description = %q{Rails helper methods and generators 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 24 | -------------------------------------------------------------------------------- /lib/assets/images/css3buttons/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thetron/css3buttons_rails_helpers/78f8c8cb4ac92f462fc145a000220e6bb0d0878a/lib/assets/images/css3buttons/icons.png -------------------------------------------------------------------------------- /lib/assets/stylesheets/css3buttons/index.css: -------------------------------------------------------------------------------- 1 | /* 2 | *= require ./reset 3 | *= require ./styles.css 4 | *= provide ./../../images 5 | */ 6 | -------------------------------------------------------------------------------- /lib/assets/stylesheets/css3buttons/reset.css: -------------------------------------------------------------------------------- 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 ,
. */ 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; } -------------------------------------------------------------------------------- /lib/assets/stylesheets/css3buttons/styles.css.scss: -------------------------------------------------------------------------------- 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 | .button.active { 45 | border-color: #3072b3; 46 | border-bottom-color: #2a65a0; 47 | text-decoration: none; 48 | text-shadow: -1px -1px 0 rgba(0,0,0,0.3); 49 | color: #fff; 50 | background-color: #3C8DDE; 51 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3)); 52 | background-image: -moz-linear-gradient(#599bdc, #3072b3); 53 | background-image: -o-linear-gradient(#599bdc, #3072b3); 54 | background-image: linear-gradient(#599bdc, #3072b3); 55 | } 56 | 57 | .button:active, 58 | .button.active { 59 | border-color: #2a65a0; 60 | border-bottom-color: #3884CF; 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: image-url("css3buttons/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 | /* ............................................................................................................. Disable */ 290 | 291 | .button.disable { 292 | opacity: 0.5; 293 | } 294 | 295 | /* ............................................................................................................. Big */ 296 | 297 | .button.big { 298 | font-size: 14px; 299 | } 300 | 301 | .button.big.icon:before { top: 0; } 302 | 303 | 304 | /* ------------------------------------------------------------------------------------------------------------- BUTTON GROUPS */ 305 | 306 | /* ............................................................................................................. Standard */ 307 | 308 | .button-group { 309 | display: inline-block; 310 | list-style: none; 311 | padding: 0; 312 | margin: 0; 313 | /* IE hacks */ 314 | zoom: 1; 315 | *display: inline; 316 | } 317 | 318 | .button + .button, 319 | .button + .button-group, 320 | .button-group + .button, 321 | .button-group + .button-group { 322 | margin-left: 15px; 323 | } 324 | 325 | .button-group li { 326 | float: left; 327 | padding: 0; 328 | margin: 0; 329 | } 330 | 331 | .button-group .button { 332 | float: left; 333 | margin-left: -1px; 334 | } 335 | 336 | .button-group > .button:not(:first-child):not(:last-child), 337 | .button-group li:not(:first-child):not(:last-child) .button { 338 | -webkit-border-radius: 0; 339 | -moz-border-radius: 0; 340 | border-radius: 0; 341 | } 342 | 343 | .button-group > .button:first-child, 344 | .button-group li:first-child .button { 345 | margin-left: 0; 346 | -webkit-border-top-right-radius: 0; 347 | -webkit-border-bottom-right-radius: 0; 348 | -moz-border-radius-topright: 0; 349 | -moz-border-radius-bottomright: 0; 350 | border-top-right-radius: 0; 351 | border-bottom-right-radius: 0; 352 | } 353 | 354 | .button-group > .button:last-child, 355 | .button-group li:last-child > .button { 356 | -webkit-border-top-left-radius: 0; 357 | -webkit-border-bottom-left-radius: 0; 358 | -moz-border-radius-topleft: 0; 359 | -moz-border-radius-bottomleft: 0; 360 | border-top-left-radius: 0; 361 | border-bottom-left-radius: 0; 362 | } 363 | 364 | /* ............................................................................................................. Minor */ 365 | 366 | .button-group.minor-group .button { 367 | border: 1px solid #d4d4d4; 368 | text-shadow: none; 369 | background-image: none; 370 | background-color: #fff; 371 | } 372 | 373 | .button-group.minor-group .button:hover, 374 | .button-group.minor-group .button:focus { 375 | background-color: #599bdc; 376 | } 377 | 378 | .button-group.minor-group .button:active, 379 | .button-group.minor-group .button.active { 380 | background-color: #3072b3; 381 | } 382 | 383 | .button-group.minor-group .button.icon:before { 384 | opacity: 0.8; 385 | } 386 | 387 | /* ------------------------------------------------------------------------------------------------------------- BUTTON CONTAINER */ 388 | /* For mixing buttons and button groups, e.g., in a navigation bar */ 389 | 390 | .button-container .button, 391 | .button-container .button-group { 392 | vertical-align: top; 393 | } -------------------------------------------------------------------------------- /lib/assets/stylesheets/css3buttons/without-reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | *= require ./styles.css 3 | *= provide ./../../images 4 | */ 5 | -------------------------------------------------------------------------------- /lib/css3buttons.rb: -------------------------------------------------------------------------------- 1 | require 'action_controller' 2 | require 'action_view' 3 | 4 | module Css3buttons 5 | require 'css3buttons/engine' 6 | module Helpers 7 | autoload :ButtonHelper, 'css3buttons/helpers/button_helper' 8 | end 9 | autoload :ButtonGroup, 'css3buttons/button_group' 10 | ActionController::Base.helper(Css3buttons::Helpers::ButtonHelper) 11 | end 12 | -------------------------------------------------------------------------------- /lib/css3buttons/button_group.rb: -------------------------------------------------------------------------------- 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 | 25 | -------------------------------------------------------------------------------- /lib/css3buttons/engine.rb: -------------------------------------------------------------------------------- 1 | module Css3buttons 2 | class Engine < ::Rails::Engine 3 | end 4 | end 5 | -------------------------------------------------------------------------------- /lib/css3buttons/helpers/button_helper.rb: -------------------------------------------------------------------------------- 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 94 | -------------------------------------------------------------------------------- /lib/css3buttons/version.rb: -------------------------------------------------------------------------------- 1 | module Css3buttons 2 | VERSION = "1.0.1" 3 | end 4 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # css3buttons 2 | 3 | The __css3buttons__ gem is a small set of helper methods designed to work in 4 | conjunction with the __amazing__ [css3 github buttons by Nicolas Gallagher](http://nicolasgallagher.com/lab/css3-github-buttons/). 5 | 6 | The helpers allow rails developers to quickly and easily leverage this 7 | fantastic CSS library - without cluttering up your views and calls to 8 | `link_to`, `button_to` and `submit_tag`. 9 | 10 | # Version 1.0 is finally here! 11 | 12 | And with it brings support for the Rails 3.1 asset pipeline. __Please note:__ as of version 1.0.0, Rails 3.0.x is no longer supported. If you're wanting to use the css3buttons on a Rails 3.0.x project, please install version 0.9.5 (see below for full instructions). 13 | 14 | # Getting started - Rails 3.1 15 | 16 | Include the gem in your gemfile and run `bundle install` 17 | 18 | gem 'css3buttons' 19 | 20 | Require the stylesheets in `app/assets/stylesheets/application.css`: 21 | 22 | *= require css3buttons 23 | *= require_self 24 | ... 25 | 26 | By default, css3buttons comes with a reset stylesheet built in. Because of this, you should load it before any other stylesheets. However, if you don't want to use reset, or already have your own, just require this instead: 27 | 28 | *= require css3buttons/without-reset 29 | *= require_self 30 | ... 31 | 32 | # Getting started - Rails 3.0.x 33 | 34 | Include the gem in your gemfile and run 'bundle install` 35 | 36 | gem 'css3buttons', '0.9.5' 37 | 38 | Run the generators: 39 | 40 | $ rails g css3buttons 41 | 42 | Which will copy the stylesheets and icon/button images into your public 43 | directory. 44 | 45 | In your layout, add the following: 46 | 47 | <%= css3buttons_stylesheets %> 48 | 49 | Which will add both the `reset.css` and the `css3buttons.css` stylesheet 50 | link tags. 51 | 52 | By default, css3buttons comes with a reset stylesheet built in. Because of this, you should load it before any other stylesheets. However, if you'd like to use your own reset, you can skip it with: 53 | 54 | <%= css3buttons_stylesheets :include_reset => false %> 55 | 56 | 57 | # The basics 58 | 59 | To change your `link_to` calls to buttons, simply use `button_link_to`. 60 | For example: 61 | 62 | <%= button_link_to "Search", search_path %> 63 | 64 | The helper methods accept all the same parameters as `link_to` so 65 | upgrading and downgrading to css3buttons should be a snap. 66 | 67 | 68 | # Icons and pills and colours, oh my! 69 | 70 | The gem also responds to a huge list of dynamic helper methods, to assist in adding 71 | icons, colours and styles to your buttons. Unlike previous versions of 72 | the gem, you can now add any of the features in any order. 73 | 74 | 75 | ## Icons 76 | 77 | 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: 78 | 79 | <%= magnifier_button_link_to "Search", search_path %> 80 | <%= user_button_link_to "Account", edit_current_user_path %> 81 | <%= pin_button_link_to "Mark on map", edit_map_path %> 82 | 83 | 84 | ## Styles 85 | 86 | Just like the icons, you can add options for `primary`, `big` and 87 | `pill`. 88 | 89 | <%= primary_button_link_to "Home", root_path %> 90 | <%= pill_button_link_to "Archive", archive_path %> 91 | <%= big_primary_pill_button_link_to "Super Important!", super_important_path %> 92 | 93 | 94 | ## Colors 95 | 96 | Again with colors - simply add `positive` or `negative` to the front of your method call: 97 | 98 | <%= negative_trash_button_link_to "Delete", delete_path %> 99 | <%= positive_pill_reload_button_link_to "Reload", reload_path %> 100 | 101 | In order to be compatible with the new css3 github buttons library, you can also use `danger` and `safe` - as alternatives. 102 | 103 | 104 | ## Button groups 105 | 106 | Button groups are snap, you just need to wrap your buttons with `button_group`, like so: 107 | 108 | <%= button_group do %> 109 | <%= button_link_to "Show", @post %> 110 | <%= button_link_to "Edit", edit_post_path(@post) %> 111 | <%= negative_trash_button_link_to "Delete", @post, :confirm => "Are you sure? %> 112 | <% end %> 113 | 114 | And, of course, minor groups: 115 | 116 | <%= minor_button_group do %> 117 | You know the drill by now. 118 | <% end %> 119 | 120 | 121 | ## Submit tags, button tags and using icons on form buttons 122 | 123 | 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: 124 | 125 | <%= positive_button_submit_tag "Publish" %> 126 | 127 | Keep in mind however, that icons do not work on `` tags. If you're wanting to include icons in your forms there is also a helper method to insert `