如何自定义Zurb Foundation 6关闭按钮

Question

Close Button似乎是显示用户可以点击的通知的好方法。但它的使用对于新手而言仍然难以捉摸。

我在页面上放了一个：

   <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的成功，以及淡出效果，而不是令人困惑的快速滑出效果。我该怎么做？

实际上我也希望按钮紧紧地环绕通知文本，而不是占用整个线宽。这是否可以用Zurb惯用法进行？

谢谢！

Answer 1

要更改关闭按钮或其他样式的颜色，您可以将CSS编码为

.close-button{
   color:red;
}

如果您使用的是SASS，您可以自定义变量。 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

您可以将标注添加到1到12宽的列中（尽管12个宽度是您自己已经拥有的标注）。在这里，我已将其添加到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>