search

razonyang / hugo-theme-bootstrap

A fast, responsive, multipurpose and feature-rich Hugo theme.
https://hbs.razonyang.com
MIT License
495 stars 169 forks source link

Bootstrap button color styles don't work #220

Closed stessaris closed 2 years ago

stessaris commented 2 years ago

If you add a BS styled button (e.g. btn-danger) the CSS "covers" its color by applying the current theme color. To reproduce the problem just create a new site by following the instructions in README and then create a hook with a button:

$ mkdir -p layouts/partials/hooks
$ echo '<button type="button" class="btn btn-danger">Content Begin</button>' >layouts/partials/hooks/content-begin.html

The button should be red because of the btn-danger class, but the background is overridden by the color of the current palette (the border is still red):

Screenshot 2021-09-24 at 14 07 36

Moreover, there's a nasty interaction with hoovering; when the mouse is over the button the color reverts to the original red:

Screen Recording 2021-09-24 at 14 12 02

Unfortunately I don't know much about CSS and the internals of your code to understand where's the problem, but the culprit could be in https://github.com/razonyang/hugo-theme-bootstrap/blob/eed4b79b970961f2163d6506a4253f893f8dd1fa/src/scss/_main.scss#L45-L52

razonyang commented 2 years ago

This theme overrides the bootstrap button style. I'll separate theme and Bootstrap styles in the next UI design(#215 WIP).