@include sassy-button($text-color: color) not working

[carlosrberto]

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;
}

[jhardy]

I actually have a branch I am working on now that fixes this, will be pushing it here soon.

[carlosrberto]

Thanks @jhardy!, this is a nice extension.

[paynechu]

+1

[jhardy]

Sorry, @carlosrberto and @paynechu, been slammed recently, going to try to look at this tomorrow and get it all resolved.

[jhardy]

can you all give a test with the new version( 0.2.5) and see if that fixes your issues?

[paynechu]

hi @jhardy , this is my code. I want the text color to be black. but sassy-button-gradient's #000 seems not work. And I need to use color: black; instead. Tested with 0.2.5

.round-button {
  @include sassy-button-structure(emCalc(50), 100%);
  @include sassy-button-gradient("matte", #fff, #aaa, #000);
  // color: black;
}

[jhardy]

I am having trouble reproducing this locally, so maybe a little more detail and maybe you can share the outputted code. I just tested this with the following Sass/HTML

.round-button {
  @include sassy-button-structure(50px, 100%);

}

.red-text {
    @include sassy-button-gradient("matte", #fff, #aaa, #f00);
}

.blue-text {
    @include sassy-button-gradient("matte", #fff, #aaa, #00f);
}

.black-text {
    @include sassy-button-gradient("matte", #fff, #aaa, #000);
}

With this HTML

<button class="round-button red-text"> This text should be red </button>
<button class="round-button blue-text"> This text should be blue</button>
<button class="round-button black-text"> This text should be black </button>

Here is the screen shot of the buttons with the correct text color:

[jhardy]

closing this issue unless it comes up again.