global styles forms

src/blocks/fields-group/fields-group.less

@@ -18,7 +18,7 @@
       white-space: nowrap;
       background-color: @gray-lighter;
       color: @gray;
-      border: @border-width solid @border-color;
+      border: 1px solid @border-color;
       border-radius: @border-radius;
       display: inline-block;
       vertical-align: middle;
@@ -50,7 +50,7 @@
     }
 
     &:not(:first-child) {
-      // margin-left: -1px;
+      margin-left: -1px;
 
       input,
       select {

src/blocks_library.html

@@ -590,7 +590,8 @@
 
         <form action="" class="form">
           <fieldset>
-            <legend>Группы полей</legend>
+            <h3>Группы текстовых полей, селектов, кнопок</h3>
+            <p>Плюс возможные добавочные неинтерактивные элементы.</p>
             <div class="fields-group">
               <label class="field-text  fields-group__item">
                 <input class="field-text__input" type="text" placeholder="input[type=text]">

src/less/global-forms.less

+//------------------------------------------------------------------------------
+//  Формы
+//------------------------------------------------------------------------------
+
+label {
+  display: inline-block;
+}
+
+button {
+  overflow: visible;
+
+  &:focus {
+    outline: 1px dotted;
+    outline: 5px auto -webkit-focus-ring-color;
+  }
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  line-height: inherit;
+  font: inherit;
+  text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+input[type="search"] {
+  -webkit-appearance: none;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+::placeholder {
+  color: @text-color--muted;
+  opacity: 1;
+}
+
+textarea {
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  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;
+}
+
+// Добавочная стилизация по умолчанию
+
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="color"],
+input[type="tel"] {
+  background-color: #fff;
+  border: 1px solid @border-color;
+  border-radius: @border-radius;
+  display: inline-block;
+  vertical-align: middle;
+  width: 100%;
+  line-height: @line-height;
+  height: 2.125em;
+  padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
+}
+
+textarea,
+select[multiple] {
+  height: auto;
+}
+
+input[type="color"] {
+  max-width: 100px;
+}
+
+input[type="range"] {
+  width: 100%;
+}
+
+input[disabled],
+input[readonly] {
+  background-color: @gray-lighter;
+}
+
+select,
+textarea,
+input {
+  &:focus {
+    .focus();
+  }
+}

src/less/global-scaffolding.less

@@ -304,145 +304,3 @@ th {
 td {
   padding: .3em;
 }
-
-
-
-//------------------------------------------------------------------------------
-//  Формы
-//------------------------------------------------------------------------------
-
-label {
-  display: inline-block;
-}
-
-button {
-  overflow: visible;
-
-  &:focus {
-    outline: 1px dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-  }
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  line-height: inherit;
-  font: inherit;
-  text-transform: none;
-}
-
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-
-input[type="search"] {
-  -webkit-appearance: none;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  padding: 0;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-::placeholder {
-  color: @text-color--muted;
-  opacity: 1;
-}
-
-textarea {
-  resize: vertical;
-}
-
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  border: 0;
-  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;
-}
-
-// Добавочная стилизация по умолчанию
-
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="color"],
-input[type="tel"] {
-  background-color: #fff;
-  border: @border-width solid @border-color;
-  border-radius: @border-radius;
-  display: inline-block;
-  vertical-align: middle;
-  width: 100%;
-  line-height: @line-height;
-  height: 2.125em;
-  padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
-}
-
-textarea,
-select[multiple] {
-  height: auto;
-}
-
-input[type="color"] {
-  max-width: 100px;
-}
-
-input[type="range"] {
-  width: 100%;
-}
-
-input[disabled],
-input[readonly] {
-  background-color: @gray-lighter;
-}
-
-select,
-textarea,
-input {
-  &:focus {
-    .focus();
-  }
-}

src/less/style.less

@@ -4,6 +4,7 @@
 @import "./src/less/global-scaffolding.less";
 @import "./src/less/global-print.less";
 @import "./src/less/global-grid.less";
+@import "./src/less/global-forms.less";
 
 @import "./src/blocks/btn/btn.less";
 @import "./src/blocks/table-responsive/table-responsive.less";

src/less/variables.less

@@ -89,6 +89,5 @@
 // Разное
 
 @border-radius:               .3rem;       // универсальное сглаживание углов бордюра
-@border-width:                1px;         // универсальная толщина бордюра
 @opacity:                     .7;          // универсальная прозрачность
 @transition-time:             .3s;         // время плавных переходов