How to override Foundation accordion styles? - css

Question

I'm using foundation sites in a WordPress theme, I am trying to override the style for the accordion component:
In particular I want all the items to have a border-radius of 10px.
There seems to be a couple of mixins that apply specifically to the first and last elements on the list which change the border radius:
/// 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;
}
}
The problem I seem to be having is I am unable to override the borders in this mixin, I have tried re-declaring the mixin and changing the 0's to $global-radius.
I have changed the global Radius to 10px styles defined:
.di-accordian-title {
background-color: $blue;
color: $white !important;
padding: 5px;
border-radius: 10px;
margin-top: 5px;
width: 100%;
clear: both;
float: left;
font-size: 14px;
}
.di-accordian-title:hover, .di-accordian-title:focus {
background-color: $light-blue;
color: $white !important;
padding: 5px;
border-radius: 10px;
margin-top: 5px;
width: 100%;
clear: both;
float: left;
font-size: 14px;
}
I just can't seem to override the first and last items border-radius.
This is my first time using sass in a project, first time using sass at all really.
What is the correct way to override the defaults set up in the accordion mixin?

Answer 1

You shouldn't need to override the mixin, the specificity of your own styles or settings should override it.
There are two easy ways of doing this:
Via "settings"
In your _settings.scss file (which should be referenced from app.scss) there is a setting for $global-radius which by default is set to 0. Simply set this to 10px or 0.6rem or whatever you fancy and the global radius will be changed to that amount.
N.B. This is the radius for all foundation elements, not just the accordion.
Via specificity
Alternatively if you want to keep a global radius of 0 (or whatever) and just want the accordion to have a 10px radius:
.my-accordion.accordion {
.accordion-item {
&:first-child > :first-child {
border-radius: 10px 10px 0 0;
}
&:last-child > :last-child {
border-radius: 0 0 10px 10px;
}
}
}
This would go in one of your projects scss files, loaded after the Foundation SCSS, which are also #imported from the app.scss file
Edit: Where .my-accordion is the class you have for that specific accordion, though it also works for all accordions if you just use the .accordion-item part of the scss above.