SCSS переменные

Документация по основным SCSS переменным, используемым в проекте.

Цветовые переменные

Основные цвета

$color-x        : #3c763d; // Темно-зеленый
$color-zero     : #33a241; // Зеленый чуть темнее
$color-first    : #39B549; // Зеленый
$color-second   : #E6E6E6; // Светло-серый
$color-third    : #303849; // Темно-синий

Цвета состояний

$color-success  : #39B549; // Зеленый (состояние успеха)
$color-warning  : #D99310; // Оранжевый (состояние предупреждения)
$color-error    : #EB5757; // Красный (состояние ошибки)
$color-info     : #0078D2; // Голубой (информационное состояние)

Цвета текста

$color-text-default: #666666; // Цвет текста по умолчанию
$color-text-inverse: #E6E6E6; // Инвертированный цвет текста (светлый)
$color-text-additional: #1b2336; // Дополнительный цвет текста

Цвета границ

$border-color-basic     : #CCCCCC; // Базовый цвет границы
$border-color-first     : #D6E9C6; // Первый цвет границы
$border-color-second    : #818181; // Второй цвет границы

Цвета фона

$background-color-body  : #F6F6F6; // Цвет фона body
$background-color-basic : #FFFFFF; // Базовый цвет фона
$background-color-first : #DFF0D8; // Первый цвет фона
$background-color-second: #E6E6E6; // Второй цвет фона
$background-color-third : #303849; // Третий цвет фона (темно-синий)
$background-color-four  : #3A455B; // Четвертый цвет фона (более светлый темно-синий)

Цвета таблиц

$table-color-odd  : lighten($background-color-third, 70%); // Цвет нечетных строк
$table-color-even : lighten($background-color-third, 65%); // Цвет четных строк

Цвета неактивного состояния

$text-disabled-color       : #AAAAAA; // Цвет неактивного текста
$background-disabled-color : #EEEEEE; // Цвет неактивного фона

Типографика

Семейства шрифтов

$default-font  : "Idealist", Arial, Tahoma, sans-serif; // Шрифт по умолчанию
$first-font    : "Roboto-Light", Arial, sans-serif; // Первый шрифт
$second-font   : 'Roboto', "Open sans", Arial, Tahoma, sans-serif; // Второй шрифт
$third-font    : 'Roboto Black', 'Roboto', "Open sans", Arial, Tahoma, sans-serif; // Третий шрифт

Макет

Точки перелома (breakpoints)

$min-width-xs : 576px;  // Очень маленькие устройства
$min-width-sm : 768px;  // Маленькие устройства
$min-width-md : 992px;  // Средние устройства
$min-width-lg : 1200px; // Большие устройства

Другие переменные макета

$border-radius : 5px;    // Радиус скругления по умолчанию
$oda           : 15%;    // Количество затемнения для обводки
$caret-width   : .4em;   // Ширина каретки для выпадающих списков

Helper Classes

Вспомогательные классы для быстрой стилизации элементов.

Display Classes

• .inline — устанавливает display: inline
• .inline-block — устанавливает display: inline-block
• .hidden — скрывает элемент (display: none)
• .template — скрывает элемент (display: none)

Text Formatting

• .uppercase — преобразует текст в верхний регистр
• .bold — делает текст жирным
• .italic — делает текст курсивным
• .undeline — подчеркивает текст
• .text-muted — устанавливает второстепенный цвет текста
• .text-suppressed — уменьшает размер шрифта до 0.8em
• .nowrap — запрещает перенос текста

Text Alignment

• .text-left — выравнивание текста по левому краю
• .text-center — выравнивание текста по центру
• .text-right — выравнивание текста по правому краю
• .text-justify — выравнивание текста по ширине

Width and Margins

• .wide — устанавливает ширину 100%
• .broadway — центрирует контент с максимальной шириной 80rem и отступами
• .padded — добавляет отступы по бокам (10vw на десктопе, 0.5rem на мобильных)
• .w_margin — добавляет отступы слева и справа (1rem)
• .h_margin — добавляет отступы сверху и снизу (1rem)
• .margin — комбинирует w_margin и h_margin

Borders and Rounding

• .border — добавляет базовую рамку
• .rounded — делает элемент круглым (border-radius: 50%)
• .border-smoothed — скругляет все углы
• .border-smoothed-top — скругляет верхние углы
• .border-smoothed-bottom — скругляет нижние углы
• .border-smoothed-left — скругляет левые углы
• .border-smoothed-right — скругляет правые углы

Другие

• .clearfix — очищает float
• .no-select — запрещает выделение текста
• .dotted — добавляет точечный фоновый паттерн

Responsive

Класс .padded имеет адаптивное поведение:

• На десктопе: отступы 10vw с обеих сторон
• На мобильных устройствах (до 48em): отступы 0.5rem с обеих сторон
• Модификатор .narrow добавляет максимальную ширину 80em на десктопе

Базовые элементы

Изображения

• .fluid — делает изображение адаптивным, устанавливая ширину 100%
• .rounded — применяет круглую форму к изображению через border-radius: 50%
• .right — выравнивает изображение по правому краю
• .left — выравнивает изображение по левому краю

Таблицы

• .tabular — основной класс для таблиц с чередующимися строками и стилизацией
• .blocked — делает строку неактивной (серой) и недоступной для взаимодействия
• .hoverable — добавляет эффект при наведении на строку
• .countable — добавляет автоматическую нумерацию строк
• .sortable — добавляет возможность сортировки по заголовкам
• .cards — скрывает заголовки таблицы

Модификаторы ячеек

• .text-middle — выравнивает содержимое ячейки по вертикали по центру
• .counter — стилизует ячейку для отображения счетчика
• .thumbnail — стилизует ячейку для отображения миниатюры изображения
• .checkbox — стилизует ячейку для отображения чекбокса

Заголовки

Все заголовки (h1-h4) используют основной шрифт и преобразуются в верхний регистр

Ссылки

Ссылки используют цвет текста по умолчанию, при наведении меняют цвет на основной цвет темы

Шапка сайта

• .padded — добавляет нижнюю границу к шапке
• .logo — стилизует логотип
• .slogan — стилизует слоган под логотипом

Подвал сайта

Имеет минимальную высоту 200px и уменьшенный размер шрифта

.contacts — выравнивает контактную информацию по правому краю

Утилитарные классы

.loading-indicator

Класс для отображения индикатора загрузки.

.hint

Класс для создания подсказок с различными типами (info, warning, error).

Модификаторы:

• .info — информационная подсказка (синий цвет)
• .warning — предупреждающая подсказка (желтый цвет)
• .error — подсказка об ошибке (красный цвет)

.notifications.layout

Класс для создания системы уведомлений.

Модификаторы для .notify:

• .info — информационное уведомление
• .success — уведомление об успехе
• .warning — предупреждающее уведомление
• .error — уведомление об ошибке
• .dismissible — уведомление с возможностью закрытия

.classtoggler select

Класс для стилизации селекта переключателя классов.

select.viewtoggle

Класс для стилизации селекта переключения вида.

Анимации

Inline Animation

Миксин для создания пользовательской анимации с указанной длительностью.

@include inline-animation($duration) {
  // Ваши keyframes здесь
}

Параметры:

• $duration — длительность анимации

Особенности:

• Создает уникальное имя анимации для каждого использования
• Устанавливает бесконечное повторение анимации
• Позволяет определить собственные keyframes внутри миксина

Flip Rotation

Миксин для создания анимации вращения с задержкой в конце.

@include flip-rotation($duration);

Параметры:

• $duration — длительность анимации

Особенности:

• Создает плавное вращение на 360 градусов
• Имеет задержку в конце анимации (90% времени без вращения)
• Устанавливает бесконечное повторение анимации

Blink

Миксин для создания эффекта мигания элемента.

@include blink($duration);

Параметры:

• $duration — длительность анимации

Особенности:

• Создает эффект плавного появления и исчезновения
• Использует opacity для создания эффекта
• Устанавливает бесконечное повторение анимации