fxs

TODO

 ☐ Добавить сексуальную стилизацию страницы библиотеки компонентов
 ☐ Нормализовать список NPM-команд на сборку, сборку без карт, деплой...
 ☐ Сделать: таблицы — адаптивные таблицы — добавлять дата-атрибуты JS-ом
-☐ Сделать: Кнопки: группа, в т.ч. с выпадающими элементами
-☐ Сделать: Флажки и радиокнопки, выглядящеи как обычные кнопки
+☐ Сделать: Флажки и радиокнопки, выглядящие как обычные кнопки
 ☐ Сделать: Кнопка с иконкой
 ☐ Сделать: Кнопка-иконка
 ☐ Сделать: Алерт
@@ -43,3 +42,4 @@
 ✔ Сделать: Текстовые поля: группа (в т.ч. с кнопками) @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

@@ -4,8 +4,9 @@
 
 .btn-group {
   display: inline-flex;
+  margin-bottom: (@line-height / 2);
 
-  .btn {
+  > .btn {
     margin-left: -1px;
 
     &:not(:last-child) {

src/blocks/checked-btn/checked-btn.html

+<!--DEV
+
+Нужно убрать пробел между @-ами:
+
+@ @include('blocks/checked-btn/checked-btn.html')
+
+-->
+<div class="checked-btn">content</div>

src/blocks/checked-btn/checked-btn.less

+@import "../../less/variables.less";     // только для удобства обращения к переменным
+@import "../../less/mixins/mixins.less"; // только для удобства обращения к примесям
+
+
+.checked-btn {
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    visibility: hidden;
+
+    &:checked {
+      & ~ .btn {
+        .btn-color--active(@text-color; @gray-lighter; @gray-lighter);
+      }
+      & ~ .btn--main {
+        .btn-color--active(#fff; @color-main; @color-main);
+      }
+      & ~ .btn--success {
+        .btn-color--active(#fff; @color-success; @color-success);
+      }
+      & ~ .btn--danger {
+        .btn-color--active(#fff; @color-danger; @color-danger);
+      }
+    }
+  }
+}

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

@@ -53,14 +53,5 @@
         border-bottom-left-radius: 0;
       }
     }
-
-    input {
-      position: relative;
-
-      &:focus {
-        z-index: 1;
-      }
-    }
-
   }
 }

src/blocks_library.html

@@ -661,6 +661,73 @@
           </span>
         </div>
 
+        <div class="btn-group">
+          <span role="presentation" class="dropdown">
+            <button class="dropdown__toggler  btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Выпадение от пр. края
+            </button>
+            <ul class="dropdown__menu  dropdown__menu--right">
+              <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
+              <li><a href="">Пункт меню весьма длинный</a></li>
+              <li><a href="">Второй пункт</a></li>
+            </ul>
+          </span>
+          <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">
+          <input type="radio" name="radio-btn" id="radio-btn-1">
+          <input type="radio" name="radio-btn" id="radio-btn-2">
+          <input type="radio" name="radio-btn" id="radio-btn-3">
+          <input type="radio" name="radio-btn" id="radio-btn-4">
+          <label class="btn" for="radio-btn-1">Флажок 1</label>
+          <label class="btn" for="radio-btn-2">Флажок 2</label>
+          <label class="btn" for="radio-btn-3">Флажок 3</label>
+          <label class="btn" for="radio-btn-4">Флажок 4</label>
+        </div>
+
       </div>
     </div>
   </section>

src/less/mixins/btn-mixins.less

 //------------------------------------------------------------------------------
 //  КНОПКИ
 //------------------------------------------------------------------------------
-//  Использование:
-//  .super-button {
-//    .btn();
-//    .btn-color-variant(@text-color; @gray-lighter; @gray-lighter);
-//  }
-//------------------------------------------------------------------------------
+
 
 //------------------------------------------------------------------------------
-//  Общие стиля любой кнопки
+//  Общие стили любой кнопки
 //------------------------------------------------------------------------------
 
 .btn() {
@@ -27,7 +22,6 @@
   box-sizing: border-box;
   border-radius: @border-radius;
 
-
   // &--hover,
   &:hover {
     text-decoration: none;
@@ -65,25 +59,55 @@
 
   // &--hover,
   &:hover {
-    color: @color;
-    background-color: darken(@background, 10%);
-    border-color: darken(@border, 12%);
+    .btn-color--hover(@color; @background; @border);
   }
 
   // &--active,
   &:active,
   &:focus {
-    color: @color;
-    background-color: darken(@background, 15%);
-    border-color: darken(@border, 17%);
+    .btn-color--active(@color; @background; @border);
   }
 
   // &--disabled,
   &:disabled {
+    .btn-color--disabled(@color; @background; @border);
+  }
+}
+
+
+
+//------------------------------------------------------------------------------
+//  Вспомогательная примесь-генератор цветовых стилей для hover
+//------------------------------------------------------------------------------
+
+.btn-color--hover(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
+  color: @color;
+  background-color: darken(@background, 10%);
+  border-color: darken(@border, 12%);
+}
+
+
+
+//------------------------------------------------------------------------------
+//  Вспомогательная примесь-генератор цветовых стилей для active и focus
+//------------------------------------------------------------------------------
+
+.btn-color--active(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
+  color: @color;
+  background-color: darken(@background, 15%);
+  border-color: darken(@border, 50%);
+}
+
+
+
+//------------------------------------------------------------------------------
+//  Вспомогательная примесь-генератор цветовых стилей для disabled
+//------------------------------------------------------------------------------
+
+.btn-color--disabled(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
   color: @color;
   background-color: @background;
   border-color: @border;
-  }
 }
 
 

src/less/style.less

@@ -24,3 +24,4 @@
 @import "./src/blocks/dropdown/dropdown.less";
 @import "./src/blocks/fields-group/fields-group.less";
 @import "./src/blocks/btn-group/btn-group.less";
+@import "./src/blocks/checked-btn/checked-btn.less";