There seems to be some variables that are either missing or not overridden for dropdowns.

Specifically hover color and hover background color.

For reference I'm using Cyborg theme. Hovered dropdown items have black text on dark gray backgrounds and have the exact same hover background. You probably only need to do this for dark themes.

Bulma file: https://github.com/jgthms/bulma/blob/master/sass/components/dropdown.sass

Bulma recently moved to 0.6 and there are a few updates.

The biggest changes that will effect Bulmaswatch is the new blue link color, and the navbar markup changed.

https://bulma.io/2017/10/09/roses-are-red-links-are-blue/

Closes #45

I named the variable $bulmaswatch-import-font so that its namespaced.

This solution only disables the hardcoded @import, it doesn't make the font configurable.

By disabling this, the user should know that they either need to import it through other means such as the <link> tag or override all instances of font-family manually.

EDIT:

PR #31 seems to try to solve the same problem but they only edited Flatly. I went through all the themes.

Their solution would be more ideal since it gives the user full control of the font, however they didn't put in the work to update all the themes.

Maybe you could implement it that way eventually, but for now I think this PR is a good enough solution to some of the problems caused by the hardcoded @import.

Hi,

Some themes have a light/yellow warning background color with dark text. Other themes, such as Darkly and Flatly have light warning text.

If I enter the yellow color from one of those themes (#F1B70E) into this contrast checker tool: https://webaim.org/resources/contrastchecker/ it suggests that dark text is more accessible.

I'm using Journal which has this font in _overrides.scss

@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);

But I also want to use this font that I include through my HTML.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200,300">

I would much rather have them both be in the link tag but News Cycle is hard coded into the overrides.

Possible solutions:

Sass has control structures right? Can you add a boolean variable + an if-statement to conditionally include this font.

That way I can remove/disable it from my css and then combine it with Raleway in my link tag.

A simpler solution might be to add another scss file to the themes with custom fonts.

Add a _theme-font.scss file, it should contain just one line, the @import url(...).

This allows me to do the same thing in a different way.

Just found bulmswatch today. Thanks for your hard work.

I was using the current 0.4.2 CDN version of Bulma, like this: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.css">

When I have a select styled, it looks like this (correct):

If I switch over to a bulmaswatch CSS (minified download version), I get this:

My select style looks like this:

<span class="select level-item">
<select><option>And</option><option>Or</option></select>
</span>

Am I doing something wrong?

Hi,

It may be more simple to use the variable $control-height instead of overwrite all form element. It seems all were good after these changes.

If there is a problem, I will correct.

Thanks for reading

Hi!

First of all, thank you for putting this together.

Input text is hardly visible in dark themes by default. For example, look at the cyborg theme

Not sure if this is intended or not.

Here, I've created a codepen to demonstrate the issue.

It seems the issue is with this:

.button,.control.has-icons-left .icon,.control.has-icons-right .icon,.input,.pagination-ellipsis,.pagination-link,.pagination-next,.pagination-previous,.select,.select select,.textarea{height:2.375em}

This is my fix:

.select, .select select { height: auto!important; }

Bug

Expected behaviour

No overflow at all

Suggested edit

.media-content {
    overflow: hidden;
}

Things I checked

I've compared it to standard Bulma as well as the Superhero style both of them didn't have the bug. When I look in the element styles: overflow: auto Opening it says:

overflow-x: auto
overflow-y: hidden;

Solution

I haven't checked if it worked only through the developer tools. This was done by unmarking overflow: auto and adding overflow-y: hidden

Trying to even get this started and I am getting this.

On app.scss:

// Bulma
@import "~bulmaswatch/lux/_variables.scss";
@import "~bulma/bulma.sass";
@import "~bulmaswatch/lux/_overrides.scss";

Gives me:

 error  in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed:
undefined
                              ^
      Undefined variable: "$button-focus-border".
      in ~/code/project/node_modules/bulmaswatch/lux/_overrides.scss (line 36, column 32)

Hi! Looking at the history there are a few commits since the v0.8.1 tag on Apr 26, 2020. Reading the issues it looks like there's some work needed (PRs welcome?) to bring Bulmaswatch up to fully supporting the Bulma 0.9.x release series, but it'd be great to have a v0.8.2 tag in the meantime to be able to pin sites to and capture the latest fixes.

Thanks for the great themes!

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

in order to use the bookmarklet we had to make some minor modifications, thought you might like to see that, i would of rather been able to import the bookmarklet with a crossorigin script tag and avoided maintaining this file (minor issue) ;) thank you for the bookmarklet

https://github.com/ddupas/msfish/blob/main/bookmarklet.js

I mainly use the npm version of bulmaswatch. With @import being deprecated in Dart Sass, bulmaswatch should be replaced with @use and @forward. However, at this time, the bulmaswatch source is so dependent on @import that we may have to consider discontinuing its use. Are there any plans for bulmaswatch to support the obsoletion of @import?

• See also: https://sass-lang.com/documentation/cli/migrator

I have used bulmaswatch conveniently in the development of several WebView applications. It has been especially useful in implementing the Dark/Light mode switching. Thank you!

Bumps postcss from 7.0.17 to 7.0.39.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.