`display: inline-block;` on `.btn` wins over Bootstrap's `.btn-block`

atom-material / atom-material-ui

A dynamic UI theme for Atom that follows Google's Material Design Guidelines

MIT License

817 stars 204 forks source link

`display: inline-block;` on `.btn` wins over Bootstrap's `.btn-block` #233

Closed ssorallen closed 8 years ago

ssorallen commented 8 years ago

Nuclide uses Bootstrap's btn-block class, and it worked fine in atom-material-ui v1.1.0. However, v1.2.0 added display: inline-block; to the .btn class. Because theme stylesheets are included after Bootstrap stylesheets, the .btn-block class has become a no-op because it is always loses on document order specificity.

The change happened in commit https://github.com/silvestreh/atom-material-ui/commit/b56260b8bf80c4c8cbb551d48c7555425560d308

silvestreh commented 8 years ago

I don't use Nuclide, but I have installed (yet disabled) just in case these issues pop up. Would you be willing to show me how to reproduce this? I'm thinking a small change to the buttons CSS selector might do the trick.

ssorallen commented 8 years ago

You can reproduce this by inspecting a button with class="btn" in developer mode and adding the btn-block class to it. The .btn declaration in 'atom-material-ui' declares display: inline-block; and wins over the .btn-block class in Bootstrap.

Added to the settings view "Open Config Folder" button:

.btn-block losing on specificity:

.btn from 'atom-material-ui' winning with .btn:

ssorallen commented 8 years ago

.btn is already declared as display: inline-block; in Bootstrap v3.3.4, which is the current version that gets installed with Atom. I believe you can safely remove that line from 'atom-material-ui' and be fine.