Menu icon Foundation
foundation 6 Accordian- styling

Hi There

I'm building a wordpress site on foundation 6 using the Heisenberg skeleton theme.

I am really enjoying the framework, its my first time using scss and i'm stuck with styling the accordion component.

I want all the item titles to have rounded corners.

I have managed to do this applying an additional di-accordion-title class applied to the accordion-title li's

However the first and last always have 2 square corners, it looks like the accordion mixin sets them to 0

 

Is there anyway to override this behavior so the first and last don't take on a different style?

I have done a very hacky edit in the the core files in node folder commenting out:

/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
@mixin accordion-item {
  &:first-child > :first-child {
    //border-radius: $global-radius $global-radius 0 0;
  }

  &:last-child > :last-child {
   // border-radius: 0 0 $global-radius $global-radius;
  }
}

Is there a less hacky way to do this without modifying the core files?

 

 

 

 

 

accordian foundation-6 scss style

Hi There

I'm building a wordpress site on foundation 6 using the Heisenberg skeleton theme.

I am really enjoying the framework, its my first time using scss and i'm stuck with styling the accordion component.

I want all the item titles to have rounded corners.

I have managed to do this applying an additional di-accordion-title class applied to the accordion-title li's

However the first and last always have 2 square corners, it looks like the accordion mixin sets them to 0

 

Is there anyway to override this behavior so the first and last don't take on a different style?

I have done a very hacky edit in the the core files in node folder commenting out:

/// Adds styles for the accordion item. Apply this to the list item within an accordion ul.
@mixin accordion-item {
  &:first-child > :first-child {
    //border-radius: $global-radius $global-radius 0 0;
  }

  &:last-child > :last-child {
   // border-radius: 0 0 $global-radius $global-radius;
  }
}

Is there a less hacky way to do this without modifying the core files?