field-select add

src/blocks/field-select/field-select--lg.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.field-select {
+
+  &--lg {
+    font-size: @font-size--h3;
+  }
+}

src/blocks/field-select/field-select--sm.less

+@import '../../less/variables.less';     // только для удобства обращения к переменным
+
+
+.field-select {
+
+  &--sm {
+    font-size: @font-size--small;
+
+    .field-select__select {
+      &[multiple] {
+        min-height: 7.5em;
+      }
+    }
+  }
+}

src/blocks_library.html

@@ -1122,6 +1122,82 @@
         </label>
       </div>
     </div>
+    <div class="blocks-library__sub-item">
+      <b class="blocks-library__sub-item-title"><code>.field-select.field-select--lg</code> (отдельный less-файл)</b>
+      <p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
+      <div class="row">
+        <div class="col-md-6">
+          <label class="field-select  field-select--lg">
+            <div class="field-select__name">Селект</div>
+            <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>
+              <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
+            </div>
+          </label>
+        </div>
+        <div class="col-md-6">
+          <label class="field-select  field-select--lg">
+            <div class="field-select__name">Множественный селект</div>
+            <div class="field-select__select-wrap">
+              <select class="field-select__select" multiple>
+                <optgroup label="Группа">
+                  <option>Значение 1</option>
+                  <option>Значение 2</option>
+                  <option>Значение 3</option>
+                </optgroup>
+                <option>Значение 10</option>
+              </select>
+              <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+    <div class="blocks-library__sub-item">
+      <b class="blocks-library__sub-item-title"><code>.field-select.field-select--sm</code> (отдельный less-файл)</b>
+      <p>Размер изменён благодаря модификатору. Модификатор меняет <code>font-size</code> блока в <code>em</code>-ах (реальный размер блока продолжает зависеть от размера шрифта родителя).</p>
+      <div class="row">
+        <div class="col-md-6">
+          <label class="field-select  field-select--sm">
+            <div class="field-select__name">Селект</div>
+            <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>
+              <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
+            </div>
+          </label>
+        </div>
+        <div class="col-md-6">
+          <label class="field-select  field-select--sm">
+            <div class="field-select__name">Множественный селект</div>
+            <div class="field-select__select-wrap">
+              <select class="field-select__select" multiple>
+                <optgroup label="Группа">
+                  <option>Значение 1</option>
+                  <option>Значение 2</option>
+                  <option>Значение 3</option>
+                </optgroup>
+                <option>Значение 10</option>
+              </select>
+              <small class="field-select__help-text">Обёртка — <code>&lt;label&gt;</code>.</small>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
   </section>
 
 

src/less/style.less

@@ -24,6 +24,8 @@
 @import './src/blocks/field-radio/field-radio--lg.less';
 @import './src/blocks/field-radio/field-radio--sm.less';
 @import './src/blocks/field-select/field-select.less';
+@import './src/blocks/field-select/field-select--lg.less';
+@import './src/blocks/field-select/field-select--sm.less';
 @import './src/blocks/field-range/field-range.less';
 @import './src/blocks/field-file/field-file.less';
 @import './src/blocks/field-actions/field-actions.less';