Библиотека стилей

Объекты для Header и Footer

Телефон

CSS распологается:

.stack-tel-menu

Общий стек для контента

.text-tel-menu

Текстовая область номера

.text-tel-arrow

Иконка стрелки для подробной информации

Почта

CSS распологается:

.email-menu

Общий стек для контента

.text-email-menu

Текстовая область почты

Поиск

Hover элементы

Пасивный вариант

h-link-pas - цвет zero

h-link-pas, theme-white

h-link-pas, theme-light

h-link-pas, theme-dark

h-link-pas, theme-accent

h-link-pas, theme-soft

h-link-pas, theme-blur

Активный вариант

h-link-act цвет zero

h-link-act, theme-white

h-link-act, theme-light

h-link-act, theme-dark

h-link-act, theme-accent

h-link-act, theme-soft

h-link-act, theme-blur

+ стиль link-fill

h-link-pas - цвет zero

h-link-pas, theme-white

h-link-pas, theme-light

h-link-pas, theme-dark

h-link-pas, theme-accent

h-link-pas, theme-soft

h-link-pas, theme-blur

+ стиль link-fill

h-link-act цвет zero

h-link-act, theme-white

h-link-act, theme-light

h-link-act, theme-dark

h-link-act, theme-accent

h-link-act, theme-soft

h-link-act, theme-blur

+ стиль link-out

h-link-pas - цвет zero

h-link-pas, theme-white

h-link-pas, theme-light

h-link-pas, theme-dark

h-link-pas, theme-accent

h-link-pas, theme-soft

h-link-pas, theme-blur

+ стиль link-out

h-link-act цвет zero

h-link-act, theme-white

h-link-act, theme-light

h-link-act, theme-dark

h-link-act, theme-accent

h-link-act, theme-soft

h-link-act, theme-blur

+ pad или

h-link-pas - цвет zero

h-link-pas, theme-white

h-link-pas, theme-light

h-link-pas, theme-dark

h-link-pas, theme-accent

h-link-pas, theme-soft

h-link-pas, theme-blur

+ pad-top или

h-link-act цвет zero

h-link-act, theme-white

h-link-act, theme-light

h-link-act, theme-dark

h-link-act, theme-accent

h-link-act, theme-soft

h-link-act, theme-blur

+ shift или

h-link-pas, shift-left

h-link-pas, shift-right

h-link-pas, shift-up

h-link-pas, shift-down

+ pad-top или

h-link-act, shift-left

h-link-act, shift-right

h-link-act, shift-up

h-link-act, shift-down

+ shift или

scale-sm

h-link-pas, shift-left

h-link-pas, shift-right

h-link-pas, shift-up

h-link-pas, shift-down

+ pad-top или

scale-sm

h-link-act, shift-left

h-link-act, shift-right

h-link-act, shift-up

h-link-act, shift-down

Библиотека цветов

🎨 Primary Colors

В основном используется для оформления и выделения

Акцент (1) 700

--primary-700:

Акцент (1) 600

--primary-600:

Акцент (1) 700

--primary-500:

Акцент (1) 700

--primary-400:

Акцент (1) 700

--primary-300:

Акцент (1) 700

--primary-200:

🎨 Dark Colors

В основном используется для оформления и выделения

Акцент (1) 700

--dark-700:

Акцент (1) 600

--dark-600:

Акцент (1) 700

--dark-500:

Акцент (1) 700

--dark-400:

Акцент (1) 700

--dark-300:

Акцент (1) 700

--dark-200:

🎨 Light Colors

В основном используется для оформления и выделения

Акцент (1) 700

--light-700:

Акцент (1) 600

--light-600:

Акцент (1) 700

--light-500:

Акцент (1) 700

--light-400:

Акцент (1) 700

--light-300:

Акцент (1) 700

--light-200:

Библиотека иконок (маски)

Универсальная маска для основных иконок

Маска иконок

В эти плитки загружаем свои иконки если нужно заменить на новые иконки медиа.

Корзина

Избранное

Личный кабинет

Поиск

Универсальная маска для медиа иконок

Маска иконок

В эти плитки загружаем свои иконки если нужно заменить на новые иконки медиа.

Универсальная маска для стрелок

Маска иконок

В эти плитки загружаем свои иконки если нужно заменить на новые иконки медиа.

Стрелки лево право

Стрелки вверх и вниз

Стрелки углы

Основные стрелки

Стрелки лево право

Стрелки угол

Стрелки вниз

Стрелки в стороны

Иконки стрелки

Стрелка право

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Стрелка лево

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

.soc-icon

Данный класс отвечает за работу правильного отображения иконки

Класс для работы маски

.vk-icon

Данный класс отвечает за отображение определенного бренда из коллекции медиа.
Пример: .soc-icon, .vk-icon
Пример2: .soc-icon, .tg-icon
Пример3: .soc-icon, .youtube-icon

Иконка определенного бренда

.theme-brand

Данный класс отвечает за отображение темы с фирменными цветами бренда.
Пример1: .soc-icon, .vk-icon, .theme-brand
Пример2: .soc-icon, .vk-icon, .theme-light
Пример3: .soc-icon, .vk-icon, .theme-dark

Тема определенной иконки

.theme-light

Данный класс отвечает за отображение темы global style - light
Пример: .soc-icon, .vk-icon, .theme-light

Тема определенной иконки

.theme-dark

Данный класс отвечает за отображение темы global style - dark
Пример: .soc-icon, .vk-icon, .theme-dark

Тема определенной иконки

.theme-accent

Данный класс отвечает за отображение темы global style - accent
Пример: .soc-icon, .vk-icon, .theme-accent

Тема определенной иконки

.theme-blur

Данный класс отвечает за отображение темы global style - blur
Пример: .soc-icon, .vk-icon, .theme-blur

Тема определенной иконки

.style-fill

Данный класс отвечает за отображение стиля "заливка фона"
Пример: .soc-icon, .vk-icon, .theme-brand, .style-fill

Стиль отображения

.style-outline

Данный класс отвечает за отображение стиля "обводка фона"
Пример: .soc-icon, .vk-icon, .theme-brand, .style-outline

Стиль отображения

.vk-shadow

Данный класс отвечает за отображение теней в фирменном цвете бренда:
Пример: .soc-icon, .vk-icon, .theme-brand, .style-fill, .vk-shadow

Стиль отображения

Стандартные иконки

Избранное

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Корзина

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Поиск

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Личный кабинет

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: white

Тема: blur

.soc-icon

Данный класс отвечает за работу правильного отображения иконки

Класс для работы маски

.vk-icon

Данный класс отвечает за отображение определенного бренда из коллекции медиа.
Пример: .soc-icon, .vk-icon
Пример2: .soc-icon, .tg-icon
Пример3: .soc-icon, .youtube-icon

Иконка определенного бренда

.theme-brand

Данный класс отвечает за отображение темы с фирменными цветами бренда.
Пример1: .soc-icon, .vk-icon, .theme-brand
Пример2: .soc-icon, .vk-icon, .theme-light
Пример3: .soc-icon, .vk-icon, .theme-dark

Тема определенной иконки

.theme-light

Данный класс отвечает за отображение темы global style - light
Пример: .soc-icon, .vk-icon, .theme-light

Тема определенной иконки

.theme-dark

Данный класс отвечает за отображение темы global style - dark
Пример: .soc-icon, .vk-icon, .theme-dark

Тема определенной иконки

.theme-accent

Данный класс отвечает за отображение темы global style - accent
Пример: .soc-icon, .vk-icon, .theme-accent

Тема определенной иконки

.theme-blur

Данный класс отвечает за отображение темы global style - blur
Пример: .soc-icon, .vk-icon, .theme-blur

Тема определенной иконки

.style-fill

Данный класс отвечает за отображение стиля "заливка фона"
Пример: .soc-icon, .vk-icon, .theme-brand, .style-fill

Стиль отображения

.style-outline

Данный класс отвечает за отображение стиля "обводка фона"
Пример: .soc-icon, .vk-icon, .theme-brand, .style-outline

Стиль отображения

.vk-shadow

Данный класс отвечает за отображение теней в фирменном цвете бренда:
Пример: .soc-icon, .vk-icon, .theme-brand, .style-fill, .vk-shadow

Стиль отображения

Иконки (медиа)

Вконтакте

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Max

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Одноклассники

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

YouTube

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Instagram

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

Тема: brand

Тема: light

Тема: dark

Тема: accent

Тема: soft

Тема: blur

.soc-icon

Данный класс отвечает за работу правильного отображения иконки

Класс для работы маски

.vk-icon

Данный класс отвечает за отображение определенного бренда из коллекции медиа.
Пример: .soc-icon, .vk-icon
Пример2: .soc-icon, .tg-icon
Пример3: .soc-icon, .youtube-icon

Иконка определенного бренда

.theme-brand

Данный класс отвечает за отображение темы с фирменными цветами бренда.
Пример1: .soc-icon, .vk-icon, .theme-brand
Пример2: .soc-icon, .vk-icon, .theme-light
Пример3: .soc-icon, .vk-icon, .theme-dark

Тема определенной иконки

.theme-light

Данный класс отвечает за отображение темы global style - light
Пример: .soc-icon, .vk-icon, .theme-light

Тема определенной иконки

.theme-dark

Данный класс отвечает за отображение темы global style - dark
Пример: .soc-icon, .vk-icon, .theme-dark

Тема определенной иконки

.theme-accent

Данный класс отвечает за отображение темы global style - accent
Пример: .soc-icon, .vk-icon, .theme-accent

Тема определенной иконки

.theme-blur

Данный класс отвечает за отображение темы global style - blur
Пример: .soc-icon, .vk-icon, .theme-blur

Тема определенной иконки

.style-fill

Данный класс отвечает за отображение стиля "заливка фона"
Пример: .soc-icon, .vk-icon, .theme-brand, .style-fill

Стиль отображения

.style-outline

Данный класс отвечает за отображение стиля "обводка фона"
Пример: .soc-icon, .vk-icon, .theme-brand, .style-outline

Стиль отображения

.vk-shadow

Данный класс отвечает за отображение теней в фирменном цвете бренда:
Пример: .soc-icon, .vk-icon, .theme-brand, .style-fill, .vk-shadow

Стиль отображения

/