btn-group

TODO

@@ -2,7 +2,6 @@
 ☐ Нормализовать список NPM-команд на сборку, сборку без карт, деплой...
 ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
 ☐ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами
-☐ Сделать: Текстовые поля: кнопка справа, кнопка слева
 ☐ Сделать: Флажки и радиокнопки, выглядящеи как обычные кнопки
 ☐ Сделать: Кнопка с иконкой
 ☐ Сделать: Кнопка-иконка
@@ -43,3 +42,4 @@
 ✔ Сделать: Дропдаун из любого элемента в любую сторону @done (07.03.2016 03:15)
 ✔ Сделать: Текстовые поля: группа (в т.ч. с кнопками) @done (07.03.2016 23:03)
 ✔ Сделать: Текстовые поля: неинтерактивное дополнение справа, неинтерактивное дополнение слева @done (07.03.2016 23:04)
+✔ Сделать: Текстовые поля: кнопка справа, кнопка слева @done (08.03.2016 16:11)

src/blocks/btn-group/btn-group.html

+<!--DEV
+
+<div class="btn-group">
+  <button class="btn">Отправить</button>
+  <button class="btn  btn--main">Отменить</button>
+  <button class="btn">Отменить</button>
+</div>
+
+-->

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

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.btn-group {
+  display: inline-flex;
+
+  .btn {
+    &:not(:last-child) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:not(:first-child) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+}

src/blocks_library.html

@@ -643,6 +643,14 @@
           </fieldset>
         </form>
 
+        <h3>Группа кнопок</h3>
+
+        <div class="btn-group">
+          <button class="btn">Отправить</button>
+          <button class="btn  btn--main">Отменить</button>
+          <button class="btn">Отменить</button>
+        </div>
+
       </div>
     </div>
   </section>

src/less/style.less

@@ -23,3 +23,4 @@
 @import "./src/blocks/field-toggler/field-toggler.less";
 @import "./src/blocks/dropdown/dropdown.less";
 @import "./src/blocks/fields-group/fields-group.less";
+@import "./src/blocks/btn-group/btn-group.less";