fields-group fix

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

@@ -41,9 +41,11 @@
       }
     }
 
+    // &--dropdown {} // Вынесено в отдельный файл, т.к. ситуация специфическая, редкая
+
     &:not(:last-child) {
-      input,
-      select {
+      .field-text__input,
+      .field-select__select {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
       }
@@ -52,19 +54,22 @@
     &:not(:first-child) {
       margin-left: -1px;
 
-      input,
-      select {
+      .field-text__input,
+      .field-select__select {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
     }
   }
 
-  * {
+  .field-text__input,
+  .field-select__select,
+  .btn {
     position: relative;
-
-    &:focus {
     z-index: 1;
+
+    &:not(:focus) {
+      z-index: 0;
     }
   }
 }

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

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

src/blocks_library.html

@@ -641,8 +641,24 @@
               <label class="field-text  fields-group__item">
                 <input class="field-text__input" type="text" placeholder="input[type=text]">
               </label>
+            </div>
+            <div class="fields-group">
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
               <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
-                какой-то текст
+                .00
+              </span>
+            </div>
+            <div class="fields-group">
+              <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+                $
+              </span>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <span class="fields-group__item  fields-group__item--addon  fields-group__item--text">
+                .00
               </span>
             </div>
             <div class="fields-group">
@@ -655,8 +671,85 @@
               <button class="btn  fields-group__item  fields-group__item--addon">Отправить</button>
               <button class="btn  fields-group__item  fields-group__item--addon">Отменить</button>
             </div>
-            <div class="field-actions">
-              <button class="btn">Отправить</button>
+            <div class="fields-group">
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <span role="presentation" class="dropdown  fields-group__item--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>
+            </div>
+            <div class="fields-group">
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <span role="presentation" class="dropdown  fields-group__item--dropdown">
+                <button class="dropdown__toggler  btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  Выпадение
+                </button>
+                <ul class="dropdown__menu">
+                  <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
+                  <li><a href="">Пункт меню весьма длинный</a></li>
+                  <li><a href="">Второй пункт</a></li>
+                </ul>
+              </span>
+              <span role="presentation" class="dropdown  fields-group__item--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>
+            </div>
+            <div class="fields-group">
+              <span role="presentation" class="dropdown  fields-group__item--dropdown">
+                <button class="dropdown__toggler  btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  Выпадение
+                </button>
+                <ul class="dropdown__menu">
+                  <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
+                  <li><a href="">Пункт меню весьма длинный</a></li>
+                  <li><a href="">Второй пункт</a></li>
+                </ul>
+              </span>
+              <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 role="presentation" class="dropdown  fields-group__item--dropdown">
+                <button class="dropdown__toggler  btn" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                  Выпадение
+                </button>
+                <ul class="dropdown__menu">
+                  <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
+                  <li><a href="">Пункт меню весьма длинный</a></li>
+                  <li><a href="">Второй пункт</a></li>
+                </ul>
+              </span>
+              <label class="field-text  fields-group__item">
+                <input class="field-text__input" type="text" placeholder="input[type=text]">
+              </label>
+              <span role="presentation" class="dropdown  fields-group__item--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>
             </div>
           </fieldset>
         </form>

src/less/mixins/btn-mixins.less

@@ -95,7 +95,7 @@
 .btn-color--active(@color: @text-color; @background: @gray-lighter; @border: @gray-lighter) {
   color: @color;
   background-color: darken(@background, 15%);
-  border-color: darken(@border, 50%);
+  border-color: darken(@border, 17%);
 }
 
 

src/less/style.less

@@ -24,5 +24,6 @@
 @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/fields-group/fields-group__item--dropdown.less";
 @import "./src/blocks/btn-group/btn-group.less";
 @import "./src/blocks/checked-btn/checked-btn.less";