When using a starterkit (subtheme) [theme_root]/less/bootstrap.less is used to compile the various bootstrap-specific less into the theme's css. However, some of the ordering there appears to differ from what's recommended in [bootstrap_root]/less/bootstrap.less. Specifically glyphicons.less is loaded as a "component" as opposed to a "reset". I suppose that "component" vs "reset" is a matter of semantics, but the end results that glyphicons.less gets loaded too late.

A practical error situation is when styles from .form-control-feedback try to override styles from .glyphicon. This is the case on the password input widget (such as on the Drupal registration form). The glyph span used there contains both form-control-feedback and glyphicon classes, and it seems that the intent is for styles from .form-control-feedback to specifically override .glyphicon. Of course this does not happen as the .glyphicon styles are defined after .form-control-feedback styles. The end result is shown in the attachment:

Bootstrap pass input error

The ordering is easy to fix on a local subtheme, but this should probably also be addressed in the starterkit itself.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

rjacobs created an issue. See original summary.

rjacobs’s picture

Status: Active » Needs review
FileSize
706 bytes

Here's a quick patch.

markhalliwell’s picture

Status: Needs review » Needs work

Actually, I would surmise the entire file should be updated to reflect the same order as https://github.com/twbs/bootstrap/blob/v3.3.5/less/bootstrap.less

rjacobs’s picture

Status: Needs work » Needs review
FileSize
1.26 KB

Fair enough. The only other change I could see was the addition of responsive-embed.less, which relates to #2428883: .embed-responsive-item class doesn’t work on sub-theme. I also matched the comments.

I'm assuming you are not also suggestion that the handling of variable-overrides.less be changed (the only real remaining difference)?

rjacobs’s picture

Just wanted to check back on this. Is there anything else I can pass on or test?

mstrelan’s picture

Can we get this in D8 as well? Specifically the responsive-embed.less include?

rjacobs’s picture

Version: 7.x-3.x-dev » 8.x-3.x-dev

The patch from #4 appears to be completely interchangeable across 7.x-3.x and 8.x-3.x.

I'm changing the issue version to 8.x-3.x based on the assumption that this project uses a backport strategy.

  • markcarver committed 5cc3f9a on 8.x-3.x authored by rjacobs
    Issue #2646988 by rjacobs: Bootstrap.less in starterkit may order...

  • markcarver committed 445d7bf on 7.x-3.x authored by rjacobs
    Issue #2646988 by rjacobs: Bootstrap.less in starterkit may order...
markhalliwell’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.