財団のアコーデオンスタイルを上書きする方法は？

Question

私はWordPressテーマで基礎サイトを使用しています。アコーデオンコンポーネントのスタイルをオーバーライドしようとしています。

特に、すべてのアイテムのボーダー半径を10pxにします。

国境半径を変更するには、リスト上の最初と最後の要素に特異的に適用ミックスインのカップルがあるようです：

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

私が持っているように見える問題は、私はオーバーライドすることができませんですこのミックスインの境界線は、ミックスインを再宣言し、0を$ global-radiusに変更しようとしました。 は私が定義さ10pxのスタイルにグローバル半径を変更しました：

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

私は最初と最後の項目の境界線半径を上書きするように見えることはできません。

これは私の初めてのプロジェクトでは、本当にすべての本当に草を使用して、草を使用しています。

アコーディオンmixinに設定されているデフォルトを上書きする正しい方法は何ですか？

Answer 1

ミックスインをオーバーライドする必要はありません。独自のスタイルや設定の特異性によってオーバーライドする必要があります。

これを行うための2つの簡単な方法があります。

経由「設定」

がデフォルトで設定されている$global-radiusための設定がある（app.scssから参照する必要があります）あなたの_settings.scssファイルで0。これを10pxまたは0.6remに設定するか、あなたが気に入っているものをグローバル半径に変更してください。

N.B.これは、アコーディオンだけでなく、すべての基礎要素の半径です。特異また

経由

グローバル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; 
     } 
    } 
} 

これはで行くだろうあなたのプロジェクトの1つ、Foundation SCSSの後にロードされたscssファイル。app.scssファイル

編集：は、その特定のアコーディオンのクラスですが、上のscssの.accordion-item部分だけを使用すると、すべてのアコーディオンでも機能します。