Foundation-sites: [Accordion] bottom border is missing on last item

[jmartsch]

Expected Behavior

A bottom border should be displayed on the last item when the accordion is collapsed.

Current Behavior

Right now the border does not display and so it looks wrong.
You can see it on your demo page https://foundation.zurb.com/sites/docs/accordion.html

Possible Solution

remove border-bottom: 0 from .accordion-title
add margin-top: -1px to .accordion-title and .accordion-content

Your Environment

• Foundation version(s) used: 6.5.0-rc2

Checklist (all required):

• [X] I have read and follow the CONTRIBUTING document.
• [X] This is a bug report or a feature request.
• [X] There are no other issues similar to this one.
• [X] The issue title is descriptive.
• [X] The template is fully and correctly filled.

[ncoden]

Hi @jmartsch,

Thank you for the issue. border-bottom: 0 should be override on the last element, but I think the selector for that was broke in #11227 (scss/components/_breadcrumbs.scss:102).

Poke @DanielRuf. With the way Sass handles &, it is not always safe to split selectors.

[DanielRuf]

It's just the :last-child &:not(.is-active) > &, I'll revert this single line.

[SassNinja]

With the way Sass handles &, it is not always safe to split selectors. – @ncoden

It's simply the result of having used the & selector wrongly.
By nesting :not in :last-child the scope has been changed and thus the result of the & changed too.

.accordion-title {

  :last-child:not(.is-active) > & {}
  // => :last-child:not(.is-active) > .accordion-title {}

  :last-child {
    &:not(.is-active) > & {}
  }
  // => .accordion-title :last-child:not(.is-active) > .accordion-title :last-child {}
}

But when you revert this I'd recommend to also make the selector more concrete.
Currently it (first) targets all :last-child elems on the page.
I think it would be better to use this instead

.accordion-title {
    .accordion-item:last-child:not(.is-active) > & {}
}

[ncoden]

@SassNinja Yes this is what I had in mind with "not safe". Thank you for your (better) explainations 😄

[jmartsch]

Thanks for fixing this so quickly :)