Кнопка закрытия

Кнопка закрытия позволяет закрыть отображение элементов, в которых она используется. За счет модификаторов, кнопка закрытия может изменять свой внешний вид.

Структура

Для отображения кнопки закрытия достаточно разместить следующий код: <div class="sf-close"></div>.

Так как для размещения кнопки используется абсолютное позиционирование, то родительский слой должен иметь атрибут position: relative. Если вы не уверены в существовании данного атрибута, рекомендуется к вышестоящему слою добавить класс .position-relative.

<div class="sf-close"></div>

Отображение на темном фоне

При размещении на темном фоне используйте модификатор .theme-dark для иконки закрытия или области, в которой он размещается

<div class="hr-4 theme-dark mb-2 position-relative">
  <button class="sf-close"></button>
</div>
<div class="hr-4 bg-pink-900 position-relative">
  <button class="sf-close theme-dark"></button>
</div>

Изменение размера

Для изменения размера кнопки закрытия вы может использовать адаптивный модификатор размера шрифта: .t-{размер} без адаптации под размер экрана и .t{контрольная точка}-{размер} с адаптацией под размер экрана. Размер может принимать значения от -3 до 7.

<div class="hr-2 theme-light position-relative mb-2">
  <button class="sf-close t--3"></button>
</div>
<div class="hr-3 theme-light position-relative mb-2">
  <button class="sf-close t--2"></button>
</div>
<div class="hr-3 theme-light position-relative mb-2">
  <button class="sf-close t--1"></button>
</div>
<div class="hr-3 theme-light position-relative mb-2">
  <button class="sf-close t-0"></button>
</div>
<div class="hr-3 theme-light position-relative mb-2">
  <button class="sf-close t-1"></button>
</div>
<div class="hr-4 theme-light position-relative mb-2">
  <button class="sf-close t-2"></button>
</div>
<div class="hr-4 theme-light position-relative mb-2">
  <button class="sf-close t-3"></button>
</div>
<div class="hr-4 theme-light position-relative mb-2">
  <button class="sf-close t-4"></button>
</div>
<div class="hr-5 theme-light position-relative mb-2">
  <button class="sf-close t-5"></button>
</div>
<div class="hr-5 theme-light position-relative mb-2">
  <button class="sf-close t-6"></button>
</div>

Изменение положения

Для изменения положения вы можете использовать следующие модификаторы:

  • .sf-close-right - отображение справа от блока с отступом от верхнего края. Используется для левого бокового модального окна.
  • .sf-close-right-top - отображение справа от блока с выравниванием по верхнему краю блока. Используется для модальных окон по центру экрана.
  • .sf-close-left - отображение справа от блока с отступом от верхнего края. Используется для правого бокового модального окна.
  • .sf-close-top - отображение сверху от блока с отступом от правого края. Используется для нижнего бокового модального окна.
  • .sf-close-bottom - отображение снизу от блока с отступом от правого края. Используется для верхнего бокового модального окна.
  • .sf-close-center - отображение по вертикали - по центру. Используется для размещения внутри элементов форм.
<div class="hr-4 wr-4 d-inline-block bg-gray position-relative">
  <button class="sf-close sf-close-right-top"></button>
</div>
<div class="hr-5 wr-4 bg-gray position-relative">
  <button class="sf-close sf-close-right"></button>
</div>
<div class="hr-5 wr-4 bg-gray position-relative">
  <button class="sf-close sf-close-left"></button>
</div>
<div class="hr-4 w-100 bg-gray position-relative">
  <button class="sf-close sf-close-bottom"></button>
</div>
<div class="hr-4 w-100 bg-gray position-relative">
  <button class="sf-close sf-close-top"></button>
</div>
<div class="sf-example">
  <div class="position-relative">
    <input id="name" class="form-control p-2 m-0 w-100" type="search">
    <button class="sf-close t-1 sf-close-center"></button>
  </div>
</div>