Толщина оформление текста
text-decoration-thickness
В SIMAI Framework с помощью модификаторов толщины оформления текста можно изменить толщину линии подчеркивания текста.
Классы
| Класс | Значение |
|---|---|
decoration-auto |
text-decoration-thickness: auto |
decoration-font |
text-decoration-thickness: font-font |
decoration-0 |
text-decoration-thickness: var(--sf-a0) |
decoration-1 |
text-decoration-thickness: var(--sf-a1) |
decoration-2 |
text-decoration-thickness: var(--sf-a2) |
decoration-3 |
text-decoration-thickness: var(--sf-a3) |
decoration-4 |
text-decoration-thickness: var(--sf-a4) |
Описание
Адаптивный модификатор. Изменяет толщину оформления текста в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
- Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
decoration-decoration-auto- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decoration-decoration-font- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decoration-decoration-0- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decoration-decoration-1- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decoration-decoration-2- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decoration-decoration-3- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
decoration-decoration-4- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p class="decoration-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="decoration-font">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="decoration-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="decoration-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="decoration-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="decoration-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="decoration-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>