Описание компонента Close

Назначение компонента

Компонент close представляет собой кнопку закрытия в виде крестика (двух перекрещенных линий). Этот элемент интерфейса используется для:

Закрытия модальных окон
Удаления элементов из интерфейса
Очистки полей ввода
Выхода из полноэкранного режима
Закрытия вкладок или панелей

Классы и их назначение

.sf-close — базовый класс для кнопки закрытия. Определяет основные стили и поведение.
.sf-close--1/4 до .sf-close--12 — модификаторы размера, которые изменяют диаметр кнопки.
.sf-close-target — класс для элемента, который должен анимироваться при закрытии.

Особенности реализации

Кнопка закрытия реализована с помощью псевдоэлементов :before и :after, которые образуют крестик. Это позволяет:

Не использовать изображения или иконки из шрифтов
Легко изменять цвет и толщину линий через CSS
Гибко настраивать размеры кнопки

Таблица переменных CSS

Переменная	Описание	Значение по умолчанию
`--sf-close--diameter`	Диаметр (ширина и высота) кнопки закрытия	`var(--sf-text--height-1)`

Размерные модификаторы

Класс	Размер	Переменная размера
`.sf-close--1/4`	Очень маленький	`var(--sf-text--height-1/4)`
`.sf-close--1/3`	Маленький	`var(--sf-text--height-1/3)`
`.sf-close--1/2`	Уменьшенный	`var(--sf-text--height-1/2)`
`.sf-close` (без модификатора)	Стандартный	`var(--sf-text--height-1)`
`.sf-close--2` до `.sf-close--12`	Увеличенные размеры (2-12)	`var(--sf-text--height-[2-12])`

Примеры использования

            
                <div class = "row relative" style = "padding-top: 60px;">
                <div class = "sf-close sf-close--1/4">
                </div>
                </div>  

                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close sf-close--1/3">
                    </div>
                </div>
                
                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close sf-close--1/2">
                    </div>
                </div>

                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close">
                    </div>
                </div>
                    
                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close sf-close--2">
                    </div>
                </div>

                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close sf-close--3">
                    </div>
                </div>
                    
                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close sf-close--4">
                    </div>
                </div>
                
                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close sf-close--5">
                    </div>
                </div>
                    
                <div class = "row relative" style = "padding-top: 60px;">
                    <div class = "sf-close sf-close--6">
                    </div>
                </div>

1. Базовое использование:


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

2. С изменением размера:


<div class="sf-close sf-close--1/2"></div>
<div class="sf-close sf-close--4"></div>

Изменить статью