Menu icon Foundation
Edit elements inside panel

Here's my code. I want to edit elements inside a customized class/element below, as you can see. I successfully styled .panel-grey, but it only applied to the immediate children. Anything two levels below or more is not changed, such as if I include an h1 tag inside the panel.

What am I doing wrong?

@import 'compass'
@import '../foundation_my/bower_components/foundation/scss/foundation/components/_panels.scss'
$include-html-panel-classes: $include-html-classes !default
$green-fcon: #22b037

.panel-grey
  @include panel($bg:$black-fcon, $border: false)
  $panel-header-adjust: true
  $panel-font-color: $white

  h1
    border-bottom-color: $green-fcon

panelheading

Here's my code. I want to edit elements inside a customized class/element below, as you can see. I successfully styled .panel-grey, but it only applied to the immediate children. Anything two levels below or more is not changed, such as if I include an h1 tag inside the panel.

What am I doing wrong?

@import 'compass'
@import '../foundation_my/bower_components/foundation/scss/foundation/components/_panels.scss'
$include-html-panel-classes: $include-html-classes !default
$green-fcon: #22b037

.panel-grey
  @include panel($bg:$black-fcon, $border: false)
  $panel-header-adjust: true
  $panel-font-color: $white

  h1
    border-bottom-color: $green-fcon
Rafi Benkual over 4 years ago

I think the problem is a missing ; after the panel arguments. http://sassmeister.com/gist/156554a95e35b6d7016e