Дизайн и стилизация

Стили дополнительных состояний

23min

Что такое дополнительные состояния элементов

У элементов и виджетов, с которыми может взаимодействовать пользовать — например, меню, поля формы, аккордеон, табы — есть дополнительные состояния. Примеры: активное состояние чекбокса или радио-кнопки в форме, раскрытая вкладка аккордеона или таба.

Дополнительные состояния можно стилизовать, изменив их стандартные цвета. Например, можно убрать голубую подсветку для раскрытого айтема аккордеона, заменив ее цвет на нужный. Это позволит сохранить единый стиль в дизайне вашего сайта.

Как настроить стили дополнительных состояний

Решение на данный момент — стилизовать дополнительные состояния с помощью кастомного кода. Команда Taptop сейчас работает над фичей, которая позволит делать стилизацию с помощью настроек Редактора дизайна без использования кода.

Для настройки стилей дополнительных состояний с помощью кода нужно сделать следующие шаги:

1. Добавьте на холст виджет Embed.

Document image


2. Вставьте в виджет код.

Откройте поп-ап, дважды кликнув по виджету.

Document image


Вставьте в поп-ап код и нажмите кнопку «Сохранить».

Document image


3. Сохраните и опубликуйте страницу, а затем проверьте работу виджета.

Кастомный код работает только после публикации страницы, и его работа не отображается на предварительном просмотре. Поэтому для проверки откройте страницу, кликнув на ее URL-адрес после публикации.

Document image


Примеры кода для стилизации состояний

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

Вот рабочие примеры кода для различных элементов и виджетов:

Чекбокс

Код для чекбокса:

<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 — насыщенность шрифта метки

Проверка работы:

Document image


Радио

Код для радио-кнопки:

<style> .form__radio:checked ~ .form__radio-styled {  background-image: radial-gradient(circle at center center, #FF3B01 0px, #FF3B01 4px, transparent 4px, transparent 100px);  border-color: #FF3B01; }  </style>

Для активного состояния радио-кнопки можно указать:

  • background-image — цвет фона
  • border-color — цвет границ

Код для Radio Label (метки радио-кнопки):

<style> .form__radio:checked + .form__radio-styled + .form__label-text .text-block-wrap-div {   color: #FE825D;   font-weight: bold; } </style>

Для активного состояния радио-кнопки можно указать:

  • color — цвет текста метки
  • font-weight — насыщенность шрифта метки

Проверка работы:

Document image


Аккордеон

<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 — цвет текста в хединге

Проверка работы:

Document image


Табы

<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 — цвет текста хединга

Проверка работы:

Document image


Плейсхолдер (текст) в инпуте формы

<style> .form__input::placeholder { color: #FF3B01; } </style>

Для плейсхолдера можно указать:

  • color: цвет текста

Проверка работы:

Document image


Посещенная ссылка

<style>  .link:visited { color: #004275; } </style>

Чтобы изменить цвет посещенной ссылки по умолчанию можно указать:

  • color — цвет ссылки

Проверка работы (ссылка 3 — посещенная):

Document image


Посещенный Link block

<style>  .link-block:visited { color: #004275; } </style>

Чтобы изменить цвет посещенного Link block по умолчанию можно указать:

  • color — цвет текста

Проверка работы (Link block 3 — посещенный):

Document image


Слайдер (на основе Block list)

<style> .blocklist__pagination-item.is-active { background-image: none; background-color: #FF3B01; } </style>

Для активного bullet (элемента пагинации) можно указать:

  • background-color — цвет фона

Проверка работы:

Document image


Виджет Slider

<style> .slider__dot.is-current { background-image: none; background-color: #FF3B01; border-color: #FF3B01; } </style>

Для активного slider dot (элемента пагинации) можно указать:

  • background-color — цвет фона
  • border-color — цвет границы

Проверка работы:

Document image