nib icon indicating copy to clipboard operation
nib copied to clipboard

transition mixin breaks surrounding code

Open enzy opened this issue 8 years ago • 0 comments

Stylus: 0.54.5 Nib: 1.1.0

Source file:

@import 'nib'

$perRow = 5
$itemRatio = 0.625

.grid
    display block
    opacity 0
    transition opacity 1s ease

    &-item
        position relative
        display block
        width (100% / $perRow)
        height 0
        padding-top (100% * $itemRatio / $perRow)

Result:

.grid {
  display: block;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  .grid td,
  .grid th {
    padding: 0;
  }
  -webkit-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  -moz-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  -o-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  -ms-transition: ;
  .grid td,
  .grid th {
    padding: 0;
  }
  transition: ;
}
.grid-item {
  position: relative;
  display: block;
  width: 20%;
  height: 0;
  padding-top: 12.5%;
}

Correct result when nib is not imported:

.grid {
  display: block;
  opacity: 0;
  transition: opacity 1s ease;
}
.grid-item {
  position: relative;
  display: block;
  width: 20%;
  height: 0;
  padding-top: 12.5%;
}

enzy avatar Jun 22 '16 08:06 enzy