Дизайн и стилизация
Стили дополнительных состояний

23min
Что такое дополнительные состояния элементов
У элементов и виджетов, с которыми может взаимодействовать пользовать — например, меню, поля формы, аккордеон, табы — есть дополнительные состояния. Примеры: активное состояние чекбокса или радио-кнопки в форме, раскрытая вкладка аккордеона или таба.
Дополнительные состояния можно стилизовать, изменив их стандартные цвета. Например, можно убрать голубую подсветку для раскрытого айтема аккордеона, заменив ее цвет на нужный. Это позволит сохранить единый стиль в дизайне вашего сайта.
Как настроить стили дополнительных состояний
Решение на данный момент — стилизовать дополнительные состояния с помощью кастомного кода. Команда Taptop сейчас работает над фичей, которая позволит делать стилизацию с помощью настроек Редактора дизайна без использования кода.
Для настройки стилей дополнительных состояний с помощью кода нужно сделать следующие шаги:
1. Добавьте на холст виджет Embed.
﻿
2. Вставьте в виджет код.
Откройте поп-ап, дважды кликнув по виджету.
﻿
Вставьте в поп-ап код и нажмите кнопку «Сохранить».
﻿
3. Сохраните и опубликуйте страницу, а затем проверьте работу виджета.
Кастомный код работает только после публикации страницы, и его работа не отображается на предварительном просмотре. Поэтому для проверки откройте страницу, кликнув на ее URL-адрес после публикации.
﻿
Примеры кода для стилизации состояний
Вы можете написать код сами или взять уже готовый.
Вот рабочие примеры кода для различных элементов и виджетов:
Чекбокс
Код для чекбокса: 
<style>
.form__checkbox:checked ~ .form__checkbox-styled {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.854 4.146a.5.5 0 1 0-.708.708l.708-.708ZM4.5 7.5l-.354.354a.5.5 0 0 0 .744-.042L4.5 7.5Zm4.39-4.688a.5.5 0 1 0-.78-.624l.78.624ZM1.146 4.854l3 3 .708-.708-3-3-.708.708ZM4.89 7.812l4-5-.78-.624-4 5 .78.624Z' fill='%23fff'/%3E%3C/svg%3E"), linear-gradient(#FF3B01 0%, #FF3B01 100%);
  border-color: #FF3B01;
} 
</style>
Для активного состояния чекбокса можно указать:
linear-gradient — цвет фона
border-color — цвет границ 
Код для Checkbox Label (метки чекбокса):
<style>
.form__checkbox:checked + .form__checkbox-styled + .form__label-text .text-block-wrap-div {
color: #FE825D;
font-weight: bold;
}
</style>
Для активного состояния чекбокса можно указать:
color — цвет текста метки
font-weight — насыщенность шрифта метки
Проверка работы:
﻿
Радио
Код для радио-кнопки: 
<style>
.form__radio:checked + .form__radio-styled {
background-image: radial-gradient(circle at center center, #FF3B01 0px, #FF3B01 4px, transparent 4px, transparent 100px);
border-right-color: #FF3B01;
border-top-color: #FF3B01;
border-bottom-color: #FF3B01;
border-left-color: #FF3B01;
}
</style>
Для активного состояния радио-кнопки можно указать:
background-image — цвет фона
border-color — цвет границ
Код для Radio Label (метки радио-кнопки):
<style>
.form__radio:checked + .form__radio-styled + .form__label-text .text-block-wrap-div {
color: #FF3B01;
font-weight: bold;
</style>
Для активного состояния радио-кнопки можно указать:
color — цвет текста метки
font-weight — насыщенность шрифта метки
Проверка работы:
﻿
Аккордеон
<style>
.accordion__item.is-opened .accordion__header { 
background-image: none; 
background-color: #FF3B01; }
.accordion__item.is-opened .text-subtitle { 
color: #FFFFFF; } 
</style>
Для открытого айтема можно указать:
background-color — цвет фона хединга
color — цвет текста в хединге
Проверка работы:
﻿
Табы
<style>
.tabs__item.is-opened { 
border-color: white; 
border-bottom-color: #FF3B01; 
border-bottom-width: 3px; 
background: white; }
.tabs__item.is-opened .text-block-wrap-div { 
color: #000000; }
</style>
Для открытого айтема можно указать: 
border-color — цвет границ хединга
border-bottom-color — цвет нижней границы хединга
border-bottom-width — ширина нижней границы хединга
background — цвет фона хединга
color — цвет текста хединга
Проверка работы:
﻿
Плейсхолдер (текст) в инпуте формы
<style> 
.form__input::placeholder { color: #FF3B01; } 
</style>
Для плейсхолдера можно указать:
color: цвет текста
Проверка работы:
﻿
Посещенная ссылка
<style>
.link:visited {
color: #004275;
}
</style>
Чтобы изменить цвет посещенной ссылки по умолчанию можно указать:
color — цвет ссылки
Проверка работы (ссылка 3 — посещенная):
﻿
Посещенный Link block
<style>
.link-block:visited {
color: #004275;
}
</style>
Чтобы изменить цвет посещенного Link block по умолчанию можно указать:
color — цвет текста
Проверка работы (Link block 3 — посещенный):
﻿
Слайдер (на основе Block list)
<style>
.blocklist__pagination-item.is-active {
background-image: none;
background-color: #FF3B01;
}
</style>
Для активного bullet (элемента пагинации) можно указать:
background-color — цвет фона
Проверка работы:
﻿
Виджет Slider
<style>
.slider__dot.is-current {
background-image: none;
background-color: #FF3B01;
border-color: #FF3B01;
}
</style>
Для активного slider dot (элемента пагинации) можно указать:
background-color — цвет фона
border-color — цвет границы
Проверка работы:
﻿
﻿