ボタンアイコンの色を変更する方法は、このボタンがタイトルバーにある場合のみですか？

Question

私は暗青色のツールバーを持っています。タイトルバーにあるボタンには$button-color: #fff; があり、他のすべてのケースでは別の色が付いている必要があります。

それを行うための正しい方法は何ですか？

Answer 1

タイトルツールバーのボタンが特殊なケースであるため、theme mixinsを使用して、この種類のボタンのseparate uiを作成する必要があります。あなたはそれに新しい名前を付け、default mixinを拡張し、必要なパラメータ

@include extjs-button-small-ui(
    $ui: 'titlebarbutton', 
    $color: #fff 
); 
@include extjs-button-medium-ui(
    $ui: 'titlebarbutton', 
    $color: #fff 
); 
@include extjs-button-large-ui(
    $ui: 'titlebarbutton', 
    $color: #fff 
); 

を設定し、そのようなあなたのボタンの設定でそれを使用する：

{ 
    xtype: 'button', 
    ui: 'titlebarbutton', 
    ... 
} 

OR

@ D.Vとして。コメントで提案されている、あなたは、単にCSSルールを使用することができます。

{ 
    xtype: 'button', 
    cls: 'app-titlebar-button', 
    ... 
} 

注ボタンが複数の要素から構成されており、このクラスが一番上に適用されますが、テキストの色がで決定されていることインナーx-btn-innerのクラスを持つ要素なので、ルールは次のようになりますCSS：

.app-titlebar-button .x-btn-inner { 
    color: #fff; 
}