Skip to content

Can't overwrite SASS variables #10

Open
@pixelpeter

Description

@pixelpeter

I'm overwriting my primary color $primary sass variable like it's defined in the documentation of http://bulma.io/documentation/overview/customize/ using the node installed version of bulma and vue-bulma-tooltip

// Import the initial variables
@import "node_modules/bulma//sass/utilities/initial-variables";

// Set your own initial variables
$primary: #72d0eb

//  Import the rest of Bulma
@import "../bulma"

The color change will be effective on my own Elements and Components like e.g. a button.

<button class="button is-primary">

But if I want to have the tooltip the same color as the button by using tooltip--primary the tooltip will have the original primary color

<button class="button is-primary tooltip tooltip--primary">
    <span>info</span>
</button>

I was wondering if this is because you import ~bulma/sass/utilities/variables in the style.scssof the tooltip component instead of ~bulma/sass/utilities/initial-variables.

I also asked @jgthms of bulma framework about the purpose of this file:
jgthms/bulma#769

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions