jhardy / sassy-buttons Goto Github PK

I trying to change the text color but it always get the default color (white)

Using version 0.2 of sassy-buttons with compass 0.12.2.

@import "compass/reset";
@import "sassybuttons";

.button{
    @include sassy-button($text-color:#333333);
}

outputs:

/* line 9, ../sass/screen.scss */
.button {
  font-size: 16px;
  padding: 0.3em 1.5em;
  color: white; // wrong color
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF0B99C2', endColorstr='#FF064D61');
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0b99c2), color-stop(100%, #087392));
  background: -webkit-linear-gradient(#0b99c2, #087392);
  background: -moz-linear-gradient(#0b99c2, #087392);
  background: -o-linear-gradient(#0b99c2, #087392);
  background: linear-gradient(#0b99c2, #087392);
  -webkit-box-shadow: #27c5f3 0 1px 0 inset;
  -moz-box-shadow: #27c5f3 0 1px 0 inset;
  box-shadow: #27c5f3 0 1px 0 inset;
  border: 1px solid #07607a;
  text-shadow: #0db5e5 0 1px 0;
}
/* line 15, ../../../../../Library/Ruby/Gems/1.8/gems/sassy-buttons-0.2/stylesheets/sassy-buttons/_sassy-button-pseudo-states.sass */
.button:hover {
  text-decoration: none;
}
/* line 36, ../../../../../Library/Ruby/Gems/1.8/gems/sassy-buttons-0.2/stylesheets/sassy-buttons/_sassy-button-pseudo-states.sass */
.button:hover {
  background-color: #07607a;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0a86aa), color-stop(100%, #07607a));
  background: -webkit-linear-gradient(#0a86aa, #07607a);
  background: -moz-linear-gradient(#0a86aa, #07607a);
  background: -o-linear-gradient(#0a86aa, #07607a);
  background: linear-gradient(#0a86aa, #07607a);
}
/* line 39, ../../../../../Library/Ruby/Gems/1.8/gems/sassy-buttons-0.2/stylesheets/sassy-buttons/_sassy-button-pseudo-states.sass */
.button:active {
  -webkit-box-shadow: #06546b 0 1px 2px inset;
  -moz-box-shadow: #06546b 0 1px 2px inset;
  box-shadow: #06546b 0 1px 2px inset;
}
/* line 6, ../../../../../Library/Ruby/Gems/1.8/gems/sassy-buttons-0.2/stylesheets/sassy-buttons/_sassy-button-pseudo-states.sass */
.button.disabled, .button[disabled] {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  opacity: 0.6;
  background: #087392;
  cursor: default;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
/* line 76, ../../../../../Library/Ruby/Gems/1.8/gems/sassy-buttons-0.2/stylesheets/_sassy-buttons.sass */
.button::-moz-focus-inner {
  padding: 0 !important;
  margin: -1px !important;
}

The documentation says you should add:
@import "sassy-buttons"
to your .scss file.

But if you have installed using compass, it appears this should actually be:
@import "sassybuttons"

I was on version 0.2 and was having issue with text color variable. I updated and it went to version 0.2.6 and for the project I was on it worked yay.

However, on another project the color is not working again, I ran gem list and see I have both versions installed? Could it default back to old version somehow? Should I, and if so how, remove the old version?

Thank you.

I want to show a sassy-button in bootstrap navbar, but nothing wors correctly
Here is my question on stackoverflow http://stackoverflow.com/questions/22763784/how-to-use-sassy-buttons-within-a-bootstrap-navbar

Hi,
First of all thanks for sharing Sassy-Buttons with us!

I am just posting this in case others have a similar problem. Here is the tale of how I finally got Sassy Buttons working on my Debian Squeeze system with http://rvm.io to run Ruby 1.9.3-p194 with Compass. and a bunch of other gems. I installed sassy-buttons like this:

gem install sassy-buttons
compass install sassy-buttons

I checked it had installed successfully. Looked like it had:

$ gem query

*** LOCAL GEMS ***

bundler (1.1.4)
chunky_png (1.2.5)
compass (0.12.2)
fssm (0.2.9)
rake (0.9.2.2)
rubygems-bundler (1.0.3)
rvm (1.11.3.5)
sass (3.2.3, 3.1.20)
sassy-buttons (0.1.4)

I included Sassy-Button in my project and rb files:

@import "sassy-buttons";
require 'sassy-buttons'

Running 'compass watch' failed when I made a file change. The error was:

File to import not found or unreadable: ...

I also tried the following, although I have to admit I was not quite sure what I was doing at this stage.

bundle install
bundle exec compass install sassy-buttons

both commands resulted in the same error:

Could not locate Gemfile

Thanks to dcheslow https://gist.github.com/jhardy/Sassy-Buttons/issues/16 I was able to fix it by copying ~/gems/ruby-1.9.3-p194/gems/sassy-buttons-0.1.4/stylesheets/sassy-buttons to my project sass directory. The path will be different for people not using rvm:
/usr/lib/ruby/gems/1.8/gems/sassy-buttons-0.1.0/stylesheets/sassy-buttons

I'm not quite sure what's wrong with my installation as I am not a Ruby guru. At least this is working now.

I hope this helps someone. I anyone has anything to add regarding the dark arts of Ruby I'd appreciate it.

Thanks,
Ruben

How about use filter-gradient instead of a background-image?

http://compass-style.org/reference/compass/css3/images/#mixin-filter-gradient

https://github.com/jhardy/Sassy-Buttons/blob/master/stylesheets/sassy-buttons/_sassy-button-gradients.sass#L14

In an existing project, on running:
compass install sassy-buttons

I get
No such framework: "sassy-buttons"

Also I wasn't clear on this instruction:

"Edit the project configuration file and add:
require ‘sassy-buttons’"

I am adding it to config/application.rb in my rails 3.1 file.
Not sure if that's what is meant by "the project configuration file".

Just started using the sassy buttons.

In _sassy-button-pseudo-state.sass

I noticed that :hover, "text-decoration: none" is outside of the conditionals and Sass does not combined them after processing the mixed in.

This generates two entries for the class:hover; one containing only one line and the other which contains the main definition.

I repeated the single line within the conditionals just to get rid of the double class entry. I couldn't think of any other way.

See screenshot here --> http://ubuntuone.com/1byKwIl53oUg5MD6GpNnmm

I have applied the below code:

.button {
  // @include sassy-button-structure(border-radius, font-size, padding);
  @include sassy-button-structure(8px, 1.5em, 10px);
  // @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);
  @include sassy-button-gradient("matte", lighten($red, 5%), $red, $white, "false");
  font-weight: bold;
}

Any ideas? I am thinking it is just some CSS mistake on my part.

We all hate IE, yet working with Compass means we barely have to think about the poor people chained to the past. This is a wonderful project, but it could learn some older-browser support from fancy-buttons.

In order to avoid displaying an outline on Google Chrome.

When running compass compile using sassy-buttons 0.2.5 results in a LoadError. This works fine on sassy-buttons 0.2.

There is no value false for background. So you should add lines to _sassy-button-pseudo-states.sass

@mixin sassy-pseudo-states($first-color, $second-color, $style)
  @if $second-color == false
    $second-color: none

Not sure if this has been covered, or if I'm doing it wrong (I'm running Command Prompt with Ruby on a Windows 8 machine), but I think the readme needs to get updated:

#import sassy buttons partial into your sass/scss file
@import "sassy-buttons"

When I run 'compass install sassy-buttons', the file that gets added is titled '_sassybuttons.scss'

If I copy the '@import "sassy-buttons"', I get a 'File to import not found or unreadable: sassy-butons.' error. Because there is no 'sassy-buttons.scss' file (with the dash).

Importing like this:

@import "sassybuttons"

works fine.

When I run compass install -r sassy-buttons -f sassy-buttons it get Error: ambiguous option: -f.

I'm in a directory using compass.

First I do "compass install sassy-buttons".
This command returns silently.

Then in my sass file I do @import "sassy-buttons"

When I run compass, I get:
error sass/site.sass (Line 5: File to import not found or unreadable: sassy-buttons.

I know Firefox is the new IE and it sucks, but maybe you find a solution for this problem:

Having a button element styled as sassy-button and a link (a) styled as sassy-button, then the link does not have the same height as the button element. This is only in Firefox.

I have added the require statement to the config.rb, added the _sassybuttons.scss file via the compass command, added the import line to my main sass file.

The buttons appear.

Now I am trying to edit the _sassybuttons.scss to set some project defaults, but my buttons are still coming up as the default.

I edited the file to be

$sb-base-color: rgba(240,120,2,1); $sb-second-color: false; $sb-border-radius: 5px; $sb-padding: 5px 10px; $sb-font-size: 12px; $sb-text-color: white; $sb-text-style: false; $sb-gradient-style: "simple"; $sb-pseudo-states: true; $sb-ie-support: true;

but my button is still

The button color changes (disconcertingly) on hover right now when it's disabled. The disabled text color should also be set for the hover state.

It would be kinda nice if it were possible to use this in such a way as to not require ruby. To put it another way, I'm working on a node app and want to use this, but I can't because in node you can't require stuff which you have to do to make this work (it doesn't compile the sass unless I require the gem)

Hi there!

I'm getting this error when I add the @import "sassy-buttons"; to my sass/screen.scss file :

Syntax error: File to import not found or unreadable: sassy-buttons.
Load paths:
Compass::SpriteImporter
/Users/william/Sites/rails_project/new/public/stylesheets/sass
/Users/william/Sites/rails_project/new/public/stylesheets
/Users/william/.rbenv/versions/1.9.2-p290/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/blueprint/stylesheets
/Users/william/.rbenv/versions/1.9.2-p290/lib/ruby/gems/1.9.1/gems/compass-0.12.1/frameworks/compass/stylesheets
on line 9 of /Users/william/Sites/rails_project/new/public/stylesheets/sass/screen.scss

The gem is installed successfully.

And the frameworks seems to be installed also :
$ compass frameworks
Available Frameworks & Patterns:
sassy-buttons
sassy-buttons/project - Sassy Buttons

I'm on Compass 0.12.2 and Rails 3.0.9

Do you have any idea that would help ?

Thanks !

Hi there,

I was wondering if there's a way to get the active state so that I can apply it to a .active class (used with some js) ?

Thanks

Hi there,

If I include Bourbon in my project, my sassy buttons lose their bg (although it works on hover).

I expect I'm being dumb — do you know a workaround?

Hello, I just tried installing sassy-buttons with Compass 1.0.0.alpha.19 and Sass 3.3.7

I'm getting this error when I do a compass watch:
error sass/style.scss (Line 15 of _sassy-button-pseudo-states.sass: Base-level rules cannot contain the parent-selector-referencing character '&'.)

Is this because I'm on new versions of Compass and Sass?

https://github.com/twitter/bower
http://sindresorhus.com/bower-components/

Buttons sometimes have a disabled state. Sassy-buttons currently does not define the corresponding disabled states for the styles. It would be nice if sassy-buttons could provide a mix in for this.

For the life of me, I can't get padding changes to compile. There's nothing else overriding the padding. I'm using version 0.2.6.

Here is my _sassybuttons.scss file...

@import "sassy-buttons";

$sb-base-color: #5B728F;
$sb-second-color: false;
$sb-border-radius: 4px;
$sb-padding: 0 0 0 0;
$sb-font-size: 16px;
$sb-text-color: white;
$sb-text-style: "inset";
$sb-gradient-style: "flat";
$sb-pseudo-states: true;
$sb-ie-support: true;

And in my other scss file I call it like this...

input[type="submit"] {
  @include sassy-button("flat", 6px, 20px, $blue, $blue, white, "inset");
}

But no matter what, this is what's compiled to the css file...

input[type="submit"] {
  font-size: 20px;
  padding: 0.2em 1.1em 0.3em 1.2em;
  color: white;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5B728F', endColorstr='#FF334051');
  background-color: #5b728f;
  border: 0;
  text-shadow: #293441 0 -1px 0;
}

Hi,

Sorry for my mistake, i tried to installed sassy-buttons on my friend PC's, and you know what, everythings working properly. Maybe i should uninstalled the compass

Thanks !

in file:
https://github.com/jhardy/Sassy-Buttons/blob/master/stylesheets/sassy-buttons/_sassy-button-styles.sass#L13

Border is defined without using $sb-border-width variable.

It could be nice to have $sb-border witch would allow to disable border completely, if needed.

Hi,

When I try to install using gem install sassy-buttons I was getting a permissions error so I changed the permissions using sudo chmod 777 1.8

Now when I try to install I get the following error: ERROR: While executing gem ... (Errno::EACCES) Permission denied - /Library/Ruby/Gems/1.8/cache/rubygems-update-1.8.7.gem

Anyone know what I'm doing wrong?

I thought this might help some other folks so here it is. I installed sassy-buttons according to the instructions but it would not work. I kept getting " File to import not found or unreadable"

After much thrashing around, I discovered that the load path did not include the location of sassy-buttons.

I tried installing another gem and had the same problem... so it appears there is a problem with my ruby installation... permissions, perhaps. I tried a few things and gave up.

Then I had the idea of simply moving the sassy-buttons directory into the existing load path. It worked a charm. I copied
/usr/lib/ruby/gems/1.8/gems/sassy-buttons-0.1.0/
into the sass directory for my project and changed the import statement in the sassy-buttons partial to be:
import "sassy-buttons-0.1.0/stylesheets/sassy-buttons";

Now, I just need to figure out what's wrong with my ruby installation...

I've added the gem to the gemfile and added @import "sassy-buttons" to my stylesheet, but when I run "compass install sassy-buttons" it says "No such framework: sassy-buttons".
I'm running Rails 4, Compas 1.0.0 and the latest version of SASS.

I'm sure I have lots still to read, but I'm not sure how to tackle this problem:

screen.scss:
@import "sassybuttons";
@include sassy-button

$ compass watch

Change detected at 16:13:06 to: screen.scss
error sass/screen.scss (Line 65 of _sassy-buttons.sass: Properties are only allowed within rules, directives, mixin includes, or other properties.)

sassy buttons 0.1.4. line 65 is the font-size: line, which is the first entry in the sassy-button-structure mixin.
compass-0.12.2, sass-3.2.1, all installed today. Just trying to get started.

TIA,
Dave

compass install -r sass-buttons -f sassy-buttons
/var/lib/gems/1.8/gems/bundler-1.2.0/lib/bundler/runtime.rb:197: warning: Insecure world writable dir /home/elijah/websites in PATH, mode 040777
LoadError on line 161 of /var/lib/gems/1.8/gems/compass-0.12.2/lib/compass/configuration/data.rb: no such file to load -- sass-buttons
Run with --trace to see the full backtrace

Nice work, to create a simple button. But I'd like to set the hover color to a completely different color. No way to do this?

Every time I activate compass watch I get this error, even if I re-install sassy-buttons
using the "compass install -r sassy-buttons -f sassy-buttons".

Happy new year!
Trying to install Sassy-Buttons. Not in a ruby app, just regular html/javascript local app. (using MAMP on OSX Lion).
Ran "gem install sassy-buttons" ( I was in my 'Sites/webproject/compass' dir. if that matters...). Seemed to go without errors.
added "require sassy-buttons" to my compass/config.rb file.
ran : "compass install -r sassy-buttons -f sassy-buttons" from my terminal, still inside my compass folder...
it created 'compass/sass/_sassybuttons.css'

but when I try to run compass watch, I get 'undefined mixin' from the sheet I used it. I checked that the @import directive was correctly placed...

How do I utilize Sassy-Buttons with CodeKit?

Nevermind.. works

If the links on the site are e.g. colored in red on hover, after applying the gradient mixin the color is still red when hovered.

What would be an elegant solution to these kind of problems?

I'm getting this error now:

error sass/screen.scss (Line 7 of _sassy-buttons.sass: File to import not found or unreadable: compass/css3/gradient.

Hi. So I didn't really expect everything to work on the rails31 branch of compass yet. But that didn't stop me from trying...

So just a quick rundown on the problems one might encounter. First, when I import sassybuttons, there is a compass breakage that has not been fixed on the rails31 branch yet. Compass/compass#436

But once that is patched, I get a "Compass::Error: invalid sprite path" message. After that, I abandoned the effort.

Hope this helps,
Peter