Bulma v1 compat?

[alexfurr]

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

[daveHylde]

I've hacked my way around it by copying the index.sass file to my local project, rewritten it to scss and fixed a few lines. The @use '../utilities' are simply bulma's sass utilities, but with my custom settings.

(I might open a pr in this repo, but not sure if it's maintained at all. Nor how the best way to migrate it to dart sass best.)

Anyway - looks like this:

@use '../utilities' as u;

$badge-font-size: 0.65rem !default;
$badge-height: 14px !default;
$badge-padding: 0.05rem 0.15rem !default;
$badge-shadow: 0 0 0 2px u.$scheme-main !default;

@mixin badge-positions {
  &.is-left {
    bottom: 0;
    left: 0;
    right: auto;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &.is-right {
    bottom: auto;
    left: auto;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
  }
  &.is-top {
    bottom: auto;
    left: 50%;
    right: auto;
    top: 0;
    transform: translate(-50%, -50%);
  }
  &.is-top-left {
    bottom: auto;
    left: 0;
    right: auto;
    top: 0;
    transform: translate(-50%, -50%);
  }
  &.is-top-right {
    bottom: auto;
    left: auto;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
  }
  &.is-bottom {
    bottom: 0;
    left: 50%;
    right: auto;
    top: auto;
    transform: translate(-50%, 50%);
  }
  &.is-bottom-left {
    bottom: 0;
    left: 0;
    right: auto;
    top: auto;
    transform: translate(-50%, 50%);
  }
  &.is-bottom-right {
    bottom: 0;
    left: auto;
    right: 0;
    top: auto;
    transform: translate(50%, 50%);
  }
}

.badge {
  background-color: u.$primary;
  border: 2px solid transparent;
  border-radius: $badge-height;
  box-shadow: $badge-shadow;
  color: u.$scheme-main;
  font-size: $badge-font-size;
  height: $badge-height;
  line-height: calc(#{$badge-height * 0.5} + 1px);
  min-width: $badge-height;
  overflow: hidden;
  padding: $badge-padding;
  position: absolute;
  right: 0;
  text-overflow: ellipsis;
  top: 0;
  transform: translate(50%, -50%);
  white-space: nowrap;
  &.is-outlined {
    background-color: u.$white;
    border-color: u.$primary;
    color: u.$primary;
  }
  @include badge-positions;
  @each $name, $pair in u.$colors {
    $color: nth($pair, 1);
    $color-invert: if(
      length($pair) >= 2,
      nth($pair, 2),
      u.bulmaFindColorInvert($color)
    );
    &.is-#{$name} {
      &:not(.is-outlined) {
        background-color: $color;
        color: $color-invert;
      }
      &.is-outlined {
        border-color: $color;
        color: $color;
      }
      @if length($pair) >= 4 {
        $color-light: nth($pair, 3);
        $color-dark: nth($pair, 4);
        &.is-light {
          color: $color-dark;
          &:not(.is-outlined) {
            background-color: $color-light;
          }
          &.is-outlined {
            border-color: $color;
          }
        }
      }
    }
  }
}

// Tabs position fix
.tabs li {
  position: relative;
}