Invalid block decoration in Nucleus Dark theme

[smlombardi]

The new feature of command-click on a mixin is great, except for me the resulting reveal pane is always too short to see the mixin:

[sergeche]

Could you send me a mixin definition and version of Atom and LiveStyle plugin you’re using?

[smlombardi]

Atom 1.10.0 beta 4, livestyle-atom 0.2.5

@mixin arrow-inside($color: #fff, $left: 65px) {
  &:after {
    content: '';
    position: absolute;
    bottom: -13px;
    left: 66px;
    border-width: 14px 14px 0;
    border-style: solid;
    border-color: $color transparent;
  }
}

@mixin arrow-outside($color: $pb-blue, $left: 65px) {
  &:before {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 66px;
    border-width: 14px 14px 0;
    border-style: solid;
    border-color: $color transparent;
  }
}

// for the item buttons
.item-selector-button {
  position: relative;
  text-align: center;
  cursor: pointer;
  border: 1px solid $input-border;
  padding: 15px;
  border-radius: 0;
  color: #000;
  width: 160px;
  height: 120px;
  transition: all ease-in-out .1s, box-shadow ease-in-out .1s;

  .title {
    color: $pb-blue;
    font-size: 12px;
    margin: 0;
    padding-top: -3px;
    font-family: $font-family-ps-medium;
  }

  .divider {
    height: 1px;
    width: 20px;
    background-color: $input-border;
    margin: 4px auto 10px;
  }

  .image {
    background: #fff url('../images/box.png') center center no-repeat;
    width: 64px;
    height: 57px;
    margin: 4px auto;
  }

  &:hover, &.hover {
    padding: 14px;
    @extend %fancy-focus;
    @include arrow-inside;
    @include arrow-outside;
  }

  &:active, &.active {
    border-width: 2px;
    border-color: $pb-blue;
    background-color: $pb-blue;
    @include arrow-outside;

    .title {
      color: #fff;
    }

    .divider {
      background-color: #fff;
    }

    .image {
      background-color: $pb-blue;
    }

    &:hover {
      padding: 15px;
      box-shadow: none;
      @include arrow-inside($pb-blue);
    }
  }

  &.disabled {
    pointer-events: none;
    cursor: not-allowed;

    .title {
      color: #c3c3c3;
    }

    .image {
      background-image: url('../images/box-disabled.png');
    }

    &:hover {
      padding: 15px;
      border: 1px solid $input-border;
      box-shadow: none;
    }
  }
}

[sergeche]

Works fine with stable Atom 1.9.x, might be an issue with beta channel.

[sergeche]

Will check it out

[smlombardi]

Found the issue. Problem with the UI theme: Nucleus Dark. Works fine with One Dark.

[sergeche]

Hm, good point, will keep it open :) Still have to investigate it