Transforming panel not working

[cbrunet]

When applying x-grid-block class to a panel, where x is a breakpoint (large-grid-block, for instance), the panel should appear as a grid-block at the specified breakpoint. This is working in foundation for apps, but this is broken in angular-base-apps. The panel works at smaller screen sizes, but is not displayed at the given breakpoint. It seems to be caused by line 476 of _grid.scss, but I'm not sure why this replaced the @include grid-panel-reset of the original version.

Example:

    <div class="grid-frame vertical">
      <div class="grid-content collapse shrink">
        <ul class="primary condense menu-bar">
          <li><a ba-toggle="leftpane">Menu</a></li>
          <li><a><strong>Angular Base Apps Starter</strong></a></li>
        </ul>
      </div>
      <div class="grid-block">
        <ba-panel id="leftpane" class="medium-grid-block shrink" style="background: black; color: white;">
          Left pane
        </ba-panel>
        <div class="grid-block" ui-view>
        </div>
      </div>
    </div>

In this example, leftpane should be displayed as a grid-block on large screens, and as a panel on smaller screens.

[soumak77]

The changes made in Angular Base Apps were done to fix zurb/foundation-apps#572.

@cbrunet Could you setup a jsFiddle or other online example? Also, what browser(s) are experiencing the issue?

[cbrunet]

Tried on both Vivaldi and Firefox. Not able to make angular-base-apps work on jsfiddle... But the given snippet should be enough to see the problem.

The ba-panel becomes a div with .panel style. Since it does not have .is-active class, it get the display:none property.