creativebulma / bulma-badge Goto Github PK

Hi!

The variable name is rather "$font-size" than "$badge-font-size”, right?

ref.

https://github.com/CreativeBulma/bulma-badge/blob/master/src/sass/index.sass#L1

For smaller display widths, "0 calls" should be entirely displayed within the screen.

Test it out at: https://useful-forks.github.io/

There are a lot of warnings when compiling the sass. The same problem as jgthms/bulma#3333.

Is it possible to get an update?

Now bulma v1 has dropped, are there plans to make your excellent plugins (divider etc) as well as this compatible?

easily display a badge attached to any kind of element, in different position

Not true.

<div class="tabs">
  <ul>
    <li class="is-active"><a href="#">Tab1</a></li>
    <li>
      <a href="#">
        <span class="badge is-right">42</span>
        Tab2
      </a>
    </li>
  </ul>
</div>

<div>
  <p>Dolorum accusantium ut reprehenderit sint harum hic est?<br>
  Molestias adipisci suscipit quo.<br>
  Et et est qui qui fugiat et.<br>
  Ea consequatur fuga doloribus.<br>
  Est et laudantium ut voluptas eius rem officia in ipsam?</p>
</div>

This project seems to be what I'm looking for, but I can't seem to get it to work with b-tab-item.

<b-tab-item label="Tab Name">
    <span title="Badge top right" class="badge">42</span>
    ... contents
</b-tab-item>

Puts 42 (unstyled) at the top of the contents.

I tried using display: relative on a variety of elements without success.

What am I missing?

The definition says "any kind of element", but I found that it is not exactly true.
First, I wanted to attach to a progress, but it's kind of an unfinished element in the HTML specification (in my opinion) and the usage is very limited. (I actually wanted to use this badge as a workaround to the problem, that I cannot display text on the progress.)

Then, I tried to use it with the parent div of the progress. In that case the badge appeared but in the top right corner of the screen.

After I read #1, I got to understand that the display: relative rule is a requirement for this badge to work, so I do think the documentation should mention it or does not state simply „any kind of element”.

Recommendation: math.div($badge-height, 2) or calc($badge-height / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
71 │     line-height: calc(#{$badge-height / 2} + 1px)
   │                         ^^^^^^^^^^^^^^^^^
   ╵
    ~@creativebulma/bulma-badge/src/sass/index.sass 71:25  @import
    src/content/app.scss 19:9                              root stylesheet

Done in 2.23s.

I am using this with navbar-link inside of the header, and it currently does not work very well, even though position relative is applied to it.

I have added the below to fix the issue, although I am sure there is a better way to do this.

	&.is-left,
	&.is-right,
	&.is-top,
	&.is-top-left,
	&.is-top-right,
	&.is-bottom,
	&.is-bottom-left,
	&.is-bottom-right
		&.is-nav
			transform: translate(-5px, 10px)

Using it like so:

<div class="navbar-item has-dropdown is-hoverable is-icon">
    <a class="navbar-link">
        <span class="badge is-nav is-top-right" />
        <i class="fas fa-code"></i>
    </a>
</div>

Hi!

z-index badge is 99 and for example if you have a modal or navbar fixed top the badge is hover all the elements.

To reproduce you can create a badge and put a navbar fixed top, create a mod or open a dropdown near that badge.

Some examples:

I think reducing this z-index to 40 or lower could solve that problem.

Thanks!

{{% notification warning %}}Caution: Element including badge must have display: relative CSS rule to get it work.{{% /notification %}}

https://github.com/CreativeBulma/bulma-badge/blob/master/src/docs/content/get-started.md#usage

It should say position: relative instead of display: relative.