need more groups!

TODO

+☐ Сделать: Текстовые поля: группа (в т.ч. с кнопками)
 ☐ Добавить сексуальную стилизацию страницы библиотеки компонентов
 ☐ Нормализовать список NPM-команд на сборку, сборку без карт, деплой...
 ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
 ☐ Сделать: Флажки и радиокнопки, выглядящие как обычные кнопки
+☐ Сделать: Вид занятой кнопки
 ☐ Сделать: Кнопка с иконкой
 ☐ Сделать: Кнопка-иконка
+☐ Сделать: Кнопки «одна или другая»
+☐ Сделать: Текстовое поле с иконкой (поиск, занято, произвольная...) справа и слева
+☐ Сделать: Текстовое поле в ошибочном состоянии
+☐ Сделать: Текстовое поле в подтвержденно-верном состоянии
 ☐ Сделать: Алерт
 ☐ Сделать: Прибитый подвал
 ☐ Сделать: Пагинация
@@ -39,7 +45,6 @@
 ✔ Сделать: Флажок-свитчер, радиокнопку-свитчер @done (16-03-05 12:44)
 ✔ Сделать: Селект с идентичными везде уголками и одинаковой высотой на win и osx @done (05.03.2016 20:18)
 ✔ Сделать: Дропдаун из любого элемента в любую сторону @done (07.03.2016 03:15)
-✔ Сделать: Текстовые поля: группа (в т.ч. с кнопками) @done (07.03.2016 23:03)
 ✔ Сделать: Текстовые поля: неинтерактивное дополнение справа, неинтерактивное дополнение слева @done (07.03.2016 23:04)
 ✔ Сделать: Текстовые поля: кнопка справа, кнопка слева @done (08.03.2016 16:11)
 ✔ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами @done (08.03.2016 18:33)

src/blocks/btn-group/btn-group.less

@@ -7,7 +7,6 @@
   margin-bottom: (@line-height / 2);
 
   > .btn {
-    margin-left: -1px;
 
     &:not(:last-child) {
       border-top-right-radius: 0;
@@ -21,7 +20,6 @@
   }
 
   > * {
-    margin-left: -1px;
 
     &:not(:last-child) {
       .btn {

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

@@ -6,6 +6,10 @@
   display: flex;
   margin-bottom: (@line-height / 2);
 
+  &--inline {
+    display: inline-flex;
+  }
+
   &__item {
     margin-bottom: 0;
     flex-basis: 100%;
@@ -38,20 +42,29 @@
     }
 
     &:not(:last-child) {
-      input {
+      input,
+      select {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
     }
 
     &:not(:first-child) {
+      // margin-left: -1px;
 
-      margin-left: (@border-width * -1);
-
-      input {
+      input,
+      select {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
     }
   }
+
+  * {
+    position: relative;
+
+    &:focus {
+      z-index: 1;
+    }
+  }
 }

src/blocks_library.html

@@ -595,8 +595,17 @@
               <label class="field-text  fields-group__item">
                 <input class="field-text__input" type="text" placeholder="input[type=text]">
               </label>
-              <label class="field-text  fields-group__item">
-                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              <label class="field-select  fields-group__item">
+                <div class="field-select__select-wrap">
+                  <select class="field-select__select">
+                    <optgroup label="Группа">
+                      <option>Значение 1</option>
+                      <option>Значение 2</option>
+                      <option>Значение 3</option>
+                    </optgroup>
+                    <option>Значение 10</option>
+                  </select>
+                </div>
               </label>
               <label class="field-text  fields-group__item">
                 <input class="field-text__input" type="text" placeholder="input[type=text]">
@@ -616,6 +625,14 @@
                 <small class="field-select__help-text">Пояснение еще.</small>
               </label>
             </div>
+            <div class="fields-group  fields-group--inline">
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+            </div>
             <div class="fields-group">
               <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
                 $
@@ -675,46 +692,6 @@
           <button class="btn">Отправить</button>
         </div>
 
-        <h3>Флажки (чекбоксы) как кнопки</h3>
-
-        <!-- <div class="btn-group">
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn">Флажок 1</span>
-          </label>
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn  btn--main">Флажок 2</span>
-          </label>
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn  btn--danger">Флажок 3</span>
-          </label>
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn  btn--success">Флажок 4</span>
-          </label>
-        </div> -->
-
-        <!-- <div class="btn-group">
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn">Флажок 1</span>
-          </label>
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn">Флажок 2</span>
-          </label>
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn">Флажок 3</span>
-          </label>
-          <label class="checked-btn">
-            <input type="checkbox">
-            <span class="btn">Флажок 4</span>
-          </label>
-        </div> -->
-
         <h3>Радиокнопки как кнопки</h3>
 
         <div class="btn-group  checked-btns">
@@ -728,6 +705,10 @@
           <label class="btn" for="radio-btn-4">Флажок 4</label>
         </div>
 
+        <h3>Флажки (чекбоксы) как кнопки</h3>
+
+        <p>TODO</p>
+
       </div>
     </div>
   </section>

src/less/global-scaffolding.less

@@ -417,7 +417,7 @@ input[type="tel"] {
   vertical-align: middle;
   width: 100%;
   line-height: @line-height;
-  min-height: 2.125em;
+  height: 2.125em;
   padding: @field-padding-top @field-padding-horizontal @field-padding-bottom;
 }