Как переопределить стили аккордеона Foundation?

Question

Я использую сайты основания в теме WordPress, я пытаюсь переопределить стиль для компонента аккордеона:

В частности, я хочу, чтобы все элементы имели радиус границы 10 пикселей.

Там, кажется, несколько Mixins, которые применяются специально для первых и последних элементов в списке, которые изменяют радиус границы:

/// 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; 
    } 
} 

Проблема у меня, кажется, имея это я не могу отменить границы этого микса, я попробовал повторное объявление mixin и изменение 0-го к глобальному радиусу. Я изменил глобальный радиус до 10 пикселей стилей, определенных:

.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; 
} 

Я просто не могу показаться, чтобы отменить первый и последний границы радиуса.

Это мой первый раз, используя sass в проекте, впервые используя sass на самом деле.

Каков правильный способ переопределения настроек по умолчанию, установленных в mixion mixin?

Answer 1

Вам не нужно переопределять mixin, специфика ваших собственных стилей или настроек должна переопределять его.

Есть два простых способа сделать это:

«Настройки» Via

В файле _settings.scss (которые должны быть ссылки из app.scss) есть установка для $global-radius, который по умолчанию установлен до 0. Просто установите это значение 10px или 0.6rem или как вам понравится, и глобальный радиус будет изменен на эту сумму.

N.B. Это радиус всех элементов фундамента, а не только аккордеона.

Via специфичностью

В качестве альтернативы, если вы хотите сохранить глобальный радиус 0 (или любой другой), и просто хотите аккордеон, чтобы иметь радиус 10px:

.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; 
     } 
    } 
} 

Это будет идти в один из ваших проектов scss-файлов, загруженных после Foundation SCSS, которые также являются @import ed из файла app.scss

Редактировать: Где .my-accordion - это класс, который у вас есть для этого конкретного аккордеона, хотя он также работает на всех аккордеонах, если вы просто используете часть scss выше .accordion-item.