{% extends '_layouts/_main.twig' %}
{% block content %}

	<h1>Поле ввода</h1>

	<div class="desys-panel">
		<div class="desys-panel__head">
			<div class="desys-header-options">
				<ul class="desys-header-options__view">
					<li class="active"><a href="#"><i class="fa fa-desktop"></i></a></li>
					<li><a href="#"><i class="fa fa-mobile"></i></a></li>
				</ul>
				<ul class="desys-header-options__params">
					<li><label><input type="checkbox" name="" value="" /> HTML-код</label></li>
					<li><label><input type="checkbox" name="" value="" /> Токены</label></li>
					<li><label><input type="checkbox" name="" value="" /> Описание</label></li>
					<li><label><input type="checkbox" name="" value="" /> Вид</label></li>
				</ul>
			</div>
		</div>
		<div class="desys-panel__body">
			<h3>Поле ввода</h3>
			Используется в попапах с шириной не меньше 680px и в больших формах. Если ширина экрана меньше 768px, лэйбл встаёт над полем ввода.
		</div>
		<div class="desys-panel__body">
			{#example start#}
			<div class="form-group max-w-400">
				<div class="form-label">Ваше имя:</div>
				<div class="form-field">
					<input class="form-control" type="text" name="real_name" value="" />
				</div>
			</div>
			{#example end#}
		</div>
		<div class="desys-panel__body">
			<pre><code>&lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;form-label&quot;&gt;Ваше имя:&lt;/div&gt;
    &lt;div class=&quot;form-field&quot;&gt;
        &lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;real_name&quot; value=&quot;&quot; autocomplete=&quot;given-name&quot; /&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
		</div>
		<div class="desys-panel__table">
			<table>
				<tr>
					<td><span class="color-blue">Шрифт названия</span></td>
					<td><span class="color-red">fontControllabel</span></td>
					<td>
						<div class="color-green">fontSize: 13px;</div>
						<div class="color-green">lineHeight: 20px;</div>
						<div class="color-green">fontWeight: 700;</div>
						<div class="color-green">fontFamily: Helvetica, Arial, sans-serif;</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Цвет шрифта</span></td>
					<td><span class="color-red">colorText</span></td>
					<td>
						<div class="color-green">normal: #333333;</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Отступ от названия до поля ввода</span></td>
					<td><span class="color-red">fontControl</span></td>
					<td>
						<div class="color-green">16px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Шрифт</span></td>
					<td><span class="color-red">paddingControlHorizontal</span></td>
					<td>
						<div class="color-green">fontSize: 15px;</div>
						<div class="color-green">lineHeight: 20px;</div>
						<div class="color-green">fontWeight: 400;</div>
						<div class="color-green">fontFamily: Helvetica, Arial, sans-serif;</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Отступ внутри (по-горизонтали)</span></td>
					<td><span class="color-red">paddingControlHorizontal</span></td>
					<td>
						<div class="color-green">12px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Высота поля ввода</span></td>
					<td><span class="color-red">sizeControlHeight</span></td>
					<td>
						<div class="color-green">48px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Радиус скругления</span></td>
					<td><span class="color-red">sizeBorderRadius</span></td>
					<td>
						<div class="color-green">4px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Толщина границы</span></td>
					<td><span class="color-red">sizeBorderWidth</span></td>
					<td>
						<div class="color-green">1px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Цвет границы</span></td>
					<td><span class="color-red">colorBorder</span></td>
					<td>
						<div class="color-green">normal: rgba(0,0,0,0.12)</div>
						<div class="color-green">hover: rgba(0,0,0,0.24)</div>
						<div class="color-green">active: rgba(0,0,0,0.48)</div>
						<div class="color-green">focus: rgba(0,0,0,0.24)</div>
					</td>
				</tr>
			</table>
		</div>
	</div>

	<div class="desys-panel">
		<div class="desys-panel__head">
			<div class="desys-header-options">
				<ul class="desys-header-options__view">
					<li class="active"><a href="#"><i class="fa fa-desktop"></i></a></li>
					<li><a href="#"><i class="fa fa-mobile"></i></a></li>
				</ul>
				<ul class="desys-header-options__params">
					<li><label><input type="checkbox" name="" value="" /> HTML-код</label></li>
					<li><label><input type="checkbox" name="" value="" /> Токены</label></li>
					<li><label><input type="checkbox" name="" value="" /> Описание</label></li>
					<li><label><input type="checkbox" name="" value="" /> Вид</label></li>
				</ul>
			</div>
		</div>
		<div class="desys-panel__body">
			<h3>Поле ввода</h3>
			Используется в попапах с шириной не меньше 680px и в больших формах. Если ширина экрана меньше 768px, лэйбл встаёт над полем ввода.
		</div>
		<div class="desys-panel__body">
			{#example start#}
			<div class="form-group max-w-400">
				<div class="form-label">Ваше имя:</div>
				<div class="form-field">
					<input class="form-control" type="text" name="real_name" value="" />
				</div>
			</div>
			{#example end#}
		</div>
		<div class="desys-panel__body">
			<pre><code>&lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;form-label&quot;&gt;Ваше имя:&lt;/div&gt;
    &lt;div class=&quot;form-field&quot;&gt;
        &lt;input class=&quot;form-control&quot; type=&quot;text&quot; name=&quot;real_name&quot; value=&quot;&quot; autocomplete=&quot;given-name&quot; /&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
		</div>
		<div class="desys-panel__table">
			<table>
				<tr>
					<td><span class="color-blue">Шрифт названия</span></td>
					<td><span class="color-red">fontControllabel</span></td>
					<td>
						<div class="color-green">fontSize: 13px;</div>
						<div class="color-green">lineHeight: 20px;</div>
						<div class="color-green">fontWeight: 700;</div>
						<div class="color-green">fontFamily: Helvetica, Arial, sans-serif;</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Цвет шрифта</span></td>
					<td><span class="color-red">colorText</span></td>
					<td>
						<div class="color-green">normal: #333333;</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Отступ от названия до поля ввода</span></td>
					<td><span class="color-red">fontControl</span></td>
					<td>
						<div class="color-green">16px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Шрифт</span></td>
					<td><span class="color-red">paddingControlHorizontal</span></td>
					<td>
						<div class="color-green">fontSize: 15px;</div>
						<div class="color-green">lineHeight: 20px;</div>
						<div class="color-green">fontWeight: 400;</div>
						<div class="color-green">fontFamily: Helvetica, Arial, sans-serif;</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Отступ внутри (по-горизонтали)</span></td>
					<td><span class="color-red">paddingControlHorizontal</span></td>
					<td>
						<div class="color-green">12px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Высота поля ввода</span></td>
					<td><span class="color-red">sizeControlHeight</span></td>
					<td>
						<div class="color-green">48px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Радиус скругления</span></td>
					<td><span class="color-red">sizeBorderRadius</span></td>
					<td>
						<div class="color-green">4px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Толщина границы</span></td>
					<td><span class="color-red">sizeBorderWidth</span></td>
					<td>
						<div class="color-green">1px</div>
					</td>
				</tr>
				<tr>
					<td><span class="color-blue">Цвет границы</span></td>
					<td><span class="color-red">colorBorder</span></td>
					<td>
						<div class="color-green">normal: rgba(0,0,0,0.12)</div>
						<div class="color-green">hover: rgba(0,0,0,0.24)</div>
						<div class="color-green">active: rgba(0,0,0,0.48)</div>
						<div class="color-green">focus: rgba(0,0,0,0.24)</div>
					</td>
				</tr>
			</table>
		</div>
	</div>

{% endblock %}