Zurb Foundation 6の閉じるボタンをカスタマイズする方法

Question

Close Buttonは、ユーザーがクリックできた通知を表示するための良い方法のようです。しかし、その使用法はまだnewbには分かりません。

私はページ上のものを置いています

<div> 
    <div class="callout" data-closable="slide-out-left"> 
     <button class="close-button" data-close>&times;</button> 
     <p>whatever notice text</p> 
    </div> 

は、しかし、今、私はその色Zurbの方法を変更、またはどこ私は上記の使用これ以外の閉じアニメーションオプションを見つけるまでのいずれかの方法を知らないと思います。私はボタンを色付けしたいと思います。混乱を招くような速いスライドアウトエフェクトではなく、フェードアウトエフェクトを使用しています。それについてどうすればいいですか？

実際には、ボタンを通知テキストの周りをきつく囲み、線幅全体を占めることも望まれます。それはどんなZurb-idiomaticなやり方でも可能ですか？

ありがとうございます！閉じるボタンまたは他のスタイルの色を変更するには

Answer 1

あなたは変数をカスタマイズすることができSASSを使用している場合は、

.close-button{ 
    color:red; 
} 

のようにCSSをコーディングすることができます。あなたが使用することができます http://foundation.zurb.com/sites/docs/close-button.html#sass-reference

アニメーションは、次のとおりです。

slide-in-down 
slide-in-left 
slide-in-up 
slide-in-right 
slide-out-down 
slide-out-left 
slide-out-up 
slide-out-right 
fade-in 
fade-out 
hinge-in-from-top 
hinge-in-from-right 
hinge-in-from-bottom 
hinge-in-from-left 
hinge-in-from-middle-x 
hinge-in-from-middle-y 
hinge-out-from-top 
hinge-out-from-right 
hinge-out-from-bottom 
hinge-out-from-left 
hinge-out-from-middle-x 
hinge-out-from-middle-y 
scale-in-up 
scale-in-down 
scale-out-up 
scale-out-down 
spin-in 
spin-out 
spin-in-ccw 
spin-out-ccw 

http://foundation.zurb.com/sites/docs/motion-ui.html

Answer 2

12ワイドは、すでに上の吹き出しを持っているものですが、あなたは（ワイド12に1列に吹き出しを追加することができますそれ自身）。ここで私は2幅の列に追加しました。スライドアウト方法を削除することにより、デフォルトのフェードアウトが使用されます。

<div class="row"> 
    <div class="small-2 columns"> 
     <div class="success callout" data-closable> 
      <button class="close-button" data-close>&times;</button> 
      <p>whatever notice text</p> 
     </div> 
    </div> 
</div>