Commit ec74d6c6 authored by Nikolay Gromov's avatar Nikolay Gromov

Унифицировал описание модификаторов в библиотеке компонентов

parent 8b24cedc
...@@ -2397,7 +2397,7 @@ ...@@ -2397,7 +2397,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение размера</h2> <h2 class="blocks-library__sub-item-title">Увеличение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Модификатор <code>field-select--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
...@@ -2459,7 +2459,7 @@ ...@@ -2459,7 +2459,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшение размера</h2> <h2 class="blocks-library__sub-item-title">Уменьшение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Модификатор <code>field-select--sm</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
...@@ -2568,7 +2568,7 @@ ...@@ -2568,7 +2568,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">С дополнительным элементом-линейкой</h2> <h2 class="blocks-library__sub-item-title">С дополнительным элементом-линейкой</h2>
<p>Стилизация дополнительного элемента-линейки — отдельный less-файл.</p> <p>Дополнительный элемент <code>field-range__line</code>, отдельный less-файл.</p>
<p>Линейка добавляется вставкой в разметку дополнительных тегов. Текстовые значения берутся из data-атрибутов. Первый элемент линейки позиционируется абсолютно (не вызывает увеличения длины шкалы). Второй и далее элементы распределяются равномерно, занимают одинаковое количество места в «строке».</p> <p>Линейка добавляется вставкой в разметку дополнительных тегов. Текстовые значения берутся из data-атрибутов. Первый элемент линейки позиционируется абсолютно (не вызывает увеличения длины шкалы). Второй и далее элементы распределяются равномерно, занимают одинаковое количество места в «строке».</p>
<p class="alert alert--danger">Чтобы двигающийся элемент чётко попадал в линейку, шаг элемента должен быть достаточно мелким и/или линейка должна быть достаточно частой или шаг должен строго соответствовать линейке.</p> <p class="alert alert--danger">Чтобы двигающийся элемент чётко попадал в линейку, шаг элемента должен быть достаточно мелким и/или линейка должна быть достаточно частой или шаг должен строго соответствовать линейке.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
...@@ -2638,7 +2638,7 @@ ...@@ -2638,7 +2638,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение размера</h2> <h2 class="blocks-library__sub-item-title">Увеличение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Модификатор <code>field-range--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
...@@ -2706,7 +2706,7 @@ ...@@ -2706,7 +2706,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшение размера</h2> <h2 class="blocks-library__sub-item-title">Уменьшение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Модификатор <code>field-range--sm</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
...@@ -2816,7 +2816,7 @@ ...@@ -2816,7 +2816,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение размера</h2> <h2 class="blocks-library__sub-item-title">Увеличение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Модификатор <code>field-file--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="field-file field-file--lg"> <div class="field-file field-file--lg">
<div class="field-file__name">Выбор файлов</div> <div class="field-file__name">Выбор файлов</div>
...@@ -2846,7 +2846,7 @@ ...@@ -2846,7 +2846,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Уменьшение размера</h2> <h2 class="blocks-library__sub-item-title">Уменьшение размера</h2>
<p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Модификатор <code>field-file--sm</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<div class="field-file field-file--sm"> <div class="field-file field-file--sm">
<div class="field-file__name">Выбор файлов</div> <div class="field-file__name">Выбор файлов</div>
...@@ -3024,7 +3024,7 @@ ...@@ -3024,7 +3024,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h1 class="blocks-library__sub-item-title">Горизонтальное расположение названий и полей</h1> <h1 class="blocks-library__sub-item-title">Горизонтальное расположение названий и полей</h1>
<p>Только начиная с SM ширины. Модификатор. Отдельный less-файл.</p> <p>Только начиная с SM ширины. Модификатор <code>form--horizontal</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<form action="" class="form form--horizontal"> <form action="" class="form form--horizontal">
<label class="field-text"> <label class="field-text">
...@@ -3203,7 +3203,7 @@ ...@@ -3203,7 +3203,7 @@
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h1 class="blocks-library__sub-item-title">Форма в строку</h1> <h1 class="blocks-library__sub-item-title">Форма в строку</h1>
<p>Только начиная с SM ширины. Модификатор. Отдельный less-файл.</p> <p>Только начиная с SM ширины. Модификатор <code>form--line</code>, отдельный less-файл.</p>
<p class="alert alert--danger">ВНИМАНИЕ! Поскольку все отступы сделаны в em, при наличии названий полей на некоторых больших размерах шрифта возможно несоответствие (1-2px) базовой линии названия и базовой линии текста в поле.</p> <p class="alert alert--danger">ВНИМАНИЕ! Поскольку все отступы сделаны в em, при наличии названий полей на некоторых больших размерах шрифта возможно несоответствие (1-2px) базовой линии названия и базовой линии текста в поле.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<form action="" class="form form--line"> <form action="" class="form form--line">
...@@ -3444,7 +3444,7 @@ ...@@ -3444,7 +3444,7 @@
</div> </div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Увеличение и уменьшение модификаторами</h2> <h2 class="blocks-library__sub-item-title">Увеличение и уменьшение модификаторами</h2>
<p>Размеры изменены благодаря модификатору. Модификаторы меняют <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p> <p>Модификатор <code>btn--lg</code>, отдельный less-файл.</p>
<div class="js-font-resizer"> <div class="js-font-resizer">
<p> <p>
<a href="" class="btn btn--lg">Cсылка (lg)</a> <a href="" class="btn btn--lg">Cсылка (lg)</a>
...@@ -3474,6 +3474,7 @@ ...@@ -3474,6 +3474,7 @@
</div> </div>
<div class="blocks-library__sub-item"> <div class="blocks-library__sub-item">
<h2 class="blocks-library__sub-item-title">Блочные кнопки</h2> <h2 class="blocks-library__sub-item-title">Блочные кнопки</h2>
<p>Модификатор <code>btn--block</code>, отдельный less-файл.</p>
<p> <p>
<a href="" class="btn btn--block">Cсылка</a> <a href="" class="btn btn--block">Cсылка</a>
<input type="submit" class="btn btn--block btn--main" value="Input"> <input type="submit" class="btn btn--block btn--main" value="Input">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment