forms

src/_blocks_library.html

@@ -333,7 +333,7 @@
               <div class="field-checkbox__title">Собственные флажки</div>
               <div class="field-checkbox__input-wrap">
                 <label class="field-checkbox__name">
-                  <input class="field-checkbox__input" type="checkbox">
+                  <input class="field-checkbox__input" type="checkbox" checked>
                   <span class="field-checkbox__name-text">Флажок</span>
                 </label>
                 <label class="field-checkbox__name">
@@ -347,11 +347,11 @@
               <div class="field-radio__title">Собственные радиокнопки</div>
               <div class="field-radio__input-wrap">
                 <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
+                  <input class="field-radio__input" type="radio" name="two" checked>
                   <span class="field-radio__name-text">Радиокнопка</span>
                 </label>
                 <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
+                  <input class="field-radio__input" type="radio" name="two">
                   <span class="field-radio__name-text">Радиокнопка</span>
                 </label>
                 <div class="field-radio__help-text">Изображения в формате SVG, вписываются в CSS-файл функцией <code>data-uri()</code> компилятора LESS.</div>
@@ -428,11 +428,11 @@
               <div class="field-radio__title"></div>
               <div class="field-radio__input-wrap">
                 <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
+                  <input class="field-radio__input" type="radio" name="one1">
                   <span class="field-radio__name-text">Радиокнопка</span>
                 </label>
                 <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
+                  <input class="field-radio__input" type="radio" name="one1">
                   <span class="field-radio__name-text">Радиокнопка</span>
                 </label>
                 <div class="field-radio__help-text">Нет общего названия, но оставлен пустой <code>div</code> для него.</div>
@@ -441,11 +441,11 @@
             <div class="field-radio">
               <div class="field-radio__input-wrap">
                 <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
+                  <input class="field-radio__input" type="radio" name="two1">
                   <span class="field-radio__name-text">Радиокнопка</span>
                 </label>
                 <label class="field-radio__name">
-                  <input class="field-radio__input" type="radio" name="one">
+                  <input class="field-radio__input" type="radio" name="two1">
                   <span class="field-radio__name-text">Радиокнопка</span>
                 </label>
                 <div class="field-radio__help-text">Нет общего названия и отсутствует пустой <code>div</code> для него.</div>
@@ -465,13 +465,6 @@
                 <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
               </div>
             </label>
-            <label class="field-file">
-              <div class="field-file__name">Название поля</div>
-              <div class="field-file__input-wrap">
-                <input class="field-file__input" type="file">
-                <div class="field-file__help-text">Обёртка — <code>&lt;label&gt;</code>.</div>
-              </div>
-            </label>
             <div class="field-actions">
               <button class="btn">Отправить</button>
             </div>

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>
\ No newline at end of file

src/less/blocks/field-checkbox--custom.less

+.field-checkbox {
+
+  &--custom {
+
+    .field-checkbox__name {
+      padding-left: 1.6em;
+    }
+
+    .field-checkbox__help-text {
+      padding-left: 1.9em; // 1.6 + 0.3
+    }
+
+    .field-checkbox__input {
+      position: absolute;
+      opacity: 0;
+
+      & + .field-checkbox__name-text:before {
+        width: 1.13em;
+        height: 1.13em;
+        position: absolute;
+        top: .1em;
+        left: 0;
+        content: '';
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox.svg');
+      }
+
+      &:checked + .field-checkbox__name-text:before {
+        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox--checked.svg');
+      }
+
+      &:focus + .field-checkbox__name-text:before {
+        .focus();
+      }
+    }
+  }
+}

src/less/blocks/field-checkbox.less

@@ -2,40 +2,6 @@
   display: block;
   margin-bottom: (@line-height / 2);
 
-  &--custom {
-
-    .field-checkbox__name {
-      padding-left: 1.6em;
-    }
-
-    .field-checkbox__help-text {
-      padding-left: 1.9em; // 1.6 + 0.3
-    }
-
-    .field-checkbox__input {
-      position: absolute;
-      opacity: 0;
-
-      & + .field-checkbox__name-text:before {
-        width: 1.125em;
-        height: 1.125em;
-        position: absolute;
-        top: .1em;
-        left: 0;
-        content: '';
-        background-size: 100%;
-        background-repeat: no-repeat;
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox.svg');
-      }
-
-      &:checked + .field-checkbox__name-text:before {
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/checkbox--checked.svg');
-      }
-    }
-  }
-
-
-
   &__title {
     font-weight: 700;
     line-height: 1.2em;

src/less/blocks/field-radio--custom.less

+.field-radio {
+
+  &--custom {
+
+    .field-radio__name {
+      padding-left: 1.6em;
+    }
+
+    .field-radio__help-text {
+      padding-left: 1.9em; // 1.6 + 0.3
+    }
+
+    .field-radio__input {
+      position: absolute;
+      opacity: 0;
+
+      & + .field-radio__name-text:before {
+        width: 1.125em;
+        height: 1.125em;
+        position: absolute;
+        top: .1em;
+        left: 0;
+        content: '';
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton.svg');
+      }
+
+      &:checked + .field-radio__name-text:before {
+        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton--checked.svg');
+      }
+
+      &:focus + .field-radio__name-text:before {
+        .focus();
+      }
+    }
+  }
+}

src/less/blocks/field-radio.less

@@ -2,38 +2,6 @@
   display: block;
   margin-bottom: (@line-height / 2);
 
-  &--custom {
-
-    .field-radio__name {
-      padding-left: 1.6em;
-    }
-
-    .field-radio__help-text {
-      padding-left: 1.9em; // 1.6 + 0.3
-    }
-
-    .field-radio__input {
-      position: absolute;
-      opacity: 0;
-
-      & + .field-radio__name-text:before {
-        width: 1.125em;
-        height: 1.125em;
-        position: absolute;
-        top: .1em;
-        left: 0;
-        content: '';
-        background-size: 100%;
-        background-repeat: no-repeat;
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton.svg');
-      }
-
-      &:checked + .field-radio__name-text:before {
-        background-image: data-uri('image/svg+xml;charset=UTF-8', '../img/form_field_bg/radiobutton--checked.svg');
-      }
-    }
-  }
-
   &__title {
     font-weight: 700;
     line-height: 1.2em;

src/less/blocks/form.less

@@ -5,38 +5,51 @@
 
   &--horizontal {
 
-    .field-text,
-    .field-checkbox,
-    .field-radio,
-    .field-select,
-    .field-file {
-      display: flex;
-    }
+    @media (min-width: @screen-sm) {
 
-    .field-text__name,
-    .field-select__name {
-      width: 15rem;
-      padding-top: .42em;
-      padding-right: .6em;
-      margin-bottom: 0;
-    }
+      .field-text,
+      .field-checkbox,
+      .field-radio,
+      .field-select,
+      .field-file {
+        display: flex;
+      }
 
-    .field-checkbox__title,
-    .field-radio__title,
-    .field-file__name {
-      width: 15rem;
-      padding-right: .6em;
-      margin-bottom: 0;
-    }
+      .field-text__name,
+      .field-select__name {
+        width: 15rem;
+        min-width: 15rem;
+        padding-top: .42em;
+        padding-right: .6em;
+        margin-bottom: 0;
+      }
+
+      .field-checkbox__title,
+      .field-radio__title,
+      .field-file__name {
+        width: 15rem;
+        min-width: 15rem;
+        padding-right: .6em;
+        margin-bottom: 0;
+      }
+
+      .field-text__input-wrap,
+      .field-select__select-wrap,
+      .field-file__input-wrap {
+        flex-grow: 1;
+      }
+
+      .field-actions {
+        padding-left: 15rem;
+      }
 
-    .field-text__input-wrap,
-    .field-select__select-wrap,
-    .field-file__input-wrap {
-      flex-grow: 1;
     }
 
-    .field-actions {
-      padding-left: 15rem;
+    .field-checkbox__title,
+    .field-radio__title {
+      &:empty {
+        margin-bottom: 0;
+      }
     }
   }
 }

src/less/global_scaffolding.less

@@ -430,11 +430,8 @@ input[readonly] {
 
 select,
 textarea,
-input:not([type="submit"]),
-input:not([type="button"]),
-input:not([type="reset"]) {
+input {
   &:focus {
-    outline: fade(@color-main, 30%) solid 2px;
-    outline-offset: -1px;
+    .focus();
   }
 }

src/less/mixins/btn-mixins.less

@@ -38,6 +38,8 @@
   &:active,
   &:focus {
     text-decoration: none;
+    outline: 0;
+    box-shadow: none;
   }
 
   // &--disabled,

src/less/mixins/focus-mixin.less

+.focus() {
+  outline: 0;
+  box-shadow: 0 0 0 2px fade(@color-main, 30%);
+}

src/less/mixins/mixins.less

@@ -2,3 +2,4 @@
 @import 'btn-mixins.less';
 @import 'table-responsive-mixins.less';
 @import 'responsive-mixins.less';
+@import 'focus-mixin.less';

src/less/style.less

@@ -9,7 +9,9 @@
 @import "blocks/form.less";
 @import "blocks/field-text.less";
 @import "blocks/field-checkbox.less";
+@import "blocks/field-checkbox--custom.less";
 @import "blocks/field-radio.less";
+@import "blocks/field-radio--custom.less";
 @import "blocks/field-select.less";
 @import "blocks/field-file.less";
 @import "blocks/field-actions.less";