badges in Amelia

[danielsz]

Apologies if I'm wrong, but it seems that badges don't work in Amelia. (Rails 3.2.13 here) I have installed bootswatch-rails as per the instructions, and everything seems to work, except for badges (and possibly labels) in Amelia (and possibly also in other themes, but not all, because I've verified and they work in Journal, for example). When I say they don't work, I mean that they display the default color, regardless of the suffix applied to them (badge-success, badge-warning). From what I have been to gather, it seems they are being shadowed by bootstrap-sass. I'd love to know if there is a fix (or maybe I've done something wrong). Thanks!

[ArnaudRinquin]

I encounter the exact same problem with the Cosmo theme and Spacelab for both Labels and Badges.

There is a problem in the produced CSS, here is an example on label-info:

   /* line 494, ../../../../../.rvm/gems/ruby-1.9.3-p392/gems/bootswatch-rails-0.4.0/vendor/assets/stylesheets/bootswatch/cosmo/_bootswatch.scss */
.label .label-important {
  background-color: #ff0039;
}

The space between the two 'label' and 'label-info' should not exist.

This css comes from bootswatch.scss file.

Let's compare the bootswatch-rails .scss version of the file:

.label {
    min-width: 80px;
    min-height: 80px;
    @include border-radius(0);
    font-weight: 300;
    text-shadow: none;

    .label-success {
        background-color: $green;
    }
...

}

To the original .less version:

.label {
    min-width: 80px;
    min-height: 80px;
    .border-radius(0);
    font-weight: 300;
    text-shadow: none;

    &-success {
        background-color: @green;
    }
...
}

Conclusion: the less to scss converter isn't working as intended on this kind of parent references conversion.

I will try to fix this.

[ArnaudRinquin]

Ok, I made some search. The problem comes form scss not allowing this type of code:

.label {
    min-width: 80px;

    &-success {
        background-color: #444;
    }
...
}

There is currently no workaround for a correct conversion of this type of code to scss.

However, according to the comments of the associated issue, this case will be covered in next release of scss (3.3.0). This kind of less code should be converted into this scss:

.label{
    #{&}-success {
      // ...
    }
}

[danielsz]

Well done, it seems you found the root of the problem.

Sass 3.3.0 is already in alpha, so I suppose that's good news.

[maxim]

I don't see any more instances of &- in *.scss files. Can anyone confirm that this is fixed? I think this was removed in the original bootswatches, but I saw these ampersands in Flatly, and I handled them by prepending parent selector in place of ampersand. Is that not the right way to handle these?

Will reopen if still an issue.