Кнопка закрытия
Кнопка закрытия позволяет закрыть отображение элементов, в которых она используется. За счет модификаторов, кнопка закрытия может изменять свой внешний вид.
Структура
Для отображения кнопки закрытия достаточно разместить следующий код: <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>