Как настроить 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, и эффект постепенного выцветания, а не эффект смехотворно быстрого скольжения. Как мне это сделать?

На самом деле мне также хотелось бы, чтобы кнопка плотно обтекала текст уведомления, а не занимала всю ширину линии. Является ли это возможным для любого 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>