Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to use modified bootstrap $primary variable #46

Closed
imtiazShakil opened this issue Dec 22, 2019 · 8 comments
Closed

Unable to use modified bootstrap $primary variable #46

imtiazShakil opened this issue Dec 22, 2019 · 8 comments

Comments

@imtiazShakil
Copy link

imtiazShakil commented Dec 22, 2019

In my styles.scss,
I import _variables.scss to modify boostrap default $blue variable which changes bootstrap's $primary colour.

but this change is not picked up by your layout.scss because you are importing bootstrap variables again.

// layout.scss
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

Because of this mouse hovered item doesn't display the right colour:

    // mouse hovered item
    .select2-results__option--highlighted,
    .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
        background-color: $primary;
        color: $light;
    }
@ttskch
Copy link
Owner

ttskch commented Apr 24, 2020

@imtiazShakil Sorry for my late response. Why don't you just add $primary: $blue; in your styles.scss ?

@imtiazShakil
Copy link
Author

for my project, I required to change the bootstrap default $blue variable which automatically updates $primary variable and all others which depend on $blue variable.

but the issue is,
my modification doesn't work when I import your scss.

@fabiocaccamo
Copy link

Thank you for this theme.

I have exactly the same problem, I think that you should use colors from bootstrap variables, otherwise when using sass this select ignores theme colors customizations.

intiocean added a commit to intiocean/select2-bootstrap4-theme that referenced this issue May 21, 2020
Using the bootstrap function to get the theme colour means that the source can be used by people who have
overridden the primary theme colour by setting it in $theme-colours as per bootstrap docs

https://getbootstrap.com/docs/4.5/getting-started/theming/#modify-map

Fixes ttskch#46
@rodrigo-arias
Copy link

Probably related to #51

@bbugh
Copy link

bbugh commented Jan 29, 2021

We have a number of variables (input padding for example) that the layout import of re-importing bootstrap is clobbering. I don't think there's a way that you can re-import the variables without breaking a lot of stuff. I think the installation instructions will require that bootstrap already be imported before importing the library, which I think is a reasonable ask.

For now, we've just copied the scss into our own source, but that's not ideal.

@fabiocaccamo
Copy link

I attach you here my solution, hope it will help to solve this.
_select2-bootstrap4-fix.scss.zip

@tagliala
Copy link
Contributor

tagliala commented Mar 5, 2021

I think that this issue has been fixed via e946eed, because _*.scss files don't import from bootstrap anymore.

Bootstrap variables are only used to build the default distributable .css files

@imtiazShakil
Copy link
Author

thanks. I'm closing the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants