Цвет подложки прокрутки

scroll-backdrop-color

В SIMAI Framework с помощью модифкаторов можно управлять плавностью прокрутки элемента.

Классы

Класс Значение Цвет
scroll-bg-surface-highest background-color:
var(--sf-color--surface-highest);
scroll-bg-surface-high background-color:
var(--sf-color--surface-high);
scroll-bg-surface-default background-color:
var(--sf-color--surface-default);
scroll-bg-surface-low background-color:
var(--sf-color--surface-low);
scroll-bg-surface-lowest background-color:
var(--sf-color--surface-lowest);
scroll-bg-surface-inverse background-color:
var(--sf-color--surface-inverse);
scroll-bg-surface-variant background-color:
var(--sf-color--surface-variant);
scroll-bg-primary-default background-color:
var(--sf-color--primary-default);
scroll-bg-primary-tonal background-color:
var(--sf-color--primary-tonal);
scroll-bg-primary-inverse background-color:
var(--sf-color--primary-inverse);
scroll-bg-primary-contrast background-color:
var(--sf-color--primary-contrast);
scroll-bg-secondary-default background-color:
var(--sf-color--secondary-default);
scroll-bg-secondary-tonal background-color:
var(--sf-color--secondary-tonal);
scroll-bg-secondary-inverse background-color:
var(--sf-color--secondary-inverse);
scroll-bg-secondary-contrast background-color:
var(--sf-color--secondary-contrast);
scroll-bg-tertiary-default background-color:
var(--sf-color--tertiary-default);
scroll-bg-tertiary-tonal background-color:
var(--sf-color--tertiary-tonal);
scroll-bg-tertiary-inverse background-color:
var(--sf-color--tertiary-inverse);
scroll-bg-tertiary-contrast background-color:
var(--sf-color--tertiary-contrast);
scroll-bg-info-default background-color:
var(--sf-color--info-default);
scroll-bg-info-tonal background-color:
var(--sf-color--info-tonal);
scroll-bg-info-inverse background-color:
var(--sf-color--info-inverse);
scroll-bg-info-contrast background-color:
var(--sf-color--info-contrast);
scroll-bg-success-default background-color:
var(--sf-color--success-default);
scroll-bg-success-tonal background-color:
var(--sf-color--success-tonal);
scroll-bg-success-inverse background-color:
var(--sf-color--success-inverse);
scroll-bg-success-contrast background-color:
var(--sf-color--success-contrast);
scroll-bg-warning-default background-color:
var(--sf-color--warning-default);
scroll-bg-warning-tonal background-color:
var(--sf-color--warning-tonal);
scroll-bg-warning-inverse background-color:
var(--sf-color--warning-inverse);
scroll-bg-warning-contrast background-color:
var(--sf-color--warning-contrast);
scroll-bg-danger-default background-color:
var(--sf-color--danger-default);
scroll-bg-danger-tonal background-color:
var(--sf-color--danger-tonal);
scroll-bg-danger-inverse background-color:
var(--sf-color--danger-inverse);
scroll-bg-danger-contrast background-color:
var(--sf-color--danger-contrast);
scroll-bg-transparent background-color:
var(--sf-transparent);
scroll-bg-current background-color:
var(--sf-current);
scroll-bg-inherit background-color:
var(--sf-inherit);

Описание

Адаптивный модификатор. Задает поведение прокрутки элемента в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр.

Пример

Используйте модификатор scoll-bg-{color} для установки цвета фона.

kaadsfadfkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk 
<html class="scroll-bg-danger-default"><!-- ... --></html>

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