forms: begin

src/_blocks_library.html

@@ -267,6 +267,94 @@
         <input type="file">
       </fieldset>
     </form>
+    <h2 id="form-style">Стилизованные формы</h2>
+    <p>Стилизация: БЭМ-блоки <code>.field</code>, <code>.form</code> и модификаторы. Опирается на стилизацию форм по умолчанию.</p>
+    <div class="row">
+      <div class="col-md-6">
+        <form action="" class="form">
+          <fieldset>
+            <legend>Варианты разметки и модификаторы</legend>
+            <div class="field">
+              <label class="field__name" for="field_id_001">Название поля</label>
+              <div class="field__input-wrap">
+                <input class="field__input-text" id="field_id_001" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
+              </div>
+            </div>
+            <label class="field">
+              <div class="field__name">Название поля</div>
+              <div class="field__input-wrap">
+                <input class="field__input-text" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+              </div>
+            </label>
+            <label class="field  field--error">
+              <div class="field__name">Ошибочное поле</div>
+              <div class="field__input-wrap">
+                <input class="field__input-text" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+              </div>
+            </label>
+            <label class="field  field--success">
+              <div class="field__name">Корректно заполненное поле</div>
+              <div class="field__input-wrap">
+                <input class="field__input-text" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+              </div>
+            </label>
+            <div class="field  field--actions">
+              <button class="btn">Отправить</button>
+            </div>
+          </fieldset>
+        </form>
+      </div>
+      <div class="col-md-6">
+        <form action="" class="form form--horizontal">
+          <fieldset>
+            <legend>Горизонтальная форма</legend>
+            <div class="field">
+              <label class="field__name" for="field_id_001">Название поля</label>
+              <div class="field__input-wrap">
+                <input class="field__input-text" id="field_id_001" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
+              </div>
+            </div>
+            <label class="field">
+              <div class="field__name">Название поля</div>
+              <div class="field__input-wrap">
+                <input class="field__input-text" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+              </div>
+            </label>
+            <div class="field  field--actions">
+              <button class="btn">Отправить</button>
+            </div>
+          </fieldset>
+        </form>
+        <form action="" class="form form--inline">
+          <fieldset>
+            <legend>Инлайн форма</legend>
+            <div class="field">
+              <label class="field__name" for="field_id_001">Название поля</label>
+              <div class="field__input-wrap">
+                <input class="field__input-text" id="field_id_001" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Лейбл отдельно, обёртка — <code>&lt;div&gt;</code>, связь с лейблом по <code>id</code>.</div>
+              </div>
+            </div>
+            <label class="field">
+              <div class="field__name">Название поля</div>
+              <div class="field__input-wrap">
+                <input class="field__input-text" type="text" placeholder="input[type=text]">
+                <div class="field__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
+              </div>
+            </label>
+            <div class="field  field--actions">
+              <button class="btn">Отправить</button>
+            </div>
+          </fieldset>
+        </form>
+      </div>
+    </div>
   </section>
 
   <section class="blocks-library__item">

src/img/form_field_bg/check.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#5cb85c" d="M26.11 8.844q0 .625-.44 1.062L12.234 23.344q-.438.438-1.062.438t-1.06-.438l-7.782-7.78q-.438-.44-.438-1.063t.438-1.06l2.125-2.126q.438-.438 1.062-.438t1.062.438l4.594 4.61L21.42 5.656q.44-.438 1.063-.438t1.062.437l2.125 2.125q.438.437.438 1.062z"/></svg>

src/img/form_field_bg/checkbox--checked.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M9.984 17.016l9-9-1.406-1.453-7.594 7.594-3.563-3.563L5.016 12zm9-14.016q.844 0 1.43.61T21 5.014v13.97q0 .796-.586 1.405t-1.43.61H5.014q-.843 0-1.43-.61T3 18.984V5.014q0-.796.585-1.405T5.015 3h13.97z"/></svg>

src/img/form_field_bg/checkbox.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M18.984 3q.797 0 1.406.61T21 5.014v13.97q0 .796-.61 1.405t-1.406.61H5.014q-.796 0-1.405-.61T3 18.984V5.014q0-.796.61-1.405T5.014 3h13.97zm0 2.016H5.014v13.97h13.97V5.015z"/></svg>

src/img/form_field_bg/chevron-down--error.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#d9534f" d="M26.297 12.625L14.703 24.203q-.297.297-.703.297t-.703-.297L1.703 12.625q-.297-.297-.297-.71t.297-.712l2.594-2.578q.297-.297.703-.297t.703.297L14 16.922l8.297-8.297q.297-.297.703-.297t.703.297l2.594 2.578q.297.297.297.71t-.297.712z"/></svg>
\ No newline at end of file

src/img/form_field_bg/chevron-down--success.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#5cb85c" d="M26.297 12.625L14.703 24.203q-.297.297-.703.297t-.703-.297L1.703 12.625q-.297-.297-.297-.71t.297-.712l2.594-2.578q.297-.297.703-.297t.703.297L14 16.922l8.297-8.297q.297-.297.703-.297t.703.297l2.594 2.578q.297.297.297.71t-.297.712z"/></svg>
\ No newline at end of file

src/img/form_field_bg/chevron-down.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path fill="#2D2D2D" d="M26.297 12.625L14.703 24.203q-.297.297-.703.297t-.703-.297L1.703 12.625q-.297-.297-.297-.71t.297-.712l2.594-2.578q.297-.297.703-.297t.703.297L14 16.922l8.297-8.297q.297-.297.703-.297t.703.297l2.594 2.578q.297.297.297.71t-.297.712z"/></svg>

src/img/form_field_bg/close.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="22" height="28" viewBox="0 0 22 28"><path fill="#d9534f" d="M20.28 20.656q0 .625-.437 1.062l-2.125 2.125q-.438.438-1.062.438t-1.062-.437L11 19.25l-4.594 4.593q-.438.438-1.062.438t-1.062-.437l-2.125-2.125q-.438-.438-.438-1.062t.437-1.062L6.75 15l-4.593-4.594q-.438-.438-.438-1.062t.437-1.062l2.125-2.125q.438-.438 1.062-.438t1.062.437L11 10.75l4.594-4.593q.438-.438 1.062-.438t1.062.437l2.125 2.125q.438.438.438 1.062t-.437 1.062L15.25 15l4.593 4.594q.438.438.438 1.062z"/></svg>

src/img/form_field_bg/radiobutton--checked.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M12 20.016q3.28 0 5.648-2.367T20.015 12t-2.367-5.647T12 3.986 6.352 6.353 3.985 12t2.367 5.65T12 20.015zm0-18q4.125 0 7.055 2.93T21.985 12t-2.93 7.056T12 21.986t-7.055-2.93T2.015 12t2.93-7.054T12 2.016zm0 4.968q2.063 0 3.54 1.477T17.015 12t-1.477 3.54T12 17.015 8.46 15.54 6.985 12 8.46 8.46 12 6.985z"/></svg>

src/img/form_field_bg/radiobutton.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#2D2D2D" d="M12 20.016q3.28 0 5.648-2.367T20.015 12t-2.367-5.647T12 3.986 6.352 6.353 3.985 12t2.367 5.65T12 20.015zm0-18q4.125 0 7.055 2.93T21.985 12t-2.93 7.056T12 21.986t-7.055-2.93T2.015 12t2.93-7.054T12 2.016z"/></svg>

src/less/blocks/field.less

+.field {
+  display: block;
+  margin-bottom: (@line-height / 2);
+
+  &__name {
+    font-weight: 700;
+    display: block;
+    margin-bottom: round(@line-height / 4, 2);
+  }
+
+  &__input-wrap {}
+
+  &__input-text {
+    margin-bottom: round(@line-height / 4, 2);
+  }
+
+  &__help-text {
+    font-size: @font-size--small;
+    color: @text-color--muted;
+  }
+}

src/less/blocks/form.less

+.form {
+  &:not(:last-child) {
+    margin-bottom: @line-height;
+  }
+}

src/less/global_scaffolding.less

@@ -62,6 +62,7 @@ html {
   -ms-overflow-style: scrollbar;
   -ms-text-size-adjust: 100%;
   min-width: 320px;
+  site: be cool; // :)
 }
 
 body {
@@ -350,6 +351,11 @@ input[type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 
+::placeholder {
+  color: @text-color--muted;
+  opacity: 1;
+}
+
 textarea {
   resize: vertical;
 }
@@ -366,9 +372,13 @@ legend {
   width: 100%;
   padding: 0;
   border: 0;
-  margin-bottom: .5em;
-  font-size: 1em;
-  line-height: inherit;
+  margin-top: (@line-height / 2);
+  margin-bottom: (@line-height / 2);
+  font-size: @font-size--h4;
+  font-family: @font-family--headings;
+  font-weight: 700;
+  line-height: 1.4;
+  color: currentColor;
 }
 
 // Добавочная стилизация по умолчанию
@@ -405,7 +415,7 @@ select[multiple] {
 }
 
 input[type="color"] {
-  width: auto;
+  max-width: 100px;
 }
 
 input[type="range"] {

src/less/style.less

@@ -6,3 +6,5 @@
 
 @import "blocks/table-responsive.less";
 @import "blocks/btn.less";
+@import "blocks/form.less";
+@import "blocks/field.less";

src/less/variables.less

@@ -33,10 +33,10 @@
 @font-size--h1:               3.6rem;
 @font-size--h2:               3rem;
 @font-size--h3:               2.4rem;
-@font-size--h4:               1.6rem;
+@font-size--h4:               2.0rem;
 @font-size--h5:               1.6rem;
 @font-size--h6:               1.6rem;
-@font-size--small:            1.1rem;
+@font-size--small:            80%;
 
 @line-height:                 1.375em;