$panel-block-active-border-left-color doesn't do anything

[digitigradeit]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version [0.9.4] My browser is: Safari I am pretty sure this issue is not a duplicate.

Description

$panel-block-active-border-left-color never actually gets applied to panel-block items with .is-active

This is likely due to the fact that only border-bottom gets a border specified.

Indicating border-left-color only doesn't do anything unless border-left-style is also specified (and ideally border-left-width as well, but not required for the border to show).

Recommendation is to rename the variable $panel-block-active-border-left-color to $panel-block-active-border-left then update the reference such like:

$panel-block-active-border-left: 1px solid $link !default

Which would make it consistent with $panel-tab-border-bottom

.panel-block
  {...}
  &.is-active
    border-left: $panel-block-active-border-left

Another option would be to do the following in your custom CSS if you let the variable as-is:

.panel-block.is-active {
  border-left-style: solid;
  border-left-width: 1px;
}

If the above expectation is the case I would just remove the variable all together and any references to it because it doesn't take much to add in another line in that case indicating the border-left-color.

.panel-block.is-active {
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: $link;
}

IMHO this doesn't look good when you have a panel that colored .is-primary when your left border is $link and the text color is also $primary.

.panel
  border-radius: $panel-radius
  box-shadow: $panel-shadow
  font-size: $size-normal
  &:not(:last-child)
    margin-bottom: $panel-margin
  // Colors
  @each $name, $components in $panel-colors
    $color: nth($components, 1)
    $color-invert: nth($components, 2)
    &.is-#{$name}
      .panel-heading
        background-color: $color
        color: $color-invert
      .panel-tabs a.is-active
        border-bottom-color: $color
      .panel-block.is-active
        border-left-color: $color
        border-left-style: solid
        border-left-width: 1px
      .panel-block.is-active .panel-icon
        color: $color

Might have been the original intention.

Steps to Reproduce

Create a page with a panel or use the example in the docs with one panel-block which also has the class .is-active

Expected behavior

I assume that the intention is for there to be a 1-2 px border on the left the same color as $link

Actual behavior

See that there's no border-left discernible on the panel-block which is also .is-active

Here's the pen: https://codepen.io/dogtoe/pen/zYMgoOx